change -0 -1000 to --sl-color-neutral-0|1000

shoelace-style · Aug 6, 2021 · 3189c6f · 3189c6f
1 parent 9dbee4c
commit 3189c6f
Show file tree

Hide file tree

Showing 20 changed files with 79 additions and 78 deletions.
diff --git 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-1000));
+  background-color: rgb(var(--sl-color-neutral-1000));
   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-neutral-500));
-  background-color: rgb(var(--sl-color-1000));
+  background-color: rgb(var(--sl-color-neutral-1000));
   border-left: solid 1px rgb(var(--sl-color-neutral-200));
   border-top-right-radius: 3px;
   cursor: ew-resize;
@@ -97,7 +97,7 @@
   border: solid 1px rgb(var(--sl-color-neutral-200));
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
-  background: rgb(var(--sl-color-1000));
+  background: rgb(var(--sl-color-neutral-1000));
   font: inherit;
   font-size: 0.875rem;
   color: rgb(var(--sl-color-neutral-600));

diff --git 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-1000));
+  background-color: rgb(var(--sl-color-neutral-1000));
   color: rgb(var(--sl-color-neutral-800));
   line-height: var(--sl-line-height-normal);
 }
@@ -28,7 +28,7 @@ strong {
 
 /* Sidebar */
 .sidebar {
-  background: rgb(var(--sl-color-1000));
+  background: rgb(var(--sl-color-neutral-1000));
   border-right: solid 1px rgb(var(--sl-color-neutral-200));
 }
 
@@ -109,7 +109,7 @@ strong {
 }
 
 .sidebar .clear-button svg path {
-  stroke: rgb(var(--sl-color-1000));
+  stroke: rgb(var(--sl-color-neutral-1000));
 }
 
 .sidebar .clear-button:focus {
@@ -146,7 +146,7 @@ strong {
   width: 2rem;
   height: 2rem;
   border-radius: var(--sl-border-radius-medium);
-  background-color: rgb(var(--sl-color-1000));
+  background-color: rgb(var(--sl-color-neutral-1000));
   padding: 0.5rem;
 }
 
@@ -273,7 +273,7 @@ strong {
 }
 
 .anchor span {
-  color: rgb(var(--sl-color-0));
+  color: rgb(var(--sl-color-neutral-0));
 }
 
 .markdown-section blockquote {
@@ -518,7 +518,7 @@ strong {
 .markdown-section p.warn:before {
   content: '!';
   border-radius: 100%;
-  color: rgb(var(--sl-color-1000));
+  color: rgb(var(--sl-color-neutral-1000));
   font-size: 14px;
   font-weight: bold;
   left: -12px;
@@ -565,7 +565,7 @@ strong {
   margin: 0.75rem 0 0.25rem 0;
 }
 
-.component-header__tag code {
+.markdown-section .component-header__tag code {
   background: none;
   color: rgb(var(--sl-color-neutral-500));
   font-size: var(--sl-font-size-large);
@@ -594,7 +594,7 @@ strong {
 html .repo-button {
   display: inline-flex;
   align-items: center;
-  background-color: rgb(var(--sl-color-1000));
+  background-color: rgb(var(--sl-color-neutral-1000));
   border: solid 1px rgb(var(--sl-color-neutral-200));
   border-radius: var(--sl-border-radius-medium);
   box-shadow: var(--sl-shadow-x-small);
@@ -695,7 +695,7 @@ body[data-page^='tokens/'] .table-wrapper td:first-child code {
 
 /* Elevation dmeo */
 .elevation-demo {
-  background: rgb(var(--sl-color-1000));
+  background: transparent;
   border-radius: 3px;
   width: 4rem;
   height: 4rem;
@@ -731,7 +731,7 @@ body[data-page^='tokens/'] .table-wrapper td:first-child code {
 }
 
 .color-palette__swatch--border {
-  box-shadow: inset 0 0 0 1px rgb(var(--sl-color-0) / 10%);
+  box-shadow: inset 0 0 0 1px rgb(var(--sl-color-neutral-0) / 10%);
 }
 
 @media screen and (max-width: 1200px) {

diff --git 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-1000));
+    border: solid 2px rgb(var(--sl-color-neutral-1000));
   }
 </style>
 ```

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
@@ -29,7 +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-black|white` color tokens (use `--sl-color-1000|full` instead)
+- 🚨 BREAKING: removed `--sl-color-black|white` color tokens (use `--sl-color-neutral-1000|full` instead)
 - 🚨 BREAKING: removed `--sl-color-primary|success|warning|info|danger-text` design tokens (use theme or primitive colors instead)
 - 🚨 BREAKING: removed `info` variant from `sl-alert`, `sl-badge`, `sl-button`, and `sl-tag` (use `neutral` instead)
 - 🚨 BREAKING: removed `--sl-color-info-*` design token (use `--sl-color-neutral-*` instead)

diff --git a/docs/tokens/color.md b/docs/tokens/color.md
@@ -129,8 +129,8 @@ Theme tokens give you a semantic way to reference colors in your app. The primar
     Black & White<br>
     <code>--sl-color-neutral-<em>{n}</em></code>
   </div>
-  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-0));"></div>0</div>
-  <div class="color-palette__example"><div class="color-palette__swatch color-palette__swatch--border" style="background-color: rgb(var(--sl-color-1000));"></div>1000</div>
+  <div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-neutral-0));"></div>0</div>
+  <div class="color-palette__example"><div class="color-palette__swatch color-palette__swatch--border" style="background-color: rgb(var(--sl-color-neutral-1000));"></div>1000</div>
 </div>
 
 ## Primitives

diff --git 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-1000));
+    background-color: rgb(var(--sl-color-neutral-1000));
     border: solid 1px rgb(var(--sl-color-neutral-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
@@ -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-1000));
+    color: rgb(var(--sl-color-neutral-1000));
     overflow: hidden;
     user-select: none;
     vertical-align: middle;

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-1000));
+    color: rgb(var(--sl-color-neutral-1000));
   }
 
   .badge--success {
     background-color: rgb(var(--sl-color-success-500));
-    color: rgb(var(--sl-color-1000));
+    color: rgb(var(--sl-color-neutral-1000));
   }
 
   .badge--neutral {
     background-color: rgb(var(--sl-color-neutral-500));
-    color: rgb(var(--sl-color-1000));
+    color: rgb(var(--sl-color-neutral-1000));
   }
 
   .badge--warning {
     background-color: rgb(var(--sl-color-warning-500));
-    color: rgb(var(--sl-color-1000));
+    color: rgb(var(--sl-color-neutral-1000));
   }
 
   .badge--danger {
     background-color: rgb(var(--sl-color-danger-500));
-    color: rgb(var(--sl-color-1000));
+    color: rgb(var(--sl-color-neutral-1000));
   }
 
   /* Pill modifier */

