@revikornmann/muka-ui 0.19.0 → 0.20.0

package/dist/esm/components/ProgressAccordeon/ProgressAccordeon.js

@@ -16,11 +16,14 @@ import './ProgressAccordeon.css';
  * - **past** — dark check indicator, heading, edit + chevron controls; the
  *   content slot collapses/expands via `collapsed` + `onToggle`
  * - **current** — accent numbered indicator, heading, content slot, actions
- * - **upcoming** — muted numbered indicator, heading only
+ * - **upcoming** — muted numbered indicator, heading; optional collapsible
+ *   content slot (same `collapsed` + `onToggle` as past) for empty-state
+ *   instructions or picking up a step out of order
  *
  * Content is passed as `children` (an optional slot) and rendered as-is — supply
- * your own `Card` when you want a card surface. Composes the Button, Icon and
- * Divider primitives and is fully themed through the Muka design token system.
+ * your own `Card` or `EmptyState` when you want those surfaces. Composes the
+ * Button, Icon and Divider primitives and is fully themed through the Muka
+ * design token system.
  *
  * Tokens used:
  * - alias.color.accent.{default|contrast} — step indicator fills
@@ -39,18 +42,25 @@ import './ProgressAccordeon.css';
 export const ProgressAccordeon = ({ state, stepNumber, heading, description, children, divider = true, collapsed = false, onToggle, editLabel = 'Edit', onEdit, primaryAction, secondaryAction, className = '', }) => {
     const isPast = state === 'past';
     const isCurrent = state === 'current';
-    const isExpanded = isPast && !collapsed;
-    const showToggle = isPast && Boolean(onToggle);
-    const showEdit = isExpanded && Boolean(onEdit);
-    const showDescription = Boolean(description) && !collapsed;
-    // Past steps keep their content mounted regardless of `collapsed` so the
-    // collapse/expand can be CSS-animated (you can't animate an unmounted node).
-    const hasSlot = (isPast || isCurrent) && Boolean(children);
+    const isUpcoming = state === 'upcoming';
+    // Past and upcoming share the collapsible slot pattern so consumers can show
+    // empty-state instructions on future steps and pick steps up independently.
+    const isCollapsible = isPast || isUpcoming;
+    const showToggle = isCollapsible && Boolean(onToggle);
+    const showEdit = isPast && !collapsed && Boolean(onEdit);
+    const showDescription = Boolean(description) && !(isCollapsible && collapsed);
+    // Collapsible steps keep their content mounted regardless of `collapsed` so
+    // the collapse/expand can be CSS-animated (you can't animate an unmounted node).
+    const hasSlot = (isCollapsible || isCurrent) && Boolean(children);
     const hasActions = isCurrent && Boolean(primaryAction || secondaryAction);
+    // Collapse modifiers only when the step can actually collapse — keeps
+    // header-only upcoming spacing on the base `--upcoming` gap rule.
+    const showCollapseModifiers = isPast || (isUpcoming && (Boolean(children) || Boolean(onToggle)));
     const rootClasses = [
         'muka-progress-accordeon',
         `muka-progress-accordeon--${state}`,
-        isPast && `muka-progress-accordeon--${collapsed ? 'collapsed' : 'expanded'}`,
+        showCollapseModifiers &&
+            `muka-progress-accordeon--${collapsed ? 'collapsed' : 'expanded'}`,
         className,
     ].filter(Boolean).join(' ');
     const indicatorClasses = [
@@ -59,9 +69,10 @@ export const ProgressAccordeon = ({ state, stepNumber, heading, description, chi
     ].join(' ');
     const header = (_jsxs("div", { className: "muka-progress-accordeon__header", children: [_jsxs("div", { className: "muka-progress-accordeon__header-row", children: [_jsxs("div", { className: "muka-progress-accordeon__heading-group", children: [_jsx("div", { className: indicatorClasses, "aria-hidden": "true", children: isPast ? (_jsx(Icon, { name: "check", variant: "fill", size: "sm", className: "muka-progress-accordeon__check-icon" })) : (_jsx("span", { className: "muka-progress-accordeon__number", children: stepNumber })) }), _jsx("h3", { className: "muka-progress-accordeon__heading", children: heading })] }), (showEdit || showToggle) && (_jsxs("div", { className: "muka-progress-accordeon__controls", children: [showEdit && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "tertiary", size: "md", onClick: onEdit, iconLeft: _jsx(Icon, { name: "pencil", variant: "line", size: "md" }), className: "muka-progress-accordeon__edit muka-progress-accordeon__edit--wide", children: editLabel }), _jsx(Button, { variant: "tertiary", size: "md", iconOnly: true, onClick: onEdit, className: "muka-progress-accordeon__edit muka-progress-accordeon__edit--narrow", "aria-label": editLabel, children: _jsx(Icon, { name: "pencil", variant: "line", size: "md" }) })] })), showToggle && (_jsx(Button, { variant: "tertiary", size: "md", iconOnly: true, onClick: onToggle, className: "muka-progress-accordeon__toggle", "aria-label": collapsed ? 'Expand' : 'Collapse', "aria-expanded": !collapsed, children: _jsx(Icon, { name: collapsed ? 'arrow-down-s' : 'arrow-up-s', variant: "line", size: "md" }) }))] }))] }), showDescription && (_jsx("div", { className: "muka-progress-accordeon__description", children: description }))] }));
     const slot = hasSlot ? (_jsx("div", { className: "muka-progress-accordeon__slot", children: children })) : null;
