Skip to content

Commit 59057bc

Browse files
dbatistedbatiste
committed
Update to theme to color-mode and update light & dark palettes.
1 parent 02fc485 commit 59057bc

File tree

7 files changed

+180
-44
lines changed

7 files changed

+180
-44
lines changed

‎components/colors/colors.js‎

Lines changed: 122 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,128 @@ if (globalThis.document !== undefined && !globalThis.document.head.querySelector
33
style.id = 'd2l-colors';
44

55
const lightPalette = `
6-
--d2l-color-background-base: var(--d2l-color-sylvite);
7-
--d2l-color-background-default: #ffffff;
8-
--d2l-color-border-medium: var(--d2l-color-mica);
9-
--d2l-color-font-base: var(--d2l-color-ferrite);
6+
--d2l-sem-background-color-base: #ffffff;
7+
--d2l-sem-background-color-elevated: var(--d2l-sem-background-color-base);
8+
--d2l-sem-background-color-floating: var(--d2l-sem-background-color-base);
9+
--d2l-sem-background-color-interactive-faint-default: var(--d2l-color-regolith);
10+
--d2l-sem-background-color-interactive-faint-hover: var(--d2l-color-sylvite);
11+
--d2l-sem-background-color-interactive-highlighted: var(--d2l-sem-brand-color-highlight);
12+
--d2l-sem-background-color-interactive-primary-default: var(--d2l-sem-brand-color-primary-default);
13+
--d2l-sem-background-color-interactive-primary-hover: var(--d2l-sem-brand-color-primary-hover);
14+
--d2l-sem-background-color-interactive-secondary-default: var(--d2l-color-gypsum);
15+
--d2l-sem-background-color-interactive-secondary-hover: var(--d2l-color-mica);
16+
--d2l-sem-background-color-interactive-tertiary-default: #ffffff;
17+
--d2l-sem-background-color-interactive-tertiary-hover: var(--d2l-sem-background-color-interactive-secondary-default);
18+
--d2l-sem-background-color-interactive-translucent-default: #000000;
19+
--d2l-sem-background-color-interactive-translucent-hover: var(--d2l-sem-brand-color-primary-default);
20+
--d2l-sem-background-color-sunken: #f6f7f8;
21+
--d2l-sem-border-color-emphasized: var(--d2l-color-galena);
22+
--d2l-sem-border-color-focus: var(--d2l-color-celestine);
23+
--d2l-sem-border-color-standard: var(--d2l-color-mica);
24+
--d2l-sem-border-color-subtle: var(--d2l-color-gypsum);
25+
--d2l-sem-brand-color-highlight: var(--d2l-color-celestine-plus-2);
26+
--d2l-sem-brand-color-primary-default: var(--d2l-color-celestine);
27+
--d2l-sem-brand-color-primary-hover: var(--d2l-color-celestine-minus-1);
28+
--d2l-sem-icon-color-faint: var(--d2l-sem-border-color-standard);
29+
--d2l-sem-icon-color-inverted: #ffffff;
30+
--d2l-sem-icon-color-standard: var(--d2l-color-tungsten);
31+
--d2l-sem-status-color-default: var(--d2l-color-celestine);
32+
--d2l-sem-status-color-error: var(--d2l-color-cinnabar);
33+
--d2l-sem-status-color-success-text: var(--d2l-color-olivine-minus-1);
34+
--d2l-sem-status-color-success: var(--d2l-color-olivine);
35+
--d2l-sem-status-color-warning-text: var(--d2l-color-carnelian-minus-1);
36+
--d2l-sem-status-color-warning: var(--d2l-color-carnelian);
37+
--d2l-sem-text-color-interactive-default: var(--d2l-sem-brand-color-primary-default);
38+
--d2l-sem-text-color-interactive-hover: var(--d2l-sem-brand-color-primary-hover);
39+
--d2l-sem-text-color-static-faint: var(--d2l-color-galena);
40+
--d2l-sem-text-color-static-inverted: #ffffff;
41+
--d2l-sem-text-color-static-standard: var(--d2l-color-ferrite);
42+
--d2l-sem-text-color-static-subtle: var(--d2l-color-tungsten);
43+
44+
--d2l-sem-opacity-disabled-control: 0.5;
45+
--d2l-sem-opacity-disabled-link: 0.74;
46+
--d2l-sem-opacity-disabled-linkicon: 0.64;
47+
48+
--d2l-sem-shadow-attached-color: rgba(0, 0, 0, 0.03);
49+
--d2l-sem-shadow-attached-offset-x: 0;
50+
--d2l-sem-shadow-attached-offset-y: 2px;
51+
--d2l-sem-shadow-attached-blur: 4px;
52+
--d2l-sem-shadow-attached-spread: 0;
53+
--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);
54+
--d2l-sem-shadow-floating-color: rgba(0, 0, 0, 0.15);
55+
--d2l-sem-shadow-floating-offset-x: 0;
56+
--d2l-sem-shadow-floating-offset-y: 2px;
57+
--d2l-sem-shadow-floating-blur: 12px;
58+
--d2l-sem-shadow-floating-spread: 0;
59+
--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);
60+
--d2l-sem-shadow-inset-color: rgba(177, 185, 190, 0.2); /* corundum */
61+
--d2l-sem-shadow-inset-offset-x: 0;
62+
--d2l-sem-shadow-inset-offset-y: 2px;
63+
--d2l-sem-shadow-inset-blur: 0;
64+
--d2l-sem-shadow-inset-spread: 0;
65+
--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);
1066
`;
1167
const darkPalette = `
12-
--d2l-color-background-base: #000000;
13-
--d2l-color-background-default: #18191a; /* new color */
14-
--d2l-color-border-medium: var(--d2l-color-tungsten);
15-
--d2l-color-font-base: var(--d2l-color-regolith);
68+
--d2l-sem-background-color-base: #161718;
69+
--d2l-sem-background-color-elevated: var(--d2l-color-ferrite);
70+
--d2l-sem-background-color-floating: var(--d2l-color-ferrite);
71+
--d2l-sem-background-color-interactive-faint-default: var(--d2l-color-ferrite);
72+
--d2l-sem-background-color-interactive-faint-hover: #303335;
73+
--d2l-sem-background-color-interactive-highlighted: var(--d2l-sem-brand-color-highlight);
74+
--d2l-sem-background-color-interactive-primary-default: var(--d2l-sem-brand-color-primary-default);
75+
--d2l-sem-background-color-interactive-primary-hover: var(--d2l-sem-brand-color-primary-hover);
76+
--d2l-sem-background-color-interactive-secondary-default: #303335;
77+
--d2l-sem-background-color-interactive-secondary-hover: var(--d2l-color-ferrite);
78+
--d2l-sem-background-color-interactive-tertiary-default: #000000;
79+
--d2l-sem-background-color-interactive-tertiary-hover: var(--d2l-sem-background-color-interactive-secondary-default);
80+
--d2l-sem-background-color-interactive-translucent-default: #000000;
81+
--d2l-sem-background-color-interactive-translucent-hover: var(--d2l-sem-brand-color-primary-default);
82+
--d2l-sem-background-color-sunken: #000000;
83+
--d2l-sem-border-color-emphasized: var(--d2l-color-galena);
84+
--d2l-sem-border-color-focus: var(--d2l-color-celestine-plus-1);
85+
--d2l-sem-border-color-standard: var(--d2l-color-tungsten);
86+
--d2l-sem-border-color-subtle: #303335;
87+
--d2l-sem-brand-color-highlight: #161718;
88+
--d2l-sem-brand-color-primary-default: var(--d2l-color-celestine-plus-1);
89+
--d2l-sem-brand-color-primary-hover: var(--d2l-color-celestine);
90+
--d2l-sem-icon-color-faint: var(--d2l-sem-border-color-standard);
91+
--d2l-sem-icon-color-inverted: #ffffff;
92+
--d2l-sem-icon-color-standard: var(--d2l-color-corundum);
93+
--d2l-sem-status-color-default: var(--d2l-sem-brand-color-primary-default);
94+
--d2l-sem-status-color-error: var(--d2l-color-cinnabar-plus-1);
95+
--d2l-sem-status-color-success-text: #ffffff;
96+
--d2l-sem-status-color-success: var(--d2l-color-olivine);
97+
--d2l-sem-status-color-warning-text: var(--d2l-color-carnelian);
98+
--d2l-sem-status-color-warning: var(--d2l-color-carnelian);
99+
--d2l-sem-text-color-interactive-default: var(--d2l-sem-brand-color-primary-default);
100+
--d2l-sem-text-color-interactive-hover: var(--d2l-sem-brand-color-primary-hover);
101+
--d2l-sem-text-color-static-faint: var(--d2l-color-galena);
102+
--d2l-sem-text-color-static-inverted: #161718;
103+
--d2l-sem-text-color-static-standard: var(--d2l-color-mica);
104+
--d2l-sem-text-color-static-subtle: var(--d2l-color-chromite);
105+
106+
--d2l-sem-opacity-disabled-control: 0.5;
107+
--d2l-sem-opacity-disabled-link: 0.74;
108+
--d2l-sem-opacity-disabled-linkicon: 0.64;
109+
110+
--d2l-sem-shadow-attached-color: rgba(0, 0, 0, 0.03);
111+
--d2l-sem-shadow-attached-offset-x: 0;
112+
--d2l-sem-shadow-attached-offset-y: 2px;
113+
--d2l-sem-shadow-attached-blur: 4px;
114+
--d2l-sem-shadow-attached-spread: 0;
115+
--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);
116+
--d2l-sem-shadow-floating-color: rgba(0, 0, 0, 0.85);
117+
--d2l-sem-shadow-floating-offset-x: 0;
118+
--d2l-sem-shadow-floating-offset-y: 2px;
119+
--d2l-sem-shadow-floating-blur: 12px;
120+
--d2l-sem-shadow-floating-spread: 0;
121+
--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);
122+
--d2l-sem-shadow-inset-color: rgba(177, 185, 190, 0.2); /* corundum */
123+
--d2l-sem-shadow-inset-offset-x: 0;
124+
--d2l-sem-shadow-inset-offset-y: 2px;
125+
--d2l-sem-shadow-inset-blur: 0;
126+
--d2l-sem-shadow-inset-spread: 0;
127+
--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);
16128
`;
17129

18130
style.textContent = `
@@ -109,11 +221,11 @@ if (globalThis.document !== undefined && !globalThis.document.head.querySelector
109221
html {
110222
${lightPalette}
111223
}
112-
html[data-theme="dark"] {
224+
html[data-color-mode="dark"] {
113225
${darkPalette}
114226
}
115227
@media (prefers-color-scheme: dark) {
116-
html[data-theme="os"] {
228+
html[data-color-mode="os"] {
117229
${darkPalette}
118230
}
119231
}

‎components/demo/demo-color-mode.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
const urlParams = new URLSearchParams(window.location.search);
2+
const colorMode = urlParams.get('color-mode') || localStorage.getItem('color-mode');
3+
if (colorMode) {
4+
document.documentElement.dataset.colorMode = colorMode;
5+
} else {
6+
delete document.documentElement.dataset.colorMode;
7+
}

‎components/demo/demo-page-settings.js‎

Lines changed: 43 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import './demo-flags.js';
2-
import './demo-theme.js';
2+
import './demo-color-mode.js';
33
import '../button/button.js';
44
import '../inputs/input-checkbox-group.js';
55
import '../inputs/input-checkbox.js';
6+
import '../inputs/input-fieldset.js';
67
import '../inputs/input-group.js';
78
import '../collapsible-panel/collapsible-panel.js';
89
import '../collapsible-panel/collapsible-panel-summary-item.js';
@@ -13,7 +14,7 @@ import { inputLabelStyles } from '../inputs/input-label-styles.js';
1314
import { selectStyles } from '../inputs/input-select-styles.js';
1415

1516
const localeSettings = getDocumentLocaleSettings();
16-
const defaultTheme = 'light';
17+
const defaultColorMode = 'light';
1718

1819
class DemoPageSettings extends LitElement {
1920

@@ -35,8 +36,14 @@ class DemoPageSettings extends LitElement {
3536
d2l-collapsible-panel {
3637
width: 100%;
3738
}
39+
.color-mode-group {
40+
display: inline-flex;
41+
}
3842
#applyFlagsButton {
39-
margin-block-start: 1rem;
43+
max-width: max-content;
44+
}
45+
#useAsDefaultColorMode {
46+
margin-block-end: 0;
4047
}
4148
`];
4249
}
@@ -54,7 +61,7 @@ class DemoPageSettings extends LitElement {
5461
} else {
5562
this._language = getDocumentLocaleSettings().language;
5663
}
57-
this._theme = document.documentElement.dataset.theme || defaultTheme;
64+
this._colorMode = document.documentElement.dataset.colorMode || defaultColorMode;
5865
}
5966

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

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

