@saitec/ui 0.1.0

package/lib/core/themes/light.css

@@ -0,0 +1,210 @@
+/*
+ * SUI Light Theme
+ *
+ * Semantic color tokens for the light theme.
+ *
+ * Components should never reference palette tokens directly.
+ * They should use these semantic tokens or component-specific
+ * tokens defined in components.css.
+ */
+
+:root,
+[data-theme="light"] {
+    color-scheme: light;
+
+
+    /*
+     * Brand / Primary
+     */
+
+    --sui-color-primary:
+        var(--sui-palette-brand-600);
+
+    --sui-color-primary-hover:
+        var(--sui-palette-brand-700);
+
+    --sui-color-primary-active:
+        var(--sui-palette-brand-800);
+
+    --sui-color-on-primary:
+        var(--sui-palette-neutral-0);
+
+
+    /*
+     * Page
+     */
+
+    --sui-color-background:
+        var(--sui-palette-neutral-50);
+
+
+    /*
+     * Surfaces
+     */
+
+    --sui-color-surface:
+        var(--sui-palette-neutral-0);
+
+    --sui-color-surface-alt:
+        var(--sui-palette-neutral-100);
+
+    --sui-color-surface-hover:
+        var(--sui-palette-neutral-100);
+
+    --sui-color-surface-active:
+        var(--sui-palette-neutral-200);
+
+
+    /*
+     * Content
+     */
+
+    --sui-color-content:
+        var(--sui-palette-neutral-900);
+
+    --sui-color-content-muted:
+        var(--sui-palette-neutral-600);
+
+    --sui-color-content-disabled:
+        var(--sui-palette-neutral-400);
+
+    --sui-color-content-inverse:
+        var(--sui-palette-neutral-0);
+
+
+    /*
+     * Borders
+     */
+
+    --sui-color-border:
+        var(--sui-palette-neutral-300);
+
+    --sui-color-border-strong:
+        var(--sui-palette-neutral-400);
+
+
+    /*
+     * Focus
+     */
+
+    --sui-color-focus:
+        var(--sui-palette-brand-500);
+
+
+    /*
+     * Selection
+     */
+
+    --sui-color-selection-background:
+        var(--sui-palette-brand-50);
+
+    --sui-color-selection-background-hover:
+        var(--sui-palette-brand-100);
+
+    --sui-color-selection-text:
+        var(--sui-palette-brand-900);
+
+
+    /*
+     * Success
+     */
+
+    --sui-color-success:
+        var(--sui-palette-success-600);
+
+    --sui-color-success-hover:
+        var(--sui-palette-success-700);
+
+    --sui-color-success-active:
+        var(--sui-palette-success-700);
+
+    --sui-color-on-success:
+        var(--sui-palette-neutral-0);
+
+    --sui-color-success-surface:
+        var(--sui-palette-success-100);
+
+    --sui-color-success-surface-text:
+        var(--sui-palette-success-700);
+
+    --sui-color-success-border:
+        var(--sui-palette-success-400);
+
+
+    /*
+     * Warning
+     */
+
+    --sui-color-warning:
+        var(--sui-palette-warning-500);
+
+    --sui-color-warning-hover:
+        var(--sui-palette-warning-600);
+
+    --sui-color-warning-active:
+        var(--sui-palette-warning-700);
+
+    --sui-color-on-warning:
+        var(--sui-palette-neutral-950);
+
+    --sui-color-warning-surface:
+        var(--sui-palette-warning-100);
+
+    --sui-color-warning-surface-text:
+        var(--sui-palette-warning-700);
+
+    --sui-color-warning-border:
+        var(--sui-palette-warning-400);
+
+
+    /*
+     * Danger
+     */
+
+    --sui-color-danger:
+        var(--sui-palette-danger-600);
+
+    --sui-color-danger-hover:
+        var(--sui-palette-danger-700);
+
+    --sui-color-danger-active:
+        var(--sui-palette-danger-700);
+
+    --sui-color-on-danger:
+        var(--sui-palette-neutral-0);
+
+    --sui-color-danger-surface:
+        var(--sui-palette-danger-100);
+
+    --sui-color-danger-surface-text:
+        var(--sui-palette-danger-700);
+
+    --sui-color-danger-border:
+        var(--sui-palette-danger-400);
+
+
+    /*
+     * Information
+     */
+
+    --sui-color-info:
+        var(--sui-palette-info-600);
+
+    --sui-color-info-hover:
+        var(--sui-palette-info-700);
+
+    --sui-color-info-active:
+        var(--sui-palette-info-700);
+
+    --sui-color-on-info:
+        var(--sui-palette-neutral-0);
+
+    --sui-color-info-surface:
+        var(--sui-palette-info-100);
+
+    --sui-color-info-surface-text:
+        var(--sui-palette-info-700);
+
+    --sui-color-info-border:
+        var(--sui-palette-info-400);
+}

