@mittwald/flow-design-tokens 0.2.0-alpha.5 → 0.2.0-alpha.50

package/dist/variables.css

@@ -7,6 +7,7 @@
   --image-button--brightness--pressed: 50%;
   --corner-radius--round: 50%;
   --border-style--default: solid;
+  --border-style--dashed: dashed;
   --dark--color--100: rgb(0 0 0 / 12.5%);
   --dark--color--200: rgb(0 0 0 / 25%);
   --dark--color--300: rgb(0 0 0 / 37.5%);
@@ -434,6 +435,7 @@
   --heading--font-weight: var(--font-weight--bold);
   --illustrated-message--padding: var(--size-px--m);
   --illustrated-message--spacing: var(--size-rem--m);
+  --image--border-style: var(--border-style--default);
   --initials--font-weight: var(--font-weight--bold);
   --label--font-size: var(--font-size-text--s);
   --label--font-weight: var(--font-weight--bold);
@@ -441,12 +443,16 @@
   --labeled-value--label-to-value-spacing: var(--size-rem--xxs);
   --labeled-value--value-to-action-spacing: var(--size-rem--xs);
   --markdown--spacing: var(--size-rem--m);
+  --message-thread--spacing: var(--size-rem--l);
   --message--padding-y: var(--size-px--s);
   --message--padding-x: var(--size-px--m);
   --message--spacing-y: var(--size-rem--s);
   --message--spacing-x: var(--size-rem--m);
   --message--background-color-responder: var(--color--gray--400);
   --message--background-color-sender: var(--color--hosting-blue--200);
+  --text--blockquote-border-style: var(--border-style--default);
+  --text--blockquote-padding: var(--size-rem--s);
+  --text--list-padding: var(--size-rem--l);
   --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);
@@ -493,7 +499,7 @@
   --header-navigation--spacing: var(--size-rem--m);
   --header-navigation--corner-radius-round: var(--corner-radius--round);
   --header-navigation--font-weight-current: var(--font-weight--bold);
-  --link--font-size: var(--font-size-text--s);
+  --link--icon-height: calc(var(--font-size-text--m) * 1.25);
   --link--font-weight: var(--font-weight--bold);
   --link--spacing: var(--size-rem--xs);
   --link--color-dark--default: var(--dark--color--800);
@@ -643,6 +649,8 @@
   --align--avatar-text--spacing: var(--size-rem--s);
   --align--input-button--spacing: var(--size-px--m);
   --align--text-copyButton--spacing: var(--size-rem--xs);
+  --align--icon-text--spacing: var(--size-rem--s);
+  --align--text-contextualHelp--spacing: var(--size-rem--xs);
   --column-layout--gap--s: var(--size-px--s);
   --column-layout--gap--m: var(--size-px--m);
   --column-layout--gap--l: var(--size-px--l);
@@ -657,7 +665,8 @@
   --list-item--subtitle-font-size: var(--font-size-text--s);
   --section--section-to-section-spacing: var(--size-rem--xl);
   --section--spacing: var(--size-rem--m);
-  --section--sub-heading-spacing: var(--size-rem--m);
+  --section--sub-heading-spacing-m: var(--size-rem--l);
+  --section--sub-heading-spacing-s: var(--size-rem--s);
   --section-header--action-to-action-spacing: var(--size-rem--s);
   --section-header--heading-to-action-spacing: var(--size-rem--m);
   --table--border-style: var(--border-style--default);
@@ -670,6 +679,9 @@
   --file-card--spacing: var(--size-rem--s);
   --file-card--border-style: var(--border-style--default);
   --file-card--sub-title-font-size: var(--font-size-text--s);
+  --file-drop-zone--padding: var(--size-px--m);
+  --file-drop-zone--border-style--default: var(--border-style--dashed);
+  --file-drop-zone--border-style--target: var(--border-style--default);
   --button--corner-radius: var(--corner-radius--default);
   --button--pending-icon-color: var(--neutral--color--1000);
   --button--succeeded-icon-color: var(--success--color--800);
@@ -865,6 +877,7 @@
   --disabled-outline-border-color: var(--neutral--color--400);
   --disabled-soft-background-color: var(--neutral--color--300);
   --disabled-soft-content-color: var(--neutral--color--500);
+  --avatar-stack--border-width: var(--border-width--200);
   --code--line-height: var(--line-height--m);
   --code--corner-radius: var(--corner-radius--default);
   --code--light-background-color: var(--light-soft-background-color--default);
