@mittwald/flow-design-tokens 0.2.0-alpha.113 → 0.2.0-alpha.115

package/dist/variables.css

@@ -236,6 +236,7 @@
   --contextual-help--max-width: 500px;
   --modal--size--s: 660px;
   --modal--size--m: 900px;
+  --modal--size--l: 1300px;
   --modal--content-min-height: 120px;
   --popover--min-width: 200px;
   --tooltip--max-width: 300px;
@@ -476,6 +477,16 @@
   --text--blockquote-border-style: var(--border-style--default);
   --text--blockquote-padding: var(--size-rem--s);
   --text--list-padding: var(--size-rem--l);
+  --axis--spacing: var(--size-px--s);
+  --axis--font-size: var(--font-size-text--s);
+  --axis--color: var(--color--gray--700);
+  --axis--tick-size: var(--size-px--s);
+  --cartesian-grid--color: var(--color--gray--700);
+  --chart-tooltip--spacing: var(--size-px--s);
+  --legend--spacing-x: var(--size-px--m);
+  --legend--spacing-y: var(--size-px--s);
+  --legend-item--spacing: var(--size-rem--s);
+  --legend-item--marker--size: var(--size-rem--m);
   --focus--outline-offset: var(--size-px--xxs);
   --line-height--m: calc(var(--font-size-text--m) * 1.5);
   --line-height--s: calc(var(--font-size-text--s) * 1.5);
@@ -661,8 +672,8 @@
   --progress-bar--spacing-x: var(--size-rem--m);
   --progress-bar--height: var(--size-rem--s);
   --progress-bar--corner-radius: var(--size-rem--xs);
-  --accent-box--background-color-blue: var(--color--hosting-blue--100);
   --accent-box--background-color-gradient: var(--color--gradient);
+  --accent-box--background-color-blue: var(--color--hosting-blue--100);
   --accent-box--icon-color-blue: var(--color--hosting-blue--200);
   --accent-box--padding: var(--size-px--m);
   --accordion--spacing: var(--size-rem--s);
@@ -926,6 +937,12 @@
   --text--color--light: var(--light-plain-content-color);
   --text--color--dark: var(--dark-plain-content-color);
   --text--blockquote-border-width: var(--border-width--300);
+  --area--border-width: var(--border-width--200);
+  --area--border-color: var(--neutral--color--100);
+  --axis--text-color: var(--neutral--color--1000);
+  --axis--stroke-width: var(--border-width--100);
+  --cartesian-grid--stroke-width: var(--border-width--100);
+  --legend-item--marker--corner-radius: var(--corner-radius--default);
   --focus--outline-color: var(--primary--color--800);
   --focus--secondary-outline-color: var(--neutral--color--100);
   --focus--outline-width: var(--border-width--200);
@@ -1010,6 +1027,8 @@
   --notification--success-background-color--default: var(--neutral--color--100);
   --progress-bar--border-width: var(--border-width--100);
   --progress-bar--background-color: var(--neutral-outline-background-color--default);
+  --accent-box--background-color-neutral: var(--neutral--color--300);
+  --accent-box--icon-color-neutral: var(--neutral--color--400);
   --accent-box--corner-radius: var(--corner-radius--default);
   --accordion--corner-radius: var(--corner-radius--default);
   --accordion--border-width: var(--border-width--100);

package/dist/variables.json

@@ -14395,6 +14395,296 @@
       ]
     }
   },
