keystone_ui-preferences 0.7.0 → 0.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bbf5cec0b85185ca3abee2d52c65c7e80f26044c9a0c7fb9a19df0fdba9464c6
-  data.tar.gz: a1885de65a350f4f7025fa2bdb1eb160a11d1f9402a4b38615672a4621a4d2bc
+  metadata.gz: f37c2cf73a8559ec91481efe3e542f12f3cd88363dce8de5396a3b0b70ed63dd
+  data.tar.gz: d4335e98170923ea6920e602a99c6b55fb81be63236834f37b1ffbc4d1a5ebe1
 SHA512:
-  metadata.gz: 834b8955f9a2048c833372321b52c13829376dc0d906e4c66d30bd4ef5d9b356f894057f6b1005c166d5b72e9fe33f1df7556f52bd6a9182e59613885c24771e
-  data.tar.gz: 30eb7dbafec075ee43fd6d1cc80a1af79fa6b9ef8c3eb1f68ef250f12f7a1fb042f44b9b1dccdd86580a52ac3de5c5ed15e4495ad0c8476887ba2dfac1bf53b1
+  metadata.gz: 799cef36ff33e44be4fb48c58604e129e81002205518c2d2dc5f59a09c3a1e4f097c6d0fe8d4cbe1bf276774542150c9e6573e72208700d20aca41a64d589e77
+  data.tar.gz: 25617ce106f11bc189f115ad36ec2979884a90adb9f973bc703da55a11d8ab73a368f62fc15d76bc327cfd0c5333b5907125959ccd5a357146d89ede96b89fc5

data/README.md

@@ -65,6 +65,7 @@ KeystoneUi::Preferences.configure do |config|
   config.app_look_label = "Classic"                  # the label for the app's own look in the appearance section
   config.account_colors = true                       # whether an account may choose its colours, and its members their own
   config.account_looks = true                        # whether an account may choose its look
+  config.theme_fonts = []                            # fonts the app serves itself that a pasted theme may name
 end
 ```
 
@@ -159,11 +160,17 @@ Add the palette style tag to your layout's `<head>`:
 
 It writes the same CSS variables keystone_ui-colors writes: `--color-accent-50` to `--color-accent-950`, `--color-surface-50` to `--color-surface-950`, `--color-custom-background` and `--color-custom-text`. A layout that already calls it for keystone_ui-colors keeps working unchanged, and an app that loads both gems stops at boot.
 
-The colours come from the `colours` key, read the way a table's layout is read: the person's own row, or the account's row when the account does not let members choose. A saved value looks like `{ "accent": "#e11d48", "surface": "#f5e6c8", "text": "#3b2f1e" }` or `{ "template_name": "forest" }`. A named accent or surface, such as `emerald` or `stone`, uses that palette's shades from keystone_ui-looks, and a hex value has its shades generated. A custom hex surface is also the custom background. A saved accent or surface that is neither a name of lowercase letters, digits and underscores nor a six-digit hex, and a saved text colour that is not a six-digit hex, is drawn as the configured default for that colour instead.
+The colours come from the `colours` key, read the way a table's layout is read: the person's own row, or the account's row when the account does not let members choose. A saved value looks like `{ "accent": "#e11d48", "surface": "#f5e6c8", "text": "#3b2f1e" }`, `{ "template_name": "forest" }`, `{ "preset_name": "harbor" }` or a pasted theme, described under Appearance. A named accent or surface, such as `emerald` or `stone`, uses that palette's shades from keystone_ui-looks, and a hex value has its shades generated. A custom hex surface is also the custom background. A saved accent or surface that is neither a name of lowercase letters, digits and underscores nor a six-digit hex, and a saved text colour that is not a six-digit hex, is drawn as the configured default for that colour instead.
 
 A saved `template_name` draws that template's accent, surface, background and text from keystone_ui-looks, whatever else the value holds. The template named `default` is built from the four defaults in the configuration. A person with nothing saved, and a visitor who is not signed in, see those four defaults.
 
-A saved name keystone_ui-looks no longer has still draws a page. A missing template draws the account's colours, or the four defaults when the account has none or its own template is the missing one. A missing accent or surface name draws the default accent or surface. Each of these writes one warning to the app's log naming the owner's type and id and the missing name, for example `keystone_ui-preferences: User 5 saved the template "retired", which keystone_ui-looks does not have`. A saved value that is not a name or a six-digit hex falls back with no warning. The saved row is left as it is until the owner saves again, and the appearance section shows no template selected for it.
+A saved theme is written into the same style tag as a second rule, after the palette, setting the `--ks-*` variables of keystone_ui-styles that each theme role maps to. A role's light value sets each of its variables and its dark value sets each variable's `-dark` partner, so Dark mode, and System mode on a device that prefers dark, draw the theme's dark values. A role with no dark value keeps today's dark colour, and a role that maps to no variable, such as `sidebar-ring`, sets nothing. The accent, neutral and danger hover colours are derived from `primary`, `secondary` and `destructive` by mixing in 15% white. The rule's selector is `:root, html:root[data-look]`, so a theme's colours win over the colours a look sets. React components from keystone_ui-react use the same `ks-` classes, so they draw the same theme colours. The theme is checked again before it is written. A saved theme holding a value that fails the check, such as one saved before a rule was tightened, or one that is not a set of roles each holding light and dark values, is not written, and the page draws the account's colours and theme instead, or the app's defaults when the account has none or its own theme is the one that fails. Each such page writes one warning to the app's log naming the owner's type and id and the first setting that fails, for example `keystone_ui-preferences: User 5 saved a theme whose --radius setting fails the theme check`, or says the theme is not a set of roles, for example `keystone_ui-preferences: User 5 saved a theme that is not a set of roles, so it fails the theme check`. The written rule is kept in `Rails.cache` under the colours row's versioned cache key and the writer's version, so a saved change, or a new release of the writer, shows on the next page. No theme is written while `account_colors` is off.
+
+A saved theme's shape and type are written into the same rule. `radius` sets `--ks-radius-control` and `--ks-radius-surface`, `spacing` sets `--ks-spacing`, `border-width` sets `--ks-border-width`, `letter-spacing` sets `--ks-letter-spacing`, `font-sans` sets `--ks-font-body`, `font-heading` sets `--ks-font-heading`, and `font-weight-normal`, `font-weight-medium`, `font-weight-strong` and `font-weight-heading` set the matching `--ks-font-weight-*` variable. `font-mono` sets both `--ks-font-mono` and Tailwind's `--default-mono-font-family`, since keystone_ui-styles draws code with the second, and a theme with no mono font sets neither. `font-serif` is saved but sets nothing. A theme that sets all six shadow settings writes one shadow, `<offset-x> <offset-y> <blur> <spread>` in the shadow colour mixed to the shadow opacity, to `--ks-shadow-surface`, `--ks-shadow-overlay` and `--ks-shadow-menu`, and a theme missing any of the six writes no shadow. Shape and type have no dark values. For a person who saved a look of their own, the shape and type go in a separate `:root` rule, so their look's corners, spacing, shadows, borders and fonts win over the theme's while the theme's colours still win over the look's. A look that comes only from the account or the app's default does not outrank the theme's shape and type. Whether the person saved a look is part of the cache key, so saving or removing one shows on the next page.
+
+A saved `preset_name` writes that preset theme from keystone_ui-looks into the same rule a saved theme is written into, looked up on each page rather than copied into the row, so a preset changed in a later keystone_ui-looks release reaches everyone who picked it. The preset's values are checked as a saved theme's are before they are written. The written rule is kept in `Rails.cache` under the preset's name, the keystone_ui-looks version, the writer's version and whether the person saved a look of their own.
+
+A saved name keystone_ui-looks no longer has still draws a page. A missing template draws the account's colours, or the four defaults when the account has none or its own template is the missing one. A missing accent or surface name draws the default accent or surface. A missing preset falls back the same way as a missing template, to the account's colours and theme, or to the four defaults when the account has none or its own preset is the missing one. Each of these writes one warning to the app's log naming the owner's type and id and the missing name, for example `keystone_ui-preferences: User 5 saved the template "retired", which keystone_ui-looks does not have`. A saved value that is not a name or a six-digit hex falls back with no warning. The saved row is left as it is until the owner saves again, and the appearance section shows no template selected for it.
 
 ## Appearance
 
@@ -175,11 +182,23 @@ SettingsHub.section :appearance, area: :user, title: "Appearance",
   runs: "KeystoneUi::Preferences::PickAppearance"
 ```
 