-    // Past steps wrap the (always-mounted) slot in a grid animation container that
-    // collapses its height to zero. Marked inert + aria-hidden while collapsed so
-    // the still-mounted content is skipped by keyboard focus and assistive tech.
+    // Collapsible steps wrap the (always-mounted) slot in a grid animation
+    // container that collapses its height to zero. Marked inert + aria-hidden while
+    // collapsed so the still-mounted content is skipped by keyboard focus and
+    // assistive tech.
     // `inert` is set imperatively on the DOM node rather than via a React prop:
     // React 18 drops a boolean `inert` prop, while React 19 warns on the string
     // form — toggling the attribute directly works correctly under both.
@@ -77,8 +88,8 @@ export const ProgressAccordeon = ({ state, stepNumber, heading, description, chi
             node.removeAttribute('inert');
         }
     }, [collapsed]);
-    const pastSlot = hasSlot ? (_jsx("div", { ref: slotWrapperRef, className: `muka-progress-accordeon__slot-wrapper${collapsed ? ' muka-progress-accordeon__slot-wrapper--collapsed' : ''}`, "aria-hidden": collapsed || undefined, children: _jsx("div", { className: "muka-progress-accordeon__slot-clip", children: slot }) })) : null;
-    return (_jsxs("div", { className: rootClasses, role: "group", "aria-label": `Step ${stepNumber}: ${heading}`, "aria-current": isCurrent ? 'step' : undefined, children: [isPast ? (_jsxs("div", { className: "muka-progress-accordeon__body", children: [header, pastSlot] })) : (_jsxs(_Fragment, { children: [header, slot] })), hasActions && (_jsxs("div", { className: "muka-progress-accordeon__actions", children: [secondaryAction && (_jsx(Button, { variant: "secondary", size: "md", onClick: secondaryAction.onClick, disabled: secondaryAction.disabled, className: "muka-progress-accordeon__action", children: secondaryAction.label })), primaryAction && (_jsx(Button, { variant: "primary", size: "md", onClick: primaryAction.onClick, disabled: primaryAction.disabled, className: "muka-progress-accordeon__action", children: primaryAction.label }))] })), divider && _jsx(Divider, { className: "muka-progress-accordeon__divider" })] }));
+    const collapsibleSlot = hasSlot ? (_jsx("div", { ref: slotWrapperRef, className: `muka-progress-accordeon__slot-wrapper${collapsed ? ' muka-progress-accordeon__slot-wrapper--collapsed' : ''}`, "aria-hidden": collapsed || undefined, children: _jsx("div", { className: "muka-progress-accordeon__slot-clip", children: slot }) })) : null;
+    return (_jsxs("div", { className: rootClasses, role: "group", "aria-label": `Step ${stepNumber}: ${heading}`, "aria-current": isCurrent ? 'step' : undefined, children: [isCollapsible ? (_jsxs("div", { className: "muka-progress-accordeon__body", children: [header, collapsibleSlot] })) : (_jsxs(_Fragment, { children: [header, slot] })), hasActions && (_jsxs("div", { className: "muka-progress-accordeon__actions", children: [secondaryAction && (_jsx(Button, { variant: "secondary", size: "md", onClick: secondaryAction.onClick, disabled: secondaryAction.disabled, className: "muka-progress-accordeon__action", children: secondaryAction.label })), primaryAction && (_jsx(Button, { variant: "primary", size: "md", onClick: primaryAction.onClick, disabled: primaryAction.disabled, className: "muka-progress-accordeon__action", children: primaryAction.label }))] })), divider && _jsx(Divider, { className: "muka-progress-accordeon__divider" })] }));
 };
 export default ProgressAccordeon;
 //# sourceMappingURL=ProgressAccordeon.js.map

