@viasat/beam-styles 2.71.0 → 2.72.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/badge.module.scss +8 -110
- package/components/badge.vars.scss +115 -0
- package/components/badgeIndicator.module.scss +197 -0
- package/components/index.scss +1 -0
- package/package.json +1 -1
- package/styles.css +1223 -0
- package/styles.css.map +1 -1
- package/styles.min.css +1 -1
- package/styles.min.css.map +1 -1
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
@use 'sass:map';
|
|
2
2
|
@use '../utils/tokens.scss';
|
|
3
3
|
@use '../utils/constants.scss';
|
|
4
|
+
@use './badge.vars.scss' as vars;
|
|
4
5
|
|
|
5
6
|
@import '@viasat/beam-tokens/components/Badge';
|
|
6
7
|
|
|
@@ -15,109 +16,6 @@ $badgeSizes: (
|
|
|
15
16
|
),
|
|
16
17
|
);
|
|
17
18
|
|
|
18
|
-
$badgeAppearanceAndEmphasis: (
|
|
19
|
-
'positive': (
|
|
20
|
-
'strong': (
|
|
21
|
-
'background-color': tokens.$bm-comp-badge-color-positive-strong-bg,
|
|
22
|
-
'font-color': tokens.$bm-comp-badge-color-positive-strong-fg,
|
|
23
|
-
'border': tokens.$bm-comp-badge-border-width solid
|
|
24
|
-
tokens.$bm-comp-badge-color-positive-strong-border,
|
|
25
|
-
),
|
|
26
|
-
'medium': (
|
|
27
|
-
'background-color': tokens.$bm-comp-badge-color-positive-medium-bg,
|
|
28
|
-
'font-color': tokens.$bm-comp-badge-color-positive-medium-fg,
|
|
29
|
-
'border': tokens.$bm-comp-badge-border-width solid
|
|
30
|
-
tokens.$bm-comp-badge-color-positive-medium-border,
|
|
31
|
-
),
|
|
32
|
-
'subtle': (
|
|
33
|
-
'background-color': tokens.$bm-comp-badge-color-positive-subtle-bg,
|
|
34
|
-
'font-color': tokens.$bm-comp-badge-color-positive-subtle-fg,
|
|
35
|
-
'border': tokens.$bm-comp-badge-border-width solid
|
|
36
|
-
tokens.$bm-comp-badge-color-positive-subtle-border,
|
|
37
|
-
),
|
|
38
|
-
),
|
|
39
|
-
'warning': (
|
|
40
|
-
'strong': (
|
|
41
|
-
'background-color': tokens.$bm-comp-badge-color-warning-strong-bg,
|
|
42
|
-
'font-color': tokens.$bm-comp-badge-color-warning-strong-fg,
|
|
43
|
-
'border': tokens.$bm-comp-badge-border-width solid
|
|
44
|
-
tokens.$bm-comp-badge-color-warning-strong-border,
|
|
45
|
-
),
|
|
46
|
-
'medium': (
|
|
47
|
-
'background-color': tokens.$bm-comp-badge-color-warning-medium-bg,
|
|
48
|
-
'font-color': tokens.$bm-comp-badge-color-warning-medium-fg,
|
|
49
|
-
'border': tokens.$bm-comp-badge-border-width solid
|
|
50
|
-
tokens.$bm-comp-badge-color-warning-medium-border,
|
|
51
|
-
),
|
|
52
|
-
'subtle': (
|
|
53
|
-
'background-color': tokens.$bm-comp-badge-color-warning-subtle-bg,
|
|
54
|
-
'font-color': tokens.$bm-comp-badge-color-warning-subtle-fg,
|
|
55
|
-
'border': tokens.$bm-comp-badge-border-width solid
|
|
56
|
-
tokens.$bm-comp-badge-color-warning-subtle-border,
|
|
57
|
-
),
|
|
58
|
-
),
|
|
59
|
-
'negative': (
|
|
60
|
-
'strong': (
|
|
61
|
-
'background-color': tokens.$bm-comp-badge-color-negative-strong-bg,
|
|
62
|
-
'font-color': tokens.$bm-comp-badge-color-negative-strong-fg,
|
|
63
|
-
'border': tokens.$bm-comp-badge-border-width solid
|
|
64
|
-
tokens.$bm-comp-badge-color-negative-strong-border,
|
|
65
|
-
),
|
|
66
|
-
'medium': (
|
|
67
|
-
'background-color': tokens.$bm-comp-badge-color-negative-medium-bg,
|
|
68
|
-
'font-color': tokens.$bm-comp-badge-color-negative-medium-fg,
|
|
69
|
-
'border': tokens.$bm-comp-badge-border-width solid
|
|
70
|
-
tokens.$bm-comp-badge-color-negative-medium-border,
|
|
71
|
-
),
|
|
72
|
-
'subtle': (
|
|
73
|
-
'background-color': tokens.$bm-comp-badge-color-negative-subtle-bg,
|
|
74
|
-
'font-color': tokens.$bm-comp-badge-color-negative-subtle-fg,
|
|
75
|
-
'border': tokens.$bm-comp-badge-border-width solid
|
|
76
|
-
tokens.$bm-comp-badge-color-negative-subtle-border,
|
|
77
|
-
),
|
|
78
|
-
),
|
|
79
|
-
'infoPrimary': (
|
|
80
|
-
'strong': (
|
|
81
|
-
'background-color': tokens.$bm-comp-badge-color-info-primary-strong-bg,
|
|
82
|
-
'font-color': tokens.$bm-comp-badge-color-info-primary-strong-fg,
|
|
83
|
-
'border': tokens.$bm-comp-badge-border-width solid
|
|
84
|
-
tokens.$bm-comp-badge-color-info-primary-strong-border,
|
|
85
|
-
),
|
|
86
|
-
'medium': (
|
|
87
|
-
'background-color': tokens.$bm-comp-badge-color-info-primary-medium-bg,
|
|
88
|
-
'font-color': tokens.$bm-comp-badge-color-info-primary-medium-fg,
|
|
89
|
-
'border': tokens.$bm-comp-badge-border-width solid
|
|
90
|
-
tokens.$bm-comp-badge-color-info-primary-medium-border,
|
|
91
|
-
),
|
|
92
|
-
'subtle': (
|
|
93
|
-
'background-color': tokens.$bm-comp-badge-color-info-primary-subtle-bg,
|
|
94
|
-
'font-color': tokens.$bm-comp-badge-color-info-primary-subtle-fg,
|
|
95
|
-
'border': tokens.$bm-comp-badge-border-width solid
|
|
96
|
-
tokens.$bm-comp-badge-color-info-primary-subtle-border,
|
|
97
|
-
),
|
|
98
|
-
),
|
|
99
|
-
'infoSecondary': (
|
|
100
|
-
'strong': (
|
|
101
|
-
'background-color': tokens.$bm-comp-badge-color-info-secondary-strong-bg,
|
|
102
|
-
'font-color': tokens.$bm-comp-badge-color-info-secondary-strong-fg,
|
|
103
|
-
'border': tokens.$bm-comp-badge-border-width solid
|
|
104
|
-
tokens.$bm-comp-badge-color-info-secondary-strong-border,
|
|
105
|
-
),
|
|
106
|
-
'medium': (
|
|
107
|
-
'background-color': tokens.$bm-comp-badge-color-info-secondary-medium-bg,
|
|
108
|
-
'font-color': tokens.$bm-comp-badge-color-info-secondary-medium-fg,
|
|
109
|
-
'border': tokens.$bm-comp-badge-border-width solid
|
|
110
|
-
tokens.$bm-comp-badge-color-info-secondary-medium-border,
|
|
111
|
-
),
|
|
112
|
-
'subtle': (
|
|
113
|
-
'background-color': tokens.$bm-comp-badge-color-info-secondary-subtle-bg,
|
|
114
|
-
'font-color': tokens.$bm-comp-badge-color-info-secondary-subtle-fg,
|
|
115
|
-
'border': tokens.$bm-comp-badge-border-width solid
|
|
116
|
-
tokens.$bm-comp-badge-color-info-secondary-subtle-border,
|
|
117
|
-
),
|
|
118
|
-
),
|
|
119
|
-
);
|
|
120
|
-
|
|
121
19
|
$badgeBaseClass: '#{constants.$prefix}badge';
|
|
122
20
|
|
|
123
21
|
.#{$badgeBaseClass} {
|
|
@@ -152,14 +50,14 @@ $badgeBaseClass: '#{constants.$prefix}badge';
|
|
|
152
50
|
}
|
|
153
51
|
}
|
|
154
52
|
|
|
155
|
-
// Generate
|
|
156
|
-
// ex. .badge--
|
|
157
|
-
@each $appearance-name, $
|
|
158
|
-
@each $emphasis-name, $
|
|
53
|
+
// Generate appearance × emphasis modifier classes from the shared color map.
|
|
54
|
+
// ex. .bm-badge--infoPrimary-strong
|
|
55
|
+
@each $appearance-name, $emphases in vars.$badgeColors {
|
|
56
|
+
@each $emphasis-name, $c in $emphases {
|
|
159
57
|
&--#{$appearance-name}-#{$emphasis-name} {
|
|
160
|
-
background-color: map.get($
|
|
161
|
-
color: map.get($
|
|
162
|
-
border: map.get($
|
|
58
|
+
background-color: map.get($c, bg);
|
|
59
|
+
color: map.get($c, fg);
|
|
60
|
+
border: tokens.$bm-comp-badge-border-width solid map.get($c, border);
|
|
163
61
|
}
|
|
164
62
|
}
|
|
165
63
|
}
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
// Shared appearance x emphasis color data for Badge and BadgeIndicator.
|
|
2
|
+
//
|
|
3
|
+
// Keys are neutral (bg / fg / border) so each consumer can build its own
|
|
4
|
+
// border declaration. Badge uses the `border` shorthand, BadgeIndicator
|
|
5
|
+
// emits `border-color` separately (border-width is set at the base level).
|
|
6
|
+
|
|
7
|
+
@use '../utils/tokens.scss' as tokens;
|
|
8
|
+
|
|
9
|
+
$badgeColors: (
|
|
10
|
+
'positive': (
|
|
11
|
+
'strong': (
|
|
12
|
+
bg: tokens.$bm-comp-badge-color-positive-strong-bg,
|
|
13
|
+
fg: tokens.$bm-comp-badge-color-positive-strong-fg,
|
|
14
|
+
border: tokens.$bm-comp-badge-color-positive-strong-border,
|
|
15
|
+
),
|
|
16
|
+
'medium': (
|
|
17
|
+
bg: tokens.$bm-comp-badge-color-positive-medium-bg,
|
|
18
|
+
fg: tokens.$bm-comp-badge-color-positive-medium-fg,
|
|
19
|
+
border: tokens.$bm-comp-badge-color-positive-medium-border,
|
|
20
|
+
),
|
|
21
|
+
'subtle': (
|
|
22
|
+
bg: tokens.$bm-comp-badge-color-positive-subtle-bg,
|
|
23
|
+
fg: tokens.$bm-comp-badge-color-positive-subtle-fg,
|
|
24
|
+
border: tokens.$bm-comp-badge-color-positive-subtle-border,
|
|
25
|
+
),
|
|
26
|
+
),
|
|
27
|
+
'warning': (
|
|
28
|
+
'strong': (
|
|
29
|
+
bg: tokens.$bm-comp-badge-color-warning-strong-bg,
|
|
30
|
+
fg: tokens.$bm-comp-badge-color-warning-strong-fg,
|
|
31
|
+
border: tokens.$bm-comp-badge-color-warning-strong-border,
|
|
32
|
+
),
|
|
33
|
+
'medium': (
|
|
34
|
+
bg: tokens.$bm-comp-badge-color-warning-medium-bg,
|
|
35
|
+
fg: tokens.$bm-comp-badge-color-warning-medium-fg,
|
|
36
|
+
border: tokens.$bm-comp-badge-color-warning-medium-border,
|
|
37
|
+
),
|
|
38
|
+
'subtle': (
|
|
39
|
+
bg: tokens.$bm-comp-badge-color-warning-subtle-bg,
|
|
40
|
+
fg: tokens.$bm-comp-badge-color-warning-subtle-fg,
|
|
41
|
+
border: tokens.$bm-comp-badge-color-warning-subtle-border,
|
|
42
|
+
),
|
|
43
|
+
),
|
|
44
|
+
'negative': (
|
|
45
|
+
'strong': (
|
|
46
|
+
bg: tokens.$bm-comp-badge-color-negative-strong-bg,
|
|
47
|
+
fg: tokens.$bm-comp-badge-color-negative-strong-fg,
|
|
48
|
+
border: tokens.$bm-comp-badge-color-negative-strong-border,
|
|
49
|
+
),
|
|
50
|
+
'medium': (
|
|
51
|
+
bg: tokens.$bm-comp-badge-color-negative-medium-bg,
|
|
52
|
+
fg: tokens.$bm-comp-badge-color-negative-medium-fg,
|
|
53
|
+
border: tokens.$bm-comp-badge-color-negative-medium-border,
|
|
54
|
+
),
|
|
55
|
+
'subtle': (
|
|
56
|
+
bg: tokens.$bm-comp-badge-color-negative-subtle-bg,
|
|
57
|
+
fg: tokens.$bm-comp-badge-color-negative-subtle-fg,
|
|
58
|
+
border: tokens.$bm-comp-badge-color-negative-subtle-border,
|
|
59
|
+
),
|
|
60
|
+
),
|
|
61
|
+
'infoPrimary': (
|
|
62
|
+
'strong': (
|
|
63
|
+
bg: tokens.$bm-comp-badge-color-info-primary-strong-bg,
|
|
64
|
+
fg: tokens.$bm-comp-badge-color-info-primary-strong-fg,
|
|
65
|
+
border: tokens.$bm-comp-badge-color-info-primary-strong-border,
|
|
66
|
+
),
|
|
67
|
+
'medium': (
|
|
68
|
+
bg: tokens.$bm-comp-badge-color-info-primary-medium-bg,
|
|
69
|
+
fg: tokens.$bm-comp-badge-color-info-primary-medium-fg,
|
|
70
|
+
border: tokens.$bm-comp-badge-color-info-primary-medium-border,
|
|
71
|
+
),
|
|
72
|
+
'subtle': (
|
|
73
|
+
bg: tokens.$bm-comp-badge-color-info-primary-subtle-bg,
|
|
74
|
+
fg: tokens.$bm-comp-badge-color-info-primary-subtle-fg,
|
|
75
|
+
border: tokens.$bm-comp-badge-color-info-primary-subtle-border,
|
|
76
|
+
),
|
|
77
|
+
),
|
|
78
|
+
'infoSecondary': (
|
|
79
|
+
'strong': (
|
|
80
|
+
bg: tokens.$bm-comp-badge-color-info-secondary-strong-bg,
|
|
81
|
+
fg: tokens.$bm-comp-badge-color-info-secondary-strong-fg,
|
|
82
|
+
border: tokens.$bm-comp-badge-color-info-secondary-strong-border,
|
|
83
|
+
),
|
|
84
|
+
'medium': (
|
|
85
|
+
bg: tokens.$bm-comp-badge-color-info-secondary-medium-bg,
|
|
86
|
+
fg: tokens.$bm-comp-badge-color-info-secondary-medium-fg,
|
|
87
|
+
border: tokens.$bm-comp-badge-color-info-secondary-medium-border,
|
|
88
|
+
),
|
|
89
|
+
'subtle': (
|
|
90
|
+
bg: tokens.$bm-comp-badge-color-info-secondary-subtle-bg,
|
|
91
|
+
fg: tokens.$bm-comp-badge-color-info-secondary-subtle-fg,
|
|
92
|
+
border: tokens.$bm-comp-badge-color-info-secondary-subtle-border,
|
|
93
|
+
),
|
|
94
|
+
),
|
|
95
|
+
'accent': (
|
|
96
|
+
// BadgeIndicator uses accent today; Badge does not expose it yet, so Badge's
|
|
97
|
+
// loop emits three unreachable rules until the appearance lands there.
|
|
98
|
+
'strong':
|
|
99
|
+
(
|
|
100
|
+
bg: tokens.$bm-comp-badge-color-accent-strong-bg,
|
|
101
|
+
fg: tokens.$bm-comp-badge-color-accent-strong-fg,
|
|
102
|
+
border: tokens.$bm-comp-badge-color-accent-strong-border,
|
|
103
|
+
),
|
|
104
|
+
'medium': (
|
|
105
|
+
bg: tokens.$bm-comp-badge-color-accent-medium-bg,
|
|
106
|
+
fg: tokens.$bm-comp-badge-color-accent-medium-fg,
|
|
107
|
+
border: tokens.$bm-comp-badge-color-accent-medium-border,
|
|
108
|
+
),
|
|
109
|
+
'subtle': (
|
|
110
|
+
bg: tokens.$bm-comp-badge-color-accent-subtle-bg,
|
|
111
|
+
fg: tokens.$bm-comp-badge-color-accent-subtle-fg,
|
|
112
|
+
border: tokens.$bm-comp-badge-color-accent-subtle-border,
|
|
113
|
+
),
|
|
114
|
+
),
|
|
115
|
+
);
|
|
@@ -0,0 +1,197 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Styles for the BadgeIndicator component — a compact badge for communicating
|
|
3
|
+
* count, status, or category. Supports three kinds: count (displays a number,
|
|
4
|
+
* truncated at maxCount), marker (a plain status indicator), and icon (renders
|
|
5
|
+
* a Beam icon inside the badge). Used across tabs, side navigation, notification
|
|
6
|
+
* icons, avatars, and buttons.
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
@use 'sass:map';
|
|
10
|
+
@use '../utils/animation.scss' as animation;
|
|
11
|
+
@use '../utils/constants.scss';
|
|
12
|
+
@use '../utils/mixins.scss' as mixins;
|
|
13
|
+
@use '../utils/tokens.scss' as tokens;
|
|
14
|
+
@use './badge.vars.scss' as vars;
|
|
15
|
+
@import '@viasat/beam-tokens/components/Badge';
|
|
16
|
+
@import '@viasat/beam-tokens/components/BadgeIndicator';
|
|
17
|
+
|
|
18
|
+
$badgeIndicatorBaseClass: '#{constants.$prefix}badge-indicator';
|
|
19
|
+
$ring-color: var(--#{constants.$prefix}comp-badge-indicator-ring-color, transparent);
|
|
20
|
+
|
|
21
|
+
$motion-duration: animation.duration('fast');
|
|
22
|
+
|
|
23
|
+
// `all 0s $snap-delay` snaps every box property at once; the entries after it win
|
|
24
|
+
// for transform and opacity (last match wins). Using `all` covers any property a
|
|
25
|
+
// future --hide-zero zeroes without editing this list.
|
|
26
|
+
@mixin collapse-transition($snap-delay) {
|
|
27
|
+
transition: all 0s $snap-delay, transform $motion-duration ease,
|
|
28
|
+
opacity $motion-duration ease;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
// ─── Size map ────────────────────────────────────────────────────────────────
|
|
32
|
+
$sizes: (
|
|
33
|
+
'sm': (
|
|
34
|
+
'size': tokens.$bm-comp-badge-indicator-size-sm,
|
|
35
|
+
'font': tokens.$bm-comp-badge-indicator-typo-sm,
|
|
36
|
+
'icon': tokens.$bm-comp-badge-indicator-size-icon-sm,
|
|
37
|
+
'marker': tokens.$bm-comp-badge-indicator-size-marker-sm,
|
|
38
|
+
),
|
|
39
|
+
'md': (
|
|
40
|
+
'size': tokens.$bm-comp-badge-indicator-size-md,
|
|
41
|
+
'font': tokens.$bm-comp-badge-indicator-typo-md,
|
|
42
|
+
'icon': tokens.$bm-comp-badge-indicator-size-icon-md,
|
|
43
|
+
'marker': tokens.$bm-comp-badge-indicator-size-marker-md,
|
|
44
|
+
),
|
|
45
|
+
);
|
|
46
|
+
|
|
47
|
+
// ─── Color maps ──────────────────────────────────────────────────────────────
|
|
48
|
+
// The TSX applies appearance and emphasis as SEPARATE modifier classes
|
|
49
|
+
// (e.g. .bm-badge-indicator--positive + .bm-badge-indicator--strong).
|
|
50
|
+
// The @each loops below intersect those two classes to produce the right color.
|
|
51
|
+
//
|
|
52
|
+
// Count and icon color data (6 appearances × 3 emphases) is sourced from the
|
|
53
|
+
// shared badge.vars.scss map so Badge and BadgeIndicator stay in sync.
|
|
54
|
+
|
|
55
|
+
// Marker kind medium emphasis uses mute-ramp tokens — a softer tint specific to
|
|
56
|
+
// the marker context. Strong reuses the standard count/icon tokens (handled by the
|
|
57
|
+
// shared @each loop). Subtle is invalid in marker kind (TSX warns + falls back).
|
|
58
|
+
$markerMediumBg: (
|
|
59
|
+
'positive': tokens.$bm-comp-badge-indicator-color-marker-positive-medium-bg,
|
|
60
|
+
'warning': tokens.$bm-comp-badge-indicator-color-marker-warning-medium-bg,
|
|
61
|
+
'negative': tokens.$bm-comp-badge-indicator-color-marker-negative-medium-bg,
|
|
62
|
+
'infoPrimary': tokens.$bm-comp-badge-indicator-color-marker-info-primary-medium-bg,
|
|
63
|
+
'infoSecondary':
|
|
64
|
+
tokens.$bm-comp-badge-indicator-color-marker-info-secondary-medium-bg,
|
|
65
|
+
'accent': tokens.$bm-comp-badge-indicator-color-marker-accent-medium-bg,
|
|
66
|
+
);
|
|
67
|
+
|
|
68
|
+
// ─── Component ────────────────────────────────────────────────────────────────
|
|
69
|
+
|
|
70
|
+
.#{$badgeIndicatorBaseClass} {
|
|
71
|
+
// Base pill layout — shared by count and icon kinds.
|
|
72
|
+
// Marker kind overrides dimensions in &--marker below.
|
|
73
|
+
display: inline-flex;
|
|
74
|
+
align-items: center;
|
|
75
|
+
justify-content: center;
|
|
76
|
+
border-radius: tokens.$bm-comp-badge-indicator-radius;
|
|
77
|
+
border-style: solid;
|
|
78
|
+
border-width: tokens.$bm-comp-badge-border-width;
|
|
79
|
+
padding-inline: tokens.$bm-comp-badge-indicator-space-x;
|
|
80
|
+
overflow: hidden;
|
|
81
|
+
white-space: nowrap;
|
|
82
|
+
outline: tokens.$bm-sem-border-width-lg solid $ring-color;
|
|
83
|
+
outline-offset: 0;
|
|
84
|
+
|
|
85
|
+
// ── Sizes ────────────────────────────────────────────────────────────────
|
|
86
|
+
// min-width equals height so single-digit counts remain circular (not oval).
|
|
87
|
+
@each $size-name, $size in $sizes {
|
|
88
|
+
&--#{$size-name} {
|
|
89
|
+
height: map.get($size, 'size');
|
|
90
|
+
min-width: map.get($size, 'size');
|
|
91
|
+
font: map.get($size, 'font');
|
|
92
|
+
|
|
93
|
+
.#{$badgeIndicatorBaseClass}__icon {
|
|
94
|
+
width: map.get($size, 'icon');
|
|
95
|
+
height: map.get($size, 'icon');
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
// Marker is a plain dot with its own dimensions, not a pill.
|
|
99
|
+
&.#{$badgeIndicatorBaseClass}--marker {
|
|
100
|
+
width: map.get($size, 'marker');
|
|
101
|
+
height: map.get($size, 'marker');
|
|
102
|
+
min-width: unset;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
// Icon is square at the badge size; height comes from the pill rule.
|
|
106
|
+
&.#{$badgeIndicatorBaseClass}--icon {
|
|
107
|
+
width: map.get($size, 'size');
|
|
108
|
+
min-width: unset;
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
// ── Marker and icon kinds ────────────────────────────────────────────────
|
|
114
|
+
&--marker,
|
|
115
|
+
&--icon {
|
|
116
|
+
padding: 0;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
&--marker {
|
|
120
|
+
font: unset;
|
|
121
|
+
overflow: visible;
|
|
122
|
+
|
|
123
|
+
// Marker medium uses mute-ramp bg (softer than count/icon medium).
|
|
124
|
+
// Strong reuses count/icon strong tokens (already generated by the @each below).
|
|
125
|
+
@each $appearance, $bg in $markerMediumBg {
|
|
126
|
+
&.#{$badgeIndicatorBaseClass}--#{$appearance}.#{$badgeIndicatorBaseClass}--medium {
|
|
127
|
+
background-color: $bg;
|
|
128
|
+
border-color: transparent;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
// ── Icon wrapper ─────────────────────────────────────────────────────────
|
|
134
|
+
// A wrapper <span> sits around the SVG; CSS sizes the span and the SVG
|
|
135
|
+
// inherits those dimensions (follows the bm-badge__icon pattern).
|
|
136
|
+
// Width/height per size are set via the size modifier blocks above.
|
|
137
|
+
&__icon {
|
|
138
|
+
display: inline-flex;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
&__label {
|
|
142
|
+
@include mixins.visually-hidden;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
// ── Hide-zero ────────────────────────────────────────────────────────────
|
|
146
|
+
// Transition lives on --collapsible, not the base class, so marker, icon, and
|
|
147
|
+
// plain count carry none. No `transform: scale(1)` at rest — an identity
|
|
148
|
+
// transform creates a stacking context and can blur text; CSS already reads a
|
|
149
|
+
// missing transform as scale(1) when interpolating.
|
|
150
|
+
&--collapsible {
|
|
151
|
+
@include collapse-transition(0s);
|
|
152
|
+
|
|
153
|
+
// Delayed so the badge finishes animating out before the box snaps to 0.
|
|
154
|
+
&.#{$badgeIndicatorBaseClass}--hide-zero {
|
|
155
|
+
@include collapse-transition($motion-duration);
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
// opacity (not visibility/display) is intentional: it keeps the element in
|
|
160
|
+
// layout as a zero-size box and does not suppress the nested aria-live span
|
|
161
|
+
// from being monitored by screen readers.
|
|
162
|
+
&--hide-zero {
|
|
163
|
+
transform: scale(0);
|
|
164
|
+
opacity: 0;
|
|
165
|
+
width: 0;
|
|
166
|
+
min-width: 0;
|
|
167
|
+
height: 0;
|
|
168
|
+
min-height: 0;
|
|
169
|
+
padding: 0;
|
|
170
|
+
border-width: 0;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
// Both selectors are needed: --collapsible (0,1,0) can't override the
|
|
174
|
+
// --collapsible.--hide-zero (0,2,0) rule declared outside this query.
|
|
175
|
+
@media (prefers-reduced-motion: reduce) {
|
|
176
|
+
&--collapsible,
|
|
177
|
+
&--collapsible.#{$badgeIndicatorBaseClass}--hide-zero {
|
|
178
|
+
transition: none;
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
// ── Appearance × Emphasis colors ─────────────────────────────────────────
|
|
183
|
+
// TSX applies appearance and emphasis as two separate BEM modifier classes.
|
|
184
|
+
// These selectors intersect them: .bm-badge-indicator--positive.bm-badge-indicator--strong
|
|
185
|
+
// Applies to all kinds (count, icon, marker-strong); marker-medium is overridden above.
|
|
186
|
+
@each $appearance-name, $emphases in vars.$badgeColors {
|
|
187
|
+
&--#{$appearance-name} {
|
|
188
|
+
@each $emphasis-name, $c in $emphases {
|
|
189
|
+
&.#{$badgeIndicatorBaseClass}--#{$emphasis-name} {
|
|
190
|
+
background-color: map.get($c, bg);
|
|
191
|
+
color: map.get($c, fg);
|
|
192
|
+
border-color: map.get($c, border);
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
}
|
package/components/index.scss
CHANGED