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

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);
@@ -570,8 +570,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 +604,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 +622,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);
@@ -664,6 +669,7 @@
   --calendar--day-background-color--disabled: var(--disabled-plain-background-color);
   --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 +881,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 +928,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 +953,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 +979,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": {
@@ -15257,11 +15257,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 +15808,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 +15827,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 +17202,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 +19443,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 +19738,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 +19799,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.263",
   "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": "ac0313b9f54213fe51cd1bb3e06bfdb416ccc3e4"
 }