maquina-components 0.7.1 → 0.7.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.
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: a908d12ac4b955850c1c9cf41cab32bbc12d4687d68fad543b43c74fc4f678d6
|
|
4
|
+
data.tar.gz: 83fa5e89747cd635883e93e6e47a034b64f59633f3b2207a9e9ae7e3aa5aad35
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 903deaa1e5cdb313f8ae2b71a7e59d1c0608926d2951fc66aba2eb787d0e94763379dcfbe2e828c21e001e344f8dff474f5961e31e8c3f06592d13d558f6f61c
|
|
7
|
+
data.tar.gz: 9b62919d2c5bbabeba0842af06a2b3d24d576f3f307dd198e43119790b0bce36c0b0cc3108006c3f10cb5e6e02340d426baa01ca76a567f0800b805b748cd8d4
|
|
@@ -20,11 +20,11 @@
|
|
|
20
20
|
accent. Set them to your own blue (or to var(--primary)) if you prefer. */
|
|
21
21
|
--info: oklch(0.93 0.04 240);
|
|
22
22
|
--info-foreground: oklch(0.4 0.12 250);
|
|
23
|
+
}
|
|
23
24
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
}
|
|
25
|
+
.dark {
|
|
26
|
+
--info: oklch(0.34 0.07 250);
|
|
27
|
+
--info-foreground: oklch(0.88 0.06 240);
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
/* -------------------------------------------------------------------------
|
|
@@ -76,58 +76,61 @@
|
|
|
76
76
|
--sidebar-accent-foreground: oklch(0.145 0 0);
|
|
77
77
|
--sidebar-border: oklch(0.88 0 0);
|
|
78
78
|
--sidebar-ring: oklch(0.645 0.246 16);
|
|
79
|
+
}
|
|
79
80
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
81
|
+
/* Dark Mode
|
|
82
|
+
Put the `dark` class on <html>. This block must stay at the top level: nested
|
|
83
|
+
inside :root it compiles to `:root .dark`, which never matches <html> itself,
|
|
84
|
+
and the @theme bindings below resolve against <html>. */
|
|
85
|
+
.dark {
|
|
86
|
+
--background: oklch(0.145 0 0);
|
|
87
|
+
--foreground: oklch(0.985 0 0);
|
|
84
88
|
|
|
85
|
-
|
|
86
|
-
|
|
89
|
+
--card: oklch(0.205 0 0);
|
|
90
|
+
--card-foreground: oklch(0.985 0 0);
|
|
87
91
|
|
|
88
|
-
|
|
89
|
-
|
|
92
|
+
--popover: oklch(0.269 0 0);
|
|
93
|
+
--popover-foreground: oklch(0.985 0 0);
|
|
90
94
|
|
|
91
|
-
|
|
92
|
-
|
|
95
|
+
--primary: oklch(0.712 0.194 13);
|
|
96
|
+
--primary-foreground: oklch(0.15 0.052 13);
|
|
93
97
|
|
|
94
|
-
|
|
95
|
-
|
|
98
|
+
--secondary: oklch(0.269 0 0);
|
|
99
|
+
--secondary-foreground: oklch(0.985 0 0);
|
|
96
100
|
|
|
97
|
-
|
|
98
|
-
|
|
101
|
+
--muted: oklch(0.269 0 0);
|
|
102
|
+
--muted-foreground: oklch(0.708 0 0);
|
|
99
103
|
|
|
100
|
-
|
|
101
|
-
|
|
104
|
+
--accent: oklch(0.371 0 0);
|
|
105
|
+
--accent-foreground: oklch(0.985 0 0);
|
|
102
106
|
|
|
103
|
-
|
|
104
|
-
|
|
107
|
+
--success: oklch(0.32 0.06 168);
|
|
108
|
+
--success-foreground: oklch(0.82 0.06 168);
|
|
105
109
|
|
|
106
|
-
|
|
107
|
-
|
|
110
|
+
--warning: oklch(0.36 0.06 55);
|
|
111
|
+
--warning-foreground: oklch(0.86 0.06 55);
|
|
108
112
|
|
|
109
|
-
|
|
110
|
-
|
|
113
|
+
--destructive: oklch(0.34 0.07 8);
|
|
114
|
+
--destructive-foreground: oklch(0.88 0.06 8);
|
|
111
115
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
116
|
+
--border: oklch(1 0 0 / 10%);
|
|
117
|
+
--input: oklch(1 0 0 / 15%);
|
|
118
|
+
--ring: oklch(0.455 0.188 13);
|
|
115
119
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
120
|
+
--chart-1: oklch(0.712 0.194 13);
|
|
121
|
+
--chart-2: oklch(0.72 0.09 168);
|
|
122
|
+
--chart-3: oklch(0.78 0.09 55);
|
|
123
|
+
--chart-4: oklch(0.645 0.246 16);
|
|
124
|
+
--chart-5: oklch(0.58 0.13 8);
|
|
121
125
|
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
}
|
|
126
|
+
--sidebar: oklch(0.14 0 0);
|
|
127
|
+
--sidebar-foreground: oklch(0.9 0 0);
|
|
128
|
+
--sidebar-primary: oklch(0.712 0.194 13);
|
|
129
|
+
--sidebar-primary-foreground: oklch(0.15 0.052 13);
|
|
130
|
+
--sidebar-accent: oklch(0.22 0 0);
|
|
131
|
+
--sidebar-accent-foreground: oklch(0.95 0 0);
|
|
132
|
+
--sidebar-border: oklch(1 0 0 / 12%);
|
|
133
|
+
--sidebar-ring: oklch(0.455 0.188 13);
|
|
131
134
|
}
|
|
132
135
|
|
|
133
136
|
/* Tailwind Theme Bindings
|
|
@@ -54,9 +54,20 @@ module MaquinaComponents
|
|
|
54
54
|
# Assigning a data URI to one of the five mark properties IS the 0.6.0
|
|
55
55
|
# pattern, so it must not be reported as a restated rule.
|
|
56
56
|
MARK_TOKEN_ASSIGNMENT = /--(?:checkbox-mark|checkbox-indeterminate|radio-mark|switch-thumb|select-chevron)-image\s*:/
|
|
57
|
+
RESTATED_SVG_SUGGESTION =
|
|
58
|
+
"0.6.0 exposes these marks as overridable custom properties:\n" \
|
|
59
|
+
"--checkbox-mark-image, --checkbox-indeterminate-image, --radio-mark-image,\n" \
|
|
60
|
+
"--switch-thumb-image, --select-chevron-image. Assign your SVG to the token\n" \
|
|
61
|
+
"instead of restating the engine's rule."
|
|
62
|
+
# A component hook in markup: data-component="..." or a helper's component: key.
|
|
63
|
+
MARKUP_COMPONENT_HOOK = /data-component=|\bcomponent:\s*[:"']/
|
|
57
64
|
RADIUS_DECL = /(?:border-radius\s*:|@apply[^;{}]*\brounded(?:-[a-z0-9\[\].\/-]+)?\b)/
|
|
58
65
|
SHADOW_DECL = /(?:box-shadow\s*:|@apply[^;{}]*\b(?:shadow|ring)(?:-[a-z0-9\[\].\/-]+)?\b)/
|
|
59
66
|
FOCUS_SELECTOR = /:focus(-visible|-within)?\b/
|
|
67
|
+
# A bare `.dark` in a selector list; `&.dark` (which compiles to :root.dark)
|
|
68
|
+
# is fine and does not match.
|
|
69
|
+
BARE_DARK_SELECTOR = /(?:\A|,)\s*\.dark\s*(?:,|\z)/
|
|
70
|
+
ROOT_SELECTOR = /\A(?::root|html)\z/
|
|
60
71
|
|
|
61
72
|
# 0.7.1 -----------------------------------------------------------------
|
|
62
73
|
# The destructive pair plus the surface it lands on, read out of a host
|
|
@@ -196,7 +207,10 @@ module MaquinaComponents
|
|
|
196
207
|
selector = buffer.strip
|
|
197
208
|
buffer = +""
|
|
198
209
|
at_rule = selector.start_with?("@")
|
|
199
|
-
|
|
210
|
+
unless at_rule
|
|
211
|
+
check_selector(path, index, selector, in_layer?(stack))
|
|
212
|
+
check_nested_dark(path, index, selector, stack)
|
|
213
|
+
end
|
|
200
214
|
stack.push(selector)
|
|
201
215
|
when "}"
|
|
202
216
|
check_declaration(path, index, buffer.strip, stack)
|
|
@@ -231,6 +245,13 @@ module MaquinaComponents
|
|
|
231
245
|
|
|
232
246
|
return unless component_selector?(chain)
|
|
233
247
|
|
|
248
|
+
# Only here, under a component selector, does an SVG restate an engine
|
|
249
|
+
# mark. Anywhere else it is the app's own artwork -- Rails' actiontext.css
|
|
250
|
+
# carries fifteen for the Trix editor.
|
|
251
|
+
if SVG_DATA_URI.match?(declaration) && !MARK_TOKEN_ASSIGNMENT.match?(declaration)
|
|
252
|
+
add(path, index, declaration, :breaking, "restated-svg-uri", RESTATED_SVG_SUGGESTION)
|
|
253
|
+
end
|
|
254
|
+
|
|
234
255
|
if RADIUS_DECL.match?(declaration)
|
|
235
256
|
add(path, index, declaration, :review, "hardcoded-radius",
|
|
236
257
|
"0.6.0 reads --control-radius / --surface-radius / --mark-radius / --pill-radius.\n" \
|
|
@@ -281,6 +302,24 @@ module MaquinaComponents
|
|
|
281
302
|
end
|
|
282
303
|
end
|
|
283
304
|
|
|
305
|
+
# `.dark` nested in `:root` compiles to `:root .dark`, a descendant of
|
|
306
|
+
# <html>, so `<html class="dark">` never matches it. And the @theme
|
|
307
|
+
# bindings resolve against <html>, so moving the class to <body> does not
|
|
308
|
+
# help either: dark mode silently never applies. The 0.7.1 installer
|
|
309
|
+
# shipped its palette this way.
|
|
310
|
+
def check_nested_dark(path, index, selector, stack)
|
|
311
|
+
return unless BARE_DARK_SELECTOR.match?(selector)
|
|
312
|
+
return unless stack.any? { |ancestor| ROOT_SELECTOR.match?(ancestor) }
|
|
313
|
+
|
|
314
|
+
add(path, index, selector, :breaking, "nested-dark-block",
|
|
315
|
+
"This .dark block is nested inside :root, so it compiles to `:root .dark` and\n" \
|
|
316
|
+
"never matches <html class=\"dark\">: dark mode does not apply. Move it out to\n" \
|
|
317
|
+
"the top level, after the closing brace of :root:\n" \
|
|
318
|
+
" :root { ... }\n" \
|
|
319
|
+
" .dark { ... }",
|
|
320
|
+
"0.7.2")
|
|
321
|
+
end
|
|
322
|
+
|
|
284
323
|
# Checks that read the same in CSS, ERB and JS.
|
|
285
324
|
def scan_shared(path, index, line)
|
|
286
325
|
if PRESENCE_ACTIVE.match?(line)
|
|
@@ -294,20 +333,16 @@ module MaquinaComponents
|
|
|
294
333
|
"Use the value form of the variant: data-[active=true]:... - the bare\n" \
|
|
295
334
|
"data-[active] variant relies on an attribute 0.6.0 no longer emits when false.")
|
|
296
335
|
end
|
|
297
|
-
|
|
298
|
-
if SVG_DATA_URI.match?(line) && !MARK_TOKEN_ASSIGNMENT.match?(line)
|
|
299
|
-
add(path, index, line, :breaking, "restated-svg-uri",
|
|
300
|
-
"0.6.0 exposes these marks as overridable custom properties:\n" \
|
|
301
|
-
"--checkbox-mark-image, --checkbox-indeterminate-image, --radio-mark-image,\n" \
|
|
302
|
-
"--switch-thumb-image, --select-chevron-image. Assign your SVG to the token\n" \
|
|
303
|
-
"instead of restating the engine's rule.")
|
|
304
|
-
end
|
|
305
336
|
end
|
|
306
337
|
|
|
307
338
|
def scan_markup(path)
|
|
308
339
|
read(path).each_with_index do |line, index|
|
|
309
340
|
scan_shared(path, index, line)
|
|
310
341
|
|
|
342
|
+
if SVG_DATA_URI.match?(line) && MARKUP_COMPONENT_HOOK.match?(line)
|
|
343
|
+
add(path, index, line, :breaking, "restated-svg-uri", RESTATED_SVG_SUGGESTION)
|
|
344
|
+
end
|
|
345
|
+
|
|
311
346
|
# Cross-file signals for check_invalid_without_aria.
|
|
312
347
|
@aria_invalid_seen ||= ARIA_INVALID.match?(line)
|
|
313
348
|
if ERROR_PART.match?(line) || FIELD_WITH_ERRORS.match?(line)
|