kiso 0.4.0.pre → 0.4.1.pre

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ce3df9a9c977207d60d0253493414495486682817829e7afb9c3ea4f856756b2
-  data.tar.gz: ea280bd1479c2bfe90a8fdd3fe597efe1a88c427031f096b24536a02c3558899
+  metadata.gz: 2746806e86680de2110a413ce1e6f29b0cc31a080bd1a41de7b5ac07902833cd
+  data.tar.gz: e4bd2a60cf877c765c15b57de4d2743ca4de925a65bd7646ef7783b39d32fbb9
 SHA512:
-  metadata.gz: 34279aa5743e7baf516464c98ab5984de8edace8789646cb2277270ba5320f8b5763849141a4c2ddeee85f42d23c21638bcc4d11dcb0dd0f34792b09c8efa217
-  data.tar.gz: 8da0d3477b660de7fc174da7a7a1608e39783bd763b428f570beaf4385b301fa5eb9105384a87ff61791d09bab655ad3882c148f39d93f6c8402149c0fbfbac8
+  metadata.gz: 28c754958c46ffee194a411b0fe995c99fb8e9fe7bce78a30113063311d690d591f4ac6d2ef3855384fbc71e46562477de4981173eb938cc5318c5339c72253e
+  data.tar.gz: fab0ce827f49744c698ff9522aa68dcca1d64c73ae1ba9a453297d2fbb3ca5f65fa9d06a15830cc6e5f4c1e1b301b8ecdb0aead95ed368423f7f728aa3058cf2

data/CHANGELOG.md

@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.4.1.pre] - 2026-03-08
+
+### Added
+
+- `center:` variant on App layout component — `kui(:app, center: true)` applies full-viewport centering for login pages and similar single-focus layouts
+- `kui_tag` / `appui_tag` helpers — collapse the common `content_tag` + `kiso_prepare_options` + theme rendering boilerplate into a single call; component generator templates now use `appui_tag` by default
+- Shade scale auto-wiring — host apps defining `--color-primary-50` through `--color-primary-950` in their Tailwind `@theme` block now automatically feed into Kiso's semantic color tokens (shade 500 for light mode, 400 for dark mode, matching Nuxt UI conventions)
+
+### Fixed
+
+- Palette CSS files are now importable in host apps — a `kiso:palettes` rake task generates CSS stubs so `@import "../builds/tailwind/kiso/palettes/blue.css"` resolves correctly
+
 ## [0.4.0.pre] - 2026-03-08
 
 ### Added
@@ -100,7 +112,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Lookbook component previews
 - Bridgetown documentation site
 
-[Unreleased]: https://github.com/steveclarke/kiso/compare/v0.4.0.pre...HEAD
+[Unreleased]: https://github.com/steveclarke/kiso/compare/v0.4.1.pre...HEAD
+[0.4.1.pre]: https://github.com/steveclarke/kiso/releases/tag/v0.4.1.pre
 [0.4.0.pre]: https://github.com/steveclarke/kiso/releases/tag/v0.4.0.pre
 [0.3.0.pre]: https://github.com/steveclarke/kiso/releases/tag/v0.3.0.pre
 [0.2.2.pre]: https://github.com/steveclarke/kiso/releases/tag/v0.2.2.pre

data/app/assets/tailwind/kiso/engine.css

@@ -51,29 +51,40 @@
    Purpose-named tokens that flip in dark mode. Components use bg-primary,
    text-foreground, etc. — never raw palette shades or dark: prefixes.
 