package/lib/core/tokens/components/autocomplete.css

@@ -0,0 +1,26 @@
+/* SUI Autocomplete Tokens */
+
+:root {
+    --sui-autocomplete-height: var(--sui-control-height-md);
+    --sui-autocomplete-padding-x: var(--sui-control-padding-x-md);
+    --sui-autocomplete-radius: var(--sui-control-radius);
+    --sui-autocomplete-border-width: var(--sui-border-width);
+    --sui-autocomplete-background: var(--sui-color-surface);
+    --sui-autocomplete-text: var(--sui-color-content);
+    --sui-autocomplete-placeholder: var(--sui-color-content-muted);
+    --sui-autocomplete-border: var(--sui-color-border);
+    --sui-autocomplete-border-hover: var(--sui-color-border-strong);
+    --sui-autocomplete-border-focus: var(--sui-color-primary);
+    --sui-autocomplete-focus-color: var(--sui-color-focus);
+
+    --sui-autocomplete-panel-background: var(--sui-color-surface);
+    --sui-autocomplete-panel-border: var(--sui-color-border);
+    --sui-autocomplete-panel-radius: var(--sui-control-radius);
+    --sui-autocomplete-panel-shadow: var(--sui-shadow-lg);
+    --sui-autocomplete-panel-z-index: var(--sui-z-dropdown);
+    --sui-autocomplete-option-text: var(--sui-color-content);
+    --sui-autocomplete-option-background-hover: var(--sui-color-surface-hover);
+    --sui-autocomplete-option-background-active: var(--sui-color-selection-background);
+    --sui-autocomplete-option-disabled-text: var(--sui-color-content-disabled);
+    --sui-autocomplete-empty-text: var(--sui-color-content-muted);
+}

package/lib/core/tokens/components/badge.css

@@ -0,0 +1,26 @@
+/* SUI Badge Tokens */
+
+:root {
+    --sui-badge-radius: 9999px;
+    --sui-badge-font-weight: var(--sui-font-weight-semibold);
+
+    --sui-badge-padding-x-sm: var(--sui-space-2);
+    --sui-badge-padding-x-md: var(--sui-space-2);
+    --sui-badge-padding-x-lg: var(--sui-space-3);
+    --sui-badge-font-size-sm: var(--sui-control-font-size-xs);
+    --sui-badge-font-size-md: var(--sui-control-font-size-sm);
+    --sui-badge-font-size-lg: var(--sui-control-font-size-md);
+
+    --sui-badge-primary-background: var(--sui-color-primary);
+    --sui-badge-primary-text: var(--sui-color-on-primary);
+    --sui-badge-secondary-background: var(--sui-color-surface-active);
+    --sui-badge-secondary-text: var(--sui-color-content);
+    --sui-badge-success-background: var(--sui-color-success);
+    --sui-badge-success-text: var(--sui-color-on-success);
+    --sui-badge-info-background: var(--sui-color-info);
+    --sui-badge-info-text: var(--sui-color-on-info);
+    --sui-badge-warning-background: var(--sui-color-warning);
+    --sui-badge-warning-text: var(--sui-color-on-warning);
+    --sui-badge-danger-background: var(--sui-color-danger);
+    --sui-badge-danger-text: var(--sui-color-on-danger);
+}

package/lib/core/tokens/components/button.css

