@mittwald/flow-design-tokens 0.2.0-alpha.932 → 0.2.0-alpha.942

package/dist/css/all-dark.css

@@ -202,6 +202,7 @@
   --modal--content-min-height: 120px;
   --popover--min-width: 200px;
   --tooltip--max-width: 300px;
+  --scrollbar--track-color: transparent;
   --size-rem--xxxs: 0.0625rem;
   --size-rem--xxs: 0.125rem;
   --size-rem--xs: 0.25rem;
@@ -521,6 +522,7 @@
   --light-box--indicator-corner-radius: var(--corner-radius--round);
   --modal--padding: var(--size-px--l);
   --modal--padding-mobile: var(--size-px--m);
+  --modal--tray-top-spacing: var(--size-px--m);
   --modal--border-style: var(--border-style--default);
   --modal--header-padding-top: var(--size-px--m);
   --modal--off-canvas-max-width: calc(100dvw - var(--size-px--m));
@@ -536,6 +538,8 @@
   --tooltip--font-size: var(--font-size-text--s);
   --tooltip--tooltip-to-trigger-spacing: var(--size-px--s);
   --tooltip--tip-size: var(--size-px--s);
+  --scrollbar--size: var(--size-px--s);
+  --scrollbar--corner-radius: var(--corner-radius--round);
   --alert-text--spacing: var(--size-rem--xs);
   --alert--padding: var(--size-px--m);
   --alert--border-style: var(--border-style--default);
@@ -1016,6 +1020,7 @@
   --popover--border-color: var(--neutral--color--300);
   --tooltip--background-color: var(--neutral--color--900);
   --tooltip--corner-radius: var(--corner-radius--m);
+  --scrollbar--thumb-color: var(--dark--color--200);
   --alert-text--info-color: var(--info--color--900);
   --alert-text--warning-color: var(--warning--color--900);
   --alert-text--danger-color: var(--danger--color--900);

package/dist/css/all-light.css

@@ -202,6 +202,7 @@
   --modal--content-min-height: 120px;
   --popover--min-width: 200px;
   --tooltip--max-width: 300px;
+  --scrollbar--track-color: transparent;
   --size-rem--xxxs: 0.0625rem;
   --size-rem--xxs: 0.125rem;
   --size-rem--xs: 0.25rem;
@@ -521,6 +522,7 @@
   --light-box--indicator-corner-radius: var(--corner-radius--round);
   --modal--padding: var(--size-px--l);
   --modal--padding-mobile: var(--size-px--m);
+  --modal--tray-top-spacing: var(--size-px--m);
   --modal--border-style: var(--border-style--default);
   --modal--header-padding-top: var(--size-px--m);
   --modal--off-canvas-max-width: calc(100dvw - var(--size-px--m));
@@ -536,6 +538,8 @@
   --tooltip--font-size: var(--font-size-text--s);
   --tooltip--tooltip-to-trigger-spacing: var(--size-px--s);
   --tooltip--tip-size: var(--size-px--s);
+  --scrollbar--size: var(--size-px--s);
+  --scrollbar--corner-radius: var(--corner-radius--round);
   --alert-text--spacing: var(--size-rem--xs);
   --alert--padding: var(--size-px--m);
   --alert--border-style: var(--border-style--default);
@@ -1016,6 +1020,7 @@
   --popover--border-color: var(--neutral--color--300);
   --tooltip--background-color: var(--neutral--color--900);
   --tooltip--corner-radius: var(--corner-radius--m);
+  --scrollbar--thumb-color: var(--dark--color--200);
   --alert-text--info-color: var(--info--color--900);
   --alert-text--warning-color: var(--warning--color--900);
   --alert-text--danger-color: var(--danger--color--900);

package/dist/css/base.css

@@ -45,6 +45,7 @@
   --modal--content-min-height: 120px;
   --popover--min-width: 200px;
   --tooltip--max-width: 300px;
+  --scrollbar--track-color: transparent;
   --size-rem--xxxs: 0.0625rem;
   --size-rem--xxs: 0.125rem;
   --size-rem--xs: 0.25rem;
