chore: updating style-dictionary and tokens studio version (#52)

Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com>
linode · Jul 25, 2024 · ec64afe · ec64afe
1 parent fd476e0
commit ec64afe
Show file tree

Hide file tree

Showing 9 changed files with 211 additions and 101 deletions.
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@linode/design-language-system",
-  "version": "2.5.1",
+  "version": "2.6.0",
   "type": "module",
   "module": "dist/index.js",
   "exports": {
@@ -46,11 +46,11 @@
   },
   "homepage": "https://github.com/linode/design-language-system#readme",
   "dependencies": {
-    "@tokens-studio/sd-transforms": "^0.15.2",
+    "@tokens-studio/sd-transforms": "1.2.0",
     "react": "^17.0.2",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^17.0.2",
-    "style-dictionary": "4.0.0-prerelease.25"
+    "style-dictionary": "4.0.1"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^8.1.10",

diff --git a/style-dictionary/build.ts b/style-dictionary/build.ts
@@ -1,6 +1,6 @@
 import StyleDictionary from 'style-dictionary';
 import { promises } from 'fs';
-import { registerTransforms, permutateThemes } from '@tokens-studio/sd-transforms';
+import { register, permutateThemes } from '@tokens-studio/sd-transforms';
 import { registerJavascriptNested } from './formats/registerJavascriptNested.ts';
 import { registerTypescriptNestedDefinitions } from './formats/registerTypescriptNestedDefinitions.ts';
 import { registerJsonFlat } from './formats/registerJsonFlat.ts';
@@ -12,7 +12,7 @@ const content = buffer.toString('utf-8');
 const $themes = JSON.parse(content);
 
 // https://github.com/tokens-studio/sd-transforms
-registerTransforms(StyleDictionary);
+register(StyleDictionary);
 
 registerJavascriptNested();
 registerTypescriptNestedDefinitions();

diff --git a/style-dictionary/configs/getStyleDictionaryConfig.ts b/style-dictionary/configs/getStyleDictionaryConfig.ts
@@ -1,7 +1,7 @@
 import type { Config } from "style-dictionary/types";
 
 import type { StyleDictionaryOptions } from '../types.ts';
-
+import { expandTypesMap } from '@tokens-studio/sd-transforms';
 const PREFIX = 'token';
 
 export function getStyleDictionaryConfig(
@@ -19,9 +19,14 @@ export function getStyleDictionaryConfig(
   return {
     // If we want to show collisions, we can change `include` to `source`.
     include: theme.selectedTokenSets.map(tokenset => `tokens/${tokenset}.json`),
+    preprocessors: ["tokens-studio"],
+    expand: {
+      typesMap: expandTypesMap,
+    },
     platforms: {
       js: {
-        transforms: ['name/pascal', 'size/px', 'color/hex', 'ts/shadow/css/shorthand', 'ts/typography/css/shorthand'],
+        transformGroup: 'tokens-studio',
+        transforms: ['name/pascal', 'size/px', 'color/hex', 'shadow/css/shorthand', 'typography/css/shorthand'],
         buildPath,
         prefix: `${PREFIX}-`,
         files: [
@@ -44,7 +49,8 @@ export function getStyleDictionaryConfig(
         ]
       },
       scss: {
-        transforms: ['name/kebab', 'time/seconds', 'size/px', 'color/css', 'ts/shadow/css/shorthand', 'ts/typography/css/shorthand'],
+        transformGroup: 'tokens-studio',
+        transforms: ['name/kebab', 'time/seconds', 'size/px', 'color/css', 'shadow/css/shorthand', 'typography/css/shorthand'],
         buildPath,
         prefix: `${PREFIX}-`,
         files: [
@@ -55,7 +61,8 @@ export function getStyleDictionaryConfig(
         ]
       },
       css: {
-        transforms: ['name/kebab', 'time/seconds', 'size/px', 'color/css', 'ts/shadow/css/shorthand', 'ts/typography/css/shorthand'],
+        transformGroup: 'tokens-studio',
+        transforms: ['name/kebab', 'time/seconds', 'size/px', 'color/css', 'shadow/css/shorthand', 'typography/css/shorthand'],
         buildPath,
         prefix: `${PREFIX}-`,
         files: [

diff --git a/style-dictionary/formats/registerJavascriptNested.ts b/style-dictionary/formats/registerJavascriptNested.ts
@@ -5,7 +5,7 @@ import { convertTokensToFlatObject } from '../utilities/convertTokensToFlatObjec
 export const registerJavascriptNested = () =>
   StyleDictionary.registerFormat({
     name: 'javascript/nested',
-    formatter(formatterArguments) {
+    format(formatterArguments) {
       const tokens = formatterArguments.dictionary.tokens;
       const transformedTokens = convertTokensToFlatObject(tokens);
       const transformedOutput = generateNestedOutput({

diff --git a/style-dictionary/formats/registerJsonFlat.ts b/style-dictionary/formats/registerJsonFlat.ts
@@ -3,7 +3,7 @@ import StyleDictionary from 'style-dictionary';
 export const registerJsonFlat = () =>
   StyleDictionary.registerFormat({
     name: 'json/flat',
-    formatter: function (formatterArguments) {
+    format: function (formatterArguments) {
       return JSON.stringify(formatterArguments.dictionary.allTokens, null, 2);
     }
   });
diff --git a/style-dictionary/formats/registerTypescriptNestedDefinitions.ts b/style-dictionary/formats/registerTypescriptNestedDefinitions.ts
@@ -5,7 +5,7 @@ import { convertTokensToFlatObject } from '../utilities/convertTokensToFlatObjec
 export const registerTypescriptNestedDefinitions = () =>
   StyleDictionary.registerFormat({
     name: 'typescript/nested/definitions',
-    formatter(formatterArguments) {
+    format(formatterArguments) {
       const tokens = formatterArguments.dictionary.tokens;
       const transformedTokens = convertTokensToFlatObject(tokens);
       const transformedOutput = generateNestedOutput({

diff --git a/tokens/components/badge/badge.json b/tokens/components/badge/badge.json
@@ -63,11 +63,11 @@
       },
       "violet": {
         "background": {
-          "value": "{global.color.violet.30}",
+          "value": "{alias.accent.violet.secondary}",
           "type": "color"
         },
         "text": {
-          "value": "{global.color.violet.90}",
+          "value": "{alias.accent.violet.primary}",
           "type": "color"
         }
       },