Update colors for v9 theme light (#1460)

Signed-off-by: Viraj Sanghvi <[email protected]>

CHANGELOG.md

@@ -10,6 +10,7 @@
 ### 📈 Features/Enhancements
 - Add vertical oriented button group ([#755](https://github.com/opensearch-project/oui/pull/755))
 - Add sparkleFilled icon ([#1452](https://github.com/opensearch-project/oui/pull/1452))
+- Update colors v9 theme ([#1460](https://github.com/opensearch-project/oui/pull/1460))
 
 ### 🐛 Bug Fixes
 
@@ -29,6 +30,7 @@
 
 ### 🔩 Tests
 
+
 ## [`1.17.0`](https://github.com/opensearch-project/oui/tree/1.17)
 
 ### 📈 Features/Enhancements

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;

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;

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;

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%),

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 */

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,