Lisbet Alvarez
95918cb997
* fix: 🐛 header scrollbar overlap in desktop * refactor: 💡 undo desktop scrollbar changes * refactor: 💡 fix whitespace issues when viewport is small * fix: 🐛 scrollbar color issue in dark mode * fix: 🐛 move style inside of media query
275 lines
9.4 KiB
SCSS
275 lines
9.4 KiB
SCSS
/**
|
|
* Copyright IBM Corp. 2021, 2026
|
|
* SPDX-License-Identifier: BUSL-1.1
|
|
*/
|
|
|
|
@use '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
|
|
// look better in dark mode.
|
|
@mixin dark-mode {
|
|
// Tier-1 (HDS)
|
|
--token-color-palette-blue-500: #f2f8ff;
|
|
--token-color-palette-blue-400: #cce3fe;
|
|
--token-color-palette-blue-300: #1060ff;
|
|
--token-color-palette-blue-200: #0c56e9;
|
|
--token-color-palette-blue-100: #0046d1;
|
|
--token-color-palette-blue-50: #1c345f;
|
|
--token-color-palette-purple-500: #f9f2ff;
|
|
--token-color-palette-purple-400: #ead2fe;
|
|
--token-color-palette-purple-300: #a737ff;
|
|
--token-color-palette-purple-200: #911ced;
|
|
--token-color-palette-purple-100: #7b00db;
|
|
--token-color-palette-purple-50: #42215b;
|
|
--token-color-palette-green-500: #f2fbf6;
|
|
--token-color-palette-green-400: #cceeda;
|
|
--token-color-palette-green-300: #008a22;
|
|
--token-color-palette-green-200: #00781e;
|
|
--token-color-palette-green-100: #006619;
|
|
--token-color-palette-green-50: #054220;
|
|
--token-color-palette-amber-500: #fff9e8;
|
|
--token-color-palette-amber-400: #fbeabf;
|
|
--token-color-palette-amber-300: #bb5a00;
|
|
--token-color-palette-amber-200: #9e4b00;
|
|
--token-color-palette-amber-100: #803d00;
|
|
--token-color-palette-amber-50: #542800;
|
|
--token-color-palette-red-500: #fff5f5;
|
|
--token-color-palette-red-400: #fbd4d4;
|
|
--token-color-palette-red-300: #e52228;
|
|
--token-color-palette-red-200: #c00005;
|
|
--token-color-palette-red-100: #940004;
|
|
--token-color-palette-red-50: #51130a;
|
|
--token-color-palette-neutral-700: #fff;
|
|
--token-color-palette-neutral-600: #fafafa;
|
|
--token-color-palette-neutral-500: #f1f2f3;
|
|
--token-color-palette-neutral-400: #dedfe3;
|
|
--token-color-palette-neutral-300: #c2c5cb;
|
|
--token-color-palette-neutral-200: #8c909c;
|
|
--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;
|
|
|
|
// 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: #fafafa59;
|
|
--token-color-palette-neutral-600-alpha-100: #fafafa40;
|
|
--token-color-palette-neutral-500-alpha-200: #f1f2f340;
|
|
--token-color-palette-neutral-500-alpha-100: #f1f2f326;
|
|
--token-color-palette-neutral-500-alpha-50: #f1f2f30d;
|
|
|
|
// 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-surface-strong: var(--token-color-palette-neutral-50);
|
|
--token-form-control-base-border-color-default: var(
|
|
--token-color-palette-neutral-200
|
|
);
|
|
--token-form-indicator-optional-color: var(--token-color-palette-neutral-200);
|
|
--token-color-foreground-high-contrast: var(
|
|
--token-color-palette-neutral-700
|
|
);
|
|
}
|
|
|
|
@mixin dark-mode-modal-override {
|
|
// override for HDS dialog overlay to keep darker overlay
|
|
/* stylelint-disable-next-line selector-class-pattern */
|
|
.hds-dialog-primitive__overlay {
|
|
background-color: var(--token-color-palette-neutral-0);
|
|
}
|
|
|
|
// override for HDS modal to remove high contrast shadow and set border
|
|
.hds-modal {
|
|
border: 1px solid var(--token-color-border-strong);
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
@mixin dark-mode-ember-dropdown-override {
|
|
.ember-basic-dropdown-content {
|
|
background-color: var(--token-color-palette-neutral-0);
|
|
|
|
/* stylelint-disable-next-line selector-class-pattern */
|
|
&.ember-basic-dropdown-content--in-place {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin dark-mode-app-header-override {
|
|
.app-header-dark-mode-overrides {
|
|
color: var(--token-color-palette-neutral-700);
|
|
background: var(--token-color-palette-neutral-0);
|
|
border-bottom-color: var(--token-color-palette-neutral-100);
|
|
|
|
/* stylelint-disable selector-class-pattern */
|
|
.home-link-color-override {
|
|
background-color: var(--token-color-palette-neutral-0);
|
|
}
|
|
|
|
&.hds-app-header--is-mobile.hds-app-header--menu-is-open
|
|
.hds-app-header__actions {
|
|
background-color: var(--token-color-palette-neutral-0);
|
|
}
|
|
|
|
.dropdown-toggle-color-override,
|
|
.hds-app-header__menu-button {
|
|
background: var(--token-color-palette-neutral-0);
|
|
border-color: var(--token-color-palette-neutral-100);
|
|
|
|
&:hover {
|
|
background: var(--token-color-palette-neutral-50);
|
|
}
|
|
|
|
&:active,
|
|
&:focus {
|
|
background: var(--token-color-palette-neutral-0);
|
|
}
|
|
}
|
|
/* stylelint-enable selector-class-pattern */
|
|
}
|
|
}
|
|
|
|
@mixin dark-mode-app-side-nav-override {
|
|
.side-nav-dark-mode-overrides {
|
|
/* stylelint-disable selector-class-pattern */
|
|
.hds-app-side-nav__overlay {
|
|
background-color: var(--token-color-palette-neutral-50);
|
|
}
|
|
|
|
.hds-app-side-nav__list-title {
|
|
color: var(--token-color-palette-neutral-300);
|
|
}
|
|
|
|
.hds-app-side-nav__list-item-link.active {
|
|
&::after {
|
|
background-color: var(--token-color-palette-blue-400);
|
|
}
|
|
|
|
.hds-app-side-nav__list-item-icon-leading,
|
|
.hds-app-side-nav__list-item-text {
|
|
color: var(--token-color-palette-blue-400);
|
|
}
|
|
}
|
|
/* stylelint-enable selector-class-pattern */
|
|
}
|
|
}
|
|
|
|
// Overrides for CodeMirror 6 autocomplete and lint tooltips/panels.
|
|
@mixin dark-mode-codemirror-override {
|
|
/* stylelint-disable selector-class-pattern */
|
|
.cm-editor {
|
|
// Autocomplete dropdown and lint hover tooltips
|
|
.cm-tooltip {
|
|
background-color: var(--token-color-palette-neutral-50);
|
|
border: 1px solid var(--token-color-palette-neutral-100);
|
|
color: var(--token-color-palette-neutral-400);
|
|
}
|
|
|
|
// Arrow pointer for tooltips shown above the cursor
|
|
.cm-tooltip-above::before {
|
|
border-top-color: var(--token-color-palette-neutral-50);
|
|
}
|
|
|
|
// Arrow pointer for tooltips shown below the cursor
|
|
.cm-tooltip-below::before {
|
|
border-bottom-color: var(--token-color-palette-neutral-50);
|
|
}
|
|
|
|
// Autocomplete list > selected item highlight
|
|
.cm-tooltip-autocomplete > ul > li[aria-selected] {
|
|
background-color: var(--token-color-palette-blue-300);
|
|
color: var(--token-color-palette-neutral-700);
|
|
}
|
|
|
|
// Content/gutter border
|
|
.cm-content {
|
|
border-left: 1px solid var(--token-color-palette-neutral-100);
|
|
}
|
|
|
|
// Lint diagnostics panel (shown at the bottom of the editor)
|
|
.cm-panel.cm-panel-lint {
|
|
border-top: 3px solid var(--token-color-palette-neutral-100);
|
|
|
|
ul {
|
|
background-color: var(--token-color-palette-neutral-100);
|
|
|
|
// Lint panel > selected diagnostic item highlight
|
|
&:focus li.cm-diagnostic[aria-selected] {
|
|
background-color: var(--token-color-palette-neutral-50);
|
|
color: var(--token-color-palette-neutral-400);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
/* stylelint-enable selector-class-pattern */
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
// Apply dark style overrides to scrollbar when system is in dark mode and app theme is not set to light
|
|
html:has(.ember-application:not(.rose-theme-light)) {
|
|
scrollbar-color: var(--token-color-palette-neutral-400)
|
|
var(--token-color-palette-neutral-600);
|
|
}
|
|
|
|
.ember-application:not(.rose-theme-light) {
|
|
@include dark-mode;
|
|
@include dark-mode-modal-override;
|
|
@include dark-mode-ember-dropdown-override;
|
|
@include dark-mode-app-header-override;
|
|
@include dark-mode-app-side-nav-override;
|
|
@include dark-mode-codemirror-override;
|
|
}
|
|
}
|
|
|
|
// Apply dark style overrides to scrollbar when app theme is set to dark regardless of system theme
|
|
html:has(.ember-application.rose-theme-dark) {
|
|
scrollbar-color: var(--token-color-palette-neutral-400)
|
|
var(--token-color-palette-neutral-600);
|
|
}
|
|
|
|
.ember-application.rose-theme-dark {
|
|
@include dark-mode;
|
|
@include dark-mode-modal-override;
|
|
@include dark-mode-ember-dropdown-override;
|
|
@include dark-mode-app-header-override;
|
|
@include dark-mode-app-side-nav-override;
|
|
@include dark-mode-codemirror-override;
|
|
}
|