azamat-ui-kit-cli 0.3.13 → 0.3.14

package/vendor/templates/styles/globals.css

@@ -85,17 +85,59 @@
   --sidebar-accent-foreground: oklch(0.27 0.03 255);
   --sidebar-border: oklch(0.89 0.012 250);
   --sidebar-ring: oklch(0.66 0.035 245);
+  --aui-info: oklch(0.61 0.13 245);
+  --aui-info-foreground: oklch(0.985 0.004 95);
+  --aui-success: oklch(0.68 0.14 160);
+  --aui-success-foreground: oklch(0.985 0.004 95);
+  --aui-warning: oklch(0.76 0.15 80);
+  --aui-warning-foreground: oklch(0.24 0.02 80);
+  --aui-danger: var(--destructive);
+  --aui-danger-foreground: oklch(0.985 0.004 95);
 
   --aui-control-radius: var(--radius-xl);
-  --aui-control-shadow: 0 1px 0 oklch(1 0 0 / 60%), 0 8px 22px oklch(0.24 0.02 255 / 6%);
+  --aui-focus-ring: color-mix(in oklch, var(--ring), transparent 44%);
+  --aui-focus-ring-soft: color-mix(in oklch, var(--ring), transparent 82%);
+  --aui-danger-ring: color-mix(in oklch, var(--destructive), transparent 48%);
+  --aui-danger-ring-soft: color-mix(in oklch, var(--destructive), transparent 86%);
+  --aui-warning-ring: color-mix(in oklch, var(--aui-warning), transparent 48%);
+  --aui-warning-ring-soft: color-mix(in oklch, var(--aui-warning), transparent 86%);
+  --aui-control-surface: color-mix(in oklch, var(--background), white 54%);
+  --aui-control-surface-hover: color-mix(in oklch, var(--background), white 72%);
+  --aui-control-surface-muted: color-mix(in oklch, var(--muted), white 24%);
+  --aui-control-surface-disabled: color-mix(in oklch, var(--muted), var(--background) 62%);
+  --aui-control-surface-readonly: color-mix(in oklch, var(--muted), var(--background) 78%);
+  --aui-control-shadow: 0 1px 0 oklch(1 0 0 / 72%), 0 10px 28px oklch(0.24 0.02 255 / 7%);
   --aui-control-border-strong: color-mix(in oklch, var(--border), var(--foreground) 7%);
   --aui-control-hover-border: color-mix(in oklch, var(--ring), transparent 68%);
-  --aui-control-panel-bg: color-mix(in oklch, var(--background), white 12%);
-  --aui-control-panel-shadow: 0 1px 0 oklch(1 0 0 / 75%), 0 14px 32px oklch(0.24 0.02 255 / 8%);
+  --aui-control-panel-bg: color-mix(in oklch, var(--background), white 18%);
+  --aui-control-panel-shadow: 0 1px 0 oklch(1 0 0 / 80%), 0 16px 36px oklch(0.24 0.02 255 / 8%);
   --aui-card-radius: var(--radius-2xl);
   --aui-card-border: color-mix(in oklch, var(--border), white 12%);
-  --aui-card-shadow: 0 1px 0 oklch(1 0 0 / 75%), 0 18px 45px oklch(0.24 0.02 255 / 7%);
+  --aui-card-shadow: 0 1px 0 oklch(1 0 0 / 80%), 0 18px 45px oklch(0.24 0.02 255 / 8%);
+  --aui-card-shadow-hover: 0 1px 0 oklch(1 0 0 / 80%), 0 26px 58px oklch(0.24 0.02 255 / 10%);
+  --aui-card-soft-bg: color-mix(in oklch, var(--muted), white 36%);
+  --aui-card-outline-bg: color-mix(in oklch, var(--card), white 18%);
   --aui-popover-shadow: 0 24px 70px oklch(0.24 0.02 255 / 18%);
+  --aui-overlay-surface: linear-gradient(180deg, color-mix(in oklch, var(--popover), white 10%), var(--popover));
+  --aui-overlay-border: color-mix(in oklch, var(--border), white 8%);
+  --aui-overlay-footer-bg: linear-gradient(180deg, color-mix(in oklch, var(--muted), transparent 42%), color-mix(in oklch, var(--muted), transparent 20%));
+  --aui-sidebar-surface: linear-gradient(180deg, color-mix(in oklch, var(--sidebar), white 18%), var(--sidebar));
+  --aui-sidebar-border: color-mix(in oklch, var(--sidebar-border), white 6%);
+  --aui-sidebar-item-bg: transparent;
+  --aui-sidebar-item-hover-bg: color-mix(in oklch, var(--sidebar-accent), transparent 18%);
+  --aui-sidebar-item-active-bg: color-mix(in oklch, var(--sidebar-primary), transparent 78%);
+  --aui-sidebar-item-active-border: color-mix(in oklch, var(--sidebar-primary), transparent 56%);
+  --aui-sidebar-item-active-fg: color-mix(in oklch, var(--sidebar-foreground), white 6%);
+  --aui-sidebar-nav-item-bg: transparent;
+  --aui-sidebar-nav-item-hover-bg: color-mix(in oklch, var(--muted), transparent 68%);
+  --aui-sidebar-nav-item-active-bg: color-mix(in oklch, var(--foreground), transparent 94%);
+  --aui-sidebar-nav-item-active-border: color-mix(in oklch, var(--border), white 4%);
+  --aui-table-surface: linear-gradient(180deg, color-mix(in oklch, var(--card), white 8%), var(--card));
+  --aui-table-container-surface: linear-gradient(180deg, color-mix(in oklch, var(--card), white 12%), var(--card));
+  --aui-table-border: color-mix(in oklch, var(--border), white 5%);
+  --aui-table-selection-surface: color-mix(in oklch, var(--background), white 28%);
+  --aui-button-primary-shadow: 0 1px 0 color-mix(in oklch, white, transparent 18%), 0 16px 34px color-mix(in oklch, var(--primary), transparent 78%);
+  --aui-button-danger-shadow: 0 1px 0 color-mix(in oklch, white, transparent 28%), 0 16px 34px color-mix(in oklch, var(--destructive), transparent 80%);
   --aui-table-header-bg: linear-gradient(180deg, oklch(0.972 0.008 250), oklch(0.954 0.01 250));
   --aui-table-toolbar-bg: linear-gradient(180deg, oklch(0.996 0.002 95), oklch(0.978 0.006 250));
   --aui-table-toolbar-border: color-mix(in oklch, var(--border), white 16%);
