Skip to content

Commit c328a7d

Browse files
CopilotCopilot
authored
Add predefined sizes and border-radius improvements to badge component theming (#484)
1 parent 6feb0aa commit c328a7d

File tree

3 files changed

+111
-22
lines changed

3 files changed

+111
-22
lines changed

‎sass/themes/components/badge/_badge-theme.scss‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@
2424
/// @param {Color} $background-color [null] - The background color used.
2525
/// @param {box-shadow} $shadow [null] - Sets a shadow to be used for the badge.
2626
/// @param {Number} $border-radius [null] - The border radius used for badge component.
27-
///
27+
/// @param {Number} $size [null] - The size of the badge component.
28+
/// @param {Number} $dot-size [null] - The size of the dot type badge.
2829
/// @requires $light-material-schema
2930
///
3031
/// @example scss Change the text and icon colors in a badge
@@ -41,7 +42,9 @@
4142
$border-radius: null,
4243
4344
$background-color: null,
44-
$shadow: null
45+
$shadow: null,
46+
$size: null,
47+
$dot-size: null
4548
) {
4649
$name: #{config.variable-prefix() + '-' + 'badge'};
4750
$selector: #{config.element-prefix() + '-' + 'badge'};
@@ -79,6 +82,8 @@
7982
border-radius: $border-radius,
8083
background-color: $background-color,
8184
shadow: $shadow,
85+
size: $size,
86+
dot-size: $dot-size,
8287
)
8388
);
8489
}

