Skip to content

Commit a83379e

Browse files
nielslyngsoenielslyngsoe
committed
adjusted UI style to fit with BO approach
1 parent 6b0bc6d commit a83379e

File tree

2 files changed

+115
-113
lines changed

2 files changed

+115
-113
lines changed

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

Lines changed: 56 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -22,18 +22,19 @@ export type UUIButtonType = 'submit' | 'button' | 'reset';
2222
* @slot - for button contents
2323
* @slot extra - for extra
2424
* @description - All-round button
25-
* @cssprop --uui-button-height - set the button height
26-
* @cssprop --uui-button-border-width - set the border width
27-
* @cssprop --uui-button-border-color - set the border color
28-
* @cssprop --uui-button-border-radius - set the border radius
29-
* @cssprop --uui-button-font-weight - set the font weight
30-
* @cssprop --uui-button-background-color - set the background color
31-
* @cssprop --uui-button-background-color-hover - set the background color for hover state
32-
* @cssprop --uui-button-border-color-hover - set the border color for hover state
33-
* @cssprop --uui-button-contrast - set the text color
34-
* @cssprop --uui-button-contrast-hover - set the text color for hover state
35-
* @cssprop --uui-button-background-color-disabled - set the background color for disabled state
36-
* @cssprop --uui-button-contrast-disabled - set the text color for disabled state
25+
* @cssprop --uui-button-height - overwrite the button height
26+
* @cssprop --uui-button-border-width - overwrite the border width
27+
* @cssprop --uui-button-border-radius - overwrite the border radius
28+
* @cssprop --uui-button-font-weight - overwrite the font weight
29+
* @cssprop --uui-button-background-color - overwrite the background color
30+
* @cssprop --uui-button-background-color-hover - overwrite the background color for hover state
31+
* @cssprop --uui-button-background-color-disabled - overwrite the background color for disabled state
32+
* @cssprop --uui-button-border-color - overwrite the border color
33+
* @cssprop --uui-button-border-color-hover - overwrite the border color for hover state
34+
* @cssprop --uui-button-border-color-disabled - overwrite the border color for disabled state
35+
* @cssprop --uui-button-contrast - overwrite the text color
36+
* @cssprop --uui-button-contrast-hover - overwrite the text color for hover state
37+
* @cssprop --uui-button-contrast-disabled - overwrite the text color for disabled state
3738
*/
3839
export class UUIButtonElement extends LabelMixin('', LitElement) {
3940
static styles = [
@@ -45,7 +46,6 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
4546
margin-left: calc(var(--uui-button-merge-border-left, 0) * -1px);
4647
--uui-button-padding-left-factor: 3;
4748
--uui-button-padding-right-factor: 3;
48-
background-color: transparent;
4949
}
5050
5151
:host([compact]) {
@@ -170,7 +170,7 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
170170
/* LOOKS */
171171
172172
:host([look='primary']) button {
173-
background-color: var(--uui-look-primary-surface);
173+
background-color: var(--uui-button-background-color, var(--uui-look-primary-surface));
174174
color: var(--uui-look-primary-contrast);
175175
border-style: var(
176176
--uui-button-border-style,
@@ -180,22 +180,22 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
180180
--uui-button-border-radius,
181181
var(--uui-look-primary-border-radius, var(--uui-border-radius))
182182
);
183-
border-color: var(--uui-look-primary-border);
183+
border-color: var(--uui-button-border-color, var(--uui-look-primary-border));
184184
font-weight: var(--uui-look-primary-font-weight);
185185
}
186186
:host([look='primary']) button:hover {
187-
background-color: var(--uui-look-primary-surface-hover);
187+
background-color: var(--uui-button-background-color-hover, var(--uui-look-primary-surface-hover));
188188
color: var(--uui-look-primary-contrast-hover);
189-
border-color: var(--uui-look-primary-border-hover);
189+
border-color: var(--uui-button-border-color-hover, var(--uui-look-primary-border-hover));
190190
}
191191
:host([look='primary']) button[disabled] {
192-
background-color: var(--uui-look-primary-surface-disabled);
192+
background-color: var(--uui-button-background-color-disabled, var(--uui-look-primary-surface-disabled));
193193
color: var(--uui-look-primary-contrast-disabled);
194-
border-color: var(--uui-look-primary-border-disabled);
194+
border-color: var(--uui-button-border-color-disabled, var(--uui-look-primary-border-disabled));
195195
}
196196
197197
:host([look='secondary']) button {
198-
background-color: var(--uui-look-secondary-surface);
198+
background-color: var(--uui-button-background-color, var(--uui-look-secondary-surface));
199199
color: var(--uui-look-secondary-contrast);
200200
border-style: var(
201201
--uui-button-border-style,
@@ -205,22 +205,22 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
205205
--uui-button-border-radius,
206206
var(--uui-look-secondary-border-radius, var(--uui-border-radius))
207207
);
208-
border-color: var(--uui-look-secondary-border);
208+
border-color: var(--uui-button-border-color, var(--uui-look-secondary-border));
209209
font-weight: var(--uui-look-secondary-font-weight);
210210
}
211211
:host([look='secondary']) button:hover {
212-
background-color: var(--uui-look-secondary-surface-hover);
212+
background-color: var(--uui-button-background-color-hover, var(--uui-look-secondary-surface-hover));
213213
color: var(--uui-look-secondary-contrast-hover);
214-
border-color: var(--uui-look-secondary-border-hover);
214+
border-color: var(--uui-button-border-color-hover, var(--uui-look-secondary-border-hover));
215215
}
216216
:host([look='secondary']) button[disabled] {
217-
background-color: var(--uui-look-secondary-surface-disabled);
217+
background-color: var(--uui-button-background-color-disabled, var(--uui-look-secondary-surface-disabled));
218218
color: var(--uui-look-secondary-contrast-disabled);
219-
border-color: var(--uui-look-secondary-border-disabled);
219+
border-color: var(--uui-button-border-color-disabled, var(--uui-look-secondary-border-disabled));
220220
}
221221
222222
:host([look='outline']) button {
223-
background-color: var(--uui-look-outline-surface);
223+
background-color: var(--uui-button-background-color, var(--uui-look-outline-surface));
224224
color: var(--uui-look-outline-contrast);
225225
border-style: var(
226226
--uui-button-border-style,
@@ -230,22 +230,22 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
230230
--uui-button-border-radius,
231231
var(--uui-look-outline-border-radius, var(--uui-border-radius))
232232
);
233-
border-color: var(--uui-look-outline-border);
233+
border-color: var(--uui-button-border-color, var(--uui-look-outline-border));
234234
font-weight: var(--uui-look-outline-font-weight);
235235
}
236236
:host([look='outline']) button:hover {
237-
background-color: var(--uui-look-outline-surface-hover);
238-
color: var(--uui-look-outline-contrast-hover);
239-
border-color: var(--uui-look-outline-border-hover);
237+
background-color: var(--uui-button-background-color-hover, var(--uui-look-outline-surface-hover));
238+
color: var(--uui-look-outline-contrast-hover));
239+
border-color: var(--uui-button-border-color-hover, var(--uui-look-outline-border-hover));
240240
}
241241
:host([look='outline']) button[disabled] {
242-
background-color: var(--uui-look-outline-surface-disabled);
242+
background-color: var(--uui-button-background-color-disabled, var(--uui-look-outline-surface-disabled));
243243
color: var(--uui-look-outline-contrast-disabled);
244-
border-color: var(--uui-look-outline-border-disabled);
244+
border-color: var(--uui-button-border-color-disabled, var(--uui-look-outline-border-disabled));
245245
}
246246
247247
:host([look='placeholder']) button {
248-
background-color: var(--uui-look-placeholder-surface);
248+
background-color: var(--uui-button-background-color, var(--uui-look-placeholder-surface));
249249
color: var(--uui-look-placeholder-contrast);
250250
border-style: var(
251251
--uui-button-border-style,
@@ -255,22 +255,22 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
255255
--uui-button-border-radius,
256256
var(--uui-look-placeholder-border-radius, var(--uui-border-radius))
257257
);
258-
border-color: var(--uui-look-placeholder-border);
258+
border-color: var(--uui-button-border-color, var(--uui-look-placeholder-border));
259259
font-weight: var(--uui-look-placeholder-font-weight);
260260
}
261261
:host([look='placeholder']) button:hover {
262-
background-color: var(--uui-look-placeholder-surface-hover);
262+
background-color: var(--uui-button-background-color-hover, var(--uui-look-placeholder-surface-hover));
263263
color: var(--uui-look-placeholder-contrast-hover);
264-
border-color: var(--uui-look-placeholder-border-hover);
264+
border-color: var(--uui-button-border-color-hover, var(--uui-look-placeholder-border-hover));
265265
}
266266
:host([look='placeholder']) button[disabled] {
267-
background-color: var(--uui-look-placeholder-surface-disabled);
267+
background-color: var(--uui-button-background-color-disabled, var(--uui-look-placeholder-surface-disabled));
268268
color: var(--uui-look-placeholder-contrast-disabled);
269-
border-color: var(--uui-look-placeholder-border-disabled);
269+
border-color: var(--uui-button-border-color-disabled, var(--uui-look-placeholder-border-disabled));
270270
}
271271
272272
:host([look='positive']) button {
273-
background-color: var(--uui-look-positive-surface);
273+
background-color: var(--uui-button-background-color, var(--uui-look-positive-surface));
274274
color: var(--uui-look-positive-contrast);
275275
border-style: var(
276276
--uui-button-border-style,
@@ -280,22 +280,22 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
280280
--uui-button-border-radius,
281281
var(--uui-look-positive-border-radius, var(--uui-border-radius))
282282
);
283-
border-color: var(--uui-look-positive-border);
283+
border-color: var(--uui-button-border-color, var(--uui-look-positive-border));
284284
font-weight: var(--uui-look-positive-font-weight);
285285
}
286286
:host([look='positive']) button:hover {
287-
background-color: var(--uui-look-positive-surface-hover);
287+
background-color: var(--uui-button-background-color-hover, var(--uui-look-positive-surface-hover));
288288
color: var(--uui-look-positive-contrast-hover);
289-
border-color: var(--uui-look-positive-border-hover);
289+
border-color: var(--uui-button-border-color-hover, var(--uui-look-positive-border-hover));
290290
}
291291
:host([look='positive']) button[disabled] {
292-
background-color: var(--uui-look-positive-surface-disabled);
292+
background-color: var(--uui-button-background-color-disabled, var(--uui-look-positive-surface-disabled));
293293
color: var(--uui-look-positive-contrast-disabled);
294-
border-color: var(--uui-look-positive-border-disabled);
294+
border-color: var(--uui-button-border-color-disabled, var(--uui-look-positive-border-disabled));
295295
}
296296
297297
:host([look='warning']) button {
298-
background-color: var(--uui-look-warning-surface);
298+
background-color: var(--uui-button-background-color, var(--uui-look-warning-surface));
299299
color: var(--uui-look-warning-contrast);
300300
border-style: var(
301301
--uui-button-border-style,
@@ -305,22 +305,22 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
305305
--uui-button-border-radius,
306306
var(--uui-look-warning-border-radius, var(--uui-border-radius))
307307
);
308-
border-color: var(--uui-look-warning-border);
308+
border-color: var(--uui-button-border-color, var(--uui-look-warning-border));
309309
font-weight: var(--uui-look-warning-font-weight);
310310
}
311311
:host([look='warning']) button:hover {
312-
background-color: var(--uui-look-warning-surface-hover);
312+
background-color: var(--uui-button-background-color-hover, var(--uui-look-warning-surface-hover));
313313
color: var(--uui-look-warning-contrast-hover);
314-
border-color: var(--uui-look-warning-border-hover);
314+
border-color: var(--uui-button-border-color-hover, var(--uui-look-warning-border-hover));
315315
}
316316
:host([look='warning']) button[disabled] {
317-
background-color: var(--uui-look-warning-surface-disabled);
317+
background-color: var(--uui-button-background-color-disabled, var(--uui-look-warning-surface-disabled));
318318
color: var(--uui-look-warning-contrast-disabled);
319-
border-color: var(--uui-look-warning-border-disabled);
319+
border-color: var(--uui-button-border-color-disabled, var(--uui-look-warning-border-disabled));
320320
}
321321
322322
:host([look='danger']) button {
323-
background-color: var(--uui-look-danger-surface);
323+
background-color: var(--uui-button-background-color, var(--uui-look-danger-surface));
324324
color: var(--uui-look-danger-contrast);
325325
border-style: var(
326326
--uui-button-border-style,
@@ -330,18 +330,18 @@ export class UUIButtonElement extends LabelMixin('', LitElement) {
330330
--uui-button-border-radius,
331331
var(--uui-look-danger-border-radius, var(--uui-border-radius))
332332
);
333-
border-color: var(--uui-look-danger-border);
333+
border-color: var(--uui-button-border-color, var(--uui-look-danger-border));
334334
font-weight: var(--uui-look-danger-font-weight);
335335
}
336336
:host([look='danger']) button:hover {
337-
background-color: var(--uui-look-danger-surface-hover);
337+
background-color: var(--uui-button-background-color-hover, var(--uui-look-danger-surface-hover));
338338
color: var(--uui-look-danger-contrast-hover);
339-
border-color: var(--uui-look-danger-border-hover);
339+
border-color: var(--uui-button-border-color-hover, var(--uui-look-danger-border-hover));
340340
}
341341
:host([look='danger']) button[disabled] {
342-
background-color: var(--uui-look-danger-surface-disabled);
342+
background-color: var(--uui-button-background-color-disabled, var(--uui-look-danger-surface-disabled));
343343
color: var(--uui-look-danger-contrast-disabled);
344-
border-color: var(--uui-look-danger-border-disabled);
344+
border-color: var(--uui-button-border-color-disabled, var(--uui-look-danger-border-disabled));
345345
}
346346
`,
347347
];

0 commit comments

Comments
 (0)