keystone_ui-preferences 0.6.0 → 0.8.0

data/app/models/keystone_ui/preferences/chosen_colours.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module KeystoneUi
+  module Preferences
+    class ChosenColours
+      def initialize(values)
+        @values = values
+      end
+
+      def refusal
+        return Refusal.new("Choose Default, one of the colour templates, one of the preset themes or Custom.") unless template_offered?
+
+        Refusal.new("Choose each colour as a six-digit hex value, such as #1d4ed8.") unless colours_offered?
+      end
+
+      def value
+        return { "preset_name" => @values[:template_name] } if preset?
+        return { "template_name" => @values[:template_name] } if @values[:template_name].present?
+
+        { "accent" => @values[:accent], "surface" => @values[:surface], "text" => @values[:text] }
+      end
+
+      private
+
+      def template_offered?
+        @values[:template_name].blank? || preset? || [ AppearanceChoice::DEFAULT_TEMPLATE, *KeystoneUi::Looks::Templates.names.map(&:to_s) ].include?(@values[:template_name])
+      end
+
+      def preset?
+        KeystoneUi::Looks::Themes.names.map(&:to_s).include?(@values[:template_name].to_s)
+      end
+
+      def colours_offered?
+        return true if @values[:template_name].present?
+
+        colour_offered?(@values[:accent], KeystoneUi::Looks::Palettes::ACCENTS) && colour_offered?(@values[:surface], KeystoneUi::Looks::Palettes::SURFACES) && colour_offered?(@values[:text], {})
+      end
+
+      def colour_offered?(colour, palettes)
+        colour.to_s.match?(AppearanceChoice::HEX) || palettes.key?(colour.to_s.to_sym)
+      end
+    end
+  end
+end

data/app/models/keystone_ui/preferences/layout_choice.rb

@@ -12,9 +12,13 @@ module KeystoneUi
       end
 
       def value
-        return account_preference.value unless members_choose?
+        preference&.value
+      end
+
+      def preference
+        return account_preference unless members_choose?
 
-        (own_preference || account_preference)&.value
+        own_preference || account_preference
       end
 
       def members_choose?

data/app/models/keystone_ui/preferences/pick_account_appearance.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+module KeystoneUi
+  module Preferences
+    class PickAccountAppearance
+      def initialize(values:, person: nil, account: nil)
+        @person = person
+        @account = account
+        @values = values
+      end
+
+      def call
+        return Refusal.new("There is no account to save this appearance on.") unless @account
+        return Refusal.new("Choose the app's own look or one of the looks it offers.") unless look_offered?
+
+        return Refusal.new("This app does not let accounts choose their colours.") if colours_sent? && !KeystoneUi::Preferences.configuration.account_colors
+
+        chosen = chosen_colours
+        return chosen.refusal if chosen&.refusal
+
+        keep("colours", (chosen ? { value: chosen.value } : {}).merge(switch(:members_choose)))
+        keep_look
+        Kept.new
+      end
+
+      private
+
+      def colours_sent?
+        @values.key?(:template_name) || sent_theme.sent?
+      end
+
+      def chosen_colours
+        return sent_theme.checked if sent_theme.sent?
+
+        ChosenColours.new(@values) if colours_sent?
+      end
+
+      def sent_theme
+        @sent_theme ||= SentTheme.new(@values) { ComponentPreference.find_by(owner: @account, component_key: "colours")&.value.to_h }
+      end
+
+      def look_offered?
+        !look_sent? || @values[:look].blank? || KeystoneUi.configuration.looks.key?(@values[:look])
+      end
+
+      def keep_look
+        chosen = look_sent? ? { value: { "look" => @values[:look].presence }.compact } : {}
+        keep("look", chosen.merge(switch(:members_choose_look)))
+      end
+
+      def look_sent?
+        @values.key?(:look) && KeystoneUi::Preferences.configuration.account_looks
+      end
+
+      def keep(component_key, changes)
+        ComponentPreference.find_or_initialize_by(owner: @account, component_key: component_key).update!(changes) if changes.any?
+      end
+
+      def switch(name)
+        @values.key?(name) ? { members_choose: @values[name] == "1" } : {}
+      end
+    end
+  end
+end

data/app/models/keystone_ui/preferences/pick_appearance.rb