@@ -364,6 +365,7 @@
   --light-box--indicator-corner-radius: var(--corner-radius--round);
   --modal--padding: var(--size-px--l);
   --modal--padding-mobile: var(--size-px--m);
+  --modal--tray-top-spacing: var(--size-px--m);
   --modal--border-style: var(--border-style--default);
   --modal--header-padding-top: var(--size-px--m);
   --modal--off-canvas-max-width: calc(100dvw - var(--size-px--m));
@@ -379,6 +381,8 @@
   --tooltip--font-size: var(--font-size-text--s);
   --tooltip--tooltip-to-trigger-spacing: var(--size-px--s);
   --tooltip--tip-size: var(--size-px--s);
+  --scrollbar--size: var(--size-px--s);
+  --scrollbar--corner-radius: var(--corner-radius--round);
   --alert-text--spacing: var(--size-rem--xs);
   --alert--padding: var(--size-px--m);
   --alert--border-style: var(--border-style--default);
@@ -859,6 +863,7 @@
   --popover--border-color: var(--neutral--color--300);
   --tooltip--background-color: var(--neutral--color--900);
   --tooltip--corner-radius: var(--corner-radius--m);
+  --scrollbar--thumb-color: var(--dark--color--200);
   --alert-text--info-color: var(--info--color--900);
   --alert-text--warning-color: var(--warning--color--900);
   --alert-text--danger-color: var(--danger--color--900);

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

@@ -203,6 +203,7 @@
     --modal--content-min-height: 120px;
     --popover--min-width: 200px;
     --tooltip--max-width: 300px;
+    --scrollbar--track-color: transparent;
     --size-rem--xxxs: 0.0625rem;
     --size-rem--xxs: 0.125rem;
     --size-rem--xs: 0.25rem;
@@ -522,6 +523,7 @@
     --light-box--indicator-corner-radius: var(--corner-radius--round);
     --modal--padding: var(--size-px--l);
     --modal--padding-mobile: var(--size-px--m);
+    --modal--tray-top-spacing: var(--size-px--m);
     --modal--border-style: var(--border-style--default);
     --modal--header-padding-top: var(--size-px--m);
     --modal--off-canvas-max-width: calc(100dvw - var(--size-px--m));
@@ -537,6 +539,8 @@
     --tooltip--font-size: var(--font-size-text--s);
     --tooltip--tooltip-to-trigger-spacing: var(--size-px--s);
     --tooltip--tip-size: var(--size-px--s);
+    --scrollbar--size: var(--size-px--s);
+    --scrollbar--corner-radius: var(--corner-radius--round);
     --alert-text--spacing: var(--size-rem--xs);
     --alert--padding: var(--size-px--m);
     --alert--border-style: var(--border-style--default);
@@ -1017,6 +1021,7 @@
     --popover--border-color: var(--neutral--color--300);
     --tooltip--background-color: var(--neutral--color--900);
     --tooltip--corner-radius: var(--corner-radius--m);
+    --scrollbar--thumb-color: var(--dark--color--200);
     --alert-text--info-color: var(--info--color--900);
     --alert-text--warning-color: var(--warning--color--900);
     --alert-text--danger-color: var(--danger--color--900);

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

@@ -203,6 +203,7 @@
     --modal--content-min-height: 120px;
     --popover--min-width: 200px;
     --tooltip--max-width: 300px;
+    --scrollbar--track-color: transparent;
     --size-rem--xxxs: 0.0625rem;
     --size-rem--xxs: 0.125rem;
     --size-rem--xs: 0.25rem;
@@ -522,6 +523,7 @@
     --light-box--indicator-corner-radius: var(--corner-radius--round);
     --modal--padding: var(--size-px--l);
     --modal--padding-mobile: var(--size-px--m);
+    --modal--tray-top-spacing: var(--size-px--m);
     --modal--border-style: var(--border-style--default);
     --modal--header-padding-top: var(--size-px--m);
     --modal--off-canvas-max-width: calc(100dvw - var(--size-px--m));
@@ -537,6 +539,8 @@
     --tooltip--font-size: var(--font-size-text--s);
     --tooltip--tooltip-to-trigger-spacing: var(--size-px--s);
     --tooltip--tip-size: var(--size-px--s);