diff --git 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-1000));
+    background-color: rgb(var(--sl-color-neutral-1000));
     border-color: rgb(var(--sl-color-neutral-300));
     color: rgb(var(--sl-color-neutral-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-1000));
+    color: rgb(var(--sl-color-neutral-1000));
   }
 
   .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-1000));
+    color: rgb(var(--sl-color-neutral-1000));
   }
 
   .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-1000));
+    color: rgb(var(--sl-color-neutral-1000));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-primary) / 25%);
   }
 
   .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-1000));
+    color: rgb(var(--sl-color-neutral-1000));
   }
 
   /* 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-1000));
+    color: rgb(var(--sl-color-neutral-1000));
   }
 
   .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-1000));
+    color: rgb(var(--sl-color-neutral-1000));
   }
 
   .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-1000));
+    color: rgb(var(--sl-color-neutral-1000));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-success) / 25%);
   }
 
   .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-1000));
+    color: rgb(var(--sl-color-neutral-1000));
   }
 
   /* Neutral */
   .button.button--neutral {
     background-color: rgb(var(--sl-color-neutral-500));
     border-color: rgb(var(--sl-color-neutral-500));
-    color: rgb(var(--sl-color-1000));
+    color: rgb(var(--sl-color-neutral-1000));
   }
 
   .button.button--neutral:hover:not(.button--disabled) {
     background-color: rgb(var(--sl-color-neutral-400));
     border-color: rgb(var(--sl-color-neutral-400));
-    color: rgb(var(--sl-color-1000));
+    color: rgb(var(--sl-color-neutral-1000));
   }
 
   .button.button--neutral:focus:not(.button--disabled) {
     background-color: rgb(var(--sl-color-neutral-400));
     border-color: rgb(var(--sl-color-neutral-400));
-    color: rgb(var(--sl-color-1000));
+    color: rgb(var(--sl-color-neutral-1000));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-neutral) / 25%);
   }
 
   .button.button--neutral:active:not(.button--disabled) {
     background-color: rgb(var(--sl-color-neutral-500));
     border-color: rgb(var(--sl-color-neutral-500));
-    color: rgb(var(--sl-color-1000));
+    color: rgb(var(--sl-color-neutral-1000));
   }
 
   /* 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-1000));
+    color: rgb(var(--sl-color-neutral-1000));
   }
   .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-1000));
+    color: rgb(var(--sl-color-neutral-1000));
   }
 
   .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-1000));
+    color: rgb(var(--sl-color-neutral-1000));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-warning) / 25%);
   }
 
   .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-1000));
+    color: rgb(var(--sl-color-neutral-1000));
   }
 
   /* 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-1000));
+    color: rgb(var(--sl-color-neutral-1000));
   }
 
   .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-1000));
+    color: rgb(var(--sl-color-neutral-1000));
   }
 
   .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-1000));
+    color: rgb(var(--sl-color-neutral-1000));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-focus-ring-color-danger) / 25%);
   }
 
   .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-1000));
+    color: rgb(var(--sl-color-neutral-1000));
   }
 
   /*
@@ -482,7 +482,7 @@ export default css`
     top: 0;
     left: 0;
     bottom: 0;
-    border-left: solid 1px rgb(var(--sl-color-1000) / 20%);
+    border-left: solid 1px rgb(var(--sl-color-neutral-1000) / 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
@@ -16,7 +16,7 @@ export default css`
   .card {
     display: flex;
     flex-direction: column;
-    background-color: rgb(var(--sl-color-1000));
+    background-color: rgb(var(--sl-color-neutral-1000));
     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
@@ -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-1000));
+    color: rgb(var(--sl-color-neutral-1000));
     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/dialog/dialog.styles.ts b/src/components/dialog/dialog.styles.ts
@@ -101,6 +101,6 @@ export default css`
     right: 0;
     bottom: 0;
     left: 0;
-    background-color: rgb(var(--sl-overlay-background-color) / 40%);
+    background-color: rgb(var(--sl-overlay-background-color) / var(--sl-overlay-opacity));
   }
 `;
diff --git a/src/components/drawer/drawer.styles.ts b/src/components/drawer/drawer.styles.ts
@@ -132,7 +132,7 @@ export default css`
     right: 0;
     bottom: 0;
     left: 0;
-    background-color: rgb(var(--sl-overlay-background-color) / 40%);
+    background-color: rgb(var(--sl-overlay-background-color) / var(--sl-overlay-opacity));
     pointer-events: all;
   }