From f8acc13f09df37652bed579a22bdf016b0138817 Mon Sep 17 00:00:00 2001 From: Dave Batiste Date: Wed, 4 Mar 2026 11:47:14 -0500 Subject: [PATCH] Remove -sem to see if people like it better. --- components/colors/colors.js | 212 ++++++++++++++------------------ components/demo/demo-page.js | 4 +- components/demo/demo-snippet.js | 10 +- components/demo/styles.css | 2 +- 4 files changed, 100 insertions(+), 128 deletions(-) diff --git a/components/colors/colors.js b/components/colors/colors.js index cd74fe12bd7..546d20ae727 100644 --- a/components/colors/colors.js +++ b/components/colors/colors.js @@ -3,128 +3,100 @@ if (globalThis.document !== undefined && !globalThis.document.head.querySelector style.id = 'd2l-colors'; const lightPalette = ` - --d2l-sem-background-color-base: #ffffff; - --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); + --d2l-background-color-base: #ffffff; + --d2l-background-color-elevated: var(--d2l-background-color-base); + --d2l-background-color-floating: var(--d2l-background-color-base); + --d2l-background-color-interactive-faint-default: var(--d2l-color-regolith); + --d2l-background-color-interactive-faint-hover: var(--d2l-color-sylvite); + --d2l-background-color-interactive-highlighted: var(--d2l-brand-color-highlight); + --d2l-background-color-interactive-primary-default: var(--d2l-brand-color-primary-default); + --d2l-background-color-interactive-primary-hover: var(--d2l-brand-color-primary-hover); + --d2l-background-color-interactive-secondary-default: var(--d2l-color-gypsum); + --d2l-background-color-interactive-secondary-hover: var(--d2l-color-mica); + --d2l-background-color-interactive-tertiary-default: #ffffff; + --d2l-background-color-interactive-tertiary-hover: var(--d2l-background-color-interactive-secondary-default); + --d2l-background-color-interactive-translucent-default: #000000; + --d2l-background-color-interactive-translucent-hover: var(--d2l-brand-color-primary-default); + --d2l-background-color-sunken: #f6f7f8; + --d2l-border-color-emphasized: var(--d2l-color-galena); + --d2l-border-color-focus: var(--d2l-color-celestine); + --d2l-border-color-standard: var(--d2l-color-mica); + --d2l-border-color-subtle: var(--d2l-color-gypsum); + --d2l-brand-color-highlight: var(--d2l-color-celestine-plus-2); + --d2l-brand-color-primary-default: var(--d2l-color-celestine); + --d2l-brand-color-primary-hover: var(--d2l-color-celestine-minus-1); + --d2l-icon-color-faint: var(--d2l-border-color-standard); + --d2l-icon-color-inverted: #ffffff; + --d2l-icon-color-standard: var(--d2l-color-tungsten); + --d2l-status-color-default: var(--d2l-color-celestine); + --d2l-status-color-error: var(--d2l-color-cinnabar); + --d2l-status-color-success-text: var(--d2l-color-olivine-minus-1); + --d2l-status-color-success: var(--d2l-color-olivine); + --d2l-status-color-warning-text: var(--d2l-color-carnelian-minus-1); + --d2l-status-color-warning: var(--d2l-color-carnelian); + --d2l-text-color-interactive-default: var(--d2l-brand-color-primary-default); + --d2l-text-color-interactive-hover: var(--d2l-brand-color-primary-hover); + --d2l-text-color-static-faint: var(--d2l-color-galena); + --d2l-text-color-static-inverted: #ffffff; + --d2l-text-color-static-standard: var(--d2l-color-ferrite); + --d2l-text-color-static-subtle: var(--d2l-color-tungsten); + + --d2l-opacity-disabled-control: 0.5; + --d2l-opacity-disabled-link: 0.74; + --d2l-opacity-disabled-linkicon: 0.64; + + --d2l-shadow-attached-block-start: 0 2px 4px 0 rgba(0, 0, 0, 0.03); + --d2l-shadow-attached-block-end: 0 -2px 4px 0 rgba(0, 0, 0, 0.03); + --d2l-shadow-floating: 0 2px 12px 0 rgba(0, 0, 0, 0.15); + --d2l-shadow-inset: inset 0 2px 0 0 rgba(177, 185, 190, 0.2); /* corundum */ `; const darkPalette = ` - --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); + --d2l-background-color-base: #161718; + --d2l-background-color-elevated: var(--d2l-color-ferrite); + --d2l-background-color-floating: var(--d2l-color-ferrite); + --d2l-background-color-interactive-faint-default: var(--d2l-color-ferrite); + --d2l-background-color-interactive-faint-hover: #303335; + --d2l-background-color-interactive-highlighted: var(--d2l-brand-color-highlight); + --d2l-background-color-interactive-primary-default: var(--d2l-brand-color-primary-default); + --d2l-background-color-interactive-primary-hover: var(--d2l-brand-color-primary-hover); + --d2l-background-color-interactive-secondary-default: #303335; + --d2l-background-color-interactive-secondary-hover: var(--d2l-color-ferrite); + --d2l-background-color-interactive-tertiary-default: #000000; + --d2l-background-color-interactive-tertiary-hover: var(--d2l-background-color-interactive-secondary-default); + --d2l-background-color-interactive-translucent-default: #000000; + --d2l-background-color-interactive-translucent-hover: var(--d2l-brand-color-primary-default); + --d2l-background-color-sunken: #000000; + --d2l-border-color-emphasized: var(--d2l-color-galena); + --d2l-border-color-focus: var(--d2l-color-celestine-plus-1); + --d2l-border-color-standard: var(--d2l-color-tungsten); + --d2l-border-color-subtle: #303335; + --d2l-brand-color-highlight: #161718; + --d2l-brand-color-primary-default: var(--d2l-color-celestine-plus-1); + --d2l-brand-color-primary-hover: var(--d2l-color-celestine); + --d2l-icon-color-faint: var(--d2l-border-color-standard); + --d2l-icon-color-inverted: #ffffff; + --d2l-icon-color-standard: var(--d2l-color-corundum); + --d2l-status-color-default: var(--d2l-brand-color-primary-default); + --d2l-status-color-error: var(--d2l-color-cinnabar-plus-1); + --d2l-status-color-success-text: #ffffff; + --d2l-status-color-success: var(--d2l-color-olivine); + --d2l-status-color-warning-text: var(--d2l-color-carnelian); + --d2l-status-color-warning: var(--d2l-color-carnelian); + --d2l-text-color-interactive-default: var(--d2l-brand-color-primary-default); + --d2l-text-color-interactive-hover: var(--d2l-brand-color-primary-hover); + --d2l-text-color-static-faint: var(--d2l-color-galena); + --d2l-text-color-static-inverted: #161718; + --d2l-text-color-static-standard: var(--d2l-color-mica); + --d2l-text-color-static-subtle: var(--d2l-color-chromite); + + --d2l-opacity-disabled-control: 0.5; + --d2l-opacity-disabled-link: 0.74; + --d2l-opacity-disabled-linkicon: 0.64; + + --d2l-shadow-attached-block-start: 0 2px 4px 0 rgba(0, 0, 0, 0.03); + --d2l-shadow-attached-block-end: 0 -2px 4px 0 rgba(0, 0, 0, 0.03); + --d2l-shadow-floating: 0 2px 12px 0 rgba(0, 0, 0, 0.85); + --d2l-shadow-inset: inset 0 2px 0 0 rgba(177, 185, 190, 0.2); /* corundum */ `; style.textContent = ` diff --git a/components/demo/demo-page.js b/components/demo/demo-page.js index 3feb80f1b9f..ea35fce6aef 100644 --- a/components/demo/demo-page.js +++ b/components/demo/demo-page.js @@ -31,7 +31,7 @@ class DemoPage extends LitElement { static get styles() { return [ css` :host { - background-color: var(--d2l-sem-background-color-sunken); + background-color: var(--d2l-background-color-sunken); display: block; padding: 30px; } @@ -46,7 +46,7 @@ class DemoPage extends LitElement { } .d2l-demo-page-content > ::slotted(h2), .d2l-demo-page-content > ::slotted(h3) { - color: var(--d2l-sem-text-color-static-standard); + color: var(--d2l-text-color-static-standard); font-size: 0.8rem; font-weight: 700; line-height: 1.2rem; diff --git a/components/demo/demo-snippet.js b/components/demo/demo-snippet.js index d79bb2ddf2f..f1d80a6d714 100644 --- a/components/demo/demo-snippet.js +++ b/components/demo/demo-snippet.js @@ -24,8 +24,8 @@ class DemoSnippet extends LitElement { static get styles() { return css` :host { - background-color: var(--d2l-sem-background-color-base); - border: 1px solid var(--d2l-sem-border-color-standard); + background-color: var(--d2l-background-color-base); + border: 1px solid var(--d2l-border-color-standard); border-radius: 6px; 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); display: block; @@ -41,7 +41,7 @@ class DemoSnippet extends LitElement { display: flex; } .d2l-demo-snippet-demo-wrapper.fullscreen { - background-color: var(--d2l-sem-background-color-base); + background-color: var(--d2l-background-color-base); height: 100vh; inset: 0; overflow: auto; @@ -67,7 +67,7 @@ class DemoSnippet extends LitElement { padding: 0; } .d2l-demo-snippet-settings { - border-inline-start: 1px solid var(--d2l-sem-border-color-standard); + border-inline-start: 1px solid var(--d2l-border-color-standard); flex: 0 0 auto; padding: 6px; } @@ -76,7 +76,7 @@ class DemoSnippet extends LitElement { top: 0; } d2l-dropdown.settings-dropdown { - background-color: var(--d2l-sem-background-color-base); + background-color: var(--d2l-background-color-base); border-radius: 6px; outline: 1px solid var(--d2l-color-celestine-minus-1); position: fixed; diff --git a/components/demo/styles.css b/components/demo/styles.css index 18d637d64df..c47cecb0a7d 100644 --- a/components/demo/styles.css +++ b/components/demo/styles.css @@ -1,5 +1,5 @@ html { - background-color: var(--d2l-sem-background-color-base); + background-color: var(--d2l-background-color-base); font-size: 20px; } body {