@mittwald/flow-design-tokens 1.2.0-next.9 → 1.3.0-next.0

package/dist/css/all-dark.css

@@ -195,6 +195,7 @@
   --switch--track-width: 2.75rem;
   --switch--track-corner-radius: 0.75rem;
   --switch--handle-size: 1.25rem;
+  --coach-mark--max-width: 360px;
   --contextual-help--max-width: 500px;
   --modal--size--s: 660px;
   --modal--size--m: 900px;
@@ -537,6 +538,7 @@
   --modal--off-canvas-max-width: calc(100dvw - var(--size-px--m));
   --popover--padding--m: var(--size-px--m);
   --popover--padding--s: var(--size-px--s);
+  --popover--viewport-padding: var(--size-px--m);
   --popover--border-style: var(--border-style--default);
   --popover--spacing: var(--size-px--s);
   --popover--popover-to-trigger-spacing: var(--size-px--m);
@@ -1075,6 +1077,7 @@
   --notification--border-x-start-width: var(--border-width--300);
   --notification--border-width: var(--border-width--100);
   --notification--border-color: var(--neutral--color--300);
+  --notification--max-width: calc(100dvw - 2 * var(--notification-provider--window-to-provider-spacing));
   --notification--info-background-color--default: var(--neutral--color--100);
   --notification--warning-background-color--default: var(--neutral--color--100);
   --notification--danger-background-color--default: var(--neutral--color--100);

package/dist/css/all-light.css

@@ -195,6 +195,7 @@
   --switch--track-width: 2.75rem;
   --switch--track-corner-radius: 0.75rem;
   --switch--handle-size: 1.25rem;
+  --coach-mark--max-width: 360px;
   --contextual-help--max-width: 500px;
   --modal--size--s: 660px;
   --modal--size--m: 900px;
@@ -537,6 +538,7 @@
   --modal--off-canvas-max-width: calc(100dvw - var(--size-px--m));
   --popover--padding--m: var(--size-px--m);
   --popover--padding--s: var(--size-px--s);
+  --popover--viewport-padding: var(--size-px--m);
   --popover--border-style: var(--border-style--default);
   --popover--spacing: var(--size-px--s);
   --popover--popover-to-trigger-spacing: var(--size-px--m);
@@ -1075,6 +1077,7 @@
   --notification--border-x-start-width: var(--border-width--300);
   --notification--border-width: var(--border-width--100);
   --notification--border-color: var(--neutral--color--300);
+  --notification--max-width: calc(100dvw - 2 * var(--notification-provider--window-to-provider-spacing));
   --notification--info-background-color--default: var(--neutral--color--100);
   --notification--warning-background-color--default: var(--neutral--color--100);
   --notification--danger-background-color--default: var(--neutral--color--100);

package/dist/css/base.css

@@ -38,6 +38,7 @@
   --switch--track-width: 2.75rem;
   --switch--track-corner-radius: 0.75rem;
   --switch--handle-size: 1.25rem;
+  --coach-mark--max-width: 360px;
   --contextual-help--max-width: 500px;
   --modal--size--s: 660px;
   --modal--size--m: 900px;
@@ -380,6 +381,7 @@
   --modal--off-canvas-max-width: calc(100dvw - var(--size-px--m));
   --popover--padding--m: var(--size-px--m);
   --popover--padding--s: var(--size-px--s);
+  --popover--viewport-padding: var(--size-px--m);
   --popover--border-style: var(--border-style--default);
   --popover--spacing: var(--size-px--s);
   --popover--popover-to-trigger-spacing: var(--size-px--m);
@@ -918,6 +920,7 @@
   --notification--border-x-start-width: var(--border-width--300);
   --notification--border-width: var(--border-width--100);
   --notification--border-color: var(--neutral--color--300);
+  --notification--max-width: calc(100dvw - 2 * var(--notification-provider--window-to-provider-spacing));
   --notification--info-background-color--default: var(--neutral--color--100);
   --notification--warning-background-color--default: var(--neutral--color--100);
   --notification--danger-background-color--default: var(--neutral--color--100);

package/dist/css-layered/all-dark.css

@@ -196,6 +196,7 @@
     --switch--track-width: 2.75rem;
     --switch--track-corner-radius: 0.75rem;
     --switch--handle-size: 1.25rem;
+    --coach-mark--max-width: 360px;
     --contextual-help--max-width: 500px;
     --modal--size--s: 660px;
     --modal--size--m: 900px;
@@ -538,6 +539,7 @@
     --modal--off-canvas-max-width: calc(100dvw - var(--size-px--m));
     --popover--padding--m: var(--size-px--m);
     --popover--padding--s: var(--size-px--s);
