Merge pull request #5837 from marcoscv-work/L0-colorChange

LPD-29322 - Improve L0 accessible colors to be closer to 3:1 ratio
liferay · Jul 9, 2024 · 38afae6 · 38afae6
2 parents 0531376 + d356216
commit 38afae6
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 13 deletions.
diff --git a/clayui.com/content/docs/css/color.mdx b/clayui.com/content/docs/css/color.mdx
@@ -188,9 +188,9 @@ import ClayUISwatch from '../../../src/components/ClayUISwatch';
 		varName="$primary"
 	/>
 	<ClayUISwatch
-		hex="#528eff"
+		hex="#5791ff"
 		lexiconName="Primary L0"
-		rgb="rgb(82, 142, 255)"
+		rgb="rgb(87, 145, 255)"
 		varName="$primary-l0"
 	/>
 	<ClayUISwatch
@@ -235,9 +235,9 @@ import ClayUISwatch from '../../../src/components/ClayUISwatch';
 		varName="$secondary"
 	/>
 	<ClayUISwatch
-		hex="#88889a"
+		hex="#9393a4"
 		lexiconName="Secondary L0"
-		rgb="rgb(136, 136, 154)"
+		rgb="rgb(147, 147, 164)"
 		varName="$secondary-l0"
 	/>
 	<ClayUISwatch

diff --git a/packages/clay-css/src/scss/atlas/variables/_globals.scss b/packages/clay-css/src/scss/atlas/variables/_globals.scss
@@ -111,7 +111,7 @@ $colors: map-merge(
 $primary: #0b5fff !default;
 $primary-d1: clay-darken($primary, 5.1) !default;
 $primary-d2: clay-darken($primary, 10) !default;
-$primary-l0: clay-lighten($primary, 13.92) !default;
+$primary-l0: clay-lighten($primary, 14.9) !default;
 $primary-l1: clay-lighten($primary, 22.94) !default;
 $primary-l2: clay-lighten($primary, 32.94) !default;
 $primary-l3: clay-lighten($primary, 44.9) !default;
@@ -120,8 +120,8 @@ $secondary: #6b6c7e !default;
 $secondary-d1: clay-darken(clay-saturate($secondary, 4.82), 20) !default;
 $secondary-d2: clay-darken(clay-saturate($secondary, 5.36), 23.92) !default;
 $secondary-l0: clay-lighten(
-	clay-saturate(clay-adjust-hue($secondary, 3), 0.03),
-	11.18
+	clay-saturate(clay-adjust-hue($secondary, 32), 1.25),
+	15.29
 ) !default;
 $secondary-l1: clay-lighten(
 	clay-saturate(clay-adjust-hue($secondary, -3), 5.39),

diff --git a/packages/clay-css/src/scss/cadmin/variables/_globals.scss b/packages/clay-css/src/scss/cadmin/variables/_globals.scss
@@ -129,7 +129,7 @@ $cadmin-colors: map-merge(
 $cadmin-primary: #0b5fff !default;
 $cadmin-primary-d1: clay-darken($cadmin-primary, 5.1) !default;
 $cadmin-primary-d2: clay-darken($cadmin-primary, 10) !default;
-$cadmin-primary-l0: clay-lighten($cadmin-primary, 13.92) !default;
+$cadmin-primary-l0: clay-lighten($cadmin-primary, 14.9) !default;
 $cadmin-primary-l1: clay-lighten($cadmin-primary, 22.94) !default;
 $cadmin-primary-l2: clay-lighten($cadmin-primary, 32.94) !default;
 $cadmin-primary-l3: clay-lighten($cadmin-primary, 44.9) !default;
@@ -144,8 +144,8 @@ $cadmin-secondary-d2: clay-darken(
 	23.92
 ) !default;
 $cadmin-secondary-l0: clay-lighten(
-	clay-saturate(clay-adjust-hue($cadmin-secondary, 3), 0.03),
-	11.18
+	clay-saturate(clay-adjust-hue($cadmin-secondary, 32), 1.25),
+	15.29
 );
 $cadmin-secondary-l1: clay-lighten(
 	clay-saturate(clay-adjust-hue($cadmin-secondary, -3), 5.39),

diff --git a/packages/clay-css/src/scss/variables/_globals.scss b/packages/clay-css/src/scss/variables/_globals.scss
@@ -112,15 +112,15 @@ $colors: map-merge(
 $primary: $blue !default;
 $primary-d1: clay-darken($primary, 7.5) !default;
 $primary-d2: clay-darken($primary, 10) !default;
-$primary-l0: clay-lighten($primary, 13.92) !default;
+$primary-l0: clay-lighten($primary, 17.06) !default;
 $primary-l1: clay-lighten($primary, 22.94) !default;
 $primary-l2: clay-lighten($primary, 32.94) !default;
 $primary-l3: clay-lighten($primary, 44.9) !default;
 
 $secondary: $gray-600 !default;
 $secondary-d1: clay-darken($secondary, 7.5) !default;
 $secondary-d2: clay-darken($secondary, 10) !default;
-$secondary-l0: clay-lighten($secondary, 11) !default;
+$secondary-l0: clay-lighten($secondary, 15.29) !default;
 $secondary-l1: clay-lighten($secondary, 22.94) !default;
 $secondary-l2: clay-lighten($secondary, 32.94) !default;
 $secondary-l3: clay-lighten($secondary, 44.9) !default;

diff --git a/packages/clay-tabs/docs/markup-tabs.md b/packages/clay-tabs/docs/markup-tabs.md
@@ -1215,7 +1215,7 @@ $nav-underline-link-highlight-left: 0 !default;
 $nav-underline-link-highlight-right: 0 !default;
 $nav-underline-link-highlight-top: null !default;
 
-$nav-underline-link-active-highlight: #528EFF !default;
+$nav-underline-link-active-highlight: #5791ff !default;
 $nav-underline-link-active-content: '' !default;
 $nav-underline-link-active-highlight-height: 0.125rem !default; // 2px