-The section looks and behaves as keystone_ui-colors' colour settings do. It offers Default, the five named templates from keystone_ui-looks and Custom, with an accent, a surface and a text colour picker under them. The person's own saved choice is selected, or Default when they have none, and the pickers show the colours drawn for them now. Picking a template sets the pickers to that template's colours at once, and changing a picker selects Custom, through the template picker script the install generator copies. Without the script the section still saves, and the form saves with a full page load, so it works in a Hotwire Native web view.
+The section looks and behaves as keystone_ui-colors' colour settings do. It offers Default, the five named templates from keystone_ui-looks, the six preset themes from keystone_ui-looks and Custom, with an accent, a surface and a text colour picker under them. The person's own saved choice is selected, or Default when they have none, and the pickers show the colours drawn for them now. Picking a template sets the pickers to that template's colours at once, and changing a picker selects Custom, through the template picker script the install generator copies. Without the script the section still saves, and the form saves with a full page load, so it works in a Hotwire Native web view.
+
+Saving a template keeps `{ "template_name": "forest" }` for that person under the `colours` key. Saving a preset theme keeps only its name, as `{ "preset_name": "harbor" }`. Saving Custom keeps `{ "accent": "#e11d48", "surface": "#f5e6c8", "text": "#3b2f1e" }`. Saving Default removes the person's `colours` row, so the account's colours, or the app's defaults, apply again. The next page the person opens is drawn in the saved colours.
+
+A template or preset name that is not Default, one of the five templates or one of the six preset themes is refused with a message, and so is a Custom accent or surface that is neither a six-digit hex nor a palette name from keystone_ui-looks, and a text colour that is not a six-digit hex. Nothing is saved.
+
+The Theme section also has a paste box for a theme in shadcn/ui's variable names, as tweakcn and shadcn's theme pages export it. Only declarations in a `:root` block and a `.dark` block are read, either at the top level or inside an `@layer` rule, and only the theme's settings are kept. Those are the 32 shadcn colour roles: `background`, `foreground`, `card`, `card-foreground`, `popover`, `popover-foreground`, `primary`, `primary-foreground`, `secondary`, `secondary-foreground`, `muted`, `muted-foreground`, `accent`, `accent-foreground`, `destructive`, `destructive-foreground`, `border`, `input`, `ring`, `chart-1` to `chart-5` and the eight `sidebar` roles. They are also shadcn's shape and type settings, `radius`, `spacing`, `letter-spacing`, `font-sans`, `font-serif`, `font-mono`, `shadow-color`, `shadow-opacity`, `shadow-blur`, `shadow-spread`, `shadow-offset-x` and `shadow-offset-y`. Last are the settings shadcn has no name for, `border-width`, `font-heading`, `font-weight-normal`, `font-weight-medium`, `font-weight-strong` and `font-weight-heading`. Every other declaration, selector and rule is ignored, including ready-made shadows such as `--shadow-sm`.
 
-Saving a template keeps `{ "template_name": "forest" }` for that person under the `colours` key. Saving Custom keeps `{ "accent": "#e11d48", "surface": "#f5e6c8", "text": "#3b2f1e" }`. Saving Default removes the person's `colours` row, so the account's colours, or the app's defaults, apply again. The next page the person opens is drawn in the saved colours.
+Each colour must be a hex colour or an `rgb()`, `hsl()` or `oklch()` colour written with plain numbers, such as `oklch(0.205 0 0)` or `oklch(1 0 0 / 10%)`. Saving keeps only the checked colours, as `{ "theme": { "primary": { "light": "oklch(0.205 0 0)", "dark": "oklch(0.922 0 0)" } } }` under the `colours` key, and the pasted text itself is never stored. A role with no value in the `.dark` block is kept with a light value alone.
 
-A template that is not Default or one of the five is refused with a message, and so is a Custom accent or surface that is neither a six-digit hex nor a palette name from keystone_ui-looks, and a text colour that is not a six-digit hex. Nothing is saved.
+Shape and type settings are kept from the `:root` block only, as `{ "radius": { "light": "0.5rem" } }`, and each is checked by its kind. A radius, spacing, border width or shadow blur must be a number followed by `px`, `rem` or `em`, or zero. A shadow's spread and offsets, and a letter spacing, may also be negative, and a letter spacing may be `normal`. A shadow colour is checked as a colour, a shadow opacity must be a number from 0 to 1, and a font weight must be a whole hundred from 100 to 900. A font list must be comma-separated names made of letters, digits, spaces and hyphens, each optionally in single or double quotes. A font in the list is kept only when the app names it in `theme_fonts` or it is one of the system fonts the gem lists: `system-ui`, `ui-sans-serif`, `ui-serif`, `ui-monospace`, `ui-rounded`, `sans-serif`, `serif`, `monospace`, `cursive`, `-apple-system`, `BlinkMacSystemFont`, `Segoe UI`, `Roboto`, `Helvetica`, `Helvetica Neue`, `Arial`, `Georgia`, `Times New Roman`, `Menlo`, `Monaco`, `Consolas`, `Courier New` and `SFMono-Regular`. Any other font is dropped, so the browser uses the next font in the list and nothing is requested from another site. A kept name of more than one word is written in double quotes and a one-word name is written bare. The gem loads no font file, so an app that names a font in `theme_fonts` serves that font itself. The Theme section then says the current choice is the person's own theme and selects no template. The palette style tag then writes the theme onto every page, as described under Colours.
+
+Each refusal below saves nothing and says why. A paste over 20,000 characters is refused before any of it is read. A paste containing `url(` or `@import` anywhere is refused. A paste with no shadcn colour role in a `:root` or `.dark` block is refused. A colour that fails the check is refused with a message naming the role and whether it is the light or dark value. A shape or type value that fails its check is refused with a message naming the setting, and so is a font list left with no font the app offers. A paste is refused with the same message as other colours while the account sets the colours for everyone.
+
+Under the paste box, a disclosure that starts closed lists every theme setting as its own field, named by its shadcn variable. Each colour role has a light and a dark keystone_ui colour picker, and the shadow colour has one, so a colour can be typed as hex, `rgb()`, `hsl()` or `oklch()`. Every other setting is a text field. The fields show the person's saved theme, so after a paste they hold the values that were read. Changing a field and pressing Save saves the fields as the person's theme, so a theme edited by hand stays the person's own. A field left blank leaves that setting out of the theme. Each value is checked and refused exactly as a pasted one is, with spaces around it removed first. The fields are saved only when they differ from the saved theme, so picking a template or changing the Accent, Surface or Text picker saves as before, and a paste sent in the same save wins over the fields. The disclosure needs no script, but the colour pickers need keystone_ui's colour picker script to take a typed colour.
+
+The preset themes are option cards after the templates, each showing its light primary and secondary colours as swatches, and the person's saved preset is selected. Picking a preset card fills the theme fields with that preset's values, through the template picker script, and once a preset is saved the fields show its values. Theme fields sent unchanged, holding the picked or the saved preset's values, save the picked card as before. Changing a field after picking a preset saves the fields as the person's own theme in place of the preset. Without the script, picking a card and pressing Save still saves the preset.
 
 The `colours` key follows the account layouts above. While an account turns off members-choose for it, the section says the account sets the colours for everyone and offers no colours, and a save that sends colours anyway is refused with a message and saves nothing.
 
@@ -211,7 +230,7 @@ An app that keeps people off their own looks sets `user_looks` to false. The app
 
 ## Account appearance
 