+    --popover--viewport-padding: var(--size-px--m);
     --popover--border-style: var(--border-style--default);
     --popover--spacing: var(--size-px--s);
     --popover--popover-to-trigger-spacing: var(--size-px--m);
@@ -1076,6 +1078,7 @@
     --notification--border-x-start-width: var(--border-width--300);
     --notification--border-width: var(--border-width--100);
     --notification--border-color: var(--neutral--color--300);
+    --notification--max-width: calc(100dvw - 2 * var(--notification-provider--window-to-provider-spacing));
     --notification--info-background-color--default: var(--neutral--color--100);
     --notification--warning-background-color--default: var(--neutral--color--100);
     --notification--danger-background-color--default: var(--neutral--color--100);

package/dist/css-layered/all-light.css

@@ -196,6 +196,7 @@
     --switch--track-width: 2.75rem;
     --switch--track-corner-radius: 0.75rem;
     --switch--handle-size: 1.25rem;
+    --coach-mark--max-width: 360px;
     --contextual-help--max-width: 500px;
     --modal--size--s: 660px;
     --modal--size--m: 900px;
@@ -538,6 +539,7 @@
     --modal--off-canvas-max-width: calc(100dvw - var(--size-px--m));
     --popover--padding--m: var(--size-px--m);
     --popover--padding--s: var(--size-px--s);
+    --popover--viewport-padding: var(--size-px--m);
     --popover--border-style: var(--border-style--default);
     --popover--spacing: var(--size-px--s);
     --popover--popover-to-trigger-spacing: var(--size-px--m);
@@ -1076,6 +1078,7 @@
     --notification--border-x-start-width: var(--border-width--300);
     --notification--border-width: var(--border-width--100);
     --notification--border-color: var(--neutral--color--300);
+    --notification--max-width: calc(100dvw - 2 * var(--notification-provider--window-to-provider-spacing));
     --notification--info-background-color--default: var(--neutral--color--100);
     --notification--warning-background-color--default: var(--neutral--color--100);
     --notification--danger-background-color--default: var(--neutral--color--100);

package/dist/css-layered/base.css

@@ -39,6 +39,7 @@
     --switch--track-width: 2.75rem;
     --switch--track-corner-radius: 0.75rem;
     --switch--handle-size: 1.25rem;
+    --coach-mark--max-width: 360px;
     --contextual-help--max-width: 500px;
     --modal--size--s: 660px;
     --modal--size--m: 900px;
@@ -381,6 +382,7 @@
     --modal--off-canvas-max-width: calc(100dvw - var(--size-px--m));
     --popover--padding--m: var(--size-px--m);
     --popover--padding--s: var(--size-px--s);
+    --popover--viewport-padding: var(--size-px--m);
     --popover--border-style: var(--border-style--default);
     --popover--spacing: var(--size-px--s);
     --popover--popover-to-trigger-spacing: var(--size-px--m);
@@ -919,6 +921,7 @@
     --notification--border-x-start-width: var(--border-width--300);
     --notification--border-width: var(--border-width--100);
     --notification--border-color: var(--neutral--color--300);
+    --notification--max-width: calc(100dvw - 2 * var(--notification-provider--window-to-provider-spacing));
     --notification--info-background-color--default: var(--neutral--color--100);
     --notification--warning-background-color--default: var(--neutral--color--100);
     --notification--danger-background-color--default: var(--neutral--color--100);

package/dist/json/all-dark.json

@@ -22890,6 +22890,27 @@
       ]
     }
   },
+  "coach-mark": {
+    "max-width": {
+      "key": "{coach-mark.max-width}",
+      "value": "360px",
+      "filePath": "src/overlays/coach-mark.yml",
+      "isSource": true,
+      "original": {
+        "value": "360px",
+        "key": "{coach-mark.max-width}"
+      },
+      "name": "CoachMarkMaxWidth",
+      "attributes": {
+        "category": "coach-mark",
+        "type": "max-width"
+      },
+      "path": [
+        "coach-mark",
+        "max-width"
+      ]
+    }
+  },
   "contextual-help": {
     "max-width": {
       "key": "{contextual-help.max-width}",
@@ -23559,6 +23580,25 @@
         "min-width"
       ]
     },