@@ -137,14 +179,56 @@
   --sidebar-accent-foreground: oklch(0.965 0.004 95);
   --sidebar-border: oklch(1 0 0 / 12%);
   --sidebar-ring: oklch(0.68 0.03 235);
+  --aui-info: oklch(0.7 0.1 235);
+  --aui-info-foreground: oklch(0.19 0.012 255);
+  --aui-success: oklch(0.76 0.12 160);
+  --aui-success-foreground: oklch(0.19 0.012 255);
+  --aui-warning: oklch(0.8 0.13 82);
+  --aui-warning-foreground: oklch(0.19 0.012 255);
+  --aui-danger: var(--destructive);
+  --aui-danger-foreground: oklch(0.19 0.012 255);
 
+  --aui-focus-ring: color-mix(in oklch, var(--ring), transparent 40%);
+  --aui-focus-ring-soft: color-mix(in oklch, var(--ring), transparent 80%);
+  --aui-danger-ring: color-mix(in oklch, var(--destructive), transparent 46%);
+  --aui-danger-ring-soft: color-mix(in oklch, var(--destructive), transparent 84%);
+  --aui-warning-ring: color-mix(in oklch, var(--aui-warning), transparent 46%);
+  --aui-warning-ring-soft: color-mix(in oklch, var(--aui-warning), transparent 84%);
+  --aui-control-surface: oklch(1 0 0 / 4%);
+  --aui-control-surface-hover: oklch(1 0 0 / 7%);
+  --aui-control-surface-muted: oklch(1 0 0 / 6%);
+  --aui-control-surface-disabled: oklch(1 0 0 / 3%);
+  --aui-control-surface-readonly: oklch(1 0 0 / 4%);
   --aui-card-border: oklch(1 0 0 / 9%);
   --aui-card-shadow: 0 1px 0 oklch(1 0 0 / 5%), 0 24px 80px oklch(0 0 0 / 30%);
+  --aui-card-shadow-hover: 0 1px 0 oklch(1 0 0 / 5%), 0 32px 96px oklch(0 0 0 / 36%);
+  --aui-card-soft-bg: oklch(1 0 0 / 4%);
+  --aui-card-outline-bg: oklch(1 0 0 / 2%);
   --aui-popover-shadow: 0 24px 80px oklch(0 0 0 / 48%);
+  --aui-overlay-surface: linear-gradient(180deg, color-mix(in oklch, var(--popover), white 3%), var(--popover));
+  --aui-overlay-border: oklch(1 0 0 / 10%);
+  --aui-overlay-footer-bg: linear-gradient(180deg, oklch(1 0 0 / 3%), oklch(1 0 0 / 7%));
+  --aui-sidebar-surface: linear-gradient(180deg, color-mix(in oklch, var(--sidebar), white 4%), var(--sidebar));
+  --aui-sidebar-border: oklch(1 0 0 / 10%);
+  --aui-sidebar-item-bg: transparent;
+  --aui-sidebar-item-hover-bg: oklch(1 0 0 / 7%);
+  --aui-sidebar-item-active-bg: color-mix(in oklch, var(--sidebar-primary), transparent 80%);
+  --aui-sidebar-item-active-border: color-mix(in oklch, var(--sidebar-primary), transparent 60%);
+  --aui-sidebar-item-active-fg: var(--sidebar-foreground);
+  --aui-sidebar-nav-item-bg: transparent;
+  --aui-sidebar-nav-item-hover-bg: oklch(1 0 0 / 6%);
+  --aui-sidebar-nav-item-active-bg: oklch(1 0 0 / 7%);
+  --aui-sidebar-nav-item-active-border: oklch(1 0 0 / 10%);
+  --aui-table-surface: linear-gradient(180deg, color-mix(in oklch, var(--card), white 2%), var(--card));
+  --aui-table-container-surface: linear-gradient(180deg, color-mix(in oklch, var(--card), white 4%), var(--card));
+  --aui-table-border: oklch(1 0 0 / 8%);
+  --aui-table-selection-surface: oklch(1 0 0 / 4%);
   --aui-control-border-strong: oklch(1 0 0 / 16%);
   --aui-control-hover-border: color-mix(in oklch, var(--ring), transparent 72%);
