From 8d8f0f6bd7ff6918ad3ffb0d6b8cc7e843fcf5bd Mon Sep 17 00:00:00 2001 From: Viraj Sanghvi Date: Fri, 27 Sep 2024 22:18:07 +0000 Subject: [PATCH] Update v9 colors and typography Signed-off-by: Viraj Sanghvi --- src-docs/src/theme_v9_dark.scss | 2 +- src-docs/src/theme_v9_light.scss | 2 +- .../v9/global_styling/variables/_buttons.scss | 6 +-- .../v9/global_styling/variables/_colors.scss | 2 +- .../global_styling/variables/_side_nav.scss | 2 +- .../global_styling/variables/_typography.scss | 2 +- src/themes/v9/v9_colors_dark.scss | 50 +++++++++---------- wiki/consuming.md | 4 +- 8 files changed, 35 insertions(+), 35 deletions(-) diff --git a/src-docs/src/theme_v9_dark.scss b/src-docs/src/theme_v9_dark.scss index 1c10ce067..bf4c36414 100644 --- 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 index f073ed305..7b45a7c28 100644 --- 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 index acce34a3d..7c614962a 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, $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 index 8752b5f08..2b5d8988d 100644 --- 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 index 7256833fd..155bef014 100644 --- 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 index 12a2ea982..5694c21bc 100644 --- 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 index fe08657f3..9eff4e56c 100644 --- 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 index 9c220eef5..8ef4953f5 100644 --- 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