@@ -0,0 +1,90 @@
+/* SUI Button Tokens */
+
+:root {
+    /* Layout */
+    --sui-button-height-xs: var(--sui-control-height-xs);
+    --sui-button-height-sm: var(--sui-control-height-sm);
+    --sui-button-height-md: var(--sui-control-height-md);
+    --sui-button-height-lg: var(--sui-control-height-lg);
+    --sui-button-height-xl: var(--sui-control-height-xl);
+
+    --sui-button-padding-x-xs: var(--sui-control-padding-x-xs);
+    --sui-button-padding-x-sm: var(--sui-control-padding-x-sm);
+    --sui-button-padding-x-md: var(--sui-control-padding-x-md);
+    --sui-button-padding-x-lg: var(--sui-control-padding-x-lg);
+    --sui-button-padding-x-xl: var(--sui-control-padding-x-xl);
+
+    --sui-button-gap: var(--sui-space-2);
+    --sui-button-radius: var(--sui-control-radius);
+    --sui-button-border-width: var(--sui-border-width);
+    --sui-button-font-weight: var(--sui-font-weight-semibold);
+
+    /* Common states */
+    --sui-button-focus-color: var(--sui-color-focus);
+    --sui-button-disabled-opacity: var(--sui-disabled-opacity);
+
+    /* Primary */
+    --sui-button-primary-background: var(--sui-color-primary);
+    --sui-button-primary-background-hover: var(--sui-color-primary-hover);
+    --sui-button-primary-background-active: var(--sui-color-primary-active);
+    --sui-button-primary-text: var(--sui-color-on-primary);
+    --sui-button-primary-border: var(--sui-color-primary);
+    --sui-button-primary-border-hover: var(--sui-color-primary-hover);
+    --sui-button-primary-border-active: var(--sui-color-primary-active);
+
+    /* Secondary */
+    --sui-button-secondary-background: var(--sui-color-surface);
+    --sui-button-secondary-background-hover: var(--sui-color-surface-hover);
+    --sui-button-secondary-background-active: var(--sui-color-surface-active);
+    --sui-button-secondary-text: var(--sui-color-content);
+    --sui-button-secondary-border: var(--sui-color-border-strong);
+    --sui-button-secondary-border-hover: var(--sui-color-border-strong);
+    --sui-button-secondary-border-active: var(--sui-color-border-strong);
+
+    /* Success */
+    --sui-button-success-background: var(--sui-color-success);
+    --sui-button-success-background-hover: var(--sui-color-success-hover);
+    --sui-button-success-background-active: var(--sui-color-success-active);
+    --sui-button-success-text: var(--sui-color-on-success);
+    --sui-button-success-border: var(--sui-color-success);
+    --sui-button-success-border-hover: var(--sui-color-success-hover);
+    --sui-button-success-border-active: var(--sui-color-success-active);
+
+    /* Info */
+    --sui-button-info-background: var(--sui-color-info);
+    --sui-button-info-background-hover: var(--sui-color-info-hover);
+    --sui-button-info-background-active: var(--sui-color-info-active);
+    --sui-button-info-text: var(--sui-color-on-info);
+    --sui-button-info-border: var(--sui-color-info);
+    --sui-button-info-border-hover: var(--sui-color-info-hover);
+    --sui-button-info-border-active: var(--sui-color-info-active);
+
+    /* Warning */
+    --sui-button-warning-background: var(--sui-color-warning);
+    --sui-button-warning-background-hover: var(--sui-color-warning-hover);
+    --sui-button-warning-background-active: var(--sui-color-warning-active);
+    --sui-button-warning-text: var(--sui-color-on-warning);
+    --sui-button-warning-border: var(--sui-color-warning);
+    --sui-button-warning-border-hover: var(--sui-color-warning-hover);
+    --sui-button-warning-border-active: var(--sui-color-warning-active);
+
+    /* Danger */
+    --sui-button-danger-background: var(--sui-color-danger);
+    --sui-button-danger-background-hover: var(--sui-color-danger-hover);
+    --sui-button-danger-background-active: var(--sui-color-danger-active);
+    --sui-button-danger-text: var(--sui-color-on-danger);
+    --sui-button-danger-border: var(--sui-color-danger);
+    --sui-button-danger-border-hover: var(--sui-color-danger-hover);
+    --sui-button-danger-border-active: var(--sui-color-danger-active);
+
+    /* Ghost */
+    --sui-button-ghost-background: transparent;
+    --sui-button-ghost-background-hover: var(--sui-color-surface-hover);
+    --sui-button-ghost-background-active: var(--sui-color-surface-active);
+    --sui-button-ghost-text: var(--sui-color-content);
+    --sui-button-ghost-border: transparent;
+
+    /* Spinner */
+    --sui-button-spinner-border-width: 2px;
+    --sui-button-spinner-duration: 600ms;
+}

package/lib/core/tokens/components/card.css

