Add latest

aries-site/src/themes/aries.js

@@ -97,7 +97,8 @@ const global = {
     },
   },
   colors: {
-    brand: dark.color.brand.$value, // same in light and dark mode, how to handle?
+    // same in light and dark mode, how to handle? is this fine?
+    brand: dark.color.brand.$value,
     background: {
       dark: dark.color.background.default.$value,
       light: light.color.background.default.$value,

design-tokens/package.json

@@ -7,7 +7,8 @@
     "prettier:check": "prettier --check src/",
     "sync-tokens-to-figma": "ts-node-esm -P tsconfig.json src/sync_tokens_to_figma.ts",
     "sync-figma-to-tokens": "ts-node-esm -P tsconfig.json src/sync_figma_to_tokens.ts",
-    "build": "rm -rf ./dist && node src/build.js",
+    "build-style-dictionary": "node src/build-style-dictionary.js",
+    "build": "rm -rf ./dist && node src/build.js && yarn build-style-dictionary",
     "test": "jest"
   },
   "dependencies": {
@@ -21,6 +22,8 @@
     "@types/node": "^20.4.5",
     "jest": "^29.6.2",
     "prettier": "3.0.0",
+    "style-dictionary": "^3.9.2",
+    "style-dictionary-utils": "^2.0.7",
     "ts-jest": "^29.1.1"
   }
 }

design-tokens/src/build-style-dictionary.js

@@ -0,0 +1,142 @@
+import StyleDictionary from 'style-dictionary-utils';
+
+// color theme mode
+StyleDictionary.registerFormat({
+  name: 'css/variables-themed',
+  formatter({ dictionary, file, options }) {
+    const { outputReferences, theme } = options;
+    return `${StyleDictionary.formatHelpers.fileHeader({
+      file,
+      // eslint-disable-next-line max-len
+    })}:root[data-theme=${theme}] {\n${StyleDictionary.formatHelpers.formattedVariables(
+      {
+        format: 'css',
+        dictionary,
+        outputReferences,
+      },
+    )}\n}\n`;
+  },
+});
+
+// light mode
+StyleDictionary.extend({
+  source: ['tokens/primitives.base.json', 'tokens/color.light.json'],
+  platforms: {
+    css: {
+      transformGroup: 'css',
+      buildPath: 'dist/css/',
+      files: [
+        {
+          destination: 'colors.css',
+          format: 'css/variables',
+          filter: {
+            attributes: {
+              category: 'color',
+            },
+          },
+          options: {
+            outputReferences: true,
+          },
+        },
+      ],
+    },
+  },
+}).buildAllPlatforms();
+
+// dark mode
+StyleDictionary.extend({
+  source: ['tokens/primitives.base.json', 'tokens/color.dark.json'],
+  platforms: {
+    css: {
+      transformGroup: 'css',
+      buildPath: 'dist/css/',
+      files: [
+        {
+          destination: 'colors-dark.css',
+          format: 'css/variables-themed',
+          options: {
+            outputReferences: true,
+            theme: 'dark',
+          },
+          filter: {
+            attributes: {
+              category: 'color',
+            },
+          },
+        },
+      ],
+    },
+  },
+}).buildAllPlatforms();
+
+// small
+StyleDictionary.registerFormat({
+  name: 'css/variables-breakpoints',
+  formatter({ dictionary, file, options }) {
+    const { outputReferences } = options;
+    return `${StyleDictionary.formatHelpers.fileHeader({
+      file,
+      // TO DO how to dynamically get the breakpoint value
+      // eslint-disable-next-line max-len
+    })}@media (max-width: 768px) { \n:root {\n${StyleDictionary.formatHelpers.formattedVariables(
+      {
+        format: 'css',
+        dictionary,
+        outputReferences,
+      },
+    )}\n}\n}\n`;
+  },
+});
+
+StyleDictionary.registerFilter({
+  name: 'isDimension',
+  matcher(prop) {
+    return ['dimension', 'content', 'spacing', 'border', 'radius'].includes(
+      prop.attributes.category,
+    );
+  },
+});
+
+const dimensions = ['dimension', 'content', 'spacing', 'border', 'radius'];
+
+// small
+StyleDictionary.extend({
+  source: ['tokens/primitives.base.json', 'tokens/dimension.small.json'],
+  platforms: {
+    css: {
+      transformGroup: 'css',
+      buildPath: 'dist/css/',
+      files: [
+        {
+          destination: 'dimensions-small.css',
+          format: 'css/variables-breakpoints',
+          options: {
+            outputReferences: true,
+          },
+          filter: token => dimensions.includes(token.attributes.category),
+        },
+      ],
+    },
+  },
+}).buildAllPlatforms();
+
+// large
+StyleDictionary.extend({
+  source: ['tokens/primitives.base.json', 'tokens/dimension.large.json'],
+  platforms: {
+    css: {
+      transformGroup: 'css',
+      buildPath: 'dist/css/',
+      files: [
+        {
+          destination: 'dimensions-large.css',
+          format: 'css/variables',
+          options: {
+            outputReferences: true,
+          },
+          filter: token => dimensions.includes(token.attributes.category),
+        },
+      ],
+    },
+  },
+}).buildAllPlatforms();

design-tokens/src/build.js

@@ -49,12 +49,12 @@ const light = JSON.parse(rawLight);
 const resolvedLight = resolveTokens(light, primitives);
 
 // desktop dimensions
-const rawDesktop = readFileSync('./tokens/dimension.desktop.json');
+const rawDesktop = readFileSync('./tokens/dimension.large.json');
 const desktop = JSON.parse(rawDesktop);
 const resolvedDesktop = resolveTokens(desktop, primitives);
 
 // mobile dimensions
-const rawMobile = readFileSync('./tokens/dimension.desktop.json');
+const rawMobile = readFileSync('./tokens/dimension.small.json');
 const mobile = JSON.parse(rawMobile);
 const resolvedMobile = resolveTokens(mobile, primitives);
 
@@ -78,21 +78,21 @@ writeFileSync(
 );
 
 writeFileSync(
-  './dist/dimension.desktop.js',
+  './dist/dimension.large.js',
   `export default ${JSON.stringify(resolvedDesktop, null, 2)}`,
 );
 
 writeFileSync(
-  './dist/dimension.mobile.js',
+  './dist/dimension.small.js',
   `export default ${JSON.stringify(resolvedMobile, null, 2)}`,
 );
 
 writeFileSync(
   './dist/index.js',
   `export { default as dark } from './color.dark.js';
 export { default as light } from './color.light.js';
-export { default as desktop } from './dimension.desktop.js';
-export { default as mobile } from './dimension.mobile.js';`,
+export { default as desktop } from './dimension.large.js';
+export { default as mobile } from './dimension.small.js';`,
 );
 
 // const [light, dark] = splitTheme(resolved);