Skip to content

Commit ca6a169

Browse files
julczkajulczka
committed
remove unnecessary bracket from uui-button
1 parent 17f80b3 commit ca6a169

File tree

1 file changed

+169
-43
lines changed

1 file changed

+169
-43
lines changed

‎packages/uui-button/lib/uui-button.element.ts

Lines changed: 169 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,10 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
174174
/* LOOKS */
175175
176176
:host([look='primary']) button {
177-
background-color: var(--uui-button-background-color, var(--uui-look-primary-surface));
177+
background-color: var(
178+
--uui-button-background-color,
179+
var(--uui-look-primary-surface)
180+
);
178181
color: var(--uui-look-primary-contrast);
179182
border-style: var(
180183
--uui-button-border-style,
@@ -184,22 +187,40 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
184187
--uui-button-border-radius,
185188
var(--uui-look-primary-border-radius, var(--uui-border-radius))
186189
);
187-
border-color: var(--uui-button-border-color, var(--uui-look-primary-border));
190+
border-color: var(
191+
--uui-button-border-color,
192+
var(--uui-look-primary-border)
193+
);
188194
font-weight: var(--uui-look-primary-font-weight);
189195
}
190196
:host([look='primary']) button:hover {
191-
background-color: var(--uui-button-background-color-hover, var(--uui-look-primary-surface-hover));
197+
background-color: var(
198+
--uui-button-background-color-hover,
199+
var(--uui-look-primary-surface-hover)
200+
);
192201
color: var(--uui-look-primary-contrast-hover);
193-
border-color: var(--uui-button-border-color-hover, var(--uui-look-primary-border-hover));
202+
border-color: var(
203+
--uui-button-border-color-hover,
204+
var(--uui-look-primary-border-hover)
205+
);
194206
}
195207
:host([look='primary']) button[disabled] {
196-
background-color: var(--uui-button-background-color-disabled, var(--uui-look-primary-surface-disabled));
208+
background-color: var(
209+
--uui-button-background-color-disabled,
210+
var(--uui-look-primary-surface-disabled)
211+
);
197212
color: var(--uui-look-primary-contrast-disabled);
198-
border-color: var(--uui-button-border-color-disabled, var(--uui-look-primary-border-disabled));
213+
border-color: var(
214+
--uui-button-border-color-disabled,
215+
var(--uui-look-primary-border-disabled)
216+
);
199217
}
200218
201219
:host([look='secondary']) button {
202-
background-color: var(--uui-button-background-color, var(--uui-look-secondary-surface));
220+
background-color: var(
221+
--uui-button-background-color,
222+
var(--uui-look-secondary-surface)
223+
);
203224
color: var(--uui-look-secondary-contrast);
204225
border-style: var(
205226
--uui-button-border-style,
@@ -209,22 +230,40 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
209230
--uui-button-border-radius,
210231
var(--uui-look-secondary-border-radius, var(--uui-border-radius))
211232
);
212-
border-color: var(--uui-button-border-color, var(--uui-look-secondary-border));
233+
border-color: var(
234+
--uui-button-border-color,
235+
var(--uui-look-secondary-border)
236+
);
213237
font-weight: var(--uui-look-secondary-font-weight);
214238
}
215239
:host([look='secondary']) button:hover {
216-
background-color: var(--uui-button-background-color-hover, var(--uui-look-secondary-surface-hover));
240+
background-color: var(
241+
--uui-button-background-color-hover,
242+
var(--uui-look-secondary-surface-hover)
243+
);
217244
color: var(--uui-look-secondary-contrast-hover);
218-
border-color: var(--uui-button-border-color-hover, var(--uui-look-secondary-border-hover));
245+
border-color: var(
246+
--uui-button-border-color-hover,
247+
var(--uui-look-secondary-border-hover)
248+
);
219249
}
220250
:host([look='secondary']) button[disabled] {
221-
background-color: var(--uui-button-background-color-disabled, var(--uui-look-secondary-surface-disabled));
251+
background-color: var(
252+
--uui-button-background-color-disabled,
253+
var(--uui-look-secondary-surface-disabled)
254+
);
222255
color: var(--uui-look-secondary-contrast-disabled);
223-
border-color: var(--uui-button-border-color-disabled, var(--uui-look-secondary-border-disabled));
256+
border-color: var(
257+
--uui-button-border-color-disabled,
258+
var(--uui-look-secondary-border-disabled)
259+
);
224260
}
225261
226262
:host([look='outline']) button {
227-
background-color: var(--uui-button-background-color, var(--uui-look-outline-surface));
263+
background-color: var(
264+
--uui-button-background-color,
265+
var(--uui-look-outline-surface)
266+
);
228267
color: var(--uui-look-outline-contrast);
229268
border-style: var(
230269
--uui-button-border-style,
@@ -234,22 +273,40 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
234273
--uui-button-border-radius,
235274
var(--uui-look-outline-border-radius, var(--uui-border-radius))
236275
);
237-
border-color: var(--uui-button-border-color, var(--uui-look-outline-border));
276+
border-color: var(
277+
--uui-button-border-color,
278+
var(--uui-look-outline-border)
279+
);
238280
font-weight: var(--uui-look-outline-font-weight);
239281
}
240282
:host([look='outline']) button:hover {
241-
background-color: var(--uui-button-background-color-hover, var(--uui-look-outline-surface-hover));
242-
color: var(--uui-look-outline-contrast-hover));
243-
border-color: var(--uui-button-border-color-hover, var(--uui-look-outline-border-hover));
283+
background-color: var(
284+
--uui-button-background-color-hover,
285+
var(--uui-look-outline-surface-hover)
286+
);
287+
color: var(--uui-look-outline-contrast-hover);
288+
border-color: var(
289+
--uui-button-border-color-hover,
290+
var(--uui-look-outline-border-hover)
291+
);
244292
}
245293
:host([look='outline']) button[disabled] {
246-
background-color: var(--uui-button-background-color-disabled, var(--uui-look-outline-surface-disabled));
294+
background-color: var(
295+
--uui-button-background-color-disabled,
296+
var(--uui-look-outline-surface-disabled)
297+
);
247298
color: var(--uui-look-outline-contrast-disabled);
248-
border-color: var(--uui-button-border-color-disabled, var(--uui-look-outline-border-disabled));
299+
border-color: var(
300+
--uui-button-border-color-disabled,
301+
var(--uui-look-outline-border-disabled)
302+
);
249303
}
250304
251305
:host([look='placeholder']) button {
252-
background-color: var(--uui-button-background-color, var(--uui-look-placeholder-surface));
306+
background-color: var(
307+
--uui-button-background-color,
308+
var(--uui-look-placeholder-surface)
309+
);
253310
color: var(--uui-look-placeholder-contrast);
254311
border-style: var(
255312
--uui-button-border-style,
@@ -259,22 +316,40 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
259316
--uui-button-border-radius,
260317
var(--uui-look-placeholder-border-radius, var(--uui-border-radius))
261318
);
262-
border-color: var(--uui-button-border-color, var(--uui-look-placeholder-border));
319+
border-color: var(
320+
--uui-button-border-color,
321+
var(--uui-look-placeholder-border)
322+
);
263323
font-weight: var(--uui-look-placeholder-font-weight);
264324
}
265325
:host([look='placeholder']) button:hover {
266-
background-color: var(--uui-button-background-color-hover, var(--uui-look-placeholder-surface-hover));
326+
background-color: var(
327+
--uui-button-background-color-hover,
328+
var(--uui-look-placeholder-surface-hover)
329+
);
267330
color: var(--uui-look-placeholder-contrast-hover);
268-
border-color: var(--uui-button-border-color-hover, var(--uui-look-placeholder-border-hover));
331+
border-color: var(
332+
--uui-button-border-color-hover,
333+
var(--uui-look-placeholder-border-hover)
334+
);
269335
}
270336
:host([look='placeholder']) button[disabled] {
271-
background-color: var(--uui-button-background-color-disabled, var(--uui-look-placeholder-surface-disabled));
337+
background-color: var(
338+
--uui-button-background-color-disabled,
339+
var(--uui-look-placeholder-surface-disabled)
340+
);
272341
color: var(--uui-look-placeholder-contrast-disabled);
273-
border-color: var(--uui-button-border-color-disabled, var(--uui-look-placeholder-border-disabled));
342+
border-color: var(
343+
--uui-button-border-color-disabled,
344+
var(--uui-look-placeholder-border-disabled)
345+
);
274346
}
275347
276348
:host([look='positive']) button {
277-
background-color: var(--uui-button-background-color, var(--uui-look-positive-surface));
349+
background-color: var(
350+
--uui-button-background-color,
351+
var(--uui-look-positive-surface)
352+
);
278353
color: var(--uui-look-positive-contrast);
279354
border-style: var(
280355
--uui-button-border-style,
@@ -284,22 +359,40 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
284359
--uui-button-border-radius,
285360
var(--uui-look-positive-border-radius, var(--uui-border-radius))
286361
);
287-
border-color: var(--uui-button-border-color, var(--uui-look-positive-border));
362+
border-color: var(
363+
--uui-button-border-color,
364+
var(--uui-look-positive-border)
365+
);
288366
font-weight: var(--uui-look-positive-font-weight);
289367
}
290368
:host([look='positive']) button:hover {
291-
background-color: var(--uui-button-background-color-hover, var(--uui-look-positive-surface-hover));
369+
background-color: var(
370+
--uui-button-background-color-hover,
371+
var(--uui-look-positive-surface-hover)
372+
);
292373
color: var(--uui-look-positive-contrast-hover);
293-
border-color: var(--uui-button-border-color-hover, var(--uui-look-positive-border-hover));
374+
border-color: var(
375+
--uui-button-border-color-hover,
376+
var(--uui-look-positive-border-hover)
377+
);
294378
}
295379
:host([look='positive']) button[disabled] {
296-
background-color: var(--uui-button-background-color-disabled, var(--uui-look-positive-surface-disabled));
380+
background-color: var(
381+
--uui-button-background-color-disabled,
382+
var(--uui-look-positive-surface-disabled)
383+
);
297384
color: var(--uui-look-positive-contrast-disabled);
298-
border-color: var(--uui-button-border-color-disabled, var(--uui-look-positive-border-disabled));
385+
border-color: var(
386+
--uui-button-border-color-disabled,
387+
var(--uui-look-positive-border-disabled)
388+
);
299389
}
300390
301391
:host([look='warning']) button {
302-
background-color: var(--uui-button-background-color, var(--uui-look-warning-surface));
392+
background-color: var(
393+
--uui-button-background-color,
394+
var(--uui-look-warning-surface)
395+
);
303396
color: var(--uui-look-warning-contrast);
304397
border-style: var(
305398
--uui-button-border-style,
@@ -309,22 +402,40 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
309402
--uui-button-border-radius,
310403
var(--uui-look-warning-border-radius, var(--uui-border-radius))
311404
);
312-
border-color: var(--uui-button-border-color, var(--uui-look-warning-border));
405+
border-color: var(
406+
--uui-button-border-color,
407+
var(--uui-look-warning-border)
408+
);
313409
font-weight: var(--uui-look-warning-font-weight);
314410
}
315411
:host([look='warning']) button:hover {
316-
background-color: var(--uui-button-background-color-hover, var(--uui-look-warning-surface-hover));
412+
background-color: var(
413+
--uui-button-background-color-hover,
414+
var(--uui-look-warning-surface-hover)
415+
);
317416
color: var(--uui-look-warning-contrast-hover);
318-
border-color: var(--uui-button-border-color-hover, var(--uui-look-warning-border-hover));
417+
border-color: var(
418+
--uui-button-border-color-hover,
419+
var(--uui-look-warning-border-hover)
420+
);
319421
}
320422
:host([look='warning']) button[disabled] {
321-
background-color: var(--uui-button-background-color-disabled, var(--uui-look-warning-surface-disabled));
423+
background-color: var(
424+
--uui-button-background-color-disabled,
425+
var(--uui-look-warning-surface-disabled)
426+
);
322427
color: var(--uui-look-warning-contrast-disabled);
323-
border-color: var(--uui-button-border-color-disabled, var(--uui-look-warning-border-disabled));
428+
border-color: var(
429+
--uui-button-border-color-disabled,
430+
var(--uui-look-warning-border-disabled)
431+
);
324432
}
325433
326434
:host([look='danger']) button {
327-
background-color: var(--uui-button-background-color, var(--uui-look-danger-surface));
435+
background-color: var(
436+
--uui-button-background-color,
437+
var(--uui-look-danger-surface)
438+
);
328439
color: var(--uui-look-danger-contrast);
329440
border-style: var(
330441
--uui-button-border-style,
@@ -334,18 +445,33 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
334445
--uui-button-border-radius,
335446
var(--uui-look-danger-border-radius, var(--uui-border-radius))
336447
);
337-
border-color: var(--uui-button-border-color, var(--uui-look-danger-border));
448+
border-color: var(
449+
--uui-button-border-color,
450+
var(--uui-look-danger-border)
451+
);
338452
font-weight: var(--uui-look-danger-font-weight);
339453
}
340454
:host([look='danger']) button:hover {
341-
background-color: var(--uui-button-background-color-hover, var(--uui-look-danger-surface-hover));
455+
background-color: var(
456+
--uui-button-background-color-hover,
457+
var(--uui-look-danger-surface-hover)
458+
);
342459
color: var(--uui-look-danger-contrast-hover);
343-
border-color: var(--uui-button-border-color-hover, var(--uui-look-danger-border-hover));
460+
border-color: var(
461+
--uui-button-border-color-hover,
462+
var(--uui-look-danger-border-hover)
463+
);
344464
}
345465
:host([look='danger']) button[disabled] {
346-
background-color: var(--uui-button-background-color-disabled, var(--uui-look-danger-surface-disabled));
466+
background-color: var(
467+
--uui-button-background-color-disabled,
468+
var(--uui-look-danger-surface-disabled)
469+
);
347470
color: var(--uui-look-danger-contrast-disabled);
348-
border-color: var(--uui-button-border-color-disabled, var(--uui-look-danger-border-disabled));
471+
border-color: var(
472+
--uui-button-border-color-disabled,
473+
var(--uui-look-danger-border-disabled)
474+
);
349475
}
350476
`,
351477
];

0 commit comments

Comments
 (0)