docs(design): update theming docs to include regular and theme switch usage #3526
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
damienwebdev
requested changes
Feb 27, 2025
| The design system includes three core palettes that reflect Daffodil's brand identity, three palettes used to indicate status, and a neutral palette that is dominant throughout the design system. These palettes are built using [HSLuv](https://www.hsluv.org/), a color space designed as a human-friendly alternative to the standard HSL. It aims to address the limitations of traidtional color spaces like RGB and HSL. | ||
| The default Daffodil design system theme features three core palettes that define's Daffodil's brand identity, three status indicating palettes, and a neutral palette that is dominant throughout the design system. These palettes are built using [HSLuv](https://www.hsluv.org/), a perceptually uniform color space designed to be more human-friendly than traditional models like RGB and HSL. By addressing the inconsistencies of conventional color spaces, HSLuv ensures predictable contrast and visual harmony. | ||
|
|
||
| Each palette consists of a collection of [perceptually uniform colors](https://programmingdesignsystems.com/color/perceptually-uniform-color-spaces/) with consistent contrast ratios, enhancing accessibility and usability across the design system. These palettes are represented as Sass maps, where each individual color value is referred to as a **hue**. |
There was a problem hiding this comment.
Link to the existing palettes in the codebase.
There was a problem hiding this comment.
@damienwebdev How do I link it? _color-palettes.scss does not get generated in docs.
|
|
||
| .daff-theme-dark { | ||
| @include daff.daff-theme(daff.$theme-dark); | ||
| html { |
There was a problem hiding this comment.
So where should the theme be included?
| @@ -49,28 +49,26 @@ There is a minimal required global style for the Daffodil Design System to opera | |||
| > For more information on our approach to these kinds of styles, see the [Global Styles guide.](/libs/design/guides/foundations/global-styles.md) | |||
|
|
|||
| ## Add a theme | |||
| A theme must be configured in order for the components to work properly. The components in the design library can be configured with customized colors in addition to a dark and light mode for those same colors. | |||
| A theme must be configured in order for Daffodil Design components to work properly. | |||
There was a problem hiding this comment.
Daffodil Design sounds awkward, maybe just always reference the package name? @daffodil/design?
There was a problem hiding this comment.
What's the difference between Daffodil Design and @daffodil/design? Reading it, it sounds the same. I don't think the design system should always be referred to via the package name. That's a very developer thing, and the design system is not exclusively catered to developers.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Current theming docs doesn't explain how to use components w/o theme switching. The theme switching docs is also missing some critical information.
Fixes: #3521
What is the new behavior?
Add docs for regulars usage of the
daff-thememixin. Clarify usage of mixin in light and dark modes.Does this PR introduce a breaking change?
Other information