From ee9ad0143a1d274fa6a22a3d79d7992a120ae6fa Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Tue, 20 Jun 2023 16:06:26 +0000 Subject: [PATCH] [New Theme] Introduce the first installment of the new look and feel (#819) * [New Theme] Introduce the new color palette Signed-off-by: Miki * [New Theme] Revert `$ouiLinkColor` to match `$ouiColorPrimaryText` Signed-off-by: Miki * [New Theme] Update fonts to "Source Sans 3" and "Source Code Pro" Signed-off-by: Miki * [New Theme] Remove font override from `.ouiText blockquote` * To maintain the previous look in the default theme, the rule was added as an override Signed-off-by: Miki * [New Theme] Set ouiButton font weight to semi-bold Signed-off-by: Miki * [New Theme] Remove negative `letter-spacing` from default font * To prevent changes in OuiTitle, the variants that inherited their `letter-spacing` were modified to explicitly have the old value. Signed-off-by: Miki --------- Signed-off-by: Miki (cherry picked from commit 6884ae467b17aea9fd920d7acf7da3bb3589ecca) Signed-off-by: github-actions[bot] --- src/components/text/_text.scss | 1 - src/theme_dark.scss | 9 ++++++++ src/theme_light.scss | 9 ++++++++ .../global_styling/mixins/_button.scss | 1 + .../global_styling/mixins/_typography.scss | 1 - .../global_styling/variables/_colors.scss | 22 +++++++++---------- .../global_styling/variables/_typography.scss | 6 +++-- .../oui_cascadia_colors_dark.scss | 22 +++++++++---------- 8 files changed, 45 insertions(+), 26 deletions(-) diff --git a/src/components/text/_text.scss b/src/components/text/_text.scss index ab6b442f6e..e258b7e5c5 100644 --- a/src/components/text/_text.scss +++ b/src/components/text/_text.scss @@ -153,7 +153,6 @@ text-align: center; margin-left: auto; margin-right: auto; - font-family: Georgia, Times, Times New Roman, serif; font-style: italic; letter-spacing: normal; diff --git a/src/theme_dark.scss b/src/theme_dark.scss index 8610e5d7c1..b871811382 100644 --- a/src/theme_dark.scss +++ b/src/theme_dark.scss @@ -20,3 +20,12 @@ // Packages @import '../packages/index'; + +/* During creation of the new theme, these rules had to be + * removed from the components. To make sure the theme retains + * its looks, they are reintroduced here. + */ + +.ouiText blockquote { + font-family: Georgia, Times, Times New Roman, serif; +} diff --git a/src/theme_light.scss b/src/theme_light.scss index f81d5b19eb..0063602990 100644 --- a/src/theme_light.scss +++ b/src/theme_light.scss @@ -20,3 +20,12 @@ // Packages @import '../packages/index'; + +/* During creation of the new theme, these rules had to be + * removed from the components. To make sure the theme retains + * its looks, they are reintroduced here. + */ + +.ouiText blockquote { + font-family: Georgia, Times, Times New Roman, serif; +} diff --git a/src/themes/oui-cascadia/global_styling/mixins/_button.scss b/src/themes/oui-cascadia/global_styling/mixins/_button.scss index 26578d8b63..4008fac5ad 100644 --- a/src/themes/oui-cascadia/global_styling/mixins/_button.scss +++ b/src/themes/oui-cascadia/global_styling/mixins/_button.scss @@ -51,6 +51,7 @@ text-decoration: none; border: solid 1px transparent; + font-weight: 600; // sass-lint:disable mixins-before-declarations // focus states should come after all default styles diff --git a/src/themes/oui-cascadia/global_styling/mixins/_typography.scss b/src/themes/oui-cascadia/global_styling/mixins/_typography.scss index 2d5ab518e0..dceb39c6e7 100644 --- a/src/themes/oui-cascadia/global_styling/mixins/_typography.scss +++ b/src/themes/oui-cascadia/global_styling/mixins/_typography.scss @@ -17,7 +17,6 @@ @mixin ouiFont { font-family: var(--oui-font-family); font-weight: $ouiFontWeightRegular; - letter-spacing: -.005em; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-kerning: normal; diff --git a/src/themes/oui-cascadia/global_styling/variables/_colors.scss b/src/themes/oui-cascadia/global_styling/variables/_colors.scss index 9310b2d6a2..1208ceea8a 100644 --- a/src/themes/oui-cascadia/global_styling/variables/_colors.scss +++ b/src/themes/oui-cascadia/global_styling/variables/_colors.scss @@ -13,11 +13,11 @@ @import '../functions/index'; // These colors stay the same no matter the theme -$ouiColorGhost: #FFF !default; -$ouiColorInk: #000 !default; +$ouiColorGhost: #FCFEFF !default; +$ouiColorInk: #0A121A !default; // Core -$ouiColorPrimary: #006BB4 !default; +$ouiColorPrimary: #159D8D !default; $ouiColorSecondary: #017D73 !default; $ouiColorAccent: #DD0A73 !default; @@ -27,16 +27,16 @@ $ouiColorWarning: #F5A700 !default; $ouiColorDanger: #BD271E !default; // Grays -$ouiColorEmptyShade: #FFF !default; -$ouiColorLightestShade: #F5F7FA !default; -$ouiColorLightShade: #D3DAE6 !default; -$ouiColorMediumShade: #98A2B3 !default; -$ouiColorDarkShade: #69707D !default; -$ouiColorDarkestShade: #343741 !default; -$ouiColorFullShade: #000 !default; +$ouiColorEmptyShade: #FCFEFF !default; +$ouiColorLightestShade: #E3E5E8 !default; +$ouiColorLightShade: #D6D9DD !default; +$ouiColorMediumShade: #ADB4BA !default; +$ouiColorDarkShade: #5A6875 !default; +$ouiColorDarkestShade: #2A3947 !default; +$ouiColorFullShade: #0A1219 !default; // Backgrounds -$ouiPageBackgroundColor: tint($ouiColorLightestShade, 50%) !default; +$ouiPageBackgroundColor: #F0F2F4 !default; $ouiColorHighlight: #FFFCDD !default; // Every color below must be based mathematically on the set above and in a particular order. diff --git a/src/themes/oui-cascadia/global_styling/variables/_typography.scss b/src/themes/oui-cascadia/global_styling/variables/_typography.scss index 0a2f6962da..f2a1b81be5 100644 --- a/src/themes/oui-cascadia/global_styling/variables/_typography.scss +++ b/src/themes/oui-cascadia/global_styling/variables/_typography.scss @@ -37,8 +37,8 @@ } // sass-lint:disable quotes -$ouiFontFamily: #{"'Inter UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'"} !default; -$ouiCodeFontFamily: #{"'Roboto Mono', Consolas, Menlo, Courier, monospace"} !default; +$ouiFontFamily: #{"'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'"} !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 @@ -76,11 +76,13 @@ $ouiTitles: ( 'font-size': $ouiFontSizeXS, 'line-height': lineHeightFromBaseline(3), 'font-weight': $ouiFontWeightBold, + 'letter-spacing': -.005em, ), 'xxs': ( 'font-size': $ouiFontSizeS, 'line-height': lineHeightFromBaseline(3), 'font-weight': $ouiFontWeightBold, + 'letter-spacing': -.005em, ), 'xs': ( 'font-size': $ouiFontSize, diff --git a/src/themes/oui-cascadia/oui_cascadia_colors_dark.scss b/src/themes/oui-cascadia/oui_cascadia_colors_dark.scss index 45cdb499ad..a9131fe2e3 100644 --- a/src/themes/oui-cascadia/oui_cascadia_colors_dark.scss +++ b/src/themes/oui-cascadia/oui_cascadia_colors_dark.scss @@ -12,11 +12,11 @@ @import 'global_styling/functions/index'; // These colors stay the same no matter the theme -$ouiColorGhost: #FFF; -$ouiColorInk: #000; +$ouiColorGhost: #FCFEFF; +$ouiColorInk: #0A121A; // Core -$ouiColorPrimary: #1BA9F5; +$ouiColorPrimary: #159D8D; $ouiColorSecondary: #7DE2D1; $ouiColorAccent: #F990C0; @@ -26,16 +26,16 @@ $ouiColorWarning: #FFCE7A; $ouiColorDanger: #F66; // Grays -$ouiColorEmptyShade: #1D1E24; -$ouiColorLightestShade: #25262E; -$ouiColorLightShade: #343741; -$ouiColorMediumShade: #535966; -$ouiColorDarkShade: #98A2B3; -$ouiColorDarkestShade: #D4DAE5; -$ouiColorFullShade: #FFF; +$ouiColorEmptyShade: #0A121A; +$ouiColorLightestShade: #101B25; +$ouiColorLightShade: #293847; +$ouiColorMediumShade: #5B6875; +$ouiColorDarkShade: #8D98A3; +$ouiColorDarkestShade: #DFE3E8; +$ouiColorFullShade: #FCFEFF; // Backgrounds -$ouiPageBackgroundColor: shade($ouiColorLightestShade, 45%); +$ouiPageBackgroundColor: #172430; $ouiColorHighlight: #2E2D25; // Variations from core