@plexui/ui 0.19.0 → 0.20.0

package/dist/es/styles/variables-components.css

@@ -1,626 +1 @@
-@layer theme {
-  :root,
-  :where([data-theme]) {
-    /* =============================================
-      Alert
-    ============================================= */
-    --alert-border-radius: var(--radius-xl);
-    --alert-gap: calc(var(--spacing) * 3);
-    --alert-gutter: calc(var(--spacing) * 4);
-    --alert-font-size: var(--font-text-sm-size);
-    --alert-line-height: var(--font-text-sm-line-height);
-    --alert-title-font-weight: var(--font-weight-semibold);
-
-    /* =============================================
-      Avatar
-    ============================================= */
-    --avatar-radius: var(--radius-full);
-    --avatar-size: 28px;
-    --avatar-font-size-scaling: 0.5;
-    --avatar-overflow-font-size-scaling-one: 0.45;
-    --avatar-overflow-font-size-scaling-two: 0.37;
-    --avatar-overflow-font-size-scaling-three: 0.3;
-
-    /* =============================================
-      AvatarGroup
-    ============================================= */
-    --avatar-group-cutout-width: 3px;
-    --avatar-group-cutout-color: var(--color-surface);
-    --avatar-group-spacing: -8px;
-
-    /* =============================================
-      Badge
-    ============================================= */
-    --badge-gutter-2xs: 0.1875rem;
-    /* 3px */
-    --badge-gutter-xs: 0.25rem;
-    /* 4px */
-    --badge-gutter-sm: calc(var(--control-gutter-2xs) - 1px);
-    --badge-gutter-md: var(--control-gutter-2xs);
-    --badge-gutter-lg: var(--control-gutter-xs);
-    --badge-size-2xs: 1rem;
-    /* 16px */
-    --badge-size-xs: 1.125rem;
-    /* 18px */
-    --badge-size-sm: calc(var(--control-size-3xs) - 2px);
-    --badge-size-md: var(--control-size-3xs);
-    --badge-size-lg: var(--control-size-2xs);
-    --badge-radius-2xs: var(--radius-2xs);
-    --badge-radius-xs: var(--radius-2xs);
-    --badge-radius-sm: var(--radius-xs);
-    --badge-radius-md: var(--radius-xs);
-    --badge-radius-lg: var(--radius-sm);
-    --badge-font-size-2xs: var(--font-text-xs-size);
-    --badge-font-size-xs: var(--font-text-xs-size);
-    --badge-font-size-sm: var(--font-text-xs-size);
-    --badge-font-size-md: var(--font-text-sm-size);
-    --badge-font-size-lg: var(--font-text-sm-size);
-    --badge-tracking-2xs: var(--tracking-wide);
-    --badge-tracking-xs: var(--tracking-wide);
-    --badge-tracking-sm: var(--tracking-wide);
-    --badge-tracking-md: var(--tracking-normal);
-    --badge-tracking-lg: var(--tracking-normal);
-    --badge-font-weight-2xs: var(--font-weight-semibold);
-    --badge-font-weight-xs: var(--font-weight-semibold);
-    --badge-font-weight-sm: var(--font-weight-semibold);
-    --badge-font-weight-md: var(--font-weight-semibold);
-    --badge-font-weight-lg: var(--font-weight-semibold);
-    --badge-icon-font-size-2xs: var(--font-text-xs-size);
-    --badge-icon-font-size-xs: var(--font-text-xs-size);
-    --badge-icon-font-size-sm: var(--font-text-xs-size);
-    --badge-icon-font-size-md: var(--font-text-md-size);
-    --badge-icon-font-size-lg: var(--font-text-md-size);
-    --badge-indicator-size-2xs: 0.625rem;
-    /* 10px */
-    --badge-indicator-size-xs: 0.625rem;
-    /* 10px */
-    --badge-indicator-size-sm: var(--font-text-xs-size);
-    --badge-indicator-size-md: var(--font-text-xs-size);
-    --badge-indicator-size-lg: var(--font-text-sm-size);
-
-    /* =============================================
-      Button
-    ============================================= */
-    --button-gap-sm: 3px;
-    --button-gap-md: 4px;
-    --button-gap-lg: 6px;
-    --button-font-weight: var(--font-weight-medium);
-
-    /* =============================================
-      Card
-    ============================================= */
-    --card-radius: var(--radius-xl);
-    --card-background: var(--color-surface);
-    --card-background-hover: var(--color-surface-secondary);
-    --card-border-color: var(--color-border);
-    --card-border-color-hover: var(--color-border-primary-outline-hover);
-    --card-text-color: var(--color-text);
-    --card-font-size: var(--font-text-sm-size);
-    --card-title-color: var(--color-text);
-    --card-title-font-size: var(--font-heading-xs-size);
-    --card-title-font-weight: var(--font-weight-semibold);
-    --card-description-color: var(--color-text-tertiary);
-    --card-description-font-size: var(--font-text-sm-size);
-
-    /* =============================================
-      Label
-    ============================================= */
-    --label-color: var(--color-text);
-    --label-font-size: var(--font-text-sm-size);
-    --label-font-weight: var(--font-weight-medium);
-    --label-line-height: 1;
-
-    /* =============================================
-      Progress
-    ============================================= */
-    --progress-height: 4px;
-    --progress-radius: var(--radius-full);
-    --progress-track-color: var(--color-background-secondary-soft);
-    --progress-indicator-color: var(--color-text);
-    --progress-transition-duration: var(--transition-duration-basic);
-    --progress-transition-ease: var(--transition-ease-basic);
-    --progress-indeterminate-duration: 1.5s;
-
-    /* =============================================
-      Separator
-    ============================================= */
-    --separator-color: var(--color-border);
-    --separator-thickness: 1px;
-
-    /* =============================================
-      ButtonGroup
-    ============================================= */
-    --button-group-nested-gap: calc(var(--spacing) * 2);
-    --button-group-separator-color: var(--color-border-strong, var(--color-border));
-    --button-group-text-background: var(--color-background-secondary-soft);
-    --button-group-text-color: var(--color-text-primary);
-    --button-group-text-border-color: var(--color-border-secondary-outline, var(--color-border));
-    --button-group-text-font-size: var(--font-text-sm-size);
-    --button-group-text-font-weight: var(--font-weight-medium);
-
-    /* =============================================
-      Accordion
-    ============================================= */
-    --accordion-item-divider-color: var(--color-border);
-    --accordion-item-divider-width: 1px;
-    --accordion-item-disabled-opacity: 0.5;
-    --accordion-trigger-color: var(--color-text);
-    --accordion-trigger-font-size: var(--font-text-sm-size);
-    --accordion-trigger-font-weight: var(--font-weight-semibold);
-    --accordion-trigger-line-height: var(--font-text-sm-line-height);
-    --accordion-trigger-padding-block: calc(var(--spacing) * 2.5);
-    --accordion-trigger-gap: calc(var(--spacing) * 3);
-    --accordion-trigger-focus-ring-color: var(--color-ring);
-    --accordion-trigger-focus-radius: var(--radius-sm);
-    --accordion-icon-color: var(--color-text-secondary);
-    --accordion-icon-size: 16px;
-    --accordion-content-color: var(--color-text);
-    --accordion-content-font-size: var(--font-text-sm-size);
-    --accordion-content-line-height: var(--font-text-sm-line-height);
-    --accordion-content-padding-bottom: calc(var(--spacing) * 2.5);
-    --accordion-transition-duration: var(--transition-duration-basic);
-    --accordion-transition-ease: var(--transition-ease-basic);
-
-    /* =============================================
-      Checkbox
-    ============================================= */
-    --checkbox-indicator-size: var(--radio-group-indicator-size);
-    --checkbox-label-gap: var(--radio-group-item-gap);
-    --checkbox-label-line-height: var(--radio-group-item-line-height);
-
-    /* =============================================
-      Input
-    ============================================= */
-    --input-gap-xs: 4px;
-    --input-gap-sm: 6px;
-    --input-gap-md: 8px;
-    --input-gap-lg: 10px;
-    --input-text-color: var(--color-text);
-    --input-placeholder-text-color: var(--color-text-tertiary);
-    --input-outline-border-color: var(--color-border-primary-outline);
-    --input-outline-border-color-focus: var(--alpha-50);
-    --input-soft-background-color: var(--color-background-primary-soft-alpha);
-    --input-soft-border-color-focus: var(--alpha-20);
-    --input-border-color-invalid: var(--color-border-danger-outline);
-
-    /* =============================================
-      FieldError
-    ============================================= */
-    --field-error-color: var(--color-text-danger-outline);
-    --field-error-font-size: 0.75rem;
-    --field-error-line-height: var(--font-text-xs-line-height);
-    --field-error-icon-size: 1rem;
-    --field-error-gap: calc(var(--spacing) * 2);
-    --field-error-margin-top: 0.5rem;
-    --field-error-margin-bottom: calc(var(--spacing) * 3);
-    --field-error-padding-inline: 0;
-
-    /* =============================================
-      Field
-    ============================================= */
-    --field-label-font-weight: var(--font-weight-medium);
-    --field-horizontal-label-width: 120px;
-    --field-horizontal-control-width: 240px;
-
-    /* =============================================
-      FloatingLabelInput
-    ============================================= */
-    --floating-input-height: 3.25rem;
-    --floating-input-gutter: 1.25rem;
-    --floating-input-border-radius: var(--radius-full);
-    --floating-input-background: var(--color-surface);
-    --floating-input-border-color-focus: var(--alpha-50);
-    --floating-input-border-color-invalid: var(--color-border-danger-outline);
-    --floating-input-label-color: var(--color-text-tertiary);
-    --floating-input-label-color-focus: var(--color-text);
-    --floating-input-label-color-invalid: var(--color-text-danger-outline);
-    --floating-input-transition-duration: 80ms;
-    --floating-input-label-scale: 0.88;
-
-    /* =============================================
-      FileUpload
-    ============================================= */
-    --file-upload-height: var(--floating-input-height);
-    --file-upload-gutter: var(--floating-input-gutter);
-    --file-upload-border-radius: var(--floating-input-border-radius);
-    --file-upload-border-color: var(--floating-input-border-color);
-    --file-upload-border-color-hover: var(--floating-input-border-color-hover);
-    --file-upload-border-color-invalid: var(--floating-input-border-color-invalid);
-    --file-upload-background: var(--floating-input-background);
-    --file-upload-transition-duration: var(--floating-input-transition-duration);
-    --file-upload-list-border-radius: var(--radius-lg);
-    --file-upload-list-gap: 0.5rem;
-    --file-upload-area-border-radius: var(--radius-xl);
-    --file-upload-area-min-height: 10rem;
-
-    /* =============================================
-      Link
-    ============================================= */
-    --link-font-weight: inherit;
-    --link-gap: calc(var(--spacing) * 0.5);
-    --link-radius: var(--radius-sm);
-    --link-underline-decoration-offset: 0.1em;
-
-    /* =============================================
-      Chat
-    ============================================= */
-    --chat-max-width: 800px;
-    --chat-gutter: calc(var(--spacing) * 5);
-    --chat-background-color: var(--color-surface);
-    --thread-gutter: calc(var(--spacing) * 4);
-    /* 12px (composer gutter) + 4px (input inset) */
-    --composer-gutter: calc(var(--spacing) * 3);
-    --composer-compact-gutter: calc(var(--spacing) * 2);
-    --composer-radius: var(--radius-4xl);
-    --composer-background-color: var(--color-surface-elevated);
-    --smoothing-background-color: var(--color-surface);
-    --user-message-text-color: var(--color-text);
-    --source-list-gutter: var(--thread-gutter);
-
-    /* =============================================
-      CodeBlock
-    ============================================= */
-    --codeblock-syntax-4: var(--pink-500);
-
-    /* =============================================
-      Dialog
-    ============================================= */
-    --dialog-min-width: 250px;
-    --dialog-max-width: 450px;
-    --dialog-container-inner-padding: calc(var(--spacing) * 5);
-    --dialog-backdrop-fade-background: color-mix(in oklab, var(--color-surface-elevated) 60%, transparent);
-
-    /* =============================================
-      Menu
-    ============================================= */
-    --menu-gutter: calc(var(--spacing) * 1.5);
-    --menu-radius: var(--radius-xl);
-    --menu-font-size: var(--font-text-sm-size);
-    /* Important that this line-height is ~an even number for centering with icons */
-    --menu-line-height: var(--font-text-sm-line-height);
-    --menu-item-padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
-    --menu-item-gap: calc(var(--spacing) * 1.5);
-    --menu-separator-gutter: var(--menu-gutter) calc(-1 * var(--menu-gutter));
-    --menu-separator-background-color: var(--color-border);
-    --menu-radio-indicator-size: var(--font-text-lg-size);
-    --menu-radio-indicator-hole-size: var(--font-text-3xs-size);
-    --menu-checkbox-indicator-size: var(--font-text-lg-size);
-
-    /* =============================================
-      Modal
-    ============================================= */
-    --modal-container-inner-padding: calc(var(--spacing) * 5);
-
-    /* =============================================
-      Popover
-    ============================================= */
-    --popover-radius: var(--radius-xl);
-
-    /* =============================================
-      RadioGroup
-    ============================================= */
-    --radio-group-col-gap: calc(var(--spacing) * 2.5);
-    --radio-group-row-gap: calc(var(--spacing) * 5);
-    --radio-group-item-gap: calc(var(--spacing) * 1.5);
-    --radio-group-item-font-size: var(--font-text-sm-size);
-    --radio-group-item-line-height: var(--font-text-sm-line-height);
-    --radio-group-indicator-size: var(--font-text-lg-size);
-    --radio-group-indicator-border-color: var(--color-border-primary-outline);
-    --radio-group-indicator-border-color-hover: var(--alpha-25);
-    --radio-group-indicator-background-color: var(--color-background-primary-solid);
-    --radio-group-indicator-hole-size: 0.375rem;
-    --radio-group-indicator-hole-background-color: var(--color-text-primary-solid);
-
-    /* =============================================
-      Segmented Control
-    ============================================= */
-    --segmented-control-gap: 2px;
-    --segmented-control-gutter: 2px;
-    --segmented-control-font-weight: var(--font-weight-semibold);
-    --segmented-control-thumb-shadow: 0 1px 4px -1px rgb(0 0 0 / 20%);
-    --segmented-control-option-highlight-gutter: 1px;
-
-    /* =============================================
-      Tabs — Underline variant
-    ============================================= */
-    --tabs-underline-indicator-height: 2px;
-    --tabs-underline-indicator-color: var(--color-background-primary-solid);
-    --tabs-underline-border-color: var(--color-border);
-
-    /* =============================================
-      SelectControl
-    ============================================= */
-    --select-control-font-weight: var(--font-weight-normal);
-
-    /* =============================================
-      Slider
-    ============================================= */
-
-    /* =============================================
-      Switch
-    ============================================= */
-    --switch-track-width: 32px;
-    --switch-track-height: 19px;
-    --switch-thumb-offset: 3px;
-    --switch-thumb-size: calc(var(--switch-track-height) - 2 * var(--switch-thumb-offset));
-    --switch-thumb-shadow: 0 1px 2px rgb(0 0 0 / 20%);
-    --switch-label-gap: calc(var(--spacing) * 2);
-
-    /* =============================================
-      ProgressSteps
-    ============================================= */
-    --progress-steps-indicator-size-sm: 24px;
-    --progress-steps-indicator-size-md: 32px;
-    --progress-steps-indicator-size-lg: 40px;
-    --progress-steps-row-gap-sm: calc(var(--spacing) * 4);
-    --progress-steps-row-gap-md: calc(var(--spacing) * 6);
-    --progress-steps-row-gap-lg: calc(var(--spacing) * 8);
-    --progress-steps-content-gap-sm: calc(var(--spacing) * 2.5);
-    --progress-steps-content-gap-md: calc(var(--spacing) * 3);
-    --progress-steps-content-gap-lg: calc(var(--spacing) * 4);
-    --progress-steps-font-size-sm: var(--font-text-xs-size);
-    --progress-steps-font-size-md: var(--font-text-sm-size);
-    --progress-steps-font-size-lg: var(--font-text-md-size);
-    --progress-steps-icon-size-sm: var(--control-icon-size-xs);
-    --progress-steps-icon-size-md: var(--control-icon-size-sm);
-    --progress-steps-icon-size-lg: var(--control-icon-size-md);
-    --progress-steps-step-padding-sm: calc(var(--spacing) * 1.5);
-    --progress-steps-step-padding-md: calc(var(--spacing) * 2);
-    --progress-steps-step-padding-lg: calc(var(--spacing) * 3);
-    --progress-steps-connector-width: 2px;
-    --progress-steps-connector-dash-length: 4px;
-    --progress-steps-connector-dash-gap: 4px;
-    --progress-steps-connector-color: var(--gray-100);
-    --progress-steps-connector-color-completed: var(--gray-900);
-    --progress-steps-indicator-background: var(--gray-100);
-    --progress-steps-indicator-background-active: var(--gray-900);
-    --progress-steps-indicator-background-completed: var(--gray-900);
-    --progress-steps-indicator-text: var(--color-text-secondary);
-    --progress-steps-indicator-text-active: var(--gray-0);
-    --progress-steps-indicator-text-completed: var(--gray-0);
-    --progress-steps-title-font-weight: var(--font-weight-medium);
-    --progress-steps-title-color: var(--color-text);
-    --progress-steps-title-color-inactive: var(--color-text-tertiary);
-    --progress-steps-description-color: var(--color-text-secondary);
-    --progress-steps-description-color-inactive: var(--color-text-tertiary);
-
-    /* =============================================
-      ProgressSteps Minimal Variant
-    ============================================= */
-    --progress-steps-minimal-gap-sm: calc(var(--spacing) * 1);
-    --progress-steps-minimal-gap-md: calc(var(--spacing) * 1);
-    --progress-steps-minimal-gap-lg: calc(var(--spacing) * 1.5);
-    --progress-steps-minimal-height-sm: 3px;
-    --progress-steps-minimal-height-md: 3px;
-    --progress-steps-minimal-height-lg: 4px;
-    --progress-steps-minimal-width-sm: 24px;
-    --progress-steps-minimal-width-md: 24px;
-    --progress-steps-minimal-width-lg: 32px;
-    --progress-steps-minimal-radius: var(--radius-full);
-    --progress-steps-minimal-color-completed: var(--gray-900);
-    --progress-steps-minimal-color-upcoming: var(--gray-100);
-
-    /* =============================================
-      Sidebar
-    ============================================= */
-
-    /* Dimensions */
-    --sidebar-width: 210px;
-    --sidebar-width-mobile: 288px;
-    --sidebar-width-icon: 64px;
-    --sidebar-header-height: var(--control-size-3xl);
-    --sidebar-gutter: 12px;
-    --sidebar-gutter-sm: var(--control-gutter-2xs);
-
-    /* Colors */
-    --sidebar-background: none;
-    --sidebar-background-secondary: var(--color-surface-secondary);
-    --sidebar-foreground: var(--color-text);
-    --sidebar-border: var(--color-border);
-    --sidebar-menu-text-active: var(--gray-900);
-
-    /* Group label */
-    --sidebar-group-label-color: var(--color-text-tertiary);
-    --sidebar-group-label-font-size: 14px;
-    --sidebar-group-label-font-weight: var(--font-weight-semibold);
-    --sidebar-group-label-margin: 24px 0 2px;
-    --sidebar-group-label-margin-first: 8px 0 2px;
-    --sidebar-group-label-padding: 0 12px 8px;
-    --sidebar-group-label-line-height: 14px;
-
-    /* Menu item */
-    --sidebar-menu-item-height: 38px;
-    --sidebar-menu-item-height-desktop: 32px;
-    --sidebar-menu-item-padding: 0;
-    --sidebar-menu-item-margin: 0 0 2px;
-    --sidebar-menu-item-margin-desktop: 0 0 2px;
-    --sidebar-menu-item-radius: 8px;
-    --sidebar-menu-item-font-size: 14px;
-    --sidebar-menu-item-line-height: 20px;
-
-    /* Icon */
-    --sidebar-icon-size: 20px;
-    --sidebar-icon-wrapper-size: 32px;
-    --sidebar-icon-margin: 0 2px 0 4px;
-    --sidebar-icon-color: inherit;
-
-    /* Transitions */
-    --sidebar-transition-duration: 0.3s;
-    --sidebar-collapse-duration: 0.3s;
-
-    /* Mobile menu button (hamburger icon) */
-    --sidebar-mobile-button-size: 32px;
-    --sidebar-mobile-button-radius: 8px;
-    --sidebar-mobile-icon-size: 18px;
-    --sidebar-mobile-line-height: 2px;
-    --sidebar-mobile-line-color: var(--gray-900);
-    --sidebar-mobile-line-transition-duration: 0.2s;
-
-    /* Mobile drawer */
-    --sidebar-mobile-gutter: 12px;
-    --sidebar-mobile-header-height: 48px;
-    --sidebar-mobile-z-index: 301;
-    --sidebar-mobile-enter-opacity-duration: 0.8s;
-    --sidebar-mobile-enter-transform-duration: 0.7s;
-    --sidebar-mobile-enter-delay: 0.33s;
-    --sidebar-mobile-exit-duration: 0.3s;
-
-    /* Footer */
-    --sidebar-footer-padding: var(--sidebar-gutter-sm) var(--sidebar-gutter);
-
-    /* Main content area (Inset) – no shadow, matching reference (.mO2WL) */
-    --sidebar-inset-shadow: none;
-
-    /* Card */
-    --sidebar-card-padding: calc(var(--spacing) * 4);
-    --sidebar-card-radius: var(--radius-2xl);
-    --sidebar-card-height: 96px;
-    --sidebar-card-background: var(--color-surface);
-    --sidebar-card-background-hover: var(--color-surface-secondary);
-    --sidebar-card-shadow: var(--shadow-300), var(--shadow-hairline);
-    --sidebar-card-shadow-hover: var(--shadow-400), var(--shadow-hairline);
-    --sidebar-card-active-scale: 0.98;
-
-    /* =============================================
-      StatCard
-    ============================================= */
-    --stat-card-padding: calc(var(--spacing) * 5);
-    --stat-card-radius: var(--radius-xl);
-    /* spacing is per-section: mt-3 (12px) label→value, mt-2 (8px) value→footer */
-    --stat-card-background: var(--color-surface);
-    --stat-card-border-color: var(--color-border);
-    --stat-card-label-font-size: var(--font-text-sm-size);
-    --stat-card-label-color: var(--color-text-secondary);
-    --stat-card-value-font-size: var(--font-heading-xl-size);
-    --stat-card-value-font-weight: var(--font-weight-semibold);
-    --stat-card-value-color: var(--color-text);
-    --stat-card-description-font-size: var(--font-text-sm-size);
-    --stat-card-description-color: var(--color-text-tertiary);
-    --stat-card-trend-font-size: var(--font-text-sm-size);
-    --stat-card-trend-font-weight: var(--font-weight-semibold);
-    --stat-card-trend-positive-color: var(--color-text-success-soft);
-    --stat-card-trend-negative-color: var(--color-text-danger-soft);
-    --stat-card-trend-neutral-color: var(--color-text-tertiary);
-    --stat-card-progress-height: 4px;
-    --stat-card-progress-radius: var(--radius-full);
-    --stat-card-progress-fill: var(--color-background-primary-solid);
-    --stat-card-icon-size: 24px;
-    --stat-card-icon-color: var(--color-text-primary);
-    /* label line-height (20) + gap spacing(0.5) (2) + value line-height (38) = 60 */
-    --stat-card-icon-wrapper-size: 60px;
-    --stat-card-icon-wrapper-radius: var(--radius-md);
-    --stat-card-icon-wrapper-background: var(--color-background-primary-soft-alpha);
-    --stat-card-accent-width: 3px;
-    --stat-card-info-icon-size: 16px;
-
-    /* sm size overrides */
-    --stat-card-sm-padding-block: calc(var(--spacing) * 3);
-    --stat-card-sm-padding-inline: calc(var(--spacing) * 4);
-    --stat-card-sm-label-font-size: var(--font-text-xs-size);
-    --stat-card-sm-value-font-size: var(--font-heading-md-size);
-    --stat-card-sm-trend-font-size: var(--font-text-xs-size);
-    --stat-card-sm-description-font-size: var(--font-text-xs-size);
-    --stat-card-sm-icon-size: 20px;
-    /* label line-height (18) + gap spacing(0.5) (2) + value line-height (26) = 46 */
-    --stat-card-sm-icon-wrapper-size: 46px;
-    --stat-card-sm-icon-wrapper-radius: var(--radius-sm);
-    --stat-card-sm-info-icon-size: 14px;
-
-    /* =============================================
-      Table
-    ============================================= */
-    --table-border-color: var(--color-border);
-    --table-header-background: transparent;
-    --table-header-font-weight: var(--font-weight-medium);
-    --table-header-color: var(--color-text-secondary);
-    --table-cell-padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
-    --table-cell-font-size: var(--font-text-sm-size);
-    --table-cell-line-height: var(--font-text-sm-line-height);
-    --table-cell-color: var(--color-text);
-    --table-footer-background: transparent;
-    --table-footer-font-weight: var(--font-weight-medium);
-    --table-caption-font-size: var(--font-text-sm-size);
-    --table-caption-color: var(--color-text-tertiary);
-
-    /* =============================================
-      Skeleton
-    ============================================= */
-    --skeleton-radius: var(--radius-md);
-  }
-  :where(:root), :where([data-theme="light"]) {
-    --avatar-image-border-color: var(--alpha-04);
-    --input-outline-border-color-hover: var(--alpha-25);
-    --floating-input-border-color: rgb(0 0 0 / 15%);
-    --floating-input-border-color-hover: rgb(0 0 0 / 20%);
-    --file-upload-separator-color: rgb(0 0 0 / 8%);
-    --link-primary-text-color: var(--blue-500);
-    --link-primary-text-color-hover: var(--blue-600);
-    --user-message-background-color: var(--alpha-05);
-    --codeblock-background-color: #f9f9f9;
-    --codeblock-syntax-1: #c0660d;
-    --codeblock-syntax-2: var(--blue-500);
-    --codeblock-syntax-3: var(--green-600);
-    --codeblock-syntax-5: var(--purple-500);
-    --dialog-backdrop-dim-background: rgb(0 0 0 / 30%);
-    --menu-item-background-color: var(--alpha-08);
-    --modal-backdrop-background: rgb(0 0 0 / 30%);
-    --segmented-control-background: var(--gray-100);
-    --segmented-control-thumb-background: var(--gray-0);
-    --segmented-control-option-highlight-background-color: var(--gray-200);
-    --slider-track-color: var(--gray-150);
-    --slider-range-color: var(--gray-450);
-    --switch-track-color: var(--gray-150);
-    --switch-track-color-hover: var(--gray-200);
-    --switch-track-color-checked: var(--gray-900);
-    --switch-track-color-checked-disabled: var(--gray-300);
-    --switch-track-color-disabled: var(--gray-100);
-    --switch-thumb-color: var(--gray-0);
-    --switch-thumb-color-disabled: var(--gray-0);
-    --sidebar-accent: var(--alpha-08);
-    --sidebar-accent-hover: var(--alpha-12);
-    --sidebar-menu-text: var(--gray-750);
-    --sidebar-mobile-backdrop-color: rgb(0 0 0 / 15%);
-    --sidebar-footer-shadow: 0 -2px 10px rgb(0 0 0 / 6%);
-    --stat-card-progress-background: var(--alpha-08);
-    --table-row-hover-background: var(--alpha-02);
-    --skeleton-background: var(--alpha-08);
-  }
-  :where([data-theme="dark"]) {
-    --avatar-image-border-color: var(--alpha-15);
-    --input-outline-border-color-hover: var(--alpha-30);
-    --floating-input-border-color: rgb(255 255 255 / 16%);
-    --floating-input-border-color-hover: rgb(255 255 255 / 24%);
-    --file-upload-separator-color: rgb(255 255 255 / 8%);
-    --link-primary-text-color: var(--blue-300);
-    --link-primary-text-color-hover: var(--blue-400);
-    --user-message-background-color: var(--alpha-08);
-    --codeblock-background-color: #161616;
-    --codeblock-syntax-1: var(--yellow-100);
-    --codeblock-syntax-2: var(--blue-200);
-    --codeblock-syntax-3: var(--green-300);
-    --codeblock-syntax-5: var(--purple-300);
-    --dialog-backdrop-dim-background: rgb(0 0 0 / 50%);
-    --menu-item-background-color: var(--alpha-10);
-    --modal-backdrop-background: rgb(0 0 0 / 50%);
-    --segmented-control-background: var(--gray-0);
-    --segmented-control-thumb-background: var(--gray-300);
-    --segmented-control-option-highlight-background-color: var(--gray-300);
-    --slider-track-color: var(--gray-400);
-    --slider-range-color: var(--gray-600);
-    --switch-track-color: var(--gray-400);
-    --switch-track-color-hover: var(--gray-450);
-    --switch-track-color-checked: var(--blue-400);
-    --switch-track-color-checked-disabled: var(--blue-700);
-    --switch-track-color-disabled: var(--gray-300);
-    --switch-thumb-color: var(--gray-1000);
-    --switch-thumb-color-disabled: var(--gray-800);
-    --sidebar-accent: var(--alpha-12);
-    --sidebar-accent-hover: var(--alpha-16);
-    --sidebar-menu-text: var(--gray-850);
-    --sidebar-mobile-backdrop-color: rgb(0 0 0 / 35%);
-    --sidebar-footer-shadow: 0 -2px 10px rgb(0 0 0 / 35%);
-    --stat-card-progress-background: var(--alpha-12);
-    --table-row-hover-background: var(--alpha-04);
-    --skeleton-background: var(--alpha-12);
-  }
-}
+@import "@plexui/styles/styles/variables-components.css";