@@ -0,0 +1,15 @@
+/* SUI Card Tokens */
+
+:root {
+    --sui-card-background: var(--sui-color-surface);
+    --sui-card-text: var(--sui-color-content);
+    --sui-card-border: var(--sui-color-border);
+    --sui-card-border-width: var(--sui-border-width);
+    --sui-card-radius: var(--sui-container-radius);
+    --sui-card-shadow: var(--sui-container-shadow);
+    --sui-card-padding: var(--sui-container-padding-lg);
+    --sui-card-gap: var(--sui-space-4);
+    --sui-card-title-text: var(--sui-color-content);
+    --sui-card-title-font-weight: var(--sui-font-weight-semibold);
+    --sui-card-subtitle-text: var(--sui-color-content-muted);
+}

package/lib/core/tokens/components/checkbox.css

@@ -0,0 +1,17 @@
+/* SUI Checkbox Tokens */
+
+:root {
+    --sui-checkbox-size: 1rem;
+    --sui-checkbox-radius: var(--sui-radius-sm);
+    --sui-checkbox-border-width: var(--sui-border-width);
+    --sui-checkbox-background: var(--sui-color-surface);
+    --sui-checkbox-border: var(--sui-color-border-strong);
+    --sui-checkbox-border-hover: var(--sui-color-primary);
+    --sui-checkbox-checked-background: var(--sui-color-primary);
+    --sui-checkbox-checked-border: var(--sui-color-primary);
+    --sui-checkbox-check-text: var(--sui-color-on-primary);
+    --sui-checkbox-focus-color: var(--sui-color-focus);
+    --sui-checkbox-label-text: var(--sui-color-content);
+    --sui-checkbox-gap: var(--sui-space-2);
+    --sui-checkbox-disabled-opacity: var(--sui-disabled-opacity);
+}

package/lib/core/tokens/components/chip.css

@@ -0,0 +1,16 @@
+/* SUI Chip Tokens */
+
+:root {
+    --sui-chip-height: var(--sui-control-height-sm);
+    --sui-chip-padding-x: var(--sui-space-3);
+    --sui-chip-gap: var(--sui-space-2);
+    --sui-chip-radius: 9999px;
+    --sui-chip-background: var(--sui-color-surface-alt);
+    --sui-chip-text: var(--sui-color-content);
+    --sui-chip-border: var(--sui-color-border);
+    --sui-chip-border-width: var(--sui-border-width);
+    --sui-chip-remove-text: var(--sui-color-content-muted);
+    --sui-chip-remove-text-hover: var(--sui-color-danger);
+    --sui-chip-remove-background-hover: var(--sui-color-danger-surface);
+    --sui-chip-disabled-opacity: var(--sui-disabled-opacity);
+}

package/lib/core/tokens/components/confirm.css

@@ -0,0 +1,8 @@
+/* SUI Confirm Tokens */
+
+:root {
+    --sui-confirm-gap: var(--sui-space-4);
+    --sui-confirm-message-text: var(--sui-color-content);
+    --sui-confirm-message-font-size: var(--sui-control-font-size-md);
+    --sui-confirm-actions-gap: var(--sui-space-2);
+}

package/lib/core/tokens/components/date-picker.css

@@ -0,0 +1,18 @@
+/* SUI Date Picker Tokens */
+
+:root {
+    --sui-date-picker-height: var(--sui-control-height-md);
+    --sui-date-picker-padding-x: var(--sui-control-padding-x-md);
+    --sui-date-picker-radius: var(--sui-control-radius);
+    --sui-date-picker-border-width: var(--sui-border-width);
+    --sui-date-picker-background: var(--sui-color-surface);
+    --sui-date-picker-text: var(--sui-color-content);
+    --sui-date-picker-placeholder: var(--sui-color-content-muted);
+    --sui-date-picker-border: var(--sui-color-border);
+    --sui-date-picker-border-hover: var(--sui-color-border-strong);
+    --sui-date-picker-border-focus: var(--sui-color-primary);
+    --sui-date-picker-focus-color: var(--sui-color-focus);
+    --sui-date-picker-disabled-background: var(--sui-color-surface-alt);
+    --sui-date-picker-disabled-text: var(--sui-color-content-disabled);
+    --sui-date-picker-disabled-opacity: var(--sui-disabled-opacity);
+}

package/lib/core/tokens/components/dialog.css

