@mediaradar/design-tokens 2.9.0 → 2.11.0

package/dist/DESIGN.md

@@ -32,6 +32,7 @@ MediaRadar is a B2B media intelligence platform — enterprise software for adve
 | `surface` | Cards, panels, dialogs, drawers |
 | `subtle` | Secondary areas, sidebars, striped table rows |
 | `text-primary` | Body copy, headings, form values |
+| `text-title` | Page titles (the h1 at the top of a page) — a softer warm brown than `text-primary` |
 | `text-secondary` | Supporting text, metadata, timestamps |
 | `text-inverse` | Text/icons on dark or brand-colored backgrounds |
 | `text-warning` | Caution states |
@@ -44,6 +45,8 @@ MediaRadar is a B2B media intelligence platform — enterprise software for adve
 | `status-danger` | Errors, destructive actions |
 | `status-onstatus` | Text/icons on status-colored backgrounds |
 
+Tone gradients (`bg-tone-danger`, `bg-tone-info`, `bg-tone-warning`, `bg-tone-success`, `bg-tone-neutral`) fill image placeholders, such as a news card with no cover image. They are decorative backdrops, not status indicators: never use them on buttons, badges or text.
+
 ### Typography hierarchy
 
 Prefer `text-style-*` composite classes — they set size, weight, line-height, letter-spacing, and color in one class and support all Tailwind variants (`hover:`, `md:`, etc.).
