keystone_ui-styles 0.4.0 → 0.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 313dc2e29ebb30c8b62fcc732e29f8b22a1eac18864da55c47f953b0006537da
-  data.tar.gz: 41caf540753ab7495a116ed1e2ccfcd60ba40fd119d859740bbbd743fe70fddc
+  metadata.gz: 4865024c95ea2eab6c71aceb4047def052b27aed1b0ca16848c4cfedf4046742
+  data.tar.gz: 564646b1320c31fc79494bf3f8a80cce40525336de6def1e3a1684f6d669e8fd
 SHA512:
-  metadata.gz: 1400b6b290038f3b750c14ea37d9a4559c6ebd0e7d5182b03f1ef9e5e546a71f24364715a71cbe8332d4378beabc7d29493adfb94c4a8d65292c32a9e51b3f8e
-  data.tar.gz: '09fd3861e0b7f2077af23dd81c400e955a23066dd5de631a14e3a0dd7a575ff88da01773dddd11f4b48c168da266f7081bfdce5206308f9296d950c3e9076df9'
+  metadata.gz: 4d3fdf1c9429b1bd465c3693da8ff2092263e7e883962d31d32fd5cce2c91ecc9395d84452307f77ee953e44a7b27789c3e735fabda5b50932de25b8c0420889
+  data.tar.gz: f5508779eb84ad00a0cf33ad2f1ba86ec072356e404622b483336185bfb3b0c155a393d771bed8d0c8703db3dd8c7a7c2d8309eccabf281b967582dcdd6b2a6e

data/app/assets/tailwind/keystone_ui_styles/engine.css

@@ -85,6 +85,164 @@
     --ks-color-danger-dark: var(--color-red-600);
     --ks-color-danger-hover-dark: var(--color-red-500);
     --ks-color-on-fill-dark: var(--color-white);
+    --ks-color-surface: var(--color-white);
+    --ks-color-surface-dark: var(--color-zinc-900);
+    --ks-color-border: var(--color-gray-200);
+    --ks-color-border-dark: var(--color-zinc-700);
+    --ks-color-border-control: var(--color-gray-300);
+    --ks-color-border-control-dark: var(--color-zinc-700);
+    --ks-color-text: var(--color-gray-900);
+    --ks-color-text-dark: var(--color-white);
+    --ks-color-text-label: var(--color-gray-700);
+    --ks-color-text-label-dark: var(--color-gray-300);
+    --ks-color-text-muted: var(--color-gray-500);
+    --ks-color-text-muted-dark: var(--color-gray-400);
+    --ks-font-weight-heading: var(--font-weight-semibold);
+    --ks-radius-surface: var(--radius-lg);
+    --ks-shadow-surface: var(--shadow-sm);
+    --ks-color-success-50: var(--color-green-50);
+    --ks-color-success-100: var(--color-green-100);
+    --ks-color-success-300: var(--color-green-300);
+    --ks-color-success-400: var(--color-green-400);
+    --ks-color-success-700: var(--color-green-700);
+    --ks-color-success-800: var(--color-green-800);
+    --ks-color-success-900: var(--color-green-900);
+    --ks-color-warning-50: var(--color-yellow-50);
+    --ks-color-warning-100: var(--color-yellow-100);
+    --ks-color-warning-300: var(--color-yellow-300);
+    --ks-color-warning-400: var(--color-yellow-400);
+    --ks-color-warning-700: var(--color-yellow-700);
+    --ks-color-warning-800: var(--color-yellow-800);
+    --ks-color-warning-900: var(--color-yellow-900);
+    --ks-color-danger-50: var(--color-red-50);
+    --ks-color-danger-100: var(--color-red-100);
+    --ks-color-danger-300: var(--color-red-300);
+    --ks-color-danger-400: var(--color-red-400);
+    --ks-color-danger-700: var(--color-red-700);
+    --ks-color-danger-800: var(--color-red-800);
+    --ks-color-danger-900: var(--color-red-900);
+    --ks-color-info-50: var(--color-accent-50);
+    --ks-color-info-100: var(--color-accent-100);
+    --ks-color-info-300: var(--color-accent-300);
+    --ks-color-info-400: var(--color-accent-400);
+    --ks-color-info-700: var(--color-accent-700);
+    --ks-color-info-800: var(--color-accent-800);
+    --ks-color-info-900: var(--color-accent-900);
+    --ks-border-width: 1px;
+    --ks-shadow-overlay: var(--shadow-lg);
+    --ks-font-weight-medium: var(--font-weight-medium);
+    --ks-color-backdrop: color-mix(in oklab, var(--color-black) 60%, transparent);
+    --ks-color-overlay: var(--color-white);
+    --ks-color-overlay-dark: var(--color-zinc-800);
+    --ks-color-text-heading: var(--color-gray-900);
+    --ks-color-text-heading-dark: var(--color-gray-200);
+    --ks-color-close: var(--color-gray-400);
+    --ks-color-close-hover: var(--color-gray-600);
+    --ks-color-close-hover-dark: var(--color-gray-200);
+    --ks-color-ring: color-mix(in oklab, var(--color-black) 5%, transparent);
+    --ks-color-ring-dark: color-mix(in oklab, var(--color-white) 10%, transparent);
+    --ks-color-hover: var(--color-gray-50);
+    --ks-color-hover-dark: var(--color-zinc-800);
+    --ks-color-border-strong: var(--color-gray-300);
+    --ks-color-border-strong-dark: var(--color-zinc-600);
+    --ks-color-focus: var(--color-accent-500);
+    --ks-color-hover-raised: var(--color-gray-50);
+    --ks-color-hover-raised-dark: var(--color-zinc-700);
+    --ks-color-border-choice: var(--color-surface-300);
+    --ks-color-text-choice: var(--color-surface-900);
+    --ks-color-text-choice-dark: var(--color-surface-100);
+    --ks-color-text-choice-muted: var(--color-surface-500);
+    --ks-color-text-choice-muted-dark: var(--color-surface-400);
+    --ks-color-selected-border: var(--color-accent-500);
+    --ks-color-selected: var(--color-accent-50);
+    --ks-color-selected-dark: var(--color-zinc-800);
+    --ks-color-text-option: var(--color-gray-900);
+    --ks-color-text-option-dark: var(--color-gray-100);
+    --ks-color-text-option-muted: var(--color-surface-500);
+    --ks-color-text-option-muted-dark: var(--color-gray-400);
+    --ks-color-drop-active: var(--color-accent-50);
+    --ks-color-drop-active-dark: color-mix(in oklab, var(--color-accent-900) 10%, transparent);
+    --ks-color-icon: var(--color-gray-400);
+    --ks-color-icon-dark: var(--color-gray-500);
+    --ks-color-text-secondary: var(--color-gray-600);
+    --ks-color-text-secondary-dark: var(--color-gray-400);
+    --ks-color-link: var(--color-accent-600);
+    --ks-color-link-dark: var(--color-accent-400);
+    --ks-color-link-hover: var(--color-accent-500);
+    --ks-color-link-hover-dark: var(--color-accent-300);
+    --ks-radius-pill: calc(infinity * 1px);
+    --ks-color-success-600: var(--color-green-600);
+    --ks-color-warning-600: var(--color-yellow-600);
+    --ks-color-danger-600: var(--color-red-600);
+    --ks-color-info-600: var(--color-accent-600);
+    --ks-color-danger-500: var(--color-red-500);
+    --ks-color-hover-border: color-mix(in oklab, var(--color-accent-500) 50%, transparent);
+    --ks-color-border-subtle: var(--color-surface-200);
+    --ks-color-border-subtle-dark: var(--color-surface-700);
+    --ks-color-fill-muted: var(--color-surface-50);
+    --ks-color-fill-muted-dark: var(--color-surface-800);
+    --ks-color-text-display: var(--color-surface-900);
+    --ks-color-text-display-dark: var(--color-white);
+    --ks-color-text-display-muted: var(--color-surface-500);
+    --ks-color-text-display-muted-dark: var(--color-surface-400);
+    --ks-color-raised: var(--color-white);
+    --ks-color-raised-dark: var(--color-surface-800);
+    --ks-color-tint: color-mix(in oklab, var(--color-accent-500) 10%, transparent);
+    --ks-color-tint-border: color-mix(in oklab, var(--color-accent-500) 20%, transparent);
+    --ks-shadow-surface-dark: 0 0 #0000;
+    --ks-color-table-head: var(--color-gray-50);
+    --ks-color-table-head-dark: color-mix(in oklab, var(--color-gray-800) 75%, transparent);
+    --ks-color-table-body: var(--color-white);
+    --ks-color-table-body-dark: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
+    --ks-color-divider: var(--color-gray-200);
+    --ks-color-divider-dark: color-mix(in oklab, var(--color-white) 10%, transparent);
+    --ks-color-code: var(--color-surface-900);
+    --ks-color-code-dark: var(--color-black);
+    --ks-color-text-code: var(--color-surface-100);
+    --ks-color-text-body: var(--color-surface-600);
+    --ks-color-text-body-dark: var(--color-surface-400);
+    --ks-color-icon-soft: var(--color-surface-400);
+    --ks-color-track: var(--color-surface-200);
+    --ks-color-track-dark: var(--color-surface-700);
+    --ks-color-meter: var(--color-accent-500);
+    --ks-color-text-meter-label: var(--color-surface-700);
+    --ks-color-text-meter-label-dark: var(--color-surface-300);
+    --ks-color-funnel-accent: var(--color-accent-500);
+    --ks-color-funnel-sky: var(--color-sky-500);
+    --ks-color-funnel-violet: var(--color-violet-500);
+    --ks-color-funnel-amber: var(--color-amber-500);
+    --ks-color-funnel-rose: var(--color-rose-500);
+    --ks-color-over-goal: var(--color-green-500);
+    --ks-color-over-goal-warning: var(--color-amber-500);
+    --ks-color-pipeline-border: var(--color-surface-700);
+    --ks-color-pipeline: var(--color-surface-800);
+    --ks-color-text-on-dark: var(--color-white);
+    --ks-color-pipeline-muted: var(--color-surface-400);
+    --ks-color-pipeline-box: var(--color-surface-900);
+    --ks-color-pipeline-label: var(--color-surface-500);
+    --ks-color-pipeline-amber: var(--color-amber-400);
+    --ks-color-nav: var(--base-bg-low, var(--color-white));
+    --ks-color-nav-dark: var(--base-bg-low, var(--color-zinc-900));
+    --ks-color-nav-border: var(--base-border-tertiary, var(--color-gray-200));
+    --ks-color-nav-border-dark: var(--base-border-tertiary, var(--color-zinc-700));
+    --ks-color-nav-text: var(--base-text-tertiary, var(--color-gray-500));
+    --ks-color-nav-text-dark: var(--base-text-tertiary, var(--color-gray-400));
+    --ks-color-nav-text-hover: var(--base-text-secondary, var(--color-gray-700));
+    --ks-color-nav-text-hover-dark: var(--base-text-secondary, var(--color-gray-300));
+    --ks-color-nav-active: var(--text-primary, var(--color-accent-600));
+    --ks-color-nav-active-dark: var(--text-primary, var(--color-accent-400));
+    --ks-color-nav-link: var(--base-text, var(--color-gray-900));
+    --ks-color-nav-link-dark: var(--base-text, var(--color-white));
+    --ks-color-nav-indicator: var(--border-primary, var(--color-accent-600));
+    --ks-color-nav-indicator-dark: var(--border-primary, var(--color-accent-400));
+    --ks-color-nav-menu-mobile: var(--base-bg-base, var(--color-white));
+    --ks-color-nav-menu-mobile-dark: var(--base-bg-base, var(--color-zinc-900));
+    --ks-color-nav-hover: var(--base-bg-hover, var(--color-gray-50));
+    --ks-color-nav-hover-dark: var(--base-bg-hover, var(--color-zinc-800));
+    --ks-shadow-menu: var(--shadow-md);
+    --ks-font-weight-normal: var(--font-weight-normal);
+    --ks-color-hover-soft: var(--color-gray-50);
+    --ks-color-hover-soft-dark: var(--color-gray-800);
   }
 }
 
