@mittwald/flow-design-tokens 1.3.0-next.3 → 1.3.0-next.30

package/dist/css/all-dark.css

@@ -172,6 +172,8 @@
   --icon--size--s: 1rem;
   --icon--size--m: 1.5rem;
   --icon--size--l: 4rem;
+  --cartesian-chart--transition-duration: 800ms;
+  --donut-chart--transition-duration: 800ms;
   --blur: 3px;
   --transition--duration--fast: 200ms;
   --transition--duration--default: 300ms;
@@ -226,6 +228,7 @@
   --loading-spinner--transition-duration: 2000ms;
   --loading-spinner--transition-duration-slow: 6000ms;
   --notification--width: 355px;
+  --progress-bar--transition-duration: 800ms;
   --image-cropper--grid-width: 0.5px;
   --action-group--spacing--m: var(--size-px--m);
   --action-group--spacing--s: var(--size-px--s);
@@ -1323,7 +1326,7 @@
   --illustrated-message--light-content-color: var(--light-plain-content-color);
   --illustrated-message--dark-static-content-color: var(--dark-static-plain-content-color);
   --illustrated-message--light-static-content-color: var(--light-static-plain-content-color);
-  --image--border-color: var(--neutral-outline-border-color);
+  --image--border-color: var(--separator--color);
   --inline-code--background-color: var(--neutral-soft-background-color--default);
   --inline-code--content-color: var(--neutral-soft-content-color);
   --inline-code--dark-background-color: var(--dark-soft-background-color--default);

package/dist/css/all-light.css

@@ -172,6 +172,8 @@
   --icon--size--s: 1rem;
   --icon--size--m: 1.5rem;
   --icon--size--l: 4rem;
+  --cartesian-chart--transition-duration: 800ms;
+  --donut-chart--transition-duration: 800ms;
   --blur: 3px;
   --transition--duration--fast: 200ms;
   --transition--duration--default: 300ms;
@@ -226,6 +228,7 @@
   --loading-spinner--transition-duration: 2000ms;
   --loading-spinner--transition-duration-slow: 6000ms;
   --notification--width: 355px;
+  --progress-bar--transition-duration: 800ms;
   --image-cropper--grid-width: 0.5px;
   --action-group--spacing--m: var(--size-px--m);
   --action-group--spacing--s: var(--size-px--s);
@@ -1323,7 +1326,7 @@
   --illustrated-message--light-content-color: var(--light-plain-content-color);
   --illustrated-message--dark-static-content-color: var(--dark-static-plain-content-color);
   --illustrated-message--light-static-content-color: var(--light-static-plain-content-color);
-  --image--border-color: var(--neutral-outline-border-color);
+  --image--border-color: var(--separator--color);
   --inline-code--background-color: var(--neutral-soft-background-color--default);
   --inline-code--content-color: var(--neutral-soft-content-color);
   --inline-code--dark-background-color: var(--dark-soft-background-color--default);

package/dist/css/base.css

@@ -15,6 +15,8 @@
   --icon--size--s: 1rem;
   --icon--size--m: 1.5rem;
   --icon--size--l: 4rem;
+  --cartesian-chart--transition-duration: 800ms;
+  --donut-chart--transition-duration: 800ms;
   --blur: 3px;
   --transition--duration--fast: 200ms;
   --transition--duration--default: 300ms;
@@ -69,6 +71,7 @@
   --loading-spinner--transition-duration: 2000ms;
   --loading-spinner--transition-duration-slow: 6000ms;
   --notification--width: 355px;
+  --progress-bar--transition-duration: 800ms;
   --image-cropper--grid-width: 0.5px;
   --action-group--spacing--m: var(--size-px--m);
   --action-group--spacing--s: var(--size-px--s);
@@ -1166,7 +1169,7 @@
   --illustrated-message--light-content-color: var(--light-plain-content-color);
   --illustrated-message--dark-static-content-color: var(--dark-static-plain-content-color);
   --illustrated-message--light-static-content-color: var(--light-static-plain-content-color);
