Skip to content

Update the light and dark palettes.#6585

Draft
dbatiste wants to merge 14 commits intomainfrom
dbatiste/initial-dark-mode-palette
Draft

Update the light and dark palettes.#6585
dbatiste wants to merge 14 commits intomainfrom
dbatiste/initial-dark-mode-palette

Conversation

@dbatiste
Copy link
Contributor

@dbatiste dbatiste commented Feb 11, 2026

GAUD-9068

Just posting this draft PR for anyone who wants to see the palette as of yesterday. Extracted from Figma, with colors resolved to the existing color variables where possible. I only generated variables for colors so far. I'll be trying to apply these to a couple of components.

@dbatiste dbatiste requested a review from a team February 11, 2026 16:36
@github-actions
Copy link
Contributor

Thanks for the PR! 🎉

We've deployed an automatic preview for this PR - you can see your changes here:

URL https://live.d2l.dev/prs/BrightspaceUI/core/pr-6585/

Note

The build needs to finish before your changes are deployed.
Changes to the PR will automatically update the instance.

--d2l-opacity-disabled-link: 0.74;
--d2l-opacity-disabled-linkicon: 0.64;

--d2l-shadow-attached-color: rgba(0, 0, 0, 0.03);
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Also note: these lower level values are mapped from Figma, but it remains to be decided whether we actually want them in the code. We may just want --d2l-shadow-attached, --d2l-shadow-floating, and --d2l-shadow-inset.

--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

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.

@dbatiste dbatiste requested a review from a team February 26, 2026 15:26
@dbatiste
Copy link
Contributor Author

I'll be closing this PR in lieu of individual PRs to update components and include visual-diffs for them.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants