@mediaradar/design-tokens 2.5.0 → 2.6.0

package/dist/DESIGN.md

@@ -203,6 +203,7 @@ Key is the suffix for any Tailwind color utility: `bg-{key}`, `text-{key}`, `bor
 
 | Key | Value |
 | --- | --- |
+| micro | 0.6875rem |
 | xs | 0.75rem |
 | sm | 0.875rem |
 | base | 1rem |

package/dist/css/ref.css

@@ -334,6 +334,7 @@
   --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-micro: 0.6875rem;
   --mr-ref-typography-size-xs: 0.75rem;
   --mr-ref-typography-size-sm: 0.875rem;
   --mr-ref-typography-size-base: 1rem;

package/dist/css/sys.css

@@ -30,6 +30,7 @@
   --mr-color-ai-ontint: var(--mr-ref-color-brand-warm-ai-ontint-light);
   --mr-color-ai-gradient: var(--mr-ref-color-brand-warm-ai-gradient-light);
   --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-sm: var(--mr-ref-typography-size-sm);
   --mr-typography-font-size-base: var(--mr-ref-typography-size-base);

package/dist/js/tokens.d.ts

@@ -416,6 +416,8 @@ 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. */
+export const mrRefTypographySizeMicro: number;
 export const mrRefTypographySizeXs: number;
 export const mrRefTypographySizeSm: number;
 export const mrRefTypographySizeBase: number;
@@ -468,6 +470,7 @@ export const mrColorAiTint: string;
 export const mrColorAiOntint: string;
 export const mrColorAiGradient: string;
 export const mrColorScrim: string;
+export const mrTypographyFontSizeMicro: number;
 export const mrTypographyFontSizeXs: number;
 export const mrTypographyFontSizeSm: number;
 export const mrTypographyFontSizeBase: number;

package/dist/js/tokens.js

@@ -421,6 +421,7 @@ 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 mrRefTypographySizeXs = 0.75;
 export const mrRefTypographySizeSm = 0.875;
 export const mrRefTypographySizeBase = 1;
@@ -476,6 +477,7 @@ export const mrColorAiOntint = "#2747c4";
 export const mrColorAiGradient =
   "linear-gradient(135deg, #2747c4 0%, #f05323 60%, #f99d20 100%)";
 export const mrColorScrim = "rgba(20, 17, 13, 0.55)";
+export const mrTypographyFontSizeMicro = 0.6875;
 export const mrTypographyFontSizeXs = 0.75;
 export const mrTypographyFontSizeSm = 0.875;
 export const mrTypographyFontSizeBase = 1;

package/dist/tailwind/theme.css

@@ -78,6 +78,7 @@
   --color-ai-ontint: var(--mr-color-ai-ontint);
   --color-ai-gradient: var(--mr-color-ai-gradient);
   --color-scrim: var(--mr-color-scrim);
+  --text-micro: var(--mr-typography-font-size-micro);
   --text-xs: var(--mr-typography-font-size-xs);
   --text-sm: var(--mr-typography-font-size-sm);
   --text-base: var(--mr-typography-font-size-base);

package/package.json

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