-  --image--border-color: var(--neutral-outline-border-color);
+  --image--border-color: var(--separator--color);
   --inline-code--background-color: var(--neutral-soft-background-color--default);
   --inline-code--content-color: var(--neutral-soft-content-color);
   --inline-code--dark-background-color: var(--dark-soft-background-color--default);

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

@@ -173,6 +173,8 @@
     --icon--size--s: 1rem;
     --icon--size--m: 1.5rem;
     --icon--size--l: 4rem;
+    --cartesian-chart--transition-duration: 800ms;
+    --donut-chart--transition-duration: 800ms;
     --blur: 3px;
     --transition--duration--fast: 200ms;
     --transition--duration--default: 300ms;
@@ -227,6 +229,7 @@
     --loading-spinner--transition-duration: 2000ms;
     --loading-spinner--transition-duration-slow: 6000ms;
     --notification--width: 355px;
+    --progress-bar--transition-duration: 800ms;
     --image-cropper--grid-width: 0.5px;
     --action-group--spacing--m: var(--size-px--m);
     --action-group--spacing--s: var(--size-px--s);
@@ -1324,7 +1327,7 @@
     --illustrated-message--light-content-color: var(--light-plain-content-color);
     --illustrated-message--dark-static-content-color: var(--dark-static-plain-content-color);
     --illustrated-message--light-static-content-color: var(--light-static-plain-content-color);
-    --image--border-color: var(--neutral-outline-border-color);
+    --image--border-color: var(--separator--color);
     --inline-code--background-color: var(--neutral-soft-background-color--default);
     --inline-code--content-color: var(--neutral-soft-content-color);
     --inline-code--dark-background-color: var(--dark-soft-background-color--default);

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

@@ -173,6 +173,8 @@
     --icon--size--s: 1rem;
     --icon--size--m: 1.5rem;
     --icon--size--l: 4rem;
+    --cartesian-chart--transition-duration: 800ms;
+    --donut-chart--transition-duration: 800ms;
     --blur: 3px;
     --transition--duration--fast: 200ms;
     --transition--duration--default: 300ms;
@@ -227,6 +229,7 @@
     --loading-spinner--transition-duration: 2000ms;
     --loading-spinner--transition-duration-slow: 6000ms;
     --notification--width: 355px;
+    --progress-bar--transition-duration: 800ms;
     --image-cropper--grid-width: 0.5px;
     --action-group--spacing--m: var(--size-px--m);
     --action-group--spacing--s: var(--size-px--s);
@@ -1324,7 +1327,7 @@
     --illustrated-message--light-content-color: var(--light-plain-content-color);
     --illustrated-message--dark-static-content-color: var(--dark-static-plain-content-color);
     --illustrated-message--light-static-content-color: var(--light-static-plain-content-color);
-    --image--border-color: var(--neutral-outline-border-color);
+    --image--border-color: var(--separator--color);
     --inline-code--background-color: var(--neutral-soft-background-color--default);
     --inline-code--content-color: var(--neutral-soft-content-color);
     --inline-code--dark-background-color: var(--dark-soft-background-color--default);

package/dist/css-layered/base.css

@@ -16,6 +16,8 @@
     --icon--size--s: 1rem;
     --icon--size--m: 1.5rem;
     --icon--size--l: 4rem;
+    --cartesian-chart--transition-duration: 800ms;
+    --donut-chart--transition-duration: 800ms;
     --blur: 3px;
     --transition--duration--fast: 200ms;
     --transition--duration--default: 300ms;
@@ -70,6 +72,7 @@
     --loading-spinner--transition-duration: 2000ms;
     --loading-spinner--transition-duration-slow: 6000ms;
     --notification--width: 355px;
+    --progress-bar--transition-duration: 800ms;
     --image-cropper--grid-width: 0.5px;
     --action-group--spacing--m: var(--size-px--m);
     --action-group--spacing--s: var(--size-px--s);
@@ -1167,7 +1170,7 @@
     --illustrated-message--light-content-color: var(--light-plain-content-color);
     --illustrated-message--dark-static-content-color: var(--dark-static-plain-content-color);
     --illustrated-message--light-static-content-color: var(--light-static-plain-content-color);
