diff --git a/scripts/postcss-leu-font-styles.cjs b/scripts/postcss-leu-font-styles.cjs index 344cf5a..7360d4b 100644 --- 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 index 0980434..f3b0083 100644 --- 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 index 8a5e748..2f15911 100644 --- a/src/styles/font-definitions.json +++ b/src/styles/font-definitions.json @@ -130,6 +130,7 @@ "curves": [ { "name": "tiny", + "weights": ["regular", "black"], "steps": [ [null, "tiny"], ["--viewport-regular", "small"] @@ -137,6 +138,7 @@ }, { "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"],