Update v9 colors and typography (#1422)

Signed-off-by: Viraj Sanghvi <[email protected]>
opensearch-project · Sep 27, 2024 · 6e70f37 · 6e70f37
1 parent 533c1ff
commit 6e70f37
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 35 deletions.
diff --git a/src-docs/src/theme_v9_dark.scss b/src-docs/src/theme_v9_dark.scss
@@ -10,7 +10,7 @@
  */
 
 // sass-lint:disable no-url-domains, no-url-protocols
-@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');
 
 @import '../../src/theme_v9_dark';
 @import './components/guide_components';

diff --git a/src-docs/src/theme_v9_light.scss b/src-docs/src/theme_v9_light.scss
@@ -10,7 +10,7 @@
  */
 
 // sass-lint:disable no-url-domains, no-url-protocols
-@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');
 
 @import '../../src/theme_v9_light';
 @import './components/guide_components';

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, $ouiColorLightShade) !default;
+$ouiButtonColorDisabled: lightOrDarkTheme(#444444, #AFAFAF) !default;
 // Only increase the contrast of background color to text to 2.0 for disabled
-$ouiButtonColorDisabledText: lightOrDarkTheme(#8E8E8E, #585858) !default;
+$ouiButtonColorDisabledText: lightOrDarkTheme(#585858, #8E8E8E) !default;
 // sass-lint:disable no-color-literals
-$ouiButtonColorGhostDisabled: lightOrDarkTheme(#585858, #353535) !default;
+$ouiButtonColorGhostDisabled: lightOrDarkTheme(#353535, #585858) !default;
 
 $ouiButtonBorderRadius: $ouiBorderRadius !default;
 $ouiButtonBackgroundColor: $ouiColorEmptyShade;

diff --git a/src/themes/v9/global_styling/variables/_colors.scss b/src/themes/v9/global_styling/variables/_colors.scss
@@ -30,7 +30,7 @@ $ouiColorDanger: #C84233 !default;
 $ouiColorEmptyShade: #FFFFFF !default;
 $ouiColorLightestShade: #F7F4F2 !default;
 $ouiColorLightShade: #EBE4DF !default;
-$ouiColorMediumShade: #C1AC9C !default;
+$ouiColorMediumShade: #D8CBC1 !default;
 $ouiColorDarkShade: #585858 !default;
 $ouiColorDarkestShade: #262626 !default;
 $ouiColorFullShade: #131313 !default;

diff --git a/src/themes/v9/global_styling/variables/_side_nav.scss b/src/themes/v9/global_styling/variables/_side_nav.scss
@@ -9,7 +9,7 @@
  * GitHub history for details.
  */
 
-$ouiSideNavEmphasizedBackgroundColor: rgba(9, 116, 190, .1) !default;
+$ouiSideNavEmphasizedBackgroundColor: lightOrDarkTheme(transparentize($ouiColorPrimary, .7), transparentize($ouiColorPrimary, .1)) !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

diff --git a/src/themes/v9/global_styling/variables/_typography.scss b/src/themes/v9/global_styling/variables/_typography.scss
@@ -40,7 +40,7 @@
 
 // sass-lint:disable quotes
 $ouiFontFamily: #{"'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'"} !default;
-$ouiCodeFontFamily: #{"'Fira Code', Consolas, Menlo, Courier, monospace"} !default;
+$ouiCodeFontFamily: #{"'Source Code Pro', Consolas, Menlo, Courier, monospace"} !default;
 // sass-lint:enable quotes
 
 // Careful using ligatures. Code editors like ACE will often error because of width calculations

diff --git a/src/themes/v9/v9_colors_dark.scss b/src/themes/v9/v9_colors_dark.scss
@@ -13,48 +13,48 @@
 
 // These colors stay the same no matter the theme
 $ouiColorGhost: #FFFFFF;
-$ouiColorInk: #131313;
+$ouiColorInk: #000304;
 
 // Core
-$ouiColorPrimary: #009DD9;
-$ouiColorSecondary: #A9DFCB;
-$ouiColorAccent: #CCA1DA;
+$ouiColorPrimary: #0082B4;
+$ouiColorSecondary: #118973;
+$ouiColorAccent: #A55AC3;
 
 // Status
-$ouiColorSuccess: $ouiColorSecondary !default;
-$ouiColorWarning: #FFCB78 !default;
-$ouiColorDanger: #EB6C5F !default;
+$ouiColorSuccess: $ouiColorSecondary;
+$ouiColorWarning: #FFCA75;
+$ouiColorDanger: #EC6F62;
 
 // Grays
-$ouiColorEmptyShade: #131313;
-$ouiColorLightestShade: #2C2C2C;
-$ouiColorLightShade: #444444;
-$ouiColorMediumShade: #757575;
-$ouiColorDarkShade: #AFAFAF;
-$ouiColorDarkestShade: #D3D3D3;
+$ouiColorEmptyShade: #000304;
+$ouiColorLightestShade: #000F15;
+$ouiColorLightShade: #001720;
+$ouiColorMediumShade: #00202D;
+$ouiColorDarkShade: #CCCCCC;
+$ouiColorDarkestShade: #E5E5E5;
 $ouiColorFullShade: #F5F5F5;
 
 // Backgrounds
-$ouiPageBackgroundColor: #131313;
-$ouiColorHighlight: #39290C;
+$ouiPageBackgroundColor: #04090B;
+$ouiColorHighlight: #261C08;
 
 // Variations from core
 $ouiTextColor: $ouiColorFullShade;
 $ouiTitleColor: $ouiColorFullShade;
 // Ensure contrast between subdued text and the page background
 // Should not be shaded as much as $ouiColorDisabled
-$ouiTextSubduedColor: #AFAFAF;
-$ouiColorDisabled: #585858;
+$ouiTextSubduedColor: makeHighContrastColor($ouiColorMediumShade);
+$ouiColorDisabled: tint($ouiTextColor, 70%) !default;
 
 // Contrasty text variants
-$ouiColorPrimaryText: $ouiColorPrimary;
-$ouiColorSecondaryText: $ouiColorSecondary;
-$ouiColorAccentText: $ouiColorAccent;
-$ouiColorWarningText: $ouiColorWarning;
-$ouiColorDangerText: $ouiColorDanger;
-$ouiColorDisabledText: $ouiColorDisabled;
-$ouiColorSuccessText: $ouiColorSuccess;
-$ouiLinkColor: $ouiColorPrimaryText;
+$ouiColorPrimaryText: makeHighContrastColor($ouiColorPrimary) !default;
+$ouiColorSecondaryText: makeHighContrastColor($ouiColorSecondary) !default;
+$ouiColorAccentText: makeHighContrastColor($ouiColorAccent) !default;
+$ouiColorWarningText: makeHighContrastColor($ouiColorWarning) !default;
+$ouiColorDangerText: makeHighContrastColor($ouiColorDanger) !default;
+$ouiColorDisabledText: makeDisabledContrastColor($ouiColorDisabled) !default;
+$ouiColorSuccessText: $ouiColorSecondaryText !default;
+$ouiLinkColor: $ouiColorPrimaryText !default;
 
 // Charts
 $ouiColorChartLines: $ouiColorLightShade;

diff --git a/wiki/consuming.md b/wiki/consuming.md
@@ -123,10 +123,10 @@ The Next theme uses the [Source Sans 3](https://github.com/adobe-fonts/source-sa
 ```
 
 // TODO update weights
-The v9 theme uses the [Rubik](https://fonts.google.com/specimen/Rubik) and [Fira code](https://fonts.google.com/specimen/Fira+Code) fonts:
+The v9 theme uses the [Rubik](https://fonts.google.com/specimen/Rubik) and [Source Code Pro](https://github.com/adobe-fonts/source-code-pro) fonts:
  ```scss
 // index.scss
-@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');
 ```
 
 ### Reusing the variables in JavaScript