-    --image--border-color: var(--neutral-outline-border-color);
+    --image--border-color: var(--separator--color);
     --inline-code--background-color: var(--neutral-soft-background-color--default);
     --inline-code--content-color: var(--neutral-soft-content-color);
     --inline-code--dark-background-color: var(--dark-soft-background-color--default);

package/dist/json/all-dark.json

@@ -17169,11 +17169,11 @@
     },
     "border-color": {
       "key": "{image.border-color}",
-      "value": "#DCE9F7",
+      "value": "#8FA1B4",
       "filePath": "src/content/image.yml",
       "isSource": true,
       "original": {
-        "value": "{neutral-outline-border-color}",
+        "value": "{separator.color}",
         "key": "{image.border-color}"
       },
       "name": "ImageBorderColor",
@@ -18374,6 +18374,27 @@
       ]
     }
   },
+  "cartesian-chart": {
+    "transition-duration": {
+      "key": "{cartesian-chart.transition-duration}",
+      "value": "800ms",
+      "filePath": "src/dataVisualisation/cartesian-chart.yml",
+      "isSource": true,
+      "original": {
+        "value": "800ms",
+        "key": "{cartesian-chart.transition-duration}"
+      },
+      "name": "CartesianChartTransitionDuration",
+      "attributes": {
+        "category": "cartesian-chart",
+        "type": "transition-duration"
+      },
+      "path": [
+        "cartesian-chart",
+        "transition-duration"
+      ]
+    }
+  },
   "cartesian-grid": {
     "color": {
       "key": "{cartesian-grid.color}",
@@ -18436,6 +18457,25 @@
     }
   },
   "donut-chart": {
+    "transition-duration": {
+      "key": "{donut-chart.transition-duration}",
+      "value": "800ms",
+      "filePath": "src/dataVisualisation/donut-chart.yml",
+      "isSource": true,
+      "original": {
+        "value": "800ms",
+        "key": "{donut-chart.transition-duration}"
+      },
+      "name": "DonutChartTransitionDuration",
+      "attributes": {
+        "category": "donut-chart",
+        "type": "transition-duration"
+      },
+      "path": [
+        "donut-chart",
+        "transition-duration"
+      ]
+    },
     "border-color": {
       "key": "{donut-chart.border-color}",
       "value": "#DCE9F7",
@@ -28673,6 +28713,25 @@
     }
   },
   "progress-bar": {
+    "transition-duration": {
+      "key": "{progress-bar.transition-duration}",
+      "value": "800ms",
+      "filePath": "src/status/progress-bar.yml",
+      "isSource": true,
+      "original": {
+        "value": "800ms",
+        "key": "{progress-bar.transition-duration}"
+      },
+      "name": "ProgressBarTransitionDuration",
+      "attributes": {
+        "category": "progress-bar",
+        "type": "transition-duration"
+      },
+      "path": [
+        "progress-bar",
+        "transition-duration"
+      ]
+    },
     "font-size": {
       "key": "{progress-bar.font-size}",
       "value": "1rem",

package/dist/json/all-light.json

@@ -17169,11 +17169,11 @@
     },
     "border-color": {
       "key": "{image.border-color}",
-      "value": "#5E6C7A",
+      "value": "#B7C9DB",
       "filePath": "src/content/image.yml",
       "isSource": true,
       "original": {
-        "value": "{neutral-outline-border-color}",
+        "value": "{separator.color}",
         "key": "{image.border-color}"
       },
       "name": "ImageBorderColor",
@@ -18374,6 +18374,27 @@
       ]
     }
   },
