fix: Updates to v9 colors, button/input styles, and typography (#1373)

* fix: Updates to v9 colors, button/input styles, and typography --------- Signed-off-by: Viraj Sanghvi <[email protected]>
opensearch-project · Aug 27, 2024 · 1e69cc8 · 1e69cc8
1 parent 2c0c73c
commit 1e69cc8
Show file tree

Hide file tree

Showing 15 changed files with 115 additions and 46 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@
 ### 🐛 Bug Fixes
 
 - Fix combobox appearance when compressed and in-group ([#1371](https://github.com/opensearch-project/oui/pull/1371))
+- Updates to v9 colors, button/input styles, and typography ([#1373](https://github.com/opensearch-project/oui/pull/1373))
 
 ### 🚞 Infrastructure
 

diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
@@ -15,7 +15,9 @@
 // Our base button
 .ouiButton {
   @include ouiButton;
-  @include ouiSlightShadow;
+  @include ouiUseDefaultButtonShadows {
+    @include ouiSlightShadow;
+  }
 
   border-radius: $ouiButtonBorderRadius;
   min-width: $ouiButtonMinWidth;
@@ -123,7 +125,9 @@
         $shadowColor: desaturate($color, 60%);
       }
 
-      @include ouiSlightShadow($shadowColor);
+      @include ouiUseDefaultButtonShadows {
+        @include ouiSlightShadow($shadowColor);
+      }
 
       &:hover,
       &:focus,
@@ -141,7 +145,14 @@
 
 // Fix ghost/disabled look specifically
 .ouiButton.ouiButton-isDisabled.ouiButton--ghost {
-  &,
+  & {
+    @include ouiUseDefaultButtonShadows {
+      @include ouiSlightShadow($ouiColorInk);
+    }
+    color: $ouiButtonColorGhostDisabled;
+    border-color: $ouiButtonColorGhostDisabled;
+  }
+
   &:hover,
   &:focus,
   &:focus-within {

diff --git a/src/components/button/button_group/_button_group.scss b/src/components/button/button_group/_button_group.scss
@@ -28,7 +28,9 @@
 }
 
 .ouiButtonGroup__buttons {
-  @include ouiSlightShadow;
+  @include ouiUseDefaultButtonShadows {
+    @include ouiSlightShadow;
+  }
   border-radius: $ouiButtonBorderRadius + 1px; // Simply for the box-shadow
   max-width: 100%;
   display: flex;

diff --git a/src/components/button/button_icon/_button_icon.scss b/src/components/button/button_icon/_button_icon.scss
@@ -14,7 +14,9 @@
 
 .ouiButtonIcon {
   @include ouiButton;
-  @include ouiSlightShadow;
+  @include ouiUseDefaultButtonShadows {
+    @include ouiSlightShadow;
+  }
 
   border-radius: $ouiButtonBorderRadius;
   width: $ouiButtonHeight;
@@ -121,7 +123,9 @@
         $shadowColor: desaturate($color, 60%);
       }
 
-      @include ouiSlightShadow($shadowColor);
+      @include ouiUseDefaultButtonShadows {
+        @include ouiSlightShadow($shadowColor);
+      }
 
       &:hover,
       &:focus,
@@ -139,7 +143,14 @@
 
 // Fix ghost/disabled look specifically
 .ouiButtonIcon.ouiButtonIcon-isDisabled.ouiButtonIcon--ghost {
-  &,
+  & {
+    @include ouiUseDefaultButtonShadows {
+      @include ouiSlightShadow($ouiColorInk);
+    }
+    color: $ouiButtonColorGhostDisabled;
+    border-color: $ouiButtonColorGhostDisabled;
+  }
+
   &:hover,
   &:focus,
   &:focus-within {

diff --git a/src/components/date_picker/super_date_picker/_super_date_picker.scss b/src/components/date_picker/super_date_picker/_super_date_picker.scss
@@ -82,7 +82,7 @@
 }
 
 .ouiSuperDatePicker__prettyFormatLink {
-  color: $ouiLinkColor;
+  color: $ouiColorPrimaryText;
   padding-left: $ouiSizeXS; // Adds some separation between date text and link
   flex-shrink: 0;
 }

diff --git a/src/components/form/switch/_switch.scss b/src/components/form/switch/_switch.scss
@@ -257,7 +257,9 @@
 @each $name, $color in $ouiSwitchColors {
   .ouiSwitch--#{$name} {
     &.ouiSwitch--base {
-      @include ouiSlightShadow;
+      @include ouiUseDefaultButtonShadows {
+        @include ouiSlightShadow;
+      }
       @include ouiButtonFocus;
 
       border-color: $color;
@@ -282,7 +284,9 @@
           $shadowColor: desaturate($color, 60%);
         }
 
-        @include ouiSlightShadow($shadowColor);
+        @include ouiUseDefaultButtonShadows {
+          @include ouiSlightShadow($shadowColor);
+        }
 
         &:hover,
         &:focus,

diff --git a/src/components/split_button/_split_button_control.scss b/src/components/split_button/_split_button_control.scss
@@ -111,7 +111,9 @@ $splitButtonSeparatorColor: shade($ouiColorPrimary, 50%);
           $shadowColor: desaturate($color, 60%);
         }
 
-        @include ouiSlightShadow($shadowColor);
+        @include ouiUseDefaultButtonShadows {
+          @include ouiSlightShadow($shadowColor);
+        }
 
         &:hover,
         &:focus,
@@ -125,7 +127,14 @@ $splitButtonSeparatorColor: shade($ouiColorPrimary, 50%);
 
   // Fix ghost/disabled look specifically
   .ouiSplitButtonColor.ouiSplitButtonColor-isDisabled.ouiSplitButtonColor--ghost {
-    &,
+    & {
+      @include ouiUseDefaultButtonShadows {
+        @include ouiSlightShadow($ouiColorInk);
+      }
+      color: $ouiButtonColorGhostDisabled;
+      border-color: $ouiButtonColorGhostDisabled;
+    }
+
     &:hover,
     &:focus,
     &:focus-within {

diff --git a/src/global_styling/mixins/_button.scss b/src/global_styling/mixins/_button.scss
@@ -121,6 +121,12 @@
 // Keyframe animation declarations can be found in
 // utility/animations.scss
 
+// Helper to contextually turn off button shadows in default states
+@mixin ouiUseDefaultButtonShadows($useShadows: true) {
+  @if ($useShadows) {
+    @content;
+  }
+}
 
 /* OUI -> EUI Aliases */
 @mixin euiButtonBase { @include ouiButtonBase; }
@@ -145,4 +151,5 @@
     border-color: ouiLoadingSpinnerBorderColors(currentColor);
   }
 }
+@mixin euiUseDefaultButtonShadows($useShadows: true) { @include ouiUseDefaultButtonShadows($useShadows); }
 /* End of Aliases */
diff --git a/src/themes/oui-next/global_styling/mixins/_button.scss b/src/themes/oui-next/global_styling/mixins/_button.scss
@@ -122,6 +122,12 @@
 // Keyframe animation declarations can be found in
 // utility/animations.scss
 
+// Helper to contextually turn off button shadows in default states
+@mixin ouiUseDefaultButtonShadows($useShadows: true) {
+  @if ($useShadows) {
+    @content;
+  }
+}
 
 /* OUI -> EUI Aliases */
 @mixin euiButtonBase { @include ouiButtonBase; }
@@ -146,4 +152,5 @@
     border-color: ouiLoadingSpinnerBorderColors(currentColor);
   }
 }
+@mixin euiUseDefaultButtonShadows($useShadows: true) { @include ouiUseDefaultButtonShadows($useShadows); }
 /* End of Aliases */
diff --git a/src/themes/v9/global_styling/mixins/_button.scss b/src/themes/v9/global_styling/mixins/_button.scss
@@ -122,6 +122,12 @@
 // Keyframe animation declarations can be found in
 // utility/animations.scss
 
+// Helper to contextually turn off button shadows in default states
+@mixin ouiUseDefaultButtonShadows($useShadows: false) {
+  @if ($useShadows) {
+    @content;
+  }
+}
 
 /* OUI -> EUI Aliases */
 @mixin euiButtonBase { @include ouiButtonBase; }
@@ -146,4 +152,5 @@
     border-color: ouiLoadingSpinnerBorderColors(currentColor);
   }
 }
+@mixin euiUseDefaultButtonShadows($useShadows: false) { @include ouiUseDefaultButtonShadows($useShadows); }
 /* End of Aliases */
diff --git a/src/themes/v9/global_styling/mixins/_form.scss b/src/themes/v9/global_styling/mixins/_form.scss
@@ -155,14 +155,22 @@
 
 // 1. Must supply both values to background-size or some browsers apply the single value to both directions
 
-@mixin ouiFormControlDefaultShadow($borderOnly: false) {
+@mixin ouiFormControlDefaultShadow($borderOnly: true) {
   // sass-lint:disable-block indentation
   background-color: tintOrShade($ouiColorEmptyShade, 0%, 40%);
   background-repeat: no-repeat;
   background-size: 0% 100%; // 1
 
   @if ($borderOnly) {
     box-shadow: inset 0 0 0 1px $ouiFormBorderColor;
+
+    // show shadow on hover/focus in this mode
+    &:hover,
+    &:focus {
+      box-shadow:
+        #{$ouiFormControlBoxShadow},
+        inset 0 0 0 1px $ouiFormBorderColor;
+    }
   } @else {
     box-shadow:
       #{$ouiFormControlBoxShadow},
@@ -296,7 +304,7 @@
 }
 
 @mixin ouiFormControlStyleCompressed($borderOnly: false, $includeStates: true) {
-  @include ouiFormControlDefaultShadow($borderOnly: false);
+  @include ouiFormControlDefaultShadow($borderOnly: true);
   padding: $ouiFormControlCompressedPadding;
   border-radius: $ouiFormControlCompressedBorderRadius;
 

diff --git a/src/themes/v9/global_styling/reset/_reset.scss b/src/themes/v9/global_styling/reset/_reset.scss
@@ -59,7 +59,7 @@ em {
   font-style: italic;
 }
 
-strong {
+b, strong {
   font-weight: $ouiFontWeightBold;
 }
 

diff --git a/src/themes/v9/global_styling/variables/_buttons.scss b/src/themes/v9/global_styling/variables/_buttons.scss
@@ -13,10 +13,12 @@ $ouiButtonHeight: $ouiSizeXXL !default;
 $ouiButtonHeightSmall: $ouiSizeXL !default;
 $ouiButtonHeightXSmall: $ouiSizeL !default;
 
-$ouiButtonColorDisabled: #AFAFAF !default;
+// sass-lint:disable no-color-literals
+$ouiButtonColorDisabled: lightOrDarkTheme(#AFAFAF, #595F64) !default;
 // Only increase the contrast of background color to text to 2.0 for disabled
 $ouiButtonColorDisabledText: #8E8E8E !default;
-$ouiButtonColorGhostDisabled: lightOrDarkTheme($ouiColorDarkShade, $ouiColorDarkShade) !default;
+// sass-lint:disable no-color-literals
+$ouiButtonColorGhostDisabled: lightOrDarkTheme($ouiColorDarkShade, #585858) !default;
 
 $ouiButtonBorderRadius: 0 !default;
 

diff --git a/src/themes/v9/global_styling/variables/_colors.scss b/src/themes/v9/global_styling/variables/_colors.scss
@@ -18,7 +18,7 @@ $ouiColorInk: #131313 !default;
 
 // Core
 $ouiColorPrimary: #003B5C !default;
-$ouiColorSecondary: #0249D8 !default;
+$ouiColorSecondary: #199863 !default;
 $ouiColorAccent: #B92FC5 !default;
 
 // Status
@@ -46,14 +46,14 @@ $ouiTextSubduedColor: #707070 !default;
 $ouiColorDisabled: #CDCDCD !default;
 
 // Contrasty text variants
-$ouiColorPrimaryText: #0249D8 !default;
+$ouiColorPrimaryText: $ouiColorPrimary !default;
 $ouiColorSecondaryText: #117F6A !default;
 $ouiColorAccentText: #B92FC5 !default;
-$ouiColorWarningText: #986600 !default;
-$ouiColorDangerText: #973A2E !default;
+$ouiColorWarningText: #C48600 !default;
+$ouiColorDangerText: #C84133 !default;
 $ouiColorDisabledText: #AFAFAF !default;
 $ouiColorSuccessText: #0D6453 !default;
-$ouiLinkColor: #2452AD !default;
+$ouiLinkColor: $ouiColorPrimaryText !default;
 
 // Visualization colors
 

diff --git a/src/themes/v9/v9_colors_dark.scss b/src/themes/v9/v9_colors_dark.scss
@@ -16,43 +16,43 @@ $ouiColorGhost: #FCFEFF;
 $ouiColorInk: #0A121A;
 
 // Core
-$ouiColorPrimary: #FFC0CB;
-$ouiColorSecondary: #FFC0CB;
-$ouiColorAccent: #FFC0CB;
+$ouiColorPrimary: #005EB8;
+$ouiColorSecondary: #199863;
+$ouiColorAccent: #B92FC5;
 
 // Status
-$ouiColorSuccess: $ouiColorSecondary;
-$ouiColorWarning: #FFCE7A;
-$ouiColorDanger: #FF6666;
+$ouiColorSuccess: #117F6A !default;
+$ouiColorWarning: #ED9F00 !default;
+$ouiColorDanger: #E42C19 !default;
 
 // Grays
-$ouiColorEmptyShade: #0A121A;
-$ouiColorLightestShade: #101B25;
-$ouiColorLightShade: #293847;
-$ouiColorMediumShade: #5B6875;
-$ouiColorDarkShade: #8D98A3;
-$ouiColorDarkestShade: #DFE3E8;
-$ouiColorFullShade: #FCFEFF;
+$ouiColorEmptyShade: #212324;
+$ouiColorLightestShade: #303234;
+$ouiColorLightShade: #4B4E51;
+$ouiColorMediumShade: #616C72;
+$ouiColorDarkShade: #778388;
+$ouiColorDarkestShade: #8C9BA2;
+$ouiColorFullShade: #F3F8FF;
 
 // Backgrounds
-$ouiPageBackgroundColor: #172430;
-$ouiColorHighlight: #2E2D25;
+$ouiPageBackgroundColor: #131313;
+$ouiColorHighlight: #494735;
 
 // Variations from core
-$ouiTextColor: #DFE5EF;
+$ouiTextColor: #F3F8FF;
 $ouiTitleColor: $ouiTextColor;
 // Ensure contrast between subdued text and the page background
 // Should not be shaded as much as $ouiColorDisabled
-$ouiTextSubduedColor: makeHighContrastColor(shade($ouiTextColor, 30%), $ouiPageBackgroundColor);
-$ouiColorDisabled: shade($ouiTextColor, 70%);
+$ouiTextSubduedColor: #A0A9B5;
+$ouiColorDisabled: #AFAFAF;
 
 // Contrasty text variants
-$ouiColorPrimaryText: makeHighContrastColor($ouiColorPrimary);
-$ouiColorSecondaryText: makeHighContrastColor($ouiColorSecondary);
-$ouiColorAccentText: makeHighContrastColor($ouiColorAccent);
-$ouiColorWarningText: makeHighContrastColor($ouiColorWarning);
-$ouiColorDangerText: makeHighContrastColor($ouiColorDanger);
-$ouiColorDisabledText: makeDisabledContrastColor($ouiColorDisabled);
+$ouiColorPrimaryText: #005EB8;
+$ouiColorSecondaryText: #117F6A;
+$ouiColorAccentText: #B92FC5;
+$ouiColorWarningText: #C48600;
+$ouiColorDangerText: #C84133;
+$ouiColorDisabledText: #60656B;
 $ouiColorSuccessText: $ouiColorSecondaryText;
 $ouiLinkColor: $ouiColorPrimaryText;