feat: clean up color tokens and add table color

ccontrols · Oct 5, 2020 · 8e72fb6 · 8e72fb6
1 parent c2bd45b
commit 8e72fb6
Show file tree

Hide file tree

Showing 61 changed files with 4,978 additions and 2,532 deletions.
diff --git a/examples/stories/src/tutorial/design/tokens/colors.mdx b/examples/stories/src/tutorial/design/tokens/colors.mdx
@@ -43,6 +43,8 @@ import {
   SeekColorPalette,
   SkylineColorPalette,
   SolidColorPalette,
+  ColorAALegend,
+  TableColorPalette,
   UniformColorPalette,
   VanillaColorPalette,
   XColorPalette,
@@ -1479,7 +1481,7 @@ import { PhotonColorPalette } from '@component-controls/design-tokens';
 
 ## PrimerColor
 
-The [PrimerColor](/api/design-tokens-colors-primercolor--overview) component displays the color as a row, with sass variable name. Separate visualization (header) for primary color.
+The [PrimerColor](/api/design-tokens-colors-primercolor--overview) component displays the color as a row, with sass variable name. Separate visualization (header) for the primary color.
 
 Design inspired by GitHub's [Primer](https://styleguide.github.com/primer/support/color-system/).
 
@@ -1737,6 +1739,41 @@ import { SolidColorPalette } from '@component-controls/design-tokens';
   }}
 />
 
+## TableColor
+
+The [TableColor](/api/design-tokens-colors-tablecolor--overview) component displays the color as a table row, with support for dark mode colors and AA accessibility tests. Design created to accomodate [theme-ui](https://theme-ui.com/home)-type color palettes.
+
+```
+import { TableColorPalette } from '@component-controls/design-tokens';
+
+<TableColorPalette
+  palette={{
+    text: { value: '#454f5b', dark: '#d3d4db' },
+    background: { value: '#ffffff', dark: '#38404a' },
+    primary: { value: '#5c6ac4', dark: '#efefef' },
+    secondary: { value: '#006fbb', dark: '#b4e1fa' },
+    muted: { value: '#e6e6e6', dark: '#e6e6e6' },
+    accent: '#f49342',
+    darken: '#00044c',
+  }}
+/>
+
+```
+<ColorAALegend />
+
+<TableColorPalette
+  palette={{
+    text: { value: '#454f5b', dark: '#d3d4db' },
+    background: { value: '#ffffff', dark: '#38404a' },
+    primary: { value: '#5c6ac4', dark: '#efefef' },
+    secondary: { value: '#006fbb', dark: '#b4e1fa' },
+    muted: { value: '#e6e6e6', dark: '#e6e6e6' },
+    accent: '#f49342',
+    darken: '#00044c',
+  }}
+/>
+
+
 ## UniformColor
 
 The [UniformColor](/api/design-tokens-colors-uniformcolor--overview) component displays the color as a table row, with color block, color name and rgb value.

diff --git a/plugins/axe-plugin/tests/__snapshots__/stories.test.js.snap b/plugins/axe-plugin/tests/__snapshots__/stories.test.js.snap
@@ -31,7 +31,7 @@ exports[`Plugins/AllyBlock Overview 1`] = `
               class="css-x60p33"
             >
               <div
-                class="css-1c62bzt"
+                class="css-mb10wn"
               >
                 <button
                   aria-label="display the accessibility overview dashboard"

diff --git a/plugins/viewport-plugin/tests/__snapshots__/stories.test.js.snap b/plugins/viewport-plugin/tests/__snapshots__/stories.test.js.snap
@@ -31,7 +31,7 @@ exports[`Plugins/ViewportBlock Overview 1`] = `
               class="css-x60p33"
             >
               <div
-                class="css-1c62bzt"
+                class="css-mb10wn"
               >
                 <div
                   class="css-12hibeq"
@@ -391,7 +391,7 @@ exports[`Plugins/ViewportBlock Sizes 1`] = `
               class="css-x60p33"
             >
               <div
-                class="css-1c62bzt"
+                class="css-mb10wn"
               >
                 <div
                   class="css-12hibeq"

diff --git a/ui/app/tests/__snapshots__/stories.test.js.snap b/ui/app/tests/__snapshots__/stories.test.js.snap
@@ -4,7 +4,7 @@ exports[`Application/App Overview 1`] = `
 <DocumentFragment>
   <section
     aria-label="skip tab order to linked items"
-    class="css-yx7bo8"
+    class="css-u7r4qj"
   >
     <div
       class="css-vurnku"
@@ -41,7 +41,7 @@ exports[`Application/App Overview 1`] = `
     class="css-18pgspc"
   >
     <header
-      class="css-yf604i"
+      class="css-1hp4xbx"
     >
       <div
         class="css-2qw0qa"
@@ -257,7 +257,7 @@ exports[`Application/AppError Overview 1`] = `
 exports[`Application/CategoryList Overview 1`] = `
 <DocumentFragment>
   <div
-    class="css-6ztr4u"
+    class="css-isly2z"
     id="content"
   >
     <div
@@ -337,7 +337,7 @@ exports[`Application/CategoryList Overview 1`] = `
 exports[`Application/CategoryPage Overview 1`] = `
 <DocumentFragment>
   <div
-    class="css-6ztr4u"
+    class="css-isly2z"
     id="content"
   >
     <div
@@ -616,7 +616,7 @@ exports[`Application/Container Overview 1`] = `
 exports[`Application/DocPage Overview 1`] = `
 <DocumentFragment>
   <div
-    class="css-32qhn2"
+    class="css-11ay4b0"
     id="content"
   >
     <div
@@ -669,7 +669,7 @@ exports[`Application/DocPage Overview 1`] = `
 exports[`Application/DocumentHomePage Overview 1`] = `
 <DocumentFragment>
   <div
-    class="css-6ztr4u"
+    class="css-isly2z"
     id="content"
   >
     <div
@@ -989,7 +989,7 @@ exports[`Application/Footer Overview 1`] = `
 exports[`Application/Header Custom Left 1`] = `
 <DocumentFragment>
   <header
-    class="css-yf604i"
+    class="css-1hp4xbx"
   >
     <div
       class="css-2qw0qa"
@@ -1160,7 +1160,7 @@ exports[`Application/Header Custom Left 1`] = `
 exports[`Application/Header Custom Right 1`] = `
 <DocumentFragment>
   <header
-    class="css-yf604i"
+    class="css-1hp4xbx"
   >
     <div
       class="css-2qw0qa"
@@ -1335,7 +1335,7 @@ exports[`Application/Header Custom Right 1`] = `
 exports[`Application/Header Customized 1`] = `
 <DocumentFragment>
   <header
-    class="css-yf604i"
+    class="css-1hp4xbx"
   >
     <div
       class="css-2qw0qa"
@@ -1576,7 +1576,7 @@ exports[`Application/Header Customized 1`] = `
 exports[`Application/Header Overview 1`] = `
 <DocumentFragment>
   <header
-    class="css-yf604i"
+    class="css-1hp4xbx"
   >
     <div
       class="css-2qw0qa"
@@ -1738,7 +1738,7 @@ exports[`Application/Header Overview 1`] = `
 exports[`Application/Sidebar Overview 1`] = `
 <DocumentFragment>
   <div
-    class="css-atm8gx-Sidebar"
+    class="css-1mz8zpz-Sidebar"
     id="sidebar"
   >
     <div