-  --aui-control-panel-bg: oklch(1 0 0 / 6%);
+  --aui-control-panel-bg: oklch(1 0 0 / 5%);
   --aui-control-panel-shadow: 0 1px 0 oklch(1 0 0 / 6%), 0 20px 48px oklch(0 0 0 / 28%);
+  --aui-button-primary-shadow: 0 1px 0 color-mix(in oklch, white, transparent 82%), 0 18px 40px color-mix(in oklch, var(--primary), transparent 82%);
+  --aui-button-danger-shadow: 0 1px 0 color-mix(in oklch, white, transparent 84%), 0 18px 40px color-mix(in oklch, var(--destructive), transparent 84%);
   --aui-table-header-bg: linear-gradient(180deg, oklch(0.255 0.012 255), oklch(0.225 0.012 255));
   --aui-table-toolbar-bg: linear-gradient(180deg, oklch(0.24 0.012 255), oklch(0.215 0.012 255));
   --aui-table-toolbar-border: oklch(1 0 0 / 9%);
@@ -178,6 +262,127 @@
   [data-slot="button"][data-slot="button"] {
     border-radius: var(--aui-control-radius);
     box-shadow: var(--aui-control-shadow);
+    border-color: var(--aui-control-border-strong);
+    background: var(--aui-control-surface);
+    color: var(--foreground);
+  }
+
+  [data-slot="button"][data-slot="button"]:focus-visible {
+    box-shadow: var(--aui-control-shadow), 0 0 0 1px var(--aui-focus-ring), 0 0 0 5px var(--aui-focus-ring-soft);
+  }
+
+  [data-slot="button"][data-slot="button"]:not(:disabled):not([aria-disabled="true"]):hover {
+    border-color: var(--aui-control-hover-border);
+    background: var(--aui-control-surface-hover);
+  }
+
+  [data-slot="button"][data-variant="default"] {
+    border-color: color-mix(in oklch, var(--primary), black 10%);
+    background: var(--primary);
+    color: var(--primary-foreground);
+    box-shadow: var(--aui-button-primary-shadow);
+  }
+
+  [data-slot="button"][data-variant="default"]:not(:disabled):not([aria-disabled="true"]):hover {
+    background: color-mix(in oklch, var(--primary), white 10%);
+    box-shadow: 0 1px 0 color-mix(in oklch, white, transparent 18%), 0 20px 42px color-mix(in oklch, var(--primary), transparent 74%);
+  }
+
+  [data-slot="button"][data-variant="secondary"] {
+    border-color: color-mix(in oklch, var(--border), var(--foreground) 8%);
+    background: color-mix(in oklch, var(--secondary), var(--background) 18%);
+    color: var(--secondary-foreground);
+  }
+
+  [data-slot="button"][data-variant="outline"] {
+    background: var(--aui-control-surface);
+    color: var(--foreground);
+    box-shadow: none;
+  }
+
+  [data-slot="button"][data-variant="outline"]:not(:disabled):not([aria-disabled="true"]):hover {
+    background: color-mix(in oklch, var(--background), transparent 14%);
+  }
+
+  [data-slot="button"][data-variant="ghost"] {
+    border-color: transparent;
+    background: transparent;
+    box-shadow: none;
+    color: color-mix(in oklch, var(--foreground), transparent 12%);
+  }
+
+  [data-slot="button"][data-variant="ghost"]:not(:disabled):not([aria-disabled="true"]):hover {
+    border-color: color-mix(in oklch, var(--border), var(--foreground) 8%);
+    background: color-mix(in oklch, var(--accent), transparent 22%);
+  }
+
+  [data-slot="button"][data-variant="destructive"] {
+    border-color: color-mix(in oklch, var(--destructive), black 8%);
+    background: var(--destructive);
+    color: var(--aui-danger-foreground);
+    box-shadow: var(--aui-button-danger-shadow);
+  }
+
+  [data-slot="button"][data-variant="destructive"]:not(:disabled):not([aria-disabled="true"]):hover {
+    background: color-mix(in oklch, var(--destructive), white 10%);
+  }
+
+  [data-slot="button"][data-variant="warning"] {
+    border-color: color-mix(in oklch, var(--aui-warning), transparent 64%);
+    background: color-mix(in oklch, var(--aui-warning), transparent 82%);
+    color: color-mix(in oklch, var(--aui-warning-foreground), black 12%);
+    box-shadow: 0 1px 0 color-mix(in oklch, white, transparent 82%), 0 16px 34px color-mix(in oklch, var(--aui-warning), transparent 82%);
+  }
+
+  [data-slot="button"][data-variant="warning"]:not(:disabled):not([aria-disabled="true"]) {
+    background: color-mix(in oklch, var(--aui-warning), transparent 74%);
+    box-shadow: 0 1px 0 color-mix(in oklch, white, transparent 84%), 0 18px 38px color-mix(in oklch, var(--aui-warning), transparent 76%);
+  }
+
+  [data-slot="button"][data-variant="link"] {
+    border-color: transparent;
+    background: transparent;
+    box-shadow: none;
+    color: var(--primary);
+  }
+
+  [data-slot="button"][data-variant="link"]:not(:disabled):not([aria-disabled="true"]):hover {
+    border-color: transparent;
+    background: transparent;
+    color: color-mix(in oklch, var(--primary), white 16%);
+  }
+
+  [data-slot="button"][data-loading="true"] {
+    cursor: progress;
+  }
+
+  [data-slot="button"]:disabled,
+  [data-slot="button"][aria-disabled="true"] {
+    border-color: color-mix(in oklch, var(--border), transparent 24%);
+    background: var(--aui-control-surface-disabled);
+    color: color-mix(in oklch, var(--muted-foreground), transparent 8%);
+    box-shadow: none;
+  }
+
+  [data-slot="button"][data-variant="default"]:disabled,
+  [data-slot="button"][data-variant="default"][aria-disabled="true"],
+  [data-slot="button"][data-variant="destructive"]:disabled,
+  [data-slot="button"][data-variant="destructive"][aria-disabled="true"] {
+    color: color-mix(in oklch, var(--primary-foreground), transparent 24%);
+  }
+
+  [data-slot="button"][data-variant="warning"]:disabled,
+  [data-slot="button"][data-variant="warning"][aria-disabled="true"] {
+    color: color-mix(in oklch, var(--aui-warning-foreground), transparent 30%);
+    background: color-mix(in oklch, var(--aui-warning), transparent 60%);
+  }
+
+  [data-slot="button"][data-variant="link"]:disabled,
+  [data-slot="button"][data-variant="link"][aria-disabled="true"],
+  [data-slot="button"][data-variant="ghost"]:disabled,
+  [data-slot="button"][data-variant="ghost"][aria-disabled="true"] {
+    border-color: transparent;
+    background: transparent;
   }
 
   [data-slot="input"][data-slot="input"],
