From f8420bf2d853f45bcfee1fcc8783797e4a7486cd Mon Sep 17 00:00:00 2001 From: Ewelina Skibinska Date: Fri, 6 Dec 2024 14:12:53 +0000 Subject: [PATCH] adds functionality for the responsive tokens --- build.js | 36 ++++-- split-json.js | 6 +- tokens-generated/css/core.css | 39 ++++--- tokens-generated/css/responsive.css | 45 ++++++++ tokens-generated/css/semantic.css | 82 +++----------- tokens-generated/wds-tokens.json | 86 +++++--------- tokens/tokens-figma/core.json | 56 +++++---- tokens/tokens-figma/semantic.json | 162 ++++++--------------------- utils/filters/filterExcludeTokens.js | 9 +- utils/formats/formatResponsiveCSS.js | 88 +++++++++++++++ 10 files changed, 305 insertions(+), 304 deletions(-) create mode 100644 tokens-generated/css/responsive.css create mode 100644 utils/formats/formatResponsiveCSS.js diff --git a/build.js b/build.js index bf720d9..919d601 100644 --- 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(); \ No newline at end of file diff --git a/split-json.js b/split-json.js index f5bb530..f9f4178 100644 --- 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."); \ No newline at end of file diff --git a/tokens-generated/css/core.css b/tokens-generated/css/core.css index 88d4189..e7d9cd2 100644 --- 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 new file mode 100644 index 0000000..4fa7440 --- /dev/null +++ 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 index d9890f8..001a4ad 100644 --- 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; } diff --git a/tokens-generated/wds-tokens.json b/tokens-generated/wds-tokens.json index 8976439..f03db25 100644 --- a/tokens-generated/wds-tokens.json +++ b/tokens-generated/wds-tokens.json @@ -97,40 +97,17 @@ "80": "#574f00", "90": "#3d3800", "05": "#fffef0" - }, - "text": { - "default": "#292929", - "subtle": "#767676", - "lighter": "#f2f2f2", - "lightest": "#ffffff", - "light": "#cccccc" - }, - "system": { - "error": "#e10f2d", - "success": "#4c8026", - "warning": "#946f00", - "info": "#0055cc" - }, - "surface": { - "bg": { - "dark": "#002e45", - "light": "#ffffff" - }, - "accent": { - "amber": "#fec200", - "red": "#e72343" - } } }, "wc-color": { "neutral-cool": { - "100": "#121212", "200": "#fbfaf4", "300": "#e8e8e8", "400": "#d9d9d9", "500": "#878787", "600": "#6a6a6a", - "700": "#323232" + "700": "#323232", + "1000": "#121212" }, "neutral-warm": { "200": "#fff9e6", @@ -294,38 +271,25 @@ "900": "72px", "1200": "96px", "050": "4px", - "breakpoint-lg": { - "xxl": "96px", - "xl": "64px", - "lg": "48px", - "md": "32px", - "sm": "16px", - "xs": "8px", - "xxs": "4px" - }, - "breakpoint-md": { - "xxl": "72px", - "xl": "48px", - "lg": "32px", - "md": "24px", - "sm": "16px", - "xs": "8px", - "xxs": "4px" - }, - "breakpoint-sm": { - "xxl": "48px", - "xl": "32px", - "lg": "24px", - "md": "16px", - "sm": "12px", - "xs": "8px", - "xxs": "4px" + "075": "6px", + "static": { + "100": "8px", + "200": "16px", + "300": "24px", + "400": "32px", + "600": "48px", + "800": "64px", + "900": "72px", + "1200": "96px", + "050": "4px" } }, "dimension": { + "999": "999px", "base-8": { "25": "2px", "50": "4px", + "75": "6px", "100": "8px", "150": "12px", "200": "16px", @@ -341,12 +305,10 @@ "1200": "96px" } }, - "border": { - "radius": { - "circle": "50%", - "xs": "2px", - "sm": "4px" - } + "opacity": { + "50": "0.5", + "100": "1", + "transparent": "0" }, "text": { "heading-brand": { @@ -413,5 +375,15 @@ "sm": "700 12px/1.6 '“IBM Plex Mono”', '“Courier New”', Courier, monospace", "md": "700 14px/1.6 '“IBM Plex Mono”', '“Courier New”', Courier, monospace" } + }, + "border": { + "radius": { + "none": "0", + "xs": "2px", + "sm": "4px", + "md": "8px", + "lg": "16px", + "full": "999px" + } } } diff --git a/tokens/tokens-figma/core.json b/tokens/tokens-figma/core.json index 928c1de..a375fce 100644 --- a/tokens/tokens-figma/core.json +++ b/tokens/tokens-figma/core.json @@ -23,9 +23,10 @@ "type": "color", "description": "Not part of design system, only used for annotating page templates for designers" }, - "test": { - "value": "#f8ff00", - "type": "color" + "pink": { + "value": "#ea07e4", + "type": "color", + "description": "Not part of design system, only used for annotating page templates for designers" } }, "grey": { @@ -367,11 +368,6 @@ }, "wc-color": { "neutral-cool": { - "100": { - "value": "#121212", - "type": "color", - "parent": "Primitives/Value" - }, "200": { "value": "#fbfaf4", "type": "color", @@ -401,6 +397,11 @@ "value": "#323232", "type": "color", "parent": "Primitives/Value" + }, + "1000": { + "value": "#121212", + "type": "color", + "parent": "Primitives/Value" } }, "neutral-warm": { @@ -938,9 +939,17 @@ "050": { "value": "{dimension.base-8.50}", "type": "spacing" + }, + "075": { + "value": "{dimension.base-8.75}", + "type": "spacing" } }, "dimension": { + "999": { + "value": "999px", + "type": "dimension" + }, "base-8": { "25": { "value": "{dimension.base-8.100}*0.25", @@ -950,6 +959,10 @@ "value": "{dimension.base-8.100}*0.5", "type": "dimension" }, + "75": { + "value": "{dimension.base-8.100}*0.75", + "type": "dimension" + }, "100": { "value": "8px", "type": "dimension", @@ -1005,20 +1018,19 @@ } } }, - "border": { - "radius": { - "circle": { - "value": "50%", - "type": "borderRadius" - }, - "xs": { - "value": "{dimension.base-8.25}", - "type": "borderRadius" - }, - "sm": { - "value": "{dimension.base-8.50}", - "type": "borderRadius" - } + "opacity": { + "50": { + "value": "0.5", + "type": "opacity", + "description": "Used as a background overlay to mute the background when another layer (e.g. modal, drawer) is opened." + }, + "100": { + "value": "1", + "type": "opacity" + }, + "transparent": { + "value": "0", + "type": "opacity" } } } \ No newline at end of file diff --git a/tokens/tokens-figma/semantic.json b/tokens/tokens-figma/semantic.json index 7ccb452..7f63e0e 100644 --- a/tokens/tokens-figma/semantic.json +++ b/tokens/tokens-figma/semantic.json @@ -1,68 +1,4 @@ { - "color": { - "text": { - "default": { - "value": "{color.grey.80}", - "type": "color" - }, - "subtle": { - "value": "{color.grey.60}", - "type": "color" - }, - "lighter": { - "value": "{color.grey.05}", - "type": "color" - }, - "lightest": { - "value": "{color.white}", - "type": "color" - }, - "light": { - "value": "{color.grey.20}", - "type": "color" - } - }, - "system": { - "error": { - "value": "{color.red.60}", - "type": "color" - }, - "success": { - "value": "{color.green.60}", - "type": "color" - }, - "warning": { - "value": "{color.amber.60}", - "type": "color" - }, - "info": { - "value": "{color.blue.60}", - "type": "color" - } - }, - "surface": { - "bg": { - "dark": { - "value": "{color.blue.90}", - "type": "color" - }, - "light": { - "value": "{color.white}", - "type": "color" - } - }, - "accent": { - "amber": { - "value": "{color.amber.30}", - "type": "color" - }, - "red": { - "value": "{color.red.50}", - "type": "color" - } - } - } - }, "text": { "heading-brand": { "breakpoint-lg": { @@ -545,94 +481,70 @@ } }, "space": { - "breakpoint-lg": { - "xxl": { - "value": "{space.1200}", - "type": "spacing" - }, - "xl": { - "value": "{space.800}", - "type": "spacing" - }, - "lg": { - "value": "{space.600}", - "type": "spacing" - }, - "md": { - "value": "{space.400}", + "static": { + "100": { + "value": "{space.100}", "type": "spacing" }, - "sm": { + "200": { "value": "{space.200}", "type": "spacing" }, - "xs": { - "value": "{space.100}", + "300": { + "value": "{space.300}", "type": "spacing" }, - "xxs": { - "value": "{space.050}", - "type": "spacing" - } - }, - "breakpoint-md": { - "xxl": { - "value": "{space.900}", + "400": { + "value": "{space.400}", "type": "spacing" }, - "xl": { + "600": { "value": "{space.600}", "type": "spacing" }, - "lg": { - "value": "{space.400}", - "type": "spacing" - }, - "md": { - "value": "{space.300}", + "800": { + "value": "{space.800}", "type": "spacing" }, - "sm": { - "value": "{space.200}", + "900": { + "value": "{space.900}", "type": "spacing" }, - "xs": { - "value": "{space.100}", + "1200": { + "value": "{space.1200}", "type": "spacing" }, - "xxs": { + "050": { "value": "{space.050}", "type": "spacing" } - }, - "breakpoint-sm": { - "xxl": { - "value": "{space.600}", - "type": "spacing" + } + }, + "border": { + "radius": { + "none": { + "value": "0", + "type": "borderRadius" }, - "xl": { - "value": "{space.400}", - "type": "spacing" + "xs": { + "value": "{dimension.base-8.25}", + "type": "borderRadius" }, - "lg": { - "value": "{space.300}", - "type": "spacing" + "sm": { + "value": "{dimension.base-8.50}", + "type": "borderRadius" }, "md": { - "value": "{space.200}", - "type": "spacing" + "value": "{dimension.base-8.100}", + "type": "borderRadius" }, - "sm": { - "value": "{space.150}", - "type": "spacing" - }, - "xs": { - "value": "{space.100}", - "type": "spacing" + "lg": { + "value": "{dimension.base-8.200}", + "type": "borderRadius" }, - "xxs": { - "value": "{space.050}", - "type": "spacing" + "full": { + "value": "{dimension.999}", + "type": "borderRadius" } } } diff --git a/utils/filters/filterExcludeTokens.js b/utils/filters/filterExcludeTokens.js index 6b3d09c..8c141b5 100644 --- a/utils/filters/filterExcludeTokens.js +++ b/utils/filters/filterExcludeTokens.js @@ -1,7 +1,10 @@ // Define the array of excluded token paths const excludedPaths = ["asset", "annotations"]; -const filterExcludeTokens = (token) => - !token.path.some((part) => excludedPaths.includes(part)); +const filterExcludeTokens = (token, extraPaths = []) => { + const allExcludedPaths = [...excludedPaths, ...extraPaths]; -export default filterExcludeTokens; + return !token.path.some((part) => allExcludedPaths.includes(part)); +}; + +export default filterExcludeTokens; \ No newline at end of file diff --git a/utils/formats/formatResponsiveCSS.js b/utils/formats/formatResponsiveCSS.js new file mode 100644 index 0000000..9c9b28a --- /dev/null +++ b/utils/formats/formatResponsiveCSS.js @@ -0,0 +1,88 @@ +const bgName = { + mobile: "breakpoint-sm", + tablet: "breakpoint-md", + desktop: "breakpoint-lg", +}; + +const createRegex = () => { + const regexStr = Object.values(bgName) + .map((value) => `-${value}`) + .join("|"); + + return new RegExp(regexStr, "g"); +}; + +const formatResponsiveCSS = (dictionary) => { + const deviceTokenName = "grid"; + const excludeTokens = [deviceTokenName]; + + let output = ""; + + const excludedTokens = dictionary.allTokens.filter( + (token) => !excludeTokens.some((exclude) => token.path.includes(exclude)), + ); + const filterTokens = (name) => + excludedTokens.filter( + (token) => + token.path.includes(name) && !token.path.includes(deviceTokenName), + ); + + // Helper function to create CSS variables from tokens + const createVariables = (tokens) => { + return tokens + .map((token) => { + const name = token.name.replace(createRegex(), ""); + return `--${name}: ${token.value};\n`; + }) + .join(""); + }; + + const findDevice = (name) => { + return dictionary.allTokens.find( + (token) => + token.path.includes(deviceTokenName) && token.name.includes(name), + ); + }; + + // Add mobile first tokens + const mobileTokens = filterTokens(bgName.mobile); + if (mobileTokens?.length > 0) { + output += `:root {\n`; + output += createVariables(mobileTokens); + output += `}\n\n`; + } + + // Find breakpoint values + const tablet = findDevice(bgName.tablet); + const desktop = findDevice(bgName.desktop); + + if (tablet || desktop) { + // Add tablet tokens inside media query + const tabletTokens = filterTokens(bgName.tablet); + + if (tabletTokens?.length > 0) { + output += `@media (min-width: ${tablet.value}) {\n`; + output += ` :root {\n`; + output += createVariables(tabletTokens); + output += ` }\n`; + output += `}\n\n`; + } + + // Add desktop tokens inside media query + const desktopTokens = filterTokens(bgName.desktop); + + if (desktopTokens?.length > 0) { + output += `@media (min-width: ${desktop.value}) {\n`; + output += ` :root {\n`; + output += createVariables(desktopTokens); + output += ` }\n`; + output += `}\n`; + } + } else { + throw new Error("Tokens for tablet or desktop not found."); + } + + return output; +}; + +export default formatResponsiveCSS; \ No newline at end of file