@mittwald/flow-design-tokens 0.1.0-alpha.262 → 0.1.0-alpha.264

package/dist/variables.css

@@ -185,7 +185,7 @@
   --form-control--padding-y: var(--size-px--s);
   --form-control--padding-x: var(--size-px--m);
   --form-control--control-to-info-spacing: var(--size-rem--xs);
-  --form-control--label-to-control-spacing: var(--size-rem--xs);
+  --form-control--label-to-control-spacing: var(--size-rem--xxs);
   --font-size--default: var(--font-size--m);
   --line-height--m: calc(var(--font-size--m) * 1.5);
   --focus--outline-offset: var(--size-px--xxs);
@@ -270,7 +270,7 @@
   --link--font-size: var(--font-size--s);
   --layout-card--padding: var(--size-px--xl);
   --labeled-value--value-to-button-spacing: var(--size-rem--xs);
-  --labeled-value--label-to-value-spacing: var(--size-rem--xs);
+  --labeled-value--label-to-value-spacing: var(--size-rem--xxs);
   --label--content-to-content-spacing: var(--size-rem--xs);
   --label--font-weight: var(--font-weight--bold);
   --label--font-size: var(--font-size--s);
@@ -311,7 +311,10 @@
   --field-error--icon-to-text-spacing: var(--size-rem--s);
   --field-error--font-size: var(--font-size--s);
   --field-description--font-size: var(--font-size--s);
+  --calendar--day-font-size: var(--font-size--s);
+  --calendar--header-to-day-spacing: var(--size-rem--xs);
   --calendar--cell-corner-radius: var(--corner-radius--round);
+  --calendar--cell-spacing: var(--size-rem--xs);
   --date-picker--date-segment-corner-radius: var(--size-px--xs);
   --counter-badge--border-style: var(--border-style--default);
   --counter-badge--padding-inline: var(--size-rem--xs);
@@ -570,8 +573,10 @@
   --menu-item--icon-color--default: var(--neutral--color--800);
   --menu-item--color--current: var(--primary--color--800);
   --menu-item--corner-radius: var(--corner-radius--default);
+  --form-control--background-color--selected: var(--primary--color--200);
   --form-control--background-color--invalid: var(--danger--color--100);
   --form-control--background-color--focused: var(--neutral--color--300);
+  --form-control--background-color--hover: var(--primary--color--100);
   --form-control--background-color--default: var(--neutral--color--300);
   --form-control--placeholder-color--disabled: var(--neutral--color--500);
   --form-control--placeholder-color--default: var(--neutral--color--900);
@@ -602,6 +607,7 @@
   --slider--track-corner-radius: var(--corner-radius--default);
   --separator--height: var(--border-width--100);
   --separator--color: var(--neutral--color--700);
+  --radio--icon-color--selected: var(--primary--color--800);
   --progress-bar--bar-border-width: var(--border-width--100);
   --popover--border-width: var(--border-width--100);
   --popover--background-color: var(--neutral--color--100);
@@ -619,6 +625,8 @@
   --modal--action-group-background-color: var(--neutral--color--300);
   --modal--background-color: var(--neutral--color--100);
   --modal--corner-radius: var(--corner-radius--default);
+  --list-item--background-color--pressed: var(--primary--color--200);
+  --list-item--background-color--hover: var(--primary--color--100);
   --list-item--background-color--default: var(--neutral--color--200);
   --list-item--border-width: var(--border-width--100);
   --list-item--corner-radius: var(--corner-radius--default);
@@ -662,8 +670,10 @@
   --header-navigation--item-color-dark: var(--dark-plain-content-color--default);
   --field-error--color: var(--danger--color--700);
   --calendar--day-background-color--disabled: var(--disabled-plain-background-color);
+  --calendar--heading-font-size: var(--font-size--default);
   --counter-badge--border-color: var(--neutral--color--100);
   --counter-badge--border-width: var(--border-width--200);
+  --checkbox--icon-color--selected: var(--primary--color--800);
   --button--light-outline-border-color--disabled: var(--disabled-light-outline-border-color);
   --button--light-outline-border-color--default: var(--light-outline-border-color);
   --button--light-outline-content-color--disabled: var(--disabled-light-outline-content-color);