@@ -185,6 +390,7 @@
   [data-slot="select-trigger"][data-slot="select-trigger"] {
     border-color: var(--aui-control-border-strong);
     border-radius: var(--aui-control-radius);
+    background: var(--aui-control-surface);
     box-shadow: var(--aui-control-shadow);
   }
 
@@ -192,30 +398,360 @@
   [data-slot="textarea"][data-slot="textarea"]:hover,
   [data-slot="select-trigger"][data-slot="select-trigger"]:hover {
     border-color: var(--aui-control-hover-border);
+    background: var(--aui-control-surface-hover);
+  }
+
+  [data-slot="input"][data-slot="input"]:focus-visible,
+  [data-slot="textarea"][data-slot="textarea"]:focus-visible,
+  [data-slot="select-trigger"][data-slot="select-trigger"]:focus-visible {
+    box-shadow: var(--aui-control-shadow), 0 0 0 1px var(--aui-focus-ring), 0 0 0 5px var(--aui-focus-ring-soft);
+  }
+
+  [data-slot="input"][data-slot="input"]:disabled,
+  [data-slot="textarea"][data-slot="textarea"]:disabled,
+  [data-slot="select-trigger"][data-slot="select-trigger"]:disabled {
+    background: var(--aui-control-surface-disabled);
+    border-color: color-mix(in oklch, var(--border), transparent 18%);
+    box-shadow: none;
+  }
+
+  [data-slot="input"][data-slot="input"][readonly],
+  [data-slot="textarea"][data-slot="textarea"][readonly] {
+    background: var(--aui-control-surface-readonly);
+    box-shadow: none;
+  }
+
+  [data-slot="input-field"][data-slot="input-field"] {
+    width: 100%;
+  }
+
+  [data-slot="input-meta"][data-slot="input-meta"] {
+    color: var(--muted-foreground);
+  }
+
+  [data-slot="input-count"][data-slot="input-count"] {
+    color: color-mix(in oklch, var(--muted-foreground), transparent 8%);
+  }
+
+  [data-slot="input"][aria-invalid="true"],
+  [data-slot="textarea"][aria-invalid="true"],
+  [data-slot="select-trigger"][aria-invalid="true"] {
+    border-color: color-mix(in oklch, var(--destructive), transparent 26%);
+    box-shadow: var(--aui-control-shadow), 0 0 0 1px var(--aui-danger-ring), 0 0 0 5px var(--aui-danger-ring-soft);
+  }
+
+  [data-slot="badge"][data-slot="badge"] {
+    border-color: color-mix(in oklch, var(--border), var(--foreground) 5%);
+    background: color-mix(in oklch, var(--muted), var(--background) 42%);
+    color: var(--foreground);
+    box-shadow: inset 0 1px 0 color-mix(in oklch, white, transparent 38%);
+  }
+
+  [data-slot="badge"][data-variant="default"] {
+    border-color: color-mix(in oklch, var(--primary), transparent 64%);
+    background: color-mix(in oklch, var(--primary), transparent 82%);
+    color: color-mix(in oklch, var(--primary), black 28%);
+  }
+
+  [data-slot="badge"][data-variant="secondary"] {
+    border-color: color-mix(in oklch, var(--border), var(--foreground) 6%);
+    background: color-mix(in oklch, var(--muted), var(--background) 26%);
+  }
+
+  [data-slot="badge"][data-variant="outline"] {
+    background: transparent;
+    box-shadow: none;
+  }
+
+  [data-slot="badge"][data-variant="ghost"] {
+    border-color: transparent;
+    background: transparent;
+    color: var(--muted-foreground);
+    box-shadow: none;
+  }
+
+  [data-slot="badge"][data-variant="destructive"] {
+    border-color: color-mix(in oklch, var(--destructive), transparent 64%);
+    background: color-mix(in oklch, var(--destructive), transparent 84%);
+    color: color-mix(in oklch, var(--destructive), black 18%);
+  }
+
+  [data-slot="badge"][data-variant="link"] {
+    border-color: transparent;
+    background: transparent;
+    box-shadow: none;
+    color: var(--primary);
+  }
+
+  [data-slot="badge"][data-tone="info"] {
+    border-color: color-mix(in oklch, var(--aui-info), transparent 64%);
+    background: color-mix(in oklch, var(--aui-info), transparent 82%);
+    color: color-mix(in oklch, var(--aui-info), black 18%);
+  }
+
+  [data-slot="badge"][data-tone="success"] {
+    border-color: color-mix(in oklch, var(--aui-success), transparent 64%);
+    background: color-mix(in oklch, var(--aui-success), transparent 82%);
+    color: color-mix(in oklch, var(--aui-success), black 18%);
+  }
+
+  [data-slot="badge"][data-tone="warning"] {
+    border-color: color-mix(in oklch, var(--aui-warning), transparent 58%);
+    background: color-mix(in oklch, var(--aui-warning), transparent 76%);
+    color: color-mix(in oklch, var(--aui-warning-foreground), black 10%);
+  }
+
+  [data-slot="badge"][data-tone="danger"] {
+    border-color: color-mix(in oklch, var(--destructive), transparent 64%);
+    background: color-mix(in oklch, var(--destructive), transparent 84%);
+    color: color-mix(in oklch, var(--destructive), black 18%);
   }
 
   [data-slot="tabs-list"][data-slot="tabs-list"],
   [data-slot="calendar"][data-slot="calendar"],
   [data-slot="segmented-control"][data-slot="segmented-control"] {
+    border-color: color-mix(in oklch, var(--border), white 4%);
     background: var(--aui-control-panel-bg);
     box-shadow: var(--aui-control-panel-shadow);
   }
 
