Release v2.6.0 - staging → main

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",

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();

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: [

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({

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);
     }
   });

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({

tokens/alias/dark.json

@@ -420,6 +420,25 @@
             }
           }
         }
+      },
+      "violet": {
+        "primary": {
+          "value": "{global.color.violet.50}",
+          "type": "color"
+        },
+        "secondary": {
+          "value": "{global.color.violet.50}",
+          "type": "color",
+          "$extensions": {
+            "studio.tokens": {
+              "modify": {
+                "type": "alpha",
+                "value": "0.12",
+                "space": "lch"
+              }
+            }
+          }
+        }
       }
     },
     "elevation": {

tokens/alias/light.json

@@ -764,6 +764,25 @@
             }
           }
         }
+      },
+      "violet": {
+        "primary": {
+          "value": "{global.color.violet.90}",
+          "type": "color"
+        },
+        "secondary": {
+          "value": "{global.color.violet.90}",
+          "type": "color",
+          "$extensions": {
+            "studio.tokens": {
+              "modify": {
+                "type": "alpha",
+                "value": "0.12",
+                "space": "lch"
+              }
+            }
+          }
+        }
       }
     },
     "chart": {

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"
         }
       },