From bd6eee8eb38dad24018f58648883b0fbd1c73c33 Mon Sep 17 00:00:00 2001 From: Devon Anderson Date: Thu, 16 Mar 2023 10:19:20 -0400 Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20refactored=20dark-mo?= =?UTF-8?q?de=20styling=20for=20`HDS`=20(#1655)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Refactored boundary custom colors to be included in root instead of unused mixin. --- .../styles/hds/themes/dark-mode/index.scss | 34 +++++++++---------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/addons/rose/addon/styles/hds/themes/dark-mode/index.scss b/addons/rose/addon/styles/hds/themes/dark-mode/index.scss index 4d06786ff..14ab0905d 100644 --- a/addons/rose/addon/styles/hds/themes/dark-mode/index.scss +++ b/addons/rose/addon/styles/hds/themes/dark-mode/index.scss @@ -5,6 +5,23 @@ @import 'color-tokens-tier-2'; +// HDS Light Mode +// This is the default HDS color theme. Only Boundary custom tokens +// are included here for completeness. +:root { + // Tier-1 (Boundary custom) + // Boundary custom first-tier color tokens with alpha. + // In HDS, these correspond to the named color token, + // with the alpha identifier. However, they do not have stand-alone tokens + // associated with them and appear hard-coded alongside other styles. + // They are pulled out here for easier theming. + --token-color-palette-neutral-600-alpha-200: #3b3d4559; + --token-color-palette-neutral-600-alpha-100: #3b3d4540; + --token-color-palette-neutral-500-alpha-200: #656a7640; + --token-color-palette-neutral-500-alpha-100: #656a7626; + --token-color-palette-neutral-500-alpha-50: #656a760d; +} + // HDS Dark Mode // This theme reverses the lightness order of shades per color for tier-1 // color tokens. It also provides custom tier-2 mapping overrides that @@ -87,23 +104,6 @@ --token-form-indicator-optional-color: var(--token-color-palette-neutral-200); } -// HDS Light Mode -// This is the default HDS color theme. Only Boundary custom tokens -// are included here for completeness. -@mixin light-mode { - // Tier-1 (Boundary custom) - // Boundary custom first-tier color tokens with alpha. - // In HDS, these correspond to the named color token, - // with the alpha identifier. However, they do not have stand-alone tokens - // associated with them and appear hard-coded alongside other styles. - // They are pulled out here for easier theming. - --token-color-palette-neutral-600-alpha-200: #3b3d4559; - --token-color-palette-neutral-600-alpha-100: #3b3d4540; - --token-color-palette-neutral-500-alpha-200: #656a7640; - --token-color-palette-neutral-500-alpha-100: #656a7626; - --token-color-palette-neutral-500-alpha-50: #656a760d; -} - @media (prefers-color-scheme: dark) { .ember-application:not(.rose-theme-light) { @include dark-mode;