+  [data-slot="tabs-trigger"][data-slot="tabs-trigger"] {
+    color: var(--muted-foreground);
+  }
+
+  [data-slot="tabs-trigger"][data-slot="tabs-trigger"]:hover {
+    color: var(--foreground);
+    background: color-mix(in oklch, var(--background), transparent 18%);
+  }
+
+  [data-slot="tabs-trigger"][data-slot="tabs-trigger"][data-selected] {
+    border-color: color-mix(in oklch, var(--border), var(--foreground) 8%);
+    background: var(--aui-control-surface);
+    color: var(--foreground);
+    box-shadow: var(--aui-control-shadow);
+  }
+
+  [data-slot="tabs-trigger"][data-slot="tabs-trigger"]:focus-visible {
+    box-shadow: var(--aui-control-shadow), 0 0 0 1px var(--aui-focus-ring), 0 0 0 5px var(--aui-focus-ring-soft);
+  }
+
   [data-slot="card"][data-slot="card"],
   [data-slot="stat-card"][data-slot="stat-card"] {
     border: 1px solid var(--aui-card-border);
     border-radius: var(--aui-card-radius);
+    background: linear-gradient(180deg, color-mix(in oklch, var(--card), white 8%), var(--card));
     box-shadow: var(--aui-card-shadow);
   }
 
