keystone_ui 0.16.0 → 0.17.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: efab888e379841270a79e3d2410df8c4905eb0270f5e13091b2f7db40d96f0fc
-  data.tar.gz: f5487f7756e4771a754d7bba15ccb009519ac0af076c4dc04dd28015586f9672
+  metadata.gz: 7e0dc7211df561f52f213d69e2733292b883fd7bb31cb6bc203ba581e90c5022
+  data.tar.gz: e95919dc9707abaae6d12837d193ace1bed9a16b8f5d00c0758f0f2a6c82cf23
 SHA512:
-  metadata.gz: 4f0c8f0433e90eb500c28eb36201b69d141968a6c482db81e9ccb4fd3e0cf0e81ed202d8b6f8b1dae6cd2e8f325b1d92674aa1464c9029470a4d26082e92fd20
-  data.tar.gz: 4e5c1a2317719013e90221c344248aecb5b88649722e968806af6b7d7001b994a5bf9cc9a6f05d16cc75384c66a04ff49b4702f21d20696d8516d6f65b354058
+  metadata.gz: 6f0ccf38449bfa1c327f0abfc4e4bf818f80859a90ff19a6a5f680b43ba6790de67502d218ba7cfba32a019ff1ee96c4ab0653ffaca5bfaa97b6beb226110d18
+  data.tar.gz: 6019b1917c3736e6323cf5c924be7e0a7e5a2d3686aa3d371bf520f548046e7a7bdf42dccc6afcc5664693d558c77482cf4f7061c05fc383e81e6effd48ecb7e

data/app/assets/javascripts/keystone_ui/file_upload_controller.js

