Skip to content

Update the light and dark palettes. #6585

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
dbatiste wants to merge 14 commits into
base: main
Choose a base branch
from
+214 −78
Draft

Update the light and dark palettes. #6585

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
0a8c529
Update the light and dark palettes.
dbatiste Feb 11, 2026
ea35347
Update d2l-button with semantic colors.
dbatiste Feb 12, 2026
c491e09
Update typography styles with semantic colors.
dbatiste Feb 12, 2026
806f49d
Include opacity CSS variables.
dbatiste Feb 12, 2026
4309f8d
Update d2l-button to use opacity variable.
dbatiste Feb 12, 2026
69d9960
Update d2l-input-text with semantic colors.
dbatiste Feb 12, 2026
0fefdc7
Update input-styles to use box-shadow variable.
dbatiste Feb 12, 2026
3f18e90
Update d2l-icon with semantic colors.
dbatiste Feb 12, 2026
5e9301d
Minor updates to palette.
dbatiste Feb 18, 2026
627b0dd
Change to use "color-mode".
dbatiste Feb 19, 2026
c6bfa39
Update with new semantic structure for palette.
dbatiste Feb 25, 2026
951aff2
Merge branch 'main' into dbatiste/initial-dark-mode-palette
dbatiste Feb 26, 2026
6aeade8
Don't use sunken for input background.
dbatiste Feb 26, 2026
89de8c2
Merge branch 'dbatiste/initial-dark-mode-palette' of github.com:Brigh…
dbatiste Feb 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions components/alert/alert.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,8 @@ class Alert extends LocalizeCoreElement(LitElement) {

:host {
animation: 600ms ease drop-in;
background: white;
border: 1px solid var(--d2l-color-mica);
background: var(--d2l-sem-background-color-base);
border: 1px solid var(--d2l-sem-border-color-standard);
border-inline-start-width: 0.3rem;
border-radius: 0.3rem;
box-sizing: border-box;
Expand All @@ -70,17 +70,17 @@ class Alert extends LocalizeCoreElement(LitElement) {

:host([type="critical"]),
:host([type="error"]) {
border-inline-start-color: var(--d2l-color-feedback-error);
border-inline-start-color: var(--d2l-sem-status-color-error);
}
:host([type="warning"]) {
border-inline-start-color: var(--d2l-color-feedback-warning);
border-inline-start-color: var(--d2l-sem-status-color-warning);
}
:host([type="default"]),
:host([type="call-to-action"]) {
border-inline-start-color: var(--d2l-color-feedback-action);
border-inline-start-color: var(--d2l-sem-status-color-default);
}
:host([type="success"]) {
border-inline-start-color: var(--d2l-color-feedback-success);
border-inline-start-color: var(--d2l-sem-status-color-success);
}

.d2l-alert-text {
Expand Down
16 changes: 8 additions & 8 deletions components/button/button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,40 +57,40 @@ class Button extends ButtonMixin(LitElement) {
button[disabled]:hover,
button[disabled]:focus,
:host([active]) button[disabled] {
background-color: var(--d2l-color-gypsum);
color: var(--d2l-color-ferrite);
background-color: var(--d2l-sem-background-color-interactive-secondary-default);
color: var(--d2l-sem-text-color-static-standard);
}

button:hover,
button:focus,
:host([active]) button {
background-color: var(--d2l-color-mica);
background-color: var(--d2l-sem-background-color-interactive-secondary-hover);
}

:host([disabled]) button {
cursor: default;
position: relative;
}
:host([disabled]) button::before {
background-color: white;
background-color: var(--d2l-sem-background-color-base);
border-radius: inherit;
content: "";
inset: 0;
opacity: 0.5;
opacity: var(--d2l-sem-opacity-disabled-control);
position: absolute;
}

:host([primary]) button,
:host([primary]) button[disabled]:hover,
:host([primary]) button[disabled]:focus,
:host([primary][active]) button[disabled] {
background-color: var(--d2l-color-celestine);
color: #ffffff;
background-color: var(--d2l-sem-background-color-interactive-primary-default);
color: var(--d2l-sem-text-color-static-inverted);
}
:host([primary]) button:hover,
:host([primary]) button:focus,
:host([primary][active]) button {
background-color: var(--d2l-color-celestine-minus-1);
background-color: var(--d2l-sem-background-color-interactive-primary-hover);
}
`
];
Expand Down
132 changes: 122 additions & 10 deletions components/colors/colors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,128 @@ if (globalThis.document !== undefined && !globalThis.document.head.querySelector
style.id = 'd2l-colors';

const lightPalette = `
--d2l-color-background-base: var(--d2l-color-sylvite);
--d2l-color-background-default: #ffffff;
--d2l-color-border-medium: var(--d2l-color-mica);
--d2l-color-font-base: var(--d2l-color-ferrite);
--d2l-sem-background-color-base: #ffffff;
Copy link
Contributor Author

@dbatiste dbatiste Feb 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We've made a bunch of changes... curious what you/others think of the semantic names.

Of note:

  • Added the -sem- qualifier clearly identify our semantic variables and avoid any confusion or conflict. Both Jeff and I would also be onboard with -s- in effort to shorten if others want.
  • The -background- is now included per Dave L's previous inquiry about what the colors were for. We could abbreviate to -bg- if people want, but we're not abbreviating border et al. so 🤷‍♂️ .
  • The -color- is now included to enable us to add non-color variables for spacing and radius later.

I'm not sure how difficult it would be on the Figma side, but we might be able to flip things from --d2l-sem-background-color-elevated to --d2l-sem-elevated-background-color. Can consider that if people want.

--d2l-sem-background-color-elevated: var(--d2l-sem-background-color-base);
--d2l-sem-background-color-floating: var(--d2l-sem-background-color-base);
--d2l-sem-background-color-interactive-faint-default: var(--d2l-color-regolith);
--d2l-sem-background-color-interactive-faint-hover: var(--d2l-color-sylvite);
--d2l-sem-background-color-interactive-highlighted: var(--d2l-sem-brand-color-highlight);
--d2l-sem-background-color-interactive-primary-default: var(--d2l-sem-brand-color-primary-default);
--d2l-sem-background-color-interactive-primary-hover: var(--d2l-sem-brand-color-primary-hover);
--d2l-sem-background-color-interactive-secondary-default: var(--d2l-color-gypsum);
--d2l-sem-background-color-interactive-secondary-hover: var(--d2l-color-mica);
--d2l-sem-background-color-interactive-tertiary-default: #ffffff;
--d2l-sem-background-color-interactive-tertiary-hover: var(--d2l-sem-background-color-interactive-secondary-default);
--d2l-sem-background-color-interactive-translucent-default: #000000;
--d2l-sem-background-color-interactive-translucent-hover: var(--d2l-sem-brand-color-primary-default);
--d2l-sem-background-color-sunken: #f6f7f8;
--d2l-sem-border-color-emphasized: var(--d2l-color-galena);
--d2l-sem-border-color-focus: var(--d2l-color-celestine);
--d2l-sem-border-color-standard: var(--d2l-color-mica);
--d2l-sem-border-color-subtle: var(--d2l-color-gypsum);
--d2l-sem-brand-color-highlight: var(--d2l-color-celestine-plus-2);
--d2l-sem-brand-color-primary-default: var(--d2l-color-celestine);
--d2l-sem-brand-color-primary-hover: var(--d2l-color-celestine-minus-1);
--d2l-sem-icon-color-faint: var(--d2l-sem-border-color-standard);
--d2l-sem-icon-color-inverted: #ffffff;
--d2l-sem-icon-color-standard: var(--d2l-color-tungsten);
--d2l-sem-status-color-default: var(--d2l-color-celestine);
--d2l-sem-status-color-error: var(--d2l-color-cinnabar);
--d2l-sem-status-color-success-text: var(--d2l-color-olivine-minus-1);
--d2l-sem-status-color-success: var(--d2l-color-olivine);
--d2l-sem-status-color-warning-text: var(--d2l-color-carnelian-minus-1);
--d2l-sem-status-color-warning: var(--d2l-color-carnelian);
--d2l-sem-text-color-interactive-default: var(--d2l-sem-brand-color-primary-default);
--d2l-sem-text-color-interactive-hover: var(--d2l-sem-brand-color-primary-hover);
--d2l-sem-text-color-static-faint: var(--d2l-color-galena);
--d2l-sem-text-color-static-inverted: #ffffff;
--d2l-sem-text-color-static-standard: var(--d2l-color-ferrite);
--d2l-sem-text-color-static-subtle: var(--d2l-color-tungsten);

--d2l-sem-opacity-disabled-control: 0.5;
--d2l-sem-opacity-disabled-link: 0.74;
--d2l-sem-opacity-disabled-linkicon: 0.64;

--d2l-sem-shadow-attached-color: rgba(0, 0, 0, 0.03);
--d2l-sem-shadow-attached-offset-x: 0;
--d2l-sem-shadow-attached-offset-y: 2px;
--d2l-sem-shadow-attached-blur: 4px;
--d2l-sem-shadow-attached-spread: 0;
--d2l-sem-shadow-attached: var(--d2l-shadow-attached-offset-x) var(--d2l-shadow-attached-offset-y) var(--d2l-shadow-attached-blur) var(--d2l-shadow-attached-spread) var(--d2l-shadow-attached-color);
--d2l-sem-shadow-floating-color: rgba(0, 0, 0, 0.15);
--d2l-sem-shadow-floating-offset-x: 0;
--d2l-sem-shadow-floating-offset-y: 2px;
--d2l-sem-shadow-floating-blur: 12px;
--d2l-sem-shadow-floating-spread: 0;
--d2l-sem-shadow-floating: var(--d2l-shadow-floating-offset-x) var(--d2l-shadow-floating-offset-y) var(--d2l-shadow-floating-blur) var(--d2l-shadow-floating-spread) var(--d2l-shadow-floating-color);
--d2l-sem-shadow-inset-color: rgba(177, 185, 190, 0.2); /* corundum */
--d2l-sem-shadow-inset-offset-x: 0;
--d2l-sem-shadow-inset-offset-y: 2px;
--d2l-sem-shadow-inset-blur: 0;
--d2l-sem-shadow-inset-spread: 0;
--d2l-sem-shadow-inset: inset var(--d2l-shadow-inset-offset-x) var(--d2l-shadow-inset-offset-y) var(--d2l-shadow-inset-blur) var(--d2l-shadow-inset-spread) var(--d2l-shadow-inset-color);
`;
const darkPalette = `
--d2l-color-background-base: #000000;
--d2l-color-background-default: #18191a; /* new color */
--d2l-color-border-medium: var(--d2l-color-tungsten);
--d2l-color-font-base: var(--d2l-color-regolith);
--d2l-sem-background-color-base: #161718;
--d2l-sem-background-color-elevated: var(--d2l-color-ferrite);
--d2l-sem-background-color-floating: var(--d2l-color-ferrite);
--d2l-sem-background-color-interactive-faint-default: var(--d2l-color-ferrite);
--d2l-sem-background-color-interactive-faint-hover: #303335;
--d2l-sem-background-color-interactive-highlighted: var(--d2l-sem-brand-color-highlight);
--d2l-sem-background-color-interactive-primary-default: var(--d2l-sem-brand-color-primary-default);
--d2l-sem-background-color-interactive-primary-hover: var(--d2l-sem-brand-color-primary-hover);
--d2l-sem-background-color-interactive-secondary-default: #303335;
--d2l-sem-background-color-interactive-secondary-hover: var(--d2l-color-ferrite);
--d2l-sem-background-color-interactive-tertiary-default: #000000;
--d2l-sem-background-color-interactive-tertiary-hover: var(--d2l-sem-background-color-interactive-secondary-default);
--d2l-sem-background-color-interactive-translucent-default: #000000;
--d2l-sem-background-color-interactive-translucent-hover: var(--d2l-sem-brand-color-primary-default);
--d2l-sem-background-color-sunken: #000000;
--d2l-sem-border-color-emphasized: var(--d2l-color-galena);
--d2l-sem-border-color-focus: var(--d2l-color-celestine-plus-1);
--d2l-sem-border-color-standard: var(--d2l-color-tungsten);
--d2l-sem-border-color-subtle: #303335;
--d2l-sem-brand-color-highlight: #161718;
--d2l-sem-brand-color-primary-default: var(--d2l-color-celestine-plus-1);
--d2l-sem-brand-color-primary-hover: var(--d2l-color-celestine);
--d2l-sem-icon-color-faint: var(--d2l-sem-border-color-standard);
--d2l-sem-icon-color-inverted: #ffffff;
--d2l-sem-icon-color-standard: var(--d2l-color-corundum);
--d2l-sem-status-color-default: var(--d2l-sem-brand-color-primary-default);
--d2l-sem-status-color-error: var(--d2l-color-cinnabar-plus-1);
--d2l-sem-status-color-success-text: #ffffff;
--d2l-sem-status-color-success: var(--d2l-color-olivine);
--d2l-sem-status-color-warning-text: var(--d2l-color-carnelian);
--d2l-sem-status-color-warning: var(--d2l-color-carnelian);
--d2l-sem-text-color-interactive-default: var(--d2l-sem-brand-color-primary-default);
--d2l-sem-text-color-interactive-hover: var(--d2l-sem-brand-color-primary-hover);
--d2l-sem-text-color-static-faint: var(--d2l-color-galena);
--d2l-sem-text-color-static-inverted: #161718;
--d2l-sem-text-color-static-standard: var(--d2l-color-mica);
--d2l-sem-text-color-static-subtle: var(--d2l-color-chromite);

--d2l-sem-opacity-disabled-control: 0.5;
--d2l-sem-opacity-disabled-link: 0.74;
--d2l-sem-opacity-disabled-linkicon: 0.64;

--d2l-sem-shadow-attached-color: rgba(0, 0, 0, 0.03);
--d2l-sem-shadow-attached-offset-x: 0;
--d2l-sem-shadow-attached-offset-y: 2px;
--d2l-sem-shadow-attached-blur: 4px;
--d2l-sem-shadow-attached-spread: 0;
--d2l-sem-shadow-attached: var(--d2l-shadow-attached-offset-x) var(--d2l-shadow-attached-offset-y) var(--d2l-shadow-attached-blur) var(--d2l-shadow-attached-spread) var(--d2l-shadow-attached-color);
--d2l-sem-shadow-floating-color: rgba(0, 0, 0, 0.85);
--d2l-sem-shadow-floating-offset-x: 0;
--d2l-sem-shadow-floating-offset-y: 2px;
--d2l-sem-shadow-floating-blur: 12px;
--d2l-sem-shadow-floating-spread: 0;
--d2l-sem-shadow-floating: var(--d2l-shadow-floating-offset-x) var(--d2l-shadow-floating-offset-y) var(--d2l-shadow-floating-blur) var(--d2l-shadow-floating-spread) var(--d2l-shadow-floating-color);
--d2l-sem-shadow-inset-color: rgba(177, 185, 190, 0.2); /* corundum */
--d2l-sem-shadow-inset-offset-x: 0;
--d2l-sem-shadow-inset-offset-y: 2px;
--d2l-sem-shadow-inset-blur: 0;
--d2l-sem-shadow-inset-spread: 0;
--d2l-sem-shadow-inset: inset var(--d2l-shadow-inset-offset-x) var(--d2l-shadow-inset-offset-y) var(--d2l-shadow-inset-blur) var(--d2l-shadow-inset-spread) var(--d2l-shadow-inset-color);
`;

style.textContent = `
Expand Down Expand Up @@ -109,11 +221,11 @@ if (globalThis.document !== undefined && !globalThis.document.head.querySelector
html {
${lightPalette}
}
html[data-theme="dark"] {
html[data-color-mode="dark"] {
${darkPalette}
}
@media (prefers-color-scheme: dark) {
html[data-theme="os"] {
html[data-color-mode="os"] {
${darkPalette}
}
}
Expand Down
7 changes: 7 additions & 0 deletions components/demo/demo-color-mode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
const urlParams = new URLSearchParams(window.location.search);
const colorMode = urlParams.get('color-mode') || localStorage.getItem('color-mode');
if (colorMode) {
document.documentElement.dataset.colorMode = colorMode;
} else {
delete document.documentElement.dataset.colorMode;
}
62 changes: 43 additions & 19 deletions components/demo/demo-page-settings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import './demo-flags.js';
import './demo-theme.js';
import './demo-color-mode.js';
import '../button/button.js';
import '../inputs/input-checkbox-group.js';
import '../inputs/input-checkbox.js';
import '../inputs/input-fieldset.js';
import '../inputs/input-group.js';
import '../collapsible-panel/collapsible-panel.js';
import '../collapsible-panel/collapsible-panel-summary-item.js';
Expand All @@ -13,7 +14,7 @@ import { inputLabelStyles } from '../inputs/input-label-styles.js';
import { selectStyles } from '../inputs/input-select-styles.js';

const localeSettings = getDocumentLocaleSettings();
const defaultTheme = 'light';
const defaultColorMode = 'light';

class DemoPageSettings extends LitElement {

Expand All @@ -35,8 +36,14 @@ class DemoPageSettings extends LitElement {
d2l-collapsible-panel {
width: 100%;
}
.color-mode-group {
display: inline-flex;
}
#applyFlagsButton {
margin-block-start: 1rem;
max-width: max-content;
}
#useAsDefaultColorMode {
margin-block-end: 0;
}
`];
}
Expand All @@ -54,7 +61,7 @@ class DemoPageSettings extends LitElement {
} else {
this._language = getDocumentLocaleSettings().language;
}
this._theme = document.documentElement.dataset.theme || defaultTheme;
this._colorMode = document.documentElement.dataset.colorMode || defaultColorMode;
}

connectedCallback() {
Expand Down Expand Up @@ -84,7 +91,7 @@ class DemoPageSettings extends LitElement {
languageItem = html`<d2l-collapsible-panel-summary-item slot="summary" text="Language: ${selectedLanguageCode}"></d2l-collapsible-panel-summary-item>`;
}

const themeOptions = ['light', 'dark', 'os'].map(theme => html`<option value="${theme}" ?selected="${this._theme === theme}">${theme}</option>`);
const colorModeOptions = ['light', 'dark', 'os'].map(colorMode => html`<option value="${colorMode}" ?selected="${this._colorMode === colorMode}">${colorMode}</option>`);

const knownFlags = this.#getKnownFlagsSorted();
const knownFlagCheckboxes = [];
Expand All @@ -107,15 +114,19 @@ class DemoPageSettings extends LitElement {
<span class="d2l-input-label">Language</span>
<select class="d2l-input-select" @change="${this.#handleLanguageChange}">${languageOptions}</select>
</label>
<label>
<span class="d2l-input-label">Theme</span>
<select class="d2l-input-select" @change="${this.#handleThemeChange}">${themeOptions}</select>
</label>

<d2l-input-fieldset label="Color Mode">
<d2l-input-group class="color-mode-group">
<select id="colorMode" aria-label="Color Mode" class="d2l-input-select" @change="${this.#handleColorModeChange}">${colorModeOptions}</select>
<d2l-input-checkbox id="useAsDefaultColorMode" label="Use as Default" @change="${this.#handleUseAsDefaultColorModeChange}"></d2l-input-checkbox>
</d2l-input-group>
</d2l-input-fieldset>

${knownFlagCheckboxes.length > 0 ? html`
<d2l-input-checkbox-group id="flagsCheckboxGroup" label="Flags">
${knownFlagCheckboxes}
</d2l-input-checkbox-group>
<d2l-button id="applyFlagsButton" @click="${this.#handleApplyFlagsClick}">Apply</d2l-button>
<d2l-button id="applyFlagsButton" @click="${this.#handleApplyFlagsClick}">Apply Flags</d2l-button>
` : 'No known flags'}
</d2l-input-group>
${languageItem}
Expand Down Expand Up @@ -156,6 +167,20 @@ class DemoPageSettings extends LitElement {
window.location.search = urlParams.toString();
}

#handleColorModeChange(e) {
const newColorMode = e.target[e.target.selectedIndex].value;
document.documentElement.dataset.colorMode = newColorMode;
const url = new URL(window.location.href);

const useAsDefault = this.shadowRoot.querySelector('#useAsDefaultColorMode').checked;
if (useAsDefault) {
this.#updateDefaultColorMode(newColorMode);
}

url.searchParams.set('color-mode', newColorMode);
window.history.replaceState({}, '', url.toString());
}

#handleDocumentLanguageChange() {
this._language = localeSettings.language;
const url = new URL(window.location.href);
Expand All @@ -177,16 +202,15 @@ class DemoPageSettings extends LitElement {
document.documentElement.lang = newLanguageCode;
}

#handleThemeChange(e) {
const newTheme = e.target[e.target.selectedIndex].value;
document.documentElement.setAttribute('data-theme', newTheme);
const url = new URL(window.location.href);
if (newTheme === defaultTheme) {
url.searchParams.delete('theme');
} else {
url.searchParams.set('theme', newTheme);
#handleUseAsDefaultColorModeChange(e) {
const useAsDefault = e.target.checked;
if (useAsDefault) {
this.#updateDefaultColorMode(this.shadowRoot.querySelector('#colorMode').value);
}
window.history.replaceState({}, '', url.toString());
}

#updateDefaultColorMode(colorMode) {
localStorage.setItem('color-mode', colorMode);
}

}
Expand Down
4 changes: 2 additions & 2 deletions components/demo/demo-page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ class DemoPage extends LitElement {
static get styles() {
return [ css`
:host {
background-color: var(--d2l-color-background-base);
background-color: var(--d2l-sem-background-color-sunken);
display: block;
padding: 30px;
}
Expand All @@ -46,7 +46,7 @@ class DemoPage extends LitElement {
}
.d2l-demo-page-content > ::slotted(h2),
.d2l-demo-page-content > ::slotted(h3) {
color: var(--d2l-color-font-base);
color: var(--d2l-sem-text-color-static-standard);
font-size: 0.8rem;
font-weight: 700;
line-height: 1.2rem;
Expand Down
Loading
Loading