Skip to content

Commit d18eb75

Browse files
danalvrzdanalvrz
committed
improve support for VLT6 color system
1 parent d2ecbd2 commit d18eb75

File tree

1 file changed

+97
-109
lines changed

1 file changed

+97
-109
lines changed

‎packages/volto-highlight-block/src/theme/highlight.scss

+97-109
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,25 @@ $light-orange: #fddf63 !default;
1212
$light-green: #c9d465 !default;
1313
$dark-green: #7da048 !default;
1414

15-
$highlight-custom-color-1: var(--highlight-custom-color-1, $medium-blue);
16-
$highlight-custom-color-2: var(--highlight-custom-color-2, $dark-blue);
17-
$highlight-custom-color-3: var(--highlight-custom-color-3, $light-orange);
18-
$highlight-custom-color-4: var(--highlight-custom-color-4, $light-green);
19-
$highlight-custom-color-5: var(--highlight-custom-color-5, $dark-green);
20-
21-
$highlight-images-aspect-ratio: var(--highlight-images-aspect-ratio, 4/3);
22-
$highlight-images-object-position: var(
23-
--highlight-images-object-position,
24-
top left
25-
);
15+
$highlight-custom-color-1: $medium-blue;
16+
$highlight-custom-color-2: $dark-blue;
17+
$highlight-custom-color-3: $light-orange;
18+
$highlight-custom-color-4: $light-green;
19+
$highlight-custom-color-5: $dark-green;
20+
21+
$highlight-images-aspect-ratio: 4/3;
22+
$highlight-images-object-position: top left;
23+
24+
:root {
25+
--highlight-custom-color-1: #55b8da;
26+
--highlight-custom-color-2: #006489;
27+
--highlight-custom-color-3: #fddf63;
28+
--highlight-custom-color-4: #c9d465;
29+
--highlight-custom-color-5: #7da048;
30+
31+
--highlight-images-aspect-ratio: 4/3;
32+
--highlight-images-object-position: top left;
33+
}
2634

