keystone_ui 0.16.0 → 0.18.0

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

@@ -16,10 +16,10 @@ module Keystone
       SVG
 
       WRAPPER_CLASSES = "lg:hidden"
-      BACK_LINK_CLASSES = "text-gray-500 dark:text-gray-400"
-      TITLE_CLASSES = "absolute left-1/2 -translate-x-1/2 font-semibold text-gray-900 dark:text-white lg:hidden truncate max-w-[60%]"
-      SUBTITLE_CLASSES = "block text-xs font-normal text-gray-500 dark:text-gray-400 truncate text-center"
-      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"
+      BACK_LINK_CLASSES = "ks-mobile-header-back"
+      TITLE_CLASSES = "ks-mobile-header-title absolute left-1/2 -translate-x-1/2 lg:hidden truncate max-w-[60%]"
+      SUBTITLE_CLASSES = "ks-mobile-header-subtitle block text-xs truncate text-center"
+      DROPDOWN_CLASSES = "ks-action-menu hidden absolute right-0 z-50 w-48 origin-top-right"
 
       # Renders the left-side and title of the mobile header.
       # Call from the left side of your navbar.

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

@@ -3,11 +3,11 @@
 module Keystone
   module Ui
     class ModalComponent < ViewComponent::Base
-      BACKDROP_CLASSES = "hidden fixed inset-0 z-50 flex items-center justify-center bg-black/60"
-      PANEL_CLASSES = "rounded-xl border border-gray-200 bg-white p-6 w-full mx-4 max-h-[80vh] flex flex-col dark:border-zinc-700 dark:bg-zinc-800"
-      HEADER_CLASSES = "flex items-center justify-between mb-4"
-      TITLE_CLASSES = "text-lg font-semibold text-gray-900 dark:text-gray-200"
-      CLOSE_BUTTON_CLASSES = "text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
+      BACKDROP_CLASSES = "ks-modal-backdrop hidden fixed inset-0 z-50 flex items-center justify-center"
+      PANEL_CLASSES = "ks-modal-panel w-full max-h-[80vh] flex flex-col"
+      HEADER_CLASSES = "ks-modal-header flex items-center justify-between"
+      TITLE_CLASSES = "ks-modal-title text-lg"
+      CLOSE_BUTTON_CLASSES = "ks-modal-close"
       BODY_CLASSES = "overflow-auto flex-1"
 
       SIZE_CLASSES = {

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

@@ -4,10 +4,10 @@ module Keystone
   module Ui
     class MultiSelectComponent < 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 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 z-10 w-56 hidden"
+      OPTION_CLASSES = "ks-menu-option flex items-center text-sm cursor-pointer"
+      CHECKBOX_CLASSES = "ks-menu-checkbox"
       CARET_ICON = <<~SVG.freeze
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
           <path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />

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

@@ -3,12 +3,12 @@
 module Keystone
   module Ui
     class NavDropdownComponent < ViewComponent::Base
-      WRAPPER_CLASSES = "nav-dropdown"
-      MENU_CLASSES = "nav-dropdown-menu hidden"
-      TRIGGER_BASE = "nav-dropdown-trigger"
+      WRAPPER_CLASSES = "ks-nav-dropdown"
+      MENU_CLASSES = "ks-nav-dropdown-menu hidden"
+      TRIGGER_BASE = "ks-nav-dropdown-trigger"
       ACTIVE_CLASS = "active"
       CARET_ICON = <<~SVG.freeze
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="nav-dropdown-caret">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="ks-nav-dropdown-caret">
           <path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
         </svg>
       SVG

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

@@ -14,7 +14,7 @@ module Keystone
       ACTIVE_CLASS = "active"
 
       def link_classes
-        @active ? ACTIVE_CLASS : ""
+        [ "ks-nav-item", (ACTIVE_CLASS if @active) ].compact.join(" ")
       end
     end
   end

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

@@ -7,7 +7,7 @@ module Keystone
       NAV_STICKY = "sticky top-0 z-40"
       MOBILE_LEFT_CLASSES = "lg:hidden flex items-center"
       LOGO_CLASSES = "logo"
-      MOBILE_CENTER_CLASSES = "absolute left-1/2 -translate-x-1/2 font-semibold text-gray-900 dark:text-white lg:hidden truncate max-w-[60%]"
+      MOBILE_CENTER_CLASSES = "ks-navbar-title absolute left-1/2 -translate-x-1/2 lg:hidden truncate max-w-[60%]"
       DESKTOP_LINKS_CLASSES = "nav-container hidden lg:flex"
       MOBILE_RIGHT_CLASSES = "nav-user-controls ml-auto"
 

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

@@ -3,7 +3,7 @@
 module Keystone
   module Ui
     class OptionCardComponent < ViewComponent::Base
-      BASE_CLASSES = "inline-flex items-center gap-2 px-3 py-2 rounded-lg border-2 transition cursor-pointer"
+      BASE_CLASSES = "ks-option-card inline-flex items-center transition cursor-pointer"
 
       attr_reader :name, :value, :input_data, :label_data
 
@@ -20,7 +20,7 @@ module Keystone
       end
 
       def classes
-        border = selected? ? "border-accent-500" : "border-transparent"
+        border = selected? ? "ks-option-card-selected" : "border-transparent"
         "#{BASE_CLASSES} #{border}"
       end
     end

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

@@ -3,8 +3,8 @@
 module Keystone
   module Ui
     class PanelComponent < ViewComponent::Base
-      PADDING_CLASSES = { sm: "p-4", md: "p-5", lg: "p-6" }.freeze
-      RADIUS_CLASSES = { md: "rounded-lg", lg: "rounded-xl", xl: "rounded-2xl" }.freeze
+      PADDING_CLASSES = { sm: "ks-panel-padding-sm", md: "ks-panel-padding-md", lg: "ks-panel-padding-lg" }.freeze
+      RADIUS_CLASSES = { md: "ks-panel-radius-md", lg: "ks-panel-radius-lg", xl: "ks-panel-radius-xl" }.freeze
 
       def initialize(padding: :md, radius: :lg, shadow: true)
         @padding = padding
@@ -13,7 +13,7 @@ module Keystone
       end
 
       BASE_CLASSES = "ks-panel"
-      SHADOW_CLASS = "shadow-sm"
+      SHADOW_CLASS = "ks-panel-shadow"
 
       def classes
         tokens = [ RADIUS_CLASSES.fetch(@radius), BASE_CLASSES, PADDING_CLASSES.fetch(@padding) ]

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

@@ -3,24 +3,24 @@
 module Keystone
   module Ui
     class PipelineComponent < ViewComponent::Base
-      CONTAINER_CLASSES = "rounded-xl border border-surface-700 bg-surface-800 p-6"
-      HEADER_CLASSES = "mb-4"
-      TITLE_CLASSES = "text-lg font-semibold text-white"
-      SUBTITLE_CLASSES = "mt-1 text-sm text-surface-400"
-      TRACK_CLASSES = "flex flex-col gap-3 sm:flex-row sm:items-stretch"
-      BOX_CLASSES = "flex flex-1 flex-col items-center gap-2 rounded-lg border border-surface-700 bg-surface-900 p-4 text-center"
-      BOX_LABEL_CLASSES = "text-xs uppercase tracking-wide text-surface-500"
+      CONTAINER_CLASSES = "ks-pipeline"
+      HEADER_CLASSES = "ks-pipeline-header"
+      TITLE_CLASSES = "ks-pipeline-title text-lg"
+      SUBTITLE_CLASSES = "ks-pipeline-subtitle text-sm"
+      TRACK_CLASSES = "ks-pipeline-track flex flex-col sm:flex-row sm:items-stretch"
+      BOX_CLASSES = "ks-pipeline-box flex flex-1 flex-col items-center text-center"
+      BOX_LABEL_CLASSES = "ks-pipeline-box-label text-xs uppercase tracking-wide"
       CONNECTOR_CLASSES = "flex items-center justify-center"
-      COUNT_BASE_CLASSES = "text-3xl font-bold"
+      COUNT_BASE_CLASSES = "ks-pipeline-count text-3xl"
       LINK_BASE_CLASSES = "link-toggle text-2xl leading-none"
-      LINK_HEALTHY_CLASSES = "text-accent-500"
-      LINK_BROKEN_CLASSES = "text-red-500"
+      LINK_HEALTHY_CLASSES = "ks-pipeline-link-healthy"
+      LINK_BROKEN_CLASSES = "ks-pipeline-link-broken"
 
       COUNT_CLASSES = {
-        amber: "text-amber-400",
-        emerald: "text-accent-400",
-        danger: "text-red-400",
-        muted: "text-surface-500"
+        amber: "ks-pipeline-count-amber",
+        emerald: "ks-pipeline-count-emerald",
+        danger: "ks-pipeline-count-danger",
+        muted: "ks-pipeline-count-muted"
       }.freeze
 
       attr_reader :title, :boxes, :links, :subtitle

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

@@ -3,9 +3,9 @@
 module Keystone
   module Ui
     class ProgressComponent < ViewComponent::Base
-      TRACK_CLASSES = "w-full h-2 bg-surface-200 rounded-full overflow-hidden dark:bg-surface-700"
-      BAR_CLASSES = "h-full bg-accent-500 rounded-full transition-all"
-      LABEL_CLASSES = "mb-1 text-sm font-medium text-surface-700 dark:text-surface-300"
+      TRACK_CLASSES = "ks-progress-track w-full h-2 overflow-hidden"
+      BAR_CLASSES = "ks-progress-bar h-full transition-all"
+      LABEL_CLASSES = "ks-meter-label text-sm"
 
       attr_reader :value, :max, :label
 

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

@@ -3,10 +3,10 @@
 module Keystone
   module Ui
     class RadioCardComponent < ViewComponent::Base
-      BASE_CLASSES = "inline-flex flex-col px-4 py-3 rounded-lg border-2 cursor-pointer transition"
-      HIGHLIGHT_CLASSES = "border-gray-200 dark:border-zinc-700 peer-checked:border-accent-500 peer-checked:bg-accent-50 dark:peer-checked:bg-zinc-800"
-      LABEL_CLASSES = "block font-medium text-gray-900 dark:text-gray-100"
-      HINT_CLASSES = "block mt-1 text-sm text-surface-500 dark:text-gray-400"
+      BASE_CLASSES = "ks-radio-card inline-flex flex-col cursor-pointer transition"
+      HIGHLIGHT_CLASSES = "ks-radio-card-highlight"
+      LABEL_CLASSES = "ks-radio-card-label block"
+      HINT_CLASSES = "ks-radio-card-hint block text-sm"
 
       attr_reader :name, :value, :label, :hint
 

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

@@ -1,4 +1,4 @@
 <%= link_to @href, class: link_classes do %>
-  <span class="font-medium"><%= @label %></span>
+  <span class="<%= LABEL_CLASSES %>"><%= @label %></span>
   <%= CHEVRON_ICON.html_safe %>
 <% end %>

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

@@ -3,12 +3,13 @@
 module Keystone
   module Ui
     class SettingsLinkComponent < ViewComponent::Base
+      LABEL_CLASSES = "ks-settings-link-label"
       attr_reader :label, :href
 
-      LINK_CLASSES = "flex items-center justify-between px-4 py-3 text-gray-900 dark:text-gray-100 no-underline hover:bg-gray-50 dark:hover:bg-gray-800"
+      LINK_CLASSES = "ks-settings-link flex items-center justify-between no-underline"
 
       CHEVRON_ICON = <<~SVG.freeze
-        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 text-gray-400">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 ks-settings-link-chevron">
           <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
         </svg>
       SVG

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

@@ -4,8 +4,8 @@ module Keystone
   module Ui
     class ShowPageComponent < 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/stat_card_component.html.erb

@@ -1,13 +1,13 @@
 <div class="<%= classes %>"<%= info? ? ' data-controller="stat-card-info"'.html_safe : "" %>>
-  <div class="flex items-start justify-between gap-2">
+  <div class="<%= HEADER_CLASSES %>">
     <p class="<%= label_classes %>"><%= label %></p>
     <% if info? %>
       <button type="button" class="<%= info_button_classes %>" data-action="click->stat-card-info#toggle" aria-label="Show metric details">
         <%= info_icon.html_safe %>
       </button>
       <div class="<%= disclosure_classes %>" data-stat-card-info-target="panel">
-        <% if definition %><p><span class="font-medium text-gray-700 dark:text-gray-300">Captures:</span> <%= definition %></p><% end %>
-        <% if calculation %><p><span class="font-medium text-gray-700 dark:text-gray-300">Calc:</span> <%= calculation %></p><% end %>
+        <% if definition %><p><span class="<%= EMPHASIS_CLASSES %>">Captures:</span> <%= definition %></p><% end %>
+        <% if calculation %><p><span class="<%= EMPHASIS_CLASSES %>">Calc:</span> <%= calculation %></p><% end %>
       </div>
     <% end %>
   </div>

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

@@ -3,25 +3,27 @@
 module Keystone
   module Ui
     class StatCardComponent < ViewComponent::Base
-      CARD_CLASSES = "relative rounded-xl border border-gray-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-800"
-      LABEL_CLASSES = "text-sm font-medium text-gray-500 dark:text-gray-400"
-      VALUE_BASE_CLASSES = "mt-1 text-3xl font-bold"
-      SUFFIX_CLASSES = "text-lg text-gray-500 dark:text-gray-400"
-      DISCLOSURE_CLASSES = "hidden peer-hover:block peer-focus-visible:block absolute inset-x-0 top-full z-10 mt-2 space-y-1 rounded-lg border border-gray-200 bg-white p-3 text-sm text-gray-600 shadow-lg dark:border-zinc-700 dark:bg-zinc-800 dark:text-gray-400"
-      CHANGE_ROW_CLASSES = "mt-1 h-5 text-sm font-medium"
+      EMPHASIS_CLASSES = "ks-stat-card-emphasis"
+      HEADER_CLASSES = "ks-stat-card-header flex items-start justify-between"
+      CARD_CLASSES = "ks-metric-card relative"
+      LABEL_CLASSES = "ks-stat-card-label text-sm"
+      VALUE_BASE_CLASSES = "ks-stat-card-value text-3xl"
+      SUFFIX_CLASSES = "ks-stat-card-suffix text-lg"
+      DISCLOSURE_CLASSES = "ks-stat-card-disclosure hidden peer-hover:block peer-focus-visible:block absolute inset-x-0 top-full z-10 text-sm"
+      CHANGE_ROW_CLASSES = "ks-stat-card-change h-5 text-sm"
       VALUE_LINK_CLASSES = "hover:underline focus:outline-none focus-visible:underline"
-      INFO_BUTTON_CLASSES = "peer shrink-0 text-gray-400 transition hover:text-accent-600 dark:hover:text-accent-400"
+      INFO_BUTTON_CLASSES = "ks-stat-card-info peer shrink-0 transition"
 
       INFO_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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
       SVG
 
       VARIANT_CLASSES = {
-        neutral: "text-gray-900 dark:text-white",
-        success: "text-green-600 dark:text-green-400",
-        danger: "text-red-600 dark:text-red-400",
-        warning: "text-yellow-600 dark:text-yellow-400",
-        info: "text-accent-600 dark:text-accent-400"
+        neutral: "ks-tone-neutral",
+        success: "ks-tone-success",
+        danger: "ks-tone-danger",
+        warning: "ks-tone-warning",
+        info: "ks-tone-info"
       }.freeze
 
       attr_reader :label, :value, :suffix, :definition, :calculation, :change, :href
@@ -87,10 +89,10 @@ module Keystone
       end
 
       def change_classes
-        return "text-gray-500 dark:text-gray-400" if !change? || @change.zero?
-        return "text-red-600 dark:text-red-400" if @change.negative?
+        return "ks-tone-muted" if !change? || @change.zero?
+        return "ks-tone-danger" if @change.negative?
 
-        "text-green-600 dark:text-green-400"
+        "ks-tone-success"
       end
 
       def disclosure_classes

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

@@ -2,10 +2,10 @@
      data-swipe-deck-empty-title-value="<%= @empty_title %>"
      data-swipe-deck-empty-subtitle-value="<%= @empty_subtitle %>">
   <% if empty? %>
-    <div class="text-center py-16" data-testid="swipe-empty">
-      <p class="text-2xl font-semibold text-gray-900 dark:text-white"><%= @empty_title %></p>
+    <div class="<%= EMPTY_CLASSES %>" data-testid="swipe-empty">
+      <p class="<%= EMPTY_TITLE_CLASSES %>"><%= @empty_title %></p>
       <% if @empty_subtitle %>
-        <p class="mt-2 text-gray-500 dark:text-gray-400"><%= @empty_subtitle %></p>
+        <p class="<%= EMPTY_MESSAGE_CLASSES %>"><%= @empty_subtitle %></p>
       <% end %>
     </div>
   <% else %>
@@ -21,15 +21,15 @@
       <% end %>
     </div>
 
-    <div class="flex justify-center gap-8 mt-8">
+    <div class="<%= ACTIONS_CLASSES %>">
       <button data-action="swipe-deck#skip" data-testid="skip-button"
-              class="flex items-center justify-center size-14 rounded-full border-2 border-gray-300 dark:border-zinc-600 text-gray-400 hover:border-red-400 hover:text-red-400 transition-colors">
+              class="<%= REJECT_BUTTON_CLASSES %>">
         <svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
           <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
         </svg>
       </button>
       <button data-action="swipe-deck#complete" data-testid="complete-button"
-              class="flex items-center justify-center size-14 rounded-full border-2 border-gray-300 dark:border-zinc-600 text-gray-400 hover:border-green-400 hover:text-green-400 transition-colors">
+              class="<%= ACCEPT_BUTTON_CLASSES %>">
         <svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
           <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
         </svg>

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

@@ -3,7 +3,13 @@
 module Keystone
   module Ui
     class SwipeDeckComponent < ViewComponent::Base
-      CARD_CLASSES = "absolute inset-0 rounded-2xl border border-gray-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 shadow-lg p-6 flex flex-col items-center justify-center transition-transform duration-300"
+      ACCEPT_BUTTON_CLASSES = "ks-swipe-button ks-swipe-button-accept flex items-center justify-center size-14 transition-colors"
+      REJECT_BUTTON_CLASSES = "ks-swipe-button ks-swipe-button-reject flex items-center justify-center size-14 transition-colors"
+      ACTIONS_CLASSES = "ks-swipe-actions flex justify-center"
+      EMPTY_MESSAGE_CLASSES = "ks-swipe-empty-message"
+      EMPTY_TITLE_CLASSES = "ks-swipe-empty-title text-2xl"
+      EMPTY_CLASSES = "ks-swipe-empty text-center"
+      CARD_CLASSES = "ks-swipe-card absolute inset-0 flex flex-col items-center justify-center transition-transform duration-300"
 
       STACK_SCALE_STEP = 0.05
       STACK_TRANSLATE_STEP = 8

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

@@ -3,8 +3,8 @@
 module Keystone
   module Ui
     class TabSwitcherComponent < ViewComponent::Base
-      TAB_BAR_CLASSES = "mb-8 flex flex-wrap justify-center gap-2"
-      TAB_BASE_CLASSES = "rounded-lg px-4 py-2 text-sm font-semibold transition text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
+      TAB_BAR_CLASSES = "ks-tab-bar flex flex-wrap justify-center"
+      TAB_BASE_CLASSES = "ks-tab text-sm transition"
       PANEL_CLASSES = "hidden"
 
       attr_reader :tabs
@@ -18,7 +18,7 @@ module Keystone
       end
 
       def tab_classes
-        "#{TAB_BASE_CLASSES} data-[active]:bg-accent-500/10 data-[active]:text-accent-600 dark:data-[active]:bg-accent-500/10 dark:data-[active]:text-accent-400"
+        "#{TAB_BASE_CLASSES} ks-tab-active"
       end
 
       def panel_classes

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

@@ -4,8 +4,8 @@ module Keystone
   module Ui
     class ThemeToggleComponent < ViewComponent::Base
       OPTIONS = [ [ "Light", "light" ], [ "Dark", "dark" ], [ "System", "system" ] ].freeze
-      GROUP_CLASSES = "inline-flex gap-1"
-      OPTION_CLASSES = "ks-button ks-button-sm ks-button-secondary aria-pressed:bg-accent-600 aria-pressed:hover:bg-accent-500"
+      GROUP_CLASSES = "ks-theme-toggle inline-flex"
+      OPTION_CLASSES = "ks-theme-toggle-option ks-button ks-button-sm ks-button-secondary"
 
       def initialize(current: nil)
         @current = current

data/app/helpers/keystone_ui_helper.rb

@@ -46,7 +46,7 @@ module KeystoneUiHelper
   end
 
   def keystone_theme_attributes
-    keystone_theme_choice.html_attributes_markup.html_safe
+    keystone_theme_choice.html_attributes.merge(keystone_look_choice.html_attributes).map { |name, value| %(#{name}="#{value}") }.join(" ").html_safe
   end
 
   def ui_copy_button(**args)
@@ -218,4 +218,9 @@ module KeystoneUiHelper
   def keystone_theme_choice
     KeystoneUi::ThemeChoice.new(cookies[KeystoneUi::ThemeChoice::COOKIE], supplied: KeystoneUi.configuration.supplied_theme_mode(self))
   end
+
+  def keystone_look_choice
+    config = KeystoneUi.configuration
+    KeystoneUi::LookChoice.new(looks: config.looks.keys, default: config.default_look, supplied: config.supplied_look(self))
+  end
 end

data/lib/keystone_ui/configuration.rb

@@ -2,14 +2,28 @@
 
 module KeystoneUi
   class Configuration
-    attr_accessor :accent, :surface, :theme_mode_supplier
-    attr_reader :tailwind_imports, :tailwind_sources
+    attr_accessor :accent, :surface, :theme_mode_supplier, :look_supplier
+    attr_reader :tailwind_imports, :tailwind_sources, :looks, :default_look
 
     def initialize
       @accent = :blue
       @surface = :zinc
       @tailwind_imports = []
       @tailwind_sources = []
+      @looks = {}
+    end
+
+    def default_look=(name)
+      @default_look = name&.to_s
+    end
+
+    def register_look(name, path)
+      @looks[name.to_s] = path.to_s
+      @tailwind_imports << path.to_s
+    end
+
+    def supplied_look(view)
+      look_supplier&.call(view)&.to_s
     end
 
     def supplied_theme_mode(view)

data/lib/keystone_ui/look_choice.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module KeystoneUi
+  class LookChoice
+    def initialize(looks:, default:, supplied: nil)
+      @looks = looks
+      @default = default
+      @supplied = supplied
+    end
+
+    def name
+      [ @supplied, @default ].find { |candidate| @looks.include?(candidate) }
+    end
+
+    def html_attributes
+      name ? { "data-look" => name } : {}
+    end
+  end
+end

data/lib/keystone_ui/source_css.rb

@@ -21,7 +21,6 @@ module KeystoneUi
       [
         %(@import "#{KeystoneUi::Styles.tailwind_file}";),
         %(@source "#{@root}/app/components/**/*.{erb,rb}";),
-        %(@import "#{@root}/app/assets/tailwind/keystone_ui_engine/nav.css";),
         %(@import "#{@root}/app/assets/tailwind/keystone_ui_engine/color_picker.css";),
         %(@import "#{@root}/app/assets/tailwind/keystone_ui_engine/grid_safelist.css";),
         *@imports.map { |import| %(@import "#{import}";) },

data/lib/keystone_ui/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module KeystoneUi
-  VERSION = "0.16.0"
+  VERSION = "0.18.0"
 end

data/lib/keystone_ui.rb

@@ -4,6 +4,7 @@ require "view_component"
 require "keystone_ui/styles"
 require "keystone_ui/configuration"
 require "keystone_ui/theme_choice"
+require "keystone_ui/look_choice"
 require "keystone_ui/engine"
 require "keystone_ui/version"
 

data/the_local/agents/keystone_ui-info.md

@@ -74,6 +74,25 @@ holds the catalog.
   Tailwind's stock `gray-*` and `zinc-*` neutrals, or fixed status colors such
   as green and amber, directly. Changing the defaults belongs to the install
   local.
+- **Looks.** A look is one CSS file that sets the `--ks-` variables from
+  keystone_ui-styles 0.6.0 or later: corner radius, font, label weight, border
+  width, padding and colours. Each colour variable has a `-dark` partner read
+  on a dark page. Buttons, panels, cards, alerts, badges, form fields, the
+  modal, the mobile action menu, the column picker, multi select, copy button,
+  theme toggle, checkbox row, radio card, option card, file upload and colour
+  picker read these variables. So do the data display components: stat card,
+  chart card, card link, CTA banner, feature grid, hero, data table, code,
+  accordion, disclosure, tab switcher, progress, funnel, bucket, pipeline and
+  swipe deck. So do the navigation components: navbar, nav item, nav dropdown,
+  bottom nav, mobile header and settings link. A host imports its look after `keystone_source.css`, and a gem ships one through
+  `tailwind_imports`, both set up through the install local.
+- **Registered looks.** Looks can also be registered by name, and each page
+  gets one: the name another gem supplies for the request, then the configured
+  default, each used only when registered. The layout's `<html>` tag carries
+  `data-look="<name>"`, and a registered look file scopes its variables to
+  `:root[data-look="<name>"]`. A host with no registered looks gets no
+  `data-look`. Registering and choosing looks is set up through the install
+  local.
 - **Light, dark, system and custom themes.** Every component has dark-mode
   styling. The theme is chosen in this order: the user's choice stored in a
   cookie, then a mode another gem supplies, then light. System leaves the page

data/the_local/agents/keystone_ui-install.md

@@ -1,6 +1,6 @@
 ---
 name: keystone_ui-install
-description: Use to hook Keystone UI into a project — adding the gem, running the install generator to wire Tailwind, the Stimulus controllers and the layout's theme attributes, and configuring the palette, the theme mode supplier and extra Tailwind imports and sources.
+description: Use to hook Keystone UI into a project — adding the gem, running the install generator to wire Tailwind, the Stimulus controllers and the layout's theme attributes, and configuring the palette, the theme mode supplier, registered looks and extra Tailwind imports and sources.
 tools: Bash, Read, Edit
 scope: UI — pages, forms, tables, navigation, dashboards
 ---
@@ -22,18 +22,23 @@ built on ViewComponent; hook it in before building any screen with those helpers
   `surface` (palette names, `:blue` and `:zinc` unless set),
   `theme_mode_supplier` (a callable that supplies a light, dark, system or
   custom mode),
+  `register_look` (a look's CSS file by name), `default_look` and
+  `look_supplier` (which registered look a page gets),
   and the `tailwind_imports` and `tailwind_sources` lists (extra CSS files and
   scan paths added to the Tailwind build).
 - `keystone_theme_attributes` — a layout helper placed inside the `<html>` tag.
   It writes `data-theme="light"`, `data-theme="dark"` or `data-theme="custom"`
   for the page's mode, and writes nothing for system so the page follows the
   operating system. The mode is the `keystone_theme` cookie's choice, then the
-  configured `theme_mode_supplier`, then light.
+  configured `theme_mode_supplier`, then light. It also writes
+  `data-look="<name>"` for the page's look: the `look_supplier`'s name, then
+  `default_look`, each used only when registered. With no look registered it
+  writes no `data-look`.
 
 ## How to use it
 
 1. Confirm the prerequisites: Ruby >= 3.2 and **tailwindcss-rails v4+** in the
-   host app. The gem brings ViewComponent and keystone_ui-styles with it.
+   host app. The gem brings ViewComponent and keystone_ui-styles 0.6.0 or later with it.
    Tailwind does not have to be initialized first, because the generator creates
    the stylesheet if it is missing.
 
@@ -128,6 +133,32 @@ built on ViewComponent; hook it in before building any screen with those helpers
    or per-user colors generated at runtime by a companion theming gem. Ask which
    the app wants before wiring either.
 
+   To change how components look beyond the palette, write a look file: one CSS
+   file holding a `:root` rule, outside any `@layer` block, that sets the
+   `--ks-` variables from keystone_ui-styles for corner radius, font, label
+   weight, border width, padding and colours. Set each colour's `-dark`
+   partner too, or dark pages keep the default colour. Import it after
+   Keystone:
+
+   ```css
+   @import "tailwindcss";
+   @import "./keystone_source.css";
+   @import "./look.css";
+   ```
+
+   Buttons, panels, cards, alerts, badges, form fields, the modal, the mobile
+   action menu, the column picker, multi select, copy button, theme toggle,
+   checkbox row, radio card, option card, file upload and colour picker read
+   these variables. So do the data display components: stat card, chart card,
+   card link, CTA banner, feature grid, hero, data table, code, accordion,
+   disclosure, tab switcher, progress, funnel, bucket, pipeline and swipe deck.
+   So do the navigation components: navbar, nav item, nav dropdown, bottom nav,
+   mobile header and settings link. The keystone_ui-styles README lists every
+   variable and its default.
+
+   To offer several looks and choose one per page, register them by name in
+   step 7 rather than importing them here.
+
 7. Write `config/initializers/keystone_ui.rb` only if one of the settings below
    is wanted. Ask the developer about each rather than adding any by default.
    The engine reads the configuration after initializers have run, so this file
@@ -140,6 +171,9 @@ built on ViewComponent; hook it in before building any screen with those helpers
      config.accent = :emerald
      config.surface = :slate
      config.theme_mode_supplier = ->(view) { view.current_user&.theme }
+     config.register_look :compact, "/absolute/path/to/compact.css"
+     config.default_look = :compact
+     config.look_supplier = ->(view) { view.current_user&.look }
      config.tailwind_imports << "/absolute/path/to/extra.css"
      config.tailwind_sources << "/absolute/path/to/components/**/*.{erb,rb}"
    end
@@ -157,11 +191,21 @@ built on ViewComponent; hook it in before building any screen with those helpers
      `data-theme="custom"`. The theme toggle does not offer custom, so only a
      supplier sets it. Ask the developer which gem or code supplies custom and
      its colors before returning it.
+   - `register_look :name, path` — registers a look file by name and appends it
+     to `tailwind_imports`, so `keystone_source.css` imports it. A look offered
+     this way scopes its variables to `:root[data-look="<name>"]` instead of
+     `:root`, so several can be imported at once.
+   - `default_look = :name` — the look a page gets when nothing else chooses one.
+   - `look_supplier` — a callable that receives the view and returns a look
+     name for the request. A name that is not registered, or `nil`, leaves the
+     page on the default look.
    - `tailwind_imports` and `tailwind_sources` — lists to append to, never
      assign. Each import becomes an `@import` line and each source becomes an
      `@source` line in `keystone_source.css` on the next boot. They are for
      another gem or engine whose CSS or templates must be in the same Tailwind
-     build, and that gem normally appends its own entries.
+     build, and that gem normally appends its own entries. A gem that ships a
+     look appends its look file to `tailwind_imports` from its own initializer,
+     and `keystone_source.css` imports it after keystone_ui-styles.
 
 ## Conventions