+  [data-slot="card"][data-variant="elevated"] {
+    box-shadow: 0 1px 0 oklch(1 0 0 / 76%), 0 24px 58px oklch(0.24 0.02 255 / 10%);
+  }
+
+  [data-slot="card"][data-variant="outline"] {
+    background: var(--aui-card-outline-bg);
+    box-shadow: none;
+  }
+
+  [data-slot="card"][data-variant="soft"] {
+    border-color: color-mix(in oklch, var(--border), transparent 28%);
+    background: var(--aui-card-soft-bg);
+    box-shadow: none;
+  }
+
+  [data-slot="card"][data-tone="info"] {
+    background: linear-gradient(180deg, color-mix(in oklch, var(--card), var(--aui-info) 14%), var(--card));
+  }
+
+  [data-slot="card"][data-tone="success"] {
+    background: linear-gradient(180deg, color-mix(in oklch, var(--card), var(--aui-success) 14%), var(--card));
+  }
+
+  [data-slot="card"][data-tone="warning"] {
+    background: linear-gradient(180deg, color-mix(in oklch, var(--card), var(--aui-warning) 14%), var(--card));
+  }
+
+  [data-slot="card"][data-tone="danger"] {
+    background: linear-gradient(180deg, color-mix(in oklch, var(--card), var(--destructive) 10%), var(--card));
+  }
+
+  [data-slot="card"][data-interactive="true"]:hover {
+    border-color: var(--aui-control-hover-border);
+    box-shadow: var(--aui-card-shadow-hover);
+  }
+
+  [data-slot="card"][data-interactive="true"]:focus-visible {
+    box-shadow: var(--aui-card-shadow), 0 0 0 1px var(--aui-focus-ring), 0 0 0 5px var(--aui-focus-ring-soft);
+  }
+
+  [data-slot="card"][data-selected="true"] {
+    border-color: color-mix(in oklch, var(--primary), transparent 44%);
+    box-shadow: var(--aui-card-shadow), 0 0 0 1px color-mix(in oklch, var(--primary), transparent 64%), 0 0 0 6px color-mix(in oklch, var(--primary), transparent 88%);
+  }
+
+  [data-slot="card"][data-disabled="true"] {
+    box-shadow: none;
+    opacity: 0.76;
+  }
+
+  [data-slot="card"][data-size="sm"] {
+    border-radius: var(--radius-xl);
+  }
+
+  [data-slot="card"][data-size="lg"] {
+    border-radius: var(--radius-3xl);
+  }
+
+  [data-slot="card"][data-density="compact"] [data-slot="card-description"] {
+    font-size: 0.8125rem;
+    line-height: 1.35;
+  }
+
+  [data-slot="card"][data-density="comfortable"] [data-slot="card-description"] {
+    font-size: 0.975rem;
+    line-height: 1.7;
+  }
+
+  [data-slot="card"] [data-slot="card"][data-slot="card"] {
+    box-shadow: none;
+    border-color: color-mix(in oklch, var(--border), transparent 18%);
+    background: color-mix(in oklch, var(--muted), transparent 74%);
+  }
+
+  [data-slot="card-footer"][data-slot="card-footer"] {
+    background: linear-gradient(180deg, color-mix(in oklch, var(--muted), transparent 80%), color-mix(in oklch, var(--muted), transparent 66%));
+  }
+
   [data-slot="popover-content"][data-slot="popover-content"],
   [data-slot="dropdown-menu-content"][data-slot="dropdown-menu-content"],
   [data-slot="dialog-content"][data-slot="dialog-content"],
-  [data-slot="sheet-content"][data-slot="sheet-content"] {
+  [data-slot="sheet-content"][data-slot="sheet-content"],
+  [data-slot="select-content"][data-slot="select-content"] {
+    border-color: var(--aui-overlay-border);
+    background: var(--aui-overlay-surface);
+    box-shadow: var(--aui-popover-shadow);
+  }
+
+  [data-slot="dialog-footer"][data-slot="dialog-footer"] {
+    border-color: color-mix(in oklch, var(--border), transparent 12%);
+    background: var(--aui-overlay-footer-bg);
+  }
+
+  [data-slot="dialog-content"][data-size="xs"] {
+    max-width: min(28rem, calc(100% - 2rem));
+  }
+
+  [data-slot="dialog-content"][data-size="sm"] {
+    max-width: min(34rem, calc(100% - 2rem));
+  }
+
+  [data-slot="dialog-content"][data-size="md"] {
+    max-width: min(40rem, calc(100% - 2rem));
+  }
+
+  [data-slot="dialog-content"][data-size="lg"] {
+    max-width: min(48rem, calc(100% - 2rem));
+  }
+
+  [data-slot="dialog-content"][data-size="xl"] {
+    max-width: min(64rem, calc(100% - 2rem));
+  }
+
+  [data-slot="dialog-content"][data-size="full"] {
+    max-width: min(84rem, calc(100% - 2rem));
+  }
+
+  [data-slot="select-item"][data-slot="select-item"]:focus,
+  [data-slot="select-item"][data-slot="select-item"][data-highlighted] {
+    border-color: color-mix(in oklch, var(--border), var(--foreground) 8%);
+    background: color-mix(in oklch, var(--accent), transparent 18%);
+    color: var(--accent-foreground);
+  }
+
+  [data-slot="select-item"][data-slot="select-item"][data-selected] {
+    border-color: color-mix(in oklch, var(--primary), transparent 72%);
+    background: color-mix(in oklch, var(--primary), transparent 88%);
+    color: var(--foreground);
+  }
+
+  [data-slot="select-search"][data-slot="select-search"] {
+    border-color: color-mix(in oklch, var(--border), white 4%);
+    background: var(--aui-control-surface);
+    box-shadow: var(--aui-control-shadow);
+  }
+
+  [data-slot="select-state"][data-slot="select-state"] {
+    color: var(--muted-foreground);
+  }
+
+  [data-slot="async-select-content"][data-slot="async-select-content"] {
+    border-color: var(--aui-overlay-border);
+    background: var(--aui-overlay-surface);
     box-shadow: var(--aui-popover-shadow);
   }
 
+  [data-slot="async-select-trigger"][data-slot="async-select-trigger"] {
+    background: var(--aui-control-surface);
+  }
+
+  [data-slot="async-select-meta"][data-slot="async-select-meta"] {
+    border-color: color-mix(in oklch, var(--border), white 4%);
+    background: color-mix(in oklch, var(--muted), transparent 72%);
+  }
+
+  [data-slot="async-select-state"][data-slot="async-select-state"] {
+    border-color: color-mix(in oklch, var(--border), white 4%);
+    background: color-mix(in oklch, var(--muted), transparent 72%);
+    box-shadow: inset 0 1px 0 oklch(1 0 0 / 8%);
+  }
+
+  [data-slot="async-select-option"][data-slot="async-select-option"]:hover {
+    border-color: color-mix(in oklch, var(--border), white 4%);
+    background: color-mix(in oklch, var(--accent), transparent 16%);
+    color: var(--accent-foreground);
+  }
+
+  [data-slot="async-select-option"][data-selected="true"] {
+    border-color: color-mix(in oklch, var(--primary), transparent 70%);
+    background: color-mix(in oklch, var(--primary), transparent 88%);
+    color: var(--foreground);
+    box-shadow: inset 0 1px 0 oklch(1 0 0 / 10%);
+  }
+
+  [data-slot="async-select-create"][data-slot="async-select-create"] {
+    border-color: color-mix(in oklch, var(--border), white 4%);
+    background: color-mix(in oklch, var(--background), transparent 14%);
+  }
+
+  [data-slot="async-select-create"][data-slot="async-select-create"]:hover {
+    border-color: color-mix(in oklch, var(--primary), transparent 68%);
+    background: color-mix(in oklch, var(--primary), transparent 92%);
+  }
+
+  [data-slot="async-select-tag"][data-slot="async-select-tag"] {
+    border-color: color-mix(in oklch, var(--border), white 4%);
+    background: color-mix(in oklch, var(--muted), transparent 72%);
+    box-shadow: inset 0 1px 0 oklch(1 0 0 / 4%);
+  }
+
+  [data-slot="async-select-clear"][data-slot="async-select-clear"],
+  [data-slot="clearable-input-clear"][data-slot="clearable-input-clear"],
+  [data-slot="async-select-meta-action"][data-slot="async-select-meta-action"] {
+    border-color: color-mix(in oklch, var(--border), white 4%);
+  }
+
+  [data-slot="async-select-clear"][data-slot="async-select-clear"]:hover,
+  [data-slot="clearable-input-clear"][data-slot="clearable-input-clear"]:hover,
+  [data-slot="async-select-meta-action"][data-slot="async-select-meta-action"]:hover {
+    background: color-mix(in oklch, var(--background), transparent 18%);
+  }
+
+  [data-slot="async-select-group-label"][data-slot="async-select-group-label"] {
+    color: var(--muted-foreground);
+  }
+
   [data-slot="data-table-wrapper"][data-slot="data-table-wrapper"] {
+    border-color: var(--aui-table-border);
+    background: var(--aui-table-surface);
     box-shadow: var(--aui-card-shadow);
   }
 
@@ -226,6 +762,18 @@
     box-shadow: var(--aui-card-shadow);
   }
 