@@ -880,12 +893,15 @@
   --illustrated-message--danger-heading-color: var(--danger--color--1000);
   --illustrated-message--dark-icon-color: var(--dark-plain-content-color);
   --illustrated-message--light-icon-color: var(--light-plain-content-color);
+  --image--corner-radius: var(--corner-radius--default);
+  --image--border-width: var(--border-width--100);
   --label--line-height: var(--line-height--m);
   --label--color--default: var(--neutral--color--800);
   --message--corner-radius: var(--corner-radius--default);
   --text--color--default: var(--neutral--color--1000);
   --text--color--light: var(--light-plain-content-color);
   --text--color--dark: var(--dark-plain-content-color);
+  --text--blockquote-border-width: var(--border-width--300);
   --focus--outline-color: var(--primary--color--800);
   --focus--outline-width: var(--border-width--200);
   --choice--icon-color--selected: var(--primary--color--800);
@@ -987,6 +1003,9 @@
   --file-card--corner-radius: var(--corner-radius--default);
   --file-card--border-width: var(--border-width--100);
   --file-card--background-color--default: var(--neutral--color--100);
+  --file-drop-zone--corner-radius: var(--corner-radius--default);
+  --file-drop-zone--border-width: var(--border-width--100);
+  --file-drop-zone--border-color--target: var(--primary--color--800);
   --button--accent-solid-background-color--default: var(--success-solid-background-color--default);
   --button--accent-solid-background-color--hover: var(--success-solid-background-color--hover);
   --button--accent-solid-background-color--pressed: var(--success-solid-background-color--pressed);
@@ -1120,8 +1139,10 @@
   --illustrated-message--primary-heading-color: var(--heading--color);
   --illustrated-message--dark-heading-color: var(--heading--color-dark);
   --illustrated-message--light-heading-color: var(--heading--color-light);
+  --image--border-color: var(--neutral-outline-border-color);
   --label--color--disabled: var(--disabled-plain-content-color);
   --text--color--disabled: var(--disabled-plain-content-color);
+  --text--blockquote-border-color: var(--info-outline-border-color);
   --choice--icon-color--default: var(--icon--color);
   --choice--icon-color--disabled: var(--disabled-outline-content-color);
   --date-picker--date-segment-background-color--focused: var(--primary-plain-background-color--pressed);
@@ -1233,4 +1254,7 @@
   --file-card--border-color: var(--neutral-outline-border-color);
   --file-card--background-color--hover: var(--neutral-outline-background-color--hover);
   --file-card--background-color--pressed: var(--neutral-outline-background-color--pressed);
+  --file-drop-zone--background-color--default: var(--form-control--background-color--default);
+  --file-drop-zone--background-color--target: var(--form-control--background-color--hover);
+  --file-drop-zone--border-color--default: var(--form-control--border-color--default);
 }

package/dist/variables.json

@@ -4781,6 +4781,23 @@
         "border-style",
         "default"
       ]
+    },
+    "dashed": {
+      "value": "dashed",
+      "filePath": "src/border.yml",
+      "isSource": true,
+      "original": {
+        "value": "dashed"
+      },
+      "name": "BorderStyleDashed",
+      "attributes": {
+        "category": "border-style",
+        "type": "dashed"
+      },
+      "path": [
+        "border-style",
+        "dashed"
+      ]
     }
   },
   "primary": {
@@ -11105,6 +11122,25 @@
       ]
     }
   },
+  "avatar-stack": {
+    "border-width": {
+      "value": "2px",
+      "filePath": "src/content/avatar-stack.yml",
+      "isSource": true,
+      "original": {
+        "value": "{border-width.200}"
+      },
+      "name": "AvatarStackBorderWidth",
+      "attributes": {
+        "category": "avatar-stack",
+        "type": "border-width"
+      },
+      "path": [
+        "avatar-stack",
+        "border-width"
+      ]
+    }
+  },
   "avatar": {
     "size": {
       "xs": {
@@ -13328,6 +13364,76 @@
       ]
     }
   },