+  "cartesian-chart": {
+    "transition-duration": {
+      "key": "{cartesian-chart.transition-duration}",
+      "value": "800ms",
+      "filePath": "src/dataVisualisation/cartesian-chart.yml",
+      "isSource": true,
+      "original": {
+        "value": "800ms",
+        "key": "{cartesian-chart.transition-duration}"
+      },
+      "name": "CartesianChartTransitionDuration",
+      "attributes": {
+        "category": "cartesian-chart",
+        "type": "transition-duration"
+      },
+      "path": [
+        "cartesian-chart",
+        "transition-duration"
+      ]
+    }
+  },
   "cartesian-grid": {
     "color": {
       "key": "{cartesian-grid.color}",
@@ -18436,6 +18457,25 @@
     }
   },
   "donut-chart": {
+    "transition-duration": {
+      "key": "{donut-chart.transition-duration}",
+      "value": "800ms",
+      "filePath": "src/dataVisualisation/donut-chart.yml",
+      "isSource": true,
+      "original": {
+        "value": "800ms",
+        "key": "{donut-chart.transition-duration}"
+      },
+      "name": "DonutChartTransitionDuration",
+      "attributes": {
+        "category": "donut-chart",
+        "type": "transition-duration"
+      },
+      "path": [
+        "donut-chart",
+        "transition-duration"
+      ]
+    },
     "border-color": {
       "key": "{donut-chart.border-color}",
       "value": "#5E6C7A",
@@ -28673,6 +28713,25 @@
     }
   },
   "progress-bar": {
+    "transition-duration": {
+      "key": "{progress-bar.transition-duration}",
+      "value": "800ms",
+      "filePath": "src/status/progress-bar.yml",
+      "isSource": true,
+      "original": {
+        "value": "800ms",
+        "key": "{progress-bar.transition-duration}"
+      },
+      "name": "ProgressBarTransitionDuration",
+      "attributes": {
+        "category": "progress-bar",
+        "type": "transition-duration"
+      },
+      "path": [
+        "progress-bar",
+        "transition-duration"
+      ]
+    },
     "font-size": {
       "key": "{progress-bar.font-size}",
       "value": "1rem",

package/dist/json/base.json

@@ -13846,11 +13846,11 @@
     },
     "border-color": {
       "key": "{image.border-color}",
-      "value": "#5E6C7A",
+      "value": "#B7C9DB",
       "filePath": "src/content/image.yml",
       "isSource": true,
       "original": {
-        "value": "{neutral-outline-border-color}",
+        "value": "{separator.color}",
         "key": "{image.border-color}"
       },
       "name": "ImageBorderColor",
@@ -15051,6 +15051,27 @@
       ]
     }
   },
+  "cartesian-chart": {
+    "transition-duration": {
+      "key": "{cartesian-chart.transition-duration}",
+      "value": "800ms",
+      "filePath": "src/dataVisualisation/cartesian-chart.yml",
+      "isSource": true,
+      "original": {
+        "value": "800ms",
+        "key": "{cartesian-chart.transition-duration}"
+      },
+      "name": "CartesianChartTransitionDuration",
+      "attributes": {
+        "category": "cartesian-chart",
+        "type": "transition-duration"
+      },
+      "path": [
+        "cartesian-chart",
+        "transition-duration"
+      ]
+    }
+  },
   "cartesian-grid": {
     "color": {
       "key": "{cartesian-grid.color}",
@@ -15113,6 +15134,25 @@
     }
   },
   "donut-chart": {
+    "transition-duration": {
+      "key": "{donut-chart.transition-duration}",
+      "value": "800ms",
+      "filePath": "src/dataVisualisation/donut-chart.yml",
+      "isSource": true,
+      "original": {
+        "value": "800ms",
+        "key": "{donut-chart.transition-duration}"
+      },
+      "name": "DonutChartTransitionDuration",
+      "attributes": {
+        "category": "donut-chart",
+        "type": "transition-duration"
+      },
+      "path": [
+        "donut-chart",
+        "transition-duration"
+      ]
+    },
     "border-color": {
       "key": "{donut-chart.border-color}",
       "value": "#5E6C7A",
@@ -25350,6 +25390,25 @@
     }
   },
   "progress-bar": {
+    "transition-duration": {
+      "key": "{progress-bar.transition-duration}",
+      "value": "800ms",
+      "filePath": "src/status/progress-bar.yml",
+      "isSource": true,
+      "original": {
+        "value": "800ms",
+        "key": "{progress-bar.transition-duration}"
+      },
+      "name": "ProgressBarTransitionDuration",
+      "attributes": {
+        "category": "progress-bar",
+        "type": "transition-duration"
+      },
+      "path": [
+        "progress-bar",
+        "transition-duration"
+      ]
+    },
     "font-size": {
       "key": "{progress-bar.font-size}",
       "value": "1rem",

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

@@ -6657,7 +6657,7 @@
       ]
     },
     "border-color": {
-      "value": "#DCE9F7",
+      "value": "#8FA1B4",
       "path": [
         "image",
         "border-color"
@@ -7127,6 +7127,15 @@
       ]
     }
   },
