Update v9 theme colors for light and dark mode (#1446) (#1447)

Signed-off-by: Viraj Sanghvi <virajs@amazon.com> (cherry picked from commit 6b95b8f) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> # Conflicts: # CHANGELOG.md Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
opensearch-project · Oct 18, 2024 · ba5d9d5 · ba5d9d5
1 parent cb99369
commit ba5d9d5
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 54 deletions.
diff --git a/src/themes/v9/global_styling/variables/_buttons.scss b/src/themes/v9/global_styling/variables/_buttons.scss
@@ -14,11 +14,11 @@ $ouiButtonHeightSmall: $ouiSizeXL !default;
 $ouiButtonHeightXSmall: $ouiSizeL !default;
 
 // sass-lint:disable no-color-literals
-$ouiButtonColorDisabled: lightOrDarkTheme(#AFAFAF, #444444) !default;
+$ouiButtonColorDisabled: lightOrDarkTheme(#D7D9DD, $ouiColorLightShade) !default;
 // Only increase the contrast of background color to text to 2.0 for disabled
-$ouiButtonColorDisabledText: lightOrDarkTheme(#8E8E8E, #585858) !default;
+$ouiButtonColorDisabledText: lightOrDarkTheme($ouiColorDarkShade, #7F878F) !default;
 // sass-lint:disable no-color-literals
-$ouiButtonColorGhostDisabled: lightOrDarkTheme(#707070, #353535) !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
@@ -13,37 +13,37 @@
 @import '../functions/index';
 
 // These colors stay the same no matter the theme
-$ouiColorGhost: #FFFFFF !default;
-$ouiColorInk: #001522 !default;
+$ouiColorGhost: #FCFEFF !default;
+$ouiColorInk: #02020E !default;
 
 // Core
-$ouiColorPrimary: #006EDB !default;
-$ouiColorSecondary: #107F6B !default;
-$ouiColorAccent: #9E4DC0 !default;
+$ouiColorPrimary: #0268BC !default;
+$ouiColorSecondary: #0F7B68 !default;
+$ouiColorAccent: #9C47BF !default;
 
 // Status
 $ouiColorSuccess: $ouiColorSecondary !default;
-$ouiColorWarning: #F25F25 !default;
-$ouiColorDanger: #BD271E !default;
+$ouiColorWarning: #E0A130 !default;
+$ouiColorDanger: #C43D35 !default;
 
 // Grays
-$ouiColorEmptyShade: #FFFFFF !default;
-$ouiColorLightestShade: #F5F5F5 !default;
-$ouiColorLightShade: #E5E5E5 !default;
-$ouiColorMediumShade: #A5A5A5 !default;
-$ouiColorDarkShade: #585858 !default;
-$ouiColorDarkestShade: #262626 !default;
-$ouiColorFullShade: #131313 !default;
+$ouiColorEmptyShade: #FCFEFF !default;
+$ouiColorLightestShade: #EAECEE !default;
+$ouiColorLightShade: #D7D9DD !default;
+$ouiColorMediumShade: #A8ADB3 !default;
+$ouiColorDarkShade: #5F6872 !default;
+$ouiColorDarkestShade: #18212A !default;
+$ouiColorFullShade: #02020E !default;
 
 // Backgrounds
-$ouiPageBackgroundColor: #F7F4F2 !default;
-$ouiColorHighlight: #FFF3E1 !default;
+$ouiPageBackgroundColor: #F0F2F4 !default;
+$ouiColorHighlight: #FFE1B0 !default;
 
 // Every color below must be based mathematically on the set above and in a particular order.
-$ouiTextColor: #042839 !default;
-$ouiTitleColor: #002E48 !default;
-$ouiTextSubduedColor: makeHighContrastColor($ouiColorMediumShade) !default;
-$ouiColorDisabled: #707070 !default;
+$ouiTextColor: #2A3947 !default;
+$ouiTitleColor: #1A2631 !default;
+$ouiTextSubduedColor: #676E75 !default;
+$ouiColorDisabled: tint($ouiTextColor, 70%) !default;
 
 // Contrasty text variants
 $ouiColorPrimaryText: makeHighContrastColor($ouiColorPrimary) !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: tintOrShade($ouiColorLightestShade, 60%, 40%) !default;
-$ouiFormBackgroundDisabledColor: darken($ouiColorLightestShade, 2%) !default;
-$ouiFormBackgroundReadOnlyColor: transparentize(lightOrDarkTheme($ouiColorLightShade, $ouiColorInk), .95) !default;
+$ouiFormBackgroundColor: $ouiColorEmptyShade !default;
+$ouiFormBackgroundDisabledColor: $ouiColorLightestShade !default;
+$ouiFormBackgroundReadOnlyColor: $ouiColorEmptyShade !default;
 $ouiFormBorderOpaqueColor: shadeOrTint(desaturate(adjust-hue($ouiColorPrimary, 22), 22.95), 26%, 100%) !default;
-$ouiFormBorderColor: transparentize($ouiFormBorderOpaqueColor, .9) !default;
-$ouiFormBorderDisabledColor: transparentize($ouiFormBorderOpaqueColor, .9) !default;
+$ouiFormBorderColor: lightOrDarkTheme(transparentize($ouiFormBorderOpaqueColor, .9), $ouiColorLightShade) !default;
+$ouiFormBorderDisabledColor: lightOrDarkTheme(transparentize($ouiFormBorderOpaqueColor, .9), $ouiColorLightestShade) !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/_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: $ouiColorMediumShade !default;
-$ouiShadowColorLarge: #585858 !default;
+$ouiShadowColor: #ADB2B8 !default;
+$ouiShadowColorLarge: $ouiShadowColor !default;
 
 
 /* OUI -> EUI Aliases */

diff --git a/src/themes/v9/global_styling/variables/_side_nav.scss b/src/themes/v9/global_styling/variables/_side_nav.scss
@@ -10,7 +10,7 @@
  */
 
 // Value not currently consumed by Side nav component
-$ouiSideNavBackgroundColor: lightOrDarkTheme(#EFE9E5, #001C28) !default; // sass-lint:disable-line no-color-literals
+$ouiSideNavBackgroundColor: $ouiColorEmptyShade !default; // sass-lint:disable-line no-color-literals
 
 $ouiSideNavEmphasizedBackgroundColor: transparentize($ouiColorPrimary, .8) !default;
 

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, #293847) !default; // sass-lint:disable-line no-color-literals
+$ouiTooltipBackgroundColor: lightOrDarkTheme($ouiColorDarkestShade, $ouiColorLightestShade) !default; // sass-lint:disable-line no-color-literals
 
 $ouiTooltipAnimations: (
   top: ouiToolTipTop,

diff --git a/src/themes/v9/v9_colors_dark.scss b/src/themes/v9/v9_colors_dark.scss
@@ -12,57 +12,60 @@
 @import 'global_styling/functions/index';
 
 // These colors stay the same no matter the theme
-$ouiColorGhost: #FFFFFF;
-$ouiColorInk: #000F15;
+$ouiColorGhost: #E3E5E9;
+$ouiColorInk: #02020E;
 
 // Core
-$ouiColorPrimary: #0082B4;
-$ouiColorSecondary: #118973;
-$ouiColorAccent: #A55AC3;
+$ouiColorPrimary: #0097D1;
+$ouiColorSecondary: #129079;
+$ouiColorAccent: #AA63C4;
 
 // Status
 $ouiColorSuccess: $ouiColorSecondary;
-$ouiColorWarning: #FFCA75;
-$ouiColorDanger: #CC5A53;
+$ouiColorWarning: #F4AE27;
+$ouiColorDanger: #CD5D56;
 
 // Grays
-$ouiColorEmptyShade: #001822;
-$ouiColorLightestShade: #1A1A1A;
-$ouiColorLightShade: #222222;
-$ouiColorMediumShade: #333333;
-$ouiColorDarkShade: #CCCCCC;
-$ouiColorDarkestShade: #E5E5E5;
-$ouiColorFullShade: #F5F5F5;
+$ouiColorEmptyShade: #0F171F;
+$ouiColorLightestShade: #19222B;
+$ouiColorLightShade: #2A3540;
+$ouiColorMediumShade: #5C666F;
+$ouiColorDarkShade: #959BA2;
+$ouiColorDarkestShade: #E3E5E9;
+$ouiColorFullShade: #FCFEFF;
 
 // Backgrounds
-$ouiPageBackgroundColor: #000F15;
-$ouiColorHighlight: #261C08;
+$ouiPageBackgroundColor: #02020E;
+$ouiColorHighlight: #3D2C0D;
 
 // Variations from core
-$ouiTextColor: $ouiColorFullShade;
-$ouiTitleColor: $ouiColorFullShade;
+$ouiTextColor: $ouiColorDarkShade;
+$ouiTitleColor: #C6C9CE;
 // Ensure contrast between subdued text and the page background
 // Should not be shaded as much as $ouiColorDisabled
-$ouiTextSubduedColor: makeHighContrastColor($ouiColorMediumShade);
-$ouiColorDisabled: tint($ouiTextColor, 70%) !default;
+$ouiTextSubduedColor: #798189;
+$ouiColorDisabled: $ouiColorLightestShade !default;
 
 // Contrasty text variants
 $ouiColorPrimaryText: makeHighContrastColor($ouiColorPrimary) !default;
 $ouiColorSecondaryText: makeHighContrastColor($ouiColorSecondary) !default;
 $ouiColorAccentText: makeHighContrastColor($ouiColorAccent) !default;
 $ouiColorWarningText: makeHighContrastColor($ouiColorWarning) !default;
 $ouiColorDangerText: makeHighContrastColor($ouiColorDanger) !default;
-$ouiColorDisabledText: makeDisabledContrastColor($ouiColorDisabled) !default;
+$ouiColorDisabledText: #798189 !default;
 $ouiColorSuccessText: $ouiColorSecondaryText !default;
 $ouiLinkColor: $ouiColorPrimaryText !default;
 
 // Charts
 $ouiColorChartLines: $ouiColorLightShade;
 $ouiColorChartBand: tint($ouiColorLightestShade, 2.5%);
 
+// Code
+$ouiCodeBlockBackgroundColor: $ouiColorLightestShade;
+
 // Shadows
 $ouiShadowColor: #000;
-$ouiShadowColorLarge: #000;
+$ouiShadowColorLarge: $ouiShadowColor;
 
 
 /* OUI -> EUI Aliases */
@@ -97,6 +100,7 @@ $euiColorSuccessText: $ouiColorSuccessText;
 $euiLinkColor: $ouiLinkColor;
 $euiColorChartLines: $ouiColorChartLines;
 $euiColorChartBand: $ouiColorChartBand;
+$euiCodeBlockBackgroundColor: $ouiCodeBlockBackgroundColor;
 $euiShadowColor: $ouiShadowColor;
 $euiShadowColorLarge: $ouiShadowColorLarge;
 /* End of Aliases */