+  "image": {
+    "corner-radius": {
+      "value": "4px",
+      "filePath": "src/content/image.yml",
+      "isSource": true,
+      "original": {
+        "value": "{corner-radius.default}"
+      },
+      "name": "ImageCornerRadius",
+      "attributes": {
+        "category": "image",
+        "type": "corner-radius"
+      },
+      "path": [
+        "image",
+        "corner-radius"
+      ]
+    },
+    "border-width": {
+      "value": "1px",
+      "filePath": "src/content/image.yml",
+      "isSource": true,
+      "original": {
+        "value": "{border-width.100}"
+      },
+      "name": "ImageBorderWidth",
+      "attributes": {
+        "category": "image",
+        "type": "border-width"
+      },
+      "path": [
+        "image",
+        "border-width"
+      ]
+    },
+    "border-style": {
+      "value": "solid",
+      "filePath": "src/content/image.yml",
+      "isSource": true,
+      "original": {
+        "value": "{border-style.default}"
+      },
+      "name": "ImageBorderStyle",
+      "attributes": {
+        "category": "image",
+        "type": "border-style"
+      },
+      "path": [
+        "image",
+        "border-style"
+      ]
+    },
+    "border-color": {
+      "value": "#909090",
+      "filePath": "src/content/image.yml",
+      "isSource": true,
+      "original": {
+        "value": "{neutral-outline-border-color}"
+      },
+      "name": "ImageBorderColor",
+      "attributes": {
+        "category": "image",
+        "type": "border-color"
+      },
+      "path": [
+        "image",
+        "border-color"
+      ]
+    }
+  },
   "initials": {
     "font-weight": {
       "value": "bold",
@@ -13512,6 +13618,25 @@
       ]
     }
   },
+  "message-thread": {
+    "spacing": {
+      "value": "1.5rem",
+      "filePath": "src/content/message-thread.yml",
+      "isSource": true,
+      "original": {
+        "value": "{size-rem.l}"
+      },
+      "name": "MessageThreadSpacing",
+      "attributes": {
+        "category": "message-thread",
+        "type": "spacing"
+      },
+      "path": [
+        "message-thread",
+        "spacing"
+      ]
+    }
+  },
   "message": {
     "corner-radius": {
       "value": "4px",
@@ -13728,6 +13853,91 @@
         "text",
         "max-width"
       ]
+    },
+    "blockquote-border-width": {
+      "value": "4px",
+      "filePath": "src/content/text.yml",
+      "isSource": true,
+      "original": {
+        "value": "{border-width.300}"
+      },
+      "name": "TextBlockquoteBorderWidth",
+      "attributes": {
+        "category": "text",
+        "type": "blockquote-border-width"
+      },
+      "path": [
+        "text",
+        "blockquote-border-width"
+      ]
+    },
+    "blockquote-border-style": {
+      "value": "solid",
+      "filePath": "src/content/text.yml",
+      "isSource": true,
+      "original": {
+        "value": "{border-style.default}"
+      },
+      "name": "TextBlockquoteBorderStyle",
+      "attributes": {
+        "category": "text",
+        "type": "blockquote-border-style"
+      },
+      "path": [
+        "text",
+        "blockquote-border-style"
+      ]
+    },
+    "blockquote-border-color": {
+      "value": "#0054F5",
+      "filePath": "src/content/text.yml",
+      "isSource": true,
+      "original": {
+        "value": "{info-outline-border-color}"
+      },
+      "name": "TextBlockquoteBorderColor",
+      "attributes": {
+        "category": "text",
+        "type": "blockquote-border-color"
+      },
+      "path": [
+        "text",
+        "blockquote-border-color"
+      ]
+    },
+    "blockquote-padding": {
+      "value": "0.5rem",
+      "filePath": "src/content/text.yml",
+      "isSource": true,
+      "original": {
+        "value": "{size-rem.s}"
+      },
+      "name": "TextBlockquotePadding",
+      "attributes": {
+        "category": "text",
+        "type": "blockquote-padding"
+      },
+      "path": [
+        "text",
+        "blockquote-padding"
+      ]
+    },
+    "list-padding": {
+      "value": "1.5rem",
+      "filePath": "src/content/text.yml",
+      "isSource": true,
+      "original": {
+        "value": "{size-rem.l}"
+      },
+      "name": "TextListPadding",
+      "attributes": {
+        "category": "text",
+        "type": "list-padding"
+      },
+      "path": [
+        "text",
+        "list-padding"
+      ]
     }
   },
   "focus": {
@@ -16149,38 +16359,38 @@
     }
   },
   "link": {
-    "font-size": {
-      "value": "0.875rem",
+    "line-height": {
+      "value": "calc(1rem * 1.5)",
       "filePath": "src/navigation/link.yml",
       "isSource": true,
       "original": {
-        "value": "{font-size-text.s}"
+        "value": "{line-height.m}"
       },
-      "name": "LinkFontSize",
+      "name": "LinkLineHeight",
       "attributes": {
         "category": "link",
-        "type": "font-size"
+        "type": "line-height"
       },
       "path": [
         "link",
-        "font-size"
+        "line-height"
       ]
     },
-    "line-height": {
-      "value": "calc(1rem * 1.5)",
+    "icon-height": {
+      "value": "calc(1rem * 1.25)",
       "filePath": "src/navigation/link.yml",
       "isSource": true,
       "original": {
-        "value": "{line-height.m}"
+        "value": "calc({font-size-text.m} * 1.25)"
       },
-      "name": "LinkLineHeight",
+      "name": "LinkIconHeight",
       "attributes": {
         "category": "link",
-        "type": "line-height"
+        "type": "icon-height"
       },
       "path": [
         "link",
-        "line-height"
+        "icon-height"
       ]
     },
     "font-weight": {
@@ -21518,6 +21728,48 @@
           "spacing"
         ]
       }
+    },
+    "icon-text": {
+      "spacing": {
+        "value": "0.5rem",
+        "filePath": "src/structure/align.yml",
+        "isSource": true,
+        "original": {
+          "value": "{size-rem.s}"
+        },
+        "name": "AlignIconTextSpacing",
+        "attributes": {
+          "category": "align",
+          "type": "icon-text",
+          "item": "spacing"
+        },
+        "path": [
+          "align",
+          "icon-text",
+          "spacing"
+        ]
+      }
+    },
+    "text-contextualHelp": {
+      "spacing": {
+        "value": "0.25rem",
+        "filePath": "src/structure/align.yml",
+        "isSource": true,
+        "original": {
+          "value": "{size-rem.xs}"
+        },
+        "name": "AlignTextContextualHelpSpacing",
+        "attributes": {
+          "category": "align",
+          "type": "text-contextualHelp",
+          "item": "spacing"
+        },
+        "path": [
+          "align",
+          "text-contextualHelp",
+          "spacing"
+        ]
+      }
     }
   },
   "column-layout": {
@@ -21938,21 +22190,38 @@
         "spacing"
       ]
     },