@@ -875,8 +885,6 @@
   --form-control--content-color--selected: var(--neutral-outline-content-color);
   --form-control--content-color--disabled: var(--disabled-outline-content-color);
   --form-control--content-color--default: var(--neutral-outline-content-color);
-  --form-control--background-color--selected: var(--info-outline-background-color--pressed);
-  --form-control--background-color--hover: var(--neutral-outline-background-color--hover);
   --form-control--background-color--disabled: var(--disabled-outline-background-color);
   --form-control--border-color--selected: var(--neutral-outline-border-color);
   --form-control--border-color--focused: var(--focus--outline-color);
@@ -924,7 +932,6 @@
   --section--border-color: var(--separator--color);
   --section--border-width: var(--separator--height);
   --radio--icon-color--disabled: var(--disabled-outline-content-color);
-  --radio--icon-color--selected: var(--neutral-outline-border-color);
   --radio--icon-color--default: var(--icon--color--default);
   --radio--color--disabled: var(--disabled-outline-content-color);
   --progress-bar--danger-fill-background-color: var(--danger-solid-background-color--default);
@@ -950,8 +957,6 @@
   --notification--info-heading-color: var(--info-outline-content-color);
   --notification--info-border-color: var(--info-outline-border-color);
   --list-item--border-color: var(--neutral-outline-border-color);
-  --list-item--background-color--pressed: var(--neutral-outline-background-color--pressed);
-  --list-item--background-color--hover: var(--neutral-outline-background-color--hover);
   --link--color--disabled: var(--disabled-plain-content-color);
   --label--color--disabled: var(--disabled-plain-content-accent-color);
   --inline-code--neutral-content-color: var(--neutral-soft-content-color--default);
@@ -978,7 +983,6 @@
   --counter-badge--color: var(--success-solid-content-color);
   --counter-badge--background-color: var(--success-solid-background-color--default);
   --checkbox--icon-color--disabled: var(--disabled-outline-content-color);
-  --checkbox--icon-color--selected: var(--neutral-outline-border-color);
   --checkbox--icon-color--default: var(--icon--color--default);
   --checkbox--color--disabled: var(--disabled-outline-content-color);
   --button--danger-outline-border-color--disabled: var(--disabled-outline-border-color);

package/dist/variables.json

@@ -13144,11 +13144,11 @@
         ]
       },
       "selected": {
-        "value": "#909090",
+        "value": "#0054F5",
         "filePath": "src/components/checkbox.yml",
         "isSource": true,
         "original": {
-          "value": "{neutral-outline-border-color}"
+          "value": "{primary.color.800}"
         },
         "name": "CheckboxIconColorSelected",
         "attributes": {
@@ -13546,6 +13546,23 @@
         "cell-size"
       ]
     },
+    "cell-spacing": {
+      "value": "0.25rem",
+      "filePath": "src/components/date-picker.yml",
+      "isSource": true,
+      "original": {
+        "value": "{size-rem.xs}"
+      },
+      "name": "CalendarCellSpacing",
+      "attributes": {
+        "category": "calendar",
+        "type": "cell-spacing"
+      },
+      "path": [
+        "calendar",
+        "cell-spacing"
+      ]
+    },
     "cell-corner-radius": {
       "value": "50%",
       "filePath": "src/components/date-picker.yml",
@@ -13563,6 +13580,57 @@
         "cell-corner-radius"
       ]
     },
