Skip to content

Commit edac79f

Browse files
bddjongbddjong
committed
refactor: badge status design tokens
1 parent ded960e commit edac79f

File tree

3 files changed

+132
-27
lines changed

3 files changed

+132
-27
lines changed

‎.changeset/brown-rabbits-fail.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
"@utrecht/badge-status-css": major
3+
"@utrecht/component-library-angular": major
4+
"@utrecht/component-library-css": major
5+
"@utrecht/component-library-react": major
6+
"@utrecht/component-library-vue": major
7+
"@utrecht/web-component-library-stencil": major
8+
"@utrecht/web-component-library-angular": major
9+
"@utrecht/web-component-library-react": major
10+
"@utrecht/web-component-library-vue": major
11+
"@utrecht/design-tokens": minor
12+
---
13+
14+
badge-status is no longer styled through common badge tokens but has its own set of tokens

‎components/badge-status/src/_mixin.scss‎

Lines changed: 50 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -10,74 +10,98 @@
1010
@include utrecht-badge;
1111
@include utrecht-badge--media-query-forced-colors;
1212

13+
--utrecht-badge-background-color: var(--utrecht-badge-status-background-color);
14+
--utrecht-badge-border-radius: var(--utrecht-badge-status-border-radius);
15+
--utrecht-badge-color: var(--utrecht-badge-status-color);
16+
--utrecht-badge-font-size: var(--utrecht-badge-status-font-size, inherit);
17+
--utrecht-badge-font-style: var(--utrecht-badge-status-font-style);
18+
--utrecht-badge-font-weight: var(--utrecht-badge-status-font-weight);
19+
--utrecht-badge-line-height: var(--utrecht-badge-status-line-height);
20+
--utrecht-badge-padding-block: var(--utrecht-badge-status-padding-block);
21+
--utrecht-badge-padding-inline: var(--utrecht-badge-status-padding-inline);
22+
23+
border-color: var(--utrecht-badge-status-border-color, transparent);
24+
border-width: var(--utrecht-badge-status-border-width);
25+
font-family: var(--utrecht-badge-status-font-family, inherit);
1326
letter-spacing: var(--utrecht-badge-status-letter-spacing, inherit);
27+
min-block-size: var(--utrecht-badge-status-min-block-size, 1em);
28+
min-inline-size: var(--utrecht-badge-status-min-inline-size, 1em);
1429
text-transform: var(--utrecht-badge-status-text-transform, inherit);
1530
}
1631

1732
@mixin utrecht-badge-status--danger {
18-
background-color: var(--utrecht-feedback-danger-fill-background-color, hsl(0 100% 40%));
19-
color: var(--utrecht-feedback-danger-fill-color, white);
33+
background-color: var(--utrecht-badge-status-danger-background-color, hsl(0 100% 40%));
34+
border-color: var(--utrecht-badge-status-danger-border-color);
35+
color: var(--utrecht-badge-status-danger-color, white);
2036
}
2137

2238
@mixin utrecht-badge-status--warning {
23-
background-color: var(--utrecht-feedback-warning-fill-background-color, hsl(48 100% 50%));
24-
color: var(--utrecht-feedback-warning-fill-color, white);
39+
background-color: var(--utrecht-badge-status-warning-background-color, hsl(48 100% 50%));
40+
border-color: var(--utrecht-badge-status-warning-border-color);
41+
color: var(--utrecht-badge-status-warning-color, white);
2542
}
2643

2744
@mixin utrecht-badge-status--safe {
28-
background-color: var(--utrecht-feedback-safe-fill-background-color, hsl(90 30% 50%));
29-
color: var(--utrecht-feedback-safe-fill-color, white);
45+
background-color: var(--utrecht-badge-status-safe-background-color, hsl(90 30% 50%));
46+
border-color: var(--utrecht-badge-status-safe-border-color);
47+
color: var(--utrecht-badge-status-safe-color, white);
3048
}
3149

