kopia lustrzana https://github.com/shoelace-style/shoelace
update docs and changelog
rodzic
ad35df2a17
commit
e53f36e5ef
|
@ -8,9 +8,30 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
|
|||
|
||||
## Next
|
||||
|
||||
- Added a console error that appears when menu items have duplicate values in `sl-select`
|
||||
This release adds a variety of new color primitives and changes the way color tokens are consumed. Previously, color tokens were in hexidecimal format. Shoelace now uses an `R G B` format that requires you to use the `rgb()` function in your CSS.
|
||||
|
||||
```css
|
||||
.example {
|
||||
/* rgb() is required now */
|
||||
color: rgb(var(--sl-color-gray-500));
|
||||
}
|
||||
```
|
||||
|
||||
This is more verbose than before, but it has the advantage of letting you set the alpha channel of any color token.
|
||||
|
||||
```css
|
||||
.example-with-alpha {
|
||||
/* easily adjust opacity for any color token */
|
||||
color: rgb(var(--sl-color-gray-500) / 50%);
|
||||
}
|
||||
```
|
||||
|
||||
This change applies to all design tokens that implement a color. Refer to the [color tokens](/tokens/color) page for more details.
|
||||
|
||||
- 🚨 BREAKING: all design tokens that implement colors have been converted to `R G B` and must be used with the `rgb()` function
|
||||
- Added new color primitives to the base set of design tokens
|
||||
- Added `--sl-color-*-1000` swatches to all color palettes
|
||||
- Added a console error that appears when menu items have duplicate values in `sl-select`
|
||||
- Exposed base and dark stylesheets so they can be imported via JavaScript [#438](https://github.com/shoelace-style/shoelace/issues/438)
|
||||
- Fixed a bug in `sl-menu` where pressing <kbd>Enter</kbd> after using type to select would result in the wrong value
|
||||
- Refactored thumb position logic in `sl-switch` [#490](https://github.com/shoelace-style/shoelace/pull/490)
|
||||
|
|
|
@ -1,8 +1,34 @@
|
|||
# Color Tokens
|
||||
|
||||
Color tokens help maintain consistent use of color throughout your app. Shoelace provides palettes for theme colors and primitives.
|
||||
Color tokens help maintain consistent use of color throughout your app. Shoelace provides palettes for theme colors and primitives that you can use as a foundation for your design system.
|
||||
|
||||
To reference a color token in your stylesheet, use the `--sl-color-{name}-{n}` CSS custom property, where `{name}` is the name of the palette and `{n}` is the numeric value of the desired swatch.
|
||||
## Usage
|
||||
|
||||
Color tokens are referenced using the `--sl-color-{name}-{n}` CSS custom property, where `{name}` is the name of the palette and `{n}` is the numeric value of the desired swatch.
|
||||
|
||||
All color tokens are defined as a set of RGB integers, eg. `113 113 122`. CSS doesn't understand this format, however, so you need wrap them in the `rgb()` function.
|
||||
|
||||
```css
|
||||
.example {
|
||||
color: rgb(var(--sl-color-gray-500));
|
||||
}
|
||||
```
|
||||
|
||||
This may seem a bit verbose, but it gives us a super power — we can adjust the alpha channel of any color token!
|
||||
|
||||
## Adjusting the Alpha Channel
|
||||
|
||||
By default, color tokens produce an opaque color. With this syntax, you can easily change the alpha channel.
|
||||
|
||||
```css
|
||||
.example-with-alpha {
|
||||
color: rgb(var(--sl-color-gray-500) / 50%);
|
||||
}
|
||||
```
|
||||
|
||||
The browser evaluates this to `rgb(113 113 122 / 50%)`, where 50% is the alpha value. Note the required `/` delimiter after the color token. Alternatively, you can use a decimal such as 0.5 in lieu of a percentage.
|
||||
|
||||
This syntax may not look familiar, but it's perfectly valid per the [CSS Color Module Level 4](https://www.w3.org/TR/css-color-4/#typedef-color) and [well-supported](https://caniuse.com/mdn-css_types_color_space_separated_functional_notation) by modern browsers.
|
||||
|
||||
## Theme Tokens
|
||||
|
||||
|
|
Ładowanie…
Reference in New Issue