+    "header-to-day-spacing": {
+      "value": "0.25rem",
+      "filePath": "src/components/date-picker.yml",
+      "isSource": true,
+      "original": {
+        "value": "{size-rem.xs}"
+      },
+      "name": "CalendarHeaderToDaySpacing",
+      "attributes": {
+        "category": "calendar",
+        "type": "header-to-day-spacing"
+      },
+      "path": [
+        "calendar",
+        "header-to-day-spacing"
+      ]
+    },
+    "heading-font-size": {
+      "value": "1rem",
+      "filePath": "src/components/date-picker.yml",
+      "isSource": true,
+      "original": {
+        "value": "{font-size.default}"
+      },
+      "name": "CalendarHeadingFontSize",
+      "attributes": {
+        "category": "calendar",
+        "type": "heading-font-size"
+      },
+      "path": [
+        "calendar",
+        "heading-font-size"
+      ]
+    },
+    "day-font-size": {
+      "value": "0.875rem",
+      "filePath": "src/components/date-picker.yml",
+      "isSource": true,
+      "original": {
+        "value": "{font-size.s}"
+      },
+      "name": "CalendarDayFontSize",
+      "attributes": {
+        "category": "calendar",
+        "type": "day-font-size"
+      },
+      "path": [
+        "calendar",
+        "day-font-size"
+      ]
+    },
     "day-background-color": {
       "disabled": {
         "value": "transparent",
@@ -15257,11 +15325,11 @@
   },
   "labeled-value": {
     "label-to-value-spacing": {
-      "value": "0.25rem",
+      "value": "0.125rem",
       "filePath": "src/components/labeled-value.yml",
       "isSource": true,
       "original": {
-        "value": "{size-rem.xs}"
+        "value": "{size-rem.xxs}"
       },
       "name": "LabeledValueLabelToValueSpacing",
       "attributes": {
@@ -15808,11 +15876,11 @@
         ]
       },
       "hover": {
-        "value": "#E6E6E6",
+        "value": "#F0F5FF",
         "filePath": "src/components/list.yml",
         "isSource": true,
         "original": {
-          "value": "{neutral-outline-background-color.hover}"
+          "value": "{primary.color.100}"
         },
         "name": "ListItemBackgroundColorHover",
         "attributes": {
@@ -15827,11 +15895,11 @@
         ]
       },
       "pressed": {
-        "value": "#B1B1B1",
+        "value": "#E0EBFF",
         "filePath": "src/components/list.yml",
         "isSource": true,
         "original": {
-          "value": "{neutral-outline-background-color.pressed}"
+          "value": "{primary.color.200}"
         },
         "name": "ListItemBackgroundColorPressed",
         "attributes": {
@@ -17202,11 +17270,11 @@
         ]
       },
       "selected": {
-        "value": "#909090",
+        "value": "#0054F5",
         "filePath": "src/components/radio-group.yml",
         "isSource": true,
         "original": {
-          "value": "{neutral-outline-border-color}"
+          "value": "{primary.color.800}"
         },
         "name": "RadioIconColorSelected",
         "attributes": {
@@ -19443,11 +19511,11 @@
   },
   "form-control": {
     "label-to-control-spacing": {
-      "value": "0.25rem",
+      "value": "0.125rem",
       "filePath": "src/form-control.yml",
       "isSource": true,
       "original": {
-        "value": "{size-rem.xs}"
+        "value": "{size-rem.xxs}"
       },
       "name": "FormControlLabelToControlSpacing",
       "attributes": {
@@ -19738,11 +19806,11 @@
         ]
       },
       "hover": {
-        "value": "#E6E6E6",
+        "value": "#F0F5FF",
         "filePath": "src/form-control.yml",
         "isSource": true,
         "original": {
-          "value": "{neutral-outline-background-color.hover}"
+          "value": "{primary.color.100}"
         },
         "name": "FormControlBackgroundColorHover",
         "attributes": {
@@ -19799,7 +19867,7 @@
         "filePath": "src/form-control.yml",
         "isSource": true,
         "original": {
-          "value": "{info-outline-background-color.pressed}"
+          "value": "{primary.color.200}"
         },
         "name": "FormControlBackgroundColorSelected",
         "attributes": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-design-tokens",
-  "version": "0.1.0-alpha.262",
+  "version": "0.1.0-alpha.264",
   "type": "module",
   "description": "The design tokens used in Flow, mittwald’s design system",
   "homepage": "https://github.com/mittwald/flow/tree/main/packages/design-tokens",
@@ -21,5 +21,5 @@
     "nx": "^19.7.4",
     "style-dictionary": "^4.1.2"
   },
-  "gitHead": "8e24c95c757808787c7e8366453ce8587f7a1d07"
+  "gitHead": "ba7ed6bea45db3b721b2c6b5e7d13c84b5856f25"
 }