@mediaradar/design-tokens 2.6.1 → 2.8.0

package/dist/DESIGN.md

@@ -374,4 +374,5 @@ Tailwind: `z-{key}`
 | --- | --- |
 | dropdown | 1000 |
 | modal | 1100 |
+| toast | 1150 |
 | tooltip | 1200 |

package/dist/css/component.css

@@ -4,5 +4,5 @@
 
 :root {
   --mr-button-border: #dcd6cb;
-  --mr-button-typography-fontfamily: 'Roboto Flex', sans-serif;
+  --mr-button-typography-fontfamily: 'Instrument Sans', system-ui, sans-serif;
 }

package/dist/css/ref.css

@@ -323,8 +323,9 @@
   --mr-ref-dimension-radius-lg: 12px;
   --mr-ref-dimension-radius-xl: 16px;
   --mr-ref-dimension-radius-full: 999px;
-  --mr-ref-typography-family-primary: 'Roboto Flex', sans-serif;
-  --mr-ref-typography-family-heading: 'Roboto Flex', sans-serif;
+  --mr-ref-typography-family-primary: 'Instrument Sans', system-ui, sans-serif;
+  --mr-ref-typography-family-heading: 'Instrument Sans', system-ui, sans-serif;
+  --mr-ref-typography-family-display: 'Instrument Serif', Georgia, serif;
   --mr-ref-typography-weight-regular: 400;
   --mr-ref-typography-weight-medium: 500;
   --mr-ref-typography-weight-semibold: 600;
@@ -356,5 +357,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

@@ -30,6 +30,8 @@
   --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-family-sans: var(--mr-ref-typography-family-primary);
+  --mr-typography-family-serif: var(--mr-ref-typography-family-display);
   --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);
@@ -67,6 +69,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

@@ -407,6 +407,7 @@ export const mrRefDimensionRadiusXl: number;
 export const mrRefDimensionRadiusFull: number;
 export const mrRefTypographyFamilyPrimary: string;
 export const mrRefTypographyFamilyHeading: string;
+export const mrRefTypographyFamilyDisplay: string;
 export const mrRefTypographyWeightRegular: number;
 export const mrRefTypographyWeightMedium: number;
 export const mrRefTypographyWeightSemibold: number;
@@ -440,6 +441,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 +475,8 @@ export const mrColorAiTint: string;
 export const mrColorAiOntint: string;
 export const mrColorAiGradient: string;
 export const mrColorScrim: string;
+export const mrTypographyFamilySans: string;
+export const mrTypographyFamilySerif: string;
 export const mrTypographyFontSizeMicro: number;
 export const mrTypographyFontSizeXs: number;
 export const mrTypographyFontSizeDense: number;
@@ -509,6 +514,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

@@ -3,7 +3,8 @@
  */
 
 export const mrButtonBorder = "#dcd6cb";
-export const mrButtonTypographyFontfamily = "'Roboto Flex', sans-serif";
+export const mrButtonTypographyFontfamily =
+  "'Instrument Sans', system-ui, sans-serif";
 export const mrSysColorCanvas = "#1c1814";
 export const mrSysColorSurface = "#26211b";
 export const mrSysColorSubtle = "#322c24";
@@ -410,8 +411,12 @@ export const mrRefDimensionRadiusMd = 8;
 export const mrRefDimensionRadiusLg = 12;
 export const mrRefDimensionRadiusXl = 16;
 export const mrRefDimensionRadiusFull = 999;
-export const mrRefTypographyFamilyPrimary = "'Roboto Flex', sans-serif";
-export const mrRefTypographyFamilyHeading = "'Roboto Flex', sans-serif";
+export const mrRefTypographyFamilyPrimary =
+  "'Instrument Sans', system-ui, sans-serif";
+export const mrRefTypographyFamilyHeading =
+  "'Instrument Sans', system-ui, sans-serif";
+export const mrRefTypographyFamilyDisplay =
+  "'Instrument Serif', Georgia, serif";
 export const mrRefTypographyWeightRegular = 400;
 export const mrRefTypographyWeightMedium = 500;
 export const mrRefTypographyWeightSemibold = 600;
@@ -445,6 +450,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";
@@ -478,6 +484,9 @@ 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 mrTypographyFamilySans =
+  "'Instrument Sans', system-ui, sans-serif";
+export const mrTypographyFamilySerif = "'Instrument Serif', Georgia, serif";
 export const mrTypographyFontSizeMicro = 0.6875;
 export const mrTypographyFontSizeXs = 0.75;
 export const mrTypographyFontSizeDense = 0.8125;
@@ -517,6 +526,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

@@ -78,6 +78,8 @@
   --color-ai-ontint: var(--mr-color-ai-ontint);
   --color-ai-gradient: var(--mr-color-ai-gradient);
   --color-scrim: var(--mr-color-scrim);
+  --font-sans: var(--mr-typography-family-sans);
+  --font-serif: var(--mr-typography-family-serif);
   --text-micro: var(--mr-typography-font-size-micro);
   --text-xs: var(--mr-typography-font-size-xs);
   --text-dense: var(--mr-typography-font-size-dense);
@@ -114,5 +116,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.1",
+  "version": "2.8.0",
   "main": "dist/js/tokens.js",
   "types": "dist/js/tokens.d.ts",
   "type": "module",