@equinor/eds-tokens 2.3.1 → 2.3.2

package/README.md

@@ -13,14 +13,32 @@ pnpm add @equinor/eds-tokens
 
 ## Usage
 
+> **⚠️ Transition notice.** The token structure in this package is being
+> replaced. The replacement is developed on the beta line
+> (`@equinor/eds-tokens@beta`) and ships as the next major release.
+>
+> * **Need tokens today?** Use the CSS variables — they are the supported
+>   option for production and keep working throughout 2.x. Expect the
+>   variable names to change in the next major release; keeping direct
+>   variable references few and centralised will make that migration cheap.
+> * **Do not** adopt the legacy `tokens` JavaScript object in new code — it
+>   is deprecated and will be removed in the next major release.
+> * The beta line is for testing and feedback, not production use.
+
 The package provides two token systems:
 
-* **CSS Variables (Recommended)** -- Modern, theme-aware design tokens synced from Figma
-* **Legacy Tokens** -- Original token format, still supported for backward compatibility
+* **CSS Variables** -- Theme-aware design tokens synced from Figma. Supported for production; the variable names will change in the next major release.
+* **Legacy Tokens** -- Original token format. Deprecated: do not use in new code.
 
 ---
 
-## CSS Variables (Recommended)
+## CSS Variables
+
+> These `--eds-*` variables will be replaced by the new token structure in
+> the next major release. They remain the supported way to consume EDS
+> tokens today (`@equinor/eds-core-react` 2.x requires `css/variables`) —
+> just keep direct variable references organised so the rename in the next
+> major is easy to absorb.
 
 The new token system uses CSS custom properties that automatically adapt to light and dark color schemes via explicit `[data-color-scheme]` scope rules with a `prefers-color-scheme` media-query fallback. These tokens are directly synced from Figma variables.
 
@@ -309,9 +327,9 @@ These utilities use modern CSS features (`text-box-trim`) and gracefully degrade
 
 ---
 
-## Legacy Tokens (Backward Compatible)
+## Legacy Tokens (deprecated — do not use)
 
-The original token format is still available for existing applications. These tokens use a structured JavaScript object format.
+**Deprecated.** The original token format remains published only so existing applications keep working, and will be removed in the next major release. These tokens use a structured JavaScript object format.
 
 ### Using Legacy Tokens in JavaScript/TypeScript
 
@@ -334,7 +352,7 @@ const typography = tokens.typography.heading.h1
 * Interaction states
 * Typography (`ot`, `woff` or `woff2` font required)
 
-> We recommend migrating to CSS Variables for new projects to benefit from automatic theme support and better performance.
+> Do not adopt these legacy tokens in new projects. If you need tokens today, use the CSS variables above; the long-term replacement is the new token structure currently on the beta line (`@equinor/eds-tokens@beta`).
 
 [design tokens]: https://css-tricks.com/what-are-design-tokens/
 

package/dist/esm/base/index.mjs

@@ -6,6 +6,13 @@ import { shape } from './shape.mjs';
 import { typography } from './typography.mjs';
 import { spacings } from './spacings.mjs';
 
+/**
+ * @deprecated Do not use in new code — this legacy token object will be
+ * removed in the next major release. If you need tokens today, use the CSS
+ * variables (`@equinor/eds-tokens/css/variables`); the long-term
+ * replacement is the new token structure on the beta line
+ * (`@equinor/eds-tokens@beta`).
+ */
 const tokens = {
   clickbounds,
   colors,

package/dist/tokens.cjs

@@ -996,6 +996,13 @@ const spacings = {
   }
 };
 