-An admin sets the account's colours and look in a settings_hub section. Who may open it is the app's decision, so register it behind a capability of the app's choosing:
+An admin sets the account's colours and look in a settings_hub section. Who may open it is the app's decision, so register it behind a capability of the app's choosing. settings_hub refuses a capability the app does not define, so use the one the app already uses for its other account sections in place of `:manage_account`:
 
 ```ruby
 SettingsHub.section :account_appearance, area: :account, title: "Appearance",
@@ -220,11 +239,11 @@ SettingsHub.section :account_appearance, area: :account, title: "Appearance",
   runs: "KeystoneUi::Preferences::PickAccountAppearance"
 ```
 
-The section looks and behaves as keystone_ui-colors' account picker does. It offers Default, the five named templates and Custom with the three colour pickers, then the app's own look and every registered look, with the account's saved choices selected, or Default and the app's own look when it has none. Under them are two switches, one for whether members choose their own colours and one for whether members choose their own look. Both are on until an admin turns them off.
+The section looks and behaves as keystone_ui-colors' account picker does. It offers Default, the five named templates, the six preset themes and Custom with the three colour pickers, the paste box and the theme fields the person's section has, then the app's own look and every registered look, with the account's saved choices selected, or Default and the app's own look when it has none. Under them are two switches, one for whether members choose their own colours and one for whether members choose their own look. Both are on until an admin turns them off.
 
-Saving keeps the account's colours under the `colours` key, as `{ "template_name": "forest" }` or `{ "accent": "#e11d48", "surface": "#f5e6c8", "text": "#3b2f1e" }`, and its look under the `look` key, with each switch in that row's `members_choose` column. Saving Default keeps `{ "template_name": "default" }`, and saving the app's own look keeps an empty look, so neither removes the row its switch is on. The colours and look pass the same checks as a person's, and a template, colour or look that fails one is refused with a message, and nothing is saved. A save with no account is refused too.
+Saving keeps the account's colours under the `colours` key, as `{ "template_name": "forest" }`, `{ "preset_name": "harbor" }`, `{ "accent": "#e11d48", "surface": "#f5e6c8", "text": "#3b2f1e" }` or a pasted or hand-edited theme, and its look under the `look` key, with each switch in that row's `members_choose` column. Saving Default keeps `{ "template_name": "default" }`, and saving the app's own look keeps an empty look, so neither removes the row its switch is on. The colours, a pasted theme, the theme fields and the look pass the same checks as a person's, the theme fields are saved only when they differ from the account's saved theme or the picked or saved preset, and a template, preset, colour, theme value or look that fails one is refused with a message, and nothing is saved. A save with no account is refused too.
 
-While the colours switch is off, every member sees the account's colours, and their appearance section says the account sets the colours and offers no colour choice. While the look switch is off, every member sees the account's look, and their appearance section offers no look choice. A look a member sends then is ignored, and the rest of the save is kept. While the look switch is on, a member who chose a look keeps it, and a member with none sees the account's.
+A member with no colours of their own sees the account's colours and theme. While the colours switch is off, every member sees the account's colours and theme, and their appearance section says the account sets the colours and offers no colour choice. While the look switch is off, every member sees the account's look, and their appearance section offers no look choice. A look a member sends then is ignored, and the rest of the save is kept. While the look switch is on, a member who chose a look keeps it, and a member with none sees the account's.
 
 An app that keeps accounts off colours sets `account_colors` to false. Neither section then offers a colour choice or the colours switch, every page is drawn in the four configured defaults, and colours sent to either section are refused with a message. An app that keeps accounts off looks sets `account_looks` to false. The account's section then offers no look choice and no look switch, a look sent to it is ignored, and a saved account look is not applied.
 
@@ -242,26 +261,24 @@ A choice made with keystone_ui's theme toggle in that browser still sets light o
 
 ## Moving off keystone_ui-colors
 
-An app that saved colours, modes and looks with keystone_ui-colors keeps them by following these steps in this order. An app that has never installed keystone_ui-preferences adds it to the Gemfile and runs its install generator before step 1.
+An app that saved colours, modes and looks with keystone_ui-colors keeps them by following these steps in this order. An app that has never installed keystone_ui-preferences runs its install generator at step 5 instead of the update generator.
 