@@ -0,0 +1,18 @@
+/* SUI Dialog Tokens */
+
+:root {
+    --sui-dialog-background: var(--sui-color-surface);
+    --sui-dialog-text: var(--sui-color-content);
+    --sui-dialog-border: var(--sui-color-border);
+    --sui-dialog-border-width: var(--sui-border-width);
+    --sui-dialog-radius: var(--sui-container-radius);
+    --sui-dialog-shadow: var(--sui-shadow-xl);
+    --sui-dialog-header-padding: var(--sui-container-padding-md);
+    --sui-dialog-content-padding: var(--sui-container-padding-lg);
+    --sui-dialog-footer-padding: var(--sui-container-padding-md);
+    --sui-dialog-overlay-background: rgb(0 0 0 / 45%);
+    --sui-dialog-close-text: var(--sui-color-content-muted);
+    --sui-dialog-close-background-hover: var(--sui-color-surface-hover);
+    --sui-dialog-duration: var(--sui-duration-normal);
+    --sui-dialog-z-index: var(--sui-z-dialog);
+}

package/lib/core/tokens/components/divider.css

@@ -0,0 +1,9 @@
+/* SUI Divider Tokens */
+
+:root {
+    --sui-divider-color: var(--sui-color-border);
+    --sui-divider-width: var(--sui-border-width);
+    --sui-divider-gap: var(--sui-space-3);
+    --sui-divider-text: var(--sui-color-content-muted);
+    --sui-divider-font-size: var(--sui-control-font-size-xs);
+}

package/lib/core/tokens/components/drawer.css

@@ -0,0 +1,16 @@
+/* SUI Drawer Tokens */
+
+:root {
+    --sui-drawer-background: var(--sui-color-surface);
+    --sui-drawer-text: var(--sui-color-content);
+    --sui-drawer-border: var(--sui-color-border);
+    --sui-drawer-shadow: var(--sui-shadow-xl);
+    --sui-drawer-header-padding: var(--sui-container-padding-md);
+    --sui-drawer-content-padding: var(--sui-container-padding-lg);
+    --sui-drawer-footer-padding: var(--sui-container-padding-md);
+    --sui-drawer-overlay-background: rgb(0 0 0 / 45%);
+    --sui-drawer-close-text: var(--sui-color-content-muted);
+    --sui-drawer-close-background-hover: var(--sui-color-surface-hover);
+    --sui-drawer-duration: var(--sui-duration-slow);
+    --sui-drawer-z-index: var(--sui-z-overlay);
+}

package/lib/core/tokens/components/fieldset.css

@@ -0,0 +1,15 @@
+/* SUI Fieldset Tokens */
+
+:root {
+    --sui-fieldset-background: var(--sui-color-surface);
+    --sui-fieldset-text: var(--sui-color-content);
+    --sui-fieldset-border: var(--sui-color-border);
+    --sui-fieldset-border-width: var(--sui-border-width);
+    --sui-fieldset-radius: var(--sui-container-radius);
+    --sui-fieldset-padding: var(--sui-container-padding-lg);
+    --sui-fieldset-legend-background: var(--sui-color-surface);
+    --sui-fieldset-legend-text: var(--sui-color-content);
+    --sui-fieldset-legend-font-weight: var(--sui-font-weight-semibold);
+    --sui-fieldset-legend-gap: var(--sui-space-2);
+    --sui-fieldset-disabled-opacity: var(--sui-disabled-opacity);
+}

package/lib/core/tokens/components/file-upload.css

