Update remaining static color variables to spectrum instead

5 years ago · 698e31acbc
8 changed files with 9 additions and 9 deletions
--- a/packages/client/src/utils/styleable.js
+++ b/packages/client/src/utils/styleable.js
@ -29,7 +29,7 @@ export const styleable = (node, styles = {}) => {
    // overridden by any user specified styles
    let baseStyles = {}
    if (newStyles.empty) {
-      baseStyles.border = "2px dashed var(--grey-5)"
+      baseStyles.border = "2px dashed var(--spectrum-global-color-gray-600)"
      baseStyles.padding = "var(--spacing-l)"
      baseStyles.overflow = "hidden"
    }
--- a/packages/standard-components/src/Heading.svelte
+++ b/packages/standard-components/src/Heading.svelte
@ -56,7 +56,7 @@
  }
  .placeholder {
    font-style: italic;
-    color: var(--grey-6);
+    color: var(--spectrum-global-color-gray-600);
  }
  .bold {
    font-weight: 700;
--- a/packages/standard-components/src/Link.svelte
+++ b/packages/standard-components/src/Link.svelte
@ -83,7 +83,7 @@
  }
  .placeholder {
    font-style: italic;
-    color: var(--grey-6);
+    color: var(--spectrum-global-color-gray-600);
  }
  .bold {
    font-weight: 600;
--- a/packages/standard-components/src/Placeholder.svelte
+++ b/packages/standard-components/src/Placeholder.svelte
@ -15,7 +15,7 @@
 <style>
  div {
-    color: var(--grey-6);
+    color: var(--spectrum-global-color-gray-600);
    font-size: var(--font-size-s);
  }
 </style>
--- a/packages/standard-components/src/Repeater.svelte
+++ b/packages/standard-components/src/Repeater.svelte
@ -33,7 +33,7 @@
 <style>
  .noRows {
-    color: var(--grey-6);
+    color: var(--spectrum-global-color-gray-600);
    font-size: var(--font-size-s);
    padding: var(--spacing-l);
    display: grid;
@ -42,6 +42,6 @@
  .noRows i {
    margin-bottom: var(--spacing-m);
    font-size: 1.5rem;
-    color: var(--grey-5);
+    color: var(--spectrum-global-color-gray-600);
  }
 </style>
--- a/packages/standard-components/src/ScreenSlot.svelte
+++ b/packages/standard-components/src/ScreenSlot.svelte
@ -30,6 +30,6 @@
  }
  span {
    font-size: var(--font-size-s);
-    color: var(--grey-6);
+    color: var(--spectrum-global-color-gray-600);
  }
 </style>
--- a/packages/standard-components/src/Section.svelte
+++ b/packages/standard-components/src/Section.svelte
@ -67,7 +67,7 @@
    grid-template-columns: 1fr 1fr;
  }
  .placeholder {
-    border: 2px dashed var(--grey-5);
+    border: 2px dashed var(--spectrum-global-color-gray-600);
    padding: var(--spacing-l);
  }
 </style>
--- a/packages/standard-components/src/Text.svelte
+++ b/packages/standard-components/src/Text.svelte
@ -54,7 +54,7 @@
  }
  .placeholder {
    font-style: italic;
-    color: var(--grey-6);
+    color: var(--spectrum-global-color-gray-600);
  }
  .bold {
    font-weight: 600;