@@ -0,0 +1,90 @@
+# frozen_string_literal: true
+
+module KeystoneUi
+  module Preferences
+    class PickAppearance
+      def initialize(values:, person: nil, account: nil)
+        @person = person
+        @account = account
+        @values = values
+      end
+
+      def call
+        return Refusal.new("Choose Light, Dark, System or Custom for the mode.") unless mode_offered?
+        return Refusal.new("Choose the app's own look or one of the looks it offers.") unless look_offered?
+        return keep_mode_and_look unless @values.key?(:template_name) || sent_theme.sent?
+        return Refusal.new("This app sets the colours for everyone, so this was not saved.") unless KeystoneUi::Preferences.configuration.account_colors
+        return Refusal.new("Your account sets the colours for everyone, so this was not saved.") unless members_choose?
+        return keep_checked(sent_theme.checked) if sent_theme.sent?
+        return use_default if @values[:template_name] == AppearanceChoice::DEFAULT_TEMPLATE
+
+        chosen = ChosenColours.new(@values)
+        return chosen.refusal if chosen.refusal
+
+        preference.update!(value: chosen.value)
+        keep_mode_and_look
+      end
+
+      private
+
+      def mode_offered?
+        !@values.key?(:mode) || KeystoneUi::ThemeChoice::MODES.include?(@values[:mode])
+      end
+
+      def look_offered?
+        !look_sent? || @values[:look].blank? || KeystoneUi.configuration.looks.key?(@values[:look])
+      end
+
+      def members_choose?
+        LayoutChoice.new(person: @person, account: @account, component_key: "colours").members_choose?
+      end
+
+      def sent_theme
+        @sent_theme ||= SentTheme.new(@values) { preference.value.to_h }
+      end
+
+      def keep_checked(checked)
+        return checked.refusal if checked.refusal
+
+        preference.update!(value: checked.value)
+        keep_mode_and_look
+      end
+
+      def use_default
+        preference.destroy! if preference.persisted?
+        keep_mode_and_look
+      end
+
+      def keep_mode_and_look
+        keep_mode
+        keep_look
+        Kept.new
+      end
+
+      def keep_mode
+        return unless @values.key?(:mode)
+
+        ComponentPreference.find_or_initialize_by(owner: @person, component_key: "mode").update!(value: { "mode" => @values[:mode] })
+      end
+
+      def keep_look
+        return unless look_sent?
+        return look_preference.update!(value: { "look" => @values[:look] }) if @values[:look].present?
+
+        look_preference.destroy! if look_preference.persisted?
+      end
+
+      def look_sent?
+        @values.key?(:look) && AppearanceChoice.new(person: @person, account: @account).person_chooses_look?
+      end
+
+      def look_preference
+        @look_preference ||= ComponentPreference.find_or_initialize_by(owner: @person, component_key: "look")
+      end
+
+      def preference
+        @preference ||= ComponentPreference.find_or_initialize_by(owner: @person, component_key: "colours")
+      end
+    end
+  end
+end

data/app/models/keystone_ui/preferences/sent_theme.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module KeystoneUi
+  module Preferences
+    class SentTheme
+      def initialize(values, &saved_colours)
+        @values = values
+        @saved_colours = saved_colours
+      end
+
+      def sent?
+        pasting? || editing?
+      end
+
+      def checked
+        return pasted if pasting?
+
+        CheckedTheme.new(typed)
+      end
+
+      private
+
+      def pasting?
+        @values[:pasted_theme].present?
+      end
+
+      def editing?
+        typed.any? && [ saved["theme"], preset_theme(saved["preset_name"]), preset_theme(@values[:template_name]) ].exclude?(typed)
+      end
+
+      def saved
+        @saved ||= @saved_colours.call
+      end
+
+      def preset_theme(name)
+        KeystoneUi::Looks::Themes[name][:theme] if KeystoneUi::Looks::Themes.names.map(&:to_s).include?(name.to_s)
+      end
+
+      def typed
+        @typed ||= @values[:theme].to_h.to_h { |name, sides| [ name.to_s, sides.to_h.to_h { |side, value| [ side.to_s, value.to_s.strip ] }.compact_blank ] }.compact_blank
+      end
+
+      def pasted
+        reader = ThemeReader.new(@values[:pasted_theme])
+        reader.refusal ? reader : CheckedTheme.new(reader.values)
+      end
+    end
+  end
+end

