task: responsive tokens

build.js

@@ -6,6 +6,7 @@ import { permutateThemes, registerTransforms } from '@tokens-studio/sd-transform
 import { generateSemanticFiles } from "./utils/generateSemanticFiles.js";
 
 import { formatFontFace } from "./utils/formats/formatFontFace.js";
+import { formatResponsiveCSS } from "./utils/formats/formatResponsiveCSS.js";
 import { transformAttributeThemeable } from "./utils/transforms/transformAttributeThemeable.js";
 import { transformRem } from "./utils/transforms/transformRem.js";
 import { transformFont } from "./utils/transforms/transformFont.js";
@@ -72,6 +73,11 @@ async function run() {
                 fontPathPrefix: "../../assets/"
               }
             },
+            {
+              destination: "responsive.css",
+              format: "custom/css/responsive",
+              filter: "custom/excludeTokens"
+            },
             ...generateSemanticFiles(excludedFromSemantic, theme),
           ]
         }
@@ -89,6 +95,11 @@ async function run() {
 
     });
 
+    sd.registerFormat({
+      name: 'custom/css/responsive',
+      format: ({ dictionary }) => formatResponsiveCSS(dictionary)
+    });
+
     sd.registerTransform({
       name: "custom/attribute/themeable",
       type: "attribute",
@@ -127,6 +138,13 @@ async function run() {
       }
     });
 
+    sd.registerFilter({
+      name: 'custom/excludeTokens',
+      filter: (prop) => {
+        return !prop.path.some(part => excludedPaths.includes(part));
+      }
+    });
+
     await sd.cleanAllPlatforms();
     await sd.buildAllPlatforms();
   }

generatedTokens/css/responsive.css

@@ -0,0 +1,69 @@
+:root {
+--wds-font-heading-brand-h0: 700 2rem/0.094rem Wellcome;
+--wds-font-heading-brand-h1: 700 1.5rem/0.094rem Wellcome;
+--wds-font-heading-brand-h2: 700 1.375rem/0.094rem Wellcome;
+--wds-font-heading-brand-h3: 700 1.125rem/0.094rem Wellcome;
+--wds-font-heading-brand-h4: 700 1rem/0.094rem Wellcome;
+--wds-font-heading-brand-h5: 700 0.875rem/0.094rem Wellcome;
+--wds-font-heading-sans-serif-h0: 500 2rem/0.094rem 'Helvetica Neue';
+--wds-font-heading-sans-serif-h1: 500 1.5rem/2.625rem 'Helvetica Neue';
+--wds-font-heading-sans-serif-h2: 500 1.375rem/0.094rem 'Helvetica Neue';
+--wds-font-heading-sans-serif-h3: 500 1.125rem/0.094rem 'Helvetica Neue';
+--wds-font-heading-sans-serif-h4: 500 1rem/0.094rem 'Helvetica Neue';
+--wds-font-heading-sans-serif-h5: 500 0.875rem/0.094rem 'Helvetica Neue';
+--wds-space-xxl: 3rem;
+--wds-space-xl: 2rem;
+--wds-space-l: 1.5rem;
+--wds-space-m: 1rem;
+--wds-space-s: 0.75rem;
+--wds-space-xs: 0.5rem;
+--wds-space-xxs: 0.25rem;
+}
+
+@media (min-width: 48rem) {
+  :root {
+--wds-font-heading-brand-h0: 700 2.125rem/0.094rem Wellcome;
+--wds-font-heading-brand-h1: 700 1.75rem/0.094rem Wellcome;
+--wds-font-heading-brand-h2: 700 1.375rem/0.094rem Wellcome;
+--wds-font-heading-brand-h3: 700 1.125rem/0.094rem Wellcome;
+--wds-font-heading-brand-h4: 700 1rem/0.094rem Wellcome;
+--wds-font-heading-brand-h5: 700 0.875rem/1.375rem Wellcome;
+--wds-font-heading-sans-serif-h0: 500 2.125rem/0.094rem 'Helvetica Neue';
+--wds-font-heading-sans-serif-h1: 500 1.75rem/0.094rem 'Helvetica Neue';
+--wds-font-heading-sans-serif-h2: 500 1.375rem/0.094rem 'Helvetica Neue';
+--wds-font-heading-sans-serif-h3: 500 1.125rem/0.094rem 'Helvetica Neue';
+--wds-font-heading-sans-serif-h4: 500 1rem/0.094rem 'Helvetica Neue';
+--wds-font-heading-sans-serif-h5: 500 0.875rem/0.094rem 'Helvetica Neue';
+--wds-space-xxl: 4.5rem;
+--wds-space-xl: 3rem;
+--wds-space-l: 2rem;
+--wds-space-m: 1.5rem;
+--wds-space-s: 1rem;
+--wds-space-xs: 0.5rem;
+--wds-space-xxs: 0.25rem;
+  }
+}
+
+@media (min-width: 90rem) {
+  :root {
+--wds-font-heading-brand-h0: 700 2.5rem/0.094rem Wellcome;
+--wds-font-heading-brand-h1: 700 2rem/0.094rem Wellcome;
+--wds-font-heading-brand-h2: 700 1.5rem/0.094rem Wellcome;
+--wds-font-heading-brand-h3: 700 1.25rem/0.094rem Wellcome;
+--wds-font-heading-brand-h4: 700 1rem/0.094rem Wellcome;
+--wds-font-heading-brand-h5: 700 0.875rem/0.094rem Wellcome;
+--wds-font-heading-sans-serif-h0: 500 2.5rem/0.094rem 'Helvetica Neue';
+--wds-font-heading-sans-serif-h1: 500 2rem/0.094rem 'Helvetica Neue';
+--wds-font-heading-sans-serif-h2: 500 1.5rem/0.094rem 'Helvetica Neue';
+--wds-font-heading-sans-serif-h3: 500 1.25rem/0.094rem 'Helvetica Neue';
+--wds-font-heading-sans-serif-h4: 500 1rem/0.094rem 'Helvetica Neue';
+--wds-font-heading-sans-serif-h5: 500 0.875rem/0.094rem 'Helvetica Neue';
+--wds-space-xxl: 6rem;
+--wds-space-xl: 4rem;
+--wds-space-l: 3rem;
+--wds-space-m: 2rem;
+--wds-space-s: 1rem;
+--wds-space-xs: 0.5rem;
+--wds-space-xxs: 0.25rem;
+  }
+}

split-json.js

@@ -15,7 +15,8 @@ const jsonData = JSON.parse(rawData);
 const baseDir = path.join(__dirname, 'tokens');
 
 // Define keys to exclude
-const excludeKeys = ['$themes'];
+// We don't need these tokens in the design system
+const excludeKeys = ['$themes', 'BREAKPOINTS/desktop', 'BREAKPOINTS/tablet', 'BREAKPOINTS/mobile'];
 
 // Function to write data to file
 const writeFile = (filePath, data) => {