+    --scrollbar--size: var(--size-px--s);
+    --scrollbar--corner-radius: var(--corner-radius--round);
     --alert-text--spacing: var(--size-rem--xs);
     --alert--padding: var(--size-px--m);
     --alert--border-style: var(--border-style--default);
@@ -1017,6 +1021,7 @@
     --popover--border-color: var(--neutral--color--300);
     --tooltip--background-color: var(--neutral--color--900);
     --tooltip--corner-radius: var(--corner-radius--m);
+    --scrollbar--thumb-color: var(--dark--color--200);
     --alert-text--info-color: var(--info--color--900);
     --alert-text--warning-color: var(--warning--color--900);
     --alert-text--danger-color: var(--danger--color--900);

package/dist/css-layered/base.css

@@ -46,6 +46,7 @@
     --modal--content-min-height: 120px;
     --popover--min-width: 200px;
     --tooltip--max-width: 300px;
+    --scrollbar--track-color: transparent;
     --size-rem--xxxs: 0.0625rem;
     --size-rem--xxs: 0.125rem;
     --size-rem--xs: 0.25rem;
@@ -365,6 +366,7 @@
     --light-box--indicator-corner-radius: var(--corner-radius--round);
     --modal--padding: var(--size-px--l);
     --modal--padding-mobile: var(--size-px--m);
+    --modal--tray-top-spacing: var(--size-px--m);
     --modal--border-style: var(--border-style--default);
     --modal--header-padding-top: var(--size-px--m);
     --modal--off-canvas-max-width: calc(100dvw - var(--size-px--m));
@@ -380,6 +382,8 @@
     --tooltip--font-size: var(--font-size-text--s);
     --tooltip--tooltip-to-trigger-spacing: var(--size-px--s);
     --tooltip--tip-size: var(--size-px--s);
+    --scrollbar--size: var(--size-px--s);
+    --scrollbar--corner-radius: var(--corner-radius--round);
     --alert-text--spacing: var(--size-rem--xs);
     --alert--padding: var(--size-px--m);
     --alert--border-style: var(--border-style--default);
@@ -860,6 +864,7 @@
     --popover--border-color: var(--neutral--color--300);
     --tooltip--background-color: var(--neutral--color--900);
     --tooltip--corner-radius: var(--corner-radius--m);
+    --scrollbar--thumb-color: var(--dark--color--200);
     --alert-text--info-color: var(--info--color--900);
     --alert-text--warning-color: var(--warning--color--900);
     --alert-text--danger-color: var(--danger--color--900);

package/dist/json/all-dark.json

@@ -22700,6 +22700,25 @@
         "padding-mobile"
       ]
     },
+    "tray-top-spacing": {
+      "key": "{modal.tray-top-spacing}",
+      "value": "16px",
+      "filePath": "src/overlays/modal.yml",
+      "isSource": true,
+      "original": {
+        "value": "{size-px.m}",
+        "key": "{modal.tray-top-spacing}"
+      },
+      "name": "ModalTrayTopSpacing",
+      "attributes": {
+        "category": "modal",
+        "type": "tray-top-spacing"
+      },
+      "path": [
+        "modal",
+        "tray-top-spacing"
+      ]
+    },
     "background-color": {
       "key": "{modal.background-color}",
       "value": "#1B1F24",
@@ -23386,6 +23405,84 @@
       ]
     }
   },