-1. Update keystone_ui-preferences.
-2. Run its update generator, which copies the migration below into `db/migrate`.
-3. Remove keystone_ui-colors from the Gemfile and run `bundle install`.
-4. Change every `KeystoneUi::Colors` name the app uses to its replacement. keystone_ui-colors' README lists each name and what replaces it under [Moving to keystone_ui-preferences](https://github.com/DYB-Development/keystone_ui-colors#moving-to-keystone_ui-preferences).
-5. Register the person's appearance section and the account's appearance section, the account's behind `capability: :manage_account`, as [Appearance](#appearance) and [Account appearance](#account-appearance) show.
-6. Call `super` from any `after_settings_change` the app defines.
-7. Run `bin/rails db:migrate`.
+1. Set keystone_ui-preferences to `~> 0.7` and remove keystone_ui-colors from the Gemfile, then run `bundle install`.
+2. Change every `KeystoneUi::Colors` name the app uses to its replacement, and move any settings from a keystone_ui-colors initializer into a keystone_ui-preferences initializer. keystone_ui-colors' README lists each name and what replaces it under [Moving to keystone_ui-preferences](https://github.com/DYB-Development/keystone_ui-colors#moving-to-keystone_ui-preferences).
+3. Register the person's appearance section and the account's appearance section, as [Appearance](#appearance) and [Account appearance](#account-appearance) show. Register the account's behind the capability the app already uses for its other account sections.
+4. Call `super` from any `after_settings_change` the app defines.
+5. Run its update generator, which copies the migration below into `db/migrate`.
+6. Run `bin/rails db:migrate`.
 
 ```bash
-bundle update keystone_ui-preferences
-bin/rails generate keystone_ui:preferences:update
-# remove keystone_ui-colors from the Gemfile
+# set keystone_ui-preferences to ~> 0.7 and remove keystone_ui-colors from the Gemfile
 bundle install
-# change each KeystoneUi::Colors name, register both appearance sections, call super from after_settings_change
+# change each KeystoneUi::Colors name, move the initializer settings, register both appearance sections, call super from after_settings_change
+bin/rails generate keystone_ui:preferences:update
 bin/rails db:migrate
 ```
 
-Boot stops with `KeystoneUi::Preferences::ColorsCheck::Error` while keystone_ui-colors is loaded, and the message names keystone_ui-colors as the gem to remove and the update generator as the step to run first. `bin/rails db:migrate` boots the app, so keystone_ui-colors comes out of the Gemfile before the migration runs, and the generator runs before keystone_ui-colors comes out so the copy migration is in `db/migrate` when it does. An initializer, route, controller or helper that still names `KeystoneUi::Colors`, such as a `KeystoneUi::Colors.configure` block, a route mounting `KeystoneUi::Colors::Engine`, `include KeystoneUi::Colors::CurrentPalette` or `helper KeystoneUi::Colors::PaletteHelper`, also stops the app from booting, so every name is changed before the migration runs.
+Boot stops with `KeystoneUi::Preferences::ColorsCheck::Error` while keystone_ui-colors is loaded, and the message names keystone_ui-colors as the gem to remove. The update generator and `bin/rails db:migrate` both boot the app, so keystone_ui-colors comes out of the Gemfile before either runs. An initializer, route, controller or helper that still names `KeystoneUi::Colors`, such as a `KeystoneUi::Colors.configure` block, a route mounting `KeystoneUi::Colors::Engine`, `include KeystoneUi::Colors::CurrentPalette` or `helper KeystoneUi::Colors::PaletteHelper`, also stops the app from booting, so every name is changed before the generator runs.
 
 The generator copies a migration that reads every row of `keystone_ui_colors_theme_preferences` and writes up to three rows for the same owner:
 

data/app/controllers/concerns/keystone_ui/preferences/component_preferences.rb

@@ -29,8 +29,8 @@ module KeystoneUi
       end
 
       def keystone_palette_style_tag
-        colours = keystone_appearance_choice.colours
-        helpers.content_tag(:style, PaletteCss.new(**colours).to_s)
+        choice = keystone_appearance_choice
+        helpers.content_tag(:style, [ ThemeCss.new(palette: choice.colours).to_s, choice.theme_css ].compact.join("\n"))
       end
 
       def keystone_theme_mode

data/app/javascript/keystone_ui/preferences/theme_settings_controller.js

@@ -29,6 +29,29 @@ export default class extends Controller {
     this.highlightTemplate(label.dataset.template)
   }
 
+  selectPreset(event) {
+    const input = event.currentTarget
+    const theme = JSON.parse(input.dataset.theme)
+
+    Object.entries(theme).forEach(([role, sides]) => {
+      Object.entries(sides).forEach(([side, value]) => this.setThemeField(`theme[${role}][${side}]`, value))
+    })
+
+    this.highlightTemplate(input.closest("[data-template]").dataset.template)
+  }
+
+  setThemeField(name, value) {
+    const field = this.element.querySelector(`[name="${name}"]`)
+    if (!field) return
+
+    const picker = field.closest("[data-controller~='color-picker']")
+    if (picker) {
+      this.setPickerValue(picker, value)
+    } else {
+      field.value = value
+    }
+  }
+
   customColorChanged() {
     if (this.hasCustomRadioTarget) this.customRadioTarget.checked = true
     this.highlightTemplate("custom")
@@ -51,9 +74,11 @@ export default class extends Controller {
     const input = wrapper.querySelector("input[type='hidden']")
     const swatch = wrapper.querySelector("[data-color-picker-target='swatch']")
     const hexLabel = wrapper.querySelector("[data-color-picker-target='hexLabel']")
+    const text = wrapper.querySelector("[data-color-picker-target='text']")
 
     if (input) input.value = hex
     if (swatch) swatch.style.backgroundColor = hex
     if (hexLabel) hexLabel.textContent = hex
+    if (text) text.value = hex
   }
 }

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

@@ -8,9 +8,10 @@ module KeystoneUi
       PALETTE_NAME = /\A[a-z][a-z0-9_]*\z/
       WHITE = "#ffffff"
 
-      def initialize(person:, account:)
+      def initialize(person:, account:, own_look: nil)
         @person = person
         @account = account
+        @own_look = own_look
       end
 
       def colours
@@ -35,6 +36,15 @@ module KeystoneUi
         !colours[:background].casecmp?(WHITE)
       end
 
+      def theme_css
+        return unless configuration.account_colors
+        return preset_css if saved.key?("preset_name")
+        return unless saved.key?("theme")
+        return refused_theme_css if refused_theme
+
+        Rails.cache.fetch([ colours_choice.preference.cache_key_with_version, "theme_css", ThemeCss::VERSION, own_look? ]) { written_theme }
+      end
+
       private
 
       def chosen_colours
@@ -42,6 +52,8 @@ module KeystoneUi
         return default_colours if saved["template_name"] == DEFAULT_TEMPLATE
         return template_colours if template_offered?
         return fallback_colours if saved["template_name"].present?
+        return account_colours if saved["preset_name"].present? && !preset_offered?
+        return account_colours if refused_theme
 
         surface = catalogue_colour("surface", KeystoneUi::Looks::Palettes::SURFACES) || configuration.default_surface
         {
@@ -52,6 +64,51 @@ module KeystoneUi
         }
       end
 
+      def preset_css
+        unless preset_offered?
+          warn_missing("preset", saved["preset_name"])
+          return account_theme_css
+        end
+
+        Rails.cache.fetch([ "preset_css", saved["preset_name"], KeystoneUi::Looks::VERSION, ThemeCss::VERSION, own_look? ]) { written(KeystoneUi::Looks::Themes[saved["preset_name"]][:theme]) }
+      end
+
+      def preset_offered?
+        KeystoneUi::Looks::Themes.names.map(&:to_s).include?(saved["preset_name"].to_s)
+      end
+
+      def refused_theme_css
+        row = colours_choice.preference
+        Rails.logger.warn("keystone_ui-preferences: #{row.owner_type} #{row.owner_id} saved a theme #{refused_theme}")
+        account_theme_css
+      end
+
+      def refused_theme
+        return unless saved.key?("theme")
+        return "that is not a set of roles, so it fails the theme check" unless theme_shaped?(saved["theme"])
+
+        @refused_theme ||= CheckedTheme.new(saved["theme"]).failing_setting&.then { |setting| "whose --#{setting} setting fails the theme check" }
+      end
+
+      def written_theme
+        written(saved["theme"])
+      end
+
+      def written(theme)
+        checked = CheckedTheme.new(theme)
+        ThemeCss.new(checked.value["theme"], own_look: own_look?).to_s unless checked.refusal
+      end
+
+      def own_look?
+        return @own_look unless @own_look.nil?
+
+        @person.present? && person_chooses_look? && KeystoneUi.configuration.looks.key?(saved_look(@person))
+      end
+
+      def theme_shaped?(theme)
+        theme.is_a?(Hash) && theme.values.all?(Hash)
+      end
+
       def saved_look(owner)
         LayoutChoice.new(person: owner, account: nil, component_key: "look").value.to_h["look"]
       end
@@ -72,6 +129,14 @@ module KeystoneUi
 
       def fallback_colours
         warn_missing("template", saved["template_name"])
+        account_colours
+      end
+
+      def account_theme_css
+        AppearanceChoice.new(person: @account, account: nil, own_look: own_look?).theme_css unless @account.nil? || colours_choice.preference.owned_by?(@account)
+      end
+
+      def account_colours
         return default_colours if @account.nil? || colours_choice.preference.owned_by?(@account)
 
         AppearanceChoice.new(person: @account, account: nil).colours

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

@@ -0,0 +1,109 @@
+# frozen_string_literal: true
+
+module KeystoneUi
+  module Preferences
+    class CheckedTheme
+      NUMBER = '-?(?:\d+(?:\.\d+)?|\.\d+)%?'
+      GAP = '(?:\s*,\s*|\s+)'
+      HEX = /\A#(?:\h{3}|\h{4}|\h{6}|\h{8})\z/
+      FUNCTION = /\A(?:rgba?|hsla?|oklch)\(\s*#{NUMBER}#{GAP}#{NUMBER}#{GAP}#{NUMBER}(?:\s*[\/,]\s*#{NUMBER})?\s*\)\z/
+      COLOUR = Regexp.union(HEX, FUNCTION)
+      UNSIGNED_LENGTH = '(?:0|(?:\d+(?:\.\d+)?|\.\d+)(?:px|rem|em))'
+      LENGTH = /\A#{UNSIGNED_LENGTH}\z/
+      SIGNED_LENGTH = /\A-?#{UNSIGNED_LENGTH}\z/
+      FONT_NAME = "[A-Za-z0-9-]+(?: [A-Za-z0-9-]+)*"
+      FONT = "(?:#{FONT_NAME}|\"#{FONT_NAME}\"|'#{FONT_NAME}')"
+      FONT_LIST = /\A#{FONT}(?:\s*,\s*#{FONT})*\z/
+      WEIGHT = /\A[1-9]00\z/
+      OPACITY = /\A(?:0(?:\.\d+)?|\.\d+|1(?:\.0+)?)\z/
+      PATTERNS = {
+        colour: COLOUR, shadow_colour: COLOUR, length: LENGTH, signed_length: SIGNED_LENGTH, opacity: OPACITY, weight: WEIGHT,
+        letter_spacing: Regexp.union(SIGNED_LENGTH, /\Anormal\z/), font_list: FONT_LIST
+      }.freeze
+      REASONS = {
+        shadow_colour: "is not hex, rgb(), hsl() or oklch() written with plain numbers",
+        length: "is not a number followed by px, rem or em, or zero",
+        signed_length: "is not a number followed by px, rem or em, or zero",
+        opacity: "is not a number from 0 to 1",
+        weight: "is not a font weight from 100 to 900 in hundreds",
+        letter_spacing: "is not normal or a number followed by px, rem or em, or zero",
+        font_list: "is not a list of font names made of letters, digits, spaces and hyphens"
+      }.freeze
+      SIDES = %w[light dark].freeze
+      SYSTEM_FONTS = [
+        "system-ui", "ui-sans-serif", "ui-serif", "ui-monospace", "ui-rounded", "sans-serif", "serif", "monospace", "cursive",
+        "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica", "Helvetica Neue", "Arial", "Georgia",
+        "Times New Roman", "Menlo", "Monaco", "Consolas", "Courier New", "SFMono-Regular"
+      ].freeze
+
+      def initialize(values)
+        @values = values
+      end
+
+      def refusal
+        name, side, value = failure
+        return unless name
+        return Refusal.new("The --#{name} value names no font this app offers, so it was not saved.") if matches?(name, value)
+
+        reason(kind_of(name), name, side)
+      end
+
+      def failing_setting
+        failure&.first
+      end
+
+      def value
+        { "theme" => kept.to_h { |name, sides| [ name, kind_of(name) == :font_list ? sides.transform_values { |list| offered_fonts(list).map { |font| written_font(font) }.join(", ") } : sides ] } }
+      end
+
+      private
+
+      def failure
+        kept.each do |name, sides|
+          sides.each do |side, value|
+            return [ name, side, value ] unless matches?(name, value) && names_offered_font?(name, value)
+          end
+        end
+        nil
+      end
+
+      def matches?(name, value)
+        value.to_s.match?(PATTERNS.fetch(kind_of(name)))
+      end
+
+      def names_offered_font?(name, value)
+        kind_of(name) != :font_list || offered_fonts(value).any?
+      end
+
+      def sides_of(name)
+        kind_of(name) == :colour ? SIDES : SIDES.first(1)
+      end
+
+      def kind_of(name)
+        ThemeRoles::ROLES.fetch(name)[:kind]
+      end
+
+      def offered_fonts(list)
+        offered = (KeystoneUi::Preferences.configuration.theme_fonts + SYSTEM_FONTS).map(&:downcase)
+        list.split(",").map { |font| font.strip.delete("\"'") }.select { |font| offered.include?(font.downcase) }
+      end
+
+      def written_font(font)
+        font.include?(" ") ? "\"#{font}\"" : font
+      end
+
+      def reason(kind, name, side)
+        return Refusal.new("The #{side} --#{name} colour is not hex, rgb(), hsl() or oklch() written with plain numbers, so it was not saved.") if kind == :colour
+
+        Refusal.new("The --#{name} value #{REASONS.fetch(kind)}, so it was not saved.")
+      end
+
+      def kept
+        @kept ||= ThemeRoles.names.each_with_object({}) do |name, kept|
+          sides = @values.to_h[name].to_h.slice(*sides_of(name))
+          kept[name] = sides if sides.any?
+        end
+      end
+    end
+  end
+end

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

@@ -8,12 +8,13 @@ module KeystoneUi
       end
 
       def refusal
-        return Refusal.new("Choose Default, one of the colour templates or Custom.") unless template_offered?
+        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] }
@@ -22,7 +23,11 @@ module KeystoneUi
       private
 
       def template_offered?
