@aiaiai-pt/design-system 0.1.0

package/tokens/components.css

@@ -0,0 +1,530 @@
+/*
+ * aiaiai Design System — Component Tokens (components.css)
+ *
+ * Scoped to specific components. Reference semantic tokens.
+ * These allow component-level tuning without breaking the system.
+ *
+ * Naming: --{component}-{property}
+ */
+
+:root {
+  /* ═══════════════════════════════════════════════
+     BUTTON
+     ═══════════════════════════════════════════════ */
+
+  --button-font: var(--type-label-font);
+  --button-tracking: var(--type-label-tracking);
+  --button-radius: var(--radius-md);
+  --button-transition: var(--duration-instant) var(--easing-default);
+
+  /* Sizes */
+  --button-sm-height: 28px;
+  --button-sm-padding-x: var(--space-sm);
+  --button-sm-font-size: var(--type-caption-size);
+
+  --button-md-height: 36px;
+  --button-md-padding-x: var(--space-md);
+  --button-md-font-size: var(--type-label-size);
+
+  --button-lg-height: 44px;
+  --button-lg-padding-x: var(--space-lg);
+  --button-lg-font-size: var(--type-body-sm-size);
+
+  /* Primary variant */
+  --button-primary-bg: var(--color-accent);
+  --button-primary-bg-hover: var(--color-accent-hover);
+  --button-primary-text: var(--color-text-on-accent);
+  --button-primary-border: none;
+
+  /* Secondary variant */
+  --button-secondary-bg: transparent;
+  --button-secondary-bg-hover: var(--color-surface-secondary);
+  --button-secondary-text: var(--color-text);
+  --button-secondary-border: var(--elevation-border);
+
+  /* Ghost variant */
+  --button-ghost-bg: transparent;
+  --button-ghost-bg-hover: var(--color-surface-secondary);
+  --button-ghost-text: var(--color-text-secondary);
+  --button-ghost-border: none;
+
+  /* Destructive variant */
+  --button-destructive-bg: var(--color-destructive);
+  --button-destructive-bg-hover: var(--color-destructive-hover);
+  --button-destructive-text: var(--color-text-on-accent);
+  --button-destructive-border: none;
+
+  /* ═══════════════════════════════════════════════
+     INPUT
+     ═══════════════════════════════════════════════ */
+
+  --input-font: var(--type-data-font);
+  --input-font-size: var(--type-data-size);
+  --input-radius: var(--radius-sm);
+  --input-border: var(--elevation-border);
+  --input-border-focus: var(--elevation-border-strong);
+  --input-bg: var(--color-surface);
+  --input-text: var(--color-text);
+  --input-placeholder: var(--color-text-muted);
+  --input-transition: var(--duration-instant) var(--easing-default);
+
+  /* Sizes */
+  --input-sm-height: 28px;
+  --input-sm-padding-x: var(--space-sm);
+
+  --input-md-height: 36px;
+  --input-md-padding-x: var(--space-sm);
+
+  --input-lg-height: 44px;
+  --input-lg-padding-x: var(--space-md);
+
+  /* Label (always mono) */
+  --input-label-font: var(--type-label-font);
+  --input-label-size: var(--type-label-size);
+  --input-label-tracking: var(--type-label-tracking);
+  --input-label-color: var(--color-text-secondary);
+  --input-label-gap: var(--space-xs);
+
+  /* Help text */
+  --input-help-font: var(--type-body-sm-font);
+  --input-help-size: var(--type-body-sm-size);
+  --input-help-color: var(--color-text-muted);
+  --input-help-gap: var(--space-xs);
+
+  /* Error state */
+  --input-error-border-color: var(--color-destructive);
+  --input-error-text: var(--color-destructive);
+
+  /* Toggle */
+  --toggle-width: 36px;
+  --toggle-height: 20px;
+  --toggle-radius: var(--radius-pill);
+  --toggle-bg-off: var(--color-surface-tertiary);
+  --toggle-bg-on: var(--color-accent);
+  --toggle-knob-size: 16px;
+  --toggle-knob-color: var(--color-surface);
+
+  /* Checkbox */
+  --checkbox-size: 16px;
+  --checkbox-radius: var(--radius-sm);
+  --checkbox-border: var(--elevation-border-strong);
+  --checkbox-bg-checked: var(--color-accent);
+  --checkbox-check-color: var(--color-text-on-accent);
+
+  /* ═══════════════════════════════════════════════
+     CARD
+     ═══════════════════════════════════════════════ */
+
+  --card-radius: var(--radius-md);
+  --card-padding: var(--space-lg);
+  --card-bg: var(--color-surface);
+  --card-transition: var(--duration-instant) var(--easing-default);
+
+  /* Flat variant (no elevation) */
+  --card-flat-border: none;
+  --card-flat-shadow: none;
+
+  /* Bordered variant (exposed mechanism default) */
+  --card-bordered-border: var(--elevation-border);
+  --card-bordered-shadow: none;
+
+  /* Elevated variant (floating) */
+  --card-elevated-border: none;
+  --card-elevated-shadow: var(--elevation-raised);
+
+  /* Interactive states */
+  --card-interactive-hover-border: var(--elevation-border-strong);
+  --card-interactive-active-bg: var(--color-surface-secondary);
+  --card-selected-border-color: var(--color-accent);
+
+  /* ═══════════════════════════════════════════════
+     NAVIGATION — SIDEBAR
+     ═══════════════════════════════════════════════ */
+
+  --nav-sidebar-width: 240px;
+  --nav-sidebar-width-collapsed: 48px;
+  --nav-sidebar-bg: var(--color-surface-secondary);
+  --nav-sidebar-border: var(--elevation-border);
+  --nav-sidebar-padding: var(--space-sm);
+
+  --nav-item-height: 32px;
+  --nav-item-padding-x: var(--space-sm);
+  --nav-item-radius: var(--radius-sm);
+  --nav-item-font: var(--type-label-font);
+  --nav-item-font-size: var(--type-label-size);
+  --nav-item-tracking: var(--type-label-tracking);
+  --nav-item-color: var(--color-text-secondary);
+  --nav-item-color-hover: var(--color-text);
+  --nav-item-color-active: var(--color-text);
+  --nav-item-bg-hover: var(--color-surface-tertiary);
+  --nav-item-bg-active: var(--color-surface);
+  --nav-item-transition: var(--duration-instant) var(--easing-default);
+
+  --nav-section-font: var(--type-caption-font);
+  --nav-section-size: var(--type-caption-size);
+  --nav-section-tracking: var(--type-caption-tracking);
+  --nav-section-color: var(--color-text-muted);
+  --nav-section-margin-top: var(--space-md);
+
+  /* ═══════════════════════════════════════════════
+     NAVIGATION — MOBILE HEADER
+     ═══════════════════════════════════════════════ */
+
+  --nav-mobile-header-height: 48px;
+  --nav-mobile-header-bg: var(--color-surface-secondary);
+  --nav-mobile-header-border: var(--elevation-border);
+
+  /* Stacking order */
+  --nav-mobile-header-z: 20;
+  --nav-sidebar-backdrop-z: 25;
+  --nav-sidebar-drawer-z: 30;
+
+  /* ═══════════════════════════════════════════════
+     NAVIGATION — BOTTOM BAR
+     ═══════════════════════════════════════════════ */
+
+  --nav-bottom-height: 56px;
+  --nav-bottom-bg: var(--color-surface);
+  --nav-bottom-border-top: var(--elevation-border);
+  --nav-bottom-item-color: var(--color-text-muted);
+  --nav-bottom-item-color-active: var(--color-accent);
+  --nav-bottom-item-font: var(--type-caption-font);
+  --nav-bottom-item-size: var(--type-caption-size);
+
+  /* ═══════════════════════════════════════════════
+     DATA DISPLAY
+     ═══════════════════════════════════════════════ */
+
+  /* Badge */
+  --badge-font: var(--type-label-font);
+  --badge-size: var(--type-label-size);
+  --badge-tracking: var(--type-label-tracking);
+  --badge-radius: var(--radius-pill);
+  --badge-padding-x: var(--space-sm);
+  --badge-padding-y: var(--space-2xs);
+  --badge-neutral-bg: var(--color-surface-tertiary);
+  --badge-neutral-text: var(--color-text-secondary);
+
+  /* Tag */
+  --tag-font: var(--type-label-font);
+  --tag-size: var(--type-label-size);
+  --tag-radius: var(--radius-sm);
+  --tag-padding-x: var(--space-sm);
+  --tag-padding-y: var(--space-2xs);
+  --tag-border: var(--elevation-border);
+  --tag-bg: var(--color-surface);
+  --tag-text: var(--color-text-secondary);
+
+  /* Key-value pair */
+  --kv-key-font: var(--type-label-font);
+  --kv-key-size: var(--type-label-size);
+  --kv-key-color: var(--color-text-muted);
+  --kv-value-font: var(--type-data-font);
+  --kv-value-size: var(--type-data-size);
+  --kv-value-color: var(--color-text);
+  --kv-gap: var(--space-xs);
+
+  /* Status indicator */
+  --status-dot-size: 8px;
+  --status-font: var(--type-label-font);
+  --status-size: var(--type-label-size);
+  --status-gap: var(--space-xs);
+
+  /* ═══════════════════════════════════════════════
+     FEEDBACK
+     ═══════════════════════════════════════════════ */
+
+  /* Toast */
+  --toast-radius: var(--radius-md);
+  --toast-padding: var(--space-md);
+  --toast-shadow: var(--elevation-overlay);
+  --toast-bg: var(--color-surface);
+  --toast-border: var(--elevation-border);
+  --toast-font: var(--type-body-sm-font);
+  --toast-font-size: var(--type-body-sm-size);
+  --toast-max-width: 360px;
+
+  /* Empty state */
+  --empty-icon-size: 48px;
+  --empty-icon-color: var(--color-text-muted);
+  --empty-heading-font: var(--type-heading-font);
+  --empty-heading-size: var(--type-heading-size);
+  --empty-body-font: var(--type-body-sm-font);
+  --empty-body-size: var(--type-body-sm-size);
+  --empty-body-color: var(--color-text-secondary);
+  --empty-gap: var(--space-md);
+
+  /* Skeleton */
+  --skeleton-bg: var(--color-surface-tertiary);
+  --skeleton-shine: var(--color-surface-secondary);
+  --skeleton-radius: var(--radius-sm);
+  --skeleton-duration: 1.5s;
+
+  /* ═══════════════════════════════════════════════
+     PANEL / DRAWER (slide-over surface)
+     ═══════════════════════════════════════════════ */
+
+  --panel-width: 480px;
+  --panel-width-narrow: 360px;
+  --panel-width-wide: 640px;
+  --panel-bg: var(--color-surface);
+  --panel-border: var(--elevation-border);
+  --panel-shadow: var(--elevation-overlay);
+  --panel-radius: 0;
+  --panel-header-height: 56px;
+  --panel-header-border: var(--elevation-border);
+  --panel-header-font: var(--type-heading-sm-font);
+  --panel-header-size: var(--type-heading-sm-size);
+  --panel-header-weight: var(--type-heading-sm-weight);
+  --panel-padding: var(--space-lg);
+  --panel-transition: var(--duration-normal) var(--easing-enter);
+  --panel-backdrop: var(--color-overlay);
+
+  /* ═══════════════════════════════════════════════
+     STEPPER (wizard / multi-step flow)
+     ═══════════════════════════════════════════════ */
+
+  --stepper-dot-size: 32px;
+  --stepper-dot-font: var(--type-label-font);
+  --stepper-dot-size-text: var(--type-label-size);
+  --stepper-dot-tracking: var(--type-label-tracking);
+  --stepper-dot-bg: var(--color-surface-tertiary);
+  --stepper-dot-color: var(--color-text-secondary);
+  --stepper-dot-border: none;
+  --stepper-active-bg: var(--color-accent);
+  --stepper-active-color: var(--color-text-on-accent);
+  --stepper-complete-bg: var(--color-success);
+  --stepper-complete-color: var(--color-text-on-accent);
+  --stepper-line-color: var(--color-border);
+  --stepper-line-width: var(--border-width-thick);
+  --stepper-label-font: var(--type-label-font);
+  --stepper-label-size: var(--type-label-size);
+  --stepper-label-tracking: var(--type-label-tracking);
+  --stepper-label-color: var(--color-text-muted);
+  --stepper-label-active-color: var(--color-text);
+  --stepper-gap: var(--space-sm);
+  --stepper-transition: var(--duration-fast) var(--easing-default);
+
+  /* ═══════════════════════════════════════════════
+     CODE BLOCK (editor / syntax display)
+     ═══════════════════════════════════════════════ */
+
+  --code-font: var(--type-data-font);
+  --code-font-size: var(--type-data-size);
+  --code-line-height: var(--type-data-leading);
+  --code-bg: var(--color-surface-secondary);
+  --code-text: var(--color-text);
+  --code-border: var(--elevation-border);
+  --code-radius: var(--radius-sm);
+  --code-padding: var(--space-md);
+  --code-line-number-color: var(--color-text-muted);
+  --code-line-number-width: 48px;
+  --code-gutter-bg: var(--color-surface-tertiary);
+  --code-gutter-border: var(--elevation-border);
+  --code-selection-bg: var(--color-accent-subtle);
+  --code-cursor-color: var(--color-accent);
+
+  /* ═══════════════════════════════════════════════
+     TEXTAREA
+     ═══════════════════════════════════════════════ */
+
+  --textarea-min-height: 80px;
+  --textarea-padding: var(--space-sm);
+
+  /* ═══════════════════════════════════════════════
+     SEPARATOR
+     ═══════════════════════════════════════════════ */
+
+  --separator-color: var(--color-border);
+  --separator-thickness: var(--border-width-default);
+
+  /* ═══════════════════════════════════════════════
+     PROGRESS
+     ═══════════════════════════════════════════════ */
+
+  --progress-height: 8px;
+  --progress-radius: var(--radius-pill);
+  --progress-bg: var(--color-surface-tertiary);
+  --progress-fill: var(--color-accent);
+  --progress-transition: var(--duration-fast) var(--easing-default);
+  --progress-indeterminate-duration: 1.5s;
+
+  /* ═══════════════════════════════════════════════
+     ALERT (inline callout)
+     ═══════════════════════════════════════════════ */
+
+  --alert-radius: var(--radius-md);
+  --alert-padding: var(--space-md);
+  --alert-border: var(--elevation-border);
+  --alert-bg: var(--color-surface);
+  --alert-font: var(--type-body-sm-font);
+  --alert-font-size: var(--type-body-sm-size);
+
+  /* ═══════════════════════════════════════════════
+     TABS
+     ═══════════════════════════════════════════════ */
+
+  --tabs-list-bg: var(--color-surface-secondary);
+  --tabs-list-radius: var(--radius-md);
+  --tabs-list-padding: var(--space-2xs);
+  --tabs-trigger-font: var(--type-label-font);
+  --tabs-trigger-size: var(--type-label-size);
+  --tabs-trigger-tracking: var(--type-label-tracking);
+  --tabs-trigger-height: 32px;
+  --tabs-trigger-padding-x: var(--space-md);
+  --tabs-trigger-radius: var(--radius-sm);
+  --tabs-trigger-color: var(--color-text-secondary);
+  --tabs-trigger-color-active: var(--color-text);
+  --tabs-trigger-bg-active: var(--color-surface);
+  --tabs-trigger-shadow-active: var(--elevation-raised);
+  --tabs-trigger-transition: var(--duration-instant) var(--easing-default);
+  --tabs-content-padding-top: var(--space-md);
+
+  /* ═══════════════════════════════════════════════
+     MODAL (centered overlay)
+     ═══════════════════════════════════════════════ */
+
+  --modal-width: 480px;
+  --modal-width-sm: 360px;
+  --modal-width-lg: 640px;
+  --modal-bg: var(--color-surface);
+  --modal-radius: var(--radius-lg);
+  --modal-shadow: var(--elevation-overlay);
+  --modal-padding: var(--space-lg);
+  --modal-header-height: 56px;
+  --modal-header-border: var(--elevation-border);
+  --modal-header-font: var(--type-heading-sm-font);
+  --modal-header-size: var(--type-heading-sm-size);
+  --modal-header-weight: var(--type-heading-sm-weight);
+  --modal-backdrop: var(--color-overlay);
+  --modal-transition: var(--duration-normal) var(--easing-enter);
+
+  /* ═══════════════════════════════════════════════
+     ACCENT STRIPE
+     ═══════════════════════════════════════════════ */
+
+  --accent-stripe-width: 3px;
+
+  /* ═══════════════════════════════════════════════
+     LIST
+     ═══════════════════════════════════════════════ */
+
+  --list-gap: var(--space-sm);
+  --list-border: var(--elevation-border);
+  --list-border-radius: var(--radius-md);
+
+  /* ═══════════════════════════════════════════════
+     LIST ITEM
+     ═══════════════════════════════════════════════ */
+
+  --list-item-padding-x: var(--space-md);
+  --list-item-padding-y: var(--space-sm);
+  --list-item-gap: var(--space-md);
+  --list-item-bg: var(--color-surface);
+  --list-item-bg-hover: var(--color-surface-secondary);
+  --list-item-divider: var(--elevation-border);
+  --list-item-transition: var(--duration-instant) var(--easing-default);
+  --list-item-leading-gap: var(--space-xs);
+  --list-item-trailing-gap: var(--space-xs);
+
+  /* ═══════════════════════════════════════════════
+     FILE UPLOAD
+     ═══════════════════════════════════════════════ */
+
+  --fileupload-border: var(--border-width-thick) dashed var(--color-border);
+  --fileupload-border-dragging: var(--border-width-thick) solid
+    var(--color-accent);
+  --fileupload-radius: var(--radius-md);
+  --fileupload-padding: var(--space-xl);
+  --fileupload-bg: transparent;
+  --fileupload-bg-dragging: var(--color-accent-subtle);
+  --fileupload-transition: var(--duration-fast) var(--easing-default);
+  --fileupload-icon-size: 32px;
+  --fileupload-icon-color: var(--color-text-muted);
+  --fileupload-icon-color-dragging: var(--color-accent);
+  --fileupload-text-font: var(--type-body-sm-font);
+  --fileupload-text-size: var(--type-body-sm-size);
+  --fileupload-text-color: var(--color-text-secondary);
+  --fileupload-hint-font: var(--type-caption-font);
+  --fileupload-hint-size: var(--type-caption-size);
+  --fileupload-hint-color: var(--color-text-muted);
+
+  /* ═══════════════════════════════════════════════
+     FILE UPLOAD ITEM
+     ═══════════════════════════════════════════════ */
+
+  --fileupload-item-padding: var(--space-sm) var(--space-md);
+  --fileupload-item-gap: var(--space-sm);
+  --fileupload-item-radius: var(--radius-sm);
+  --fileupload-item-bg: var(--color-surface);
+  --fileupload-item-border: var(--elevation-border);
+  --fileupload-item-name-font: var(--type-body-sm-font);
+  --fileupload-item-name-size: var(--type-body-sm-size);
+  --fileupload-item-name-color: var(--color-text);
+  --fileupload-item-size-font: var(--type-caption-font);
+  --fileupload-item-size-size: var(--type-caption-size);
+  --fileupload-item-size-color: var(--color-text-muted);
+  --fileupload-item-icon-size: 20px;
+  --fileupload-item-error-color: var(--color-destructive);
+  --fileupload-item-complete-color: var(--color-success);
+
+  /* ═══════════════════════════════════════════════
+     POPOVER
+     ═══════════════════════════════════════════════ */
+
+  --popover-bg: var(--raw-color-white);
+  --popover-border: var(--elevation-border-strong);
+  --popover-shadow: var(--elevation-overlay);
+  --popover-radius: var(--radius-md);
+  --popover-padding: var(--space-sm);
+  --popover-z: 50;
+  --popover-enter-offset: -4px;
+
+  /* ═══════════════════════════════════════════════
+     MENU
+     ═══════════════════════════════════════════════ */
+
+  --menu-min-width: 180px;
+  --menu-padding: var(--space-xs);
+  --menu-item-height: 32px;
+  --menu-item-padding-x: var(--space-sm);
+  --menu-item-padding-y: var(--space-xs);
+  --menu-item-radius: var(--radius-sm);
+  --menu-item-gap: var(--space-sm);
+  --menu-item-font-size: var(--type-body-sm-size);
+  --menu-item-bg-hover: var(--color-surface-secondary);
+  --menu-item-color: var(--color-text);
+  --menu-item-color-destructive: var(--color-destructive);
+  --menu-item-color-disabled: var(--color-text-tertiary);
+  --menu-separator-color: var(--color-border);
+  --menu-separator-spacing: var(--space-xs);
+
+  /* ═══════════════════════════════════════════════
+     COMBOBOX
+     ═══════════════════════════════════════════════ */
+
+  --combobox-list-max-height: 240px;
+  --combobox-item-padding: var(--space-xs) var(--space-sm);
+  --combobox-item-radius: var(--radius-sm);
+  --combobox-item-hover-bg: var(--color-surface-secondary);
+  --combobox-item-active-bg: var(--color-accent-subtle);
+  --combobox-item-active-color: var(--color-accent);
+  --combobox-highlight-color: var(--color-accent);
+  --combobox-group-font: var(--type-overline-font);
+  --combobox-group-size: var(--type-overline-size);
+  --combobox-group-tracking: var(--type-overline-tracking);
+  --combobox-group-color: var(--color-text-muted);
+  --combobox-group-padding: var(--space-sm) var(--space-sm) var(--space-xs);
+  --combobox-description-font: var(--type-caption-font);
+  --combobox-description-size: var(--type-caption-size);
+  --combobox-description-color: var(--color-text-muted);
+  --combobox-empty-color: var(--color-text-muted);
+
+  /* ═══════════════════════════════════════════════
+     FOCUS RING (global)
+     ═══════════════════════════════════════════════ */
+
+  --focus-ring-width: var(--border-width-thick);
+  --focus-ring-offset: var(--border-width-thick);
+  --focus-ring-color: var(--color-accent);
+}