Skip to content

Commit b96eb6b

Browse files
ngonzalezpazFCngonzalezpazFC
committed
WIP: fix: add style fallback aura variables
1 parent 9e1766b commit b96eb6b

1 file changed

Lines changed: 28 additions & 28 deletions

File tree

‎src/main/resources/META-INF/resources/frontend/fc-toggle-button.js‎

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -40,18 +40,18 @@ class ToggleButton extends LitElement {
4040
display: inline-flex;
4141
flex-direction: column;
4242
align-items: flex-start;
43-
gap: var(--lumo-space-xs, 4px);
44-
font-family: var(--lumo-font-family);
45-
color: var(--lumo-body-text-color);
43+
gap: var(--lumo-space-xs, var(--vaadin-gap-xs));
44+
font-family: var(--lumo-font-family, var(--aura-font-family));
45+
color: var(--lumo-body-text-color, var(--vaadin-text-color));
4646
cursor: pointer;
4747
user-select: none;
4848
transition: opacity 0.2s;
4949
}
5050
5151
.field-label {
52-
font-size: var(--lumo-font-size-s, 14px);
52+
font-size: var(--lumo-font-size-s, var(--aura-font-size-s));
5353
font-weight: 500;
54-
color: var(--lumo-secondary-text-color);
54+
color: var(--lumo-secondary-text-color, var(--vaadin-text-color-secondary));
5555
line-height: 1;
5656
}
5757
@@ -69,37 +69,37 @@ class ToggleButton extends LitElement {
6969
.container {
7070
display: flex;
7171
align-items: center;
72-
gap: var(--lumo-space-s, 8px);
72+
gap: var(--lumo-space-s, var(--vaadin-gap-s));
7373
}
7474
7575
.label {
76-
font-size: var(--lumo-font-size-s, 14px);
76+
font-size: var(--lumo-font-size-s, var(--aura-font-size-s));
7777
font-weight: 500;
7878
transition: color 0.3s;
7979
}
8080
8181
.label.active {
82-
color: var(--lumo-primary-text-color);
82+
color: var(--lumo-primary-text-color, var(--aura-blue-text));
8383
}
8484
8585
:host([theme~="success"]) .label.active {
86-
color: var(--lumo-success-text-color);
86+
color: var(--lumo-success-text-color, var(--aura-green-text));
8787
}
8888
8989
:host([theme~="error"]) .label.active {
90-
color: var(--lumo-error-text-color);
90+
color: var(--lumo-error-text-color, var(--aura-red-text));
9191
}
9292
9393
:host([theme~="warning"]) .label.active {
94-
color: var(--lumo-warning-text-color, #d08000);
94+
color: var(--lumo-warning-text-color, var(--aura-orange-text));
9595
}
9696
9797
:host([theme~="contrast"]) .label.active {
98-
color: var(--lumo-contrast-color);
98+
color: var(--lumo-contrast, var(--aura-neutral));
9999
}
100100
101101
.label.inactive {
102-
color: var(--lumo-secondary-text-color);
102+
color: var(--lumo-secondary-text-color, var(--vaadin-text-color-secondary));
103103
opacity: 0.7;
104104
}
105105
@@ -114,16 +114,16 @@ class ToggleButton extends LitElement {
114114
}
115115
116116
:host([checked]) .switch {
117-
background-color: var(--lumo-primary-color, #007bff);
117+
background-color: var(--lumo-primary-color, var(--aura-blue));
118118
}
119119
120120
/* Theme Variants */
121121
:host([theme~="success"][checked]) .switch {
122-
background-color: var(--lumo-success-color, #28a745);
122+
background-color: var(--lumo-success-color, var(--aura-green));
123123
}
124124
125125
:host([theme~="error"][checked]) .switch {
126-
background-color: var(--lumo-error-color, #dc3545);
126+
background-color: var(--lumo-error-color, var(--aura-red));
127127
}
128128
129129
:host([theme~="warning"][checked]) .switch {
@@ -132,15 +132,15 @@ class ToggleButton extends LitElement {
132132
}
133133
134134
:host([theme~="primary"][checked]) .switch {
135-
background-color: var(--lumo-primary-color, #007bff);
135+
background-color: var(--lumo-primary-color, var(--aura-blue));
136136
}
137137
138138
:host([theme~="contrast"][checked]) .switch {
139-
background-color: var(--lumo-contrast-color, #000);
139+
background-color: var(--lumo-contrast, var(--aura-neutral));
140140
}
141141
142142
:host([theme~="contrast"]) .slider {
143-
background-color: var(--lumo-base-color, #fff);
143+
background-color: var(--lumo-base-color, var(--vaadin-background-color));
144144
}
145145
146146
/* Slider colors for variants if needed */
@@ -154,9 +154,9 @@ class ToggleButton extends LitElement {
154154
left: 3px;
155155
width: 18px;
156156
height: 18px;
157-
background-color: var(--lumo-base-color, #fff);
157+
background-color: var(--lumo-base-color, var(--vaadin-background-color));
158158
border-radius: 50%;
159-
box-shadow: var(--lumo-box-shadow-s, 0 2px 4px rgba(0,0,0,0.2));
159+
box-shadow: var(--lumo-box-shadow-s, var(--aura-shadow-xs));
160160
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
161161
}
162162
@@ -223,7 +223,7 @@ class ToggleButton extends LitElement {
223223
}
224224
225225
:host([theme~="medium"]) .label {
226-
font-size: var(--lumo-font-size-s, 14px);
226+
font-size: var(--lumo-font-size-s, var(--aura-font-size-s));
227227
}
228228
229229
:host([theme~="small"]) .switch {
@@ -243,7 +243,7 @@ class ToggleButton extends LitElement {
243243
}
244244
245245
:host([theme~="small"]) .label {
246-
font-size: var(--lumo-font-size-xs, 12px);
246+
font-size: var(--lumo-font-size-xs, var(--aura-font-size-xs));
247247
}
248248
249249
:host([theme~="large"]) .switch {
@@ -264,7 +264,7 @@ class ToggleButton extends LitElement {
264264
}
265265
266266
:host([theme~="large"]) .label {
267-
font-size: var(--lumo-font-size-l, 18px);
267+
font-size: var(--lumo-font-size-l, var(--aura-font-size-l));
268268
}
269269
270270
:host([theme~="longswipe"]) .switch {
@@ -292,7 +292,7 @@ class ToggleButton extends LitElement {
292292
}
293293
294294
:host([theme~="longswipe"]) .label {
295-
font-size: var(--lumo-font-size-s, 14px);
295+
font-size: var(--lumo-font-size-s, var(--aura-font-size-s));
296296
}
297297
298298
:host([theme~="longswipe"][theme~="small"]) .switch {
@@ -346,16 +346,16 @@ class ToggleButton extends LitElement {
346346
347347
/* Readonly Styles: Unify the look for both checked/unchecked and variants */
348348
:host([readonly]) .switch {
349-
background-color: var(--lumo-contrast-10pct, #f0f0f0) !important;
350-
border: 3px dotted var(--lumo-contrast-30pct, #ccc) !important;
349+
background-color: var(--lumo-contrast-10pct, var(--vaadin-background-container)) !important;
350+
border: 3px dotted var(--lumo-contrast-30pct, var(--vaadin-border-color)) !important;
351351
box-sizing: border-box;
352352
}
353353
354354
:host([readonly]) .slider {
355355
top: 0 !important;
356356
left: 0 !important;
357357
box-shadow: none !important;
358-
background-color: var(--lumo-contrast-40pct, #999) !important;
358+
background-color: var(--lumo-contrast-40pct, var(--vaadin-background-container-strong)) !important;
359359
}
360360
`;
361361

0 commit comments

Comments
 (0)