diff --git a/addons/rose/addon/styles/hds/themes/dark-mode/_color-tokens-tier-2.scss b/addons/rose/addon/styles/hds/themes/dark-mode/_color-tokens-tier-2.scss index 6027a26a8..806dd2c5c 100644 --- a/addons/rose/addon/styles/hds/themes/dark-mode/_color-tokens-tier-2.scss +++ b/addons/rose/addon/styles/hds/themes/dark-mode/_color-tokens-tier-2.scss @@ -11,8 +11,10 @@ --token-color-border-warning: var(--token-color-palette-amber-100); --token-color-border-critical: var(--token-color-palette-red-100); --token-color-focus-action-internal: var(--token-color-palette-blue-300); + // --token-color-focus-action-external: #5990ff; /* this is a special color used only for the focus style, to pass color contrast for a11y purpose */ --token-color-focus-critical-internal: var(--token-color-palette-red-300); + // --token-color-focus-critical-external: #dd7578; /* this is a special color used only for the focus style, to pass color contrast for a11y purpose */ --token-color-foreground-strong: var(--token-color-palette-neutral-700); --token-color-foreground-primary: var(--token-color-palette-neutral-600); @@ -23,26 +25,48 @@ --token-color-foreground-action-hover: var(--token-color-palette-blue-300); --token-color-foreground-action-active: var(--token-color-palette-blue-400); --token-color-foreground-highlight: var(--token-color-palette-purple-200); - --token-color-foreground-highlight-on-surface: var(--token-color-palette-purple-300); - --token-color-foreground-highlight-high-contrast: var(--token-color-palette-purple-500); + --token-color-foreground-highlight-on-surface: var( + --token-color-palette-purple-300 + ); + --token-color-foreground-highlight-high-contrast: var( + --token-color-palette-purple-500 + ); --token-color-foreground-success: var(--token-color-palette-green-200); - --token-color-foreground-success-on-surface: var(--token-color-palette-green-300); - --token-color-foreground-success-high-contrast: var(--token-color-palette-green-500); + --token-color-foreground-success-on-surface: var( + --token-color-palette-green-300 + ); + --token-color-foreground-success-high-contrast: var( + --token-color-palette-green-500 + ); --token-color-foreground-warning: var(--token-color-palette-amber-200); - --token-color-foreground-warning-on-surface: var(--token-color-palette-amber-300); - --token-color-foreground-warning-high-contrast: var(--token-color-palette-amber-500); + --token-color-foreground-warning-on-surface: var( + --token-color-palette-amber-300 + ); + --token-color-foreground-warning-high-contrast: var( + --token-color-palette-amber-500 + ); --token-color-foreground-critical: var(--token-color-palette-red-200); - --token-color-foreground-critical-on-surface: var(--token-color-palette-red-300); - --token-color-foreground-critical-high-contrast: var(--token-color-palette-red-500); + --token-color-foreground-critical-on-surface: var( + --token-color-palette-red-300 + ); + --token-color-foreground-critical-high-contrast: var( + --token-color-palette-red-500 + ); --token-color-page-primary: var(--token-color-palette-neutral-0); --token-color-page-faint: var(--token-color-palette-neutral-50); --token-color-surface-primary: var(--token-color-palette-neutral-0); --token-color-surface-faint: var(--token-color-palette-neutral-50); --token-color-surface-strong: var(--token-color-palette-neutral-100); --token-color-surface-interactive: var(--token-color-palette-neutral-0); - --token-color-surface-interactive-hover: var(--token-color-palette-neutral-100); - --token-color-surface-interactive-active: var(--token-color-palette-neutral-200); - --token-color-surface-interactive-disabled: var(--token-color-palette-neutral-50); + --token-color-surface-interactive-hover: var( + --token-color-palette-neutral-100 + ); + --token-color-surface-interactive-active: var( + --token-color-palette-neutral-200 + ); + --token-color-surface-interactive-disabled: var( + --token-color-palette-neutral-50 + ); --token-color-surface-action: var(--token-color-palette-blue-50); --token-color-surface-highlight: var(--token-color-palette-purple-50); --token-color-surface-success: var(--token-color-palette-green-50); @@ -117,46 +141,117 @@ // --token-color-waypoint-gradient-faint-start: #f6feff; /* this is the 'waypoint-50' value at 25% opacity on white */ // --token-color-waypoint-gradient-faint-stop: #e0fcff; - --token-elevation-inset-box-shadow: inset 0px 1px 2px 1px var(--token-color-palette-alpha-100); - --token-elevation-low-box-shadow: 0px 1px 1px 0px var(--token-color-palette-neutral-500-alpha-50), 0px 2px 2px 0px var(--token-color-palette-neutral-500-alpha-50); - --token-elevation-mid-box-shadow: 0px 2px 3px 0px var(--token-color-palette-alpha-100), 0px 8px 16px -10px var(--token-color-palette-alpha-200); - --token-elevation-high-box-shadow: 0px 2px 3px 0px var(--token-color-palette-neutral-500-alpha-100), 0px 16px 16px -10px var(--token-color-palette-alpha-200); - --token-elevation-higher-box-shadow: 0px 2px 3px 0px var(--token-color-palette-alpha-100), 0px 12px 28px 0px var(--token-color-palette-neutral-500-alpha-200); - --token-elevation-overlay-box-shadow: 0px 2px 3px 0px var(--token-color-palette-neutral-600-alpha-100), 0px 12px 24px 0px var(--token-color-palette-neutral-600-alpha-200); - --token-surface-inset-box-shadow: inset 0 0 0 1px var(--token-color-palette-neutral-500-alpha-200), inset 0px 1px 2px 1px var(--token-color-palette-alpha-100); - --token-surface-base-box-shadow: 0 0 0 1px var(--token-color-palette-alpha-200); - --token-surface-low-box-shadow: 0 0 0 1px var(--token-color-palette-neutral-500-alpha-100), 0px 1px 1px 0px var(--token-color-palette-neutral-500-alpha-50), 0px 2px 2px 0px var(--token-color-palette-neutral-500-alpha-50); - --token-surface-mid-box-shadow: 0 0 0 1px var(--token-color-palette-neutral-500-alpha-100), 0px 2px 3px 0px var(--token-color-palette-alpha-100), 0px 8px 16px -10px var(--token-color-palette-alpha-200); - --token-surface-high-box-shadow: 0 0 0 1px var(--token-color-palette-neutral-500-alpha-200), 0px 2px 3px 0px var(--token-color-palette-neutral-500-alpha-100), 0px 16px 16px -10px var(--token-color-palette-alpha-200); - --token-surface-higher-box-shadow: 0 0 0 1px var(--token-color-palette-alpha-200), 0px 2px 3px 0px var(--token-color-palette-alpha-100), 0px 12px 28px 0px var(--token-color-palette-neutral-500-alpha-200); - --token-surface-overlay-box-shadow: 0 0 0 1px var(--token-color-palette-neutral-600-alpha-100), 0px 2px 3px 0px var(--token-color-palette-neutral-600-alpha-100), 0px 12px 24px 0px var(--token-color-palette-neutral-600-alpha-200); - --token-focus-ring-action-box-shadow: inset 0 0 0 1px var(--token-color-palette-blue-300), 0 0 0 3px var(--token-color-focus-action-external); - --token-focus-ring-critical-box-shadow: inset 0 0 0 1px var(--token-color-palette-red-300), 0 0 0 3px var(--token-color-focus-critical-external); + --token-elevation-inset-box-shadow: inset 0 1px 2px 1px + var(--token-color-palette-alpha-100); + --token-elevation-low-box-shadow: 0 1px 1px 0 + var(--token-color-palette-neutral-500-alpha-50), + 0 2px 2px 0 var(--token-color-palette-neutral-500-alpha-50); + --token-elevation-mid-box-shadow: 0 2px 3px 0 + var(--token-color-palette-alpha-100), + 0 8px 16px -10px var(--token-color-palette-alpha-200); + --token-elevation-high-box-shadow: 0 2px 3px 0 + var(--token-color-palette-neutral-500-alpha-100), + 0 16px 16px -10px var(--token-color-palette-alpha-200); + --token-elevation-higher-box-shadow: 0 2px 3px 0 + var(--token-color-palette-alpha-100), + 0 12px 28px 0 var(--token-color-palette-neutral-500-alpha-200); + --token-elevation-overlay-box-shadow: 0 2px 3px 0 + var(--token-color-palette-neutral-600-alpha-100), + 0 12px 24px 0 var(--token-color-palette-neutral-600-alpha-200); + --token-surface-inset-box-shadow: inset 0 0 0 1px + var(--token-color-palette-neutral-500-alpha-200), + inset 0 1px 2px 1px var(--token-color-palette-alpha-100); + --token-surface-base-box-shadow: 0 0 0 1px + var(--token-color-palette-alpha-200); + --token-surface-low-box-shadow: 0 0 0 1px + var(--token-color-palette-neutral-500-alpha-100), + 0 1px 1px 0 var(--token-color-palette-neutral-500-alpha-50), + 0 2px 2px 0 var(--token-color-palette-neutral-500-alpha-50); + --token-surface-mid-box-shadow: 0 0 0 1px + var(--token-color-palette-neutral-500-alpha-100), + 0 2px 3px 0 var(--token-color-palette-alpha-100), + 0 8px 16px -10px var(--token-color-palette-alpha-200); + --token-surface-high-box-shadow: 0 0 0 1px + var(--token-color-palette-neutral-500-alpha-200), + 0 2px 3px 0 var(--token-color-palette-neutral-500-alpha-100), + 0 16px 16px -10px var(--token-color-palette-alpha-200); + --token-surface-higher-box-shadow: 0 0 0 1px + var(--token-color-palette-alpha-200), + 0 2px 3px 0 var(--token-color-palette-alpha-100), + 0 12px 28px 0 var(--token-color-palette-neutral-500-alpha-200); + --token-surface-overlay-box-shadow: 0 0 0 1px + var(--token-color-palette-neutral-600-alpha-100), + 0 2px 3px 0 var(--token-color-palette-neutral-600-alpha-100), + 0 12px 24px 0 var(--token-color-palette-neutral-600-alpha-200); + --token-focus-ring-action-box-shadow: inset 0 0 0 1px + var(--token-color-palette-blue-300), + 0 0 0 3px var(--token-color-focus-action-external); + --token-focus-ring-critical-box-shadow: inset 0 0 0 1px + var(--token-color-palette-red-300), + 0 0 0 3px var(--token-color-focus-critical-external); --token-form-label-color: var(--token-color-palette-neutral-700); --token-form-legend-color: var(--token-color-palette-neutral-700); --token-form-helper-text-color: var(--token-color-palette-neutral-500); --token-form-indicator-optional-color: var(--token-color-palette-neutral-500); --token-form-error-color: var(--token-color-palette-red-300); - - --token-form-control-base-foreground-value-color: var(--token-color-palette-neutral-700); - --token-form-control-base-foreground-placeholder-color: var(--token-color-palette-neutral-500); - --token-form-control-base-surface-color-default: var(--token-color-palette-neutral-0); - --token-form-control-base-surface-color-hover: var(--token-color-palette-neutral-100); - --token-form-control-base-border-color-default: var(--token-color-palette-neutral-400); - --token-form-control-base-border-color-hover: var(--token-color-palette-neutral-500); - --token-form-control-checked-foreground-color: var(--token-color-palette-neutral-0); - --token-form-control-checked-surface-color-default: var(--token-color-palette-blue-200); - --token-form-control-checked-surface-color-hover: var(--token-color-palette-blue-300); - --token-form-control-checked-border-color-default: var(--token-color-palette-blue-300); - --token-form-control-checked-border-color-hover: var(--token-color-palette-blue-400); - --token-form-control-invalid-border-color-default: var(--token-color-palette-red-300); - --token-form-control-invalid-border-color-hover: var(--token-color-palette-red-400); - --token-form-control-readonly-foreground-color: var(--token-color-palette-neutral-600); - --token-form-control-readonly-surface-color: var(--token-color-palette-neutral-100); - --token-form-control-readonly-border-color: var(--token-color-palette-alpha-100); - --token-form-control-disabled-foreground-color: var(--token-color-palette-neutral-400); - --token-form-control-disabled-surface-color: var(--token-color-palette-neutral-50); - --token-form-control-disabled-border-color: var(--token-color-palette-alpha-200); - - --token-form-toggle-base-surface-color-default: var(--token-color-palette-neutral-100); /* the toggle has a different base surface color, compared to the other controls */ + --token-form-control-base-foreground-value-color: var( + --token-color-palette-neutral-700 + ); + --token-form-control-base-foreground-placeholder-color: var( + --token-color-palette-neutral-500 + ); + --token-form-control-base-surface-color-default: var( + --token-color-palette-neutral-0 + ); + --token-form-control-base-surface-color-hover: var( + --token-color-palette-neutral-100 + ); + --token-form-control-base-border-color-default: var( + --token-color-palette-neutral-400 + ); + --token-form-control-base-border-color-hover: var( + --token-color-palette-neutral-500 + ); + --token-form-control-checked-foreground-color: var( + --token-color-palette-neutral-0 + ); + --token-form-control-checked-surface-color-default: var( + --token-color-palette-blue-200 + ); + --token-form-control-checked-surface-color-hover: var( + --token-color-palette-blue-300 + ); + --token-form-control-checked-border-color-default: var( + --token-color-palette-blue-300 + ); + --token-form-control-checked-border-color-hover: var( + --token-color-palette-blue-400 + ); + --token-form-control-invalid-border-color-default: var( + --token-color-palette-red-300 + ); + --token-form-control-invalid-border-color-hover: var( + --token-color-palette-red-400 + ); + --token-form-control-readonly-foreground-color: var( + --token-color-palette-neutral-600 + ); + --token-form-control-readonly-surface-color: var( + --token-color-palette-neutral-100 + ); + --token-form-control-readonly-border-color: var( + --token-color-palette-alpha-100 + ); + --token-form-control-disabled-foreground-color: var( + --token-color-palette-neutral-400 + ); + --token-form-control-disabled-surface-color: var( + --token-color-palette-neutral-50 + ); + --token-form-control-disabled-border-color: var( + --token-color-palette-alpha-200 + ); + --token-form-toggle-base-surface-color-default: var( + --token-color-palette-neutral-100 + ); /* the toggle has a different base surface color, compared to the other controls */ } 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 0b20eb719..303530b26 100644 --- a/addons/rose/addon/styles/hds/themes/dark-mode/index.scss +++ b/addons/rose/addon/styles/hds/themes/dark-mode/index.scss @@ -36,8 +36,7 @@ --token-color-palette-red-200: #c00005; --token-color-palette-red-100: #940004; --token-color-palette-red-50: #51130a; - - --token-color-palette-neutral-700: #ffffff; + --token-color-palette-neutral-700: #fff; --token-color-palette-neutral-600: #fafafa; --token-color-palette-neutral-500: #f1f2f3; --token-color-palette-neutral-400: #dedfe3; @@ -46,7 +45,6 @@ --token-color-palette-neutral-100: #656a76; --token-color-palette-neutral-50: #3b3d45; --token-color-palette-neutral-0: #0c0c0e; - --token-color-palette-alpha-300: #fafafa66; --token-color-palette-alpha-200: #dedfe333; --token-color-palette-alpha-100: #dedfe31a; @@ -65,12 +63,22 @@ // Tier 2 (HDS dark mode overrides) // These mappings improve contrast as needed in dark mode. - --token-color-foreground-highlight-on-surface: var(--token-color-palette-purple-400); - --token-color-foreground-success-on-surface: var(--token-color-palette-green-400); - --token-color-foreground-warning-on-surface: var(--token-color-palette-amber-400); - --token-color-foreground-critical-on-surface: var(--token-color-palette-red-400); + --token-color-foreground-highlight-on-surface: var( + --token-color-palette-purple-400 + ); + --token-color-foreground-success-on-surface: var( + --token-color-palette-green-400 + ); + --token-color-foreground-warning-on-surface: var( + --token-color-palette-amber-400 + ); + --token-color-foreground-critical-on-surface: var( + --token-color-palette-red-400 + ); --token-color-surface-strong: var(--token-color-palette-neutral-50); - --token-form-control-base-border-color-default: var(--token-color-palette-neutral-200); + --token-form-control-base-border-color-default: var( + --token-color-palette-neutral-200 + ); } // HDS Light Mode diff --git a/addons/rose/package.json b/addons/rose/package.json index 87a4ce02a..8daa6aba5 100644 --- a/addons/rose/package.json +++ b/addons/rose/package.json @@ -22,7 +22,7 @@ "format:hbs": "prettier --write '{addon,tests}/**/*.hbs'", "format:js": "prettier --write '{addon,app,config,stories,tests}/**/*.js' *.js", "format:mdx": "prettier --write 'addon/**/*.mdx'", - "format:sass": "prettier --write app/**/*.scss", + "format:sass": "prettier --write '{addon,app}/**/*.scss'", "start": "ember serve", "test": "ember test", "test:ember-compatibility": "ember try:each",