@@ -0,0 +1,31 @@
+/* SUI File Upload Tokens */
+
+:root {
+    --sui-file-upload-color: var(--sui-color-content);
+    --sui-file-upload-background: var(--sui-color-surface);
+    --sui-file-upload-border-color: var(--sui-color-border);
+    --sui-file-upload-border-width: var(--sui-border-width-strong);
+    --sui-file-upload-border-radius: var(--sui-container-radius);
+    --sui-file-upload-hover-border-color: var(--sui-color-border-strong);
+    --sui-file-upload-hover-background: var(--sui-color-surface-hover);
+    --sui-file-upload-active-border-color: var(--sui-color-primary);
+    --sui-file-upload-active-background: var(--sui-color-selection-background);
+    --sui-file-upload-focus-color: var(--sui-color-focus);
+    --sui-file-upload-muted-color: var(--sui-color-content-muted);
+
+    --sui-file-upload-button-color: var(--sui-color-on-primary);
+    --sui-file-upload-button-background: var(--sui-color-primary);
+    --sui-file-upload-button-hover-background: var(--sui-color-primary-hover);
+
+    --sui-file-upload-file-background: var(--sui-color-surface-alt);
+    --sui-file-upload-file-border-color: var(--sui-color-border);
+    --sui-file-upload-file-color: var(--sui-color-content);
+    --sui-file-upload-remove-color: var(--sui-color-content-muted);
+    --sui-file-upload-remove-hover-color: var(--sui-color-danger-surface-text);
+    --sui-file-upload-remove-hover-background: var(--sui-color-danger-surface);
+
+    --sui-file-upload-clear-color: var(--sui-color-content);
+    --sui-file-upload-clear-background: var(--sui-color-surface-alt);
+    --sui-file-upload-clear-hover-background: var(--sui-color-surface-hover);
+    --sui-file-upload-disabled-opacity: var(--sui-disabled-opacity);
+}

package/lib/core/tokens/components/form-field.css

@@ -0,0 +1,14 @@
+/* SUI Form Field Tokens */
+
+:root {
+    --sui-form-field-gap: var(--sui-space-2);
+    --sui-form-field-label-gap: var(--sui-space-1);
+    --sui-form-field-label-text: var(--sui-color-content);
+    --sui-form-field-label-font-size: var(--sui-control-font-size-sm);
+    --sui-form-field-label-font-weight: var(--sui-font-weight-medium);
+    --sui-form-field-required-text: var(--sui-color-danger);
+    --sui-form-field-hint-text: var(--sui-color-content-muted);
+    --sui-form-field-error-text: var(--sui-color-danger);
+    --sui-form-field-help-font-size: var(--sui-control-font-size-xs);
+    --sui-form-field-disabled-opacity: var(--sui-disabled-opacity);
+}

package/lib/core/tokens/components/input-number.css

@@ -0,0 +1,20 @@
+/* SUI Input Number Tokens */
+
+:root {
+    --sui-input-number-height: var(--sui-control-height-md);
+    --sui-input-number-padding-x: var(--sui-control-padding-x-md);
+    --sui-input-number-radius: var(--sui-control-radius);
+    --sui-input-number-border-width: var(--sui-border-width);
+    --sui-input-number-background: var(--sui-color-surface);
+    --sui-input-number-text: var(--sui-color-content);
+    --sui-input-number-placeholder: var(--sui-color-content-muted);
+    --sui-input-number-border: var(--sui-color-border);
+    --sui-input-number-border-hover: var(--sui-color-border-strong);
+    --sui-input-number-border-focus: var(--sui-color-primary);
+    --sui-input-number-focus-color: var(--sui-color-focus);
+    --sui-input-number-button-background: var(--sui-color-surface-alt);
+    --sui-input-number-button-background-hover: var(--sui-color-surface-hover);
+    --sui-input-number-button-text: var(--sui-color-content);
+    --sui-input-number-button-border: var(--sui-color-border);
+    --sui-input-number-disabled-opacity: var(--sui-disabled-opacity);
+}

package/lib/core/tokens/components/input.css

@@ -0,0 +1,31 @@
+/* SUI Input Tokens */
+
+:root {
+    --sui-input-height-xs: var(--sui-control-height-xs);
+    --sui-input-height-sm: var(--sui-control-height-sm);
+    --sui-input-height-md: var(--sui-control-height-md);
+    --sui-input-height-lg: var(--sui-control-height-lg);
+    --sui-input-height-xl: var(--sui-control-height-xl);
+
+    --sui-input-padding-x-xs: var(--sui-control-padding-x-xs);
+    --sui-input-padding-x-sm: var(--sui-control-padding-x-sm);
+    --sui-input-padding-x-md: var(--sui-control-padding-x-md);
+    --sui-input-padding-x-lg: var(--sui-control-padding-x-lg);
+    --sui-input-padding-x-xl: var(--sui-control-padding-x-xl);
+    --sui-input-padding-x: var(--sui-input-padding-x-md);
+
+    --sui-input-radius: var(--sui-control-radius);
+    --sui-input-border-width: var(--sui-border-width);
+    --sui-input-background: var(--sui-color-surface);
+    --sui-input-text: var(--sui-color-content);
+    --sui-input-placeholder: var(--sui-color-content-muted);
+    --sui-input-border: var(--sui-color-border);
+    --sui-input-border-hover: var(--sui-color-border-strong);
+    --sui-input-border-focus: var(--sui-color-primary);
+    --sui-input-focus-color: var(--sui-color-focus);
+    --sui-input-border-invalid: var(--sui-color-danger);
+    --sui-input-error-text: var(--sui-color-danger);
+    --sui-input-disabled-background: var(--sui-color-surface-alt);
+    --sui-input-disabled-text: var(--sui-color-content-disabled);
+    --sui-input-disabled-opacity: var(--sui-disabled-opacity);
+}

