@mittwald/flow-design-tokens 0.2.0-alpha.63 → 0.2.0-alpha.65

package/dist/variables.css

@@ -477,16 +477,13 @@
   --form-control--padding-y: var(--size-px--s);
   --form-control--border-style: var(--border-style--default);
   --segmented-button--text-to-text-spacing: var(--size-rem--xs);
+  --slider--spacing-x: var(--size-rem--s);
+  --slider--spacing-y: var(--size-rem--m);
+  --slider--border-style: var(--border-style--default);
   --slider--value-font-weight: var(--font-weight--bold);
-  --slider--value-to-label-spacing: var(--size-rem--xs);
-  --slider--text-to-track-spacing: var(--size-rem--xs);
-  --slider--track-height: var(--size-rem--xs);
-  --slider--thumb-border-width: var(--size-rem--xs);
-  --slider--thumb-border-style: var(--border-style--default);
-  --slider--thumb-corner-radius: var(--corner-radius--round);
-  --slider--thumb-size: var(--size-rem--l);
+  --slider--handle-corner-radius: var(--corner-radius--round);
+  --slider--handle-size: var(--size-rem--l);
   --slider--initial-marker-height: var(--size-rem--m);
-  --slider--initial-marker-width: var(--size-rem--xs);
   --switch--label-to-track-spacing: var(--size-rem--s);
   --switch--track-padding: var(--size-rem--xxs);
   --time-field--date-segment-corner-radius: var(--size-px--xs);
@@ -926,9 +923,13 @@
   --form-control--background-color--focused: var(--neutral--color--300);
   --form-control--background-color--invalid: var(--danger--color--100);
   --form-control--background-color--selected: var(--primary--color--200);
-  --slider--track-corner-radius: var(--corner-radius--default);
-  --slider--thumb-background-color--default: var(--neutral--color--100);
-  --slider--initial-marker-corner-radius: var(--corner-radius--default);
+  --slider--color--default: var(--primary--color--1000);
+  --slider--color--disabled: var(--neutral--color--600);
+  --slider--track-color--default: var(--neutral--color--700);
+  --slider--track-color--disabled: var(--neutral--color--400);
+  --slider--border-width: var(--border-width--300);
+  --slider--corner-radius: var(--corner-radius--default);
+  --slider--handle-fill-color: var(--neutral--color--100);
   --switch--handle-color--disabled: var(--neutral--color--500);
   --switch--handle-background-color--default: var(--neutral--color--100);
   --switch--handle-background-color--disabled: var(--neutral--color--300);
@@ -1164,16 +1165,6 @@
   --form-control--content-color--default: var(--neutral-outline-content-color);
   --form-control--content-color--disabled: var(--disabled-outline-content-color);
   --form-control--content-color--selected: var(--neutral-outline-content-color);
-  --slider--text-color--disabled: var(--disabled-plain-content-color);
-  --slider--track-background-color--default: var(--primary-soft-background-color--default);
-  --slider--track-background-color--disabled: var(--disabled-soft-background-color);
-  --slider--track-background-color-fill--default: var(--primary-solid-background-color--default);
-  --slider--track-background-color-fill--disabled: var(--disabled-solid-background-color);
-  --slider--thumb-border-color--default: var(--primary-solid-background-color--default);
-  --slider--thumb-border-color--disabled: var(--disabled-solid-background-color);
-  --slider--thumb-background-color--pressed: var(--primary-solid-background-color--default);
-  --slider--initial-marker-background-color--default: var(--primary-solid-background-color--default);
-  --slider--initial-marker-background-color--disabled: var(--disabled-solid-background-color);
   --switch--track-background-color--default: var(--neutral-solid-background-color--default);
   --switch--track-background-color--disabled: var(--disabled-solid-background-color);
   --switch--track-background-color--selected: var(--success-solid-background-color--default);

package/dist/variables.json

