keystone_ui 0.51.0 → 0.52.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9019c6a86ac84b02bafebdd7accad68930d008d2cfc6a209049943357b8c3b09
-  data.tar.gz: 9798d91d98fe27f0a636e714bb0654497cf84d34426277bd967f41c5341cbaed
+  metadata.gz: 0f67e6bd82fbcc8daa1e455f60140395bb002aee59ba2f055191130827707b0a
+  data.tar.gz: 6335b10c5578ce27579cab7e1da5a2f05e4eeca7c99d5e92173d7278a25efd9c
 SHA512:
-  metadata.gz: bbbfb7e25ce8ef96adcf7f1fa7c68b9e8f629684f20efeb4bbe94315aade2810a7dd2bf3472247ab6ac8aca669b8b823a136ffa621391f89ec4d591de7444093
-  data.tar.gz: 98676baf7a6028dc0e03f3f457c42856bd9690a0e8ec29c559bc247a02111d10ab2b84a8e840aca56571b2046fee2980bab5b71d62a6a1fe3ac23174d811d543
+  metadata.gz: b49bb408da1f06272f711cbe7f077f8b7b438f89ae13c91d18309e3afda1d81689667ac45ff6bccb5fb94fae2abc02457caae6fc6890278635b2aae641b872ef
+  data.tar.gz: 2e7fd2e99b1368b703f3f29ee435ad4a2695856fd2301e182d5022d84ea29122d448712c940f77e9a0ab43310d436c37e80c4298001536d137a2b68cbd24db7c

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

@@ -4,21 +4,18 @@ const COOKIE = "keystone_theme"
 const ONE_YEAR = 60 * 60 * 24 * 365
 
 export default class extends Controller {
-  choose({ params: { mode } }) {
+  toggle() {
     const page = this.element.ownerDocument
-    this.#showPressed(mode)
+    const mode = this.#shownMode(page) === "dark" ? "light" : "dark"
 
-    if (mode === "system") {
-      delete page.documentElement.dataset.theme
-    } else {
-      page.documentElement.dataset.theme = mode
-    }
+    page.documentElement.dataset.theme = mode
     page.cookie = `${COOKIE}=${mode}; path=/; max-age=${ONE_YEAR}; samesite=lax`
   }
 
-  #showPressed(mode) {
-    this.element.querySelectorAll("[data-theme-toggle-mode-param]").forEach((option) => {
-      option.setAttribute("aria-pressed", String(option.dataset.themeToggleModeParam === mode))
-    })
+  #shownMode(page) {
+    const marked = page.documentElement.dataset.theme
+    if (marked) return marked
+
+    return page.defaultView.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
   }
 }

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

@@ -1,10 +1,13 @@
-<div class="<%= GROUP_CLASSES %>" role="group" aria-label="Theme" data-controller="theme-toggle">
-  <% options.each do |label, mode| %>
-    <button
-      type="button"
-      class="<%= OPTION_CLASSES %>"
-      aria-pressed="<%= pressed?(mode) %>"
-      data-action="theme-toggle#choose"
-      data-theme-toggle-mode-param="<%= mode %>"><%= label %></button>
-  <% end %>
-</div>
+<button
+  type="button"
+  class="<%= BUTTON_CLASSES %>"
+  aria-label="Switch between light and dark"
+  data-controller="theme-toggle"
+  data-action="theme-toggle#toggle">
+  <svg data-icon="sun" class="<%= SUN_CLASSES %>" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
+  </svg>
+  <svg data-icon="moon" class="<%= MOON_CLASSES %>" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
+  </svg>
+</button>

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

@@ -3,21 +3,9 @@
 module Keystone
   module Ui
     class ThemeToggleComponent < ViewComponent::Base
-      OPTIONS = [ [ "Light", "light" ], [ "Dark", "dark" ], [ "System", "system" ] ].freeze
-      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
-      end
-
-      def options
-        OPTIONS
-      end
-
-      def pressed?(mode)
-        mode == KeystoneUi::ThemeChoice.new(@current).mode
-      end
+      BUTTON_CLASSES = "ks-theme-toggle ks-button ks-button-sm ks-button-secondary"
+      SUN_CLASSES = "size-5 dark:hidden"
+      MOON_CLASSES = "size-5 hidden dark:block"
     end
   end
 end

data/app/helpers/keystone_ui_helper.rb

@@ -46,7 +46,7 @@ module KeystoneUiHelper
   end
 
   def ui_theme_toggle
-    render Keystone::Ui::ThemeToggleComponent.new(current: keystone_theme_choice.mode)
+    render Keystone::Ui::ThemeToggleComponent.new
   end
 
   def keystone_theme_attributes

data/lib/keystone_ui/version.rb

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

metadata

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