Skip to content

Remove -sem to see if people like it better. #6656

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

Open
dbatiste wants to merge 1 commit into
base: main
Choose a base branch
from
+100 −128
Open

Remove -sem to see if people like it better. #6656

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
212 changes: 92 additions & 120 deletions components/colors/colors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Copy link
Member

@dlockhart dlockhart Mar 4, 2026

Choose a reason for hiding this comment

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

I'll admit that it does feel a bit naked now, but I think I still prefer it to sem.

What about something like -theme-? So --d2l-theme-background-color-base.

Copy link
Contributor Author

@dbatiste dbatiste Mar 4, 2026

Choose a reason for hiding this comment

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

Definitely an option I think.

Copy link
Contributor

@svanherk svanherk Mar 4, 2026

Choose a reason for hiding this comment

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

Other ones I'd thought of were --d2l-core-* or --d2l-ui-*. Don't necessarily love them, but they're short and I like them more than sem.

Copy link
Contributor

@svanherk svanherk Mar 4, 2026

Choose a reason for hiding this comment

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

d2l-mode-* is also an option if four letters is fine and we're set on different color/spacing "modes" 🤷‍♀️

--d2l-background-color-elevated: var(--d2l-background-color-base);
--d2l-background-color-floating: var(--d2l-background-color-base);
Copy link
Member

@dlockhart dlockhart Mar 4, 2026

Choose a reason for hiding this comment

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

We could also tighten up the background-color to just be bg-color and fg-color, which I've noticed GH does.

Copy link
Contributor Author

@dbatiste dbatiste Mar 4, 2026

Choose a reason for hiding this comment

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

Yeah I wouldn't mind that - in effort to keep them a bit shorter, more readable, etc.

With that, would --d2l-text-color-static-faint become --d2l-text-fg-color-static-faint? And --d2l-icon-color-faint become --d2l-icon-fg-color-faint? There are status colors too but they are different - they can be applied as either border and backgrounds.

Copy link
Member

@dlockhart dlockhart Mar 4, 2026

Choose a reason for hiding this comment

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

It gets a little murky yeah. bg-color seems obvious. We could say fg-color applies to text so yeah that would mean we could drop the -text- bit. If an icon color and the text colour are different (which they are in light mode anyway), then we could just keep d2l-icon-color and not worry about putting fg in it.

Copy link
Member

@dlockhart dlockhart Mar 4, 2026

Choose a reason for hiding this comment

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

So three options I think:

  1. Keep it as it is, with the option of shortening background to bg.
  2. Treat fg (foreground) equivalent to text, so d2l-text-color-base becomes d2l-fg-color-base (dropping the text). But icons are different so they'd still be d2l-icon-color.
  3. Put fg in front of all "foreground" things, which makes it d2l-text-fg-color and d2l-icon-fg-color. It might be a little weird but in theory it would allow us to have d2l-text-bg-color if we ever wanted that.

Copy link
Contributor Author

@dbatiste dbatiste Mar 4, 2026

Choose a reason for hiding this comment

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

I nudged @geurts since there an effort to keep the language in Figma fairly aligned with the vocabulary in code. Removing text here but not in Figma would be a more noteworthy difference.

Copy link
Member

@dlockhart dlockhart Mar 4, 2026

Choose a reason for hiding this comment

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

I think 3) above covers that?

Copy link
Contributor

@geurts geurts Mar 4, 2026

Choose a reason for hiding this comment

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

I didn't really understand 3 ... so you're saying we could add "fg" or "bg" after "text" and "icon", so that they have both "fg" and "bg" variables (though initially we don't have any use for "bg" variables for these)?

Copy link
Contributor

@geurts geurts Mar 4, 2026

Choose a reason for hiding this comment

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

One solution we didn't discuss, but which is constantly rattling around in my head, is to update icons to use the same "standard" colour as text. This would bring them closer together so we could just have a "fg" top level category that addresses both icons and text. I remember making them different was a tough call at the time, and I could have gone either way.

Example — before:
image

After:
image

Copy link
Member

@dlockhart dlockhart Mar 4, 2026

Choose a reason for hiding this comment

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

Yeah exactly, and Dave's example of where we might have a background for text would be selected. But yeah, if that discrepancy between text & icon colours went away, then it could just be fg and be used by both.

Copy link
Contributor Author

@dbatiste dbatiste Mar 4, 2026

Choose a reason for hiding this comment

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

Although if we did that, consider what it might mean if we need them to be distinct later.

--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 = `
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-sem-background-color-sunken);
background-color: var(--d2l-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-sem-text-color-static-standard);
color: var(--d2l-text-color-static-standard);
font-size: 0.8rem;
font-weight: 700;
line-height: 1.2rem;
Expand Down
10 changes: 5 additions & 5 deletions components/demo/demo-snippet.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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;
}
Expand All @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion components/demo/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
html {
background-color: var(--d2l-sem-background-color-base);
background-color: var(--d2l-background-color-base);
font-size: 20px;
}
body {
Expand Down
Loading