From ba5d9d5aecb479c3ef874799ebf82ec3433e301e Mon Sep 17 00:00:00 2001 From: "opensearch-trigger-bot[bot]" <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com> Date: Thu, 17 Oct 2024 19:21:38 -0700 Subject: [PATCH] Update v9 theme colors for light and dark mode (#1446) (#1447) Signed-off-by: Viraj Sanghvi (cherry picked from commit 6b95b8f0cca5e95cc7a9141b7aaa567df798d8d2) Signed-off-by: github-actions[bot] # Conflicts: # CHANGELOG.md Co-authored-by: github-actions[bot] --- .../v9/global_styling/variables/_buttons.scss | 6 +-- .../v9/global_styling/variables/_colors.scss | 40 ++++++++-------- .../v9/global_styling/variables/_form.scss | 10 ++-- .../v9/global_styling/variables/_shadows.scss | 4 +- .../global_styling/variables/_side_nav.scss | 2 +- .../global_styling/variables/_tool_tip.scss | 2 +- src/themes/v9/v9_colors_dark.scss | 48 ++++++++++--------- 7 files changed, 58 insertions(+), 54 deletions(-) diff --git a/src/themes/v9/global_styling/variables/_buttons.scss b/src/themes/v9/global_styling/variables/_buttons.scss index 9bff6c3ca..c83fb9a26 100644 --- 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 index 886005e92..c4f480fac 100644 --- 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 index 66de9613f..cba04a4d5 100644 --- 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 index bc5bdbcac..02f7fce39 100644 --- 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 index d52bfbfc5..c15642799 100644 --- 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 index 3211324fd..48f3bbf30 100644 --- 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 index b5fb62e13..67b1cf6b2 100644 --- a/src/themes/v9/v9_colors_dark.scss +++ b/src/themes/v9/v9_colors_dark.scss @@ -12,39 +12,39 @@ @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; @@ -52,7 +52,7 @@ $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; @@ -60,9 +60,12 @@ $ouiLinkColor: $ouiColorPrimaryText !default; $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 */