@@ -173,7 +176,10 @@ Key is the suffix for any Tailwind color utility: `bg-{key}`, `text-{key}`, `bor
 | text-primary | #1f1b16 | #f4f2ee |
 | text-secondary | #6b6358 | #b5aea1 |
 | text-tertiary | #5f574b | #a39b8c |
+| text-title | #3a3329 | #d6cebf |
 | text-inverse | #fbfaf7 | #1c1814 |
+| text-inverseSuccess | #7fc28f | #1d7a3b |
+| text-inverseWarning | #e8c285 | #8a5a12 |
 | text-warning | #5c4118 | #e8c285 |
 | text-danger | #8b1018 | #ff7068 |
 | text-success | #1d4d2a | #7fc28f |
@@ -342,6 +348,7 @@ Tailwind: `p-{key}`, `m-{key}`, `gap-{key}`, `w-{key}`, `h-{key}`, etc. Integer
 | --- | --- |
 | control | 8px |
 | card | 12px |
+| pill | 999px |
 
 ### Elevation
 
@@ -357,7 +364,7 @@ Tailwind: `p-{key}`, `m-{key}`, `gap-{key}`, `w-{key}`, `h-{key}`, etc. Integer
 | Type | Key | Tailwind | Value |
 | --- | --- | --- | --- |
 | duration | interactive | duration-interactive | 200ms |
-| easing | interactive | ease-interactive | cubic-bezier(0.2, 0, 0, 1) |
+| easing | interactive | ease-interactive | cubic-bezier(0.25, 0.46, 0.45, 0.94) |
 
 ### Opacity
 

package/dist/css/dark.css

@@ -7,7 +7,10 @@
   --mr-color-text-primary: var(--mr-ref-color-brand-warm-text-primary-dark);
   --mr-color-text-secondary: var(--mr-ref-color-brand-warm-text-secondary-dark);
   --mr-color-text-tertiary: var(--mr-ref-color-brand-warm-text-tertiary-dark);
+  --mr-color-text-title: var(--mr-ref-color-brand-warm-text-title-dark);
   --mr-color-text-inverse: var(--mr-ref-color-brand-warm-text-inverse-dark);
+  --mr-color-text-inverse-success: var(--mr-ref-color-brand-warm-text-inverse-success-dark);
+  --mr-color-text-inverse-warning: var(--mr-ref-color-brand-warm-text-inverse-warning-dark);
   --mr-color-text-warning: var(--mr-ref-color-brand-warm-text-warning-dark);
   --mr-color-text-danger: var(--mr-ref-color-brand-warm-text-danger-dark);
   --mr-color-text-success: var(--mr-ref-color-brand-warm-text-success-dark);

package/dist/css/ref.css

@@ -13,10 +13,16 @@
   --mr-ref-color-brand-warm-text-secondary-dark: #b5aea1;
   --mr-ref-color-brand-warm-text-tertiary-light: #5f574b;
   --mr-ref-color-brand-warm-text-tertiary-dark: #a39b8c;
+  --mr-ref-color-brand-warm-text-title-light: #3a3329;
+  --mr-ref-color-brand-warm-text-title-dark: #d6cebf;
   --mr-ref-color-brand-warm-text-link-light: #2747c4;
   --mr-ref-color-brand-warm-text-link-dark: #8aa0ff;
   --mr-ref-color-brand-warm-text-inverse-light: #fbfaf7;
   --mr-ref-color-brand-warm-text-inverse-dark: #1c1814;
+  --mr-ref-color-brand-warm-text-inverse-success-light: #7fc28f;
+  --mr-ref-color-brand-warm-text-inverse-success-dark: #1d7a3b;
+  --mr-ref-color-brand-warm-text-inverse-warning-light: #e8c285;
+  --mr-ref-color-brand-warm-text-inverse-warning-dark: #8a5a12;
   --mr-ref-color-brand-warm-text-danger-light: #8b1018;
   --mr-ref-color-brand-warm-text-danger-dark: #ff7068;
   --mr-ref-color-brand-warm-text-warning-light: #5c4118;
@@ -356,9 +362,14 @@
   --mr-ref-motion-duration-fast: 120ms;
   --mr-ref-motion-duration-base: 200ms;
   --mr-ref-motion-duration-slow: 320ms;
-  --mr-ref-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  --mr-ref-motion-easing-standard: cubic-bezier(0.25, 0.46, 0.45, 0.94);
   --mr-ref-z-dropdown: 1000;
   --mr-ref-z-modal: 1100;
   --mr-ref-z-toast: 1150;
   --mr-ref-z-tooltip: 1200;
+  --mr-ref-gradient-tone-danger: linear-gradient(135deg, #e94545 0%, #8b1018 100%);
+  --mr-ref-gradient-tone-info: linear-gradient(135deg, #2747c4 0%, #14266e 100%);
+  --mr-ref-gradient-tone-warning: linear-gradient(135deg, #e0a642 0%, #8b5e22 100%);
+  --mr-ref-gradient-tone-success: linear-gradient(135deg, #2da85d 0%, #1a5a30 100%);
+  --mr-ref-gradient-tone-neutral: linear-gradient(135deg, #9aa3b5 0%, #5a6478 100%);
 }

package/dist/css/sys.css

@@ -7,7 +7,10 @@
   --mr-color-text-primary: var(--mr-ref-color-brand-warm-text-primary-light);
   --mr-color-text-secondary: var(--mr-ref-color-brand-warm-text-secondary-light);
   --mr-color-text-tertiary: var(--mr-ref-color-brand-warm-text-tertiary-light);
+  --mr-color-text-title: var(--mr-ref-color-brand-warm-text-title-light);
   --mr-color-text-inverse: var(--mr-ref-color-brand-warm-text-inverse-light);
+  --mr-color-text-inverse-success: var(--mr-ref-color-brand-warm-text-inverse-success-light);
+  --mr-color-text-inverse-warning: var(--mr-ref-color-brand-warm-text-inverse-warning-light);
   --mr-color-text-warning: var(--mr-ref-color-brand-warm-text-warning-light);
   --mr-color-text-danger: var(--mr-ref-color-brand-warm-text-danger-light);
   --mr-color-text-success: var(--mr-ref-color-brand-warm-text-success-light);
@@ -53,6 +56,7 @@
   --mr-typography-letter-spacing-tight: var(--mr-ref-typography-letter-spacing-tight);
   --mr-shape-radius-control: var(--mr-ref-dimension-radius-md);
   --mr-shape-radius-card: var(--mr-ref-dimension-radius-lg);
+  --mr-shape-radius-pill: var(--mr-ref-dimension-radius-full);
   --mr-shape-border-width-control: var(--mr-ref-dimension-border-width-hair);
   --mr-spacing-control-padding-x: var(--mr-ref-dimension-spacing-scale-3);
   --mr-spacing-control-padding-y: var(--mr-ref-dimension-spacing-scale-2);
@@ -65,6 +69,11 @@
   --mr-spacing-dialog-padding: var(--mr-ref-dimension-spacing-scale-6);
   --mr-elevation-raised: var(--mr-ref-shadow-sm);
   --mr-elevation-overlay: var(--mr-ref-shadow-md);
+  --mr-gradient-tone-danger: var(--mr-ref-gradient-tone-danger);
+  --mr-gradient-tone-info: var(--mr-ref-gradient-tone-info);
+  --mr-gradient-tone-warning: var(--mr-ref-gradient-tone-warning);
+  --mr-gradient-tone-success: var(--mr-ref-gradient-tone-success);
+  --mr-gradient-tone-neutral: var(--mr-ref-gradient-tone-neutral);
   --mr-motion-duration-interactive: var(--mr-ref-motion-duration-base);
   --mr-motion-easing-interactive: var(--mr-ref-motion-easing-standard);
   --mr-opacity-disabled: var(--mr-ref-opacity-disabled);

package/dist/js/tokens.d.ts

@@ -12,7 +12,10 @@ export const mrSysColorInput: string;
 export const mrSysColorTextPrimary: string;
 export const mrSysColorTextSecondary: string;
 export const mrSysColorTextTertiary: string;
+export const mrSysColorTextTitle: string;
 export const mrSysColorTextInverse: string;
+export const mrSysColorTextInverseSuccess: string;
+export const mrSysColorTextInverseWarning: string;
 export const mrSysColorTextWarning: string;
 export const mrSysColorTextDanger: string;
 export const mrSysColorTextSuccess: string;
@@ -48,10 +51,16 @@ export const mrRefColorBrandWarmTextSecondaryLight: string;
 export const mrRefColorBrandWarmTextSecondaryDark: string;
 export const mrRefColorBrandWarmTextTertiaryLight: string;
 export const mrRefColorBrandWarmTextTertiaryDark: string;
+export const mrRefColorBrandWarmTextTitleLight: string;
+export const mrRefColorBrandWarmTextTitleDark: string;
 export const mrRefColorBrandWarmTextLinkLight: string;
 export const mrRefColorBrandWarmTextLinkDark: string;
 export const mrRefColorBrandWarmTextInverseLight: string;
 export const mrRefColorBrandWarmTextInverseDark: string;
+export const mrRefColorBrandWarmTextInverseSuccessLight: string;
+export const mrRefColorBrandWarmTextInverseSuccessDark: string;
+export const mrRefColorBrandWarmTextInverseWarningLight: string;
+export const mrRefColorBrandWarmTextInverseWarningDark: string;
 export const mrRefColorBrandWarmTextDangerLight: string;
 export const mrRefColorBrandWarmTextDangerDark: string;
 export const mrRefColorBrandWarmTextWarningLight: string;
@@ -447,6 +456,11 @@ 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 mrRefGradientToneDanger: string;
+export const mrRefGradientToneInfo: string;
+export const mrRefGradientToneWarning: string;
+export const mrRefGradientToneSuccess: string;
+export const mrRefGradientToneNeutral: string;
 export const mrColorCanvas: string;
 export const mrColorSurface: string;
 export const mrColorInverseSurface: string;
@@ -455,7 +469,10 @@ export const mrColorInput: string;
 export const mrColorTextPrimary: string;
 export const mrColorTextSecondary: string;
 export const mrColorTextTertiary: string;
+export const mrColorTextTitle: string;
 export const mrColorTextInverse: string;
+export const mrColorTextInverseSuccess: string;
+export const mrColorTextInverseWarning: string;
 export const mrColorTextWarning: string;
 export const mrColorTextDanger: string;
 export const mrColorTextSuccess: string;
@@ -501,6 +518,7 @@ export const mrTypographyLetterSpacingNormal: number;
 export const mrTypographyLetterSpacingTight: number;
 export const mrShapeRadiusControl: number;
 export const mrShapeRadiusCard: number;
+export const mrShapeRadiusPill: number;
 export const mrShapeBorderWidthControl: number;
 export const mrSpacingControlPaddingX: number;
 export const mrSpacingControlPaddingY: number;
@@ -513,6 +531,11 @@ export const mrSpacingCardPadding: number;
 export const mrSpacingDialogPadding: number;
 export const mrElevationRaised: string;
 export const mrElevationOverlay: string;
+export const mrGradientToneDanger: string;
+export const mrGradientToneInfo: string;
+export const mrGradientToneWarning: string;
+export const mrGradientToneSuccess: string;
+export const mrGradientToneNeutral: string;
 export const mrMotionDurationInteractive: number;
 export const mrMotionEasingInteractive: string;
 export const mrOpacityDisabled: number;

package/dist/js/tokens.js

@@ -13,7 +13,10 @@ export const mrSysColorInput = "#2e2820";
 export const mrSysColorTextPrimary = "#f4f2ee";
 export const mrSysColorTextSecondary = "#b5aea1";
 export const mrSysColorTextTertiary = "#a39b8c";
+export const mrSysColorTextTitle = "#d6cebf";
 export const mrSysColorTextInverse = "#1c1814";
+export const mrSysColorTextInverseSuccess = "#1d7a3b";
+export const mrSysColorTextInverseWarning = "#8a5a12";
 export const mrSysColorTextWarning = "#e8c285";
 export const mrSysColorTextDanger = "#ff7068";
 export const mrSysColorTextSuccess = "#7fc28f";
@@ -50,10 +53,16 @@ export const mrRefColorBrandWarmTextSecondaryLight = "#6b6358";
 export const mrRefColorBrandWarmTextSecondaryDark = "#b5aea1";
 export const mrRefColorBrandWarmTextTertiaryLight = "#5f574b";
 export const mrRefColorBrandWarmTextTertiaryDark = "#a39b8c";
+export const mrRefColorBrandWarmTextTitleLight = "#3a3329";
+export const mrRefColorBrandWarmTextTitleDark = "#d6cebf";
 export const mrRefColorBrandWarmTextLinkLight = "#2747c4";
 export const mrRefColorBrandWarmTextLinkDark = "#8aa0ff";
 export const mrRefColorBrandWarmTextInverseLight = "#fbfaf7";
 export const mrRefColorBrandWarmTextInverseDark = "#1c1814";
+export const mrRefColorBrandWarmTextInverseSuccessLight = "#7fc28f";
+export const mrRefColorBrandWarmTextInverseSuccessDark = "#1d7a3b";
+export const mrRefColorBrandWarmTextInverseWarningLight = "#e8c285";
+export const mrRefColorBrandWarmTextInverseWarningDark = "#8a5a12";
 export const mrRefColorBrandWarmTextDangerLight = "#8b1018";
 export const mrRefColorBrandWarmTextDangerDark = "#ff7068";
 export const mrRefColorBrandWarmTextWarningLight = "#5c4118";
@@ -450,11 +459,21 @@ export const mrRefShadowMd =
 export const mrRefMotionDurationFast = 120;
 export const mrRefMotionDurationBase = 200;
 export const mrRefMotionDurationSlow = 320;
-export const mrRefMotionEasingStandard = "cubic-bezier(0.2, 0, 0, 1)";
+export const mrRefMotionEasingStandard = "cubic-bezier(0.25, 0.46, 0.45, 0.94)";
 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 mrRefGradientToneDanger =
+  "linear-gradient(135deg, #e94545 0%, #8b1018 100%)";
+export const mrRefGradientToneInfo =
+  "linear-gradient(135deg, #2747c4 0%, #14266e 100%)";
+export const mrRefGradientToneWarning =
+  "linear-gradient(135deg, #e0a642 0%, #8b5e22 100%)";
+export const mrRefGradientToneSuccess =
+  "linear-gradient(135deg, #2da85d 0%, #1a5a30 100%)";
+export const mrRefGradientToneNeutral =
+  "linear-gradient(135deg, #9aa3b5 0%, #5a6478 100%)";
 export const mrColorCanvas = "#f4f2ee";
 export const mrColorSurface = "#fbfaf7";
 export const mrColorInverseSurface = "#1f1b16";
@@ -463,7 +482,10 @@ export const mrColorInput = "#fbfaf7";
 export const mrColorTextPrimary = "#1f1b16";
 export const mrColorTextSecondary = "#6b6358";
 export const mrColorTextTertiary = "#5f574b";
+export const mrColorTextTitle = "#3a3329";
 export const mrColorTextInverse = "#fbfaf7";
+export const mrColorTextInverseSuccess = "#7fc28f";
+export const mrColorTextInverseWarning = "#e8c285";
 export const mrColorTextWarning = "#5c4118";
 export const mrColorTextDanger = "#8b1018";
 export const mrColorTextSuccess = "#1d4d2a";
@@ -511,6 +533,7 @@ export const mrTypographyLetterSpacingNormal = 0;
 export const mrTypographyLetterSpacingTight = -0.025;
 export const mrShapeRadiusControl = 8;
 export const mrShapeRadiusCard = 12;
+export const mrShapeRadiusPill = 999;
 export const mrShapeBorderWidthControl = 1;
 export const mrSpacingControlPaddingX = 0.75;
 export const mrSpacingControlPaddingY = 0.5;
@@ -525,8 +548,18 @@ export const mrElevationRaised =
   "0 1px 2px 0 rgba(2, 6, 23, 0.04), 0 1px 1px 0 rgba(2, 6, 23, 0.06)";
 export const mrElevationOverlay =
   "0 4px 12px 0 rgba(2, 6, 23, 0.06), 0 2px 4px 0 rgba(2, 6, 23, 0.04)";
+export const mrGradientToneDanger =
+  "linear-gradient(135deg, #e94545 0%, #8b1018 100%)";
+export const mrGradientToneInfo =
+  "linear-gradient(135deg, #2747c4 0%, #14266e 100%)";
+export const mrGradientToneWarning =
+  "linear-gradient(135deg, #e0a642 0%, #8b5e22 100%)";
+export const mrGradientToneSuccess =
+  "linear-gradient(135deg, #2da85d 0%, #1a5a30 100%)";
+export const mrGradientToneNeutral =
+  "linear-gradient(135deg, #9aa3b5 0%, #5a6478 100%)";
 export const mrMotionDurationInteractive = 200;
-export const mrMotionEasingInteractive = "cubic-bezier(0.2, 0, 0, 1)";
+export const mrMotionEasingInteractive = "cubic-bezier(0.25, 0.46, 0.45, 0.94)";
 export const mrOpacityDisabled = 0.4;
 export const mrZDropdown = 1000;
 export const mrZModal = 1100;

package/dist/tailwind/theme.css

@@ -55,7 +55,10 @@
   --color-text-primary: var(--mr-color-text-primary);
   --color-text-secondary: var(--mr-color-text-secondary);
   --color-text-tertiary: var(--mr-color-text-tertiary);
+  --color-text-title: var(--mr-color-text-title);
   --color-text-inverse: var(--mr-color-text-inverse);
+  --color-text-inverseSuccess: var(--mr-color-text-inverse-success);
+  --color-text-inverseWarning: var(--mr-color-text-inverse-warning);
   --color-text-warning: var(--mr-color-text-warning);
   --color-text-danger: var(--mr-color-text-danger);
   --color-text-success: var(--mr-color-text-success);
@@ -101,6 +104,7 @@
   --tracking-tight: var(--mr-typography-letter-spacing-tight);
   --radius-control: var(--mr-shape-radius-control);
   --radius-card: var(--mr-shape-radius-card);
+  --radius-pill: var(--mr-shape-radius-pill);
   --spacing-control-padding-x: var(--mr-spacing-control-padding-x);
   --spacing-control-padding-y: var(--mr-spacing-control-padding-y);
   --spacing-layout-xs: var(--mr-spacing-layout-xs);
@@ -112,6 +116,11 @@
   --spacing-dialog-padding: var(--mr-spacing-dialog-padding);
   --shadow-raised: var(--mr-elevation-raised);
   --shadow-overlay: var(--mr-elevation-overlay);
+  --background-image-tone-danger: var(--mr-gradient-tone-danger);
+  --background-image-tone-info: var(--mr-gradient-tone-info);
+  --background-image-tone-warning: var(--mr-gradient-tone-warning);
+  --background-image-tone-success: var(--mr-gradient-tone-success);
+  --background-image-tone-neutral: var(--mr-gradient-tone-neutral);
   --transition-duration-interactive: var(--mr-motion-duration-interactive);
   --ease-interactive: var(--mr-motion-easing-interactive);
   --opacity-disabled: var(--mr-opacity-disabled);

package/package.json

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