odt-ui-rails 2.2.2 → 2.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +20 -15
  3. data/lib/generators/odt/install_generator.rb +27 -39
  4. data/lib/generators/odt/templates/odt_theme.css +119 -0
  5. data/lib/odt_ui/version.rb +1 -1
  6. metadata +2 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 10a40fe0221350427b615884ee7f7fb35fd430bd22f85d19753df3fc39ac5778
4
- data.tar.gz: 61ba7e66ad20a6c4d14e269c77dce8e5ee937219b1cce0ae7097d1f36039e757
3
+ metadata.gz: 1698da3764cc04e6ef4cff3705dddd3d03fe553317d989142f116224b153860e
4
+ data.tar.gz: 7818ec4ed4c6f67087a8b95b5fc1642731cd856309428ec613a2dc2e3d452602
5
5
  SHA512:
6
- metadata.gz: 6c7bb314b4fd02fc10f6ccf7cd29d832d3fae2d4f4a0b0af09f91d1534f38fe3c105d7e11ca933c0ceb55a30ecb2d20b679a5d0b61670d08331a15d3083d8fa9
7
- data.tar.gz: 0c14d0ff154e8da78825bbe5178722a9b2ebae2fefcd9861bdade3319338efbc09aa6b0d89f3535fdcfba562c4cca87205dc7453ea97e10a1b0edbc2c4fb5e1b
6
+ metadata.gz: 9678a8b70e8999a3dbc878173545d50021e4a46bcf8044bb5275410ffb85bbc73dbfb29d5e6d59e46941989b58a8fc0eedd62d9db409ef254c0051c4f8f443d8
7
+ data.tar.gz: 424a6e45762e54724ad5278b09542bad223d3889c6a6410da66e2a4444d7050079dccb2c6175a992a66c60e512422a3b428497d3886a5b3b88e7b778bdc475cd
data/README.md CHANGED
@@ -58,7 +58,7 @@
58
58
  Add the gem to your application's `Gemfile`:
59
59
 
60
60
  ```ruby
61
- gem "odt-ui-rails", "~> 2.2.2"
61
+ gem "odt-ui-rails", "~> 2.2.3"
62
62
  ```
63
63
 
64
64
  Install dependencies:
@@ -74,33 +74,38 @@ bin/rails g odt:install
74
74
  ```
75
75
 
76
76
  The generator will:
77
-
78
- 1. Detect your asset pipeline (Tailwind CSS v4, Propshaft, or Sprockets) and safely configure the required `@import` statements.
79
- 2. Copy `sig/odt_ui.rbs` for Ruby LSP IDE autocompletion.
80
- 3. Copy Stimulus controllers (`odt_toast_controller.js`, `odt_modal_controller.js`) to `app/javascript/controllers/` if Stimulus is present.
77
+ 1. Inject `<%= stylesheet_link_tag "odt_ui", "data-turbo-track": "reload" %>` into your `app/views/layouts/application.html.erb`.
78
+ 2. Configure Tailwind CSS v4 `@theme` (`odt_theme.css`) if Tailwind is detected.
79
+ 3. Copy `sig/odt_ui.rbs` for Ruby LSP IDE autocompletion.
80
+ 4. Copy Stimulus controllers (`odt_toast_controller.js`, `odt_modal_controller.js`) to `app/javascript/controllers/` if Stimulus is present.
81
81
 
82
82
  ---
83
83
 
84
84
  ## Asset Pipeline Configuration
85
85
 
86
- If configuring stylesheets manually, use the configuration below:
86
+ ### 1. Application Layout (Propshaft / Sprockets / Standard Rails)
87
87
 
88
- ### Option A: Tailwind CSS v4 (`app/assets/tailwind/application.css`)
88
+ In `app/views/layouts/application.html.erb`, include the ODT stylesheet:
89
89
 
90
- ```css
91
- @import "tailwindcss";
92
- @import "odt_ui/tokens.css";
93
- @import "odt_ui/styles.css";
94
- @import "odt_ui/theme.css";
90
+ ```erb
91
+ <head>
92
+ <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
93
+ <%= stylesheet_link_tag "odt_ui", "data-turbo-track": "reload" %>
94
+ <%= javascript_importmap_tags %>
95
+ </head>
95
96
  ```