@@ -21,14 +21,12 @@ export default class extends Controller {
 
   dragOver(event) {
     event.preventDefault()
-    this.dropZoneTarget.classList.add("border-accent-500", "bg-accent-50", "dark:bg-accent-900/10")
-    this.dropZoneTarget.classList.remove("border-gray-300", "dark:border-zinc-600")
+    this.dropZoneTarget.classList.add("ks-file-upload-drop-zone-active")
   }
 
   dragLeave(event) {
     event.preventDefault()
-    this.dropZoneTarget.classList.remove("border-accent-500", "bg-accent-50", "dark:bg-accent-900/10")
-    this.dropZoneTarget.classList.add("border-gray-300", "dark:border-zinc-600")
+    this.dropZoneTarget.classList.remove("ks-file-upload-drop-zone-active")
   }
 
   drop(event) {

data/app/components/keystone/ui/accordion_component.rb

@@ -3,11 +3,11 @@
 module Keystone
   module Ui
     class AccordionComponent < ViewComponent::Base
-      BASE_CLASSES = "flex flex-col gap-4"
-      ITEM_LAYOUT_CLASSES = "rounded-xl border"
-      BUTTON_LAYOUT_CLASSES = "flex w-full items-center justify-between px-6 py-4 text-left font-semibold transition"
-      ANSWER_LAYOUT_CLASSES = "hidden px-6 pb-4 text-sm"
-      ICON_LAYOUT_CLASSES = "shrink-0 transition-transform"
+      BASE_CLASSES = "ks-accordion flex flex-col"
+      ITEM_LAYOUT_CLASSES = "ks-accordion-item"
+      BUTTON_LAYOUT_CLASSES = "ks-accordion-button flex w-full items-center justify-between text-left transition"
+      ANSWER_LAYOUT_CLASSES = "ks-accordion-answer hidden text-sm"
+      ICON_LAYOUT_CLASSES = "ks-disclosure-icon shrink-0 transition-transform"
 
       CARET_ICON = <<~SVG.freeze
         <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" /></svg>
@@ -24,19 +24,19 @@ module Keystone
       end
 
       def item_classes
-        "#{ITEM_LAYOUT_CLASSES} border-surface-200 dark:border-surface-700"
+        ITEM_LAYOUT_CLASSES
       end
 
       def button_classes
-        "#{BUTTON_LAYOUT_CLASSES} text-surface-900 dark:text-white hover:text-accent-600 dark:hover:text-accent-400"
+        BUTTON_LAYOUT_CLASSES
       end
 
       def answer_classes
-        "#{ANSWER_LAYOUT_CLASSES} text-surface-600 dark:text-surface-400"
+        ANSWER_LAYOUT_CLASSES
       end
 
       def icon_classes
-        "#{ICON_LAYOUT_CLASSES} text-surface-400"
+        ICON_LAYOUT_CLASSES
       end
 
       def caret_icon

data/app/components/keystone/ui/bottom_nav_component.rb

@@ -3,7 +3,7 @@
 module Keystone
   module Ui
     class BottomNavComponent < ViewComponent::Base
-      NAV_CLASSES = "bottom-nav lg:hidden hotwire-native:hidden"
+      NAV_CLASSES = "ks-bottom-nav lg:hidden hotwire-native:hidden"
 
       def nav_classes
         NAV_CLASSES

data/app/components/keystone/ui/bottom_nav_item_component.rb

@@ -12,9 +12,9 @@ module Keystone
         @active = active
       end
 
-      ITEM_BASE = "bottom-nav-item"
+      ITEM_BASE = "ks-bottom-nav-item"
       ACTIVE_CLASS = "active"
-      LABEL_CLASSES = "bottom-nav-label"
+      LABEL_CLASSES = "ks-bottom-nav-label"
 
       def item_classes
         @active ? "#{ITEM_BASE} #{ACTIVE_CLASS}" : ITEM_BASE

data/app/components/keystone/ui/bucket_component.rb

@@ -3,17 +3,17 @@
 module Keystone
   module Ui
     class BucketComponent < ViewComponent::Base
-      CONTAINER_CLASSES = "flex w-24 flex-col items-center gap-1"
-      LABEL_CLASSES = "text-center text-sm font-medium text-gray-700 dark:text-gray-300"
-      GOAL_CLASSES = "text-xs tabular-nums text-gray-500 dark:text-gray-400"
-      TANK_CLASSES = "flex h-40 w-full items-end overflow-hidden rounded-t-sm rounded-b-xl border-2 border-gray-300 bg-gray-50 dark:border-zinc-600 dark:bg-zinc-800"
-      ACTUAL_CLASSES = "text-sm font-semibold tabular-nums text-gray-900 dark:text-white"
-      PERCENT_CLASSES = "text-xs tabular-nums text-gray-500 dark:text-gray-400"
+      CONTAINER_CLASSES = "ks-bucket flex w-24 flex-col items-center"
+      LABEL_CLASSES = "ks-bucket-label text-center text-sm"
+      GOAL_CLASSES = "ks-bucket-goal text-xs tabular-nums"
+      TANK_CLASSES = "ks-bucket-tank flex h-40 w-full items-end overflow-hidden"
+      ACTUAL_CLASSES = "ks-bucket-actual text-sm tabular-nums"
+      PERCENT_CLASSES = "ks-bucket-percent text-xs tabular-nums"
       FILL_BASE_CLASSES = "w-full transition-all"
-      WITHIN_GOAL_FILL_CLASSES = "bg-accent-500"
+      WITHIN_GOAL_FILL_CLASSES = "ks-bucket-fill"
       OVER_GOAL_FILL_CLASSES = {
-        success: "bg-green-500",
-        warning: "bg-amber-500"
+        success: "ks-bucket-fill-over",
+        warning: "ks-bucket-fill-over-warning"
       }.freeze
 
       attr_reader :goal, :actual, :label

data/app/components/keystone/ui/bucket_series_component.rb

@@ -3,7 +3,7 @@
 module Keystone
   module Ui
     class BucketSeriesComponent < ViewComponent::Base
-      ROW_CLASSES = "flex flex-wrap justify-center gap-4 sm:justify-start"
+      ROW_CLASSES = "ks-bucket-series flex flex-wrap justify-center sm:justify-start"
 
       def initialize(buckets:)
         @buckets = buckets

data/app/components/keystone/ui/card_link_component.rb

@@ -3,9 +3,9 @@
 module Keystone
   module Ui
     class CardLinkComponent < ViewComponent::Base
-      BASE_CLASSES = "block rounded-lg border border-gray-200 bg-white dark:border-zinc-700 dark:bg-zinc-900"
-      SHADOW_CLASS = "shadow-sm"
-      PADDING_CLASSES = { sm: "p-3", md: "p-4", lg: "p-6" }.freeze
+      BASE_CLASSES = "ks-link-card block"
+      SHADOW_CLASS = "ks-link-card-shadow"
+      PADDING_CLASSES = { sm: "ks-link-card-padding-sm", md: "ks-link-card-padding-md", lg: "ks-link-card-padding-lg" }.freeze
 
       attr_reader :href
 
@@ -16,7 +16,7 @@ module Keystone
       end
 
       def classes
-        tokens = [ BASE_CLASSES, "hover:border-accent-500/50", PADDING_CLASSES.fetch(@padding) ]
+        tokens = [ BASE_CLASSES, PADDING_CLASSES.fetch(@padding) ]
         tokens << SHADOW_CLASS if @shadow
         tokens.join(" ")
       end

data/app/components/keystone/ui/chart_card_component.rb

@@ -3,8 +3,8 @@
 module Keystone
   module Ui
     class ChartCardComponent < ViewComponent::Base
-      CARD_CLASSES = "rounded-xl border border-gray-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800"
-      TITLE_CLASSES = "text-sm font-medium text-gray-500 dark:text-gray-400 mb-4"
+      CARD_CLASSES = "ks-metric-card"
+      TITLE_CLASSES = "ks-chart-card-title text-sm"
 
       HEIGHT_CLASSES = {
         sm: "h-48",

data/app/components/keystone/ui/checkbox_row_component.rb

@@ -3,10 +3,10 @@
 module Keystone
   module Ui
     class CheckboxRowComponent < ViewComponent::Base
-      ROW_CLASSES = "flex items-start gap-3 py-3 cursor-pointer"
-      INPUT_CLASSES = "mt-0.5 size-4 shrink-0 rounded border-surface-300 text-accent-600 checked:bg-accent-600 focus:ring-accent-500"
-      LABEL_CLASSES = "block text-sm font-medium text-surface-900 dark:text-surface-100"
-      HINT_CLASSES = "block mt-0.5 text-sm text-surface-500 dark:text-surface-400"
+      ROW_CLASSES = "ks-checkbox-row flex items-start cursor-pointer"
+      INPUT_CLASSES = "ks-checkbox-row-input size-4 shrink-0"
+      LABEL_CLASSES = "ks-checkbox-row-label block text-sm"
+      HINT_CLASSES = "ks-checkbox-row-hint block text-sm"
 
       attr_reader :name, :value, :label, :hint
 

data/app/components/keystone/ui/code_component.rb

@@ -3,9 +3,9 @@
 module Keystone
   module Ui
     class CodeComponent < ViewComponent::Base
-      WRAPPER_CLASSES = "overflow-hidden rounded-lg border border-surface-200 dark:border-surface-700"
-      CAPTION_CLASSES = "border-b border-surface-200 bg-surface-50 px-4 py-2 font-mono text-xs text-surface-500 dark:border-surface-700 dark:bg-surface-800 dark:text-surface-400"
-      PRE_CLASSES = "overflow-x-auto bg-surface-900 p-4 font-mono text-sm leading-relaxed text-surface-100 dark:bg-black"
+      WRAPPER_CLASSES = "ks-code overflow-hidden"
+      CAPTION_CLASSES = "ks-code-caption font-mono text-xs"
+      PRE_CLASSES = "ks-code-block overflow-x-auto font-mono text-sm leading-relaxed"
 
       attr_reader :language, :caption
 

data/app/components/keystone/ui/color_picker_component.html.erb

@@ -1,6 +1,6 @@
 <div class="relative inline-block" data-controller="<%= controller_name %>" data-color-picker-value-value="<%= value %>">
   <% if label %>
-    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"><%= label %></label>
+    <label class="<%= LABEL_CLASSES %>"><%= label %></label>
   <% end %>
 
   <div class="flex items-center gap-2">

data/app/components/keystone/ui/color_picker_component.rb

@@ -3,9 +3,11 @@
 module Keystone
   module Ui
     class ColorPickerComponent < ViewComponent::Base
-      SWATCH_CLASSES = "w-10 h-10 rounded-lg border border-gray-300 dark:border-zinc-600 cursor-pointer"
+      SWATCH_CLASSES = "ks-color-swatch w-10 h-10 cursor-pointer"
 
-      PANEL_CLASSES = "absolute z-50 mt-2 p-3 rounded-lg shadow-lg bg-white dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 hidden"
+      LABEL_CLASSES = "ks-color-picker-label ks-label"
+
+      PANEL_CLASSES = "ks-color-picker-panel absolute z-50 hidden"
 
       attr_reader :name, :value, :label
 

data/app/components/keystone/ui/column_picker_component.rb

@@ -4,10 +4,10 @@ module Keystone
   module Ui
     class ColumnPickerComponent < ViewComponent::Base
       WRAPPER_CLASSES = "relative inline-block"
-      TRIGGER_CLASSES = "inline-flex items-center gap-1 rounded-md border px-3 py-2 text-sm border-gray-300 bg-white text-gray-900 dark:border-zinc-700 dark:bg-zinc-900 dark:text-white"
-      MENU_CLASSES = "absolute right-0 z-10 mt-1 w-56 rounded-md border border-gray-200 bg-white shadow-lg dark:border-zinc-700 dark:bg-zinc-900 hidden"
-      OPTION_CLASSES = "flex items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-zinc-800 cursor-pointer"
-      CHECKBOX_CLASSES = "rounded border-gray-300 text-accent-600 focus:ring-accent-500 dark:border-zinc-600"
+      TRIGGER_CLASSES = "ks-menu-trigger inline-flex items-center text-sm"
+      MENU_CLASSES = "ks-menu absolute right-0 z-10 w-56 hidden"
+      OPTION_CLASSES = "ks-menu-option flex items-center text-sm cursor-pointer"
+      CHECKBOX_CLASSES = "ks-menu-checkbox"
 
       COLUMNS_ICON = <<~SVG.freeze
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">

data/app/components/keystone/ui/copy_button_component.rb

@@ -3,7 +3,7 @@
 module Keystone
   module Ui
     class CopyButtonComponent < ViewComponent::Base
-      BUTTON_CLASSES = "inline-flex items-center gap-1.5 rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 transition hover:bg-gray-50 dark:border-zinc-600 dark:bg-zinc-800 dark:text-gray-300 dark:hover:bg-zinc-700"
+      BUTTON_CLASSES = "ks-copy-button inline-flex items-center text-sm transition"
 
       COPY_ICON = <<~SVG.freeze
         <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /></svg>

data/app/components/keystone/ui/cta_banner_component.rb

@@ -3,10 +3,10 @@
 module Keystone
   module Ui
     class CtaBannerComponent < ViewComponent::Base
-      CARD_LAYOUT_CLASSES = "rounded-2xl border px-6 py-12 text-center lg:px-16 lg:py-16"
-      TITLE_BASE_CLASSES = "mb-4 text-3xl font-bold tracking-tight sm:text-4xl"
-      SUBTITLE_BASE_CLASSES = "mx-auto mb-8 max-w-2xl text-lg"
-      ACTIONS_CLASSES = "flex flex-wrap justify-center gap-4"
+      CARD_LAYOUT_CLASSES = "ks-cta-banner text-center"
+      TITLE_BASE_CLASSES = "ks-cta-banner-title text-3xl tracking-tight sm:text-4xl"
+      SUBTITLE_BASE_CLASSES = "ks-cta-banner-subtitle mx-auto max-w-2xl text-lg"
+      ACTIONS_CLASSES = "ks-cta-banner-actions flex flex-wrap justify-center"
 
       attr_reader :title, :subtitle
 
@@ -16,15 +16,15 @@ module Keystone
       end
 
       def classes
-        "#{CARD_LAYOUT_CLASSES} border-surface-200 dark:border-surface-700 bg-surface-50 dark:bg-surface-800"
+        CARD_LAYOUT_CLASSES
       end
 
       def title_classes
-        "#{TITLE_BASE_CLASSES} text-surface-900 dark:text-white"
+        TITLE_BASE_CLASSES
       end
 
       def subtitle_classes
-        "#{SUBTITLE_BASE_CLASSES} text-surface-500 dark:text-surface-400"
+        SUBTITLE_BASE_CLASSES
       end
 
       def subtitle?

data/app/components/keystone/ui/data_table_component.html.erb

@@ -1,6 +1,6 @@
-<div class="overflow-hidden rounded-lg border border-gray-200 shadow-sm dark:border-zinc-700 dark:shadow-none">
+<div class="<%= Keystone::Ui::DataTableComponent::WRAPPER_CLASSES %>">
   <table class="relative min-w-full divide-y divide-gray-300 dark:divide-white/15">
-    <thead class="bg-gray-50 dark:bg-gray-800/75">
+    <thead class="<%= Keystone::Ui::DataTableComponent::HEAD_CLASSES %>">
       <tr>
         <% header_cells.each do |cell| %>
           <th scope="<%= cell[:scope] %>" class="<%= cell[:classes] %>">
@@ -20,11 +20,11 @@
         <% end %>
       </tr>
     </thead>
-    <tbody class="divide-y divide-gray-200 bg-white dark:divide-white/10 dark:bg-gray-800/50">
+    <tbody class="<%= Keystone::Ui::DataTableComponent::BODY_CLASSES %>">
       <% if empty? %>
         <% if @empty_message %>
           <tr>
-            <td class="px-3 py-4 text-sm text-gray-500 dark:text-gray-400" colspan="<%= column_count %>">
+            <td class="<%= Keystone::Ui::DataTableComponent::EMPTY_CELL_CLASSES %>" colspan="<%= column_count %>">
               <%= @empty_message %>
             </td>
           </tr>

data/app/components/keystone/ui/data_table_component.rb

@@ -3,20 +3,24 @@
 module Keystone
   module Ui
     class DataTableComponent < ViewComponent::Base
-      HEADER_CLASSES_FIRST = "py-3.5 pr-3 pl-6 text-left text-sm font-semibold text-gray-900 dark:text-gray-200"
-      HEADER_CLASSES_MIDDLE = "px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-gray-200"
-      HEADER_CLASSES_LAST = "py-3.5 pr-6 pl-3"
-
-      ROW_CLASSES_FIRST = "py-4 pr-3 pl-6 text-sm font-medium whitespace-nowrap text-gray-900 dark:text-white"
-      ROW_CLASSES_MIDDLE = "px-3 py-4 text-sm whitespace-nowrap text-gray-500 dark:text-gray-400"
-      ROW_CLASSES_LAST = "py-4 pr-6 pl-3 text-right text-sm font-medium whitespace-nowrap"
+      EMPTY_CELL_CLASSES = "ks-table-cell-middle text-sm"
+      BODY_CLASSES = "ks-table-body"
+      HEAD_CLASSES = "ks-table-head"
+      WRAPPER_CLASSES = "ks-table overflow-hidden"
+      HEADER_CLASSES_FIRST = "ks-table-header ks-table-header-first text-left text-sm"
+      HEADER_CLASSES_MIDDLE = "ks-table-header ks-table-header-middle text-left text-sm"
+      HEADER_CLASSES_LAST = "ks-table-header-last"
+
+      ROW_CLASSES_FIRST = "ks-table-cell-first text-sm whitespace-nowrap"
+      ROW_CLASSES_MIDDLE = "ks-table-cell-middle text-sm whitespace-nowrap"
+      ROW_CLASSES_LAST = "ks-table-cell-last text-right text-sm whitespace-nowrap"
 
       MOBILE_HIDDEN_CLASSES = "hidden sm:table-cell"
 
-      SORT_LINK_CLASSES = "group inline-flex items-center gap-1"
+      SORT_LINK_CLASSES = "ks-table-sort-link group inline-flex items-center"
       SORT_ICON_CLASSES = "h-4 w-4 flex-shrink-0"
-      SORT_ICON_ACTIVE = "text-gray-700 dark:text-gray-300"
-      SORT_ICON_INACTIVE = "text-gray-400 dark:text-gray-500 invisible group-hover:visible"
+      SORT_ICON_ACTIVE = "ks-table-sort-icon-active"
+      SORT_ICON_INACTIVE = "ks-table-sort-icon invisible group-hover:visible"
 
       SORT_ASC_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 17a.75.75 0 0 1-.75-.75V5.612L5.29 9.77a.75.75 0 0 1-1.08-1.04l5.25-5.5a.75.75 0 0 1 1.08 0l5.25 5.5a.75.75 0 1 1-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0 1 10 17Z" clip-rule="evenodd" /></svg>'
       SORT_DESC_ICON = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 3a.75.75 0 0 1 .75.75v10.638l3.96-4.158a.75.75 0 1 1 1.08 1.04l-5.25 5.5a.75.75 0 0 1-1.08 0l-5.25-5.5a.75.75 0 0 1 1.08-1.04l3.96 4.158V3.75A.75.75 0 0 1 10 3Z" clip-rule="evenodd" /></svg>'

data/app/components/keystone/ui/disclosure_component.rb

@@ -3,10 +3,10 @@
 module Keystone
   module Ui
     class DisclosureComponent < ViewComponent::Base
-      WRAPPER_CLASSES = "group rounded-xl border border-surface-200 dark:border-surface-700"
-      SUMMARY_CLASSES = "flex cursor-pointer list-none items-center justify-between gap-4 px-6 py-4 font-semibold text-surface-900 [&::-webkit-details-marker]:hidden dark:text-white"
-      ICON_CLASSES = "h-4 w-4 shrink-0 text-surface-400 transition-transform group-open:rotate-180"
-      BODY_CLASSES = "px-6 pb-4 text-sm text-surface-600 dark:text-surface-400"
+      WRAPPER_CLASSES = "ks-disclosure group"
+      SUMMARY_CLASSES = "ks-disclosure-summary flex cursor-pointer list-none items-center justify-between [&::-webkit-details-marker]:hidden"
+      ICON_CLASSES = "ks-disclosure-icon h-4 w-4 shrink-0 transition-transform group-open:rotate-180"
+      BODY_CLASSES = "ks-disclosure-body text-sm"
 
       CARET_ICON = <<~SVG.freeze
         <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" /></svg>

data/app/components/keystone/ui/feature_grid_component.rb

@@ -3,13 +3,13 @@
 module Keystone
   module Ui
     class FeatureGridComponent < ViewComponent::Base
-      GRID_CLASSES = "grid gap-6 sm:grid-cols-2 lg:grid-cols-3"
-      TITLE_BASE_CLASSES = "mb-4 text-center text-3xl font-bold tracking-tight sm:text-4xl"
-      SUBTITLE_BASE_CLASSES = "mx-auto mb-16 max-w-2xl text-center text-lg"
-      CARD_LAYOUT_CLASSES = "rounded-xl border p-6 transition"
-      ICON_BASE_CLASSES = "mb-4 flex size-10 items-center justify-center rounded-lg text-lg"
-      CARD_TITLE_BASE_CLASSES = "mb-2 text-lg font-semibold"
-      CARD_DESCRIPTION_BASE_CLASSES = "text-sm"
+      GRID_CLASSES = "ks-feature-grid grid sm:grid-cols-2 lg:grid-cols-3"
+      TITLE_BASE_CLASSES = "ks-feature-grid-title text-center text-3xl tracking-tight sm:text-4xl"
+      SUBTITLE_BASE_CLASSES = "ks-feature-grid-subtitle mx-auto max-w-2xl text-center text-lg"
+      CARD_LAYOUT_CLASSES = "ks-feature-card transition"
+      ICON_BASE_CLASSES = "ks-feature-card-icon flex size-10 items-center justify-center text-lg"
+      CARD_TITLE_BASE_CLASSES = "ks-feature-card-title text-lg"
+      CARD_DESCRIPTION_BASE_CLASSES = "ks-feature-card-description text-sm"
 
       attr_reader :title, :subtitle, :features
 
@@ -24,11 +24,11 @@ module Keystone
       end
 
       def title_classes
-        "#{TITLE_BASE_CLASSES} text-surface-900 dark:text-white"
+        TITLE_BASE_CLASSES
       end
 
       def subtitle_classes
-        "#{SUBTITLE_BASE_CLASSES} text-surface-500 dark:text-surface-400"
+        SUBTITLE_BASE_CLASSES
       end
 
       def subtitle?
@@ -36,19 +36,19 @@ module Keystone
       end
 
       def card_classes
-        "#{CARD_LAYOUT_CLASSES} border-surface-200 dark:border-surface-700 bg-white dark:bg-surface-800 hover:border-accent-500/50 dark:hover:border-accent-500/50"
+        CARD_LAYOUT_CLASSES
       end
 
       def icon_classes
-        "#{ICON_BASE_CLASSES} bg-accent-500/10 text-accent-600 dark:text-accent-400"
+        ICON_BASE_CLASSES
       end
 
       def card_title_classes
-        "#{CARD_TITLE_BASE_CLASSES} text-surface-900 dark:text-white"
+        CARD_TITLE_BASE_CLASSES
       end
 
       def card_description_classes
-        "#{CARD_DESCRIPTION_BASE_CLASSES} text-surface-500 dark:text-surface-400"
+        CARD_DESCRIPTION_BASE_CLASSES
       end
     end
   end

data/app/components/keystone/ui/file_upload_component.rb

@@ -3,16 +3,16 @@
 module Keystone
   module Ui
     class FileUploadComponent < ViewComponent::Base
-      WRAPPER_CLASSES = "space-y-1"
-      LABEL_CLASSES = "block text-sm font-medium text-gray-700 dark:text-gray-300"
-      DROP_ZONE_CLASSES = "mt-1 flex justify-center rounded-md border-2 border-dashed border-gray-300 px-6 py-8 cursor-pointer dark:border-zinc-600 transition-colors"
-      DROP_ZONE_ACTIVE_CLASSES = "border-accent-500 bg-accent-50 dark:bg-accent-900/10"
-      DROP_ZONE_INNER_CLASSES = "space-y-2 text-center"
-      ICON_CLASSES = "mx-auto h-10 w-10 text-gray-400 dark:text-gray-500"
-      PROMPT_CLASSES = "text-sm text-gray-600 dark:text-gray-400"
-      BROWSE_CLASSES = "font-semibold text-accent-600 hover:text-accent-500 dark:text-accent-400 dark:hover:text-accent-300"
-      HINT_CLASSES = "mt-1 text-xs text-gray-500 dark:text-gray-400"
-      FILE_NAME_CLASSES = "mt-2 text-sm text-gray-700 dark:text-gray-300 truncate"
+      WRAPPER_CLASSES = "ks-file-upload"
+      LABEL_CLASSES = "ks-label block text-sm"
+      DROP_ZONE_CLASSES = "ks-file-upload-drop-zone flex justify-center cursor-pointer transition-colors"
+      DROP_ZONE_ACTIVE_CLASSES = "ks-file-upload-drop-zone-active"
+      DROP_ZONE_INNER_CLASSES = "ks-file-upload-inner text-center"
+      ICON_CLASSES = "ks-file-upload-icon mx-auto h-10 w-10"
+      PROMPT_CLASSES = "ks-file-upload-prompt text-sm"
+      BROWSE_CLASSES = "ks-file-upload-browse"
+      HINT_CLASSES = "ks-file-upload-hint text-xs"
+      FILE_NAME_CLASSES = "ks-file-upload-file-name text-sm truncate"
       FILE_INPUT_CLASSES = "sr-only"
 
       UPLOAD_ICON = <<~SVG.freeze

data/app/components/keystone/ui/form_component.rb

@@ -3,7 +3,7 @@
 module Keystone
   module Ui
     class FormComponent < ViewComponent::Base
-      FORM_CLASSES = "space-y-6"
+      FORM_CLASSES = "ks-form"
 
       def initialize(action:, method: :post, multipart: false, data: nil)
         @action = action

data/app/components/keystone/ui/form_field_component.rb

@@ -3,13 +3,13 @@
 module Keystone
   module Ui
     class FormFieldComponent < ViewComponent::Base
-      WRAPPER_CLASSES = "space-y-1"
+      WRAPPER_CLASSES = "ks-form-field"
       LABEL_CLASSES = "ks-label"
       REQUIRED_CLASSES = "ks-required"
       HINT_CLASSES = "ks-hint"
       ERROR_CLASSES = "ks-error"
       CHECKBOX_CLASSES = "ks-checkbox"
-      CHECKBOX_WRAPPER_CLASSES = "flex items-center gap-2"
+      CHECKBOX_WRAPPER_CLASSES = "ks-form-field-checkbox flex items-center"
 
       def initialize(attribute:, label: nil, type: :text, required: false, hint: nil, placeholder: nil, min: nil, max: nil, step: nil, value: nil, options: [], errors: [], include_blank: nil, disabled: false)
         @attribute = attribute

data/app/components/keystone/ui/form_page_component.rb

@@ -4,8 +4,8 @@ module Keystone
   module Ui
     class FormPageComponent < ViewComponent::Base
       DESKTOP_WRAPPER_CLASSES = "hidden md:block"
-      TITLE_CLASSES = "text-2xl font-semibold text-gray-900 dark:text-white"
-      SUBTITLE_CLASSES = "mt-1 text-sm text-gray-500 dark:text-gray-400"
+      TITLE_CLASSES = "ks-page-title text-2xl"
+      SUBTITLE_CLASSES = "ks-page-header-subtitle text-sm"
 
       def initialize(title:, back_url:, subtitle: nil)
         @title = title

data/app/components/keystone/ui/funnel_component.rb

@@ -5,19 +5,19 @@ module Keystone
     class FunnelComponent < ViewComponent::Base
       Layer = Struct.new(:label, :value, :width_percent, :conversion_percent, :color_classes, keyword_init: true)
 
-      CONTAINER_CLASSES = "space-y-2"
-      LAYER_CLASSES = "space-y-1"
-      ROW_CLASSES = "flex items-baseline justify-between gap-3"
-      LABEL_CLASSES = "text-sm font-medium text-surface-700 truncate dark:text-surface-300"
-      VALUE_CLASSES = "text-sm font-semibold text-surface-900 tabular-nums dark:text-white"
-      BAR_CLASSES = "h-8 rounded-md transition-all"
-      TRANSITION_CLASSES = "py-1 text-center text-xs text-surface-500 dark:text-surface-400"
+      CONTAINER_CLASSES = "ks-funnel"
+      LAYER_CLASSES = "ks-funnel-layer"
+      ROW_CLASSES = "ks-funnel-row flex items-baseline justify-between"
+      LABEL_CLASSES = "ks-funnel-label text-sm truncate"
+      VALUE_CLASSES = "ks-funnel-value text-sm tabular-nums"
+      BAR_CLASSES = "ks-funnel-bar h-8 transition-all"
+      TRANSITION_CLASSES = "ks-funnel-transition text-center text-xs"
       STEP_COLOR_CLASSES = {
-        accent: "bg-accent-500",
-        sky: "bg-sky-500",
-        violet: "bg-violet-500",
-        amber: "bg-amber-500",
-        rose: "bg-rose-500"
+        accent: "ks-funnel-bar-accent",
+        sky: "ks-funnel-bar-sky",
+        violet: "ks-funnel-bar-violet",
+        amber: "ks-funnel-bar-amber",
+        rose: "ks-funnel-bar-rose"
       }.freeze
 
       attr_reader :steps

data/app/components/keystone/ui/grid_component.rb

@@ -3,9 +3,9 @@
 module Keystone
   module Ui
     class GridComponent < ViewComponent::Base
-      GAP_CLASSES = { sm: "gap-3", md: "gap-4", lg: "gap-6", xl: "gap-8" }.freeze
-      GAP_X_CLASSES = { sm: "gap-x-3", md: "gap-x-4", lg: "gap-x-6", xl: "gap-x-8" }.freeze
-      GAP_Y_CLASSES = { sm: "gap-y-3", md: "gap-y-4", lg: "gap-y-6", xl: "gap-y-8" }.freeze
+      GAP_CLASSES = { sm: "ks-grid-gap-sm", md: "ks-grid-gap-md", lg: "ks-grid-gap-lg", xl: "ks-grid-gap-xl" }.freeze
+      GAP_X_CLASSES = { sm: "ks-grid-gap-x-sm", md: "ks-grid-gap-x-md", lg: "ks-grid-gap-x-lg", xl: "ks-grid-gap-x-xl" }.freeze
+      GAP_Y_CLASSES = { sm: "ks-grid-gap-y-sm", md: "ks-grid-gap-y-md", lg: "ks-grid-gap-y-lg", xl: "ks-grid-gap-y-xl" }.freeze
       COL_CLASSES = {
         default: { 1 => "grid-cols-1", 2 => "grid-cols-2", 3 => "grid-cols-3", 4 => "grid-cols-4", 5 => "grid-cols-5", 6 => "grid-cols-6", 7 => "grid-cols-7", 8 => "grid-cols-8", 9 => "grid-cols-9", 10 => "grid-cols-10", 11 => "grid-cols-11", 12 => "grid-cols-12" }.freeze,
         sm: { 1 => "sm:grid-cols-1", 2 => "sm:grid-cols-2", 3 => "sm:grid-cols-3", 4 => "sm:grid-cols-4", 5 => "sm:grid-cols-5", 6 => "sm:grid-cols-6", 7 => "sm:grid-cols-7", 8 => "sm:grid-cols-8", 9 => "sm:grid-cols-9", 10 => "sm:grid-cols-10", 11 => "sm:grid-cols-11", 12 => "sm:grid-cols-12" }.freeze,

data/app/components/keystone/ui/hero_component.rb

@@ -3,19 +3,19 @@
 module Keystone
   module Ui
     class HeroComponent < ViewComponent::Base
-      WRAPPER_CLASSES = "relative min-h-screen pt-24"
-      INNER_CLASSES = "mx-auto max-w-6xl px-6 py-24 lg:py-32"
+      WRAPPER_CLASSES = "ks-hero relative min-h-screen"
+      INNER_CLASSES = "ks-hero-inner mx-auto max-w-6xl"
 
-      CONTENT_COLUMN_CLASSES = "flex flex-col gap-8"
+      CONTENT_COLUMN_CLASSES = "ks-hero-content flex flex-col"
       CENTERED_COLUMN_CLASSES = "items-center"
 
-      SPLIT_CLASSES = "grid gap-12 lg:grid-cols-2 lg:gap-16 items-center"
+      SPLIT_CLASSES = "ks-hero-split grid lg:grid-cols-2 items-center"
       CENTERED_CLASSES = "flex flex-col items-center text-center"
 
-      TITLE_BASE_CLASSES = "text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl"
-      SUBTITLE_BASE_CLASSES = "max-w-lg text-lg"
-      BADGE_BASE_CLASSES = "inline-flex w-fit items-center gap-2 rounded-full border px-4 py-1.5 text-sm"
-      ACTIONS_CLASSES = "flex flex-wrap gap-4"
+      TITLE_BASE_CLASSES = "ks-hero-title text-4xl tracking-tight sm:text-5xl lg:text-6xl"
+      SUBTITLE_BASE_CLASSES = "ks-hero-subtitle max-w-lg text-lg"
+      BADGE_BASE_CLASSES = "ks-hero-badge inline-flex w-fit items-center text-sm"
+      ACTIONS_CLASSES = "ks-hero-actions flex flex-wrap"
 
       renders_one :aside
 
@@ -47,11 +47,11 @@ module Keystone
       end
 
       def title_classes
-        "#{TITLE_BASE_CLASSES} text-surface-900 dark:text-white"
+        TITLE_BASE_CLASSES
       end
 
       def subtitle_classes
-        "#{SUBTITLE_BASE_CLASSES} text-surface-500 dark:text-surface-400"
+        SUBTITLE_BASE_CLASSES
       end
 
       def subtitle?
@@ -59,7 +59,7 @@ module Keystone
       end
 
       def badge_classes
-        "#{BADGE_BASE_CLASSES} border-accent-500/20 bg-accent-500/10 text-accent-600 dark:text-accent-400"
+        BADGE_BASE_CLASSES
       end
 
       def badge?

data/app/components/keystone/ui/mobile_actions_component.rb

@@ -10,8 +10,8 @@ module Keystone
       SVG
 
       WRAPPER_CLASSES = "relative lg:hidden"
-      BUTTON_CLASSES = "text-gray-500 dark:text-gray-400"
-      DROPDOWN_CLASSES = "hidden absolute right-0 z-50 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black/5 dark:bg-zinc-800 dark:ring-white/10"
+      BUTTON_CLASSES = "ks-action-menu-button"
+      DROPDOWN_CLASSES = "ks-action-menu hidden absolute right-0 z-50 w-48 origin-top-right"
 
       def wrapper_data
         { controller: "dropdown" }