From f767201186e66d3ac39e7093b7b9c9e5f4f565c9 Mon Sep 17 00:00:00 2001 From: Masoud Amjadi Date: Thu, 7 Nov 2024 12:36:58 -0500 Subject: [PATCH 1/3] feat(designtokens): add narrow fonts to design tokens --- .../src/common/styles-dictionary/build.mjs | 174 +-------- .../styles-dictionary/css/variables.css | 212 +++++++++-- .../custom-formatters/cssFormatter.mjs | 42 +++ .../custom-formatters/scssFormatter.mjs | 15 + .../custom-formatters/tailwindFormatter.mjs | 137 +++++++ .../styles-dictionary/design-tokens/font.json | 301 +++++++++++---- .../styles-dictionary/json/tailwind.json | 355 ++++++++++++------ .../styles-dictionary/scss/_variables.scss | 179 ++++----- 8 files changed, 924 insertions(+), 491 deletions(-) create mode 100644 packages/components/src/common/styles-dictionary/custom-formatters/cssFormatter.mjs create mode 100644 packages/components/src/common/styles-dictionary/custom-formatters/scssFormatter.mjs create mode 100644 packages/components/src/common/styles-dictionary/custom-formatters/tailwindFormatter.mjs diff --git a/packages/components/src/common/styles-dictionary/build.mjs b/packages/components/src/common/styles-dictionary/build.mjs index 66b872a81..01f627a62 100644 --- a/packages/components/src/common/styles-dictionary/build.mjs +++ b/packages/components/src/common/styles-dictionary/build.mjs @@ -2,188 +2,26 @@ import StyleDictionary from "style-dictionary"; import { dirname } from "path"; import { fileURLToPath } from "url"; -import cssFont from "css-font"; +import { cssFormatter } from "./custom-formatters/cssFormatter.mjs"; +import { scssFormatter } from "./custom-formatters/scssFormatter.mjs"; +import { tailwindFormatter } from "./custom-formatters/tailwindFormatter.mjs"; const DIRNAME = dirname(fileURLToPath(import.meta.url)); // REGISTER THE CUSTOM FORMATTERS -/** - * (masoudmanson): This is a custom format for generating CSS variables for light and dark modes. - * The CSS variables are generated based on the value and darkValue attributes of each token. - */ StyleDictionary.registerFormat({ - format: ({ dictionary }) => { - const lightMode = dictionary.allTokens - .map((token) => ` --${token.name}: ${token.value};`) - .join("\n"); - - const darkMode = dictionary.allTokens - .map((token) => { - return ["color", "border"].includes(token.attributes.type) - ? ` --${token.name}: ${token.darkValue};` - : ` --${token.name}: ${token.value};`; - }) - .join("\n"); - - return `@media (prefers-color-scheme: light) { - :root { -${lightMode} - } -} - -@media (prefers-color-scheme: dark) { - :root { -${darkMode} - } -}`; - }, + format: cssFormatter, name: "sds/css", }); -/** - * (masoudmanson): This is a custom format for generating SCSS variables for light and dark modes. - */ StyleDictionary.registerFormat({ - format: ({ dictionary }) => { - return dictionary.allTokens - .map((token) => { - if (token.darkValue) { - return `$${token.name}: ${token.value};\n$${token.name}-dark: ${token.darkValue};`; - } else { - return `$${token.name}: ${token.value};\n$${token.name}-dark: ${token.value};`; - } - }) - .join("\n"); - }, + format: scssFormatter, name: "sds/scss", }); -/** - * (masoudmanson): This is a custom format for generating Tailwind variables for light and dark modes. - */ StyleDictionary.registerFormat({ - format: ({ dictionary, options }) => { - function getName(name) { - const joinedName = typeof name === "string" ? name : name.join("-"); - const mappedName = options.remapNames?.[joinedName] ?? joinedName; - const result = options.prefix - ? `${options.prefix}-${mappedName}` - : mappedName; - - return result.toLowerCase().replace(" ", "-"); - } - - function convertToKebabCase(inputString) { - return inputString - .replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`) - .replace(/\d+/g, (match) => `-${match}`) - .replace(/^-/, "") - .replace(/-+/g, "-"); - } - - function transformDictionary(tokens, keys) { - const result = {}; - - for (const [name, token] of Object.entries(tokens)) { - if (!keys || keys.includes(name)) { - result[getName(name)] = token.value; - } - } - - return result; - } - - function transformColor(tokens) { - const colors = { - dark: {}, - light: {}, - }; - - function getColor(theToken) { - for (const [, iToken] of Object.entries(theToken)) { - if ("value" in iToken && "name" in iToken) { - colors.light[convertToKebabCase(iToken.name)] = iToken.value; - colors.dark[convertToKebabCase(iToken.name)] = iToken.darkValue; - } else { - getColor(iToken); - } - } - } - - getColor(tokens); - - return colors; - } - - function transformIconSizes(tokens) { - const width = {}; - const height = {}; - - for (const [iconSize, token] of Object.entries(tokens)) { - width[getName(`icon-${iconSize}`)] = token.height.value; - height[getName(`icon-${iconSize}`)] = token.width.value; - } - - return { height, width }; - } - - function transformFonts(tokens, keys) { - const fontSize = {}; - const lineHeight = {}; - const letterSpacing = {}; - const fontVariantNumeric = {}; - const textTransform = {}; - - for (const key of keys) { - for (const [size, fonts] of Object.entries(tokens[key])) { - for (const [, fontValue] of Object.entries(fonts)) { - const parsed = cssFont.parse(fontValue.font.value); - fontSize[getName([key, size])] = parsed.size; - lineHeight[getName([key, size])] = parsed.size; - - letterSpacing[getName([key, size])] = - fontValue["letter-spacing"].value; - textTransform[getName([key, size])] = fontValue["text-transform"] - ? fontValue["text-transform"].value - : "none"; - fontVariantNumeric[getName([key, size])] = fontValue[ - "font-variant-numeric" - ] - ? fontValue["font-variant-numeric"].value - : "normal"; - } - } - } - - return { - fontSize, - fontVariantNumeric, - letterSpacing, - lineHeight, - textTransform, - }; - } - - const { sds } = dictionary.tokens; - const tailwindConfig = { - fontFamily: transformDictionary(sds.font["font-family"]), - ...transformFonts(sds.font, [ - "body", - "caps", - "header", - "tabular", - "code", - ]), - ...transformIconSizes(sds.iconSize), - borderRadius: transformDictionary(sds.corner), - boxShadow: transformDictionary(sds["drop-shadow"]), - colors: transformColor(sds.color), - spacing: transformDictionary(sds.space), - }; - - return JSON.stringify(tailwindConfig, null, 2); - }, + format: tailwindFormatter, name: "sds/tailwind", }); diff --git a/packages/components/src/common/styles-dictionary/css/variables.css b/packages/components/src/common/styles-dictionary/css/variables.css index 8389e120f..b28917716 100644 --- a/packages/components/src/common/styles-dictionary/css/variables.css +++ b/packages/components/src/common/styles-dictionary/css/variables.css @@ -194,85 +194,161 @@ --sds-corner-m: 4px; --sds-corner-s: 2px; --sds-corner-none: 0px; - --sds-drop-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3); - --sds-drop-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15), 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15); - --sds-drop-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25); + --sds-drop-shadow-l: 0px 2px 12px 0px rgba(0, 0, 0, 0.3); + --sds-drop-shadow-m: 0px 2px 10px 0px rgba(0, 0, 0, 0.15), + 0px 2px 4px 0px rgba(0, 0, 0, 0.15); + --sds-drop-shadow-s: 0px 2px 4px 0px rgba(0, 0, 0, 0.25); --sds-drop-shadow-none: none; --sds-font-color: black; + --sds-font-color-narrow: black; --sds-font-font-family-body: "Inter", sans-serif; + --sds-font-font-family-body-narrow: "Inter", sans-serif; --sds-font-font-family-caps: "Inter", sans-serif; + --sds-font-font-family-caps-narrow: "Inter", sans-serif; --sds-font-font-family-code: "IBM Plex Mono", monospace; + --sds-font-font-family-code-narrow: "IBM Plex Mono", monospace; --sds-font-font-family-header: "Inter", sans-serif; + --sds-font-font-family-header-narrow: "Inter", sans-serif; --sds-font-font-family-tabular: "Inter", sans-serif; + --sds-font-font-family-tabular-narrow: "Inter", sans-serif; --sds-font-body-xxxs-400-font: 400 11px/16px "Inter", sans-serif; + --sds-font-body-xxxs-400-font-narrow: 400 12px/18px "Inter", sans-serif; --sds-font-body-xxxs-400-letter-spacing: 0.1px; + --sds-font-body-xxxs-400-letter-spacing-narrow: 0.1px; --sds-font-body-xxxs-600-font: 600 11px/16px "Inter", sans-serif; + --sds-font-body-xxxs-600-font-narrow: 600 12px/18px "Inter", sans-serif; --sds-font-body-xxxs-600-letter-spacing: 0.1px; + --sds-font-body-xxxs-600-letter-spacing-narrow: 0.1px; --sds-font-body-xxs-400-font: 400 12px/18px "Inter", sans-serif; + --sds-font-body-xxs-400-font-narrow: 400 12px/18px "Inter", sans-serif; --sds-font-body-xxs-400-letter-spacing: 0.1px; + --sds-font-body-xxs-400-letter-spacing-narrow: 0.1px; --sds-font-body-xxs-600-font: 600 12px/18px "Inter", sans-serif; + --sds-font-body-xxs-600-font-narrow: 600 12px/18px "Inter", sans-serif; --sds-font-body-xxs-600-letter-spacing: 0.1px; + --sds-font-body-xxs-600-letter-spacing-narrow: 0.1px; --sds-font-body-xs-400-font: 400 13px/20px "Inter", sans-serif; + --sds-font-body-xs-400-font-narrow: 400 13px/20px "Inter", sans-serif; --sds-font-body-xs-400-letter-spacing: 0.08px; + --sds-font-body-xs-400-letter-spacing-narrow: 0.08px; --sds-font-body-xs-600-font: 600 13px/20px "Inter", sans-serif; + --sds-font-body-xs-600-font-narrow: 600 13px/20px "Inter", sans-serif; --sds-font-body-xs-600-letter-spacing: 0.08px; + --sds-font-body-xs-600-letter-spacing-narrow: 0.08px; --sds-font-body-s-400-font: 400 14px/24px "Inter", sans-serif; + --sds-font-body-s-400-font-narrow: 400 14px/24px "Inter", sans-serif; --sds-font-body-s-400-letter-spacing: 0.08px; + --sds-font-body-s-400-letter-spacing-narrow: 0.08px; --sds-font-body-s-600-font: 600 14px/24px "Inter", sans-serif; + --sds-font-body-s-600-font-narrow: 600 14px/24px "Inter", sans-serif; --sds-font-body-s-600-letter-spacing: 0.08px; + --sds-font-body-s-600-letter-spacing-narrow: 0.08px; --sds-font-body-m-400-font: 400 16px/26px "Inter", sans-serif; + --sds-font-body-m-400-font-narrow: 400 14px/24px "Inter", sans-serif; --sds-font-body-m-400-letter-spacing: 0px; + --sds-font-body-m-400-letter-spacing-narrow: 0px; --sds-font-body-m-600-font: 600 16px/26px "Inter", sans-serif; + --sds-font-body-m-600-font-narrow: 600 14px/24px "Inter", sans-serif; --sds-font-body-m-600-letter-spacing: 0px; + --sds-font-body-m-600-letter-spacing-narrow: 0px; --sds-font-body-l-400-font: 400 18px/28px "Inter", sans-serif; + --sds-font-body-l-400-font-narrow: 400 16px/26px "Inter", sans-serif; --sds-font-body-l-400-letter-spacing: 0px; + --sds-font-body-l-400-letter-spacing-narrow: 0px; --sds-font-body-l-600-font: 600 18px/28px "Inter", sans-serif; + --sds-font-body-l-600-font-narrow: 600 16px/26px "Inter", sans-serif; --sds-font-body-l-600-letter-spacing: 0px; + --sds-font-body-l-600-letter-spacing-narrow: 0px; --sds-font-caps-xxxxs-600-font: 600 10px/14px "Inter", sans-serif; + --sds-font-caps-xxxxs-600-font-narrow: 600 11px/16px "Inter", sans-serif; --sds-font-caps-xxxxs-600-letter-spacing: 0.5px; - --sds-font-caps-xxxxs-600-text-transform: uppercase; + --sds-font-caps-xxxxs-600-letter-spacing-narrow: 0.5px; + --sds-font-caps-xxxxs-600-text-transform: uppercase; + --sds-font-caps-xxxxs-600-text-transform-narrow: uppercase; --sds-font-caps-xxxs-600-font: 600 11px/16px "Inter", sans-serif; + --sds-font-caps-xxxs-600-font-narrow: 600 11px/16px "Inter", sans-serif; --sds-font-caps-xxxs-600-letter-spacing: 0.5px; - --sds-font-caps-xxxs-600-text-transform: uppercase; + --sds-font-caps-xxxs-600-letter-spacing-narrow: 0.5px; + --sds-font-caps-xxxs-600-text-transform: uppercase; + --sds-font-caps-xxxs-600-text-transform-narrow: uppercase; --sds-font-caps-xxs-600-font: 600 12px/18px "Inter", sans-serif; + --sds-font-caps-xxs-600-font-narrow: 600 12px/18px "Inter", sans-serif; --sds-font-caps-xxs-600-letter-spacing: 0.5px; - --sds-font-caps-xxs-600-text-transform: uppercase; + --sds-font-caps-xxs-600-letter-spacing-narrow: 0.5px; + --sds-font-caps-xxs-600-text-transform: uppercase; + --sds-font-caps-xxs-600-text-transform-narrow: uppercase; --sds-font-header-xxxs-600-font: 600 11px/16px "Inter", sans-serif; + --sds-font-header-xxxs-600-font-narrow: 600 12px/18px "Inter", sans-serif; --sds-font-header-xxxs-600-letter-spacing: 0.1px; + --sds-font-header-xxxs-600-letter-spacing-narrow: 0.1px; --sds-font-header-xxs-600-font: 600 12px/18px "Inter", sans-serif; + --sds-font-header-xxs-600-font-narrow: 600 12px/18px "Inter", sans-serif; --sds-font-header-xxs-600-letter-spacing: 0.1px; + --sds-font-header-xxs-600-letter-spacing-narrow: 0.1px; --sds-font-header-xs-600-font: 600 13px/18px "Inter", sans-serif; + --sds-font-header-xs-600-font-narrow: 600 13px/18px "Inter", sans-serif; --sds-font-header-xs-600-letter-spacing: 0.08px; + --sds-font-header-xs-600-letter-spacing-narrow: 0.08px; --sds-font-header-s-600-font: 600 14px/20px "Inter", sans-serif; + --sds-font-header-s-600-font-narrow: 600 14px/20px "Inter", sans-serif; --sds-font-header-s-600-letter-spacing: 0.08px; + --sds-font-header-s-600-letter-spacing-narrow: 0.08px; --sds-font-header-m-600-font: 600 16px/22px "Inter", sans-serif; + --sds-font-header-m-600-font-narrow: 600 14px/20px "Inter", sans-serif; --sds-font-header-m-600-letter-spacing: 0px; + --sds-font-header-m-600-letter-spacing-narrow: 0.08px; --sds-font-header-l-600-font: 600 18px/24px "Inter", sans-serif; + --sds-font-header-l-600-font-narrow: 600 16px/22px "Inter", sans-serif; --sds-font-header-l-600-letter-spacing: 0px; + --sds-font-header-l-600-letter-spacing-narrow: 0px; --sds-font-header-xl-600-font: 600 22px/30px "Inter", sans-serif; + --sds-font-header-xl-600-font-narrow: 600 18px/24px "Inter", sans-serif; --sds-font-header-xl-600-letter-spacing: 0px; + --sds-font-header-xl-600-letter-spacing-narrow: 0px; --sds-font-header-xxl-600-font: 600 26px/34px "Inter", sans-serif; + --sds-font-header-xxl-600-font-narrow: 600 22px/30px "Inter", sans-serif; --sds-font-header-xxl-600-letter-spacing: 0px; + --sds-font-header-xxl-600-letter-spacing-narrow: 0px; --sds-font-tabular-xs-400-font: 400 13px/20px "Inter", sans-serif; + --sds-font-tabular-xs-400-font-narrow: 400 13px/20px "Inter", sans-serif; --sds-font-tabular-xs-400-font-variant-numeric: tabular-nums; + --sds-font-tabular-xs-400-font-variant-numeric-narrow: tabular-nums; --sds-font-tabular-xs-400-letter-spacing: 0px; + --sds-font-tabular-xs-400-letter-spacing-narrow: 0px; --sds-font-tabular-xs-600-font: 600 13px/20px "Inter", sans-serif; + --sds-font-tabular-xs-600-font-narrow: 600 13px/20px "Inter", sans-serif; --sds-font-tabular-xs-600-font-variant-numeric: tabular-nums; + --sds-font-tabular-xs-600-font-variant-numeric-narrow: tabular-nums; --sds-font-tabular-xs-600-letter-spacing: 0px; + --sds-font-tabular-xs-600-letter-spacing-narrow: 0px; --sds-font-tabular-s-400-font: 400 14px/24px "Inter", sans-serif; + --sds-font-tabular-s-400-font-narrow: 400 14px/24px "Inter", sans-serif; --sds-font-tabular-s-400-font-variant-numeric: tabular-nums; + --sds-font-tabular-s-400-font-variant-numeric-narrow: tabular-nums; --sds-font-tabular-s-400-letter-spacing: 0px; + --sds-font-tabular-s-400-letter-spacing-narrow: 0px; --sds-font-tabular-s-600-font: 600 14px/24px "Inter", sans-serif; + --sds-font-tabular-s-600-font-narrow: 600 14px/24px "Inter", sans-serif; --sds-font-tabular-s-600-font-variant-numeric: tabular-nums; + --sds-font-tabular-s-600-font-variant-numeric-narrow: tabular-nums; --sds-font-tabular-s-600-letter-spacing: 0px; + --sds-font-tabular-s-600-letter-spacing-narrow: 0px; --sds-font-code-xs-400-font: 400 13px/20px "IBM Plex Mono", monospace; + --sds-font-code-xs-400-font-narrow: 400 13px/20px "IBM Plex Mono", monospace; --sds-font-code-xs-400-letter-spacing: 0px; + --sds-font-code-xs-400-letter-spacing-narrow: 0px; --sds-font-code-xs-600-font: 600 13px/20px "IBM Plex Mono", monospace; + --sds-font-code-xs-600-font-narrow: 600 13px/20px "IBM Plex Mono", monospace; --sds-font-code-xs-600-letter-spacing: 0px; + --sds-font-code-xs-600-letter-spacing-narrow: 0px; --sds-font-code-s-400-font: 400 14px/24px "IBM Plex Mono", monospace; + --sds-font-code-s-400-font-narrow: 400 14px/24px "IBM Plex Mono", monospace; --sds-font-code-s-400-letter-spacing: 0px; + --sds-font-code-s-400-letter-spacing-narrow: 0px; --sds-font-code-s-600-font: 600 14px/24px "IBM Plex Mono", monospace; + --sds-font-code-s-600-font-narrow: 600 14px/24px "IBM Plex Mono", monospace; --sds-font-code-s-600-letter-spacing: 0px; + --sds-font-code-s-600-letter-spacing-narrow: 0px; --sds-icon-size-input-height: 16px; --sds-icon-size-input-width: 16px; --sds-icon-size-xs-height: 12px; @@ -317,9 +393,9 @@ --sds-border-info-thick: 2px solid #cde3ff; --sds-border-link-dashed: 1px dashed; --sds-border-link-solid: 1px solid; - --sds-border-negative-default: 1px solid #FFBDB3; - --sds-border-negative-extra-thick: 4px solid #FFBDB3; - --sds-border-negative-thick: 2px solid #FFBDB3; + --sds-border-negative-default: 1px solid #ffbdb3; + --sds-border-negative-extra-thick: 4px solid #ffbdb3; + --sds-border-negative-thick: 2px solid #ffbdb3; --sds-border-neutral-default: 1px solid #aaaaaa; --sds-border-neutral-extra-thick: 4px solid #aaaaaa; --sds-border-neutral-thick: 2px solid #aaaaaa; @@ -366,13 +442,13 @@ --sds-color-primitive-purple-700: #f0ebfe; --sds-color-primitive-purple-800: #fbf9ff; --sds-color-primitive-red-100: #630008; - --sds-color-primitive-red-200: #A30000; - --sds-color-primitive-red-300: #E52722; - --sds-color-primitive-red-400: #FF695B; - --sds-color-primitive-red-500: #FF9385; - --sds-color-primitive-red-600: #FFBDB3; - --sds-color-primitive-red-700: #FFD8D1; - --sds-color-primitive-red-800: #FFF1EE; + --sds-color-primitive-red-200: #a30000; + --sds-color-primitive-red-300: #e52722; + --sds-color-primitive-red-400: #ff695b; + --sds-color-primitive-red-500: #ff9385; + --sds-color-primitive-red-600: #ffbdb3; + --sds-color-primitive-red-700: #ffd8d1; + --sds-color-primitive-red-800: #fff1ee; --sds-color-primitive-yellow-100: #552300; --sds-color-primitive-yellow-200: #834500; --sds-color-primitive-yellow-300: #985a00; @@ -451,15 +527,15 @@ --sds-color-semantic-info-surface-primary: #002573; --sds-color-semantic-info-surface-secondary: #a2c9ff; --sds-color-semantic-info-text: #cde3ff; - --sds-color-semantic-negative-border: #FF9385; - --sds-color-semantic-negative-fill-hover: #FFBDB3; - --sds-color-semantic-negative-fill-pressed: #FFD8D1; - --sds-color-semantic-negative-fill-primary: #FF9385; + --sds-color-semantic-negative-border: #ff9385; + --sds-color-semantic-negative-fill-hover: #ffbdb3; + --sds-color-semantic-negative-fill-pressed: #ffd8d1; + --sds-color-semantic-negative-fill-primary: #ff9385; --sds-color-semantic-negative-fill-secondary: #630008; - --sds-color-semantic-negative-ornament: #FFBDB3; + --sds-color-semantic-negative-ornament: #ffbdb3; --sds-color-semantic-negative-surface-primary: #630008; - --sds-color-semantic-negative-surface-secondary: #FF9385; - --sds-color-semantic-negative-text: #FFBDB3; + --sds-color-semantic-negative-surface-secondary: #ff9385; + --sds-color-semantic-negative-text: #ffbdb3; --sds-color-semantic-neutral-border: #aaaaaa; --sds-color-semantic-neutral-fill-hover: #cdcdcd; --sds-color-semantic-neutral-fill-pressed: #ededed; @@ -491,85 +567,161 @@ --sds-corner-m: 4px; --sds-corner-s: 2px; --sds-corner-none: 0px; - --sds-drop-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3); - --sds-drop-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15), 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15); - --sds-drop-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25); + --sds-drop-shadow-l: 0px 2px 12px 0px rgba(0, 0, 0, 0.3); + --sds-drop-shadow-m: 0px 2px 10px 0px rgba(0, 0, 0, 0.15), + 0px 2px 4px 0px rgba(0, 0, 0, 0.15); + --sds-drop-shadow-s: 0px 2px 4px 0px rgba(0, 0, 0, 0.25); --sds-drop-shadow-none: none; --sds-font-color: black; + --sds-font-color-narrow: black; --sds-font-font-family-body: "Inter", sans-serif; + --sds-font-font-family-body-narrow: "Inter", sans-serif; --sds-font-font-family-caps: "Inter", sans-serif; + --sds-font-font-family-caps-narrow: "Inter", sans-serif; --sds-font-font-family-code: "IBM Plex Mono", monospace; + --sds-font-font-family-code-narrow: "IBM Plex Mono", monospace; --sds-font-font-family-header: "Inter", sans-serif; + --sds-font-font-family-header-narrow: "Inter", sans-serif; --sds-font-font-family-tabular: "Inter", sans-serif; + --sds-font-font-family-tabular-narrow: "Inter", sans-serif; --sds-font-body-xxxs-400-font: 400 11px/16px "Inter", sans-serif; + --sds-font-body-xxxs-400-font-narrow: 400 12px/18px "Inter", sans-serif; --sds-font-body-xxxs-400-letter-spacing: 0.1px; + --sds-font-body-xxxs-400-letter-spacing-narrow: 0.1px; --sds-font-body-xxxs-600-font: 600 11px/16px "Inter", sans-serif; + --sds-font-body-xxxs-600-font-narrow: 600 12px/18px "Inter", sans-serif; --sds-font-body-xxxs-600-letter-spacing: 0.1px; + --sds-font-body-xxxs-600-letter-spacing-narrow: 0.1px; --sds-font-body-xxs-400-font: 400 12px/18px "Inter", sans-serif; + --sds-font-body-xxs-400-font-narrow: 400 12px/18px "Inter", sans-serif; --sds-font-body-xxs-400-letter-spacing: 0.1px; + --sds-font-body-xxs-400-letter-spacing-narrow: 0.1px; --sds-font-body-xxs-600-font: 600 12px/18px "Inter", sans-serif; + --sds-font-body-xxs-600-font-narrow: 600 12px/18px "Inter", sans-serif; --sds-font-body-xxs-600-letter-spacing: 0.1px; + --sds-font-body-xxs-600-letter-spacing-narrow: 0.1px; --sds-font-body-xs-400-font: 400 13px/20px "Inter", sans-serif; + --sds-font-body-xs-400-font-narrow: 400 13px/20px "Inter", sans-serif; --sds-font-body-xs-400-letter-spacing: 0.08px; + --sds-font-body-xs-400-letter-spacing-narrow: 0.08px; --sds-font-body-xs-600-font: 600 13px/20px "Inter", sans-serif; + --sds-font-body-xs-600-font-narrow: 600 13px/20px "Inter", sans-serif; --sds-font-body-xs-600-letter-spacing: 0.08px; + --sds-font-body-xs-600-letter-spacing-narrow: 0.08px; --sds-font-body-s-400-font: 400 14px/24px "Inter", sans-serif; + --sds-font-body-s-400-font-narrow: 400 14px/24px "Inter", sans-serif; --sds-font-body-s-400-letter-spacing: 0.08px; + --sds-font-body-s-400-letter-spacing-narrow: 0.08px; --sds-font-body-s-600-font: 600 14px/24px "Inter", sans-serif; + --sds-font-body-s-600-font-narrow: 600 14px/24px "Inter", sans-serif; --sds-font-body-s-600-letter-spacing: 0.08px; + --sds-font-body-s-600-letter-spacing-narrow: 0.08px; --sds-font-body-m-400-font: 400 16px/26px "Inter", sans-serif; + --sds-font-body-m-400-font-narrow: 400 14px/24px "Inter", sans-serif; --sds-font-body-m-400-letter-spacing: 0px; + --sds-font-body-m-400-letter-spacing-narrow: 0px; --sds-font-body-m-600-font: 600 16px/26px "Inter", sans-serif; + --sds-font-body-m-600-font-narrow: 600 14px/24px "Inter", sans-serif; --sds-font-body-m-600-letter-spacing: 0px; + --sds-font-body-m-600-letter-spacing-narrow: 0px; --sds-font-body-l-400-font: 400 18px/28px "Inter", sans-serif; + --sds-font-body-l-400-font-narrow: 400 16px/26px "Inter", sans-serif; --sds-font-body-l-400-letter-spacing: 0px; + --sds-font-body-l-400-letter-spacing-narrow: 0px; --sds-font-body-l-600-font: 600 18px/28px "Inter", sans-serif; + --sds-font-body-l-600-font-narrow: 600 16px/26px "Inter", sans-serif; --sds-font-body-l-600-letter-spacing: 0px; + --sds-font-body-l-600-letter-spacing-narrow: 0px; --sds-font-caps-xxxxs-600-font: 600 10px/14px "Inter", sans-serif; + --sds-font-caps-xxxxs-600-font-narrow: 600 11px/16px "Inter", sans-serif; --sds-font-caps-xxxxs-600-letter-spacing: 0.5px; - --sds-font-caps-xxxxs-600-text-transform: uppercase; + --sds-font-caps-xxxxs-600-letter-spacing-narrow: 0.5px; + --sds-font-caps-xxxxs-600-text-transform: uppercase; + --sds-font-caps-xxxxs-600-text-transform-narrow: uppercase; --sds-font-caps-xxxs-600-font: 600 11px/16px "Inter", sans-serif; + --sds-font-caps-xxxs-600-font-narrow: 600 11px/16px "Inter", sans-serif; --sds-font-caps-xxxs-600-letter-spacing: 0.5px; - --sds-font-caps-xxxs-600-text-transform: uppercase; + --sds-font-caps-xxxs-600-letter-spacing-narrow: 0.5px; + --sds-font-caps-xxxs-600-text-transform: uppercase; + --sds-font-caps-xxxs-600-text-transform-narrow: uppercase; --sds-font-caps-xxs-600-font: 600 12px/18px "Inter", sans-serif; + --sds-font-caps-xxs-600-font-narrow: 600 12px/18px "Inter", sans-serif; --sds-font-caps-xxs-600-letter-spacing: 0.5px; - --sds-font-caps-xxs-600-text-transform: uppercase; + --sds-font-caps-xxs-600-letter-spacing-narrow: 0.5px; + --sds-font-caps-xxs-600-text-transform: uppercase; + --sds-font-caps-xxs-600-text-transform-narrow: uppercase; --sds-font-header-xxxs-600-font: 600 11px/16px "Inter", sans-serif; + --sds-font-header-xxxs-600-font-narrow: 600 12px/18px "Inter", sans-serif; --sds-font-header-xxxs-600-letter-spacing: 0.1px; + --sds-font-header-xxxs-600-letter-spacing-narrow: 0.1px; --sds-font-header-xxs-600-font: 600 12px/18px "Inter", sans-serif; + --sds-font-header-xxs-600-font-narrow: 600 12px/18px "Inter", sans-serif; --sds-font-header-xxs-600-letter-spacing: 0.1px; + --sds-font-header-xxs-600-letter-spacing-narrow: 0.1px; --sds-font-header-xs-600-font: 600 13px/18px "Inter", sans-serif; + --sds-font-header-xs-600-font-narrow: 600 13px/18px "Inter", sans-serif; --sds-font-header-xs-600-letter-spacing: 0.08px; + --sds-font-header-xs-600-letter-spacing-narrow: 0.08px; --sds-font-header-s-600-font: 600 14px/20px "Inter", sans-serif; + --sds-font-header-s-600-font-narrow: 600 14px/20px "Inter", sans-serif; --sds-font-header-s-600-letter-spacing: 0.08px; + --sds-font-header-s-600-letter-spacing-narrow: 0.08px; --sds-font-header-m-600-font: 600 16px/22px "Inter", sans-serif; + --sds-font-header-m-600-font-narrow: 600 14px/20px "Inter", sans-serif; --sds-font-header-m-600-letter-spacing: 0px; + --sds-font-header-m-600-letter-spacing-narrow: 0.08px; --sds-font-header-l-600-font: 600 18px/24px "Inter", sans-serif; + --sds-font-header-l-600-font-narrow: 600 16px/22px "Inter", sans-serif; --sds-font-header-l-600-letter-spacing: 0px; + --sds-font-header-l-600-letter-spacing-narrow: 0px; --sds-font-header-xl-600-font: 600 22px/30px "Inter", sans-serif; + --sds-font-header-xl-600-font-narrow: 600 18px/24px "Inter", sans-serif; --sds-font-header-xl-600-letter-spacing: 0px; + --sds-font-header-xl-600-letter-spacing-narrow: 0px; --sds-font-header-xxl-600-font: 600 26px/34px "Inter", sans-serif; + --sds-font-header-xxl-600-font-narrow: 600 22px/30px "Inter", sans-serif; --sds-font-header-xxl-600-letter-spacing: 0px; + --sds-font-header-xxl-600-letter-spacing-narrow: 0px; --sds-font-tabular-xs-400-font: 400 13px/20px "Inter", sans-serif; + --sds-font-tabular-xs-400-font-narrow: 400 13px/20px "Inter", sans-serif; --sds-font-tabular-xs-400-font-variant-numeric: tabular-nums; + --sds-font-tabular-xs-400-font-variant-numeric-narrow: tabular-nums; --sds-font-tabular-xs-400-letter-spacing: 0px; + --sds-font-tabular-xs-400-letter-spacing-narrow: 0px; --sds-font-tabular-xs-600-font: 600 13px/20px "Inter", sans-serif; + --sds-font-tabular-xs-600-font-narrow: 600 13px/20px "Inter", sans-serif; --sds-font-tabular-xs-600-font-variant-numeric: tabular-nums; + --sds-font-tabular-xs-600-font-variant-numeric-narrow: tabular-nums; --sds-font-tabular-xs-600-letter-spacing: 0px; + --sds-font-tabular-xs-600-letter-spacing-narrow: 0px; --sds-font-tabular-s-400-font: 400 14px/24px "Inter", sans-serif; + --sds-font-tabular-s-400-font-narrow: 400 14px/24px "Inter", sans-serif; --sds-font-tabular-s-400-font-variant-numeric: tabular-nums; + --sds-font-tabular-s-400-font-variant-numeric-narrow: tabular-nums; --sds-font-tabular-s-400-letter-spacing: 0px; + --sds-font-tabular-s-400-letter-spacing-narrow: 0px; --sds-font-tabular-s-600-font: 600 14px/24px "Inter", sans-serif; + --sds-font-tabular-s-600-font-narrow: 600 14px/24px "Inter", sans-serif; --sds-font-tabular-s-600-font-variant-numeric: tabular-nums; + --sds-font-tabular-s-600-font-variant-numeric-narrow: tabular-nums; --sds-font-tabular-s-600-letter-spacing: 0px; + --sds-font-tabular-s-600-letter-spacing-narrow: 0px; --sds-font-code-xs-400-font: 400 13px/20px "IBM Plex Mono", monospace; + --sds-font-code-xs-400-font-narrow: 400 13px/20px "IBM Plex Mono", monospace; --sds-font-code-xs-400-letter-spacing: 0px; + --sds-font-code-xs-400-letter-spacing-narrow: 0px; --sds-font-code-xs-600-font: 600 13px/20px "IBM Plex Mono", monospace; + --sds-font-code-xs-600-font-narrow: 600 13px/20px "IBM Plex Mono", monospace; --sds-font-code-xs-600-letter-spacing: 0px; + --sds-font-code-xs-600-letter-spacing-narrow: 0px; --sds-font-code-s-400-font: 400 14px/24px "IBM Plex Mono", monospace; + --sds-font-code-s-400-font-narrow: 400 14px/24px "IBM Plex Mono", monospace; --sds-font-code-s-400-letter-spacing: 0px; + --sds-font-code-s-400-letter-spacing-narrow: 0px; --sds-font-code-s-600-font: 600 14px/24px "IBM Plex Mono", monospace; + --sds-font-code-s-600-font-narrow: 600 14px/24px "IBM Plex Mono", monospace; --sds-font-code-s-600-letter-spacing: 0px; + --sds-font-code-s-600-letter-spacing-narrow: 0px; --sds-icon-size-input-height: 16px; --sds-icon-size-input-width: 16px; --sds-icon-size-xs-height: 12px; @@ -590,4 +742,4 @@ --sds-space-xl: 24px; --sds-space-xxl: 40px; } -} \ No newline at end of file +} diff --git a/packages/components/src/common/styles-dictionary/custom-formatters/cssFormatter.mjs b/packages/components/src/common/styles-dictionary/custom-formatters/cssFormatter.mjs new file mode 100644 index 000000000..7bdfac940 --- /dev/null +++ b/packages/components/src/common/styles-dictionary/custom-formatters/cssFormatter.mjs @@ -0,0 +1,42 @@ +/** + * (masoudmanson): This is a custom format for generating CSS variables for light and dark modes. + * The CSS variables are generated based on the value and darkValue attributes of each token. + */ +export function cssFormatter({ dictionary }) { + function printCssVariable(token, darkMode = false) { + // If the token is a font, we need to print both the regular and narrow values + if (token.attributes.type === "font") { + return ` --${token.name}: ${token.value};\n --${token.name}-narrow: ${token.narrowValue};`; + } + // If the token is a color or border and has a darkValue, we need to print both the light and dark values + else if ( + darkMode && + token.darkValue && + ["color", "border"].includes(token.attributes.type) + ) { + return ` --${token.name}: ${token.darkValue};`; + } + // Otherwise we just print the regular value + return ` --${token.name}: ${token.value};`; + } + + const lightMode = dictionary.allTokens + .map((token) => printCssVariable(token)) + .join("\n"); + + const darkMode = dictionary.allTokens + .map((token) => printCssVariable(token, true)) + .join("\n"); + + return `@media (prefers-color-scheme: light) { +:root { +${lightMode} +} +} + +@media (prefers-color-scheme: dark) { +:root { +${darkMode} +} +}`; +} diff --git a/packages/components/src/common/styles-dictionary/custom-formatters/scssFormatter.mjs b/packages/components/src/common/styles-dictionary/custom-formatters/scssFormatter.mjs new file mode 100644 index 000000000..8ef8b6489 --- /dev/null +++ b/packages/components/src/common/styles-dictionary/custom-formatters/scssFormatter.mjs @@ -0,0 +1,15 @@ +/** + * (masoudmanson): This is a custom format for generating SCSS variables for light and dark modes. + */ +export function scssFormatter({ dictionary }) { + return dictionary.allTokens + .map((token) => { + if (token.darkValue) { + return `$${token.name}: ${token.value};\n$${token.name}-dark: ${token.darkValue};`; + } else if (token.attributes.type === "font") { + return `$${token.name}: ${token.value};\n$${token.name}-narrow: ${token.narrowValue};`; + } + return `$${token.name}: ${token.value};`; + }) + .join("\n"); +} diff --git a/packages/components/src/common/styles-dictionary/custom-formatters/tailwindFormatter.mjs b/packages/components/src/common/styles-dictionary/custom-formatters/tailwindFormatter.mjs new file mode 100644 index 000000000..1aedcf899 --- /dev/null +++ b/packages/components/src/common/styles-dictionary/custom-formatters/tailwindFormatter.mjs @@ -0,0 +1,137 @@ +import cssFont from "css-font"; + +/** + * (masoudmanson): This is a custom format for generating Tailwind variables for light and dark modes. + */ +export function tailwindFormatter({ dictionary, options }) { + const { sds } = dictionary.tokens; + const tailwindConfig = { + fontFamily: transformDictionary(sds.font["font-family"], null, options), + ...transformFonts(sds.font, ["body", "caps", "header", "tabular", "code"]), + ...transformIconSizes(sds.iconSize), + borderRadius: transformDictionary(sds.corner, null, options), + boxShadow: transformDictionary(sds["drop-shadow"], null, options), + colors: transformColor(sds.color), + spacing: transformDictionary(sds.space, null, options), + }; + + return JSON.stringify(tailwindConfig, null, 2); +} + +function getName(name, options = {}) { + const joinedName = typeof name === "string" ? name : name.join("-"); + const mappedName = options.remapNames?.[joinedName] ?? joinedName; + const result = options.prefix + ? `${options.prefix}-${mappedName}` + : mappedName; + + return result.toLowerCase().replace(" ", "-"); +} + +function convertToKebabCase(inputString) { + return inputString + .replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`) + .replace(/\d+/g, (match) => `-${match}`) + .replace(/^-/, "") + .replace(/-+/g, "-"); +} + +function transformDictionary(tokens, keys, options = {}) { + const result = {}; + + for (const [name, token] of Object.entries(tokens)) { + if (!keys || keys.includes(name)) { + result[getName(name, options)] = token.value; + } + } + + return result; +} + +function transformColor(tokens) { + const colors = { + dark: {}, + light: {}, + }; + + function getColor(theToken) { + for (const [, iToken] of Object.entries(theToken)) { + if ("value" in iToken && "name" in iToken) { + colors.light[convertToKebabCase(iToken.name)] = iToken.value; + colors.dark[convertToKebabCase(iToken.name)] = iToken.darkValue; + } else { + getColor(iToken); + } + } + } + + getColor(tokens); + + return colors; +} + +function transformIconSizes(tokens) { + const width = {}; + const height = {}; + + for (const [iconSize, token] of Object.entries(tokens)) { + width[getName(`icon-${iconSize}`)] = token.height.value; + height[getName(`icon-${iconSize}`)] = token.width.value; + } + + return { height, width }; +} + +function transformFonts(tokens, keys) { + const fontSize = { narrow: {}, wide: {} }; + const lineHeight = { narrow: {}, wide: {} }; + const letterSpacing = { narrow: {}, wide: {} }; + const fontVariantNumeric = { narrow: {}, wide: {} }; + const textTransform = { narrow: {}, wide: {} }; + + const TEXT_TRANSFORM = "text-transform"; + const FONT_VARIANT_NUMERIC = "font-variant-numeric"; + + function makeFontValue(fontValue, name) { + const parsedWideFont = cssFont.parse(fontValue.font.value); + const parsedNarrowFont = cssFont.parse(fontValue.font.narrowValue); + + // Wide Style Fonts + fontSize.wide[name] = parsedWideFont.size; + lineHeight.wide[name] = parsedWideFont.size; + letterSpacing.wide[name] = fontValue["letter-spacing"].value; + textTransform.wide[name] = fontValue[TEXT_TRANSFORM] + ? fontValue[TEXT_TRANSFORM].value + : "none"; + fontVariantNumeric.wide[name] = fontValue[FONT_VARIANT_NUMERIC] + ? fontValue[FONT_VARIANT_NUMERIC].value + : "normal"; + + // Narrow Style Fonts + fontSize.narrow[name] = parsedNarrowFont.size; + lineHeight.narrow[name] = parsedNarrowFont.size; + letterSpacing.narrow[name] = fontValue["letter-spacing"].narrowValue; + textTransform.narrow[name] = fontValue[TEXT_TRANSFORM] + ? fontValue[TEXT_TRANSFORM].narrowValue + : "none"; + fontVariantNumeric.narrow[name] = fontValue[FONT_VARIANT_NUMERIC] + ? fontValue[FONT_VARIANT_NUMERIC].narrowValue + : "normal"; + } + + for (const key of keys) { + for (const [size, fonts] of Object.entries(tokens[key])) { + for (const [, fontValue] of Object.entries(fonts)) { + makeFontValue(fontValue, getName([key, size])); + } + } + } + + return { + fontSize, + fontVariantNumeric, + letterSpacing, + lineHeight, + textTransform, + }; +} diff --git a/packages/components/src/common/styles-dictionary/design-tokens/font.json b/packages/components/src/common/styles-dictionary/design-tokens/font.json index cf5d0db65..213a4f072 100644 --- a/packages/components/src/common/styles-dictionary/design-tokens/font.json +++ b/packages/components/src/common/styles-dictionary/design-tokens/font.json @@ -2,108 +2,162 @@ "sds": { "font": { "color": { - "value": "black" + "value": "black", + "narrowValue": "black" }, "font-family": { "body": { - "value": "\"Inter\", sans-serif" + "value": "\"Inter\", sans-serif", + "narrowValue": "\"Inter\", sans-serif" }, "caps": { - "value": "\"Inter\", sans-serif" + "value": "\"Inter\", sans-serif", + "narrowValue": "\"Inter\", sans-serif" }, "code": { - "value": "\"IBM Plex Mono\", monospace" + "value": "\"IBM Plex Mono\", monospace", + "narrowValue": "\"IBM Plex Mono\", monospace" }, "header": { - "value": "\"Inter\", sans-serif" + "value": "\"Inter\", sans-serif", + "narrowValue": "\"Inter\", sans-serif" }, "tabular": { - "value": "\"Inter\", sans-serif" + "value": "\"Inter\", sans-serif", + "narrowValue": "\"Inter\", sans-serif" } }, "body": { "xxxs": { "400": { "font": { - "value": "400 11px/16px {sds.font.font-family.body.value}" + "value": "400 11px/16px {sds.font.font-family.body.value}", + "narrowValue": "400 12px/18px {sds.font.font-family.body.narrowValue}" }, - "letter-spacing": { "value": "0.1px" } + "letter-spacing": { + "value": "0.1px", + "narrowValue": "0.1px" + } }, "600": { "font": { - "value": "600 11px/16px {sds.font.font-family.body.value}" + "value": "600 11px/16px {sds.font.font-family.body.value}", + "narrowValue": "600 12px/18px {sds.font.font-family.body.narrowValue}" }, - "letter-spacing": { "value": "0.1px" } + "letter-spacing": { + "value": "0.1px", + "narrowValue": "0.1px" + } } }, "xxs": { "400": { "font": { - "value": "400 12px/18px {sds.font.font-family.body.value}" + "value": "400 12px/18px {sds.font.font-family.body.value}", + "narrowValue": "400 12px/18px {sds.font.font-family.body.narrowValue}" }, - "letter-spacing": { "value": "0.1px" } + "letter-spacing": { + "value": "0.1px", + "narrowValue": "0.1px" + } }, "600": { "font": { - "value": "600 12px/18px {sds.font.font-family.body.value}" + "value": "600 12px/18px {sds.font.font-family.body.value}", + "narrowValue": "600 12px/18px {sds.font.font-family.body.narrowValue}" }, - "letter-spacing": { "value": "0.1px" } + "letter-spacing": { + "value": "0.1px", + "narrowValue": "0.1px" + } } }, "xs": { "400": { "font": { - "value": "400 13px/20px {sds.font.font-family.body.value}" + "value": "400 13px/20px {sds.font.font-family.body.value}", + "narrowValue": "400 13px/20px {sds.font.font-family.body.narrowValue}" }, - "letter-spacing": { "value": "0.08px" } + "letter-spacing": { + "value": "0.08px", + "narrowValue": "0.08px" + } }, "600": { "font": { - "value": "600 13px/20px {sds.font.font-family.body.value}" + "value": "600 13px/20px {sds.font.font-family.body.value}", + "narrowValue": "600 13px/20px {sds.font.font-family.body.narrowValue}" }, - "letter-spacing": { "value": "0.08px" } + "letter-spacing": { + "value": "0.08px", + "narrowValue": "0.08px" + } } }, "s": { "400": { "font": { - "value": "400 14px/24px {sds.font.font-family.body.value}" + "value": "400 14px/24px {sds.font.font-family.body.value}", + "narrowValue": "400 14px/24px {sds.font.font-family.body.narrowValue}" }, - "letter-spacing": { "value": "0.08px" } + "letter-spacing": { + "value": "0.08px", + "narrowValue": "0.08px" + } }, "600": { "font": { - "value": "600 14px/24px {sds.font.font-family.body.value}" + "value": "600 14px/24px {sds.font.font-family.body.value}", + "narrowValue": "600 14px/24px {sds.font.font-family.body.narrowValue}" }, - "letter-spacing": { "value": "0.08px" } + "letter-spacing": { + "value": "0.08px", + "narrowValue": "0.08px" + } } }, "m": { "400": { "font": { - "value": "400 16px/26px {sds.font.font-family.body.value}" + "value": "400 16px/26px {sds.font.font-family.body.value}", + "narrowValue": "400 14px/24px {sds.font.font-family.body.narrowValue}" }, - "letter-spacing": { "value": "0px" } + "letter-spacing": { + "value": "0px", + "narrowValue": "0px" + } }, "600": { "font": { - "value": "600 16px/26px {sds.font.font-family.body.value}" + "value": "600 16px/26px {sds.font.font-family.body.value}", + "narrowValue": "600 14px/24px {sds.font.font-family.body.narrowValue}" }, - "letter-spacing": { "value": "0px" } + "letter-spacing": { + "value": "0px", + "narrowValue": "0px" + } } }, "l": { "400": { "font": { - "value": "400 18px/28px {sds.font.font-family.body.value}" + "value": "400 18px/28px {sds.font.font-family.body.value}", + "narrowValue": "400 16px/26px {sds.font.font-family.body.narrowValue}" }, - "letter-spacing": { "value": "0px" } + "letter-spacing": { + "value": "0px", + "narrowValue": "0px" + } }, "600": { "font": { - "value": "600 18px/28px {sds.font.font-family.body.value}" + "value": "600 18px/28px {sds.font.font-family.body.value}", + "narrowValue": "600 16px/26px {sds.font.font-family.body.narrowValue}" }, - "letter-spacing": { "value": "0px" } + "letter-spacing": { + "value": "0px", + "narrowValue": "0px" + } } } }, @@ -111,28 +165,49 @@ "xxxxs": { "600": { "font": { - "value": "600 10px/14px {sds.font.font-family.caps.value}" + "value": "600 10px/14px {sds.font.font-family.caps.value}", + "narrowValue": "600 11px/16px {sds.font.font-family.caps.narrowValue}" }, - "letter-spacing": { "value": "0.5px" }, - "text-transform": { "value": " uppercase" } + "letter-spacing": { + "value": "0.5px", + "narrowValue": "0.5px" + }, + "text-transform": { + "value": " uppercase", + "narrowValue": " uppercase" + } } }, "xxxs": { "600": { "font": { - "value": "600 11px/16px {sds.font.font-family.caps.value}" + "value": "600 11px/16px {sds.font.font-family.caps.value}", + "narrowValue": "600 11px/16px {sds.font.font-family.caps.narrowValue}" + }, + "letter-spacing": { + "value": "0.5px", + "narrowValue": "0.5px" }, - "letter-spacing": { "value": "0.5px" }, - "text-transform": { "value": " uppercase" } + "text-transform": { + "value": " uppercase", + "narrowValue": " uppercase" + } } }, "xxs": { "600": { "font": { - "value": "600 12px/18px {sds.font.font-family.caps.value}" + "value": "600 12px/18px {sds.font.font-family.caps.value}", + "narrowValue": "600 12px/18px {sds.font.font-family.caps.narrowValue}" }, - "letter-spacing": { "value": "0.5px" }, - "text-transform": { "value": " uppercase" } + "letter-spacing": { + "value": "0.5px", + "narrowValue": "0.5px" + }, + "text-transform": { + "value": " uppercase", + "narrowValue": " uppercase" + } } } }, @@ -140,65 +215,97 @@ "xxxs": { "600": { "font": { - "value": "600 11px/16px {sds.font.font-family.header.value}" + "value": "600 11px/16px {sds.font.font-family.header.value}", + "narrowValue": "600 12px/18px {sds.font.font-family.header.narrowValue}" }, - "letter-spacing": { "value": "0.1px" } + "letter-spacing": { + "value": "0.1px", + "narrowValue": "0.1px" + } } }, "xxs": { "600": { "font": { - "value": "600 12px/18px {sds.font.font-family.header.value}" + "value": "600 12px/18px {sds.font.font-family.header.value}", + "narrowValue": "600 12px/18px {sds.font.font-family.header.narrowValue}" }, - "letter-spacing": { "value": "0.1px" } + "letter-spacing": { + "value": "0.1px", + "narrowValue": "0.1px" + } } }, "xs": { "600": { "font": { - "value": "600 13px/18px {sds.font.font-family.header.value}" + "value": "600 13px/18px {sds.font.font-family.header.value}", + "narrowValue": "600 13px/18px {sds.font.font-family.header.narrowValue}" }, - "letter-spacing": { "value": "0.08px" } + "letter-spacing": { + "value": "0.08px", + "narrowValue": "0.08px" + } } }, "s": { "600": { "font": { - "value": "600 14px/20px {sds.font.font-family.header.value}" + "value": "600 14px/20px {sds.font.font-family.header.value}", + "narrowValue": "600 14px/20px {sds.font.font-family.header.narrowValue}" }, - "letter-spacing": { "value": "0.08px" } + "letter-spacing": { + "value": "0.08px", + "narrowValue": "0.08px" + } } }, "m": { "600": { "font": { - "value": "600 16px/22px {sds.font.font-family.header.value}" + "value": "600 16px/22px {sds.font.font-family.header.value}", + "narrowValue": "600 14px/20px {sds.font.font-family.header.narrowValue}" }, - "letter-spacing": { "value": "0px" } + "letter-spacing": { + "value": "0px", + "narrowValue": "0.08px" + } } }, "l": { "600": { "font": { - "value": "600 18px/24px {sds.font.font-family.header.value}" + "value": "600 18px/24px {sds.font.font-family.header.value}", + "narrowValue": "600 16px/22px {sds.font.font-family.header.narrowValue}" }, - "letter-spacing": { "value": "0px" } + "letter-spacing": { + "value": "0px", + "narrowValue": "0px" + } } }, "xl": { "600": { "font": { - "value": "600 22px/30px {sds.font.font-family.header.value}" + "value": "600 22px/30px {sds.font.font-family.header.value}", + "narrowValue": "600 18px/24px {sds.font.font-family.header.narrowValue}" }, - "letter-spacing": { "value": "0px" } + "letter-spacing": { + "value": "0px", + "narrowValue": "0px" + } } }, "xxl": { "600": { "font": { - "value": "600 26px/34px {sds.font.font-family.header.value}" + "value": "600 26px/34px {sds.font.font-family.header.value}", + "narrowValue": "600 22px/30px {sds.font.font-family.header.narrowValue}" }, - "letter-spacing": { "value": "0px" } + "letter-spacing": { + "value": "0px", + "narrowValue": "0px" + } } } }, @@ -206,33 +313,61 @@ "xs": { "400": { "font": { - "value": "400 13px/20px {sds.font.font-family.tabular.value}" + "value": "400 13px/20px {sds.font.font-family.tabular.value}", + "narrowValue": "400 13px/20px {sds.font.font-family.tabular.narrowValue}" + }, + "font-variant-numeric": { + "value": "tabular-nums", + "narrowValue": "tabular-nums" }, - "font-variant-numeric": { "value": "tabular-nums" }, - "letter-spacing": { "value": "0px" } + "letter-spacing": { + "value": "0px", + "narrowValue": "0px" + } }, "600": { "font": { - "value": "600 13px/20px {sds.font.font-family.tabular.value}" + "value": "600 13px/20px {sds.font.font-family.tabular.value}", + "narrowValue": "600 13px/20px {sds.font.font-family.tabular.narrowValue}" }, - "font-variant-numeric": { "value": "tabular-nums" }, - "letter-spacing": { "value": "0px" } + "font-variant-numeric": { + "value": "tabular-nums", + "narrowValue": "tabular-nums" + }, + "letter-spacing": { + "value": "0px", + "narrowValue": "0px" + } } }, "s": { "400": { "font": { - "value": "400 14px/24px {sds.font.font-family.tabular.value}" + "value": "400 14px/24px {sds.font.font-family.tabular.value}", + "narrowValue": "400 14px/24px {sds.font.font-family.tabular.narrowValue}" + }, + "font-variant-numeric": { + "value": "tabular-nums", + "narrowValue": "tabular-nums" }, - "font-variant-numeric": { "value": "tabular-nums" }, - "letter-spacing": { "value": "0px" } + "letter-spacing": { + "value": "0px", + "narrowValue": "0px" + } }, "600": { "font": { - "value": "600 14px/24px {sds.font.font-family.tabular.value}" + "value": "600 14px/24px {sds.font.font-family.tabular.value}", + "narrowValue": "600 14px/24px {sds.font.font-family.tabular.narrowValue}" + }, + "font-variant-numeric": { + "value": "tabular-nums", + "narrowValue": "tabular-nums" }, - "font-variant-numeric": { "value": "tabular-nums" }, - "letter-spacing": { "value": "0px" } + "letter-spacing": { + "value": "0px", + "narrowValue": "0px" + } } } }, @@ -240,29 +375,45 @@ "xs": { "400": { "font": { - "value": "400 13px/20px {sds.font.font-family.code.value}" + "value": "400 13px/20px {sds.font.font-family.code.value}", + "narrowValue": "400 13px/20px {sds.font.font-family.code.narrowValue}" }, - "letter-spacing": { "value": "0px" } + "letter-spacing": { + "value": "0px", + "narrowValue": "0px" + } }, "600": { "font": { - "value": "600 13px/20px {sds.font.font-family.code.value}" + "value": "600 13px/20px {sds.font.font-family.code.value}", + "narrowValue": "600 13px/20px {sds.font.font-family.code.narrowValue}" }, - "letter-spacing": { "value": "0px" } + "letter-spacing": { + "value": "0px", + "narrowValue": "0px" + } } }, "s": { "400": { "font": { - "value": "400 14px/24px {sds.font.font-family.code.value}" + "value": "400 14px/24px {sds.font.font-family.code.value}", + "narrowValue": "400 14px/24px {sds.font.font-family.code.narrowValue}" }, - "letter-spacing": { "value": "0px" } + "letter-spacing": { + "value": "0px", + "narrowValue": "0px" + } }, "600": { "font": { - "value": "600 14px/24px {sds.font.font-family.code.value}" + "value": "600 14px/24px {sds.font.font-family.code.value}", + "narrowValue": "600 14px/24px {sds.font.font-family.code.narrowValue}" }, - "letter-spacing": { "value": "0px" } + "letter-spacing": { + "value": "0px", + "narrowValue": "0px" + } } } } diff --git a/packages/components/src/common/styles-dictionary/json/tailwind.json b/packages/components/src/common/styles-dictionary/json/tailwind.json index c1322921b..c316b333e 100644 --- a/packages/components/src/common/styles-dictionary/json/tailwind.json +++ b/packages/components/src/common/styles-dictionary/json/tailwind.json @@ -7,133 +7,258 @@ "sds-tabular": "\"Inter\", sans-serif" }, "fontSize": { - "sds-body-xxxs": "11px", - "sds-body-xxs": "12px", - "sds-body-xs": "13px", - "sds-body-s": "14px", - "sds-body-m": "16px", - "sds-body-l": "18px", - "sds-caps-xxxxs": "10px", - "sds-caps-xxxs": "11px", - "sds-caps-xxs": "12px", - "sds-header-xxxs": "11px", - "sds-header-xxs": "12px", - "sds-header-xs": "13px", - "sds-header-s": "14px", - "sds-header-m": "16px", - "sds-header-l": "18px", - "sds-header-xl": "22px", - "sds-header-xxl": "26px", - "sds-tabular-xs": "13px", - "sds-tabular-s": "14px", - "sds-code-xs": "13px", - "sds-code-s": "14px" + "narrow": { + "body-xxxs": "12px", + "body-xxs": "12px", + "body-xs": "13px", + "body-s": "14px", + "body-m": "14px", + "body-l": "16px", + "caps-xxxxs": "11px", + "caps-xxxs": "11px", + "caps-xxs": "12px", + "header-xxxs": "12px", + "header-xxs": "12px", + "header-xs": "13px", + "header-s": "14px", + "header-m": "14px", + "header-l": "16px", + "header-xl": "18px", + "header-xxl": "22px", + "tabular-xs": "13px", + "tabular-s": "14px", + "code-xs": "13px", + "code-s": "14px" + }, + "wide": { + "body-xxxs": "11px", + "body-xxs": "12px", + "body-xs": "13px", + "body-s": "14px", + "body-m": "16px", + "body-l": "18px", + "caps-xxxxs": "10px", + "caps-xxxs": "11px", + "caps-xxs": "12px", + "header-xxxs": "11px", + "header-xxs": "12px", + "header-xs": "13px", + "header-s": "14px", + "header-m": "16px", + "header-l": "18px", + "header-xl": "22px", + "header-xxl": "26px", + "tabular-xs": "13px", + "tabular-s": "14px", + "code-xs": "13px", + "code-s": "14px" + } }, "fontVariantNumeric": { - "sds-body-xxxs": "normal", - "sds-body-xxs": "normal", - "sds-body-xs": "normal", - "sds-body-s": "normal", - "sds-body-m": "normal", - "sds-body-l": "normal", - "sds-caps-xxxxs": "normal", - "sds-caps-xxxs": "normal", - "sds-caps-xxs": "normal", - "sds-header-xxxs": "normal", - "sds-header-xxs": "normal", - "sds-header-xs": "normal", - "sds-header-s": "normal", - "sds-header-m": "normal", - "sds-header-l": "normal", - "sds-header-xl": "normal", - "sds-header-xxl": "normal", - "sds-tabular-xs": "tabular-nums", - "sds-tabular-s": "tabular-nums", - "sds-code-xs": "normal", - "sds-code-s": "normal" + "narrow": { + "body-xxxs": "normal", + "body-xxs": "normal", + "body-xs": "normal", + "body-s": "normal", + "body-m": "normal", + "body-l": "normal", + "caps-xxxxs": "normal", + "caps-xxxs": "normal", + "caps-xxs": "normal", + "header-xxxs": "normal", + "header-xxs": "normal", + "header-xs": "normal", + "header-s": "normal", + "header-m": "normal", + "header-l": "normal", + "header-xl": "normal", + "header-xxl": "normal", + "tabular-xs": "tabular-nums", + "tabular-s": "tabular-nums", + "code-xs": "normal", + "code-s": "normal" + }, + "wide": { + "body-xxxs": "normal", + "body-xxs": "normal", + "body-xs": "normal", + "body-s": "normal", + "body-m": "normal", + "body-l": "normal", + "caps-xxxxs": "normal", + "caps-xxxs": "normal", + "caps-xxs": "normal", + "header-xxxs": "normal", + "header-xxs": "normal", + "header-xs": "normal", + "header-s": "normal", + "header-m": "normal", + "header-l": "normal", + "header-xl": "normal", + "header-xxl": "normal", + "tabular-xs": "tabular-nums", + "tabular-s": "tabular-nums", + "code-xs": "normal", + "code-s": "normal" + } }, "letterSpacing": { - "sds-body-xxxs": "0.1px", - "sds-body-xxs": "0.1px", - "sds-body-xs": "0.08px", - "sds-body-s": "0.08px", - "sds-body-m": "0px", - "sds-body-l": "0px", - "sds-caps-xxxxs": "0.5px", - "sds-caps-xxxs": "0.5px", - "sds-caps-xxs": "0.5px", - "sds-header-xxxs": "0.1px", - "sds-header-xxs": "0.1px", - "sds-header-xs": "0.08px", - "sds-header-s": "0.08px", - "sds-header-m": "0px", - "sds-header-l": "0px", - "sds-header-xl": "0px", - "sds-header-xxl": "0px", - "sds-tabular-xs": "0px", - "sds-tabular-s": "0px", - "sds-code-xs": "0px", - "sds-code-s": "0px" + "narrow": { + "body-xxxs": "0.1px", + "body-xxs": "0.1px", + "body-xs": "0.08px", + "body-s": "0.08px", + "body-m": "0px", + "body-l": "0px", + "caps-xxxxs": "0.5px", + "caps-xxxs": "0.5px", + "caps-xxs": "0.5px", + "header-xxxs": "0.1px", + "header-xxs": "0.1px", + "header-xs": "0.08px", + "header-s": "0.08px", + "header-m": "0.08px", + "header-l": "0px", + "header-xl": "0px", + "header-xxl": "0px", + "tabular-xs": "0px", + "tabular-s": "0px", + "code-xs": "0px", + "code-s": "0px" + }, + "wide": { + "body-xxxs": "0.1px", + "body-xxs": "0.1px", + "body-xs": "0.08px", + "body-s": "0.08px", + "body-m": "0px", + "body-l": "0px", + "caps-xxxxs": "0.5px", + "caps-xxxs": "0.5px", + "caps-xxs": "0.5px", + "header-xxxs": "0.1px", + "header-xxs": "0.1px", + "header-xs": "0.08px", + "header-s": "0.08px", + "header-m": "0px", + "header-l": "0px", + "header-xl": "0px", + "header-xxl": "0px", + "tabular-xs": "0px", + "tabular-s": "0px", + "code-xs": "0px", + "code-s": "0px" + } }, "lineHeight": { - "sds-body-xxxs": "11px", - "sds-body-xxs": "12px", - "sds-body-xs": "13px", - "sds-body-s": "14px", - "sds-body-m": "16px", - "sds-body-l": "18px", - "sds-caps-xxxxs": "10px", - "sds-caps-xxxs": "11px", - "sds-caps-xxs": "12px", - "sds-header-xxxs": "11px", - "sds-header-xxs": "12px", - "sds-header-xs": "13px", - "sds-header-s": "14px", - "sds-header-m": "16px", - "sds-header-l": "18px", - "sds-header-xl": "22px", - "sds-header-xxl": "26px", - "sds-tabular-xs": "13px", - "sds-tabular-s": "14px", - "sds-code-xs": "13px", - "sds-code-s": "14px" + "narrow": { + "body-xxxs": "12px", + "body-xxs": "12px", + "body-xs": "13px", + "body-s": "14px", + "body-m": "14px", + "body-l": "16px", + "caps-xxxxs": "11px", + "caps-xxxs": "11px", + "caps-xxs": "12px", + "header-xxxs": "12px", + "header-xxs": "12px", + "header-xs": "13px", + "header-s": "14px", + "header-m": "14px", + "header-l": "16px", + "header-xl": "18px", + "header-xxl": "22px", + "tabular-xs": "13px", + "tabular-s": "14px", + "code-xs": "13px", + "code-s": "14px" + }, + "wide": { + "body-xxxs": "11px", + "body-xxs": "12px", + "body-xs": "13px", + "body-s": "14px", + "body-m": "16px", + "body-l": "18px", + "caps-xxxxs": "10px", + "caps-xxxs": "11px", + "caps-xxs": "12px", + "header-xxxs": "11px", + "header-xxs": "12px", + "header-xs": "13px", + "header-s": "14px", + "header-m": "16px", + "header-l": "18px", + "header-xl": "22px", + "header-xxl": "26px", + "tabular-xs": "13px", + "tabular-s": "14px", + "code-xs": "13px", + "code-s": "14px" + } }, "textTransform": { - "sds-body-xxxs": "none", - "sds-body-xxs": "none", - "sds-body-xs": "none", - "sds-body-s": "none", - "sds-body-m": "none", - "sds-body-l": "none", - "sds-caps-xxxxs": " uppercase", - "sds-caps-xxxs": " uppercase", - "sds-caps-xxs": " uppercase", - "sds-header-xxxs": "none", - "sds-header-xxs": "none", - "sds-header-xs": "none", - "sds-header-s": "none", - "sds-header-m": "none", - "sds-header-l": "none", - "sds-header-xl": "none", - "sds-header-xxl": "none", - "sds-tabular-xs": "none", - "sds-tabular-s": "none", - "sds-code-xs": "none", - "sds-code-s": "none" + "narrow": { + "body-xxxs": "none", + "body-xxs": "none", + "body-xs": "none", + "body-s": "none", + "body-m": "none", + "body-l": "none", + "caps-xxxxs": " uppercase", + "caps-xxxs": " uppercase", + "caps-xxs": " uppercase", + "header-xxxs": "none", + "header-xxs": "none", + "header-xs": "none", + "header-s": "none", + "header-m": "none", + "header-l": "none", + "header-xl": "none", + "header-xxl": "none", + "tabular-xs": "none", + "tabular-s": "none", + "code-xs": "none", + "code-s": "none" + }, + "wide": { + "body-xxxs": "none", + "body-xxs": "none", + "body-xs": "none", + "body-s": "none", + "body-m": "none", + "body-l": "none", + "caps-xxxxs": " uppercase", + "caps-xxxs": " uppercase", + "caps-xxs": " uppercase", + "header-xxxs": "none", + "header-xxs": "none", + "header-xs": "none", + "header-s": "none", + "header-m": "none", + "header-l": "none", + "header-xl": "none", + "header-xxl": "none", + "tabular-xs": "none", + "tabular-s": "none", + "code-xs": "none", + "code-s": "none" + } }, "height": { - "sds-icon-input": "16px", - "sds-icon-xs": "12px", - "sds-icon-s": "16px", - "sds-icon-l": "24px", - "sds-icon-xl": "32px" + "icon-input": "16px", + "icon-xs": "12px", + "icon-s": "16px", + "icon-l": "24px", + "icon-xl": "32px" }, "width": { - "sds-icon-input": "16px", - "sds-icon-xs": "12px", - "sds-icon-s": "16px", - "sds-icon-l": "24px", - "sds-icon-xl": "32px" + "icon-input": "16px", + "icon-xs": "12px", + "icon-s": "16px", + "icon-l": "24px", + "icon-xl": "32px" }, "borderRadius": { "sds-l": "20px", diff --git a/packages/components/src/common/styles-dictionary/scss/_variables.scss b/packages/components/src/common/styles-dictionary/scss/_variables.scss index d759187a0..855d55eb9 100644 --- a/packages/components/src/common/styles-dictionary/scss/_variables.scss +++ b/packages/components/src/common/styles-dictionary/scss/_variables.scss @@ -379,206 +379,179 @@ $sds-color-semantic-positive-surface-secondary-dark: #85d898; $sds-color-semantic-positive-text: #105b2b; $sds-color-semantic-positive-text-dark: #bcecc5; $sds-corner-l: 20px; -$sds-corner-l-dark: 20px; $sds-corner-m: 4px; -$sds-corner-m-dark: 4px; $sds-corner-s: 2px; -$sds-corner-s-dark: 2px; $sds-corner-none: 0px; -$sds-corner-none-dark: 0px; $sds-drop-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3); -$sds-drop-shadow-l-dark: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3); $sds-drop-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15), 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15); -$sds-drop-shadow-m-dark: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15), 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15); $sds-drop-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25); -$sds-drop-shadow-s-dark: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25); $sds-drop-shadow-none: none; -$sds-drop-shadow-none-dark: none; $sds-font-color: black; -$sds-font-color-dark: black; +$sds-font-color-narrow: black; $sds-font-font-family-body: "Inter", sans-serif; -$sds-font-font-family-body-dark: "Inter", sans-serif; +$sds-font-font-family-body-narrow: "Inter", sans-serif; $sds-font-font-family-caps: "Inter", sans-serif; -$sds-font-font-family-caps-dark: "Inter", sans-serif; +$sds-font-font-family-caps-narrow: "Inter", sans-serif; $sds-font-font-family-code: "IBM Plex Mono", monospace; -$sds-font-font-family-code-dark: "IBM Plex Mono", monospace; +$sds-font-font-family-code-narrow: "IBM Plex Mono", monospace; $sds-font-font-family-header: "Inter", sans-serif; -$sds-font-font-family-header-dark: "Inter", sans-serif; +$sds-font-font-family-header-narrow: "Inter", sans-serif; $sds-font-font-family-tabular: "Inter", sans-serif; -$sds-font-font-family-tabular-dark: "Inter", sans-serif; +$sds-font-font-family-tabular-narrow: "Inter", sans-serif; $sds-font-body-xxxs-400-font: 400 11px/16px "Inter", sans-serif; -$sds-font-body-xxxs-400-font-dark: 400 11px/16px "Inter", sans-serif; +$sds-font-body-xxxs-400-font-narrow: 400 12px/18px "Inter", sans-serif; $sds-font-body-xxxs-400-letter-spacing: 0.1px; -$sds-font-body-xxxs-400-letter-spacing-dark: 0.1px; +$sds-font-body-xxxs-400-letter-spacing-narrow: 0.1px; $sds-font-body-xxxs-600-font: 600 11px/16px "Inter", sans-serif; -$sds-font-body-xxxs-600-font-dark: 600 11px/16px "Inter", sans-serif; +$sds-font-body-xxxs-600-font-narrow: 600 12px/18px "Inter", sans-serif; $sds-font-body-xxxs-600-letter-spacing: 0.1px; -$sds-font-body-xxxs-600-letter-spacing-dark: 0.1px; +$sds-font-body-xxxs-600-letter-spacing-narrow: 0.1px; $sds-font-body-xxs-400-font: 400 12px/18px "Inter", sans-serif; -$sds-font-body-xxs-400-font-dark: 400 12px/18px "Inter", sans-serif; +$sds-font-body-xxs-400-font-narrow: 400 12px/18px "Inter", sans-serif; $sds-font-body-xxs-400-letter-spacing: 0.1px; -$sds-font-body-xxs-400-letter-spacing-dark: 0.1px; +$sds-font-body-xxs-400-letter-spacing-narrow: 0.1px; $sds-font-body-xxs-600-font: 600 12px/18px "Inter", sans-serif; -$sds-font-body-xxs-600-font-dark: 600 12px/18px "Inter", sans-serif; +$sds-font-body-xxs-600-font-narrow: 600 12px/18px "Inter", sans-serif; $sds-font-body-xxs-600-letter-spacing: 0.1px; -$sds-font-body-xxs-600-letter-spacing-dark: 0.1px; +$sds-font-body-xxs-600-letter-spacing-narrow: 0.1px; $sds-font-body-xs-400-font: 400 13px/20px "Inter", sans-serif; -$sds-font-body-xs-400-font-dark: 400 13px/20px "Inter", sans-serif; +$sds-font-body-xs-400-font-narrow: 400 13px/20px "Inter", sans-serif; $sds-font-body-xs-400-letter-spacing: 0.08px; -$sds-font-body-xs-400-letter-spacing-dark: 0.08px; +$sds-font-body-xs-400-letter-spacing-narrow: 0.08px; $sds-font-body-xs-600-font: 600 13px/20px "Inter", sans-serif; -$sds-font-body-xs-600-font-dark: 600 13px/20px "Inter", sans-serif; +$sds-font-body-xs-600-font-narrow: 600 13px/20px "Inter", sans-serif; $sds-font-body-xs-600-letter-spacing: 0.08px; -$sds-font-body-xs-600-letter-spacing-dark: 0.08px; +$sds-font-body-xs-600-letter-spacing-narrow: 0.08px; $sds-font-body-s-400-font: 400 14px/24px "Inter", sans-serif; -$sds-font-body-s-400-font-dark: 400 14px/24px "Inter", sans-serif; +$sds-font-body-s-400-font-narrow: 400 14px/24px "Inter", sans-serif; $sds-font-body-s-400-letter-spacing: 0.08px; -$sds-font-body-s-400-letter-spacing-dark: 0.08px; +$sds-font-body-s-400-letter-spacing-narrow: 0.08px; $sds-font-body-s-600-font: 600 14px/24px "Inter", sans-serif; -$sds-font-body-s-600-font-dark: 600 14px/24px "Inter", sans-serif; +$sds-font-body-s-600-font-narrow: 600 14px/24px "Inter", sans-serif; $sds-font-body-s-600-letter-spacing: 0.08px; -$sds-font-body-s-600-letter-spacing-dark: 0.08px; +$sds-font-body-s-600-letter-spacing-narrow: 0.08px; $sds-font-body-m-400-font: 400 16px/26px "Inter", sans-serif; -$sds-font-body-m-400-font-dark: 400 16px/26px "Inter", sans-serif; +$sds-font-body-m-400-font-narrow: 400 14px/24px "Inter", sans-serif; $sds-font-body-m-400-letter-spacing: 0px; -$sds-font-body-m-400-letter-spacing-dark: 0px; +$sds-font-body-m-400-letter-spacing-narrow: 0px; $sds-font-body-m-600-font: 600 16px/26px "Inter", sans-serif; -$sds-font-body-m-600-font-dark: 600 16px/26px "Inter", sans-serif; +$sds-font-body-m-600-font-narrow: 600 14px/24px "Inter", sans-serif; $sds-font-body-m-600-letter-spacing: 0px; -$sds-font-body-m-600-letter-spacing-dark: 0px; +$sds-font-body-m-600-letter-spacing-narrow: 0px; $sds-font-body-l-400-font: 400 18px/28px "Inter", sans-serif; -$sds-font-body-l-400-font-dark: 400 18px/28px "Inter", sans-serif; +$sds-font-body-l-400-font-narrow: 400 16px/26px "Inter", sans-serif; $sds-font-body-l-400-letter-spacing: 0px; -$sds-font-body-l-400-letter-spacing-dark: 0px; +$sds-font-body-l-400-letter-spacing-narrow: 0px; $sds-font-body-l-600-font: 600 18px/28px "Inter", sans-serif; -$sds-font-body-l-600-font-dark: 600 18px/28px "Inter", sans-serif; +$sds-font-body-l-600-font-narrow: 600 16px/26px "Inter", sans-serif; $sds-font-body-l-600-letter-spacing: 0px; -$sds-font-body-l-600-letter-spacing-dark: 0px; +$sds-font-body-l-600-letter-spacing-narrow: 0px; $sds-font-caps-xxxxs-600-font: 600 10px/14px "Inter", sans-serif; -$sds-font-caps-xxxxs-600-font-dark: 600 10px/14px "Inter", sans-serif; +$sds-font-caps-xxxxs-600-font-narrow: 600 11px/16px "Inter", sans-serif; $sds-font-caps-xxxxs-600-letter-spacing: 0.5px; -$sds-font-caps-xxxxs-600-letter-spacing-dark: 0.5px; +$sds-font-caps-xxxxs-600-letter-spacing-narrow: 0.5px; $sds-font-caps-xxxxs-600-text-transform: uppercase; -$sds-font-caps-xxxxs-600-text-transform-dark: uppercase; +$sds-font-caps-xxxxs-600-text-transform-narrow: uppercase; $sds-font-caps-xxxs-600-font: 600 11px/16px "Inter", sans-serif; -$sds-font-caps-xxxs-600-font-dark: 600 11px/16px "Inter", sans-serif; +$sds-font-caps-xxxs-600-font-narrow: 600 11px/16px "Inter", sans-serif; $sds-font-caps-xxxs-600-letter-spacing: 0.5px; -$sds-font-caps-xxxs-600-letter-spacing-dark: 0.5px; +$sds-font-caps-xxxs-600-letter-spacing-narrow: 0.5px; $sds-font-caps-xxxs-600-text-transform: uppercase; -$sds-font-caps-xxxs-600-text-transform-dark: uppercase; +$sds-font-caps-xxxs-600-text-transform-narrow: uppercase; $sds-font-caps-xxs-600-font: 600 12px/18px "Inter", sans-serif; -$sds-font-caps-xxs-600-font-dark: 600 12px/18px "Inter", sans-serif; +$sds-font-caps-xxs-600-font-narrow: 600 12px/18px "Inter", sans-serif; $sds-font-caps-xxs-600-letter-spacing: 0.5px; -$sds-font-caps-xxs-600-letter-spacing-dark: 0.5px; +$sds-font-caps-xxs-600-letter-spacing-narrow: 0.5px; $sds-font-caps-xxs-600-text-transform: uppercase; -$sds-font-caps-xxs-600-text-transform-dark: uppercase; +$sds-font-caps-xxs-600-text-transform-narrow: uppercase; $sds-font-header-xxxs-600-font: 600 11px/16px "Inter", sans-serif; -$sds-font-header-xxxs-600-font-dark: 600 11px/16px "Inter", sans-serif; +$sds-font-header-xxxs-600-font-narrow: 600 12px/18px "Inter", sans-serif; $sds-font-header-xxxs-600-letter-spacing: 0.1px; -$sds-font-header-xxxs-600-letter-spacing-dark: 0.1px; +$sds-font-header-xxxs-600-letter-spacing-narrow: 0.1px; $sds-font-header-xxs-600-font: 600 12px/18px "Inter", sans-serif; -$sds-font-header-xxs-600-font-dark: 600 12px/18px "Inter", sans-serif; +$sds-font-header-xxs-600-font-narrow: 600 12px/18px "Inter", sans-serif; $sds-font-header-xxs-600-letter-spacing: 0.1px; -$sds-font-header-xxs-600-letter-spacing-dark: 0.1px; +$sds-font-header-xxs-600-letter-spacing-narrow: 0.1px; $sds-font-header-xs-600-font: 600 13px/18px "Inter", sans-serif; -$sds-font-header-xs-600-font-dark: 600 13px/18px "Inter", sans-serif; +$sds-font-header-xs-600-font-narrow: 600 13px/18px "Inter", sans-serif; $sds-font-header-xs-600-letter-spacing: 0.08px; -$sds-font-header-xs-600-letter-spacing-dark: 0.08px; +$sds-font-header-xs-600-letter-spacing-narrow: 0.08px; $sds-font-header-s-600-font: 600 14px/20px "Inter", sans-serif; -$sds-font-header-s-600-font-dark: 600 14px/20px "Inter", sans-serif; +$sds-font-header-s-600-font-narrow: 600 14px/20px "Inter", sans-serif; $sds-font-header-s-600-letter-spacing: 0.08px; -$sds-font-header-s-600-letter-spacing-dark: 0.08px; +$sds-font-header-s-600-letter-spacing-narrow: 0.08px; $sds-font-header-m-600-font: 600 16px/22px "Inter", sans-serif; -$sds-font-header-m-600-font-dark: 600 16px/22px "Inter", sans-serif; +$sds-font-header-m-600-font-narrow: 600 14px/20px "Inter", sans-serif; $sds-font-header-m-600-letter-spacing: 0px; -$sds-font-header-m-600-letter-spacing-dark: 0px; +$sds-font-header-m-600-letter-spacing-narrow: 0.08px; $sds-font-header-l-600-font: 600 18px/24px "Inter", sans-serif; -$sds-font-header-l-600-font-dark: 600 18px/24px "Inter", sans-serif; +$sds-font-header-l-600-font-narrow: 600 16px/22px "Inter", sans-serif; $sds-font-header-l-600-letter-spacing: 0px; -$sds-font-header-l-600-letter-spacing-dark: 0px; +$sds-font-header-l-600-letter-spacing-narrow: 0px; $sds-font-header-xl-600-font: 600 22px/30px "Inter", sans-serif; -$sds-font-header-xl-600-font-dark: 600 22px/30px "Inter", sans-serif; +$sds-font-header-xl-600-font-narrow: 600 18px/24px "Inter", sans-serif; $sds-font-header-xl-600-letter-spacing: 0px; -$sds-font-header-xl-600-letter-spacing-dark: 0px; +$sds-font-header-xl-600-letter-spacing-narrow: 0px; $sds-font-header-xxl-600-font: 600 26px/34px "Inter", sans-serif; -$sds-font-header-xxl-600-font-dark: 600 26px/34px "Inter", sans-serif; +$sds-font-header-xxl-600-font-narrow: 600 22px/30px "Inter", sans-serif; $sds-font-header-xxl-600-letter-spacing: 0px; -$sds-font-header-xxl-600-letter-spacing-dark: 0px; +$sds-font-header-xxl-600-letter-spacing-narrow: 0px; $sds-font-tabular-xs-400-font: 400 13px/20px "Inter", sans-serif; -$sds-font-tabular-xs-400-font-dark: 400 13px/20px "Inter", sans-serif; +$sds-font-tabular-xs-400-font-narrow: 400 13px/20px "Inter", sans-serif; $sds-font-tabular-xs-400-font-variant-numeric: tabular-nums; -$sds-font-tabular-xs-400-font-variant-numeric-dark: tabular-nums; +$sds-font-tabular-xs-400-font-variant-numeric-narrow: tabular-nums; $sds-font-tabular-xs-400-letter-spacing: 0px; -$sds-font-tabular-xs-400-letter-spacing-dark: 0px; +$sds-font-tabular-xs-400-letter-spacing-narrow: 0px; $sds-font-tabular-xs-600-font: 600 13px/20px "Inter", sans-serif; -$sds-font-tabular-xs-600-font-dark: 600 13px/20px "Inter", sans-serif; +$sds-font-tabular-xs-600-font-narrow: 600 13px/20px "Inter", sans-serif; $sds-font-tabular-xs-600-font-variant-numeric: tabular-nums; -$sds-font-tabular-xs-600-font-variant-numeric-dark: tabular-nums; +$sds-font-tabular-xs-600-font-variant-numeric-narrow: tabular-nums; $sds-font-tabular-xs-600-letter-spacing: 0px; -$sds-font-tabular-xs-600-letter-spacing-dark: 0px; +$sds-font-tabular-xs-600-letter-spacing-narrow: 0px; $sds-font-tabular-s-400-font: 400 14px/24px "Inter", sans-serif; -$sds-font-tabular-s-400-font-dark: 400 14px/24px "Inter", sans-serif; +$sds-font-tabular-s-400-font-narrow: 400 14px/24px "Inter", sans-serif; $sds-font-tabular-s-400-font-variant-numeric: tabular-nums; -$sds-font-tabular-s-400-font-variant-numeric-dark: tabular-nums; +$sds-font-tabular-s-400-font-variant-numeric-narrow: tabular-nums; $sds-font-tabular-s-400-letter-spacing: 0px; -$sds-font-tabular-s-400-letter-spacing-dark: 0px; +$sds-font-tabular-s-400-letter-spacing-narrow: 0px; $sds-font-tabular-s-600-font: 600 14px/24px "Inter", sans-serif; -$sds-font-tabular-s-600-font-dark: 600 14px/24px "Inter", sans-serif; +$sds-font-tabular-s-600-font-narrow: 600 14px/24px "Inter", sans-serif; $sds-font-tabular-s-600-font-variant-numeric: tabular-nums; -$sds-font-tabular-s-600-font-variant-numeric-dark: tabular-nums; +$sds-font-tabular-s-600-font-variant-numeric-narrow: tabular-nums; $sds-font-tabular-s-600-letter-spacing: 0px; -$sds-font-tabular-s-600-letter-spacing-dark: 0px; +$sds-font-tabular-s-600-letter-spacing-narrow: 0px; $sds-font-code-xs-400-font: 400 13px/20px "IBM Plex Mono", monospace; -$sds-font-code-xs-400-font-dark: 400 13px/20px "IBM Plex Mono", monospace; +$sds-font-code-xs-400-font-narrow: 400 13px/20px "IBM Plex Mono", monospace; $sds-font-code-xs-400-letter-spacing: 0px; -$sds-font-code-xs-400-letter-spacing-dark: 0px; +$sds-font-code-xs-400-letter-spacing-narrow: 0px; $sds-font-code-xs-600-font: 600 13px/20px "IBM Plex Mono", monospace; -$sds-font-code-xs-600-font-dark: 600 13px/20px "IBM Plex Mono", monospace; +$sds-font-code-xs-600-font-narrow: 600 13px/20px "IBM Plex Mono", monospace; $sds-font-code-xs-600-letter-spacing: 0px; -$sds-font-code-xs-600-letter-spacing-dark: 0px; +$sds-font-code-xs-600-letter-spacing-narrow: 0px; $sds-font-code-s-400-font: 400 14px/24px "IBM Plex Mono", monospace; -$sds-font-code-s-400-font-dark: 400 14px/24px "IBM Plex Mono", monospace; +$sds-font-code-s-400-font-narrow: 400 14px/24px "IBM Plex Mono", monospace; $sds-font-code-s-400-letter-spacing: 0px; -$sds-font-code-s-400-letter-spacing-dark: 0px; +$sds-font-code-s-400-letter-spacing-narrow: 0px; $sds-font-code-s-600-font: 600 14px/24px "IBM Plex Mono", monospace; -$sds-font-code-s-600-font-dark: 600 14px/24px "IBM Plex Mono", monospace; +$sds-font-code-s-600-font-narrow: 600 14px/24px "IBM Plex Mono", monospace; $sds-font-code-s-600-letter-spacing: 0px; -$sds-font-code-s-600-letter-spacing-dark: 0px; +$sds-font-code-s-600-letter-spacing-narrow: 0px; $sds-icon-size-input-height: 16px; -$sds-icon-size-input-height-dark: 16px; $sds-icon-size-input-width: 16px; -$sds-icon-size-input-width-dark: 16px; $sds-icon-size-xs-height: 12px; -$sds-icon-size-xs-height-dark: 12px; $sds-icon-size-xs-width: 12px; -$sds-icon-size-xs-width-dark: 12px; $sds-icon-size-s-height: 16px; -$sds-icon-size-s-height-dark: 16px; $sds-icon-size-s-width: 16px; -$sds-icon-size-s-width-dark: 16px; $sds-icon-size-l-height: 24px; -$sds-icon-size-l-height-dark: 24px; $sds-icon-size-l-width: 24px; -$sds-icon-size-l-width-dark: 24px; $sds-icon-size-xl-height: 32px; -$sds-icon-size-xl-height-dark: 32px; $sds-icon-size-xl-width: 32px; -$sds-icon-size-xl-width-dark: 32px; $sds-space-default: 12px; -$sds-space-default-dark: 12px; $sds-space-xxxs: 2px; -$sds-space-xxxs-dark: 2px; $sds-space-xxs: 4px; -$sds-space-xxs-dark: 4px; $sds-space-xs: 6px; -$sds-space-xs-dark: 6px; $sds-space-s: 8px; -$sds-space-s-dark: 8px; $sds-space-m: 12px; -$sds-space-m-dark: 12px; $sds-space-l: 16px; -$sds-space-l-dark: 16px; $sds-space-xl: 24px; -$sds-space-xl-dark: 24px; -$sds-space-xxl: 40px; -$sds-space-xxl-dark: 40px; \ No newline at end of file +$sds-space-xxl: 40px; \ No newline at end of file From dbbcd97643a60fd421fcfdec6ebbced40831d394 Mon Sep 17 00:00:00 2001 From: Masoud Amjadi Date: Thu, 7 Nov 2024 13:25:37 -0500 Subject: [PATCH 2/3] fix(designtokens): fix design token transformers option --- .../custom-formatters/tailwindFormatter.mjs | 18 +- .../styles-dictionary/json/tailwind.json | 440 +++++++++--------- 2 files changed, 231 insertions(+), 227 deletions(-) diff --git a/packages/components/src/common/styles-dictionary/custom-formatters/tailwindFormatter.mjs b/packages/components/src/common/styles-dictionary/custom-formatters/tailwindFormatter.mjs index 1aedcf899..c88077483 100644 --- a/packages/components/src/common/styles-dictionary/custom-formatters/tailwindFormatter.mjs +++ b/packages/components/src/common/styles-dictionary/custom-formatters/tailwindFormatter.mjs @@ -7,8 +7,12 @@ export function tailwindFormatter({ dictionary, options }) { const { sds } = dictionary.tokens; const tailwindConfig = { fontFamily: transformDictionary(sds.font["font-family"], null, options), - ...transformFonts(sds.font, ["body", "caps", "header", "tabular", "code"]), - ...transformIconSizes(sds.iconSize), + ...transformFonts( + sds.font, + ["body", "caps", "header", "tabular", "code"], + options + ), + ...transformIconSizes(sds.iconSize, options), borderRadius: transformDictionary(sds.corner, null, options), boxShadow: transformDictionary(sds["drop-shadow"], null, options), colors: transformColor(sds.color), @@ -70,19 +74,19 @@ function transformColor(tokens) { return colors; } -function transformIconSizes(tokens) { +function transformIconSizes(tokens, options = {}) { const width = {}; const height = {}; for (const [iconSize, token] of Object.entries(tokens)) { - width[getName(`icon-${iconSize}`)] = token.height.value; - height[getName(`icon-${iconSize}`)] = token.width.value; + width[getName(`icon-${iconSize}`, options)] = token.height.value; + height[getName(`icon-${iconSize}`, options)] = token.width.value; } return { height, width }; } -function transformFonts(tokens, keys) { +function transformFonts(tokens, keys, options = {}) { const fontSize = { narrow: {}, wide: {} }; const lineHeight = { narrow: {}, wide: {} }; const letterSpacing = { narrow: {}, wide: {} }; @@ -122,7 +126,7 @@ function transformFonts(tokens, keys) { for (const key of keys) { for (const [size, fonts] of Object.entries(tokens[key])) { for (const [, fontValue] of Object.entries(fonts)) { - makeFontValue(fontValue, getName([key, size])); + makeFontValue(fontValue, getName([key, size], options)); } } } diff --git a/packages/components/src/common/styles-dictionary/json/tailwind.json b/packages/components/src/common/styles-dictionary/json/tailwind.json index c316b333e..f9ca5f379 100644 --- a/packages/components/src/common/styles-dictionary/json/tailwind.json +++ b/packages/components/src/common/styles-dictionary/json/tailwind.json @@ -8,257 +8,257 @@ }, "fontSize": { "narrow": { - "body-xxxs": "12px", - "body-xxs": "12px", - "body-xs": "13px", - "body-s": "14px", - "body-m": "14px", - "body-l": "16px", - "caps-xxxxs": "11px", - "caps-xxxs": "11px", - "caps-xxs": "12px", - "header-xxxs": "12px", - "header-xxs": "12px", - "header-xs": "13px", - "header-s": "14px", - "header-m": "14px", - "header-l": "16px", - "header-xl": "18px", - "header-xxl": "22px", - "tabular-xs": "13px", - "tabular-s": "14px", - "code-xs": "13px", - "code-s": "14px" + "sds-body-xxxs": "12px", + "sds-body-xxs": "12px", + "sds-body-xs": "13px", + "sds-body-s": "14px", + "sds-body-m": "14px", + "sds-body-l": "16px", + "sds-caps-xxxxs": "11px", + "sds-caps-xxxs": "11px", + "sds-caps-xxs": "12px", + "sds-header-xxxs": "12px", + "sds-header-xxs": "12px", + "sds-header-xs": "13px", + "sds-header-s": "14px", + "sds-header-m": "14px", + "sds-header-l": "16px", + "sds-header-xl": "18px", + "sds-header-xxl": "22px", + "sds-tabular-xs": "13px", + "sds-tabular-s": "14px", + "sds-code-xs": "13px", + "sds-code-s": "14px" }, "wide": { - "body-xxxs": "11px", - "body-xxs": "12px", - "body-xs": "13px", - "body-s": "14px", - "body-m": "16px", - "body-l": "18px", - "caps-xxxxs": "10px", - "caps-xxxs": "11px", - "caps-xxs": "12px", - "header-xxxs": "11px", - "header-xxs": "12px", - "header-xs": "13px", - "header-s": "14px", - "header-m": "16px", - "header-l": "18px", - "header-xl": "22px", - "header-xxl": "26px", - "tabular-xs": "13px", - "tabular-s": "14px", - "code-xs": "13px", - "code-s": "14px" + "sds-body-xxxs": "11px", + "sds-body-xxs": "12px", + "sds-body-xs": "13px", + "sds-body-s": "14px", + "sds-body-m": "16px", + "sds-body-l": "18px", + "sds-caps-xxxxs": "10px", + "sds-caps-xxxs": "11px", + "sds-caps-xxs": "12px", + "sds-header-xxxs": "11px", + "sds-header-xxs": "12px", + "sds-header-xs": "13px", + "sds-header-s": "14px", + "sds-header-m": "16px", + "sds-header-l": "18px", + "sds-header-xl": "22px", + "sds-header-xxl": "26px", + "sds-tabular-xs": "13px", + "sds-tabular-s": "14px", + "sds-code-xs": "13px", + "sds-code-s": "14px" } }, "fontVariantNumeric": { "narrow": { - "body-xxxs": "normal", - "body-xxs": "normal", - "body-xs": "normal", - "body-s": "normal", - "body-m": "normal", - "body-l": "normal", - "caps-xxxxs": "normal", - "caps-xxxs": "normal", - "caps-xxs": "normal", - "header-xxxs": "normal", - "header-xxs": "normal", - "header-xs": "normal", - "header-s": "normal", - "header-m": "normal", - "header-l": "normal", - "header-xl": "normal", - "header-xxl": "normal", - "tabular-xs": "tabular-nums", - "tabular-s": "tabular-nums", - "code-xs": "normal", - "code-s": "normal" + "sds-body-xxxs": "normal", + "sds-body-xxs": "normal", + "sds-body-xs": "normal", + "sds-body-s": "normal", + "sds-body-m": "normal", + "sds-body-l": "normal", + "sds-caps-xxxxs": "normal", + "sds-caps-xxxs": "normal", + "sds-caps-xxs": "normal", + "sds-header-xxxs": "normal", + "sds-header-xxs": "normal", + "sds-header-xs": "normal", + "sds-header-s": "normal", + "sds-header-m": "normal", + "sds-header-l": "normal", + "sds-header-xl": "normal", + "sds-header-xxl": "normal", + "sds-tabular-xs": "tabular-nums", + "sds-tabular-s": "tabular-nums", + "sds-code-xs": "normal", + "sds-code-s": "normal" }, "wide": { - "body-xxxs": "normal", - "body-xxs": "normal", - "body-xs": "normal", - "body-s": "normal", - "body-m": "normal", - "body-l": "normal", - "caps-xxxxs": "normal", - "caps-xxxs": "normal", - "caps-xxs": "normal", - "header-xxxs": "normal", - "header-xxs": "normal", - "header-xs": "normal", - "header-s": "normal", - "header-m": "normal", - "header-l": "normal", - "header-xl": "normal", - "header-xxl": "normal", - "tabular-xs": "tabular-nums", - "tabular-s": "tabular-nums", - "code-xs": "normal", - "code-s": "normal" + "sds-body-xxxs": "normal", + "sds-body-xxs": "normal", + "sds-body-xs": "normal", + "sds-body-s": "normal", + "sds-body-m": "normal", + "sds-body-l": "normal", + "sds-caps-xxxxs": "normal", + "sds-caps-xxxs": "normal", + "sds-caps-xxs": "normal", + "sds-header-xxxs": "normal", + "sds-header-xxs": "normal", + "sds-header-xs": "normal", + "sds-header-s": "normal", + "sds-header-m": "normal", + "sds-header-l": "normal", + "sds-header-xl": "normal", + "sds-header-xxl": "normal", + "sds-tabular-xs": "tabular-nums", + "sds-tabular-s": "tabular-nums", + "sds-code-xs": "normal", + "sds-code-s": "normal" } }, "letterSpacing": { "narrow": { - "body-xxxs": "0.1px", - "body-xxs": "0.1px", - "body-xs": "0.08px", - "body-s": "0.08px", - "body-m": "0px", - "body-l": "0px", - "caps-xxxxs": "0.5px", - "caps-xxxs": "0.5px", - "caps-xxs": "0.5px", - "header-xxxs": "0.1px", - "header-xxs": "0.1px", - "header-xs": "0.08px", - "header-s": "0.08px", - "header-m": "0.08px", - "header-l": "0px", - "header-xl": "0px", - "header-xxl": "0px", - "tabular-xs": "0px", - "tabular-s": "0px", - "code-xs": "0px", - "code-s": "0px" + "sds-body-xxxs": "0.1px", + "sds-body-xxs": "0.1px", + "sds-body-xs": "0.08px", + "sds-body-s": "0.08px", + "sds-body-m": "0px", + "sds-body-l": "0px", + "sds-caps-xxxxs": "0.5px", + "sds-caps-xxxs": "0.5px", + "sds-caps-xxs": "0.5px", + "sds-header-xxxs": "0.1px", + "sds-header-xxs": "0.1px", + "sds-header-xs": "0.08px", + "sds-header-s": "0.08px", + "sds-header-m": "0.08px", + "sds-header-l": "0px", + "sds-header-xl": "0px", + "sds-header-xxl": "0px", + "sds-tabular-xs": "0px", + "sds-tabular-s": "0px", + "sds-code-xs": "0px", + "sds-code-s": "0px" }, "wide": { - "body-xxxs": "0.1px", - "body-xxs": "0.1px", - "body-xs": "0.08px", - "body-s": "0.08px", - "body-m": "0px", - "body-l": "0px", - "caps-xxxxs": "0.5px", - "caps-xxxs": "0.5px", - "caps-xxs": "0.5px", - "header-xxxs": "0.1px", - "header-xxs": "0.1px", - "header-xs": "0.08px", - "header-s": "0.08px", - "header-m": "0px", - "header-l": "0px", - "header-xl": "0px", - "header-xxl": "0px", - "tabular-xs": "0px", - "tabular-s": "0px", - "code-xs": "0px", - "code-s": "0px" + "sds-body-xxxs": "0.1px", + "sds-body-xxs": "0.1px", + "sds-body-xs": "0.08px", + "sds-body-s": "0.08px", + "sds-body-m": "0px", + "sds-body-l": "0px", + "sds-caps-xxxxs": "0.5px", + "sds-caps-xxxs": "0.5px", + "sds-caps-xxs": "0.5px", + "sds-header-xxxs": "0.1px", + "sds-header-xxs": "0.1px", + "sds-header-xs": "0.08px", + "sds-header-s": "0.08px", + "sds-header-m": "0px", + "sds-header-l": "0px", + "sds-header-xl": "0px", + "sds-header-xxl": "0px", + "sds-tabular-xs": "0px", + "sds-tabular-s": "0px", + "sds-code-xs": "0px", + "sds-code-s": "0px" } }, "lineHeight": { "narrow": { - "body-xxxs": "12px", - "body-xxs": "12px", - "body-xs": "13px", - "body-s": "14px", - "body-m": "14px", - "body-l": "16px", - "caps-xxxxs": "11px", - "caps-xxxs": "11px", - "caps-xxs": "12px", - "header-xxxs": "12px", - "header-xxs": "12px", - "header-xs": "13px", - "header-s": "14px", - "header-m": "14px", - "header-l": "16px", - "header-xl": "18px", - "header-xxl": "22px", - "tabular-xs": "13px", - "tabular-s": "14px", - "code-xs": "13px", - "code-s": "14px" + "sds-body-xxxs": "12px", + "sds-body-xxs": "12px", + "sds-body-xs": "13px", + "sds-body-s": "14px", + "sds-body-m": "14px", + "sds-body-l": "16px", + "sds-caps-xxxxs": "11px", + "sds-caps-xxxs": "11px", + "sds-caps-xxs": "12px", + "sds-header-xxxs": "12px", + "sds-header-xxs": "12px", + "sds-header-xs": "13px", + "sds-header-s": "14px", + "sds-header-m": "14px", + "sds-header-l": "16px", + "sds-header-xl": "18px", + "sds-header-xxl": "22px", + "sds-tabular-xs": "13px", + "sds-tabular-s": "14px", + "sds-code-xs": "13px", + "sds-code-s": "14px" }, "wide": { - "body-xxxs": "11px", - "body-xxs": "12px", - "body-xs": "13px", - "body-s": "14px", - "body-m": "16px", - "body-l": "18px", - "caps-xxxxs": "10px", - "caps-xxxs": "11px", - "caps-xxs": "12px", - "header-xxxs": "11px", - "header-xxs": "12px", - "header-xs": "13px", - "header-s": "14px", - "header-m": "16px", - "header-l": "18px", - "header-xl": "22px", - "header-xxl": "26px", - "tabular-xs": "13px", - "tabular-s": "14px", - "code-xs": "13px", - "code-s": "14px" + "sds-body-xxxs": "11px", + "sds-body-xxs": "12px", + "sds-body-xs": "13px", + "sds-body-s": "14px", + "sds-body-m": "16px", + "sds-body-l": "18px", + "sds-caps-xxxxs": "10px", + "sds-caps-xxxs": "11px", + "sds-caps-xxs": "12px", + "sds-header-xxxs": "11px", + "sds-header-xxs": "12px", + "sds-header-xs": "13px", + "sds-header-s": "14px", + "sds-header-m": "16px", + "sds-header-l": "18px", + "sds-header-xl": "22px", + "sds-header-xxl": "26px", + "sds-tabular-xs": "13px", + "sds-tabular-s": "14px", + "sds-code-xs": "13px", + "sds-code-s": "14px" } }, "textTransform": { "narrow": { - "body-xxxs": "none", - "body-xxs": "none", - "body-xs": "none", - "body-s": "none", - "body-m": "none", - "body-l": "none", - "caps-xxxxs": " uppercase", - "caps-xxxs": " uppercase", - "caps-xxs": " uppercase", - "header-xxxs": "none", - "header-xxs": "none", - "header-xs": "none", - "header-s": "none", - "header-m": "none", - "header-l": "none", - "header-xl": "none", - "header-xxl": "none", - "tabular-xs": "none", - "tabular-s": "none", - "code-xs": "none", - "code-s": "none" + "sds-body-xxxs": "none", + "sds-body-xxs": "none", + "sds-body-xs": "none", + "sds-body-s": "none", + "sds-body-m": "none", + "sds-body-l": "none", + "sds-caps-xxxxs": " uppercase", + "sds-caps-xxxs": " uppercase", + "sds-caps-xxs": " uppercase", + "sds-header-xxxs": "none", + "sds-header-xxs": "none", + "sds-header-xs": "none", + "sds-header-s": "none", + "sds-header-m": "none", + "sds-header-l": "none", + "sds-header-xl": "none", + "sds-header-xxl": "none", + "sds-tabular-xs": "none", + "sds-tabular-s": "none", + "sds-code-xs": "none", + "sds-code-s": "none" }, "wide": { - "body-xxxs": "none", - "body-xxs": "none", - "body-xs": "none", - "body-s": "none", - "body-m": "none", - "body-l": "none", - "caps-xxxxs": " uppercase", - "caps-xxxs": " uppercase", - "caps-xxs": " uppercase", - "header-xxxs": "none", - "header-xxs": "none", - "header-xs": "none", - "header-s": "none", - "header-m": "none", - "header-l": "none", - "header-xl": "none", - "header-xxl": "none", - "tabular-xs": "none", - "tabular-s": "none", - "code-xs": "none", - "code-s": "none" + "sds-body-xxxs": "none", + "sds-body-xxs": "none", + "sds-body-xs": "none", + "sds-body-s": "none", + "sds-body-m": "none", + "sds-body-l": "none", + "sds-caps-xxxxs": " uppercase", + "sds-caps-xxxs": " uppercase", + "sds-caps-xxs": " uppercase", + "sds-header-xxxs": "none", + "sds-header-xxs": "none", + "sds-header-xs": "none", + "sds-header-s": "none", + "sds-header-m": "none", + "sds-header-l": "none", + "sds-header-xl": "none", + "sds-header-xxl": "none", + "sds-tabular-xs": "none", + "sds-tabular-s": "none", + "sds-code-xs": "none", + "sds-code-s": "none" } }, "height": { - "icon-input": "16px", - "icon-xs": "12px", - "icon-s": "16px", - "icon-l": "24px", - "icon-xl": "32px" + "sds-icon-input": "16px", + "sds-icon-xs": "12px", + "sds-icon-s": "16px", + "sds-icon-l": "24px", + "sds-icon-xl": "32px" }, "width": { - "icon-input": "16px", - "icon-xs": "12px", - "icon-s": "16px", - "icon-l": "24px", - "icon-xl": "32px" + "sds-icon-input": "16px", + "sds-icon-xs": "12px", + "sds-icon-s": "16px", + "sds-icon-l": "24px", + "sds-icon-xl": "32px" }, "borderRadius": { "sds-l": "20px", From 96f58e9fe84c7e8fb3dddc632f30edb762514dad Mon Sep 17 00:00:00 2001 From: Masoud Amjadi Date: Thu, 7 Nov 2024 13:42:33 -0500 Subject: [PATCH 3/3] fix(designtokens): remove font-color from design tokens, the semantic text colors should be used --- .../styles-dictionary/css/variables.css | 4 --- .../custom-formatters/cssFormatter.mjs | 28 +++++++++++-------- .../styles-dictionary/design-tokens/font.json | 16 ++++------- .../styles-dictionary/json/tailwind.json | 12 ++++---- .../styles-dictionary/scss/_variables.scss | 14 ++++------ 5 files changed, 35 insertions(+), 39 deletions(-) diff --git a/packages/components/src/common/styles-dictionary/css/variables.css b/packages/components/src/common/styles-dictionary/css/variables.css index b28917716..9da665166 100644 --- a/packages/components/src/common/styles-dictionary/css/variables.css +++ b/packages/components/src/common/styles-dictionary/css/variables.css @@ -199,8 +199,6 @@ 0px 2px 4px 0px rgba(0, 0, 0, 0.15); --sds-drop-shadow-s: 0px 2px 4px 0px rgba(0, 0, 0, 0.25); --sds-drop-shadow-none: none; - --sds-font-color: black; - --sds-font-color-narrow: black; --sds-font-font-family-body: "Inter", sans-serif; --sds-font-font-family-body-narrow: "Inter", sans-serif; --sds-font-font-family-caps: "Inter", sans-serif; @@ -572,8 +570,6 @@ 0px 2px 4px 0px rgba(0, 0, 0, 0.15); --sds-drop-shadow-s: 0px 2px 4px 0px rgba(0, 0, 0, 0.25); --sds-drop-shadow-none: none; - --sds-font-color: black; - --sds-font-color-narrow: black; --sds-font-font-family-body: "Inter", sans-serif; --sds-font-font-family-body-narrow: "Inter", sans-serif; --sds-font-font-family-caps: "Inter", sans-serif; diff --git a/packages/components/src/common/styles-dictionary/custom-formatters/cssFormatter.mjs b/packages/components/src/common/styles-dictionary/custom-formatters/cssFormatter.mjs index 7bdfac940..2d4fd89e0 100644 --- a/packages/components/src/common/styles-dictionary/custom-formatters/cssFormatter.mjs +++ b/packages/components/src/common/styles-dictionary/custom-formatters/cssFormatter.mjs @@ -1,3 +1,19 @@ +const CssTokensTemplate = ( + lightVariables, + darkVariables +) => `@media (prefers-color-scheme: light) { + :root { +${lightVariables} + } +} + +@media (prefers-color-scheme: dark) { + :root { +${darkVariables} + } +} +`; + /** * (masoudmanson): This is a custom format for generating CSS variables for light and dark modes. * The CSS variables are generated based on the value and darkValue attributes of each token. @@ -28,15 +44,5 @@ export function cssFormatter({ dictionary }) { .map((token) => printCssVariable(token, true)) .join("\n"); - return `@media (prefers-color-scheme: light) { -:root { -${lightMode} -} -} - -@media (prefers-color-scheme: dark) { -:root { -${darkMode} -} -}`; + return CssTokensTemplate(lightMode, darkMode); } diff --git a/packages/components/src/common/styles-dictionary/design-tokens/font.json b/packages/components/src/common/styles-dictionary/design-tokens/font.json index 213a4f072..bd5ead157 100644 --- a/packages/components/src/common/styles-dictionary/design-tokens/font.json +++ b/packages/components/src/common/styles-dictionary/design-tokens/font.json @@ -1,10 +1,6 @@ { "sds": { "font": { - "color": { - "value": "black", - "narrowValue": "black" - }, "font-family": { "body": { "value": "\"Inter\", sans-serif", @@ -173,8 +169,8 @@ "narrowValue": "0.5px" }, "text-transform": { - "value": " uppercase", - "narrowValue": " uppercase" + "value": "uppercase", + "narrowValue": "uppercase" } } }, @@ -189,8 +185,8 @@ "narrowValue": "0.5px" }, "text-transform": { - "value": " uppercase", - "narrowValue": " uppercase" + "value": "uppercase", + "narrowValue": "uppercase" } } }, @@ -205,8 +201,8 @@ "narrowValue": "0.5px" }, "text-transform": { - "value": " uppercase", - "narrowValue": " uppercase" + "value": "uppercase", + "narrowValue": "uppercase" } } } diff --git a/packages/components/src/common/styles-dictionary/json/tailwind.json b/packages/components/src/common/styles-dictionary/json/tailwind.json index f9ca5f379..13943666e 100644 --- a/packages/components/src/common/styles-dictionary/json/tailwind.json +++ b/packages/components/src/common/styles-dictionary/json/tailwind.json @@ -206,9 +206,9 @@ "sds-body-s": "none", "sds-body-m": "none", "sds-body-l": "none", - "sds-caps-xxxxs": " uppercase", - "sds-caps-xxxs": " uppercase", - "sds-caps-xxs": " uppercase", + "sds-caps-xxxxs": "uppercase", + "sds-caps-xxxs": "uppercase", + "sds-caps-xxs": "uppercase", "sds-header-xxxs": "none", "sds-header-xxs": "none", "sds-header-xs": "none", @@ -229,9 +229,9 @@ "sds-body-s": "none", "sds-body-m": "none", "sds-body-l": "none", - "sds-caps-xxxxs": " uppercase", - "sds-caps-xxxs": " uppercase", - "sds-caps-xxs": " uppercase", + "sds-caps-xxxxs": "uppercase", + "sds-caps-xxxs": "uppercase", + "sds-caps-xxs": "uppercase", "sds-header-xxxs": "none", "sds-header-xxs": "none", "sds-header-xs": "none", diff --git a/packages/components/src/common/styles-dictionary/scss/_variables.scss b/packages/components/src/common/styles-dictionary/scss/_variables.scss index 855d55eb9..237ec4995 100644 --- a/packages/components/src/common/styles-dictionary/scss/_variables.scss +++ b/packages/components/src/common/styles-dictionary/scss/_variables.scss @@ -386,8 +386,6 @@ $sds-drop-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3); $sds-drop-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15), 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15); $sds-drop-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25); $sds-drop-shadow-none: none; -$sds-font-color: black; -$sds-font-color-narrow: black; $sds-font-font-family-body: "Inter", sans-serif; $sds-font-font-family-body-narrow: "Inter", sans-serif; $sds-font-font-family-caps: "Inter", sans-serif; @@ -450,20 +448,20 @@ $sds-font-caps-xxxxs-600-font: 600 10px/14px "Inter", sans-serif; $sds-font-caps-xxxxs-600-font-narrow: 600 11px/16px "Inter", sans-serif; $sds-font-caps-xxxxs-600-letter-spacing: 0.5px; $sds-font-caps-xxxxs-600-letter-spacing-narrow: 0.5px; -$sds-font-caps-xxxxs-600-text-transform: uppercase; -$sds-font-caps-xxxxs-600-text-transform-narrow: uppercase; +$sds-font-caps-xxxxs-600-text-transform: uppercase; +$sds-font-caps-xxxxs-600-text-transform-narrow: uppercase; $sds-font-caps-xxxs-600-font: 600 11px/16px "Inter", sans-serif; $sds-font-caps-xxxs-600-font-narrow: 600 11px/16px "Inter", sans-serif; $sds-font-caps-xxxs-600-letter-spacing: 0.5px; $sds-font-caps-xxxs-600-letter-spacing-narrow: 0.5px; -$sds-font-caps-xxxs-600-text-transform: uppercase; -$sds-font-caps-xxxs-600-text-transform-narrow: uppercase; +$sds-font-caps-xxxs-600-text-transform: uppercase; +$sds-font-caps-xxxs-600-text-transform-narrow: uppercase; $sds-font-caps-xxs-600-font: 600 12px/18px "Inter", sans-serif; $sds-font-caps-xxs-600-font-narrow: 600 12px/18px "Inter", sans-serif; $sds-font-caps-xxs-600-letter-spacing: 0.5px; $sds-font-caps-xxs-600-letter-spacing-narrow: 0.5px; -$sds-font-caps-xxs-600-text-transform: uppercase; -$sds-font-caps-xxs-600-text-transform-narrow: uppercase; +$sds-font-caps-xxs-600-text-transform: uppercase; +$sds-font-caps-xxs-600-text-transform-narrow: uppercase; $sds-font-header-xxxs-600-font: 600 11px/16px "Inter", sans-serif; $sds-font-header-xxxs-600-font-narrow: 600 12px/18px "Inter", sans-serif; $sds-font-header-xxxs-600-letter-spacing: 0.1px;