@@ -15244,135 +15244,63 @@
     }
   },
   "slider": {
-    "value-font-weight": {
-      "value": "bold",
-      "filePath": "src/form/slider.yml",
-      "isSource": true,
-      "original": {
-        "value": "{font-weight.bold}"
-      },
-      "name": "SliderValueFontWeight",
-      "attributes": {
-        "category": "slider",
-        "type": "value-font-weight"
-      },
-      "path": [
-        "slider",
-        "value-font-weight"
-      ]
-    },
-    "value-to-label-spacing": {
-      "value": "0.25rem",
-      "filePath": "src/form/slider.yml",
-      "isSource": true,
-      "original": {
-        "value": "{size-rem.xs}"
-      },
-      "name": "SliderValueToLabelSpacing",
-      "attributes": {
-        "category": "slider",
-        "type": "value-to-label-spacing"
-      },
-      "path": [
-        "slider",
-        "value-to-label-spacing"
-      ]
-    },
-    "text-to-track-spacing": {
-      "value": "0.25rem",
-      "filePath": "src/form/slider.yml",
-      "isSource": true,
-      "original": {
-        "value": "{size-rem.xs}"
-      },
-      "name": "SliderTextToTrackSpacing",
-      "attributes": {
-        "category": "slider",
-        "type": "text-to-track-spacing"
-      },
-      "path": [
-        "slider",
-        "text-to-track-spacing"
-      ]
-    },
-    "text-color": {
-      "disabled": {
-        "value": "#E6E6E6",
-        "filePath": "src/form/slider.yml",
-        "isSource": true,
-        "original": {
-          "value": "{disabled-plain-content-color}"
-        },
-        "name": "SliderTextColorDisabled",
-        "attributes": {
-          "category": "slider",
-          "type": "text-color",
-          "item": "disabled"
-        },
-        "path": [
-          "slider",
-          "text-color",
-          "disabled"
-        ]
-      }
-    },
-    "track-background-color": {
+    "color": {
       "default": {
-        "value": "#F0F5FF",
+        "value": "#002A7B",
         "filePath": "src/form/slider.yml",
         "isSource": true,
         "original": {
-          "value": "{primary-soft-background-color.default}"
+          "value": "{primary.color.1000}"
         },
-        "name": "SliderTrackBackgroundColorDefault",
+        "name": "SliderColorDefault",
         "attributes": {
           "category": "slider",
-          "type": "track-background-color",
+          "type": "color",
           "item": "default"
         },
         "path": [
           "slider",
-          "track-background-color",
+          "color",
           "default"
         ]
       },
       "disabled": {
-        "value": "#F8F8F8",
+        "value": "#B1B1B1",
         "filePath": "src/form/slider.yml",
         "isSource": true,
         "original": {
-          "value": "{disabled-soft-background-color}"
+          "value": "{neutral.color.600}"
         },
-        "name": "SliderTrackBackgroundColorDisabled",
+        "name": "SliderColorDisabled",
         "attributes": {
           "category": "slider",
-          "type": "track-background-color",
+          "type": "color",
           "item": "disabled"
         },
         "path": [
           "slider",
-          "track-background-color",
+          "color",
           "disabled"
         ]
       }
     },
-    "track-background-color-fill": {
+    "track-color": {
       "default": {
-        "value": "#0054F5",
+        "value": "#909090",
         "filePath": "src/form/slider.yml",
         "isSource": true,
         "original": {
-          "value": "{primary-solid-background-color.default}"
+          "value": "{neutral.color.700}"
         },
-        "name": "SliderTrackBackgroundColorFillDefault",
+        "name": "SliderTrackColorDefault",
         "attributes": {
           "category": "slider",
-          "type": "track-background-color-fill",
+          "type": "track-color",
           "item": "default"
         },
         "path": [
           "slider",
-          "track-background-color-fill",
+          "track-color",
           "default"
         ]
       },
@@ -15381,292 +15309,189 @@
         "filePath": "src/form/slider.yml",
         "isSource": true,
         "original": {
-          "value": "{disabled-solid-background-color}"
+          "value": "{neutral.color.400}"
         },
-        "name": "SliderTrackBackgroundColorFillDisabled",
+        "name": "SliderTrackColorDisabled",
         "attributes": {
           "category": "slider",
-          "type": "track-background-color-fill",
+          "type": "track-color",
           "item": "disabled"
         },
         "path": [
           "slider",
-          "track-background-color-fill",
+          "track-color",
           "disabled"
         ]
       }
     },
-    "track-height": {
-      "value": "0.25rem",
+    "spacing-x": {
+      "value": "0.5rem",
       "filePath": "src/form/slider.yml",
       "isSource": true,
       "original": {
-        "value": "{size-rem.xs}"
+        "value": "{size-rem.s}"
       },
-      "name": "SliderTrackHeight",
+      "name": "SliderSpacingX",
       "attributes": {
         "category": "slider",
-        "type": "track-height"
+        "type": "spacing-x"
       },
       "path": [
         "slider",
-        "track-height"
+        "spacing-x"
       ]
     },
-    "track-corner-radius": {
-      "value": "4px",
+    "spacing-y": {
+      "value": "1rem",
       "filePath": "src/form/slider.yml",
       "isSource": true,
       "original": {
-        "value": "{corner-radius.default}"
+        "value": "{size-rem.m}"
       },
-      "name": "SliderTrackCornerRadius",
+      "name": "SliderSpacingY",
       "attributes": {
         "category": "slider",
-        "type": "track-corner-radius"
+        "type": "spacing-y"
       },
       "path": [
         "slider",
-        "track-corner-radius"
+        "spacing-y"
       ]
     },
-    "thumb-border-color": {
-      "default": {
-        "value": "#0054F5",
-        "filePath": "src/form/slider.yml",
-        "isSource": true,
-        "original": {
-          "value": "{primary-solid-background-color.default}"
-        },
-        "name": "SliderThumbBorderColorDefault",
-        "attributes": {
-          "category": "slider",
-          "type": "thumb-border-color",
-          "item": "default"
-        },
-        "path": [
-          "slider",
-          "thumb-border-color",
-          "default"
-        ]
-      },
-      "disabled": {
-        "value": "#E6E6E6",
-        "filePath": "src/form/slider.yml",
-        "isSource": true,
-        "original": {
-          "value": "{disabled-solid-background-color}"
-        },
-        "name": "SliderThumbBorderColorDisabled",
-        "attributes": {
-          "category": "slider",
-          "type": "thumb-border-color",
-          "item": "disabled"
-        },
-        "path": [
-          "slider",
-          "thumb-border-color",
-          "disabled"
-        ]
-      }
-    },
-    "thumb-border-width": {
-      "value": "0.25rem",
+    "border-width": {
+      "value": "4px",
       "filePath": "src/form/slider.yml",
       "isSource": true,
       "original": {
-        "value": "{size-rem.xs}"
+        "value": "{border-width.300}"
       },
-      "name": "SliderThumbBorderWidth",
+      "name": "SliderBorderWidth",
       "attributes": {
         "category": "slider",
-        "type": "thumb-border-width"
+        "type": "border-width"
       },
       "path": [
         "slider",
-        "thumb-border-width"
+        "border-width"
       ]
     },
-    "thumb-border-style": {
+    "border-style": {
       "value": "solid",
       "filePath": "src/form/slider.yml",
       "isSource": true,
       "original": {
         "value": "{border-style.default}"
       },
-      "name": "SliderThumbBorderStyle",
+      "name": "SliderBorderStyle",
       "attributes": {
         "category": "slider",
-        "type": "thumb-border-style"
+        "type": "border-style"
       },
       "path": [
         "slider",
-        "thumb-border-style"
+        "border-style"
       ]
     },
-    "thumb-corner-radius": {
-      "value": "50%",
+    "corner-radius": {
+      "value": "4px",
       "filePath": "src/form/slider.yml",
       "isSource": true,
       "original": {
-        "value": "{corner-radius.round}"
+        "value": "{corner-radius.default}"
       },
-      "name": "SliderThumbCornerRadius",
+      "name": "SliderCornerRadius",
       "attributes": {
         "category": "slider",
-        "type": "thumb-corner-radius"
+        "type": "corner-radius"
       },
       "path": [
         "slider",
-        "thumb-corner-radius"
+        "corner-radius"
       ]
     },
-    "thumb-size": {
-      "value": "1.5rem",
+    "value-font-weight": {
+      "value": "bold",
       "filePath": "src/form/slider.yml",
       "isSource": true,
       "original": {
-        "value": "{size-rem.l}"
+        "value": "{font-weight.bold}"
       },
-      "name": "SliderThumbSize",
+      "name": "SliderValueFontWeight",
       "attributes": {
         "category": "slider",
-        "type": "thumb-size"
+        "type": "value-font-weight"
       },
       "path": [
         "slider",
-        "thumb-size"
+        "value-font-weight"
       ]
     },
-    "thumb-background-color": {
-      "default": {
-        "value": "#FFFFFF",
-        "filePath": "src/form/slider.yml",
-        "isSource": true,
-        "original": {
-          "value": "{neutral.color.100}"
-        },
-        "name": "SliderThumbBackgroundColorDefault",
-        "attributes": {
-          "category": "slider",
-          "type": "thumb-background-color",
-          "item": "default"
-        },
-        "path": [
-          "slider",
-          "thumb-background-color",
-          "default"
-        ]
-      },
-      "pressed": {
-        "value": "#0054F5",
-        "filePath": "src/form/slider.yml",
-        "isSource": true,
-        "original": {
-          "value": "{primary-solid-background-color.default}"
-        },
-        "name": "SliderThumbBackgroundColorPressed",
-        "attributes": {
-          "category": "slider",
-          "type": "thumb-background-color",
-          "item": "pressed"
-        },
-        "path": [
-          "slider",
-          "thumb-background-color",
-          "pressed"
-        ]
-      }
-    },
-    "initial-marker-height": {
-      "value": "1rem",
+    "handle-corner-radius": {
+      "value": "50%",
       "filePath": "src/form/slider.yml",
       "isSource": true,
       "original": {
-        "value": "{size-rem.m}"
+        "value": "{corner-radius.round}"
       },
-      "name": "SliderInitialMarkerHeight",
+      "name": "SliderHandleCornerRadius",
       "attributes": {
         "category": "slider",
-        "type": "initial-marker-height"
+        "type": "handle-corner-radius"
       },
       "path": [
         "slider",
-        "initial-marker-height"
+        "handle-corner-radius"
       ]
     },
-    "initial-marker-width": {
-      "value": "0.25rem",
+    "handle-size": {
+      "value": "1.5rem",
       "filePath": "src/form/slider.yml",
       "isSource": true,
       "original": {
-        "value": "{size-rem.xs}"
+        "value": "{size-rem.l}"
       },
-      "name": "SliderInitialMarkerWidth",
+      "name": "SliderHandleSize",
       "attributes": {
         "category": "slider",
-        "type": "initial-marker-width"
+        "type": "handle-size"
       },
       "path": [
         "slider",
-        "initial-marker-width"
+        "handle-size"
       ]
     },
-    "initial-marker-background-color": {
-      "default": {
-        "value": "#0054F5",
-        "filePath": "src/form/slider.yml",
-        "isSource": true,
-        "original": {
-          "value": "{primary-solid-background-color.default}"
-        },
-        "name": "SliderInitialMarkerBackgroundColorDefault",
-        "attributes": {
-          "category": "slider",
-          "type": "initial-marker-background-color",
-          "item": "default"
-        },
-        "path": [
-          "slider",
-          "initial-marker-background-color",
-          "default"
-        ]
+    "handle-fill-color": {
+      "value": "#FFFFFF",
+      "filePath": "src/form/slider.yml",
+      "isSource": true,
+      "original": {
+        "value": "{neutral.color.100}"
       },
-      "disabled": {
-        "value": "#E6E6E6",
-        "filePath": "src/form/slider.yml",
-        "isSource": true,
-        "original": {
-          "value": "{disabled-solid-background-color}"
-        },
-        "name": "SliderInitialMarkerBackgroundColorDisabled",
-        "attributes": {
-          "category": "slider",
-          "type": "initial-marker-background-color",
-          "item": "disabled"
-        },
-        "path": [
-          "slider",
-          "initial-marker-background-color",
-          "disabled"
-        ]
-      }
+      "name": "SliderHandleFillColor",
+      "attributes": {
+        "category": "slider",
+        "type": "handle-fill-color"
+      },
+      "path": [
+        "slider",
+        "handle-fill-color"
+      ]
     },
-    "initial-marker-corner-radius": {
-      "value": "4px",
+    "initial-marker-height": {
+      "value": "1rem",
       "filePath": "src/form/slider.yml",
       "isSource": true,
       "original": {
-        "value": "{corner-radius.default}"
+        "value": "{size-rem.m}"
       },
-      "name": "SliderInitialMarkerCornerRadius",
+      "name": "SliderInitialMarkerHeight",
       "attributes": {
         "category": "slider",
-        "type": "initial-marker-corner-radius"
+        "type": "initial-marker-height"
       },
       "path": [
         "slider",
-        "initial-marker-corner-radius"
+        "initial-marker-height"
       ]
     }
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-design-tokens",
-  "version": "0.2.0-alpha.63",
+  "version": "0.2.0-alpha.65",
   "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": "e2ec875a4616bd7eb0ad3437d2ebe6261cad43ce"
+  "gitHead": "808f56433c7afecf99b05fc06e0a4b7f8bf9c887"
 }