Skip to content
GitLab

Docs: new section to explain how to add a new color to the theme

Open Julien Déramond requested to merge main-jd-add-doc-for-sass-custom-colors into main

Description

This PR suggests to add a new section in our docs somewhere to explain how to add a new color in our theme colors which is not as easy as before after the new color modes.

Would love to have feedback/ideas from @twbs/css-review 🙏

Questions and TODO

  • Choose the right place to add this guide (would be better in Sass?)
  • Better explain the content
  • It doesn't work in dark mode because there's no dedicated map and so loop to affect the CSS vars. I haven't looked at it in details but I'd say we maybe need something like $theme-colors-dark* maps as well + loops.

For light mode:

@each $color, $value in $theme-colors-bg-subtle {
  --#{$prefix}#{$color}-bg-subtle: #{$value};
}

For dark mode:

--#{$prefix}primary-bg-subtle: #{$primary-bg-subtle-dark};
--#{$prefix}secondary-bg-subtle: #{$secondary-bg-subtle-dark};
--#{$prefix}success-bg-subtle: #{$success-bg-subtle-dark};
--#{$prefix}info-bg-subtle: #{$info-bg-subtle-dark};
--#{$prefix}warning-bg-subtle: #{$warning-bg-subtle-dark};
--#{$prefix}danger-bg-subtle: #{$danger-bg-subtle-dark};
--#{$prefix}light-bg-subtle: #{$light-bg-subtle-dark};
--#{$prefix}dark-bg-subtle: #{$dark-bg-subtle-dark};

Motivation & Context

IMO this change is required for our users to understand how to play with the theme colors.

Type of changes

  • Enhancement

Checklist

  • I have read the contributing guidelines
  • My code follows the code style of the project (using npm run lint)
  • My change introduces changes to the documentation
  • I have updated the documentation accordingly
  • All new and existing tests passed

Live previews

Warning This PR includes a commit that will need to be removed before merging but that will help understand what's suggested

Related issues

Mentioned in #37549