-        @values[:template_name].blank? || [ AppearanceChoice::DEFAULT_TEMPLATE, *KeystoneUi::Looks::Templates.names.map(&:to_s) ].include?(@values[:template_name])
+        @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?

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

@@ -15,7 +15,7 @@ module KeystoneUi
 
         return Refusal.new("This app does not let accounts choose their colours.") if colours_sent? && !KeystoneUi::Preferences.configuration.account_colors
 
-        chosen = ChosenColours.new(@values) if colours_sent?
+        chosen = chosen_colours
         return chosen.refusal if chosen&.refusal
 
         keep("colours", (chosen ? { value: chosen.value } : {}).merge(switch(:members_choose)))
@@ -26,7 +26,17 @@ module KeystoneUi
       private
 
       def colours_sent?
-        @values.key?(:template_name)
+        @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?

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

@@ -12,9 +12,10 @@ module KeystoneUi
       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)
+        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)
@@ -38,6 +39,17 @@ module KeystoneUi
         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

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

@@ -14,7 +14,7 @@
   <%= 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 } %>
+        <%= 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 %>

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

@@ -16,7 +16,7 @@
   <%= 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 } %>
+        <%= 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? %>

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

@@ -3,6 +3,7 @@
   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 %>
@@ -30,10 +31,31 @@
         <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?,
