mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
colors 1000 => 950
This commit is contained in:
Cory LaViska
@@ -30,7 +30,7 @@ This change applies to all design tokens that implement a color. Refer to the [c
|
||||
|
||||
- 🚨 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 `--sl-color-*-950` 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
|
||||
|
||||
@@ -49,7 +49,7 @@ Theme tokens give you a semantic way to reference colors in your app. The primar
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-primary-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-primary-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-primary-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-primary-1000));"></div>1000</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-primary-950));"></div>950</div>
|
||||
|
||||
<div class="color-palette__name">
|
||||
Success<br>
|
||||
@@ -65,7 +65,7 @@ Theme tokens give you a semantic way to reference colors in your app. The primar
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-success-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-success-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-success-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-success-1000));"></div>1000</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-success-950));"></div>950</div>
|
||||
|
||||
<div class="color-palette__name">
|
||||
Info<br>
|
||||
@@ -81,7 +81,7 @@ Theme tokens give you a semantic way to reference colors in your app. The primar
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-1000));"></div>1000</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-info-950));"></div>950</div>
|
||||
|
||||
<div class="color-palette__name">
|
||||
Warning<br>
|
||||
@@ -97,7 +97,7 @@ Theme tokens give you a semantic way to reference colors in your app. The primar
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warning-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warning-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warning-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warning-1000));"></div>1000</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warning-950));"></div>950</div>
|
||||
|
||||
<div class="color-palette__name">
|
||||
Danger<br>
|
||||
@@ -113,7 +113,7 @@ Theme tokens give you a semantic way to reference colors in your app. The primar
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-danger-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-danger-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-danger-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-danger-1000));"></div>1000</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-danger-950));"></div>950</div>
|
||||
</div>
|
||||
|
||||
## Primitives
|
||||
@@ -135,7 +135,7 @@ Additional palettes are provided in the form of color primitives. Use these when
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-gray-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-gray-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-gray-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-gray-1000));"></div>1000</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-gray-950));"></div>950</div>
|
||||
|
||||
<div class="color-palette__name">
|
||||
Cool Gray<br>
|
||||
@@ -151,7 +151,7 @@ Additional palettes are provided in the form of color primitives. Use these when
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cool-gray-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cool-gray-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cool-gray-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cool-gray-1000));"></div>1000</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cool-gray-950));"></div>950</div>
|
||||
|
||||
<div class="color-palette__name">
|
||||
Gray<br>
|
||||
@@ -167,7 +167,7 @@ Additional palettes are provided in the form of color primitives. Use these when
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-gray-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-gray-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-gray-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-gray-1000));"></div>1000</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-gray-950));"></div>950</div>
|
||||
|
||||
<div class="color-palette__name">
|
||||
True Gray<br>
|
||||
@@ -183,7 +183,7 @@ Additional palettes are provided in the form of color primitives. Use these when
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-true-gray-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-true-gray-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-true-gray-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-true-gray-1000));"></div>1000</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-true-gray-950));"></div>950</div>
|
||||
|
||||
<div class="color-palette__name">
|
||||
Warm Gray<br>
|
||||
@@ -199,7 +199,7 @@ Additional palettes are provided in the form of color primitives. Use these when
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warm-gray-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warm-gray-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warm-gray-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warm-gray-1000));"></div>1000</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-warm-gray-950));"></div>950</div>
|
||||
|
||||
<div class="color-palette__name">
|
||||
Red<br>
|
||||
@@ -215,7 +215,7 @@ Additional palettes are provided in the form of color primitives. Use these when
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-red-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-red-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-red-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-red-1000));"></div>1000</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-red-950));"></div>950</div>
|
||||
|
||||
<div class="color-palette__name">
|
||||
Orange<br>
|
||||
@@ -231,7 +231,7 @@ Additional palettes are provided in the form of color primitives. Use these when
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-orange-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-orange-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-orange-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-orange-1000));"></div>1000</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-orange-950));"></div>950</div>
|
||||
|
||||
<div class="color-palette__name">
|
||||
Amber<br>
|
||||
@@ -247,7 +247,7 @@ Additional palettes are provided in the form of color primitives. Use these when
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-amber-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-amber-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-amber-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-amber-1000));"></div>1000</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-amber-950));"></div>950</div>
|
||||
|
||||
<div class="color-palette__name">
|
||||
Yellow<br>
|
||||
@@ -263,7 +263,7 @@ Additional palettes are provided in the form of color primitives. Use these when
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-yellow-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-yellow-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-yellow-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-yellow-1000));"></div>1000</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-yellow-950));"></div>950</div>
|
||||
|
||||
<div class="color-palette__name">
|
||||
Lime<br>
|
||||
@@ -279,7 +279,7 @@ Additional palettes are provided in the form of color primitives. Use these when
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-lime-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-lime-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-lime-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-lime-1000));"></div>1000</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-lime-950));"></div>950</div>
|
||||
|
||||
<div class="color-palette__name">
|
||||
Green<br>
|
||||
@@ -295,7 +295,7 @@ Additional palettes are provided in the form of color primitives. Use these when
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-green-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-green-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-green-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-green-1000));"></div>1000</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-green-950));"></div>950</div>
|
||||
|
||||
<div class="color-palette__name">
|
||||
Emerald<br>
|
||||
@@ -311,7 +311,7 @@ Additional palettes are provided in the form of color primitives. Use these when
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-emerald-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-emerald-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-emerald-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-emerald-1000));"></div>1000</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-emerald-950));"></div>950</div>
|
||||
|
||||
<div class="color-palette__name">
|
||||
Teal<br>
|
||||
@@ -327,7 +327,7 @@ Additional palettes are provided in the form of color primitives. Use these when
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-teal-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-teal-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-teal-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-teal-1000));"></div>1000</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-teal-950));"></div>950</div>
|
||||
|
||||
<div class="color-palette__name">
|
||||
Cyan<br>
|
||||
@@ -343,7 +343,7 @@ Additional palettes are provided in the form of color primitives. Use these when
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cyan-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cyan-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cyan-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cyan-1000));"></div>1000</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-cyan-950));"></div>950</div>
|
||||
|
||||
<div class="color-palette__name">
|
||||
Sky<br>
|
||||
@@ -359,7 +359,7 @@ Additional palettes are provided in the form of color primitives. Use these when
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-sky-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-sky-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-sky-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-sky-1000));"></div>1000</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-sky-950));"></div>950</div>
|
||||
|
||||
<div class="color-palette__name">
|
||||
Blue<br>
|
||||
@@ -375,7 +375,7 @@ Additional palettes are provided in the form of color primitives. Use these when
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-1000));"></div>1000</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-blue-950));"></div>950</div>
|
||||
|
||||
<div class="color-palette__name">
|
||||
Indigo<br>
|
||||
@@ -391,7 +391,7 @@ Additional palettes are provided in the form of color primitives. Use these when
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-indigo-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-indigo-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-indigo-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-indigo-1000));"></div>1000</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-indigo-950));"></div>950</div>
|
||||
|
||||
<div class="color-palette__name">
|
||||
Violet<br>
|
||||
@@ -407,7 +407,7 @@ Additional palettes are provided in the form of color primitives. Use these when
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-violet-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-violet-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-violet-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-violet-1000));"></div>1000</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-violet-950));"></div>950</div>
|
||||
|
||||
<div class="color-palette__name">
|
||||
Purple<br>
|
||||
@@ -423,7 +423,7 @@ Additional palettes are provided in the form of color primitives. Use these when
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-purple-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-purple-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-purple-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-purple-1000));"></div>1000</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-purple-950));"></div>950</div>
|
||||
|
||||
<div class="color-palette__name">
|
||||
Fuchsia<br>
|
||||
@@ -439,7 +439,7 @@ Additional palettes are provided in the form of color primitives. Use these when
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-fuchsia-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-fuchsia-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-fuchsia-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-fuchsia-1000));"></div>1000</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-fuchsia-950));"></div>950</div>
|
||||
|
||||
<div class="color-palette__name">
|
||||
Pink<br>
|
||||
@@ -455,7 +455,7 @@ Additional palettes are provided in the form of color primitives. Use these when
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-pink-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-pink-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-pink-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-pink-1000));"></div>1000</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-pink-950));"></div>950</div>
|
||||
|
||||
<div class="color-palette__name">
|
||||
Rose<br>
|
||||
@@ -471,6 +471,6 @@ Additional palettes are provided in the form of color primitives. Use these when
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-rose-700));"></div>700</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-rose-800));"></div>800</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-rose-900));"></div>900</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-rose-1000));"></div>1000</div>
|
||||
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-rose-950));"></div>950</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
--sl-color-blue-gray-700: 51 65 85;
|
||||
--sl-color-blue-gray-800: 30 41 59;
|
||||
--sl-color-blue-gray-900: 15 23 42;
|
||||
--sl-color-blue-gray-1000: 10 16 30;
|
||||
--sl-color-blue-gray-950: 10 16 30;
|
||||
|
||||
/* Cool Gray */
|
||||
--sl-color-cool-gray-50: 249 250 251;
|
||||
@@ -39,7 +39,7 @@
|
||||
--sl-color-cool-gray-700: 55 65 81;
|
||||
--sl-color-cool-gray-800: 31 41 55;
|
||||
--sl-color-cool-gray-900: 17 24 39;
|
||||
--sl-color-cool-gray-1000: 12 17 29;
|
||||
--sl-color-cool-gray-950: 12 17 29;
|
||||
|
||||
/* Gray */
|
||||
--sl-color-gray-50: 250 250 250;
|
||||
@@ -52,7 +52,7 @@
|
||||
--sl-color-gray-700: 63 63 70;
|
||||
--sl-color-gray-800: 39 39 42;
|
||||
--sl-color-gray-900: 24 24 27;
|
||||
--sl-color-gray-1000: 19 19 22;
|
||||
--sl-color-gray-950: 19 19 22;
|
||||
|
||||
/* True Gray */
|
||||
--sl-color-true-gray-50: 250 250 250;
|
||||
@@ -65,7 +65,7 @@
|
||||
--sl-color-true-gray-700: 64 64 64;
|
||||
--sl-color-true-gray-800: 38 38 38;
|
||||
--sl-color-true-gray-900: 23 23 23;
|
||||
--sl-color-true-gray-1000: 17 17 17;
|
||||
--sl-color-true-gray-950: 17 17 17;
|
||||
|
||||
/* Warm Gray */
|
||||
--sl-color-warm-gray-50: 250 250 249;
|
||||
@@ -78,7 +78,7 @@
|
||||
--sl-color-warm-gray-700: 68 64 60;
|
||||
--sl-color-warm-gray-800: 41 37 36;
|
||||
--sl-color-warm-gray-900: 28 25 23;
|
||||
--sl-color-warm-gray-1000: 19 18 16;
|
||||
--sl-color-warm-gray-950: 19 18 16;
|
||||
|
||||
/* Red */
|
||||
--sl-color-red-50: 254 242 242;
|
||||
@@ -91,7 +91,7 @@
|
||||
--sl-color-red-700: 185 28 28;
|
||||
--sl-color-red-800: 153 27 27;
|
||||
--sl-color-red-900: 127 29 29;
|
||||
--sl-color-red-1000: 80 20 20;
|
||||
--sl-color-red-950: 80 20 20;
|
||||
|
||||
/* Orange */
|
||||
--sl-color-orange-50: 255 247 237;
|
||||
@@ -104,7 +104,7 @@
|
||||
--sl-color-orange-700: 194 65 12;
|
||||
--sl-color-orange-800: 154 52 18;
|
||||
--sl-color-orange-900: 124 45 18;
|
||||
--sl-color-orange-1000: 82 32 15;
|
||||
--sl-color-orange-950: 82 32 15;
|
||||
|
||||
/* Amber */
|
||||
--sl-color-amber-50: 255 251 235;
|
||||
@@ -117,7 +117,7 @@
|
||||
--sl-color-amber-700: 180 83 9;
|
||||
--sl-color-amber-800: 146 64 14;
|
||||
--sl-color-amber-900: 120 53 15;
|
||||
--sl-color-amber-1000: 74 35 11;
|
||||
--sl-color-amber-950: 74 35 11;
|
||||
|
||||
/* Yellow */
|
||||
--sl-color-yellow-50: 254 252 232;
|
||||
@@ -130,7 +130,7 @@
|
||||
--sl-color-yellow-700: 161 98 7;
|
||||
--sl-color-yellow-800: 133 77 14;
|
||||
--sl-color-yellow-900: 113 63 18;
|
||||
--sl-color-yellow-1000: 60 38 11;
|
||||
--sl-color-yellow-950: 60 38 11;
|
||||
|
||||
/* Lime */
|
||||
--sl-color-lime-50: 247 254 231;
|
||||
@@ -143,7 +143,7 @@
|
||||
--sl-color-lime-700: 77 124 15;
|
||||
--sl-color-lime-800: 63 98 18;
|
||||
--sl-color-lime-900: 54 83 20;
|
||||
--sl-color-lime-1000: 38 57 14;
|
||||
--sl-color-lime-950: 38 57 14;
|
||||
|
||||
/* Green */
|
||||
--sl-color-green-50: 240 253 244;
|
||||
@@ -156,7 +156,7 @@
|
||||
--sl-color-green-700: 21 128 61;
|
||||
--sl-color-green-800: 22 101 52;
|
||||
--sl-color-green-900: 20 83 45;
|
||||
--sl-color-green-1000: 12 49 27;
|
||||
--sl-color-green-950: 12 49 27;
|
||||
|
||||
/* Emerald */
|
||||
--sl-color-emerald-50: 236 253 245;
|
||||
@@ -169,7 +169,7 @@
|
||||
--sl-color-emerald-700: 4 120 87;
|
||||
--sl-color-emerald-800: 6 95 70;
|
||||
--sl-color-emerald-900: 6 78 59;
|
||||
--sl-color-emerald-1000: 3 45 34;
|
||||
--sl-color-emerald-950: 3 45 34;
|
||||
|
||||
/* Teal */
|
||||
--sl-color-teal-50: 240 253 250;
|
||||
@@ -182,7 +182,7 @@
|
||||
--sl-color-teal-700: 15 118 110;
|
||||
--sl-color-teal-800: 17 94 89;
|
||||
--sl-color-teal-900: 19 78 74;
|
||||
--sl-color-teal-1000: 12 46 44;
|
||||
--sl-color-teal-950: 12 46 44;
|
||||
|
||||
/* Cyan */
|
||||
--sl-color-cyan-50: 236 254 255;
|
||||
@@ -195,7 +195,7 @@
|
||||
--sl-color-cyan-700: 14 116 144;
|
||||
--sl-color-cyan-800: 21 94 117;
|
||||
--sl-color-cyan-900: 22 78 99;
|
||||
--sl-color-cyan-1000: 16 52 66;
|
||||
--sl-color-cyan-950: 16 52 66;
|
||||
|
||||
/* Sky */
|
||||
--sl-color-sky-50: 240 249 255;
|
||||
@@ -208,7 +208,7 @@
|
||||
--sl-color-sky-700: 3 105 161;
|
||||
--sl-color-sky-800: 7 89 133;
|
||||
--sl-color-sky-900: 12 74 110;
|
||||
--sl-color-sky-1000: 11 50 73;
|
||||
--sl-color-sky-950: 11 50 73;
|
||||
|
||||
/* Blue */
|
||||
--sl-color-blue-50: 239 246 255;
|
||||
@@ -221,7 +221,7 @@
|
||||
--sl-color-blue-700: 29 78 216;
|
||||
--sl-color-blue-800: 30 64 175;
|
||||
--sl-color-blue-900: 30 58 138;
|
||||
--sl-color-blue-1000: 21 33 73;
|
||||
--sl-color-blue-950: 21 33 73;
|
||||
|
||||
/* Indigo */
|
||||
--sl-color-indigo-50: 238 242 255;
|
||||
@@ -234,7 +234,7 @@
|
||||
--sl-color-indigo-700: 67 56 202;
|
||||
--sl-color-indigo-800: 55 48 163;
|
||||
--sl-color-indigo-900: 49 46 129;
|
||||
--sl-color-indigo-1000: 36 33 84;
|
||||
--sl-color-indigo-950: 36 33 84;
|
||||
|
||||
/* Violet */
|
||||
--sl-color-violet-50: 245 243 255;
|
||||
@@ -247,7 +247,7 @@
|
||||
--sl-color-violet-700: 109 40 217;
|
||||
--sl-color-violet-800: 91 33 182;
|
||||
--sl-color-violet-900: 76 29 149;
|
||||
--sl-color-violet-1000: 49 21 88;
|
||||
--sl-color-violet-950: 49 21 88;
|
||||
|
||||
/* Purple */
|
||||
--sl-color-purple-50: 250 245 255;
|
||||
@@ -260,7 +260,7 @@
|
||||
--sl-color-purple-700: 126 34 206;
|
||||
--sl-color-purple-800: 107 33 168;
|
||||
--sl-color-purple-900: 88 28 135;
|
||||
--sl-color-purple-1000: 47 17 67;
|
||||
--sl-color-purple-950: 47 17 67;
|
||||
|
||||
/* Fuchsia */
|
||||
--sl-color-fuchsia-50: 253 244 255;
|
||||
@@ -273,7 +273,7 @@
|
||||
--sl-color-fuchsia-700: 162 28 175;
|
||||
--sl-color-fuchsia-800: 134 25 143;
|
||||
--sl-color-fuchsia-900: 112 26 117;
|
||||
--sl-color-fuchsia-1000: 56 16 58;
|
||||
--sl-color-fuchsia-950: 56 16 58;
|
||||
|
||||
/* Pink */
|
||||
--sl-color-pink-50: 253 242 248;
|
||||
@@ -286,7 +286,7 @@
|
||||
--sl-color-pink-700: 190 24 93;
|
||||
--sl-color-pink-800: 157 23 77;
|
||||
--sl-color-pink-900: 131 24 67;
|
||||
--sl-color-pink-1000: 67 14 35;
|
||||
--sl-color-pink-950: 67 14 35;
|
||||
|
||||
/* Rose */
|
||||
--sl-color-rose-50: 255 241 242;
|
||||
@@ -299,7 +299,7 @@
|
||||
--sl-color-rose-700: 190 18 60;
|
||||
--sl-color-rose-800: 159 18 57;
|
||||
--sl-color-rose-900: 136 19 55;
|
||||
--sl-color-rose-1000: 74 13 32;
|
||||
--sl-color-rose-950: 74 13 32;
|
||||
|
||||
/*
|
||||
* Theme Tokens
|
||||
@@ -316,7 +316,7 @@
|
||||
--sl-color-primary-700: var(--sl-color-sky-700);
|
||||
--sl-color-primary-800: var(--sl-color-sky-800);
|
||||
--sl-color-primary-900: var(--sl-color-sky-900);
|
||||
--sl-color-primary-1000: var(--sl-color-sky-1000);
|
||||
--sl-color-primary-950: var(--sl-color-sky-950);
|
||||
|
||||
/* Success */
|
||||
--sl-color-success-50: var(--sl-color-green-50);
|
||||
@@ -329,7 +329,7 @@
|
||||
--sl-color-success-700: var(--sl-color-green-700);
|
||||
--sl-color-success-800: var(--sl-color-green-800);
|
||||
--sl-color-success-900: var(--sl-color-green-900);
|
||||
--sl-color-success-1000: var(--sl-color-green-1000);
|
||||
--sl-color-success-950: var(--sl-color-green-950);
|
||||
|
||||
/* Info */
|
||||
--sl-color-info-50: var(--sl-color-gray-50);
|
||||
@@ -342,7 +342,7 @@
|
||||
--sl-color-info-700: var(--sl-color-gray-700);
|
||||
--sl-color-info-800: var(--sl-color-gray-800);
|
||||
--sl-color-info-900: var(--sl-color-gray-900);
|
||||
--sl-color-info-1000: var(--sl-color-gray-1000);
|
||||
--sl-color-info-950: var(--sl-color-gray-950);
|
||||
|
||||
/* Warning */
|
||||
--sl-color-warning-50: var(--sl-color-amber-50);
|
||||
@@ -355,7 +355,7 @@
|
||||
--sl-color-warning-700: var(--sl-color-amber-700);
|
||||
--sl-color-warning-800: var(--sl-color-amber-800);
|
||||
--sl-color-warning-900: var(--sl-color-amber-900);
|
||||
--sl-color-warning-1000: var(--sl-color-amber-1000);
|
||||
--sl-color-warning-950: var(--sl-color-amber-950);
|
||||
|
||||
/* Danger */
|
||||
--sl-color-danger-50: var(--sl-color-red-50);
|
||||
@@ -368,7 +368,7 @@
|
||||
--sl-color-danger-700: var(--sl-color-red-700);
|
||||
--sl-color-danger-800: var(--sl-color-red-800);
|
||||
--sl-color-danger-900: var(--sl-color-red-900);
|
||||
--sl-color-danger-1000: var(--sl-color-red-1000);
|
||||
--sl-color-danger-950: var(--sl-color-red-950);
|
||||
|
||||
/*
|
||||
* Border radius tokens
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
--sl-color-white: var(--sl-color-gray-100);
|
||||
|
||||
/* Blue Gray */
|
||||
--sl-color-blue-gray-1000: 248 250 252;
|
||||
--sl-color-blue-gray-950: 248 250 252;
|
||||
--sl-color-blue-gray-900: 241 245 249;
|
||||
--sl-color-blue-gray-800: 226 232 240;
|
||||
--sl-color-blue-gray-700: 203 213 225;
|
||||
@@ -17,7 +17,7 @@
|
||||
--sl-color-blue-gray-50: 10 16 30;
|
||||
|
||||
/* Cool Gray */
|
||||
--sl-color-cool-gray-1000: 249 250 251;
|
||||
--sl-color-cool-gray-950: 249 250 251;
|
||||
--sl-color-cool-gray-900: 243 244 246;
|
||||
--sl-color-cool-gray-800: 229 231 235;
|
||||
--sl-color-cool-gray-700: 209 213 219;
|
||||
@@ -30,7 +30,7 @@
|
||||
--sl-color-cool-gray-50: 12 17 29;
|
||||
|
||||
/* Gray */
|
||||
--sl-color-gray-1000: 250 250 250;
|
||||
--sl-color-gray-950: 250 250 250;
|
||||
--sl-color-gray-900: 244 244 245;
|
||||
--sl-color-gray-800: 228 228 231;
|
||||
--sl-color-gray-700: 212 212 216;
|
||||
@@ -43,7 +43,7 @@
|
||||
--sl-color-gray-50: 19 19 22;
|
||||
|
||||
/* True Gray */
|
||||
--sl-color-true-gray-1000: 250 250 250;
|
||||
--sl-color-true-gray-950: 250 250 250;
|
||||
--sl-color-true-gray-900: 245 245 245;
|
||||
--sl-color-true-gray-800: 229 229 229;
|
||||
--sl-color-true-gray-700: 212 212 212;
|
||||
@@ -56,7 +56,7 @@
|
||||
--sl-color-true-gray-50: 17 17 17;
|
||||
|
||||
/* Warm Gray */
|
||||
--sl-color-warm-gray-1000: 250 250 249;
|
||||
--sl-color-warm-gray-950: 250 250 249;
|
||||
--sl-color-warm-gray-900: 245 245 244;
|
||||
--sl-color-warm-gray-800: 231 229 228;
|
||||
--sl-color-warm-gray-700: 214 211 209;
|
||||
@@ -69,7 +69,7 @@
|
||||
--sl-color-warm-gray-50: 19 18 16;
|
||||
|
||||
/* Red */
|
||||
--sl-color-red-1000: 254 242 242;
|
||||
--sl-color-red-950: 254 242 242;
|
||||
--sl-color-red-900: 254 226 226;
|
||||
--sl-color-red-800: 254 202 202;
|
||||
--sl-color-red-700: 252 165 165;
|
||||
@@ -82,7 +82,7 @@
|
||||
--sl-color-red-50: 80 20 20;
|
||||
|
||||
/* Orange */
|
||||
--sl-color-orange-1000: 255 247 237;
|
||||
--sl-color-orange-950: 255 247 237;
|
||||
--sl-color-orange-900: 255 237 213;
|
||||
--sl-color-orange-800: 254 215 170;
|
||||
--sl-color-orange-700: 253 186 116;
|
||||
@@ -95,7 +95,7 @@
|
||||
--sl-color-orange-50: 82 32 15;
|
||||
|
||||
/* Amber */
|
||||
--sl-color-amber-1000: 255 251 235;
|
||||
--sl-color-amber-950: 255 251 235;
|
||||
--sl-color-amber-900: 254 243 199;
|
||||
--sl-color-amber-800: 253 230 138;
|
||||
--sl-color-amber-700: 252 211 77;
|
||||
@@ -108,7 +108,7 @@
|
||||
--sl-color-amber-50: 74 35 11;
|
||||
|
||||
/* Yellow */
|
||||
--sl-color-yellow-1000: 254 252 232;
|
||||
--sl-color-yellow-950: 254 252 232;
|
||||
--sl-color-yellow-900: 254 249 195;
|
||||
--sl-color-yellow-800: 254 240 138;
|
||||
--sl-color-yellow-700: 253 224 71;
|
||||
@@ -121,7 +121,7 @@
|
||||
--sl-color-yellow-50: 60 38 11;
|
||||
|
||||
/* Lime */
|
||||
--sl-color-lime-1000: 247 254 231;
|
||||
--sl-color-lime-950: 247 254 231;
|
||||
--sl-color-lime-900: 236 252 203;
|
||||
--sl-color-lime-800: 217 249 157;
|
||||
--sl-color-lime-700: 190 242 100;
|
||||
@@ -134,7 +134,7 @@
|
||||
--sl-color-lime-50: 38 57 14;
|
||||
|
||||
/* Green */
|
||||
--sl-color-green-1000: 240 253 244;
|
||||
--sl-color-green-950: 240 253 244;
|
||||
--sl-color-green-900: 220 252 231;
|
||||
--sl-color-green-800: 187 247 208;
|
||||
--sl-color-green-700: 134 239 172;
|
||||
@@ -147,7 +147,7 @@
|
||||
--sl-color-green-50: 12 49 27;
|
||||
|
||||
/* Emerald */
|
||||
--sl-color-emerald-1000: 236 253 245;
|
||||
--sl-color-emerald-950: 236 253 245;
|
||||
--sl-color-emerald-900: 209 250 229;
|
||||
--sl-color-emerald-800: 167 243 208;
|
||||
--sl-color-emerald-700: 110 231 183;
|
||||
@@ -160,7 +160,7 @@
|
||||
--sl-color-emerald-50: 3 45 34;
|
||||
|
||||
/* Teal */
|
||||
--sl-color-teal-1000: 240 253 250;
|
||||
--sl-color-teal-950: 240 253 250;
|
||||
--sl-color-teal-900: 204 251 241;
|
||||
--sl-color-teal-800: 153 246 228;
|
||||
--sl-color-teal-700: 94 234 212;
|
||||
@@ -173,7 +173,7 @@
|
||||
--sl-color-teal-50: 12 46 44;
|
||||
|
||||
/* Cyan */
|
||||
--sl-color-cyan-1000: 236 254 255;
|
||||
--sl-color-cyan-950: 236 254 255;
|
||||
--sl-color-cyan-900: 207 250 254;
|
||||
--sl-color-cyan-800: 165 243 252;
|
||||
--sl-color-cyan-700: 103 232 249;
|
||||
@@ -186,7 +186,7 @@
|
||||
--sl-color-cyan-50: 16 52 66;
|
||||
|
||||
/* Sky */
|
||||
--sl-color-sky-1000: 240 249 255;
|
||||
--sl-color-sky-950: 240 249 255;
|
||||
--sl-color-sky-900: 224 242 254;
|
||||
--sl-color-sky-800: 186 230 253;
|
||||
--sl-color-sky-700: 125 211 252;
|
||||
@@ -199,7 +199,7 @@
|
||||
--sl-color-sky-50: 11 50 73;
|
||||
|
||||
/* Blue */
|
||||
--sl-color-blue-1000: 239 246 255;
|
||||
--sl-color-blue-950: 239 246 255;
|
||||
--sl-color-blue-900: 219 234 254;
|
||||
--sl-color-blue-800: 191 219 254;
|
||||
--sl-color-blue-700: 147 197 253;
|
||||
@@ -212,7 +212,7 @@
|
||||
--sl-color-blue-50: 21 33 73;
|
||||
|
||||
/* Indigo */
|
||||
--sl-color-indigo-1000: 238 242 255;
|
||||
--sl-color-indigo-950: 238 242 255;
|
||||
--sl-color-indigo-900: 224 231 255;
|
||||
--sl-color-indigo-800: 199 210 254;
|
||||
--sl-color-indigo-700: 165 180 252;
|
||||
@@ -225,7 +225,7 @@
|
||||
--sl-color-indigo-50: 36 33 84;
|
||||
|
||||
/* Violet */
|
||||
--sl-color-violet-1000: 245 243 255;
|
||||
--sl-color-violet-950: 245 243 255;
|
||||
--sl-color-violet-900: 237 233 254;
|
||||
--sl-color-violet-800: 221 214 254;
|
||||
--sl-color-violet-700: 196 181 253;
|
||||
@@ -238,7 +238,7 @@
|
||||
--sl-color-violet-50: 49 21 88;
|
||||
|
||||
/* Purple */
|
||||
--sl-color-purple-1000: 250 245 255;
|
||||
--sl-color-purple-950: 250 245 255;
|
||||
--sl-color-purple-900: 243 232 255;
|
||||
--sl-color-purple-800: 233 213 255;
|
||||
--sl-color-purple-700: 216 180 254;
|
||||
@@ -251,7 +251,7 @@
|
||||
--sl-color-purple-50: 47 17 67;
|
||||
|
||||
/* Fuchsia */
|
||||
--sl-color-fuchsia-1000: 253 244 255;
|
||||
--sl-color-fuchsia-950: 253 244 255;
|
||||
--sl-color-fuchsia-900: 250 232 255;
|
||||
--sl-color-fuchsia-800: 245 208 254;
|
||||
--sl-color-fuchsia-700: 240 171 252;
|
||||
@@ -264,7 +264,7 @@
|
||||
--sl-color-fuchsia-50: 56 16 58;
|
||||
|
||||
/* Pink */
|
||||
--sl-color-pink-1000: 253 242 248;
|
||||
--sl-color-pink-950: 253 242 248;
|
||||
--sl-color-pink-900: 252 231 243;
|
||||
--sl-color-pink-800: 251 207 232;
|
||||
--sl-color-pink-700: 249 168 212;
|
||||
@@ -277,7 +277,7 @@
|
||||
--sl-color-pink-50: 67 14 35;
|
||||
|
||||
/* Rose */
|
||||
--sl-color-rose-1000: 255 241 242;
|
||||
--sl-color-rose-950: 255 241 242;
|
||||
--sl-color-rose-900: 255 228 230;
|
||||
--sl-color-rose-800: 254 205 211;
|
||||
--sl-color-rose-700: 253 164 175;
|
||||
|
||||
Reference in New Issue
Block a user