package/dist/esm/components/ProgressAccordeon/ProgressAccordeon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressAccordeon.js","sourceRoot":"","sources":["../../../../components/ProgressAccordeon/ProgressAccordeon.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ProgressAccordeon.js","sourceRoot":"","sources":["../../../../components/ProgressAccordeon/ProgressAccordeon.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/SearchInput/SearchInput.css

@@ -80,10 +80,10 @@
   outline: none;
   padding: 0;
   color: var(--color-text-default-default);
-  font-family: var(--text-body-md-regular-fontFamily);
-  font-weight: var(--text-body-md-regular-fontWeight);
-  font-size: var(--text-body-md-regular-fontSize);
-  line-height: var(--text-body-md-regular-lineHeight);
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-weight: var(--text-body-base-regular-fontWeight);
+  font-size: var(--text-body-base-regular-fontSize);
+  line-height: var(--text-body-base-regular-lineHeight);
   appearance: none;
   -webkit-appearance: none;
 }

package/dist/esm/components/Select/Select.css

@@ -38,7 +38,7 @@
 }
 
 .muka-select__required {
-  color: var(--color-state-error-foreground);
+  color: var(--color-state-error-default);
 }
 
 .muka-select__label--sm + .muka-select__field--disabled,
@@ -186,6 +186,6 @@
   font-weight: var(--text-label-sm-regular-fontWeight);
   font-size: var(--text-label-sm-regular-fontSize);
   line-height: var(--text-label-sm-regular-lineHeight);
-  color: var(--color-state-error-foreground);
+  color: var(--color-state-error-default);
   margin: 0;
 }

package/dist/esm/components/SmsOtpField/SmsOtpField.css

@@ -35,7 +35,7 @@
 }
 
 .muka-sms-otp-field__required {
-  color: var(--color-state-error-foreground);
+  color: var(--color-state-error-default);
 }
 
 /* Hidden input for browser autofill */
@@ -184,6 +184,6 @@
   font-weight: var(--text-label-sm-regular-fontWeight);
   font-size: var(--text-label-sm-regular-fontSize);
   line-height: var(--text-label-sm-regular-lineHeight);
-  color: var(--color-state-error-foreground);
+  color: var(--color-state-error-default);
   margin: 0;
 }

package/dist/esm/components/SpecList/SpecList.css

@@ -20,10 +20,10 @@
   flex: 0 0 auto;
   margin: 0;
   color: var(--color-text-subtle-default);
