use color scale

shoelace-style · Aug 5, 2021 · 21de0db · 21de0db
1 parent c5d4c53
commit 21de0db
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 32 deletions.
diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
@@ -29,6 +29,7 @@ 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)
 - 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/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-primary-text));
+    color: rgb(var(--sl-color-white));
   }
 
   .badge--success {
     background-color: rgb(var(--sl-color-success-500));
-    color: rgb(var(--sl-color-success-text));
+    color: rgb(var(--sl-color-white));
   }
 
   .badge--info {
     background-color: rgb(var(--sl-color-info-500));
-    color: rgb(var(--sl-color-info-text));
+    color: rgb(var(--sl-color-white));
   }
 
   .badge--warning {
     background-color: rgb(var(--sl-color-warning-500));
-    color: rgb(var(--sl-color-warning-text));
+    color: rgb(var(--sl-color-white));
   }
 
   .badge--danger {
     background-color: rgb(var(--sl-color-danger-500));
-    color: rgb(var(--sl-color-danger-text));
+    color: rgb(var(--sl-color-white));
   }
 
   /* Pill modifier */

diff --git a/src/components/button/button.styles.ts b/src/components/button/button.styles.ts
@@ -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-primary-text));
+    color: rgb(var(--sl-color-white));
   }
 
   .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-primary-text));
+    color: rgb(var(--sl-color-white));
   }
 
   .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-primary-text));
+    color: rgb(var(--sl-color-white));
     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-primary-text));
+    color: rgb(var(--sl-color-white));
   }
 
   /* 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-success-text));
+    color: rgb(var(--sl-color-white));
   }
 
   .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-success-text));
+    color: rgb(var(--sl-color-white));
   }
 
   .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-success-text));
+    color: rgb(var(--sl-color-white));
     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-success-text));
+    color: rgb(var(--sl-color-white));
   }
 
   /* 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-info-text));
+    color: rgb(var(--sl-color-white));
   }
 
   .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-info-text));
+    color: rgb(var(--sl-color-white));
   }
 
   .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-info-text));
+    color: rgb(var(--sl-color-white));
     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-info-text));
+    color: rgb(var(--sl-color-white));
   }
 
   /* 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-warning-text));
+    color: rgb(var(--sl-color-white));
   }
   .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-warning-text));
+    color: rgb(var(--sl-color-white));
   }
 
   .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-warning-text));
+    color: rgb(var(--sl-color-white));
     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-warning-text));
+    color: rgb(var(--sl-color-white));
   }
 
   /* 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-danger-text));
+    color: rgb(var(--sl-color-white));
   }
 
   .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-danger-text));
+    color: rgb(var(--sl-color-white));
   }
 
   .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-danger-text));
+    color: rgb(var(--sl-color-white));
     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-danger-text));
+    color: rgb(var(--sl-color-white));
   }
 
   /*

diff --git a/src/themes/base.styles.ts b/src/themes/base.styles.ts
@@ -11,13 +11,6 @@ export default css`
     --sl-color-black: 0 0 0;
     --sl-color-white: 255 255 255;
 
-    /* We can probably ditch these now */
-    --sl-color-primary-text: var(--sl-color-white);
-    --sl-color-success-text: var(--sl-color-white);
-    --sl-color-info-text: var(--sl-color-white);
-    --sl-color-warning-text: var(--sl-color-white);
-    --sl-color-danger-text: var(--sl-color-white);
-
     /* Blue Gray */
     --sl-color-blue-gray-50: 248 250 252;
     --sl-color-blue-gray-100: 241 245 249;