+  "scrollbar": {
+    "thumb-color": {
+      "key": "{scrollbar.thumb-color}",
+      "value": "rgb(255 255 255 / 25%)",
+      "filePath": "src/scrollbar.yml",
+      "isSource": true,
+      "original": {
+        "value": "{dark.color.200}",
+        "key": "{scrollbar.thumb-color}"
+      },
+      "name": "ScrollbarThumbColor",
+      "attributes": {
+        "category": "scrollbar",
+        "type": "thumb-color"
+      },
+      "path": [
+        "scrollbar",
+        "thumb-color"
+      ]
+    },
+    "track-color": {
+      "key": "{scrollbar.track-color}",
+      "value": "transparent",
+      "filePath": "src/scrollbar.yml",
+      "isSource": true,
+      "original": {
+        "value": "transparent",
+        "key": "{scrollbar.track-color}"
+      },
+      "name": "ScrollbarTrackColor",
+      "attributes": {
+        "category": "scrollbar",
+        "type": "track-color"
+      },
+      "path": [
+        "scrollbar",
+        "track-color"
+      ]
+    },
+    "size": {
+      "key": "{scrollbar.size}",
+      "value": "8px",
+      "filePath": "src/scrollbar.yml",
+      "isSource": true,
+      "original": {
+        "value": "{size-px.s}",
+        "key": "{scrollbar.size}"
+      },
+      "name": "ScrollbarSize",
+      "attributes": {
+        "category": "scrollbar",
+        "type": "size"
+      },
+      "path": [
+        "scrollbar",
+        "size"
+      ]
+    },
+    "corner-radius": {
+      "key": "{scrollbar.corner-radius}",
+      "value": "50%",
+      "filePath": "src/scrollbar.yml",
+      "isSource": true,
+      "original": {
+        "value": "{corner-radius.round}",
+        "key": "{scrollbar.corner-radius}"
+      },
+      "name": "ScrollbarCornerRadius",
+      "attributes": {
+        "category": "scrollbar",
+        "type": "corner-radius"
+      },
+      "path": [
+        "scrollbar",
+        "corner-radius"
+      ]
+    }
+  },
   "size-rem": {
     "xxxs": {
       "key": "{size-rem.xxxs}",

package/dist/json/all-light.json

@@ -22700,6 +22700,25 @@
         "padding-mobile"
       ]
     },
+    "tray-top-spacing": {
+      "key": "{modal.tray-top-spacing}",
+      "value": "16px",
+      "filePath": "src/overlays/modal.yml",
+      "isSource": true,
+      "original": {
+        "value": "{size-px.m}",
+        "key": "{modal.tray-top-spacing}"
+      },
+      "name": "ModalTrayTopSpacing",
+      "attributes": {
+        "category": "modal",
+        "type": "tray-top-spacing"
+      },
+      "path": [
+        "modal",
+        "tray-top-spacing"
+      ]
+    },
     "background-color": {
       "key": "{modal.background-color}",
       "value": "#FFFFFF",
@@ -23386,6 +23405,84 @@
       ]
     }
   },
+  "scrollbar": {
+    "thumb-color": {
+      "key": "{scrollbar.thumb-color}",
+      "value": "rgb(0 0 0 / 25%)",
+      "filePath": "src/scrollbar.yml",
+      "isSource": true,
+      "original": {
+        "value": "{dark.color.200}",
+        "key": "{scrollbar.thumb-color}"
+      },
+      "name": "ScrollbarThumbColor",
+      "attributes": {
+        "category": "scrollbar",
+        "type": "thumb-color"
+      },
+      "path": [
+        "scrollbar",
+        "thumb-color"
+      ]
+    },
+    "track-color": {
+      "key": "{scrollbar.track-color}",
+      "value": "transparent",
+      "filePath": "src/scrollbar.yml",
+      "isSource": true,
+      "original": {
+        "value": "transparent",
+        "key": "{scrollbar.track-color}"
+      },
+      "name": "ScrollbarTrackColor",
+      "attributes": {
+        "category": "scrollbar",
+        "type": "track-color"
+      },
+      "path": [
+        "scrollbar",
+        "track-color"
+      ]
+    },
+    "size": {
+      "key": "{scrollbar.size}",
+      "value": "8px",
+      "filePath": "src/scrollbar.yml",
+      "isSource": true,
+      "original": {
+        "value": "{size-px.s}",
+        "key": "{scrollbar.size}"
+      },
+      "name": "ScrollbarSize",
+      "attributes": {
+        "category": "scrollbar",
+        "type": "size"
+      },
+      "path": [
+        "scrollbar",
+        "size"
+      ]
+    },
+    "corner-radius": {
+      "key": "{scrollbar.corner-radius}",
+      "value": "50%",
+      "filePath": "src/scrollbar.yml",
+      "isSource": true,
+      "original": {
+        "value": "{corner-radius.round}",
+        "key": "{scrollbar.corner-radius}"
+      },
+      "name": "ScrollbarCornerRadius",
+      "attributes": {
+        "category": "scrollbar",
+        "type": "corner-radius"
+      },
+      "path": [
+        "scrollbar",
+        "corner-radius"
+      ]
+    }
+  },
   "size-rem": {
     "xxxs": {
       "key": "{size-rem.xxxs}",

package/dist/json/base.json

@@ -19377,6 +19377,25 @@
         "padding-mobile"
       ]
     },