+    "viewport-padding": {
+      "key": "{popover.viewport-padding}",
+      "value": "16px",
+      "filePath": "src/overlays/popover.yml",
+      "isSource": true,
+      "original": {
+        "value": "{size-px.m}",
+        "key": "{popover.viewport-padding}"
+      },
+      "name": "PopoverViewportPadding",
+      "attributes": {
+        "category": "popover",
+        "type": "viewport-padding"
+      },
+      "path": [
+        "popover",
+        "viewport-padding"
+      ]
+    },
     "border-width": {
       "key": "{popover.border-width}",
       "value": "1px",
@@ -28019,6 +28059,25 @@
         "width"
       ]
     },
+    "max-width": {
+      "key": "{notification.max-width}",
+      "value": "calc(100dvw - 2 * 32px)",
+      "filePath": "src/status/notification.yml",
+      "isSource": true,
+      "original": {
+        "value": "calc(100dvw - 2 * {notification-provider.window-to-provider-spacing})",
+        "key": "{notification.max-width}"
+      },
+      "name": "NotificationMaxWidth",
+      "attributes": {
+        "category": "notification",
+        "type": "max-width"
+      },
+      "path": [
+        "notification",
+        "max-width"
+      ]
+    },
     "heading-to-text-spacing": {
       "key": "{notification.heading-to-text-spacing}",
       "value": "0.25rem",

package/dist/json/all-light.json

@@ -22890,6 +22890,27 @@
       ]
     }
   },
+  "coach-mark": {
+    "max-width": {
+      "key": "{coach-mark.max-width}",
+      "value": "360px",
+      "filePath": "src/overlays/coach-mark.yml",
+      "isSource": true,
+      "original": {
+        "value": "360px",
+        "key": "{coach-mark.max-width}"
+      },
+      "name": "CoachMarkMaxWidth",
+      "attributes": {
+        "category": "coach-mark",
+        "type": "max-width"
+      },
+      "path": [
+        "coach-mark",
+        "max-width"
+      ]
+    }
+  },
   "contextual-help": {
     "max-width": {
       "key": "{contextual-help.max-width}",
@@ -23559,6 +23580,25 @@
         "min-width"
       ]
     },
+    "viewport-padding": {
+      "key": "{popover.viewport-padding}",
+      "value": "16px",
+      "filePath": "src/overlays/popover.yml",
+      "isSource": true,
+      "original": {
+        "value": "{size-px.m}",
+        "key": "{popover.viewport-padding}"
+      },
+      "name": "PopoverViewportPadding",
+      "attributes": {
+        "category": "popover",
+        "type": "viewport-padding"
+      },
+      "path": [
+        "popover",
+        "viewport-padding"
+      ]
+    },
     "border-width": {
       "key": "{popover.border-width}",
       "value": "1px",
@@ -28019,6 +28059,25 @@
         "width"
       ]
     },
+    "max-width": {
+      "key": "{notification.max-width}",
+      "value": "calc(100dvw - 2 * 32px)",
+      "filePath": "src/status/notification.yml",
+      "isSource": true,
+      "original": {
+        "value": "calc(100dvw - 2 * {notification-provider.window-to-provider-spacing})",
+        "key": "{notification.max-width}"
+      },
+      "name": "NotificationMaxWidth",
+      "attributes": {
+        "category": "notification",
+        "type": "max-width"
+      },
+      "path": [
+        "notification",
+        "max-width"
+      ]
+    },
     "heading-to-text-spacing": {
       "key": "{notification.heading-to-text-spacing}",
       "value": "0.25rem",

package/dist/json/base.json

@@ -19567,6 +19567,27 @@
       ]
     }
   },
+  "coach-mark": {
+    "max-width": {
+      "key": "{coach-mark.max-width}",
+      "value": "360px",
+      "filePath": "src/overlays/coach-mark.yml",
+      "isSource": true,
+      "original": {
+        "value": "360px",
+        "key": "{coach-mark.max-width}"
+      },
+      "name": "CoachMarkMaxWidth",
+      "attributes": {
+        "category": "coach-mark",
+        "type": "max-width"
+      },
+      "path": [
+        "coach-mark",
+        "max-width"
+      ]
+    }
+  },
   "contextual-help": {
     "max-width": {
       "key": "{contextual-help.max-width}",
@@ -20236,6 +20257,25 @@
         "min-width"
       ]
     },
+    "viewport-padding": {
+      "key": "{popover.viewport-padding}",
+      "value": "16px",
+      "filePath": "src/overlays/popover.yml",
+      "isSource": true,
+      "original": {
+        "value": "{size-px.m}",
+        "key": "{popover.viewport-padding}"
+      },
+      "name": "PopoverViewportPadding",
+      "attributes": {
+        "category": "popover",
+        "type": "viewport-padding"
+      },
+      "path": [
+        "popover",
+        "viewport-padding"
+      ]
+    },
     "border-width": {
       "key": "{popover.border-width}",
       "value": "1px",
@@ -24696,6 +24736,25 @@
         "width"
       ]
     },
