layered-ui-rails 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 66f25fc8de77c680a94870df09f140d2b8a1f771f471ea67c8681ff13778a18e
-  data.tar.gz: ed31e153c6db83a3c9ededf98d72b21d573a26ec5d50067ff5d6a6a378d5c74c
+  metadata.gz: '099ffddb556cf8f7763737d433421fe787fedc50889917d08d921966e1d183e9'
+  data.tar.gz: 066df3ddbff22c075f8b6169d63c43221be4a2dbda828bc9a3dbe0122f54444a
 SHA512:
-  metadata.gz: d966b18183ed83f167c188685428e1844ac8b2710ff69ddb641c9e507372163ed40a8b1a318a2714823f8f69b58aaa89e7f420125d6c67f84d9f889215570226
-  data.tar.gz: d5dbe151878a2f9e21306c9f2464f195ad5401f62c6438dcbe5ddab3a5f1d39a6f988f774371b0143f99cb0cc399ef1e9f1989a5becaca1479df7eaa520115a7
+  metadata.gz: 7fe8acf89093fcc834ac1e97a4a7fe61645a1086634984abf1866244aa4960e2f0b38f0e62031680f71520f18371b1118bdf1c40656c796c23b36cb326a2666b
+  data.tar.gz: 9d0e94c5c93f70d92442f2f0b12187e196676d7291a64f9996b35f5682773429d9d8b6e1bb4452eb64469e48ac127963ff543dabdab92ec6db00f27e5fd9cc3f

data/AGENTS.md

@@ -22,6 +22,12 @@ Guidance for AI agents working in this repository.
 
 ## Conventions
 
-- Document new styles in the dummy app. Use `l-ui` classes only there, no extra Tailwind.
+- Use "layered-ui-rails" not "Layered UI" when referring to the project
+- Use normal dashes '-' not long ones '—'
+- Locale: Favour en-GB (British English), unless terms are defined by technical standards (e.g. LICENSE, COLOR).
 - Titles: capitalise first word only (e.g. "This title")
-- WCAG 2.2 AA compliance. Importmap for JS (no bundler).
+- Document new styles in the dummy app
+- Use l-ui classes only in engine views, with no additional Tailwind utilities, as Tailwind classes referenced only inside the engine will not be generated by the host app’s build
+- Dummy app documentation pages may use additional Tailwind utilities, but should favour l-ui classes where possible
+- Retain WCAG 2.2 AA compliance
+- Importmap for JS (no bundler)

data/CHANGELOG.md

@@ -4,6 +4,26 @@ All notable changes to this project will be documented in this file. This projec
 
 ## [Unreleased]
 
+## [0.1.1] - 2026-02-17
+
+### Added
+
+- Accent color tokens (`--accent`, `--accent-foreground`) for easy brand color customisation - primary buttons, active tabs, and active navigation items all inherit from these two variables
+- `layered:ui:create_overrides` generator creates a color overrides file that is preserved across upgrades
+- Bundled Manrope and Inter fonts as self-hosted woff2 files, removing the dependency on Google Fonts CDN
+- CI workflow with GitHub Actions
+- Kamal deployment support for the dummy app
+
+### Changed
+
+- Active navigation items and tabs now use the accent color instead of the foreground color
+- Install generator now also creates the overrides file and imports it into `application.css`
+- Header icon and logo elements include `w-auto` to prevent layout shift
+
+### Removed
+
+- Google Fonts preconnect links from the application layout
+
 ## [0.1.0] - 2026-02-16
 
 Initial release.

data/README.md

@@ -1,8 +1,29 @@
 # layered-ui-rails
 