+    "tray-top-spacing": {
+      "key": "{modal.tray-top-spacing}",
+      "value": "16px",
+      "filePath": "src/overlays/modal.yml",
+      "isSource": true,
+      "original": {
+        "value": "{size-px.m}",
+        "key": "{modal.tray-top-spacing}"
+      },
+      "name": "ModalTrayTopSpacing",
+      "attributes": {
+        "category": "modal",
+        "type": "tray-top-spacing"
+      },
+      "path": [
+        "modal",
+        "tray-top-spacing"
+      ]
+    },
     "background-color": {
       "key": "{modal.background-color}",
       "value": "#FFFFFF",
@@ -20063,6 +20082,84 @@
       ]
     }
   },
+  "scrollbar": {
+    "thumb-color": {
+      "key": "{scrollbar.thumb-color}",
+      "value": "rgb(0 0 0 / 25%)",
+      "filePath": "src/scrollbar.yml",
+      "isSource": true,
+      "original": {
+        "value": "{dark.color.200}",
+        "key": "{scrollbar.thumb-color}"
+      },
+      "name": "ScrollbarThumbColor",
+      "attributes": {
+        "category": "scrollbar",
+        "type": "thumb-color"
+      },
+      "path": [
+        "scrollbar",
+        "thumb-color"
+      ]
+    },
+    "track-color": {
+      "key": "{scrollbar.track-color}",
+      "value": "transparent",
+      "filePath": "src/scrollbar.yml",
+      "isSource": true,
+      "original": {
+        "value": "transparent",
+        "key": "{scrollbar.track-color}"
+      },
+      "name": "ScrollbarTrackColor",
+      "attributes": {
+        "category": "scrollbar",
+        "type": "track-color"
+      },
+      "path": [
+        "scrollbar",
+        "track-color"
+      ]
+    },
+    "size": {
+      "key": "{scrollbar.size}",
+      "value": "8px",
+      "filePath": "src/scrollbar.yml",
+      "isSource": true,
+      "original": {
+        "value": "{size-px.s}",
+        "key": "{scrollbar.size}"
+      },
+      "name": "ScrollbarSize",
+      "attributes": {
+        "category": "scrollbar",
+        "type": "size"
+      },
+      "path": [
+        "scrollbar",
+        "size"
+      ]
+    },
+    "corner-radius": {
+      "key": "{scrollbar.corner-radius}",
+      "value": "50%",
+      "filePath": "src/scrollbar.yml",
+      "isSource": true,
+      "original": {
+        "value": "{corner-radius.round}",
+        "key": "{scrollbar.corner-radius}"
+      },
+      "name": "ScrollbarCornerRadius",
+      "attributes": {
+        "category": "scrollbar",
+        "type": "corner-radius"
+      },
+      "path": [
+        "scrollbar",
+        "corner-radius"
+      ]
+    }
+  },
   "size-rem": {
     "xxxs": {
       "key": "{size-rem.xxxs}",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-design-tokens",
-  "version": "0.2.0-alpha.932",
+  "version": "0.2.0-alpha.942",
   "type": "module",
   "description": "The design tokens used in Flow, mittwald’s design system",
   "homepage": "https://github.com/mittwald/flow/tree/main/packages/design-tokens",
@@ -26,5 +26,5 @@
     "rimraf": "^6.1.3",
     "style-dictionary": "^5.4.4"
   },
-  "gitHead": "cd013dccaa2fbdd01b6b93159e6765d582436b8c"
+  "gitHead": "4e11ff9c408d897810ca1fea15f82379bc707f5b"
 }