package/lib/core/tokens/components/menu.css

@@ -0,0 +1,19 @@
+/* SUI Menu Tokens */
+
+:root {
+    --sui-menu-min-width: 12rem;
+    --sui-menu-background: var(--sui-color-surface);
+    --sui-menu-text: var(--sui-color-content);
+    --sui-menu-border: var(--sui-color-border);
+    --sui-menu-border-width: var(--sui-border-width);
+    --sui-menu-radius: var(--sui-control-radius);
+    --sui-menu-shadow: var(--sui-shadow-lg);
+    --sui-menu-padding: var(--sui-space-1);
+    --sui-menu-item-padding-x: var(--sui-space-3);
+    --sui-menu-item-padding-y: var(--sui-space-2);
+    --sui-menu-item-radius: var(--sui-radius-sm);
+    --sui-menu-item-background-hover: var(--sui-color-surface-hover);
+    --sui-menu-item-background-active: var(--sui-color-selection-background);
+    --sui-menu-item-disabled-text: var(--sui-color-content-disabled);
+    --sui-menu-separator: var(--sui-color-border);
+}

package/lib/core/tokens/components/menubar.css

@@ -0,0 +1,18 @@
+/* SUI Menubar Tokens */
+
+:root {
+    --sui-menubar-background: var(--sui-color-surface);
+    --sui-menubar-text: var(--sui-color-content);
+    --sui-menubar-border: var(--sui-color-border);
+    --sui-menubar-border-width: var(--sui-border-width);
+    --sui-menubar-radius: var(--sui-container-radius);
+    --sui-menubar-padding: var(--sui-space-2);
+    --sui-menubar-gap: var(--sui-space-1);
+    --sui-menubar-item-padding-x: var(--sui-space-3);
+    --sui-menubar-item-padding-y: var(--sui-space-2);
+    --sui-menubar-item-radius: var(--sui-radius-sm);
+    --sui-menubar-item-background-hover: var(--sui-color-surface-hover);
+    --sui-menubar-item-background-active: var(--sui-color-selection-background);
+    --sui-menubar-dropdown-shadow: var(--sui-shadow-lg);
+    --sui-menubar-z-index: var(--sui-z-dropdown);
+}

package/lib/core/tokens/components/message.css

@@ -0,0 +1,29 @@
+/* SUI Message Tokens */
+
+:root {
+    --sui-message-radius: var(--sui-control-radius);
+    --sui-message-border-width: var(--sui-border-width);
+    --sui-message-padding-x: var(--sui-space-3);
+    --sui-message-padding-y: var(--sui-space-3);
+    --sui-message-gap: var(--sui-space-2);
+
+    --sui-message-secondary-background: var(--sui-color-surface-alt);
+    --sui-message-secondary-text: var(--sui-color-content);
+    --sui-message-secondary-border: var(--sui-color-border);
+
+    --sui-message-success-background: var(--sui-color-success-surface);
+    --sui-message-success-text: var(--sui-color-success-surface-text);
+    --sui-message-success-border: var(--sui-color-success-border);
+
+    --sui-message-info-background: var(--sui-color-info-surface);
+    --sui-message-info-text: var(--sui-color-info-surface-text);
+    --sui-message-info-border: var(--sui-color-info-border);
+
+    --sui-message-warning-background: var(--sui-color-warning-surface);
+    --sui-message-warning-text: var(--sui-color-warning-surface-text);
+    --sui-message-warning-border: var(--sui-color-warning-border);
+
+    --sui-message-danger-background: var(--sui-color-danger-surface);
+    --sui-message-danger-text: var(--sui-color-danger-surface-text);
+    --sui-message-danger-border: var(--sui-color-danger-border);
+}