Updated Label to use new font-weight classes

packages/cli/src/tokens/configs.ts

@@ -15,9 +15,9 @@ import { typeEquals } from './utils/utils';
 
 void tokenStudio.registerTransforms(StyleDictionary);
 
-const prefix = 'ds';
-const basePxFontSize = 16;
-const separator = '_';
+export const prefix = 'ds';
+export const basePxFontSize = 16;
+export const separator = '_';
 
 const fileHeader = () => [`These files are generated from design tokens defind using Token Studio`];
 
@@ -199,42 +199,14 @@ export const typographyCSS: GetConfig = ({ outPath, theme, typography }) => {
   return {
     log: { verbosity: 'silent' },
     preprocessors: ['tokens-studio'],
-    hooks: {
-      transforms: {
-        typographyClassName: {
-          type: 'name',
-          filter: (token) => typeEquals('typography', token),
-          transform: (token) => {
-            const name = R.pipe(
-              (list: string[]) => {
-                const withPrefix = R.concat([prefix], R.remove(0, 0, list));
-                const [rest, last] = R.splitAt(-1, withPrefix);
-
-                return `${rest.join('-')}--${R.head(last)}`;
-              },
-              R.trim,
-              R.toLower,
-            )(token.path);
-            return name;
-          },
-        },
-      },
-    },
     platforms: {
       css: {
         prefix,
         typography,
         // selector,
         buildPath: `${outPath}/${theme}/`,
         basePxFontSize,
-        transforms: [
-          nameKebab.name,
-          'ts/size/px',
-          sizeRem.name,
-          'typographyClassName',
-          'ts/size/lineheight',
-          'ts/typography/fontWeight',
-        ],
+        transforms: [nameKebab.name, 'ts/size/px', sizeRem.name, 'ts/size/lineheight', 'ts/typography/fontWeight'],
         files: [
           {
             destination: `typography.css`,

packages/cli/src/tokens/formats/css-classes.ts

@@ -4,6 +4,7 @@ import type { Format } from 'style-dictionary/types';
 import { fileHeader, createPropertyFormatter, getReferences } from 'style-dictionary/utils';
 
 import { getValue, typeEquals } from '../utils/utils';
+import { prefix } from '../configs';
 
 type Typgraphy = {
   fontWeight: string;
@@ -23,7 +24,21 @@ const getVariableName = R.pipe<string[], string[], string, string, string, strin
   (name) => `var(${name})`,
 );
 
-const classSelector = R.replace('-typography', '');
+const bemify = R.pipe(
+  (path: string[]) => {
+    const filteredPath = path.filter((p) => p !== 'typography');
+    const withPrefix = R.concat([prefix], R.remove(0, 0, filteredPath));
+    const [rest, last] = R.splitAt(-1, withPrefix);
+
+    return `${rest.join('-')}--${R.head(last)}`;
+  },
+  R.trim,
+  R.toLower,
+);
+
+const classSelector = R.pipe(R.prop('path'), bemify);
+const isTypography = R.curry(typeEquals)('typography');
+const sortTypographyLast = R.sortWith<TransformedToken>([R.ascend((token) => (isTypography(token) ? 1 : 0))]);
 
 /**
  * Creates CSS classes from typography tokens
@@ -42,13 +57,15 @@ export const cssClassesTypography: Format = {
       format: 'css',
     });
 
+    const sortedTokens = sortTypographyLast(dictionary.allTokens);
+
     const formattedTokens = R.pipe(
       sortByType,
       R.reduce<TransformedToken, ProcessedTokens>(
         (acc, token) => {
           if (typeEquals('fontweights', token)) {
             const className = `
-.${classSelector(token.name)} {
+  .${classSelector(token)} {
     font-weight: ${getValue<string>(token)};
   }`;
 
@@ -61,7 +78,7 @@ export const cssClassesTypography: Format = {
 
           if (typeEquals('lineheights', token)) {
             const className = `
-  .${classSelector(token.name)} {
+  .${classSelector(token)} {
     line-height: ${getValue<string>(token)};
   }`;
 
@@ -83,20 +100,20 @@ export const cssClassesTypography: Format = {
             const lineheightVar = lineheight ? getVariableName(format(lineheight)) : null;
 
             const className = `
-  .${classSelector(token.name)} {
+  .${classSelector(token)} {
     ${fontSizeVar && `font-size: ${fontSizeVar};`}
     ${lineheightVar && `line-height: ${lineheightVar};`}
     ${fontWeightVar && `font-weight: ${fontWeightVar};`}
   }`;
 
-            return { ...acc, classes: [...acc.classes, className] };
+            return { ...acc, classes: [className, ...acc.classes] };
           }
 
           return { ...acc, variables: [...acc.variables, format(token)] };
         },
         { variables: [], classes: [] },
       ),
-    )(dictionary.allTokens);
+    )(sortedTokens);
 
     const classes = formattedTokens.classes.join('\n');
     const variables = formattedTokens.variables.join('\n');

packages/cli/src/tokens/utils/utils.ts

@@ -17,7 +17,7 @@ export const getType = (token: TransformedToken) => ((token.$type ?? token.type)
  */
 export const getValue = <T>(token: TransformedToken | DesignToken): T => (token.$value ?? token.value) as T;
 
-export const typeEquals = (types: string[] | string, token?: TransformedToken) => {
+export const typeEquals = (types: string[] | string, token: TransformedToken) => {
   if (R.isNil(token)) {
     return false;
   }

packages/css/typography/label.css

@@ -11,16 +11,4 @@
   .ds-label--spacing {
     margin-bottom: var(--dsc-bottom-spacing);
   }
-
-  .ds-label--regular-weight {
-    font-weight: 400;
-  }
-
-  .ds-label--medium-weight {
-    font-weight: 500;
-  }
-
-  .ds-label--semibold-weight {
-    font-weight: 600;
-  }
 }

packages/react/src/components/Typography/Label/Label.tsx

@@ -38,7 +38,7 @@ export const Label = forwardRef<HTMLLabelElement, LabelProps>(
           'ds-label',
           `ds-label--${size}`,
           spacing && 'ds-label--spacing',
-          weight && `ds-label--${weight}-weight`,
+          weight && `ds-font-weight--${weight}`,
           className,
         )}
         {...rest}