8996
const knownFlags = this.#getKnownFlagsSorted();
9097
const knownFlagCheckboxes = [];
@@ -107,15 +114,19 @@ class DemoPageSettings extends LitElement {
107114
<span class="d2l-input-label">Language</span>
108115
<select class="d2l-input-select" @change="${this.#handleLanguageChange}">${languageOptions}</select>
109116
</label>
110-
<label>
111-
<span class="d2l-input-label">Theme</span>
112-
<select class="d2l-input-select" @change="${this.#handleThemeChange}">${themeOptions}</select>
113-
</label>
117+
118+
<d2l-input-fieldset label="Color Mode">
119+
<d2l-input-group class="color-mode-group">
120+
<select id="colorMode" aria-label="Color Mode" class="d2l-input-select" @change="${this.#handleColorModeChange}">${colorModeOptions}</select>
121+
<d2l-input-checkbox id="useAsDefaultColorMode" label="Use as Default" @change="${this.#handleUseAsDefaultColorModeChange}"></d2l-input-checkbox>
122+
</d2l-input-group>
123+
</d2l-input-fieldset>
124+
114125
${knownFlagCheckboxes.length > 0 ? html`
115126
<d2l-input-checkbox-group id="flagsCheckboxGroup" label="Flags">
116127
${knownFlagCheckboxes}
117128
</d2l-input-checkbox-group>
118-
<d2l-button id="applyFlagsButton" @click="${this.#handleApplyFlagsClick}">Apply</d2l-button>
129+
<d2l-button id="applyFlagsButton" @click="${this.#handleApplyFlagsClick}">Apply Flags</d2l-button>
119130
` : 'No known flags'}
120131
</d2l-input-group>
121132
${languageItem}
@@ -156,6 +167,20 @@ class DemoPageSettings extends LitElement {
156167
window.location.search = urlParams.toString();
157168
}
158169

170+
#handleColorModeChange(e) {
171+
const newColorMode = e.target[e.target.selectedIndex].value;
172+
document.documentElement.dataset.colorMode = newColorMode;
173+
const url = new URL(window.location.href);
174+
175+
const useAsDefault = this.shadowRoot.querySelector('#useAsDefaultColorMode').checked;
176+
if (useAsDefault) {
177+
this.#updateDefaultColorMode(newColorMode);
178+
}
179+
180+
url.searchParams.set('color-mode', newColorMode);
181+
window.history.replaceState({}, '', url.toString());
182+
}
183+
159184
#handleDocumentLanguageChange() {
160185
this._language = localeSettings.language;
161186
const url = new URL(window.location.href);
@@ -177,16 +202,15 @@ class DemoPageSettings extends LitElement {
177202
document.documentElement.lang = newLanguageCode;
178203
}
179204

