@viasat/beam-tokens 2.0.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.
Files changed (134) hide show
  1. package/README.md +275 -0
  2. package/components/Accordion.css +108 -0
  3. package/components/ActionList.css +150 -0
  4. package/components/Alert.css +244 -0
  5. package/components/Avatar.css +124 -0
  6. package/components/Badge.css +542 -0
  7. package/components/BadgeDot.css +150 -0
  8. package/components/BatchActions.css +34 -0
  9. package/components/Breadcrumb.css +44 -0
  10. package/components/Button.css +466 -0
  11. package/components/Card.css +102 -0
  12. package/components/Chip.css +102 -0
  13. package/components/CloseButton.css +42 -0
  14. package/components/DataTable.css +214 -0
  15. package/components/Dialog.css +150 -0
  16. package/components/Divider.css +32 -0
  17. package/components/EmptyState.css +56 -0
  18. package/components/FileUpload.css +204 -0
  19. package/components/Header.css +94 -0
  20. package/components/HelperText.css +100 -0
  21. package/components/Input.css +328 -0
  22. package/components/Label.css +46 -0
  23. package/components/Link.css +102 -0
  24. package/components/List.css +22 -0
  25. package/components/Menu.css +14 -0
  26. package/components/Pagination.css +58 -0
  27. package/components/Panel.css +74 -0
  28. package/components/Popover.css +56 -0
  29. package/components/ProgressBar.css +78 -0
  30. package/components/SegmentedControl.css +56 -0
  31. package/components/SideNav.css +28 -0
  32. package/components/Slider.css +78 -0
  33. package/components/Spinner.css +120 -0
  34. package/components/Stepper.css +248 -0
  35. package/components/Tabs.css +106 -0
  36. package/components/Toast.css +190 -0
  37. package/components/Tooltip.css +70 -0
  38. package/index.cjs +2 -0
  39. package/index.js +2258 -0
  40. package/package.json +63 -0
  41. package/themes/blue.css +32 -0
  42. package/themes/green.css +44 -0
  43. package/themes/neutral.css +32 -0
  44. package/themes/onefi.css +6069 -0
  45. package/themes/orange.css +32 -0
  46. package/themes/pink.css +32 -0
  47. package/themes/violet.css +32 -0
  48. package/tokens.css +3573 -0
  49. package/tokens.scss +3889 -0
  50. package/types/configs/colors/colors.format.d.ts +11 -0
  51. package/types/configs/colors/colors.transformers.d.ts +9 -0
  52. package/types/configs/colors/colors.utils.d.ts +21 -0
  53. package/types/configs/colors/index.d.ts +5 -0
  54. package/types/configs/colors/sd.colors.config.d.ts +7 -0
  55. package/types/configs/components/components.format.css.d.ts +16 -0
  56. package/types/configs/components/components.transformers.d.ts +4 -0
  57. package/types/configs/components/index.d.ts +2 -0
  58. package/types/configs/components/sd.components.config.d.ts +11 -0
  59. package/types/configs/dimensions/dimension.format.css.d.ts +8 -0
  60. package/types/configs/dimensions/dimensions.transformers.d.ts +9 -0
  61. package/types/configs/dimensions/dimensions.utils.d.ts +55 -0
  62. package/types/configs/dimensions/index.d.ts +7 -0
  63. package/types/configs/dimensions/sd.dimension.config.d.ts +15 -0
  64. package/types/configs/expressive/expressive.format.d.ts +11 -0
  65. package/types/configs/expressive/index.d.ts +3 -0
  66. package/types/configs/expressive/sd.expressive.config.d.ts +6 -0
  67. package/types/configs/index.d.ts +7 -0
  68. package/types/configs/js/index.d.ts +4 -0
  69. package/types/configs/js/js.formatters.d.ts +3 -0
  70. package/types/configs/js/js.transformers.d.ts +10 -0
  71. package/types/configs/js/js.utils.d.ts +2 -0
  72. package/types/configs/js/sd.js.config.d.ts +6 -0
  73. package/types/configs/language/formatters/css.d.ts +17 -0
  74. package/types/configs/language/formatters/index.d.ts +3 -0
  75. package/types/configs/language/index.d.ts +6 -0
  76. package/types/configs/language/sd.language.config.d.ts +7 -0
  77. package/types/configs/language/transformers/attribute.d.ts +10 -0
  78. package/types/configs/language/transformers/index.d.ts +5 -0
  79. package/types/configs/product-type/index.d.ts +5 -0
  80. package/types/configs/product-type/product-type.format.css.d.ts +8 -0
  81. package/types/configs/product-type/product-type.transformers.d.ts +2 -0
  82. package/types/configs/product-type/sd.product-tokens.config.d.ts +7 -0
  83. package/types/configs/shadows/index.d.ts +7 -0
  84. package/types/configs/shadows/sd.shadow.config.d.ts +9 -0
  85. package/types/configs/shadows/shadow.transformers.d.ts +7 -0
  86. package/types/configs/shadows/shadows.format.css.d.ts +8 -0
  87. package/types/configs/shadows/shadows.utils.d.ts +11 -0
  88. package/types/configs/storybook/index.d.ts +4 -0
  89. package/types/configs/storybook/js.formatters.d.ts +3 -0
  90. package/types/configs/storybook/js.transformers.d.ts +5 -0
  91. package/types/configs/storybook/js.utils.d.ts +2 -0
  92. package/types/configs/storybook/sd.storybook.config.d.ts +6 -0
  93. package/types/configs/themes/generateThemes.d.ts +2 -0
  94. package/types/configs/themes/index.d.ts +1 -0
  95. package/types/configs/themes/sd.theme.config.d.ts +3 -0
  96. package/types/configs/themes/theme.utils.d.ts +18 -0
  97. package/types/configs/typography/formatters/css.d.ts +20 -0
  98. package/types/configs/typography/formatters/index.d.ts +3 -0
  99. package/types/configs/typography/helpers.d.ts +84 -0
  100. package/types/configs/typography/index.d.ts +6 -0
  101. package/types/configs/typography/sd.typography.config.d.ts +5 -0
  102. package/types/configs/typography/transformers/attribute.d.ts +16 -0
  103. package/types/configs/typography/transformers/index.d.ts +5 -0
  104. package/types/configs/typography/transformers/value.d.ts +4 -0
  105. package/types/lib/index.d.ts +8 -0
  106. package/types/lib/js/tokens.d.ts +1462 -0
  107. package/types/lib/js/tokensObj.d.ts +15888 -0
  108. package/types/lib/storybook-token-table/tokens.d.ts +9980 -0
  109. package/types/utils/build-tokens.d.ts +1 -0
  110. package/types/utils/constants/class-names.d.ts +19 -0
  111. package/types/utils/constants/index.d.ts +7 -0
  112. package/types/utils/constants/math.d.ts +1 -0
  113. package/types/utils/constants/paths.d.ts +27 -0
  114. package/types/utils/constants/theme.d.ts +24 -0
  115. package/types/utils/constants/token-types.d.ts +48 -0
  116. package/types/utils/constants/types.d.ts +114 -0
  117. package/types/utils/constants/typography.d.ts +39 -0
  118. package/types/utils/dataviz.d.ts +68 -0
  119. package/types/utils/files/cleanup.d.ts +11 -0
  120. package/types/utils/files/index.d.ts +5 -0
  121. package/types/utils/files/merge.d.ts +20 -0
  122. package/types/utils/files/paths.d.ts +25 -0
  123. package/types/utils/files/scan.d.ts +38 -0
  124. package/types/utils/files/validate.d.ts +13 -0
  125. package/types/utils/formatters/className.d.ts +13 -0
  126. package/types/utils/formatters/format.css.d.ts +19 -0
  127. package/types/utils/formatters/format.scss.d.ts +12 -0
  128. package/types/utils/formatters/index.d.ts +4 -0
  129. package/types/utils/formatters/token.utils.css.d.ts +50 -0
  130. package/types/utils/functions.d.ts +13 -0
  131. package/types/utils/index.d.ts +8 -0
  132. package/types/utils/occurrences.d.ts +32 -0
  133. package/types/utils/tokens.d.ts +34 -0
  134. package/types/utils/transformers.d.ts +11 -0