2735
.block.highlight {
2836
.ui.container.padded {
@@ -45,9 +53,15 @@ $highlight-images-object-position: var(
4553
img {
4654
width: 100%;
4755
height: auto; // important with width+height img attributes
48-
aspect-ratio: $highlight-images-aspect-ratio;
56+
aspect-ratio: var(
57+
--highlight-images-aspect-ratio,
58+
$highlight-images-aspect-ratio
59+
);
4960
object-fit: cover;
50-
object-position: $highlight-images-object-position;
61+
object-position: var(
62+
--highlight-images-object-position,
63+
$highlight-images-object-position
64+
);
5165
}
5266
}
5367

@@ -86,7 +100,6 @@ $highlight-images-object-position: var(
86100
border-radius: 0;
87101
color: inherit !important;
88102
font-size: 16px;
89-
90103
font-weight: 700;
91104
line-height: 30px;
92105
text-align: center;
@@ -101,68 +114,55 @@ $highlight-images-object-position: var(
101114
}
102115
}
103116

104-
&.has--descriptionColor--highlight-custom-color-1 {
117+
&.has--descriptionColor--highlight-custom-color-1,
118+
&.has--descriptionColor--highlight-custom-color-3,
119+
&.has--descriptionColor--highlight-custom-color-4,
120+
&.has--descriptionColor--highlight-custom-color-5 {
105121
.highlight-description {
106-
background: $highlight-custom-color-1;
107-
color: $black;
122+
color: var(--theme-foreground-color, $black);
108123

109124
h2,
110125
a,
111126
p {
112-
color: $black;
127+
color: var(--theme-foreground-color, $black);
113128
}
114129
}
115130
}
116131

132+
&.has--descriptionColor--highlight-custom-color-1 {
133+
.highlight-description {
134+
background: var(--highlight-custom-color-1, $highlight-custom-color-1);
135+
}
136+
}
137+
117138
&.has--descriptionColor--highlight-custom-color-2 {
118139
.highlight-description {
119-
background: $highlight-custom-color-2;
120-
color: $white;
140+
background: var(--highlight-custom-color-2, $highlight-custom-color-2);
141+
color: var(--theme-foreground-color, $white);
121142

122143
h2,
123144
a,
124145
p {
125-
color: $white;
146+
color: var(--theme-foreground-color, $white);
126147
}
127148
}
128149
}
129150

130151
&.has--descriptionColor--highlight-custom-color-3 {
131152
.highlight-description {
132-
background: $highlight-custom-color-3;
133-
color: $black;
134-
135-
h2,
136-
a,
137-
p {
138-
color: $black;
139-
}
153+
background: var(--highlight-custom-color-3, $highlight-custom-color-3);
140154
}
141155
}
142156

143157
&.has--descriptionColor--highlight-custom-color-4 {
144158
.highlight-description {
145-
background: $highlight-custom-color-4;
146-
color: $black;
147-
148-
h2,
149-
a,
150-
p {
151-
color: $black;
152-
}
159+
background: var(--highlight-custom-color-4, $highlight-custom-color-4);
153160
}
154161
}
155162

156163
&.has--descriptionColor--highlight-custom-color-5 {
157164
.highlight-description {
158-
background: $highlight-custom-color-5;
159-
color: $black;
160-
161-
h2,
162-
a,
163-
p {
164-
color: $black;
165-
}
165+
background: var(--highlight-custom-color-5, $highlight-custom-color-5);
166166
}
167167
}
168168
}
@@ -178,68 +178,51 @@ $highlight-images-object-position: var(
178178
background-color: #ccc !important;
179179
}
180180

181+
.highlight-description {
182+
color: var(--theme-foreground-color, $black);
183+
184+
h2,
185+
a,
186+
p {
187+
color: var(--theme-foreground-color, $black);
188+
}
189+
}
190+
181191
&.has--descriptionColor--highlight-custom-color-1 {
182192
.highlight-description {
183-
background: $highlight-custom-color-1;
184-
color: $black;
185-
186-
h2,
187-
a,
188-
p {
189-
color: $black;
190-
}
193+
background: var(--highlight-custom-color-1, $highlight-custom-color-1);
191194
}
192195
}
193196

194197
&.has--descriptionColor--highlight-custom-color-2 {
195198
.highlight-description {
196-
background: $highlight-custom-color-2;
197-
color: $white;
199+
background: var(--highlight-custom-color-2, $highlight-custom-color-2);
200+
color: var(--theme-foreground-color, $white);
198201

199202
h2,
200203
a,
201-
p {
202-
color: $white;
204+
p,
205+
span {
206+
color: var(--theme-foreground-color, $white);
203207
}
204208
}
205209
}
206210

207211
&.has--descriptionColor--highlight-custom-color-3 {
208212
.highlight-description {
209-
background: $highlight-custom-color-3;
210-
color: $black;
211-
212-
h2,
213-
a,
214-
p {
215-
color: $black;
216-
}
213+
background: var(--highlight-custom-color-3, $highlight-custom-color-3);
217214
}
218215
}
219216

220217
&.has--descriptionColor--highlight-custom-color-4 {
221218
.highlight-description {
222-
background: $highlight-custom-color-4;
223-
color: $black;
224-
225-
h2,
226-
a,
227-
p {
228-
color: $black;
229-
}
219+
background: var(--highlight-custom-color-4, $highlight-custom-color-4);
230220
}
231221
}
232222

233223
&.has--descriptionColor--highlight-custom-color-5 {
234224
.highlight-description {
235-
background: $highlight-custom-color-5;
236-
color: $black;
237-
238-
h2,
239-
a,
240-
p {
241-
color: $black;
242-
}
225+
background: var(--highlight-custom-color-5, $highlight-custom-color-5);
243226
}
244227
}
245228
}
@@ -254,41 +237,46 @@ $highlight-images-object-position: var(
254237
}
255238
}
256239

257-
.color-picker-widget {
258-
// Color widget Highlight-Block
259-
260-
.button.highlight-custom-color-1,
261-
.button.highlight-custom-color-1.active,
262-
.button.highlight-custom-color-1:hover,
263-
.button.active.highlight-custom-color-1:hover {
264-
background: $highlight-custom-color-1;
240+
.color-picker-widget,
241+
.theme-picker-widget {
242+
// Color widget &
243+
// Theme color picker widget
244+
245+
button.highlight-custom-color-1,
246+
button.highlight-custom-color-1.active,
247+
button.highlight-custom-color-1:hover,
248+
button.active.highlight-custom-color-1:hover {
249+
background-color: var(
250+
--highlight-custom-color-1,
251+
$highlight-custom-color-1
252+
);
265253
}
266254

267-
.button.highlight-custom-color-2,
268-
.button.highlight-custom-color-2.active,
269-
.button.highlight-custom-color-2:hover,
270-
.button.active.highlight-custom-color-2:hover {
271-
background: $highlight-custom-color-2;
255+
button.highlight-custom-color-2,
256+
button.highlight-custom-color-2.active,
257+
button.highlight-custom-color-2:hover,
258+
button.active.highlight-custom-color-2:hover {
259+
background: var(--highlight-custom-color-2, $highlight-custom-color-2);
272260
}
273261

274-
.button.highlight-custom-color-3,
275-
.button.highlight-custom-color-3.active,
276-
.button.highlight-custom-color-3:hover,
277-
.button.active.highlight-custom-color-3:hover {
278-
background: $highlight-custom-color-3;
262+
button.highlight-custom-color-3,
263+
button.highlight-custom-color-3.active,
264+
button.highlight-custom-color-3:hover,
265+
button.active.highlight-custom-color-3:hover {
266+
background: var(--highlight-custom-color-3, $highlight-custom-color-3);
279267
}
280268

281-
.button.highlight-custom-color-4,
282-
.button.highlight-custom-color-4.active,
283-
.button.highlight-custom-color-4:hover,
284-
.button.active.highlight-custom-color-4:hover {
285-
background: $highlight-custom-color-4;
269+
button.highlight-custom-color-4,
270+
button.highlight-custom-color-4.active,
271+
button.highlight-custom-color-4:hover,
272+
button.active.highlight-custom-color-4:hover {
273+
background: var(--highlight-custom-color-4, $highlight-custom-color-4);
286274
}
287275

288-
.button.highlight-custom-color-5,
289-
.button.highlight-custom-color-5.active,
290-
.button.highlight-custom-color-5:hover,
291-
.button.active.highlight-custom-color-5:hover {
292-
background: $highlight-custom-color-5;
276+
button.highlight-custom-color-5,
277+
button.highlight-custom-color-5.active,
278+
button.highlight-custom-color-5:hover,
279+
button.active.highlight-custom-color-5:hover {
280+
background: var(--highlight-custom-color-5, $highlight-custom-color-5);
293281
}
294282
}

0 commit comments

Comments
 (0)