3250
@mixin utrecht-badge-status--neutral {
33-
background-color: var(--utrecht-feedback-neutral-fill-background-color, black);
34-
color: var(--utrecht-feedback-neutral-fill-color, white);
51+
background-color: var(--utrecht-badge-status-neutral-background-color, black);
52+
border-color: var(--utrecht-badge-status-neutral-border-color);
53+
color: var(--utrecht-badge-status-neutral-color, white);
3554
}
3655

3756
@mixin utrecht-badge-status--valid {
3857
background-color: var(
39-
--utrecht-feedback-valid-fill-background-color,
40-
var(--utrecht-feedback-safe-fill-background-color, hsl(90 30% 50%))
58+
--utrecht-badge-status-valid-background-color,
59+
var(--utrecht-badge-status-safe-background-color, hsl(90 30% 50%))
4160
);
42-
color: var(--utrecht-feedback-valid-fill-color, var(--utrecht-feedback-safe-fill-color, white));
61+
border-color: var(--utrecht-badge-status-valid-border-color);
62+
color: var(--utrecht-badge-status-valid-color, var(--utrecht-badge-status-safe-color, white));
4363
}
4464

4565
@mixin utrecht-badge-status--invalid {
4666
background-color: var(
47-
--utrecht-feedback-invalid-fill-background-color,
48-
var(--utrecht-feedback-danger-fill-background-color, hsl(39 100% 50%))
67+
--utrecht-badge-status-invalid-background-color,
68+
var(--utrecht-badge-status-danger-background-color, hsl(39 100% 50%))
4969
);
50-
color: var(--utrecht-feedback-invalid-fill-color, var(--utrecht-feedback-danger-fill-color, white));
70+
border-color: var(--utrecht-badge-status-invalid-border-color);
71+
color: var(--utrecht-badge-status-invalid-color, var(--utrecht-badge-status-danger-color, white));
5172
}
5273

5374
@mixin utrecht-badge-status--error {
5475
background-color: var(
55-
--utrecht-feedback-error-fill-background-color,
56-
var(--utrecht-feedback-danger-fill-background-color, hsl(0 100% 30%))
76+
--utrecht-badge-status-error-background-color,
77+
var(--utrecht-badge-status-danger-background-color, hsl(0 100% 30%))
5778
);
58-
color: var(--utrecht-feedback-error-fill-color, var(--utrecht-feedback-danger-fill-color, white));
79+
color: var(--utrecht-badge-status-error-color, var(--utrecht-badge-status-danger-color, white));
5980
}
6081

6182
@mixin utrecht-badge-status--success {
6283
background-color: var(
63-
--utrecht-feedback-success-fill-background-color,
64-
var(--utrecht-feedback-safe-fill-background-color, hsl(90 30% 50%))
84+
--utrecht-badge-status-success-background-color,
85+
var(--utrecht-badge-status-safe-background-color, hsl(90 30% 50%))
6586
);
66-
color: var(--utrecht-feedback-success-fill-color, var(--utrecht-feedback-safe-fill-color, white));
87+
border-color: var(--utrecht-badge-status-success-border-color);
88+
color: var(--utrecht-badge-status-success-color, var(--utrecht-badge-status-safe-color, white));
6789
}
6890

6991
@mixin utrecht-badge-status--active {
7092
background-color: var(
71-
--utrecht-feedback-active-fill-background-color,
72-
var(--utrecht-feedback-safe-fill-background-color, hsl(90 30% 50%))
93+
--utrecht-badge-status-active-background-color,
94+
var(--utrecht-badge-status-safe-background-color, hsl(90 30% 50%))
7395
);
74-
color: var(--utrecht-feedback-active-fill-color, var(--utrecht-feedback-safe-fill-color, white));
96+
border-color: var(--utrecht-badge-status-active-border-color);
97+
color: var(--utrecht-badge-status-active-color, var(--utrecht-badge-status-safe-color, white));
7598
}
7699

