Update colors for v9 theme light (#1460)

Signed-off-by: Viraj Sanghvi <[email protected]> (cherry picked from commit a668175) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> # Conflicts: # CHANGELOG.md
opensearch-project · Nov 18, 2024 · fb66621 · fb66621
1 parent 1f3e381
commit fb66621
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 23 deletions.
diff --git a/src/themes/v9/global_styling/variables/_buttons.scss b/src/themes/v9/global_styling/variables/_buttons.scss
@@ -13,11 +13,10 @@ $ouiButtonHeight: $ouiSizeXXL !default;
 $ouiButtonHeightSmall: $ouiSizeXL !default;
 $ouiButtonHeightXSmall: $ouiSizeL !default;
 
-// sass-lint:disable no-color-literals
-$ouiButtonColorDisabled: lightOrDarkTheme(#D7D9DD, $ouiColorLightShade) !default;
+
+$ouiButtonColorDisabled: tintOrShade($ouiTextColor, 70%, 70%) !default;
 // Only increase the contrast of background color to text to 2.0 for disabled
-$ouiButtonColorDisabledText: lightOrDarkTheme($ouiColorDarkShade, #7F878F) !default;
-// sass-lint:disable no-color-literals
+$ouiButtonColorDisabledText: makeDisabledContrastColor($ouiButtonColorDisabled) !default;
 $ouiButtonColorGhostDisabled: lightOrDarkTheme($ouiColorDarkShade, $ouiColorLightShade) !default;
 
 $ouiButtonBorderRadius: $ouiBorderRadius !default;

diff --git a/src/themes/v9/global_styling/variables/_colors.scss b/src/themes/v9/global_styling/variables/_colors.scss
@@ -28,21 +28,21 @@ $ouiColorDanger: #C43D35 !default;
 
 // Grays
 $ouiColorEmptyShade: #FCFEFF !default;
-$ouiColorLightestShade: #EAECEE !default;
-$ouiColorLightShade: #D7D9DD !default;
-$ouiColorMediumShade: #A8ADB3 !default;
-$ouiColorDarkShade: #5F6872 !default;
-$ouiColorDarkestShade: #18212A !default;
-$ouiColorFullShade: #02020E !default;
+$ouiColorLightestShade: #E3E5E8 !default;
+$ouiColorLightShade: #D6D9DD !default;
+$ouiColorMediumShade: #ADB4BA !default;
+$ouiColorDarkShade: #5A6875 !default;
+$ouiColorDarkestShade: #2A3947 !default;
+$ouiColorFullShade: #0A1219 !default;
 
 // Backgrounds
 $ouiPageBackgroundColor: #F0F2F4 !default;
 $ouiColorHighlight: #FFE1B0 !default;
 
 // Every color below must be based mathematically on the set above and in a particular order.
-$ouiTextColor: #2A3947 !default;
-$ouiTitleColor: #1A2631 !default;
-$ouiTextSubduedColor: #676E75 !default;
+$ouiTextColor: $ouiColorDarkestShade !default;
+$ouiTitleColor: shade($ouiTextColor, 50%) !default;
+$ouiTextSubduedColor: makeHighContrastColor($ouiColorMediumShade) !default;
 $ouiColorDisabled: tint($ouiTextColor, 70%) !default;
 
 // Contrasty text variants
@@ -133,7 +133,7 @@ $ouiColorChartLines: shade($ouiColorLightestShade, 3%) !default;
 $ouiColorChartBand: $ouiColorLightestShade !default;
 
 // Code
-$ouiCodeBlockBackgroundColor: $ouiColorLightShade !default;
+$ouiCodeBlockBackgroundColor: $ouiColorLightestShade !default;
 $ouiCodeBlockColor: makeHighContrastColor($ouiTextColor, $ouiCodeBlockBackgroundColor) !default;
 $ouiCodeBlockSelectedBackgroundColor: inherit !default;
 $ouiCodeBlockCommentColor: makeHighContrastColor($ouiTextSubduedColor, $ouiCodeBlockBackgroundColor) !default;

diff --git a/src/themes/v9/global_styling/variables/_form.scss b/src/themes/v9/global_styling/variables/_form.scss
@@ -50,12 +50,12 @@ $ouiSwitchColors: (
 ) !default;
 
 // Coloring
-$ouiFormBackgroundColor: $ouiColorEmptyShade !default;
-$ouiFormBackgroundDisabledColor: $ouiColorLightestShade !default;
-$ouiFormBackgroundReadOnlyColor: $ouiColorEmptyShade !default;
+$ouiFormBackgroundColor: tintOrShade($ouiColorLightestShade, 60%, 40%) !default;
+$ouiFormBackgroundDisabledColor: darken($ouiColorLightestShade, 2%) !default;
+$ouiFormBackgroundReadOnlyColor: transparentize(lightOrDarkTheme($ouiColorLightShade, $ouiColorInk), .95) !default;
 $ouiFormBorderOpaqueColor: shadeOrTint(desaturate(adjust-hue($ouiColorPrimary, 22), 22.95), 26%, 100%) !default;
-$ouiFormBorderColor: lightOrDarkTheme(transparentize($ouiFormBorderOpaqueColor, .9), $ouiColorLightShade) !default;
-$ouiFormBorderDisabledColor: lightOrDarkTheme(transparentize($ouiFormBorderOpaqueColor, .9), $ouiColorLightestShade) !default;
+$ouiFormBorderColor: transparentize($ouiFormBorderOpaqueColor, .9) !default;
+$ouiFormBorderDisabledColor: transparentize($ouiFormBorderOpaqueColor, .9) !default;
 $ouiFormCustomControlDisabledIconColor: shadeOrTint($ouiColorMediumShade, 38%, 48.5%) !default; // exact 508c foreground for $ouiColorLightShade
 $ouiFormCustomControlBorderColor: shadeOrTint($ouiColorLightestShade, 18%, 30%) !default;
 $ouiFormControlDisabledColor: $ouiColorMediumShade !default;

diff --git a/src/themes/v9/global_styling/variables/_panel.scss b/src/themes/v9/global_styling/variables/_panel.scss
@@ -25,7 +25,7 @@ $ouiPanelBorderRadiusModifiers: (
 $ouiPanelBackgroundColorModifiers: (
   'transparent': transparent,
   'plain': $ouiColorEmptyShade,
-  'subdued': $ouiColorLightestShade,
+  'subdued': $ouiPageBackgroundColor,
   'accent':  tintOrShade($ouiColorAccent, 90%, 70%),
   'primary': tintOrShade($ouiColorPrimary, 90%, 70%),
   'success': tintOrShade($ouiColorSuccess, 90%, 70%),

diff --git a/src/themes/v9/global_styling/variables/_shadows.scss b/src/themes/v9/global_styling/variables/_shadows.scss
@@ -11,8 +11,8 @@
 
 // Shadows
 // Transparency only affects the use of variable this outside of the shadow mixins (borders)
-$ouiShadowColor: #ADB2B8 !default;
-$ouiShadowColorLarge: $ouiShadowColor !default;
+$ouiShadowColor: $ouiColorMediumShade !default;
+$ouiShadowColorLarge: shade(saturate($ouiColorMediumShade, 25%), 50%) !default;
 
 
 /* OUI -> EUI Aliases */

diff --git a/src/themes/v9/global_styling/variables/_tool_tip.scss b/src/themes/v9/global_styling/variables/_tool_tip.scss
@@ -9,7 +9,7 @@
  * GitHub history for details.
  */
 
-$ouiTooltipBackgroundColor: lightOrDarkTheme($ouiColorDarkestShade, $ouiColorLightestShade) !default; // sass-lint:disable-line no-color-literals
+$ouiTooltipBackgroundColor: lightOrDarkTheme($ouiColorDarkestShade, $ouiColorLightestShade) !default;
 
 $ouiTooltipAnimations: (
   top: ouiToolTipTop,