@mediaradar/design-tokens 2.6.0 → 2.7.0

package/dist/DESIGN.md

@@ -205,6 +205,7 @@ Key is the suffix for any Tailwind color utility: `bg-{key}`, `text-{key}`, `bor
 | --- | --- |
 | micro | 0.6875rem |
 | xs | 0.75rem |
+| dense | 0.8125rem |
 | sm | 0.875rem |
 | base | 1rem |
 | md | 1.125rem |
@@ -373,4 +374,5 @@ Tailwind: `z-{key}`
 | --- | --- |
 | dropdown | 1000 |
 | modal | 1100 |
+| toast | 1150 |
 | tooltip | 1200 |

package/dist/css/ref.css

@@ -336,6 +336,7 @@
   --mr-ref-typography-line-height-xl: 1.8;
   --mr-ref-typography-size-micro: 0.6875rem;
   --mr-ref-typography-size-xs: 0.75rem;
+  --mr-ref-typography-size-dense: 0.8125rem;
   --mr-ref-typography-size-sm: 0.875rem;
   --mr-ref-typography-size-base: 1rem;
   --mr-ref-typography-size-md: 1.125rem;
@@ -355,5 +356,6 @@
   --mr-ref-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
   --mr-ref-z-dropdown: 1000;
   --mr-ref-z-modal: 1100;
+  --mr-ref-z-toast: 1150;
   --mr-ref-z-tooltip: 1200;
 }

package/dist/css/sys.css

@@ -32,6 +32,7 @@
   --mr-color-scrim: var(--mr-ref-color-brand-warm-scrim-light);
   --mr-typography-font-size-micro: var(--mr-ref-typography-size-micro);
   --mr-typography-font-size-xs: var(--mr-ref-typography-size-xs);
+  --mr-typography-font-size-dense: var(--mr-ref-typography-size-dense);
   --mr-typography-font-size-sm: var(--mr-ref-typography-size-sm);
   --mr-typography-font-size-base: var(--mr-ref-typography-size-base);
   --mr-typography-font-size-md: var(--mr-ref-typography-size-md);
@@ -66,6 +67,7 @@
   --mr-opacity-disabled: var(--mr-ref-opacity-disabled);
   --mr-z-dropdown: var(--mr-ref-z-dropdown);
   --mr-z-modal: var(--mr-ref-z-modal);
+  --mr-z-toast: var(--mr-ref-z-toast);
   --mr-z-tooltip: var(--mr-ref-z-tooltip);
   --mr-text-style-heading-1-font-size: var(--mr-typography-font-size-h1);
   --mr-text-style-heading-1-font-weight: var(--mr-ref-typography-weight-semibold);

package/dist/js/tokens.d.ts

@@ -419,6 +419,8 @@ export const mrRefTypographyLineHeightXl: number;
 /** 11px. The annotation step, below xs (12px) -- badges, eyebrow labels and other type that marks up content rather than being content. Added because every badge in the product was sized off-scale at 10, 10.5 or 11px, none of which the scale had. Settled on 11 rather than 10: badges carry semibold weight, and the eyebrow shape adds caps and letterspacing on top, which is where 10px starts to strain. 11px was also already the most common of the three sizes in use. */
 export const mrRefTypographySizeMicro: number;
 export const mrRefTypographySizeXs: number;
+/** 13px. The dense interface step, between xs (12px) and sm (14px) -- table text, buttons, chips and other compact controls. Added because 13px was already the de-facto size for these across the product but existed only as a hard-coded value repeated per file, outside the scale. */
+export const mrRefTypographySizeDense: number;
 export const mrRefTypographySizeSm: number;
 export const mrRefTypographySizeBase: number;
 export const mrRefTypographySizeMd: number;
@@ -438,6 +440,8 @@ export const mrRefMotionDurationSlow: number;
 export const mrRefMotionEasingStandard: string;
 export const mrRefZDropdown: number;
 export const mrRefZModal: number;
+/** Above modal, below tooltip. A toast reporting on something that happened in a modal has to be visible over it; a tooltip on the toast's own action button has to sit above the toast. Added because the product had four different hand-picked z values for the same object, so which message won was an accident of which screen you were on. */
+export const mrRefZToast: number;
 export const mrRefZTooltip: number;
 export const mrColorCanvas: string;
 export const mrColorSurface: string;
@@ -472,6 +476,7 @@ export const mrColorAiGradient: string;
 export const mrColorScrim: string;
 export const mrTypographyFontSizeMicro: number;
 export const mrTypographyFontSizeXs: number;
+export const mrTypographyFontSizeDense: number;
 export const mrTypographyFontSizeSm: number;
 export const mrTypographyFontSizeBase: number;
 export const mrTypographyFontSizeMd: number;
@@ -506,6 +511,7 @@ export const mrMotionEasingInteractive: string;
 export const mrOpacityDisabled: number;
 export const mrZDropdown: number;
 export const mrZModal: number;
+export const mrZToast: number;
 export const mrZTooltip: number;
 export const mrTextStyleHeading_1FontSize: number;
 export const mrTextStyleHeading_1FontWeight: number;

package/dist/js/tokens.js

@@ -423,6 +423,7 @@ export const mrRefTypographyLineHeightLg = 1.6;
 export const mrRefTypographyLineHeightXl = 1.8;
 export const mrRefTypographySizeMicro = 0.6875; // 11px. The annotation step, below xs (12px) -- badges, eyebrow labels and other type that marks up content rather than being content. Added because every badge in the product was sized off-scale at 10, 10.5 or 11px, none of which the scale had. Settled on 11 rather than 10: badges carry semibold weight, and the eyebrow shape adds caps and letterspacing on top, which is where 10px starts to strain. 11px was also already the most common of the three sizes in use.
 export const mrRefTypographySizeXs = 0.75;
+export const mrRefTypographySizeDense = 0.8125; // 13px. The dense interface step, between xs (12px) and sm (14px) -- table text, buttons, chips and other compact controls. Added because 13px was already the de-facto size for these across the product but existed only as a hard-coded value repeated per file, outside the scale.
 export const mrRefTypographySizeSm = 0.875;
 export const mrRefTypographySizeBase = 1;
 export const mrRefTypographySizeMd = 1.125;
@@ -444,6 +445,7 @@ export const mrRefMotionDurationSlow = 320;
 export const mrRefMotionEasingStandard = "cubic-bezier(0.2, 0, 0, 1)";
 export const mrRefZDropdown = 1000;
 export const mrRefZModal = 1100;
+export const mrRefZToast = 1150; // Above modal, below tooltip. A toast reporting on something that happened in a modal has to be visible over it; a tooltip on the toast's own action button has to sit above the toast. Added because the product had four different hand-picked z values for the same object, so which message won was an accident of which screen you were on.
 export const mrRefZTooltip = 1200;
 export const mrColorCanvas = "#f4f2ee";
 export const mrColorSurface = "#fbfaf7";
@@ -479,6 +481,7 @@ export const mrColorAiGradient =
 export const mrColorScrim = "rgba(20, 17, 13, 0.55)";
 export const mrTypographyFontSizeMicro = 0.6875;
 export const mrTypographyFontSizeXs = 0.75;
+export const mrTypographyFontSizeDense = 0.8125;
 export const mrTypographyFontSizeSm = 0.875;
 export const mrTypographyFontSizeBase = 1;
 export const mrTypographyFontSizeMd = 1.125;
@@ -515,6 +518,7 @@ export const mrMotionEasingInteractive = "cubic-bezier(0.2, 0, 0, 1)";
 export const mrOpacityDisabled = 0.4;
 export const mrZDropdown = 1000;
 export const mrZModal = 1100;
+export const mrZToast = 1150;
 export const mrZTooltip = 1200;
 export const mrTextStyleHeading_1FontSize = 1.875;
 export const mrTextStyleHeading_1FontWeight = 600;

package/dist/tailwind/theme.css

@@ -80,6 +80,7 @@
   --color-scrim: var(--mr-color-scrim);
   --text-micro: var(--mr-typography-font-size-micro);
   --text-xs: var(--mr-typography-font-size-xs);
+  --text-dense: var(--mr-typography-font-size-dense);
   --text-sm: var(--mr-typography-font-size-sm);
   --text-base: var(--mr-typography-font-size-base);
   --text-md: var(--mr-typography-font-size-md);
@@ -113,5 +114,6 @@
   --opacity-disabled: var(--mr-opacity-disabled);
   --z-index-dropdown: var(--mr-z-dropdown);
   --z-index-modal: var(--mr-z-modal);
+  --z-index-toast: var(--mr-z-toast);
   --z-index-tooltip: var(--mr-z-tooltip);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mediaradar/design-tokens",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "main": "dist/js/tokens.js",
   "types": "dist/js/tokens.d.ts",
   "type": "module",
@@ -30,18 +30,16 @@
   },
   "author": "",
   "license": "Apache-2.0",
-  "dependencies": {
-    "@tokens-studio/sd-transforms": "^2.0.3",
-    "lodash": "^4.17.21",
-    "lodash-es": "^4.17.21",
-    "style-dictionary": "^5.5.0"
-  },
   "devDependencies": {
     "@babel/parser": "^7.29.8",
     "@babel/traverse": "^7.29.8",
+    "@tokens-studio/sd-transforms": "^2.0.3",
     "@types/node": "^25.3.0",
     "eslint": "^10.0.1",
+    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "react-docgen-typescript": "^2.4.0",
+    "style-dictionary": "^5.5.0",
     "typescript": "5.7.2"
   },
   "keywords": [