package/components/FileUpload.css ADDED
@@ -0,0 +1,204 @@
1
+ :root,
2
+ :host,
3
+ .bm-light,
4
+ .bm-dark .bm-inverse,
5
+ [data-bm-theme~="bm-light"] {
6
+ --bm-comp-file-upload-color-dropzone-bg: var(
7
+ --bm-sem-color-surface-01,
8
+ #ffffff
9
+ );
10
+ --bm-comp-file-upload-color-dropzone-text: var(
11
+ --bm-sem-color-text-primary,
12
+ #141d24
13
+ );
14
+ --bm-comp-file-upload-color-dropzone-icon: var(
15
+ --bm-sem-color-icon-secondary,
16
+ #576775
17
+ );
18
+ --bm-comp-file-upload-color-dropzone-border: var(
19
+ --bm-sem-color-border-strong,
20
+ #8697a5
21
+ );
22
+ --bm-comp-file-upload-color-dropzone-bg-drag: var(
23
+ --bm-utility-color-accent-subtlest,
24
+ #e9fcff
25
+ );
26
+ --bm-comp-file-upload-color-dropzone-border-drag: var(
27
+ --bm-utility-color-accent-default,
28
+ #00768f
29
+ );
30
+ --bm-comp-file-upload-color-dropzone-icon-drag: var(
31
+ --bm-utility-color-accent-default,
32
+ #00768f
33
+ );
34
+ --bm-comp-file-upload-color-file-bg: var(
35
+ --bm-sem-color-surface-highlight,
36
+ rgba(159, 175, 188, 0.16)
37
+ );
38
+ --bm-comp-file-upload-color-file-name: var(
39
+ --bm-sem-color-text-primary,
40
+ #141d24
41
+ );
42
+ --bm-comp-file-upload-color-file-detail: var(
43
+ --bm-sem-color-text-secondary,
44
+ #576775
45
+ );
46
+ --bm-comp-file-upload-color-file-icon: var(
47
+ --bm-sem-color-icon-secondary,
48
+ #576775
49
+ );
50
+ --bm-comp-file-upload-color-file-icon-success: var(
51
+ --bm-sem-color-icon-positive-strong,
52
+ #187c36
53
+ );
54
+ --bm-comp-file-upload-color-file-icon-error: var(
55
+ --bm-sem-color-icon-negative-strong,
56
+ #cc2429
57
+ );
58
+ --bm-comp-file-upload-space-file-x: var(--bm-sem-space-100, 1rem);
59
+ --bm-comp-file-upload-space-file-gap: var(--bm-sem-space-75, 0.75rem);
60
+ --bm-comp-file-upload-space-file-gap-inner: var(--bm-sem-space-50, 0.5rem);
61
+ --bm-comp-file-upload-space-file-md-y: var(--bm-sem-space-50, 0.5rem);
62
+ --bm-comp-file-upload-space-file-lg-y: var(--bm-sem-space-75, 0.75rem);
63
+ --bm-comp-file-upload-space-dropzone-x: var(--bm-sem-space-100, 1rem);
64
+ --bm-comp-file-upload-space-dropzone-gap: var(--bm-sem-space-25, 0.25rem);
65
+ --bm-comp-file-upload-space-dropzone-sm-y: var(--bm-sem-space-100, 1rem);
66
+ --bm-comp-file-upload-space-dropzone-md-y: var(--bm-sem-space-200, 2rem);
67
+ --bm-comp-file-upload-size-file-md-height: var(
68
+ --bm-primitive-dimension-250,
69
+ 2.5rem
70
+ );
71
+ --bm-comp-file-upload-size-file-md-thumbnail: var(
72
+ --bm-primitive-dimension-150,
73
+ 1.5rem
74
+ );
75
+ --bm-comp-file-upload-size-file-lg-height: var(
76
+ --bm-primitive-dimension-400,
77
+ 4rem
78
+ );
79
+ --bm-comp-file-upload-size-file-lg-thumbnail: var(
80
+ --bm-primitive-dimension-250,
81
+ 2.5rem
82
+ );
83
+ --bm-comp-file-upload-radius-file: var(--bm-sem-radius-sm, 0.25rem);
84
+ --bm-comp-file-upload-radius-dropzone: var(--bm-sem-radius-sm, 0.25rem);
85
+ --bm-comp-file-upload-radius-thumbnail: var(--bm-sem-radius-sm, 0.25rem);
86
+ --bm-comp-file-upload-border-width-dropzone-default: var(
87
+ --bm-sem-border-width-md,
88
+ 0.063rem
89
+ );
90
+ --bm-comp-file-upload-border-width-dropzone-drag: var(
91
+ --bm-sem-border-width-lg,
92
+ 0.125rem
93
+ );
94
+ --bm-comp-file-upload-typo-file: var(
95
+ --bm-sem-typo-body-sm,
96
+ 400 0.875rem/1.25rem "Source Sans Pro"
97
+ );
98
+ --bm-comp-file-upload-typo-dropzone: var(
99
+ --bm-sem-typo-body-sm,
100
+ 400 0.875rem/1.25rem "Source Sans Pro"
101
+ );
102
+ }
103
+
104
+ :host,
105
+ .bm-dark,
106
+ .bm-light .bm-inverse,
107
+ [data-bm-theme~="bm-dark"] {
108
+ --bm-comp-file-upload-color-dropzone-bg: var(
109
+ --bm-sem-color-surface-01,
110
+ #202e39
111
+ );
112
+ --bm-comp-file-upload-color-dropzone-text: var(
113
+ --bm-sem-color-text-primary,
114
+ #ffffff
115
+ );
116
+ --bm-comp-file-upload-color-dropzone-icon: var(
117
+ --bm-sem-color-icon-secondary,
118
+ #c3cdd5
119
+ );
120
+ --bm-comp-file-upload-color-dropzone-border: var(
121
+ --bm-sem-color-border-strong,
122
+ #9fafbc
123
+ );
124
+ --bm-comp-file-upload-color-dropzone-bg-drag: var(
125
+ --bm-utility-color-accent-subtlest,
126
+ #01262d
127
+ );
128
+ --bm-comp-file-upload-color-dropzone-border-drag: var(
129
+ --bm-utility-color-accent-default,
130
+ #43bfd6
131
+ );
132
+ --bm-comp-file-upload-color-dropzone-icon-drag: var(
133
+ --bm-utility-color-accent-default,
134
+ #43bfd6
135
+ );
136
+ --bm-comp-file-upload-color-file-bg: var(
137
+ --bm-sem-color-surface-highlight,
138
+ rgba(134, 151, 165, 0.16)
139
+ );
140
+ --bm-comp-file-upload-color-file-name: var(
141
+ --bm-sem-color-text-primary,
142
+ #ffffff
143
+ );
144
+ --bm-comp-file-upload-color-file-detail: var(
145
+ --bm-sem-color-text-secondary,
146
+ #c3cdd5
147
+ );
148
+ --bm-comp-file-upload-color-file-icon: var(
149
+ --bm-sem-color-icon-secondary,
150
+ #c3cdd5
151
+ );
152
+ --bm-comp-file-upload-color-file-icon-success: var(
153
+ --bm-sem-color-icon-positive-strong,
154
+ #b3eb9e
155
+ );
156
+ --bm-comp-file-upload-color-file-icon-error: var(
157
+ --bm-sem-color-icon-negative-strong,
158
+ #f67378
159
+ );
160
+ --bm-comp-file-upload-space-file-x: var(--bm-sem-space-100, 1rem);
161
+ --bm-comp-file-upload-space-file-gap: var(--bm-sem-space-75, 0.75rem);
162
+ --bm-comp-file-upload-space-file-gap-inner: var(--bm-sem-space-50, 0.5rem);
163
+ --bm-comp-file-upload-space-file-md-y: var(--bm-sem-space-50, 0.5rem);
164
+ --bm-comp-file-upload-space-file-lg-y: var(--bm-sem-space-75, 0.75rem);
165
+ --bm-comp-file-upload-space-dropzone-x: var(--bm-sem-space-100, 1rem);
166
+ --bm-comp-file-upload-space-dropzone-gap: var(--bm-sem-space-25, 0.25rem);
167
+ --bm-comp-file-upload-space-dropzone-sm-y: var(--bm-sem-space-100, 1rem);
168
+ --bm-comp-file-upload-space-dropzone-md-y: var(--bm-sem-space-200, 2rem);
169
+ --bm-comp-file-upload-size-file-md-height: var(
170
+ --bm-primitive-dimension-250,
171
+ 2.5rem
172
+ );
173
+ --bm-comp-file-upload-size-file-md-thumbnail: var(
174
+ --bm-primitive-dimension-150,
175
+ 1.5rem
176
+ );
177
+ --bm-comp-file-upload-size-file-lg-height: var(
178
+ --bm-primitive-dimension-400,
179
+ 4rem
180
+ );
181
+ --bm-comp-file-upload-size-file-lg-thumbnail: var(
182
+ --bm-primitive-dimension-250,
183
+ 2.5rem
184
+ );
185
+ --bm-comp-file-upload-radius-file: var(--bm-sem-radius-sm, 0.25rem);
186
+ --bm-comp-file-upload-radius-dropzone: var(--bm-sem-radius-sm, 0.25rem);
187
+ --bm-comp-file-upload-radius-thumbnail: var(--bm-sem-radius-sm, 0.25rem);
188
+ --bm-comp-file-upload-border-width-dropzone-default: var(
189
+ --bm-sem-border-width-md,
190
+ 0.063rem
191
+ );
192
+ --bm-comp-file-upload-border-width-dropzone-drag: var(
193
+ --bm-sem-border-width-lg,
194
+ 0.125rem
195
+ );
196
+ --bm-comp-file-upload-typo-file: var(
197
+ --bm-sem-typo-body-sm,
198
+ 400 0.875rem/1.25rem "Source Sans Pro"
199
+ );
200
+ --bm-comp-file-upload-typo-dropzone: var(
201
+ --bm-sem-typo-body-sm,
202
+ 400 0.875rem/1.25rem "Source Sans Pro"
203
+ );
204
+ }
package/components/Header.css ADDED
@@ -0,0 +1,94 @@
1
+ :root,
2
+ :host,
3
+ .bm-light,
4
+ .bm-dark .bm-inverse,
5
+ [data-bm-theme~="bm-light"] {
6
+ --bm-comp-header-color-bg: var(--bm-sem-color-surface-01, #ffffff);
7
+ --bm-comp-header-color-border: var(--bm-sem-color-border-01, #dfe7ec);
8
+ --bm-comp-header-color-nav-item-fg: var(
9
+ --bm-sem-color-text-secondary,
10
+ #576775
11
+ );
12
+ --bm-comp-header-color-nav-item-fg-selected: var(
13
+ --bm-sem-color-text-primary,
14
+ #141d24
15
+ );
16
+ --bm-comp-header-color-nav-item-indicator: var(
17
+ --bm-utility-color-accent-default,
18
+ #00768f
19
+ );
20
+ --bm-comp-header-space-x: var(--bm-sem-space-100, 1rem);
21
+ --bm-comp-header-space-gap: var(--bm-sem-space-100, 1rem);
22
+ --bm-comp-header-space-nav-gap: var(--bm-sem-space-50, 0.5rem);
23
+ --bm-comp-header-space-actions-gap: var(--bm-sem-space-100, 1rem);
24
+ --bm-comp-header-space-nav-item-x: var(--bm-sem-space-50, 0.5rem);
25
+ --bm-comp-header-space-nav-item-gap: var(--bm-sem-space-50, 0.5rem);
26
+ --bm-comp-header-space-sidenav-control-nudge: var(
27
+ --bm-primitive-dimension-37,
28
+ 0.375rem
29
+ );
30
+ --bm-comp-header-size-height: var(--bm-primitive-dimension-400, 4rem);
31
+ --bm-comp-header-size-nav-item-height: var(
32
+ --bm-primitive-dimension-200,
33
+ 2rem
34
+ );
35
+ --bm-comp-header-size-nav-item-icon: var(--bm-sem-size-icon-md, 1.25rem);
36
+ --bm-comp-header-size-nav-item-indicator: 0.188rem;
37
+ --bm-comp-header-radius-nav-item: var(--bm-sem-radius-sm, 0.25rem);
38
+ --bm-comp-header-radius-indicator: var(--bm-sem-radius-xs, 0.125rem);
39
+ --bm-comp-header-nav-item-typo-default: var(
40
+ --bm-sem-typo-body-sm,
41
+ 400 0.875rem/1.25rem "Source Sans Pro"
42
+ );
43
+ --bm-comp-header-nav-item-typo-selected: var(
44
+ --bm-sem-typo-label-sm,
45
+ 600 0.875rem/1.25rem "Source Sans Pro"
46
+ );
47
+ }
48
+
49
+ :host,
50
+ .bm-dark,
51
+ .bm-light .bm-inverse,
52
+ [data-bm-theme~="bm-dark"] {
53
+ --bm-comp-header-color-bg: var(--bm-sem-color-surface-01, #202e39);
54
+ --bm-comp-header-color-border: var(--bm-sem-color-border-01, #32424e);
55
+ --bm-comp-header-color-nav-item-fg: var(
56
+ --bm-sem-color-text-secondary,
57
+ #c3cdd5
58
+ );
59
+ --bm-comp-header-color-nav-item-fg-selected: var(
60
+ --bm-sem-color-text-primary,
61
+ #ffffff
62
+ );
63
+ --bm-comp-header-color-nav-item-indicator: var(
64
+ --bm-utility-color-accent-default,
65
+ #43bfd6
66
+ );
67
+ --bm-comp-header-space-x: var(--bm-sem-space-100, 1rem);
68
+ --bm-comp-header-space-gap: var(--bm-sem-space-100, 1rem);
69
+ --bm-comp-header-space-nav-gap: var(--bm-sem-space-50, 0.5rem);
70
+ --bm-comp-header-space-actions-gap: var(--bm-sem-space-100, 1rem);
71
+ --bm-comp-header-space-nav-item-x: var(--bm-sem-space-50, 0.5rem);
72
+ --bm-comp-header-space-nav-item-gap: var(--bm-sem-space-50, 0.5rem);
73
+ --bm-comp-header-space-sidenav-control-nudge: var(
74
+ --bm-primitive-dimension-37,
75
+ 0.375rem
76
+ );
77
+ --bm-comp-header-size-height: var(--bm-primitive-dimension-400, 4rem);
78
+ --bm-comp-header-size-nav-item-height: var(
79
+ --bm-primitive-dimension-200,
80
+ 2rem
81
+ );
82
+ --bm-comp-header-size-nav-item-icon: var(--bm-sem-size-icon-md, 1.25rem);
83
+ --bm-comp-header-size-nav-item-indicator: 0.188rem;
84
+ --bm-comp-header-radius-nav-item: var(--bm-sem-radius-sm, 0.25rem);
85
+ --bm-comp-header-radius-indicator: var(--bm-sem-radius-xs, 0.125rem);
86
+ --bm-comp-header-nav-item-typo-default: var(
87
+ --bm-sem-typo-body-sm,
88
+ 400 0.875rem/1.25rem "Source Sans Pro"
89
+ );
90
+ --bm-comp-header-nav-item-typo-selected: var(
91
+ --bm-sem-typo-label-sm,
92
+ 600 0.875rem/1.25rem "Source Sans Pro"
93
+ );
94
+ }
package/components/HelperText.css ADDED
@@ -0,0 +1,100 @@
1
+ :root,
2
+ :host,
3
+ .bm-light,
4
+ .bm-dark .bm-inverse,
5
+ [data-bm-theme~="bm-light"] {
6
+ --bm-comp-helper-text-space-gap: var(--bm-sem-space-25, 0.25rem);
7
+ --bm-comp-helper-text-space-top: var(--bm-sem-space-50, 0.5rem);
8
+ --bm-comp-helper-text-size-sm-icon: var(--bm-sem-size-icon-sm, 1rem);
9
+ --bm-comp-helper-text-size-md-icon: var(--bm-sem-size-icon-md, 1.25rem);
10
+ --bm-comp-helper-text-color-positive-icon: var(
11
+ --bm-sem-color-icon-positive-strong,
12
+ #187c36
13
+ );
14
+ --bm-comp-helper-text-color-positive-text: var(
15
+ --bm-sem-color-text-positive,
16
+ #187c36
17
+ );
18
+ --bm-comp-helper-text-color-warning-icon: var(
19
+ --bm-sem-color-icon-warning-strong,
20
+ #ac4902
21
+ );
22
+ --bm-comp-helper-text-color-warning-text: var(
23
+ --bm-sem-color-text-warning,
24
+ #ac4902
25
+ );
26
+ --bm-comp-helper-text-color-negative-icon: var(
27
+ --bm-sem-color-icon-negative-strong,
28
+ #cc2429
29
+ );
30
+ --bm-comp-helper-text-color-negative-text: var(
31
+ --bm-sem-color-text-negative,
32
+ #cc2429
33
+ );
34
+ --bm-comp-helper-text-color-info-icon: var(
35
+ --bm-sem-color-icon-info-secondary-strong,
36
+ #465967
37
+ );
38
+ --bm-comp-helper-text-color-info-text: var(
39
+ --bm-sem-color-text-info-secondary,
40
+ #465967
41
+ );
42
+ --bm-comp-helper-text-typo-sm: var(
43
+ --bm-sem-typo-body-sm,
44
+ 400 0.875rem/1.25rem "Source Sans Pro"
45
+ );
46
+ --bm-comp-helper-text-typo-md: var(
47
+ --bm-sem-typo-body-md,
48
+ 400 1rem/1.5rem "Source Sans Pro"
49
+ );
50
+ }
51
+
52
+ :host,
53
+ .bm-dark,
54
+ .bm-light .bm-inverse,
55
+ [data-bm-theme~="bm-dark"] {
56
+ --bm-comp-helper-text-space-gap: var(--bm-sem-space-25, 0.25rem);
57
+ --bm-comp-helper-text-space-top: var(--bm-sem-space-50, 0.5rem);
58
+ --bm-comp-helper-text-size-sm-icon: var(--bm-sem-size-icon-sm, 1rem);
59
+ --bm-comp-helper-text-size-md-icon: var(--bm-sem-size-icon-md, 1.25rem);
60
+ --bm-comp-helper-text-color-positive-icon: var(
61
+ --bm-sem-color-icon-positive-strong,
62
+ #b3eb9e
63
+ );
64
+ --bm-comp-helper-text-color-positive-text: var(
65
+ --bm-sem-color-text-positive,
66
+ #b3eb9e
67
+ );
68
+ --bm-comp-helper-text-color-warning-icon: var(
69
+ --bm-sem-color-icon-warning-strong,
70
+ #ffd4a8
71
+ );
72
+ --bm-comp-helper-text-color-warning-text: var(
73
+ --bm-sem-color-text-warning,
74
+ #ffd4a8
75
+ );
76
+ --bm-comp-helper-text-color-negative-icon: var(
77
+ --bm-sem-color-icon-negative-strong,
78
+ #f67378
79
+ );
80
+ --bm-comp-helper-text-color-negative-text: var(
81
+ --bm-sem-color-text-negative,
82
+ #f67378
83
+ );
84
+ --bm-comp-helper-text-color-info-icon: var(
85
+ --bm-sem-color-icon-info-secondary-strong,
86
+ #c3cdd5
87
+ );
88
+ --bm-comp-helper-text-color-info-text: var(
89
+ --bm-sem-color-text-info-secondary,
90
+ #c3cdd5
91
+ );
92
+ --bm-comp-helper-text-typo-sm: var(
93
+ --bm-sem-typo-body-sm,
94
+ 400 0.875rem/1.25rem "Source Sans Pro"
95
+ );
96
+ --bm-comp-helper-text-typo-md: var(
97
+ --bm-sem-typo-body-md,
98
+ 400 1rem/1.5rem "Source Sans Pro"
99
+ );
100
+ }