+  [data-slot="data-table-toolbar"][data-variant="soft"] {
+    border-color: transparent;
+    background: color-mix(in oklch, var(--muted), transparent 70%);
+    box-shadow: none;
+  }
+
+  [data-slot="data-table-selection-bar"][data-slot="data-table-selection-bar"] {
+    border-color: color-mix(in oklch, var(--border), white 4%);
+    background: var(--aui-table-selection-surface);
+    box-shadow: var(--aui-control-shadow);
+  }
+
   [data-slot="data-table-wrapper"] thead {
     background: var(--aui-table-header-bg);
   }
@@ -243,9 +791,161 @@
   }
 
   [data-slot="data-table-pagination"][data-slot="data-table-pagination"] {
+    border-color: var(--aui-table-border);
     background: var(--aui-table-footer-bg);
   }
 
+  [data-slot="table-container"][data-slot="table-container"] {
+    border-color: var(--aui-table-border);
+    background: var(--aui-table-container-surface);
+    box-shadow: var(--aui-card-shadow);
+  }
+
+  [data-slot="table-header"][data-slot="table-header"] {
+    background: color-mix(in oklch, var(--muted), transparent 72%);
+  }
+
+  [data-slot="table-footer"][data-slot="table-footer"] {
+    background: color-mix(in oklch, var(--muted), transparent 54%);
+  }
+
+  [data-slot="table-row"][data-slot="table-row"] {
+    border-color: color-mix(in oklch, var(--border), white 2%);
+  }
+
+  [data-slot="table-row"][data-slot="table-row"]:hover {
+    background: color-mix(in oklch, var(--muted), transparent 72%);
+  }
+
+  [data-slot="table-row"][data-state="selected"] {
+    background: color-mix(in oklch, var(--primary), transparent 88%);
+  }
+
+  [data-slot="table-row"][data-striped="true"] {
+    background: var(--aui-table-stripe-bg);
+  }
+
+  [data-slot="app-sidebar"][data-slot="app-sidebar"] {
+    border-right: 1px solid var(--aui-sidebar-border);
+    background: var(--aui-sidebar-surface);
+    box-shadow: inset -1px 0 0 oklch(1 0 0 / 4%);
+  }
+
+  [data-slot="app-sidebar-header"][data-slot="app-sidebar-header"],
+  [data-slot="app-sidebar-footer"][data-slot="app-sidebar-footer"] {
+    border-color: var(--aui-sidebar-border);
+  }
+
+  [data-slot="app-sidebar-item"][data-slot="app-sidebar-item"] {
+    background: var(--aui-sidebar-item-bg);
+    color: color-mix(in oklch, var(--sidebar-foreground), transparent 8%);
+  }
+
+  [data-slot="app-sidebar-item"][data-slot="app-sidebar-item"]:hover {
+    border-color: color-mix(in oklch, var(--sidebar-border), white 6%);
+    background: var(--aui-sidebar-item-hover-bg);
+    color: var(--sidebar-accent-foreground);
+  }
+
+  [data-slot="app-sidebar-item"][data-active="true"] {
+    border-color: var(--aui-sidebar-item-active-border);
+    background: var(--aui-sidebar-item-active-bg);
+    color: var(--aui-sidebar-item-active-fg);
+    box-shadow: 0 1px 0 oklch(1 0 0 / 6%), 0 10px 24px color-mix(in oklch, var(--sidebar-primary), transparent 88%);
+  }
+
+  [data-slot="app-sidebar-item"][data-slot="app-sidebar-item"]:focus-visible {
+    box-shadow: 0 0 0 1px color-mix(in oklch, var(--sidebar-ring), transparent 40%), 0 0 0 5px color-mix(in oklch, var(--sidebar-ring), transparent 82%);
+  }
+
+  [data-slot="app-sidebar-group-trigger"][data-slot="app-sidebar-group-trigger"] {
+    color: color-mix(in oklch, var(--sidebar-foreground), transparent 8%);
+  }
+
+  [data-slot="app-sidebar-group-trigger"][data-slot="app-sidebar-group-trigger"]:hover {
+    border-color: color-mix(in oklch, var(--sidebar-border), white 6%);
+    background: var(--aui-sidebar-item-hover-bg);
+    color: var(--sidebar-accent-foreground);
+  }
+
+  [data-slot="app-sidebar-group-content"][data-slot="app-sidebar-group-content"] {
+    border-left: 1px solid color-mix(in oklch, var(--sidebar-border), transparent 28%);
+  }
+
+  [data-slot="app-sidebar-group-label"][data-slot="app-sidebar-group-label"] {
+    color: color-mix(in oklch, var(--sidebar-foreground), transparent 42%);
+  }
+
+  [data-slot="app-sidebar-footer-secondary"][data-slot="app-sidebar-footer-secondary"] {
+    border-bottom: 1px solid color-mix(in oklch, var(--sidebar-border), transparent 16%);
+    padding-bottom: 0.75rem;
+  }
+
+  [data-slot="app-sidebar-action"][data-slot="app-sidebar-action"],
+  [data-slot="app-sidebar-account"][data-slot="app-sidebar-account"] {
+    background: color-mix(in oklch, var(--sidebar), transparent 24%);
+    color: color-mix(in oklch, var(--sidebar-foreground), transparent 10%);
+  }
+
+  [data-slot="app-sidebar-action"][data-slot="app-sidebar-action"]:hover,
+  [data-slot="app-sidebar-account"][data-slot="app-sidebar-account"]:hover {
+    border-color: color-mix(in oklch, var(--sidebar-border), white 6%);
+    background: var(--aui-sidebar-item-hover-bg);
+    color: var(--sidebar-accent-foreground);
+  }
+
+  [data-slot="app-sidebar-rail-actions"][data-slot="app-sidebar-rail-actions"] {
+    margin-bottom: 0.75rem;
+  }
+
+  [data-slot="app-sidebar-account-wrap"][data-slot="app-sidebar-account-wrap"] {
+    border-top: 1px solid color-mix(in oklch, var(--sidebar-border), transparent 18%);
+    padding-top: 0.75rem;
+  }
+
+  [data-slot="sidebar-nav-item"][data-slot="sidebar-nav-item"] {
+    background: var(--aui-sidebar-nav-item-bg);
+    color: var(--muted-foreground);
+  }
+
+  [data-slot="sidebar-nav-item"][data-slot="sidebar-nav-item"]:hover {
+    border-color: var(--aui-sidebar-nav-item-active-border);
+    background: var(--aui-sidebar-nav-item-hover-bg);
+    color: var(--foreground);
+  }
+
+  [data-slot="sidebar-nav-item"][data-active="true"] {
+    border-color: var(--aui-sidebar-nav-item-active-border);
+    background: var(--aui-sidebar-nav-item-active-bg);
+    color: var(--foreground);
+  }
+
+  [data-slot="sidebar-nav-group-trigger"][data-slot="sidebar-nav-group-trigger"] {
+    color: var(--muted-foreground);
+  }
+
+  [data-slot="sidebar-nav-group-trigger"][data-slot="sidebar-nav-group-trigger"]:hover {
+    border-color: var(--aui-sidebar-nav-item-active-border);
+    background: var(--aui-sidebar-nav-item-hover-bg);
+    color: var(--foreground);
+  }
+
+  [data-slot="sidebar-nav-group-label"][data-slot="sidebar-nav-group-label"] {
+    color: color-mix(in oklch, var(--muted-foreground), transparent 12%);
+  }
+
+  [data-slot="breadcrumbs-collapsed"][data-slot="breadcrumbs-collapsed"] {
+    background: color-mix(in oklch, var(--muted), transparent 72%);
+  }
+
+  [data-slot="breadcrumbs-link"][data-slot="breadcrumbs-link"]:hover {
+    color: var(--foreground);
+  }
+
+  [data-slot="breadcrumbs-current"][data-slot="breadcrumbs-current"] {
+    color: var(--foreground);
+  }
+
   [data-slot="file-upload-dropzone"][data-dragging="true"] {
     border-color: var(--primary);
     background: color-mix(in oklch, var(--primary), transparent 93%);