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);