Scope the typography shorthand to CSS (#20)

* BREAKING: scope the typography shorthand to CSS

* feat: add typography shorthand for Jetpack Compose

---------

Co-authored-by: Joren Broekema <[email protected]>

.changeset/another-changeset.md

@@ -0,0 +1,6 @@
+---
+'@tokens-studio/sd-transforms': minor
+---
+
+**BREAKING**: Renames typography transform to clarify it's transformed to CSS-based format.
+Previously `transformTypography`, now `transformTypographyForCSS`.

.changeset/purple-falcons-knock.md

@@ -0,0 +1,5 @@
+---
+'@tokens-studio/sd-transforms': patch
+---
+
+Adds a transformer for typography tokens on Jetpack Compose

README.md

@@ -66,7 +66,7 @@ In your Style-Dictionary config:
         "ts/size/lineheight",
         "ts/type/fontWeight",
         "ts/color/hexrgba",
-        "ts/typography/shorthand",
+        "ts/typography/css/shorthand",
         "ts/shadow/shorthand",
         "attribute/cti",
         "name/cti/kebab"

index.js

@@ -5,6 +5,7 @@ export { transformHEXRGBa } from './src/transformHEXRGBa.js';
 export { transformLetterSpacing } from './src/transformLetterSpacing.js';
 export { transformLineHeight } from './src/transformLineHeight.js';
 export { transformShadow } from './src/transformShadow.js';
-export { transformTypography } from './src/transformTypography.js';
+export { transformTypographyForCSS } from './src/css/transformTypography.js';
+export { transformTypographyForCompose } from './src/compose/transformTypography.js';
 export { registerTransforms } from './src/registerTransforms.js';
 export { mapDescriptionToComment } from './src/mapDescriptionToComment.js';

src/compose/transformTypography.js

@@ -0,0 +1,32 @@
+/**
+ * Helper: Transforms typography object to typography shorthand for Jetpack Compose
+ *
+ * @param {Record<string, string>} token
+ */
+export function transformTypographyForCompose(token) {
+  /**
+   * Mapping between https://docs.tokens.studio/available-tokens/typography-tokens
+   * and https://developer.android.com/reference/kotlin/androidx/compose/ui/text/TextStyle
+   * Unsupported property:
+   *  - paragraphSpacing
+   */
+  const textStylePropertiesMapping = {
+    fontFamily: 'fontFamily',
+    fontWeight: 'fontWeight',
+    lineHeight: 'lineHeight',
+    fontSize: 'fontSize',
+    letterSpacing: 'letterSpacing',
+    paragraphIndent: 'textIndent',
+  };
+
+  /**
+   * Constructs a `TextStyle`, e.g.
+   * TextStyle(
+   *  fontSize = 16.dp
+   * )
+   */
+  return `${Object.entries(token.value).reduce(
+    (acc, [propName, val]) => `${acc}${textStylePropertiesMapping[propName] ? `${val}\n` : ''}`,
+    'TextStyle(\n',
+  )})`;
+}

src/transformTypography.js → src/css/transformTypography.js

@@ -1,11 +1,11 @@
 /**
- * Helper: Transforms typography object to typography shorthand
+ * Helper: Transforms typography object to typography shorthand for CSS
  * This currently works fine if every value uses an alias, but if any one of these use a raw value, it will not be transformed.
  * If you'd like to output all typography values, you'd rather need to return the typography properties itself
  *
  * @param {Record<string, string>} value
  */
-export function transformTypography(value) {
+export function transformTypographyForCSS(value) {
   const { fontWeight, fontSize, lineHeight, fontFamily } = value;
   return `${fontWeight} ${fontSize}/${lineHeight} ${fontFamily}`;
 }

src/registerTransforms.js

@@ -4,7 +4,8 @@ import { transformShadow } from './transformShadow.js';
 import { transformFontWeights } from './transformFontWeights.js';
 import { transformLetterSpacing } from './transformLetterSpacing.js';
 import { transformLineHeight } from './transformLineHeight.js';
-import { transformTypography } from './transformTypography.js';
+import { transformTypographyForCSS } from './css/transformTypography.js';
+import { transformTypographyForCompose } from './compose/transformTypography.js';
 import { checkAndEvaluateMath } from './checkAndEvaluateMath.js';
 import { mapDescriptionToComment } from './mapDescriptionToComment.js';
 
@@ -91,11 +92,19 @@ export async function registerTransforms(sd) {
   });
 
   _sd.registerTransform({
-    name: 'ts/typography/shorthand',
+    name: 'ts/typography/css/shorthand',
     type: 'value',
     transitive: true,
     matcher: token => token.type === 'typography',
-    transformer: token => transformTypography(token.original.value),
+    transformer: token => transformTypographyForCSS(token.original.value),
+  });
+
+  _sd.registerTransform({
+    name: 'ts/typography/compose/shorthand',
+    type: 'value',
+    transitive: true,
+    matcher: token => token.type === 'typography',
+    transformer: token => transformTypographyForCompose(token.original.value),
   });
 
   _sd.registerTransform({
@@ -124,7 +133,7 @@ export async function registerTransforms(sd) {
       'ts/size/lineheight',
       'ts/type/fontWeight',
       'ts/color/hexrgba',
-      'ts/typography/shorthand',
+      'ts/typography/css/shorthand',
       'ts/shadow/shorthand',
       'attribute/cti',
       // by default we go with camel, as having no default will likely give the user