-   Override any token in your app's CSS to retheme:
-     @theme { --color-primary: var(--color-violet-600); }
+   Two ways to customize brand colors:
+
+   1. Define a shade scale (Tailwind-native):
+        @theme {
+          --color-primary-50:  oklch(...);
+          --color-primary-500: oklch(...);
+          --color-primary-950: oklch(...);
+        }
+      Kiso auto-wires: shade 500 for light mode, shade 400 for dark mode,
+      shade 50 for foreground (light), shade 950 for foreground (dark).
+
+   2. Override the semantic token directly:
+        @theme { --color-primary: oklch(0.55 0.10 237); }
 */
 
 @theme {
-  /* Brand / action colors */
-  --color-primary: var(--color-rose-500);
-  --color-primary-foreground: white;
+  /* Brand / action colors — auto-wire from shade scale, fall back to defaults */
+  --color-primary: var(--color-primary-500, var(--color-rose-500));
+  --color-primary-foreground: var(--color-primary-50, white);
 
-  --color-secondary: var(--color-teal-600);
-  --color-secondary-foreground: white;
+  --color-secondary: var(--color-secondary-500, var(--color-teal-600));
+  --color-secondary-foreground: var(--color-secondary-50, white);
 
-  --color-success: var(--color-green-600);
-  --color-success-foreground: white;
+  --color-success: var(--color-success-500, var(--color-green-600));
+  --color-success-foreground: var(--color-success-50, white);
 
-  --color-info: var(--color-sky-600);
-  --color-info-foreground: white;
+  --color-info: var(--color-info-500, var(--color-sky-600));
+  --color-info-foreground: var(--color-info-50, white);
 
-  --color-warning: var(--color-amber-500);
-  --color-warning-foreground: var(--color-amber-950);
+  --color-warning: var(--color-warning-500, var(--color-amber-500));
+  --color-warning-foreground: var(--color-warning-950, var(--color-amber-950));
 
-  --color-error: var(--color-red-600);
-  --color-error-foreground: white;
+  --color-error: var(--color-error-500, var(--color-red-600));
+  --color-error-foreground: var(--color-error-50, white);
 
   /* Surface tokens */
   --color-background: white;
@@ -100,23 +111,23 @@
    Redefine tokens under .dark — components never use dark: prefixes. */
 
 .dark {
-  --color-primary: var(--color-rose-400);
-  --color-primary-foreground: var(--color-zinc-950);
+  --color-primary: var(--color-primary-400, var(--color-rose-400));
+  --color-primary-foreground: var(--color-primary-950, var(--color-zinc-950));
 
-  --color-secondary: var(--color-teal-400);
-  --color-secondary-foreground: var(--color-zinc-950);
+  --color-secondary: var(--color-secondary-400, var(--color-teal-400));
+  --color-secondary-foreground: var(--color-secondary-950, var(--color-zinc-950));
 
-  --color-success: var(--color-green-400);
-  --color-success-foreground: var(--color-zinc-950);
+  --color-success: var(--color-success-400, var(--color-green-400));
+  --color-success-foreground: var(--color-success-950, var(--color-zinc-950));
 
-  --color-info: var(--color-sky-400);
-  --color-info-foreground: var(--color-zinc-950);
+  --color-info: var(--color-info-400, var(--color-sky-400));
+  --color-info-foreground: var(--color-info-950, var(--color-zinc-950));
 
-  --color-warning: var(--color-amber-400);
-  --color-warning-foreground: var(--color-zinc-950);
+  --color-warning: var(--color-warning-400, var(--color-amber-400));
+  --color-warning-foreground: var(--color-warning-950, var(--color-zinc-950));
 
-  --color-error: var(--color-red-400);
-  --color-error-foreground: var(--color-zinc-950);
+  --color-error: var(--color-error-400, var(--color-red-400));
+  --color-error-foreground: var(--color-error-950, var(--color-zinc-950));
 
   --color-background: var(--color-zinc-950);
   --color-foreground: var(--color-zinc-50);

data/app/assets/tailwind/kiso/palettes/blue.css

@@ -3,7 +3,7 @@
    Based on shadcn/ui's Blue theme with OKLCH color values.
 
    Usage:
-     1. Import in your CSS: @import "kiso/palettes/blue.css";
+     1. Import in your CSS: @import "../builds/tailwind/kiso/palettes/blue.css";
      2. Add to your HTML: <html data-palette="blue"> or <body data-palette="blue">
 */
 

data/app/assets/tailwind/kiso/palettes/green.css

@@ -3,7 +3,7 @@
    Based on shadcn/ui's Green theme with OKLCH color values.
 
    Usage:
-     1. Import in your CSS: @import "kiso/palettes/green.css";
+     1. Import in your CSS: @import "../builds/tailwind/kiso/palettes/green.css";
      2. Add to your HTML: <html data-palette="green"> or <body data-palette="green">
 */
 

data/app/assets/tailwind/kiso/palettes/orange.css

@@ -3,7 +3,7 @@
    Based on shadcn/ui's Orange theme with OKLCH color values.
 
    Usage:
-     1. Import in your CSS: @import "kiso/palettes/orange.css";
+     1. Import in your CSS: @import "../builds/tailwind/kiso/palettes/orange.css";
      2. Add to your HTML: <html data-palette="orange"> or <body data-palette="orange">
 */
 

data/app/assets/tailwind/kiso/palettes/violet.css

@@ -3,7 +3,7 @@
    Based on shadcn/ui's Violet theme with OKLCH color values.
 
    Usage:
-     1. Import in your CSS: @import "kiso/palettes/violet.css";
+     1. Import in your CSS: @import "../builds/tailwind/kiso/palettes/violet.css";
      2. Add to your HTML: <html data-palette="violet"> or <body data-palette="violet">
 */
 

data/app/assets/tailwind/kiso/palettes/zinc.css

@@ -3,7 +3,7 @@
    Based on shadcn/ui's Zinc theme with OKLCH color values.
 
    Usage:
-     1. Import in your CSS: @import "kiso/palettes/zinc.css";
+     1. Import in your CSS: @import "../builds/tailwind/kiso/palettes/zinc.css";
      2. Add to your HTML: <html data-palette="zinc"> or <body data-palette="zinc">
 */
 

data/app/helpers/kiso/app_component_helper.rb

@@ -49,5 +49,15 @@ module Kiso
         **kwargs, &block
       )
     end
+
+    # Renders a themed HTML element for host app components.
+    #
+    # Identical to {ComponentHelper#kui_tag} — provided as a naming
+    # convenience so host app partials use +appui_tag+ alongside +appui()+.
+    #
+    # @see ComponentHelper#kui_tag
+    def appui_tag(...)
+      kui_tag(...)
+    end
   end
 end

data/app/helpers/kiso/component_helper.rb

@@ -70,6 +70,36 @@ module Kiso
       (component_options.delete(:data) || {}).merge(slot: slot, **data_attrs)
     end
 
+    # Renders a themed HTML element with Kiso conventions.
+    #
+    # Collapses the common +content_tag+ + +kiso_prepare_options+ + theme
+    # rendering boilerplate into a single call. Use in component partials
+    # instead of manually wiring +content_tag+.
+    #
+    # @param tag [Symbol] HTML element name (e.g. +:div+, +:span+, +:button+)
+    # @param theme [ClassVariants::Instance] the theme module to render classes from
+    # @param slot [String] the +data-slot+ value (kebab-case)
+    # @param css_classes [String] caller's class overrides, merged via +tailwind_merge+
+    # @param variants [Hash] variant values forwarded to +theme.render+
+    #   (e.g. +{ size: :md, color: :primary }+)
+    # @param component_options [Hash] HTML attributes forwarded to +content_tag+
+    #   (e.g. +id:+, +aria:+). A +data:+ key is extracted and merged with slot.
+    # @yield optional block for element content
+    # @return [ActiveSupport::SafeBuffer] rendered HTML
+    #
+    # @example In a component partial
+    #   kui_tag :div, theme: Kiso::Themes::Badge, slot: "badge",
+    #       css_classes: css_classes, variants: { color: color, variant: variant },
+    #       **component_options do
+    #     yield
+    #   end
+    def kui_tag(tag, theme:, slot:, css_classes: "", variants: {}, **component_options, &block)
+      content_tag(tag,
+        class: theme.render(**variants, class: css_classes),
+        data: kiso_prepare_options(component_options, slot: slot),
+        **component_options, &block)
+    end
+
     private
 
     # Shared rendering pipeline for both kui() and appui().

data/app/views/kiso/components/_app.html.erb

@@ -1,6 +1,6 @@
-<%# locals: (css_classes: "", **component_options) %>
+<%# locals: (center: false, css_classes: "", **component_options) %>
 <%= content_tag :div,
-    class: Kiso::Themes::App.render(class: css_classes),
+    class: Kiso::Themes::App.render(center: center, class: css_classes),
     data: kiso_prepare_options(component_options, slot: "app"),
     **component_options do %>
   <%= yield %>

data/lib/generators/kiso/component/templates/partial.html.erb.tt

@@ -1,7 +1,5 @@
 <%% # locals: (css_classes: "", **component_options) %>
-<%%= content_tag :div,
-    class: AppThemes::<%= has_namespace? ? "#{module_prefix}::" : "" %><%= class_name_without_namespace %>.render(class: css_classes),
-    data: kiso_prepare_options(component_options, slot: "<%= slot_name %>"),
-    **component_options do %>
+<%%= appui_tag :div, theme: AppThemes::<%= has_namespace? ? "#{module_prefix}::" : "" %><%= class_name_without_namespace %>, slot: "<%= slot_name %>",
+    css_classes: css_classes, **component_options do %>
   <%%= yield %>
 <%% end %>

data/lib/generators/kiso/component/templates/sub_part_partial.html.erb.tt

@@ -1,7 +1,5 @@
 <%% # locals: (css_classes: "", **component_options) %>
-<%%= content_tag :div,
-    class: AppThemes::<%= has_namespace? ? "#{module_prefix}::" : "" %><%= sub_part_class_name %>.render(class: css_classes),
-    data: kiso_prepare_options(component_options, slot: "<%= sub_part_slot_name %>"),
-    **component_options do %>
+<%%= appui_tag :div, theme: AppThemes::<%= has_namespace? ? "#{module_prefix}::" : "" %><%= sub_part_class_name %>, slot: "<%= sub_part_slot_name %>",
+    css_classes: css_classes, **component_options do %>
   <%%= yield %>
 <%% end %>

data/lib/kiso/engine.rb

@@ -10,6 +10,10 @@ module Kiso
   class Engine < ::Rails::Engine
     isolate_namespace Kiso
 
+    rake_tasks do
+      load Kiso::Engine.root.join("lib/tasks/kiso.rake")
+    end
+
     # Loads Kiso's locale files so host apps can override translations.
     initializer "kiso.i18n" do
       config.i18n.load_path += Dir[root.join("config/locales/**/*.yml")]

data/lib/kiso/themes/layout.rb

@@ -5,10 +5,19 @@ module Kiso
     #
     # @example
     #   App.render
+    #   App.render(center: true)
     #
-    # No variants — purely structural.
+    # Variants:
+    # - +center+ — centers content vertically and horizontally (e.g., login pages)
     App = ClassVariants.build(
-      base: "bg-background text-foreground antialiased"
+      base: "bg-background text-foreground antialiased",
+      variants: {
+        center: {
+          true => "min-h-screen flex items-center justify-center",
+          false => ""
+        }
+      },
+      defaults: {center: false}
     )
 
     # Content containment with consistent max-width and padding.

data/lib/kiso/version.rb

@@ -2,5 +2,5 @@
 
 module Kiso
   # @return [String] the current gem version
-  VERSION = "0.4.0.pre"
+  VERSION = "0.4.1.pre"
 end

data/lib/tasks/kiso.rake

@@ -0,0 +1,36 @@
+# Generates CSS stub files for Kiso's palette files in the host app.
+#
+# tailwindcss-rails creates a stub at app/assets/builds/tailwind/kiso.css
+# for engine.css, but it doesn't handle subdirectories. Palette files at
+# app/assets/tailwind/kiso/palettes/*.css inside the gem are invisible to
+# the host app's Tailwind CLI without stubs.
+#
+# This task creates matching stubs so host apps can import palettes with:
+#   @import "../builds/tailwind/kiso/palettes/blue.css";
+
+namespace :kiso do
+  desc "Generate CSS stubs for Kiso palette files"
+  task palettes: :environment do
+    palette_dir = Kiso::Engine.root.join("app/assets/tailwind/kiso/palettes")
+    next unless palette_dir.directory?
+
+    output_dir = Rails.root.join("app/assets/builds/tailwind/kiso/palettes")
+    FileUtils.mkdir_p(output_dir)
+
+    Dir[palette_dir.join("*.css")].each do |source|
+      name = File.basename(source)
+      stub_path = output_dir.join(name)
+      File.write(stub_path, <<~CSS)
+        /* DO NOT MODIFY THIS FILE, it was auto-generated by kiso */
+
+        @import "#{source}";
+      CSS
+    end
+  end
+end
+
+# Hook into tailwindcss-rails build pipeline so palette stubs are
+# generated before the Tailwind CLI runs.
+if Rake::Task.task_defined?("tailwindcss:engines")
+  Rake::Task["tailwindcss:engines"].enhance(["kiso:palettes"])
+end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: kiso
 version: !ruby/object:Gem::Version
-  version: 0.4.0.pre
+  version: 0.4.1.pre
 platform: ruby
 authors:
 - Steve Clarke
@@ -387,6 +387,7 @@ files:
 - lib/kiso/themes/toggle.rb
 - lib/kiso/themes/toggle_group.rb
 - lib/kiso/version.rb
+- lib/tasks/kiso.rake
 homepage: https://github.com/steveclarke/kiso
 licenses:
 - MIT