From dcbe4f7246fbd5f51af3de12e9b9ccc2978c2a05 Mon Sep 17 00:00:00 2001
From: Masoud Amjadi <mamjadi@contractor.chanzuckerberg.com>
Date: Fri, 8 Nov 2024 19:03:11 -0500
Subject: [PATCH] feat(designtokens): add narrow fonts to design tokens (#892)

* feat(designtokens): add narrow fonts to design tokens

* fix(designtokens): fix design token transformers option

* fix(designtokens): remove font-color from design tokens, the semantic text colors should be used
---
 .../src/common/styles-dictionary/build.mjs    | 174 +--------
 .../styles-dictionary/css/variables.css       | 212 +++++++++--
 .../custom-formatters/cssFormatter.mjs        |  48 +++
 .../custom-formatters/scssFormatter.mjs       |  15 +
 .../custom-formatters/tailwindFormatter.mjs   | 141 ++++++++
 .../styles-dictionary/design-tokens/font.json | 301 ++++++++++++----
 .../styles-dictionary/json/tailwind.json      | 335 ++++++++++++------
 .../styles-dictionary/scss/_variables.scss    | 185 ++++------
 8 files changed, 922 insertions(+), 489 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..9da665166 100644
--- a/packages/components/src/common/styles-dictionary/css/variables.css
+++ b/packages/components/src/common/styles-dictionary/css/variables.css
@@ -194,85 +194,159 @@
     --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-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 +391,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 +440,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 +525,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 +565,159 @@
     --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-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 +738,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..2d4fd89e0
--- /dev/null
+++ b/packages/components/src/common/styles-dictionary/custom-formatters/cssFormatter.mjs
@@ -0,0 +1,48 @@
+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.
+ */
+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 CssTokensTemplate(lightMode, 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..c88077483
--- /dev/null
+++ b/packages/components/src/common/styles-dictionary/custom-formatters/tailwindFormatter.mjs
@@ -0,0 +1,141 @@
+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"],
+      options
+    ),
+    ...transformIconSizes(sds.iconSize, options),
+    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, options = {}) {
+  const width = {};
+  const height = {};
+
+  for (const [iconSize, token] of Object.entries(tokens)) {
+    width[getName(`icon-${iconSize}`, options)] = token.height.value;
+    height[getName(`icon-${iconSize}`, options)] = token.width.value;
+  }
+
+  return { height, width };
+}
+
+function transformFonts(tokens, keys, options = {}) {
+  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], options));
+      }
+    }
+  }
+
+  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..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,109 +1,159 @@
 {
   "sds": {
     "font": {
-      "color": {
-        "value": "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 +161,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",
+              "narrowValue": "0.5px"
             },
-            "letter-spacing": { "value": "0.5px" },
-            "text-transform": { "value": " uppercase" }
+            "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" },
-            "text-transform": { "value": " uppercase" }
+            "letter-spacing": {
+              "value": "0.5px",
+              "narrowValue": "0.5px"
+            },
+            "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",
+              "narrowValue": "0.5px"
             },
-            "letter-spacing": { "value": "0.5px" },
-            "text-transform": { "value": " uppercase" }
+            "text-transform": { 
+              "value": "uppercase", 
+              "narrowValue": "uppercase" 
+            }
           }
         }
       },
@@ -140,65 +211,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 +309,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" },
-            "letter-spacing": { "value": "0px" }
+            "font-variant-numeric": { 
+              "value": "tabular-nums",
+              "narrowValue": "tabular-nums"
+            },
+            "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",
+              "narrowValue": "tabular-nums"
             },
-            "font-variant-numeric": { "value": "tabular-nums" },
-            "letter-spacing": { "value": "0px" }
+            "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" },
-            "letter-spacing": { "value": "0px" }
+            "font-variant-numeric": { 
+              "value": "tabular-nums",
+              "narrowValue": "tabular-nums"
+            },
+            "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 +371,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..13943666e 100644
--- a/packages/components/src/common/styles-dictionary/json/tailwind.json
+++ b/packages/components/src/common/styles-dictionary/json/tailwind.json
@@ -7,119 +7,244 @@
     "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": {
+      "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": {
+      "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": {
-    "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": {
+      "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": {
+      "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": {
-    "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": {
+      "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": {
+      "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": {
-    "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": {
+      "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": {
+      "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": {
-    "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": {
+      "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": {
+      "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": {
     "sds-icon-input": "16px",
diff --git a/packages/components/src/common/styles-dictionary/scss/_variables.scss b/packages/components/src/common/styles-dictionary/scss/_variables.scss
index d759187a0..237ec4995 100644
--- a/packages/components/src/common/styles-dictionary/scss/_variables.scss
+++ b/packages/components/src/common/styles-dictionary/scss/_variables.scss
@@ -379,206 +379,177 @@ $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-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-text-transform:  uppercase;
-$sds-font-caps-xxxxs-600-text-transform-dark:  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-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-text-transform:  uppercase;
-$sds-font-caps-xxxs-600-text-transform-dark:  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-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-text-transform:  uppercase;
-$sds-font-caps-xxs-600-text-transform-dark:  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-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