Merge remote-tracking branch 'upstream/main' into postcss-preset-env-…

…version-8--courteous-leopard-seal-c9f93f8ae9
argyleink · Sep 25, 2023 · 60eeb07 · 60eeb07
2 parents b0c891b + a641661
commit 60eeb07
Show file tree

Hide file tree

Showing 37 changed files with 553 additions and 105 deletions.
diff --git a/build/props.js b/build/props.js
@@ -4,6 +4,9 @@ import Animations from '../src/props.animations.js'
 import Sizes from '../src/props.sizes.js'
 import * as Colors from '../src/props.colors.js'
 import * as ColorsHSL from '../src/props.colors-hsl.js'
+import ColorsOKLCH from '../src/props.colors-oklch.js'
+import ColorsOKLCHgray from '../src/props.gray-oklch.js'
+import ColorHues from '../src/props.colors-oklch-hues.js'
 import Fonts from '../src/props.fonts.js'
 import Borders from '../src/props.borders.js'
 import Aspects from '../src/props.aspects.js'
@@ -54,10 +57,10 @@ const individual_colors_hsl = Object.keys(ColorsHSL)
     [`${pfx}props.${hueName.toLowerCase()}-hsl.css`]: ColorsHSL[hueName]
   }), {})
 
-// const individuals = {
-//   'props.masks.edges.css': MaskEdges,
-//   'props.masks.corner-cuts.css': MaskCornerCuts,
-// }
+const individuals = {
+  'props.masks.edges.css': MaskEdges,
+  'props.masks.corner-cuts.css': MaskCornerCuts,
+}
 
 // gen design tokens
 const jsonbundle = Object.entries({
@@ -104,7 +107,7 @@ Object.entries({
   ...mainbundle, 
   ...individual_colors, 
   ...individual_colors_hsl,
-  // ...individuals,
+  ...individuals,
 }).forEach(([filename, props]) => {
   buildPropsStylesheet({filename, props}, {selector, prefix})
 })
@@ -116,6 +119,29 @@ buildPropsStylesheet({
   {selector, prefix}
 )
 
+// gen color oklch files
+buildPropsStylesheet({
+  filename: pfx + 'props.colors-oklch.css', 
+  props: ColorsOKLCH}, 
+  {
+    selector: useWhere === 'true' ? `:where(*)` : '*', 
+    prefix
+  }
+)
+buildPropsStylesheet({
+  filename: pfx + 'props.gray-oklch.css', 
+  props: ColorsOKLCHgray}, 
+  {
+    selector: useWhere === 'true' ? `:where(*)` : '*', 
+    prefix
+  }
+)
+buildPropsStylesheet({
+  filename: pfx + 'props.colors-oklch-hues.css', 
+  props: ColorHues}, 
+  {selector, prefix}
+)
+
 // gen index.css
 const entry = fs.createWriteStream(`../src/${pfx}index.css`)
 entry.write(`@import 'props.media.css';

diff --git a/build/to-figmatokens.js b/build/to-figmatokens.js
@@ -15,25 +15,25 @@ export const toFigmaTokens = props => {
       .map(hueName => hueName.toLowerCase())
     let isColor = colors.some(color => key.includes(color))
 
-    if      (isLength) meta.type = 'sizing'
-    else if (isBorder) meta.type = 'borderWidth'
-    else if (isRadius) meta.type = 'borderRadius'
-    else if (isShadow) meta.type = 'boxShadow'
-    else if (isColor)  meta.type = 'color'
-    else               meta.type = 'other'
+    if      (isLength) meta.$type = 'sizing'
+    else if (isBorder) meta.$type = 'borderWidth'
+    else if (isRadius) meta.$type = 'borderRadius'
+    else if (isShadow) meta.$type = 'boxShadow'
+    else if (isColor)  meta.$type = 'color'
+    else               meta.$type = 'other'
 
-    if (!(meta.type in figmatokens)) figmatokens[meta.type] = {}
+    if (!(meta.$type in figmatokens)) figmatokens[meta.$type] = {}
 
     if (isColor) {
       let color = /--(.+?)-/.exec(key)[1]
-      if (!(color in figmatokens[meta.type])) figmatokens[meta.type][color] = {}
-      figmatokens[meta.type][color][key] = {
-        value: token,
+      if (!(color in figmatokens[meta.$type])) figmatokens[meta.$type][color] = {}
+      figmatokens[meta.$type][color][key] = {
+        $value: token,
         ...meta,
       }
     } else {
-      figmatokens[meta.type][key] = {
-        value: token,
+      figmatokens[meta.$type][key] = {
+        $value: token,
         ...meta,
       }
     }

diff --git a/build/to-tokens.js b/build/to-tokens.js
@@ -11,12 +11,12 @@ export const toTokens = props =>
       .map(hueName => hueName.toLowerCase())
     let isColor = colors.some(color => key.includes(color))
 
-    if      (isLength) meta.type = 'dimension'
-    else if (isEasing) meta.type = 'cubic-bezier'
-    else if (isColor)  meta.type = 'color'
+    if      (isLength) meta.$type = 'dimension'
+    else if (isEasing) meta.$type = 'cubic-bezier'
+    else if (isColor)  meta.$type = 'color'
 
     return [key, {
-      value: token,
+      $value: token,
       ...meta,
     }]
   })
diff --git a/docsite/index.css b/docsite/index.css
@@ -156,7 +156,7 @@ footer {
 
     & > div {
       display: grid;
-      place-self: center;
+      place-self: start center;
       place-items: center;
       flex-basis: var(--size-content-1);
       gap: var(--size-2);
@@ -220,13 +220,13 @@ section.hero {
 
   & > * {
     background: var(--gradient-1) fixed;
-    background-size: 12ch 7ch;
+    background-size: var(--size-relative-13) var(--size-relative-11);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 
     @nest [data-theme="dark"] & {
       background: var(--gradient-4) fixed;
-      background-size: 12ch 7ch;
+      background-size: var(--size-relative-13) var(--size-relative-11);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
     }
@@ -587,7 +587,7 @@ pre[class*="language-"] {
       color: var(--text-1);
       box-shadow: var(--shadow-2);
       text-shadow: 0 1px 0 hsl(0 0% 0% / 25%);
-      inline-size: 3ch;
+      inline-size: var(--size-relative-8);
       display: grid;
       place-content: center;
       margin: var(--size-3);
@@ -857,7 +857,7 @@ pre[class*="language-"] {
 
     & > svg {
       margin-block-start: -.25em;
-      inline-size: 2ch;
+      inline-size: var(--size-relative-7);
       stroke-width: 2px;
     }
   }
@@ -1216,6 +1216,17 @@ pre[class*="language-"] {
   }
 }
 
+.match-h5 > * {
+  font-size: var(--font-size-3);
+  font-weight: var(--font-weight-9);
+}
+
+.relative-sizes-demo {
+  display: flex;
+  gap: var(--size-2);
+  flex-flow: column wrap;
+}
+
 .content-demo {
   display: flex;
   gap: var(--size-2);