+      selected: saved["template_name"].blank? && !saved.key?("theme") && !saved.key?("preset_name"),
       input_data: {
         "keystone-ui--preferences--theme-settings-target": "customRadio"
       },
@@ -45,6 +67,13 @@
       <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 %>

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 %>

data/lib/keystone_ui/preferences/colors_check.rb

@@ -6,8 +6,9 @@ module KeystoneUi
       class Error < StandardError; end
 
       MESSAGE = "keystone_ui-preferences and keystone_ui-colors both save colours, modes and looks, so the app cannot load both. " \
-        "Run bin/rails generate keystone_ui:preferences:update first, so the migration copying keystone_ui-colors' saved choices is in db/migrate, " \
-        "then remove keystone_ui-colors from the Gemfile and run bin/rails db:migrate."
+        "Remove keystone_ui-colors from the Gemfile and change every KeystoneUi::Colors name the app uses first, " \
+        "then run bin/rails generate keystone_ui:preferences:update, so the migration copying keystone_ui-colors' saved choices is in db/migrate, " \
+        "and then run bin/rails db:migrate."
 
       def initialize(colors_loaded:)
         @colors_loaded = colors_loaded

data/lib/keystone_ui/preferences/configuration.rb

@@ -3,7 +3,7 @@
 module KeystoneUi
   module Preferences
     class Configuration