+  "cartesian-chart": {
+    "transition-duration": {
+      "value": "800ms",
+      "path": [
+        "cartesian-chart",
+        "transition-duration"
+      ]
+    }
+  },
   "cartesian-grid": {
     "color": {
       "value": "#E5EFF8",
@@ -7153,6 +7162,13 @@
     }
   },
   "donut-chart": {
+    "transition-duration": {
+      "value": "800ms",
+      "path": [
+        "donut-chart",
+        "transition-duration"
+      ]
+    },
     "border-color": {
       "value": "#DCE9F7",
       "path": [
@@ -11099,6 +11115,13 @@
     }
   },
   "progress-bar": {
+    "transition-duration": {
+      "value": "800ms",
+      "path": [
+        "progress-bar",
+        "transition-duration"
+      ]
+    },
     "font-size": {
       "value": "1rem",
       "path": [

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

@@ -6657,7 +6657,7 @@
       ]
     },
     "border-color": {
-      "value": "#5E6C7A",
+      "value": "#B7C9DB",
       "path": [
         "image",
         "border-color"
@@ -7127,6 +7127,15 @@
       ]
     }
   },
+  "cartesian-chart": {
+    "transition-duration": {
+      "value": "800ms",
+      "path": [
+        "cartesian-chart",
+        "transition-duration"
+      ]
+    }
+  },
   "cartesian-grid": {
     "color": {
       "value": "#3A434E",
@@ -7153,6 +7162,13 @@
     }
   },
   "donut-chart": {
+    "transition-duration": {
+      "value": "800ms",
+      "path": [
+        "donut-chart",
+        "transition-duration"
+      ]
+    },
     "border-color": {
       "value": "#5E6C7A",
       "path": [
@@ -11099,6 +11115,13 @@
     }
   },
   "progress-bar": {
+    "transition-duration": {
+      "value": "800ms",
+      "path": [
+        "progress-bar",
+        "transition-duration"
+      ]
+    },
     "font-size": {
       "value": "1rem",
       "path": [

package/dist/json-runtime/base.json

@@ -5372,7 +5372,7 @@
       ]
     },
     "border-color": {
-      "value": "#5E6C7A",
+      "value": "#B7C9DB",
       "path": [
         "image",
         "border-color"
@@ -5842,6 +5842,15 @@
       ]
     }
   },
+  "cartesian-chart": {
+    "transition-duration": {
+      "value": "800ms",
+      "path": [
+        "cartesian-chart",
+        "transition-duration"
+      ]
+    }
+  },
   "cartesian-grid": {
     "color": {
       "value": "#3A434E",
@@ -5868,6 +5877,13 @@
     }
   },
   "donut-chart": {
+    "transition-duration": {
+      "value": "800ms",
+      "path": [
+        "donut-chart",
+        "transition-duration"
+      ]
+    },
     "border-color": {
       "value": "#5E6C7A",
       "path": [
@@ -9814,6 +9830,13 @@
     }
   },
   "progress-bar": {
+    "transition-duration": {
+      "value": "800ms",
+      "path": [
+        "progress-bar",
+        "transition-duration"
+      ]
+    },
     "font-size": {
       "value": "1rem",
       "path": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-design-tokens",
-  "version": "1.3.0-next.3",
+  "version": "1.3.0-next.30",
   "type": "module",
   "description": "The design tokens used in Flow, mittwald’s design system",
   "homepage": "https://github.com/mittwald/flow/tree/main/packages/design-tokens",
@@ -30,5 +30,5 @@
     "rimraf": "^6.1.3",
     "style-dictionary": "^5.5.2"
   },
-  "gitHead": "6afc49e243f752620463555a0f7e34d58ac80def"
+  "gitHead": "4a376bc408f5bd42eb2bb622813fb606c6c938d5"
 }