Skip to content

Commit b21dd88

Browse files
dcalhoundcalhoun
authored
fix: Theme styles supersede default styles (#183)
Relocate default global CSS variables so they are only loaded when theme styles are disabled. Otherwise, due to the load order of stylesheets, these default variables overrode theme style variables.
1 parent c0960ce commit b21dd88

File tree

2 files changed

+330
-330
lines changed

2 files changed

+330
-330
lines changed

‎src/components/visual-editor/default-theme-styles.scss‎

Lines changed: 330 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,333 @@
1010
.block-editor-default-block-appender__content {
1111
opacity: 0.62; // Match empty post title/rich text placholder style
1212
}
13+
14+
// Default colors and presets.
15+
:root {
16+
--wp--preset--aspect-ratio--square: 1;
17+
--wp--preset--aspect-ratio--4-3: 4/3;
18+
--wp--preset--aspect-ratio--3-4: 3/4;
19+
--wp--preset--aspect-ratio--3-2: 3/2;
20+
--wp--preset--aspect-ratio--2-3: 2/3;
21+
--wp--preset--aspect-ratio--16-9: 16/9;
22+
--wp--preset--aspect-ratio--9-16: 9/16;
23+
--wp--preset--color--black: #000000;
24+
--wp--preset--color--cyan-bluish-gray: #abb8c3;
25+
--wp--preset--color--white: #ffffff;
26+
--wp--preset--color--pale-pink: #f78da7;
27+
--wp--preset--color--vivid-red: #cf2e2e;
28+
--wp--preset--color--luminous-vivid-orange: #ff6900;
29+
--wp--preset--color--luminous-vivid-amber: #fcb900;
30+
--wp--preset--color--light-green-cyan: #7bdcb5;
31+
--wp--preset--color--vivid-green-cyan: #00d084;
32+
--wp--preset--color--pale-cyan-blue: #8ed1fc;
33+
--wp--preset--color--vivid-cyan-blue: #0693e3;
34+
--wp--preset--color--vivid-purple: #9b51e0;
35+
--wp--preset--color--dark-gray: #28303d;
36+
--wp--preset--color--gray: #39414d;
37+
--wp--preset--color--green: #d1e4dd;
38+
--wp--preset--color--blue: #d1dfe4;
39+
--wp--preset--color--purple: #d1d1e4;
40+
--wp--preset--color--red: #e4d1d1;
41+
--wp--preset--color--orange: #e4dad1;
42+
--wp--preset--color--yellow: #eeeadd;
43+
--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(
44+
135deg,
45+
rgba(6, 147, 227, 1) 0%,
46+
rgb(155, 81, 224) 100%
47+
);
48+
--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(
49+
135deg,
50+
rgb(122, 220, 180) 0%,
51+
rgb(0, 208, 130) 100%
52+
);
53+
--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(
54+
135deg,
55+
rgba(252, 185, 0, 1) 0%,
56+
rgba(255, 105, 0, 1) 100%
57+
);
58+
--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(
59+
135deg,
60+
rgba(255, 105, 0, 1) 0%,
61+
rgb(207, 46, 46) 100%
62+
);
63+
--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(
64+
135deg,
65+
rgb(238, 238, 238) 0%,
66+
rgb(169, 184, 195) 100%
67+
);
68+
--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(
69+
135deg,
70+
rgb(74, 234, 220) 0%,
71+
rgb(151, 120, 209) 20%,
72+
rgb(207, 42, 186) 40%,
73+
rgb(238, 44, 130) 60%,
74+
rgb(251, 105, 98) 80%,
75+
rgb(254, 248, 76) 100%
76+
);
77+
--wp--preset--gradient--blush-light-purple: linear-gradient(
78+
135deg,
79+
rgb(255, 206, 236) 0%,
80+
rgb(152, 150, 240) 100%
81+
);
82+
--wp--preset--gradient--blush-bordeaux: linear-gradient(
83+
135deg,
84+
rgb(254, 205, 165) 0%,
85+
rgb(254, 45, 45) 50%,
86+
rgb(107, 0, 62) 100%
87+
);
88+
--wp--preset--gradient--luminous-dusk: linear-gradient(
89+
135deg,
90+
rgb(255, 203, 112) 0%,
91+
rgb(199, 81, 192) 50%,
92+
rgb(65, 88, 208) 100%
93+
);
94+
--wp--preset--gradient--pale-ocean: linear-gradient(
95+
135deg,
96+
rgb(255, 245, 203) 0%,
97+
rgb(182, 227, 212) 50%,
98+
rgb(51, 167, 181) 100%
99+
);
100+
--wp--preset--gradient--electric-grass: linear-gradient(
101+
135deg,
102+
rgb(202, 248, 128) 0%,
103+
rgb(113, 206, 126) 100%
104+
);
105+
--wp--preset--gradient--midnight: linear-gradient(
106+
135deg,
107+
rgb(2, 3, 129) 0%,
108+
rgb(40, 116, 252) 100%
109+
);
110+
--wp--preset--gradient--purple-to-yellow: linear-gradient(
111+
160deg,
112+
#d1d1e4 0%,
113+
#eeeadd 100%
114+
);
115+
--wp--preset--gradient--yellow-to-purple: linear-gradient(
116+
160deg,
117+
#eeeadd 0%,
118+
#d1d1e4 100%
119+
);
120+
--wp--preset--gradient--green-to-yellow: linear-gradient(
121+
160deg,
122+
#d1e4dd 0%,
123+
#eeeadd 100%
124+
);
125+
--wp--preset--gradient--yellow-to-green: linear-gradient(
126+
160deg,
127+
#eeeadd 0%,
128+
#d1e4dd 100%
129+
);
130+
--wp--preset--gradient--red-to-yellow: linear-gradient(
131+
160deg,
132+
#e4d1d1 0%,
133+
#eeeadd 100%
134+
);
135+
--wp--preset--gradient--yellow-to-red: linear-gradient(
136+
160deg,
137+
#eeeadd 0%,
138+
#e4d1d1 100%
139+
);
140+
--wp--preset--gradient--purple-to-red: linear-gradient(
141+
160deg,
142+
#d1d1e4 0%,
143+
#e4d1d1 100%
144+
);
145+
--wp--preset--gradient--red-to-purple: linear-gradient(
146+
160deg,
147+
#e4d1d1 0%,
148+
#d1d1e4 100%
149+
);
150+
--wp--preset--font-size--small: 18px;
151+
--wp--preset--font-size--medium: 20px;
152+
--wp--preset--font-size--large: 24px;
153+
--wp--preset--font-size--x-large: 42px;
154+
--wp--preset--font-size--extra-small: 16px;
155+
--wp--preset--font-size--normal: 20px;
156+
--wp--preset--font-size--extra-large: 40px;
157+
--wp--preset--font-size--huge: 96px;
158+
--wp--preset--font-size--gigantic: 144px;
159+
--wp--preset--spacing--20: 0.44rem;
160+
--wp--preset--spacing--30: 0.67rem;
161+
--wp--preset--spacing--40: 1rem;
162+
--wp--preset--spacing--50: 1.5rem;
163+
--wp--preset--spacing--60: 2.25rem;
164+
--wp--preset--spacing--70: 3.38rem;
165+
--wp--preset--spacing--80: 5.06rem;
166+
--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
167+
--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
168+
--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
169+
--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1),
170+
6px 6px rgba(0, 0, 0, 1);
171+
--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);
172+
}
173+
174+
// Color utilities.
175+
.has-black-color {
176+
color: var(--wp--preset--color--black) !important;
177+
}
178+
.has-cyan-bluish-gray-color {
179+
color: var(--wp--preset--color--cyan-bluish-gray) !important;
180+
}
181+
.has-white-color {
182+
color: var(--wp--preset--color--white) !important;
183+
}
184+
.has-pale-pink-color {
185+
color: var(--wp--preset--color--pale-pink) !important;
186+
}
187+
.has-vivid-red-color {
188+
color: var(--wp--preset--color--vivid-red) !important;
189+
}
190+
.has-luminous-vivid-orange-color {
191+
color: var(--wp--preset--color--luminous-vivid-orange) !important;
192+
}
193+
.has-luminous-vivid-amber-color {
194+
color: var(--wp--preset--color--luminous-vivid-amber) !important;
195+
}
196+
.has-light-green-cyan-color {
197+
color: var(--wp--preset--color--light-green-cyan) !important;
198+
}
199+
.has-vivid-green-cyan-color {
200+
color: var(--wp--preset--color--vivid-green-cyan) !important;
201+
}
202+
.has-pale-cyan-blue-color {
203+
color: var(--wp--preset--color--pale-cyan-blue) !important;
204+
}
205+
.has-vivid-cyan-blue-color {
206+
color: var(--wp--preset--color--vivid-cyan-blue) !important;
207+
}
208+
.has-vivid-purple-color {
209+
color: var(--wp--preset--color--vivid-purple) !important;
210+
}
211+
.has-black-background-color {
212+
background-color: var(--wp--preset--color--black) !important;
213+
}
214+
.has-cyan-bluish-gray-background-color {
215+
background-color: var(--wp--preset--color--cyan-bluish-gray) !important;
216+
}
217+
.has-white-background-color {
218+
background-color: var(--wp--preset--color--white) !important;
219+
}
220+
.has-pale-pink-background-color {
221+
background-color: var(--wp--preset--color--pale-pink) !important;
222+
}
223+
.has-vivid-red-background-color {
224+
background-color: var(--wp--preset--color--vivid-red) !important;
225+
}
226+
.has-luminous-vivid-orange-background-color {
227+
background-color: var(
228+
--wp--preset--color--luminous-vivid-orange
229+
) !important;
230+
}
231+
.has-luminous-vivid-amber-background-color {
232+
background-color: var(--wp--preset--color--luminous-vivid-amber) !important;
233+
}
234+
.has-light-green-cyan-background-color {
235+
background-color: var(--wp--preset--color--light-green-cyan) !important;
236+
}
237+
.has-vivid-green-cyan-background-color {
238+
background-color: var(--wp--preset--color--vivid-green-cyan) !important;
239+
}
240+
.has-pale-cyan-blue-background-color {
241+
background-color: var(--wp--preset--color--pale-cyan-blue) !important;
242+
}
243+
.has-vivid-cyan-blue-background-color {
244+
background-color: var(--wp--preset--color--vivid-cyan-blue) !important;
245+
}
246+
.has-vivid-purple-background-color {
247+
background-color: var(--wp--preset--color--vivid-purple) !important;
248+
}
249+
.has-black-border-color {
250+
border-color: var(--wp--preset--color--black) !important;
251+
}
252+
.has-cyan-bluish-gray-border-color {
253+
border-color: var(--wp--preset--color--cyan-bluish-gray) !important;
254+
}
255+
.has-white-border-color {
256+
border-color: var(--wp--preset--color--white) !important;
257+
}
258+
.has-pale-pink-border-color {
259+
border-color: var(--wp--preset--color--pale-pink) !important;
260+
}
261+
.has-vivid-red-border-color {
262+
border-color: var(--wp--preset--color--vivid-red) !important;
263+
}
264+
.has-luminous-vivid-orange-border-color {
265+
border-color: var(--wp--preset--color--luminous-vivid-orange) !important;
266+
}
267+
.has-luminous-vivid-amber-border-color {
268+
border-color: var(--wp--preset--color--luminous-vivid-amber) !important;
269+
}
270+
.has-light-green-cyan-border-color {
271+
border-color: var(--wp--preset--color--light-green-cyan) !important;
272+
}
273+
.has-vivid-green-cyan-border-color {
274+
border-color: var(--wp--preset--color--vivid-green-cyan) !important;
275+
}
276+
.has-pale-cyan-blue-border-color {
277+
border-color: var(--wp--preset--color--pale-cyan-blue) !important;
278+
}
279+
.has-vivid-cyan-blue-border-color {
280+
border-color: var(--wp--preset--color--vivid-cyan-blue) !important;
281+
}
282+
.has-vivid-purple-border-color {
283+
border-color: var(--wp--preset--color--vivid-purple) !important;
284+
}
285+
.has-vivid-cyan-blue-to-vivid-purple-gradient-background {
286+
background: var(
287+
--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple
288+
) !important;
289+
}
290+
.has-light-green-cyan-to-vivid-green-cyan-gradient-background {
291+
background: var(
292+
--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan
293+
) !important;
294+
}
295+
.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background {
296+
background: var(
297+
--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange
298+
) !important;
299+
}
300+
.has-luminous-vivid-orange-to-vivid-red-gradient-background {
301+
background: var(
302+
--wp--preset--gradient--luminous-vivid-orange-to-vivid-red
303+
) !important;
304+
}
305+
.has-very-light-gray-to-cyan-bluish-gray-gradient-background {
306+
background: var(
307+
--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray
308+
) !important;
309+
}
310+
.has-cool-to-warm-spectrum-gradient-background {
311+
background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;
312+
}
313+
.has-blush-light-purple-gradient-background {
314+
background: var(--wp--preset--gradient--blush-light-purple) !important;
315+
}
316+
.has-blush-bordeaux-gradient-background {
317+
background: var(--wp--preset--gradient--blush-bordeaux) !important;
318+
}
319+
.has-luminous-dusk-gradient-background {
320+
background: var(--wp--preset--gradient--luminous-dusk) !important;
321+
}
322+
.has-pale-ocean-gradient-background {
323+
background: var(--wp--preset--gradient--pale-ocean) !important;
324+
}
325+
.has-electric-grass-gradient-background {
326+
background: var(--wp--preset--gradient--electric-grass) !important;
327+
}
328+
.has-midnight-gradient-background {
329+
background: var(--wp--preset--gradient--midnight) !important;
330+
}
331+
.has-small-font-size {
332+
font-size: var(--wp--preset--font-size--small) !important;
333+
}
334+
.has-medium-font-size {
335+
font-size: var(--wp--preset--font-size--medium) !important;
336+
}
337+
.has-large-font-size {
338+
font-size: var(--wp--preset--font-size--large) !important;
339+
}
340+
.has-x-large-font-size {
341+
font-size: var(--wp--preset--font-size--x-large) !important;
342+
}

0 commit comments

Comments
 (0)