-      attr_accessor :current_owner_method, :authentication_method, :current_account_method, :max_value_bytes, :default_accent, :default_surface, :default_background, :default_text, :default_mode, :user_looks, :app_look_label, :account_colors, :account_looks
+      attr_accessor :current_owner_method, :authentication_method, :current_account_method, :max_value_bytes, :default_accent, :default_surface, :default_background, :default_text, :default_mode, :user_looks, :app_look_label, :account_colors, :account_looks, :theme_fonts
 
       def initialize
         @current_owner_method = :current_user
@@ -19,6 +19,7 @@ module KeystoneUi
         @app_look_label = "Classic"
         @account_colors = true
         @account_looks = true
+        @theme_fonts = []
       end
 
       def name_component(component_key, name)

data/lib/keystone_ui/preferences/version.rb

@@ -2,6 +2,6 @@
 
 module KeystoneUi
   module Preferences
-    VERSION = "0.7.0"
+    VERSION = "0.8.0"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: keystone_ui-preferences
 version: !ruby/object:Gem::Version
-  version: 0.7.0
+  version: 0.8.0
 platform: ruby
 authors:
 - Tyler Schneider
@@ -15,28 +15,42 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 0.41.0
+        version: 0.43.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 0.41.0
+        version: 0.43.0
 - !ruby/object:Gem::Dependency
   name: keystone_ui-looks
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 0.3.0
+        version: 0.4.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 0.3.0
+        version: 0.4.0
+- !ruby/object:Gem::Dependency
+  name: keystone_ui-styles
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.18.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.18.0
 - !ruby/object:Gem::Dependency
   name: railties
   requirement: !ruby/object:Gem::Requirement
@@ -96,18 +110,22 @@ files:
 - app/javascript/keystone_ui/preferences/theme_settings_controller.js
 - app/models/keystone_ui/preferences/appearance_choice.rb
 - app/models/keystone_ui/preferences/application_record.rb
+- app/models/keystone_ui/preferences/checked_theme.rb
 - app/models/keystone_ui/preferences/chosen_colours.rb
 - app/models/keystone_ui/preferences/component_preference.rb
 - app/models/keystone_ui/preferences/kept.rb
 - app/models/keystone_ui/preferences/layout_choice.rb
 - app/models/keystone_ui/preferences/navigation_arrangement.rb
-- app/models/keystone_ui/preferences/palette_css.rb
 - app/models/keystone_ui/preferences/pick_account_appearance.rb
 - app/models/keystone_ui/preferences/pick_account_layouts.rb
 - app/models/keystone_ui/preferences/pick_appearance.rb
 - app/models/keystone_ui/preferences/pick_navigation_order.rb
 - app/models/keystone_ui/preferences/pick_navigation_placement.rb
 - app/models/keystone_ui/preferences/refusal.rb
+- app/models/keystone_ui/preferences/sent_theme.rb
+- app/models/keystone_ui/preferences/theme_css.rb
+- app/models/keystone_ui/preferences/theme_reader.rb
+- app/models/keystone_ui/preferences/theme_roles.rb
 - app/views/keystone_ui/preferences/settings/_account_appearance.html.erb
 - app/views/keystone_ui/preferences/settings/_account_layouts.html.erb
 - app/views/keystone_ui/preferences/settings/_appearance.html.erb
@@ -115,6 +133,7 @@ files:
 - app/views/keystone_ui/preferences/settings/_look_choices.html.erb
 - app/views/keystone_ui/preferences/settings/_navigation_order.html.erb
 - app/views/keystone_ui/preferences/settings/_navigation_placement.html.erb
+- app/views/keystone_ui/preferences/settings/_theme_settings.html.erb
 - config/routes.rb
 - lib/generators/keystone_ui/preferences/install/install_generator.rb
 - lib/generators/keystone_ui/preferences/install/templates/create_keystone_ui_preferences_component_preferences.rb.erb

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

@@ -1,32 +0,0 @@
-# frozen_string_literal: true
-
-module KeystoneUi
-  module Preferences
-    class PaletteCss
-      def initialize(accent:, surface:, background:, text:)
-        @accent = accent
-        @surface = surface
-        @background = background
-        @text = text
-      end
-
-      def to_s
-        lines = shade_lines("accent", shades(@accent) { KeystoneUi::Looks::Palettes.accent(@accent) }) + shade_lines("surface", shades(@surface) { KeystoneUi::Looks::Palettes.surface(@surface) })
-        lines << "  --color-custom-background: #{@background};" << "  --color-custom-text: #{@text};"
-        ":root {\n#{lines.join("\n")}\n}"
-      end
-
-      private
-
-      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| "  --color-#{name}-#{shade}: #{hex};" }
-      end
-    end
-  end
-end