v1.5.0 (#317)

* Migrate from `open-color` to `colar` (#314) * refactor: switch `open-color` to `colar` for prop generators * refactor: update `.css` files & package scripts and exports * feat: update usage of `--grape` to `--purple` * docs: update `colors` section to account for `colar` * feat: update prop generators to use `open-color` and `colar` * chore: update .css files & package scripts and exports (for `gray` and `stone`) * docs: tweak `colors` section to account for new `stone` hue * test: update prop and token counts to account for new colors and shades * fix: apply changes based on suggestions from code review Co-authored-by: Adam Argyle <[email protected]> * refactor: switch `open-color` to `colar` for prop generators * refactor: update `.css` files & package scripts and exports * docs: update `colors` section to account for `colar` * feat: update prop generators to use `open-color` and `colar` * chore: update .css files & package scripts and exports (for `gray` and `stone`) * docs: tweak `colors` section to account for new `stone` hue * test: update prop and token counts to account for new colors and shades * fix: apply changes based on suggestions from code review Co-authored-by: Adam Argyle <[email protected]> Co-authored-by: Adam Argyle <[email protected]> * minor version bump * fixes #232 * fixes #296 * fixes #316 * buttons use gray hsl props * update caniuse Co-authored-by: Kelvin DeCosta <[email protected]>
argyleink · Nov 21, 2022 · 2e3d492 · 2e3d492
1 parent 5d053a6
commit 2e3d492
Show file tree

Hide file tree

Showing 66 changed files with 3,858 additions and 305 deletions.
diff --git a/build/props.js b/build/props.js
@@ -2,7 +2,7 @@ import fs from 'fs'
 
 import Animations from '../src/props.animations.js'
 import Sizes from '../src/props.sizes.js'
-import * as OpenColors from '../src/props.colors.js'
+import * as Colors from '../src/props.colors.js'
 import * as ColorsHSL from '../src/props.colors-hsl.js'
 import Fonts from '../src/props.fonts.js'
 import Borders from '../src/props.borders.js'
@@ -32,44 +32,26 @@ const mainbundle = {
   [`${pfx}props.zindex.css`]: Zindex,
   [`${pfx}props.shadows.css`]: Shadows,
   [`${pfx}props.aspects.css`]: Aspects,
-  [`${pfx}props.colors.css`]: OpenColors.default,
+  [`${pfx}props.colors.css`]: Colors.default,
   // [`${pfx}props.svg.css`]: SVG,
   [`${pfx}props.gradients.css`]: Gradients,
   [`${pfx}props.animations.css`]: Animations,
   [`${pfx}props.borders.css`]: Borders,
 }
 
-const individual_colors = {
-  [`${pfx}props.gray.css`]: OpenColors.Gray,
-  [`${pfx}props.red.css`]: OpenColors.Red,
-  [`${pfx}props.pink.css`]: OpenColors.Pink,
-  [`${pfx}props.grape.css`]: OpenColors.Grape,
-  [`${pfx}props.violet.css`]: OpenColors.Violet,
-  [`${pfx}props.indigo.css`]: OpenColors.Indigo,
-  [`${pfx}props.blue.css`]: OpenColors.Blue,
-  [`${pfx}props.cyan.css`]: OpenColors.Cyan,
-  [`${pfx}props.teal.css`]: OpenColors.Teal,
-  [`${pfx}props.green.css`]: OpenColors.Green,
-  [`${pfx}props.lime.css`]: OpenColors.Lime,
-  [`${pfx}props.yellow.css`]: OpenColors.Yellow,
-  [`${pfx}props.orange.css`]: OpenColors.Orange,
-}
+const individual_colors = Object.keys(Colors)
+  .filter(exportName => exportName !== "default")
+  .reduce((root, hueName) => ({
+    ...root,
+    [`${pfx}props.${hueName.toLowerCase()}.css`]: Colors[hueName]
+  }), {})
 
-const individual_colors_hsl = {
-  [`${pfx}props.gray-hsl.css`]: ColorsHSL.Gray,
-  [`${pfx}props.red-hsl.css`]: ColorsHSL.Red,
-  [`${pfx}props.pink-hsl.css`]: ColorsHSL.Pink,
-  [`${pfx}props.grape-hsl.css`]: ColorsHSL.Grape,
-  [`${pfx}props.violet-hsl.css`]: ColorsHSL.Violet,
-  [`${pfx}props.indigo-hsl.css`]: ColorsHSL.Indigo,
-  [`${pfx}props.blue-hsl.css`]: ColorsHSL.Blue,
-  [`${pfx}props.cyan-hsl.css`]: ColorsHSL.Cyan,
-  [`${pfx}props.teal-hsl.css`]: ColorsHSL.Teal,
-  [`${pfx}props.green-hsl.css`]: ColorsHSL.Green,
-  [`${pfx}props.lime-hsl.css`]: ColorsHSL.Lime,
-  [`${pfx}props.yellow-hsl.css`]: ColorsHSL.Yellow,
-  [`${pfx}props.orange-hsl.css`]: ColorsHSL.Orange,
-}
+const individual_colors_hsl = Object.keys(ColorsHSL)
+  .filter(exportName => exportName !== "default")
+  .reduce((root, hueName) => ({
+    ...root,
+    [`${pfx}props.${hueName.toLowerCase()}-hsl.css`]: ColorsHSL[hueName]
+  }), {})
 
 // const individuals = {
 //   'props.masks.edges.css': MaskEdges,

diff --git a/build/to-figmatokens.js b/build/to-figmatokens.js
@@ -1,3 +1,5 @@
+import * as Colors from '../src/props.colors.js'
+
 export const toFigmaTokens = props => {
   const figmatokens = {}
 
@@ -8,7 +10,9 @@ export const toFigmaTokens = props => {
     let isBorder = key.includes('border-size')
     let isRadius = key.includes('radius')
     let isShadow = key.includes('shadow')
-    let colors = ['gray','red','pink','grape','violet','indigo','blue','cyan','teal','green','lime','yellow','orange']
+    let colors = Object.keys(Colors)
+      .filter(exportName => exportName !== "default")
+      .map(hueName => hueName.toLowerCase())
     let isColor = colors.some(color => key.includes(color))
 
     if      (isLength) meta.type = 'sizing'

diff --git a/build/to-tokens.js b/build/to-tokens.js
@@ -1,10 +1,14 @@
+import * as Colors from '../src/props.colors.js'
+
 export const toTokens = props => 
   props.map(([key, token]) => {
     let meta = {}
 
     let isLength = key.includes('size')
     let isEasing = key.includes('ease')
-    let colors = ['gray','red','pink','grape','violet','indigo','blue','cyan','teal','green','lime','yellow','orange']
+    let colors = Object.keys(Colors)
+      .filter(exportName => exportName !== "default")
+      .map(hueName => hueName.toLowerCase())
     let isColor = colors.some(color => key.includes(color))
 
     if      (isLength) meta.type = 'dimension'

diff --git a/docsite/index.css b/docsite/index.css
@@ -10,14 +10,14 @@
 
 :root {
   --max-inline-body: calc(100vw - (var(--size-8) * 2));
-  --brand-bg-gradient: linear-gradient(to bottom, var(--grape-3), var(--violet-3), var(--indigo-3), var(--cyan-3));
+  --brand-bg-gradient: linear-gradient(to bottom, var(--purple-3), var(--violet-3), var(--indigo-3), var(--cyan-3));
 
   @media (--md-n-below) {
     --max-inline-body: calc(100vw - (var(--size-3) * 2));
   }
 
   @nest [data-theme="light"] & {
-    --brand-bg-gradient: linear-gradient(to bottom, var(--grape-6), var(--violet-6), var(--indigo-6), var(--cyan-6));
+    --brand-bg-gradient: linear-gradient(to bottom, var(--purple-6), var(--violet-6), var(--indigo-6), var(--cyan-6));
   }
 }
 
@@ -64,7 +64,7 @@ section {
   &:nth-of-type(1n) { border-color: var(--orange-5) }
   &:nth-of-type(2n) { border-color: var(--red-5) }
   &:nth-of-type(3n) { border-color: var(--pink-5) }
-  &:nth-of-type(4n) { border-color: var(--grape-5) }
+  &:nth-of-type(4n) { border-color: var(--purple-5) }
   &:nth-of-type(5n) { border-color: var(--indigo-5) }
   &:nth-of-type(6n) { border-color: var(--blue-5) }
   &:nth-of-type(7n) { border-color: var(--green-5) }
@@ -193,8 +193,8 @@ section.hero {
   align-self: stretch;
 
   & .icon-quote {
-    --_accent-1: var(--grape-5);
-    --_accent-2: var(--grape-4);
+    --_accent-1: var(--purple-5);
+    --_accent-2: var(--purple-4);
 
     @nest [data-theme="light"] & {
       --_accent-1: var(--orange-7);
@@ -516,7 +516,7 @@ pre[class*="language-"] {
   --size: var(--size-5);
   border-radius: var(--radius-round);
   box-shadow: var(--inner-shadow-0);
-  inline-size: 7%;
+  inline-size: 6.7%;
   block-size: var(--size);
   display: grid;
   place-content: center;
@@ -820,7 +820,7 @@ pre[class*="language-"] {
     &:nth-child(1) svg {
       stroke: var(--cyan-3);
       @nest [data-theme="light"] & {
-        stroke: var(--grape-8);
+        stroke: var(--purple-8);
       }
     }
     &:nth-child(2) svg {
@@ -905,8 +905,8 @@ pre[class*="language-"] {
   }
 
   & > div:nth-of-type(1) svg { 
-    color: var(--grape-5);
-    border-color: var(--grape-3);
+    color: var(--purple-5);
+    border-color: var(--purple-3);
   }
   & > div:nth-of-type(2) svg { 
     color: var(--orange-5);