-Open source, minimalist, responsive, accessible UI system with light and dark theme support - and a touch of glass.
-
-An open source, Rails 8+ engine that provides WCAG 2.2 AA compliant design tokens, Tailwind CSS utilities, and Stimulus controllers for theme switching, mobile navigation, slide-out panels, modals, and tabs. Ships as pure frontend with no server-side dependencies beyond Rails and Tailwind CSS.
+[![CI](https://github.com/layered-ai-public/layered-ui-rails/actions/workflows/ci.yml/badge.svg)](https://github.com/layered-ai-public/layered-ui-rails/actions/workflows/ci.yml)
+[![WCAG 2.2 AA](https://img.shields.io/badge/WCAG_2.2-AA-green)](https://www.w3.org/WAI/WCAG22/quickref/)
+[![License: Apache 2.0](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
+
+An open source, Rails 8+ engine that provides WCAG 2.2 AA compliant design tokens, Tailwind CSS utilities, and Stimulus controllers for theme switching, mobile navigation, slide-out panels, modals, and tabs. Ships as pure frontend with no server-side dependencies beyond Rails and Tailwind CSS. See the [live demo](https://layered-ui-rails.layered.ai).
+
+<table align="center">
+  <tr>
+    <td align="center">
+      <img src="test/dummy/app/assets/images/light_desktop.webp" alt="Light theme (desktop)" height="300">
+      <img src="test/dummy/app/assets/images/light_mobile.webp" alt="Light theme (mobile)" height="300">
+    </td>
+    <td width="20"></td>
+    <td align="center">
+      <img src="test/dummy/app/assets/images/dark_desktop.webp" alt="Dark theme (desktop)" height="300">
+      <img src="test/dummy/app/assets/images/dark_mobile.webp" alt="Dark theme (mobile)" height="300">
+    </td>
+  </tr>
+  <tr>
+    <td align="center"><em>Light theme (desktop and mobile)</em></td>
+    <td></td>
+    <td align="center"><em>Dark theme (desktop and mobile)</em></td>
+  </tr>
+</table>
 
 ## Getting started
 
@@ -21,10 +42,6 @@ The install generator will:
 Then update your application layout to render the engine layout:
 
 ```erb
-<% content_for :l_ui_navigation_items do %>
-  <%= l_ui_navigation_item "Home", root_path %>
-<% end %>
-
 <%= render template: "layouts/layered_ui/application" %>
 ```
 
@@ -42,6 +59,8 @@ Then update your application layout to render the engine layout:
 - **WCAG 2.2 AA compliant** - skip links, focus indicators, ARIA attributes, and 4.5:1 contrast ratios
 - **Components** - buttons, forms, surfaces, tables, tabs, notices, badges, conversations, modals, and pagination
 - **Optional integrations** - Devise authentication and Pagy pagination with styled views
+- **Customisable branding** - Override the default logos and icons and colors
+- **Google Lighthouse** - `layered-ui-rails` scores a [perfect 100](test/dummy/app/assets/images/lighthouse.webp) across all four Google Lighthouse categories - performance, accessibility, best practices, and SEO
 
 ## Documentation
 
@@ -58,6 +77,18 @@ cd test/dummy && bin/rails db:setup && bin/dev
 
 The dummy app serves as both a living style guide and a test harness, with interactive examples and code snippets for every component.
 
+### Deploying the dummy app
+
+The dummy app can be deployed with [Kamal](https://kamal-deploy.org). Set the required environment variables and deploy from `test/dummy`:
+
+```bash
+cd test/dummy
+export KAMAL_DEPLOY_IP=<server-ip>
+export KAMAL_DEPLOY_DOMAIN=<domain>
+export KAMAL_SSH_KEY=<path-to-ssh-key>
+kamal deploy
+```
+
 ## Contributing
 
 This project is still in its early days. We welcome issues, feedback, and ideas - they genuinely help shape the direction of the project. That said, we're holding off on accepting pull requests until after the 1.0 release so we can stay focused on getting the core foundations right. Once we're there, we'd love to open things up to broader contributions. Thanks for your patience and interest!

data/app/assets/tailwind/layered/ui/styles.css

@@ -12,14 +12,32 @@
  * This structure improves readability, maintainability, and makes diffs easier to review.
  */
 
+/* Fonts */
+
+@font-face {
+  font-family: 'Manrope';
+  src: url('layered_ui/manrope.woff2') format('woff2');
+  font-weight: 300 700;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('layered_ui/inter.woff2') format('woff2');
+  font-weight: 300 700;
+  font-display: swap;
+}
+
 /* Variants */
 
 @variant dark (&:where(.dark, .dark *));
 
-/* Colours */
+/* Colors */
 
 @layer base {
   :root {
+    --accent: 0 0% 9%;
+    --accent-foreground: 0 0% 100%;
     --background: 0 0% 100%;
     --foreground: 0 0% 13%;
     --foreground-muted: 0 0% 29%;
@@ -27,8 +45,8 @@
     --ring: 0 0% 13%;
     --surface: 0 0% 96%;
     --surface-active: 0 0% 91%;
-    --button-primary-bg: 0 0% 9%;
-    --button-primary-text: 0 0% 100%;
+    --button-primary-bg: var(--accent);
+    --button-primary-text: var(--accent-foreground);
     --danger: 0 72% 38%;
     --danger-light: 0 100% 97%;
     --danger-text: 0 72% 35%;
@@ -43,6 +61,8 @@
   }
 
   .dark {
+    --accent: 0 0% 100%;
+    --accent-foreground: 0 0% 9%;
     --background: 0 0% 0%;
     --foreground: 0 0% 89%;
     --foreground-muted: 0 0% 71%;
@@ -50,8 +70,8 @@
     --ring: 0 0% 89%;
     --surface: 0 0% 8%;
     --surface-active: 0 0% 16%;
-    --button-primary-bg: 0 0% 100%;
-    --button-primary-text: 0 0% 9%;
+    --button-primary-bg: var(--accent);
+    --button-primary-text: var(--accent-foreground);
     --danger: 0 85% 60%;
     --danger-light: 0 93% 15%;
     --danger-text: 0 85% 64%;
@@ -114,6 +134,8 @@
 @theme {
   --font-manrope: 'Manrope', ui-sans-serif, system-ui, sans-serif;
   --font-inter: 'Inter', ui-sans-serif, system-ui, sans-serif;
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
   --color-background: hsl(var(--background));
   --color-foreground: hsl(var(--foreground));
   --color-foreground-muted: hsl(var(--foreground-muted));
@@ -293,7 +315,7 @@
 }
 
 .l-ui-header__icon {
-  @apply h-5.5;
+  @apply h-5.5 w-auto;
 }
 
 .l-ui-header__icon--light {
@@ -313,7 +335,7 @@
 }
 
 .l-ui-header__logo {
-  @apply h-5.5;
+  @apply h-5.5 w-auto;
 }
 
 .l-ui-header__logo--light {
@@ -422,7 +444,7 @@
 .l-ui-navigation__item--active {
   @apply navigation__item
          font-bold
-         text-foreground;
+         text-accent;
 
   &::after {
     content: "▸";
@@ -446,7 +468,7 @@
   .l-ui-navigation__item--active {
     @apply bg-transparent
            font-bold
-           text-foreground;
+           text-accent;
 
     &::after {
       content: "▸";
@@ -790,8 +812,8 @@
 
 .l-ui-tabs__tab--active {
   @apply tabs__tab
-         text-foreground
-         border-foreground;
+         text-accent
+         border-accent;
 }
 
 .l-ui-tabs__panel {

data/app/views/layouts/layered_ui/application.html.erb

@@ -18,10 +18,6 @@
     <link rel="icon" href="<%= asset_path('layered_ui/icon_dark.svg') %>" media="(prefers-color-scheme: dark)">
     <link rel="apple-touch-icon" href="<%= asset_path('layered_ui/apple_touch_icon.png') %>">
 
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-
     <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
     <%= javascript_importmap_tags %>
   </head>

data/lib/generators/layered/ui/copy_assets_generator.rb

@@ -2,7 +2,7 @@ module Layered
   module Ui
     module Generators
       class CopyAssetsGenerator < Rails::Generators::Base
-        desc "Copy layered-ui CSS assets into the host application"
+        desc "Copy layered-ui-rails CSS assets into the host application"
 
         def self.source_root
           Layered::Ui::Engine.root

data/lib/generators/layered/ui/create_overrides_generator.rb

@@ -0,0 +1,106 @@
+module Layered
+  module Ui
+    module Generators
+      class CreateOverridesGenerator < Rails::Generators::Base
+        desc "Create a layered-ui-rails color overrides file in the host application"
+
+        OVERRIDES_PATH = "app/assets/tailwind/layered_ui_overrides.css"
+
+        def create_overrides_file
+          if File.exist?(OVERRIDES_PATH)
+            say "Overrides file already exists at #{OVERRIDES_PATH}, skipping", :yellow
+            return
+          end
+
+          create_file OVERRIDES_PATH, overrides_content
+        end
+
+        private
+
+        def overrides_content
+          <<~CSS
+            /*
+             * layered-ui-rails color overrides
+             *
+             * Uncomment and edit any variable below to customise the UI.
+             * This file is NOT overwritten by the install generator, so your
+             * changes are preserved when you upgrade layered-ui-rails.
+             *
+             * Values are HSL channels: <hue> <saturation>% <lightness>%
+             * Example:  --accent: 220 80% 55%;
+             */
+
+            /* ----------------------------------------------------------------
+             * Tier 1 - Accent color
+             *
+             * Set a single brand color. Primary buttons, active tabs, and
+             * active navigation items all inherit from these two variables.
+             * ---------------------------------------------------------------- */
+
+            :root {
+              /* --accent: 0 0% 9%; */
+              /* --accent-foreground: 0 0% 100%; */
+            }
+
+            .dark {
+              /* --accent: 0 0% 100%; */
+              /* --accent-foreground: 0 0% 9%; */
+            }
+
+            /* ----------------------------------------------------------------
+             * Tier 2 - Full color overrides
+             *
+             * Override any individual token. Uncomment only the ones you need.
+             * ---------------------------------------------------------------- */
+
+            /*
+            :root {
+              --background: 0 0% 100%;
+              --foreground: 0 0% 13%;
+              --foreground-muted: 0 0% 29%;
+              --border: 0 0% 91%;
+              --ring: 0 0% 13%;
+              --surface: 0 0% 96%;
+              --surface-active: 0 0% 91%;
+              --button-primary-bg: var(--accent);
+              --button-primary-text: var(--accent-foreground);
+              --danger: 0 72% 38%;
+              --danger-light: 0 100% 97%;
+              --danger-text: 0 72% 35%;
+              --success-bg: 142 76% 65%;
+              --success-text: 142 76% 13%;
+              --warning-bg: 48 96% 65%;
+              --warning-text: 48 96% 15%;
+              --error-bg: 0 84% 75%;
+              --error-text: 0 93% 12%;
+              --backdrop: 0 0% 0%;
+            }
+
+            .dark {
+              --background: 0 0% 0%;
+              --foreground: 0 0% 89%;
+              --foreground-muted: 0 0% 71%;
+              --border: 0 0% 16%;
+              --ring: 0 0% 89%;
+              --surface: 0 0% 8%;
+              --surface-active: 0 0% 16%;
+              --button-primary-bg: var(--accent);
+              --button-primary-text: var(--accent-foreground);
+              --danger: 0 85% 60%;
+              --danger-light: 0 93% 15%;
+              --danger-text: 0 85% 64%;
+              --success-bg: 142 76% 15%;
+              --success-text: 142 76% 80%;
+              --warning-bg: 48 96% 15%;
+              --warning-text: 48 96% 80%;
+              --error-bg: 0 93% 12%;
+              --error-text: 0 84% 75%;
+              --backdrop: 0 0% 0%;
+            }
+            */
+          CSS
+        end
+      end
+    end
+  end
+end

data/lib/generators/layered/ui/import_css_generator.rb

@@ -2,7 +2,7 @@ module Layered
   module Ui
     module Generators
       class ImportCssGenerator < Rails::Generators::Base
-        desc "Add layered-ui CSS import to the host application"
+        desc "Add layered-ui-rails CSS import to the host application"
 
         def add_css_import
           application_css = "app/assets/tailwind/application.css"
@@ -11,16 +11,24 @@ module Layered
 
           content = File.read(application_css)
           import_line = '@import "./layered_ui";'
+          overrides_line = '@import "./layered_ui_overrides";'
 
-          return if content.include?(import_line)
+          unless content.include?(import_line)
+            if content.include?('@import "tailwindcss"')
+              inject_into_file application_css, "\n#{import_line}", after: '@import "tailwindcss";'
+              say "Added import to #{application_css}", :green
+            else
+              append_to_file application_css, "\n#{import_line}\n"
+              say "Appended import to #{application_css}", :green
+            end
+          end
+
+          # Re-read in case we just modified it
+          content = File.read(application_css)
 
-          # Insert after the first @import "tailwindcss" line
-          if content.include?('@import "tailwindcss"')
-            inject_into_file application_css, "\n#{import_line}", after: '@import "tailwindcss";'
-            say "Added import to #{application_css}", :green
-          else
-            append_to_file application_css, "\n#{import_line}\n"
-            say "Appended import to #{application_css}", :green
+          unless content.include?(overrides_line)
+            inject_into_file application_css, "\n#{overrides_line}", after: import_line
+            say "Added overrides import to #{application_css}", :green
           end
         end
       end

data/lib/generators/layered/ui/import_js_generator.rb

@@ -2,7 +2,7 @@ module Layered
   module Ui
     module Generators
       class ImportJsGenerator < Rails::Generators::Base
-        desc "Add layered-ui JavaScript import to the host application"
+        desc "Add layered-ui-rails JavaScript import to the host application"
 
         def add_js_import
           application_js = "app/javascript/application.js"

data/lib/generators/layered/ui/install_generator.rb

@@ -2,7 +2,7 @@ module Layered
   module Ui
     module Generators
       class InstallGenerator < Rails::Generators::Base
-        desc "Install layered-ui into the host application"
+        desc "Install layered-ui-rails into the host application"
 
         def check_dependencies
           unless Gem.loaded_specs.key?("tailwindcss-rails")
@@ -19,6 +19,10 @@ module Layered
           invoke "layered:ui:copy_assets"
         end
 
+        def create_overrides
+          invoke "layered:ui:create_overrides"
+        end
+
         def import_css
           invoke "layered:ui:import_css"
         end

data/lib/layered/ui/engine.rb

@@ -11,6 +11,7 @@ module Layered
       end
 
       initializer "layered-ui-rails.assets" do |app|
+        app.config.assets.paths << Engine.root.join("app/assets/fonts")
         app.config.assets.paths << Engine.root.join("app/assets/images")
         app.config.assets.paths << Engine.root.join("app/javascript")
       end

data/lib/layered/ui/version.rb

@@ -1,5 +1,5 @@
 module Layered
   module Ui
-    VERSION = "0.1.0"
+    VERSION = "0.1.1"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: layered-ui-rails
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.1
 platform: ruby
 authors:
 - layered.ai
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-02-16 00:00:00.000000000 Z
+date: 2026-02-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -168,6 +168,8 @@ files:
 - README.md
 - Rakefile
 - TRADEMARK.md
+- app/assets/fonts/layered_ui/inter.woff2
+- app/assets/fonts/layered_ui/manrope.woff2
 - app/assets/images/layered_ui/apple_touch_icon.png
 - app/assets/images/layered_ui/icon_dark.svg
 - app/assets/images/layered_ui/icon_light.svg
@@ -207,6 +209,7 @@ files:
 - app/views/layouts/layered_ui/application.html.erb
 - config/importmap.rb
 - lib/generators/layered/ui/copy_assets_generator.rb
+- lib/generators/layered/ui/create_overrides_generator.rb
 - lib/generators/layered/ui/import_css_generator.rb
 - lib/generators/layered/ui/import_js_generator.rb
 - lib/generators/layered/ui/install_generator.rb