+  "area": {
+    "border-width": {
+      "value": "2px",
+      "filePath": "src/dataVisualisation/area.yml",
+      "isSource": true,
+      "original": {
+        "value": "{border-width.200}"
+      },
+      "name": "AreaBorderWidth",
+      "attributes": {
+        "category": "area",
+        "type": "border-width"
+      },
+      "path": [
+        "area",
+        "border-width"
+      ]
+    },
+    "border-color": {
+      "value": "#FFFFFF",
+      "filePath": "src/dataVisualisation/area.yml",
+      "isSource": true,
+      "original": {
+        "value": "{neutral.color.100}"
+      },
+      "name": "AreaBorderColor",
+      "attributes": {
+        "category": "area",
+        "type": "border-color"
+      },
+      "path": [
+        "area",
+        "border-color"
+      ]
+    }
+  },
+  "axis": {
+    "spacing": {
+      "value": "8px",
+      "filePath": "src/dataVisualisation/axis.yml",
+      "isSource": true,
+      "original": {
+        "value": "{size-px.s}"
+      },
+      "name": "AxisSpacing",
+      "attributes": {
+        "category": "axis",
+        "type": "spacing"
+      },
+      "path": [
+        "axis",
+        "spacing"
+      ]
+    },
+    "font-size": {
+      "value": "0.875rem",
+      "filePath": "src/dataVisualisation/axis.yml",
+      "isSource": true,
+      "original": {
+        "value": "{font-size-text.s}"
+      },
+      "name": "AxisFontSize",
+      "attributes": {
+        "category": "axis",
+        "type": "font-size"
+      },
+      "path": [
+        "axis",
+        "font-size"
+      ]
+    },
+    "color": {
+      "value": "#909090",
+      "filePath": "src/dataVisualisation/axis.yml",
+      "isSource": true,
+      "original": {
+        "value": "{color.gray.700}"
+      },
+      "name": "AxisColor",
+      "attributes": {
+        "category": "axis",
+        "type": "color"
+      },
+      "path": [
+        "axis",
+        "color"
+      ]
+    },
+    "text-color": {
+      "value": "#222222",
+      "filePath": "src/dataVisualisation/axis.yml",
+      "isSource": true,
+      "original": {
+        "value": "{neutral.color.1000}"
+      },
+      "name": "AxisTextColor",
+      "attributes": {
+        "category": "axis",
+        "type": "text-color"
+      },
+      "path": [
+        "axis",
+        "text-color"
+      ]
+    },
+    "stroke-width": {
+      "value": "1px",
+      "filePath": "src/dataVisualisation/axis.yml",
+      "isSource": true,
+      "original": {
+        "value": "{border-width.100}"
+      },
+      "name": "AxisStrokeWidth",
+      "attributes": {
+        "category": "axis",
+        "type": "stroke-width"
+      },
+      "path": [
+        "axis",
+        "stroke-width"
+      ]
+    },
+    "tick-size": {
+      "value": "8px",
+      "filePath": "src/dataVisualisation/axis.yml",
+      "isSource": true,
+      "original": {
+        "value": "{size-px.s}"
+      },
+      "name": "AxisTickSize",
+      "attributes": {
+        "category": "axis",
+        "type": "tick-size"
+      },
+      "path": [
+        "axis",
+        "tick-size"
+      ]
+    }
+  },
+  "cartesian-grid": {
+    "color": {
+      "value": "#909090",
+      "filePath": "src/dataVisualisation/cartesian-grid.yml",
+      "isSource": true,
+      "original": {
+        "value": "{color.gray.700}"
+      },
+      "name": "CartesianGridColor",
+      "attributes": {
+        "category": "cartesian-grid",
+        "type": "color"
+      },
+      "path": [
+        "cartesian-grid",
+        "color"
+      ]
+    },
+    "stroke-width": {
+      "value": "1px",
+      "filePath": "src/dataVisualisation/cartesian-grid.yml",
+      "isSource": true,
+      "original": {
+        "value": "{border-width.100}"
+      },
+      "name": "CartesianGridStrokeWidth",
+      "attributes": {
+        "category": "cartesian-grid",
+        "type": "stroke-width"
+      },
+      "path": [
+        "cartesian-grid",
+        "stroke-width"
+      ]
+    }
+  },
+  "chart-tooltip": {
+    "spacing": {
+      "value": "8px",
+      "filePath": "src/dataVisualisation/chart-tooltip.yml",
+      "isSource": true,
+      "original": {
+        "value": "{size-px.s}"
+      },
+      "name": "ChartTooltipSpacing",
+      "attributes": {
+        "category": "chart-tooltip",
+        "type": "spacing"
+      },
+      "path": [
+        "chart-tooltip",
+        "spacing"
+      ]
+    }
+  },
+  "legend": {
+    "spacing-x": {
+      "value": "16px",
+      "filePath": "src/dataVisualisation/legend.yml",
+      "isSource": true,
+      "original": {
+        "value": "{size-px.m}"
+      },
+      "name": "LegendSpacingX",
+      "attributes": {
+        "category": "legend",
+        "type": "spacing-x"
+      },
+      "path": [
+        "legend",
+        "spacing-x"
+      ]
+    },
+    "spacing-y": {
+      "value": "8px",
+      "filePath": "src/dataVisualisation/legend.yml",
+      "isSource": true,
+      "original": {
+        "value": "{size-px.s}"
+      },
+      "name": "LegendSpacingY",
+      "attributes": {
+        "category": "legend",
+        "type": "spacing-y"
+      },
+      "path": [
+        "legend",
+        "spacing-y"
+      ]
+    }
+  },
+  "legend-item": {
+    "spacing": {
+      "value": "0.5rem",
+      "filePath": "src/dataVisualisation/legend.yml",
+      "isSource": true,
+      "original": {
+        "value": "{size-rem.s}"
+      },
+      "name": "LegendItemSpacing",
+      "attributes": {
+        "category": "legend-item",
+        "type": "spacing"
+      },
+      "path": [
+        "legend-item",
+        "spacing"
+      ]
+    },
+    "marker": {
+      "size": {
+        "value": "1rem",
+        "filePath": "src/dataVisualisation/legend.yml",
+        "isSource": true,
+        "original": {
+          "value": "{size-rem.m}"
+        },
+        "name": "LegendItemMarkerSize",
+        "attributes": {
+          "category": "legend-item",
+          "type": "marker",
+          "item": "size"
+        },
+        "path": [
+          "legend-item",
+          "marker",
+          "size"
+        ]
+      },
+      "corner-radius": {
+        "value": "4px",
+        "filePath": "src/dataVisualisation/legend.yml",
+        "isSource": true,
+        "original": {
+          "value": "{corner-radius.default}"
+        },
+        "name": "LegendItemMarkerCornerRadius",
+        "attributes": {
+          "category": "legend-item",
+          "type": "marker",
+          "item": "corner-radius"
+        },
+        "path": [
+          "legend-item",
+          "marker",
+          "corner-radius"
+        ]
+      }
+    }
+  },
   "focus": {
     "outline-color": {
       "value": "#0054F5",
@@ -17307,6 +17597,25 @@
           "size",
           "m"
         ]
+      },
+      "l": {
+        "value": "1300px",
+        "filePath": "src/overlays/modal.yml",
+        "isSource": true,
+        "original": {
+          "value": "1300px"
+        },
+        "name": "ModalSizeL",
+        "attributes": {
+          "category": "modal",
+          "type": "size",
+          "item": "l"
+        },
+        "path": [
+          "modal",
+          "size",
+          "l"
+        ]
       }
     },
     "footer-background-color": {
@@ -21713,21 +22022,21 @@
     }
   },
   "accent-box": {
-    "background-color-blue": {
-      "value": "#F0F5FF",
+    "background-color-neutral": {
+      "value": "#F8F8F8",
       "filePath": "src/structure/accent-box.yml",
       "isSource": true,
       "original": {
-        "value": "{color.hosting-blue.100}"
+        "value": "{neutral.color.300}"
       },
-      "name": "AccentBoxBackgroundColorBlue",
+      "name": "AccentBoxBackgroundColorNeutral",
       "attributes": {
         "category": "accent-box",
-        "type": "background-color-blue"
+        "type": "background-color-neutral"
       },
       "path": [
         "accent-box",
-        "background-color-blue"
+        "background-color-neutral"
       ]
     },
     "background-color-green": {
@@ -21764,6 +22073,23 @@
         "background-color-gradient"
       ]
     },
+    "background-color-blue": {
+      "value": "#F0F5FF",
+      "filePath": "src/structure/accent-box.yml",
+      "isSource": true,
+      "original": {
+        "value": "{color.hosting-blue.100}"
+      },
+      "name": "AccentBoxBackgroundColorBlue",
+      "attributes": {
+        "category": "accent-box",
+        "type": "background-color-blue"
+      },
+      "path": [
+        "accent-box",
+        "background-color-blue"
+      ]
+    },
     "icon-color-blue": {
       "value": "#E0EBFF",
       "filePath": "src/structure/accent-box.yml",
@@ -21815,6 +22141,23 @@
         "icon-color-gradient"
       ]
     },
+    "icon-color-neutral": {
+      "value": "#E6E6E6",
+      "filePath": "src/structure/accent-box.yml",
+      "isSource": true,
+      "original": {
+        "value": "{neutral.color.400}"
+      },
+      "name": "AccentBoxIconColorNeutral",
+      "attributes": {
+        "category": "accent-box",
+        "type": "icon-color-neutral"
+      },
+      "path": [
+        "accent-box",
+        "icon-color-neutral"
+      ]
+    },
     "padding": {
       "value": "16px",
       "filePath": "src/structure/accent-box.yml",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-design-tokens",
-  "version": "0.2.0-alpha.113",
+  "version": "0.2.0-alpha.115",
   "type": "module",
   "description": "The design tokens used in Flow, mittwald’s design system",
   "homepage": "https://github.com/mittwald/flow/tree/main/packages/design-tokens",
@@ -24,5 +24,5 @@
     "rimraf": "^6.0.1",
     "style-dictionary": "^4.3.3"
   },
-  "gitHead": "735d43c65de5d7cb95d41e0f6f54deae85142ae3"
+  "gitHead": "a9803d8bf2f712fb0188b9b469bebef28e130928"
 }