@crossangle-org/cs-ui 0.0.1 → 0.1.0

package/dist/cs-ui.css

@@ -140,6 +140,7 @@
     --color-state-warning-default: var(--color-orange-400);
     --color-state-error-default: var(--color-red-500);
     --color-state-info-default: var(--color-blue-500);
+    --color-state-neutral: var(--color-neutral-300);
     --font-size-metric-sm: var(--font-size-sm);
     --font-size-heading-xs: var(--font-size-base);
     --font-size-body-xs: var(--font-size-xs);
@@ -171,8 +172,12 @@
     --scale-control-lg: var(--scale-lg);
     --radius-base: var(--radius-none);
     --border-width-thin: var(--borderwidth-default);
+    --spacing-component-gap-sm: var(--spacing-3);
     --spacing-component-gap-md: var(--spacing-4);
     --spacing-component-gap-lg: var(--spacing-5);
+    --spacing-component-padding-sm: var(--spacing-3);
+    --spacing-component-padding-md: var(--spacing-4);
+    --spacing-component-padding-lg: var(--spacing-5);
     --opacity-state-disabled: var(--opacity-50);
     --opacity-state-muted: var(--opacity-20);
     --border-width-regular: var(--borderwidth-2);
@@ -192,11 +197,13 @@
     --font-size-productive-code-md: var(--font-size-base);
     --font-size-productive-label-sm: var(--font-size-xs);
     --icon-size-micro: var(--icon-xs);
+    --spacing-section-xs: var(--spacing-4);
     --spacing-component-padding-xs: var(--spacing-2);
     --color-bg-surface-accent: var(--color-zinc-200);
     --color-bg-primary-muted: var(--color-theme-primary-100-a10);
     --color-bg-secondary-default: var(--color-theme-secondary-100);
     --color-bg-secondary-hover: var(--color-theme-secondary-200);
+    --color-bg-secondary-muted: var(--color-theme-secondary-100-a10);
     --border-color-secondary-default: var(--color-theme-secondary-100);
     --border-color-secondary-hover: var(--color-theme-secondary-200);
     --font-color-link-default: var(--color-blue-700);
@@ -209,7 +216,9 @@
     --effect-blur-surface-lg: var(--blur-md);
     --color-state-error-subtle: var(--color-red-50);
     --color-state-warning-subtle: var(--color-orange-50);
+    --spacing-component-gap-xl: var(--spacing-7);
     --spacing-component-gap-2xl: var(--spacing-9);
+    --spacing-component-gap-xs: var(--spacing-2);
     --spacing-component-padding-xl: var(--spacing-6);
     --font-size-productive-label-md: var(--font-size-sm);
     --font-letter-spacing-heading: var(--font-letter-spacing-tracking-normal);
@@ -221,6 +230,9 @@
     --font-font-weight-metric-normal: var(--font-weight-normal);
     --font-font-weight-productive-normal: var(--font-weight-normal);
     --spacing-component-padding-2xl: var(--spacing-8);
+    --spacing-component-gap-none: var(--spacing-0);
+    --color-progress-track: var(--color-neutral-200);
+    --color-progress-fill: var(--color-theme-primary-100);
     --color-chart-data-vis-brand-1: var(--color-theme-primary-100);
     --color-state-info-subtle: var(--color-blue-50);
     --color-gradient-primary-start: var(--color-theme-primary-100);
@@ -233,14 +245,19 @@
     --spacing-component-padding-xxs: var(--spacing-1);
     --color-chart-data-vis-brand-2: var(--color-theme-secondary-100);
     --color-chart-data-vis-brand-3: var(--color-theme-accent-100);
+    --color-chart-bg-container: var(--color-neutral-100);
     --color-chart-border-grid: var(--color-neutral-300);
     --color-chart-text-axis-label: var(--color-neutral-500);
     --color-chart-text-data-value: var(--color-neutral-950);
+    --color-chart-text-data-value-sub: var(--color-neutral-500);
     --color-chart-border-axis: var(--color-neutral-300);
     --color-chart-control-range-track: var(--color-white);
+    --color-chart-control-range-fill: var(--color-blue-50);
     --color-chart-control-handle: var(--color-white);
     --color-chart-control-border: var(--color-neutral-300);
     --color-chart-control-thumb: var(--color-blue-400);
+    --color-chart-foreground: var(--color-white);
+    --color-chart-control-thumb-subtle: var(--color-blue-300);
     --line-height-metric-sm: var(--font-size-sm--line-height);
     --line-height-heading-xs: var(--font-size-base--line-height);
     --line-height-body-xs: var(--font-size-xs--line-height);
@@ -261,6 +278,592 @@
     --line-height-productive-code-md: var(--font-size-base--line-height);
     --line-height-productive-label-sm: var(--font-size-xs--line-height);
     --line-height-productive-label-md: var(--font-size-sm--line-height);
+    --button-size-small-height: var(--scale-control-sm);
+    --button-size-small-icon-size: var(--icon-size-small);
+    --button-size-small-padding-x: var(--spacing-component-padding-sm);
+    --button-size-small-gap: var(--spacing-component-gap-xs);
+    --button-solid-primary-default-bg: var(--color-bg-primary-default);
+    --button-solid-primary-hover-bg: var(--color-bg-primary-hover);
+    --button-solid-primary-default-font: var(--font-color-onbrand-default);
+    --button-solid-primary-hover-font: var(--font-color-onbrand-default);
+    --button-solid-primary-default-icon: var(--icon-color-onbrand-default);
+    --button-solid-primary-hover-icon: var(--icon-color-onbrand-hover);
+    --button-size-small-radius: var(--radius-small);
+    --button-size-medium-height: var(--scale-control-md);
+    --button-size-medium-icon-size: var(--icon-size-small);
+    --button-size-medium-padding-x: var(--spacing-component-padding-md);
+    --button-size-medium-gap: var(--spacing-component-gap-xs);
+    --button-size-medium-radius: var(--radius-small);
+    --button-size-large-height: var(--scale-control-lg);
+    --button-size-large-icon-size: var(--icon-size-medium);
+    --button-size-large-padding-x: var(--spacing-component-padding-md);
+    --button-size-large-gap: var(--spacing-component-gap-xs);
+    --button-size-large-radius: var(--radius-small);
+    --button-solid-primary-disabled-bg: var(--color-bg-disabled);
+    --button-solid-primary-disabled-font: var(--font-color-disabled);
+    --button-solid-primary-disabled-icon: var(--icon-color-disabled);
+    --button-outline-default-border: var(--border-color-primary-default);
+    --button-outline-default-font: var(--font-color-onbrand-default);
+    --button-outline-default-icon: var(--icon-color-onbrand-default);
+    --button-outline-hover-bg: var(--color-bg-primary-muted);
+    --button-outline-hover-font: var(--font-color-onbrand-default);
+    --button-outline-hover-icon: var(--icon-color-onbrand-hover);
+    --button-outline-disabled-bg: var(--color-bg-surface-default);
+    --button-outline-disabled-font: var(--font-color-disabled);
+    --button-outline-disabled-icon: var(--icon-color-disabled);
+    --button-outline-default-bg: var(--color-bg-surface-default);
+    --button-outline-hover-border: var(--border-color-primary-default);
+    --button-outline-disabled-border: var(--color-state-neutral);
+    --button-solid-secondary-default-bg: var(--color-bg-secondary-default);
+    --button-solid-secondary-default-font: var(--font-color-onbrand-default);
+    --button-solid-secondary-default-icon: var(--icon-color-onbrand-default);
+    --button-solid-secondary-hover-bg: var(--color-bg-secondary-hover);
+    --button-solid-secondary-hover-font: var(--font-color-onbrand-default);
+    --button-solid-secondary-hover-icon: var(--icon-color-onbrand-hover);
+    --button-solid-secondary-disabled-bg: var(--color-bg-disabled);
+    --button-solid-secondary-disabled-font: var(--font-color-disabled);
+    --button-solid-secondary-disabled-icon: var(--icon-color-disabled);
+    --button-ghost-default-font: var(--font-color-onbrand-default);
+    --button-ghost-default-icon: var(--icon-color-onbrand-default);
+    --button-ghost-hover-bg: var(--color-bg-surface-muted);
+    --button-ghost-hover-font: var(--font-color-onbrand-default);
+    --button-ghost-hover-icon: var(--icon-color-onbrand-hover);
+    --button-ghost-disabled-font: var(--font-color-disabled);
+    --button-ghost-disabled-icon: var(--icon-color-disabled);
+    --button-link-default-font: var(--font-color-link-default);
+    --button-link-default-icon: var(--icon-color-link-default);
+    --button-link-hover-bg: var(--color-bg-surface-muted);
+    --button-link-hover-font: var(--font-color-link-hover);
+    --button-link-hover-icon: var(--icon-color-link-hover);
+    --button-link-disabled-font: var(--font-color-link-default);
+    --button-link-disabled-icon: var(--icon-color-link-default);
+    --button-common-opacity: var(--opacity-state-disabled);
+    --button-outline-border-width: var(--border-width-thin);
+    --input-common-radius: var(--radius-medium);
+    --input-common-padding-x: var(--spacing-component-padding-sm);
+    --input-common-padding-y: var(--spacing-component-padding-sm);
+    --input-common-gap: var(--spacing-component-gap-sm);
+    --input-common-icon-size-sm: var(--icon-size-small);
+    --input-common-opacity: var(--opacity-state-disabled);
+    --input-solid-default-bg: var(--color-bg-surface-muted);
+    --input-solid-default-font: var(--font-color-primary-muted);
+    --input-solid-default-icon: var(--icon-color-primary-muted);
+    --input-common-height: var(--scale-lg);
+    --input-common-border-width: var(--border-width-thin);
+    --input-solid-hover-bg: var(--color-bg-surface-accent);
+    --input-solid-focus-bg: var(--color-bg-surface-muted);
+    --input-solid-focus-border: var(--border-color-focus);
+    --input-solid-fail-bg: var(--color-state-error-subtle);
+    --input-solid-fail-border: var(--color-state-error-default);
+    --input-solid-fail-font: var(--font-color-primary-default);
+    --input-solid-fail-icon: var(--color-state-error-default);
+    --input-solid-success-bg: var(--color-state-success-subtle);
+    --input-solid-success-border: var(--color-state-success-default);
+    --input-solid-success-font: var(--font-color-primary-default);
+    --input-solid-success-icon: var(--color-state-success-default);
+    --input-outline-default-bg: var(--color-bg-surface-default);
+    --input-outline-default-border: var(--border-color-default);
+    --input-outline-default-font: var(--font-color-primary-muted);
+    --input-outline-default-icon: var(--icon-color-onbrand-default);
+    --input-outline-hover-bg: var(--color-bg-surface-default);
+    --input-outline-hover-border: var(--border-color-default);
+    --input-outline-focus-bg: var(--color-bg-surface-default);
+    --input-outline-focus-border: var(--border-color-focus);
+    --input-outline-fail-bg: var(--color-bg-surface-default);
+    --input-outline-fail-border: var(--color-state-error-default);
+    --input-outline-fail-font: var(--font-color-primary-default);
+    --input-outline-fail-icon: var(--color-state-error-default);
+    --input-outline-success-bg: var(--color-bg-surface-default);
+    --input-outline-success-border: var(--color-state-success-default);
+    --input-outline-success-font: var(--font-color-primary-default);
+    --input-outline-success-icon: var(--color-state-success-default);
+    --checkbox-common-radius: var(--radius-small);
+    --checkbox-common-scale: var(--scale-control-xs);
+    --checkbox-common-icon-size: var(--icon-size-micro);
+    --checkbox-common-opacity: var(--opacity-state-disabled);
+    --checkbox-solid-default-bg: var(--color-bg-surface-muted);
+    --checkbox-solid-hover-bg: var(--color-bg-surface-accent);
+    --checkbox-outline-border-width: var(--border-width-thin);
+    --checkbox-solid-checked-bg: var(--color-bg-primary-default);
+    --checkbox-solid-checked-icon: var(--icon-color-onbrand-default);
+    --checkbox-outline-default-border: var(--border-color-primary-default);
+    --checkbox-outline-hover-border: var(--border-color-primary-hover);
+    --checkbox-outline-checked-bg: var(--color-bg-primary-default);
+    --checkbox-outline-checked-border: var(--border-color-primary-default);
+    --checkbox-outline-checked-icon: var(--icon-color-onbrand-default);
+    --checkbox-outline-hover-bg: var(--color-bg-surface-muted);
+    --checkbox-outline-default-bg: var(--color-bg-surface-default);
+    --card-common-radius: var(--radius-large);
+    --card-common-padding-x: var(--spacing-component-padding-xl);
+    --card-common-padding-y: var(--spacing-component-padding-xl);
+    --card-common-gap: var(--spacing-component-gap-2xl);
+    --card-container-header-gap: var(--spacing-component-gap-sm);
+    --card-container-header-title: var(--font-color-primary-default);
+    --card-container-header-description: var(--font-color-primary-muted);
+    --card-container-content-gap: var(--spacing-component-gap-lg);
+    --card-container-footer-gap: var(--spacing-component-gap-sm);
+    --card-common-bg: var(--color-bg-surface-default);
+    --card-common-border: var(--border-color-default);
+    --input-common-group-gap: var(--spacing-component-gap-sm);
+    --dropdown-item-common-radius: var(--radius-base);
+    --dropdown-item-common-padding-x: var(--spacing-component-padding-sm);
+    --dropdown-item-common-height: var(--scale-control-md);
+    --dropdown-item-icon-gap: var(--spacing-component-gap-sm);
+    --dropdown-item-common-border-width: var(--border-width-thin);
+    --dropdown-item-simple-default-font: var(--font-color-primary-default);
+    --dropdown-item-icon-default-icon: var(--icon-color-primary-muted);
+    --dropdown-item-icon-disabled-icon: var(--icon-color-disabled);
+    --dropdown-item-common-bg: var(--color-bg-surface-default);
+    --dropdown-item-simple-hover-font: var(--font-color-primary-default);
+    --dropdown-item-simple-disabled-font: var(--font-color-disabled);
+    --label-font-default: var(--font-color-primary-default);
+    --dropdown-item-simple-hover-bg: var(--color-bg-surface-muted);
+    --dropdown-item-common-border: var(--border-color-divider);
+    --dropdown-item-icon-icon-size: var(--icon-size-small);
+    --label-gap: var(--spacing-component-gap-xs);
+    --label-font-disabled: var(--font-color-disabled);
+    --dropdown-item-header-font: var(--font-color-primary-default);
+    --dropdown-item-common-padding-y: var(--spacing-component-padding-xs);
+    --select-default-common-radius: var(--radius-medium);
+    --select-default-common-padding-x: var(--spacing-component-padding-md);
+    --select-default-common-height: var(--scale-control-lg);
+    --select-default-common-border-width: var(--border-width-thin);
+    --select-default-default-bg: var(--color-bg-surface-default);
+    --select-default-default-border: var(--border-color-default);
+    --select-default-common-gap: var(--spacing-component-padding-xs);
+    --select-default-default-font: var(--font-color-primary-default);
+    --select-default-default-icon: var(--icon-color-onbrand-default);
+    --select-default-hover-bg: var(--color-bg-surface-default);
+    --select-default-hover-border: var(--border-color-surface);
+    --select-default-hover-font: var(--font-color-primary-default);
+    --select-default-hover-icon: var(--icon-color-onbrand-default);
+    --select-default-disabled-bg: var(--color-bg-surface-muted);
+    --select-default-disabled-border: var(--border-color-default);
+    --select-default-disabled-font: var(--icon-color-disabled);
+    --select-default-disabled-icon: var(--icon-color-disabled);
+    --select-dropdown-radius: var(--radius-medium);
+    --select-dropdown-gap: var(--spacing-component-gap-none);
+    --select-dropdown-padding-x: var(--spacing-component-padding-xs);
+    --select-dropdown-padding-y: var(--spacing-component-padding-xs);
+    --select-dropdown-bg: var(--color-bg-surface-default);
+    --select-default-common-icon-size: var(--icon-size-small);
+    --select-dropdown-border: var(--border-color-default);
+    --badge-common-radius: var(--radius-max);
+    --badge-common-padding-x: var(--spacing-component-padding-sm);
+    --badge-common-padding-y: var(--spacing-component-padding-xs);
+    --badge-common-gap: var(--spacing-component-gap-xs);
+    --badge-common-icon-size: var(--icon-size-micro);
+    --badge-solid-bg: var(--color-bg-primary-default);
+    --badge-solid-font: var(--font-color-primary-default);
+    --badge-solid-icon: var(--icon-color-onbrand-default);
+    --badge-outline-bg: var(--color-bg-surface-default);
+    --badge-outline-font: var(--font-color-primary-default);
+    --badge-outline-icon: var(--icon-color-primary-default);
+    --badge-outline-border: var(--border-color-primary-default);
+    --badge-outline-border-width: var(--borderwidth-default);
+    --toggle-common-radius: var(--radius-max);
+    --toggle-common-padding-x: var(--spacing-component-padding-sm);
+    --toggle-common-padding-y: var(--spacing-component-padding-xs);
+    --toggle-common-gap: var(--spacing-component-gap-xs);
+    --toggle-common-icon-size: var(--icon-size-small);
+    --toggle-solid-default-bg: var(--color-bg-surface-muted);
+    --toggle-solid-default-font: var(--font-color-primary-default);
+    --toggle-solid-default-icon: var(--icon-color-onbrand-default);
+    --toggle-solid-hover-bg: var(--color-bg-surface-accent);
+    --toggle-solid-hover-font: var(--font-color-primary-default);
+    --toggle-solid-hover-icon: var(--icon-color-onbrand-default);
+    --toggle-solid-active-bg: var(--color-bg-primary-default);
+    --toggle-solid-active-font: var(--font-color-primary-default);
+    --toggle-solid-active-icon: var(--icon-color-onbrand-default);
+    --toggle-common-opacity: var(--opacity-state-disabled);
+    --toggle-outline-default-bg: var(--color-bg-surface-default);
+    --toggle-outline-default-font: var(--font-color-primary-default);
+    --toggle-outline-default-icon: var(--icon-color-onbrand-default);
+    --toggle-outline-hover-bg: var(--color-bg-secondary-muted);
+    --toggle-outline-active-bg: var(--color-bg-secondary-default);
+    --toggle-outline-active-font: var(--font-color-primary-default);
+    --toggle-outline-active-icon: var(--icon-color-onbrand-default);
+    --toggle-outline-hover-font: var(--font-color-primary-default);
+    --toggle-outline-hover-icon: var(--icon-color-onbrand-default);
+    --toggle-outline-default-border: var(--border-color-secondary-default);
+    --toggle-outline-border-width: var(--borderwidth-default);
+    --toggle-outline-hover-border: var(--border-color-secondary-hover);
+    --toggle-outline-active-border: var(--border-color-secondary-default);
+    --toggle-common-gap-group: var(--spacing-component-gap-sm);
+    --accordion-default-icon-size: var(--icon-size-small);
+    --accordion-default-closed-title: var(--font-color-primary-default);
+    --accordion-default-closed-icon: var(--icon-color-onbrand-default);
+    --accordion-default-open-title: var(--font-color-primary-default);
+    --accordion-default-open-icon: var(--icon-color-onbrand-default);
+    --accordion-default-hover-title: var(--font-color-primary-default);
+    --accordion-default-hover-icon: var(--icon-color-onbrand-default);
+    --accordion-common-bg: var(--color-bg-surface-default);
+    --accordion-default-border-width: var(--border-width-thin);
+    --accordion-default-open-description: var(--font-color-primary-muted);
+    --accordion-default-gap: var(--spacing-component-gap-sm);
+    --accordion-default-open-gap: var(--spacing-component-gap-xs);
+    --accordion-default-border: var(--border-color-default);
+    --accordion-default-padding-y: var(--spacing-component-gap-lg);
+    --accordion-custom-closed-title: var(--font-color-primary-default);
+    --accordion-custom-closed-icon: var(--icon-color-onbrand-default);
+    --accordion-custom-gap: var(--spacing-component-gap-sm);
+    --accordion-custom-padding-y: var(--spacing-component-gap-lg);
+    --accordion-custom-border-width: var(--border-width-thin);
+    --accordion-custom-icon-size: var(--icon-size-small);
+    --accordion-custom-closed-border: var(--border-color-default);
+    --accordion-custom-hover-title: var(--font-color-primary-default);
+    --accordion-custom-hover-icon: var(--icon-color-onbrand-default);
+    --accordion-custom-open-title: var(--font-color-primary-default);
+    --accordion-custom-open-description: var(--font-color-primary-muted);
+    --accordion-custom-open-icon: var(--icon-color-onbrand-default);
+    --accordion-custom-open-gap: var(--spacing-component-gap-xs);
+    --accordion-custom-closed-bg: var(--color-bg-surface-muted);
+    --accordion-custom-padding-x: var(--spacing-component-gap-lg);
+    --accordion-custom-hover-bg: var(--color-bg-surface-accent);
+    --accordion-custom-hover-border: var(--border-color-default);
+    --accordion-custom-open-bg: var(--color-bg-surface-muted);
+    --accordion-custom-open-border: var(--border-color-default);
+    --accordion-custom-radius: var(--radius-large);
+    --dialog-common-radius: var(--radius-large);
+    --dialog-common-padding-x: var(--spacing-component-padding-xl);
+    --dialog-common-padding-y: var(--spacing-component-padding-xl);
+    --dialog-common-gap: var(--spacing-component-gap-2xl);
+    --dialog-common-bg: var(--color-bg-surface-default);
+    --dialog-common-border: var(--border-color-default);
+    --dialog-container-header-gap: var(--spacing-component-gap-sm);
+    --dialog-container-header-title: var(--font-color-primary-default);
+    --dialog-container-header-description: var(--font-color-secondary-default);
+    --dialog-container-footer-gap: var(--spacing-component-gap-sm);
+    --card-common-border-width: var(--border-width-thin);
+    --dialog-common-border-width: var(--border-width-thin);
+    --dropdown-container-radius: var(--radius-medium);
+    --dropdown-container-gap: var(--spacing-component-gap-none);
+    --dropdown-container-padding-x: var(--spacing-component-padding-xs);
+    --dropdown-container-padding-y: var(--spacing-component-padding-xs);
+    --dropdown-container-bg: var(--color-bg-surface-default);
+    --dropdown-container-border: var(--border-color-default);
+    --dropdown-container-border-width: var(--border-width-thin);
+    --popover-common-radius: var(--radius-large);
+    --popover-common-padding-x: var(--spacing-component-padding-lg);
+    --popover-common-padding-y: var(--spacing-component-padding-lg);
+    --popover-solid-bg: var(--color-bg-surface-default);
+    --dropdown-item-simple-active-font: var(--font-color-primary-default);
+    --dropdown-item-simple-active-icon: var(--icon-color-primary-default);
+    --popover-outline-bg: var(--color-bg-surface-default);
+    --popover-outline-border: var(--border-color-default);
+    --popover-outline-border-width: var(--border-width-regular);
+    --tabs-item-common-radius: var(--radius-small);
+    --tabs-item-common-padding-x: var(--spacing-component-padding-sm);
+    --tabs-item-common-padding-y: var(--spacing-component-padding-sm);
+    --tabs-item-common-gap: var(--spacing-component-gap-xs);
+    --tabs-item-common-icon-size: var(--icon-size-small);
+    --tabs-item-solid-on-bg: var(--color-bg-primary-default);
+    --tabs-item-solid-on-font: var(--font-color-onbrand-default);
+    --tabs-item-solid-on-icon: var(--icon-color-onbrand-default);
+    --tabs-item-solid-off-bg: var(--color-bg-surface-muted);
+    --tabs-item-solid-off-font: var(--font-color-primary-muted);
+    --tabs-item-solid-off-icon: var(--icon-color-primary-muted);
+    --tabs-item-solid-line-on-bg: var(--color-bg-primary-default);
+    --tabs-item-solid-line-on-font: var(--font-color-onbrand-default);
+    --tabs-item-solid-line-on-icon: var(--icon-color-onbrand-default);
+    --tabs-item-solid-line-off-bg: var(--color-bg-surface-default);
+    --tabs-item-solid-line-off-font: var(--font-color-onbrand-hover);
+    --tabs-item-solid-line-off-icon: var(--icon-color-onbrand-hover);
+    --tabs-item-solid-ghost-on-bg: var(--color-bg-primary-default);
+    --tabs-item-solid-ghost-on-font: var(--font-color-onbrand-default);
+    --tabs-item-solid-ghost-on-icon: var(--icon-color-onbrand-default);
+    --tabs-item-solid-ghost-off-font: var(--font-color-primary-muted);
+    --tabs-item-solid-ghost-off-icon: var(--icon-color-primary-muted);
+    --tabs-item-bottom-border-on-font: var(--font-color-primary-default);
+    --tabs-item-bottom-border-on-icon: var(--icon-color-primary-default);
+    --tabs-item-bottom-border-off-font: var(--font-color-primary-muted);
+    --tabs-item-bottom-border-off-icon: var(--icon-color-primary-muted);
+    --tabs-container-radius: var(--radius-small);
+    --tabs-container-gap: var(--spacing-component-gap-md);
+    --tabs-container-padding-x: var(--spacing-component-padding-xs);
+    --tabs-container-padding-y: var(--spacing-component-padding-xs);
+    --tabs-container-bg: var(--color-bg-surface-muted);
+    --tabs-item-solid-line-off-border: var(--border-color-primary-default);
+    --tabs-item-solid-line-off-border-width: var(--border-width-thin);
+    --tabs-item-bottom-border-on-border: var(--border-color-primary-default);
+    --tabs-item-bottom-border-on-border-width: var(--border-width-thick);
+    --tabs-item-solid-hover-bg: var(--color-bg-surface-accent);
+    --tabs-item-solid-hover-font: var(--font-color-primary-muted);
+    --tabs-item-solid-hover-icon: var(--icon-color-primary-muted);
+    --tabs-item-solid-line-hover-bg: var(--color-bg-surface-default);
+    --tabs-item-solid-line-hover-font: var(--font-color-onbrand-hover);
+    --tabs-item-solid-line-hover-icon: var(--icon-color-onbrand-hover);
+    --tabs-item-solid-line-hover-border: var(--border-color-primary-hover);
+    --tabs-item-solid-line-hover-border-width: var(--border-width-thin);
+    --tabs-item-solid-ghost-hover-font: var(--font-color-primary-muted);
+    --tabs-item-solid-ghost-hover-icon: var(--icon-color-primary-muted);
+    --tabs-item-solid-ghost-hover-bg: var(--color-bg-surface-muted);
+    --tabs-item-bottom-border-hover-font: var(--font-color-primary-default);
+    --tabs-item-bottom-border-hover-icon: var(--icon-color-primary-default);
+    --table-item-common-padding-x: var(--spacing-component-padding-md);
+    --table-item-common-padding-y: var(--spacing-component-padding-lg);
+    --table-item-cell-bg: var(--color-bg-surface-alt);
+    --table-item-cell-font: var(--font-color-primary-default);
+    --table-item-cell-icon: var(--icon-color-primary-muted);
+    --table-container-radius: var(--radius-large);
+    --table-container-bg: var(--color-bg-surface-muted);
+    --table-container-border: var(--border-color-default);
+    --table-container-border-width: var(--border-width-thin);
+    --table-item-cell-border: var(--border-color-default);
+    --table-item-cell-boder-width: var(--border-width-thin);
+    --table-item-cell-last-bg: var(--color-bg-surface-default);
+    --table-item-header-font: var(--font-color-primary-default);
+    --table-item-header-icon: var(--icon-color-primary-muted);
+    --table-item-header-border: var(--border-color-default);
+    --table-item-header-boder-width: var(--border-width-thin);
+    --table-item-footer-cell-bg: var(--color-bg-surface-accent);
+    --table-item-footer-cell-font: var(--font-color-primary-default);
+    --table-item-footer-cell-border: var(--border-color-default);
+    --table-item-footer-cell-boder-width: var(--border-width-thin);
+    --table-item-common-icon-size: var(--icon-size-small);
+    --dialog-common-bg-overlay: var(--color-bg-overlay-default);
+    --card-common-bg-hover: var(--color-bg-surface-muted);
+    --card-common-border-hover: var(--border-color-default);
+    --box-solid-radius: var(--radius-medium);
+    --box-solid-bg: var(--color-bg-surface-default);
+    --box-solid-gap: var(--spacing-component-gap-xl);
+    --box-solid-padding-x: var(--spacing-component-padding-xl);
+    --box-solid-padding-y: var(--spacing-component-padding-xl);
+    --box-outline-radius: var(--radius-medium);
+    --box-outline-gap: var(--spacing-component-gap-xl);
+    --box-outline-padding-x: var(--spacing-component-padding-xl);
+    --box-outline-padding-y: var(--spacing-component-padding-xl);
+    --box-outline-border-width: var(--border-width-thin);
+    --box-outline-bg: var(--color-bg-surface-default);
+    --box-outline-border: var(--border-color-default);
+    --code-block-solid-radius: var(--radius-medium);
+    --code-block-solid-padding-x: var(--spacing-component-padding-xl);
+    --code-block-solid-padding-y: var(--spacing-component-padding-xl);
+    --code-block-solid-bg: var(--color-bg-surface-muted);
+    --code-block-outline-radius: var(--radius-medium);
+    --code-block-outline-padding-x: var(--spacing-component-padding-xl);
+    --code-block-outline-padding-y: var(--spacing-component-padding-xl);
+    --code-block-outline-border-width: var(--border-width-thin);
+    --code-block-outline-bg: var(--color-bg-surface-muted);
+    --code-block-outline-border: var(--border-color-default);
+    --code-block-solid-font: var(--font-color-secondary-default);
+    --code-block-outline-font: var(--font-color-secondary-default);
+    --progress-radius: var(--radius-max);
+    --progress-solid-track: var(--color-progress-track);
+    --progress-solid-fill: var(--color-progress-fill);
+    --progress-height: var(--scale-control-xs);
+    --skeleton-fill: var(--color-bg-surface-muted);
+    --skeleton-radius: var(--radius-medium);
+    --skeleton-radius-full: var(--radius-max);
+    --scrollbar-fill: var(--color-bg-surface-accent);
+    --scrollbar-radius: var(--radius-max);
+    --scrollbar-horizontal-height: var(--scale-control-xs);
+    --scrollbar-vertical-width: var(--scale-control-xs);
+    --spinner-fill-base: var(--icon-color-primary-default);
+    --spinner-fill-sub: var(--icon-color-primary-muted);
+    --tooltip-radius: var(--radius-medium);
+    --tooltip-padding-x: var(--spacing-component-padding-md);
+    --tooltip-padding-y: var(--spacing-component-padding-md);
+    --tooltip-solid-bg: var(--color-bg-surface-default);
+    --tooltip-outline-border-width: var(--border-width-thin);
+    --tooltip-outline-bg: var(--color-bg-surface-default);
+    --tooltip-outline-border: var(--border-color-default);
+    --tooltip-font: var(--font-color-primary-default);
+    --separator-border: var(--border-color-default);
+    --pagination-common-radius: var(--radius-medium);
+    --pagination-common-padding-sm: var(--spacing-component-padding-sm);
+    --pagination-common-gap: var(--spacing-component-gap-xs);
+    --pagination-common-item-size: var(--scale-control-lg);
+    --pagination-link-default-font: var(--font-color-onbrand-default);
+    --pagination-link-default-icon: var(--icon-color-onbrand-default);
+    --pagination-link-hover-bg: var(--color-bg-surface-muted);
+    --pagination-link-hover-font: var(--font-color-onbrand-default);
+    --pagination-link-hover-icon: var(--icon-color-onbrand-default);
+    --pagination-item-active-font: var(--font-color-primary-default);
+    --pagination-common-padding-md: var(--spacing-component-padding-md);
+    --pagination-common-icon-size: var(--icon-size-small);
+    --pagination-item-active-bg: var(--color-bg-surface-default);
+    --pagination-item-active-border: var(--border-color-default);
+    --pagination-item-active-border-width: var(--border-width-thin);
+    --pagination-item-active-hover-bg: var(--color-bg-surface-muted);
+    --pagination-item-active-hover-font: var(--font-color-primary-default);
+    --pagination-item-active-hover-border: var(--border-color-default);
+    --pagination-item-active-hover-border-width: var(--border-width-thin);
+    --pagination-item-ellipsis-font: var(--font-color-primary-default);
+    --toast-common-radius: var(--radius-medium);
+    --toast-common-padding-x: var(--spacing-component-padding-lg);
+    --toast-common-padding-y: var(--spacing-component-padding-lg);
+    --toast-common-gap: var(--spacing-component-gap-xs);
+    --toast-common-icon-size: var(--icon-size-medium);
+    --toast-default-title: var(--font-color-onbrand-default);
+    --toast-common-border: var(--border-color-default);
+    --toast-common-bg: var(--color-bg-surface-default);
+    --toast-success-title: var(--color-state-success-default);
+    --toast-success-bg: var(--color-state-success-subtle);
+    --toast-success-border: var(--color-state-success-default);
+    --toast-info-bg: var(--color-state-info-subtle);
+    --toast-info-border: var(--color-state-info-default);
+    --toast-info-title: var(--color-state-info-default);
+    --toast-info-description: var(--font-color-secondary-default);
+    --toast-warning-bg: var(--color-state-warning-subtle);
+    --toast-warning-border: var(--color-state-warning-default);
+    --toast-warning-title: var(--color-state-warning-default);
+    --toast-error-bg: var(--color-state-error-subtle);
+    --toast-error-border: var(--color-state-error-default);
+    --toast-error-title: var(--color-state-error-default);
+    --calendar-date-picker-radius: var(--radius-medium);
+    --calendar-date-picker-padding-x: var(--spacing-component-padding-md);
+    --calendar-date-picker-padding-y: var(--spacing-component-padding-md);
+    --calendar-date-picker-icon-size: var(--icon-size-medium);
+    --calendar-date-picker-border-width: var(--border-width-thin);
+    --calendar-date-picker-border: var(--border-color-default);
+    --calendar-date-picker-bg: var(--color-bg-surface-default);
+    --calendar-date-picker-font: var(--font-color-primary-muted);
+    --calendar-date-picker-icon: var(--icon-color-onbrand-default);
+    --calendar-days-disabled-font: var(--font-color-disabled);
+    --calendar-days-default-font: var(--font-color-primary-default);
+    --calendar-days-radius: var(--radius-small);
+    --calendar-days-hover-font: var(--font-color-primary-default);
+    --calendar-days-hover-bg: var(--color-bg-surface-muted);
+    --calendar-days-selected-font: var(--font-color-primary-default);
+    --calendar-days-selected-bg: var(--color-bg-surface-muted);
+    --calendar-days-current-font: var(--font-color-inverse-default);
+    --calendar-days-current-bg: var(--color-bg-primary-default);
+    --calendar-container-radius: var(--radius-medium);
+    --calendar-container-padding-x: var(--spacing-component-padding-sm);
+    --calendar-container-padding-y: var(--spacing-component-padding-sm);
+    --calendar-container-icon-size: var(--icon-size-small);
+    --calendar-container-border-width: var(--border-width-thin);
+    --calendar-container-bg: var(--color-bg-surface-default);
+    --calendar-container-icon: var(--icon-color-onbrand-default);
+    --calendar-container-gap: var(--spacing-component-padding-md);
+    --calendar-container-border: var(--border-color-default);
+    --navigation-button-common-radius: var(--radius-medium);
+    --navigation-button-common-padding-x: var(--spacing-component-padding-md);
+    --navigation-button-common-padding-y: var(--spacing-component-padding-sm);
+    --navigation-button-common-gap: var(--spacing-component-gap-xs);
+    --navigation-button-common-icon-size: var(--icon-size-micro);
+    --navigation-button-solid-ghost-default-font: var(--font-color-primary-default);
+    --navigation-button-solid-ghost-default-icon: var(--icon-color-onbrand-default);
+    --navigation-button-solid-ghost-active-font: var(--font-color-primary-default);
+    --navigation-button-solid-ghost-active-icon: var(--icon-color-onbrand-default);
+    --navigation-button-solid-ghost-active-bg: var(--color-bg-primary-default);
+    --navigation-button-bottom-border-default-font: var(--font-color-primary-default);
+    --navigation-button-bottom-border-default-icon: var(--icon-color-onbrand-default);
+    --navigation-button-bottom-border-hover-font: var(--font-color-onbrand-hover);
+    --navigation-button-bottom-border-hover-icon: var(--icon-color-onbrand-hover);
+    --navigation-button-solid-ghost-disabled-font: var(--font-color-disabled);
+    --navigation-button-solid-ghost-disabled-icon: var(--icon-color-disabled);
+    --navigation-button-bottom-border-active-font: var(--font-color-primary-default);
+    --navigation-button-bottom-border-active-icon: var(--icon-color-onbrand-default);
+    --navigation-button-bottom-border-active-border: var(--icon-color-primary-default);
+    --navigation-button-bottom-border-disabled-font: var(--font-color-disabled);
+    --navigation-button-bottom-border-disabled-icon: var(--icon-color-disabled);
+    --navigation-button-bottom-border-active-border-width: var(--border-width-thick);
+    --navigation-item-common-radius: var(--radius-medium);
+    --navigation-item-common-padding-x: var(--spacing-component-padding-sm);
+    --navigation-item-common-padding-y: var(--spacing-component-padding-sm);
+    --navigation-item-common-gap: var(--spacing-component-padding-sm);
+    --navigation-item-common-icon-size: var(--icon-size-small);
+    --navigation-item-default-font: var(--font-color-primary-default);
+    --navigation-item-default-icon: var(--icon-color-onbrand-default);
+    --navigation-item-hover-bg: var(--color-bg-primary-muted);
+    --navigation-item-hover-font: var(--font-color-primary-default);
+    --navigation-item-content-common-radius: var(--radius-medium);
+    --navigation-item-content-common-padding-x: var(--spacing-component-padding-md);
+    --navigation-item-content-common-padding-y: var(--spacing-component-padding-md);
+    --navigation-item-content-common-gap: var(--spacing-component-padding-xs);
+    --navigation-item-content-common-icon-size: var(--icon-size-small);
+    --navigation-item-content-default-title: var(--font-color-primary-default);
+    --navigation-item-content-default-icon: var(--icon-color-onbrand-default);
+    --navigation-item-content-hover-bg: var(--color-bg-primary-muted);
+    --navigation-item-content-hover-title: var(--font-color-primary-default);
+    --navigation-item-content-hover-icon: var(--icon-color-onbrand-default);
+    --navigation-button-container-gap: var(--spacing-component-gap-sm);
+    --navigation-item-container-radius: var(--radius-medium);
+    --navigation-item-container-padding-x: var(--spacing-component-padding-md);
+    --navigation-item-container-padding-y: var(--spacing-component-padding-md);
+    --navigation-item-container-gap: var(--spacing-component-gap-sm);
+    --navigation-item-container-border-width: var(--border-width-thin);
+    --navigation-item-container-border: var(--border-color-default);
+    --navigation-item-container-bg: var(--color-bg-surface-default);
+    --button-gradient-default-font: var(--font-color-onbrand-default);
+    --button-gradient-default-icon: var(--icon-color-onbrand-default);
+    --button-gradient-hover-font: var(--font-color-onbrand-default);
+    --button-gradient-hover-icon: var(--icon-color-onbrand-default);
+    --button-gradient-disabled-font: var(--font-color-onbrand-default);
+    --button-gradient-disabled-icon: var(--icon-color-onbrand-default);
+    --badge-gradient-font: var(--font-color-inverse-default);
+    --badge-gradient-icon: var(--icon-color-inverse-default);
+    --navigation-button-gradient-default-font: var(--font-color-primary-default);
+    --navigation-button-gradient-default-icon: var(--icon-color-onbrand-default);
+    --navigation-button-gradient-active-font: var(--font-color-primary-default);
+    --navigation-button-gradient-active-icon: var(--icon-color-onbrand-default);
+    --navigation-button-gradient-disabled-font: var(--font-color-disabled);
+    --navigation-button-gradient-disabled-icon: var(--icon-color-disabled);
+    --progress-gradient-track: var(--color-progress-track);
+    --empty-common-padding-x: var(--spacing-component-padding-2xl);
+    --empty-common-padding-y: var(--spacing-component-padding-2xl);
+    --empty-common-gap: var(--spacing-component-gap-2xl);
+    --empty-container-content-gap: var(--spacing-component-gap-lg);
+    --empty-container-footer-gap: var(--spacing-component-gap-md);
+    --empty-container-content-title: var(--font-color-primary-default);
+    --empty-container-content-description: var(--font-color-secondary-default);
+    --empty-container-content-icon: var(--icon-color-onbrand-default);
+    --empty-container-content-icon-bg: var(--color-bg-surface-muted);
+    --empty-common-radius: var(--radius-medium);
+    --dropzone-common-radius: var(--radius-medium);
+    --dropzone-common-padding-x: var(--spacing-component-padding-2xl);
+    --dropzone-common-padding-y: var(--spacing-component-padding-2xl);
+    --dropzone-common-gap: var(--spacing-component-gap-lg);
+    --dropzone-container-icon-color: var(--icon-color-onbrand-default);
+    --dropzone-container-icon-bg: var(--color-bg-surface-muted);
+    --dropzone-container-content-gap: var(--spacing-component-gap-sm);
+    --dropzone-container-content-title: var(--font-color-primary-default);
+    --dropzone-container-content-description: var(--font-color-secondary-default);
+    --dropzone-common-border: var(--border-color-surface);
+    --dropzone-common-bg: var(--color-bg-surface-default);
+    --dropzone-common-border-width: var(--border-width-thin);
+    --dropzone-container-icon-radius: var(--radius-small);
+    --switch-common-radius: var(--radius-max);
+    --switch-common-padding-x: var(--spacing-component-padding-xxs);
+    --switch-common-padding-y: var(--spacing-component-padding-xxs);
+    --switch-off-bg: var(--color-bg-disabled);
+    --switch-off-thumb: var(--color-bg-surface-default);
+    --switch-on-thumb: var(--color-bg-surface-default);
+    --switch-on-bg: var(--color-bg-primary-default);
+    --drawer-common-radius: var(--radius-large);
+    --drawer-common-bg: var(--color-bg-surface-default);
+    --drawer-common-border: var(--border-color-default);
+    --drawer-common-border-width: var(--border-width-thin);
+    --drawer-container-header-gap: var(--spacing-component-gap-sm);
+    --drawer-container-header-title: var(--font-color-primary-default);
+    --drawer-container-header-description: var(--font-color-primary-muted);
+    --drawer-container-footer-gap: var(--spacing-component-gap-sm);
+    --drawer-common-padding-x: var(--spacing-component-padding-lg);
+    --drawer-common-padding-y: var(--spacing-component-padding-lg);
+    --chart-wrapper-grid-color: var(--color-chart-border-grid);
+    --chart-wrapper-axis-color: var(--color-chart-border-axis);
+    --chart-wrapper-label: var(--color-chart-text-axis-label);
+    --chart-data-label-font: var(--color-chart-text-data-value);
+    --chart-range-slider-track-bg: var(--color-chart-control-range-track);
+    --chart-range-slider-track-border: var(--color-chart-control-border);
+    --chart-range-slider-thumb-handle: var(--color-chart-control-handle);
+    --chart-range-slider-thumb-handle-border: var(--color-chart-control-border);
+    --chart-range-slider-thumb-bar: var(--color-chart-control-thumb);
+    --card-common-padding-x-mobile: var(--spacing-5-mobile);
+    --card-common-padding-y-mobile: var(--spacing-5-mobile);
+    --card-common-gap-mobile: var(--spacing-5-mobile);
+    --box-solid-gap-mobile: var(--spacing-4-mobile);
+    --box-solid-padding-x-mobile: var(--spacing-4-mobile);
+    --box-solid-padding-y-mobile: var(--spacing-4-mobile);
+    --box-outline-gap-mobile: var(--spacing-4-mobile);
+    --box-outline-padding-x-mobile: var(--spacing-4-mobile);
+    --box-outline-padding-y-mobile: var(--spacing-4-mobile);
+    --table-item-cell-value-font-brand: var(--font-color-secondary-default);
+    --select-small-common-gap: var(--spacing-component-padding-xs);
+    --select-small-common-padding-x: var(--spacing-component-padding-sm);
+    --select-small-common-height: var(--scale-control-sm);
     --breakpoint-max-mobile: 840px;
   }
 }
