kozenet_ui 0.1.8 → 0.1.9
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.
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 2c8f056b728fb765c786721792b4a4d19a75c9192fc566f6c68c1092b19bfbb3
|
|
4
|
+
data.tar.gz: 0bd8d2d5ee30829666efe6b3caf273a2d1d169048a1838355d9d359c23516c6e
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 052c7e777a0b901c11745afd01cf6b1e32de55188e2e874a0cc54393c70ced096f8268693918e9a260f1b74a033dbdbdaa7ecad4b683f438181d9a18a3929750
|
|
7
|
+
data.tar.gz: e99ed56ec123737d7a1748b7111c9f6947086ed835591a5cde37ce3567192aba6f5b122467b012826a9ba7a5a28aa8b68b8a180ca288e25855e170a9389ccd38
|
|
@@ -6,7 +6,8 @@ module KozenetUi
|
|
|
6
6
|
# Renders an action button (icon or text) in the header
|
|
7
7
|
#
|
|
8
8
|
# @example
|
|
9
|
-
# <%= render KozenetUi::HeaderComponent::ActionButtonComponent.new(href:
|
|
9
|
+
# <%= render KozenetUi::HeaderComponent::ActionButtonComponent.new(href:
|
|
10
|
+
# "/cart", icon: :shopping_cart, label: "Cart") %>
|
|
10
11
|
class ActionButtonComponent < BaseComponent
|
|
11
12
|
PLACEMENTS = %i[start end].freeze
|
|
12
13
|
PLACEMENT_ALIASES = {
|
|
@@ -6,6 +6,17 @@ module KozenetUi
|
|
|
6
6
|
module ComponentHelper
|
|
7
7
|
include KozenetUi::IconHelper
|
|
8
8
|
|
|
9
|
+
KOZENET_UI_STYLESHEETS = [
|
|
10
|
+
"kozenet_ui/tokens",
|
|
11
|
+
"kozenet_ui/fonts",
|
|
12
|
+
"kozenet_ui/base",
|
|
13
|
+
"kozenet_ui/components/button",
|
|
14
|
+
"kozenet_ui/components/header",
|
|
15
|
+
"kozenet_ui/components/avatar",
|
|
16
|
+
"kozenet_ui/components/badge",
|
|
17
|
+
"kozenet_ui/components/utilities"
|
|
18
|
+
].freeze
|
|
19
|
+
|
|
9
20
|
# Render a Kozenet UI button
|
|
10
21
|
def kz_button(**options, &block)
|
|
11
22
|
render(KozenetUi::ButtonComponent.new(**options), &block)
|
|
@@ -28,17 +39,7 @@ module KozenetUi
|
|
|
28
39
|
|
|
29
40
|
# Include theme styles in layout
|
|
30
41
|
def kozenet_ui_stylesheet_tag
|
|
31
|
-
stylesheet_link_tag(
|
|
32
|
-
"kozenet_ui/tokens",
|
|
33
|
-
"kozenet_ui/fonts",
|
|
34
|
-
"kozenet_ui/base",
|
|
35
|
-
"kozenet_ui/components/button",
|
|
36
|
-
"kozenet_ui/components/header",
|
|
37
|
-
"kozenet_ui/components/avatar",
|
|
38
|
-
"kozenet_ui/components/badge",
|
|
39
|
-
"kozenet_ui/components/utilities",
|
|
40
|
-
"data-turbo-track": "reload"
|
|
41
|
-
)
|
|
42
|
+
stylesheet_link_tag(*KOZENET_UI_STYLESHEETS, "data-turbo-track": "reload")
|
|
42
43
|
end
|
|
43
44
|
|
|
44
45
|
# Include theme JavaScript
|
|
@@ -67,65 +68,82 @@ module KozenetUi
|
|
|
67
68
|
|
|
68
69
|
# Inject inline theme variables (CSP-compliant)
|
|
69
70
|
def kozenet_ui_theme_variables_tag
|
|
70
|
-
content_tag(:style,
|
|
71
|
+
content_tag(:style, build_theme_css, nonce: content_security_policy_nonce)
|
|
71
72
|
end
|
|
72
73
|
|
|
73
|
-
|
|
74
|
-
# rubocop:disable Rails/OutputSafety
|
|
75
|
-
palette = KozenetUi.configuration.palette
|
|
76
|
-
light_palette = palette.to_css_variables(mode: :light)
|
|
77
|
-
dark_palette = palette.to_css_variables(mode: :dark)
|
|
78
|
-
tokens = KozenetUi::Theme::Tokens.to_css_variables
|
|
74
|
+
private
|
|
79
75
|
|
|
76
|
+
def build_theme_css
|
|
77
|
+
theme_vars = compile_theme_variables
|
|
80
78
|
case KozenetUi.configuration.theme
|
|
81
79
|
when :dark, "dark"
|
|
82
|
-
|
|
83
|
-
:root {
|
|
84
|
-
color-scheme: dark;
|
|
85
|
-
#{tokens}
|
|
86
|
-
#{dark_palette}
|
|
87
|
-
}
|
|
88
|
-
[data-theme="light"], .light {
|
|
89
|
-
color-scheme: light;
|
|
90
|
-
#{light_palette}
|
|
91
|
-
}
|
|
92
|
-
CSS
|
|
80
|
+
build_dark_theme_css(*theme_vars)
|
|
93
81
|
when :system, "system"
|
|
94
|
-
|
|
95
|
-
:root {
|
|
96
|
-
color-scheme: light;
|
|
97
|
-
#{tokens}
|
|
98
|
-
#{light_palette}
|
|
99
|
-
}
|
|
100
|
-
@media (prefers-color-scheme: dark) {
|
|
101
|
-
:root:not([data-theme="light"]) {
|
|
102
|
-
color-scheme: dark;
|
|
103
|
-
#{dark_palette}
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
[data-theme="dark"], .dark {
|
|
107
|
-
color-scheme: dark;
|
|
108
|
-
#{dark_palette}
|
|
109
|
-
}
|
|
110
|
-
[data-theme="light"], .light {
|
|
111
|
-
color-scheme: light;
|
|
112
|
-
#{light_palette}
|
|
113
|
-
}
|
|
114
|
-
CSS
|
|
82
|
+
build_system_theme_css(*theme_vars)
|
|
115
83
|
else
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
84
|
+
build_light_theme_css(*theme_vars)
|
|
85
|
+
end.html_safe
|
|
86
|
+
end
|
|
87
|
+
|
|
88
|
+
def compile_theme_variables
|
|
89
|
+
palette = KozenetUi.configuration.palette
|
|
90
|
+
[
|
|
91
|
+
KozenetUi::Theme::Tokens.to_css_variables,
|
|
92
|
+
palette.to_css_variables(mode: :light),
|
|
93
|
+
palette.to_css_variables(mode: :dark)
|
|
94
|
+
]
|
|
95
|
+
end
|
|
96
|
+
|
|
97
|
+
def build_dark_theme_css(tokens, light_palette, dark_palette)
|
|
98
|
+
<<~CSS
|
|
99
|
+
:root {
|
|
100
|
+
color-scheme: dark;
|
|
101
|
+
#{tokens}
|
|
102
|
+
#{dark_palette}
|
|
103
|
+
}
|
|
104
|
+
[data-theme="light"], .light {
|
|
105
|
+
color-scheme: light;
|
|
106
|
+
#{light_palette}
|
|
107
|
+
}
|
|
108
|
+
CSS
|
|
109
|
+
end
|
|
110
|
+
|
|
111
|
+
def build_system_theme_css(tokens, light_palette, dark_palette)
|
|
112
|
+
<<~CSS
|
|
113
|
+
:root {
|
|
114
|
+
color-scheme: light;
|
|
115
|
+
#{tokens}
|
|
116
|
+
#{light_palette}
|
|
117
|
+
}
|
|
118
|
+
@media (prefers-color-scheme: dark) {
|
|
119
|
+
:root:not([data-theme="light"]) {
|
|
123
120
|
color-scheme: dark;
|
|
124
121
|
#{dark_palette}
|
|
125
122
|
}
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
123
|
+
}
|
|
124
|
+
[data-theme="dark"], .dark {
|
|
125
|
+
color-scheme: dark;
|
|
126
|
+
#{dark_palette}
|
|
127
|
+
}
|
|
128
|
+
[data-theme="light"], .light {
|
|
129
|
+
color-scheme: light;
|
|
130
|
+
#{light_palette}
|
|
131
|
+
}
|
|
132
|
+
CSS
|
|
133
|
+
end
|
|
134
|
+
|
|
135
|
+
def build_light_theme_css(tokens, light_palette, dark_palette)
|
|
136
|
+
<<~CSS
|
|
137
|
+
:root {
|
|
138
|
+
color-scheme: light;
|
|
139
|
+
#{tokens}
|
|
140
|
+
#{light_palette}
|
|
141
|
+
}
|
|
142
|
+
[data-theme="dark"], .dark {
|
|
143
|
+
color-scheme: dark;
|
|
144
|
+
#{dark_palette}
|
|
145
|
+
}
|
|
146
|
+
CSS
|
|
129
147
|
end
|
|
130
148
|
end
|
|
131
149
|
end
|
data/lib/kozenet_ui/engine.rb
CHANGED
|
@@ -104,78 +104,99 @@ module KozenetUi
|
|
|
104
104
|
content_tag(:style, kozenet_ui_theme_variables, nonce: content_security_policy_nonce)
|
|
105
105
|
end
|
|
106
106
|
|
|
107
|
-
# rubocop:disable Rails/OutputSafety
|
|
108
107
|
def kozenet_ui_theme_variables
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
dark_palette = palette.to_css_variables(mode: :dark)
|
|
112
|
-
tokens = KozenetUi::Theme::Tokens.to_css_variables
|
|
108
|
+
build_theme_css
|
|
109
|
+
end
|
|
113
110
|
|
|
111
|
+
private
|
|
112
|
+
|
|
113
|
+
def build_theme_css
|
|
114
|
+
theme_vars = compile_theme_variables
|
|
114
115
|
case KozenetUi.configuration.theme
|
|
115
116
|
when :dark, "dark"
|
|
116
|
-
|
|
117
|
-
:root {
|
|
118
|
-
color-scheme: dark;
|
|
119
|
-
/* Design Tokens */
|
|
120
|
-
#{tokens}
|
|
121
|
-
/* Color Palette (Dark Mode) */
|
|
122
|
-
#{dark_palette}
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
[data-theme="light"], .light {
|
|
126
|
-
color-scheme: light;
|
|
127
|
-
/* Color Palette (Light Mode) */
|
|
128
|
-
#{light_palette}
|
|
129
|
-
}
|
|
130
|
-
CSS
|
|
117
|
+
build_dark_theme_css(*theme_vars)
|
|
131
118
|
when :system, "system"
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
/* Color Palette (Light Mode) */
|
|
138
|
-
#{light_palette}
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
@media (prefers-color-scheme: dark) {
|
|
142
|
-
:root:not([data-theme="light"]):not(.light) {
|
|
143
|
-
color-scheme: dark;
|
|
144
|
-
/* Color Palette (Dark Mode) */
|
|
145
|
-
#{dark_palette}
|
|
146
|
-
}
|
|
147
|
-
}
|
|
119
|
+
build_system_theme_css(*theme_vars)
|
|
120
|
+
else
|
|
121
|
+
build_light_theme_css(*theme_vars)
|
|
122
|
+
end.html_safe
|
|
123
|
+
end
|
|
148
124
|
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
125
|
+
def compile_theme_variables
|
|
126
|
+
palette = KozenetUi.configuration.palette
|
|
127
|
+
[
|
|
128
|
+
KozenetUi::Theme::Tokens.to_css_variables,
|
|
129
|
+
palette.to_css_variables(mode: :light),
|
|
130
|
+
palette.to_css_variables(mode: :dark)
|
|
131
|
+
]
|
|
132
|
+
end
|
|
154
133
|
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
134
|
+
def build_dark_theme_css(tokens, light_palette, dark_palette)
|
|
135
|
+
<<~CSS
|
|
136
|
+
:root {
|
|
137
|
+
color-scheme: dark;
|
|
138
|
+
/* Design Tokens */
|
|
139
|
+
#{tokens}
|
|
140
|
+
/* Color Palette (Dark Mode) */
|
|
141
|
+
#{dark_palette}
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
[data-theme="light"], .light {
|
|
145
|
+
color-scheme: light;
|
|
146
|
+
/* Color Palette (Light Mode) */
|
|
147
|
+
#{light_palette}
|
|
148
|
+
}
|
|
149
|
+
CSS
|
|
150
|
+
end
|
|
170
151
|
|
|
171
|
-
|
|
152
|
+
def build_system_theme_css(tokens, light_palette, dark_palette)
|
|
153
|
+
<<~CSS
|
|
154
|
+
:root {
|
|
155
|
+
color-scheme: light;
|
|
156
|
+
/* Design Tokens */
|
|
157
|
+
#{tokens}
|
|
158
|
+
/* Color Palette (Light Mode) */
|
|
159
|
+
#{light_palette}
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
@media (prefers-color-scheme: dark) {
|
|
163
|
+
:root:not([data-theme="light"]):not(.light) {
|
|
172
164
|
color-scheme: dark;
|
|
173
165
|
/* Color Palette (Dark Mode) */
|
|
174
166
|
#{dark_palette}
|
|
175
167
|
}
|
|
176
|
-
|
|
177
|
-
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
[data-theme="dark"], .dark {
|
|
171
|
+
color-scheme: dark;
|
|
172
|
+
/* Color Palette (Dark Mode) */
|
|
173
|
+
#{dark_palette}
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
[data-theme="light"], .light {
|
|
177
|
+
color-scheme: light;
|
|
178
|
+
/* Color Palette (Light Mode) */
|
|
179
|
+
#{light_palette}
|
|
180
|
+
}
|
|
181
|
+
CSS
|
|
182
|
+
end
|
|
183
|
+
|
|
184
|
+
def build_light_theme_css(tokens, light_palette, dark_palette)
|
|
185
|
+
<<~CSS
|
|
186
|
+
:root {
|
|
187
|
+
color-scheme: light;
|
|
188
|
+
/* Design Tokens */
|
|
189
|
+
#{tokens}
|
|
190
|
+
/* Color Palette (Light Mode) */
|
|
191
|
+
#{light_palette}
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
[data-theme="dark"], .dark {
|
|
195
|
+
color-scheme: dark;
|
|
196
|
+
/* Color Palette (Dark Mode) */
|
|
197
|
+
#{dark_palette}
|
|
198
|
+
}
|
|
199
|
+
CSS
|
|
178
200
|
end
|
|
179
|
-
# rubocop:enable Rails/OutputSafety
|
|
180
201
|
end
|
|
181
202
|
end
|
|
@@ -89,7 +89,6 @@ module KozenetUi
|
|
|
89
89
|
variables << "--gradient-accent-from: #{@colors[:gradient_accent_from] || "#6366f1"};"
|
|
90
90
|
variables << "--gradient-accent-via: #{@colors[:gradient_accent_via] || "#0ea5e9"};"
|
|
91
91
|
variables << "--gradient-accent-to: #{@colors[:gradient_accent_to] || "#06b6d4"};"
|
|
92
|
-
# rubocop:disable Naming/VariableNumber
|
|
93
92
|
variables << "--gradient-spot-1: #{@colors[:gradient_spot_1] || "rgba(99,102,241,0.35)"};"
|
|
94
93
|
variables << "--gradient-spot-2: #{@colors[:gradient_spot_2] || "rgba(14,165,233,0.30)"};"
|
|
95
94
|
# rubocop:enable Naming/VariableNumber
|
data/lib/kozenet_ui/version.rb
CHANGED