feat(typography): add regular curves and use 'official' curve names (#…

…231)
statistikZH · Sep 5, 2024 · 0f29fb6 · 0f29fb6
1 parent 8793bd9
commit 0f29fb6
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 36 deletions.
diff --git a/scripts/postcss-leu-font-styles.cjs b/scripts/postcss-leu-font-styles.cjs
@@ -14,13 +14,13 @@ async function parseFile(file) {
 }
 
 function generateCustomPropertyDeclarations({
-  identifier,
+  name,
   fontSize,
   fontWeight,
   lineHeight,
   spacing,
 }) {
-  const customPropertyPrefix = `--leu-t-${identifier}-${fontWeight}`
+  const customPropertyPrefix = `--leu-t-${name}-${fontWeight}`
 
   const varFontSize = `${customPropertyPrefix}-font-size`
   const varLineHeight = `${customPropertyPrefix}-line-height`
@@ -77,14 +77,11 @@ async function createLeuFontStyleNodes(file, postcss, nodeSource) {
       : [style.fontWeight]
     const spacing = getPixelValue(style.spacing) / 16
 
-    const identifier = (fontSize / 4) * 10
-
     return fontWeights.map((fontWeight) => ({
       name: style.name,
       fontWeight,
-      identifier,
       declarations: generateCustomPropertyDeclarations({
-        identifier,
+        name: style.name,
         fontSize,
         fontWeight,
         lineHeight: style.lineHeight,
@@ -100,36 +97,33 @@ async function createLeuFontStyleNodes(file, postcss, nodeSource) {
     )
   )
 
-  const curveNodes = curves.flatMap((curve) => {
-    const [_, lastStepName] = curve.steps.at(-1)
-    const { identifier } = fontStyleDeclarations.find(
-      (style) => style.name === lastStepName && style.fontWeight === "black"
-    )
-
-    const curvePrefix = `--leu-t-curve-${identifier}-black`
-
-    return curve.steps.flatMap((step) => {
-      const [viewport, styleName] = step
-
-      const stepStyle = fontStyleDeclarations.find(
-        (s) => s.name === styleName && s.fontWeight === "black"
-      )
-
-      const nodes = curveStepDeclarations(curvePrefix, stepStyle).map(
-        ({ prop, value }) =>
-          new postcss.Declaration({ prop, value, source: nodeSource })
-      )
-
-      return viewport === null
-        ? nodes
-        : new postcss.AtRule({
-            name: "media",
-            params: `(${viewport})`,
-            nodes,
-            source: nodeSource,
-          })
+  const curveNodes = curves.flatMap((curve) =>
+    curve.weights.flatMap((fontWeight) => {
+      const curvePrefix = `--leu-t-curve-${curve.name}-${fontWeight}`
+
+      return curve.steps.flatMap((step) => {
+        const [viewport, styleName] = step
+
+        const stepStyle = fontStyleDeclarations.find(
+          (s) => s.name === styleName && s.fontWeight === fontWeight
+        )
+
+        const nodes = curveStepDeclarations(curvePrefix, stepStyle).map(
+          ({ prop, value }) =>
+            new postcss.Declaration({ prop, value, source: nodeSource })
+        )
+
+        return viewport === null
+          ? nodes
+          : new postcss.AtRule({
+              name: "media",
+              params: `(${viewport})`,
+              nodes,
+              source: nodeSource,
+            })
+      })
     })
-  })
+  )
 
   return [...fontStyleNodes, ...curveNodes]
 }

diff --git a/src/components/chip/chip-group.css b/src/components/chip/chip-group.css
@@ -1,6 +1,6 @@
 .label {
   margin: 0 0 0.5rem;
-  font: var(--leu-t-curve-35-black-font);
+  font: var(--leu-t-curve-tiny-black-font);
   color: var(--leu-color-black-100);
 }
 

diff --git a/src/styles/font-definitions.json b/src/styles/font-definitions.json
@@ -130,13 +130,15 @@
   "curves": [
     {
       "name": "tiny",
+      "weights": ["regular", "black"],
       "steps": [
         [null, "tiny"],
         ["--viewport-regular", "small"]
       ]
     },
     {
       "name": "small",
+      "weights": ["regular", "black"],
       "steps": [
         [null, "small"],
         ["--viewport-regular", "regular"],
@@ -145,6 +147,7 @@
     },
     {
       "name": "regular",
+      "weights": ["regular", "black"],
       "steps": [
         [null, "regular"],
         ["--viewport-small", "biggerRegular"],
@@ -153,6 +156,7 @@
     },
     {
       "name": "biggerRegular",
+      "weights": ["regular", "black"],
       "steps": [
         [null, "biggerRegular"],
         ["--viewport-regular", "medium"],
@@ -161,6 +165,7 @@
     },
     {
       "name": "medium",
+      "weights": ["black"],
       "steps": [
         [null, "biggerRegular"],
         ["--viewport-small", "medium"],
@@ -170,6 +175,7 @@
     },
     {
       "name": "large",
+      "weights": ["black"],
       "steps": [
         [null, "biggerRegular"],
         ["--viewport-regular", "large"],
@@ -179,6 +185,7 @@
     },
     {
       "name": "big",
+      "weights": ["black"],
       "steps": [
         [null, "large"],
         ["--viewport-regular", "smallBig"],
@@ -189,6 +196,7 @@
     },
     {
       "name": "huge",
+      "weights": ["black"],
       "steps": [
         [null, "smallBig"],
         ["--viewport-small", "big"],