@@ -663,6 +1266,10 @@
     margin-block: calc(var(--spacing) * 4);
   }
 
+  .mt-\(--calendar-container-gap\) {
+    margin-top: var(--calendar-container-gap);
+  }
+
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
@@ -675,10 +1282,6 @@
     margin-top: auto;
   }
 
-  .mt-component-gap-sm {
-    margin-top: var(--spacing-3);
-  }
-
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
@@ -730,10 +1333,6 @@
     display: none;
   }
 
-  .inline {
-    display: inline;
-  }
-
   .inline-flex {
     display: inline-flex;
   }
@@ -763,29 +1362,39 @@
     height: var(--cell-size);
   }
 
-  .size-\(--icon-size-medium\)\! {
-    width: var(--icon-size-medium) !important;
-    height: var(--icon-size-medium) !important;
+  .size-\(--checkbox-common-scale\) {
+    width: var(--checkbox-common-scale);
+    height: var(--checkbox-common-scale);
   }
 
-  .size-\(--icon-size-micro\) {
-    width: var(--icon-size-micro);
-    height: var(--icon-size-micro);
+  .size-\(--dropdown-item-icon-icon-size\) {
+    width: var(--dropdown-item-icon-icon-size);
+    height: var(--dropdown-item-icon-icon-size);
   }
 
-  .size-\(--icon-size-small\) {
-    width: var(--icon-size-small);
-    height: var(--icon-size-small);
+  .size-\(--navigation-button-common-icon-size\) {
+    width: var(--navigation-button-common-icon-size);
+    height: var(--navigation-button-common-icon-size);
   }
 
-  .size-\(--scale-control-lg\) {
-    width: var(--scale-control-lg);
-    height: var(--scale-control-lg);
+  .size-\(--pagination-common-icon-size\) {
+    width: var(--pagination-common-icon-size);
+    height: var(--pagination-common-icon-size);
+  }
+
+  .size-\(--pagination-common-item-size\) {
+    width: var(--pagination-common-item-size);
+    height: var(--pagination-common-item-size);
+  }
+
+  .size-\(--select-default-common-icon-size\) {
+    width: var(--select-default-common-icon-size);
+    height: var(--select-default-common-icon-size);
   }
 
-  .size-\(--scale-control-xs\) {
-    width: var(--scale-control-xs);
-    height: var(--scale-control-xs);
+  .size-\(--toast-common-icon-size\)\! {
+    width: var(--toast-common-icon-size) !important;
+    height: var(--toast-common-icon-size) !important;
   }
 
   .size-2\.5 {
@@ -848,28 +1457,56 @@
     height: 100%;
   }
 
-  .h-\(--border-width-regular\) {
-    height: var(--border-width-regular);
+  .h-\(--button-size-large-height\) {
+    height: var(--button-size-large-height);
+  }
+
+  .h-\(--button-size-medium-height\) {
+    height: var(--button-size-medium-height);
+  }
+
+  .h-\(--button-size-small-height\) {
+    height: var(--button-size-small-height);
   }
 
   .h-\(--cell-size\) {
     height: var(--cell-size);
   }
 
-  .h-\(--scale-control-lg\) {
-    height: var(--scale-control-lg);
+  .h-\(--dropdown-item-common-border-width\) {
+    height: var(--dropdown-item-common-border-width);
+  }
+
+  .h-\(--dropdown-item-common-height\) {
+    height: var(--dropdown-item-common-height);
+  }
+
+  .h-\(--pagination-common-item-size\) {
+    height: var(--pagination-common-item-size);
+  }
+
+  .h-\(--progress-height\) {
+    height: var(--progress-height);
   }
 
-  .h-\(--scale-control-md\) {
-    height: var(--scale-control-md);
+  .h-\(--scale-control-lg\) {
+    height: var(--scale-control-lg);
   }
 
   .h-\(--scale-control-sm\) {
     height: var(--scale-control-sm);
   }
 
-  .h-\(--scale-control-xs\) {
-    height: var(--scale-control-xs);
+  .h-\(--scrollbar-horizontal-height\) {
+    height: var(--scrollbar-horizontal-height);
+  }
+
+  .h-\(--select-default-common-height\) {
+    height: var(--select-default-common-height);
+  }
+
+  .h-\(--select-small-common-height\) {
+    height: var(--select-small-common-height);
   }
 
   .h-1\.5 {
@@ -920,8 +1557,8 @@
     height: 400px;
   }
 
-  .h-\[calc\(1rem\+var\(--spacing-component-padding-xxs\)\*2\)\] {
-    height: calc(1rem + var(--spacing-component-padding-xxs) * 2);
+  .h-\[calc\(1rem\+var\(--switch-common-padding-y\)\*2\)\] {
+    height: calc(1rem + var(--switch-common-padding-y) * 2);
   }
 
   .h-\[var\(--radix-navigation-menu-viewport-height\)\] {
@@ -960,16 +1597,16 @@
     max-height: 300px;
   }
 
-  .min-h-\(--scale-lg\) {
-    min-height: var(--scale-lg);
+  .min-h-\(--input-common-height\) {
+    min-height: var(--input-common-height);
   }
 
   .w-\(--cell-size\) {
     width: var(--cell-size);
   }
 
-  .w-\(--scale-control-xs\) {
-    width: var(--scale-control-xs);
+  .w-\(--scrollbar-vertical-width\) {
+    width: var(--scrollbar-vertical-width);
   }
 
   .w-2 {
@@ -1028,8 +1665,12 @@
     width: 800px;
   }
 
-  .w-\[calc\(2rem\+var\(--spacing-component-padding-xxs\)\*2\)\] {
-    width: calc(2rem + var(--spacing-component-padding-xxs) * 2);
+  .w-\[calc\(2rem\+var\(--switch-common-padding-x\)\*2\)\] {
+    width: calc(2rem + var(--switch-common-padding-x) * 2);
+  }
+
+  .w-auto {
+    width: auto;
   }
 
   .w-fit {
@@ -1044,8 +1685,8 @@
     width: max-content;
   }
 
-  .max-w-\[calc\(100\%-\(2\*var\(--spacing-component-padding-xl\)\)\)\] {
-    max-width: calc(100% - (2 * var(--spacing-component-padding-xl)));
+  .max-w-\[calc\(100\%-\(2\*var\(--dialog-common-padding-x\)\)\)\] {
+    max-width: calc(100% - (2 * var(--dialog-common-padding-x)));
   }
 
   .max-w-max {
@@ -1060,14 +1701,18 @@
     min-width: var(--cell-size);
   }
 
-  .min-w-\(--scale-control-lg\) {
-    min-width: var(--scale-control-lg);
+  .min-w-\(--pagination-common-item-size\) {
+    min-width: var(--pagination-common-item-size);
   }
 
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
 
+  .min-w-32 {
+    min-width: calc(var(--spacing) * 32);
+  }
+
   .min-w-\[8rem\] {
     min-width: 8rem;
   }
@@ -1251,508 +1896,1329 @@
     justify-content: flex-start;
   }
 
-  .gap-\(--spacing-component-gap-2xl\) {
-    gap: var(--spacing-component-gap-2xl);
-  }
-
-  .gap-\(--spacing-component-gap-lg\) {
-    gap: var(--spacing-component-gap-lg);
+  .gap-\(--badge-common-gap\) {
+    gap: var(--badge-common-gap);
   }
 
-  .gap-\(--spacing-component-gap-md\) {
-    gap: var(--spacing-component-gap-md);
+  .gap-\(--box-outline-gap\) {
+    gap: var(--box-outline-gap);
   }
 
-  .gap-\(--spacing-component-padding-xs\) {
-    gap: var(--spacing-component-padding-xs);
+  .gap-\(--box-solid-gap\) {
+    gap: var(--box-solid-gap);
   }
 
-  .gap-1 {
-    gap: calc(var(--spacing) * 1);
+  .gap-\(--button-size-large-gap\) {
+    gap: var(--button-size-large-gap);
   }
 
-  .gap-1\.5 {
-    gap: calc(var(--spacing) * 1.5);
+  .gap-\(--button-size-medium-gap\) {
+    gap: var(--button-size-medium-gap);
   }
 
-  .gap-2 {
-    gap: calc(var(--spacing) * 2);
+  .gap-\(--button-size-small-gap\) {
+    gap: var(--button-size-small-gap);
   }
 
-  .gap-3 {
-    gap: calc(var(--spacing) * 3);
+  .gap-\(--calendar-container-gap\) {
+    gap: var(--calendar-container-gap);
   }
 
-  .gap-4 {
-    gap: calc(var(--spacing) * 4);
+  .gap-\(--calendar-days-radius\) {
+    gap: var(--calendar-days-radius);
   }
 
-  .gap-6 {
-    gap: calc(var(--spacing) * 6);
+  .gap-\(--card-common-gap\) {
+    gap: var(--card-common-gap);
   }
 
-  .gap-8 {
-    gap: calc(var(--spacing) * 8);
+  .gap-\(--card-container-content-gap\) {
+    gap: var(--card-container-content-gap);
   }
 
-  .gap-component-gap-2xl {
-    gap: var(--spacing-9);
+  .gap-\(--card-container-footer-gap\) {
+    gap: var(--card-container-footer-gap);
   }
 
-  .gap-component-gap-lg {
-    gap: var(--spacing-5);
+  .gap-\(--card-container-header-gap\) {
+    gap: var(--card-container-header-gap);
   }
 
-  .gap-component-gap-md {
-    gap: var(--spacing-4);
+  .gap-\(--dialog-common-gap\) {
+    gap: var(--dialog-common-gap);
   }
 
-  .gap-component-gap-none {
-    gap: var(--spacing-0);
+  .gap-\(--dialog-container-footer-gap\) {
+    gap: var(--dialog-container-footer-gap);
   }
 
-  .gap-component-gap-sm {
-    gap: var(--spacing-3);
+  .gap-\(--dialog-container-header-gap\) {
+    gap: var(--dialog-container-header-gap);
   }
 
-  .gap-component-gap-xl {
-    gap: var(--spacing-7);
+  .gap-\(--drawer-container-footer-gap\) {
+    gap: var(--drawer-container-footer-gap);
   }
 
-  .gap-component-gap-xs {
-    gap: var(--spacing-2);
+  .gap-\(--drawer-container-header-gap\) {
+    gap: var(--drawer-container-header-gap);
   }
 
-  .gap-component-gap-xs\! {
-    gap: var(--spacing-2) !important;
+  .gap-\(--dropdown-container-gap\) {
+    gap: var(--dropdown-container-gap);
   }
 
-  .gap-component-padding-md {
-    gap: var(--spacing-4);
+  .gap-\(--dropdown-item-icon-gap\) {
+    gap: var(--dropdown-item-icon-gap);
   }
 
-  :where(.space-y-1 > :not(:last-child)) {
-    --tw-space-y-reverse: 0;
-    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
-    margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
+  .gap-\(--dropzone-common-gap\) {
+    gap: var(--dropzone-common-gap);
   }
 
-  :where(.space-y-2 > :not(:last-child)) {
-    --tw-space-y-reverse: 0;
-    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
-    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
+  .gap-\(--dropzone-container-content-gap\) {
+    gap: var(--dropzone-container-content-gap);
   }
 
-  :where(.space-y-4 > :not(:last-child)) {
-    --tw-space-y-reverse: 0;
-    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
-    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
+  .gap-\(--empty-common-gap\) {
+    gap: var(--empty-common-gap);
   }
 
-  .self-start {
-    align-self: flex-start;
+  .gap-\(--empty-container-content-gap\) {
+    gap: var(--empty-container-content-gap);
   }
 
-  .justify-self-end {
-    justify-self: flex-end;
+  .gap-\(--empty-container-footer-gap\) {
+    gap: var(--empty-container-footer-gap);
   }
 
-  .truncate {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
+  .gap-\(--input-common-gap\) {
+    gap: var(--input-common-gap);
   }
 
-  .overflow-hidden {
-    overflow: hidden;
+  .gap-\(--input-common-group-gap\) {
+    gap: var(--input-common-group-gap);
   }
 
-  .overflow-x-auto {
-    overflow-x: auto;
+  .gap-\(--label-gap\) {
+    gap: var(--label-gap);
   }
 
-  .overflow-x-hidden {
-    overflow-x: hidden;
+  .gap-\(--navigation-button-common-gap\) {
+    gap: var(--navigation-button-common-gap);
   }
 
-  .overflow-y-auto {
-    overflow-y: auto;
+  .gap-\(--navigation-button-container-gap\) {
+    gap: var(--navigation-button-container-gap);
   }
 
-  .rounded-\(--radius-base\) {
-    border-radius: var(--radius-base);
+  .gap-\(--navigation-item-common-gap\) {
+    gap: var(--navigation-item-common-gap);
   }
 
-  .rounded-\(--radius-large\) {
-    border-radius: var(--radius-large);
+  .gap-\(--navigation-item-container-gap\) {
+    gap: var(--navigation-item-container-gap);
   }
 
-  .rounded-\(--radius-max\) {
-    border-radius: var(--radius-max);
+  .gap-\(--navigation-item-content-common-gap\) {
+    gap: var(--navigation-item-content-common-gap);
   }
 
-  .rounded-\(--radius-medium\) {
-    border-radius: var(--radius-medium);
+  .gap-\(--pagination-common-gap\) {
+    gap: var(--pagination-common-gap);
   }
 
-  .rounded-\(--radius-small\) {
-    border-radius: var(--radius-small);
+  .gap-\(--select-default-common-gap\) {
+    gap: var(--select-default-common-gap);
   }
 
-  .rounded-\[2px\] {
-    border-radius: 2px;
+  .gap-\(--select-dropdown-gap\) {
+    gap: var(--select-dropdown-gap);
   }
 
-  .rounded-\[inherit\] {
-    border-radius: inherit;
+  .gap-\(--select-small-common-gap\) {
+    gap: var(--select-small-common-gap);
   }
 
-  .rounded-full {
-    border-radius: 3.40282e38px;
+  .gap-\(--spacing-component-gap-lg\) {
+    gap: var(--spacing-component-gap-lg);
   }
 
-  .rounded-md {
-    border-radius: var(--radius-md);
+  .gap-\(--spacing-component-gap-md\) {
+    gap: var(--spacing-component-gap-md);
   }
 
-  .rounded-none {
-    border-radius: 0;
+  .gap-\(--tabs-container-gap\) {
+    gap: var(--tabs-container-gap);
   }
 
-  .rounded-xs {
-    border-radius: var(--radius-xs);
+  .gap-\(--tabs-item-common-gap\) {
+    gap: var(--tabs-item-common-gap);
   }
 
-  .rounded-l-md {
-    border-top-left-radius: var(--radius-md);
-    border-bottom-left-radius: var(--radius-md);
+  .gap-\(--toast-common-gap\)\! {
+    gap: var(--toast-common-gap) !important;
   }
 
-  .rounded-r-md {
-    border-top-right-radius: var(--radius-md);
-    border-bottom-right-radius: var(--radius-md);
+  .gap-\(--toggle-common-gap\) {
+    gap: var(--toggle-common-gap);
   }
 
-  .border {
-    border-style: var(--tw-border-style);
-    border-width: 1px;
+  .gap-\(--toggle-common-gap-group\) {
+    gap: var(--toggle-common-gap-group);
   }
 
-  .border-\(length\:--border-width-regular\) {
-    border-style: var(--tw-border-style);
-    border-width: var(--border-width-regular);
+  .gap-1 {
+    gap: calc(var(--spacing) * 1);
   }
 
-  .border-\(length\:--border-width-thin\) {
-    border-style: var(--tw-border-style);
-    border-width: var(--border-width-thin);
+  .gap-2 {
+    gap: calc(var(--spacing) * 2);
   }
 
-  .border-0 {
-    border-style: var(--tw-border-style);
-    border-width: 0;
+  .gap-3 {
+    gap: calc(var(--spacing) * 3);
   }
 
-  .border-t {
-    border-top-style: var(--tw-border-style);
-    border-top-width: 1px;
+  .gap-4 {
+    gap: calc(var(--spacing) * 4);
   }
 
-  .border-t-\(length\:--border-width-thin\) {
-    border-top-style: var(--tw-border-style);
-    border-top-width: var(--border-width-thin);
+  .gap-6 {
+    gap: calc(var(--spacing) * 6);
   }
 
-  .border-b {
-    border-bottom-style: var(--tw-border-style);
-    border-bottom-width: 1px;
+  .gap-8 {
+    gap: calc(var(--spacing) * 8);
   }
 
-  .border-b-\(length\:--border-width-thick\) {
-    border-bottom-style: var(--tw-border-style);
-    border-bottom-width: var(--border-width-thick);
+  .gap-component-gap-lg {
+    gap: var(--spacing-5);
   }
 
-  .border-b-\(length\:--border-width-thin\) {
-    border-bottom-style: var(--tw-border-style);
-    border-bottom-width: var(--border-width-thin);
+  :where(.space-y-1 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
   }
 
-  .border-l {
-    border-left-style: var(--tw-border-style);
-    border-left-width: 1px;
+  :where(.space-y-2 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
   }
 
-  .border-dashed {
-    --tw-border-style: dashed;
-    border-style: dashed;
+  :where(.space-y-4 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
   }
 
-  .border-none {
-    --tw-border-style: none;
-    border-style: none;
+  .self-start {
+    align-self: flex-start;
   }
 
-  .border-solid {
-    --tw-border-style: solid;
-    border-style: solid;
+  .justify-self-end {
+    justify-self: flex-end;
   }
 
-  .border-\(--border-color-default\) {
-    border-color: var(--border-color-default);
+  .truncate {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
   }
 
-  .border-\(--border-color-primary-default\) {
-    border-color: var(--border-color-primary-default);
+  .overflow-hidden {
+    overflow: hidden;
   }
 
-  .border-\(--border-color-secondary-default\) {
-    border-color: var(--border-color-secondary-default);
+  .overflow-x-auto {
+    overflow-x: auto;
   }
 
-  .border-\(--border-color-secondary-hover\) {
-    border-color: var(--border-color-secondary-hover);
+  .overflow-x-hidden {
+    overflow-x: hidden;
   }
 
-  .border-\(--border-color-surface\) {
-    border-color: var(--border-color-surface);
+  .overflow-y-auto {
+    overflow-y: auto;
   }
 
-  .border-transparent {
-    border-color: #0000;
+  .rounded-\(--accordion-custom-radius\) {
+    border-radius: var(--accordion-custom-radius);
   }
 
-  .border-t-\(--border-color-default\) {
-    border-top-color: var(--border-color-default);
+  .rounded-\(--badge-common-radius\) {
+    border-radius: var(--badge-common-radius);
   }
 
-  .border-t-transparent {
-    border-top-color: #0000;
+  .rounded-\(--box-outline-radius\) {
+    border-radius: var(--box-outline-radius);
   }
 
-  .border-b-\(--border-color-default\) {
-    border-bottom-color: var(--border-color-default);
+  .rounded-\(--box-solid-radius\) {
+    border-radius: var(--box-solid-radius);
   }
 
-  .border-b-transparent {
-    border-bottom-color: #0000;
+  .rounded-\(--button-size-large-radius\) {
+    border-radius: var(--button-size-large-radius);
   }
 
-  .border-l-transparent {
-    border-left-color: #0000;
+  .rounded-\(--button-size-medium-radius\) {
+    border-radius: var(--button-size-medium-radius);
   }
 
-  .bg-\(--border-color-default\) {
-    background-color: var(--border-color-default);
+  .rounded-\(--button-size-small-radius\) {
+    border-radius: var(--button-size-small-radius);
   }
 
-  .bg-\(--border-color-divider\) {
-    background-color: var(--border-color-divider);
+  .rounded-\(--calendar-container-radius\) {
+    border-radius: var(--calendar-container-radius);
   }
 
-  .bg-\(--color-bg-overlay-default\) {
-    background-color: var(--color-bg-overlay-default);
+  .rounded-\(--calendar-date-picker-radius\) {
+    border-radius: var(--calendar-date-picker-radius);
   }
 
-  .bg-\(--color-bg-primary-default\) {
-    background-color: var(--color-bg-primary-default);
+  .rounded-\(--calendar-days-radius\) {
+    border-radius: var(--calendar-days-radius);
   }
 
-  .bg-\(--color-bg-secondary-default\) {
-    background-color: var(--color-bg-secondary-default);
+  .rounded-\(--card-common-radius\) {
+    border-radius: var(--card-common-radius);
   }
 
-  .bg-\(--color-bg-surface-accent\) {
-    background-color: var(--color-bg-surface-accent);
+  .rounded-\(--checkbox-common-radius\) {
+    border-radius: var(--checkbox-common-radius);
   }
 
-  .bg-\(--color-bg-surface-alt\) {
-    background-color: var(--color-bg-surface-alt);
+  .rounded-\(--code-block-outline-radius\) {
+    border-radius: var(--code-block-outline-radius);
   }
 
-  .bg-\(--color-bg-surface-default\) {
-    background-color: var(--color-bg-surface-default);
+  .rounded-\(--code-block-solid-radius\) {
+    border-radius: var(--code-block-solid-radius);
   }
 
-  .bg-\(--color-bg-surface-muted\) {
-    background-color: var(--color-bg-surface-muted);
+  .rounded-\(--dialog-common-radius\) {
+    border-radius: var(--dialog-common-radius);
   }
 
-  .bg-\(--color-data-progress-fill\) {
-    background-color: var(--color-data-progress-fill);
+  .rounded-\(--dropdown-container-radius\) {
+    border-radius: var(--dropdown-container-radius);
   }
 
-  .bg-\(--color-data-progress-track\) {
-    background-color: var(--color-data-progress-track);
+  .rounded-\(--dropdown-item-common-radius\) {
+    border-radius: var(--dropdown-item-common-radius);
   }
 
-  .bg-blue-500 {
-    background-color: var(--color-blue-500);
+  .rounded-\(--dropzone-common-radius\) {
+    border-radius: var(--dropzone-common-radius);
   }
 
-  .bg-transparent {
-    background-color: #0000;
+  .rounded-\(--dropzone-container-icon-radius\) {
+    border-radius: var(--dropzone-container-icon-radius);
   }
 
-  .bg-gradient-to-b {
-    --tw-gradient-position: to bottom in oklab;
-    background-image: linear-gradient(var(--tw-gradient-stops));
+  .rounded-\(--empty-common-radius\) {
+    border-radius: var(--empty-common-radius);
   }
 
-  .fill-\(--color-bg-surface-default\) {
-    fill: var(--color-bg-surface-default);
+  .rounded-\(--input-common-radius\) {
+    border-radius: var(--input-common-radius);
   }
 
-  .fill-current {
-    fill: currentColor;
+  .rounded-\(--navigation-button-common-radius\) {
+    border-radius: var(--navigation-button-common-radius);
   }
 
-  .p-0 {
-    padding: calc(var(--spacing) * 0);
+  .rounded-\(--navigation-item-common-radius\) {
+    border-radius: var(--navigation-item-common-radius);
   }
 
-  .p-2 {
-    padding: calc(var(--spacing) * 2);
+  .rounded-\(--navigation-item-container-radius\) {
+    border-radius: var(--navigation-item-container-radius);
   }
 
-  .p-3 {
-    padding: calc(var(--spacing) * 3);
+  .rounded-\(--navigation-item-content-common-radius\) {
+    border-radius: var(--navigation-item-content-common-radius);
   }
 
-  .p-4 {
-    padding: calc(var(--spacing) * 4);
+  .rounded-\(--pagination-common-radius\) {
+    border-radius: var(--pagination-common-radius);
   }
 
-  .p-6 {
-    padding: calc(var(--spacing) * 6);
+  .rounded-\(--popover-common-radius\) {
+    border-radius: var(--popover-common-radius);
   }
 
-  .p-10 {
-    padding: calc(var(--spacing) * 10);
+  .rounded-\(--progress-radius\) {
+    border-radius: var(--progress-radius);
   }
 
-  .p-component-padding-xs {
-    padding: var(--spacing-2);
+  .rounded-\(--radius-medium\) {
+    border-radius: var(--radius-medium);
   }
 
-  .p-px {
-    padding: 1px;
+  .rounded-\(--radius-small\) {
+    border-radius: var(--radius-small);
   }
 
-  .px-\(--cell-size\) {
-    padding-inline: var(--cell-size);
+  .rounded-\(--scrollbar-radius\) {
+    border-radius: var(--scrollbar-radius);
   }
 
-  .px-\(--spacing-component-padding-2xl\) {
-    padding-inline: var(--spacing-component-padding-2xl);
+  .rounded-\(--select-default-common-radius\) {
+    border-radius: var(--select-default-common-radius);
   }
 
-  .px-2 {
-    padding-inline: calc(var(--spacing) * 2);
+  .rounded-\(--select-dropdown-radius\) {
+    border-radius: var(--select-dropdown-radius);
   }
 
-  .px-3 {
-    padding-inline: calc(var(--spacing) * 3);
+  .rounded-\(--skeleton-radius\) {
+    border-radius: var(--skeleton-radius);
   }
 
-  .px-4 {
-    padding-inline: calc(var(--spacing) * 4);
+  .rounded-\(--skeleton-radius-full\) {
+    border-radius: var(--skeleton-radius-full);
   }
 
-  .px-component-padding-2xl {
-    padding-inline: var(--spacing-8);
+  .rounded-\(--switch-common-radius\) {
+    border-radius: var(--switch-common-radius);
   }
 
-  .px-component-padding-lg {
-    padding-inline: var(--spacing-5);
+  .rounded-\(--table-container-radius\) {
+    border-radius: var(--table-container-radius);
   }
 
-  .px-component-padding-lg\! {
-    padding-inline: var(--spacing-5) !important;
+  .rounded-\(--tabs-container-radius\) {
+    border-radius: var(--tabs-container-radius);
   }
 
-  .px-component-padding-md {
-    padding-inline: var(--spacing-4);
+  .rounded-\(--tabs-item-common-radius\) {
+    border-radius: var(--tabs-item-common-radius);
   }
 
-  .px-component-padding-sm {
-    padding-inline: var(--spacing-3);
+  .rounded-\(--toggle-common-radius\) {
+    border-radius: var(--toggle-common-radius);
   }
 
-  .px-component-padding-xl {
-    padding-inline: var(--spacing-6);
+  .rounded-\(--tooltip-radius\) {
+    border-radius: var(--tooltip-radius);
   }
 
-  .px-component-padding-xs {
-    padding-inline: var(--spacing-2);
+  .rounded-\[2px\] {
+    border-radius: 2px;
   }
 
-  .px-component-padding-xxs {
-    padding-inline: var(--spacing-1);
+  .rounded-\[inherit\] {
+    border-radius: inherit;
   }
 
-  .py-\(--spacing-component-padding-2xl\) {
-    padding-block: var(--spacing-component-padding-2xl);
+  .rounded-full {
+    border-radius: 3.40282e38px;
   }
 
-  .py-1\.5 {
-    padding-block: calc(var(--spacing) * 1.5);
+  .rounded-md {
+    border-radius: var(--radius-md);
   }
 
-  .py-2 {
-    padding-block: calc(var(--spacing) * 2);
+  .rounded-none {
+    border-radius: 0;
   }
 
-  .py-component-padding-2xl {
-    padding-block: var(--spacing-8);
+  .rounded-xs {
+    border-radius: var(--radius-xs);
   }
 
-  .py-component-padding-lg {
-    padding-block: var(--spacing-5);
+  .rounded-l-md {
+    border-top-left-radius: var(--radius-md);
+    border-bottom-left-radius: var(--radius-md);
+  }
+
+  .rounded-r-md {
+    border-top-right-radius: var(--radius-md);
+    border-bottom-right-radius: var(--radius-md);
+  }
+
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+
+  .border-\(length\:--accordion-custom-border-width\) {
+    border-style: var(--tw-border-style);
+    border-width: var(--accordion-custom-border-width);
+  }
+
+  .border-\(length\:--badge-outline-border-width\) {
+    border-style: var(--tw-border-style);
+    border-width: var(--badge-outline-border-width);
+  }
+
+  .border-\(length\:--border-width-regular\) {
+    border-style: var(--tw-border-style);
+    border-width: var(--border-width-regular);
+  }
+
+  .border-\(length\:--border-width-thin\) {
+    border-style: var(--tw-border-style);
+    border-width: var(--border-width-thin);
+  }
+
+  .border-\(length\:--box-outline-border-width\) {
+    border-style: var(--tw-border-style);
+    border-width: var(--box-outline-border-width);
+  }
+
+  .border-\(length\:--button-outline-border-width\) {
+    border-style: var(--tw-border-style);
+    border-width: var(--button-outline-border-width);
+  }
+
+  .border-\(length\:--calendar-container-border-width\) {
+    border-style: var(--tw-border-style);
+    border-width: var(--calendar-container-border-width);
+  }
+
+  .border-\(length\:--calendar-date-picker-border-width\) {
+    border-style: var(--tw-border-style);
+    border-width: var(--calendar-date-picker-border-width);
+  }
+
+  .border-\(length\:--card-common-border-width\) {
+    border-style: var(--tw-border-style);
+    border-width: var(--card-common-border-width);
+  }
+
+  .border-\(length\:--checkbox-outline-border-width\) {
+    border-style: var(--tw-border-style);
+    border-width: var(--checkbox-outline-border-width);
+  }
+
+  .border-\(length\:--code-block-outline-border-width\) {
+    border-style: var(--tw-border-style);
+    border-width: var(--code-block-outline-border-width);
+  }
+
+  .border-\(length\:--dialog-common-border-width\) {
+    border-style: var(--tw-border-style);
+    border-width: var(--dialog-common-border-width);
+  }
+
+  .border-\(length\:--dropdown-container-border-width\) {
+    border-style: var(--tw-border-style);
+    border-width: var(--dropdown-container-border-width);
+  }
+
+  .border-\(length\:--dropzone-common-border-width\) {
+    border-style: var(--tw-border-style);
+    border-width: var(--dropzone-common-border-width);
+  }
+
+  .border-\(length\:--navigation-item-container-border-width\) {
+    border-style: var(--tw-border-style);
+    border-width: var(--navigation-item-container-border-width);
+  }
+
+  .border-\(length\:--pagination-item-active-border-width\) {
+    border-style: var(--tw-border-style);
+    border-width: var(--pagination-item-active-border-width);
+  }
+
+  .border-\(length\:--popover-outline-border-width\) {
+    border-style: var(--tw-border-style);
+    border-width: var(--popover-outline-border-width);
+  }
+
+  .border-\(length\:--select-default-common-border-width\) {
+    border-style: var(--tw-border-style);
+    border-width: var(--select-default-common-border-width);
+  }
+
+  .border-\(length\:--table-container-border-width\) {
+    border-style: var(--tw-border-style);
+    border-width: var(--table-container-border-width);
+  }
+
+  .border-\(length\:--toggle-outline-border-width\) {
+    border-style: var(--tw-border-style);
+    border-width: var(--toggle-outline-border-width);
+  }
+
+  .border-\(length\:--tooltip-outline-border-width\) {
+    border-style: var(--tw-border-style);
+    border-width: var(--tooltip-outline-border-width);
+  }
+
+  .border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0;
+  }
+
+  .border-t {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+  }
+
+  .border-t-\(length\:--table-item-footer-cell-boder-width\) {
+    border-top-style: var(--tw-border-style);
+    border-top-width: var(--table-item-footer-cell-boder-width);
+  }
+
+  .border-b {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+
+  .border-b-\(length\:--accordion-default-border-width\) {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: var(--accordion-default-border-width);
+  }
+
+  .border-b-\(length\:--navigation-button-bottom-border-active-border-width\) {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: var(--navigation-button-bottom-border-active-border-width);
+  }
+
+  .border-b-\(length\:--table-item-cell-boder-width\) {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: var(--table-item-cell-boder-width);
+  }
+
+  .border-b-\(length\:--table-item-header-boder-width\) {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: var(--table-item-header-boder-width);
+  }
+
+  .border-l {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 1px;
+  }
+
+  .border-dashed {
+    --tw-border-style: dashed;
+    border-style: dashed;
+  }
+
+  .border-none {
+    --tw-border-style: none;
+    border-style: none;
+  }
+
+  .border-solid {
+    --tw-border-style: solid;
+    border-style: solid;
+  }
+
+  .border-\(--accordion-custom-closed-border\) {
+    border-color: var(--accordion-custom-closed-border);
+  }
+
+  .border-\(--badge-outline-border\) {
+    border-color: var(--badge-outline-border);
+  }
+
+  .border-\(--border-color-default\) {
+    border-color: var(--border-color-default);
+  }
+
+  .border-\(--box-outline-border\) {
+    border-color: var(--box-outline-border);
+  }
+
+  .border-\(--button-outline-default-border\) {
+    border-color: var(--button-outline-default-border);
+  }
+
+  .border-\(--calendar-container-border\) {
+    border-color: var(--calendar-container-border);
+  }
+
+  .border-\(--calendar-date-picker-border\) {
+    border-color: var(--calendar-date-picker-border);
+  }
+
+  .border-\(--card-common-border\) {
+    border-color: var(--card-common-border);
+  }
+
+  .border-\(--checkbox-outline-default-border\) {
+    border-color: var(--checkbox-outline-default-border);
+  }
+
+  .border-\(--code-block-outline-border\) {
+    border-color: var(--code-block-outline-border);
+  }
+
+  .border-\(--dialog-common-border\) {
+    border-color: var(--dialog-common-border);
+  }
+
+  .border-\(--drawer-common-border\) {
+    border-color: var(--drawer-common-border);
+  }
+
+  .border-\(--dropdown-container-border\) {
+    border-color: var(--dropdown-container-border);
+  }
+
+  .border-\(--dropzone-common-border\) {
+    border-color: var(--dropzone-common-border);
+  }
+
+  .border-\(--navigation-item-container-border\) {
+    border-color: var(--navigation-item-container-border);
+  }
+
+  .border-\(--pagination-item-active-border\) {
+    border-color: var(--pagination-item-active-border);
+  }
+
+  .border-\(--popover-outline-border\) {
+    border-color: var(--popover-outline-border);
+  }
+
+  .border-\(--select-default-default-border\) {
+    border-color: var(--select-default-default-border);
+  }
+
+  .border-\(--select-dropdown-border\) {
+    border-color: var(--select-dropdown-border);
+  }
+
+  .border-\(--table-container-border\) {
+    border-color: var(--table-container-border);
+  }
+
+  .border-\(--toggle-outline-default-border\) {
+    border-color: var(--toggle-outline-default-border);
+  }
+
+  .border-\(--toggle-outline-hover-border\) {
+    border-color: var(--toggle-outline-hover-border);
+  }
+
+  .border-\(--tooltip-outline-border\) {
+    border-color: var(--tooltip-outline-border);
+  }
+
+  .border-transparent {
+    border-color: #0000;
+  }
+
+  .border-t-\(--table-item-footer-cell-border\) {
+    border-top-color: var(--table-item-footer-cell-border);
+  }
+
+  .border-t-transparent {
+    border-top-color: #0000;
+  }
+
+  .border-b-\(--accordion-default-border\) {
+    border-bottom-color: var(--accordion-default-border);
+  }
+
+  .border-b-\(--table-item-cell-border\) {
+    border-bottom-color: var(--table-item-cell-border);
+  }
+
+  .border-b-\(--table-item-header-border\) {
+    border-bottom-color: var(--table-item-header-border);
+  }
+
+  .border-b-transparent {
+    border-bottom-color: #0000;
+  }
+
+  .border-l-transparent {
+    border-left-color: #0000;
+  }
+
+  .bg-\(--accordion-common-bg\) {
+    background-color: var(--accordion-common-bg);
+  }
+
+  .bg-\(--accordion-custom-closed-bg\) {
+    background-color: var(--accordion-custom-closed-bg);
+  }
+
+  .bg-\(--badge-outline-bg\) {
+    background-color: var(--badge-outline-bg);
+  }
+
+  .bg-\(--badge-solid-bg\) {
+    background-color: var(--badge-solid-bg);
+  }
+
+  .bg-\(--box-outline-bg\) {
+    background-color: var(--box-outline-bg);
+  }
+
+  .bg-\(--box-solid-bg\) {
+    background-color: var(--box-solid-bg);
+  }
+
+  .bg-\(--button-outline-default-bg\) {
+    background-color: var(--button-outline-default-bg);
+  }
+
+  .bg-\(--button-solid-primary-default-bg\) {
+    background-color: var(--button-solid-primary-default-bg);
+  }
+
+  .bg-\(--button-solid-secondary-default-bg\) {
+    background-color: var(--button-solid-secondary-default-bg);
+  }
+
+  .bg-\(--calendar-container-bg\) {
+    background-color: var(--calendar-container-bg);
+  }
+
+  .bg-\(--calendar-date-picker-bg\) {
+    background-color: var(--calendar-date-picker-bg);
+  }
+
+  .bg-\(--calendar-days-current-bg\) {
+    background-color: var(--calendar-days-current-bg);
+  }
+
+  .bg-\(--calendar-days-selected-bg\) {
+    background-color: var(--calendar-days-selected-bg);
+  }
+
+  .bg-\(--card-common-bg\) {
+    background-color: var(--card-common-bg);
+  }
+
+  .bg-\(--checkbox-outline-default-bg\) {
+    background-color: var(--checkbox-outline-default-bg);
+  }
+
+  .bg-\(--checkbox-solid-default-bg\) {
+    background-color: var(--checkbox-solid-default-bg);
+  }
+
+  .bg-\(--code-block-outline-bg\) {
+    background-color: var(--code-block-outline-bg);
+  }
+
+  .bg-\(--code-block-solid-bg\) {
+    background-color: var(--code-block-solid-bg);
+  }
+
+  .bg-\(--color-bg-overlay-default\) {
+    background-color: var(--color-bg-overlay-default);
+  }
+
+  .bg-\(--color-bg-surface-default\) {
+    background-color: var(--color-bg-surface-default);
+  }
+
+  .bg-\(--color-bg-surface-muted\) {
+    background-color: var(--color-bg-surface-muted);
+  }
+
+  .bg-\(--dialog-common-bg\) {
+    background-color: var(--dialog-common-bg);
+  }
+
+  .bg-\(--dialog-common-bg-overlay\) {
+    background-color: var(--dialog-common-bg-overlay);
+  }
+
+  .bg-\(--drawer-common-bg\) {
+    background-color: var(--drawer-common-bg);
+  }
+
+  .bg-\(--dropdown-container-bg\) {
+    background-color: var(--dropdown-container-bg);
+  }
+
+  .bg-\(--dropdown-item-common-bg\) {
+    background-color: var(--dropdown-item-common-bg);
+  }
+
+  .bg-\(--dropdown-item-common-border\) {
+    background-color: var(--dropdown-item-common-border);
+  }
+
+  .bg-\(--dropzone-common-bg\) {
+    background-color: var(--dropzone-common-bg);
+  }
+
+  .bg-\(--dropzone-container-icon-bg\) {
+    background-color: var(--dropzone-container-icon-bg);
+  }
+
+  .bg-\(--empty-container-content-icon-bg\) {
+    background-color: var(--empty-container-content-icon-bg);
+  }
+
+  .bg-\(--input-outline-default-bg\) {
+    background-color: var(--input-outline-default-bg);
+  }
+
+  .bg-\(--input-solid-default-bg\) {
+    background-color: var(--input-solid-default-bg);
+  }
+
+  .bg-\(--navigation-item-container-bg\) {
+    background-color: var(--navigation-item-container-bg);
+  }
+
+  .bg-\(--navigation-item-container-border\) {
+    background-color: var(--navigation-item-container-border);
+  }
+
+  .bg-\(--pagination-item-active-bg\) {
+    background-color: var(--pagination-item-active-bg);
+  }
+
+  .bg-\(--popover-outline-bg\) {
+    background-color: var(--popover-outline-bg);
+  }
+
+  .bg-\(--popover-solid-bg\) {
+    background-color: var(--popover-solid-bg);
+  }
+
+  .bg-\(--progress-gradient-track\) {
+    background-color: var(--progress-gradient-track);
+  }
+
+  .bg-\(--progress-solid-fill\) {
+    background-color: var(--progress-solid-fill);
+  }
+
+  .bg-\(--progress-solid-track\) {
+    background-color: var(--progress-solid-track);
+  }
+
+  .bg-\(--scrollbar-fill\) {
+    background-color: var(--scrollbar-fill);
+  }
+
+  .bg-\(--select-default-default-bg\) {
+    background-color: var(--select-default-default-bg);
+  }
+
+  .bg-\(--select-dropdown-bg\) {
+    background-color: var(--select-dropdown-bg);
+  }
+
+  .bg-\(--separator-border\) {
+    background-color: var(--separator-border);
+  }
+
+  .bg-\(--skeleton-fill\) {
+    background-color: var(--skeleton-fill);
+  }
+
+  .bg-\(--table-container-bg\) {
+    background-color: var(--table-container-bg);
+  }
+
+  .bg-\(--table-item-cell-bg\) {
+    background-color: var(--table-item-cell-bg);
+  }
+
+  .bg-\(--table-item-footer-cell-bg\) {
+    background-color: var(--table-item-footer-cell-bg);
+  }
+
+  .bg-\(--tabs-container-bg\) {
+    background-color: var(--tabs-container-bg);
+  }
+
+  .bg-\(--toggle-outline-default-bg\) {
+    background-color: var(--toggle-outline-default-bg);
+  }
+
+  .bg-\(--toggle-solid-default-bg\) {
+    background-color: var(--toggle-solid-default-bg);
+  }
+
+  .bg-\(--tooltip-outline-bg\) {
+    background-color: var(--tooltip-outline-bg);
+  }
+
+  .bg-\(--tooltip-solid-bg\) {
+    background-color: var(--tooltip-solid-bg);
+  }
+
+  .bg-blue-500 {
+    background-color: var(--color-blue-500);
+  }
+
+  .bg-transparent {
+    background-color: #0000;
+  }
+
+  .bg-gradient-to-b {
+    --tw-gradient-position: to bottom in oklab;
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+
+  .fill-\(--color-bg-surface-default\) {
+    fill: var(--color-bg-surface-default);
+  }
+
+  .fill-current {
+    fill: currentColor;
+  }
+
+  .p-\(--dropdown-container-padding-x\) {
+    padding: var(--dropdown-container-padding-x);
+  }
+
+  .p-0 {
+    padding: calc(var(--spacing) * 0);
+  }
+
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
+
+  .p-3 {
+    padding: calc(var(--spacing) * 3);
+  }
+
+  .p-4 {
+    padding: calc(var(--spacing) * 4);
+  }
+
+  .p-6 {
+    padding: calc(var(--spacing) * 6);
+  }
+
+  .p-10 {
+    padding: calc(var(--spacing) * 10);
+  }
+
+  .p-px {
+    padding: 1px;
+  }
+
+  .px-\(--accordion-custom-padding-x\) {
+    padding-inline: var(--accordion-custom-padding-x);
+  }
+
+  .px-\(--badge-common-padding-x\) {
+    padding-inline: var(--badge-common-padding-x);
+  }
+
+  .px-\(--box-outline-padding-x\) {
+    padding-inline: var(--box-outline-padding-x);
+  }
+
+  .px-\(--box-solid-padding-x\) {
+    padding-inline: var(--box-solid-padding-x);
+  }
+
+  .px-\(--button-size-large-padding-x\) {
+    padding-inline: var(--button-size-large-padding-x);
+  }
+
+  .px-\(--button-size-medium-padding-x\) {
+    padding-inline: var(--button-size-medium-padding-x);
+  }
+
+  .px-\(--button-size-small-padding-x\) {
+    padding-inline: var(--button-size-small-padding-x);
+  }
+
+  .px-\(--calendar-container-padding-x\) {
+    padding-inline: var(--calendar-container-padding-x);
+  }
+
+  .px-\(--calendar-date-picker-padding-x\) {
+    padding-inline: var(--calendar-date-picker-padding-x);
+  }
+
+  .px-\(--card-common-padding-x\) {
+    padding-inline: var(--card-common-padding-x);
+  }
+
+  .px-\(--cell-size\) {
+    padding-inline: var(--cell-size);
+  }
+
+  .px-\(--code-block-outline-padding-x\) {
+    padding-inline: var(--code-block-outline-padding-x);
+  }
+
+  .px-\(--code-block-solid-padding-x\) {
+    padding-inline: var(--code-block-solid-padding-x);
+  }
+
+  .px-\(--dialog-common-padding-x\) {
+    padding-inline: var(--dialog-common-padding-x);
+  }
+
+  .px-\(--drawer-common-padding-x\) {
+    padding-inline: var(--drawer-common-padding-x);
+  }
+
+  .px-\(--dropdown-container-padding-x\) {
+    padding-inline: var(--dropdown-container-padding-x);
+  }
+
+  .px-\(--dropdown-item-common-padding-x\) {
+    padding-inline: var(--dropdown-item-common-padding-x);
+  }
+
+  .px-\(--dropzone-common-padding-x\) {
+    padding-inline: var(--dropzone-common-padding-x);
+  }
+
+  .px-\(--empty-common-padding-x\) {
+    padding-inline: var(--empty-common-padding-x);
+  }
+
+  .px-\(--input-common-padding-x\) {
+    padding-inline: var(--input-common-padding-x);
+  }
+
+  .px-\(--navigation-button-common-padding-x\) {
+    padding-inline: var(--navigation-button-common-padding-x);
+  }
+
+  .px-\(--navigation-item-common-padding-x\) {
+    padding-inline: var(--navigation-item-common-padding-x);
+  }
+
+  .px-\(--navigation-item-container-padding-x\) {
+    padding-inline: var(--navigation-item-container-padding-x);
+  }
+
+  .px-\(--navigation-item-content-common-padding-x\) {
+    padding-inline: var(--navigation-item-content-common-padding-x);
+  }
+
+  .px-\(--popover-common-padding-x\) {
+    padding-inline: var(--popover-common-padding-x);
+  }
+
+  .px-\(--select-default-common-padding-x\) {
+    padding-inline: var(--select-default-common-padding-x);
+  }
+
+  .px-\(--select-dropdown-padding-x\) {
+    padding-inline: var(--select-dropdown-padding-x);
+  }
+
+  .px-\(--select-small-common-padding-x\) {
+    padding-inline: var(--select-small-common-padding-x);
+  }
+
+  .px-\(--switch-common-padding-x\) {
+    padding-inline: var(--switch-common-padding-x);
+  }
+
+  .px-\(--table-item-common-padding-x\) {
+    padding-inline: var(--table-item-common-padding-x);
+  }
+
+  .px-\(--tabs-container-padding-x\) {
+    padding-inline: var(--tabs-container-padding-x);
+  }
+
+  .px-\(--tabs-item-common-padding-x\) {
+    padding-inline: var(--tabs-item-common-padding-x);
+  }
+
+  .px-\(--toast-common-padding-x\)\! {
+    padding-inline: var(--toast-common-padding-x) !important;
+  }
+
+  .px-\(--toggle-common-padding-x\) {
+    padding-inline: var(--toggle-common-padding-x);
+  }
+
+  .px-\(--tooltip-padding-x\) {
+    padding-inline: var(--tooltip-padding-x);
+  }
+
+  .px-2 {
+    padding-inline: calc(var(--spacing) * 2);
+  }
+
+  .px-3 {
+    padding-inline: calc(var(--spacing) * 3);
+  }
+
+  .px-4 {
+    padding-inline: calc(var(--spacing) * 4);
+  }
+
+  .px-component-padding-lg {
+    padding-inline: var(--spacing-5);
+  }
+
+  .px-component-padding-md {
+    padding-inline: var(--spacing-4);
+  }
+
+  .py-\(--badge-common-padding-y\) {
+    padding-block: var(--badge-common-padding-y);
+  }
+
+  .py-\(--box-outline-padding-y\) {
+    padding-block: var(--box-outline-padding-y);
+  }
+
+  .py-\(--box-solid-padding-y\) {
+    padding-block: var(--box-solid-padding-y);
+  }
+
+  .py-\(--calendar-container-padding-y\) {
+    padding-block: var(--calendar-container-padding-y);
+  }
+
+  .py-\(--calendar-date-picker-padding-y\) {
+    padding-block: var(--calendar-date-picker-padding-y);
+  }
+
+  .py-\(--card-common-padding-y\) {
+    padding-block: var(--card-common-padding-y);
+  }
+
+  .py-\(--code-block-outline-padding-y\) {
+    padding-block: var(--code-block-outline-padding-y);
+  }
+
+  .py-\(--code-block-solid-padding-y\) {
+    padding-block: var(--code-block-solid-padding-y);
+  }
+
+  .py-\(--dialog-common-padding-y\) {
+    padding-block: var(--dialog-common-padding-y);
+  }
+
+  .py-\(--drawer-common-padding-y\) {
+    padding-block: var(--drawer-common-padding-y);
+  }
+
+  .py-\(--dropdown-container-padding-y\) {
+    padding-block: var(--dropdown-container-padding-y);
+  }
+
+  .py-\(--dropdown-item-common-padding-y\) {
+    padding-block: var(--dropdown-item-common-padding-y);
+  }
+
+  .py-\(--dropzone-common-padding-y\) {
+    padding-block: var(--dropzone-common-padding-y);
   }
 
-  .py-component-padding-lg\! {
-    padding-block: var(--spacing-5) !important;
+  .py-\(--empty-common-padding-y\) {
+    padding-block: var(--empty-common-padding-y);
   }
 
-  .py-component-padding-md {
-    padding-block: var(--spacing-4);
+  .py-\(--input-common-padding-y\) {
+    padding-block: var(--input-common-padding-y);
   }
 
-  .py-component-padding-sm {
-    padding-block: var(--spacing-3);
+  .py-\(--navigation-button-common-padding-y\) {
+    padding-block: var(--navigation-button-common-padding-y);
+  }
+
+  .py-\(--navigation-item-common-padding-y\) {
+    padding-block: var(--navigation-item-common-padding-y);
+  }
+
+  .py-\(--navigation-item-container-padding-y\) {
+    padding-block: var(--navigation-item-container-padding-y);
+  }
+
+  .py-\(--navigation-item-content-common-padding-y\) {
+    padding-block: var(--navigation-item-content-common-padding-y);
+  }
+
+  .py-\(--popover-common-padding-y\) {
+    padding-block: var(--popover-common-padding-y);
+  }
+
+  .py-\(--select-dropdown-padding-y\) {
+    padding-block: var(--select-dropdown-padding-y);
+  }
+
+  .py-\(--switch-common-padding-y\) {
+    padding-block: var(--switch-common-padding-y);
+  }
+
+  .py-\(--table-item-common-padding-y\) {
+    padding-block: var(--table-item-common-padding-y);
+  }
+
+  .py-\(--tabs-container-padding-y\) {
+    padding-block: var(--tabs-container-padding-y);
+  }
+
+  .py-\(--tabs-item-common-padding-y\) {
+    padding-block: var(--tabs-item-common-padding-y);
+  }
+
+  .py-\(--toast-common-padding-y\)\! {
+    padding-block: var(--toast-common-padding-y) !important;
+  }
+
+  .py-\(--toggle-common-padding-y\) {
+    padding-block: var(--toggle-common-padding-y);
+  }
+
+  .py-\(--tooltip-padding-y\) {
+    padding-block: var(--tooltip-padding-y);
+  }
+
+  .py-1\.5 {
+    padding-block: calc(var(--spacing) * 1.5);
+  }
+
+  .py-2 {
+    padding-block: calc(var(--spacing) * 2);
   }
 
-  .py-component-padding-xl {
-    padding-block: var(--spacing-6);
+  .py-component-padding-lg {
+    padding-block: var(--spacing-5);
   }
 
-  .py-component-padding-xs {
-    padding-block: var(--spacing-2);
+  .py-component-padding-md {
+    padding-block: var(--spacing-4);
   }
 
-  .py-component-padding-xxs {
-    padding-block: var(--spacing-1);
+  .py-component-padding-sm {
+    padding-block: var(--spacing-3);
   }
 
   .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
 
-  .pr-component-padding-md {
-    padding-right: var(--spacing-4);
+  .pr-\(--pagination-common-padding-md\) {
+    padding-right: var(--pagination-common-padding-md);
+  }
+
+  .pr-\(--pagination-common-padding-sm\) {
+    padding-right: var(--pagination-common-padding-sm);
+  }
+
+  .pr-2 {
+    padding-right: calc(var(--spacing) * 2);
   }
 
-  .pr-component-padding-sm {
-    padding-right: var(--spacing-3);
+  .pl-\(--pagination-common-padding-md\) {
+    padding-left: var(--pagination-common-padding-md);
   }
 
-  .pl-component-padding-md {
-    padding-left: var(--spacing-4);
+  .pl-\(--pagination-common-padding-sm\) {
+    padding-left: var(--pagination-common-padding-sm);
   }
 
-  .pl-component-padding-sm {
-    padding-left: var(--spacing-3);
+  .pl-8 {
+    padding-left: calc(var(--spacing) * 8);
   }
 
   .text-center {
@@ -1792,6 +3258,13 @@
     letter-spacing: var(--font-letter-spacing-body) !important;
   }
 
+  .typo-body-xl {
+    font-size: var(--font-size-body-xl);
+    line-height: var(--line-height-body-xl);
+    font-weight: var(--font-font-weight-body-normal);
+    letter-spacing: var(--font-letter-spacing-body);
+  }
+
   .typo-body-xs {
     font-size: var(--font-size-body-xs);
     line-height: var(--line-height-body-xs);
@@ -1813,6 +3286,38 @@
     letter-spacing: var(--font-letter-spacing-heading);
   }
 
+  .typo-heading-xs {
+    font-size: var(--font-size-heading-xs);
+    line-height: var(--line-height-heading-xs);
+    font-weight: var(--font-font-weight-heading-bold);
+    letter-spacing: var(--font-letter-spacing-heading);
+  }
+
+  .typo-heading-xxl {
+    font-size: var(--font-size-heading-xxl);
+    line-height: var(--line-height-heading-xxl);
+    font-weight: var(--font-font-weight-heading-bold);
+    letter-spacing: var(--font-letter-spacing-heading);
+    font-size: var(--font-size-heading-xxl);
+    line-height: var(--line-height-heading-xxl);
+    font-weight: var(--font-font-weight-heading-bold);
+    letter-spacing: var(--font-letter-spacing-heading);
+  }
+
+  .typo-metric-lg {
+    font-size: var(--font-size-metric-lg);
+    line-height: var(--line-height-metric-lg);
+    font-weight: var(--font-font-weight-metric-normal);
+    letter-spacing: var(--font-letter-spacing-metric);
+  }
+
+  .typo-metric-xs {
+    font-size: var(--font-size-metric-xs);
+    line-height: var(--line-height-metric-xs);
+    font-weight: var(--font-font-weight-metric-normal);
+    letter-spacing: var(--font-letter-spacing-metric);
+  }
+
   .typo-productive-caption {
     font-size: var(--font-size-productive-caption);
     line-height: var(--line-height-productive-caption);
@@ -1907,24 +3412,132 @@
     white-space: pre-wrap;
   }
 
-  .text-\(--color-state-error-default\) {
-    color: var(--color-state-error-default);
+  .text-\(--badge-gradient-font\) {
+    color: var(--badge-gradient-font);
   }
 
-  .text-\(--font-color-disabled\) {
-    color: var(--font-color-disabled);
+  .text-\(--badge-outline-font\) {
+    color: var(--badge-outline-font);
   }
 
-  .text-\(--font-color-inverse-default\) {
-    color: var(--font-color-inverse-default);
+  .text-\(--badge-solid-font\) {
+    color: var(--badge-solid-font);
   }
 
-  .text-\(--font-color-link-default\) {
-    color: var(--font-color-link-default);
+  .text-\(--button-ghost-default-font\) {
+    color: var(--button-ghost-default-font);
   }
 
-  .text-\(--font-color-onbrand-default\) {
-    color: var(--font-color-onbrand-default);
+  .text-\(--button-gradient-default-font\) {
+    color: var(--button-gradient-default-font);
+  }
+
+  .text-\(--button-link-default-font\) {
+    color: var(--button-link-default-font);
+  }
+
+  .text-\(--button-outline-default-font\) {
+    color: var(--button-outline-default-font);
+  }
+
+  .text-\(--button-solid-primary-default-font\) {
+    color: var(--button-solid-primary-default-font);
+  }
+
+  .text-\(--button-solid-secondary-default-font\) {
+    color: var(--button-solid-secondary-default-font);
+  }
+
+  .text-\(--calendar-container-icon\) {
+    color: var(--calendar-container-icon);
+  }
+
+  .text-\(--calendar-date-picker-font\) {
+    color: var(--calendar-date-picker-font);
+  }
+
+  .text-\(--calendar-days-current-font\) {
+    color: var(--calendar-days-current-font);
+  }
+
+  .text-\(--calendar-days-default-font\) {
+    color: var(--calendar-days-default-font);
+  }
+
+  .text-\(--calendar-days-disabled-font\) {
+    color: var(--calendar-days-disabled-font);
+  }
+
+  .text-\(--calendar-days-selected-font\) {
+    color: var(--calendar-days-selected-font);
+  }
+
+  .text-\(--card-container-header-description\) {
+    color: var(--card-container-header-description);
+  }
+
+  .text-\(--card-container-header-title\) {
+    color: var(--card-container-header-title);
+  }
+
+  .text-\(--code-block-outline-font\) {
+    color: var(--code-block-outline-font);
+  }
+
+  .text-\(--code-block-solid-font\) {
+    color: var(--code-block-solid-font);
+  }
+
+  .text-\(--dialog-container-header-description\) {
+    color: var(--dialog-container-header-description);
+  }
+
+  .text-\(--dialog-container-header-title\) {
+    color: var(--dialog-container-header-title);
+  }
+
+  .text-\(--drawer-container-header-description\) {
+    color: var(--drawer-container-header-description);
+  }
+
+  .text-\(--drawer-container-header-title\) {
+    color: var(--drawer-container-header-title);
+  }
+
+  .text-\(--dropdown-item-header-font\) {
+    color: var(--dropdown-item-header-font);
+  }
+
+  .text-\(--dropdown-item-icon-default-icon\) {
+    color: var(--dropdown-item-icon-default-icon);
+  }
+
+  .text-\(--dropdown-item-simple-default-font\) {
+    color: var(--dropdown-item-simple-default-font);
+  }
+
+  .text-\(--dropzone-container-content-description\) {
+    color: var(--dropzone-container-content-description);
+  }
+
+  .text-\(--dropzone-container-content-title\) {
+    color: var(--dropzone-container-content-title);
+  }
+
+  .text-\(--dropzone-container-icon-color\) {
+    color: var(--dropzone-container-icon-color);
+  }
+
+  .text-\(--empty-container-content-description\) {
+    color: var(--empty-container-content-description);
+  }
+
+  .text-\(--empty-container-content-icon\) {
+    color: var(--empty-container-content-icon);
+  }
+
+  .text-\(--empty-container-content-title\) {
+    color: var(--empty-container-content-title);
   }
 
   .text-\(--font-color-primary-default\) {
@@ -1939,20 +3552,88 @@
     color: var(--font-color-secondary-default);
   }
 
-  .text-\(--font-color-secondary-default\)\! {
-    color: var(--font-color-secondary-default) !important;
+  .text-\(--input-outline-fail-icon\) {
+    color: var(--input-outline-fail-icon);
   }
 
-  .text-\(--icon-color-onbrand-default\) {
-    color: var(--icon-color-onbrand-default);
+  .text-\(--label-font-default\) {
+    color: var(--label-font-default);
   }
 
-  .text-\(--icon-color-primary-default\) {
-    color: var(--icon-color-primary-default);
+  .text-\(--navigation-button-bottom-border-default-font\) {
+    color: var(--navigation-button-bottom-border-default-font);
   }
 
-  .text-\(--icon-color-primary-muted\) {
-    color: var(--icon-color-primary-muted);
+  .text-\(--navigation-button-gradient-default-font\) {
+    color: var(--navigation-button-gradient-default-font);
+  }
+
+  .text-\(--navigation-button-solid-ghost-default-font\) {
+    color: var(--navigation-button-solid-ghost-default-font);
+  }
+
+  .text-\(--navigation-item-content-default-title\) {
+    color: var(--navigation-item-content-default-title);
+  }
+
+  .text-\(--navigation-item-default-font\) {
+    color: var(--navigation-item-default-font);
+  }
+
+  .text-\(--pagination-item-active-font\) {
+    color: var(--pagination-item-active-font);
+  }
+
+  .text-\(--pagination-item-ellipsis-font\) {
+    color: var(--pagination-item-ellipsis-font);
+  }
+
+  .text-\(--pagination-link-default-font\) {
+    color: var(--pagination-link-default-font);
+  }
+
+  .text-\(--select-default-default-font\) {
+    color: var(--select-default-default-font);
+  }
+
+  .text-\(--spinner-fill-base\) {
+    color: var(--spinner-fill-base);
+  }
+
+  .text-\(--spinner-fill-sub\) {
+    color: var(--spinner-fill-sub);
+  }
+
+  .text-\(--table-item-cell-font\) {
+    color: var(--table-item-cell-font);
+  }
+
+  .text-\(--table-item-cell-value-font-brand\) {
+    color: var(--table-item-cell-value-font-brand);
+  }
+
+  .text-\(--table-item-footer-cell-font\) {
+    color: var(--table-item-footer-cell-font);
+  }
+
+  .text-\(--table-item-header-font\) {
+    color: var(--table-item-header-font);
+  }
+
+  .text-\(--toast-info-description\)\! {
+    color: var(--toast-info-description) !important;
+  }
+
+  .text-\(--toggle-outline-default-font\) {
+    color: var(--toggle-outline-default-font);
+  }
+
+  .text-\(--toggle-solid-default-font\) {
+    color: var(--toggle-solid-default-font);
+  }
+
+  .text-\(--tooltip-font\) {
+    color: var(--tooltip-font);
   }
 
   .text-current {
@@ -1998,8 +3679,8 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
   }
 
-  .ring-\(length\:--border-width-thin\) {
-    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(var(--border-width-thin)  + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+  .ring-\(length\:--input-common-border-width\) {
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(var(--input-common-border-width)  + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
@@ -2024,8 +3705,8 @@
     box-shadow: 2px 2px var(--effect-blur-surface-md) 0 var(--effect-shadow-level-2);
   }
 
-  .ring-\(--border-color-default\) {
-    --tw-ring-color: var(--border-color-default);
+  .ring-\(--input-outline-default-border\) {
+    --tw-ring-color: var(--input-outline-default-border);
   }
 
   .ring-transparent {
@@ -2139,16 +3820,24 @@
     background: linear-gradient(180deg, var(--color-gradient-primary-start) 0%, var(--color-gradient-primary-end) 100%);
   }
 
+  .gradient-secondary-horizontal {
+    background: linear-gradient(90deg, var(--color-gradient-secondary-start) 0%, var(--color-gradient-secondary-end) 100%);
+  }
+
+  .gradient-secondary-vertical {
+    background: linear-gradient(180deg, var(--color-gradient-secondary-start) 0%, var(--color-gradient-secondary-end) 100%);
+  }
+
   .group-data-\[disabled\=true\]\:pointer-events-none:is(:where(.group)[data-disabled="true"] *) {
     pointer-events: none;
   }
 
-  .group-data-\[disabled\=true\]\:text-\(--font-color-disabled\):is(:where(.group)[data-disabled="true"] *) {
-    color: var(--font-color-disabled);
+  .group-data-\[disabled\=true\]\:text-\(--label-font-disabled\):is(:where(.group)[data-disabled="true"] *) {
+    color: var(--label-font-disabled);
   }
 
-  .group-data-\[disabled\=true\]\/input-group\:opacity-\(--opacity-state-disabled\):is(:where(.group\/input-group)[data-disabled="true"] *) {
-    opacity: var(--opacity-state-disabled);
+  .group-data-\[disabled\=true\]\/input-group\:opacity-\(--input-common-opacity\):is(:where(.group\/input-group)[data-disabled="true"] *) {
+    opacity: var(--input-common-opacity);
   }
 
   .group-data-\[state\=checked\]\:hidden:is(:where(.group)[data-state="checked"] *) {
@@ -2163,29 +3852,29 @@
     border-radius: 0;
   }
 
-  .group-data-\[variant\=bottom-border\]\:border-b-\(length\:--border-width-thick\):is(:where(.group)[data-variant="bottom-border"] *) {
+  .group-data-\[variant\=bottom-border\]\:border-b-\(length\:--tabs-item-bottom-border-on-border-width\):is(:where(.group)[data-variant="bottom-border"] *) {
     border-bottom-style: var(--tw-border-style);
-    border-bottom-width: var(--border-width-thick);
+    border-bottom-width: var(--tabs-item-bottom-border-on-border-width);
   }
 
   .group-data-\[variant\=bottom-border\]\:border-b-transparent:is(:where(.group)[data-variant="bottom-border"] *) {
     border-bottom-color: #0000;
   }
 
-  .group-data-\[variant\=bottom-border\]\:text-\(--font-color-primary-muted\):is(:where(.group)[data-variant="bottom-border"] *) {
-    color: var(--font-color-primary-muted);
+  .group-data-\[variant\=bottom-border\]\:text-\(--tabs-item-bottom-border-off-font\):is(:where(.group)[data-variant="bottom-border"] *) {
+    color: var(--tabs-item-bottom-border-off-font);
   }
 
-  .group-data-\[variant\=custom\]\/accordion\:gap-component-gap-sm:is(:where(.group\/accordion)[data-variant="custom"] *) {
-    gap: var(--spacing-3);
+  .group-data-\[variant\=custom\]\/accordion\:gap-\(--accordion-custom-gap\):is(:where(.group\/accordion)[data-variant="custom"] *) {
+    gap: var(--accordion-custom-gap);
   }
 
-  .group-data-\[variant\=custom\]\/accordion\:py-component-padding-lg:is(:where(.group\/accordion)[data-variant="custom"] *) {
-    padding-block: var(--spacing-5);
+  .group-data-\[variant\=custom\]\/accordion\:py-\(--accordion-custom-padding-y\):is(:where(.group\/accordion)[data-variant="custom"] *) {
+    padding-block: var(--accordion-custom-padding-y);
   }
 
-  .group-data-\[variant\=custom\]\/accordion\:pt-component-gap-xs:is(:where(.group\/accordion)[data-variant="custom"] *) {
-    padding-top: var(--spacing-2);
+  .group-data-\[variant\=custom\]\/accordion\:pt-\(--accordion-custom-open-gap\):is(:where(.group\/accordion)[data-variant="custom"] *) {
+    padding-top: var(--accordion-custom-open-gap);
   }
 
   .group-data-\[variant\=custom\]\/accordion\:typo-body-sm:is(:where(.group\/accordion)[data-variant="custom"] *) {
@@ -2195,24 +3884,24 @@
     letter-spacing: var(--font-letter-spacing-body);
   }
 
-  .group-data-\[variant\=custom\]\/accordion\:text-\(--font-color-primary-muted\):is(:where(.group\/accordion)[data-variant="custom"] *) {
-    color: var(--font-color-primary-muted);
+  .group-data-\[variant\=custom\]\/accordion\:text-\(--accordion-custom-open-description\):is(:where(.group\/accordion)[data-variant="custom"] *) {
+    color: var(--accordion-custom-open-description);
   }
 
-  .group-data-\[variant\=default\]\/accordion\:gap-component-gap-sm:is(:where(.group\/accordion)[data-variant="default"] *) {
-    gap: var(--spacing-3);
+  .group-data-\[variant\=default\]\/accordion\:gap-\(--accordion-default-gap\):is(:where(.group\/accordion)[data-variant="default"] *) {
+    gap: var(--accordion-default-gap);
   }
 
-  .group-data-\[variant\=default\]\/accordion\:py-component-padding-lg:is(:where(.group\/accordion)[data-variant="default"] *) {
-    padding-block: var(--spacing-5);
+  .group-data-\[variant\=default\]\/accordion\:py-\(--accordion-default-padding-y\):is(:where(.group\/accordion)[data-variant="default"] *) {
+    padding-block: var(--accordion-default-padding-y);
   }
 
-  .group-data-\[variant\=default\]\/accordion\:pt-component-gap-xs:is(:where(.group\/accordion)[data-variant="default"] *) {
-    padding-top: var(--spacing-2);
+  .group-data-\[variant\=default\]\/accordion\:pt-\(--accordion-default-open-gap\):is(:where(.group\/accordion)[data-variant="default"] *) {
+    padding-top: var(--accordion-default-open-gap);
   }
 
-  .group-data-\[variant\=default\]\/accordion\:text-\(--font-color-primary-muted\):is(:where(.group\/accordion)[data-variant="default"] *) {
-    color: var(--font-color-primary-muted);
+  .group-data-\[variant\=default\]\/accordion\:text-\(--accordion-default-open-description\):is(:where(.group\/accordion)[data-variant="default"] *) {
+    color: var(--accordion-default-open-description);
   }
 
   .group-data-\[variant\=gradient\]\:bg-\(--color-bg-surface-muted\):is(:where(.group)[data-variant="gradient"] *) {
@@ -2227,41 +3916,41 @@
     margin-bottom: calc(var(--spacing) * -2);
   }
 
-  .group-data-\[variant\=outline\]\/input-group\:text-\(--font-color-primary-default\):is(:where(.group\/input-group)[data-variant="outline"] *) {
-    color: var(--font-color-primary-default);
+  .group-data-\[variant\=outline\]\/input-group\:text-\(--input-outline-default-font\):is(:where(.group\/input-group)[data-variant="outline"] *) {
+    color: var(--input-outline-default-font);
   }
 
-  .group-data-\[variant\=solid\]\:bg-\(--color-bg-surface-muted\):is(:where(.group)[data-variant="solid"] *) {
-    background-color: var(--color-bg-surface-muted);
+  .group-data-\[variant\=solid\]\:bg-\(--tabs-item-solid-off-bg\):is(:where(.group)[data-variant="solid"] *) {
+    background-color: var(--tabs-item-solid-off-bg);
   }
 
-  .group-data-\[variant\=solid\]\:text-\(--font-color-primary-muted\):is(:where(.group)[data-variant="solid"] *) {
-    color: var(--font-color-primary-muted);
+  .group-data-\[variant\=solid\]\:text-\(--tabs-item-solid-off-font\):is(:where(.group)[data-variant="solid"] *) {
+    color: var(--tabs-item-solid-off-font);
   }
 
-  .group-data-\[variant\=solid\]\/input-group\:text-\(--font-color-primary-default\):is(:where(.group\/input-group)[data-variant="solid"] *) {
-    color: var(--font-color-primary-default);
+  .group-data-\[variant\=solid\]\/input-group\:text-\(--input-solid-default-font\):is(:where(.group\/input-group)[data-variant="solid"] *) {
+    color: var(--input-solid-default-font);
   }
 
-  .group-data-\[variant\=solid-ghost\]\:text-\(--font-color-primary-muted\):is(:where(.group)[data-variant="solid-ghost"] *) {
-    color: var(--font-color-primary-muted);
+  .group-data-\[variant\=solid-ghost\]\:text-\(--tabs-item-solid-ghost-off-font\):is(:where(.group)[data-variant="solid-ghost"] *) {
+    color: var(--tabs-item-solid-ghost-off-font);
   }
 
-  .group-data-\[variant\=solid-line\]\:border-\(length\:--border-width-thin\):is(:where(.group)[data-variant="solid-line"] *) {
+  .group-data-\[variant\=solid-line\]\:border-\(length\:--tabs-item-solid-line-off-border-width\):is(:where(.group)[data-variant="solid-line"] *) {
     border-style: var(--tw-border-style);
-    border-width: var(--border-width-thin);
+    border-width: var(--tabs-item-solid-line-off-border-width);
   }
 
-  .group-data-\[variant\=solid-line\]\:border-\(--border-color-primary-default\):is(:where(.group)[data-variant="solid-line"] *) {
-    border-color: var(--border-color-primary-default);
+  .group-data-\[variant\=solid-line\]\:border-\(--tabs-item-solid-line-off-border\):is(:where(.group)[data-variant="solid-line"] *) {
+    border-color: var(--tabs-item-solid-line-off-border);
   }
 
-  .group-data-\[variant\=solid-line\]\:bg-\(--color-bg-surface-default\):is(:where(.group)[data-variant="solid-line"] *) {
-    background-color: var(--color-bg-surface-default);
+  .group-data-\[variant\=solid-line\]\:bg-\(--tabs-item-solid-line-off-bg\):is(:where(.group)[data-variant="solid-line"] *) {
+    background-color: var(--tabs-item-solid-line-off-bg);
   }
 
-  .group-data-\[variant\=solid-line\]\:text-\(--font-color-onbrand-hover\):is(:where(.group)[data-variant="solid-line"] *) {
-    color: var(--font-color-onbrand-hover);
+  .group-data-\[variant\=solid-line\]\:text-\(--tabs-item-solid-line-off-font\):is(:where(.group)[data-variant="solid-line"] *) {
+    color: var(--tabs-item-solid-line-off-font);
   }
 
   .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:block:is(:where(.group\/drawer-content)[data-vaul-drawer-direction="bottom"] *) {
@@ -2293,20 +3982,24 @@
     cursor: not-allowed;
   }
 
-  .peer-disabled\:text-\(--font-color-disabled\):is(:where(.peer):disabled ~ *) {
-    color: var(--font-color-disabled);
+  .peer-disabled\:text-\(--label-font-disabled\):is(:where(.peer):disabled ~ *) {
+    color: var(--label-font-disabled);
   }
 
   .peer-data-\[disabled\=true\]\:pointer-events-none:is(:where(.peer)[data-disabled="true"] ~ *) {
     pointer-events: none;
   }
 
-  .peer-data-\[disabled\=true\]\:text-\(--font-color-disabled\):is(:where(.peer)[data-disabled="true"] ~ *) {
-    color: var(--font-color-disabled);
+  .peer-data-\[disabled\=true\]\:text-\(--label-font-disabled\):is(:where(.peer)[data-disabled="true"] ~ *) {
+    color: var(--label-font-disabled);
   }
 
-  .group-data-\[variant\=outline\]\/input-group\:placeholder\:text-\(--font-color-primary-muted\):is(:where(.group\/input-group)[data-variant="outline"] *)::placeholder, .group-data-\[variant\=solid\]\/input-group\:placeholder\:text-\(--font-color-primary-muted\):is(:where(.group\/input-group)[data-variant="solid"] *)::placeholder {
-    color: var(--font-color-primary-muted);
+  .group-data-\[variant\=outline\]\/input-group\:placeholder\:text-\(--input-outline-default-font\):is(:where(.group\/input-group)[data-variant="outline"] *)::placeholder {
+    color: var(--input-outline-default-font);
+  }
+
+  .group-data-\[variant\=solid\]\/input-group\:placeholder\:text-\(--input-solid-default-font\):is(:where(.group\/input-group)[data-variant="solid"] *)::placeholder {
+    color: var(--input-solid-default-font);
   }
 
   .last\:border-b-0:last-child {
@@ -2314,8 +4007,8 @@
     border-bottom-width: 0;
   }
 
-  .last\:bg-\(--color-bg-surface-alt\):last-child {
-    background-color: var(--color-bg-surface-alt);
+  .last\:bg-\(--table-item-cell-last-bg\):last-child {
+    background-color: var(--table-item-cell-last-bg);
   }
 
   .empty\:hidden:empty {
@@ -2323,53 +4016,121 @@
   }
 
   @media (hover: hover) {
-    .hover\:border-\(length\:--border-width-thin\):hover {
+    .hover\:border-\(length\:--pagination-item-active-hover-border-width\):hover {
       border-style: var(--tw-border-style);
-      border-width: var(--border-width-thin);
+      border-width: var(--pagination-item-active-hover-border-width);
     }
 
-    .hover\:border-\(--border-color-default\):hover {
-      border-color: var(--border-color-default);
+    .hover\:border-\(--accordion-custom-hover-border\):hover {
+      border-color: var(--accordion-custom-hover-border);
     }
 
-    .hover\:border-\(--border-color-primary-default\):hover {
-      border-color: var(--border-color-primary-default);
+    .hover\:border-\(--button-outline-hover-border\):hover {
+      border-color: var(--button-outline-hover-border);
     }
 
-    .hover\:border-\(--border-color-primary-hover\):hover {
-      border-color: var(--border-color-primary-hover);
+    .hover\:border-\(--card-common-border-hover\):hover {
+      border-color: var(--card-common-border-hover);
     }
 
-    .hover\:bg-\(--color-bg-overlay-default\):hover {
-      background-color: var(--color-bg-overlay-default);
+    .hover\:border-\(--checkbox-outline-hover-border\):hover {
+      border-color: var(--checkbox-outline-hover-border);
     }
 
-    .hover\:bg-\(--color-bg-primary-default\):hover {
-      background-color: var(--color-bg-primary-default);
+    .hover\:border-\(--pagination-item-active-hover-border\):hover {
+      border-color: var(--pagination-item-active-hover-border);
     }
 
-    .hover\:bg-\(--color-bg-primary-hover\):hover {
-      background-color: var(--color-bg-primary-hover);
+    .hover\:border-\(--select-default-hover-border\):hover {
+      border-color: var(--select-default-hover-border);
     }
 
-    .hover\:bg-\(--color-bg-primary-muted\):hover {
-      background-color: var(--color-bg-primary-muted);
+    .hover\:bg-\(--accordion-custom-hover-bg\):hover {
+      background-color: var(--accordion-custom-hover-bg);
     }
 
-    .hover\:bg-\(--color-bg-secondary-hover\):hover {
-      background-color: var(--color-bg-secondary-hover);
+    .hover\:bg-\(--button-ghost-hover-bg\):hover {
+      background-color: var(--button-ghost-hover-bg);
     }
 
-    .hover\:bg-\(--color-bg-surface-accent\):hover {
-      background-color: var(--color-bg-surface-accent);
+    .hover\:bg-\(--button-link-hover-bg\):hover {
+      background-color: var(--button-link-hover-bg);
+    }
+
+    .hover\:bg-\(--button-outline-hover-bg\):hover {
+      background-color: var(--button-outline-hover-bg);
+    }
+
+    .hover\:bg-\(--button-solid-primary-hover-bg\):hover {
+      background-color: var(--button-solid-primary-hover-bg);
+    }
+
+    .hover\:bg-\(--button-solid-secondary-hover-bg\):hover {
+      background-color: var(--button-solid-secondary-hover-bg);
+    }
+
+    .hover\:bg-\(--calendar-days-hover-bg\):hover {
+      background-color: var(--calendar-days-hover-bg);
+    }
+
+    .hover\:bg-\(--card-common-bg-hover\):hover {
+      background-color: var(--card-common-bg-hover);
+    }
+
+    .hover\:bg-\(--checkbox-outline-hover-bg\):hover {
+      background-color: var(--checkbox-outline-hover-bg);
+    }
+
+    .hover\:bg-\(--checkbox-solid-hover-bg\):hover {
+      background-color: var(--checkbox-solid-hover-bg);
     }
 
-    .hover\:bg-\(--color-bg-surface-default\):hover {
-      background-color: var(--color-bg-surface-default);
+    .hover\:bg-\(--dropdown-item-simple-hover-bg\):hover {
+      background-color: var(--dropdown-item-simple-hover-bg);
     }
 
-    .hover\:bg-\(--color-bg-surface-muted\):hover {
-      background-color: var(--color-bg-surface-muted);
+    .hover\:bg-\(--dropzone-common-bg\):hover {
+      background-color: var(--dropzone-common-bg);
+    }
+
+    .hover\:bg-\(--input-outline-hover-bg\):hover {
+      background-color: var(--input-outline-hover-bg);
+    }
+
+    .hover\:bg-\(--input-solid-hover-bg\):hover {
+      background-color: var(--input-solid-hover-bg);
+    }
+
+    .hover\:bg-\(--navigation-button-solid-ghost-active-bg\):hover {
+      background-color: var(--navigation-button-solid-ghost-active-bg);
+    }
+
+    .hover\:bg-\(--navigation-item-content-hover-bg\):hover {
+      background-color: var(--navigation-item-content-hover-bg);
+    }
+
+    .hover\:bg-\(--navigation-item-hover-bg\):hover {
+      background-color: var(--navigation-item-hover-bg);
+    }
+
+    .hover\:bg-\(--pagination-item-active-hover-bg\):hover {
+      background-color: var(--pagination-item-active-hover-bg);
+    }
+
+    .hover\:bg-\(--pagination-link-hover-bg\):hover {
+      background-color: var(--pagination-link-hover-bg);
+    }
+
+    .hover\:bg-\(--select-default-hover-bg\):hover {
+      background-color: var(--select-default-hover-bg);
+    }
+
+    .hover\:bg-\(--toggle-outline-hover-bg\):hover {
+      background-color: var(--toggle-outline-hover-bg);
+    }
+
+    .hover\:bg-\(--toggle-solid-hover-bg\):hover {
+      background-color: var(--toggle-solid-hover-bg);
     }
 
     .hover\:bg-blue-600:hover {
@@ -2380,22 +4141,78 @@
       background-color: #0000;
     }
 
-    .hover\:text-\(--font-color-link-hover\):hover {
-      color: var(--font-color-link-hover);
+    .hover\:text-\(--button-ghost-hover-font\):hover {
+      color: var(--button-ghost-hover-font);
+    }
+
+    .hover\:text-\(--button-gradient-hover-font\):hover {
+      color: var(--button-gradient-hover-font);
+    }
+
+    .hover\:text-\(--button-link-hover-font\):hover {
+      color: var(--button-link-hover-font);
     }
 
-    .hover\:text-\(--font-color-onbrand-default\):hover {
-      color: var(--font-color-onbrand-default);
+    .hover\:text-\(--button-outline-hover-font\):hover {
+      color: var(--button-outline-hover-font);
     }
 
-    .hover\:text-\(--font-color-onbrand-hover\):hover {
-      color: var(--font-color-onbrand-hover);
+    .hover\:text-\(--button-solid-primary-hover-font\):hover {
+      color: var(--button-solid-primary-hover-font);
+    }
+
+    .hover\:text-\(--button-solid-secondary-hover-font\):hover {
+      color: var(--button-solid-secondary-hover-font);
+    }
+
+    .hover\:text-\(--calendar-days-hover-font\):hover {
+      color: var(--calendar-days-hover-font);
+    }
+
+    .hover\:text-\(--dropdown-item-simple-hover-font\):hover {
+      color: var(--dropdown-item-simple-hover-font);
     }
 
     .hover\:text-\(--font-color-primary-default\):hover {
       color: var(--font-color-primary-default);
     }
 
+    .hover\:text-\(--navigation-button-bottom-border-hover-font\):hover {
+      color: var(--navigation-button-bottom-border-hover-font);
+    }
+
+    .hover\:text-\(--navigation-button-solid-ghost-active-font\):hover {
+      color: var(--navigation-button-solid-ghost-active-font);
+    }
+
+    .hover\:text-\(--navigation-item-content-hover-title\):hover {
+      color: var(--navigation-item-content-hover-title);
+    }
+
+    .hover\:text-\(--navigation-item-hover-font\):hover {
+      color: var(--navigation-item-hover-font);
+    }
+
+    .hover\:text-\(--pagination-item-active-hover-font\):hover {
+      color: var(--pagination-item-active-hover-font);
+    }
+
+    .hover\:text-\(--pagination-link-hover-font\):hover {
+      color: var(--pagination-link-hover-font);
+    }
+
+    .hover\:text-\(--select-default-hover-font\):hover {
+      color: var(--select-default-hover-font);
+    }
+
+    .hover\:text-\(--toggle-outline-hover-font\):hover {
+      color: var(--toggle-outline-hover-font);
+    }
+
+    .hover\:text-\(--toggle-solid-hover-font\):hover {
+      color: var(--toggle-solid-hover-font);
+    }
+
     .hover\:underline:hover {
       text-decoration-line: underline;
     }
@@ -2404,8 +4221,12 @@
       opacity: 1;
     }
 
-    .hover\:ring-\(--border-color-primary-default\):hover {
-      --tw-ring-color: var(--border-color-primary-default);
+    .hover\:ring-\(--input-outline-hover-border\):hover {
+      --tw-ring-color: var(--input-outline-hover-border);
+    }
+
+    .hover\:ring-transparent:hover {
+      --tw-ring-color: transparent;
     }
 
     .hover\:gradient-primary-hover-vertical:hover {
@@ -2416,8 +4237,16 @@
       background: linear-gradient(180deg, var(--color-gradient-primary-start) 0%, var(--color-gradient-primary-end) 100%);
     }
 
-    .group-data-\[variant\=bottom-border\]\:hover\:text-\(--font-color-primary-default\):is(:where(.group)[data-variant="bottom-border"] *):hover {
-      color: var(--font-color-primary-default);
+    .group-data-\[variant\=bottom-border\]\:hover\:text-\(--tabs-item-bottom-border-hover-font\):is(:where(.group)[data-variant="bottom-border"] *):hover {
+      color: var(--tabs-item-bottom-border-hover-font);
+    }
+
+    .group-data-\[variant\=custom\]\/accordion\:hover\:text-\(--accordion-custom-hover-title\):is(:where(.group\/accordion)[data-variant="custom"] *):hover {
+      color: var(--accordion-custom-hover-title);
+    }
+
+    .group-data-\[variant\=default\]\/accordion\:hover\:text-\(--accordion-default-hover-title\):is(:where(.group\/accordion)[data-variant="default"] *):hover {
+      color: var(--accordion-default-hover-title);
     }
 
     .group-data-\[variant\=gradient\]\:hover\:bg-\(--color-bg-surface-accent\):is(:where(.group)[data-variant="gradient"] *):hover {
@@ -2428,41 +4257,62 @@
       color: var(--font-color-primary-muted);
     }
 
-    .group-data-\[variant\=solid\]\:hover\:bg-\(--color-bg-surface-accent\):is(:where(.group)[data-variant="solid"] *):hover {
-      background-color: var(--color-bg-surface-accent);
+    .group-data-\[variant\=solid\]\:hover\:bg-\(--tabs-item-solid-hover-bg\):is(:where(.group)[data-variant="solid"] *):hover {
+      background-color: var(--tabs-item-solid-hover-bg);
     }
 
-    .group-data-\[variant\=solid\]\:hover\:text-\(--font-color-primary-muted\):is(:where(.group)[data-variant="solid"] *):hover {
-      color: var(--font-color-primary-muted);
+    .group-data-\[variant\=solid\]\:hover\:text-\(--tabs-item-solid-hover-font\):is(:where(.group)[data-variant="solid"] *):hover {
+      color: var(--tabs-item-solid-hover-font);
+    }
+
+    .group-data-\[variant\=solid-ghost\]\:hover\:bg-\(--tabs-item-solid-ghost-hover-bg\):is(:where(.group)[data-variant="solid-ghost"] *):hover {
+      background-color: var(--tabs-item-solid-ghost-hover-bg);
+    }
+
+    .group-data-\[variant\=solid-ghost\]\:hover\:text-\(--tabs-item-solid-ghost-hover-font\):is(:where(.group)[data-variant="solid-ghost"] *):hover {
+      color: var(--tabs-item-solid-ghost-hover-font);
+    }
+
+    .group-data-\[variant\=solid-line\]\:hover\:border-\(length\:--tabs-item-solid-line-hover-border-width\):is(:where(.group)[data-variant="solid-line"] *):hover {
+      border-style: var(--tw-border-style);
+      border-width: var(--tabs-item-solid-line-hover-border-width);
     }
 
-    .group-data-\[variant\=solid-ghost\]\:hover\:bg-\(--color-bg-surface-muted\):is(:where(.group)[data-variant="solid-ghost"] *):hover {
-      background-color: var(--color-bg-surface-muted);
+    .group-data-\[variant\=solid-line\]\:hover\:border-\(--tabs-item-solid-line-hover-border\):is(:where(.group)[data-variant="solid-line"] *):hover {
+      border-color: var(--tabs-item-solid-line-hover-border);
     }
 
-    .group-data-\[variant\=solid-ghost\]\:hover\:text-\(--font-color-primary-muted\):is(:where(.group)[data-variant="solid-ghost"] *):hover {
-      color: var(--font-color-primary-muted);
+    .group-data-\[variant\=solid-line\]\:hover\:bg-\(--tabs-item-solid-line-hover-bg\):is(:where(.group)[data-variant="solid-line"] *):hover {
+      background-color: var(--tabs-item-solid-line-hover-bg);
     }
 
-    .group-data-\[variant\=solid-line\]\:hover\:border-\(--border-color-primary-hover\):is(:where(.group)[data-variant="solid-line"] *):hover {
-      border-color: var(--border-color-primary-hover);
+    .group-data-\[variant\=solid-line\]\:hover\:text-\(--tabs-item-solid-line-hover-font\):is(:where(.group)[data-variant="solid-line"] *):hover {
+      color: var(--tabs-item-solid-line-hover-font);
     }
+  }
 
-    .group-data-\[variant\=solid-line\]\:hover\:bg-\(--color-bg-surface-default\):is(:where(.group)[data-variant="solid-line"] *):hover {
-      background-color: var(--color-bg-surface-default);
-    }
+  .focus\:bg-\(--dropdown-item-simple-hover-bg\):focus {
+    background-color: var(--dropdown-item-simple-hover-bg);
+  }
 
-    .group-data-\[variant\=solid-line\]\:hover\:text-\(--font-color-onbrand-hover\):is(:where(.group)[data-variant="solid-line"] *):hover {
-      color: var(--font-color-onbrand-hover);
-    }
+  .focus\:bg-\(--navigation-item-content-hover-bg\):focus {
+    background-color: var(--navigation-item-content-hover-bg);
   }
 
-  .focus\:bg-\(--color-bg-primary-muted\):focus {
-    background-color: var(--color-bg-primary-muted);
+  .focus\:bg-\(--navigation-item-hover-bg\):focus {
+    background-color: var(--navigation-item-hover-bg);
   }
 
-  .focus\:text-\(--font-color-primary-default\):focus {
-    color: var(--font-color-primary-default);
+  .focus\:text-\(--dropdown-item-simple-hover-font\):focus {
+    color: var(--dropdown-item-simple-hover-font);
+  }
+
+  .focus\:text-\(--navigation-item-content-hover-title\):focus {
+    color: var(--navigation-item-content-hover-title);
+  }
+
+  .focus\:text-\(--navigation-item-hover-font\):focus {
+    color: var(--navigation-item-hover-font);
   }
 
   .focus\:shadow-md:focus {
@@ -2520,42 +4370,86 @@
     cursor: not-allowed;
   }
 
-  .disabled\:border-\(--border-color-default\):disabled {
-    border-color: var(--border-color-default);
+  .disabled\:border-\(--button-outline-disabled-border\):disabled {
+    border-color: var(--button-outline-disabled-border);
   }
 
-  .disabled\:border-\(--border-color-disabled\):disabled {
-    border-color: var(--border-color-disabled);
+  .disabled\:border-\(--select-default-disabled-border\):disabled {
+    border-color: var(--select-default-disabled-border);
   }
 
-  .disabled\:bg-\(--color-bg-disabled\):disabled {
-    background-color: var(--color-bg-disabled);
+  .disabled\:bg-\(--button-outline-disabled-bg\):disabled {
+    background-color: var(--button-outline-disabled-bg);
   }
 
-  .disabled\:bg-\(--color-bg-surface-default\):disabled {
-    background-color: var(--color-bg-surface-default);
+  .disabled\:bg-\(--button-solid-primary-disabled-bg\):disabled {
+    background-color: var(--button-solid-primary-disabled-bg);
   }
 
-  .disabled\:bg-\(--color-bg-surface-muted\):disabled {
-    background-color: var(--color-bg-surface-muted);
+  .disabled\:bg-\(--button-solid-secondary-disabled-bg\):disabled {
+    background-color: var(--button-solid-secondary-disabled-bg);
   }
 
-  .disabled\:text-\(--font-color-disabled\):disabled {
-    color: var(--font-color-disabled);
+  .disabled\:bg-\(--select-default-disabled-bg\):disabled {
+    background-color: var(--select-default-disabled-bg);
   }
 
-  .disabled\:text-\(--font-color-link-default\):disabled {
-    color: var(--font-color-link-default);
+  .disabled\:text-\(--button-ghost-disabled-font\):disabled {
+    color: var(--button-ghost-disabled-font);
   }
 
-  .disabled\:text-\(--font-color-onbrand-default\):disabled {
-    color: var(--font-color-onbrand-default);
+  .disabled\:text-\(--button-gradient-disabled-font\):disabled {
+    color: var(--button-gradient-disabled-font);
+  }
+
+  .disabled\:text-\(--button-link-disabled-font\):disabled {
+    color: var(--button-link-disabled-font);
+  }
+
+  .disabled\:text-\(--button-outline-disabled-font\):disabled {
+    color: var(--button-outline-disabled-font);
+  }
+
+  .disabled\:text-\(--button-solid-primary-disabled-font\):disabled {
+    color: var(--button-solid-primary-disabled-font);
+  }
+
+  .disabled\:text-\(--button-solid-secondary-disabled-font\):disabled {
+    color: var(--button-solid-secondary-disabled-font);
+  }
+
+  .disabled\:text-\(--navigation-button-bottom-border-disabled-font\):disabled {
+    color: var(--navigation-button-bottom-border-disabled-font);
+  }
+
+  .disabled\:text-\(--navigation-button-gradient-disabled-font\):disabled {
+    color: var(--navigation-button-gradient-disabled-font);
+  }
+
+  .disabled\:text-\(--navigation-button-solid-ghost-disabled-font\):disabled {
+    color: var(--navigation-button-solid-ghost-disabled-font);
+  }
+
+  .disabled\:text-\(--select-default-disabled-font\):disabled {
+    color: var(--select-default-disabled-font);
+  }
+
+  .disabled\:opacity-\(--button-common-opacity\):disabled {
+    opacity: var(--button-common-opacity);
+  }
+
+  .disabled\:opacity-\(--checkbox-common-opacity\):disabled {
+    opacity: var(--checkbox-common-opacity);
   }
 
   .disabled\:opacity-\(--opacity-state-disabled\):disabled {
     opacity: var(--opacity-state-disabled);
   }
 
+  .disabled\:opacity-\(--toggle-common-opacity\):disabled {
+    opacity: var(--toggle-common-opacity);
+  }
+
   .disabled\:opacity-50:disabled {
     opacity: .5;
   }
@@ -2572,8 +4466,8 @@
     pointer-events: none;
   }
 
-  .has-\[\[data-slot\=input-group\]\[data-disabled\=true\]\]\:text-\(--font-color-disabled\):has([data-slot="input-group"][data-disabled="true"]) {
-    color: var(--font-color-disabled);
+  .has-\[\[data-slot\=input-group\]\[data-disabled\=true\]\]\:text-\(--label-font-disabled\):has([data-slot="input-group"][data-disabled="true"]) {
+    color: var(--label-font-disabled);
   }
 
   .has-\[\[data-slot\~\=input-group-control\]\:focus-visible\]\:border-none:has([data-slot~="input-group-control"]:focus-visible) {
@@ -2581,44 +4475,56 @@
     border-style: none;
   }
 
-  .has-\[\[data-slot\~\=input-group-control\]\:focus-visible\]\:bg-\(--color-bg-surface-default\):has([data-slot~="input-group-control"]:focus-visible) {
-    background-color: var(--color-bg-surface-default);
+  .has-\[\[data-slot\~\=input-group-control\]\:focus-visible\]\:bg-\(--input-outline-focus-bg\):has([data-slot~="input-group-control"]:focus-visible) {
+    background-color: var(--input-outline-focus-bg);
   }
 
-  .has-\[\[data-slot\~\=input-group-control\]\:focus-visible\]\:bg-\(--color-bg-surface-muted\):has([data-slot~="input-group-control"]:focus-visible) {
-    background-color: var(--color-bg-surface-muted);
+  .has-\[\[data-slot\~\=input-group-control\]\:focus-visible\]\:bg-\(--input-solid-focus-bg\):has([data-slot~="input-group-control"]:focus-visible) {
+    background-color: var(--input-solid-focus-bg);
   }
 
-  .has-\[\[data-slot\~\=input-group-control\]\:focus-visible\]\:ring-\(--border-color-focus\):has([data-slot~="input-group-control"]:focus-visible) {
-    --tw-ring-color: var(--border-color-focus);
+  .has-\[\[data-slot\~\=input-group-control\]\:focus-visible\]\:ring-\(--input-common-border-width\):has([data-slot~="input-group-control"]:focus-visible) {
+    --tw-ring-color: var(--input-common-border-width);
   }
 
-  .has-\[\[data-slot\~\=input-group-control\]\:focus-visible\]\:ring-\(--border-width-regular\):has([data-slot~="input-group-control"]:focus-visible) {
-    --tw-ring-color: var(--border-width-regular);
+  .has-\[\[data-slot\~\=input-group-control\]\:focus-visible\]\:ring-\(--input-outline-focus-border\):has([data-slot~="input-group-control"]:focus-visible) {
+    --tw-ring-color: var(--input-outline-focus-border);
   }
 
-  .has-\[\[data-slot\~\=input-group-control\]\:not\(\:placeholder-shown\)\[aria-invalid\=false\]\]\:bg-\(--color-bg-surface-default\):has([data-slot~="input-group-control"]:not(:placeholder-shown)[aria-invalid="false"]) {
-    background-color: var(--color-bg-surface-default);
+  .has-\[\[data-slot\~\=input-group-control\]\:focus-visible\]\:ring-\(--input-solid-focus-border\):has([data-slot~="input-group-control"]:focus-visible) {
+    --tw-ring-color: var(--input-solid-focus-border);
   }
 
-  .has-\[\[data-slot\~\=input-group-control\]\:not\(\:placeholder-shown\)\[aria-invalid\=false\]\]\:bg-\(--color-state-success-subtle\):has([data-slot~="input-group-control"]:not(:placeholder-shown)[aria-invalid="false"]) {
-    background-color: var(--color-state-success-subtle);
+  .has-\[\[data-slot\~\=input-group-control\]\:not\(\:placeholder-shown\)\[aria-invalid\=false\]\]\:bg-\(--input-outline-success-bg\):has([data-slot~="input-group-control"]:not(:placeholder-shown)[aria-invalid="false"]) {
+    background-color: var(--input-outline-success-bg);
   }
 
-  .has-\[\[data-slot\~\=input-group-control\]\:not\(\:placeholder-shown\)\[aria-invalid\=false\]\]\:ring-\(--color-state-success-default\):has([data-slot~="input-group-control"]:not(:placeholder-shown)[aria-invalid="false"]) {
-    --tw-ring-color: var(--color-state-success-default);
+  .has-\[\[data-slot\~\=input-group-control\]\:not\(\:placeholder-shown\)\[aria-invalid\=false\]\]\:bg-\(--input-solid-success-bg\):has([data-slot~="input-group-control"]:not(:placeholder-shown)[aria-invalid="false"]) {
+    background-color: var(--input-solid-success-bg);
   }
 
-  .has-\[\[data-slot\~\=input-group-control\]\[aria-invalid\=true\]\]\:bg-\(--color-bg-surface-default\):has([data-slot~="input-group-control"][aria-invalid="true"]) {
-    background-color: var(--color-bg-surface-default);
+  .has-\[\[data-slot\~\=input-group-control\]\:not\(\:placeholder-shown\)\[aria-invalid\=false\]\]\:ring-\(--input-outline-success-border\):has([data-slot~="input-group-control"]:not(:placeholder-shown)[aria-invalid="false"]) {
+    --tw-ring-color: var(--input-outline-success-border);
   }
 
-  .has-\[\[data-slot\~\=input-group-control\]\[aria-invalid\=true\]\]\:bg-\(--color-state-error-subtle\):has([data-slot~="input-group-control"][aria-invalid="true"]) {
-    background-color: var(--color-state-error-subtle);
+  .has-\[\[data-slot\~\=input-group-control\]\:not\(\:placeholder-shown\)\[aria-invalid\=false\]\]\:ring-\(--input-solid-success-border\):has([data-slot~="input-group-control"]:not(:placeholder-shown)[aria-invalid="false"]) {
+    --tw-ring-color: var(--input-solid-success-border);
   }
 
-  .has-\[\[data-slot\~\=input-group-control\]\[aria-invalid\=true\]\]\:ring-\(--color-state-error-default\):has([data-slot~="input-group-control"][aria-invalid="true"]) {
-    --tw-ring-color: var(--color-state-error-default);
+  .has-\[\[data-slot\~\=input-group-control\]\[aria-invalid\=true\]\]\:bg-\(--input-outline-fail-bg\):has([data-slot~="input-group-control"][aria-invalid="true"]) {
+    background-color: var(--input-outline-fail-bg);
+  }
+
+  .has-\[\[data-slot\~\=input-group-control\]\[aria-invalid\=true\]\]\:bg-\(--input-solid-fail-bg\):has([data-slot~="input-group-control"][aria-invalid="true"]) {
+    background-color: var(--input-solid-fail-bg);
+  }
+
+  .has-\[\[data-slot\~\=input-group-control\]\[aria-invalid\=true\]\]\:ring-\(--input-outline-fail-border\):has([data-slot~="input-group-control"][aria-invalid="true"]) {
+    --tw-ring-color: var(--input-outline-fail-border);
+  }
+
+  .has-\[\[data-slot\~\=input-group-control\]\[aria-invalid\=true\]\]\:ring-\(--input-solid-fail-border\):has([data-slot~="input-group-control"][aria-invalid="true"]) {
+    --tw-ring-color: var(--input-solid-fail-border);
   }
 
   .has-\[\>\[data-align\=block-end\]\]\:h-auto:has( > [data-align="block-end"]) {
@@ -2637,28 +4543,28 @@
     flex-direction: column;
   }
 
-  .has-\[\>\[data-slot\=checkbox-group\]\]\:gap-component-gap-md:has( > [data-slot="checkbox-group"]) {
-    gap: var(--spacing-4);
+  .has-\[\>\[data-slot\=checkbox-group\]\]\:gap-\(--spacing-component-gap-md\):has( > [data-slot="checkbox-group"]) {
+    gap: var(--spacing-component-gap-md);
   }
 
   .has-\[\>\[data-slot\=field-content\]\]\:items-start:has( > [data-slot="field-content"]) {
     align-items: flex-start;
   }
 
-  .has-\[\>\[data-slot\=radio-group\]\]\:gap-component-gap-md:has( > [data-slot="radio-group"]) {
-    gap: var(--spacing-4);
+  .has-\[\>\[data-slot\=radio-group\]\]\:gap-\(--spacing-component-gap-md\):has( > [data-slot="radio-group"]) {
+    gap: var(--spacing-component-gap-md);
   }
 
-  .has-\[\>input\:disabled\]\:opacity-\(--opacity-state-disabled\):has( > input:disabled) {
-    opacity: var(--opacity-state-disabled);
+  .has-\[\>input\:disabled\]\:opacity-\(--input-common-opacity\):has( > input:disabled) {
+    opacity: var(--input-common-opacity);
   }
 
   .has-\[\>textarea\]\:h-auto:has( > textarea) {
     height: auto;
   }
 
-  .has-\[\>textarea\:disabled\]\:opacity-\(--opacity-state-disabled\):has( > textarea:disabled) {
-    opacity: var(--opacity-state-disabled);
+  .has-\[\>textarea\:disabled\]\:opacity-\(--input-common-opacity\):has( > textarea:disabled) {
+    opacity: var(--input-common-opacity);
   }
 
   .aria-disabled\:cursor-not-allowed[aria-disabled="true"] {
@@ -2673,24 +4579,52 @@
     opacity: .5;
   }
 
-  .group-data-\[variant\=outline\]\/input-group\:aria-invalid\:text-\(--font-color-primary-default\):is(:where(.group\/input-group)[data-variant="outline"] *)[aria-invalid="true"], .group-data-\[variant\=solid\]\/input-group\:aria-invalid\:text-\(--font-color-primary-default\):is(:where(.group\/input-group)[data-variant="solid"] *)[aria-invalid="true"], .group-data-\[variant\=outline\]\/input-group\:aria-\[aria-invalid\=false\]\:text-\(--font-color-primary-default\):is(:where(.group\/input-group)[data-variant="outline"] *)[aria-aria-invalid="false"], .group-data-\[variant\=solid\]\/input-group\:aria-\[aria-invalid\=false\]\:text-\(--font-color-primary-default\):is(:where(.group\/input-group)[data-variant="solid"] *)[aria-aria-invalid="false"] {
-    color: var(--font-color-primary-default);
+  .group-data-\[variant\=outline\]\/input-group\:aria-invalid\:text-\(--input-outline-fail-font\):is(:where(.group\/input-group)[data-variant="outline"] *)[aria-invalid="true"] {
+    color: var(--input-outline-fail-font);
   }
 
-  .data-\[active\=true\]\:bg-\(--color-bg-primary-muted\)[data-active="true"] {
-    background-color: var(--color-bg-primary-muted);
+  .group-data-\[variant\=solid\]\/input-group\:aria-invalid\:text-\(--input-solid-fail-font\):is(:where(.group\/input-group)[data-variant="solid"] *)[aria-invalid="true"] {
+    color: var(--input-solid-fail-font);
   }
 
-  .data-\[active\=true\]\:text-\(--font-color-primary-default\)[data-active="true"] {
-    color: var(--font-color-primary-default);
+  .group-data-\[variant\=outline\]\/input-group\:aria-\[aria-invalid\=false\]\:text-\(--input-outline-success-font\):is(:where(.group\/input-group)[data-variant="outline"] *)[aria-aria-invalid="false"] {
+    color: var(--input-outline-success-font);
+  }
+
+  .group-data-\[variant\=solid\]\/input-group\:aria-\[aria-invalid\=false\]\:text-\(--input-solid-success-font\):is(:where(.group\/input-group)[data-variant="solid"] *)[aria-aria-invalid="false"] {
+    color: var(--input-solid-success-font);
+  }
+
+  .data-disabled\:pointer-events-none[data-disabled] {
+    pointer-events: none;
+  }
+
+  .data-disabled\:opacity-50[data-disabled] {
+    opacity: .5;
+  }
+
+  .data-\[active\=true\]\:bg-\(--navigation-item-content-hover-bg\)[data-active="true"] {
+    background-color: var(--navigation-item-content-hover-bg);
+  }
+
+  .data-\[active\=true\]\:bg-\(--navigation-item-hover-bg\)[data-active="true"] {
+    background-color: var(--navigation-item-hover-bg);
+  }
+
+  .data-\[active\=true\]\:text-\(--navigation-item-content-hover-title\)[data-active="true"] {
+    color: var(--navigation-item-content-hover-title);
+  }
+
+  .data-\[active\=true\]\:text-\(--navigation-item-hover-font\)[data-active="true"] {
+    color: var(--navigation-item-hover-font);
   }
 
   .data-\[disabled\]\:pointer-events-none[data-disabled] {
     pointer-events: none;
   }
 
-  .data-\[disabled\]\:text-\(--font-color-disabled\)[data-disabled] {
-    color: var(--font-color-disabled);
+  .data-\[disabled\]\:text-\(--dropdown-item-simple-disabled-font\)[data-disabled] {
+    color: var(--dropdown-item-simple-disabled-font);
   }
 
   .data-\[invalid\=true\]\:text-\(--color-state-error-default\)[data-invalid="true"] {
@@ -2749,8 +4683,8 @@
     color: var(--font-color-primary-muted);
   }
 
-  .data-\[range-end\=true\]\:rounded-\(--radius-small\)[data-range-end="true"] {
-    border-radius: var(--radius-small);
+  .data-\[range-end\=true\]\:rounded-\(--calendar-days-radius\)[data-range-end="true"] {
+    border-radius: var(--calendar-days-radius);
   }
 
   .data-\[range-end\=true\]\:rounded-r-md[data-range-end="true"] {
@@ -2758,28 +4692,28 @@
     border-bottom-right-radius: var(--radius-md);
   }
 
-  .data-\[range-end\=true\]\:bg-\(--color-bg-primary-default\)[data-range-end="true"] {
-    background-color: var(--color-bg-primary-default);
+  .data-\[range-end\=true\]\:bg-\(--calendar-days-current-bg\)[data-range-end="true"] {
+    background-color: var(--calendar-days-current-bg);
   }
 
-  .data-\[range-end\=true\]\:text-\(--font-color-inverse-default\)[data-range-end="true"] {
-    color: var(--font-color-inverse-default);
+  .data-\[range-end\=true\]\:text-\(--calendar-days-current-font\)[data-range-end="true"] {
+    color: var(--calendar-days-current-font);
   }
 
   .data-\[range-middle\=true\]\:rounded-none[data-range-middle="true"] {
     border-radius: 0;
   }
 
-  .data-\[range-middle\=true\]\:bg-\(--color-bg-surface-muted\)[data-range-middle="true"] {
-    background-color: var(--color-bg-surface-muted);
+  .data-\[range-middle\=true\]\:bg-\(--calendar-days-selected-bg\)[data-range-middle="true"] {
+    background-color: var(--calendar-days-selected-bg);
   }
 
-  .data-\[range-middle\=true\]\:text-\(--font-color-primary-default\)[data-range-middle="true"] {
-    color: var(--font-color-primary-default);
+  .data-\[range-middle\=true\]\:text-\(--calendar-days-selected-font\)[data-range-middle="true"] {
+    color: var(--calendar-days-selected-font);
   }
 
-  .data-\[range-start\=true\]\:rounded-\(--radius-small\)[data-range-start="true"] {
-    border-radius: var(--radius-small);
+  .data-\[range-start\=true\]\:rounded-\(--calendar-days-radius\)[data-range-start="true"] {
+    border-radius: var(--calendar-days-radius);
   }
 
   .data-\[range-start\=true\]\:rounded-l-md[data-range-start="true"] {
@@ -2787,20 +4721,20 @@
     border-bottom-left-radius: var(--radius-md);
   }
 
-  .data-\[range-start\=true\]\:bg-\(--color-bg-primary-default\)[data-range-start="true"] {
-    background-color: var(--color-bg-primary-default);
+  .data-\[range-start\=true\]\:bg-\(--calendar-days-current-bg\)[data-range-start="true"] {
+    background-color: var(--calendar-days-current-bg);
   }
 
-  .data-\[range-start\=true\]\:text-\(--font-color-inverse-default\)[data-range-start="true"] {
-    color: var(--font-color-inverse-default);
+  .data-\[range-start\=true\]\:text-\(--calendar-days-current-font\)[data-range-start="true"] {
+    color: var(--calendar-days-current-font);
   }
 
-  .data-\[selected-single\=true\]\:bg-\(--color-bg-primary-default\)[data-selected-single="true"] {
-    background-color: var(--color-bg-primary-default);
+  .data-\[selected-single\=true\]\:bg-\(--calendar-days-current-bg\)[data-selected-single="true"] {
+    background-color: var(--calendar-days-current-bg);
   }
 
-  .data-\[selected-single\=true\]\:text-\(--font-color-inverse-default\)[data-selected-single="true"] {
-    color: var(--font-color-inverse-default);
+  .data-\[selected-single\=true\]\:text-\(--calendar-days-current-font\)[data-selected-single="true"] {
+    color: var(--calendar-days-current-font);
   }
 
   .data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
@@ -2839,8 +4773,8 @@
     --tw-enter-translate-y: calc(2 * var(--spacing));
   }
 
-  .data-\[slot\=checkbox-group\]\:gap-component-gap-md[data-slot="checkbox-group"] {
-    gap: var(--spacing-4);
+  .data-\[slot\=checkbox-group\]\:gap-\(--spacing-component-gap-md\)[data-slot="checkbox-group"], :is(.\*\:data-\[slot\=field-group\]\:gap-\(--spacing-component-gap-md\) > *)[data-slot="field-group"] {
+    gap: var(--spacing-component-gap-md);
   }
 
   :is(.\*\*\:data-\[slot\=navigation-menu-link\]\:outline-none *)[data-slot="navigation-menu-link"] {
@@ -2863,8 +4797,12 @@
     align-items: center;
   }
 
-  :is(.\*\:data-\[slot\=select-value\]\:gap-\(--spacing-component-padding-xs\) > *)[data-slot="select-value"] {
-    gap: var(--spacing-component-padding-xs);
+  :is(.\*\:data-\[slot\=select-value\]\:gap-\(--select-default-common-gap\) > *)[data-slot="select-value"] {
+    gap: var(--select-default-common-gap);
+  }
+
+  :is(.\*\:data-\[slot\=select-value\]\:gap-\(--select-small-common-gap\) > *)[data-slot="select-value"] {
+    gap: var(--select-small-common-gap);
   }
 
   .data-\[spacing\=0\]\:rounded-none[data-spacing="0"] {
@@ -2876,27 +4814,27 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
-  .data-\[spacing\=0\]\:first\:rounded-l-md[data-spacing="0"]:first-child {
-    border-top-left-radius: var(--radius-md);
-    border-bottom-left-radius: var(--radius-md);
+  .data-\[spacing\=0\]\:first\:rounded-l-\(--toggle-common-radius\)[data-spacing="0"]:first-child {
+    border-top-left-radius: var(--toggle-common-radius);
+    border-bottom-left-radius: var(--toggle-common-radius);
   }
 
-  .data-\[spacing\=0\]\:last\:rounded-r-md[data-spacing="0"]:last-child {
-    border-top-right-radius: var(--radius-md);
-    border-bottom-right-radius: var(--radius-md);
+  .data-\[spacing\=0\]\:last\:rounded-r-\(--toggle-common-radius\)[data-spacing="0"]:last-child {
+    border-top-right-radius: var(--toggle-common-radius);
+    border-bottom-right-radius: var(--toggle-common-radius);
   }
 
-  .group-data-\[variant\=bottom-border\]\:data-\[state\=active\]\:border-b-\(length\:--border-width-thick\):is(:where(.group)[data-variant="bottom-border"] *)[data-state="active"] {
+  .group-data-\[variant\=bottom-border\]\:data-\[state\=active\]\:border-b-\(length\:--tabs-item-bottom-border-on-border-width\):is(:where(.group)[data-variant="bottom-border"] *)[data-state="active"] {
     border-bottom-style: var(--tw-border-style);
-    border-bottom-width: var(--border-width-thick);
+    border-bottom-width: var(--tabs-item-bottom-border-on-border-width);
   }
 
-  .group-data-\[variant\=bottom-border\]\:data-\[state\=active\]\:border-b-\(--border-color-primary-default\):is(:where(.group)[data-variant="bottom-border"] *)[data-state="active"] {
-    border-bottom-color: var(--border-color-primary-default);
+  .group-data-\[variant\=bottom-border\]\:data-\[state\=active\]\:border-b-\(--tabs-item-bottom-border-on-border\):is(:where(.group)[data-variant="bottom-border"] *)[data-state="active"] {
+    border-bottom-color: var(--tabs-item-bottom-border-on-border);
   }
 
-  .group-data-\[variant\=bottom-border\]\:data-\[state\=active\]\:text-\(--font-color-primary-default\):is(:where(.group)[data-variant="bottom-border"] *)[data-state="active"] {
-    color: var(--font-color-primary-default);
+  .group-data-\[variant\=bottom-border\]\:data-\[state\=active\]\:text-\(--tabs-item-bottom-border-on-font\):is(:where(.group)[data-variant="bottom-border"] *)[data-state="active"] {
+    color: var(--tabs-item-bottom-border-on-font);
   }
 
   .group-data-\[variant\=gradient\]\:data-\[state\=active\]\:text-\(--font-color-onbrand-default\):is(:where(.group)[data-variant="gradient"] *)[data-state="active"] {
@@ -2907,28 +4845,28 @@
     background: linear-gradient(180deg, var(--color-gradient-primary-start) 0%, var(--color-gradient-primary-end) 100%);
   }
 
-  .group-data-\[variant\=solid\]\:data-\[state\=active\]\:bg-\(--color-bg-primary-default\):is(:where(.group)[data-variant="solid"] *)[data-state="active"] {
-    background-color: var(--color-bg-primary-default);
+  .group-data-\[variant\=solid\]\:data-\[state\=active\]\:bg-\(--tabs-item-solid-on-bg\):is(:where(.group)[data-variant="solid"] *)[data-state="active"] {
+    background-color: var(--tabs-item-solid-on-bg);
   }
 
-  .group-data-\[variant\=solid\]\:data-\[state\=active\]\:text-\(--font-color-onbrand-default\):is(:where(.group)[data-variant="solid"] *)[data-state="active"] {
-    color: var(--font-color-onbrand-default);
+  .group-data-\[variant\=solid\]\:data-\[state\=active\]\:text-\(--tabs-item-solid-on-font\):is(:where(.group)[data-variant="solid"] *)[data-state="active"] {
+    color: var(--tabs-item-solid-on-font);
   }
 
-  .group-data-\[variant\=solid-ghost\]\:data-\[state\=active\]\:bg-\(--color-bg-primary-default\):is(:where(.group)[data-variant="solid-ghost"] *)[data-state="active"] {
-    background-color: var(--color-bg-primary-default);
+  .group-data-\[variant\=solid-ghost\]\:data-\[state\=active\]\:bg-\(--tabs-item-solid-ghost-on-bg\):is(:where(.group)[data-variant="solid-ghost"] *)[data-state="active"] {
+    background-color: var(--tabs-item-solid-ghost-on-bg);
   }
 
-  .group-data-\[variant\=solid-ghost\]\:data-\[state\=active\]\:text-\(--font-color-onbrand-default\):is(:where(.group)[data-variant="solid-ghost"] *)[data-state="active"] {
-    color: var(--font-color-onbrand-default);
+  .group-data-\[variant\=solid-ghost\]\:data-\[state\=active\]\:text-\(--tabs-item-solid-ghost-on-font\):is(:where(.group)[data-variant="solid-ghost"] *)[data-state="active"] {
+    color: var(--tabs-item-solid-ghost-on-font);
   }
 
-  .group-data-\[variant\=solid-line\]\:data-\[state\=active\]\:bg-\(--color-bg-primary-default\):is(:where(.group)[data-variant="solid-line"] *)[data-state="active"] {
-    background-color: var(--color-bg-primary-default);
+  .group-data-\[variant\=solid-line\]\:data-\[state\=active\]\:bg-\(--tabs-item-solid-line-on-bg\):is(:where(.group)[data-variant="solid-line"] *)[data-state="active"] {
+    background-color: var(--tabs-item-solid-line-on-bg);
   }
 
-  .group-data-\[variant\=solid-line\]\:data-\[state\=active\]\:text-\(--font-color-onbrand-default\):is(:where(.group)[data-variant="solid-line"] *)[data-state="active"] {
-    color: var(--font-color-onbrand-default);
+  .group-data-\[variant\=solid-line\]\:data-\[state\=active\]\:text-\(--tabs-item-solid-line-on-font\):is(:where(.group)[data-variant="solid-line"] *)[data-state="active"] {
+    color: var(--tabs-item-solid-line-on-font);
   }
 
   .data-\[state\=checked\]\:translate-x-\[1rem\][data-state="checked"] {
@@ -2936,16 +4874,28 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
-  .data-\[state\=checked\]\:border-\(--border-color-primary-default\)[data-state="checked"] {
-    border-color: var(--border-color-primary-default);
+  .data-\[state\=checked\]\:border-\(--checkbox-outline-checked-border\)[data-state="checked"] {
+    border-color: var(--checkbox-outline-checked-border);
   }
 
-  .data-\[state\=checked\]\:bg-\(--color-bg-primary-default\)[data-state="checked"] {
-    background-color: var(--color-bg-primary-default);
+  .data-\[state\=checked\]\:bg-\(--checkbox-outline-checked-bg\)[data-state="checked"] {
+    background-color: var(--checkbox-outline-checked-bg);
   }
 
-  .data-\[state\=checked\]\:text-\(--font-color-primary-default\)[data-state="checked"] {
-    color: var(--font-color-primary-default);
+  .data-\[state\=checked\]\:bg-\(--checkbox-solid-checked-bg\)[data-state="checked"] {
+    background-color: var(--checkbox-solid-checked-bg);
+  }
+
+  .data-\[state\=checked\]\:bg-\(--switch-on-bg\)[data-state="checked"] {
+    background-color: var(--switch-on-bg);
+  }
+
+  .data-\[state\=checked\]\:bg-\(--switch-on-thumb\)[data-state="checked"] {
+    background-color: var(--switch-on-thumb);
+  }
+
+  .data-\[state\=checked\]\:text-\(--dropdown-item-simple-active-font\)[data-state="checked"] {
+    color: var(--dropdown-item-simple-active-font);
   }
 
   .data-\[state\=closed\]\:animate-accordion-up[data-state="closed"] {
@@ -2964,8 +4914,12 @@
     --tw-exit-scale: .95;
   }
 
-  .group-data-\[variant\=custom\]\/accordion\:data-\[state\=closed\]\:text-\(--font-color-primary-default\):is(:where(.group\/accordion)[data-variant="custom"] *)[data-state="closed"], .group-data-\[variant\=default\]\/accordion\:data-\[state\=closed\]\:text-\(--font-color-primary-default\):is(:where(.group\/accordion)[data-variant="default"] *)[data-state="closed"] {
-    color: var(--font-color-primary-default);
+  .group-data-\[variant\=custom\]\/accordion\:data-\[state\=closed\]\:text-\(--accordion-custom-closed-title\):is(:where(.group\/accordion)[data-variant="custom"] *)[data-state="closed"] {
+    color: var(--accordion-custom-closed-title);
+  }
+
+  .group-data-\[variant\=default\]\/accordion\:data-\[state\=closed\]\:text-\(--accordion-default-closed-title\):is(:where(.group\/accordion)[data-variant="default"] *)[data-state="closed"] {
+    color: var(--accordion-default-closed-title);
   }
 
   .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:animate-out:is(:where(.group\/navigation-menu)[data-viewport="false"] *)[data-state="closed"] {
@@ -2988,20 +4942,24 @@
     --tw-exit-opacity: 0;
   }
 
-  .data-\[state\=on\]\:border-\(--border-color-secondary-default\)[data-state="on"] {
-    border-color: var(--border-color-secondary-default);
+  .data-\[state\=on\]\:border-\(--toggle-outline-active-border\)[data-state="on"] {
+    border-color: var(--toggle-outline-active-border);
   }
 
-  .data-\[state\=on\]\:bg-\(--color-bg-primary-default\)[data-state="on"] {
-    background-color: var(--color-bg-primary-default);
+  .data-\[state\=on\]\:bg-\(--toggle-outline-active-bg\)[data-state="on"] {
+    background-color: var(--toggle-outline-active-bg);
   }
 
-  .data-\[state\=on\]\:bg-\(--color-bg-secondary-default\)[data-state="on"] {
-    background-color: var(--color-bg-secondary-default);
+  .data-\[state\=on\]\:bg-\(--toggle-solid-active-bg\)[data-state="on"] {
+    background-color: var(--toggle-solid-active-bg);
   }
 
-  .data-\[state\=on\]\:text-\(--font-color-primary-default\)[data-state="on"] {
-    color: var(--font-color-primary-default);
+  .data-\[state\=on\]\:text-\(--toggle-outline-active-font\)[data-state="on"] {
+    color: var(--toggle-outline-active-font);
+  }
+
+  .data-\[state\=on\]\:text-\(--toggle-solid-active-font\)[data-state="on"] {
+    color: var(--toggle-solid-active-font);
   }
 
   .data-\[state\=open\]\:animate-accordion-down[data-state="open"] {
@@ -3012,28 +4970,40 @@
     animation: enter var(--tw-animation-duration, var(--tw-duration, .15s)) var(--tw-ease, ease) var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1) var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none);
   }
 
-  .data-\[state\=open\]\:border-\(--border-color-default\)[data-state="open"] {
-    border-color: var(--border-color-default);
+  .data-\[state\=open\]\:border-\(--accordion-custom-open-border\)[data-state="open"] {
+    border-color: var(--accordion-custom-open-border);
   }
 
-  .data-\[state\=open\]\:border-b-\(--icon-color-primary-default\)[data-state="open"] {
-    border-bottom-color: var(--icon-color-primary-default);
+  .data-\[state\=open\]\:border-b-\(--navigation-button-bottom-border-active-border\)[data-state="open"] {
+    border-bottom-color: var(--navigation-button-bottom-border-active-border);
   }
 
-  .data-\[state\=open\]\:bg-\(--color-bg-primary-default\)[data-state="open"] {
-    background-color: var(--color-bg-primary-default);
+  .data-\[state\=open\]\:bg-\(--accordion-custom-open-bg\)[data-state="open"] {
+    background-color: var(--accordion-custom-open-bg);
   }
 
-  .data-\[state\=open\]\:bg-\(--color-bg-surface-muted\)[data-state="open"] {
-    background-color: var(--color-bg-surface-muted);
+  .data-\[state\=open\]\:bg-\(--navigation-button-solid-ghost-active-bg\)[data-state="open"] {
+    background-color: var(--navigation-button-solid-ghost-active-bg);
   }
 
-  .data-\[state\=open\]\:pb-component-padding-lg[data-state="open"] {
-    padding-bottom: var(--spacing-5);
+  .data-\[state\=open\]\:pb-\(--accordion-custom-padding-y\)[data-state="open"] {
+    padding-bottom: var(--accordion-custom-padding-y);
   }
 
-  .data-\[state\=open\]\:text-\(--font-color-primary-default\)[data-state="open"] {
-    color: var(--font-color-primary-default);
+  .data-\[state\=open\]\:pb-\(--accordion-default-padding-y\)[data-state="open"] {
+    padding-bottom: var(--accordion-default-padding-y);
+  }
+
+  .data-\[state\=open\]\:text-\(--navigation-button-bottom-border-active-font\)[data-state="open"] {
+    color: var(--navigation-button-bottom-border-active-font);
+  }
+
+  .data-\[state\=open\]\:text-\(--navigation-button-gradient-active-font\)[data-state="open"] {
+    color: var(--navigation-button-gradient-active-font);
+  }
+
+  .data-\[state\=open\]\:text-\(--navigation-button-solid-ghost-active-font\)[data-state="open"] {
+    color: var(--navigation-button-solid-ghost-active-font);
   }
 
   .data-\[state\=open\]\:fade-in-0[data-state="open"] {
@@ -3048,6 +5018,14 @@
     --tw-enter-scale: .95;
   }
 
+  .group-data-\[variant\=custom\]\/accordion\:data-\[state\=open\]\:text-\(--accordion-custom-open-title\):is(:where(.group\/accordion)[data-variant="custom"] *)[data-state="open"] {
+    color: var(--accordion-custom-open-title);
+  }
+
+  .group-data-\[variant\=default\]\/accordion\:data-\[state\=open\]\:text-\(--accordion-default-open-title\):is(:where(.group\/accordion)[data-variant="default"] *)[data-state="open"] {
+    color: var(--accordion-default-open-title);
+  }
+
   .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:animate-in:is(:where(.group\/navigation-menu)[data-viewport="false"] *)[data-state="open"] {
     animation: enter var(--tw-animation-duration, var(--tw-duration, .15s)) var(--tw-ease, ease) var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1) var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none);
   }
@@ -3061,12 +5039,20 @@
   }
 
   @media (hover: hover) {
-    .data-\[state\=open\]\:hover\:border-\(--border-color-default\)[data-state="open"]:hover {
-      border-color: var(--border-color-default);
+    .data-\[state\=open\]\:hover\:border-\(--accordion-custom-open-border\)[data-state="open"]:hover {
+      border-color: var(--accordion-custom-open-border);
     }
 
-    .data-\[state\=open\]\:hover\:bg-\(--color-bg-surface-accent\)[data-state="open"]:hover {
-      background-color: var(--color-bg-surface-accent);
+    .data-\[state\=open\]\:hover\:bg-\(--accordion-custom-open-bg\)[data-state="open"]:hover {
+      background-color: var(--accordion-custom-open-bg);
+    }
+
+    .group-data-\[variant\=custom\]\/accordion\:data-\[state\=open\]\:hover\:text-\(--accordion-custom-open-title\):is(:where(.group\/accordion)[data-variant="custom"] *)[data-state="open"]:hover {
+      color: var(--accordion-custom-open-title);
+    }
+
+    .group-data-\[variant\=default\]\/accordion\:data-\[state\=open\]\:hover\:text-\(--accordion-default-open-title\):is(:where(.group\/accordion)[data-variant="default"] *)[data-state="open"]:hover {
+      color: var(--accordion-default-open-title);
     }
   }
 
@@ -3075,8 +5061,12 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
-  .data-\[state\=unchecked\]\:bg-\(--color-bg-disabled\)[data-state="unchecked"] {
-    background-color: var(--color-bg-disabled);
+  .data-\[state\=unchecked\]\:bg-\(--switch-off-bg\)[data-state="unchecked"] {
+    background-color: var(--switch-off-bg);
+  }
+
+  .data-\[state\=unchecked\]\:bg-\(--switch-off-thumb\)[data-state="unchecked"] {
+    background-color: var(--switch-off-thumb);
   }
 
   .data-\[state\=visible\]\:animate-in[data-state="visible"] {
@@ -3123,14 +5113,14 @@
     max-height: 80vh;
   }
 
-  .data-\[vaul-drawer-direction\=bottom\]\:rounded-t-\(--radius-large\)[data-vaul-drawer-direction="bottom"] {
-    border-top-left-radius: var(--radius-large);
-    border-top-right-radius: var(--radius-large);
+  .data-\[vaul-drawer-direction\=bottom\]\:rounded-t-\(--drawer-common-radius\)[data-vaul-drawer-direction="bottom"] {
+    border-top-left-radius: var(--drawer-common-radius);
+    border-top-right-radius: var(--drawer-common-radius);
   }
 
-  .data-\[vaul-drawer-direction\=bottom\]\:border-t-\[length\:--border-width-thin\][data-vaul-drawer-direction="bottom"] {
+  .data-\[vaul-drawer-direction\=bottom\]\:border-t-\[length\:--drawer-common-border-width\][data-vaul-drawer-direction="bottom"] {
     border-top-style: var(--tw-border-style);
-    border-top-width: --border-width-thin;
+    border-top-width: --drawer-common-border-width;
   }
 
   .data-\[vaul-drawer-direction\=left\]\:inset-y-0[data-vaul-drawer-direction="left"] {
@@ -3145,9 +5135,9 @@
     width: 75%;
   }
 
-  .data-\[vaul-drawer-direction\=left\]\:border-r-\[length\:--border-width-thin\][data-vaul-drawer-direction="left"] {
+  .data-\[vaul-drawer-direction\=left\]\:border-r-\[length\:--drawer-common-border-width\][data-vaul-drawer-direction="left"] {
     border-right-style: var(--tw-border-style);
-    border-right-width: --border-width-thin;
+    border-right-width: --drawer-common-border-width;
   }
 
   .data-\[vaul-drawer-direction\=right\]\:inset-y-0[data-vaul-drawer-direction="right"] {
@@ -3162,9 +5152,9 @@
     width: 75%;
   }
 
-  .data-\[vaul-drawer-direction\=right\]\:border-l-\[length\:--border-width-thin\][data-vaul-drawer-direction="right"] {
+  .data-\[vaul-drawer-direction\=right\]\:border-l-\[length\:--drawer-common-border-width\][data-vaul-drawer-direction="right"] {
     border-left-style: var(--tw-border-style);
-    border-left-width: --border-width-thin;
+    border-left-width: --drawer-common-border-width;
   }
 
   .data-\[vaul-drawer-direction\=top\]\:inset-x-0[data-vaul-drawer-direction="top"] {
@@ -3183,14 +5173,14 @@
     max-height: 80vh;
   }
 
-  .data-\[vaul-drawer-direction\=top\]\:rounded-b-\(--radius-large\)[data-vaul-drawer-direction="top"] {
-    border-bottom-right-radius: var(--radius-large);
-    border-bottom-left-radius: var(--radius-large);
+  .data-\[vaul-drawer-direction\=top\]\:rounded-b-\(--drawer-common-radius\)[data-vaul-drawer-direction="top"] {
+    border-bottom-right-radius: var(--drawer-common-radius);
+    border-bottom-left-radius: var(--drawer-common-radius);
   }
 
-  .data-\[vaul-drawer-direction\=top\]\:border-b-\[length\:--border-width-thin\][data-vaul-drawer-direction="top"] {
+  .data-\[vaul-drawer-direction\=top\]\:border-b-\[length\:--drawer-common-border-width\][data-vaul-drawer-direction="top"] {
     border-bottom-style: var(--tw-border-style);
-    border-bottom-width: --border-width-thin;
+    border-bottom-width: --drawer-common-border-width;
   }
 
   @media (min-width: 40rem) {
@@ -3237,56 +5227,143 @@
     pointer-events: none;
   }
 
-  .\[\&_svg\]\:ml-auto svg {
-    margin-left: auto;
+  .\[\&_svg\]\:size-\(--button-size-large-icon-size\) svg {
+    width: var(--button-size-large-icon-size);
+    height: var(--button-size-large-icon-size);
+  }
+
+  .\[\&_svg\]\:size-\(--button-size-medium-icon-size\) svg {
+    width: var(--button-size-medium-icon-size);
+    height: var(--button-size-medium-icon-size);
+  }
+
+  .\[\&_svg\]\:size-\(--button-size-small-icon-size\) svg {
+    width: var(--button-size-small-icon-size);
+    height: var(--button-size-small-icon-size);
+  }
+
+  .\[\&_svg\]\:size-\(--calendar-date-picker-icon-size\) svg {
+    width: var(--calendar-date-picker-icon-size);
+    height: var(--calendar-date-picker-icon-size);
+  }
+
+  .\[\&_svg\]\:size-\(--checkbox-common-icon-size\) svg {
+    width: var(--checkbox-common-icon-size);
+    height: var(--checkbox-common-icon-size);
+  }
+
+  .\[\&_svg\]\:size-\(--input-common-icon-size-sm\) svg {
+    width: var(--input-common-icon-size-sm);
+    height: var(--input-common-icon-size-sm);
+  }
+
+  .\[\&_svg\]\:size-\(--navigation-button-common-icon-size\) svg {
+    width: var(--navigation-button-common-icon-size);
+    height: var(--navigation-button-common-icon-size);
   }
 
-  .\[\&_svg\]\:size-\(--icon-size-medium\) svg {
-    width: var(--icon-size-medium);
-    height: var(--icon-size-medium);
+  .\[\&_svg\]\:size-\(--pagination-common-icon-size\) svg {
+    width: var(--pagination-common-icon-size);
+    height: var(--pagination-common-icon-size);
   }
 
-  .\[\&_svg\]\:size-\(--icon-size-medium\)\! svg {
-    width: var(--icon-size-medium) !important;
-    height: var(--icon-size-medium) !important;
+  .\[\&_svg\]\:size-\(--table-item-common-icon-size\) svg {
+    width: var(--table-item-common-icon-size);
+    height: var(--table-item-common-icon-size);
   }
 
-  .\[\&_svg\]\:size-\(--icon-size-micro\) svg {
-    width: var(--icon-size-micro);
-    height: var(--icon-size-micro);
+  .\[\&_svg\]\:size-\(--tabs-item-common-icon-size\) svg {
+    width: var(--tabs-item-common-icon-size);
+    height: var(--tabs-item-common-icon-size);
   }
 
-  .\[\&_svg\]\:size-\(--icon-size-small\) svg {
-    width: var(--icon-size-small);
-    height: var(--icon-size-small);
+  .\[\&_svg\]\:size-\(--toast-common-icon-size\)\! svg {
+    width: var(--toast-common-icon-size) !important;
+    height: var(--toast-common-icon-size) !important;
   }
 
   .\[\&_svg\]\:shrink-0 svg {
     flex-shrink: 0;
   }
 
-  .\[\&_svg\]\:text-\(--font-color-onbrand-default\) svg {
-    color: var(--font-color-onbrand-default);
+  .\[\&_svg\]\:text-\(--badge-gradient-icon\) svg {
+    color: var(--badge-gradient-icon);
   }
 
-  .\[\&_svg\]\:text-\(--icon-color-inverse-default\) svg {
-    color: var(--icon-color-inverse-default);
+  .\[\&_svg\]\:text-\(--badge-outline-icon\) svg {
+    color: var(--badge-outline-icon);
   }
 
-  .\[\&_svg\]\:text-\(--icon-color-link-default\) svg {
-    color: var(--icon-color-link-default);
+  .\[\&_svg\]\:text-\(--badge-solid-icon\) svg {
+    color: var(--badge-solid-icon);
   }
 
-  .\[\&_svg\]\:text-\(--icon-color-onbrand-default\) svg {
-    color: var(--icon-color-onbrand-default);
+  .\[\&_svg\]\:text-\(--button-ghost-default-icon\) svg {
+    color: var(--button-ghost-default-icon);
   }
 
-  .\[\&_svg\]\:text-\(--icon-color-primary-default\) svg {
-    color: var(--icon-color-primary-default);
+  .\[\&_svg\]\:text-\(--button-gradient-default-icon\) svg {
+    color: var(--button-gradient-default-icon);
   }
 
-  .\[\&_svg\]\:text-\(--icon-color-primary-muted\) svg {
-    color: var(--icon-color-primary-muted);
+  .\[\&_svg\]\:text-\(--button-link-default-icon\) svg {
+    color: var(--button-link-default-icon);
+  }
+
+  .\[\&_svg\]\:text-\(--button-outline-default-icon\) svg {
+    color: var(--button-outline-default-icon);
+  }
+
+  .\[\&_svg\]\:text-\(--button-solid-primary-default-icon\) svg {
+    color: var(--button-solid-primary-default-icon);
+  }
+
+  .\[\&_svg\]\:text-\(--button-solid-secondary-default-icon\) svg {
+    color: var(--button-solid-secondary-default-icon);
+  }
+
+  .\[\&_svg\]\:text-\(--calendar-date-picker-icon\) svg {
+    color: var(--calendar-date-picker-icon);
+  }
+
+  .\[\&_svg\]\:text-\(--dropdown-item-icon-default-icon\) svg {
+    color: var(--dropdown-item-icon-default-icon);
+  }
+
+  .\[\&_svg\]\:text-\(--navigation-button-bottom-border-default-icon\) svg {
+    color: var(--navigation-button-bottom-border-default-icon);
+  }
+
+  .\[\&_svg\]\:text-\(--navigation-button-gradient-default-icon\) svg {
+    color: var(--navigation-button-gradient-default-icon);
+  }
+
+  .\[\&_svg\]\:text-\(--navigation-button-solid-ghost-default-icon\) svg {
+    color: var(--navigation-button-solid-ghost-default-icon);
+  }
+
+  .\[\&_svg\]\:text-\(--pagination-link-default-icon\) svg {
+    color: var(--pagination-link-default-icon);
+  }
+
+  .\[\&_svg\]\:text-\(--select-default-default-icon\) svg {
+    color: var(--select-default-default-icon);
+  }
+
+  .\[\&_svg\]\:text-\(--table-item-cell-icon\) svg {
+    color: var(--table-item-cell-icon);
+  }
+
+  .\[\&_svg\]\:text-\(--table-item-header-icon\) svg {
+    color: var(--table-item-header-icon);
+  }
+
+  .\[\&_svg\]\:text-\(--toggle-outline-default-icon\) svg {
+    color: var(--toggle-outline-default-icon);
+  }
+
+  .\[\&_svg\]\:text-\(--toggle-solid-default-icon\) svg {
+    color: var(--toggle-solid-default-icon);
   }
 
   .\[\&_svg\]\:transition-transform svg {
@@ -3300,95 +5377,253 @@
     transition-duration: .2s;
   }
 
-  .group-data-\[variant\=bottom-border\]\:\[\&_svg\]\:text-\(--icon-color-primary-muted\):is(:where(.group)[data-variant="bottom-border"] *) svg, .group-data-\[variant\=gradient\]\:\[\&_svg\]\:text-\(--icon-color-primary-muted\):is(:where(.group)[data-variant="gradient"] *) svg, .group-data-\[variant\=solid\]\:\[\&_svg\]\:text-\(--icon-color-primary-muted\):is(:where(.group)[data-variant="solid"] *) svg, .group-data-\[variant\=solid-ghost\]\:\[\&_svg\]\:text-\(--icon-color-primary-muted\):is(:where(.group)[data-variant="solid-ghost"] *) svg {
+  .group-data-\[variant\=bottom-border\]\:\[\&_svg\]\:text-\(--tabs-item-bottom-border-off-icon\):is(:where(.group)[data-variant="bottom-border"] *) svg {
+    color: var(--tabs-item-bottom-border-off-icon);
+  }
+
+  .group-data-\[variant\=gradient\]\:\[\&_svg\]\:text-\(--icon-color-primary-muted\):is(:where(.group)[data-variant="gradient"] *) svg {
     color: var(--icon-color-primary-muted);
   }
 
-  .group-data-\[variant\=solid-line\]\:\[\&_svg\]\:text-\(--icon-color-onbrand-hover\):is(:where(.group)[data-variant="solid-line"] *) svg {
-    color: var(--icon-color-onbrand-hover);
+  .group-data-\[variant\=solid\]\:\[\&_svg\]\:text-\(--tabs-item-solid-off-icon\):is(:where(.group)[data-variant="solid"] *) svg {
+    color: var(--tabs-item-solid-off-icon);
+  }
+
+  .group-data-\[variant\=solid-ghost\]\:\[\&_svg\]\:text-\(--tabs-item-solid-ghost-off-icon\):is(:where(.group)[data-variant="solid-ghost"] *) svg {
+    color: var(--tabs-item-solid-ghost-off-icon);
+  }
+
+  .group-data-\[variant\=solid-line\]\:\[\&_svg\]\:text-\(--tabs-item-solid-line-off-icon\):is(:where(.group)[data-variant="solid-line"] *) svg {
+    color: var(--tabs-item-solid-line-off-icon);
   }
 
   @media (hover: hover) {
-    .\[\&_svg\]\:hover\:text-\(--font-color-onbrand-hover\) svg:hover {
-      color: var(--font-color-onbrand-hover);
+    .\[\&_svg\]\:hover\:text-\(--navigation-button-bottom-border-hover-icon\) svg:hover {
+      color: var(--navigation-button-bottom-border-hover-icon);
+    }
+
+    .\[\&_svg\]\:hover\:text-\(--navigation-button-solid-ghost-active-icon\) svg:hover {
+      color: var(--navigation-button-solid-ghost-active-icon);
+    }
+
+    .\[\&_svg\]\:hover\:text-\(--navigation-item-content-hover-icon\) svg:hover {
+      color: var(--navigation-item-content-hover-icon);
+    }
+
+    .\[\&_svg\]\:hover\:text-\(--pagination-link-hover-icon\) svg:hover {
+      color: var(--pagination-link-hover-icon);
+    }
+
+    .hover\:\[\&_svg\]\:text-\(--button-ghost-hover-icon\):hover svg {
+      color: var(--button-ghost-hover-icon);
+    }
+
+    .hover\:\[\&_svg\]\:text-\(--button-gradient-hover-icon\):hover svg {
+      color: var(--button-gradient-hover-icon);
     }
 
-    .\[\&_svg\]\:hover\:text-\(--icon-color-onbrand-default\) svg:hover {
-      color: var(--icon-color-onbrand-default);
+    .hover\:\[\&_svg\]\:text-\(--button-link-hover-icon\):hover svg {
+      color: var(--button-link-hover-icon);
     }
 
-    .\[\&_svg\]\:hover\:text-\(--icon-color-onbrand-hover\) svg:hover {
-      color: var(--icon-color-onbrand-hover);
+    .hover\:\[\&_svg\]\:text-\(--button-outline-hover-icon\):hover svg {
+      color: var(--button-outline-hover-icon);
     }
 
-    .hover\:\[\&_svg\]\:text-\(--icon-color-link-hover\):hover svg {
-      color: var(--icon-color-link-hover);
+    .hover\:\[\&_svg\]\:text-\(--button-solid-primary-hover-icon\):hover svg {
+      color: var(--button-solid-primary-hover-icon);
     }
 
-    .hover\:\[\&_svg\]\:text-\(--icon-color-onbrand-default\):hover svg {
-      color: var(--icon-color-onbrand-default);
+    .hover\:\[\&_svg\]\:text-\(--button-solid-secondary-hover-icon\):hover svg {
+      color: var(--button-solid-secondary-hover-icon);
     }
 
-    .hover\:\[\&_svg\]\:text-\(--icon-color-onbrand-hover\):hover svg {
-      color: var(--icon-color-onbrand-hover);
+    .hover\:\[\&_svg\]\:text-\(--select-default-hover-icon\):hover svg {
+      color: var(--select-default-hover-icon);
     }
 
-    .hover\:\[\&_svg\]\:text-\(--icon-color-primary-default\):hover svg, .group-data-\[variant\=bottom-border\]\:hover\:\[\&_svg\]\:text-\(--icon-color-primary-default\):is(:where(.group)[data-variant="bottom-border"] *):hover svg, .group-data-\[variant\=custom\]\/accordion\:hover\:\[\&_svg\]\:text-\(--icon-color-primary-default\):is(:where(.group\/accordion)[data-variant="custom"] *):hover svg, .group-data-\[variant\=default\]\/accordion\:hover\:\[\&_svg\]\:text-\(--icon-color-primary-default\):is(:where(.group\/accordion)[data-variant="default"] *):hover svg {
-      color: var(--icon-color-primary-default);
+    .hover\:\[\&_svg\]\:text-\(--toggle-outline-hover-icon\):hover svg {
+      color: var(--toggle-outline-hover-icon);
     }
 
-    .group-data-\[variant\=gradient\]\:hover\:\[\&_svg\]\:text-\(--icon-color-primary-muted\):is(:where(.group)[data-variant="gradient"] *):hover svg, .group-data-\[variant\=solid\]\:hover\:\[\&_svg\]\:text-\(--icon-color-primary-muted\):is(:where(.group)[data-variant="solid"] *):hover svg, .group-data-\[variant\=solid-ghost\]\:hover\:\[\&_svg\]\:text-\(--icon-color-primary-muted\):is(:where(.group)[data-variant="solid-ghost"] *):hover svg {
+    .hover\:\[\&_svg\]\:text-\(--toggle-solid-hover-icon\):hover svg {
+      color: var(--toggle-solid-hover-icon);
+    }
+
+    .group-data-\[variant\=bottom-border\]\:hover\:\[\&_svg\]\:text-\(--tabs-item-bottom-border-hover-icon\):is(:where(.group)[data-variant="bottom-border"] *):hover svg {
+      color: var(--tabs-item-bottom-border-hover-icon);
+    }
+
+    .group-data-\[variant\=custom\]\/accordion\:hover\:\[\&_svg\]\:text-\(--accordion-custom-hover-icon\):is(:where(.group\/accordion)[data-variant="custom"] *):hover svg {
+      color: var(--accordion-custom-hover-icon);
+    }
+
+    .group-data-\[variant\=default\]\/accordion\:hover\:\[\&_svg\]\:text-\(--accordion-default-hover-icon\):is(:where(.group\/accordion)[data-variant="default"] *):hover svg {
+      color: var(--accordion-default-hover-icon);
+    }
+
+    .group-data-\[variant\=gradient\]\:hover\:\[\&_svg\]\:text-\(--icon-color-primary-muted\):is(:where(.group)[data-variant="gradient"] *):hover svg {
       color: var(--icon-color-primary-muted);
     }
 
-    .group-data-\[variant\=solid-line\]\:hover\:\[\&_svg\]\:text-\(--icon-color-onbrand-hover\):is(:where(.group)[data-variant="solid-line"] *):hover svg {
-      color: var(--icon-color-onbrand-hover);
+    .group-data-\[variant\=solid\]\:hover\:\[\&_svg\]\:text-\(--tabs-item-solid-hover-icon\):is(:where(.group)[data-variant="solid"] *):hover svg {
+      color: var(--tabs-item-solid-hover-icon);
+    }
+
+    .group-data-\[variant\=solid-ghost\]\:hover\:\[\&_svg\]\:text-\(--tabs-item-solid-ghost-hover-icon\):is(:where(.group)[data-variant="solid-ghost"] *):hover svg {
+      color: var(--tabs-item-solid-ghost-hover-icon);
+    }
+
+    .group-data-\[variant\=solid-line\]\:hover\:\[\&_svg\]\:text-\(--tabs-item-solid-line-hover-icon\):is(:where(.group)[data-variant="solid-line"] *):hover svg {
+      color: var(--tabs-item-solid-line-hover-icon);
     }
   }
 
-  .\[\&_svg\]\:disabled\:text-\(--icon-color-disabled\) svg:disabled, .disabled\:\[\&_svg\]\:text-\(--icon-color-disabled\):disabled svg {
-    color: var(--icon-color-disabled);
+  .\[\&_svg\]\:disabled\:text-\(--navigation-button-bottom-border-disabled-icon\) svg:disabled {
+    color: var(--navigation-button-bottom-border-disabled-icon);
   }
 
-  .disabled\:\[\&_svg\]\:text-\(--icon-color-link-default\):disabled svg {
-    color: var(--icon-color-link-default);
+  .\[\&_svg\]\:disabled\:text-\(--navigation-button-gradient-disabled-icon\) svg:disabled {
+    color: var(--navigation-button-gradient-disabled-icon);
   }
 
-  .disabled\:\[\&_svg\]\:text-\(--icon-color-onbrand-default\):disabled svg {
-    color: var(--icon-color-onbrand-default);
+  .\[\&_svg\]\:disabled\:text-\(--navigation-button-solid-ghost-disabled-icon\) svg:disabled {
+    color: var(--navigation-button-solid-ghost-disabled-icon);
+  }
+
+  .disabled\:\[\&_svg\]\:text-\(--button-ghost-disabled-icon\):disabled svg {
+    color: var(--button-ghost-disabled-icon);
+  }
+
+  .disabled\:\[\&_svg\]\:text-\(--button-gradient-disabled-icon\):disabled svg {
+    color: var(--button-gradient-disabled-icon);
+  }
+
+  .disabled\:\[\&_svg\]\:text-\(--button-link-disabled-icon\):disabled svg {
+    color: var(--button-link-disabled-icon);
+  }
+
+  .disabled\:\[\&_svg\]\:text-\(--button-outline-disabled-icon\):disabled svg {
+    color: var(--button-outline-disabled-icon);
+  }
+
+  .disabled\:\[\&_svg\]\:text-\(--button-solid-primary-disabled-icon\):disabled svg {
+    color: var(--button-solid-primary-disabled-icon);
+  }
+
+  .disabled\:\[\&_svg\]\:text-\(--button-solid-secondary-disabled-icon\):disabled svg {
+    color: var(--button-solid-secondary-disabled-icon);
+  }
+
+  .disabled\:\[\&_svg\]\:text-\(--select-default-disabled-icon\):disabled svg {
+    color: var(--select-default-disabled-icon);
+  }
+
+  .\[\&_svg\]\:data-\[active\=true\]\:text-\(--navigation-item-content-hover-icon\) svg[data-active="true"] {
+    color: var(--navigation-item-content-hover-icon);
   }
 
-  .data-\[disabled\]\:\[\&_svg\]\:text-\(--icon-color-disabled\)[data-disabled] svg {
-    color: var(--icon-color-disabled);
+  .data-\[disabled\]\:\[\&_svg\]\:text-\(--dropdown-item-icon-disabled-icon\)[data-disabled] svg {
+    color: var(--dropdown-item-icon-disabled-icon);
   }
 
-  .group-data-\[variant\=bottom-border\]\:data-\[state\=active\]\:\[\&_svg\]\:text-\(--icon-color-primary-default\):is(:where(.group)[data-variant="bottom-border"] *)[data-state="active"] svg {
-    color: var(--icon-color-primary-default);
+  .group-data-\[variant\=bottom-border\]\:data-\[state\=active\]\:\[\&_svg\]\:text-\(--tabs-item-bottom-border-on-icon\):is(:where(.group)[data-variant="bottom-border"] *)[data-state="active"] svg {
+    color: var(--tabs-item-bottom-border-on-icon);
   }
 
   .group-data-\[variant\=gradient\]\:data-\[state\=active\]\:\[\&_svg\]\:text-\(--icon-color-onbrand-default\):is(:where(.group)[data-variant="gradient"] *)[data-state="active"] svg {
     color: var(--icon-color-onbrand-default);
   }
 
-  .group-data-\[variant\=solid\]\:data-\[state\=active\]\:\[\&_svg\]\:text-\(--icon-color-primary-default\):is(:where(.group)[data-variant="solid"] *)[data-state="active"] svg, .group-data-\[variant\=solid-ghost\]\:data-\[state\=active\]\:\[\&_svg\]\:text-\(--icon-color-primary-default\):is(:where(.group)[data-variant="solid-ghost"] *)[data-state="active"] svg, .group-data-\[variant\=solid-line\]\:data-\[state\=active\]\:\[\&_svg\]\:text-\(--icon-color-primary-default\):is(:where(.group)[data-variant="solid-line"] *)[data-state="active"] svg {
-    color: var(--icon-color-primary-default);
+  .group-data-\[variant\=solid\]\:data-\[state\=active\]\:\[\&_svg\]\:text-\(--tabs-item-solid-on-icon\):is(:where(.group)[data-variant="solid"] *)[data-state="active"] svg {
+    color: var(--tabs-item-solid-on-icon);
   }
 
-  .data-\[state\=checked\]\:\[\&_svg\]\:text-\(--icon-color-onbrand-default\)[data-state="checked"] svg {
-    color: var(--icon-color-onbrand-default);
+  .group-data-\[variant\=solid-ghost\]\:data-\[state\=active\]\:\[\&_svg\]\:text-\(--tabs-item-solid-ghost-on-icon\):is(:where(.group)[data-variant="solid-ghost"] *)[data-state="active"] svg {
+    color: var(--tabs-item-solid-ghost-on-icon);
   }
 
-  .data-\[state\=checked\]\:\[\&_svg\]\:text-\(--icon-color-primary-default\)[data-state="checked"] svg, .data-\[state\=on\]\:\[\&_svg\]\:text-\(--icon-color-primary-default\)[data-state="on"] svg {
-    color: var(--icon-color-primary-default);
+  .group-data-\[variant\=solid-line\]\:data-\[state\=active\]\:\[\&_svg\]\:text-\(--tabs-item-solid-line-on-icon\):is(:where(.group)[data-variant="solid-line"] *)[data-state="active"] svg {
+    color: var(--tabs-item-solid-line-on-icon);
   }
 
-  .\[\&_svg\]\:data-\[state\=open\]\:text-\(--icon-color-onbrand-default\) svg[data-state="open"] {
-    color: var(--icon-color-onbrand-default);
+  .data-\[state\=checked\]\:\[\&_svg\]\:text-\(--checkbox-outline-checked-icon\)[data-state="checked"] svg {
+    color: var(--checkbox-outline-checked-icon);
+  }
+
+  .data-\[state\=checked\]\:\[\&_svg\]\:text-\(--checkbox-solid-checked-icon\)[data-state="checked"] svg {
+    color: var(--checkbox-solid-checked-icon);
+  }
+
+  .data-\[state\=checked\]\:\[\&_svg\]\:text-\(--dropdown-item-simple-active-icon\)[data-state="checked"] svg {
+    color: var(--dropdown-item-simple-active-icon);
+  }
+
+  .group-data-\[variant\=custom\]\/accordion\:data-\[state\=closed\]\:\[\&_svg\]\:text-\(--accordion-custom-closed-icon\):is(:where(.group\/accordion)[data-variant="custom"] *)[data-state="closed"] svg {
+    color: var(--accordion-custom-closed-icon);
+  }
+
+  .group-data-\[variant\=default\]\/accordion\:data-\[state\=closed\]\:\[\&_svg\]\:text-\(--accordion-default-closed-icon\):is(:where(.group\/accordion)[data-variant="default"] *)[data-state="closed"] svg {
+    color: var(--accordion-default-closed-icon);
+  }
+
+  .data-\[state\=on\]\:\[\&_svg\]\:text-\(--toggle-outline-active-icon\)[data-state="on"] svg {
+    color: var(--toggle-outline-active-icon);
+  }
+
+  .data-\[state\=on\]\:\[\&_svg\]\:text-\(--toggle-solid-active-icon\)[data-state="on"] svg {
+    color: var(--toggle-solid-active-icon);
+  }
+
+  .\[\&_svg\]\:data-\[state\=open\]\:text-\(--navigation-button-bottom-border-active-icon\) svg[data-state="open"] {
+    color: var(--navigation-button-bottom-border-active-icon);
+  }
+
+  .\[\&_svg\]\:data-\[state\=open\]\:text-\(--navigation-button-gradient-active-icon\) svg[data-state="open"] {
+    color: var(--navigation-button-gradient-active-icon);
+  }
+
+  .group-data-\[variant\=custom\]\/accordion\:data-\[state\=open\]\:\[\&_svg\]\:text-\(--accordion-custom-open-icon\):is(:where(.group\/accordion)[data-variant="custom"] *)[data-state="open"] svg {
+    color: var(--accordion-custom-open-icon);
+  }
+
+  .group-data-\[variant\=default\]\/accordion\:data-\[state\=open\]\:\[\&_svg\]\:text-\(--accordion-default-open-icon\):is(:where(.group\/accordion)[data-variant="default"] *)[data-state="open"] svg {
+    color: var(--accordion-default-open-icon);
+  }
+
+  @media (hover: hover) {
+    .group-data-\[variant\=custom\]\/accordion\:data-\[state\=open\]\:hover\:\[\&_svg\]\:text-\(--accordion-custom-open-icon\):is(:where(.group\/accordion)[data-variant="custom"] *)[data-state="open"]:hover svg {
+      color: var(--accordion-custom-open-icon);
+    }
+
+    .group-data-\[variant\=default\]\/accordion\:data-\[state\=open\]\:hover\:\[\&_svg\]\:text-\(--accordion-default-open-icon\):is(:where(.group\/accordion)[data-variant="default"] *)[data-state="open"]:hover svg {
+      color: var(--accordion-default-open-icon);
+    }
+  }
+
+  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-\(--dropdown-item-icon-icon-size\) svg:not([class*="size-"]) {
+    width: var(--dropdown-item-icon-icon-size);
+    height: var(--dropdown-item-icon-icon-size);
+  }
+
+  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-\(--navigation-item-common-icon-size\) svg:not([class*="size-"]) {
+    width: var(--navigation-item-common-icon-size);
+    height: var(--navigation-item-common-icon-size);
+  }
+
+  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-\(--navigation-item-content-common-icon-size\) svg:not([class*="size-"]) {
+    width: var(--navigation-item-content-common-icon-size);
+    height: var(--navigation-item-content-common-icon-size);
+  }
+
+  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-\(--select-default-common-icon-size\) svg:not([class*="size-"]) {
+    width: var(--select-default-common-icon-size);
+    height: var(--select-default-common-icon-size);
   }
 
-  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-\(--icon-size-small\) svg:not([class*="size-"]) {
-    width: var(--icon-size-small);
-    height: var(--icon-size-small);
+  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-\(--toggle-common-icon-size\) svg:not([class*="size-"]) {
+    width: var(--toggle-common-icon-size);
+    height: var(--toggle-common-icon-size);
   }
 
   .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*="size-"]) {
@@ -3401,13 +5636,22 @@
     height: calc(var(--spacing) * 6);
   }
 
-  .group-data-\[variant\=custom\]\/accordion\:\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-\(--icon-size-small\):is(:where(.group\/accordion)[data-variant="custom"] *) svg:not([class*="size-"]), .group-data-\[variant\=default\]\/accordion\:\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-\(--icon-size-small\):is(:where(.group\/accordion)[data-variant="default"] *) svg:not([class*="size-"]) {
-    width: var(--icon-size-small);
-    height: var(--icon-size-small);
+  .group-data-\[variant\=custom\]\/accordion\:\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-\(--accordion-custom-icon-size\):is(:where(.group\/accordion)[data-variant="custom"] *) svg:not([class*="size-"]) {
+    width: var(--accordion-custom-icon-size);
+    height: var(--accordion-custom-icon-size);
   }
 
-  .\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-\(--icon-color-onbrand-default\) svg:not([class*="text-"]) {
-    color: var(--icon-color-onbrand-default);
+  .group-data-\[variant\=default\]\/accordion\:\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-\(--accordion-default-icon-size\):is(:where(.group\/accordion)[data-variant="default"] *) svg:not([class*="size-"]) {
+    width: var(--accordion-default-icon-size);
+    height: var(--accordion-default-icon-size);
+  }
+
+  .\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-\(--navigation-item-content-default-icon\) svg:not([class*="text-"]) {
+    color: var(--navigation-item-content-default-icon);
+  }
+
+  .\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-\(--navigation-item-default-icon\) svg:not([class*="text-"]) {
+    color: var(--navigation-item-default-icon);
   }
 
   .\[\&\:first-child\[data-selected\=true\]_button\]\:rounded-l-md:first-child[data-selected="true"] button {
@@ -3419,32 +5663,26 @@
     padding-right: calc(var(--spacing) * 0);
   }
 
-  .\[\.border-b\]\:border-\(--border-color-default\).border-b {
-    border-color: var(--border-color-default);
+  .\[\.border-b\]\:border-\(--card-common-border\).border-b {
+    border-color: var(--card-common-border);
   }
 
-  .\[\.border-b\]\:pb-component-padding-xl.border-b {
-    padding-bottom: var(--spacing-6);
+  .\[\.border-b\]\:pb-\(--card-common-padding-y\).border-b {
+    padding-bottom: var(--card-common-padding-y);
   }
 
-  .\[\.border-t\]\:border-\(--border-color-default\).border-t {
-    border-color: var(--border-color-default);
+  .\[\.border-t\]\:border-\(--card-common-border\).border-t {
+    border-color: var(--card-common-border);
   }
 
-  .\[\.border-t\]\:pt-component-padding-xl.border-t {
-    padding-top: var(--spacing-6);
+  .\[\.border-t\]\:pt-\(--card-common-padding-y\).border-t {
+    padding-top: var(--card-common-padding-y);
   }
 
   :is(.rtl\:\*\*\:\[\.rdp-button\\_next\>svg\]\:rotate-180:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) *):is(.rdp-button_next > svg), :is(.rtl\:\*\*\:\[\.rdp-button\\_previous\>svg\]\:rotate-180:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) *):is(.rdp-button_previous > svg) {
     rotate: 180deg;
   }
 
-  @media (hover: hover) {
-    .group-data-\[variant\=custom\]\/accordion\:\[data-state\=open\]\:hover\:\[\&_svg\]\:text-\(--icon-color-primary-default\):is(:where(.group\/accordion)[data-variant="custom"] *):is():hover svg, .group-data-\[variant\=default\]\/accordion\:\[data-state\=open\]\:hover\:\[\&_svg\]\:text-\(--icon-color-primary-default\):is(:where(.group\/accordion)[data-variant="default"] *):is():hover svg {
-      color: var(--icon-color-primary-default);
-    }
-  }
-
   :is(.\*\:\[span\]\:last\:flex > *):is(span):last-child {
     display: flex;
   }
@@ -3453,8 +5691,8 @@
     align-items: center;
   }
 
-  :is(.\*\:\[span\]\:last\:gap-component-gap-sm > *):is(span):last-child {
-    gap: var(--spacing-3);
+  :is(.\*\:\[span\]\:last\:gap-\(--dropdown-item-icon-gap\) > *):is(span):last-child {
+    gap: var(--dropdown-item-icon-gap);
   }
 
   .\[\&\:last-child\[data-selected\=true\]_button\]\:rounded-r-md:last-child[data-selected="true"] button {
@@ -3481,10 +5719,6 @@
     width: auto;
   }
 
-  .\[\&\>\[data-slot\=field-group\]\]\:gap-component-gap-md > [data-slot="field-group"] {
-    gap: var(--spacing-4);
-  }
-
   .\[\&\>\[data-slot\=field-label\]\]\:flex-auto > [data-slot="field-label"] {
     flex: auto;
   }
@@ -3518,55 +5752,55 @@
     text-underline-offset: 4px;
   }
 
-  .\[\&\>kbd\]\:rounded-\[calc\(var\(--radius\)-5px\)\] > kbd {
-    border-radius: calc(var(--radius)  - 5px);
+  .\[\&\>kbd\]\:rounded-\[calc\(var\(--input-common-radius\)-5px\)\] > kbd {
+    border-radius: calc(var(--input-common-radius)  - 5px);
   }
 
   .\[\&\>svg\]\:pointer-events-none > svg {
     pointer-events: none;
   }
 
-  .\[\&\>svg\]\:size-\(--icon-size-micro\) > svg {
-    width: var(--icon-size-micro);
-    height: var(--icon-size-micro);
+  .\[\&\>svg\]\:size-\(--badge-common-icon-size\) > svg {
+    width: var(--badge-common-icon-size);
+    height: var(--badge-common-icon-size);
   }
 
-  .\[\&\>svg\]\:size-\(--icon-size-small\) > svg {
-    width: var(--icon-size-small);
-    height: var(--icon-size-small);
+  .\[\&\>svg\]\:size-\(--calendar-container-icon-size\) > svg {
+    width: var(--calendar-container-icon-size);
+    height: var(--calendar-container-icon-size);
   }
 
-  .\[\&\>svg\]\:text-\(--icon-color-primary-default\) > svg {
-    color: var(--icon-color-primary-default);
+  .\[\&\>svg\]\:text-\(--input-solid-default-icon\) > svg {
+    color: var(--input-solid-default-icon);
   }
 
-  .group-data-\[variant\=outline\]\/input-group\:group-has-\[\[data-slot\~\=input-group-control\]\:not\(\:placeholder-shown\)\[aria-invalid\=false\]\]\/input-group\:\[\&\>svg\]\:text-\(--color-state-success-default\):is(:where(.group\/input-group)[data-variant="outline"] *):is(:where(.group\/input-group):has([data-slot~="input-group-control"]:not(:placeholder-shown)[aria-invalid="false"]) *) > svg {
-    color: var(--color-state-success-default);
+  .group-data-\[variant\=outline\]\/input-group\:group-has-\[\[data-slot\~\=input-group-control\]\:not\(\:placeholder-shown\)\[aria-invalid\=false\]\]\/input-group\:\[\&\>svg\]\:text-\(--input-outline-success-icon\):is(:where(.group\/input-group)[data-variant="outline"] *):is(:where(.group\/input-group):has([data-slot~="input-group-control"]:not(:placeholder-shown)[aria-invalid="false"]) *) > svg {
+    color: var(--input-outline-success-icon);
   }
 
-  .group-data-\[variant\=outline\]\/input-group\:group-has-\[\[data-slot\~\=input-group-control\]\:placeholder-shown\]\/input-group\:\[\&\>svg\]\:text-\(--icon-color-primary-default\):is(:where(.group\/input-group)[data-variant="outline"] *):is(:where(.group\/input-group):has([data-slot~="input-group-control"]:placeholder-shown) *) > svg {
-    color: var(--icon-color-primary-default);
+  .group-data-\[variant\=outline\]\/input-group\:group-has-\[\[data-slot\~\=input-group-control\]\:placeholder-shown\]\/input-group\:\[\&\>svg\]\:text-\(--input-outline-default-icon\):is(:where(.group\/input-group)[data-variant="outline"] *):is(:where(.group\/input-group):has([data-slot~="input-group-control"]:placeholder-shown) *) > svg {
+    color: var(--input-outline-default-icon);
   }
 
-  .group-data-\[variant\=outline\]\/input-group\:group-has-\[\[data-slot\~\=input-group-control\]\[aria-invalid\=true\]\]\/input-group\:\[\&\>svg\]\:text-\(--color-state-error-default\):is(:where(.group\/input-group)[data-variant="outline"] *):is(:where(.group\/input-group):has([data-slot~="input-group-control"][aria-invalid="true"]) *) > svg {
-    color: var(--color-state-error-default);
+  .group-data-\[variant\=outline\]\/input-group\:group-has-\[\[data-slot\~\=input-group-control\]\[aria-invalid\=true\]\]\/input-group\:\[\&\>svg\]\:text-\(--input-outline-fail-icon\):is(:where(.group\/input-group)[data-variant="outline"] *):is(:where(.group\/input-group):has([data-slot~="input-group-control"][aria-invalid="true"]) *) > svg {
+    color: var(--input-outline-fail-icon);
   }
 
-  .group-data-\[variant\=solid\]\/input-group\:group-has-\[\[data-slot\~\=input-group-control\]\:not\(\:placeholder-shown\)\[aria-invalid\=false\]\]\/input-group\:\[\&\>svg\]\:text-\(--color-state-success-default\):is(:where(.group\/input-group)[data-variant="solid"] *):is(:where(.group\/input-group):has([data-slot~="input-group-control"]:not(:placeholder-shown)[aria-invalid="false"]) *) > svg {
-    color: var(--color-state-success-default);
+  .group-data-\[variant\=solid\]\/input-group\:group-has-\[\[data-slot\~\=input-group-control\]\:not\(\:placeholder-shown\)\[aria-invalid\=false\]\]\/input-group\:\[\&\>svg\]\:text-\(--input-solid-success-icon\):is(:where(.group\/input-group)[data-variant="solid"] *):is(:where(.group\/input-group):has([data-slot~="input-group-control"]:not(:placeholder-shown)[aria-invalid="false"]) *) > svg {
+    color: var(--input-solid-success-icon);
   }
 
-  .group-data-\[variant\=solid\]\/input-group\:group-has-\[\[data-slot\~\=input-group-control\]\:placeholder-shown\]\/input-group\:\[\&\>svg\]\:text-\(--icon-color-primary-default\):is(:where(.group\/input-group)[data-variant="solid"] *):is(:where(.group\/input-group):has([data-slot~="input-group-control"]:placeholder-shown) *) > svg {
-    color: var(--icon-color-primary-default);
+  .group-data-\[variant\=solid\]\/input-group\:group-has-\[\[data-slot\~\=input-group-control\]\:placeholder-shown\]\/input-group\:\[\&\>svg\]\:text-\(--input-solid-default-icon\):is(:where(.group\/input-group)[data-variant="solid"] *):is(:where(.group\/input-group):has([data-slot~="input-group-control"]:placeholder-shown) *) > svg {
+    color: var(--input-solid-default-icon);
   }
 
-  .group-data-\[variant\=solid\]\/input-group\:group-has-\[\[data-slot\~\=input-group-control\]\[aria-invalid\=true\]\]\/input-group\:\[\&\>svg\]\:text-\(--color-state-error-default\):is(:where(.group\/input-group)[data-variant="solid"] *):is(:where(.group\/input-group):has([data-slot~="input-group-control"][aria-invalid="true"]) *) > svg {
-    color: var(--color-state-error-default);
+  .group-data-\[variant\=solid\]\/input-group\:group-has-\[\[data-slot\~\=input-group-control\]\[aria-invalid\=true\]\]\/input-group\:\[\&\>svg\]\:text-\(--input-solid-fail-icon\):is(:where(.group\/input-group)[data-variant="solid"] *):is(:where(.group\/input-group):has([data-slot~="input-group-control"][aria-invalid="true"]) *) > svg {
+    color: var(--input-solid-fail-icon);
   }
 
-  .\[\&\>svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-\(--icon-size-small\) > svg:not([class*="size-"]) {
-    width: var(--icon-size-small);
-    height: var(--icon-size-small);
+  .\[\&\>svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-\(--input-common-icon-size-sm\) > svg:not([class*="size-"]) {
+    width: var(--input-common-icon-size-sm);
+    height: var(--input-common-icon-size-sm);
   }
 
   .\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state="open"] > svg {