@mediaradar/design-tokens 3.2.0 → 3.3.0

package/dist/DESIGN.md

@@ -216,6 +216,7 @@ Key is the suffix for any Tailwind color utility: `bg-{key}`, `text-{key}`, `bor
 | card-title | 0.7813rem |
 | dense | 0.8125rem |
 | sm | 0.875rem |
+| panel-title | 0.9375rem |
 | base | 1rem |
 | md | 1.125rem |
 | lg | 1.25rem |

package/dist/css/ref.css

@@ -348,6 +348,7 @@
   --mr-ref-typography-size-card-title: 0.78125rem;
   --mr-ref-typography-size-dense: 0.8125rem;
   --mr-ref-typography-size-sm: 0.875rem;
+  --mr-ref-typography-size-panel-title: 0.9375rem;
   --mr-ref-typography-size-base: 1rem;
   --mr-ref-typography-size-md: 1.125rem;
   --mr-ref-typography-size-lg: 1.25rem;

package/dist/css/sys.css

@@ -41,6 +41,7 @@
   --mr-typography-font-size-card-title: var(--mr-ref-typography-size-card-title);
   --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-panel-title: var(--mr-ref-typography-size-panel-title);
   --mr-typography-font-size-base: var(--mr-ref-typography-size-base);
   --mr-typography-font-size-md: var(--mr-ref-typography-size-md);
   --mr-typography-font-size-lg: var(--mr-ref-typography-size-lg);

package/dist/js/tokens.d.ts

@@ -437,6 +437,8 @@ export const mrRefTypographySizeCardTitle: 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;
+/** 15px. The panel title step, between sm (14px) and base (16px) -- dialog, section and panel titles (the prototype's "Title 15"). Added because 15px titles were already common in both apps (42 uses in insights-studio) but only as a hard-coded text-[15px], outside the scale. Font size only, no line height, like micro, dense and card-title. Named panel-title, not title, so the class (text-panel-title) can't be mixed up with the text-text-title colour. */
+export const mrRefTypographySizePanelTitle: number;
 export const mrRefTypographySizeBase: number;
 export const mrRefTypographySizeMd: number;
 export const mrRefTypographySizeLg: number;
@@ -505,6 +507,7 @@ export const mrTypographyFontSizeXs: number;
 export const mrTypographyFontSizeCardTitle: number;
 export const mrTypographyFontSizeDense: number;
 export const mrTypographyFontSizeSm: number;
+export const mrTypographyFontSizePanelTitle: number;
 export const mrTypographyFontSizeBase: number;
 export const mrTypographyFontSizeMd: number;
 export const mrTypographyFontSizeLg: number;

package/dist/js/tokens.js

@@ -443,6 +443,7 @@ 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.
 export const mrRefTypographySizeSm = 0.875;
+export const mrRefTypographySizePanelTitle = 0.9375; // 15px. The panel title step, between sm (14px) and base (16px) -- dialog, section and panel titles (the prototype's "Title 15"). Added because 15px titles were already common in both apps (42 uses in insights-studio) but only as a hard-coded text-[15px], outside the scale. Font size only, no line height, like micro, dense and card-title. Named panel-title, not title, so the class (text-panel-title) can't be mixed up with the text-text-title colour.
 export const mrRefTypographySizeBase = 1;
 export const mrRefTypographySizeMd = 1.125;
 export const mrRefTypographySizeLg = 1.25;
@@ -519,6 +520,7 @@ export const mrTypographyFontSizeXs = 0.75;
 export const mrTypographyFontSizeCardTitle = 0.78125;
 export const mrTypographyFontSizeDense = 0.8125;
 export const mrTypographyFontSizeSm = 0.875;
+export const mrTypographyFontSizePanelTitle = 0.9375;
 export const mrTypographyFontSizeBase = 1;
 export const mrTypographyFontSizeMd = 1.125;
 export const mrTypographyFontSizeLg = 1.25;

package/dist/tailwind/preset.cjs

@@ -118,6 +118,7 @@ const textStyles = {
 const preset = {
   theme: { extend: {
     "spacing": {
+      "DEFAULT": "var(--mr-ref-dimension-spacing-scale-1)",
       "0px": "var(--mr-ref-dimension-spacing-px-0)",
       "1px": "var(--mr-ref-dimension-spacing-px-1)",
       "2px": "var(--mr-ref-dimension-spacing-px-2)",
@@ -192,6 +193,7 @@ const preset = {
       "card-title": "var(--mr-typography-font-size-card-title)",
       "dense": "var(--mr-typography-font-size-dense)",
       "sm": "var(--mr-typography-font-size-sm)",
+      "panel-title": "var(--mr-typography-font-size-panel-title)",
       "base": "var(--mr-typography-font-size-base)",
       "md": "var(--mr-typography-font-size-md)",
       "lg": "var(--mr-typography-font-size-lg)",

package/dist/tailwind/preset.js

@@ -118,6 +118,7 @@ const textStyles = {
 const preset = {
   theme: { extend: {
     "spacing": {
+      "DEFAULT": "var(--mr-ref-dimension-spacing-scale-1)",
       "0px": "var(--mr-ref-dimension-spacing-px-0)",
       "1px": "var(--mr-ref-dimension-spacing-px-1)",
       "2px": "var(--mr-ref-dimension-spacing-px-2)",
@@ -192,6 +193,7 @@ const preset = {
       "card-title": "var(--mr-typography-font-size-card-title)",
       "dense": "var(--mr-typography-font-size-dense)",
       "sm": "var(--mr-typography-font-size-sm)",
+      "panel-title": "var(--mr-typography-font-size-panel-title)",
       "base": "var(--mr-typography-font-size-base)",
       "md": "var(--mr-typography-font-size-md)",
       "lg": "var(--mr-typography-font-size-lg)",

package/dist/tailwind/theme.css

@@ -1,4 +1,5 @@
 @theme inline {
+  --spacing: var(--mr-ref-dimension-spacing-scale-1);
   --spacing-0px: var(--mr-ref-dimension-spacing-px-0);
   --spacing-1px: var(--mr-ref-dimension-spacing-px-1);
   --spacing-2px: var(--mr-ref-dimension-spacing-px-2);
@@ -51,6 +52,7 @@
   --text-card-title: var(--mr-typography-font-size-card-title);
   --text-dense: var(--mr-typography-font-size-dense);
   --text-sm: var(--mr-typography-font-size-sm);
+  --text-panel-title: var(--mr-typography-font-size-panel-title);
   --text-base: var(--mr-typography-font-size-base);
   --text-md: var(--mr-typography-font-size-md);
   --text-lg: var(--mr-typography-font-size-lg);

package/package.json

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