+    "max-width": {
+      "key": "{notification.max-width}",
+      "value": "calc(100dvw - 2 * 32px)",
+      "filePath": "src/status/notification.yml",
+      "isSource": true,
+      "original": {
+        "value": "calc(100dvw - 2 * {notification-provider.window-to-provider-spacing})",
+        "key": "{notification.max-width}"
+      },
+      "name": "NotificationMaxWidth",
+      "attributes": {
+        "category": "notification",
+        "type": "max-width"
+      },
+      "path": [
+        "notification",
+        "max-width"
+      ]
+    },
     "heading-to-text-spacing": {
       "key": "{notification.heading-to-text-spacing}",
       "value": "0.25rem",

package/dist/json-runtime/all-dark.json

@@ -8903,6 +8903,15 @@
       ]
     }
   },
+  "coach-mark": {
+    "max-width": {
+      "value": "360px",
+      "path": [
+        "coach-mark",
+        "max-width"
+      ]
+    }
+  },
   "contextual-help": {
     "max-width": {
       "value": "500px",
@@ -9159,6 +9168,13 @@
         "min-width"
       ]
     },
+    "viewport-padding": {
+      "value": "16px",
+      "path": [
+        "popover",
+        "viewport-padding"
+      ]
+    },
     "border-width": {
       "value": "1px",
       "path": [
@@ -10844,6 +10860,13 @@
         "width"
       ]
     },
+    "max-width": {
+      "value": "calc(100dvw - 2 * 32px)",
+      "path": [
+        "notification",
+        "max-width"
+      ]
+    },
     "heading-to-text-spacing": {
       "value": "0.25rem",
       "path": [

package/dist/json-runtime/all-light.json

@@ -8903,6 +8903,15 @@
       ]
     }
   },
+  "coach-mark": {
+    "max-width": {
+      "value": "360px",
+      "path": [
+        "coach-mark",
+        "max-width"
+      ]
+    }
+  },
   "contextual-help": {
     "max-width": {
       "value": "500px",
@@ -9159,6 +9168,13 @@
         "min-width"
       ]
     },
+    "viewport-padding": {
+      "value": "16px",
+      "path": [
+        "popover",
+        "viewport-padding"
+      ]
+    },
     "border-width": {
       "value": "1px",
       "path": [
@@ -10844,6 +10860,13 @@
         "width"
       ]
     },
+    "max-width": {
+      "value": "calc(100dvw - 2 * 32px)",
+      "path": [
+        "notification",
+        "max-width"
+      ]
+    },
     "heading-to-text-spacing": {
       "value": "0.25rem",
       "path": [

package/dist/json-runtime/base.json

@@ -7618,6 +7618,15 @@
       ]
     }
   },
+  "coach-mark": {
+    "max-width": {
+      "value": "360px",
+      "path": [
+        "coach-mark",
+        "max-width"
+      ]
+    }
+  },
   "contextual-help": {
     "max-width": {
       "value": "500px",
@@ -7874,6 +7883,13 @@
         "min-width"
       ]
     },
+    "viewport-padding": {
+      "value": "16px",
+      "path": [
+        "popover",
+        "viewport-padding"
+      ]
+    },
     "border-width": {
       "value": "1px",
       "path": [
@@ -9559,6 +9575,13 @@
         "width"
       ]
     },
+    "max-width": {
+      "value": "calc(100dvw - 2 * 32px)",
+      "path": [
+        "notification",
+        "max-width"
+      ]
+    },
     "heading-to-text-spacing": {
       "value": "0.25rem",
       "path": [

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@mittwald/flow-design-tokens",
-  "version": "1.2.0-next.9",
+  "version": "1.3.0-next.0",
   "type": "module",
   "description": "The design tokens used in Flow, mittwald’s design system",
   "homepage": "https://github.com/mittwald/flow/tree/main/packages/design-tokens",
   "repository": "https://github.com/mittwald/flow",
+  "license": "MIT",
   "exports": {
     "./css/*": "./dist/css/*",
     "./css-layered/*": "./dist/css-layered/*",
@@ -29,5 +30,5 @@
     "rimraf": "^6.1.3",
     "style-dictionary": "^5.5.2"
   },
-  "gitHead": "f63082035b7e221f573463c84fea6b7b4a89f56d"
+  "gitHead": "5b5ef7835ddf1b1c50f9cd0917abd4b435676fe9"
 }