@relements/core 0.2.0 → 0.3.0
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.
- package/dist/themes/renascent.css +1 -1
- package/package.json +1 -1
- package/src/themes/renascent.css +160 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--re-color-bg:#0f131a;--re-color-bg-subtle:#171c26;--re-color-bg-muted:#1f2430;--re-color-surface:#171c26;--re-color-text:#f8fafc;--re-color-text-muted:#97a3b4;--re-color-text-subtle:#6b7a90;--re-color-border:#29303d;--re-color-border-strong:#353d4d;--re-color-accent-50:#eff6ff;--re-color-accent-100:#dbeafe;--re-color-accent-200:#bdd6fe;--re-color-accent-300:#93c3fd;--re-color-accent-400:#60a5fa;--re-color-accent-500:#60a5fa;--re-color-accent-600:#3c83f6;--re-color-accent-700:#2563eb;--re-color-accent-800:#1d4ed8;--re-color-accent-900:#1e3a8a;--re-color-link:#3c83f6;--re-color-link-hover:#60a5fa;--re-color-link-visited:#a78bfa;--re-color-focus-ring:#3c83f6;--re-color-text-on-accent:#
|
|
1
|
+
:root{--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--re-color-bg:#0f131a;--re-color-bg-subtle:#171c26;--re-color-bg-muted:#1f2430;--re-color-surface:#171c26;--re-color-text:#f8fafc;--re-color-text-muted:#97a3b4;--re-color-text-subtle:#6b7a90;--re-color-border:#29303d;--re-color-border-strong:#353d4d;--re-color-accent-50:#eff6ff;--re-color-accent-100:#dbeafe;--re-color-accent-200:#bdd6fe;--re-color-accent-300:#93c3fd;--re-color-accent-400:#60a5fa;--re-color-accent-500:#60a5fa;--re-color-accent-600:#3c83f6;--re-color-accent-700:#2563eb;--re-color-accent-800:#1d4ed8;--re-color-accent-900:#1e3a8a;--re-color-link:#3c83f6;--re-color-link-hover:#60a5fa;--re-color-link-visited:#a78bfa;--re-color-focus-ring:#3c83f6;--re-color-text-on-accent:#fff;--re-color-success-500:#2fe9d0;--re-color-success-600:#0fd4bb;--re-color-success-700:#0ab8a2;--re-color-warning-500:#f9cf53;--re-color-warning-600:#f0b929;--re-color-warning-700:#d4a020;--re-color-danger-500:#ef4444;--re-color-danger-600:#dc2626;--re-color-danger-700:#b91c1c;--re-color-info-surface:color-mix(in oklab, #3c83f6 20%, var(--re-color-bg));--re-color-info-border:#60a5fa;--re-color-info-text:#93c3fd;--re-color-success-surface:color-mix(in oklab, #2fe9d0 20%, var(--re-color-bg));--re-color-success-border:#2fe9d0;--re-color-success-text:#2fe9d0;--re-color-warning-surface:color-mix(in oklab, #f9cf53 20%, var(--re-color-bg));--re-color-warning-border:#f9cf53;--re-color-warning-text:#f9cf53;--re-color-danger-surface:color-mix(in oklab, #ef4444 20%, var(--re-color-bg));--re-color-danger-border:#ef4444;--re-color-danger-text:#f87171;--re-focus-ring-offset:0px;--re-shadow-focus:0 0 0 2px var(--re-color-focus-ring);--re-color-selection-bg:#3c83f64d;--re-color-selection-text:#f8fafc;--re-color-text-danger:#f87171;--re-color-border-danger:#ef4444;--re-color-phoenix:#f3753f;--re-color-phoenix-light:#f9a07a;--re-color-phoenix-dark:#d45a26;--re-color-purple:#a855f7;--re-color-purple-light:#c084fc;--re-color-purple-dark:#7c3aed;--re-gradient-brand:linear-gradient(135deg, #3c83f6, #a855f7);--re-gradient-phoenix:linear-gradient(135deg, #f3753f, #f9cf53);--re-gradient-hero:linear-gradient(135deg, #3c83f6 0%, #a855f7 50%, #f3753f 100%)}.theme-renascent,.theme-renascent-dark{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--re-color-bg:#0f131a;--re-color-bg-subtle:#171c26;--re-color-bg-muted:#1f2430;--re-color-surface:#171c26;--re-color-text:#f8fafc;--re-color-text-muted:#97a3b4;--re-color-text-subtle:#6b7a90;--re-color-border:#29303d;--re-color-border-strong:#353d4d;--re-color-accent-500:#3c83f6;--re-color-accent-600:#2563eb;--re-color-accent-700:#1d4ed8;--re-color-link:#3c83f6;--re-color-link-hover:#60a5fa;--re-color-focus-ring:#3c83f6;--re-color-text-on-accent:#fff;--re-color-text-danger:#f87171;--re-color-border-danger:#ef4444;--re-color-success-500:#2fe9d0;--re-color-success-600:#0fd4bb;--re-color-success-700:#0ab8a2;--re-color-warning-500:#f9cf53;--re-color-warning-600:#f0b929;--re-color-warning-700:#d4a020;--re-color-danger-500:#ef4444;--re-color-danger-600:#dc2626;--re-color-danger-700:#b91c1c;--re-color-info-surface:color-mix(in oklab, #3c83f6 20%, var(--re-color-bg));--re-color-info-border:#60a5fa;--re-color-info-text:#93c3fd;--re-color-success-surface:color-mix(in oklab, #2fe9d0 20%, var(--re-color-bg));--re-color-success-border:#2fe9d0;--re-color-success-text:#2fe9d0;--re-color-warning-surface:color-mix(in oklab, #f9cf53 20%, var(--re-color-bg));--re-color-warning-border:#f9cf53;--re-color-warning-text:#f9cf53;--re-color-danger-surface:color-mix(in oklab, #ef4444 20%, var(--re-color-bg));--re-color-danger-border:#ef4444;--re-color-danger-text:#f87171;--re-focus-ring-offset:0px;--re-shadow-focus:0 0 0 2px var(--re-color-focus-ring);--re-color-selection-bg:#3c83f64d;--re-color-selection-text:#f8fafc;background-color:var(--re-color-bg);color:var(--re-color-text)}@media (prefers-color-scheme:light){:root,.theme-renascent{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--re-color-bg:#f6f8fc;--re-color-bg-subtle:#eef2f8;--re-color-bg-muted:#e3e9f2;--re-color-surface:#fff;--re-color-text:#0f131a;--re-color-text-muted:#475569;--re-color-text-subtle:#64748b;--re-color-text-on-accent:#fff;--re-color-accent-600:#2563eb;--re-color-accent-700:#1d4ed8;--re-color-accent-800:#1e40af;--re-color-text-danger:#b91c1c;--re-color-border:#d7dfea;--re-color-border-strong:#c0cad9;--re-color-border-danger:#dc2626;--re-color-link:#2563eb;--re-color-link-hover:#1d4ed8;--re-color-link-visited:#7c3aed;--re-color-focus-ring:#3c83f6;--re-color-selection-bg:#3c83f62e;--re-color-selection-text:#0f131a;--re-focus-ring-offset:2px;--re-shadow-focus:0 0 0 var(--re-focus-ring-offset) var(--re-color-bg), 0 0 0 calc(var(--re-focus-ring-offset) + var(--re-focus-ring-width)) var(--re-color-focus-ring);--re-color-info-surface:color-mix(in oklab, #3c83f6 12%, var(--re-color-bg));--re-color-info-border:#3c83f6;--re-color-info-text:#2563eb;--re-color-success-surface:color-mix(in oklab, var(--re-color-success-500) 12%, var(--re-color-bg));--re-color-success-border:#0fd4bb;--re-color-success-text:#0f766e;--re-color-warning-surface:color-mix(in oklab, var(--re-color-warning-500) 12%, var(--re-color-bg));--re-color-warning-border:#f0b929;--re-color-warning-text:#b45309;--re-color-danger-surface:color-mix(in oklab, var(--re-color-danger-500) 12%, var(--re-color-bg));--re-color-danger-border:#dc2626;--re-color-danger-text:#b91c1c}}.theme-renascent-light{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--re-color-bg:#f6f8fc;--re-color-bg-subtle:#eef2f8;--re-color-bg-muted:#e3e9f2;--re-color-surface:#fff;--re-color-text:#0f131a;--re-color-text-muted:#475569;--re-color-text-subtle:#64748b;--re-color-text-on-accent:#fff;--re-color-accent-600:#2563eb;--re-color-accent-700:#1d4ed8;--re-color-accent-800:#1e40af;--re-color-text-danger:#b91c1c;--re-color-border:#d7dfea;--re-color-border-strong:#c0cad9;--re-color-border-danger:#dc2626;--re-color-link:#2563eb;--re-color-link-hover:#1d4ed8;--re-color-link-visited:#7c3aed;--re-color-focus-ring:#3c83f6;--re-color-selection-bg:#3c83f62e;--re-color-selection-text:#0f131a;--re-focus-ring-offset:2px;--re-shadow-focus:0 0 0 var(--re-focus-ring-offset) var(--re-color-bg), 0 0 0 calc(var(--re-focus-ring-offset) + var(--re-focus-ring-width)) var(--re-color-focus-ring);--re-color-info-surface:color-mix(in oklab, #3c83f6 12%, var(--re-color-bg));--re-color-info-border:#3c83f6;--re-color-info-text:#2563eb;--re-color-success-surface:color-mix(in oklab, var(--re-color-success-500) 12%, var(--re-color-bg));--re-color-success-border:#0fd4bb;--re-color-success-text:#0f766e;--re-color-warning-surface:color-mix(in oklab, var(--re-color-warning-500) 12%, var(--re-color-bg));--re-color-warning-border:#f0b929;--re-color-warning-text:#b45309;--re-color-danger-surface:color-mix(in oklab, var(--re-color-danger-500) 12%, var(--re-color-bg));--re-color-danger-border:#dc2626;--re-color-danger-text:#b91c1c;background-color:var(--re-color-bg);color:var(--re-color-text)}.re-button[data-variant=phoenix]{background:var(--re-gradient-phoenix);color:#fff;background-origin:border-box;border-color:#0000}.re-button[data-variant=phoenix]:hover{filter:brightness(1.12)}.re-button[data-variant=phoenix]:active{filter:brightness(.9)}.re-button[data-variant=phoenix]:focus-visible{border-color:#0000}.re-button[data-variant=phoenix]:disabled,.re-button[data-variant=phoenix][aria-disabled=true]{filter:none;opacity:.55}.re-button[data-variant=brand]{background:var(--re-gradient-brand);color:#fff;background-origin:border-box;border-color:#0000}.re-button[data-variant=brand]:hover{filter:brightness(1.12)}.re-button[data-variant=brand]:active{filter:brightness(.9)}.re-button[data-variant=brand]:focus-visible{border-color:#0000}.re-button[data-variant=brand]:disabled,.re-button[data-variant=brand][aria-disabled=true]{filter:none;opacity:.55}
|
package/package.json
CHANGED
package/src/themes/renascent.css
CHANGED
|
@@ -54,7 +54,9 @@
|
|
|
54
54
|
--re-color-link-hover: #60a5fa;
|
|
55
55
|
--re-color-link-visited: #a78bfa;
|
|
56
56
|
--re-color-focus-ring: #3c83f6;
|
|
57
|
-
|
|
57
|
+
/* White on accent-600 (#2563eb) = 5.17:1; the dark navy used elsewhere
|
|
58
|
+
only reaches 3.6:1 on the blue/red button fills, below WCAG AA. */
|
|
59
|
+
--re-color-text-on-accent: #ffffff;
|
|
58
60
|
|
|
59
61
|
/* ----- Semantic feedback ---------------------------------- */
|
|
60
62
|
/* Success: teal (hsl(172 81% 55%) — their --success) */
|
|
@@ -72,6 +74,25 @@
|
|
|
72
74
|
--re-color-danger-600: #dc2626;
|
|
73
75
|
--re-color-danger-700: #b91c1c;
|
|
74
76
|
|
|
77
|
+
/* ----- Status surfaces (dark) -----------------------------
|
|
78
|
+
Defined explicitly so they mix against this theme's dark bg.
|
|
79
|
+
Without these they inherit the un-themed :root tokens, whose
|
|
80
|
+
color-mix captured the light-mode bg → light alert surfaces
|
|
81
|
+
under dark-section body text (≈1.05:1). White body text on
|
|
82
|
+
these 20%/dark mixes clears AA (≥4.5:1). */
|
|
83
|
+
--re-color-info-surface: color-mix(in oklab, #3c83f6 20%, var(--re-color-bg));
|
|
84
|
+
--re-color-info-border: #60a5fa;
|
|
85
|
+
--re-color-info-text: #93c3fd;
|
|
86
|
+
--re-color-success-surface: color-mix(in oklab, #2fe9d0 20%, var(--re-color-bg));
|
|
87
|
+
--re-color-success-border: #2fe9d0;
|
|
88
|
+
--re-color-success-text: #2fe9d0;
|
|
89
|
+
--re-color-warning-surface: color-mix(in oklab, #f9cf53 20%, var(--re-color-bg));
|
|
90
|
+
--re-color-warning-border: #f9cf53;
|
|
91
|
+
--re-color-warning-text: #f9cf53;
|
|
92
|
+
--re-color-danger-surface: color-mix(in oklab, #ef4444 20%, var(--re-color-bg));
|
|
93
|
+
--re-color-danger-border: #ef4444;
|
|
94
|
+
--re-color-danger-text: #f87171;
|
|
95
|
+
|
|
75
96
|
/* ----- Focus ring on dark background ----------------------
|
|
76
97
|
Remove the offset gap: the "white gap" trick is for light
|
|
77
98
|
themes. On dark bg, offset + border = double blue line. */
|
|
@@ -111,7 +132,8 @@
|
|
|
111
132
|
/* ============================================================
|
|
112
133
|
Scoped class — apply on any container instead of :root
|
|
113
134
|
============================================================ */
|
|
114
|
-
.theme-renascent
|
|
135
|
+
.theme-renascent,
|
|
136
|
+
.theme-renascent-dark {
|
|
115
137
|
color-scheme: dark;
|
|
116
138
|
|
|
117
139
|
--re-color-bg: #0f131a;
|
|
@@ -129,7 +151,7 @@
|
|
|
129
151
|
--re-color-link: #3c83f6;
|
|
130
152
|
--re-color-link-hover: #60a5fa;
|
|
131
153
|
--re-color-focus-ring: #3c83f6;
|
|
132
|
-
--re-color-text-on-accent: #
|
|
154
|
+
--re-color-text-on-accent: #ffffff;
|
|
133
155
|
--re-color-text-danger: #f87171;
|
|
134
156
|
--re-color-border-danger: #ef4444;
|
|
135
157
|
--re-color-success-500: #2fe9d0;
|
|
@@ -141,6 +163,18 @@
|
|
|
141
163
|
--re-color-danger-500: #ef4444;
|
|
142
164
|
--re-color-danger-600: #dc2626;
|
|
143
165
|
--re-color-danger-700: #b91c1c;
|
|
166
|
+
--re-color-info-surface: color-mix(in oklab, #3c83f6 20%, var(--re-color-bg));
|
|
167
|
+
--re-color-info-border: #60a5fa;
|
|
168
|
+
--re-color-info-text: #93c3fd;
|
|
169
|
+
--re-color-success-surface: color-mix(in oklab, #2fe9d0 20%, var(--re-color-bg));
|
|
170
|
+
--re-color-success-border: #2fe9d0;
|
|
171
|
+
--re-color-success-text: #2fe9d0;
|
|
172
|
+
--re-color-warning-surface: color-mix(in oklab, #f9cf53 20%, var(--re-color-bg));
|
|
173
|
+
--re-color-warning-border: #f9cf53;
|
|
174
|
+
--re-color-warning-text: #f9cf53;
|
|
175
|
+
--re-color-danger-surface: color-mix(in oklab, #ef4444 20%, var(--re-color-bg));
|
|
176
|
+
--re-color-danger-border: #ef4444;
|
|
177
|
+
--re-color-danger-text: #f87171;
|
|
144
178
|
--re-focus-ring-offset: 0px;
|
|
145
179
|
--re-shadow-focus: 0 0 0 2px var(--re-color-focus-ring);
|
|
146
180
|
--re-color-selection-bg: rgba(60, 131, 246, 0.3);
|
|
@@ -150,6 +184,125 @@
|
|
|
150
184
|
color: var(--re-color-text);
|
|
151
185
|
}
|
|
152
186
|
|
|
187
|
+
/* LIGHT — when the OS prefers light (global import + the auto .theme-renascent). */
|
|
188
|
+
@media (prefers-color-scheme: light) {
|
|
189
|
+
:root,
|
|
190
|
+
.theme-renascent {
|
|
191
|
+
color-scheme: light;
|
|
192
|
+
--re-color-bg: #f6f8fc;
|
|
193
|
+
--re-color-bg-subtle: #eef2f8;
|
|
194
|
+
--re-color-bg-muted: #e3e9f2;
|
|
195
|
+
--re-color-surface: #ffffff;
|
|
196
|
+
--re-color-text: #0f131a;
|
|
197
|
+
--re-color-text-muted: #475569;
|
|
198
|
+
--re-color-text-subtle: #64748b;
|
|
199
|
+
--re-color-text-on-accent: #ffffff;
|
|
200
|
+
/* On light bg, white-on-accent buttons need accent-600 = #2563eb
|
|
201
|
+
(white 5.17:1). The global #3c83f6 only reaches 3.64:1. */
|
|
202
|
+
--re-color-accent-600: #2563eb;
|
|
203
|
+
--re-color-accent-700: #1d4ed8;
|
|
204
|
+
--re-color-accent-800: #1e40af;
|
|
205
|
+
--re-color-text-danger: #b91c1c;
|
|
206
|
+
--re-color-border: #d7dfea;
|
|
207
|
+
--re-color-border-strong: #c0cad9;
|
|
208
|
+
--re-color-border-danger: #dc2626;
|
|
209
|
+
--re-color-link: #2563eb;
|
|
210
|
+
--re-color-link-hover: #1d4ed8;
|
|
211
|
+
--re-color-link-visited: #7c3aed;
|
|
212
|
+
--re-color-focus-ring: #3c83f6;
|
|
213
|
+
--re-color-selection-bg: rgba(60, 131, 246, 0.18);
|
|
214
|
+
--re-color-selection-text: #0f131a;
|
|
215
|
+
--re-focus-ring-offset: 2px;
|
|
216
|
+
--re-shadow-focus:
|
|
217
|
+
0 0 0 var(--re-focus-ring-offset) var(--re-color-bg),
|
|
218
|
+
0 0 0 calc(var(--re-focus-ring-offset) + var(--re-focus-ring-width))
|
|
219
|
+
var(--re-color-focus-ring);
|
|
220
|
+
--re-color-info-surface: color-mix(in oklab, #3c83f6 12%, var(--re-color-bg));
|
|
221
|
+
--re-color-info-border: #3c83f6;
|
|
222
|
+
--re-color-info-text: #2563eb;
|
|
223
|
+
--re-color-success-surface: color-mix(
|
|
224
|
+
in oklab,
|
|
225
|
+
var(--re-color-success-500) 12%,
|
|
226
|
+
var(--re-color-bg)
|
|
227
|
+
);
|
|
228
|
+
--re-color-success-border: #0fd4bb;
|
|
229
|
+
--re-color-success-text: #0f766e;
|
|
230
|
+
--re-color-warning-surface: color-mix(
|
|
231
|
+
in oklab,
|
|
232
|
+
var(--re-color-warning-500) 12%,
|
|
233
|
+
var(--re-color-bg)
|
|
234
|
+
);
|
|
235
|
+
--re-color-warning-border: #f0b929;
|
|
236
|
+
--re-color-warning-text: #b45309;
|
|
237
|
+
--re-color-danger-surface: color-mix(
|
|
238
|
+
in oklab,
|
|
239
|
+
var(--re-color-danger-500) 12%,
|
|
240
|
+
var(--re-color-bg)
|
|
241
|
+
);
|
|
242
|
+
--re-color-danger-border: #dc2626;
|
|
243
|
+
--re-color-danger-text: #b91c1c;
|
|
244
|
+
}
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
/* LIGHT — forced regardless of OS. */
|
|
248
|
+
.theme-renascent-light {
|
|
249
|
+
color-scheme: light;
|
|
250
|
+
--re-color-bg: #f6f8fc;
|
|
251
|
+
--re-color-bg-subtle: #eef2f8;
|
|
252
|
+
--re-color-bg-muted: #e3e9f2;
|
|
253
|
+
--re-color-surface: #ffffff;
|
|
254
|
+
--re-color-text: #0f131a;
|
|
255
|
+
--re-color-text-muted: #475569;
|
|
256
|
+
--re-color-text-subtle: #64748b;
|
|
257
|
+
--re-color-text-on-accent: #ffffff;
|
|
258
|
+
/* On light bg, white-on-accent buttons need accent-600 = #2563eb
|
|
259
|
+
(white 5.17:1). The global #3c83f6 only reaches 3.64:1. */
|
|
260
|
+
--re-color-accent-600: #2563eb;
|
|
261
|
+
--re-color-accent-700: #1d4ed8;
|
|
262
|
+
--re-color-accent-800: #1e40af;
|
|
263
|
+
--re-color-text-danger: #b91c1c;
|
|
264
|
+
--re-color-border: #d7dfea;
|
|
265
|
+
--re-color-border-strong: #c0cad9;
|
|
266
|
+
--re-color-border-danger: #dc2626;
|
|
267
|
+
--re-color-link: #2563eb;
|
|
268
|
+
--re-color-link-hover: #1d4ed8;
|
|
269
|
+
--re-color-link-visited: #7c3aed;
|
|
270
|
+
--re-color-focus-ring: #3c83f6;
|
|
271
|
+
--re-color-selection-bg: rgba(60, 131, 246, 0.18);
|
|
272
|
+
--re-color-selection-text: #0f131a;
|
|
273
|
+
--re-focus-ring-offset: 2px;
|
|
274
|
+
--re-shadow-focus:
|
|
275
|
+
0 0 0 var(--re-focus-ring-offset) var(--re-color-bg),
|
|
276
|
+
0 0 0 calc(var(--re-focus-ring-offset) + var(--re-focus-ring-width)) var(--re-color-focus-ring);
|
|
277
|
+
--re-color-info-surface: color-mix(in oklab, #3c83f6 12%, var(--re-color-bg));
|
|
278
|
+
--re-color-info-border: #3c83f6;
|
|
279
|
+
--re-color-info-text: #2563eb;
|
|
280
|
+
--re-color-success-surface: color-mix(
|
|
281
|
+
in oklab,
|
|
282
|
+
var(--re-color-success-500) 12%,
|
|
283
|
+
var(--re-color-bg)
|
|
284
|
+
);
|
|
285
|
+
--re-color-success-border: #0fd4bb;
|
|
286
|
+
--re-color-success-text: #0f766e;
|
|
287
|
+
--re-color-warning-surface: color-mix(
|
|
288
|
+
in oklab,
|
|
289
|
+
var(--re-color-warning-500) 12%,
|
|
290
|
+
var(--re-color-bg)
|
|
291
|
+
);
|
|
292
|
+
--re-color-warning-border: #f0b929;
|
|
293
|
+
--re-color-warning-text: #b45309;
|
|
294
|
+
--re-color-danger-surface: color-mix(
|
|
295
|
+
in oklab,
|
|
296
|
+
var(--re-color-danger-500) 12%,
|
|
297
|
+
var(--re-color-bg)
|
|
298
|
+
);
|
|
299
|
+
--re-color-danger-border: #dc2626;
|
|
300
|
+
--re-color-danger-text: #b91c1c;
|
|
301
|
+
|
|
302
|
+
background-color: var(--re-color-bg);
|
|
303
|
+
color: var(--re-color-text);
|
|
304
|
+
}
|
|
305
|
+
|
|
153
306
|
/* ============================================================
|
|
154
307
|
Gradient button variants
|
|
155
308
|
Use data-variant="phoenix" or data-variant="brand" on .re-button.
|
|
@@ -157,12 +310,14 @@
|
|
|
157
310
|
============================================================ */
|
|
158
311
|
.re-button[data-variant="phoenix"] {
|
|
159
312
|
background: var(--re-gradient-phoenix);
|
|
313
|
+
/* Paint the gradient from the border box so the 1px (transparent) border
|
|
314
|
+
doesn't show a seam where the padding-box gradient is clipped. */
|
|
315
|
+
background-origin: border-box;
|
|
160
316
|
color: #fff;
|
|
161
317
|
border-color: transparent;
|
|
162
318
|
}
|
|
163
319
|
.re-button[data-variant="phoenix"]:hover {
|
|
164
320
|
filter: brightness(1.12);
|
|
165
|
-
background: var(--re-gradient-phoenix);
|
|
166
321
|
}
|
|
167
322
|
.re-button[data-variant="phoenix"]:active {
|
|
168
323
|
filter: brightness(0.9);
|
|
@@ -178,12 +333,12 @@
|
|
|
178
333
|
|
|
179
334
|
.re-button[data-variant="brand"] {
|
|
180
335
|
background: var(--re-gradient-brand);
|
|
336
|
+
background-origin: border-box;
|
|
181
337
|
color: #fff;
|
|
182
338
|
border-color: transparent;
|
|
183
339
|
}
|
|
184
340
|
.re-button[data-variant="brand"]:hover {
|
|
185
341
|
filter: brightness(1.12);
|
|
186
|
-
background: var(--re-gradient-brand);
|
|
187
342
|
}
|
|
188
343
|
.re-button[data-variant="brand"]:active {
|
|
189
344
|
filter: brightness(0.9);
|