@brightspace-ui/core 3.214.0 → 3.215.0

package/components/colors/colors.js

@@ -6,11 +6,13 @@ if (globalThis.document !== undefined && !globalThis.document.head.querySelector
 			--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);
 	`;
 	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);
 	`;
 
 	style.textContent = `

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

@@ -13,6 +13,7 @@ import { inputLabelStyles } from '../inputs/input-label-styles.js';
 import { selectStyles } from '../inputs/input-select-styles.js';
 
 const localeSettings = getDocumentLocaleSettings();
+const defaultTheme = 'light';
 
 class DemoPageSettings extends LitElement {
 
@@ -53,6 +54,7 @@ class DemoPageSettings extends LitElement {
 		} else {
 			this._language = getDocumentLocaleSettings().language;
 		}
+		this._theme = document.documentElement.dataset.theme || defaultTheme;
 	}
 
 	connectedCallback() {
@@ -82,6 +84,8 @@ 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 knownFlags = this.#getKnownFlagsSorted();
 		const knownFlagCheckboxes = [];
 		knownFlags.forEach((knownFlag, key) => {
@@ -103,6 +107,10 @@ 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>
 					${knownFlagCheckboxes.length > 0 ? html`
 						<d2l-input-checkbox-group id="flagsCheckboxGroup" label="Flags">
 							${knownFlagCheckboxes}
@@ -169,6 +177,18 @@ 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);
+		}
+		window.history.replaceState({}, '', url.toString());
+	}
+
 }
 
 customElements.define('d2l-demo-page-settings', DemoPageSettings);

package/components/demo/demo-page.js

@@ -46,6 +46,7 @@ class DemoPage extends LitElement {
 			}
 			.d2l-demo-page-content > ::slotted(h2),
 			.d2l-demo-page-content > ::slotted(h3) {
+				color: var(--d2l-color-font-base);
 				font-size: 0.8rem;
 				font-weight: 700;
 				line-height: 1.2rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.214.0",
+  "version": "3.215.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",