77100
@mixin utrecht-badge-status--inactive {
78101
background-color: var(
79-
--utrecht-feedback-inactive-fill-background-color,
80-
var(--utrecht-feedback-danger-fill-background-color, hsl(0 100% 40%))
102+
--utrecht-badge-status-inactive-background-color,
103+
var(--utrecht-badge-status-danger-background-color, hsl(0 100% 40%))
81104
);
82-
color: var(--utrecht-feedback-inactive-fill-color, var(--utrecht-feedback-danger-fill-color, white));
105+
border-color: var(--utrecht-badge-status-inactive-border-color);
106+
color: var(--utrecht-badge-status-inactive-color, var(--utrecht-badge-status-danger-color, white));
83107
}

‎proprietary/design-tokens/src/component/utrecht/badge-status.tokens.json‎

Lines changed: 68 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,75 @@
11
{
22
"utrecht": {
33
"badge-status": {
4+
"background-color": {
5+
"value": "{utrecht.badge.background-color}"
6+
},
7+
"border-color": {},
8+
"border-radius": {
9+
"value": "{utrecht.badge.border-radius}"
10+
},
11+
"border-width": {
12+
"value": "0px"
13+
},
14+
"color": {
15+
"value": "{utrecht.badge.color}"
16+
},
17+
"font-family": {
18+
"value": "{utrecht.typography.sans-serif.font-family}"
19+
},
20+
"font-size": {},
21+
"font-weight": {},
22+
"line-height": {},
423
"letter-spacing": {},
5-
"text-transform": {}
24+
"min-block-size": {},
25+
"min-inline-size": {},
26+
"padding-block": {
27+
"value": "{utrecht.badge.padding-block}"
28+
},
29+
"padding-inline": {
30+
"value": "{utrecht.badge.padding-inline}"
31+
},
32+
"text-transform": {},
33+
"active": {
34+
"background-color": { "value": "{utrecht.feedback.active.fill.background-color}" },
35+
"border-color": { "value": "{utrecht.feedback.active.fill.background-color}" },
36+
"color": { "value": "{utrecht.feedback.active.fill.color}" }
37+
},
38+
"danger": {
39+
"background-color": { "value": "{utrecht.feedback.danger.fill.background-color}" },
40+
"border-color": { "value": "{utrecht.feedback.danger.fill.background-color}" },
41+
"color": { "value": "{utrecht.feedback.danger.fill.color}" }
42+
},
43+
"error": {
44+
"background-color": { "value": "{utrecht.feedback.error.fill.background-color}" },
45+
"border-color": { "value": "{utrecht.feedback.error.fill.background-color}" },
46+
"color": { "value": "{utrecht.feedback.error.fill.color}" }
47+
},
48+
"inactive": {
49+
"background-color": { "value": "{utrecht.feedback.inactive.fill.background-color}" },
50+
"border-color": { "value": "{utrecht.feedback.inactive.fill.background-color}" },
51+
"color": { "value": "{utrecht.feedback.inactive.fill.color}" }
52+
},
53+
"invalid": {
54+
"background-color": { "value": "{utrecht.feedback.invalid.fill.background-color}" },
55+
"border-color": { "value": "{utrecht.feedback.invalid.fill.background-color}" },
56+
"color": { "value": "{utrecht.feedback.invalid.fill.color}" }
57+
},
58+
"safe": {
59+
"background-color": { "value": "{utrecht.feedback.safe.fill.background-color}" },
60+
"border-color": { "value": "{utrecht.feedback.safe.fill.background-color}" },
61+
"color": { "value": "{utrecht.feedback.safe.fill.color}" }
62+
},
63+
"valid": {
64+
"background-color": { "value": "{utrecht.feedback.valid.fill.background-color}" },
65+
"border-color": { "value": "{utrecht.feedback.valid.fill.background-color}" },
66+
"color": { "value": "{utrecht.feedback.valid.fill.color}" }
67+
},
68+
"warning": {
69+
"background-color": { "value": "{utrecht.feedback.warning.fill.background-color}" },
70+
"border-color": { "value": "{utrecht.feedback.warning.fill.background-color}" },
71+
"color": { "value": "{utrecht.feedback.warning.fill.color}" }
72+
}
673
}
774
}
875
}

0 commit comments

Comments
 (0)
⚡