96
97
 
97
- ### Option B: Propshaft / Sprockets / Standard Rails (`app/assets/stylesheets/application.css`)
98
+ ### 2. Tailwind CSS v4 Theme Interop (`app/assets/tailwind/application.css`)
99
+
100
+ If using Tailwind CSS v4 and you want ODT design token utilities (`bg-primary-500`, `text-fg-strong`, etc.) in custom HTML:
98
101
 
99
102
  ```css
100
- @import "odt_ui/tokens.css";
101
- @import "odt_ui/styles.css";
103
+ @import "tailwindcss";
104
+ @import "./odt_theme.css";
102
105
  ```
103
106
 
107
+ *(Note: `odt_theme.css` is placed in your tailwind assets folder by `bin/rails g odt:install`)*
108
+
104
109
  ---
105
110
 
106
111
  ## Component Reference
data/lib/generators/odt/install_generator.rb CHANGED
@@ -9,53 +9,41 @@ module Odt
9
9
 
10
10
  desc "Configures ODT UI standalone stylesheets, Tailwind theme, and RBS type signatures for Rails application"
11
11
 
12
- def inject_stylesheets
13
- css_candidates = [
12
+ def setup_stylesheets
13
+ # 1. Setup Tailwind CSS v4 Theme if Tailwind is present
14
+ tailwind_candidates = [
14
15
  "app/assets/tailwind/application.css",
15
- "app/assets/stylesheets/application.tailwind.css",
16
- "app/assets/stylesheets/application.css",
17
- "app/assets/stylesheets/application.scss"
16
+ "app/assets/stylesheets/application.tailwind.css"
18
17
  ]
19
18
 
20
- target_css = css_candidates.find { |file| File.exist?(file) }
19
+ target_tailwind = tailwind_candidates.find { |file| File.exist?(file) }
21
20
 
22
- if target_css
23
- existing_content = File.read(target_css)
21
+ if target_tailwind
22
+ dest_dir = File.dirname(target_tailwind)
23
+ copy_file "odt_theme.css", "#{dest_dir}/odt_theme.css"
24
24
 
25
- if existing_content.include?("odt_ui")
26
- say "ODT UI stylesheet imports already present in #{target_css}", :yellow
27
- return
25
+ existing_content = File.read(target_tailwind)
26
+ unless existing_content.include?("odt_theme")
27
+ append_to_file target_tailwind, "\n@import \"./odt_theme.css\";\n"
28
+ say "Added ODT Tailwind @theme import to #{target_tailwind}", :green
28
29
  end
30
+ end
29
31
 
30
- is_tailwind = target_css.include?("tailwind") || existing_content.include?("@import \"tailwindcss\"") || existing_content.include?("@import 'tailwindcss'")
31
-
32
- imports = if is_tailwind
33
- <<~CSS
34
-
35
- /* ==========================================================================
36
- * ODT Lightweight UI - Design Tokens, Standalone Styles & Tailwind Theme
37
- * ========================================================================== */
38
- @import "odt_ui/tokens.css";
39
- @import "odt_ui/styles.css";
40
- @import "odt_ui/theme.css";
41
- CSS
42
- else
43
- <<~CSS
44
-
45
- /* ==========================================================================
46
- * ODT Lightweight UI - Design Tokens & Standalone Component Styles
47
- * ========================================================================== */
48
- @import "odt_ui/tokens.css";
49
- @import "odt_ui/styles.css";
50
- CSS
32
+ # 2. Inject stylesheet_link_tag into application.html.erb layout
33
+ layout_file = "app/views/layouts/application.html.erb"
34
+ if File.exist?(layout_file)
35
+ layout_content = File.read(layout_file)
36
+ unless layout_content.include?("odt_ui")
37
+ # Inject right after stylesheet_link_tag :app or in <head>
38
+ if layout_content.include?("<%= stylesheet_link_tag :app")
39
+ insert_into_file layout_file, "\n <%= stylesheet_link_tag \"odt_ui\", \"data-turbo-track\": \"reload\" %>", after: /<%= stylesheet_link_tag :app[^\n]*%>/
40
+ elsif layout_content.include?("<%= stylesheet_link_tag \"application\"")
41
+ insert_into_file layout_file, "\n <%= stylesheet_link_tag \"odt_ui\", \"data-turbo-track\": \"reload\" %>", after: /<%= stylesheet_link_tag "application"[^\n]*%>/
42
+ elsif layout_content.include?("</head>")
43
+ insert_into_file layout_file, " <%= stylesheet_link_tag \"odt_ui\", \"data-turbo-track\": \"reload\" %>\n", before: "</head>"
44
+ end
45
+ say "Injected odt_ui stylesheet link tag into #{layout_file}", :green
51
46
  end
52
-
53
- append_to_file target_css, imports
54
- say "Added ODT UI CSS imports to #{target_css}", :green
55
- else
56
- say "No standard application stylesheet found.", :yellow
57
- say "Please add the following to your application stylesheet or layout:", :yellow
58
- say %( @import "odt_ui/tokens.css";\n @import "odt_ui/styles.css";\n), :cyan
59
47
  end
60
48
  end
61
49
 
data/lib/generators/odt/templates/odt_theme.css ADDED
@@ -0,0 +1,119 @@
1
+ /*
2
+ * odt_theme.css
3
+ * Tailwind CSS v4 @theme configuration for ODT Design Tokens.
4
+ */
5
+
6
+ @theme {
7
+ /* Primary Colors */
8
+ --color-primary-0: hsl(240 78.3% 100%);
9
+ --color-primary-50: hsl(240 78.3% 95%);
10
+ --color-primary-100: hsl(240 78.3% 90%);
11
+ --color-primary-200: hsl(240 78.3% 85%);
12
+ --color-primary-300: hsl(240 78.3% 80%);
13
+ --color-primary-400: hsl(240 78.3% 75%);
14
+ --color-primary-500: hsl(240 78.3% 65%);
15
+ --color-primary-600: hsl(240 78.3% 60%);
16
+ --color-primary-700: hsl(240 78.3% 55%);
17
+ --color-primary-800: hsl(240 78.3% 45%);
18
+ --color-primary-900: hsl(240 78.3% 34.3%);
19
+
20
+ /* Secondary Colors */
21
+ --color-secondary-0: hsl(47 100% 100%);
22
+ --color-secondary-50: hsl(47 100% 95%);
23
+ --color-secondary-100: hsl(47 100% 85%);
24
+ --color-secondary-200: hsl(47 100% 80%);
25
+ --color-secondary-300: hsl(47 100% 75%);
26
+ --color-secondary-400: hsl(47 100% 70%);
27
+ --color-secondary-500: hsl(47 100% 65%);
28
+ --color-secondary-600: hsl(47 100% 60%);
29
+ --color-secondary-700: hsl(47 100% 55%);
30
+ --color-secondary-800: hsl(47 100% 50%);
31
+ --color-secondary-900: hsl(47 100% 45%);
32
+
33
+ /* Neutral Palette */
34
+ --color-neutral-0: hsl(0 0% 100%);
35
+ --color-neutral-50: hsl(240 10% 98%);
36
+ --color-neutral-100: hsl(240 10% 96%);
37
+ --color-neutral-200: hsl(240 9% 90%);
38
+ --color-neutral-300: hsl(240 8% 82%);
39
+ --color-neutral-400: hsl(240 8% 64%);
40
+ --color-neutral-500: hsl(240 7% 46%);
41
+ --color-neutral-600: hsl(240 7% 32%);
42
+ --color-neutral-700: hsl(240 8% 25%);
43
+ --color-neutral-800: hsl(240 10% 15%);
44
+ --color-neutral-900: hsl(240 12% 9%);
45
+ --color-neutral-950: hsl(240 14% 4%);
46
+
47
+ /* Semantic Colors */
48
+ --color-success: hsl(142 71% 45%);
49
+ --color-success-subtle: hsl(142 71% 96%);
50
+ --color-warning: hsl(38 92% 50%);
51
+ --color-warning-subtle: hsl(38 92% 96%);
52
+ --color-danger: hsl(0 84% 60%);
53
+ --color-danger-subtle: hsl(0 84% 97%);
54
+ --color-info: hsl(217 91% 60%);
55
+ --color-info-subtle: hsl(217 91% 97%);
56
+
57
+ /* Surfaces & Backgrounds */
58
+ --color-surface-base: hsl(0 0% 100%);
59
+ --color-surface: hsl(0 0% 100%);
60
+ --color-surface-muted: hsl(240 10% 98%);
61
+ --color-surface-subtle: hsl(240 10% 96%);
62
+ --color-surface-elevated: hsl(240 10% 98%);
63
+ --color-surface-primary: hsl(240 78.3% 65%);
64
+ --color-surface-secondary: hsl(47 100% 65%);
65
+ --color-surface-success: hsl(142 71% 96%);
66
+ --color-surface-warning: hsl(38 92% 96%);
67
+ --color-surface-danger: hsl(0 84% 97%);
68
+ --color-surface-info: hsl(217 91% 97%);
69
+
70
+ /* Foregrounds */
71
+ --color-fg-strong: hsl(240 10% 15%);
72
+ --color-fg: hsl(240 8% 25%);
73
+ --color-fg-muted: hsl(240 7% 46%);
74
+ --color-fg-subtle: hsl(240 8% 64%);
75
+ --color-fg-disabled: hsl(240 8% 82%);
76
+
77
+ --color-fg-inverse-strong: hsl(0 0% 100%);
78
+ --color-fg-inverse: hsl(240 10% 98%);
79
+ --color-fg-inverse-muted: hsl(240 10% 96%);
80
+ --color-fg-inverse-subtle: hsl(240 8% 82%);
81
+ --color-fg-inverse-disabled: hsl(240 8% 64%);
82
+
83
+ --color-fg-primary: hsl(240 78.3% 34.3%);
84
+ --color-fg-secondary: hsl(47 100% 45%);
85
+
86
+ --color-fg-success: hsl(142 71% 45%);
87
+ --color-fg-warning: hsl(38 92% 50%);
88
+ --color-fg-danger: hsl(0 84% 60%);
89
+ --color-fg-info: hsl(217 91% 60%);
90
+
91
+ --color-ring: hsl(240 78.3% 65%);
92
+
93
+ /* Lines & Borders */
94
+ --color-line: hsl(240 9% 90%);
95
+ --color-line-muted: hsl(240 10% 96%);
96
+ --color-line-strong: hsl(240 8% 82%);
97
+ --color-line-primary: hsl(240 78.3% 65%);
98
+ --color-line-success: hsl(142 71% 45%);
99
+ --color-line-warning: hsl(38 92% 50%);
100
+ --color-line-danger: hsl(0 84% 60%);
101
+
102
+ /* Radius */
103
+ --radius-xs: 0.125rem;
104
+ --radius-sm: 0.25rem;
105
+ --radius-md: 0.375rem;
106
+ --radius-lg: 0.5rem;
107
+ --radius-xl: 0.75rem;
108
+ --radius-2xl: 1rem;
109
+ --radius-3xl: 1.5rem;
110
+ --radius-4xl: 2rem;
111
+ --radius-full: 9999px;
112
+
113
+ /* Shadows */
114
+ --color-shadow: hsl(240 78.3% 70%);
115
+ --shadow-card: 0 8px 26px hsl(240 78.3% 70% / 0.10);
116
+ --shadow-dropdown: 0 8px 24px hsl(240 78.3% 70% / 0.12);
117
+ --shadow-modal: 0 16px 40px hsl(240 78.3% 70% / 0.16);
118
+ --shadow-popover: 0 24px 64px hsl(240 78.3% 70% / 0.20);
119
+ }
data/lib/odt_ui/version.rb CHANGED
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module OdtUi
4
- VERSION = "2.2.2"
4
+ VERSION = "2.2.3"
5
5
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: odt-ui-rails
3
3
  version: !ruby/object:Gem::Version
4
- version: 2.2.2
4
+ version: 2.2.3
5
5
  platform: ruby
6
6
  authors:
7
7
  - Pixel
@@ -53,6 +53,7 @@ files:
53
53
  - app/javascript/controllers/odt_toast_controller.js
54
54
  - lib/generators/odt/install_generator.rb
55
55
  - lib/generators/odt/templates/odt_modal_controller.js
56
+ - lib/generators/odt/templates/odt_theme.css
56
57
  - lib/generators/odt/templates/odt_toast_controller.js
57
58
  - lib/generators/odt/templates/odt_ui.rbs
58
59
  - lib/odt-ui-rails.rb