diff --git a/CHANGELOG.md b/CHANGELOG.md index fa1d289a5..a9e8997d2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,10 +12,12 @@ ### 📈 Features/Enhancements - Reduce the gap between the elements of a compressed OuiSearchBar ([#1426](https://github.com/opensearch-project/oui/pull/1426)) +- Update colors for v9 theme ([#1430](https://github.com/opensearch-project/oui/pull/1430)) ### 🐛 Bug Fixes - Fix naming conventions in OuiSearchBar code and docs ([#1426](https://github.com/opensearch-project/oui/pull/1426)) +- Revert button background color configurability ([#1430](https://github.com/opensearch-project/oui/pull/1430)) ### 🚞 Infrastructure diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss index cdb0c9b08..5f1cdd68d 100644 --- a/src/components/button/_button.scss +++ b/src/components/button/_button.scss @@ -20,7 +20,6 @@ } border-radius: $ouiButtonBorderRadius; - background-color: $ouiButtonBackgroundColor; min-width: $ouiButtonMinWidth; .ouiButton__content { @@ -84,7 +83,6 @@ @if ($name == 'ghost') { // Ghost is unique and ALWAYS sits against a dark background. color: $color; - background-color: transparent; } @else if ($name == 'text') { // The default color is lighter than the normal text color, make the it the text color color: $ouiTextColor; diff --git a/src/components/button/button_group/_button_group.scss b/src/components/button/button_group/_button_group.scss index a903f2ca8..5ee8a0b48 100644 --- a/src/components/button/button_group/_button_group.scss +++ b/src/components/button/button_group/_button_group.scss @@ -32,7 +32,6 @@ @include ouiSlightShadow; } border-radius: $ouiButtonBorderRadius + 1px; // Simply for the box-shadow - background-color: $ouiButtonBackgroundColor; max-width: 100%; display: flex; overflow: hidden; diff --git a/src/components/split_button/_split_button_control.scss b/src/components/split_button/_split_button_control.scss index d96dbef02..563fe5b1d 100644 --- a/src/components/split_button/_split_button_control.scss +++ b/src/components/split_button/_split_button_control.scss @@ -24,10 +24,6 @@ $splitButtonSeparatorColor: shade($ouiColorPrimary, 50%); border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; - &:not(.ouiButton--fill) { - background: transparent; - } - &:hover, &:active, &:focus { @@ -40,10 +36,6 @@ $splitButtonSeparatorColor: shade($ouiColorPrimary, 50%); border-width: 0px; border-radius: 0px; - &:not(.ouiButtonIcon--fill) { - background: transparent; - } - &:hover, &:active, &:focus { @@ -55,10 +47,6 @@ $splitButtonSeparatorColor: shade($ouiColorPrimary, 50%); .ouiSplitButtonControl { border: $ouiBorderWidthThick solid $ouiBorderColor; border-radius: $ouiButtonBorderRadius; - - &:not(.ouiButton) { - background: $ouiButtonBackgroundColor; - } } // Create button modifiers based upon the map. diff --git a/src/global_styling/variables/_buttons.scss b/src/global_styling/variables/_buttons.scss index cc46a0654..0830c0fdf 100644 --- a/src/global_styling/variables/_buttons.scss +++ b/src/global_styling/variables/_buttons.scss @@ -19,7 +19,6 @@ $ouiButtonColorDisabledText: makeDisabledContrastColor($ouiButtonColorDisabled) $ouiButtonColorGhostDisabled: lightOrDarkTheme($ouiColorDarkShade, $ouiColorLightShade) !default; $ouiButtonBorderRadius: $ouiBorderRadius !default; -$ouiButtonBackgroundColor: transparent; // Modifier naming and colors. $ouiButtonTypes: ( @@ -43,6 +42,5 @@ $euiButtonColorDisabled: $ouiButtonColorDisabled; $euiButtonColorDisabledText: $ouiButtonColorDisabledText; $euiButtonColorGhostDisabled: $ouiButtonColorGhostDisabled; $euiButtonBorderRadius: $ouiButtonBorderRadius; -$euiButtonBackgroundColor: $ouiButtonBackgroundColor; $euiButtonTypes: $ouiButtonTypes; /* End of Aliases */ diff --git a/src/global_styling/variables/_side_nav.scss b/src/global_styling/variables/_side_nav.scss index 4469ffbb2..ec54a288a 100644 --- a/src/global_styling/variables/_side_nav.scss +++ b/src/global_styling/variables/_side_nav.scss @@ -9,6 +9,9 @@ * GitHub history for details. */ +// Value not currently consumed by Side nav component +$ouiSideNavBackgroundColor: $ouiPageBackgroundColor !default; + $ouiSideNavEmphasizedBackgroundColor: transparentize($ouiColorLightShade, .7) !default; // Simulates the transparent backround on top of the page background to get an opaque color @@ -27,6 +30,7 @@ $ouiSideNavDisabledTextcolor: ouiSideNavEmphasizedContrast($ouiButtonColorDisabl /* OUI -> EUI Aliases */ +$euiSideNavBackgroundColor: $ouiSideNavBackgroundColor; $euiSideNavEmphasizedBackgroundColor: $ouiSideNavEmphasizedBackgroundColor; $euiSideNavRootTextcolor: $ouiSideNavRootTextcolor; $euiSideNavBranchTextcolor: $ouiSideNavBranchTextcolor; diff --git a/src/themes/oui-next/global_styling/variables/_buttons.scss b/src/themes/oui-next/global_styling/variables/_buttons.scss index cc46a0654..0830c0fdf 100644 --- a/src/themes/oui-next/global_styling/variables/_buttons.scss +++ b/src/themes/oui-next/global_styling/variables/_buttons.scss @@ -19,7 +19,6 @@ $ouiButtonColorDisabledText: makeDisabledContrastColor($ouiButtonColorDisabled) $ouiButtonColorGhostDisabled: lightOrDarkTheme($ouiColorDarkShade, $ouiColorLightShade) !default; $ouiButtonBorderRadius: $ouiBorderRadius !default; -$ouiButtonBackgroundColor: transparent; // Modifier naming and colors. $ouiButtonTypes: ( @@ -43,6 +42,5 @@ $euiButtonColorDisabled: $ouiButtonColorDisabled; $euiButtonColorDisabledText: $ouiButtonColorDisabledText; $euiButtonColorGhostDisabled: $ouiButtonColorGhostDisabled; $euiButtonBorderRadius: $ouiButtonBorderRadius; -$euiButtonBackgroundColor: $ouiButtonBackgroundColor; $euiButtonTypes: $ouiButtonTypes; /* End of Aliases */ diff --git a/src/themes/oui-next/global_styling/variables/_side_nav.scss b/src/themes/oui-next/global_styling/variables/_side_nav.scss index 4469ffbb2..ec54a288a 100644 --- a/src/themes/oui-next/global_styling/variables/_side_nav.scss +++ b/src/themes/oui-next/global_styling/variables/_side_nav.scss @@ -9,6 +9,9 @@ * GitHub history for details. */ +// Value not currently consumed by Side nav component +$ouiSideNavBackgroundColor: $ouiPageBackgroundColor !default; + $ouiSideNavEmphasizedBackgroundColor: transparentize($ouiColorLightShade, .7) !default; // Simulates the transparent backround on top of the page background to get an opaque color @@ -27,6 +30,7 @@ $ouiSideNavDisabledTextcolor: ouiSideNavEmphasizedContrast($ouiButtonColorDisabl /* OUI -> EUI Aliases */ +$euiSideNavBackgroundColor: $ouiSideNavBackgroundColor; $euiSideNavEmphasizedBackgroundColor: $ouiSideNavEmphasizedBackgroundColor; $euiSideNavRootTextcolor: $ouiSideNavRootTextcolor; $euiSideNavBranchTextcolor: $ouiSideNavBranchTextcolor; diff --git a/src/themes/v9/global_styling/variables/_buttons.scss b/src/themes/v9/global_styling/variables/_buttons.scss index 7c614962a..9bff6c3ca 100644 --- a/src/themes/v9/global_styling/variables/_buttons.scss +++ b/src/themes/v9/global_styling/variables/_buttons.scss @@ -14,14 +14,13 @@ $ouiButtonHeightSmall: $ouiSizeXL !default; $ouiButtonHeightXSmall: $ouiSizeL !default; // sass-lint:disable no-color-literals -$ouiButtonColorDisabled: lightOrDarkTheme(#444444, #AFAFAF) !default; +$ouiButtonColorDisabled: lightOrDarkTheme(#AFAFAF, #444444) !default; // Only increase the contrast of background color to text to 2.0 for disabled -$ouiButtonColorDisabledText: lightOrDarkTheme(#585858, #8E8E8E) !default; +$ouiButtonColorDisabledText: lightOrDarkTheme(#8E8E8E, #585858) !default; // sass-lint:disable no-color-literals -$ouiButtonColorGhostDisabled: lightOrDarkTheme(#353535, #585858) !default; +$ouiButtonColorGhostDisabled: lightOrDarkTheme(#707070, #353535) !default; $ouiButtonBorderRadius: $ouiBorderRadius !default; -$ouiButtonBackgroundColor: $ouiColorEmptyShade; // Modifier naming and colors. $ouiButtonTypes: ( @@ -45,6 +44,5 @@ $euiButtonColorDisabled: $ouiButtonColorDisabled; $euiButtonColorDisabledText: $ouiButtonColorDisabledText; $euiButtonColorGhostDisabled: $ouiButtonColorGhostDisabled; $euiButtonBorderRadius: $ouiButtonBorderRadius; -$euiButtonBackgroundColor: $ouiButtonBackgroundColor; $euiButtonTypes: $ouiButtonTypes; /* End of Aliases */ diff --git a/src/themes/v9/global_styling/variables/_colors.scss b/src/themes/v9/global_styling/variables/_colors.scss index 2b5d8988d..886005e92 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: #F7F4F2 !default; -$ouiColorInk: #262626 !default; +$ouiColorGhost: #FFFFFF !default; +$ouiColorInk: #001522 !default; // Core -$ouiColorPrimary: #0974BE !default; +$ouiColorPrimary: #006EDB !default; $ouiColorSecondary: #107F6B !default; -$ouiColorAccent: #7F389D !default; +$ouiColorAccent: #9E4DC0 !default; // Status $ouiColorSuccess: $ouiColorSecondary !default; -$ouiColorWarning: #FFC460 !default; -$ouiColorDanger: #C84233 !default; +$ouiColorWarning: #F25F25 !default; +$ouiColorDanger: #BD271E !default; // Grays $ouiColorEmptyShade: #FFFFFF !default; -$ouiColorLightestShade: #F7F4F2 !default; -$ouiColorLightShade: #EBE4DF !default; -$ouiColorMediumShade: #D8CBC1 !default; +$ouiColorLightestShade: #F5F5F5 !default; +$ouiColorLightShade: #E5E5E5 !default; +$ouiColorMediumShade: #A5A5A5 !default; $ouiColorDarkShade: #585858 !default; $ouiColorDarkestShade: #262626 !default; $ouiColorFullShade: #131313 !default; // Backgrounds -$ouiPageBackgroundColor: #F3EFEC !default; +$ouiPageBackgroundColor: #F7F4F2 !default; $ouiColorHighlight: #FFF3E1 !default; // Every color below must be based mathematically on the set above and in a particular order. -$ouiTextColor: $ouiColorDarkestShade !default; -$ouiTitleColor: shade($ouiTextColor, 50%) !default; +$ouiTextColor: #042839 !default; +$ouiTitleColor: #002E48 !default; $ouiTextSubduedColor: makeHighContrastColor($ouiColorMediumShade) !default; -$ouiColorDisabled: tint($ouiTextColor, 70%) !default; +$ouiColorDisabled: #707070 !default; // Contrasty text variants $ouiColorPrimaryText: makeHighContrastColor($ouiColorPrimary) !default; @@ -133,7 +133,7 @@ $ouiColorChartLines: shade($ouiColorLightestShade, 3%) !default; $ouiColorChartBand: $ouiColorLightestShade !default; // Code -$ouiCodeBlockBackgroundColor: $ouiColorLightestShade !default; +$ouiCodeBlockBackgroundColor: $ouiColorLightShade !default; $ouiCodeBlockColor: makeHighContrastColor($ouiTextColor, $ouiCodeBlockBackgroundColor) !default; $ouiCodeBlockSelectedBackgroundColor: inherit !default; $ouiCodeBlockCommentColor: makeHighContrastColor($ouiTextSubduedColor, $ouiCodeBlockBackgroundColor) !default; diff --git a/src/themes/v9/global_styling/variables/_header.scss b/src/themes/v9/global_styling/variables/_header.scss index e5f7abb3d..cf7e3894a 100644 --- a/src/themes/v9/global_styling/variables/_header.scss +++ b/src/themes/v9/global_styling/variables/_header.scss @@ -12,7 +12,7 @@ // Themeable colors $ouiHeaderBackgroundColor: $ouiPageBackgroundColor !default; // Always use the dark theme value of $ouiPageBackgroundColor for the dark header background -$ouiHeaderDarkBackgroundColor: #172430 !default; +$ouiHeaderDarkBackgroundColor: #001522 !default; $ouiHeaderBorderColor: $ouiBorderColor !default; $ouiHeaderBreadcrumbColor: $ouiColorDarkestShade !default; diff --git a/src/themes/v9/global_styling/variables/_panel.scss b/src/themes/v9/global_styling/variables/_panel.scss index 21b5cc4e6..e7ce1f87e 100644 --- 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': $ouiPageBackgroundColor, + 'subdued': $ouiColorLightestShade, 'accent': tintOrShade($ouiColorAccent, 90%, 70%), 'primary': tintOrShade($ouiColorPrimary, 90%, 70%), 'success': tintOrShade($ouiColorSuccess, 90%, 70%), diff --git a/src/themes/v9/global_styling/variables/_side_nav.scss b/src/themes/v9/global_styling/variables/_side_nav.scss index 155bef014..fd4f7d668 100644 --- a/src/themes/v9/global_styling/variables/_side_nav.scss +++ b/src/themes/v9/global_styling/variables/_side_nav.scss @@ -9,7 +9,10 @@ * GitHub history for details. */ -$ouiSideNavEmphasizedBackgroundColor: lightOrDarkTheme(transparentize($ouiColorPrimary, .7), transparentize($ouiColorPrimary, .1)) !default; +// Value not currently consumed by Side nav component +$ouiSideNavBackgroundColor: lightOrDarkTheme(#EBE4DF, #001C28) !default; // sass-lint:disable-line no-color-literals + +$ouiSideNavEmphasizedBackgroundColor: transparentize($ouiColorPrimary, .8) !default; // Simulates the transparent backround on top of the page background to get an opaque color // in order to get the right contrast for text @@ -27,6 +30,7 @@ $ouiSideNavDisabledTextcolor: ouiSideNavEmphasizedContrast($ouiButtonColorDisabl /* OUI -> EUI Aliases */ +$euiSideNavBackgroundColor: $ouiSideNavBackgroundColor; $euiSideNavEmphasizedBackgroundColor: $ouiSideNavEmphasizedBackgroundColor; $euiSideNavRootTextcolor: $ouiSideNavRootTextcolor; $euiSideNavBranchTextcolor: $ouiSideNavBranchTextcolor; diff --git a/src/themes/v9/global_styling/variables/_tool_tip.scss b/src/themes/v9/global_styling/variables/_tool_tip.scss index a1b41f7ba..87cdb03c3 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: #293847 !default; +$ouiTooltipBackgroundColor: $ouiColorDarkestShade !default; $ouiTooltipAnimations: ( top: ouiToolTipTop, diff --git a/src/themes/v9/v9_colors_dark.scss b/src/themes/v9/v9_colors_dark.scss index 9eff4e56c..b5fb62e13 100644 --- a/src/themes/v9/v9_colors_dark.scss +++ b/src/themes/v9/v9_colors_dark.scss @@ -13,7 +13,7 @@ // These colors stay the same no matter the theme $ouiColorGhost: #FFFFFF; -$ouiColorInk: #000304; +$ouiColorInk: #000F15; // Core $ouiColorPrimary: #0082B4; @@ -23,19 +23,19 @@ $ouiColorAccent: #A55AC3; // Status $ouiColorSuccess: $ouiColorSecondary; $ouiColorWarning: #FFCA75; -$ouiColorDanger: #EC6F62; +$ouiColorDanger: #CC5A53; // Grays -$ouiColorEmptyShade: #000304; -$ouiColorLightestShade: #000F15; -$ouiColorLightShade: #001720; -$ouiColorMediumShade: #00202D; +$ouiColorEmptyShade: #001822; +$ouiColorLightestShade: #1A1A1A; +$ouiColorLightShade: #222222; +$ouiColorMediumShade: #333333; $ouiColorDarkShade: #CCCCCC; $ouiColorDarkestShade: #E5E5E5; $ouiColorFullShade: #F5F5F5; // Backgrounds -$ouiPageBackgroundColor: #04090B; +$ouiPageBackgroundColor: #000F15; $ouiColorHighlight: #261C08; // Variations from core