flexibility: remove base from color scale & add parseToRgb (#1696)

* feat(core): remove base from color scale and add parseToRgb util BREAKING CHANGE: update color.base usages to color[6] * feat(core): remove colorsBackgroundUtility.base update parseToRgb() BREAKING CHANGE: switch colorsBackgroundUtility.base usage to * feat(core): adds colorsBackgroundUtilityCsv * test(core): update snapshot
pluralsight · Apr 2, 2021 · b5abe62 · b5abe62
1 parent 3845537
commit b5abe62
Show file tree

Hide file tree

Showing 38 changed files with 161 additions and 162 deletions.
diff --git a/docs/src/content/components/nav.mdx b/docs/src/content/components/nav.mdx
@@ -132,9 +132,9 @@ function Filler(props) {
           display: flex;
           align-items: center;
           justify-content: center;
-          color: ${colorsPink.base};
+          color: ${colorsPink[6]};
           height: 100%;
-          border: 2px dashed ${colorsPink.base};
+          border: 2px dashed ${colorsPink[6]};
           padding: 0 ${layout.spacingMedium};
         }
       `}</style>

diff --git a/docs/src/content/core/color.mdx b/docs/src/content/core/color.mdx
@@ -17,7 +17,7 @@ Colors are available from the core package. Colors are usable in CSS:
 @import '@pluralsight/ps-design-system-core';
 
 .mySelector {
-  color: var(--psColorsBlueBase);
+  color: var(--psColorsBlue6);
 }
 ```
 
@@ -30,7 +30,7 @@ import {
 } from '@pluralsight/ps-design-system-core'
 
 myCssInJsSolution({
-  color: colorsBlue.base
+  color: colorsBlue[6]
 })
 ```
 
@@ -50,7 +50,7 @@ Light
 
 Use utility color with transparency to lighten or darken backgrounds beyond the three colors provided.
 
-Utility base color
+Utility base coma seperated values
 
 <Colors id="utilityBase" />
 
@@ -106,7 +106,7 @@ On light backgrounds
 
 ## All colors
 
-These are additional colors beyond the core set. They can be used for things like illustrations, complex data visualizations, etc. Colors numbered 6 are the same as base colors. (e.g., `psColorsBlue6` has the same value as `psColorsBlueBase`)
+These are additional colors beyond the core set. They can be used for things like illustrations, complex data visualizations, etc.
 
 <Colors id="blue" />
 

diff --git a/docs/src/content/core/color/index.tsx b/docs/src/content/core/color/index.tsx
@@ -79,10 +79,10 @@ const colors: Record<string, SubCategory> = {
     colors: [
       {
         name: 'Utility',
-        var: 'psColorsBackgroundUtilityBase',
-        js: 'colorsBackgroundUtility.base',
-        bg: core.colorsBackgroundUtility.base,
-        hex: core.colorsBackgroundUtility.base + ' / rgba(138, 153, 168, 1)'
+        var: 'psColorsBackgroundUtilityCsv',
+        js: 'colorsBackgroundUtilityCsv',
+        bg: `rgb(${core.colorsBackgroundUtilityCsv})`,
+        hex: 'N/A (138,153,168)'
       }
     ]
   },
@@ -527,7 +527,7 @@ function formatAllColorSubCategory({
       .map(key => parseInt(key, 10))
       .filter(key => Number.isInteger(key))
       .map(key => ({
-        name: name + ' ' + key + (key === 6 ? ' (Base)' : ''),
+        name: name + ' ' + key,
         var: 'psColors' + name + key,
         hex: color[key],
         js: `colors${name}[${key}]`,

diff --git a/packages/appframe/src/react/__specs__/__snapshots__/storyshots.spec.tsx.snap b/packages/appframe/src/react/__specs__/__snapshots__/storyshots.spec.tsx.snap
@@ -96,7 +96,7 @@ exports[`Storyshots Components/AppFrame Basic 1`] = `
               >
                 <div
                   aria-label="Jake"
-                  data-css-1h1qs66=""
+                  data-css-1xbr5gr=""
                   style={
                     Object {
                       "backgroundColor": "#008F46",
@@ -302,7 +302,7 @@ exports[`Storyshots Components/AppFrame Example Short Content 1`] = `
               >
                 <div
                   aria-label="Jake"
-                  data-css-1h1qs66=""
+                  data-css-1xbr5gr=""
                   style={
                     Object {
                       "backgroundColor": "#008F46",
@@ -674,7 +674,7 @@ exports[`Storyshots Components/AppFrame Side Nav Controlled 1`] = `
               >
                 <div
                   aria-label="Jake"
-                  data-css-1h1qs66=""
+                  data-css-1xbr5gr=""
                   style={
                     Object {
                       "backgroundColor": "#008F46",
@@ -1058,7 +1058,7 @@ exports[`Storyshots Components/AppFrame Side Nav Scrolling 1`] = `
               >
                 <div
                   aria-label="Jake"
-                  data-css-1h1qs66=""
+                  data-css-1xbr5gr=""
                   style={
                     Object {
                       "backgroundColor": "#008F46",
@@ -1343,7 +1343,7 @@ exports[`Storyshots Components/AppFrame Side Nav Uncontrolled 1`] = `
               >
                 <div
                   aria-label="Jake"
-                  data-css-1h1qs66=""
+                  data-css-1xbr5gr=""
                   style={
                     Object {
                       "backgroundColor": "#008F46",
@@ -1770,7 +1770,7 @@ exports[`Storyshots Components/AppFrame/Examples Skills 1`] = `
               >
                 <div
                   aria-label="Jake"
-                  data-css-1h1qs66=""
+                  data-css-1xbr5gr=""
                   style={
                     Object {
                       "backgroundColor": "#008F46",

diff --git a/packages/avatar/src/css/index.ts b/packages/avatar/src/css/index.ts
@@ -1,7 +1,7 @@
 import {
   type,
   colorsTextIcon,
-  colorsBackgroundUtility
+  colorsBackgroundUtilityCsv
 } from '@pluralsight/ps-design-system-core'
 
 import * as vars from '../vars'
@@ -62,6 +62,6 @@ export default {
     flexDirection: 'column',
     justifyContent: 'center',
     color: colorsTextIcon.highOnDark,
-    backgroundColor: colorsBackgroundUtility.base
+    backgroundColor: `rgb(${colorsBackgroundUtilityCsv})`
   }
 }
diff --git a/packages/avatar/src/react/__specs__/__snapshots__/storyshots.spec.ts.snap b/packages/avatar/src/react/__specs__/__snapshots__/storyshots.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`Storyshots Components/Avatar Basic 1`] = `
 >
   <div
     aria-label="Jake Trent"
-    data-css-1h1qs66=""
+    data-css-1xbr5gr=""
     style={
       Object {
         "backgroundColor": "#7048C6",
@@ -25,7 +25,7 @@ exports[`Storyshots Components/Avatar Class Name Override 1`] = `
 >
   <div
     aria-label="Jake Trent"
-    data-css-1h1qs66=""
+    data-css-1xbr5gr=""
     style={
       Object {
         "backgroundColor": "#7048C6",
@@ -50,7 +50,7 @@ exports[`Storyshots Components/Avatar Gravatar Invalid 1`] = `
   />
   <div
     aria-label="Jake Trent"
-    data-css-1h1qs66=""
+    data-css-1xbr5gr=""
     style={
       Object {
         "backgroundColor": "#7048C6",
@@ -75,7 +75,7 @@ exports[`Storyshots Components/Avatar Image Error 1`] = `
   />
   <div
     aria-label="Bill Dill"
-    data-css-1h1qs66=""
+    data-css-1xbr5gr=""
     style={
       Object {
         "backgroundColor": "#0074AB",
@@ -100,7 +100,7 @@ exports[`Storyshots Components/Avatar Image Flat And Long 1`] = `
   />
   <div
     aria-label="Jake Trent"
-    data-css-1h1qs66=""
+    data-css-1xbr5gr=""
     style={
       Object {
         "backgroundColor": "#7048C6",
@@ -125,7 +125,7 @@ exports[`Storyshots Components/Avatar Image Square 1`] = `
   />
   <div
     aria-label="Jake Trent"
-    data-css-1h1qs66=""
+    data-css-1xbr5gr=""
     style={
       Object {
         "backgroundColor": "#7048C6",
@@ -150,7 +150,7 @@ exports[`Storyshots Components/Avatar Image Tall And Thin 1`] = `
   />
   <div
     aria-label="Jake Trent"
-    data-css-1h1qs66=""
+    data-css-1xbr5gr=""
     style={
       Object {
         "backgroundColor": "#7048C6",
@@ -175,7 +175,7 @@ exports[`Storyshots Components/Avatar Image Valid 1`] = `
   />
   <div
     aria-label="Jake Trent"
-    data-css-1h1qs66=""
+    data-css-1xbr5gr=""
     style={
       Object {
         "backgroundColor": "#7048C6",
@@ -193,7 +193,7 @@ exports[`Storyshots Components/Avatar Name Empty 1`] = `
 >
   <div
     aria-label=""
-    data-css-1h1qs66=""
+    data-css-1xbr5gr=""
     style={
       Object {
         "backgroundColor": "#C00F00",
@@ -211,7 +211,7 @@ exports[`Storyshots Components/Avatar Name Single Char 1`] = `
 >
   <div
     aria-label="x"
-    data-css-1h1qs66=""
+    data-css-1xbr5gr=""
     style={
       Object {
         "backgroundColor": "#7048C6",
@@ -229,7 +229,7 @@ exports[`Storyshots Components/Avatar Name Special Char 1`] = `
 >
   <div
     aria-label="% Special Char"
-    data-css-1h1qs66=""
+    data-css-1xbr5gr=""
     style={
       Object {
         "backgroundColor": "#7048C6",
@@ -246,7 +246,7 @@ exports[`Storyshots Components/Avatar Name Undefined 1`] = `
   data-css-1a2nnhr=""
 >
   <div
-    data-css-1h1qs66=""
+    data-css-1xbr5gr=""
     style={
       Object {
         "backgroundColor": "#D1487B",
@@ -264,7 +264,7 @@ Array [
     data-css-79vgce=""
   >
     <div
-      data-css-1h1qs66=""
+      data-css-1xbr5gr=""
       style={
         Object {
           "backgroundColor": "#D1487B",
@@ -278,7 +278,7 @@ Array [
     data-css-xthig=""
   >
     <div
-      data-css-1h1qs66=""
+      data-css-1xbr5gr=""
       style={
         Object {
           "backgroundColor": "#D1487B",
@@ -292,7 +292,7 @@ Array [
     data-css-1a2nnhr=""
   >
     <div
-      data-css-1h1qs66=""
+      data-css-1xbr5gr=""
       style={
         Object {
           "backgroundColor": "#D1487B",
@@ -306,7 +306,7 @@ Array [
     data-css-1bcvkli=""
   >
     <div
-      data-css-1h1qs66=""
+      data-css-1xbr5gr=""
       style={
         Object {
           "backgroundColor": "#D1487B",
@@ -320,7 +320,7 @@ Array [
     data-css-1vdca9w=""
   >
     <div
-      data-css-1h1qs66=""
+      data-css-1xbr5gr=""
       style={
         Object {
           "backgroundColor": "#D1487B",
@@ -344,7 +344,7 @@ exports[`Storyshots Components/Avatar Style Override 1`] = `
 >
   <div
     aria-label="Jake Trent"
-    data-css-1h1qs66=""
+    data-css-1xbr5gr=""
     style={
       Object {
         "backgroundColor": "#7048C6",
@@ -363,7 +363,7 @@ exports[`Storyshots Components/Avatar Various Names 1`] = `
   >
     <div
       aria-label="Anakin Skywalker"
-      data-css-1h1qs66=""
+      data-css-1xbr5gr=""
       style={
         Object {
           "backgroundColor": "#C00F00",
@@ -378,7 +378,7 @@ exports[`Storyshots Components/Avatar Various Names 1`] = `
   >
     <div
       aria-label="Budapest Skywalker"
-      data-css-1h1qs66=""
+      data-css-1xbr5gr=""
       style={
         Object {
           "backgroundColor": "#D1487B",
@@ -393,7 +393,7 @@ exports[`Storyshots Components/Avatar Various Names 1`] = `
   >
     <div
       aria-label="Carlos Organa"
-      data-css-1h1qs66=""
+      data-css-1xbr5gr=""
       style={
         Object {
           "backgroundColor": "#009380",
@@ -408,7 +408,7 @@ exports[`Storyshots Components/Avatar Various Names 1`] = `
   >
     <div
       aria-label="Dennis Pimenta"
-      data-css-1h1qs66=""
+      data-css-1xbr5gr=""
       style={
         Object {
           "backgroundColor": "#7048C6",
@@ -423,7 +423,7 @@ exports[`Storyshots Components/Avatar Various Names 1`] = `
   >
     <div
       aria-label="Peia Organa"
-      data-css-1h1qs66=""
+      data-css-1xbr5gr=""
       style={
         Object {
           "backgroundColor": "#0074AB",
@@ -438,7 +438,7 @@ exports[`Storyshots Components/Avatar Various Names 1`] = `
   >
     <div
       aria-label="Obi-Wan Kenobi"
-      data-css-1h1qs66=""
+      data-css-1xbr5gr=""
       style={
         Object {
           "backgroundColor": "#D1487B",
@@ -453,7 +453,7 @@ exports[`Storyshots Components/Avatar Various Names 1`] = `
   >
     <div
       aria-label="Uy Marley"
-      data-css-1h1qs66=""
+      data-css-1xbr5gr=""
       style={
         Object {
           "backgroundColor": "#D1487B",
@@ -468,7 +468,7 @@ exports[`Storyshots Components/Avatar Various Names 1`] = `
   >
     <div
       aria-label="Harry Potter"
-      data-css-1h1qs66=""
+      data-css-1xbr5gr=""
       style={
         Object {
           "backgroundColor": "#0074AB",
@@ -483,7 +483,7 @@ exports[`Storyshots Components/Avatar Various Names 1`] = `
   >
     <div
       aria-label="Diz Blau"
-      data-css-1h1qs66=""
+      data-css-1xbr5gr=""
       style={
         Object {
           "backgroundColor": "#6BA300",
@@ -498,7 +498,7 @@ exports[`Storyshots Components/Avatar Various Names 1`] = `
   >
     <div
       aria-label="Single"
-      data-css-1h1qs66=""
+      data-css-1xbr5gr=""
       style={
         Object {
           "backgroundColor": "#7048C6",