feat(typography): update tokens & scripts. rebuild

package.json

@@ -62,7 +62,7 @@
     "@types/react-dom": "^16.9.5",
     "@typescript-eslint/eslint-plugin": "^2.23.0",
     "@typescript-eslint/parser": "^2.23.0",
-    "alfa-ui-primitives": "2.7.2",
+    "alfa-ui-primitives": "2.8.0",
     "arui-presets-lint": "4.0.0",
     "arui-presets-ts": "^5.0.0",
     "babel-loader": "^8.0.6",

src/vars/src/typography.css

@@ -1,91 +1,153 @@
-/* prettier-ignore */
-@define-mixin font-preset $fontFamily, $fontSize, $lineHeight, $fontWeight, $letterSpacing {
-    font-size: $(fontSize)px;
-    line-height: $(lineHeight)px;
-    font-weight: $fontWeight;
-    font-family: $fontFamily;
-    letter-spacing: $letterSpacing;
-    font-feature-settings: 'ss01';
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+:root {
+    --font-family-system: BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
+        Helvetica, sans-serif;
+    --font-family-styrene: 'Styrene UI', BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto,
+        'Helvetica Neue', Helvetica, sans-serif;
 }
 
-@define-mixin sf_48-52_bold {
-    @mixin font-preset var(--font-family-system), 48, 52, bold, normal;
+@define-mixin system_48-52_bold {
+    font-size: 48px;
+    line-height: 52px;
+    font-weight: 700;
+    font-family: var(--font-family-system);
 }
 
-@define-mixin sf_40-48_bold {
-    @mixin font-preset var(--font-family-system), 40, 48, bold, normal;
+@define-mixin system_40-48_bold {
+    font-size: 40px;
+    line-height: 48px;
+    font-weight: 700;
+    font-family: var(--font-family-system);
 }
 
-@define-mixin sf_30-36_bold {
-    @mixin font-preset var(--font-family-system), 30, 36, bold, normal;
+@define-mixin system_30-36_bold {
+    font-size: 30px;
+    line-height: 36px;
+    font-weight: 700;
+    font-family: var(--font-family-system);
 }
 
-@define-mixin sf_22-26_bold {
-    @mixin font-preset var(--font-family-system), 22, 26, bold, normal;
+@define-mixin system_22-26_bold {
+    font-size: 22px;
+    line-height: 26px;
+    font-weight: 700;
+    font-family: var(--font-family-system);
 }
 
-@define-mixin sf_18-22_bold {
-    @mixin font-preset var(--font-family-system), 18, 22, bold, normal;
+@define-mixin system_18-22_bold {
+    font-size: 18px;
+    line-height: 22px;
+    font-weight: 700;
+    font-family: var(--font-family-system);
 }
 
-@define-mixin sf_18-22_medium {
-    @mixin font-preset var(--font-family-system), 18, 22, 500, normal;
+@define-mixin system_18-22_medium {
+    font-size: 18px;
+    line-height: 22px;
+    font-weight: 500;
+    font-family: var(--font-family-system);
 }
 
-@define-mixin sf_16-24_regular {
-    @mixin font-preset var(--font-family-system), 16, 24, normal, normal;
+@define-mixin system_16-24_regular {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+    font-family: var(--font-family-system);
 }
 
-@define-mixin sf_16-24_medium {
-    @mixin font-preset var(--font-family-system), 16, 24, 500, normal;
+@define-mixin system_16-24_medium {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 500;
+    font-family: var(--font-family-system);
 }
 
-@define-mixin sf_16-24_bold {
-    @mixin font-preset var(--font-family-system), 16, 24, bold, normal;
+@define-mixin system_16-24_bold {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 700;
+    font-family: var(--font-family-system);
 }
 
-@define-mixin sf_16-20_regular {
-    @mixin font-preset var(--font-family-system), 16, 20, normal, normal;
+@define-mixin system_16-20_regular {
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: 400;
+    font-family: var(--font-family-system);
 }
 
-@define-mixin sf_16-20_medium {
-    @mixin font-preset var(--font-family-system), 16, 20, 500, normal;
+@define-mixin system_16-20_medium {
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: 500;
+    font-family: var(--font-family-system);
 }
 
-@define-mixin sf_16-20_bold {
-    @mixin font-preset var(--font-family-system), 16, 20, bold, normal;
+@define-mixin system_16-20_bold {
+    font-size: 16px;
+    line-height: 20px;
+    font-weight: 700;
+    font-family: var(--font-family-system);
 }
 
-@define-mixin sf_14-18_regular {
-    @mixin font-preset var(--font-family-system), 14, 18, normal, normal;
+@define-mixin system_14-18_regular {
+    font-size: 14px;
+    line-height: 18px;
+    font-weight: 400;
+    font-family: var(--font-family-system);
 }
 
-@define-mixin sf_12-16_medium_caps {
-    @mixin font-preset var(--font-family-system), 12, 16, 500, 1.5px;
+@define-mixin system_12-16_medium_caps {
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 500;
+    letter-spacing: 1.5px;
+    text-transform: uppercase;
+    font-family: var(--font-family-system);
 }
 
-@define-mixin sf_12-16_regular {
-    @mixin font-preset var(--font-family-system), 12, 16, normal, normal;
+@define-mixin system_12-16_regular {
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 400;
+    font-family: var(--font-family-system);
 }
 
 @define-mixin styrene_40-48_medium {
-    @mixin font-preset var(--font-family-styrene), 40, 48, 500, normal;
+    font-size: 40px;
+    line-height: 48px;
+    font-weight: 500;
+    font-feature-settings: 'ss01';
+    font-family: var(--font-family-styrene);
 }
 
 @define-mixin styrene_32-40_medium {
-    @mixin font-preset var(--font-family-styrene), 32, 40, 500, normal;
+    font-size: 32px;
+    line-height: 40px;
+    font-weight: 500;
+    font-feature-settings: 'ss01';
+    font-family: var(--font-family-styrene);
 }
 
 @define-mixin styrene_28-34_medium {
-    @mixin font-preset var(--font-family-styrene), 28, 34, 500, normal;
+    font-size: 28px;
+    line-height: 34px;
+    font-weight: 500;
+    font-feature-settings: 'ss01';
+    font-family: var(--font-family-styrene);
 }
 
 @define-mixin styrene_24-30_medium {
-    @mixin font-preset var(--font-family-styrene), 24, 30, 500, normal;
+    font-size: 24px;
+    line-height: 30px;
+    font-weight: 500;
+    font-feature-settings: 'ss01';
+    font-family: var(--font-family-styrene);
 }
 
 @define-mixin styrene_20-24_medium {
-    @mixin font-preset var(--font-family-styrene), 20, 24, 500, normal;
+    font-size: 20px;
+    line-height: 24px;
+    font-weight: 500;
+    font-feature-settings: 'ss01';
+    font-family: var(--font-family-styrene);
 }

tools/templates/font-style-mixin.css.hbs

@@ -1,3 +1,5 @@
 @define-mixin {{name}} {
-    @mixin font-preset {{font_family}}, {{font_size}}, {{line_height}}, {{font_weight}}, {{letter_spacing}};
+{{#each rules}}
+    {{@key}}: {{{this}}};
+{{/each}}
 }

tools/templates/font-vars.css.hbs

@@ -0,0 +1,6 @@
+:root {
+    --font-family-system: BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
+        Helvetica, sans-serif;
+    --font-family-styrene: 'Styrene UI', BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto,
+        'Helvetica Neue', Helvetica, sans-serif;
+}

tools/update-typography.js

@@ -4,17 +4,15 @@ const handlebars = require('handlebars');
 
 const typography = require('../node_modules/alfa-ui-primitives/styles/typography_web.json');
 
-const out = [
-    compileTemplate('font-preset-mixin.css.hbs')
-];
+const out = [compileTemplate('font-vars.css.hbs')];
 
 Object.entries(typography).forEach(([name, rules]) => {
     if (rules.deprecated) return;
 
     out.push(
         compileTemplate('font-style-mixin.css.hbs', {
             name,
-            ...normalizeRules(rules),
+            rules: normalizeRules(rules),
         }),
     );
 });
@@ -37,28 +35,27 @@ function compileTemplate(filename, data) {
 }
 
 /**
- * Преобразовывает значения из набора в валидные css значения в соответствии с набором правил
+ * Преобразовывает значения из набора в валидные css значения
  *
  * @param {Object} rules
  * @returns {Object}
  */
 function normalizeRules(rules) {
-    const convertRules = {
-        font_weight: v => {
-            if (v === 'medium') return 500;
-            if (v === 'regular') return 'normal';
-            return v;
-        },
-        letter_spacing: v => {
-            return v ? `${v}px` : 'normal';
-        },
-    };
+    const nonPxRules = ['font-weight'];
 
-    Object.entries(rules).forEach(([name, value]) => {
-        if (name in convertRules) {
-            rules[name] = convertRules[name](value);
+    return Object.entries(rules).reduce((acc, [name, value]) => {
+        name = name.replace(/_/, '-').toLocaleLowerCase();
+
+        if (typeof value === 'number' && !nonPxRules.includes(name)) {
+            value = `${value}px`;
+        }
+
+        if (name === 'font-family' && value.includes('styrene')) {
+            acc['font-feature-settings'] = `'ss01'`;
         }
-    });
 
-    return rules;
+        acc[name] = value;
+
+        return acc;
+    }, {});
 }