@hermes-ui/angular 0.1.6 → 0.2.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/README.md +52 -52
- package/button/_buttons.clarity.scss +80 -2
- package/button/_mixins.buttons.scss +44 -2
- package/button/_properties.buttons.scss +349 -387
- package/button/_variables.buttons.scss +22 -0
- package/fesm2022/hermes-ui-angular-accordion.mjs +2 -2
- package/fesm2022/hermes-ui-angular-accordion.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-addons-a11y.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-addons-card-container.mjs +3 -3
- package/fesm2022/hermes-ui-angular-addons-card-container.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-addons-certificate-viewer.mjs +2 -2
- package/fesm2022/hermes-ui-angular-addons-certificate-viewer.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-addons-datagrid-filters.mjs +2 -2
- package/fesm2022/hermes-ui-angular-addons-datagrid-filters.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-addons-datagrid.mjs +30 -30
- package/fesm2022/hermes-ui-angular-addons-datagrid.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-addons-dialog.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-addons-menu.mjs +8 -8
- package/fesm2022/hermes-ui-angular-addons-menu.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-addons-property-view.mjs +2 -2
- package/fesm2022/hermes-ui-angular-addons-property-view.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-addons-stepper.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-addons-tabs.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-addons-testing.mjs +78 -78
- package/fesm2022/hermes-ui-angular-addons-testing.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-addons-theme-builder.mjs +66 -66
- package/fesm2022/hermes-ui-angular-addons-theme-builder.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-addons-var.mjs +2 -2
- package/fesm2022/hermes-ui-angular-addons-var.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-addons-wizard.mjs +2 -2
- package/fesm2022/hermes-ui-angular-addons-wizard.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-addons-workflow.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-button.mjs +76 -76
- package/fesm2022/hermes-ui-angular-button.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-card.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-collapsible-panel.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-data-datagrid.mjs +928 -928
- package/fesm2022/hermes-ui-angular-data-datagrid.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-data-stack-view.mjs +116 -116
- package/fesm2022/hermes-ui-angular-data-stack-view.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-data-tree-view.mjs +14 -14
- package/fesm2022/hermes-ui-angular-data-tree-view.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-data.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-divider.mjs +2 -2
- package/fesm2022/hermes-ui-angular-divider.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-emphasis-alert.mjs +2 -2
- package/fesm2022/hermes-ui-angular-emphasis-alert.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-emphasis-badge.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-emphasis-label.mjs +16 -16
- package/fesm2022/hermes-ui-angular-emphasis-label.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-emphasis.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-forms-checkbox.mjs +52 -52
- package/fesm2022/hermes-ui-angular-forms-checkbox.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-forms-combobox.mjs +128 -128
- package/fesm2022/hermes-ui-angular-forms-combobox.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-forms-common.mjs +2 -2
- package/fesm2022/hermes-ui-angular-forms-common.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-forms-datalist.mjs +48 -48
- package/fesm2022/hermes-ui-angular-forms-datalist.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-forms-datepicker.mjs +377 -377
- package/fesm2022/hermes-ui-angular-forms-datepicker.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-forms-file-input.mjs +192 -192
- package/fesm2022/hermes-ui-angular-forms-file-input.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-forms-input.mjs +54 -54
- package/fesm2022/hermes-ui-angular-forms-input.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-forms-native-select.mjs +40 -40
- package/fesm2022/hermes-ui-angular-forms-native-select.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-forms-number-input.mjs +82 -82
- package/fesm2022/hermes-ui-angular-forms-number-input.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-forms-password.mjs +60 -60
- package/fesm2022/hermes-ui-angular-forms-password.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-forms-radio.mjs +52 -52
- package/fesm2022/hermes-ui-angular-forms-radio.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-forms-range.mjs +46 -46
- package/fesm2022/hermes-ui-angular-forms-range.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-forms-select.mjs +10 -10
- package/fesm2022/hermes-ui-angular-forms-select.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-forms-textarea.mjs +40 -40
- package/fesm2022/hermes-ui-angular-forms-textarea.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-forms.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-icon.mjs +29 -29
- package/fesm2022/hermes-ui-angular-icon.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-layout-breadcrumbs.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-layout-main-container.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-layout-nav.mjs +48 -48
- package/fesm2022/hermes-ui-angular-layout-nav.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-layout-tabs.mjs +148 -148
- package/fesm2022/hermes-ui-angular-layout-tabs.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-layout-vertical-nav.mjs +382 -28
- package/fesm2022/hermes-ui-angular-layout-vertical-nav.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-layout.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-modal.mjs +2 -2
- package/fesm2022/hermes-ui-angular-modal.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-pagination.mjs +8 -8
- package/fesm2022/hermes-ui-angular-pagination.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-popover-common.mjs +26 -3
- package/fesm2022/hermes-ui-angular-popover-common.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-popover-dropdown.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-popover-signpost.mjs +68 -68
- package/fesm2022/hermes-ui-angular-popover-signpost.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-popover-tooltip.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-popover.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-progress-progress-bars.mjs +10 -10
- package/fesm2022/hermes-ui-angular-progress-progress-bars.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-progress-spinner.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-stepper.mjs +2 -2
- package/fesm2022/hermes-ui-angular-stepper.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-timeline.mjs +2 -2
- package/fesm2022/hermes-ui-angular-timeline.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-toast.mjs +6 -6
- package/fesm2022/hermes-ui-angular-toast.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-utils-conditional.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-utils.mjs +6 -0
- package/fesm2022/hermes-ui-angular-utils.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular-wizard.mjs +58 -58
- package/fesm2022/hermes-ui-angular-wizard.mjs.map +1 -1
- package/fesm2022/hermes-ui-angular.mjs.map +1 -1
- package/forms/combobox/_combobox.clarity.scss +18 -4
- package/forms/combobox/_properties.combobox.scss +5 -5
- package/forms/styles/_input-group.clarity.scss +7 -0
- package/forms/styles/_mixins.forms.scss +12 -10
- package/forms/styles/_native-select.clarity.scss +17 -5
- package/forms/styles/_properties.forms.scss +29 -18
- package/forms/styles/_textarea.clarity.scss +4 -4
- package/forms/styles/_variables.forms.scss +6 -0
- package/hermes-ui.scss +7 -7
- package/layout/main-container/_properties.header.scss +44 -6
- package/layout/main-container/_variables.header.scss +11 -0
- package/layout/nav/_header.clarity.scss +14 -0
- package/layout/nav/_mixins.header.scss +55 -40
- package/layout/nav/_responsive-nav.clarity.scss +21 -10
- package/layout/vertical-nav/_properties.vertical-nav.scss +77 -27
- package/layout/vertical-nav/_variables.vertical-nav.scss +23 -0
- package/layout/vertical-nav/_vertical-nav.clarity.scss +418 -277
- package/package.json +1 -1
- package/toast/README.md +65 -65
- package/toast/_properties.toast.scss +56 -56
- package/toast/_toast.clarity.scss +190 -190
- package/toast/_variables.toast.scss +33 -33
- package/types/hermes-ui-angular-addons-theme-builder.d.ts +2 -2
- package/types/hermes-ui-angular-addons-theme-builder.d.ts.map +1 -1
- package/types/hermes-ui-angular-data-datagrid.d.ts.map +1 -1
- package/types/hermes-ui-angular-icon.d.ts +3 -3
- package/types/hermes-ui-angular-icon.d.ts.map +1 -1
- package/types/hermes-ui-angular-layout-vertical-nav.d.ts +134 -10
- package/types/hermes-ui-angular-layout-vertical-nav.d.ts.map +1 -1
- package/types/hermes-ui-angular-popover-common.d.ts +4 -3
- package/types/hermes-ui-angular-popover-common.d.ts.map +1 -1
- package/types/hermes-ui-angular-utils.d.ts +12 -0
- package/types/hermes-ui-angular-utils.d.ts.map +1 -1
- package/types/hermes-ui-angular-wizard.d.ts.map +1 -1
|
@@ -1,387 +1,349 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
|
|
3
|
-
* The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
|
|
4
|
-
* This software is released under MIT license.
|
|
5
|
-
* The full license information can be found in LICENSE in the root directory of this project.
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
@use '../styles/mixins';
|
|
9
|
-
@use '../styles/variables/variables.density' as density;
|
|
10
|
-
@use '../styles/core/tokens/variables.tokens' as tokens;
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
--hermes-btn-
|
|
151
|
-
--hermes-btn-
|
|
152
|
-
--hermes-btn-
|
|
153
|
-
--hermes-btn-
|
|
154
|
-
--hermes-btn-
|
|
155
|
-
--hermes-btn-
|
|
156
|
-
--hermes-btn-
|
|
157
|
-
--hermes-btn-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
//
|
|
161
|
-
--hermes-btn-
|
|
162
|
-
--hermes-btn-
|
|
163
|
-
--hermes-btn-
|
|
164
|
-
--hermes-btn-
|
|
165
|
-
--hermes-btn-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
--hermes-btn-
|
|
172
|
-
--hermes-btn-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
--hermes-btn-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
--hermes-btn-
|
|
179
|
-
--hermes-btn-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
--hermes-btn-
|
|
183
|
-
--hermes-btn-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
--hermes-btn-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
--hermes-btn-
|
|
190
|
-
--hermes-btn-
|
|
191
|
-
--hermes-btn-
|
|
192
|
-
--hermes-btn-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
--hermes-btn-
|
|
196
|
-
--hermes-btn-
|
|
197
|
-
--hermes-btn-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
--hermes-btn-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
--hermes-btn-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
--hermes-btn-
|
|
212
|
-
--hermes-btn-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
--hermes-btn-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
--hermes-btn-
|
|
224
|
-
--hermes-btn-
|
|
225
|
-
--hermes-btn-
|
|
226
|
-
--hermes-btn-
|
|
227
|
-
--hermes-btn-
|
|
228
|
-
--hermes-btn-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
--hermes-btn-
|
|
232
|
-
--hermes-btn-
|
|
233
|
-
--hermes-btn-
|
|
234
|
-
--hermes-btn-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
--hermes-btn-
|
|
238
|
-
--hermes-btn-
|
|
239
|
-
--hermes-btn-
|
|
240
|
-
--hermes-btn-
|
|
241
|
-
--hermes-btn-
|
|
242
|
-
--hermes-btn-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
--hermes-btn-
|
|
246
|
-
--hermes-btn-
|
|
247
|
-
--hermes-btn-
|
|
248
|
-
--hermes-btn-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
--hermes-btn-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
//
|
|
259
|
-
--hermes-btn-
|
|
260
|
-
--hermes-btn-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
--hermes-btn-neutral-
|
|
264
|
-
--hermes-btn-neutral-
|
|
265
|
-
--hermes-btn-neutral-
|
|
266
|
-
--hermes-btn-neutral-
|
|
267
|
-
--hermes-btn-neutral-
|
|
268
|
-
--hermes-btn-neutral-
|
|
269
|
-
--hermes-btn-neutral-
|
|
270
|
-
--hermes-btn-neutral-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
--hermes-btn-
|
|
274
|
-
--hermes-btn-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
--hermes-btn-
|
|
278
|
-
--hermes-btn-
|
|
279
|
-
--hermes-btn-
|
|
280
|
-
--hermes-btn-
|
|
281
|
-
--hermes-btn-
|
|
282
|
-
--hermes-btn-
|
|
283
|
-
--hermes-btn-
|
|
284
|
-
--hermes-btn-
|
|
285
|
-
--hermes-btn-
|
|
286
|
-
--hermes-btn-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
--hermes-btn-link
|
|
292
|
-
--hermes-btn-link-
|
|
293
|
-
--hermes-btn-link-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
--hermes-btn-link-
|
|
298
|
-
--hermes-btn-link-
|
|
299
|
-
--hermes-btn-link-
|
|
300
|
-
--hermes-btn-link-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
--hermes-btn-link-info-color:
|
|
304
|
-
--hermes-btn-link-info-
|
|
305
|
-
--hermes-btn-link-info-
|
|
306
|
-
--hermes-btn-link-info-
|
|
307
|
-
--hermes-btn-link-info-
|
|
308
|
-
--hermes-btn-link-info-
|
|
309
|
-
|
|
310
|
-
--hermes-btn-link-
|
|
311
|
-
--hermes-btn-link-
|
|
312
|
-
--hermes-btn-link-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
--hermes-btn-link-
|
|
318
|
-
--hermes-btn-link-
|
|
319
|
-
--hermes-btn-link-
|
|
320
|
-
--hermes-btn-link-
|
|
321
|
-
--hermes-btn-link-
|
|
322
|
-
--hermes-btn-link-
|
|
323
|
-
--hermes-btn-link-
|
|
324
|
-
--hermes-btn-link-
|
|
325
|
-
--hermes-btn-link-
|
|
326
|
-
--hermes-btn-link-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
--hermes-btn-
|
|
332
|
-
--hermes-btn-
|
|
333
|
-
--hermes-btn-
|
|
334
|
-
--hermes-btn-
|
|
335
|
-
--hermes-btn-
|
|
336
|
-
--hermes-btn-
|
|
337
|
-
--hermes-btn-
|
|
338
|
-
--hermes-btn-
|
|
339
|
-
--hermes-btn-
|
|
340
|
-
--hermes-btn-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
--hermes-btn-link-danger-active-color: var(--hermes-btn-link-danger-color);
|
|
351
|
-
--hermes-btn-link-danger-active-bg-color: var(--hermes-btn-transparent-bg-color);
|
|
352
|
-
--hermes-btn-link-danger-disabled-color: #{tokens.$hermes-alias-typography-disabled};
|
|
353
|
-
--hermes-btn-link-danger-disabled-bg-color: var(--hermes-btn-transparent-bg-color);
|
|
354
|
-
--hermes-btn-link-danger-disabled-border-color: var(--hermes-btn-transparent-bg-color);
|
|
355
|
-
--hermes-btn-link-danger-checked-bg-color: var(--hermes-btn-transparent-bg-color);
|
|
356
|
-
--hermes-btn-link-danger-checked-color: var(--hermes-btn-link-danger-color);
|
|
357
|
-
|
|
358
|
-
// Danger Link button colors
|
|
359
|
-
--hermes-btn-link-neutral-color: #{tokens.$hermes-alias-status-neutral};
|
|
360
|
-
--hermes-btn-link-neutral-bg-color: var(--hermes-btn-transparent-bg-color);
|
|
361
|
-
--hermes-btn-link-neutral-border-color: var(--hermes-btn-transparent-bg-color);
|
|
362
|
-
--hermes-btn-link-neutral-hover-bg-color: var(--hermes-btn-transparent-bg-color);
|
|
363
|
-
--hermes-btn-link-neutral-hover-color: #{tokens.$hermes-alias-typography-neutral-hover};
|
|
364
|
-
--hermes-btn-link-neutral-active-color: var(--hermes-btn-link-neutral-color);
|
|
365
|
-
--hermes-btn-link-neutral-active-bg-color: var(--hermes-btn-transparent-bg-color);
|
|
366
|
-
--hermes-btn-link-neutral-disabled-color: #{tokens.$hermes-alias-typography-disabled};
|
|
367
|
-
--hermes-btn-link-neutral-disabled-bg-color: var(--hermes-btn-transparent-bg-color);
|
|
368
|
-
--hermes-btn-link-neutral-disabled-border-color: var(--hermes-btn-transparent-bg-color);
|
|
369
|
-
--hermes-btn-link-neutral-checked-bg-color: var(--hermes-btn-transparent-bg-color);
|
|
370
|
-
--hermes-btn-link-neutral-checked-color: var(--hermes-btn-link-neutral-color);
|
|
371
|
-
|
|
372
|
-
// Inverse button colors
|
|
373
|
-
--hermes-btn-inverse-color: #{tokens.$hermes-global-color-white};
|
|
374
|
-
--hermes-btn-inverse-border-color: #{tokens.$hermes-global-color-white};
|
|
375
|
-
--hermes-btn-inverse-bg-color: var(--hermes-btn-transparent-bg-color);
|
|
376
|
-
--hermes-btn-inverse-hover-bg-color: #{tokens.$hermes-alias-object-interaction-inverse-hover};
|
|
377
|
-
--hermes-btn-inverse-hover-color: var(--hermes-btn-inverse-color); // var(--hermes-color-neutral-0);
|
|
378
|
-
--hermes-btn-inverse-active-bg-color: var(--hermes-alias-object-interaction-inverse-active);
|
|
379
|
-
--hermes-btn-inverse-active-color: #{tokens.$hermes-global-color-white};
|
|
380
|
-
--hermes-btn-inverse-disabled-color: #{tokens.$hermes-alias-typography-disabled};
|
|
381
|
-
--hermes-btn-inverse-disabled-bg-color: var(--hermes-btn-default-outline-bg-color);
|
|
382
|
-
--hermes-btn-inverse-disabled-border-color: #{tokens.$hermes-alias-status-disabled};
|
|
383
|
-
--hermes-btn-inverse-checked-bg-color: var(--hermes-btn-inverse-bg-color);
|
|
384
|
-
--hermes-btn-inverse-checked-color: var(--hermes-btn-inverse-color);
|
|
385
|
-
}
|
|
386
|
-
}
|
|
387
|
-
}
|
|
1
|
+
/*
|
|
2
|
+
* Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
|
|
3
|
+
* The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
|
|
4
|
+
* This software is released under MIT license.
|
|
5
|
+
* The full license information can be found in LICENSE in the root directory of this project.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
@use '../styles/mixins';
|
|
9
|
+
@use '../styles/variables/variables.density' as density;
|
|
10
|
+
@use '../styles/core/tokens/variables.tokens' as tokens;
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
// Sicoob button palette.
|
|
14
|
+
//
|
|
15
|
+
// Mirrors the `app-botao` of the Sicoob apps, which reads the ds-web (`@sicoob/ds-web`) semantic
|
|
16
|
+
// tokens. The values are resolved per mode so Hermes does not need the ds-web stylesheet at
|
|
17
|
+
// runtime, and are exposed as `--hermes-btn-palette-*` so a product can retarget the whole button
|
|
18
|
+
// family from one place.
|
|
19
|
+
//
|
|
20
|
+
// The primary intent is the exception: it derives from the Hermes primary aliases
|
|
21
|
+
// (`--hermes-alias-primary*`), so the theme builder and any product theme keep recoloring buttons.
|
|
22
|
+
// Light and dark come from those aliases, which is why the dark map has no primary entries.
|
|
23
|
+
//
|
|
24
|
+
// fill - solid background (`color-function-primary-default`, `color-denotative-*-default`)
|
|
25
|
+
// ink - legible stroke/text on the page and on the tint (`--cor-*` of app-botao)
|
|
26
|
+
// tint - soft background of the medium emphasis (`*-lightest`)
|
|
27
|
+
// on - text drawn over the fill (`--sobre-*` of app-botao; it inverts in dark mode)
|
|
28
|
+
$palette-light: (
|
|
29
|
+
'primary-fill': var(--hermes-alias-primary),
|
|
30
|
+
'primary-ink': var(--hermes-alias-primary-dark),
|
|
31
|
+
'primary-tint': var(--hermes-alias-primary-tint),
|
|
32
|
+
'primary-on': var(--hermes-alias-typography-color-100),
|
|
33
|
+
'success-fill': #7db61c,
|
|
34
|
+
'success-ink': #415e16,
|
|
35
|
+
'success-tint': #f8fde8,
|
|
36
|
+
'success-on': #002a33,
|
|
37
|
+
'warning-fill': #ffaa2c,
|
|
38
|
+
'warning-ink': #461202,
|
|
39
|
+
'warning-tint': #fff9eb,
|
|
40
|
+
'warning-on': #002a33,
|
|
41
|
+
'danger-fill': #f7406c,
|
|
42
|
+
'danger-ink': #a11042,
|
|
43
|
+
'danger-tint': #fff1f3,
|
|
44
|
+
'danger-on': #002a33,
|
|
45
|
+
'disabled-bg': #f0f0f0,
|
|
46
|
+
'disabled-border': #a4a4a4,
|
|
47
|
+
'disabled-text': #818181,
|
|
48
|
+
'hover': #ebedf1,
|
|
49
|
+
);
|
|
50
|
+
|
|
51
|
+
$palette-dark: (
|
|
52
|
+
'success-fill': #7db61c,
|
|
53
|
+
'success-ink': #7db61c,
|
|
54
|
+
'success-tint': #00252e,
|
|
55
|
+
'success-on': #00191f,
|
|
56
|
+
'warning-fill': #ffaa2c,
|
|
57
|
+
'warning-ink': #ffaa2c,
|
|
58
|
+
'warning-tint': #00252e,
|
|
59
|
+
'warning-on': #00191f,
|
|
60
|
+
'danger-fill': #f7406c,
|
|
61
|
+
'danger-ink': #f7406c,
|
|
62
|
+
'danger-tint': #00252e,
|
|
63
|
+
'danger-on': #00191f,
|
|
64
|
+
'disabled-bg': #383838,
|
|
65
|
+
'disabled-border': #818181,
|
|
66
|
+
'disabled-text': #666666,
|
|
67
|
+
'hover': #00191f,
|
|
68
|
+
);
|
|
69
|
+
|
|
70
|
+
@mixin palette($map) {
|
|
71
|
+
@each $name, $value in $map {
|
|
72
|
+
--hermes-btn-palette-#{$name}: #{$value};
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
@function p($name) {
|
|
77
|
+
@return var(--hermes-btn-palette-#{$name});
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
// Strong emphasis: filled with the intent color (`alta`).
|
|
81
|
+
@mixin solid-tokens($prefix, $intent) {
|
|
82
|
+
#{$prefix}-color: #{p('#{$intent}-on')};
|
|
83
|
+
#{$prefix}-bg-color: #{p('#{$intent}-fill')};
|
|
84
|
+
#{$prefix}-border-color: #{p('#{$intent}-fill')};
|
|
85
|
+
#{$prefix}-hover-bg-color: #{p('#{$intent}-fill')};
|
|
86
|
+
#{$prefix}-hover-color: #{p('#{$intent}-on')};
|
|
87
|
+
#{$prefix}-active-bg-color: #{p('#{$intent}-fill')};
|
|
88
|
+
#{$prefix}-active-color: #{p('#{$intent}-on')};
|
|
89
|
+
#{$prefix}-disabled-color: #{p('disabled-text')};
|
|
90
|
+
#{$prefix}-disabled-bg-color: #{p('disabled-bg')};
|
|
91
|
+
#{$prefix}-disabled-border-color: #{p('disabled-border')};
|
|
92
|
+
#{$prefix}-checked-bg-color: #{p('#{$intent}-fill')};
|
|
93
|
+
#{$prefix}-checked-color: #{p('#{$intent}-on')};
|
|
94
|
+
#{$prefix}-checked-hover-bg-color: #{p('#{$intent}-fill')};
|
|
95
|
+
#{$prefix}-checked-hover-color: #{p('#{$intent}-on')};
|
|
96
|
+
#{$prefix}-checked-active-bg-color: #{p('#{$intent}-fill')};
|
|
97
|
+
#{$prefix}-checked-active-color: #{p('#{$intent}-on')};
|
|
98
|
+
#{$prefix}-checked-disabled-bg-color: #{p('disabled-bg')};
|
|
99
|
+
#{$prefix}-checked-disabled-color: #{p('disabled-text')};
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
// Medium emphasis: tint plus a contour in the intent ink (`media`). Hover and active do not swap
|
|
103
|
+
// colors: the darkening comes from `filter: brightness()` on the button, which keeps the measured
|
|
104
|
+
// contrast ratio of the resting state.
|
|
105
|
+
@mixin tonal-tokens($prefix, $intent) {
|
|
106
|
+
#{$prefix}-color: #{p('#{$intent}-ink')};
|
|
107
|
+
#{$prefix}-border-color: #{p('#{$intent}-ink')};
|
|
108
|
+
#{$prefix}-bg-color: #{p('#{$intent}-tint')};
|
|
109
|
+
#{$prefix}-hover-bg-color: #{p('#{$intent}-tint')};
|
|
110
|
+
#{$prefix}-hover-color: #{p('#{$intent}-ink')};
|
|
111
|
+
#{$prefix}-active-bg-color: #{p('#{$intent}-tint')};
|
|
112
|
+
#{$prefix}-active-color: #{p('#{$intent}-ink')};
|
|
113
|
+
#{$prefix}-disabled-color: #{p('disabled-text')};
|
|
114
|
+
#{$prefix}-disabled-bg-color: #{p('disabled-bg')};
|
|
115
|
+
#{$prefix}-disabled-border-color: #{p('disabled-border')};
|
|
116
|
+
#{$prefix}-checked-bg-color: #{p('#{$intent}-fill')};
|
|
117
|
+
#{$prefix}-checked-color: #{p('#{$intent}-on')};
|
|
118
|
+
#{$prefix}-checked-hover-bg-color: #{p('#{$intent}-fill')};
|
|
119
|
+
#{$prefix}-checked-hover-color: #{p('#{$intent}-on')};
|
|
120
|
+
#{$prefix}-checked-active-bg-color: #{p('#{$intent}-fill')};
|
|
121
|
+
#{$prefix}-checked-active-color: #{p('#{$intent}-on')};
|
|
122
|
+
#{$prefix}-checked-disabled-bg-color: #{p('disabled-bg')};
|
|
123
|
+
#{$prefix}-checked-disabled-color: #{p('disabled-text')};
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
// Minimal emphasis: no frame, no fill (`minima`). The underline that keeps it recognisable as an
|
|
127
|
+
// action lives in `_buttons.clarity.scss`. Disabled falls back to the disabled box, as in app-botao.
|
|
128
|
+
@mixin minimal-tokens($prefix, $intent) {
|
|
129
|
+
#{$prefix}-color: #{p('#{$intent}-ink')};
|
|
130
|
+
#{$prefix}-bg-color: var(--hermes-btn-transparent-bg-color);
|
|
131
|
+
#{$prefix}-border-color: var(--hermes-btn-transparent-bg-color);
|
|
132
|
+
#{$prefix}-hover-bg-color: #{p('hover')};
|
|
133
|
+
#{$prefix}-hover-color: #{p('#{$intent}-ink')};
|
|
134
|
+
#{$prefix}-active-bg-color: #{p('hover')};
|
|
135
|
+
#{$prefix}-active-color: #{p('#{$intent}-ink')};
|
|
136
|
+
#{$prefix}-disabled-color: #{p('disabled-text')};
|
|
137
|
+
#{$prefix}-disabled-bg-color: #{p('disabled-bg')};
|
|
138
|
+
#{$prefix}-disabled-border-color: #{p('disabled-border')};
|
|
139
|
+
#{$prefix}-checked-bg-color: var(--hermes-btn-transparent-bg-color);
|
|
140
|
+
#{$prefix}-checked-color: #{p('#{$intent}-ink')};
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
@include mixins.exports('button.properties') {
|
|
144
|
+
@include mixins.root-or-host() {
|
|
145
|
+
--hermes-btn-group-focus-outline: #{tokens.$hermes-alias-object-interaction-outline};
|
|
146
|
+
|
|
147
|
+
&,
|
|
148
|
+
[hermes-density] {
|
|
149
|
+
// Spacing
|
|
150
|
+
--hermes-btn-vertical-margin: #{density.$hermes-base-vertical-offset-s};
|
|
151
|
+
--hermes-btn-horizontal-margin: #{density.$hermes-base-gap-m};
|
|
152
|
+
--hermes-btn-horizontal-padding: #{mixins.baselinePx(16)};
|
|
153
|
+
--hermes-btn-vertical-padding: #{mixins.baselinePx(4)};
|
|
154
|
+
--hermes-btn-padding: var(--hermes-btn-vertical-padding) var(--hermes-btn-horizontal-padding);
|
|
155
|
+
--hermes-btn-padding-sm: 0 #{mixins.baselinePx(8)};
|
|
156
|
+
--hermes-btn-padding-lg: #{mixins.baselinePx(8)} #{mixins.baselinePx(24)};
|
|
157
|
+
--hermes-btn-gap: #{mixins.baselinePx(8)};
|
|
158
|
+
|
|
159
|
+
// Sizing: the 24 / 32 / 40px ladder of `app-botao` (`pequeno` / `medio` / `grande`)
|
|
160
|
+
--hermes-btn-height: #{mixins.baselinePx(32)}; // this is standard height
|
|
161
|
+
--hermes-btn-height-sm: #{mixins.baselinePx(24)}; // this is btn-sm (small) height
|
|
162
|
+
--hermes-btn-height-lg: #{mixins.baselinePx(40)}; // this is btn-lg (large) height
|
|
163
|
+
--hermes-btn-min-width: #{mixins.baselinePx(56)};
|
|
164
|
+
--hermes-btn-min-width-sm: #{mixins.baselinePx(48)};
|
|
165
|
+
--hermes-btn-min-width-lg: #{mixins.baselinePx(64)};
|
|
166
|
+
|
|
167
|
+
// Typography
|
|
168
|
+
// 12px bold in sentence case for the default and small steps, 14px for large, as in
|
|
169
|
+
// `app-botao`. This overrides the shared BUTTON-12 typography token, which is also used
|
|
170
|
+
// elsewhere and is left alone. Uppercase is dropped on purpose (DS sheet `button-11`).
|
|
171
|
+
--hermes-btn-font-size: #{mixins.baselinePx(12)};
|
|
172
|
+
--hermes-btn-font-size-sm: #{mixins.baselinePx(12)};
|
|
173
|
+
--hermes-btn-font-size-lg: #{mixins.baselinePx(14)};
|
|
174
|
+
--hermes-btn-font-weight: 700;
|
|
175
|
+
--hermes-btn-line-height: 1;
|
|
176
|
+
|
|
177
|
+
// Borders: hairline and a short 6px corner, the same as the fields next to it.
|
|
178
|
+
--hermes-btn-border-radius: #{mixins.baselinePx(6)};
|
|
179
|
+
--hermes-btn-border-width: #{mixins.baselinePx(1)};
|
|
180
|
+
|
|
181
|
+
// Icons
|
|
182
|
+
--hermes-btn-icon-size: #{mixins.baselinePx(16)};
|
|
183
|
+
--hermes-btn-icon-size-lg: #{mixins.baselinePx(20)};
|
|
184
|
+
|
|
185
|
+
// Interaction
|
|
186
|
+
--hermes-btn-transition:
|
|
187
|
+
background-color 240ms cubic-bezier(0.4, 0, 0.2, 1), border-color 240ms cubic-bezier(0.4, 0, 0.2, 1),
|
|
188
|
+
color 240ms cubic-bezier(0.4, 0, 0.2, 1), filter 240ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
189
|
+
--hermes-btn-hover-brightness: 0.9;
|
|
190
|
+
--hermes-btn-active-brightness: 0.85;
|
|
191
|
+
--hermes-btn-focus-width: #{mixins.baselinePx(2)};
|
|
192
|
+
--hermes-btn-focus-offset: #{mixins.baselinePx(4)};
|
|
193
|
+
|
|
194
|
+
// Standard button appearance - overrideable but not advertised!
|
|
195
|
+
--hermes-btn-appearance-standard-height: var(--hermes-btn-height-sm);
|
|
196
|
+
--hermes-btn-appearance-standard-padding: var(--hermes-btn-padding-sm);
|
|
197
|
+
--hermes-btn-appearance-standard-icon-size: #{mixins.baselinePx(14)};
|
|
198
|
+
|
|
199
|
+
// form-style button appearance styles - overrideable but not advertised!
|
|
200
|
+
--hermes-btn-appearance-form-height: var(--hermes-btn-height);
|
|
201
|
+
--hermes-btn-appearance-form-padding: var(--hermes-btn-padding);
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
&,
|
|
205
|
+
[hermes-theme] {
|
|
206
|
+
@include palette($palette-light);
|
|
207
|
+
|
|
208
|
+
--hermes-btn-focus-color: #{p('primary-ink')};
|
|
209
|
+
|
|
210
|
+
// Shared colors
|
|
211
|
+
--hermes-btn-transparent-bg-color: #{tokens.$hermes-alias-object-opacity-0};
|
|
212
|
+
--hermes-btn-outline-bg-color: var(--hermes-btn-transparent-bg-color);
|
|
213
|
+
|
|
214
|
+
// Default button (medium emphasis, primary intent)
|
|
215
|
+
@include tonal-tokens('--hermes-btn-default', 'primary');
|
|
216
|
+
@include tonal-tokens('--hermes-btn-default-outline', 'primary');
|
|
217
|
+
|
|
218
|
+
// Primary button
|
|
219
|
+
@include solid-tokens('--hermes-btn-primary', 'primary');
|
|
220
|
+
@include tonal-tokens('--hermes-btn-primary-outline', 'primary');
|
|
221
|
+
|
|
222
|
+
// Info button colors
|
|
223
|
+
--hermes-btn-info-color: #{tokens.$hermes-alias-typography-color-100};
|
|
224
|
+
--hermes-btn-info-bg-color: #{tokens.$hermes-alias-status-info};
|
|
225
|
+
--hermes-btn-info-border-color: #{tokens.$hermes-alias-status-info};
|
|
226
|
+
--hermes-btn-info-hover-bg-color: #{tokens.$hermes-alias-object-interaction-info-hover};
|
|
227
|
+
--hermes-btn-info-hover-color: var(--hermes-btn-info-color);
|
|
228
|
+
--hermes-btn-info-active-color: #{tokens.$hermes-alias-typography-color-100};
|
|
229
|
+
--hermes-btn-info-active-bg-color: #{tokens.$hermes-alias-object-interaction-info-active};
|
|
230
|
+
--hermes-btn-info-disabled-color: #{tokens.$hermes-alias-typography-disabled-button};
|
|
231
|
+
--hermes-btn-info-disabled-bg-color: #{tokens.$hermes-alias-status-disabled};
|
|
232
|
+
--hermes-btn-info-disabled-border-color: #{tokens.$hermes-alias-status-disabled};
|
|
233
|
+
--hermes-btn-info-checked-bg-color: #{tokens.$hermes-alias-status-info};
|
|
234
|
+
--hermes-btn-info-checked-color: #{tokens.$hermes-alias-typography-color-100};
|
|
235
|
+
|
|
236
|
+
// Info outline button
|
|
237
|
+
--hermes-btn-info-outline-color: #{tokens.$hermes-alias-status-info};
|
|
238
|
+
--hermes-btn-info-outline-border-color: var(--hermes-btn-info-outline-color);
|
|
239
|
+
--hermes-btn-info-outline-bg-color: var(--hermes-btn-outline-bg-color);
|
|
240
|
+
--hermes-btn-info-outline-hover-bg-color: #{tokens.$hermes-alias-object-interaction-info-secondary-hover};
|
|
241
|
+
--hermes-btn-info-outline-hover-color: #{tokens.$hermes-alias-typography-info-hover};
|
|
242
|
+
--hermes-btn-info-outline-active-bg-color: var(--hermes-btn-outline-bg-color);
|
|
243
|
+
--hermes-btn-info-outline-active-color: var(--hermes-btn-info-outline-color);
|
|
244
|
+
--hermes-btn-info-outline-disabled-color: #{tokens.$hermes-alias-typography-disabled};
|
|
245
|
+
--hermes-btn-info-outline-disabled-bg-color: var(--hermes-btn-default-outline-bg-color);
|
|
246
|
+
--hermes-btn-info-outline-disabled-border-color: #{tokens.$hermes-alias-status-disabled};
|
|
247
|
+
--hermes-btn-info-outline-checked-color: #{tokens.$hermes-alias-typography-color-100};
|
|
248
|
+
--hermes-btn-info-outline-checked-bg-color: var(--hermes-btn-default-outline-bg-color);
|
|
249
|
+
|
|
250
|
+
// Success button
|
|
251
|
+
@include solid-tokens('--hermes-btn-success', 'success');
|
|
252
|
+
@include tonal-tokens('--hermes-btn-success-outline', 'success');
|
|
253
|
+
|
|
254
|
+
// Danger button
|
|
255
|
+
@include solid-tokens('--hermes-btn-danger', 'danger');
|
|
256
|
+
@include tonal-tokens('--hermes-btn-danger-outline', 'danger');
|
|
257
|
+
|
|
258
|
+
// Warning button
|
|
259
|
+
@include solid-tokens('--hermes-btn-warning', 'warning');
|
|
260
|
+
@include tonal-tokens('--hermes-btn-warning-outline', 'warning');
|
|
261
|
+
|
|
262
|
+
// Neutral button colors
|
|
263
|
+
--hermes-btn-neutral-color: #{tokens.$hermes-alias-typography-color-100};
|
|
264
|
+
--hermes-btn-neutral-bg-color: #{tokens.$hermes-alias-status-neutral};
|
|
265
|
+
--hermes-btn-neutral-border-color: var(--hermes-btn-neutral-bg-color);
|
|
266
|
+
--hermes-btn-neutral-hover-bg-color: #{tokens.$hermes-alias-object-interaction-neutral-hover};
|
|
267
|
+
--hermes-btn-neutral-hover-color: var(--hermes-btn-neutral-color);
|
|
268
|
+
--hermes-btn-neutral-active-bg-color: var(--hermes-alias-object-interaction-neutral-active);
|
|
269
|
+
--hermes-btn-neutral-active-color: var(--hermes-btn-neutral-color);
|
|
270
|
+
--hermes-btn-neutral-disabled-color: #{tokens.$hermes-alias-typography-disabled-button};
|
|
271
|
+
--hermes-btn-neutral-disabled-bg-color: #{tokens.$hermes-alias-status-disabled};
|
|
272
|
+
--hermes-btn-neutral-disabled-border-color: #{tokens.$hermes-alias-status-disabled};
|
|
273
|
+
--hermes-btn-neutral-checked-bg-color: var(--hermes-btn-neutral-bg-color);
|
|
274
|
+
--hermes-btn-neutral-checked-color: var(--hermes-btn-neutral-color);
|
|
275
|
+
|
|
276
|
+
// Neutral outline button colors
|
|
277
|
+
--hermes-btn-neutral-outline-color: #{tokens.$hermes-alias-status-neutral};
|
|
278
|
+
--hermes-btn-neutral-outline-bg-color: #{tokens.$hermes-alias-object-opacity-0};
|
|
279
|
+
--hermes-btn-neutral-outline-border-color: var(--hermes-btn-neutral-outline-color);
|
|
280
|
+
--hermes-btn-neutral-outline-hover-color: #{tokens.$hermes-alias-typography-neutral-hover};
|
|
281
|
+
--hermes-btn-neutral-outline-hover-bg-color: #{tokens.$hermes-alias-object-interaction-neutral-secondary-hover};
|
|
282
|
+
--hermes-btn-neutral-outline-active-color: #{tokens.$hermes-alias-status-neutral};
|
|
283
|
+
--hermes-btn-neutral-outline-active-bg-color: #{tokens.$hermes-alias-object-opacity-0};
|
|
284
|
+
--hermes-btn-neutral-outline-disabled-color: #{tokens.$hermes-alias-typography-disabled};
|
|
285
|
+
--hermes-btn-neutral-outline-disabled-bg-color: var(--hermes-btn-default-outline-bg-color);
|
|
286
|
+
--hermes-btn-neutral-outline-disabled-border-color: #{tokens.$hermes-alias-status-disabled};
|
|
287
|
+
--hermes-btn-neutral-outline-checked-bg-color: var(--hermes-btn-neutral-outline-bg-color);
|
|
288
|
+
--hermes-btn-neutral-outline-checked-color: var(--hermes-btn-neutral-outline-color);
|
|
289
|
+
|
|
290
|
+
// Link buttons (minimal emphasis)
|
|
291
|
+
@include minimal-tokens('--hermes-btn-link', 'primary');
|
|
292
|
+
--hermes-btn-link-visited-color: #{p('primary-ink')};
|
|
293
|
+
--hermes-btn-link-visited-hover-color: #{p('primary-ink')};
|
|
294
|
+
@include minimal-tokens('--hermes-btn-link-primary', 'primary');
|
|
295
|
+
|
|
296
|
+
// Info Link button colors
|
|
297
|
+
--hermes-btn-link-info-color: #{tokens.$hermes-alias-status-info};
|
|
298
|
+
--hermes-btn-link-info-bg-color: var(--hermes-btn-transparent-bg-color);
|
|
299
|
+
--hermes-btn-link-info-border-color: var(--hermes-btn-transparent-bg-color);
|
|
300
|
+
--hermes-btn-link-info-hover-bg-color: var(--hermes-btn-transparent-bg-color);
|
|
301
|
+
--hermes-btn-link-info-hover-color: #{tokens.$hermes-alias-typography-info-hover};
|
|
302
|
+
--hermes-btn-link-info-active-color: var(--hermes-btn-link-info-color);
|
|
303
|
+
--hermes-btn-link-info-active-bg-color: var(--hermes-btn-transparent-bg-color);
|
|
304
|
+
--hermes-btn-link-info-disabled-color: #{tokens.$hermes-alias-typography-disabled};
|
|
305
|
+
--hermes-btn-link-info-disabled-bg-color: var(--hermes-btn-transparent-bg-color);
|
|
306
|
+
--hermes-btn-link-info-disabled-border-color: var(--hermes-btn-transparent-bg-color);
|
|
307
|
+
--hermes-btn-link-info-checked-bg-color: var(--hermes-btn-transparent-bg-color);
|
|
308
|
+
--hermes-btn-link-info-checked-color: var(--hermes-btn-link-info-color);
|
|
309
|
+
|
|
310
|
+
@include minimal-tokens('--hermes-btn-link-success', 'success');
|
|
311
|
+
@include minimal-tokens('--hermes-btn-link-warning', 'warning');
|
|
312
|
+
@include minimal-tokens('--hermes-btn-link-danger', 'danger');
|
|
313
|
+
|
|
314
|
+
// Neutral Link button colors
|
|
315
|
+
--hermes-btn-link-neutral-color: #{tokens.$hermes-alias-status-neutral};
|
|
316
|
+
--hermes-btn-link-neutral-bg-color: var(--hermes-btn-transparent-bg-color);
|
|
317
|
+
--hermes-btn-link-neutral-border-color: var(--hermes-btn-transparent-bg-color);
|
|
318
|
+
--hermes-btn-link-neutral-hover-bg-color: var(--hermes-btn-transparent-bg-color);
|
|
319
|
+
--hermes-btn-link-neutral-hover-color: #{tokens.$hermes-alias-typography-neutral-hover};
|
|
320
|
+
--hermes-btn-link-neutral-active-color: var(--hermes-btn-link-neutral-color);
|
|
321
|
+
--hermes-btn-link-neutral-active-bg-color: var(--hermes-btn-transparent-bg-color);
|
|
322
|
+
--hermes-btn-link-neutral-disabled-color: #{tokens.$hermes-alias-typography-disabled};
|
|
323
|
+
--hermes-btn-link-neutral-disabled-bg-color: var(--hermes-btn-transparent-bg-color);
|
|
324
|
+
--hermes-btn-link-neutral-disabled-border-color: var(--hermes-btn-transparent-bg-color);
|
|
325
|
+
--hermes-btn-link-neutral-checked-bg-color: var(--hermes-btn-transparent-bg-color);
|
|
326
|
+
--hermes-btn-link-neutral-checked-color: var(--hermes-btn-link-neutral-color);
|
|
327
|
+
|
|
328
|
+
// Inverse button colors
|
|
329
|
+
--hermes-btn-inverse-color: #{tokens.$hermes-global-color-white};
|
|
330
|
+
--hermes-btn-inverse-border-color: #{tokens.$hermes-global-color-white};
|
|
331
|
+
--hermes-btn-inverse-bg-color: var(--hermes-btn-transparent-bg-color);
|
|
332
|
+
--hermes-btn-inverse-hover-bg-color: #{tokens.$hermes-alias-object-interaction-inverse-hover};
|
|
333
|
+
--hermes-btn-inverse-hover-color: var(--hermes-btn-inverse-color); // var(--hermes-color-neutral-0);
|
|
334
|
+
--hermes-btn-inverse-active-bg-color: var(--hermes-alias-object-interaction-inverse-active);
|
|
335
|
+
--hermes-btn-inverse-active-color: #{tokens.$hermes-global-color-white};
|
|
336
|
+
--hermes-btn-inverse-disabled-color: #{tokens.$hermes-alias-typography-disabled};
|
|
337
|
+
--hermes-btn-inverse-disabled-bg-color: var(--hermes-btn-default-outline-bg-color);
|
|
338
|
+
--hermes-btn-inverse-disabled-border-color: #{tokens.$hermes-alias-status-disabled};
|
|
339
|
+
--hermes-btn-inverse-checked-bg-color: var(--hermes-btn-inverse-bg-color);
|
|
340
|
+
--hermes-btn-inverse-checked-color: var(--hermes-btn-inverse-color);
|
|
341
|
+
}
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
// Declared after the light block on purpose: on a nested `[hermes-theme]` element both rules
|
|
345
|
+
// have the same specificity, so source order decides.
|
|
346
|
+
[hermes-theme~='dark'] {
|
|
347
|
+
@include palette($palette-dark);
|
|
348
|
+
}
|
|
349
|
+
}
|