adds functionality for the responsive tokens

wellcometrust · Dec 6, 2024 · f8420bf · f8420bf
1 parent b2f3342
commit f8420bf
Show file tree

Hide file tree

Showing 10 changed files with 305 additions and 304 deletions.
diff --git a/build.js b/build.js
@@ -4,6 +4,7 @@ import { registerTransforms } from "@tokens-studio/sd-transforms";
 import filterExcludeTokens from "./utils/filters/filterExcludeTokens.js";
 
 import formatFontFace from "./utils/formats/formatFontFace.js";
+import formatResponsiveCSS from "./utils/formats/formatResponsiveCSS.js";
 
 import transformFont from "./utils/transforms/transformFont.js";
 import transformToRem from "./utils/transforms/transformToRem.js";
@@ -25,15 +26,31 @@ const sd = new StyleDictionary({
       ...common,
       transforms: ["name/kebab", "custom/rem"],
       files: tokenGroups.map((groupName) => {
+        const extraPath =
+          groupName === "semantic"
+            ? ["breakpoint-lg", "breakpoint-md", "breakpoint-sm"]
+            : [];
+
         return {
           destination: `css/${groupName}.css`,
           format: "css/variables",
           filter: (token) =>
             token.filePath === `tokens/tokens-figma/${groupName}.json` &&
-            filterExcludeTokens(token),
+            filterExcludeTokens(token, extraPath),
         };
       }),
     },
+    cssResponsive: {
+      ...common,
+      transforms: ["name/kebab", "custom/rem"],
+      files: [
+        {
+          destination: "css/responsive.css",
+          format: "custom/css/responsive",
+          filter: (token) => filterExcludeTokens(token),
+        },
+      ],
+    },
     fonts: {
       ...common,
       transforms: ["custom/font"],
@@ -72,6 +89,11 @@ sd.registerFormat({
     formatFontFace(allTokens, options),
 });
 
+sd.registerFormat({
+  name: "custom/css/responsive",
+  format: ({ dictionary }) => formatResponsiveCSS(dictionary),
+});
+
 sd.registerTransform({
   name: "custom/font",
   type: "attribute",
@@ -84,15 +106,11 @@ sd.registerTransform({
   type: "value",
   transitive: true,
   filter: (token) =>
-    [
-      "sizing",
-      "spacing",
-      "borderRadius",
-      "fontSizes",
-      "letterSpacing",
-    ].includes(token.type),
+    ["spacing", "borderRadius", "fontSizes", "letterSpacing"].includes(
+      token.type,
+    ),
   transform: (token) => transformToRem(token.value),
 });
 
 sd.cleanAllPlatforms();
-sd.buildAllPlatforms();
+sd.buildAllPlatforms();
diff --git a/split-json.js b/split-json.js
@@ -15,7 +15,7 @@ const jsonData = JSON.parse(rawData);
 const baseDir = path.join(__dirname, "tokens/tokens-figma");
 
 // Define keys to include
-const includeKeys = ["GLOBAL/core", "GLOBAL/semantic"];
+const includeKeys = ["00 Core", "01 Semantic"];
 
 // Function to write data to file
 const writeFile = (filePath, data) => {
@@ -27,7 +27,7 @@ const writeFile = (filePath, data) => {
 includeKeys.forEach((key) => {
   if (Object.prototype.hasOwnProperty.call(jsonData, key)) {
     // Split the key into parts
-    let keyParts = key.split("/");
+    let keyParts = key.split(" ");
 
     // Remove the first part if there are multiple parts
     if (keyParts.length > 1) {
@@ -46,4 +46,4 @@ includeKeys.forEach((key) => {
   }
 });
 
-console.log("JSON files have been created in the tokens directory.");
+console.log("JSON files have been created in the tokens directory.");
diff --git a/tokens-generated/css/core.css b/tokens-generated/css/core.css
@@ -85,13 +85,13 @@
   --wds-color-yellow-80: #574f00;
   --wds-color-yellow-90: #3d3800;
   --wds-color-yellow-05: #fffef0;
-  --wds-wc-color-neutral-cool-100: #121212;
   --wds-wc-color-neutral-cool-200: #fbfaf4;
   --wds-wc-color-neutral-cool-300: #e8e8e8;
   --wds-wc-color-neutral-cool-400: #d9d9d9;
   --wds-wc-color-neutral-cool-500: #878787;
   --wds-wc-color-neutral-cool-600: #6a6a6a;
   --wds-wc-color-neutral-cool-700: #323232;
+  --wds-wc-color-neutral-cool-1000: #121212;
   --wds-wc-color-neutral-warm-200: #fff9e6;
   --wds-wc-color-neutral-warm-300: #edece4;
   --wds-wc-color-neutral-warm-400: #d9d8d0;
@@ -177,20 +177,20 @@
   --wds-font-size-bp-xl-f-1: 1.04375rem;
   --wds-font-size-bp-xl-f-2: 0.86875rem;
   --wds-font-size-bp-xl-f-3: 0.725rem;
-  --wds-grid-breakpoint-xs: 20rem; /* Web breakpoint - mobile */
-  --wds-grid-breakpoint-sm: 48rem; /* Web breakpoint - tablet */
-  --wds-grid-breakpoint-md: 64rem; /* Web breakpoint - tablet */
-  --wds-grid-breakpoint-lg: 90rem; /* Web breakpoint - desktop */
-  --wds-grid-breakpoint-xl: 120rem; /* Web breakpoint - large desktop */
-  --wds-grid-columns-lg: 0.75rem;
-  --wds-grid-columns-sm: 0.75rem;
-  --wds-grid-columns-xs: 0.375rem;
-  --wds-grid-margin-lg: 4.5rem;
-  --wds-grid-margin-sm: 2.25rem;
-  --wds-grid-margin-xs: 1rem;
-  --wds-grid-gutter-lg: 3rem;
-  --wds-grid-gutter-sm: 1.5rem;
-  --wds-grid-gutter-xs: 0.75rem;
+  --wds-grid-breakpoint-xs: 320px; /* Web breakpoint - mobile */
+  --wds-grid-breakpoint-sm: 768px; /* Web breakpoint - tablet */
+  --wds-grid-breakpoint-md: 1024px; /* Web breakpoint - tablet */
+  --wds-grid-breakpoint-lg: 1440px; /* Web breakpoint - desktop */
+  --wds-grid-breakpoint-xl: 1920px; /* Web breakpoint - large desktop */
+  --wds-grid-columns-lg: 12px;
+  --wds-grid-columns-sm: 12px;
+  --wds-grid-columns-xs: 6px;
+  --wds-grid-margin-lg: 72px;
+  --wds-grid-margin-sm: 36px;
+  --wds-grid-margin-xs: 16px;
+  --wds-grid-gutter-lg: 48px;
+  --wds-grid-gutter-sm: 24px;
+  --wds-grid-gutter-xs: 12px;
   --wds-space-0: 0;
   --wds-space-100: 0.5rem;
   --wds-space-150: 0.75rem;
@@ -202,8 +202,11 @@
   --wds-space-900: 4.5rem;
   --wds-space-1200: 6rem;
   --wds-space-050: 0.25rem;
+  --wds-space-075: 0.375rem;
+  --wds-dimension-999: 999px;
   --wds-dimension-base-8-25: 2px;
   --wds-dimension-base-8-50: 4px;
+  --wds-dimension-base-8-75: 6px;
   --wds-dimension-base-8-100: 8px; /* Base */
   --wds-dimension-base-8-150: 12px;
   --wds-dimension-base-8-200: 16px;
@@ -217,7 +220,7 @@
   --wds-dimension-base-8-1000: 80px;
   --wds-dimension-base-8-1100: 88px;
   --wds-dimension-base-8-1200: 96px;
-  --wds-border-radius-circle: 3.125rem;
-  --wds-border-radius-xs: 0.125rem;
-  --wds-border-radius-sm: 0.25rem;
+  --wds-opacity-50: 0.5; /* Used as a background overlay to mute the background when another layer (e.g. modal, drawer) is opened. */
+  --wds-opacity-100: 1;
+  --wds-opacity-transparent: 0;
 }
diff --git a/tokens-generated/css/responsive.css b/tokens-generated/css/responsive.css
@@ -0,0 +1,45 @@
+:root {
+--wds-text-heading-brand-xxl: 700 2rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
+--wds-text-heading-brand-xl: 700 1.5rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
+--wds-text-heading-brand-lg: 700 1.375rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
+--wds-text-heading-brand-md: 700 1.125rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
+--wds-text-heading-brand-sm: 700 1rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
+--wds-text-heading-brand-xs: 700 0.875rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
+--wds-text-heading-xl: 500 1.5rem/1.6 Inter, sans-serif;
+--wds-text-heading-lg: 500 1.375rem/1.6 Inter, sans-serif;
+--wds-text-heading-md: 500 1.125rem/1.6 Inter, sans-serif;
+--wds-text-heading-sm: 500 1rem/1.6 Inter, sans-serif;
+--wds-text-heading-xs: 500 0.875rem/1.6 Inter, sans-serif;
+}
+
+@media (min-width: 1024px) {
+  :root {
+--wds-text-heading-brand-xxl: 700 2.125rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
+--wds-text-heading-brand-xl: 700 1.75rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
+--wds-text-heading-brand-lg: 700 1.375rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
+--wds-text-heading-brand-md: 700 1.125rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
+--wds-text-heading-brand-sm: 700 1rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
+--wds-text-heading-brand-xs: 700 0.875rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
+--wds-text-heading-xl: 500 1.75rem/1.6 Inter, sans-serif;
+--wds-text-heading-lg: 500 1.375rem/1.6 Inter, sans-serif;
+--wds-text-heading-md: 500 1.125rem/1.6 Inter, sans-serif;
+--wds-text-heading-sm: 500 1rem/1.6 Inter, sans-serif;
+--wds-text-heading-xs: 500 0.875rem/1.6 Inter, sans-serif;
+  }
+}
+
+@media (min-width: 1440px) {
+  :root {
+--wds-text-heading-brand-xxl: 700 2.5rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
+--wds-text-heading-brand-xl: 700 2rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
+--wds-text-heading-brand-lg: 700 1.5rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
+--wds-text-heading-brand-md: 700 1.25rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
+--wds-text-heading-brand-sm: 700 1rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
+--wds-text-heading-brand-xs: 700 0.875rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
+--wds-text-heading-xl: 500 2rem/1.6 Inter, sans-serif;
+--wds-text-heading-lg: 500 1.5rem/1.6 Inter, sans-serif;
+--wds-text-heading-md: 500 1.25rem/1.6 Inter, sans-serif;
+--wds-text-heading-sm: 500 1rem/1.6 Inter, sans-serif;
+--wds-text-heading-xs: 500 0.875rem/1.6 Inter, sans-serif;
+  }
+}
diff --git a/tokens-generated/css/semantic.css b/tokens-generated/css/semantic.css
@@ -3,73 +3,15 @@
  */
 
 :root {
-  --wds-color-text-default: #292929;
-  --wds-color-text-subtle: #767676;
-  --wds-color-text-lighter: #f2f2f2;
-  --wds-color-text-lightest: #ffffff;
-  --wds-color-text-light: #cccccc;
-  --wds-color-system-error: #e10f2d;
-  --wds-color-system-success: #4c8026;
-  --wds-color-system-warning: #946f00;
-  --wds-color-system-info: #0055cc;
-  --wds-color-surface-bg-dark: #002e45;
-  --wds-color-surface-bg-light: #ffffff;
-  --wds-color-surface-accent-amber: #fec200;
-  --wds-color-surface-accent-red: #e72343;
-  --wds-space-breakpoint-lg-xxl: 6rem;
-  --wds-space-breakpoint-lg-xl: 4rem;
-  --wds-space-breakpoint-lg-lg: 3rem;
-  --wds-space-breakpoint-lg-md: 2rem;
-  --wds-space-breakpoint-lg-sm: 1rem;
-  --wds-space-breakpoint-lg-xs: 0.5rem;
-  --wds-space-breakpoint-lg-xxs: 0.25rem;
-  --wds-space-breakpoint-md-xxl: 4.5rem;
-  --wds-space-breakpoint-md-xl: 3rem;
-  --wds-space-breakpoint-md-lg: 2rem;
-  --wds-space-breakpoint-md-md: 1.5rem;
-  --wds-space-breakpoint-md-sm: 1rem;
-  --wds-space-breakpoint-md-xs: 0.5rem;
-  --wds-space-breakpoint-md-xxs: 0.25rem;
-  --wds-space-breakpoint-sm-xxl: 3rem;
-  --wds-space-breakpoint-sm-xl: 2rem;
-  --wds-space-breakpoint-sm-lg: 1.5rem;
-  --wds-space-breakpoint-sm-md: 1rem;
-  --wds-space-breakpoint-sm-sm: 0.75rem;
-  --wds-space-breakpoint-sm-xs: 0.5rem;
-  --wds-space-breakpoint-sm-xxs: 0.25rem;
-  --wds-text-heading-brand-breakpoint-lg-xxl: 700 2.5rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif; /* To be used for heroes */
-  --wds-text-heading-brand-breakpoint-lg-xl: 700 2rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
-  --wds-text-heading-brand-breakpoint-lg-lg: 700 1.5rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
-  --wds-text-heading-brand-breakpoint-lg-md: 700 1.25rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
-  --wds-text-heading-brand-breakpoint-lg-sm: 700 1rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
-  --wds-text-heading-brand-breakpoint-lg-xs: 700 0.875rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
-  --wds-text-heading-brand-breakpoint-md-xxl: 700 2.125rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif; /* To be used for heroes */
-  --wds-text-heading-brand-breakpoint-md-xl: 700 1.75rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
-  --wds-text-heading-brand-breakpoint-md-lg: 700 1.375rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
-  --wds-text-heading-brand-breakpoint-md-md: 700 1.125rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
-  --wds-text-heading-brand-breakpoint-md-sm: 700 1rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
-  --wds-text-heading-brand-breakpoint-md-xs: 700 0.875rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
-  --wds-text-heading-brand-breakpoint-sm-xxl: 700 2rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif; /* To be used for heroes */
-  --wds-text-heading-brand-breakpoint-sm-xl: 700 1.5rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
-  --wds-text-heading-brand-breakpoint-sm-lg: 700 1.375rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
-  --wds-text-heading-brand-breakpoint-sm-md: 700 1.125rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
-  --wds-text-heading-brand-breakpoint-sm-sm: 700 1rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
-  --wds-text-heading-brand-breakpoint-sm-xs: 700 0.875rem/1.6 Wellcome, “Wellcome-Bold”, sans-serif;
-  --wds-text-heading-breakpoint-lg-xl: 500 2rem/1.6 Inter, sans-serif;
-  --wds-text-heading-breakpoint-lg-lg: 500 1.5rem/1.6 Inter, sans-serif;
-  --wds-text-heading-breakpoint-lg-md: 500 1.25rem/1.6 Inter, sans-serif;
-  --wds-text-heading-breakpoint-lg-sm: 500 1rem/1.6 Inter, sans-serif;
-  --wds-text-heading-breakpoint-lg-xs: 500 0.875rem/1.6 Inter, sans-serif;
-  --wds-text-heading-breakpoint-md-xl: 500 1.75rem/1.6 Inter, sans-serif;
-  --wds-text-heading-breakpoint-md-lg: 500 1.375rem/1.6 Inter, sans-serif;
-  --wds-text-heading-breakpoint-md-md: 500 1.125rem/1.6 Inter, sans-serif;
-  --wds-text-heading-breakpoint-md-sm: 500 1rem/1.6 Inter, sans-serif;
-  --wds-text-heading-breakpoint-md-xs: 500 0.875rem/1.6 Inter, sans-serif;
-  --wds-text-heading-breakpoint-sm-xl: 500 1.5rem/1.6 Inter, sans-serif;
-  --wds-text-heading-breakpoint-sm-lg: 500 1.375rem/1.6 Inter, sans-serif;
-  --wds-text-heading-breakpoint-sm-md: 500 1.125rem/1.6 Inter, sans-serif;
-  --wds-text-heading-breakpoint-sm-sm: 500 1rem/1.6 Inter, sans-serif;
-  --wds-text-heading-breakpoint-sm-xs: 500 0.875rem/1.6 Inter, sans-serif;
+  --wds-space-static-100: 0.5rem;
+  --wds-space-static-200: 1rem;
+  --wds-space-static-300: 1.5rem;
+  --wds-space-static-400: 2rem;
+  --wds-space-static-600: 3rem;
+  --wds-space-static-800: 4rem;
+  --wds-space-static-900: 4.5rem;
+  --wds-space-static-1200: 6rem;
+  --wds-space-static-050: 0.25rem;
   --wds-text-body-xxl: 400 1.5rem/1.6 Inter, sans-serif;
   --wds-text-body-xl: 400 1.25rem/1.6 Inter, sans-serif;
   --wds-text-body-lg: 400 1.125rem/1.6 Inter, sans-serif;
@@ -79,4 +21,10 @@
   --wds-text-label-md: 600 1rem/1.6 Inter, sans-serif; /* Input label use */
   --wds-text-caption-sm: 700 0.75rem/1.6 '“IBM Plex Mono”', '“Courier New”', Courier, monospace;
   --wds-text-caption-md: 700 0.875rem/1.6 '“IBM Plex Mono”', '“Courier New”', Courier, monospace;
+  --wds-border-radius-none: 0;
+  --wds-border-radius-xs: 0.125rem;
+  --wds-border-radius-sm: 0.25rem;
+  --wds-border-radius-md: 0.5rem;
+  --wds-border-radius-lg: 1rem;
+  --wds-border-radius-full: 62.4375rem;
 }