Skip to content

Commit c7c019a

Browse files
fix(theme): add missing --destructive-foreground CSS variable
Add --destructive-foreground variable to all themes for proper text contrast on destructive buttons. Uses oklch(0.985 0 0) for consistent white text across light and dark themes.
1 parent d0d5fe6 commit c7c019a

File tree

2 files changed

+15
-0
lines changed

2 files changed

+15
-0
lines changed

styles/globals.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
--color-accent: var(--accent);
3838
--color-accent-foreground: var(--accent-foreground);
3939
--color-destructive: var(--destructive);
40+
--color-destructive-foreground: var(--destructive-foreground);
4041
--color-border: var(--border);
4142
--color-input: var(--input);
4243
--color-ring: var(--ring);
@@ -73,6 +74,7 @@
7374
--accent: oklch(0.97 0 0);
7475
--accent-foreground: oklch(0.205 0 0);
7576
--destructive: oklch(0.577 0.245 27.325);
77+
--destructive-foreground: oklch(0.985 0 0);
7678
--border: oklch(0.922 0 0);
7779
--input: oklch(0.922 0 0);
7880
--ring: oklch(0.708 0 0);
@@ -108,6 +110,7 @@
108110
--accent: oklch(0.269 0 0);
109111
--accent-foreground: oklch(0.985 0 0);
110112
--destructive: oklch(0.704 0.191 22.216);
113+
--destructive-foreground: oklch(0.985 0 0);
111114
--border: oklch(1 0 0 / 10%);
112115
--input: oklch(1 0 0 / 15%);
113116
--ring: oklch(0.556 0 0);

styles/themes.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
--accent: oklch(0.72 0.15 70);
3030
--accent-foreground: oklch(0.15 0.02 50);
3131
--destructive: oklch(0.55 0.22 27);
32+
--destructive-foreground: oklch(0.985 0 0);
3233
--border: oklch(0.9 0.02 75);
3334
--input: oklch(0.92 0.02 75);
3435
--ring: oklch(0.65 0.18 65);
@@ -52,6 +53,7 @@
5253
--accent: oklch(0.68 0.04 55);
5354
--accent-foreground: oklch(0.15 0.01 50);
5455
--destructive: oklch(0.55 0.22 27);
56+
--destructive-foreground: oklch(0.985 0 0);
5557
--border: oklch(0.9 0.01 55);
5658
--input: oklch(0.92 0.01 55);
5759
--ring: oklch(0.55 0.05 55);
@@ -75,6 +77,7 @@
7577
--accent: oklch(0.72 0.14 158);
7678
--accent-foreground: oklch(0.12 0.03 155);
7779
--destructive: oklch(0.55 0.22 27);
80+
--destructive-foreground: oklch(0.985 0 0);
7881
--border: oklch(0.9 0.015 155);
7982
--input: oklch(0.92 0.015 155);
8083
--ring: oklch(0.65 0.17 160);
@@ -98,6 +101,7 @@
98101
--accent: oklch(0.7 0.14 215);
99102
--accent-foreground: oklch(0.12 0.03 220);
100103
--destructive: oklch(0.55 0.22 27);
104+
--destructive-foreground: oklch(0.985 0 0);
101105
--border: oklch(0.9 0.012 218);
102106
--input: oklch(0.92 0.012 218);
103107
--ring: oklch(0.62 0.18 220);
@@ -121,6 +125,7 @@
121125
--accent: oklch(0.72 0.16 282);
122126
--accent-foreground: oklch(0.12 0.04 285);
123127
--destructive: oklch(0.55 0.22 27);
128+
--destructive-foreground: oklch(0.985 0 0);
124129
--border: oklch(0.9 0.015 288);
125130
--input: oklch(0.92 0.015 288);
126131
--ring: oklch(0.65 0.2 285);
@@ -144,6 +149,7 @@
144149
--accent: oklch(0.7 0.18 358);
145150
--accent-foreground: oklch(0.12 0.04 350);
146151
--destructive: oklch(0.55 0.22 27);
152+
--destructive-foreground: oklch(0.985 0 0);
147153
--border: oklch(0.9 0.015 352);
148154
--input: oklch(0.92 0.015 352);
149155
--ring: oklch(0.6 0.22 5);
@@ -171,6 +177,7 @@
171177
--accent: oklch(0.45 0.15 262);
172178
--accent-foreground: oklch(0.95 0.01 250);
173179
--destructive: oklch(0.6 0.2 22);
180+
--destructive-foreground: oklch(0.985 0 0);
174181
--border: oklch(0.25 0.03 258);
175182
--input: oklch(0.22 0.028 258);
176183
--ring: oklch(0.55 0.2 260);
@@ -194,6 +201,7 @@
194201
--accent: oklch(0.42 0.015 240);
195202
--accent-foreground: oklch(0.95 0 0);
196203
--destructive: oklch(0.6 0.2 22);
204+
--destructive-foreground: oklch(0.985 0 0);
197205
--border: oklch(0.28 0 0);
198206
--input: oklch(0.24 0 0);
199207
--ring: oklch(0.55 0.02 240);
@@ -217,6 +225,7 @@
217225
--accent: oklch(0.42 0.11 146);
218226
--accent-foreground: oklch(0.95 0.01 140);
219227
--destructive: oklch(0.6 0.2 22);
228+
--destructive-foreground: oklch(0.985 0 0);
220229
--border: oklch(0.25 0.03 143);
221230
--input: oklch(0.22 0.028 143);
222231
--ring: oklch(0.5 0.14 145);
@@ -240,6 +249,7 @@
240249
--accent: oklch(0.45 0.1 202);
241250
--accent-foreground: oklch(0.95 0.01 195);
242251
--destructive: oklch(0.6 0.2 22);
252+
--destructive-foreground: oklch(0.985 0 0);
243253
--border: oklch(0.25 0.03 198);
244254
--input: oklch(0.22 0.028 198);
245255
--ring: oklch(0.52 0.12 200);
@@ -263,6 +273,7 @@
263273
--accent: oklch(0.45 0.18 302);
264274
--accent-foreground: oklch(0.95 0.01 295);
265275
--destructive: oklch(0.6 0.2 22);
276+
--destructive-foreground: oklch(0.985 0 0);
266277
--border: oklch(0.25 0.04 298);
267278
--input: oklch(0.22 0.038 298);
268279
--ring: oklch(0.52 0.22 300);
@@ -286,6 +297,7 @@
286297
--accent: oklch(0.45 0.13 42);
287298
--accent-foreground: oklch(0.95 0.01 35);
288299
--destructive: oklch(0.6 0.2 22);
300+
--destructive-foreground: oklch(0.985 0 0);
289301
--border: oklch(0.25 0.03 38);
290302
--input: oklch(0.22 0.028 38);
291303
--ring: oklch(0.52 0.16 40);

0 commit comments

Comments
 (0)