180-
#handleThemeChange(e) {
181-
const newTheme = e.target[e.target.selectedIndex].value;
182-
document.documentElement.setAttribute('data-theme', newTheme);
183-
const url = new URL(window.location.href);
184-
if (newTheme === defaultTheme) {
185-
url.searchParams.delete('theme');
186-
} else {
187-
url.searchParams.set('theme', newTheme);
205+
#handleUseAsDefaultColorModeChange(e) {
206+
const useAsDefault = e.target.checked;
207+
if (useAsDefault) {
208+
this.#updateDefaultColorMode(this.shadowRoot.querySelector('#colorMode').value);
188209
}
189-
window.history.replaceState({}, '', url.toString());
210+
}
211+
212+
#updateDefaultColorMode(colorMode) {
213+
localStorage.setItem('color-mode', colorMode);
190214
}
191215

192216
}

‎components/demo/demo-page.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ class DemoPage extends LitElement {
3131
static get styles() {
3232
return [ css`
3333
:host {
34-
background-color: var(--d2l-color-background-base);
34+
background-color: var(--d2l-sem-background-color-sunken);
3535
display: block;
3636
padding: 30px;
3737
}
@@ -46,7 +46,7 @@ class DemoPage extends LitElement {
4646
}
4747
.d2l-demo-page-content > ::slotted(h2),
4848
.d2l-demo-page-content > ::slotted(h3) {
49-
color: var(--d2l-color-font-base);
49+
color: var(--d2l-sem-text-color-static-standard);
5050
font-size: 0.8rem;
5151
font-weight: 700;
5252
line-height: 1.2rem;

‎components/demo/demo-snippet.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ class DemoSnippet extends LitElement {
2424
static get styles() {
2525
return css`
2626
:host {
27-
background-color: var(--d2l-color-background-default);
28-
border: 1px solid var(--d2l-color-border-medium);
27+
background-color: var(--d2l-sem-background-color-base);
28+
border: 1px solid var(--d2l-sem-border-color-standard);
2929
border-radius: 6px;
3030
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
3131
display: block;
@@ -41,7 +41,7 @@ class DemoSnippet extends LitElement {
4141
display: flex;
4242
}
4343
.d2l-demo-snippet-demo-wrapper.fullscreen {
44-
background-color: var(--d2l-color-background-default);
44+
background-color: var(--d2l-sem-background-color-base);
4545
height: 100vh;
4646
inset: 0;
4747
overflow: auto;
@@ -67,7 +67,7 @@ class DemoSnippet extends LitElement {
6767
padding: 0;
6868
}
6969
.d2l-demo-snippet-settings {
70-
border-inline-start: 1px solid var(--d2l-color-border-medium);
70+
border-inline-start: 1px solid var(--d2l-sem-border-color-standard);
7171
flex: 0 0 auto;
7272
padding: 6px;
7373
}
@@ -76,7 +76,7 @@ class DemoSnippet extends LitElement {
7676
top: 0;
7777
}
7878
d2l-dropdown.settings-dropdown {
79-
background-color: var(--d2l-color-background-default);
79+
background-color: var(--d2l-sem-background-color-base);
8080
border-radius: 6px;
8181
outline: 1px solid var(--d2l-color-celestine-minus-1);
8282
position: fixed;

‎components/demo/demo-theme.js‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎components/demo/styles.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
html {
2-
background-color: var(--d2l-color-background-base);
2+
background-color: var(--d2l-sem-background-color-base);
33
font-size: 20px;
44
}
55
body {

0 commit comments

Comments
 (0)