@@ -118,11 +276,11 @@
   }
 
   .ks-panel {
-    @apply border border-gray-200 bg-white dark:bg-zinc-900 dark:border-zinc-700;
+    @apply border border-(color:--ks-color-border) bg-(color:--ks-color-surface) dark:bg-(color:--ks-color-surface-dark) dark:border-(color:--ks-color-border-dark);
   }
 
   .ks-input {
-    @apply block w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:border-accent-500 focus:ring-accent-500 dark:bg-zinc-900 dark:border-zinc-700 dark:text-white dark:placeholder:text-gray-500 dark:focus:border-accent-400 dark:focus:ring-accent-400;
+    @apply block w-full rounded-[calc(var(--ks-radius-control)*0.75)] border border-(color:--ks-color-border-control) bg-(color:--ks-color-surface) px-[calc(var(--ks-spacing)*3)] py-[calc(var(--ks-spacing)*2)] text-sm text-(color:--ks-color-text) placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:border-accent-500 focus:ring-accent-500 dark:bg-(color:--ks-color-surface-dark) dark:border-(color:--ks-color-border-control-dark) dark:text-(color:--ks-color-text-dark) dark:placeholder:text-gray-500 dark:focus:border-accent-400 dark:focus:ring-accent-400;
   }
 
   .ks-input-disabled {
@@ -130,7 +288,7 @@
   }
 
   .ks-label {
-    @apply block text-sm font-medium text-gray-700 dark:text-gray-300;
+    @apply block text-sm font-medium text-(color:--ks-color-text-label) dark:text-(color:--ks-color-text-label-dark);
   }
 
   .ks-required {
@@ -138,7 +296,7 @@
   }
 
   .ks-hint {
-    @apply mt-1 text-sm text-gray-500 dark:text-gray-400;
+    @apply mt-1 text-sm text-(color:--ks-color-text-muted) dark:text-(color:--ks-color-text-muted-dark);
   }
 
   .ks-error {
@@ -150,7 +308,7 @@
   }
 
   .ks-page {
-    @apply px-4 py-4 sm:px-6 lg:px-8;
+    @apply px-[calc(var(--ks-spacing)*4)] py-[calc(var(--ks-spacing)*4)] sm:px-[calc(var(--ks-spacing)*6)] lg:px-[calc(var(--ks-spacing)*8)];
   }
 
   .ks-page-sm {
@@ -190,11 +348,11 @@
   }
 
   .ks-page-header-title {
-    @apply text-2xl font-bold text-gray-900 dark:text-white;
+    @apply text-2xl font-[weight:calc(var(--ks-font-weight-heading)+100)] text-(color:--ks-color-text) dark:text-(color:--ks-color-text-dark);
   }
 
   .ks-page-header-subtitle {
-    @apply mt-1 text-sm text-gray-500 dark:text-gray-400;
+    @apply mt-1 text-sm text-(color:--ks-color-text-muted) dark:text-(color:--ks-color-text-muted-dark);
   }
 
   .ks-page-header-actions {
@@ -218,11 +376,11 @@
   }
 
   .ks-section-title {
-    @apply text-lg font-semibold text-gray-900 dark:text-white;
+    @apply text-lg font-(weight:--ks-font-weight-heading) text-(color:--ks-color-text) dark:text-(color:--ks-color-text-dark);
   }
 
   .ks-section-subtitle {
-    @apply mt-1 text-sm text-gray-500 dark:text-gray-400;
+    @apply mt-1 text-sm text-(color:--ks-color-text-muted) dark:text-(color:--ks-color-text-muted-dark);
   }
 
   .ks-section-action {
@@ -230,27 +388,27 @@
   }
 
   .ks-card {
-    @apply overflow-hidden rounded-lg border border-gray-200 bg-white dark:bg-zinc-900 dark:border-zinc-700;
+    @apply overflow-hidden rounded-(--ks-radius-surface) border border-(color:--ks-color-border) bg-(color:--ks-color-surface) dark:bg-(color:--ks-color-surface-dark) dark:border-(color:--ks-color-border-dark);
   }
 
   .ks-card-edge {
-    @apply overflow-hidden border-y border-gray-200 bg-white sm:rounded-lg sm:border-x dark:bg-zinc-900 dark:border-zinc-700;
+    @apply overflow-hidden border-y border-(color:--ks-color-border) bg-(color:--ks-color-surface) sm:rounded-(--ks-radius-surface) sm:border-x dark:bg-(color:--ks-color-surface-dark) dark:border-(color:--ks-color-border-dark);
   }
 
   .ks-card-body {
-    @apply px-4 py-4 sm:px-6 sm:pt-6 sm:pb-4;
+    @apply px-[calc(var(--ks-spacing)*4)] py-[calc(var(--ks-spacing)*4)] sm:px-[calc(var(--ks-spacing)*6)] sm:pt-[calc(var(--ks-spacing)*6)] sm:pb-[calc(var(--ks-spacing)*4)];
   }
 
   .ks-card-title {
-    @apply text-lg font-semibold text-gray-900 dark:text-white m-0;
+    @apply text-lg font-(weight:--ks-font-weight-heading) text-(color:--ks-color-text) dark:text-(color:--ks-color-text-dark) m-0;
   }
 
   .ks-card-summary {
-    @apply mt-1 text-sm text-gray-500 dark:text-gray-400 mb-0;
+    @apply mt-1 text-sm text-(color:--ks-color-text-muted) dark:text-(color:--ks-color-text-muted-dark) mb-0;
   }
 
   .ks-card-cta {
-    @apply px-4 pb-4 sm:px-6 sm:pb-6;
+    @apply px-[calc(var(--ks-spacing)*4)] pb-[calc(var(--ks-spacing)*4)] sm:px-[calc(var(--ks-spacing)*6)] sm:pb-[calc(var(--ks-spacing)*6)];
   }
 
   .ks-card-link {
@@ -258,23 +416,23 @@
   }
 
   .ks-alert {
-    @apply rounded-md p-4;
+    @apply rounded-[calc(var(--ks-radius-surface)*0.75)] p-[calc(var(--ks-spacing)*4)];
   }
 
   .ks-alert-info {
-    @apply bg-accent-50 text-accent-800 dark:bg-accent-900/30 dark:text-accent-300;
+    @apply bg-(color:--ks-color-info-50) text-(color:--ks-color-info-800) dark:bg-(color:--ks-color-info-900)/30 dark:text-(color:--ks-color-info-300);
   }
 
   .ks-alert-success {
-    @apply bg-green-50 text-green-800 dark:bg-green-900/30 dark:text-green-300;
+    @apply bg-(color:--ks-color-success-50) text-(color:--ks-color-success-800) dark:bg-(color:--ks-color-success-900)/30 dark:text-(color:--ks-color-success-300);
   }
 
   .ks-alert-warning {
-    @apply bg-yellow-50 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300;
+    @apply bg-(color:--ks-color-warning-50) text-(color:--ks-color-warning-800) dark:bg-(color:--ks-color-warning-900)/30 dark:text-(color:--ks-color-warning-300);
   }
 
   .ks-alert-error {
-    @apply bg-red-50 text-red-800 dark:bg-red-900/30 dark:text-red-300;
+    @apply bg-(color:--ks-color-danger-50) text-(color:--ks-color-danger-800) dark:bg-(color:--ks-color-danger-900)/30 dark:text-(color:--ks-color-danger-300);
   }
 
   .ks-alert-body {
@@ -286,7 +444,7 @@
   }
 
   .ks-alert-title {
-    @apply font-semibold;
+    @apply font-(weight:--ks-font-weight-heading);
   }
 
   .ks-alert-message {
@@ -310,18 +468,726 @@
   }
 
   .ks-badge-success {
-    @apply bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-400;
+    @apply bg-(color:--ks-color-success-100) text-(color:--ks-color-success-700) dark:bg-(color:--ks-color-success-900)/50 dark:text-(color:--ks-color-success-400);
   }
 
   .ks-badge-danger {
-    @apply bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-400;
+    @apply bg-(color:--ks-color-danger-100) text-(color:--ks-color-danger-700) dark:bg-(color:--ks-color-danger-900)/50 dark:text-(color:--ks-color-danger-400);
   }
 
   .ks-badge-warning {
-    @apply bg-yellow-100 text-yellow-700 dark:bg-yellow-900/50 dark:text-yellow-400;
+    @apply bg-(color:--ks-color-warning-100) text-(color:--ks-color-warning-700) dark:bg-(color:--ks-color-warning-900)/50 dark:text-(color:--ks-color-warning-400);
   }
 
   .ks-badge-info {
-    @apply bg-accent-100 text-accent-700 dark:bg-accent-900/50 dark:text-accent-400;
+    @apply bg-(color:--ks-color-info-100) text-(color:--ks-color-info-700) dark:bg-(color:--ks-color-info-900)/50 dark:text-(color:--ks-color-info-400);
+  }
+
+  .ks-panel-radius-md {
+    @apply rounded-(--ks-radius-surface);
+  }
+
+  .ks-panel-radius-lg {
+    @apply rounded-[calc(var(--ks-radius-surface)*1.5)];
+  }
+
+  .ks-panel-radius-xl {
+    @apply rounded-[calc(var(--ks-radius-surface)*2)];
+  }
+
+  .ks-panel-shadow {
+    @apply shadow-(--ks-shadow-surface);
+  }
+
+  .ks-panel-padding-sm {
+    @apply p-[calc(var(--ks-spacing)*4)];
+  }
+
+  .ks-panel-padding-md {
+    @apply p-[calc(var(--ks-spacing)*5)];
+  }
+
+  .ks-panel-padding-lg {
+    @apply p-[calc(var(--ks-spacing)*6)];
+  }
+
+  .ks-modal-backdrop {
+    @apply bg-(color:--ks-color-backdrop);
+  }
+
+  .ks-modal-panel {
+    @apply rounded-[calc(var(--ks-radius-surface)*1.5)] border-(length:--ks-border-width) border-(color:--ks-color-border) bg-(color:--ks-color-overlay) p-[calc(var(--ks-spacing)*6)] mx-[calc(var(--ks-spacing)*4)] dark:border-(color:--ks-color-border-dark) dark:bg-(color:--ks-color-overlay-dark);
+  }
+
+  .ks-modal-header {
+    @apply mb-[calc(var(--ks-spacing)*4)];
+  }
+
+  .ks-modal-title {
+    @apply font-(weight:--ks-font-weight-heading) text-(color:--ks-color-text-heading) dark:text-(color:--ks-color-text-heading-dark);
+  }
+
+  .ks-modal-close {
+    @apply text-(color:--ks-color-close) hover:text-(color:--ks-color-close-hover) dark:hover:text-(color:--ks-color-close-hover-dark);
+  }
+
+  .ks-action-menu {
+    @apply mt-[calc(var(--ks-spacing)*2)] rounded-[calc(var(--ks-radius-surface)*0.75)] bg-(color:--ks-color-overlay) py-[calc(var(--ks-spacing)*1)] shadow-(--ks-shadow-overlay) ring-(length:--ks-border-width) ring-(color:--ks-color-ring) dark:bg-(color:--ks-color-overlay-dark) dark:ring-(color:--ks-color-ring-dark);
+  }
+
+  .ks-action-menu-button {
+    @apply text-(color:--ks-color-text-muted) dark:text-(color:--ks-color-text-muted-dark);
+  }
+
+  .ks-menu {
+    @apply mt-[calc(var(--ks-spacing)*1)] rounded-[calc(var(--ks-radius-surface)*0.75)] border-(length:--ks-border-width) border-(color:--ks-color-border) bg-(color:--ks-color-surface) shadow-(--ks-shadow-overlay) dark:border-(color:--ks-color-border-dark) dark:bg-(color:--ks-color-surface-dark);
+  }
+
+  .ks-menu-trigger {
+    @apply gap-[calc(var(--ks-spacing)*1)] rounded-[calc(var(--ks-radius-control)*0.75)] border-(length:--ks-border-width) px-[calc(var(--ks-spacing)*3)] py-[calc(var(--ks-spacing)*2)] border-(color:--ks-color-border-control) bg-(color:--ks-color-surface) text-(color:--ks-color-text) dark:border-(color:--ks-color-border-control-dark) dark:bg-(color:--ks-color-surface-dark) dark:text-(color:--ks-color-text-dark);
+  }
+
+  .ks-menu-option {
+    @apply gap-[calc(var(--ks-spacing)*2)] px-[calc(var(--ks-spacing)*3)] py-[calc(var(--ks-spacing)*2)] text-(color:--ks-color-text-label) hover:bg-(color:--ks-color-hover) dark:text-(color:--ks-color-text-label-dark) dark:hover:bg-(color:--ks-color-hover-dark);
+  }
+
+  .ks-menu-checkbox {
+    @apply rounded-[calc(var(--ks-radius-control)*0.5)] border-(color:--ks-color-border-strong) text-(color:--ks-color-accent) focus:ring-(color:--ks-color-focus) dark:border-(color:--ks-color-border-strong-dark);
+  }
+
+  .ks-copy-button {
+    @apply gap-[calc(var(--ks-spacing)*1.5)] rounded-[calc(var(--ks-radius-control)*0.75)] border-(length:--ks-border-width) border-(color:--ks-color-border-strong) bg-(color:--ks-color-overlay) px-[calc(var(--ks-spacing)*3)] py-[calc(var(--ks-spacing)*1.5)] font-(weight:--ks-font-weight-medium) text-(color:--ks-color-text-label) hover:bg-(color:--ks-color-hover-raised) dark:border-(color:--ks-color-border-strong-dark) dark:bg-(color:--ks-color-overlay-dark) dark:text-(color:--ks-color-text-label-dark) dark:hover:bg-(color:--ks-color-hover-raised-dark);
+  }
+
+  .ks-theme-toggle-option {
+    @apply aria-pressed:bg-(color:--ks-color-accent) aria-pressed:hover:bg-(color:--ks-color-accent-hover) dark:aria-pressed:bg-(color:--ks-color-accent-dark) dark:aria-pressed:hover:bg-(color:--ks-color-accent-hover-dark);
+  }
+
+  .ks-checkbox-row {
+    @apply gap-[calc(var(--ks-spacing)*3)] py-[calc(var(--ks-spacing)*3)];
+  }
+
+  .ks-checkbox-row-input {
+    @apply mt-[calc(var(--ks-spacing)*0.5)] rounded-[calc(var(--ks-radius-control)*0.5)] border-(color:--ks-color-border-choice) text-(color:--ks-color-accent) checked:bg-(color:--ks-color-accent) focus:ring-(color:--ks-color-focus);
+  }
+
+  .ks-checkbox-row-label {
+    @apply font-(weight:--ks-font-weight-medium) text-(color:--ks-color-text-choice) dark:text-(color:--ks-color-text-choice-dark);
+  }
+
+  .ks-checkbox-row-hint {
+    @apply mt-[calc(var(--ks-spacing)*0.5)] text-(color:--ks-color-text-choice-muted) dark:text-(color:--ks-color-text-choice-muted-dark);
+  }
+
+  .ks-radio-card {
+    @apply px-[calc(var(--ks-spacing)*4)] py-[calc(var(--ks-spacing)*3)] rounded-(--ks-radius-surface) border-[calc(var(--ks-border-width)*2)];
+  }
+
+  .ks-radio-card-highlight {
+    @apply border-(color:--ks-color-border) dark:border-(color:--ks-color-border-dark) peer-checked:border-(color:--ks-color-selected-border) peer-checked:bg-(color:--ks-color-selected) dark:peer-checked:bg-(color:--ks-color-selected-dark);
+  }
+
+  .ks-radio-card-label {
+    @apply font-(weight:--ks-font-weight-medium) text-(color:--ks-color-text-option) dark:text-(color:--ks-color-text-option-dark);
+  }
+
+  .ks-radio-card-hint {
+    @apply mt-[calc(var(--ks-spacing)*1)] text-(color:--ks-color-text-option-muted) dark:text-(color:--ks-color-text-option-muted-dark);
+  }
+
+  .ks-option-card {
+    @apply gap-[calc(var(--ks-spacing)*2)] px-[calc(var(--ks-spacing)*3)] py-[calc(var(--ks-spacing)*2)] rounded-(--ks-radius-surface) border-[calc(var(--ks-border-width)*2)];
+  }
+
+  .ks-option-card-selected {
+    @apply border-(color:--ks-color-selected-border);
+  }
+
+  .ks-file-upload {
+    @apply space-y-[calc(var(--ks-spacing)*1)];
+  }
+
+  .ks-file-upload-drop-zone {
+    @apply mt-[calc(var(--ks-spacing)*1)] rounded-[calc(var(--ks-radius-surface)*0.75)] border-[calc(var(--ks-border-width)*2)] border-dashed border-(color:--ks-color-border-strong) px-[calc(var(--ks-spacing)*6)] py-[calc(var(--ks-spacing)*8)] dark:border-(color:--ks-color-border-strong-dark);
+  }
+
+  .ks-file-upload-drop-zone-active {
+    @apply border-(color:--ks-color-selected-border) bg-(color:--ks-color-drop-active) dark:bg-(color:--ks-color-drop-active-dark);
+  }
+
+  .ks-file-upload-inner {
+    @apply space-y-[calc(var(--ks-spacing)*2)];
+  }
+
+  .ks-file-upload-icon {
+    @apply text-(color:--ks-color-icon) dark:text-(color:--ks-color-icon-dark);
+  }
+
+  .ks-file-upload-prompt {
+    @apply text-(color:--ks-color-text-secondary) dark:text-(color:--ks-color-text-secondary-dark);
+  }
+
+  .ks-file-upload-browse {
+    @apply font-(weight:--ks-font-weight-strong) text-(color:--ks-color-link) hover:text-(color:--ks-color-link-hover) dark:text-(color:--ks-color-link-dark) dark:hover:text-(color:--ks-color-link-hover-dark);
+  }
+
+  .ks-file-upload-hint {
+    @apply mt-[calc(var(--ks-spacing)*1)] text-(color:--ks-color-text-muted) dark:text-(color:--ks-color-text-muted-dark);
+  }
+
+  .ks-file-upload-file-name {
+    @apply mt-[calc(var(--ks-spacing)*2)] text-(color:--ks-color-text-label) dark:text-(color:--ks-color-text-label-dark);
+  }
+
+  .ks-color-swatch {
+    @apply rounded-(--ks-radius-surface) border-(length:--ks-border-width) border-(color:--ks-color-border-strong) dark:border-(color:--ks-color-border-strong-dark);
+  }
+
+  .ks-color-picker-panel {
+    @apply mt-[calc(var(--ks-spacing)*2)] p-[calc(var(--ks-spacing)*3)] rounded-(--ks-radius-surface) shadow-(--ks-shadow-overlay) bg-(color:--ks-color-overlay) border-(length:--ks-border-width) border-(color:--ks-color-border) dark:bg-(color:--ks-color-overlay-dark) dark:border-(color:--ks-color-border-dark);
+  }
+
+  .ks-metric-card {
+    @apply rounded-[calc(var(--ks-radius-surface)*1.5)] border-(length:--ks-border-width) border-(color:--ks-color-border) bg-(color:--ks-color-overlay) p-[calc(var(--ks-spacing)*6)] dark:border-(color:--ks-color-border-dark) dark:bg-(color:--ks-color-overlay-dark);
+  }
+
+  .ks-stat-card-header {
+    @apply gap-[calc(var(--ks-spacing)*2)];
+  }
+
+  .ks-stat-card-label {
+    @apply font-(weight:--ks-font-weight-medium) text-(color:--ks-color-text-muted) dark:text-(color:--ks-color-text-muted-dark);
+  }
+
+  .ks-stat-card-value {
+    @apply mt-[calc(var(--ks-spacing)*1)] font-[weight:calc(var(--ks-font-weight-heading)+100)];
+  }
+
+  .ks-stat-card-suffix {
+    @apply text-(color:--ks-color-text-muted) dark:text-(color:--ks-color-text-muted-dark);
+  }
+
+  .ks-stat-card-disclosure {
+    @apply mt-[calc(var(--ks-spacing)*2)] rounded-(--ks-radius-surface) border-(length:--ks-border-width) border-(color:--ks-color-border) bg-(color:--ks-color-overlay) p-[calc(var(--ks-spacing)*3)] text-(color:--ks-color-text-secondary) shadow-(--ks-shadow-overlay) dark:border-(color:--ks-color-border-dark) dark:bg-(color:--ks-color-overlay-dark) dark:text-(color:--ks-color-text-secondary-dark) space-y-[calc(var(--ks-spacing)*1)];
+  }
+
+  .ks-stat-card-emphasis {
+    @apply font-(weight:--ks-font-weight-medium) text-(color:--ks-color-text-label) dark:text-(color:--ks-color-text-label-dark);
+  }
+
+  .ks-stat-card-change {
+    @apply mt-[calc(var(--ks-spacing)*1)] font-(weight:--ks-font-weight-medium);
+  }
+
+  .ks-stat-card-info {
+    @apply text-(color:--ks-color-close) hover:text-(color:--ks-color-link) dark:hover:text-(color:--ks-color-link-dark);
+  }
+
+  .ks-tone-neutral {
+    @apply text-(color:--ks-color-text) dark:text-(color:--ks-color-text-dark);
+  }
+
+  .ks-tone-muted {
+    @apply text-(color:--ks-color-text-muted) dark:text-(color:--ks-color-text-muted-dark);
+  }
+
+  .ks-tone-success {
+    @apply text-(color:--ks-color-success-600) dark:text-(color:--ks-color-success-400);
+  }
+
+  .ks-tone-danger {
+    @apply text-(color:--ks-color-danger-600) dark:text-(color:--ks-color-danger-400);
+  }
+
+  .ks-tone-warning {
+    @apply text-(color:--ks-color-warning-600) dark:text-(color:--ks-color-warning-400);
+  }
+
+  .ks-tone-info {
+    @apply text-(color:--ks-color-info-600) dark:text-(color:--ks-color-info-400);
+  }
+
+  .ks-chart-card-title {
+    @apply font-(weight:--ks-font-weight-medium) text-(color:--ks-color-text-muted) mb-[calc(var(--ks-spacing)*4)] dark:text-(color:--ks-color-text-muted-dark);
+  }
+
+  .ks-link-card {
+    @apply rounded-(--ks-radius-surface) border-(length:--ks-border-width) border-(color:--ks-color-border) bg-(color:--ks-color-surface) hover:border-(color:--ks-color-hover-border) dark:border-(color:--ks-color-border-dark) dark:bg-(color:--ks-color-surface-dark);
+  }
+
+  .ks-link-card-shadow {
+    @apply shadow-(--ks-shadow-surface);
+  }
+
+  .ks-link-card-padding-sm {
+    @apply p-[calc(var(--ks-spacing)*3)];
+  }
+
+  .ks-link-card-padding-md {
+    @apply p-[calc(var(--ks-spacing)*4)];
+  }
+
+  .ks-link-card-padding-lg {
+    @apply p-[calc(var(--ks-spacing)*6)];
+  }
+
+  .ks-cta-banner {
+    @apply rounded-[calc(var(--ks-radius-surface)*2)] border-(length:--ks-border-width) px-[calc(var(--ks-spacing)*6)] py-[calc(var(--ks-spacing)*12)] border-(color:--ks-color-border-subtle) bg-(color:--ks-color-fill-muted) lg:px-[calc(var(--ks-spacing)*16)] lg:py-[calc(var(--ks-spacing)*16)] dark:border-(color:--ks-color-border-subtle-dark) dark:bg-(color:--ks-color-fill-muted-dark);
+  }
+
+  .ks-cta-banner-title {
+    @apply mb-[calc(var(--ks-spacing)*4)] font-[weight:calc(var(--ks-font-weight-heading)+100)] text-(color:--ks-color-text-display) dark:text-(color:--ks-color-text-display-dark);
+  }
+
+  .ks-cta-banner-subtitle {
+    @apply mb-[calc(var(--ks-spacing)*8)] text-(color:--ks-color-text-display-muted) dark:text-(color:--ks-color-text-display-muted-dark);
+  }
+
+  .ks-cta-banner-actions {
+    @apply gap-[calc(var(--ks-spacing)*4)];
+  }
+
+  .ks-feature-grid {
+    @apply gap-[calc(var(--ks-spacing)*6)];
+  }
+
+  .ks-feature-grid-title {
+    @apply mb-[calc(var(--ks-spacing)*4)] font-[weight:calc(var(--ks-font-weight-heading)+100)] text-(color:--ks-color-text-display) dark:text-(color:--ks-color-text-display-dark);
+  }
+
+  .ks-feature-grid-subtitle {
+    @apply mb-[calc(var(--ks-spacing)*16)] text-(color:--ks-color-text-display-muted) dark:text-(color:--ks-color-text-display-muted-dark);
+  }
+
+  .ks-feature-card {
+    @apply rounded-[calc(var(--ks-radius-surface)*1.5)] border-(length:--ks-border-width) p-[calc(var(--ks-spacing)*6)] border-(color:--ks-color-border-subtle) bg-(color:--ks-color-raised) hover:border-(color:--ks-color-hover-border) dark:border-(color:--ks-color-border-subtle-dark) dark:bg-(color:--ks-color-raised-dark);
+  }
+
+  .ks-feature-card-icon {
+    @apply mb-[calc(var(--ks-spacing)*4)] rounded-(--ks-radius-surface) bg-(color:--ks-color-tint) text-(color:--ks-color-link) dark:text-(color:--ks-color-link-dark);
+  }
+
+  .ks-feature-card-title {
+    @apply mb-[calc(var(--ks-spacing)*2)] font-(weight:--ks-font-weight-heading) text-(color:--ks-color-text-display) dark:text-(color:--ks-color-text-display-dark);
+  }
+
+  .ks-feature-card-description {
+    @apply text-(color:--ks-color-text-display-muted) dark:text-(color:--ks-color-text-display-muted-dark);
+  }
+
+  .ks-hero {
+    @apply pt-[calc(var(--ks-spacing)*24)];
+  }
+
+  .ks-hero-inner {
+    @apply px-[calc(var(--ks-spacing)*6)] py-[calc(var(--ks-spacing)*24)] lg:py-[calc(var(--ks-spacing)*32)];
+  }
+
+  .ks-hero-content {
+    @apply gap-[calc(var(--ks-spacing)*8)];
+  }
+
+  .ks-hero-split {
+    @apply gap-[calc(var(--ks-spacing)*12)] lg:gap-[calc(var(--ks-spacing)*16)];
+  }
+
+  .ks-hero-title {
+    @apply font-[weight:calc(var(--ks-font-weight-heading)+100)] text-(color:--ks-color-text-display) dark:text-(color:--ks-color-text-display-dark);
+  }
+
+  .ks-hero-subtitle {
+    @apply text-(color:--ks-color-text-display-muted) dark:text-(color:--ks-color-text-display-muted-dark);
+  }
+
+  .ks-hero-badge {
+    @apply gap-[calc(var(--ks-spacing)*2)] rounded-(--ks-radius-pill) border-(length:--ks-border-width) px-[calc(var(--ks-spacing)*4)] py-[calc(var(--ks-spacing)*1.5)] border-(color:--ks-color-tint-border) bg-(color:--ks-color-tint) text-(color:--ks-color-link) dark:text-(color:--ks-color-link-dark);
+  }
+
+  .ks-hero-actions {
+    @apply gap-[calc(var(--ks-spacing)*4)];
+  }
+
+  .ks-table {
+    @apply rounded-(--ks-radius-surface) border-(length:--ks-border-width) border-(color:--ks-color-border) shadow-(--ks-shadow-surface) dark:border-(color:--ks-color-border-dark) dark:shadow-(--ks-shadow-surface-dark);
+  }
+
+  .ks-table-head {
+    @apply bg-(color:--ks-color-table-head) dark:bg-(color:--ks-color-table-head-dark);
+  }
+
+  .ks-table-body {
+    @apply bg-(color:--ks-color-table-body) divide-y-(length:--ks-border-width) divide-(color:--ks-color-divider) dark:bg-(color:--ks-color-table-body-dark) dark:divide-(color:--ks-color-divider-dark);
+  }
+
+  .ks-table-header {
+    @apply py-[calc(var(--ks-spacing)*3.5)] font-(weight:--ks-font-weight-heading) text-(color:--ks-color-text-heading) dark:text-(color:--ks-color-text-heading-dark);
+  }
+
+  .ks-table-header-first {
+    @apply pr-[calc(var(--ks-spacing)*3)] pl-[calc(var(--ks-spacing)*6)];
+  }
+
+  .ks-table-header-middle {
+    @apply px-[calc(var(--ks-spacing)*3)];
+  }
+
+  .ks-table-header-last {
+    @apply py-[calc(var(--ks-spacing)*3.5)] pr-[calc(var(--ks-spacing)*6)] pl-[calc(var(--ks-spacing)*3)];
+  }
+
+  .ks-table-cell-first {
+    @apply py-[calc(var(--ks-spacing)*4)] pr-[calc(var(--ks-spacing)*3)] pl-[calc(var(--ks-spacing)*6)] font-(weight:--ks-font-weight-medium) text-(color:--ks-color-text) dark:text-(color:--ks-color-text-dark);
+  }
+
+  .ks-table-cell-middle {
+    @apply px-[calc(var(--ks-spacing)*3)] py-[calc(var(--ks-spacing)*4)] text-(color:--ks-color-text-muted) dark:text-(color:--ks-color-text-muted-dark);
+  }
+
+  .ks-table-cell-last {
+    @apply py-[calc(var(--ks-spacing)*4)] pr-[calc(var(--ks-spacing)*6)] pl-[calc(var(--ks-spacing)*3)] font-(weight:--ks-font-weight-medium);
+  }
+
+  .ks-table-sort-link {
+    @apply gap-[calc(var(--ks-spacing)*1)];
+  }
+
+  .ks-table-sort-icon-active {
+    @apply text-(color:--ks-color-text-label) dark:text-(color:--ks-color-text-label-dark);
+  }
+
+  .ks-table-sort-icon {
+    @apply text-(color:--ks-color-icon) dark:text-(color:--ks-color-icon-dark);
+  }
+
+  .ks-code {
+    @apply rounded-(--ks-radius-surface) border-(length:--ks-border-width) border-(color:--ks-color-border-subtle) dark:border-(color:--ks-color-border-subtle-dark);
+  }
+
+  .ks-code-caption {
+    @apply border-b-(length:--ks-border-width) border-(color:--ks-color-border-subtle) bg-(color:--ks-color-fill-muted) px-[calc(var(--ks-spacing)*4)] py-[calc(var(--ks-spacing)*2)] text-(color:--ks-color-text-display-muted) dark:border-(color:--ks-color-border-subtle-dark) dark:bg-(color:--ks-color-fill-muted-dark) dark:text-(color:--ks-color-text-display-muted-dark);
+  }
+
+  .ks-code-block {
+    @apply bg-(color:--ks-color-code) p-[calc(var(--ks-spacing)*4)] text-(color:--ks-color-text-code) dark:bg-(color:--ks-color-code-dark);
+  }
+
+  .ks-accordion {
+    @apply gap-[calc(var(--ks-spacing)*4)];
+  }
+
+  .ks-accordion-item {
+    @apply rounded-[calc(var(--ks-radius-surface)*1.5)] border-(length:--ks-border-width) border-(color:--ks-color-border-subtle) dark:border-(color:--ks-color-border-subtle-dark);
+  }
+
+  .ks-disclosure {
+    @apply rounded-[calc(var(--ks-radius-surface)*1.5)] border-(length:--ks-border-width) border-(color:--ks-color-border-subtle) dark:border-(color:--ks-color-border-subtle-dark);
+  }
+
+  .ks-accordion-button {
+    @apply px-[calc(var(--ks-spacing)*6)] py-[calc(var(--ks-spacing)*4)] font-(weight:--ks-font-weight-heading) text-(color:--ks-color-text-display) hover:text-(color:--ks-color-link) dark:text-(color:--ks-color-text-display-dark) dark:hover:text-(color:--ks-color-link-dark);
+  }
+
+  .ks-disclosure-summary {
+    @apply gap-[calc(var(--ks-spacing)*4)] px-[calc(var(--ks-spacing)*6)] py-[calc(var(--ks-spacing)*4)] font-(weight:--ks-font-weight-heading) text-(color:--ks-color-text-display) dark:text-(color:--ks-color-text-display-dark);
+  }
+
+  .ks-accordion-answer {
+    @apply px-[calc(var(--ks-spacing)*6)] pb-[calc(var(--ks-spacing)*4)] text-(color:--ks-color-text-body) dark:text-(color:--ks-color-text-body-dark);
+  }
+
+  .ks-disclosure-body {
+    @apply px-[calc(var(--ks-spacing)*6)] pb-[calc(var(--ks-spacing)*4)] text-(color:--ks-color-text-body) dark:text-(color:--ks-color-text-body-dark);
+  }
+
+  .ks-disclosure-icon {
+    @apply text-(color:--ks-color-icon-soft);
+  }
+
+  .ks-tab-bar {
+    @apply mb-[calc(var(--ks-spacing)*8)] gap-[calc(var(--ks-spacing)*2)];
+  }
+
+  .ks-tab {
+    @apply rounded-(--ks-radius-surface) px-[calc(var(--ks-spacing)*4)] py-[calc(var(--ks-spacing)*2)] font-(weight:--ks-font-weight-heading) text-(color:--ks-color-text-muted) hover:text-(color:--ks-color-text) dark:text-(color:--ks-color-text-muted-dark) dark:hover:text-(color:--ks-color-text-dark);
+  }
+
+  .ks-tab-active {
+    @apply data-[active]:bg-(color:--ks-color-tint) data-[active]:text-(color:--ks-color-link) dark:data-[active]:text-(color:--ks-color-link-dark);
+  }
+
+  .ks-progress-track {
+    @apply bg-(color:--ks-color-track) rounded-(--ks-radius-pill) dark:bg-(color:--ks-color-track-dark);
+  }
+
+  .ks-progress-bar {
+    @apply bg-(color:--ks-color-meter) rounded-(--ks-radius-pill);
+  }
+
+  .ks-meter-label {
+    @apply mb-[calc(var(--ks-spacing)*1)] font-(weight:--ks-font-weight-medium) text-(color:--ks-color-text-meter-label) dark:text-(color:--ks-color-text-meter-label-dark);
+  }
+
+  .ks-funnel {
+    @apply space-y-[calc(var(--ks-spacing)*2)];
+  }
+
+  .ks-funnel-layer {
+    @apply space-y-[calc(var(--ks-spacing)*1)];
+  }
+
+  .ks-funnel-row {
+    @apply gap-[calc(var(--ks-spacing)*3)];
+  }
+
+  .ks-funnel-label {
+    @apply font-(weight:--ks-font-weight-medium) text-(color:--ks-color-text-meter-label) dark:text-(color:--ks-color-text-meter-label-dark);
+  }
+
+  .ks-funnel-value {
+    @apply font-(weight:--ks-font-weight-heading) text-(color:--ks-color-text-display) dark:text-(color:--ks-color-text-display-dark);
+  }
+
+  .ks-funnel-bar {
+    @apply rounded-[calc(var(--ks-radius-surface)*0.75)];
+  }
+
+  .ks-funnel-transition {
+    @apply py-[calc(var(--ks-spacing)*1)] text-(color:--ks-color-text-display-muted) dark:text-(color:--ks-color-text-display-muted-dark);
+  }
+
+  .ks-funnel-bar-accent {
+    @apply bg-(color:--ks-color-funnel-accent);
+  }
+
+  .ks-funnel-bar-sky {
+    @apply bg-(color:--ks-color-funnel-sky);
+  }
+
+  .ks-funnel-bar-violet {
+    @apply bg-(color:--ks-color-funnel-violet);
+  }
+
+  .ks-funnel-bar-amber {
+    @apply bg-(color:--ks-color-funnel-amber);
+  }
+
+  .ks-funnel-bar-rose {
+    @apply bg-(color:--ks-color-funnel-rose);
+  }
+
+  .ks-bucket {
+    @apply gap-[calc(var(--ks-spacing)*1)];
+  }
+
+  .ks-bucket-series {
+    @apply gap-[calc(var(--ks-spacing)*4)];
+  }
+
+  .ks-bucket-label {
+    @apply font-(weight:--ks-font-weight-medium) text-(color:--ks-color-text-label) dark:text-(color:--ks-color-text-label-dark);
+  }
+
+  .ks-bucket-goal {
+    @apply text-(color:--ks-color-text-muted) dark:text-(color:--ks-color-text-muted-dark);
+  }
+
+  .ks-bucket-percent {
+    @apply text-(color:--ks-color-text-muted) dark:text-(color:--ks-color-text-muted-dark);
+  }
+
+  .ks-bucket-tank {
+    @apply rounded-t-[calc(var(--ks-radius-surface)*0.5)] rounded-b-[calc(var(--ks-radius-surface)*1.5)] border-[calc(var(--ks-border-width)*2)] border-(color:--ks-color-border-strong) bg-(color:--ks-color-hover) dark:border-(color:--ks-color-border-strong-dark) dark:bg-(color:--ks-color-hover-dark);
+  }
+
+  .ks-bucket-actual {
+    @apply font-(weight:--ks-font-weight-heading) text-(color:--ks-color-text) dark:text-(color:--ks-color-text-dark);
+  }
+
+  .ks-bucket-fill {
+    @apply bg-(color:--ks-color-meter);
+  }
+
+  .ks-bucket-fill-over {
+    @apply bg-(color:--ks-color-over-goal);
+  }
+
+  .ks-bucket-fill-over-warning {
+    @apply bg-(color:--ks-color-over-goal-warning);
+  }
+
+  .ks-pipeline {
+    @apply rounded-[calc(var(--ks-radius-surface)*1.5)] border-(length:--ks-border-width) border-(color:--ks-color-pipeline-border) bg-(color:--ks-color-pipeline) p-[calc(var(--ks-spacing)*6)];
+  }
+
+  .ks-pipeline-header {
+    @apply mb-[calc(var(--ks-spacing)*4)];
+  }
+
+  .ks-pipeline-title {
+    @apply font-(weight:--ks-font-weight-heading) text-(color:--ks-color-text-on-dark);
+  }
+
+  .ks-pipeline-subtitle {
+    @apply mt-[calc(var(--ks-spacing)*1)] text-(color:--ks-color-pipeline-muted);
+  }
+
+  .ks-pipeline-track {
+    @apply gap-[calc(var(--ks-spacing)*3)];
+  }
+
+  .ks-pipeline-box {
+    @apply gap-[calc(var(--ks-spacing)*2)] rounded-(--ks-radius-surface) border-(length:--ks-border-width) border-(color:--ks-color-pipeline-border) bg-(color:--ks-color-pipeline-box) p-[calc(var(--ks-spacing)*4)];
+  }
+
+  .ks-pipeline-box-label {
+    @apply text-(color:--ks-color-pipeline-label);
+  }
+
+  .ks-pipeline-count {
+    @apply font-[weight:calc(var(--ks-font-weight-heading)+100)];
+  }
+
+  .ks-pipeline-link-healthy {
+    @apply text-(color:--ks-color-meter);
+  }
+
+  .ks-pipeline-link-broken {
+    @apply text-(color:--ks-color-danger-500);
+  }
+
+  .ks-pipeline-count-amber {
+    @apply text-(color:--ks-color-pipeline-amber);
+  }
+
+  .ks-pipeline-count-emerald {
+    @apply text-(color:--ks-color-info-400);
+  }
+
+  .ks-pipeline-count-danger {
+    @apply text-(color:--ks-color-danger-400);
+  }
+
+  .ks-pipeline-count-muted {
+    @apply text-(color:--ks-color-pipeline-label);
+  }
+
+  .ks-swipe-card {
+    @apply rounded-[calc(var(--ks-radius-surface)*2)] border-(length:--ks-border-width) border-(color:--ks-color-border) bg-(color:--ks-color-surface) shadow-(--ks-shadow-overlay) p-[calc(var(--ks-spacing)*6)] dark:border-(color:--ks-color-border-dark) dark:bg-(color:--ks-color-surface-dark);
+  }
+
+  .ks-swipe-empty {
+    @apply py-[calc(var(--ks-spacing)*16)];
+  }
+
+  .ks-swipe-empty-title {
+    @apply font-(weight:--ks-font-weight-heading) text-(color:--ks-color-text) dark:text-(color:--ks-color-text-dark);
+  }
+
+  .ks-swipe-empty-message {
+    @apply mt-[calc(var(--ks-spacing)*2)] text-(color:--ks-color-text-muted) dark:text-(color:--ks-color-text-muted-dark);
+  }
+
+  .ks-swipe-actions {
+    @apply gap-[calc(var(--ks-spacing)*8)] mt-[calc(var(--ks-spacing)*8)];
+  }
+
+  .ks-swipe-button {
+    @apply rounded-(--ks-radius-pill) border-[calc(var(--ks-border-width)*2)] border-(color:--ks-color-border-strong) text-(color:--ks-color-close) dark:border-(color:--ks-color-border-strong-dark);
+  }
+
+  .ks-swipe-button-reject {
+    @apply hover:border-(color:--ks-color-danger-400) hover:text-(color:--ks-color-danger-400);
+  }
+
+  .ks-swipe-button-accept {
+    @apply hover:border-(color:--ks-color-success-400) hover:text-(color:--ks-color-success-400);
+  }
+
+  .ks-bottom-nav {
+    @apply fixed bottom-0 left-0 right-0 z-40 flex justify-around pb-[env(safe-area-inset-bottom)] lg:hidden bg-(color:--ks-color-nav) dark:bg-(color:--ks-color-nav-dark) border-t-(length:--ks-border-width) border-t-(color:--ks-color-nav-border) dark:border-t-(color:--ks-color-nav-border-dark);
+  }
+
+  .ks-bottom-nav::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    height: 100px;
+    background: inherit;
+  }
+
+  .ks-bottom-nav-item {
+    @apply flex flex-1 flex-col items-center justify-center min-h-14 no-underline gap-[calc(var(--ks-spacing)*0.5)] py-[calc(var(--ks-spacing)*2)] px-[calc(var(--ks-spacing)*1)] text-(color:--ks-color-nav-text) hover:text-(color:--ks-color-nav-text-hover) active:text-(color:--ks-color-nav-text-hover) [&.active]:text-(color:--ks-color-nav-active) dark:text-(color:--ks-color-nav-text-dark) dark:hover:text-(color:--ks-color-nav-text-hover-dark) dark:active:text-(color:--ks-color-nav-text-hover-dark) dark:[&.active]:text-(color:--ks-color-nav-active-dark) [&_svg]:size-6;
+  }
+
+  .ks-bottom-nav-label {
+    @apply text-[10px] font-(weight:--ks-font-weight-medium) leading-none;
+  }
+
+  .ks-nav-dropdown {
+    @apply relative w-full lg:w-auto;
+  }
+
+  .ks-nav-dropdown-trigger {
+    @apply flex items-center justify-between text-sm text-nowrap w-full no-underline gap-[calc(var(--ks-spacing)*1)] px-[calc(var(--ks-spacing)*4)] py-[calc(var(--ks-spacing)*3)] lg:px-[calc(var(--ks-spacing)*1)] lg:py-[calc(var(--ks-spacing)*2)] lg:w-auto text-(color:--ks-color-nav-link) hover:text-(color:--ks-color-nav-text-hover) [&.active]:text-(color:--ks-color-nav-active) [&.active]:font-(weight:--ks-font-weight-heading) dark:text-(color:--ks-color-nav-link-dark) dark:hover:text-(color:--ks-color-nav-text-hover-dark) dark:[&.active]:text-(color:--ks-color-nav-active-dark) lg:[&.active]:shadow-[inset_0_calc(var(--ks-border-width)*-4)_0_0_var(--ks-color-nav-indicator)] dark:lg:[&.active]:shadow-[inset_0_calc(var(--ks-border-width)*-4)_0_0_var(--ks-color-nav-indicator-dark)];
+  }
+
+  .ks-nav-item {
+    @apply flex items-center justify-between text-sm text-nowrap w-full no-underline gap-[calc(var(--ks-spacing)*1)] px-[calc(var(--ks-spacing)*4)] py-[calc(var(--ks-spacing)*3)] lg:px-[calc(var(--ks-spacing)*1)] lg:py-[calc(var(--ks-spacing)*2)] lg:w-auto text-(color:--ks-color-nav-link) hover:text-(color:--ks-color-nav-text-hover) [&.active]:text-(color:--ks-color-nav-active) [&.active]:font-(weight:--ks-font-weight-heading) dark:text-(color:--ks-color-nav-link-dark) dark:hover:text-(color:--ks-color-nav-text-hover-dark) dark:[&.active]:text-(color:--ks-color-nav-active-dark) lg:[&.active]:shadow-[inset_0_calc(var(--ks-border-width)*-4)_0_0_var(--ks-color-nav-indicator)] dark:lg:[&.active]:shadow-[inset_0_calc(var(--ks-border-width)*-4)_0_0_var(--ks-color-nav-indicator-dark)];
+  }
+
+  .ks-nav-dropdown-caret {
+    @apply size-4 transition-transform duration-200 ease-[ease];
+  }
+
+  .ks-nav-dropdown:has(.ks-nav-dropdown-menu:not(.hidden)) .ks-nav-dropdown-caret {
+    transform: rotate(180deg);
+  }
+
+  .ks-nav-dropdown-menu {
+    @apply relative w-full z-50 bg-(color:--ks-color-nav-menu-mobile) dark:bg-(color:--ks-color-nav-menu-mobile-dark) lg:bg-(color:--ks-color-nav) dark:lg:bg-(color:--ks-color-nav-dark) lg:border-(length:--ks-border-width) lg:border-(color:--ks-color-nav-border) dark:lg:border-(color:--ks-color-nav-border-dark) lg:rounded-(--ks-radius-surface) lg:shadow-(--ks-shadow-menu) lg:min-w-[200px] lg:absolute lg:top-full lg:left-0 lg:mt-[calc(var(--ks-spacing)*1)] [&_ul]:list-none [&_ul]:m-0 [&_ul]:p-0;
+  }
+
+  .ks-nav-dropdown-menu li a, .ks-nav-dropdown-menu > a {
+    @apply block text-sm no-underline whitespace-nowrap py-[calc(var(--ks-spacing)*3)] pr-[calc(var(--ks-spacing)*4)] pl-[calc(var(--ks-spacing)*8)] lg:py-[calc(var(--ks-spacing)*2)] lg:px-[calc(var(--ks-spacing)*4)] text-(color:--ks-color-nav-link) hover:bg-(color:--ks-color-nav-hover) hover:text-(color:--ks-color-nav-text-hover) [&.active]:bg-(color:--ks-color-nav-hover) [&.active]:text-(color:--ks-color-nav-active) [&.active]:font-(weight:--ks-font-weight-heading) dark:text-(color:--ks-color-nav-link-dark) dark:hover:bg-(color:--ks-color-nav-hover-dark) dark:hover:text-(color:--ks-color-nav-text-hover-dark) dark:[&.active]:bg-(color:--ks-color-nav-hover-dark) dark:[&.active]:text-(color:--ks-color-nav-active-dark);
+  }
+
+  .ks-navbar-title {
+    @apply font-(weight:--ks-font-weight-heading) text-(color:--ks-color-text) dark:text-(color:--ks-color-text-dark);
+  }
+
+  .ks-mobile-header-title {
+    @apply font-(weight:--ks-font-weight-heading) text-(color:--ks-color-text) dark:text-(color:--ks-color-text-dark);
+  }
+
+  .ks-mobile-header-back {
+    @apply text-(color:--ks-color-text-muted) dark:text-(color:--ks-color-text-muted-dark);
+  }
+
+  .ks-mobile-header-subtitle {
+    @apply font-(weight:--ks-font-weight-normal) text-(color:--ks-color-text-muted) dark:text-(color:--ks-color-text-muted-dark);
+  }
+
+  .ks-settings-link {
+    @apply px-[calc(var(--ks-spacing)*4)] py-[calc(var(--ks-spacing)*3)] text-(color:--ks-color-text-option) hover:bg-(color:--ks-color-hover-soft) dark:text-(color:--ks-color-text-option-dark) dark:hover:bg-(color:--ks-color-hover-soft-dark);
+  }
+
+  .ks-settings-link-label {
+    @apply font-(weight:--ks-font-weight-medium);
+  }
+}
+
+@media (max-width: 1023px) {
+  main {
+    padding-bottom: calc(56px + env(safe-area-inset-bottom));
+  }
+
+  .hotwire-native .ks-bottom-nav {
+    display: none;
+  }
+
+  .hotwire-native main {
+    padding-bottom: 0;
   }
 }

data/lib/keystone_ui/styles/version.rb

@@ -2,6 +2,6 @@
 
 module KeystoneUi
   module Styles
-    VERSION = "0.4.0"
+    VERSION = "0.5.0"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: keystone_ui-styles
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.5.0
 platform: ruby
 authors:
 - Tyler Schneider