+
diff --git a/mkdocs.yml b/mkdocs.yml
index 098af4a8..85da3eb2 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -151,7 +151,7 @@ theme:
palette:
primary: 'blue grey'
accent: 'deep orange'
- logo: 'images/ibexa-dxp-logo.png'
+ logo: 'images/cohesivo-logo.svg'
extra:
append_bootstrap:
diff --git a/scss/_variables.scss b/scss/_variables.scss
index b10c3396..e017c434 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1,23 +1,62 @@
+// Cohesivo palette.
+//
+// Values mirror the product design system, converted from oklch() to sRGB hex:
+// vendor/ibexa/admin-ui-assets/src/bundle/Resources/public/vendors/ids-assets/dist/scss/variables/_colors.scss
+//
+// Keep this file the single source of truth for colour in scss/. The hand-maintained
+// stylesheets in docs/css/ mirror the same values as --cohesivo-* custom properties.
+
$transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
$transition-duration: 0.4s;
-$color-primary-main: #A32768;
-
-$color-dark-85-white: #DCDDDE;
-$color-dark-100-white: #FFFFFF;
-
-$color-info-main: #5DA7C0;
-
-$color-success-main: #2C9445;
-
-$color-error-main: #C4234A;
-
-$color-warning-dark-01: #D3822B;
-
-$color-primary: #AE1164;
-
-$color-light: #E0E0E8;
-$color-light-400: #ECECF1;
-
-$color-dark: #131C26;
-$color-dark-400: #71767C;
+// Primary — violet
+$color-primary-100: #391b79;
+$color-primary-80: #4e24a5;
+$color-primary-60: #612dcd;
+$color-primary-40: #7f53da;
+$color-primary-5: #cfbef1;
+$color-primary-0: #e7def8;
+
+// Primary alt — lighter violet, used for gradients and shadow tints
+$color-primary-alt-80: #7742d5;
+$color-primary-alt-40: #b497e8;
+
+// Neutral
+$color-neutral-240: #0e1216;
+$color-neutral-200: #3e4145;
+$color-neutral-160: #6e7173;
+$color-neutral-60: #e7e7e8;
+$color-neutral-50: #ececec;
+$color-neutral-30: #f5f6f6;
+$color-neutral-10: #ffffff;
+
+// Semantic
+$color-info-100: #003f63;
+$color-info-80: #19628f;
+$color-info-5: #edf2f7;
+
+$color-success-100: #146d00;
+$color-success-80: #378f19;
+
+$color-error-80: #ba2124;
+
+$color-warning-110: #a85000;
+$color-warning-80: #dc8004;
+$color-warning-10: #fcefde;
+
+// Gradient — $gradient-primary-1 in the design system
+$gradient-primary: linear-gradient(90deg, $color-primary-80 40%, $color-primary-alt-40 100%);
+
+// Shadows are tinted with primary-alt, matching ids-assets/.../_shadows.scss
+$shadow-tile: 4px 22px 47px rgba($color-primary-alt-80, 0.05);
+$shadow-tile-hover: 0 22px 24px 0 rgba($color-primary-alt-80, 0.15);
+
+// Aliases kept for readability at call sites
+$color-primary: $color-primary-80;
+$color-primary-main: $color-primary-80;
+$color-dark: $color-neutral-240;
+$color-dark-400: $color-neutral-160;
+$color-light: $color-neutral-60;
+$color-light-400: $color-neutral-50;
+$color-dark-85-white: $color-neutral-60;
+$color-dark-100-white: $color-neutral-10;
diff --git a/scss/front-page.scss b/scss/front-page.scss
index aa19cea5..e3d947d5 100644
--- a/scss/front-page.scss
+++ b/scss/front-page.scss
@@ -1,26 +1,4 @@
-
-$ibexa-color-primary: #ae1164;
-
-$ibexa-color-danger: #db0032;
-
-$ibexa-color-info-700: #275799;
-$ibexa-color-info-600: #3474cc;
-
-$ibexa-color-dark: #131c26;
-$ibexa-color-dark-400: #71767c;
-
-$ibexa-color-light: #e0e0e8;
-$ibexa-color-light-300: #f3f3f6;
-$ibexa-color-light-400: #ececf1;
-
-$ibexa-color-white: #ffffff;
-
-$ibexa-color-complementary: #47bedb;
-$ibexa-color-complementary-800: #1c4c58;
-$ibexa-color-complementary-700: #2b7283;
-$ibexa-color-complementary-300: #b5e5f0;
-$ibexa-color-complementary-200: #daf2f7;
-$ibexa-color-complementary-100: #ecf8fb;
+@use 'variables';
@mixin list() {
margin: 0 0 0 12px;
@@ -79,13 +57,13 @@ body {
}
.info-tile {
- border: 1px solid $ibexa-color-light-400;
+ border: 1px solid variables.$color-neutral-50;
border-radius: 12px;
padding: 12px;
display: flex;
align-items: center;
flex: 1;
- box-shadow: 4px 22px 47px rgba(52, 116, 204, 0.05);
+ box-shadow: variables.$shadow-tile;
height: 100%;
&--link-card {
@@ -98,7 +76,7 @@ body {
h3 {
svg {
- fill: $ibexa-color-primary;
+ fill: variables.$color-primary-80;
width: 16px;
height: 16px;
margin-right: 4px;
@@ -107,7 +85,7 @@ body {
}
a {
- color: $ibexa-color-dark;
+ color: variables.$color-neutral-240;
text-decoration: underline;
}
}
@@ -129,7 +107,7 @@ body {
height: 100%;
font-size: 12px;
line-height: 18px;
- color: $ibexa-color-dark-400;
+ color: variables.$color-neutral-160;
display: flex;
flex-direction: column;
justify-content: center;
@@ -150,7 +128,7 @@ body {
font-size: 22px;
line-height: 26px;
margin-top: 8px;
- color: $ibexa-color-dark;
+ color: variables.$color-neutral-240;
}
}
@@ -159,14 +137,14 @@ body {
justify-content: flex-end;
align-items: center;
font-size: 10px;
- color: $ibexa-color-primary;
+ color: variables.$color-primary-80;
}
&__arrow-icon {
width: 13px;
height: 13px;
margin-left: 4px;
- fill: $ibexa-color-primary;
+ fill: variables.$color-primary-80;
}
h3 {
@@ -188,9 +166,12 @@ body {
}
a.info-tile {
+ // The whole tile is the link; underlining it would strike through the copy.
+ text-decoration: none;
+
&:hover {
- border-color: $ibexa-color-primary;
- box-shadow: 0px 22px 24px 0px rgba(174, 17, 100, 0.10);
+ border-color: variables.$color-primary-80;
+ box-shadow: variables.$shadow-tile-hover;
text-decoration: none;
}
}
@@ -202,7 +183,7 @@ body {
.notification {
border-radius: 12px;
- color: $ibexa-color-dark;
+ color: variables.$color-neutral-240;
font-size: 12px;
padding: 32px;
position: relative;
@@ -223,11 +204,11 @@ body {
}
a {
- color: $ibexa-color-dark;
+ color: variables.$color-neutral-240;
text-decoration: underline;
&:hover {
- color: $ibexa-color-info-600;
+ color: variables.$color-info-80;
}
}
}
@@ -243,7 +224,7 @@ body {
padding: 15px 16px;
border-radius: 12px;
font-size: 14px;
- color: $ibexa-color-primary;
+ color: variables.$color-primary-80;
& + a {
margin-left: 8px;
@@ -275,15 +256,15 @@ body {
&__cta {
a {
- background: linear-gradient(to right, $ibexa-color-danger 0%, $ibexa-color-primary 100%);
- color: $ibexa-color-white;
+ background: variables.$gradient-primary;
+ color: variables.$color-neutral-10;
}
}
}
}
&--lts-update {
- border: 2px solid $ibexa-color-light;
+ border: 2px solid variables.$color-neutral-60;
height: calc(100%);
padding-top: 30px;
@@ -291,7 +272,7 @@ body {
&__cta {
a {
&:first-child {
- border: 1px solid $ibexa-color-primary;
+ border: 1px solid variables.$color-primary-80;
}
}
}
@@ -302,7 +283,7 @@ body {
.accordion {
$self: &;
- border: 1px solid $ibexa-color-light-400;
+ border: 1px solid variables.$color-neutral-50;
border-radius: 12px;
padding: 12px;
@@ -315,7 +296,7 @@ body {
box-shadow: none;
summary {
- border-bottom: 1px solid $ibexa-color-light;
+ border-bottom: 1px solid variables.$color-neutral-60;
padding-bottom: 16px;
margin-bottom: 16px;
@@ -331,11 +312,11 @@ body {
font-size: 14px;
a {
- color: $ibexa-color-dark;
+ color: variables.$color-neutral-240;
text-decoration: underline;
&:hover {
- color: $ibexa-color-info-600;
+ color: variables.$color-info-80;
}
}
diff --git a/scss/pills.scss b/scss/pills.scss
index f0843788..5292bab6 100644
--- a/scss/pills.scss
+++ b/scss/pills.scss
@@ -10,12 +10,14 @@
margin-right: 8px;
color: variables.$color-primary-main;
+ // Tones are picked from the Cohesivo ramps at steps that clear WCAG AA (4.5:1)
+ // as text on white — the lighter -80 steps of warning and success do not.
$types: (
- "headless": (variables.$color-error-main, "Headless"),
- "experience": (variables.$color-warning-dark-01, "Experience"),
- "commerce": (variables.$color-primary-main, "Commerce"),
- "lts-update": (variables.$color-info-main, "LTS Update"),
- "new-feature": (variables.$color-success-main, "New feature")
+ "headless": (variables.$color-error-80, "Headless"),
+ "experience": (variables.$color-warning-110, "Experience"),
+ "commerce": (variables.$color-primary-80, "Commerce"),
+ "lts-update": (variables.$color-info-80, "LTS Update"),
+ "new-feature": (variables.$color-success-100, "New feature")
);
@each $name, $values in $types {
@@ -41,8 +43,7 @@
&--new {
margin-right: 15px;
align-self: center;
- color: #d9e8ff;
- color: #3562a0;
+ color: variables.$color-info-80;
text-transform: lowercase;
}
}