data/app/models/keystone_ui/preferences/theme_css.rb

@@ -0,0 +1,89 @@
+# frozen_string_literal: true
+
+module KeystoneUi
+  module Preferences
+    class ThemeCss
+      VERSION = "2"
+      SHADOW_SETTINGS = %w[shadow-offset-x shadow-offset-y shadow-blur shadow-spread shadow-color shadow-opacity].freeze
+      SHADOWS = %w[--ks-shadow-surface --ks-shadow-overlay --ks-shadow-menu].freeze
+      HOVERS = { "primary" => "--ks-color-accent-hover", "secondary" => "--ks-color-neutral-hover", "destructive" => "--ks-color-danger-hover" }.freeze
+
+      OUTRANKING_LOOKS = ":root, html:root[data-look]"
+
+      def initialize(theme = {}, own_look: false, palette: nil)
+        @theme = theme
+        @own_look = own_look
+        @palette = palette
+      end
+
+      def to_s
+        rules.map { |selector, lines| "#{selector} {\n#{lines.join("\n")}\n}" }.join("\n")
+      end
+
+      private
+
+      def rules
+        return { ":root" => palette_lines } if @palette
+        return { OUTRANKING_LOOKS => colour_lines, ":root" => shape_lines } if @own_look
+
+        { OUTRANKING_LOOKS => colour_lines + shape_lines }
+      end
+
+      def palette_lines
+        accent, surface, background, text = @palette.values_at(:accent, :surface, :background, :text)
+        shade_lines("accent", shades(accent) { KeystoneUi::Looks::Palettes.accent(accent) }) +
+          shade_lines("surface", shades(surface) { KeystoneUi::Looks::Palettes.surface(surface) }) +
+          [ declaration("--color-custom-background", background), declaration("--color-custom-text", text) ]
+      end
+
+      def shades(colour)
+        return KeystoneUi::Looks::Palettes.generate_shades(colour) if colour.start_with?("#")
+
+        yield
+      end
+
+      def shade_lines(name, shades)
+        shades.map { |shade, hex| declaration("--color-#{name}-#{shade}", hex) }
+      end
+
+      def colour_lines
+        lines(@theme.select { |role, _sides| colour?(role) })
+      end
+
+      def shape_lines
+        lines(@theme.reject { |role, _sides| colour?(role) }) + shadow_declarations
+      end
+
+      def colour?(role)
+        ThemeRoles::ROLES.fetch(role)[:kind] == :colour
+      end
+
+      def lines(roles)
+        roles.flat_map do |role, sides|
+          ThemeRoles::ROLES.fetch(role)[:variables].flat_map { |variable| declarations(variable, sides) } + hover_declarations(role, sides)
+        end
+      end
+
+      def shadow_declarations
+        x, y, blur, spread, colour, opacity = SHADOW_SETTINGS.map { |setting| @theme.dig(setting, "light") }
+        return [] unless x && y && blur && spread && colour && opacity
+
+        SHADOWS.map { |variable| declaration(variable, "#{x} #{y} #{blur} #{spread} color-mix(in srgb, #{colour} calc(#{opacity} * 100%), transparent)") }
+      end
+
+      def hover_declarations(role, sides)
+        return [] unless HOVERS.key?(role)
+
+        declarations(HOVERS[role], sides.transform_values { |colour| "color-mix(in oklab, #{colour} 85%, white)" })
+      end
+
+      def declarations(variable, sides)
+        { variable => sides["light"], "#{variable}-dark" => sides["dark"] }.compact.map { |name, value| declaration(name, value) }
+      end
+
+      def declaration(name, value)
+        "  #{name}: #{value};"
+      end
+    end
+  end
+end