-    "sub-heading-spacing": {
-      "value": "1rem",
+    "sub-heading-spacing-m": {
+      "value": "1.5rem",
       "filePath": "src/structure/section.yml",
       "isSource": true,
       "original": {
-        "value": "{size-rem.m}"
+        "value": "{size-rem.l}"
       },
-      "name": "SectionSubHeadingSpacing",
+      "name": "SectionSubHeadingSpacingM",
       "attributes": {
         "category": "section",
-        "type": "sub-heading-spacing"
+        "type": "sub-heading-spacing-m"
       },
       "path": [
         "section",
-        "sub-heading-spacing"
+        "sub-heading-spacing-m"
+      ]
+    },
+    "sub-heading-spacing-s": {
+      "value": "0.5rem",
+      "filePath": "src/structure/section.yml",
+      "isSource": true,
+      "original": {
+        "value": "{size-rem.s}"
+      },
+      "name": "SectionSubHeadingSpacingS",
+      "attributes": {
+        "category": "section",
+        "type": "sub-heading-spacing-s"
+      },
+      "path": [
+        "section",
+        "sub-heading-spacing-s"
       ]
     }
   },
@@ -22472,5 +22741,178 @@
         ]
       }
     }
+  },
+  "file-drop-zone": {
+    "corner-radius": {
+      "value": "4px",
+      "filePath": "src/upload/file-drop-zone.yml",
+      "isSource": true,
+      "original": {
+        "value": "{corner-radius.default}"
+      },
+      "name": "FileDropZoneCornerRadius",
+      "attributes": {
+        "category": "file-drop-zone",
+        "type": "corner-radius"
+      },
+      "path": [
+        "file-drop-zone",
+        "corner-radius"
+      ]
+    },
+    "padding": {
+      "value": "16px",
+      "filePath": "src/upload/file-drop-zone.yml",
+      "isSource": true,
+      "original": {
+        "value": "{size-px.m}"
+      },
+      "name": "FileDropZonePadding",
+      "attributes": {
+        "category": "file-drop-zone",
+        "type": "padding"
+      },
+      "path": [
+        "file-drop-zone",
+        "padding"
+      ]
+    },
+    "background-color": {
+      "default": {
+        "value": "#F8F8F8",
+        "filePath": "src/upload/file-drop-zone.yml",
+        "isSource": true,
+        "original": {
+          "value": "{form-control.background-color.default}"
+        },
+        "name": "FileDropZoneBackgroundColorDefault",
+        "attributes": {
+          "category": "file-drop-zone",
+          "type": "background-color",
+          "item": "default"
+        },
+        "path": [
+          "file-drop-zone",
+          "background-color",
+          "default"
+        ]
+      },
+      "target": {
+        "value": "#F0F5FF",
+        "filePath": "src/upload/file-drop-zone.yml",
+        "isSource": true,
+        "original": {
+          "value": "{form-control.background-color.hover}"
+        },
+        "name": "FileDropZoneBackgroundColorTarget",
+        "attributes": {
+          "category": "file-drop-zone",
+          "type": "background-color",
+          "item": "target"
+        },
+        "path": [
+          "file-drop-zone",
+          "background-color",
+          "target"
+        ]
+      }
+    },
+    "border-width": {
+      "value": "1px",
+      "filePath": "src/upload/file-drop-zone.yml",
+      "isSource": true,
+      "original": {
+        "value": "{border-width.100}"
+      },
+      "name": "FileDropZoneBorderWidth",
+      "attributes": {
+        "category": "file-drop-zone",
+        "type": "border-width"
+      },
+      "path": [
+        "file-drop-zone",
+        "border-width"
+      ]
+    },
+    "border-style": {
+      "default": {
+        "value": "dashed",
+        "filePath": "src/upload/file-drop-zone.yml",
+        "isSource": true,
+        "original": {
+          "value": "{border-style.dashed}"
+        },
+        "name": "FileDropZoneBorderStyleDefault",
+        "attributes": {
+          "category": "file-drop-zone",
+          "type": "border-style",
+          "item": "default"
+        },
+        "path": [
+          "file-drop-zone",
+          "border-style",
+          "default"
+        ]
+      },
+      "target": {
+        "value": "solid",
+        "filePath": "src/upload/file-drop-zone.yml",
+        "isSource": true,
+        "original": {
+          "value": "{border-style.default}"
+        },
+        "name": "FileDropZoneBorderStyleTarget",
+        "attributes": {
+          "category": "file-drop-zone",
+          "type": "border-style",
+          "item": "target"
+        },
+        "path": [
+          "file-drop-zone",
+          "border-style",
+          "target"
+        ]
+      }
+    },
+    "border-color": {
+      "default": {
+        "value": "#909090",
+        "filePath": "src/upload/file-drop-zone.yml",
+        "isSource": true,
+        "original": {
+          "value": "{form-control.border-color.default}"
+        },
+        "name": "FileDropZoneBorderColorDefault",
+        "attributes": {
+          "category": "file-drop-zone",
+          "type": "border-color",
+          "item": "default"
+        },
+        "path": [
+          "file-drop-zone",
+          "border-color",
+          "default"
+        ]
+      },
+      "target": {
+        "value": "#0054F5",
+        "filePath": "src/upload/file-drop-zone.yml",
+        "isSource": true,
+        "original": {
+          "value": "{primary.color.800}"
+        },
+        "name": "FileDropZoneBorderColorTarget",
+        "attributes": {
+          "category": "file-drop-zone",
+          "type": "border-color",
+          "item": "target"
+        },
+        "path": [
+          "file-drop-zone",
+          "border-color",
+          "target"
+        ]
+      }
+    }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-design-tokens",
-  "version": "0.2.0-alpha.5",
+  "version": "0.2.0-alpha.50",
   "type": "module",
   "description": "The design tokens used in Flow, mittwald’s design system",
   "homepage": "https://github.com/mittwald/flow/tree/main/packages/design-tokens",
@@ -13,14 +13,16 @@
     "dist"
   ],
   "scripts": {
-    "build": "run style-dictionary build -c style-dictionary.config.js"
+    "build": "style-dictionary build -c style-dictionary.config.js",
+    "clean": "rimraf dist"
   },
   "devDependencies": {
     "@types/js-yaml": "^4.0.9",
     "js-yaml": "^4.1.0",
-    "nx": "^20.3.1",
-    "prettier": "^3.4.2",
-    "style-dictionary": "^4.3.0"
+    "nx": "^20.4.5",
+    "prettier": "^3.5.1",
+    "rimraf": "^6.0.1",
+    "style-dictionary": "^4.3.3"
   },
-  "gitHead": "0ef99c4d3a9120c8568a38718e2622db4cf64746"
+  "gitHead": "9556496daf77ca0f0288f96dc539f38e5c16b390"
 }