studio-engine 0.62.2 → 0.62.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 +4 -4
- data/lib/studio/theme_resolver.rb +34 -2
- data/lib/studio/version.rb +1 -1
- data/tailwind/studio.tailwind.config.js +5 -0
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 158600e252830f127db7e080529137d7082fa9b403c45f3a9f2231ab57c6c65f
|
|
4
|
+
data.tar.gz: 3f52e2bc6cc7c0cf6fdced63b9eac292bfd52c798548d20a8ba099cb641f3759
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: fb1378d6c1aa7515925277eb359664daf6bb15d16f5fcec271dd5381dfe86a10bd85ac9224a2df2b0a57bdff1973d976ba204ae4596c156335102600cb7e867a
|
|
7
|
+
data.tar.gz: 7c9c62ab705a93b178bf32a14bcd9392ea9c97cc7877f8d5defa1a49ced902e9dab8944744250601e15d062ffca2119305cc058958f25784c7802623d06cbcc6
|
|
@@ -31,6 +31,7 @@ module Studio
|
|
|
31
31
|
dark_base = colors[:dark] || "#1A1535"
|
|
32
32
|
primary = colors[:primary] || "#8E82FE"
|
|
33
33
|
border_rgb = ColorScale.lighten(dark_base, 0.30)
|
|
34
|
+
danger = colors[:danger] || "#EF4444"
|
|
34
35
|
|
|
35
36
|
{
|
|
36
37
|
"--color-page" => dark_base,
|
|
@@ -58,7 +59,22 @@ module Studio
|
|
|
58
59
|
"--color-cta-hover" => ColorScale.darken(primary, 0.30),
|
|
59
60
|
"--color-success" => colors[:success] || "#4BAF50",
|
|
60
61
|
"--color-warning" => colors[:warning] || "#FF7C47",
|
|
61
|
-
"--color-danger" =>
|
|
62
|
+
"--color-danger" => danger,
|
|
63
|
+
# THE DANGER *INK*, which is not the danger *colour*. --color-danger is a
|
|
64
|
+
# brand fill (button backgrounds, borders) and is free to be vivid;
|
|
65
|
+
# --color-danger-ink is the same red used as TEXT, where it must clear
|
|
66
|
+
# WCAG AA 4.5:1 on every surface it can land on.
|
|
67
|
+
#
|
|
68
|
+
# No STATIC red clears AA on BOTH themes — measured: text-red-300 is
|
|
69
|
+
# 1.92:1 light / 5.81 dark, text-red-400 2.77 / 4.03, #EF4444 3.76 / 2.96,
|
|
70
|
+
# text-red-600 4.77 / 2.34. So it is DERIVED per theme by the same bounded
|
|
71
|
+
# search that already produces --color-text-secondary and --color-text-muted.
|
|
72
|
+
#
|
|
73
|
+
# start: 0.0 is deliberate — the search tries the operator's actual danger
|
|
74
|
+
# colour FIRST and blends only as far as AA demands, so a theme whose red
|
|
75
|
+
# already passes keeps its exact brand hex.
|
|
76
|
+
"--color-danger-ink" => contrast_ink(danger, direction: :lighten, start: 0.0, target: 4.5,
|
|
77
|
+
against: dark_surfaces(dark_base)),
|
|
62
78
|
"--color-accent" => colors[:accent] || "#F72585"
|
|
63
79
|
}
|
|
64
80
|
end
|
|
@@ -116,6 +132,7 @@ module Studio
|
|
|
116
132
|
def light_mode_vars
|
|
117
133
|
light_base = colors[:light] || "#f8fafc"
|
|
118
134
|
primary = colors[:primary] || "#8E82FE"
|
|
135
|
+
danger = colors[:danger] || "#EF4444"
|
|
119
136
|
|
|
120
137
|
{
|
|
121
138
|
"--color-page" => light_base,
|
|
@@ -138,7 +155,22 @@ module Studio
|
|
|
138
155
|
"--color-cta-hover" => ColorScale.darken(primary, 0.30),
|
|
139
156
|
"--color-success" => colors[:success] || "#4BAF50",
|
|
140
157
|
"--color-warning" => colors[:warning] || "#FF7C47",
|
|
141
|
-
"--color-danger" =>
|
|
158
|
+
"--color-danger" => danger,
|
|
159
|
+
# THE DANGER *INK*, which is not the danger *colour*. --color-danger is a
|
|
160
|
+
# brand fill (button backgrounds, borders) and is free to be vivid;
|
|
161
|
+
# --color-danger-ink is the same red used as TEXT, where it must clear
|
|
162
|
+
# WCAG AA 4.5:1 on every surface it can land on.
|
|
163
|
+
#
|
|
164
|
+
# No STATIC red clears AA on BOTH themes — measured: text-red-300 is
|
|
165
|
+
# 1.92:1 light / 5.81 dark, text-red-400 2.77 / 4.03, #EF4444 3.76 / 2.96,
|
|
166
|
+
# text-red-600 4.77 / 2.34. So it is DERIVED per theme by the same bounded
|
|
167
|
+
# search that already produces --color-text-secondary and --color-text-muted.
|
|
168
|
+
#
|
|
169
|
+
# start: 0.0 is deliberate — the search tries the operator's actual danger
|
|
170
|
+
# colour FIRST and blends only as far as AA demands, so a theme whose red
|
|
171
|
+
# already passes keeps its exact brand hex.
|
|
172
|
+
"--color-danger-ink" => contrast_ink(danger, direction: :darken, start: 0.0, target: 4.5,
|
|
173
|
+
against: light_surfaces(light_base)),
|
|
142
174
|
"--color-accent" => colors[:accent] || "#F72585"
|
|
143
175
|
}
|
|
144
176
|
end
|
data/lib/studio/version.rb
CHANGED
|
@@ -92,6 +92,11 @@ module.exports = {
|
|
|
92
92
|
body: 'var(--color-text-body)',
|
|
93
93
|
secondary: 'var(--color-text-secondary)',
|
|
94
94
|
muted: 'var(--color-text-muted)',
|
|
95
|
+
// The danger RED as TEXT. Separate from the `danger` brand fill on
|
|
96
|
+
// purpose: a fill can be vivid, but text must clear WCAG AA 4.5:1 on
|
|
97
|
+
// every surface, and no static red does that on BOTH themes. The token
|
|
98
|
+
// is derived per theme by ThemeResolver#contrast_ink.
|
|
99
|
+
'danger-ink': 'var(--color-danger-ink)',
|
|
95
100
|
},
|
|
96
101
|
borderColor: {
|
|
97
102
|
subtle: 'var(--color-border)',
|