data/app/models/keystone_ui/preferences/theme_reader.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module KeystoneUi
+  module Preferences
+    class ThemeReader
+      BLOCK = %r{(?:\A|(?<=[\};])|(?<=\*/)|@layer\s+[\w-]+\s*\{)\s*(:root|\.dark)\s*\{([^\{\}]*)\}}
+      DECLARATION = /--([a-z0-9-]+)\s*:\s*([^;]*)/
+      LIMIT = 20_000
+      FETCHES = /url\(|@import/i
+      SIDES = { ":root" => "light", ".dark" => "dark" }.freeze
+
+      def initialize(text)
+        @text = text.to_s
+      end
+
+      def refusal
+        return Refusal.new("The pasted theme is longer than 20,000 characters, so it was not saved.") if @text.length > LIMIT
+        return Refusal.new("The pasted theme contains url( or @import, so it was not saved.") if @text.match?(FETCHES)
+
+        Refusal.new("The pasted theme has no shadcn colour role in a :root or .dark block, so it was not saved.") if values.keys.none? { |name| ThemeRoles::ROLES.fetch(name)[:kind] == :colour }
+      end
+
+      def values
+        @values ||= @text.scan(BLOCK).each_with_object({}) do |(selector, body), values|
+          body.scan(DECLARATION).each do |name, value|
+            next unless ThemeRoles::ROLES.key?(name)
+
+            (values[name] ||= {})[SIDES.fetch(selector)] = value.strip
+          end
+        end
+      end
+    end
+  end
+end

data/app/models/keystone_ui/preferences/theme_roles.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+module KeystoneUi
+  module Preferences
+    module ThemeRoles
+      ROLES = {
+        "background" => { kind: :colour, variables: %w[--ks-color-page] },
+        "foreground" => { kind: :colour, variables: %w[--ks-color-on-page] },
+        "card" => { kind: :colour, variables: %w[--ks-color-surface] },
+        "card-foreground" => { kind: :colour, variables: %w[--ks-color-on-surface] },
+        "popover" => { kind: :colour, variables: %w[--ks-color-overlay] },
+        "popover-foreground" => { kind: :colour, variables: %w[--ks-color-on-overlay --ks-color-on-overlay-muted] },
+        "primary" => { kind: :colour, variables: %w[--ks-color-accent] },
+        "primary-foreground" => { kind: :colour, variables: %w[--ks-color-on-accent] },
+        "secondary" => { kind: :colour, variables: %w[--ks-color-neutral] },
+        "secondary-foreground" => { kind: :colour, variables: %w[--ks-color-on-neutral] },
+        "muted" => { kind: :colour, variables: %w[--ks-color-fill-muted] },
+        "muted-foreground" => { kind: :colour, variables: %w[--ks-color-text-muted] },
+        "accent" => { kind: :colour, variables: %w[--ks-color-hover] },
+        "accent-foreground" => { kind: :colour, variables: %w[--ks-color-on-hover --ks-color-on-hover-muted] },
+        "destructive" => { kind: :colour, variables: %w[--ks-color-danger] },
+        "destructive-foreground" => { kind: :colour, variables: %w[--ks-color-on-danger] },
+        "border" => { kind: :colour, variables: %w[--ks-color-border] },
+        "input" => { kind: :colour, variables: %w[--ks-color-border-control] },
+        "ring" => { kind: :colour, variables: %w[--ks-color-focus] },
+        "chart-1" => { kind: :colour, variables: %w[--ks-color-chart-1] },
+        "chart-2" => { kind: :colour, variables: %w[--ks-color-chart-2] },
+        "chart-3" => { kind: :colour, variables: %w[--ks-color-chart-3] },
+        "chart-4" => { kind: :colour, variables: %w[--ks-color-chart-4] },
+        "chart-5" => { kind: :colour, variables: %w[--ks-color-chart-5] },
+        "sidebar" => { kind: :colour, variables: %w[--ks-color-nav] },
+        "sidebar-foreground" => { kind: :colour, variables: %w[--ks-color-nav-link --ks-color-nav-text] },
+        "sidebar-primary" => { kind: :colour, variables: %w[--ks-color-nav-indicator --ks-color-nav-active] },
+        "sidebar-primary-foreground" => { kind: :colour, variables: [] },
+        "sidebar-accent" => { kind: :colour, variables: %w[--ks-color-nav-hover] },
+        "sidebar-accent-foreground" => { kind: :colour, variables: %w[--ks-color-nav-text-hover] },
+        "sidebar-border" => { kind: :colour, variables: %w[--ks-color-nav-border] },
+        "sidebar-ring" => { kind: :colour, variables: [] },
+        "radius" => { kind: :length, variables: %w[--ks-radius-control --ks-radius-surface] },
+        "spacing" => { kind: :length, variables: %w[--ks-spacing] },
+        "border-width" => { kind: :length, variables: %w[--ks-border-width] },
+        "letter-spacing" => { kind: :letter_spacing, variables: %w[--ks-letter-spacing] },
+        "font-sans" => { kind: :font_list, variables: %w[--ks-font-body] },
+        "font-serif" => { kind: :font_list, variables: [] },
+        "font-mono" => { kind: :font_list, variables: %w[--ks-font-mono --default-mono-font-family] },
+        "font-heading" => { kind: :font_list, variables: %w[--ks-font-heading] },
+        "font-weight-normal" => { kind: :weight, variables: %w[--ks-font-weight-normal] },
+        "font-weight-medium" => { kind: :weight, variables: %w[--ks-font-weight-medium] },
+        "font-weight-strong" => { kind: :weight, variables: %w[--ks-font-weight-strong] },
+        "font-weight-heading" => { kind: :weight, variables: %w[--ks-font-weight-heading] },
+        "shadow-color" => { kind: :shadow_colour, variables: [] },
+        "shadow-opacity" => { kind: :opacity, variables: [] },
+        "shadow-blur" => { kind: :length, variables: [] },
+        "shadow-spread" => { kind: :signed_length, variables: [] },
+        "shadow-offset-x" => { kind: :signed_length, variables: [] },
+        "shadow-offset-y" => { kind: :signed_length, variables: [] }
+      }.freeze
+
+      def self.names
+        ROLES.keys
+      end
+    end
+  end
+end

data/app/views/keystone_ui/preferences/settings/_account_appearance.html.erb

@@ -0,0 +1,41 @@
+<%
+  colours = KeystoneUi::Preferences::ComponentPreference.find_by(owner: account, component_key: "colours")
+  saved = colours&.value.presence || { "template_name" => "default" }
+  look = KeystoneUi::Preferences::ComponentPreference.find_by(owner: account, component_key: "look")
+  offers_colours = KeystoneUi::Preferences.configuration.account_colors
+  offers_look = KeystoneUi::Preferences.configuration.account_looks && KeystoneUi.configuration.looks.any?
+  drawn = KeystoneUi::Preferences::AppearanceChoice.new(person: account, account: nil).colours
+%>
+
+<% if !offers_colours && !offers_look %>
+  <%= ui_alert(message: "This app does not let accounts choose their colours or look.") %>
+<% else %>
+<%= ui_panel(padding: :lg) do %>
+  <%= form_with(url: submit_url, method: :patch, data: { turbo: false, controller: "keystone-ui--preferences--theme-settings" }) do %>
+    <div style="display: flex; flex-direction: column; gap: 2rem;">
+      <% if offers_colours %>
+        <%= render partial: "keystone_ui/preferences/settings/colour_choices", locals: { saved: saved, drawn: drawn, pastes: true, presets: true, own_theme_hint: "The account's current choice is its own theme." } %>
+      <% end %>
+
+      <% if offers_look %>
+        <%= render partial: "keystone_ui/preferences/settings/look_choices", locals: { saved_look: look&.value.to_h["look"] } %>
+      <% end %>
+
+      <%= ui_section(title: "Members", spacing: :sm) do %>
+        <% if offers_colours %>
+          <%= hidden_field_tag "members_choose", "0", id: nil %>
+          <%= ui_checkbox_row(name: "members_choose", value: "1", label: "Members choose their own colours", checked: colours.nil? || colours.members_choose) %>
+        <% end %>
+        <% if offers_look %>
+          <%= hidden_field_tag "members_choose_look", "0", id: nil %>
+          <%= ui_checkbox_row(name: "members_choose_look", value: "1", label: "Members choose their own look", checked: look.nil? || look.members_choose) %>
+        <% end %>
+      <% end %>
+
+      <div>
+        <%= ui_button(label: "Save", type: :submit) %>
+      </div>
+    </div>
+  <% end %>
+<% end %>
+<% end %>

data/app/views/keystone_ui/preferences/settings/_appearance.html.erb

@@ -0,0 +1,40 @@
+<%
+  choice = KeystoneUi::Preferences::LayoutChoice.new(person: person, account: account, component_key: "colours")
+  configuration = KeystoneUi::Preferences.configuration
+  chooses_colours = configuration.account_colors && choice.members_choose?
+  appearance = KeystoneUi::Preferences::AppearanceChoice.new(person: person, account: account)
+  drawn = appearance.colours
+  saved = KeystoneUi::Preferences::ComponentPreference.find_by(owner: person, component_key: "colours")&.value || { "template_name" => "default" }
+  saved_look = KeystoneUi::Preferences::ComponentPreference.find_by(owner: person, component_key: "look")&.value.to_h["look"]
+%>
+
+<% if configuration.account_colors && !choice.members_choose? %>
+  <%= ui_alert(message: "Your account sets the colours for everyone.") %>
+<% end %>
+
+<%= ui_panel(padding: :lg) do %>
+  <%= form_with(url: submit_url, method: :patch, data: { turbo: false, controller: "keystone-ui--preferences--theme-settings" }) do %>
+    <div style="display: flex; flex-direction: column; gap: 2rem;">
+      <% if chooses_colours %>
+        <%= render partial: "keystone_ui/preferences/settings/colour_choices", locals: { saved: saved, drawn: drawn, pastes: true, presets: true } %>
+      <% end %>
+
+      <% if appearance.person_chooses_look? && KeystoneUi.configuration.looks.any? %>
+        <%= render partial: "keystone_ui/preferences/settings/look_choices", locals: { saved_look: saved_look } %>
+      <% end %>
+
+      <%= ui_section(title: "Mode", spacing: :sm) do %>
+        <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
+          <% KeystoneUi::ThemeChoice::MODES.each do |mode| %>
+            <% next if mode == "custom" && !(chooses_colours || appearance.custom_offered?) %>
+            <%= ui_radio_card(name: "mode", value: mode, label: mode.capitalize, checked: appearance.mode == mode) %>
+          <% end %>
+        </div>
+      <% end %>
+
+      <div>
+        <%= ui_button(label: "Save", type: :submit) %>
+      </div>
+    </div>
+  <% end %>
+<% end %>

data/app/views/keystone_ui/preferences/settings/_colour_choices.html.erb

@@ -0,0 +1,95 @@
+<%
+  configuration = KeystoneUi::Preferences.configuration
+  palette_hex = ->(colour, palette) { colour.to_s.start_with?("#") ? colour.to_s : palette.call(colour)[500] }
+  templates = { "default" => { accent: configuration.default_accent, surface: configuration.default_surface, text: configuration.default_text, label: "Default" } }
+  KeystoneUi::Looks::Templates.all.each { |name, template| templates[name.to_s] = template }
+  saved_preset = KeystoneUi::Looks::Themes.all.find { |name, _preset| name.to_s == saved["preset_name"] }&.last
+%>
+
+<%= ui_section(title: "Theme", spacing: :sm) do %>
+  <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
+    <% templates.each do |name, template| %>
+      <% accent_hex = palette_hex.call(template[:accent], KeystoneUi::Looks::Palettes.method(:accent)) %>
+      <% surface_hex = palette_hex.call(template[:surface], KeystoneUi::Looks::Palettes.method(:surface)) %>
+      <%= ui_option_card(
+        name: "template_name",
+        value: name,
+        selected: saved["template_name"] == name,
+        input_data: {
+          action: "keystone-ui--preferences--theme-settings#selectTemplate",
+          "accent-hex": accent_hex,
+          "surface-hex": surface_hex,
+          "text-hex": template[:text]
+        },
+        label_data: {
+          "keystone-ui--preferences--theme-settings-target": "templateLabel",
+          template: name
+        }
+      ) do %>
+        <span style="display: inline-block; width: 1rem; height: 1rem; border-radius: 9999px; background-color: <%= accent_hex %>;"></span>
+        <span style="display: inline-block; width: 1rem; height: 1rem; border-radius: 0.25rem; background-color: <%= surface_hex %>;"></span>
+        <span><%= template[:label] %></span>
+      <% end %>
+    <% end %>
+    <% if local_assigns[:presets] %>
+      <% KeystoneUi::Looks::Themes.all.each do |name, preset| %>
+        <%= ui_option_card(
+          name: "template_name",
+          value: name.to_s,
+          selected: saved["preset_name"] == name.to_s,
+          input_data: {
+            action: "keystone-ui--preferences--theme-settings#selectPreset",
+            theme: preset[:theme].to_json
+          },
+          label_data: {
+            "keystone-ui--preferences--theme-settings-target": "templateLabel",
+            template: name.to_s
+          }
+        ) do %>
+          <span style="display: inline-block; width: 1rem; height: 1rem; border-radius: 9999px; background-color: <%= preset[:theme].dig("primary", "light") %>;"></span>
+          <span style="display: inline-block; width: 1rem; height: 1rem; border-radius: 0.25rem; background-color: <%= preset[:theme].dig("secondary", "light") %>;"></span>
+          <span><%= preset[:label] %></span>
+        <% end %>
+      <% end %>
+    <% end %>
+    <%= ui_option_card(
+      name: "template_name",
+      value: "",
+      selected: saved["template_name"].blank? && !saved.key?("theme") && !saved.key?("preset_name"),
+      input_data: {
+        "keystone-ui--preferences--theme-settings-target": "customRadio"
+      },
+      label_data: {
+        "keystone-ui--preferences--theme-settings-target": "templateLabel",
+        template: "custom"
+      }
+    ) do %>
+      <span>Custom</span>
+    <% end %>
+  </div>
+  <% if saved.key?("theme") %>
+    <p class="ks-hint"><%= local_assigns.fetch(:own_theme_hint, "Your current choice is your own theme.") %></p>
+  <% end %>
+  <% if local_assigns[:pastes] %>
+    <%= ui_form_field(attribute: "pasted_theme", label: "Paste a theme", type: :textarea, hint: "A :root block and a .dark block in shadcn/ui's variable names, as tweakcn and shadcn's theme pages export them.") %>
+    <%= render partial: "keystone_ui/preferences/settings/theme_settings", locals: { theme: saved_preset ? saved_preset[:theme] : saved["theme"].to_h } %>
+  <% end %>
+<% end %>
+
+<%= ui_section(title: "Accent Color", spacing: :sm) do %>
+  <div data-keystone-ui--preferences--theme-settings-target="accentPicker">
+    <%= ui_color_picker(name: "accent", value: palette_hex.call(drawn[:accent], KeystoneUi::Looks::Palettes.method(:accent))) %>
+  </div>
+<% end %>
+
+<%= ui_section(title: "Surface", spacing: :sm) do %>
+  <div data-keystone-ui--preferences--theme-settings-target="surfacePicker">
+    <%= ui_color_picker(name: "surface", value: palette_hex.call(drawn[:surface], KeystoneUi::Looks::Palettes.method(:surface))) %>
+  </div>
+<% end %>
+
+<%= ui_section(title: "Text Color", spacing: :sm) do %>
+  <div data-keystone-ui--preferences--theme-settings-target="textPicker">
+    <%= ui_color_picker(name: "text", value: drawn[:text]) %>
+  </div>
+<% end %>

data/app/views/keystone_ui/preferences/settings/_look_choices.html.erb

@@ -0,0 +1,8 @@
+<%= ui_section(title: "Look", spacing: :sm) do %>
+  <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
+    <%= ui_radio_card(name: "look", value: "", label: KeystoneUi::Preferences.configuration.app_look_label, checked: saved_look.nil?) %>
+    <% KeystoneUi.configuration.looks.each_key do |look| %>
+      <%= ui_radio_card(name: "look", value: look, label: look.humanize, checked: saved_look == look) %>
+    <% end %>
+  </div>
+<% end %>

data/app/views/keystone_ui/preferences/settings/_theme_settings.html.erb

@@ -0,0 +1,17 @@
+<%= ui_disclosure do |disclosure| %>
+  <% disclosure.with_summary { "Change each theme setting" } %>
+  <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
+    <% KeystoneUi::Preferences::ThemeRoles::ROLES.each do |name, role| %>
+      <% (role[:kind] == :colour ? %w[light dark] : %w[light]).each do |side| %>
+        <% field_name = "theme[#{name}][#{side}]" %>
+        <% value = theme.dig(name, side).to_s %>
+        <% label = role[:kind] == :colour ? "--#{name}, #{side}" : "--#{name}" %>
+        <% if %i[colour shadow_colour].include?(role[:kind]) %>
+          <%= ui_color_picker(name: field_name, value: value, label: label) %>
+        <% else %>
+          <%= ui_form_field(attribute: field_name, label: label, value: value) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  </div>
+<% end %>