-  font-family: var(--text-body-md-regular-fontFamily);
-  font-weight: var(--text-body-md-regular-fontWeight);
-  font-size: var(--text-body-md-regular-fontSize);
-  line-height: var(--text-body-md-regular-lineHeight);
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-weight: var(--text-body-base-regular-fontWeight);
+  font-size: var(--text-body-base-regular-fontSize);
+  line-height: var(--text-body-base-regular-lineHeight);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -41,10 +41,10 @@
 }
 
 .muka-spec-row__value-text {
-  font-family: var(--text-body-md-regular-fontFamily);
-  font-weight: var(--text-body-md-regular-fontWeight);
-  font-size: var(--text-body-md-regular-fontSize);
-  line-height: var(--text-body-md-regular-lineHeight);
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-weight: var(--text-body-base-regular-fontWeight);
+  font-size: var(--text-body-base-regular-fontSize);
+  line-height: var(--text-body-base-regular-lineHeight);
 }
 
 .muka-spec-row__hint {

package/dist/esm/components/Spinner/Spinner.css

@@ -13,7 +13,7 @@
 }
 
 .muka-spinner--inverse {
-  color: var(--color-text-inverse-default);
+  color: var(--color-text-default-inverse);
 }
 
 .muka-spinner__circle {

package/dist/esm/components/SwipeActions/SwipeActions.css

@@ -86,20 +86,20 @@
 
 .muka-swipe-actions__button--primary {
   background-color: var(--color-action-default);
-  color: var(--color-text-inverse-default, #fff);
+  color: var(--color-text-default-inverse);
 }
 
 .muka-swipe-actions__button--success {
-  background-color: var(--color-state-success-default, var(--color-action-default));
-  color: var(--color-text-inverse-default, #fff);
+  background-color: var(--color-state-success-default);
+  color: var(--color-text-default-inverse);
 }
 
 .muka-swipe-actions__button--warning {
-  background-color: var(--color-state-warning-default, var(--color-action-default));
+  background-color: var(--color-state-warning-default);
   color: var(--color-text-default-default);
 }
 
 .muka-swipe-actions__button--destructive {
-  background-color: var(--color-state-error-default, #c0392b);
-  color: var(--color-text-inverse-default, #fff);
+  background-color: var(--color-state-error-default);
+  color: var(--color-text-default-inverse);
 }

package/dist/esm/components/Table/Table.css

@@ -55,7 +55,7 @@
    ======================================== */
 
 .muka-table__body .muka-table__row {
-  border-bottom: var(--border-width-regular) solid var(--color-border-subtle);
+  border-bottom: var(--border-width-regular) solid var(--color-border-muted);
 }
 
 .muka-table__body .muka-table__row:last-child {
@@ -67,11 +67,11 @@
 }
 
 .muka-table__body .muka-table__row--selected {
-  background-color: var(--table-row-selected-background, var(--color-action-background));
+  background-color: var(--table-row-selected-background, var(--color-action-default));
 }
 
 .muka-table__body .muka-table__row--selected:hover {
-  background-color: var(--table-row-selected-background, var(--color-action-background));
+  background-color: var(--table-row-selected-background, var(--color-action-default));
 }
 
 .muka-table__row--clickable {

package/dist/esm/components/Table/TablePagination.css

@@ -13,7 +13,7 @@
   padding: var(--table-pagination-padding, var(--spacing-3));
   background-color: var(--table-pagination-background, var(--color-surface-level1));
   border-top: var(--border-width-regular) solid var(--table-pagination-border, var(--color-border-default));
-  font-family: var(--text-body-md-regular-fontFamily);
+  font-family: var(--text-body-base-regular-fontFamily);
   font-size: var(--text-body-sm-regular-fontSize);
   line-height: var(--text-body-sm-regular-lineHeight);
   color: var(--color-text-default-default);

package/dist/esm/components/Tabs/Tabs.css

@@ -25,7 +25,7 @@
   align-items: center;
   position: relative;
   z-index: 2;
-  border-bottom: 1px solid var(--color-border-default, #e0e0e0);
+  border-bottom: 1px solid var(--tabs-trigger-color-default-border);
 }
 
 /* Tab Trigger — clean underline style */
@@ -43,7 +43,7 @@
   white-space: nowrap;
   position: relative;
   z-index: 2;
-  color: var(--color-text-subtle-default, #838383);
+  color: var(--tabs-trigger-color-default-foreground);
 
   /* Default MD size values */
   height: 48px;
@@ -75,12 +75,12 @@
 
 /* Hover state */
 .muka-tabs__trigger:hover:not(:disabled):not(.muka-tabs__trigger--current) {
-  color: var(--color-text-neutral-default, #202020);
+  color: var(--tabs-trigger-color-hover-foreground);
 }
 
 /* Current tab */
 .muka-tabs__trigger--current {
-  color: var(--color-text-action-default, #202020);
+  color: var(--tabs-trigger-color-current-foreground);
 }
 
 /* Active bottom border (underline) */
@@ -91,7 +91,7 @@
   left: 0;
   right: 0;
   height: 3px;
-  background-color: var(--color-text-action-default, #202020);
+  background-color: var(--tabs-trigger-color-current-foreground);
   border-bottom-left-radius: 1px;
   border-bottom-right-radius: 1px;
   border-top-left-radius: 3px;
@@ -100,7 +100,7 @@
 }
 
 .muka-tabs__trigger--disabled {
-  color: var(--color-text-disabled-foreground, #a0a0a0);
+  color: var(--tabs-trigger-color-disabled-foreground);
   cursor: not-allowed;
 }
 

package/dist/esm/components/Textarea/Textarea.css

@@ -34,7 +34,7 @@
 }
 
 .muka-textarea__required {
-  color: var(--color-state-error-foreground);
+  color: var(--color-state-error-default);
 }
 
 /* Field container */
@@ -147,7 +147,7 @@
   font-weight: var(--text-label-sm-regular-fontWeight);
   font-size: var(--text-label-sm-regular-fontSize);
   line-height: var(--text-label-sm-regular-lineHeight);
-  color: var(--color-state-error-foreground);
+  color: var(--color-state-error-default);
   margin: 0;
 }
 

package/dist/esm/components/Waveform/Waveform.css

@@ -9,7 +9,7 @@
 .muka-waveform {
   display: flex;
   align-items: center;
-  gap: var(--spacing-05, 2px);
+  gap: var(--size-3xs);
   width: 100%;
   min-width: 0;
 }

package/dist/styles/components/ActionSheet.css

@@ -56,10 +56,10 @@
   cursor: pointer;
   text-align: left;
   color: var(--color-text-default-default);
-  font-family: var(--text-body-md-regular-fontFamily);
-  font-weight: var(--text-body-md-regular-fontWeight);
-  font-size: var(--text-body-md-regular-fontSize);
-  line-height: var(--text-body-md-regular-lineHeight);
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-weight: var(--text-body-base-regular-fontWeight);
+  font-size: var(--text-body-base-regular-fontSize);
+  line-height: var(--text-body-base-regular-lineHeight);
   -webkit-tap-highlight-color: transparent;
   transition: background-color 0.12s ease;
 }

package/dist/styles/components/BottomBar.css

@@ -141,7 +141,6 @@
   font-weight: var(--text-label-sm-regular-fontWeight);
   font-size: var(--text-label-sm-regular-fontSize);
   line-height: var(--text-label-sm-regular-lineHeight);
-  letter-spacing: var(--text-label-sm-regular-letterSpacing);
 }
 
 /* ─── Floating modifier ───────────────────────────────── */
@@ -227,7 +226,6 @@
     font-weight: var(--text-label-md-regular-fontWeight);
     font-size: var(--text-label-md-regular-fontSize);
     line-height: var(--text-label-md-regular-lineHeight);
-    letter-spacing: var(--text-label-md-regular-letterSpacing);
   }
 
   /* When floating and sidebar, remove the floating card styles */
@@ -292,7 +290,6 @@
     font-weight: var(--text-label-md-regular-fontWeight);
     font-size: var(--text-label-md-regular-fontSize);
     line-height: var(--text-label-md-regular-lineHeight);
-    letter-spacing: var(--text-label-md-regular-letterSpacing);
   }
 
   /* When floating and topnav, remove the floating card styles */

package/dist/styles/components/Breadcrumb.css

@@ -16,19 +16,36 @@
   gap: var(--spacing-1);
 }
 
+.muka-breadcrumb__item:has(.muka-breadcrumb__icon) {
+  padding-left: var(--spacing-1);
+}
+
 .muka-breadcrumb__icon {
   display: inline-flex;
   align-items: center;
   color: var(--color-text-subtle-default);
 }
 
+.muka-breadcrumb__icon .muka-icon {
+  color: inherit;
+}
+
+.muka-breadcrumb__item:has(.muka-breadcrumb__current) .muka-breadcrumb__icon {
+  color: var(--color-text-default-default);
+}
+
+.muka-breadcrumb__item:has(.muka-breadcrumb__link:hover) .muka-breadcrumb__icon {
+  color: var(--color-text-action-default);
+}
+
 /* Link styles */
 .muka-breadcrumb__link {
   color: var(--color-text-subtle-default);
   text-decoration: none;
   border: none;
   background: none;
-  padding: 0;
+  padding-inline: var(--spacing-2);
+  padding-block: 0;
   cursor: pointer;
   font: inherit;
   transition: color 0.15s ease;
@@ -39,10 +56,17 @@
   text-decoration: underline;
 }
 
-/* Current page (last item) */
+/* Tighter gap after leading icon */
+.muka-breadcrumb__item:has(.muka-breadcrumb__icon) .muka-breadcrumb__link,
+.muka-breadcrumb__item:has(.muka-breadcrumb__icon) .muka-breadcrumb__current {
+  padding-left: var(--spacing-1);
+}
+
+/* Current page (last item, no context switcher) */
 .muka-breadcrumb__current {
   color: var(--color-text-default-default);
   font-weight: 600;
+  padding-inline: var(--spacing-2);
 }
 
 /* Separator */

package/dist/styles/components/Combobox.css

@@ -84,7 +84,7 @@
 }
 
 .muka-combobox__field--error:not(.muka-combobox__field--disabled) {
-  border-color: var(--color-state-error-border, var(--color-state-error-foreground));
+  border-color: var(--color-state-error-contrast);
 }
 
 .muka-combobox__field--disabled {
@@ -141,7 +141,7 @@
 
 .muka-combobox__error {
   margin: 0;
-  color: var(--color-state-error-foreground);
+  color: var(--color-state-error-default);
   font-family: var(--text-label-sm-regular-fontFamily);
   font-size: var(--text-label-sm-regular-fontSize);
   font-weight: var(--text-label-sm-regular-fontWeight);

package/dist/styles/components/ContextSelect.css

@@ -71,10 +71,10 @@
 }
 
 .muka-context-select__label {
-  font-family: var(--text-label-sm-regular-font-family);
-  font-size: var(--text-label-sm-regular-font-size);
-  font-weight: var(--text-label-sm-regular-font-weight);
-  line-height: var(--text-label-sm-regular-line-height);
+  font-family: var(--text-label-sm-regular-fontFamily);
+  font-size: var(--text-label-sm-regular-fontSize);
+  font-weight: var(--text-label-sm-regular-fontWeight);
+  line-height: var(--text-label-sm-regular-lineHeight);
   white-space: nowrap;
 }
 

package/dist/styles/components/DocumentViewer.css

@@ -65,7 +65,7 @@
   line-height: var(--text-label-sm-lineHeight);
   border: 1px solid var(--color-border-default);
   border-radius: var(--border-radius-md);
-  background-color: var(--color-surface-default);
+  background-color: var(--color-surface-level0);
   color: var(--color-text-default-default);
 }
 
@@ -210,7 +210,7 @@
 
 .muka-documentviewer__thumbnail-label {
   font-family: var(--alias-font-brand-family);
-  font-size: var(--text-label-xs-fontSize);
+  font-size: var(--text-label-xs-regular-fontSize);
   color: var(--color-text-default-default);
   font-weight: var(--alias-font-brand-weight-medium);
 }

package/dist/styles/components/DropdownSelect.css

@@ -38,7 +38,7 @@
 }
 
 .muka-dropdown-select__required {
-  color: var(--color-state-error-foreground);
+  color: var(--color-state-error-default);
 }
 
 .muka-dropdown-select__field {
@@ -98,7 +98,7 @@
 }
 
 .muka-dropdown-select__field--error:not(.muka-dropdown-select__field--disabled) {
-  border-color: var(--color-state-error-border, var(--color-state-error-foreground));
+  border-color: var(--color-state-error-contrast);
 }
 
 .muka-dropdown-select__field--disabled {
@@ -213,7 +213,7 @@
 
 .muka-dropdown-select__error {
   margin: 0;
-  color: var(--color-state-error-foreground);
+  color: var(--color-state-error-default);
   font-family: var(--text-label-sm-regular-fontFamily);
   font-size: var(--text-label-sm-regular-fontSize);
   font-weight: var(--text-label-sm-regular-fontWeight);

package/dist/styles/components/EmptyState.css

@@ -80,10 +80,10 @@
 .muka-emptystate__title {
   color: var(--emptystate-title-color);
   margin: 0;
-  font-family: var(--text-heading-h4-fontFamily);
-  font-weight: var(--text-heading-h4-fontWeight);
-  font-size: var(--text-heading-h4-fontSize);
-  line-height: var(--text-heading-h4-lineHeight);
+  font-family: var(--text-heading-sm-fontFamily);
+  font-weight: var(--text-heading-sm-fontWeight);
+  font-size: var(--text-heading-sm-fontSize);
+  line-height: var(--text-heading-sm-lineHeight);
 }
 
 .muka-emptystate--sm .muka-emptystate__title {
@@ -94,10 +94,10 @@
 }
 
 .muka-emptystate--lg .muka-emptystate__title {
-  font-family: var(--text-heading-h3-fontFamily);
-  font-weight: var(--text-heading-h3-fontWeight);
-  font-size: var(--text-heading-h3-fontSize);
-  line-height: var(--text-heading-h3-lineHeight);
+  font-family: var(--text-heading-md-fontFamily);
+  font-weight: var(--text-heading-md-fontWeight);
+  font-size: var(--text-heading-md-fontSize);
+  line-height: var(--text-heading-md-lineHeight);
 }
 
 /* Description */

package/dist/styles/components/FAB.css

@@ -38,7 +38,7 @@
 
 .muka-fab--primary {
   background-color: var(--color-action-default);
-  color: var(--color-text-inverse-default);
+  color: var(--color-text-default-inverse);
 }
 
 .muka-fab--primary:hover:not(:disabled) {

package/dist/styles/components/FileUpload.css

@@ -118,10 +118,10 @@
 
 /* Text */
 .muka-fileupload__text {
-  font-family: var(--text-body-md-regular-fontFamily);
-  font-size: var(--text-body-md-regular-fontSize);
-  font-weight: var(--text-body-md-regular-fontWeight);
-  line-height: var(--text-body-md-regular-lineHeight);
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-size: var(--text-body-base-regular-fontSize);
+  font-weight: var(--text-body-base-regular-fontWeight);
+  line-height: var(--text-body-base-regular-lineHeight);
   color: var(--color-text-default-default);
 }
 
@@ -204,10 +204,10 @@
 }
 
 .muka-fileupload-item__name {
-  font-family: var(--text-body-sm-medium-fontFamily);
-  font-size: var(--text-body-sm-medium-fontSize);
-  font-weight: var(--text-body-sm-medium-fontWeight);
-  line-height: var(--text-body-sm-medium-lineHeight);
+  font-family: var(--text-body-sm-regular-fontFamily);
+  font-size: var(--text-body-sm-regular-fontSize);
+  font-weight: var(--text-body-sm-regular-fontWeight);
+  line-height: var(--text-body-sm-regular-lineHeight);
   color: var(--fileupload-item-color-default-foreground);
   white-space: nowrap;
   overflow: hidden;
@@ -243,11 +243,11 @@
 }
 
 .muka-fileupload-item__status-icon--success {
-  color: var(--color-state-success-foreground);
+  color: var(--fileupload-item-color-success-foreground);
 }
 
 .muka-fileupload-item__status-icon--error {
-  color: var(--color-state-error-foreground);
+  color: var(--fileupload-item-color-error-foreground);
 }
 
 .muka-fileupload-item__remove {

package/dist/styles/components/Input.css

@@ -39,7 +39,7 @@
 }
 
 .muka-input__required {
-  color: var(--color-state-error-foreground);
+  color: var(--color-state-error-default);
 }
 
 .muka-input__label--sm + .muka-input__field--disabled,
@@ -245,6 +245,6 @@
   font-weight: var(--text-label-sm-regular-fontWeight);
   font-size: var(--text-label-sm-regular-fontSize);
   line-height: var(--text-label-sm-regular-lineHeight);
-  color: var(--color-state-error-foreground);
+  color: var(--color-state-error-default);
   margin: 0;
 }

package/dist/styles/components/Label.css

@@ -34,5 +34,5 @@
 }
 
 .muka-label__required {
-  color: var(--color-state-error-foreground);
+  color: var(--color-state-error-default);
 }

package/dist/styles/components/LicensePlateInput.css

@@ -185,6 +185,6 @@
   font-weight: var(--text-label-sm-regular-fontWeight);
   font-size: var(--text-label-sm-regular-fontSize);
   line-height: var(--text-label-sm-regular-lineHeight);
-  color: var(--color-state-error-foreground);
+  color: var(--color-state-error-default);
   margin: 0;
 }