+/**
+ * @deprecated Do not use in new code — this legacy token object will be
+ * removed in the next major release. If you need tokens today, use the CSS
+ * variables (`@equinor/eds-tokens/css/variables`); the long-term
+ * replacement is the new token structure on the beta line
+ * (`@equinor/eds-tokens@beta`).
+ */
 const tokens = {
   clickbounds,
   colors,

package/dist/types/base/index.d.ts

@@ -1,3 +1,10 @@
+/**
+ * @deprecated Do not use in new code — this legacy token object will be
+ * removed in the next major release. If you need tokens today, use the CSS
+ * variables (`@equinor/eds-tokens/css/variables`); the long-term
+ * replacement is the new token structure on the beta line
+ * (`@equinor/eds-tokens@beta`).
+ */
 export declare const tokens: {
     clickbounds: {
         jumbo__base: string;

package/dist/types/tokens/ts/color-scheme/dark.d.ts

@@ -0,0 +1,117 @@
+/**
+ * Do not edit directly — generated by scripts/generate-ts-tokens.mjs
+ * from the Tokens Studio DTCG + CSS exports.
+ */
+export declare const colorScheme: {
+    readonly accent: {
+        readonly '1': "#121414";
+        readonly '2': "#191d1d";
+        readonly '3': "#3c6266";
+        readonly '4': "#3e7378";
+        readonly '5': "#41878e";
+        readonly '6': "#3c6266";
+        readonly '7': "#439199";
+        readonly '8': "#6ec0c9";
+        readonly '9': "#8cd2da";
+        readonly '10': "#ace3e9";
+        readonly '11': "#c7f1f6";
+        readonly '12': "#bcebf1";
+        readonly '13': "#f1ffff";
+        readonly '14': "#2c3839";
+        readonly '15': "#030303";
+    };
+    readonly bgBackdrop: "#738696";
+    readonly bgDisabled: "#525c65";
+    readonly bgFloating: "#1b1c1d";
+    readonly bgInput: "#131414";
+    readonly borderDisabled: "#738696";
+    readonly borderFocus: "#2d8bc5";
+    readonly danger: {
+        readonly '1': "#181212";
+        readonly '2': "#221919";
+        readonly '3': "#923a3c";
+        readonly '4': "#b03940";
+        readonly '5': "#d43745";
+        readonly '6': "#923a3c";
+        readonly '7': "#e53748";
+        readonly '8': "#ff8182";
+        readonly '9': "#ffa4a2";
+        readonly '10': "#ffc4c1";
+        readonly '11': "#ffdddb";
+        readonly '12': "#ffd1ce";
+        readonly '13': "#fff7f6";
+        readonly '14': "#492d2c";
+        readonly '15': "#040303";
+    };
+    readonly info: {
+        readonly '1': "#121416";
+        readonly '2': "#191d1f";
+        readonly '3': "#33607e";
+        readonly '4': "#316f98";
+        readonly '5': "#2e82b7";
+        readonly '6': "#33607e";
+        readonly '7': "#2d8bc5";
+        readonly '8': "#5abbfb";
+        readonly '9': "#82cdff";
+        readonly '10': "#b0deff";
+        readonly '11': "#c9edff";
+        readonly '12': "#bfe7ff";
+        readonly '13': "#eefeff";
+        readonly '14': "#2a3741";
+        readonly '15': "#030304";
+    };
+    readonly neutral: {
+        readonly '1': "#131414";
+        readonly '2': "#1b1c1d";
+        readonly '3': "#525c65";
+        readonly '4': "#5d6b76";
+        readonly '5': "#6b7d8b";
+        readonly '6': "#525c65";
+        readonly '7': "#738696";
+        readonly '8': "#9fb4c6";
+        readonly '9': "#b4c7d7";
+        readonly '10': "#cadae7";
+        readonly '11': "#deeaf4";
+        readonly '12': "#d6e3ee";
+        readonly '13': "#f8fcff";
+        readonly '14': "#333639";
+        readonly '15': "#030303";
+    };
+    readonly success: {
+        readonly '1': "#121512";
+        readonly '2': "#191d19";
+        readonly '3': "#3c673a";
+        readonly '4': "#3e793c";
+        readonly '5': "#418e3e";
+        readonly '6': "#3c673a";
+        readonly '7': "#449941";
+        readonly '8': "#6eca6a";
+        readonly '9': "#8cdb87";
+        readonly '10': "#aceba8";
+        readonly '11': "#c7f7c3";
+        readonly '12': "#bcf2b8";
+        readonly '13': "#f1ffef";
+        readonly '14': "#2c392b";
+        readonly '15': "#030303";
+    };
+    readonly textDisabled: "#738696";
+    readonly textLink: "#5abbfb";
+    readonly warning: {
+        readonly '1': "#161311";
+        readonly '2': "#201b17";
+        readonly '3': "#7e4e25";
+        readonly '4': "#97571b";
+        readonly '5': "#b46201";
+        readonly '6': "#7e4e25";
+        readonly '7': "#c26900";
+        readonly '8': "#f99539";
+        readonly '9': "#ffaf6b";
+        readonly '10': "#ffcba2";
+        readonly '11': "#ffdebe";
+        readonly '12': "#ffd7b3";
+        readonly '13': "#fff8e9";
+        readonly '14': "#413226";
+        readonly '15': "#040303";
+    };
+};
+export type ColorScheme = typeof colorScheme;

package/dist/types/tokens/ts/color-scheme/light.d.ts

@@ -0,0 +1,117 @@
+/**
+ * Do not edit directly — generated by scripts/generate-ts-tokens.mjs
+ * from the Tokens Studio DTCG + CSS exports.
+ */
+export declare const colorScheme: {
+    readonly accent: {
+        readonly '1': "#eefbfd";
+        readonly '2': "#ddeff1";
+        readonly '3': "#cfe7e9";
+        readonly '4': "#bbdbdf";
+        readonly '5': "#a2cdd2";
+        readonly '6': "#87c0c6";
+        readonly '7': "#6cb2b9";
+        readonly '8': "#3c959e";
+        readonly '9': "#21767e";
+        readonly '10': "#1f666d";
+        readonly '11': "#20565c";
+        readonly '12': "#20474b";
+        readonly '13': "#1e383a";
+        readonly '14': "#cae4e7";
+        readonly '15': "#ffffff";
+    };
+    readonly bgBackdrop: "#a4a4a4";
+    readonly bgDisabled: "#e1e1e1";
+    readonly bgFloating: "#ebebeb";
+    readonly bgInput: "#f8f8f8";
+    readonly borderDisabled: "#a4a4a4";
+    readonly borderFocus: "#5cade5";
+    readonly danger: {
+        readonly '1': "#fff4f3";
+        readonly '2': "#ffe1df";
+        readonly '3': "#ffd4d2";
+        readonly '4': "#ffc3c0";
+        readonly '5': "#ffa7a5";
+        readonly '6': "#ff8d8d";
+        readonly '7': "#ff6d71";
+        readonly '8': "#f12844";
+        readonly '9': "#c5002e";
+        readonly '10': "#ab0428";
+        readonly '11': "#8e1525";
+        readonly '12': "#721c22";
+        readonly '13': "#571c1f";
+        readonly '14': "#ffd0ce";
+        readonly '15': "#ffffff";
+    };
+    readonly info: {
+        readonly '1': "#f2faff";
+        readonly '2': "#d9efff";
+        readonly '3': "#cae6fa";
+        readonly '4': "#b5daf5";
+        readonly '5': "#99cbf0";
+        readonly '6': "#7bbceb";
+        readonly '7': "#5cade5";
+        readonly '8': "#1d8fcf";
+        readonly '9': "#0070a7";
+        readonly '10': "#006192";
+        readonly '11': "#0e5279";
+        readonly '12': "#164461";
+        readonly '13': "#18364a";
+        readonly '14': "#c5e3f9";
+        readonly '15': "#ffffff";
+    };
+    readonly neutral: {
+        readonly '1': "#f8f8f8";
+        readonly '2': "#ebebeb";
+        readonly '3': "#e1e1e1";
+        readonly '4': "#d4d4d4";
+        readonly '5': "#c4c4c4";
+        readonly '6': "#b4b4b4";
+        readonly '7': "#a4a4a4";
+        readonly '8': "#868686";
+        readonly '9': "#696969";
+        readonly '10': "#5b5b5b";
+        readonly '11': "#4d4d4d";
+        readonly '12': "#404040";
+        readonly '13': "#333333";
+        readonly '14': "#dedede";
+        readonly '15': "#ffffff";
+    };
+    readonly success: {
+        readonly '1': "#eefeed";
+        readonly '2': "#ddf2db";
+        readonly '3': "#cfeacc";
+        readonly '4': "#bbe0b8";
+        readonly '5': "#a2d49e";
+        readonly '6': "#87c783";
+        readonly '7': "#6dba69";
+        readonly '8': "#3c9e3b";
+        readonly '9': "#227e22";
+        readonly '10': "#206d1f";
+        readonly '11': "#205c1f";
+        readonly '12': "#214b1f";
+        readonly '13': "#1e3b1d";
+        readonly '14': "#cae8c7";
+        readonly '15': "#ffffff";
+    };
+    readonly textDisabled: "#a4a4a4";
+    readonly textLink: "#1d8fcf";
+    readonly warning: {
+        readonly '1': "#fff6f0";
+        readonly '2': "#ffe6d3";
+        readonly '3': "#fbdac1";
+        readonly '4': "#f6caaa";
+        readonly '5': "#f0b689";
+        readonly '6': "#eba267";
+        readonly '7': "#e38d42";
+        readonly '8': "#c86a00";
+        readonly '9': "#9f5100";
+        readonly '10': "#894700";
+        readonly '11': "#753c00";
+        readonly '12': "#603204";
+        readonly '13': "#4a2a0e";
+        readonly '14': "#fad6bc";
+        readonly '15': "#ffffff";
+    };
+};
+export type ColorScheme = typeof colorScheme;

package/dist/types/tokens/ts/colors/default.d.ts

@@ -0,0 +1,249 @@
+/**
+ * Do not edit directly — generated by scripts/generate-ts-tokens.mjs
+ * from the Tokens Studio DTCG + CSS exports.
+ */
+export declare const colors: {
+    readonly dark: {
+        readonly blue: {
+            readonly '1': "#121416";
+            readonly '2': "#191d1f";
+            readonly '3': "#33607e";
+            readonly '4': "#316f98";
+            readonly '5': "#2e82b7";
+            readonly '6': "#33607e";
+            readonly '7': "#2d8bc5";
+            readonly '8': "#5abbfb";
+            readonly '9': "#82cdff";
+            readonly '10': "#b0deff";
+            readonly '11': "#c9edff";
+            readonly '12': "#bfe7ff";
+            readonly '13': "#eefeff";
+            readonly '14': "#2a3741";
+            readonly '15': "#030304";
+        };
+        readonly gray: {
+            readonly '1': "#141414";
+            readonly '2': "#1c1c1c";
+            readonly '3': "#5b5b5b";
+            readonly '4': "#696969";
+            readonly '5': "#7a7a7a";
+            readonly '6': "#5b5b5b";
+            readonly '7': "#838383";
+            readonly '8': "#b1b1b1";
+            readonly '9': "#c4c4c4";
+            readonly '10': "#d7d7d7";
+            readonly '11': "#e8e8e8";
+            readonly '12': "#e1e1e1";
+            readonly '13': "#fcfcfc";
+            readonly '14': "#353535";
+            readonly '15': "#030303";
+        };
+        readonly green: {
+            readonly '1': "#121512";
+            readonly '2': "#191d19";
+            readonly '3': "#3c673a";
+            readonly '4': "#3e793c";
+            readonly '5': "#418e3e";
+            readonly '6': "#3c673a";
+            readonly '7': "#449941";
+            readonly '8': "#6eca6a";
+            readonly '9': "#8cdb87";
+            readonly '10': "#aceba8";
+            readonly '11': "#c7f7c3";
+            readonly '12': "#bcf2b8";
+            readonly '13': "#f1ffef";
+            readonly '14': "#2c392b";
+            readonly '15': "#030303";
+        };
+        readonly mossGreen: {
+            readonly '1': "#121414";
+            readonly '2': "#191d1d";
+            readonly '3': "#3c6266";
+            readonly '4': "#3e7378";
+            readonly '5': "#41878e";
+            readonly '6': "#3c6266";
+            readonly '7': "#439199";
+            readonly '8': "#6ec0c9";
+            readonly '9': "#8cd2da";
+            readonly '10': "#ace3e9";
+            readonly '11': "#c7f1f6";
+            readonly '12': "#bcebf1";
+            readonly '13': "#f1ffff";
+            readonly '14': "#2c3839";
+            readonly '15': "#030303";
+        };
+        readonly northSea: {
+            readonly '1': "#131414";
+            readonly '2': "#1b1c1d";
+            readonly '3': "#525c65";
+            readonly '4': "#5d6b76";
+            readonly '5': "#6b7d8b";
+            readonly '6': "#525c65";
+            readonly '7': "#738696";
+            readonly '8': "#9fb4c6";
+            readonly '9': "#b4c7d7";
+            readonly '10': "#cadae7";
+            readonly '11': "#deeaf4";
+            readonly '12': "#d6e3ee";
+            readonly '13': "#f8fcff";
+            readonly '14': "#333639";
+            readonly '15': "#030303";
+        };
+        readonly orange: {
+            readonly '1': "#161311";
+            readonly '2': "#201b17";
+            readonly '3': "#7e4e25";
+            readonly '4': "#97571b";
+            readonly '5': "#b46201";
+            readonly '6': "#7e4e25";
+            readonly '7': "#c26900";
+            readonly '8': "#f99539";
+            readonly '9': "#ffaf6b";
+            readonly '10': "#ffcba2";
+            readonly '11': "#ffdebe";
+            readonly '12': "#ffd7b3";
+            readonly '13': "#fff8e9";
+            readonly '14': "#413226";
+            readonly '15': "#040303";
+        };
+        readonly red: {
+            readonly '1': "#181212";
+            readonly '2': "#221919";
+            readonly '3': "#923a3c";
+            readonly '4': "#b03940";
+            readonly '5': "#d43745";
+            readonly '6': "#923a3c";
+            readonly '7': "#e53748";
+            readonly '8': "#ff8182";
+            readonly '9': "#ffa4a2";
+            readonly '10': "#ffc4c1";
+            readonly '11': "#ffdddb";
+            readonly '12': "#ffd1ce";
+            readonly '13': "#fff7f6";
+            readonly '14': "#492d2c";
+            readonly '15': "#040303";
+        };
+    };
+    readonly light: {
+        readonly blue: {
+            readonly '1': "#f2faff";
+            readonly '2': "#d9efff";
+            readonly '3': "#cae6fa";
+            readonly '4': "#b5daf5";
+            readonly '5': "#99cbf0";
+            readonly '6': "#7bbceb";
+            readonly '7': "#5cade5";
+            readonly '8': "#1d8fcf";
+            readonly '9': "#0070a7";
+            readonly '10': "#006192";
+            readonly '11': "#0e5279";
+            readonly '12': "#164461";
+            readonly '13': "#18364a";
+            readonly '14': "#c5e3f9";
+            readonly '15': "#ffffff";
+        };
+        readonly gray: {
+            readonly '1': "#f8f8f8";
+            readonly '2': "#ebebeb";
+            readonly '3': "#e1e1e1";
+            readonly '4': "#d4d4d4";
+            readonly '5': "#c4c4c4";
+            readonly '6': "#b4b4b4";
+            readonly '7': "#a4a4a4";
+            readonly '8': "#868686";
+            readonly '9': "#696969";
+            readonly '10': "#5b5b5b";
+            readonly '11': "#4d4d4d";
+            readonly '12': "#404040";
+            readonly '13': "#333333";
+            readonly '14': "#dedede";
+            readonly '15': "#ffffff";
+        };
+        readonly green: {
+            readonly '1': "#eefeed";
+            readonly '2': "#ddf2db";
+            readonly '3': "#cfeacc";
+            readonly '4': "#bbe0b8";
+            readonly '5': "#a2d49e";
+            readonly '6': "#87c783";
+            readonly '7': "#6dba69";
+            readonly '8': "#3c9e3b";
+            readonly '9': "#227e22";
+            readonly '10': "#206d1f";
+            readonly '11': "#205c1f";
+            readonly '12': "#214b1f";
+            readonly '13': "#1e3b1d";
+            readonly '14': "#cae8c7";
+            readonly '15': "#ffffff";
+        };
+        readonly mossGreen: {
+            readonly '1': "#eefbfd";
+            readonly '2': "#ddeff1";
+            readonly '3': "#cfe7e9";
+            readonly '4': "#bbdbdf";
+            readonly '5': "#a2cdd2";
+            readonly '6': "#87c0c6";
+            readonly '7': "#6cb2b9";
+            readonly '8': "#3c959e";
+            readonly '9': "#21767e";
+            readonly '10': "#1f666d";
+            readonly '11': "#20565c";
+            readonly '12': "#20474b";
+            readonly '13': "#1e383a";
+            readonly '14': "#cae4e7";
+            readonly '15': "#ffffff";
+        };
+        readonly northSea: {
+            readonly '1': "#f5f9fc";
+            readonly '2': "#e6ecf1";
+            readonly '3': "#dbe2e8";
+            readonly '4': "#ccd6dd";
+            readonly '5': "#bac6d0";
+            readonly '6': "#a7b7c3";
+            readonly '7': "#95a7b6";
+            readonly '8': "#74899b";
+            readonly '9': "#596c7b";
+            readonly '10': "#4d5d6a";
+            readonly '11': "#424f59";
+            readonly '12': "#374149";
+            readonly '13': "#2d3439";
+            readonly '14': "#d8dfe5";
+            readonly '15': "#ffffff";
+        };
+        readonly orange: {
+            readonly '1': "#fff6f0";
+            readonly '2': "#ffe6d3";
+            readonly '3': "#fbdac1";
+            readonly '4': "#f6caaa";
+            readonly '5': "#f0b689";
+            readonly '6': "#eba267";
+            readonly '7': "#e38d42";
+            readonly '8': "#c86a00";
+            readonly '9': "#9f5100";
+            readonly '10': "#894700";
+            readonly '11': "#753c00";
+            readonly '12': "#603204";
+            readonly '13': "#4a2a0e";
+            readonly '14': "#fad6bc";
+            readonly '15': "#ffffff";
+        };
+        readonly red: {
+            readonly '1': "#fff4f3";
+            readonly '2': "#ffe1df";
+            readonly '3': "#ffd4d2";
+            readonly '4': "#ffc3c0";
+            readonly '5': "#ffa7a5";
+            readonly '6': "#ff8d8d";
+            readonly '7': "#ff6d71";
+            readonly '8': "#f12844";
+            readonly '9': "#c5002e";
+            readonly '10': "#ab0428";
+            readonly '11': "#8e1525";
+            readonly '12': "#721c22";
+            readonly '13': "#571c1f";
+            readonly '14': "#ffd0ce";
+            readonly '15': "#ffffff";
+        };
+    };
+};
+export type Colors = typeof colors;

package/dist/types/tokens/ts/density/comfortable.d.ts

@@ -0,0 +1,100 @@
+/**
+ * Do not edit directly — generated by scripts/generate-ts-tokens.mjs
+ * from the Tokens Studio DTCG + CSS exports.
+ */
+export declare const density: {
+    readonly cornerRadius: {
+        readonly none: 0;
+        readonly pill: 9999;
+        readonly rounded: 4;
+        readonly roundedOuter: 6;
+    };
+    readonly spacing: {
+        readonly twoXl: 28;
+        readonly twoXs: 6;
+        readonly threeXl: 32;
+        readonly threeXs: 4;
+        readonly fourXs: 2;
+        readonly lg: 20;
+        readonly md: 16;
+        readonly none: 0;
+        readonly sm: 12;
+        readonly xl: 24;
+        readonly xs: 8;
+    };
+    readonly typography: {
+        readonly header: {
+            readonly twoXl: {
+                readonly fontSize: 24;
+                readonly lineHeight: 28;
+            };
+            readonly threeXl: {
+                readonly fontSize: 24;
+                readonly lineHeight: 32;
+            };
+            readonly fourXl: {
+                readonly fontSize: 32;
+                readonly lineHeight: 32;
+            };
+            readonly lg: {
+                readonly fontSize: 18;
+                readonly lineHeight: 24;
+            };
+            readonly md: {
+                readonly fontSize: 16;
+                readonly lineHeight: 20;
+            };
+            readonly sm: {
+                readonly fontSize: 14;
+                readonly lineHeight: 16;
+            };
+            readonly xl: {
+                readonly fontSize: 21;
+                readonly lineHeight: 24;
+            };
+            readonly xs: {
+                readonly fontSize: 12;
+                readonly lineHeight: 16;
+            };
+        };
+        readonly ui: {
+            readonly twoXl: {
+                readonly fontSize: 21;
+                readonly lineHeight: 28;
+            };
+            readonly threeXl: {
+                readonly fontSize: 24;
+                readonly lineHeight: 32;
+            };
+            readonly fourXl: {
+                readonly fontSize: 28;
+                readonly lineHeight: 32;
+            };
+            readonly fiveXl: {
+                readonly fontSize: 32;
+                readonly lineHeight: 36;
+            };
+            readonly lg: {
+                readonly fontSize: 16;
+                readonly lineHeight: 24;
+            };
+            readonly md: {
+                readonly fontSize: 14;
+                readonly lineHeight: 20;
+            };
+            readonly sm: {
+                readonly fontSize: 12;
+                readonly lineHeight: 16;
+            };
+            readonly xl: {
+                readonly fontSize: 18;
+                readonly lineHeight: 24;
+            };
+            readonly xs: {
+                readonly fontSize: 10;
+                readonly lineHeight: 16;
+            };
+        };
+    };
+};
+export type Density = typeof density;