From 3d1f858301727ec57b423cb0face1c72595c682e Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Thu, 5 Aug 2021 17:42:12 -0400 Subject: [PATCH] black/white => empty/full --- docs/assets/plugins/code-block/code-block.css | 6 +- docs/assets/styles/docs.css | 20 ++++--- docs/components/avatar.md | 2 +- docs/resources/changelog.md | 3 +- docs/tokens/color.md | 59 +++++++++++++++++++ src/components/alert/alert.styles.ts | 2 +- src/components/avatar/avatar.styles.ts | 2 +- src/components/badge/badge.styles.ts | 10 ++-- src/components/button/button.styles.ts | 44 +++++++------- src/components/card/card.styles.ts | 2 +- src/components/checkbox/checkbox.styles.ts | 2 +- .../image-comparer/image-comparer.styles.ts | 4 +- src/components/menu-item/menu-item.styles.ts | 2 +- .../progress-bar/progress-bar.styles.ts | 2 +- src/components/radio/radio.styles.ts | 2 +- src/components/spinner/spinner.styles.ts | 2 +- src/components/switch/switch.styles.ts | 12 ++-- src/themes/base.styles.ts | 16 ++--- src/themes/dark.styles.ts | 4 +- 19 files changed, 130 insertions(+), 66 deletions(-) diff --git a/docs/assets/plugins/code-block/code-block.css b/docs/assets/plugins/code-block/code-block.css index f92121fbb..3831feb2f 100644 --- a/docs/assets/plugins/code-block/code-block.css +++ b/docs/assets/plugins/code-block/code-block.css @@ -15,7 +15,7 @@ border-bottom: none; border-top-left-radius: 3px; border-top-right-radius: 3px; - background-color: rgb(var(--sl-color-white)); + background-color: rgb(var(--sl-color-empty)); min-width: 20rem; max-width: 100%; padding: 1.5rem 3.25rem 1.5rem 1.5rem; @@ -44,7 +44,7 @@ width: 1.75rem; font-size: 20px; color: rgb(var(--sl-color-gray-500)); - background-color: rgb(var(--sl-color-white)); + background-color: rgb(var(--sl-color-empty)); border-left: solid 1px rgb(var(--sl-color-gray-200)); border-top-right-radius: 3px; cursor: ew-resize; @@ -97,7 +97,7 @@ border: solid 1px rgb(var(--sl-color-gray-200)); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; - background: rgb(var(--sl-color-white)); + background: rgb(var(--sl-color-empty)); font: inherit; font-size: 0.875rem; color: rgb(var(--sl-color-gray-600)); diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index f56a21304..789a941f2 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -13,7 +13,7 @@ body { font-size: var(--sl-font-size-medium); font-weight: var(--sl-font-weight-normal); letter-spacing: var(--sl-letter-spacing-normal); - background-color: rgb(var(--sl-color-white)); + background-color: rgb(var(--sl-color-empty)); color: rgb(var(--sl-color-gray-800)); line-height: var(--sl-line-height-normal); } @@ -28,7 +28,7 @@ strong { /* Sidebar */ .sidebar { - background: rgb(var(--sl-color-white)); + background: rgb(var(--sl-color-empty)); border-right: solid 1px rgb(var(--sl-color-gray-200)); } @@ -105,7 +105,7 @@ strong { } .sidebar .clear-button svg path { - stroke: rgb(var(--sl-color-white)); + stroke: rgb(var(--sl-color-empty)); } .sidebar .clear-button:focus { @@ -142,7 +142,7 @@ strong { width: 2rem; height: 2rem; border-radius: var(--sl-border-radius-medium); - background-color: rgb(var(--sl-color-white)); + background-color: rgb(var(--sl-color-empty)); padding: 0.5rem; } @@ -269,7 +269,7 @@ strong { } .anchor span { - color: rgb(var(--sl-color-black)); + color: rgb(var(--sl-color-full)); } .markdown-section blockquote { @@ -514,7 +514,7 @@ strong { .markdown-section p.warn:before { content: '!'; border-radius: 100%; - color: rgb(var(--sl-color-white)); + color: rgb(var(--sl-color-empty)); font-size: 14px; font-weight: bold; left: -12px; @@ -590,7 +590,7 @@ strong { html .repo-button { display: inline-flex; align-items: center; - background-color: rgb(var(--sl-color-white)); + background-color: rgb(var(--sl-color-empty)); border: solid 1px rgb(var(--sl-color-gray-200)); border-radius: var(--sl-border-radius-medium); box-shadow: var(--sl-shadow-x-small); @@ -691,7 +691,7 @@ body[data-page^='tokens/'] .table-wrapper td:first-child code { /* Elevation dmeo */ .elevation-demo { - background: rgb(var(--sl-color-white)); + background: rgb(var(--sl-color-empty)); border-radius: 3px; width: 4rem; height: 4rem; @@ -726,6 +726,10 @@ body[data-page^='tokens/'] .table-wrapper td:first-child code { border-radius: var(--sl-border-radius-small); } +.color-palette__swatch--border { + box-shadow: inset 0 0 0 1px rgb(var(--sl-color-full) / 10%); +} + @media screen and (max-width: 1200px) { .color-palette { grid-template-columns: repeat(6, 1fr); diff --git a/docs/components/avatar.md b/docs/components/avatar.md index a7dd413a5..118f832d3 100644 --- a/docs/components/avatar.md +++ b/docs/components/avatar.md @@ -78,7 +78,7 @@ You can group avatars with a few lines of CSS. } .avatar-group sl-avatar::part(base) { - border: solid 2px rgb(var(--sl-color-white)); + border: solid 2px rgb(var(--sl-color-empty)); } ``` diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index ce8e55c08..95f5436aa 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -29,7 +29,8 @@ This is more verbose than before, but it has the advantage of letting you set th 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 -- 🚨 BREAKING: removed `--sl-color-primary|success|warning|info|danger-text` design tokens (use the color scale instead) +- 🚨 BREAKING: removed `--sl-color-black|white` color tokens (use `--sl-color-empty|full` instead) +- 🚨 BREAKING: removed `--sl-color-primary|success|warning|info|danger-text` design tokens (use theme or primitive colors instead) - Added new color primitives to the base set of design tokens - Added `--sl-color-*-950` swatches to all color palettes - Added a console error that appears when menu items have duplicate values in `sl-select` diff --git a/docs/tokens/color.md b/docs/tokens/color.md index e4fb5fc5e..448a713a0 100644 --- a/docs/tokens/color.md +++ b/docs/tokens/color.md @@ -50,7 +50,9 @@ Theme tokens give you a semantic way to reference colors in your app. The primar
800
900
950
+ +
Success
--sl-color-success-{n} @@ -66,7 +68,9 @@ Theme tokens give you a semantic way to reference colors in your app. The primar
800
900
950
+
+
Info
--sl-color-info-{n} @@ -82,7 +86,9 @@ Theme tokens give you a semantic way to reference colors in your app. The primar
800
900
950
+
+
Warning
--sl-color-warning-{n} @@ -98,7 +104,9 @@ Theme tokens give you a semantic way to reference colors in your app. The primar
800
900
950
+
+
Danger
--sl-color-danger-{n} @@ -116,6 +124,15 @@ Theme tokens give you a semantic way to reference colors in your app. The primar
950
+
+
+ Full & Empty
+ --sl-color-{n} +
+
full
+
empty
+
+ ## Primitives Additional palettes are provided in the form of color primitives. Use these when you need arbitrary colors that don't have semantic meaning. Color primitives are derived from the fantastic [Tailwind color palette](https://tailwindcss.com/docs/customizing-colors). @@ -136,7 +153,9 @@ Additional palettes are provided in the form of color primitives. Use these when
800
900
950
+
+
Cool Gray
--sl-color-cool-gray-{n} @@ -152,7 +171,9 @@ Additional palettes are provided in the form of color primitives. Use these when
800
900
950
+
+
Gray
--sl-color-gray-{n} @@ -168,7 +189,9 @@ Additional palettes are provided in the form of color primitives. Use these when
800
900
950
+
+
True Gray
--sl-color-true-gray-{n} @@ -184,7 +207,9 @@ Additional palettes are provided in the form of color primitives. Use these when
800
900
950
+
+
Warm Gray
--sl-color-warm-gray-{n} @@ -200,7 +225,9 @@ Additional palettes are provided in the form of color primitives. Use these when
800
900
950
+
+
Red
--sl-color-red-{n} @@ -216,7 +243,9 @@ Additional palettes are provided in the form of color primitives. Use these when
800
900
950
+
+
Orange
--sl-color-orange-{n} @@ -232,7 +261,9 @@ Additional palettes are provided in the form of color primitives. Use these when
800
900
950
+
+
Amber
--sl-color-amber-{n} @@ -248,7 +279,9 @@ Additional palettes are provided in the form of color primitives. Use these when
800
900
950
+
+
Yellow
--sl-color-yellow-{n} @@ -264,7 +297,9 @@ Additional palettes are provided in the form of color primitives. Use these when
800
900
950
+
+
Lime
--sl-color-lime-{n} @@ -280,7 +315,9 @@ Additional palettes are provided in the form of color primitives. Use these when
800
900
950
+
+
Green
--sl-color-green-{n} @@ -296,7 +333,9 @@ Additional palettes are provided in the form of color primitives. Use these when
800
900
950
+
+
Emerald
--sl-color-emerald-{n} @@ -312,7 +351,9 @@ Additional palettes are provided in the form of color primitives. Use these when
800
900
950
+
+
Teal
--sl-color-teal-{n} @@ -328,7 +369,9 @@ Additional palettes are provided in the form of color primitives. Use these when
800
900
950
+
+
Cyan
--sl-color-cyan-{n} @@ -344,7 +387,9 @@ Additional palettes are provided in the form of color primitives. Use these when
800
900
950
+
+
Sky
--sl-color-sky-{n} @@ -360,7 +405,9 @@ Additional palettes are provided in the form of color primitives. Use these when
800
900
950
+
+
Blue
--sl-color-blue-{n} @@ -376,7 +423,9 @@ Additional palettes are provided in the form of color primitives. Use these when
800
900
950
+
+
Indigo
--sl-color-indigo-{n} @@ -392,7 +441,9 @@ Additional palettes are provided in the form of color primitives. Use these when
800
900
950
+
+
Violet
--sl-color-violet-{n} @@ -408,7 +459,9 @@ Additional palettes are provided in the form of color primitives. Use these when
800
900
950
+
+
Purple
--sl-color-purple-{n} @@ -424,7 +477,9 @@ Additional palettes are provided in the form of color primitives. Use these when
800
900
950
+
+
Fuchsia
--sl-color-fuchsia-{n} @@ -440,7 +495,9 @@ Additional palettes are provided in the form of color primitives. Use these when
800
900
950
+
+
Pink
--sl-color-pink-{n} @@ -456,7 +513,9 @@ Additional palettes are provided in the form of color primitives. Use these when
800
900
950
+
+
Rose
--sl-color-rose-{n} diff --git a/src/components/alert/alert.styles.ts b/src/components/alert/alert.styles.ts index 1125d7f53..078b645f7 100644 --- a/src/components/alert/alert.styles.ts +++ b/src/components/alert/alert.styles.ts @@ -15,7 +15,7 @@ export default css` position: relative; display: flex; align-items: stretch; - background-color: rgb(var(--sl-color-white)); + background-color: rgb(var(--sl-color-empty)); border: solid 1px rgb(var(--sl-color-gray-200)); border-top-width: 3px; border-radius: var(--sl-border-radius-medium); diff --git a/src/components/avatar/avatar.styles.ts b/src/components/avatar/avatar.styles.ts index 121b6232f..0a3cf46b2 100644 --- a/src/components/avatar/avatar.styles.ts +++ b/src/components/avatar/avatar.styles.ts @@ -21,7 +21,7 @@ export default css` font-family: var(--sl-font-sans); font-size: calc(var(--size) * 0.5); font-weight: var(--sl-font-weight-normal); - color: rgb(var(--sl-color-white)); + color: rgb(var(--sl-color-empty)); overflow: hidden; user-select: none; vertical-align: middle; diff --git a/src/components/badge/badge.styles.ts b/src/components/badge/badge.styles.ts index dfec9b8e2..66d4efcbe 100644 --- a/src/components/badge/badge.styles.ts +++ b/src/components/badge/badge.styles.ts @@ -26,27 +26,27 @@ export default css` /* Type modifiers */ .badge--primary { background-color: rgb(var(--sl-color-primary-500)); - color: rgb(var(--sl-color-white)); + color: rgb(var(--sl-color-empty)); } .badge--success { background-color: rgb(var(--sl-color-success-500)); - color: rgb(var(--sl-color-white)); + color: rgb(var(--sl-color-empty)); } .badge--info { background-color: rgb(var(--sl-color-info-500)); - color: rgb(var(--sl-color-white)); + color: rgb(var(--sl-color-empty)); } .badge--warning { background-color: rgb(var(--sl-color-warning-500)); - color: rgb(var(--sl-color-white)); + color: rgb(var(--sl-color-empty)); } .badge--danger { background-color: rgb(var(--sl-color-danger-500)); - color: rgb(var(--sl-color-white)); + color: rgb(var(--sl-color-empty)); } /* Pill modifier */ diff --git a/src/components/button/button.styles.ts b/src/components/button/button.styles.ts index 5cf3ad3c2..2659f5fa8 100644 --- a/src/components/button/button.styles.ts +++ b/src/components/button/button.styles.ts @@ -69,7 +69,7 @@ export default css` /* Default */ .button.button--default { - background-color: rgb(var(--sl-color-white)); + background-color: rgb(var(--sl-color-empty)); border-color: rgb(var(--sl-color-gray-300)); color: rgb(var(--sl-color-gray-600)); } @@ -97,129 +97,129 @@ export default css` .button.button--primary { background-color: rgb(var(--sl-color-primary-500)); border-color: rgb(var(--sl-color-primary-500)); - color: rgb(var(--sl-color-white)); + color: rgb(var(--sl-color-empty)); } .button.button--primary:hover:not(.button--disabled) { background-color: rgb(var(--sl-color-primary-400)); border-color: rgb(var(--sl-color-primary-400)); - color: rgb(var(--sl-color-white)); + color: rgb(var(--sl-color-empty)); } .button.button--primary:focus:not(.button--disabled) { background-color: rgb(var(--sl-color-primary-400)); border-color: rgb(var(--sl-color-primary-400)); - color: rgb(var(--sl-color-white)); + color: rgb(var(--sl-color-empty)); box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary); } .button.button--primary:active:not(.button--disabled) { background-color: rgb(var(--sl-color-primary-500)); border-color: rgb(var(--sl-color-primary-500)); - color: rgb(var(--sl-color-white)); + color: rgb(var(--sl-color-empty)); } /* Success */ .button.button--success { background-color: rgb(var(--sl-color-success-500)); border-color: rgb(var(--sl-color-success-500)); - color: rgb(var(--sl-color-white)); + color: rgb(var(--sl-color-empty)); } .button.button--success:hover:not(.button--disabled) { background-color: rgb(var(--sl-color-success-400)); border-color: rgb(var(--sl-color-success-400)); - color: rgb(var(--sl-color-white)); + color: rgb(var(--sl-color-empty)); } .button.button--success:focus:not(.button--disabled) { background-color: rgb(var(--sl-color-success-400)); border-color: rgb(var(--sl-color-success-400)); - color: rgb(var(--sl-color-white)); + color: rgb(var(--sl-color-empty)); box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-success); } .button.button--success:active:not(.button--disabled) { background-color: rgb(var(--sl-color-success-500)); border-color: rgb(var(--sl-color-success-500)); - color: rgb(var(--sl-color-white)); + color: rgb(var(--sl-color-empty)); } /* Info */ .button.button--info { background-color: rgb(var(--sl-color-info-500)); border-color: rgb(var(--sl-color-info-500)); - color: rgb(var(--sl-color-white)); + color: rgb(var(--sl-color-empty)); } .button.button--info:hover:not(.button--disabled) { background-color: rgb(var(--sl-color-info-400)); border-color: rgb(var(--sl-color-info-400)); - color: rgb(var(--sl-color-white)); + color: rgb(var(--sl-color-empty)); } .button.button--info:focus:not(.button--disabled) { background-color: rgb(var(--sl-color-info-400)); border-color: rgb(var(--sl-color-info-400)); - color: rgb(var(--sl-color-white)); + color: rgb(var(--sl-color-empty)); box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-info); } .button.button--info:active:not(.button--disabled) { background-color: rgb(var(--sl-color-info-500)); border-color: rgb(var(--sl-color-info-500)); - color: rgb(var(--sl-color-white)); + color: rgb(var(--sl-color-empty)); } /* Warning */ .button.button--warning { background-color: rgb(var(--sl-color-warning-500)); border-color: rgb(var(--sl-color-warning-500)); - color: rgb(var(--sl-color-white)); + color: rgb(var(--sl-color-empty)); } .button.button--warning:hover:not(.button--disabled) { background-color: rgb(var(--sl-color-warning-400)); border-color: rgb(var(--sl-color-warning-400)); - color: rgb(var(--sl-color-white)); + color: rgb(var(--sl-color-empty)); } .button.button--warning:focus:not(.button--disabled) { background-color: rgb(var(--sl-color-warning-400)); border-color: rgb(var(--sl-color-warning-400)); - color: rgb(var(--sl-color-white)); + color: rgb(var(--sl-color-empty)); box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-warning); } .button.button--warning:active:not(.button--disabled) { background-color: rgb(var(--sl-color-warning-500)); border-color: rgb(var(--sl-color-warning-500)); - color: rgb(var(--sl-color-white)); + color: rgb(var(--sl-color-empty)); } /* Danger */ .button.button--danger { background-color: rgb(var(--sl-color-danger-500)); border-color: rgb(var(--sl-color-danger-500)); - color: rgb(var(--sl-color-white)); + color: rgb(var(--sl-color-empty)); } .button.button--danger:hover:not(.button--disabled) { background-color: rgb(var(--sl-color-danger-400)); border-color: rgb(var(--sl-color-danger-400)); - color: rgb(var(--sl-color-white)); + color: rgb(var(--sl-color-empty)); } .button.button--danger:focus:not(.button--disabled) { background-color: rgb(var(--sl-color-danger-400)); border-color: rgb(var(--sl-color-danger-400)); - color: rgb(var(--sl-color-white)); + color: rgb(var(--sl-color-empty)); box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-danger); } .button.button--danger:active:not(.button--disabled) { background-color: rgb(var(--sl-color-danger-500)); border-color: rgb(var(--sl-color-danger-500)); - color: rgb(var(--sl-color-white)); + color: rgb(var(--sl-color-empty)); } /* @@ -482,7 +482,7 @@ export default css` top: 0; left: 0; bottom: 0; - border-left: solid 1px rgb(var(--sl-color-white) / 20%); + border-left: solid 1px rgb(var(--sl-color-empty) / 20%); } /* Bump focused buttons up so their focus ring isn't clipped */ diff --git a/src/components/card/card.styles.ts b/src/components/card/card.styles.ts index 9ad0783fb..2c0249d6d 100644 --- a/src/components/card/card.styles.ts +++ b/src/components/card/card.styles.ts @@ -16,7 +16,7 @@ export default css` .card { display: flex; flex-direction: column; - background-color: rgb(var(--sl-color-white)); + background-color: rgb(var(--sl-color-empty)); box-shadow: var(--sl-shadow-x-small); border: solid var(--border-width) var(--border-color); border-radius: var(--border-radius); diff --git a/src/components/checkbox/checkbox.styles.ts b/src/components/checkbox/checkbox.styles.ts index ceee2599d..5993b2d61 100644 --- a/src/components/checkbox/checkbox.styles.ts +++ b/src/components/checkbox/checkbox.styles.ts @@ -30,7 +30,7 @@ export default css` border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color)); border-radius: 2px; background-color: rgb(var(--sl-input-background-color)); - color: rgb(var(--sl-color-white)); + color: rgb(var(--sl-color-empty)); transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color, var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow; } diff --git a/src/components/image-comparer/image-comparer.styles.ts b/src/components/image-comparer/image-comparer.styles.ts index e88b43335..27040fe1e 100644 --- a/src/components/image-comparer/image-comparer.styles.ts +++ b/src/components/image-comparer/image-comparer.styles.ts @@ -48,7 +48,7 @@ export default css` top: 0; width: var(--divider-width); height: 100%; - background-color: rgb(var(--sl-color-white)); + background-color: rgb(var(--sl-color-empty)); transform: translateX(calc(var(--divider-width) / -2)); cursor: ew-resize; } @@ -61,7 +61,7 @@ export default css` top: calc(50% - (var(--handle-size) / 2)); width: var(--handle-size); height: var(--handle-size); - background-color: rgb(var(--sl-color-white)); + background-color: rgb(var(--sl-color-empty)); border-radius: var(--sl-border-radius-circle); font-size: calc(var(--handle-size) * 0.5); color: rgb(var(--sl-color-gray-500)); diff --git a/src/components/menu-item/menu-item.styles.ts b/src/components/menu-item/menu-item.styles.ts index cce6942cb..62013de6e 100644 --- a/src/components/menu-item/menu-item.styles.ts +++ b/src/components/menu-item/menu-item.styles.ts @@ -63,7 +63,7 @@ export default css` :host(:focus:not([aria-disabled='true'])) .menu-item { outline: none; background-color: rgb(var(--sl-color-primary-500)); - color: rgb(var(--sl-color-white)); + color: rgb(var(--sl-color-empty)); } .menu-item .menu-item__check { diff --git a/src/components/progress-bar/progress-bar.styles.ts b/src/components/progress-bar/progress-bar.styles.ts index 04c2933dc..85820e95d 100644 --- a/src/components/progress-bar/progress-bar.styles.ts +++ b/src/components/progress-bar/progress-bar.styles.ts @@ -8,7 +8,7 @@ export default css` --height: 16px; --track-color: rgb(var(--sl-color-gray-200)); --indicator-color: rgb(var(--sl-color-primary-500)); - --label-color: rgb(var(--sl-color-white)); + --label-color: rgb(var(--sl-color-empty)); display: block; } diff --git a/src/components/radio/radio.styles.ts b/src/components/radio/radio.styles.ts index 065545982..9c1ab6b3a 100644 --- a/src/components/radio/radio.styles.ts +++ b/src/components/radio/radio.styles.ts @@ -69,7 +69,7 @@ export default css` /* Checked */ .radio--checked .radio__control { - color: rgb(var(--sl-color-white)); + color: rgb(var(--sl-color-empty)); border-color: rgb(var(--sl-color-primary-500)); background-color: rgb(var(--sl-color-primary-500)); } diff --git a/src/components/spinner/spinner.styles.ts b/src/components/spinner/spinner.styles.ts index e67878a25..936477c4c 100644 --- a/src/components/spinner/spinner.styles.ts +++ b/src/components/spinner/spinner.styles.ts @@ -5,7 +5,7 @@ export default css` ${componentStyles} :host { - --track-color: rgb(var(--sl-color-black) / 10%); + --track-color: rgb(var(--sl-color-full) / 10%); --indicator-color: rgb(var(--sl-color-primary-500)); --stroke-width: 2px; diff --git a/src/components/switch/switch.styles.ts b/src/components/switch/switch.styles.ts index 337e85ef1..e09fb8834 100644 --- a/src/components/switch/switch.styles.ts +++ b/src/components/switch/switch.styles.ts @@ -40,7 +40,7 @@ export default css` .switch__control .switch__thumb { width: var(--thumb-size); height: var(--thumb-size); - background-color: rgb(var(--sl-color-white)); + background-color: rgb(var(--sl-color-empty)); border-radius: 50%; border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color)); transform: translateX(calc((var(--width) - var(--height)) / -2)); @@ -62,7 +62,7 @@ export default css` border-color: rgb(var(--sl-color-gray-200)); } .switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover .switch__thumb { - background-color: rgb(var(--sl-color-white)); + background-color: rgb(var(--sl-color-empty)); border-color: rgb(var(--sl-input-border-color)); } @@ -73,7 +73,7 @@ export default css` } .switch.switch--focused:not(.switch--checked):not(.switch--disabled) .switch__control .switch__thumb { - background-color: rgb(var(--sl-color-white)); + background-color: rgb(var(--sl-color-empty)); border-color: rgb(var(--sl-color-primary-500)); box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary); } @@ -84,7 +84,7 @@ export default css` border-color: rgb(var(--sl-color-primary-500)); } .switch--checked .switch__control .switch__thumb { - background-color: rgb(var(--sl-color-white)); + background-color: rgb(var(--sl-color-empty)); border-color: rgb(var(--sl-color-primary-500)); transform: translateX(calc((var(--width) - var(--height)) / 2)); } @@ -95,7 +95,7 @@ export default css` border-color: rgb(var(--sl-color-primary-400)); } .switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb { - background-color: rgb(var(--sl-color-white)); + background-color: rgb(var(--sl-color-empty)); border-color: rgb(var(--sl-color-primary-500)); } @@ -106,7 +106,7 @@ export default css` } .switch.switch--checked:not(.switch--disabled).switch--focused .switch__control .switch__thumb { - background-color: rgb(var(--sl-color-white)); + background-color: rgb(var(--sl-color-empty)); border-color: rgb(var(--sl-color-primary-500)); box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary); } diff --git a/src/themes/base.styles.ts b/src/themes/base.styles.ts index 0cbc7ba6e..1fa4ca307 100644 --- a/src/themes/base.styles.ts +++ b/src/themes/base.styles.ts @@ -8,9 +8,6 @@ export default css` * Color Primitives */ - --sl-color-black: 0 0 0; - --sl-color-white: 255 255 255; - /* Blue Gray */ --sl-color-blue-gray-50: 248 250 252; --sl-color-blue-gray-100: 241 245 249; @@ -301,6 +298,9 @@ export default css` * Theme Tokens */ + --sl-color-full: 0 0 0; + --sl-color-empty: 255 255 255; + /* Primary */ --sl-color-primary-50: var(--sl-color-sky-50); --sl-color-primary-100: var(--sl-color-sky-100); @@ -472,9 +472,9 @@ export default css` --sl-input-height-medium: 2.5rem; /* 40px */ --sl-input-height-large: 3.125rem; /* 50px */ - --sl-input-background-color: var(--sl-color-white); - --sl-input-background-color-hover: var(--sl-color-white); - --sl-input-background-color-focus: var(--sl-color-white); + --sl-input-background-color: var(--sl-color-empty); + --sl-input-background-color-hover: var(--sl-color-empty); + --sl-input-background-color-focus: var(--sl-color-empty); --sl-input-background-color-disabled: var(--sl-color-gray-100); --sl-input-border-color: var(--sl-color-gray-300); --sl-input-border-color-hover: var(--sl-color-gray-400); @@ -533,7 +533,7 @@ export default css` * Panels */ - --sl-panel-background-color: var(--sl-color-white); + --sl-panel-background-color: var(--sl-color-empty); --sl-panel-border-color: var(--sl-color-gray-200); /* * Tooltip tokens @@ -541,7 +541,7 @@ export default css` --sl-tooltip-border-radius: var(--sl-border-radius-medium); --sl-tooltip-background-color: var(--sl-color-gray-900); - --sl-tooltip-color: var(--sl-color-white); + --sl-tooltip-color: var(--sl-color-empty); --sl-tooltip-font-family: var(--sl-font-sans); --sl-tooltip-font-weight: var(--sl-font-weight-normal); --sl-tooltip-font-size: var(--sl-font-size-small); diff --git a/src/themes/dark.styles.ts b/src/themes/dark.styles.ts index 138603a6b..0cd3bda13 100644 --- a/src/themes/dark.styles.ts +++ b/src/themes/dark.styles.ts @@ -3,8 +3,8 @@ import { css } from 'lit'; export default css` :host, .sl-theme-dark { - --sl-color-black: 255 255 255; - --sl-color-white: var(--sl-color-gray-50); + --sl-color-full: 255 255 255; + --sl-color-empty: var(--sl-color-gray-50); /* Blue Gray */ --sl-color-blue-gray-950: 248 250 252;