@mediaradar/design-tokens 3.3.0 → 3.5.0

package/dist/DESIGN.md

@@ -211,6 +211,8 @@ Key is the suffix for any Tailwind color utility: `bg-{key}`, `text-{key}`, `bor
 
 | Key | Value |
 | --- | --- |
+| control-caption | 0.625rem |
+| badge | 0.625rem |
 | micro | 0.6875rem |
 | xs | 0.75rem |
 | card-title | 0.7813rem |

package/dist/css/ref.css

@@ -343,6 +343,8 @@
   --mr-ref-typography-line-height-base: 1.5;
   --mr-ref-typography-line-height-lg: 1.6;
   --mr-ref-typography-line-height-xl: 1.8;
+  --mr-ref-typography-size-control-caption: 0.625rem;
+  --mr-ref-typography-size-badge: 0.625rem;
   --mr-ref-typography-size-micro: 0.6875rem;
   --mr-ref-typography-size-xs: 0.75rem;
   --mr-ref-typography-size-card-title: 0.78125rem;

package/dist/css/sys.css

@@ -36,6 +36,8 @@
   --mr-color-scrim: var(--mr-ref-color-brand-warm-scrim-light);
   --mr-typography-family-sans: var(--mr-ref-typography-family-primary);
   --mr-typography-family-serif: var(--mr-ref-typography-family-display);
+  --mr-typography-font-size-control-caption: var(--mr-ref-typography-size-control-caption);
+  --mr-typography-font-size-badge: var(--mr-ref-typography-size-badge);
   --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-card-title: var(--mr-ref-typography-size-card-title);

package/dist/js/tokens.d.ts

@@ -429,7 +429,11 @@ export const mrRefTypographyLineHeightSm: number;
 export const mrRefTypographyLineHeightBase: number;
 export const mrRefTypographyLineHeightLg: number;
 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. */
+/** 10px. The control caption step, below micro (11px) -- the small uppercase caption above a dropdown's value (the prototype's chip and chip trigger). Added so insights-studio can match the prototype, which draws these captions at 10px as a hard-coded text-[10px]. Only for captions on controls: badges and eyebrows stay on micro. Font size only, no line height, like micro, card-title and panel-title. */
+export const mrRefTypographySizeControlCaption: number;
+/** 10px. The badge step -- the text in badges, pills and tags (count pills, NEW, media-type tags). Badges are 10px in the prototype, and insights-studio matches it (decided 2026-11-06), so they don't round up to micro. Same size as control-caption but a separate role, so either can change without the other. Font size only, no line height, like micro and control-caption. */
+export const mrRefTypographySizeBadge: number;
+/** 11px. The annotation step, below xs (12px) -- eyebrow labels and other type that marks up content rather than being content. Badges are 10px (badge), matching the prototype, and the 10px caption above a dropdown value is control-caption. */
 export const mrRefTypographySizeMicro: number;
 export const mrRefTypographySizeXs: number;
 /** 12.5px. The card title step, between xs (12px) and dense (13px) -- the title of every card, from dashboard cards (Card's title prop) to rail cards. Added because card titles were already set at 12.5px across the prototype and the style guide, but only as a hard-coded text-[12.5px] repeated per file, outside the scale, so the component catalog couldn't show it. */
@@ -502,6 +506,8 @@ export const mrColorAiGradient: string;
 export const mrColorScrim: string;
 export const mrTypographyFamilySans: string;
 export const mrTypographyFamilySerif: string;
+export const mrTypographyFontSizeControlCaption: number;
+export const mrTypographyFontSizeBadge: number;
 export const mrTypographyFontSizeMicro: number;
 export const mrTypographyFontSizeXs: number;
 export const mrTypographyFontSizeCardTitle: number;

package/dist/js/tokens.js

@@ -438,7 +438,9 @@ export const mrRefTypographyLineHeightSm = 1.3;
 export const mrRefTypographyLineHeightBase = 1.5;
 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 mrRefTypographySizeControlCaption = 0.625; // 10px. The control caption step, below micro (11px) -- the small uppercase caption above a dropdown's value (the prototype's chip and chip trigger). Added so insights-studio can match the prototype, which draws these captions at 10px as a hard-coded text-[10px]. Only for captions on controls: badges and eyebrows stay on micro. Font size only, no line height, like micro, card-title and panel-title.
+export const mrRefTypographySizeBadge = 0.625; // 10px. The badge step -- the text in badges, pills and tags (count pills, NEW, media-type tags). Badges are 10px in the prototype, and insights-studio matches it (decided 2026-11-06), so they don't round up to micro. Same size as control-caption but a separate role, so either can change without the other. Font size only, no line height, like micro and control-caption.
+export const mrRefTypographySizeMicro = 0.6875; // 11px. The annotation step, below xs (12px) -- eyebrow labels and other type that marks up content rather than being content. Badges are 10px (badge), matching the prototype, and the 10px caption above a dropdown value is control-caption.
 export const mrRefTypographySizeXs = 0.75;
 export const mrRefTypographySizeCardTitle = 0.78125; // 12.5px. The card title step, between xs (12px) and dense (13px) -- the title of every card, from dashboard cards (Card's title prop) to rail cards. Added because card titles were already set at 12.5px across the prototype and the style guide, but only as a hard-coded text-[12.5px] repeated per file, outside the scale, so the component catalog couldn't show it.
 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.
@@ -515,6 +517,8 @@ export const mrColorScrim = "rgba(20, 17, 13, 0.55)";
 export const mrTypographyFamilySans =
   "'Instrument Sans', system-ui, sans-serif";
 export const mrTypographyFamilySerif = "'Instrument Serif', Georgia, serif";
+export const mrTypographyFontSizeControlCaption = 0.625;
+export const mrTypographyFontSizeBadge = 0.625;
 export const mrTypographyFontSizeMicro = 0.6875;
 export const mrTypographyFontSizeXs = 0.75;
 export const mrTypographyFontSizeCardTitle = 0.78125;

package/dist/tailwind/preset.cjs

@@ -188,6 +188,8 @@ const preset = {
       "serif": "var(--mr-typography-family-serif)"
     },
     "fontSize": {
+      "control-caption": "var(--mr-typography-font-size-control-caption)",
+      "badge": "var(--mr-typography-font-size-badge)",
       "micro": "var(--mr-typography-font-size-micro)",
       "xs": "var(--mr-typography-font-size-xs)",
       "card-title": "var(--mr-typography-font-size-card-title)",

package/dist/tailwind/preset.js

@@ -188,6 +188,8 @@ const preset = {
       "serif": "var(--mr-typography-family-serif)"
     },
     "fontSize": {
+      "control-caption": "var(--mr-typography-font-size-control-caption)",
+      "badge": "var(--mr-typography-font-size-badge)",
       "micro": "var(--mr-typography-font-size-micro)",
       "xs": "var(--mr-typography-font-size-xs)",
       "card-title": "var(--mr-typography-font-size-card-title)",

package/dist/tailwind/theme.css

@@ -47,6 +47,8 @@
   --color-scrim: var(--mr-color-scrim);
   --font-sans: var(--mr-typography-family-sans);
   --font-serif: var(--mr-typography-family-serif);
+  --text-control-caption: var(--mr-typography-font-size-control-caption);
+  --text-badge: var(--mr-typography-font-size-badge);
   --text-micro: var(--mr-typography-font-size-micro);
   --text-xs: var(--mr-typography-font-size-xs);
   --text-card-title: var(--mr-typography-font-size-card-title);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mediaradar/design-tokens",
-  "version": "3.3.0",
+  "version": "3.5.0",
   "main": "dist/js/tokens.js",
   "types": "dist/js/tokens.d.ts",
   "type": "module",