‎sass/themes/schemas/components/dark/_badge.scss‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -35,17 +35,10 @@ $dark-fluent-badge: extend(
3535

3636
/// Generates a dark bootstrap badge schema.
3737
/// @type {Map}
38-
/// @prop {Map} border-color [contrast-color: ('gray', 50)] - The border color used.
3938
/// @requires $bootstrap-badge
4039
$dark-bootstrap-badge: extend(
4140
$bootstrap-badge,
4241
(
43-
border-color: (
44-
contrast-color: (
45-
'gray',
46-
50,
47-
),
48-
),
4942
_meta: (
5043
theme: 'bootstrap',
5144
variant: 'dark',
@@ -55,10 +48,26 @@ $dark-bootstrap-badge: extend(
5548

5649
/// Generates a dark indigo badge schema.
5750
/// @type {Map}
51+
/// @prop {Map} background-color [color: ('primary', 400)] - The background color used for the badge component.
52+
/// @prop {Map} border-color [contrast-color: ('gray', 900)] - The border color used for the badge component.
5853
/// @requires $indigo-badge
5954
$dark-indigo-badge: extend(
6055
$indigo-badge,
6156
(
57+
background-color: (
58+
color: (
59+
'primary',
60+
400,
61+
),
62+
),
63+
64+
border-color: (
65+
contrast-color: (
66+
'gray',
67+
900,
68+
),
69+
),
70+
6271
_meta: (
6372
theme: 'indigo',
6473
variant: 'dark',

‎sass/themes/schemas/components/light/_badge.scss‎

Lines changed: 88 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,14 @@
1010

1111
/// Generates a light badge schema.
1212
/// @type {Map}
13-
/// @prop {Map} icon-color [contrast-color: ('primary', 900)] - The icon color used.
14-
/// @prop {Map} text-color [contrast-color: ('primary', 900)] - The text color used.
15-
/// @prop {Map} border-color [color: ('gray', 50)] - The border color used.
16-
/// @prop {Map} background-color [color: ('primary', 500)] - The background color used.
13+
/// @prop {Map} icon-color [contrast-color: ('primary', 900)] - The icon color used for the badge component.
14+
/// @prop {Map} text-color [contrast-color: ('primary', 900)] - The text color used for the badge component.
15+
/// @prop {Map} border-color [contrast-color: ('gray', 900)] - The border color used for the badge component.
16+
/// @prop {Map} background-color [color: ('primary', 500)] - The background color used for the badge component.
1717
/// @prop {Number} elevation [1] - The elevation level, between 0-24, to be used for the badge shadow.
18-
/// @prop {Number} border-radius [0] - The border radius used for badge.
18+
/// @prop {Number} border-radius [0] - The border-radius used for the badge component.
19+
/// @prop {List} size [(rem(16px), rem(22px), rem(26px))] - The size used for the badge.
20+
/// @prop {Number} default-size [2] - The default size used for the badge component (medium).
1921
/// @prop {Map} typography [text: (value: 'caption')] - The typography styles used for the component.
2022
/// @requires {Map} $default-elevation-badge
2123
$light-badge: extend(
@@ -36,9 +38,9 @@ $light-badge: extend(
3638
),
3739

3840
border-color: (
39-
color: (
41+
contrast-color: (
4042
'gray',
41-
50,
43+
900,
4244
),
4345
),
4446

@@ -51,6 +53,16 @@ $light-badge: extend(
5153

5254
border-radius: 0,
5355

56+
size: (
57+
sizable: (
58+
rem(16px),
59+
rem(22px),
60+
rem(26px),
61+
),
62+
),
63+
64+
default-size: 2,
65+
5466
typography: (
5567
text: (
5668
value: 'caption',
@@ -61,10 +73,27 @@ $light-badge: extend(
6173

6274
/// Generates a material badge schema.
6375
/// @type {Map}
76+
/// @prop {Map} background-color [color: ('primary', 800)] - The background color used for the badge component.
77+
/// @prop {List} dot-size [(rem(8px), rem(10px), rem(12px))] - The size used for the dot type badge.
6478
/// @requires {Map} $light-badge
6579
$material-badge: extend(
6680
$light-badge,
6781
(
82+
background-color: (
83+
color: (
84+
'primary',
85+
800,
86+
),
87+
),
88+
89+
dot-size: (
90+
sizable: (
91+
rem(8px),
92+
rem(10px),
93+
rem(12px),
94+
),
95+
),
96+
6897
_meta: (
6998
theme: 'material',
7099
variant: 'light',
@@ -74,10 +103,19 @@ $material-badge: extend(
74103

75104
/// Generates a fluent badge schema.
76105
/// @type {Map}
106+
/// @prop {List} dot-size [(rem(6px), rem(10px), rem(12px))] - The size used for the dot type badge.
77107
/// @requires {Map} $light-badge
78108
$fluent-badge: extend(
79109
$light-badge,
80110
(
111+
dot-size: (
112+
sizable: (
113+
rem(6px),
114+
rem(10px),
115+
rem(12px),
116+
),
117+
),
118+
81119
_meta: (
82120
theme: 'fluent',
83121
variant: 'light',
@@ -89,7 +127,8 @@ $fluent-badge: extend(
89127
/// @type {Map}
90128
/// @prop {Map} icon-color [contrast-color: ('primary', 100)] - The icon color used.
91129
/// @prop {Map} text-color [contrast-color: ('primary', 100)] - The text color used.
92-
/// @prop {Number} border-radius [rem(4px)] - The border radius used for badge.
130+
/// @prop {List} border-radius [(rem(2px), rem(4px), rem(4px))] - The border radius used for badge.
131+
/// @prop {List} dot-size [(rem(6px), rem(10px), rem(14px))] - The size used for the dot type badge.
93132
/// @requires {Map} $light-badge
94133
$bootstrap-badge: extend(
95134
$light-badge,
@@ -108,7 +147,22 @@ $bootstrap-badge: extend(
108147
),
109148
),
110149

111-
border-radius: rem(4px),
150+
border-radius: (
151+
sizable: (
152+
rem(2px),
153+
rem(4px),
154+
rem(4px),
155+
),
156+
),
157+
158+
dot-size: (
159+
sizable: (
160+
rem(6px),
161+
rem(10px),
162+
rem(14px),
163+
),
164+
),
165+
112166
_meta: (
113167
theme: 'bootstrap',
114168
variant: 'light',
@@ -118,21 +172,42 @@ $bootstrap-badge: extend(
118172

119173
/// Generates an indigo badge schema.
120174
/// @type {Map}
121-
/// @prop {Map} background-color [color: ('primary', 400)] - The background color used.
175+
/// @prop {Map} border-color [color: ('gray', 100)] - The border color used for the badge component.
176+
/// @prop {List} size [(rem(14px), rem(18px), rem(22px))] - The size used for the badge.
177+
/// @prop {List} dot-size [(rem(6px), rem(8px), rem(10px))] - The size used for the dot type badge.
122178
/// @prop {Map} typography [text: (value: 'button')] - The typography styles used for the component.
179+
/// @prop {Number} default-size [3] - The default size used for the badge component (large).
123180
/// @requires {Map} $light-badge
124181
/// @requires {Map} $indigo-elevation-badge
125182
$indigo-badge: extend(
126183
$light-badge,
127184
$indigo-elevation-badge,
128185
(
129-
background-color: (
186+
border-color: (
130187
color: (
131-
'primary',
132-
400,
188+
'gray',
189+
100,
190+
),
191+
),
192+
193+
size: (
194+
sizable: (
195+
rem(14px),
196+
rem(18px),
197+
rem(22px),
133198
),
134199
),
135200

201+
dot-size: (
202+
sizable: (
203+
rem(6px),
204+
rem(8px),
205+
rem(10px),
206+
),
207+
),
208+
209+
default-size: 3,
210+
136211
typography: (
137212
text: (
138213
value: 'button',

0 commit comments

Comments
 (0)