@mediaradar/design-tokens 2.6.1 → 2.7.0

package/dist/DESIGN.md

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

package/dist/css/ref.css

@@ -356,5 +356,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

@@ -67,6 +67,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

@@ -440,6 +440,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;
@@ -509,6 +511,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

@@ -445,6 +445,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";
@@ -517,6 +518,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

@@ -114,5 +114,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.7.0",
   "main": "dist/js/tokens.js",
   "types": "dist/js/tokens.d.ts",
   "type": "module",