genesys-spark 4.64.4 → 4.65.1

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.
@@ -0,0 +1,2021 @@
1
+ :root {
2
+ --gse-ui-formControl-input-contentText: 400 12px/18px Roboto;
3
+ --gse-ui-formControl-input-default-border: 1px solid #a3a7b0;
4
+ --gse-ui-formControl-input-hover-border: 1px solid #3742a2;
5
+ --gse-ui-formControl-input-active-border: 1px solid #252e78;
6
+ --gse-ui-formControl-input-error-border: 1px solid #e22245;
7
+ --gse-ui-formControl-input-disabled-border: 1px solid #a3a7b0;
8
+ --gse-ui-formControl-input-disabled-opacity: 0.5;
9
+ --gse-ui-formControl-input-borderRadius: 4px;
10
+ --gse-ui-formControl-input-backgroundColor: #ffffff;
11
+ --gse-ui-formControl-input-placeholderColor: #626e84;
12
+ --gse-ui-formControl-input-suggestionColor: #626e84;
13
+ --gse-ui-formControl-input-populatedColor: #1b2c48;
14
+ --gse-ui-formControl-input-inputClearable-inputClearableColor: #626e84;
15
+ --gse-ui-formControl-input-inputClearable-size: 16px;
16
+ --gse-ui-formControl-input-gap: 12px;
17
+ --gse-ui-formControl-input-top: 8px;
18
+ --gse-ui-formControl-input-padding: 8px 12px;
19
+ --gse-ui-formControl-input-prefixSufix-text: 700 14px/20px Roboto;
20
+ --gse-ui-formControl-input-prefixSufix-height: 32px;
21
+ --gse-ui-formControl-input-prefixSufix-defaultColor: #626e84;
22
+ --gse-ui-formControl-input-textfield-height: 32px;
23
+ --gse-ui-formControl-input-textfield-minWidth: 45px;
24
+ --gse-ui-formControl-input-colorPicker-size: 32px;
25
+ --gse-ui-formControl-input-inputIcon-size: 16px;
26
+ --gse-ui-formControl-input-inputIcon-defaultColor: #3e5374;
27
+ --gse-ui-formControl-input-inputIcon-iconEndColor: #626e84;
28
+ --gse-ui-formControl-input-focusRing-defaultColor: #7b88f7;
29
+ --gse-ui-formControl-input-textarea-height: 96px;
30
+ --gse-ui-formControl-input-focus-border: 3px solid #7b88f7;
31
+ --gse-ui-formControl-input-spinbuttonIcon-size: 16px;
32
+ --gse-ui-formControl-input-focusSelection-backgroundColor: #7b88f7;
33
+ --gse-ui-formControl-label-padding: 0 0 8px 0;
34
+ --gse-ui-formControl-label-gap: 4px;
35
+ --gse-ui-formControl-label-text: 400 12px/18px Roboto;
36
+ --gse-ui-formControl-label-textBold: 600 12px/18px Roboto;
37
+ --gse-ui-formControl-label-labelColor: #1b2c48;
38
+ --gse-ui-formControl-label-indicator-text: 400 12px/18px "Noto Sans";
39
+ --gse-ui-formControl-label-indicator-requiredColor: #e22245;
40
+ --gse-ui-formControl-label-indicator-optionalColor: #3e5374;
41
+ --gse-ui-formControl-label-iconSize: 16px;
42
+ --gse-ui-formControl-label-tooltipTrigger-optionalColor: #3e5374;
43
+ --gse-ui-formControl-label-tooltipTrigger-borderRadius: 2px;
44
+ --gse-ui-formControl-group-gapItems: 8px;
45
+ --gse-ui-formControl-helper-gap: 4px;
46
+ --gse-ui-formControl-helper-helperText: 400 12px/18px Roboto;
47
+ --gse-ui-formControl-helper-padding: 8px 0 0 0;
48
+ --gse-ui-formControl-helper-icon-padding: 1px 0 1px 0;
49
+ --gse-ui-formControl-helper-paddingSmall: 4px 0 0 0;
50
+ --gse-ui-formControl-helper-errorPadding: 4px 0 0 0;
51
+ --gse-ui-formControl-helper-defaultColor: #626e84;
52
+ --gse-ui-formControl-helper-errorColor: #e22245;
53
+ --gse-ui-formControl-helper-iconSize: 16px;
54
+ --gse-ui-formControl-spinButton-gap: 8px;
55
+ --gse-ui-formControl-spinner-track: #4856cb;
56
+ --gse-ui-formControl-spinner-errorColor: #dee1fd;
57
+ --gse-ui-formControl-textarea-padding: 8px 12px;
58
+ --gse-ui-formControl-focusRing-borderRadius: 4px;
59
+ --gse-ui-card-backgroundColor: #ffffff;
60
+ --gse-ui-card-borderRadius: 16px;
61
+ --gse-ui-card-borderRadiusCopy: 16px;
62
+ --gse-ui-card-default-border: 1px solid #c6c8ce;
63
+ --gse-ui-card-raised-border: 1px solid #c6c8ce;
64
+ --gse-ui-card-raised-boxShadow: 0 0 6px 1px rgba(35,57,92,0.12);
65
+ --gse-ui-card-padding: 24px;
66
+ --gse-ui-card-borderless-border: 1px solid transparent;
67
+ --gse-ui-tooltip-light-border: 1px solid #c6c8ce;
68
+ --gse-ui-tooltip-light-backgroundColor: #ffffff;
69
+ --gse-ui-tooltip-light-foregroundColor: #1b2c48;
70
+ --gse-ui-tooltip-dark-border: 1px solid #1b2c48;
71
+ --gse-ui-tooltip-dark-backgroundColor: #1b2c48;
72
+ --gse-ui-tooltip-dark-foregroundColor: #ffffff;
73
+ --gse-ui-tooltip-dark-iconColor: #ffffff;
74
+ --gse-ui-tooltip-boxShadow: 0 0 6px 1px rgba(35,57,92,0.12);
75
+ --gse-ui-tooltip-padding: 8px 12px;
76
+ --gse-ui-tooltip-height: 32px;
77
+ --gse-ui-tooltip-gap: 8px;
78
+ --gse-ui-tooltip-borderRadius: 4px;
79
+ --gse-ui-tooltip-text: 400 12px/16px "Noto Sans";
80
+ --gse-ui-tag-borderRadius: 16px;
81
+ --gse-ui-tag-default-backgroundColor: #23395d;
82
+ --gse-ui-tag-default-foregroundColor: #ffffff;
83
+ --gse-ui-tag-accent1-backgroundColor: #e4e5e7;
84
+ --gse-ui-tag-accent1-foregroundColor: #1b2c48;
85
+ --gse-ui-tag-accent2-backgroundColor: #90d3dd;
86
+ --gse-ui-tag-accent2-foregroundColor: #1b2c48;
87
+ --gse-ui-tag-accent3-backgroundColor: #0c6d7e;
88
+ --gse-ui-tag-accent3-foregroundColor: #ffffff;
89
+ --gse-ui-tag-accent4-backgroundColor: #547688;
90
+ --gse-ui-tag-accent4-foregroundColor: #ffffff;
91
+ --gse-ui-tag-accent5-backgroundColor: #a5cae0;
92
+ --gse-ui-tag-accent5-foregroundColor: #1b2c48;
93
+ --gse-ui-tag-accent6-backgroundColor: #b5bfe6;
94
+ --gse-ui-tag-accent6-foregroundColor: #1b2c48;
95
+ --gse-ui-tag-text: 600 12px/18px Roboto;
96
+ --gse-ui-tag-padding: 0 12px;
97
+ --gse-ui-tag-removable-padding: 0 8px 0 12px;
98
+ --gse-ui-tag-removable-gap: 4px;
99
+ --gse-ui-tag-accent7-backgroundColor: #a05195;
100
+ --gse-ui-tag-accent7-foregroundColor: #ffffff;
101
+ --gse-ui-tag-height: 20px;
102
+ --gse-ui-tag-accent8-backgroundColor: #f95d6a;
103
+ --gse-ui-tag-accent8-foregroundColor: #1b2c48;
104
+ --gse-ui-tag-accent9-backgroundColor: #fe8f85;
105
+ --gse-ui-tag-accent9-foregroundColor: #1b2c48;
106
+ --gse-ui-tag-accent10-backgroundColor: #ffc650;
107
+ --gse-ui-tag-accent10-foregroundColor: #1b2c48;
108
+ --gse-ui-tag-button-size: 16px;
109
+ --gse-ui-tag-disabled-opacity: 0.5;
110
+ --gse-ui-badge-borderRadius: 16px;
111
+ --gse-ui-badge-text: 400 12px/18px Roboto;
112
+ --gse-ui-badge-height: 20px;
113
+ --gse-ui-badge-padding: 2px 12px;
114
+ --gse-ui-badge-gap: 4px;
115
+ --gse-ui-badge-info-bold-backgroundColor: #6e5ddb;
116
+ --gse-ui-badge-info-bold-foregroundColor: #ffffff;
117
+ --gse-ui-badge-info-regular-backgroundColor: #c5bef1;
118
+ --gse-ui-badge-info-regular-foregroundColor: #1b2c48;
119
+ --gse-ui-badge-success-bold-backgroundColor: #09b581;
120
+ --gse-ui-badge-success-bold-foregroundColor: #1b2c48;
121
+ --gse-ui-badge-success-regular-backgroundColor: #9de1cd;
122
+ --gse-ui-badge-success-regular-foregroundColor: #1b2c48;
123
+ --gse-ui-badge-warning-bold-backgroundColor: #f8c73e;
124
+ --gse-ui-badge-warning-bold-foregroundColor: #1b2c48;
125
+ --gse-ui-badge-warning-regular-backgroundColor: #fce9b2;
126
+ --gse-ui-badge-warning-regular-foregroundColor: #1b2c48;
127
+ --gse-ui-badge-error-bold-backgroundColor: #e22245;
128
+ --gse-ui-badge-error-bold-foregroundColor: #ffffff;
129
+ --gse-ui-badge-error-regular-backgroundColor: #f3a7b5;
130
+ --gse-ui-badge-error-regular-foregroundColor: #1b2c48;
131
+ --gse-ui-icon-small-size: 16px;
132
+ --gse-ui-icon-medium-size: 24px;
133
+ --gse-ui-icon-large-size: 32px;
134
+ --gse-ui-icon-color: #3e5374;
135
+ --gse-ui-alert-padding: 8px 16px;
136
+ --gse-ui-alert-gap: 8px;
137
+ --gse-ui-alert-info-backgroundColor: #e2dff8;
138
+ --gse-ui-alert-info-foregroundColor: #1b2c48;
139
+ --gse-ui-alert-info-iconColor: #6e5ddb;
140
+ --gse-ui-alert-info-border: 1px solid #c5bef1;
141
+ --gse-ui-alert-success-backgroundColor: #cef0e6;
142
+ --gse-ui-alert-success-foregroundColor: #1b2c48;
143
+ --gse-ui-alert-success-iconColor: #09b581;
144
+ --gse-ui-alert-success-border: 1px solid #9de1cd;
145
+ --gse-ui-alert-warning-backgroundColor: #fef4d8;
146
+ --gse-ui-alert-warning-foregroundColor: #1b2c48;
147
+ --gse-ui-alert-warning-iconColor: #f8c73e;
148
+ --gse-ui-alert-warning-border: 1px solid #fce9b2;
149
+ --gse-ui-alert-error-backgroundColor: #f9d3da;
150
+ --gse-ui-alert-error-foregroundColor: #1b2c48;
151
+ --gse-ui-alert-error-iconColor: #e22245;
152
+ --gse-ui-alert-error-border: 1px solid #f3a7b5;
153
+ --gse-ui-alert-text: 400 12px/18px Roboto;
154
+ --gse-ui-alert-emphasisText: 700 12px/18px Roboto;
155
+ --gse-ui-alert-borderRadius: 4px;
156
+ --gse-ui-rating-default-color: #767c8d;
157
+ --gse-ui-rating-active-color: #4856cb;
158
+ --gse-ui-rating-hover-color: #3742a2;
159
+ --gse-ui-rating-disabled-color: #767c8d;
160
+ --gse-ui-rating-disabled-opacity: 0.5;
161
+ --gse-ui-rating-size: 16px;
162
+ --gse-ui-rating-star-gap: 8px;
163
+ --gse-ui-breadcrumbs-primary-height: 20px;
164
+ --gse-ui-breadcrumbs-primary-separator-padding: 0 12px;
165
+ --gse-ui-breadcrumbs-primary-separator-typography: 700 16px/20px Roboto;
166
+ --gse-ui-breadcrumbs-secondary-height: 18px;
167
+ --gse-ui-breadcrumbs-secondary-separator-padding: 0 8px;
168
+ --gse-ui-breadcrumbs-secondary-separator-typography: 700 14px/18px Roboto;
169
+ --gse-ui-breadcrumbs-separator-color: #a3a7b0;
170
+ --gse-ui-breadcrumbs-borderRadius: 0rem;
171
+ --gse-ui-segmentedControl-button-padding: 0 12px;
172
+ --gse-ui-segmentedControl-button-gap: 8px;
173
+ --gse-ui-segmentedControl-button-start-borderRadius: 4px 0 0 4px;
174
+ --gse-ui-segmentedControl-button-middle-borderRadius: 0rem;
175
+ --gse-ui-segmentedControl-button-end-borderRadius: 0 4px 4px 0;
176
+ --gse-ui-segmentedControl-button-disabled-opacity: 0.5;
177
+ --gse-ui-segmentedControl-button-disabled-backgroundColor: rgba(0, 0, 0, 0);
178
+ --gse-ui-segmentedControl-button-disabled-foregroundColor: #4856cb;
179
+ --gse-ui-segmentedControl-button-default-backgroundColor: rgba(0, 0, 0, 0);
180
+ --gse-ui-segmentedControl-button-default-foregroundColor: #4856cb;
181
+ --gse-ui-segmentedControl-button-hover-backgroundColor: #dee1fd;
182
+ --gse-ui-segmentedControl-button-hover-foregroundColor: #3742a2;
183
+ --gse-ui-segmentedControl-button-active-backgroundColor: #4856cb;
184
+ --gse-ui-segmentedControl-button-active-foregroundColor: #ffffff;
185
+ --gse-ui-segmentedControl-borderRadius: 4px;
186
+ --gse-ui-segmentedControl-height: 32px;
187
+ --gse-ui-segmentedControl-border: 1px solid #4856cb;
188
+ --gse-ui-segmentedControl-divider: 1px solid #4856cb;
189
+ --gse-ui-segmentedControl-iconOnly-padding: 0 8px;
190
+ --gse-ui-segmentedControl-focus-offset: 0rem;
191
+ --gse-ui-formFooter-page-desktop-bottomPadding: 16px; /* The recommended vertical padding for the form footer content. */
192
+ --gse-ui-formFooter-page-desktop-topPadding: 16px; /* The recommended vertical padding for the form footer content. */
193
+ --gse-ui-formFooter-page-desktop-horizontalPadding: 32px; /* The recommended vertical padding for the form footer content. */
194
+ --gse-ui-formFooter-page-desktop-gap: 16px; /* The recommended vertical padding for the form footer content. */
195
+ --gse-ui-formFooter-page-mobile-bottomPadding: 16px; /* The recommended vertical padding for the form footer content. */
196
+ --gse-ui-formFooter-page-mobile-topPadding: 16px; /* The recommended vertical padding for the form footer content. */
197
+ --gse-ui-formFooter-page-mobile-horizontalPadding: 16px; /* The recommended vertical padding for the form footer content. */
198
+ --gse-ui-formFooter-page-mobile-gap: 16px; /* The recommended vertical padding for the form footer content. */
199
+ --gse-ui-formFooter-separator: 1px solid #c6c8ce; /* This is the recommended style for the form fotter separator/divider. */
200
+ --gse-ui-formFooter-sideSheet-desktop-bottomPadding: 16px; /* The recommended vertical padding for the form footer content. */
201
+ --gse-ui-formFooter-sideSheet-desktop-topPadding: 16px; /* The recommended vertical padding for the form footer content. */
202
+ --gse-ui-formFooter-sideSheet-desktop-horizontalPadding: 24px; /* The recommended vertical padding for the form footer content. */
203
+ --gse-ui-formFooter-sideSheet-desktop-gap: 16px; /* The recommended vertical padding for the form footer content. */
204
+ --gse-ui-formFooter-modal-desktop-bottomPadding: 16px; /* The recommended vertical padding for the form footer content. */
205
+ --gse-ui-formFooter-modal-desktop-topPadding: 16px; /* The recommended vertical padding for the form footer content. */
206
+ --gse-ui-formFooter-modal-desktop-horizontalPadding: 32px; /* The recommended vertical padding for the form footer content. */
207
+ --gse-ui-formFooter-modal-desktop-gap: 16px; /* The recommended vertical padding for the form footer content. */
208
+ --gse-ui-formFooter-backgroundColor: #ffffff;
209
+ --gse-ui-formFooter-border: 1px solid #4856cb;
210
+ --gse-ui-copyToClipboard-label-active-backgroundColor: #dee1fd;
211
+ --gse-ui-copyToClipboard-label-foregroundColor: #1b2c48;
212
+ --gse-ui-copyToClipboard-label-padding: 2px 4px;
213
+ --gse-ui-copyToClipboard-label-borderRadius: 4px;
214
+ --gse-ui-copyToClipboard-label-text: 400 14px/20px Roboto;
215
+ --gse-ui-copyToClipboard-gap: 16px;
216
+ --gse-ui-copyToClipboard-contentContainer-gap: 2px;
217
+ --gse-ui-copyToClipboard-iconContainer-padding: 4px;
218
+ --gse-ui-copyToClipboard-tooltipIcon-success-foregroundColor: #09b581;
219
+ --gse-ui-copyToClipboard-tooltipIcon-error-foregroundColor: #e22245;
220
+ --gse-ui-dismissButton-foregroundColor: #626e84;
221
+ --gse-ui-button-default-height: 32px;
222
+ --gse-ui-button-default-padding: 0 12px;
223
+ --gse-ui-button-default-paddingIconOnly: 8px;
224
+ --gse-ui-button-iconOnly-width: 32px;
225
+ --gse-ui-button-icon-size: 16px;
226
+ --gse-ui-button-compact-height: 24px;
227
+ --gse-ui-button-compact-padding: 0 12px;
228
+ --gse-ui-button-compact-paddingIconOnly: 4px;
229
+ --gse-ui-button-gap: 8px;
230
+ --gse-ui-button-primary-default-backgroundColor: #4856cb;
231
+ --gse-ui-button-primary-default-foregroundColor: #ffffff;
232
+ --gse-ui-button-primary-hover-backgroundColor: #3742a2;
233
+ --gse-ui-button-primary-hover-foregroundColor: #ffffff;
234
+ --gse-ui-button-primary-active-backgroundColor: #252e78;
235
+ --gse-ui-button-primary-active-foregroundColor: #ffffff;
236
+ --gse-ui-button-secondary-default-backgroundColor: #eff0fe;
237
+ --gse-ui-button-secondary-default-foregroundColor: #4856cb;
238
+ --gse-ui-button-secondary-hover-backgroundColor: #dee1fd;
239
+ --gse-ui-button-secondary-hover-foregroundColor: #3742a2;
240
+ --gse-ui-button-secondary-active-backgroundColor: #ced2fc;
241
+ --gse-ui-button-secondary-active-foregroundColor: #252e78;
242
+ --gse-ui-button-tertiary-default-backgroundColor: rgba(0, 0, 0, 0);
243
+ --gse-ui-button-tertiary-default-foregroundColor: #4856cb;
244
+ --gse-ui-button-tertiary-default-border: 1px solid #4856cb;
245
+ --gse-ui-button-tertiary-hover-backgroundColor: #3742a2;
246
+ --gse-ui-button-tertiary-hover-foregroundColor: #ffffff;
247
+ --gse-ui-button-tertiary-active-backgroundColor: #252e78;
248
+ --gse-ui-button-tertiary-active-foregroundColor: #ffffff;
249
+ --gse-ui-button-ghost-default-backgroundColor: rgba(0, 0, 0, 0);
250
+ --gse-ui-button-ghost-default-foregroundColor: #4856cb;
251
+ --gse-ui-button-ghost-hover-backgroundColor: #dee1fd;
252
+ --gse-ui-button-ghost-hover-foregroundColor: #3742a2;
253
+ --gse-ui-button-ghost-active-backgroundColor: #ced2fc;
254
+ --gse-ui-button-ghost-active-foregroundColor: #252e78;
255
+ --gse-ui-button-danger-default-backgroundColor: #e22245;
256
+ --gse-ui-button-danger-default-foregroundColor: #ffffff;
257
+ --gse-ui-button-danger-hover-backgroundColor: #881429;
258
+ --gse-ui-button-danger-hover-foregroundColor: #ffffff;
259
+ --gse-ui-button-danger-active-backgroundColor: #440a15;
260
+ --gse-ui-button-danger-active-foregroundColor: #ffffff;
261
+ --gse-ui-button-borderRadius: 4px;
262
+ --gse-ui-button-disabled-opacity: 0.5;
263
+ --gse-ui-button-text: 700 12px/18px "Noto Sans";
264
+ --gse-ui-actionButton-rightSegment-size: 32px;
265
+ --gse-ui-actionButton-rightSegment-padding: 0 8px;
266
+ --gse-ui-actionButton-rightSegment-borderRadius: 0 4px 4px 0;
267
+ --gse-ui-actionButton-rightSegment-focusBorderRadius: 0 8px 8px 0;
268
+ --gse-ui-actionButton-height: 32px;
269
+ --gse-ui-actionButton-focus-height: 40px;
270
+ --gse-ui-actionButton-leftSegment-gap: 8px;
271
+ --gse-ui-actionButton-leftSegment-padding: 0 16px;
272
+ --gse-ui-actionButton-leftSegment-focusBorderRadius: 8px 0 0 8px;
273
+ --gse-ui-actionButton-leftSegment-borderRadius: 4px 0 0 4px;
274
+ --gse-ui-actionButton-borderRadius: 4px;
275
+ --gse-ui-actionButton-tertiary-divider: 2px solid #4856cb;
276
+ --gse-ui-actionButton-primary-divider: 2px solid #ffffff;
277
+ --gse-ui-actionButton-secondary-divider: 2px solid #ffffff;
278
+ --gse-ui-actionButton-danger-divider: 2px solid #ffffff;
279
+ --gse-ui-links-asButton-height: 32px;
280
+ --gse-ui-links-asButton-padding: 12px;
281
+ --gse-ui-links-asButton-gap: 8px;
282
+ --gse-ui-links-asButton-text: 700 14px/20px Roboto;
283
+ --gse-ui-links-asButton-underlinedText: 700 14px/20px Roboto;
284
+ --gse-ui-links-inLine-medium-height: 20px;
285
+ --gse-ui-links-inLine-medium-text: 600 14px/20px "Noto Sans";
286
+ --gse-ui-links-inLine-medium-underlinedText: 600 14px/20px "Noto Sans";
287
+ --gse-ui-links-inLine-small-height: 18px;
288
+ --gse-ui-links-inLine-small-text: 600 12px/18px "Noto Sans";
289
+ --gse-ui-links-inLine-small-underlinedText: 600 12px/18px "Noto Sans";
290
+ --gse-ui-links-inLine-padding: 4px;
291
+ --gse-ui-links-icon: 16px;
292
+ --gse-ui-links-default-foregroundColor: #4856cb;
293
+ --gse-ui-links-disabled-foregroundColor: #4856cb;
294
+ --gse-ui-links-hover-foregroundColor: #3742a2;
295
+ --gse-ui-links-active-foregroundColor: #252e78;
296
+ --gse-ui-links-visited-foregroundColor: #8a5ecc;
297
+ --gse-ui-links-borderRadius: 0rem;
298
+ --gse-ui-radioButton-icon-default-unselectedForegroundColor: #767c8d;
299
+ --gse-ui-radioButton-icon-default-selectedForegroundColor: #4856cb;
300
+ --gse-ui-radioButton-icon-hover-foregroundColor: #3742a2;
301
+ --gse-ui-radioButton-icon-active-foregroundColor: #252e78;
302
+ --gse-ui-radioButton-icon-error-foregroundColor: #e22245;
303
+ --gse-ui-radioButton-icon-height: 16px;
304
+ --gse-ui-radioButton-icon-width: 16px;
305
+ --gse-ui-radioButton-label-foregroundColor: #1b2c48;
306
+ --gse-ui-radioButton-label-text: 400 16px/18px Roboto;
307
+ --gse-ui-radioButton-gap: 8px;
308
+ --gse-ui-radioButton-helper-padding: 4px 0 0 24px;
309
+ --gse-ui-radioButton-helper-gap: 8px;
310
+ --gse-ui-radioButton-disabled-opacity: 0.5;
311
+ --gse-ui-radioButton-focus-border: 2px solid #7b88f7;
312
+ --gse-ui-radioButton-focus-borderRadius: 16px;
313
+ --gse-ui-radioButton-focus-offset: 1px;
314
+ --gse-ui-checkbox-icon-default-unselectedForegroundColor: #767c8d;
315
+ --gse-ui-checkbox-icon-default-selectedForegroundColor: #4856cb;
316
+ --gse-ui-checkbox-icon-hover-foregroundColor: #3742a2;
317
+ --gse-ui-checkbox-icon-active-foregroundColor: #252e78;
318
+ --gse-ui-checkbox-icon-error-foregroundColor: #e22245;
319
+ --gse-ui-checkbox-icon-height: 16px;
320
+ --gse-ui-checkbox-icon-width: 16px;
321
+ --gse-ui-checkbox-label-foregroundColor: #1b2c48;
322
+ --gse-ui-checkbox-label-text: 400 16px/18px Roboto;
323
+ --gse-ui-checkbox-helper-padding: 4px 0 0 24px;
324
+ --gse-ui-checkbox-helper-gap: 8px;
325
+ --gse-ui-checkbox-gap: 8px;
326
+ --gse-ui-checkbox-disabled-opacity: 0.5;
327
+ --gse-ui-checkbox-focus-border: 2px solid #7b88f7;
328
+ --gse-ui-checkbox-focus-borderRadius: 5.5px;
329
+ --gse-ui-checkbox-focus-borderRadiusSmall: 2px;
330
+ --gse-ui-checkbox-focus-offset: 1px;
331
+ --gse-ui-checkbox-group-gap: 8px;
332
+ --gse-ui-menu-option-padding: 8px 12px;
333
+ --gse-ui-menu-option-gap: 8px;
334
+ --gse-ui-menu-option-height: 32px;
335
+ --gse-ui-menu-option-startIcon-height: 16px;
336
+ --gse-ui-menu-option-startIcon-width: 16px;
337
+ --gse-ui-menu-option-label-default-text: 400 12px/16px "Noto Sans";
338
+ --gse-ui-menu-option-label-active-text: 700 12px/18px "Noto Sans";
339
+ --gse-ui-menu-option-label-foregroundColor: #1b2c48;
340
+ --gse-ui-menu-option-shortcut-text: 400 14px/20px "Noto Sans";
341
+ --gse-ui-menu-option-shortcut-default-foregroundColor: #626e84;
342
+ --gse-ui-menu-option-shortcut-selected-foregroundColor: #1b2c48;
343
+ --gse-ui-menu-option-hover-backgroundColor: #eff0fe;
344
+ --gse-ui-menu-option-selected-backgroundColor: #ced2fc;
345
+ --gse-ui-menu-option-disabled-opacity: 0.5;
346
+ --gse-ui-menu-option-checkbox-unchecked-default-foregroundColor: #767c8d;
347
+ --gse-ui-menu-option-checkbox-unchecked-hover-foregroundColor: #3742a2;
348
+ --gse-ui-menu-option-checkbox-unchecked-selected-foregroundColor: #252e78;
349
+ --gse-ui-menu-option-checkbox-checked-default-foregroundColor: #4856cb;
350
+ --gse-ui-menu-option-checkbox-checked-hover-foregroundColor: #3742a2;
351
+ --gse-ui-menu-option-checkbox-checked-selected-foregroundColor: #252e78;
352
+ --gse-ui-menu-option-parentIcon-width: 16px;
353
+ --gse-ui-menu-option-parentIcon-height: 16px;
354
+ --gse-ui-menu-option-parentIcon-default-foregroundColor: #3e5374;
355
+ --gse-ui-menu-option-parentIcon-hover-foregroundColor: #23395d;
356
+ --gse-ui-menu-option-parentIcon-selected-foregroundColor: #1b2c48;
357
+ --gse-ui-menu-option-focus-border: 1px solid #7b88f7;
358
+ --gse-ui-menu-option-default-backgroundColor: #ffffff;
359
+ --gse-ui-menu-maxHeight: 344px;
360
+ --gse-ui-menu-borderRadius: 4px;
361
+ --gse-ui-menu-border: 1px solid #1b2c48;
362
+ --gse-ui-menu-boxShadow: 0 0 4px 1px rgba(35,57,92,0.1);
363
+ --gse-ui-menu-padding: 8px 0px;
364
+ --gse-ui-menu-backgroundColor: #ffffff;
365
+ --gse-ui-menu-scrollbar-foregroundColor: #3e5374;
366
+ --gse-ui-menu-divider-backgroundColor: #c6c8ce; /* Color for the divider that separates the day picker and the time picker inside the calendar menu. */
367
+ --gse-ui-menu-divider-margin: 4px 0 8px 0;
368
+ --gse-ui-menu-divider-height: 1px;
369
+ --gse-ui-menu-groupedMenu-title-padding: 8px 12px 4px;
370
+ --gse-ui-menu-groupedMenu-title-height: 32px;
371
+ --gse-ui-menu-groupedMenu-title-foregroundColor: #626e84;
372
+ --gse-ui-menu-groupedMenu-title-text: 600 12px/16px Urbanist;
373
+ --gse-ui-menu-groupedMenu-padding: 8px 8px;
374
+ --gse-ui-menu-groupedMenu-divider-padding: 4px 0px 8px;
375
+ --gse-ui-menu-groupedMenu-divider-height: 13px;
376
+ --gse-ui-menu-groupedMenu-subtext-foregroundColor: #626e84;
377
+ --gse-ui-dropdown-menu-emptyState-header-text: 700 12px/18px Roboto;
378
+ --gse-ui-dropdown-menu-emptyState-header-foregroundColor: #23395d;
379
+ --gse-ui-dropdown-menu-emptyState-subheader-text: 400 12px/18px Roboto;
380
+ --gse-ui-dropdown-menu-emptyState-subheader-foregroundColor: #626e84;
381
+ --gse-ui-dropdown-gap: 4px;
382
+ --gse-ui-calendarMenu-day-range-width: 16px;
383
+ --gse-ui-calendarMenu-day-range-height: 32px;
384
+ --gse-ui-calendarMenu-day-input-height: 32px;
385
+ --gse-ui-calendarMenu-day-input-width: 160px;
386
+ --gse-ui-calendarMenu-day-headerText: 700 12px/16px Roboto;
387
+ --gse-ui-calendarMenu-day-date-size: 32px;
388
+ --gse-ui-calendarMenu-height: 234px;
389
+ --gse-ui-calendarMenu-width: 250px;
390
+ --gse-ui-calendarMenu-month-default-foregroundColor: #1b2c48;
391
+ --gse-ui-calendarMenu-month-single-header-textWidth: 154px;
392
+ --gse-ui-calendarMenu-month-single-header-width: 218px;
393
+ --gse-ui-calendarMenu-month-single-header-height: 44px;
394
+ --gse-ui-calendarMenu-month-monthCell-width: 66px;
395
+ --gse-ui-calendarMenu-month-monthCell-height: 49px;
396
+ --gse-ui-calendarMenu-month-headerText: 400 16px/24px "Noto Sans";
397
+ --gse-ui-calendarMenu-month-range-vertical-width: 272px;
398
+ --gse-ui-calendarMenu-month-range-vertical-height: 652px;
399
+ --gse-ui-calendarMenu-month-defaultText: 400 12px/16px Roboto;
400
+ --gse-ui-calendarMenu-month-currentText: 700 12px/16px Roboto;
401
+ --gse-ui-calendarMenu-month-focusBorderRadius: 20px;
402
+ --gse-ui-calendarMenu-month-borderRadius: 16px;
403
+ --gse-ui-calendarMenu-month-calendarButton-focusBorderRadius: 2px;
404
+ --gse-ui-calendarMenu-month-selected-foregroundColor: #ffffff;
405
+ --gse-ui-calendarMenu-month-selected-backgroundColor: #4856cb;
406
+ --gse-ui-calendarMenu-month-selected-hoverBackgroundColor: #3742a2;
407
+ --gse-ui-calendarMenu-month-hover-backgroundColor: #dee1fd;
408
+ --gse-ui-calendarMenu-dateBody-padding: 18px 24px;
409
+ --gse-ui-calendarMenu-dateBody-gap: 8px;
410
+ --gse-ui-calendarMenu-header-backgroundColor: #4856cb;
411
+ --gse-ui-calendarMenu-header-foregroundColor: #ffffff;
412
+ --gse-ui-calendarMenu-header-gap: 8px;
413
+ --gse-ui-calendarMenu-header-padding: 10px 16px;
414
+ --gse-ui-calendarMenu-header-arrow-padding: 8px;
415
+ --gse-ui-calendarMenu-backgroundColor: #ffffff;
416
+ --gse-ui-calendarMenu-date-defaultText: 400 12px/16px Roboto;
417
+ --gse-ui-calendarMenu-date-currentText: 700 12px/16px Roboto;
418
+ --gse-ui-calendarMenu-date-selected-foregroundColor: #ffffff;
419
+ --gse-ui-calendarMenu-date-selected-backgroundColor: #4856cb;
420
+ --gse-ui-calendarMenu-date-selected-hoverBackgroundColor: #3742a2;
421
+ --gse-ui-calendarMenu-date-hover-backgroundColor: #dee1fd;
422
+ --gse-ui-calendarMenu-date-range-backgroundColor: #dee1fd;
423
+ --gse-ui-calendarMenu-date-default-foregroundColor: #1b2c48;
424
+ --gse-ui-calendarMenu-single-header-borderRadius: 8px 8px 0 0;
425
+ --gse-ui-calendarMenu-single-body-borderRadius: 0 0 8px 8px;
426
+ --gse-ui-calendarMenu-range-header-firstMonth-borderRadius: 8px 0 0 0;
427
+ --gse-ui-calendarMenu-range-header-secondMonth-borderRadius: 0 8px 0 0;
428
+ --gse-ui-calendarMenu-range-body-firstMonth-borderRadius: 0 0 0 8px;
429
+ --gse-ui-calendarMenu-range-body-secondMonth-borderRadius: 0 0 8px 0;
430
+ --gse-ui-calendarMenu-range-date-endDate-borderRadius: 0 16px 16px 0;
431
+ --gse-ui-calendarMenu-range-date-startDate-borderRadius: 16px 0 0 16px;
432
+ --gse-ui-calendarMenu-disabled-opacity: 0.5;
433
+ --gse-ui-calendarMenu-monthBody-padding: 18px 24px;
434
+ --gse-ui-calendarMenu-monthBody-gap: 2px;
435
+ --gse-ui-calendarMenu-boxShadow: 0px 2px 4px 1px #23395c1a;
436
+ --gse-ui-datePicker-range-gap: 24px;
437
+ --gse-ui-datePicker-startEndInput-gap: 8px;
438
+ --gse-ui-datePicker-dateTyped-gap: 10px;
439
+ --gse-ui-datePicker-dateTyped-backgroundColor: #dee1fd;
440
+ --gse-ui-datePicker-disabled-opacity: 0.5;
441
+ --gse-ui-datePicker-focusCalendar-gap: 3px;
442
+ --gse-ui-datePicker-iconHover: #3742a2;
443
+ --gse-ui-datePicker-iconFocus: #3742a2;
444
+ --gse-ui-toggle-label: 400 12px/16px Roboto;
445
+ --gse-ui-toggle-gap: 8px;
446
+ --gse-ui-toggle-padding: 8px;
447
+ --gse-ui-toggle-track-width: 32px;
448
+ --gse-ui-toggle-track-height: 16px;
449
+ --gse-ui-toggle-track-enabled-off-backgroundColor: #c6c8ce;
450
+ --gse-ui-toggle-track-enabled-on-backgroundColor: #3742a2;
451
+ --gse-ui-toggle-track-disabled-off-backgroundColor: #c6c8ce;
452
+ --gse-ui-toggle-track-disabled-on-backgroundColor: #3742a2;
453
+ --gse-ui-toggle-track-error-off-backgroundColor: #f3a7b5;
454
+ --gse-ui-toggle-track-error-on-backgroundColor: #e22245;
455
+ --gse-ui-toggle-track-hover-off-backgroundColor: #9ca6f9;
456
+ --gse-ui-toggle-track-hover-on-backgroundColor: #252e78;
457
+ --gse-ui-toggle-track-borderRadius: 8px;
458
+ --gse-ui-toggle-handle-width: 16px;
459
+ --gse-ui-toggle-handle-height: 16px;
460
+ --gse-ui-toggle-handle-hover-border: 2px solid #4856cb;
461
+ --gse-ui-toggle-handle-enabled-border: 2px solid #4856cb;
462
+ --gse-ui-toggle-handle-disabled-border: 2px solid #4856cb;
463
+ --gse-ui-toggle-handle-error-border: 2px solid #e22245;
464
+ --gse-ui-toggle-handle-backgroundColor: #ffffff;
465
+ --gse-ui-toggle-handle-foregroundColor: #4856cb;
466
+ --gse-ui-toggle-handle-borderRadius: 100%;
467
+ --gse-ui-toggle-disabled-opacity: 0.5;
468
+ --gse-ui-toggle-focus-border: 2px solid #7b88f7;
469
+ --gse-ui-toggle-focus-borderRadius: 16px;
470
+ --gse-ui-toggle-focus-offset: 1px;
471
+ --gse-ui-timePicker-clock-padding: 3px;
472
+ --gse-ui-timePicker-clockStates-defaultColor: #626e84;
473
+ --gse-ui-timePicker-clockStates-hoverColor: #3742a2;
474
+ --gse-ui-timePicker-clockStates-activeColor: #4856cb;
475
+ --gse-ui-timePicker-clockStates-disabledColor: lch(46 13.8 267 / 0.5);
476
+ --gse-ui-timePicker-focusClock-border: 2px solid #7b88f7;
477
+ --gse-ui-timePicker-focusClock-borderRadius: 2px;
478
+ --gse-ui-timePicker-focusAmpm-border: 2px solid #7b88f7;
479
+ --gse-ui-timePicker-focusAmpm-borderRadius: 2px;
480
+ --gse-ui-timePicker-focusTime-border: 3px solid #7b88f7;
481
+ --gse-ui-timePicker-focusTime-borderRadius: 4px;
482
+ --gse-ui-timePicker-ampm-padding: 3px;
483
+ --gse-ui-colorPicker-label-requiredSymbolColor: #e22245;
484
+ --gse-ui-colorPicker-label-textColor: #1b2c48;
485
+ --gse-ui-colorPicker-label-text: 400 12px/18px Roboto;
486
+ --gse-ui-colorPicker-inputContainer-backgroundColor: #ffffff;
487
+ --gse-ui-colorPicker-inputContainer-border-defaultColor: #a3a7b0;
488
+ --gse-ui-colorPicker-inputContainer-border-hoverColor: #3742a2;
489
+ --gse-ui-colorPicker-inputContainer-border-activeColor: #252e78;
490
+ --gse-ui-colorPicker-inputContainer-border-errorColor: #e22245;
491
+ --gse-ui-colorPicker-input-containerSizing: 32px;
492
+ --gse-ui-colorPicker-input-swatchSizing: 24px;
493
+ --gse-ui-colorPicker-input-swatchBorderRadius: 2px;
494
+ --gse-ui-colorPicker-gap: 8px;
495
+ --gse-ui-slider-handle-width: 20px;
496
+ --gse-ui-slider-handle-height: 20px;
497
+ --gse-ui-slider-handle-default-backgroundColor: #4856cb;
498
+ --gse-ui-slider-handle-hover-backgroundColor: #3742a2;
499
+ --gse-ui-slider-handle-active-backgroundColor: #252e78;
500
+ --gse-ui-slider-handle-disabled-backgroundColor: #4856cb;
501
+ --gse-ui-slider-handle-borderRadius: 100%;
502
+ --gse-ui-slider-disabled-opacity: 0.5;
503
+ --gse-ui-slider-label-text: 600 14px/20px Roboto;
504
+ --gse-ui-slider-label-foregroundColor: #1b2c48;
505
+ --gse-ui-slider-bar-selected-backgroundColor: #4856cb;
506
+ --gse-ui-slider-bar-default-backgroundColor: #c6c8ce;
507
+ --gse-ui-slider-bar-height: 4px;
508
+ --gse-ui-slider-gap: 16px;
509
+ --gse-ui-slider-focusRing-borderRadius: 100%;
510
+ --gse-ui-slider-track-borderRadius: 4px;
511
+ --gse-ui-flyoutMenu-anchor-height: 8px;
512
+ --gse-ui-flyoutMenu-anchor-width: 76px;
513
+ --gse-ui-flyoutMenu-width: 208px;
514
+ --gse-ui-flyoutMenu-borderRadius: 4px;
515
+ --gse-ui-flyoutMenu-padding: 8px 0px;
516
+ --gse-ui-flyoutMenu-parenting-gap: 8px;
517
+ --gse-ui-flyoutMenu-backgroundColor: #ffffff;
518
+ --gse-ui-flyoutMenu-arrow-borderRadius: 4px;
519
+ --gse-ui-phoneInput-dropdown-hover-backgroundColor: #eff0fe;
520
+ --gse-ui-phoneInput-dropdown-active-backgroundColor: #ced2fc;
521
+ --gse-ui-phoneInput-dropdown-foregroundColor: #626e84;
522
+ --gse-ui-phoneInput-dropdown-flag-height: 12px;
523
+ --gse-ui-phoneInput-dropdown-flag-width: 16px;
524
+ --gse-ui-phoneInput-dropdown-height: 32px;
525
+ --gse-ui-phoneInput-dropdown-menu-minWidth: 230px;
526
+ --gse-ui-phoneInput-dropdown-icon-width: 16px;
527
+ --gse-ui-phoneInput-dropdown-icon-height: 16px;
528
+ --gse-ui-phoneInput-dropdown-padding: 0 8px 0 12px;
529
+ --gse-ui-phoneInput-dropdown-disabled-padding: 0 4px 0 12px;
530
+ --gse-ui-phoneInput-dropdown-gap: 4px;
531
+ --gse-ui-phoneInput-countryCode-foregroundColor: #626e84;
532
+ --gse-ui-phoneInput-minWidth: 230px;
533
+ --gse-ui-contextMenu-button-default: 32px;
534
+ --gse-ui-contextMenu-button-compact: 24px;
535
+ --gse-ui-contextMenu-borderRadius: 4px;
536
+ --gse-ui-contextMenu-menu-maxHeight: 344px;
537
+ --gse-ui-contextMenu-menu-width: 220px;
538
+ --gse-ui-monthPicker-calendarStates-defaultColor: #626e84;
539
+ --gse-ui-monthPicker-calendarStates-hoverColor: #3742a2;
540
+ --gse-ui-monthPicker-calendarStates-activeColor: #4856cb;
541
+ --gse-ui-monthPicker-calendarStates-disabledColor: lch(46 13.8 267 / 0.5);
542
+ --gse-ui-monthPicker-calendarStates-focus-border: 2px solid #7b88f7;
543
+ --gse-ui-selectorCard-ilustrativeIcon-foregroundColor: #3e5374;
544
+ --gse-ui-selectorCard-text-foregroundColor: #1b2c48;
545
+ --gse-ui-selectorCard-default-backgroundColor: #ffffff;
546
+ --gse-ui-selectorCard-default-selectedIndicator-selected-foregroundColor: #4856cb;
547
+ --gse-ui-selectorCard-default-selectedIndicator-unselected-foregroundColor: #767c8d;
548
+ --gse-ui-selectorCard-hover-backgroundColor: #eff0fe;
549
+ --gse-ui-selectorCard-hover-selectedIndicator-foregroundColor: #3742a2;
550
+ --gse-ui-selectorCard-active-backgroundColor: #ced2fc;
551
+ --gse-ui-selectorCard-active-selectedIndicator-foregroundColor: #252e78;
552
+ --gse-ui-selectorCard-error-backgroundColor: #fef3f3;
553
+ --gse-ui-selectorCard-error-selectedIndicator-foregroundColor: #e22245;
554
+ --gse-ui-selectorCard-error-border: 1px solid #e22245;
555
+ --gse-ui-selectorCard-simple-minWidth: 108px;
556
+ --gse-ui-selectorCard-simple-maxWidth: 316px;
557
+ --gse-ui-selectorCard-simple-minHeight: 76px;
558
+ --gse-ui-selectorCard-simple-maxHeight: 116px;
559
+ --gse-ui-selectorCard-simple-padding: 12px;
560
+ --gse-ui-selectorCard-simple-gap: 8px;
561
+ --gse-ui-selectorCard-simple-borderRadius: 8px;
562
+ --gse-ui-selectorCard-simple-label: 700 14px/24px Urbanist;
563
+ --gse-ui-selectorCard-descriptive-minWidth: 216px;
564
+ --gse-ui-selectorCard-descriptive-maxWidth: 316px;
565
+ --gse-ui-selectorCard-descriptive-minHeight: 118px;
566
+ --gse-ui-selectorCard-descriptive-maxHeight: 220px;
567
+ --gse-ui-selectorCard-descriptive-padding: 16px;
568
+ --gse-ui-selectorCard-descriptive-gap: 8px;
569
+ --gse-ui-selectorCard-descriptive-text-gap: 4px;
570
+ --gse-ui-selectorCard-descriptive-badge-marginTop: 8px;
571
+ --gse-ui-selectorCard-descriptive-borderRadius: 16px;
572
+ --gse-ui-selectorCard-descriptive-label: 700 16px/24px Urbanist;
573
+ --gse-ui-selectorCard-descriptive-description: 400 12px/18px "Noto Sans";
574
+ --gse-ui-selectorCard-unselected-border: 1px solid #c6c8ce;
575
+ --gse-ui-selectorCard-selected-border: 1px solid #4856cb;
576
+ --gse-ui-selectorCard-disabled-opacity: 0.5;
577
+ --gse-ui-selectorCard-disabled-backgroundColor: #ffffff;
578
+ --gse-ui-selectorCard-disabled-selectedIndicator-selected-foregroundColor: #4856cb;
579
+ --gse-ui-selectorCard-disabled-selectedIndicator-unselected-foregroundColor: #767c8d;
580
+ --gse-ui-search-counter-default-foregroundColor: #626e84;
581
+ --gse-ui-search-counter-hover-foregroundColor: #4856cb;
582
+ --gse-ui-search-counter-divider-border: 1px solid #a3a7b0;
583
+ --gse-ui-search-counter-divider-foregroundColor: #a3a7b0;
584
+ --gse-ui-search-counter-text: 400 12px/18px Roboto;
585
+ --gse-ui-search-counter-gap: 4px;
586
+ --gse-ui-search-counter-icon-height: 16px;
587
+ --gse-ui-search-counter-icon-width: 16px;
588
+ --gse-ui-search-width: 320px;
589
+ --gse-ui-search-match-firstLevel-backgroundColor: #b5e2e8;
590
+ --gse-ui-search-match-firstLevel-foregroundColour: #1b2c48;
591
+ --gse-ui-search-match-subsequentLevel-foregroundColour: #1b2c48;
592
+ --gse-ui-search-match-subsequentLevel-backgroundColor: #daf0f4;
593
+ --gse-ui-simpleFilter-gap: 16px;
594
+ --gse-ui-dataTableItems-header-text: 700 12px/16px Roboto;
595
+ --gse-ui-dataTableItems-header-multiselect-default-height: 40px;
596
+ --gse-ui-dataTableItems-header-multiselect-default-width: 41px;
597
+ --gse-ui-dataTableItems-header-multiselect-default-selectedBar-height: 3px;
598
+ --gse-ui-dataTableItems-header-multiselect-default-selectedBar-width: 41px;
599
+ --gse-ui-dataTableItems-header-multiselect-compact-height: 32px;
600
+ --gse-ui-dataTableItems-header-multiselect-compact-width: 64px;
601
+ --gse-ui-dataTableItems-header-multiselect-compact-selectedBar-height: 3px;
602
+ --gse-ui-dataTableItems-header-multiselect-compact-selectedBar-width: 64px;
603
+ --gse-ui-dataTableItems-header-selectedIndicatorColor: #9ca6f9;
604
+ --gse-ui-dataTableItems-header-defaultBackgroundColor: #ffffff;
605
+ --gse-ui-dataTableItems-header-fixedBackgroundColor: #dee1fd;
606
+ --gse-ui-dataTableItems-header-foregroundColor: #1b2c48;
607
+ --gse-ui-dataTableItems-header-sort-foregroundColor: #626e84;
608
+ --gse-ui-dataTableItems-header-default-height: 40px;
609
+ --gse-ui-dataTableItems-header-default-width: 229px;
610
+ --gse-ui-dataTableItems-header-compact-height: 32px;
611
+ --gse-ui-dataTableItems-header-compact-width: 229px;
612
+ --gse-ui-dataTableItems-header-padding: 0 12px;
613
+ --gse-ui-dataTableItems-header-gap: 8px;
614
+ --gse-ui-dataTableItems-header-selectedBar-height: 3px;
615
+ --gse-ui-dataTableItems-header-selectedBar-width: 229px;
616
+ --gse-ui-dataTableItems-divider: 1px solid #e8ebf7;
617
+ --gse-ui-dataTableItems-scrollbar-borderRadius: 45px;
618
+ --gse-ui-dataTableItems-scrollbar-foregroundColor: #626e84;
619
+ --gse-ui-dataTableItems-cell-altBackgroundColor: #f3f5fb;
620
+ --gse-ui-dataTableItems-cell-defaultBackgroundColor: #ffffff;
621
+ --gse-ui-dataTableItems-cell-hoverBackgroundColor: #dee1fd;
622
+ --gse-ui-dataTableItems-cell-foregroundColor: #1b2c48;
623
+ --gse-ui-dataTableItems-cell-chevron-foregroundColor: #626e84;
624
+ --gse-ui-dataTableItems-cell-multiselect-default-height: 40px;
625
+ --gse-ui-dataTableItems-cell-multiselect-compact-height: 32px;
626
+ --gse-ui-dataTableItems-cell-multiselect-padding: 0 16px;
627
+ --gse-ui-dataTableItems-cell-multiselect-gap: 8px;
628
+ --gse-ui-dataTableItems-cell-multiselect-checkboxCell-default-height: 40px;
629
+ --gse-ui-dataTableItems-cell-multiselect-checkboxCell-default-width: 41px;
630
+ --gse-ui-dataTableItems-cell-multiselect-checkboxCell-compact-height: 32px;
631
+ --gse-ui-dataTableItems-cell-multiselect-checkboxCell-compact-width: 41px;
632
+ --gse-ui-dataTableItems-cell-default-height: 40px;
633
+ --gse-ui-dataTableItems-cell-default-width: 229px;
634
+ --gse-ui-dataTableItems-cell-compact-height: 32px;
635
+ --gse-ui-dataTableItems-cell-compact-width: 229px;
636
+ --gse-ui-dataTableItems-cell-padding: 0 12px;
637
+ --gse-ui-dataTableItems-cell-gap: 8px;
638
+ --gse-ui-dataTableItems-cell-icon-foregroundColor: #1b2c48;
639
+ --gse-ui-dataTableItems-cell-text: 400 12px/16px Roboto;
640
+ --gse-ui-dataTableItems-cell-tablePagination-width: 727px;
641
+ --gse-ui-dataTableItems-cell-tablePagination-height: 56px;
642
+ --gse-ui-dataTableItems-cell-contextMenu-default-height: 40px;
643
+ --gse-ui-dataTableItems-cell-contextMenu-default-width: 41px;
644
+ --gse-ui-dataTableItems-cell-contextMenu-compact-height: 32px;
645
+ --gse-ui-dataTableItems-cell-contextMenu-compact-width: 41px;
646
+ --gse-ui-dataTableItems-editColumn-editColumnItem-gap: 8px;
647
+ --gse-ui-dataTableItems-editColumn-editColumnItem-foregroundColor: #3e5374;
648
+ --gse-ui-dataTableItems-editColumn-editColumnItem-height: 18px;
649
+ --gse-ui-dataTableItems-editColumn-editColumnContent-gap: 10px;
650
+ --gse-ui-dataTableItems-editColumn-editColumnContent-padding: 8px 0;
651
+ --gse-ui-dataTableItems-tableToolbar-tableToolbarGroup-gap: 4px;
652
+ --gse-ui-dataTableItems-tableToolbar-gap: 4px;
653
+ --gse-ui-dataTableItems-tableToolbar-dividerColor: #c6ceec;
654
+ --gse-ui-dataTableItems-tableToolbar-divider-width: 1px;
655
+ --gse-ui-dataTableItems-tableToolbar-divider-height: 32px;
656
+ --gse-ui-dataTableItems-tableToolbar-height: 32px;
657
+ --gse-ui-dataTableItems-tablePagination-recordsetControls-gap: 10px;
658
+ --gse-ui-dataTableItems-tablePagination-padding: 12px;
659
+ --gse-ui-dataTableItems-tablePagination-divider: 1px solid #c6c8ce;
660
+ --gse-ui-dataTableItems-tablePagination-defaultText: 400 12px/16px Roboto;
661
+ --gse-ui-dataTableItems-tablePagination-currentResultText: 700 12px/16px Roboto;
662
+ --gse-ui-dataTableItems-tablePagination-defaultBackgroundColor: #ffffff;
663
+ --gse-ui-dataTableItems-tablePagination-foregroundColor: #1b2c48;
664
+ --gse-ui-dataTableItems-tablePagination-countDisplay-gap: 4px;
665
+ --gse-ui-avatar-groupShapes-gap: -4px;
666
+ --gse-ui-avatar-large-size: 96px;
667
+ --gse-ui-avatar-large-badge-size: 24px;
668
+ --gse-ui-avatar-large-focusRing-size: 98px;
669
+ --gse-ui-avatar-large-content-size: 84px;
670
+ --gse-ui-avatar-large-initials: 600 36px/1 Urbanist;
671
+ --gse-ui-avatar-large-presenceRing-width: 4px;
672
+ --gse-ui-avatar-large-ucIntegration-size: 32px;
673
+ --gse-ui-avatar-presenceRing-available: linear-gradient(135deg, #09b581 0%, #9de1cd 100%);
674
+ --gse-ui-avatar-presenceRing-busy: linear-gradient(135deg, #e22245 0%, #f3a7b5 100%);
675
+ --gse-ui-avatar-presenceRing-away: linear-gradient(135deg, #f8c73e 0%, #fce9b2 100%);
676
+ --gse-ui-avatar-presenceRing-onQueue: linear-gradient(135deg, #4856cb 0%, #9ca6f9 100%);
677
+ --gse-ui-avatar-presenceRing-offline: linear-gradient(135deg, #767c8d 0%, #a3a7b0 100%);
678
+ --gse-ui-avatar-presenceRing-outOfOffice: linear-gradient(135deg, #b74ba4 0%, #f5bfeb 100%);
679
+ --gse-ui-avatar-medium-size: 48px;
680
+ --gse-ui-avatar-medium-badge-size: 16px;
681
+ --gse-ui-avatar-medium-focusRing-size: 50px;
682
+ --gse-ui-avatar-medium-content-size: 40px;
683
+ --gse-ui-avatar-medium-initials: 600 18px/1 Urbanist;
684
+ --gse-ui-avatar-medium-presenceRing-width: 3px;
685
+ --gse-ui-avatar-small-size: 32px;
686
+ --gse-ui-avatar-small-badge-size: 8px;
687
+ --gse-ui-avatar-small-focusRing-size: 34px;
688
+ --gse-ui-avatar-small-content-size: 26px;
689
+ --gse-ui-avatar-small-initials: 600 12px/1 Urbanist;
690
+ --gse-ui-avatar-small-substract-size: 30px;
691
+ --gse-ui-avatar-small-presenceRing-width: 2px;
692
+ --gse-ui-avatar-xsmall-size: 24px;
693
+ --gse-ui-avatar-xsmall-focusRing-size: 26px;
694
+ --gse-ui-avatar-xsmall-content-size: 18px;
695
+ --gse-ui-avatar-xsmall-initials: 600 8px/1 Urbanist;
696
+ --gse-ui-avatar-xsmall-presenceRing-width: 2px;
697
+ --gse-ui-avatar-badge-available-color: #09b581;
698
+ --gse-ui-avatar-badge-busy-color: #e22245;
699
+ --gse-ui-avatar-badge-busy-icon-margin: 2px;
700
+ --gse-ui-avatar-badge-away: #f8c73e;
701
+ --gse-ui-avatar-badge-onQueue-color: #4856cb;
702
+ --gse-ui-avatar-badge-offline-color: #626e84;
703
+ --gse-ui-avatar-badge-outOfOffice: #b74ba4;
704
+ --gse-ui-avatar-badge-notification-color: #fe624d;
705
+ --gse-ui-avatar-badge-foregroundDefault-color: #ffffff;
706
+ --gse-ui-avatar-badge-foregroundDark-color: #3e5374;
707
+ --gse-ui-avatar-badge-notifications-icon-margin: 4px;
708
+ --gse-ui-avatar-badge-queue-icon-margin: 4px;
709
+ --gse-ui-avatar-media-initialsBackground-default: #115d71;
710
+ --gse-ui-avatar-media-initialsBackground-accent1: #7785b8;
711
+ --gse-ui-avatar-media-initialsBackground-accent2: #90d3dd;
712
+ --gse-ui-avatar-media-initialsBackground-accent3: #0c6d7e;
713
+ --gse-ui-avatar-media-initialsBackground-accent4: #547688;
714
+ --gse-ui-avatar-media-initialsBackground-accent5: #a5cae0;
715
+ --gse-ui-avatar-media-initialsBackground-accent6: #b5bfe6;
716
+ --gse-ui-avatar-media-initialsBackground-accent7: #a05195;
717
+ --gse-ui-avatar-media-initialsBackground-accent8: #f95d6a;
718
+ --gse-ui-avatar-media-initialsBackground-accent9: #fe8f85;
719
+ --gse-ui-avatar-media-initialsBackground-accent10: #ffc650;
720
+ --gse-ui-avatar-media-initialsBackground-accent11: #fe624d;
721
+ --gse-ui-avatar-media-initialsBackground-accent12: #c44b3b;
722
+ --gse-ui-avatar-media-initialsBackground-overflowCount: #626e84;
723
+ --gse-ui-avatar-media-initialsBackground-add: #ced2fc;
724
+ --gse-ui-avatar-media-initialsForeground-default: #1b2c48;
725
+ --gse-ui-avatar-media-initialsForeground-inverse: #ffffff;
726
+ --gse-ui-avatar-media-initialsForeground-add: #4856cb;
727
+ --gse-ui-avatar-hoverModal-shroudColor: #0f1929;
728
+ --gse-ui-avatar-hoverModal-foregroundColor: #ffffff;
729
+ --gse-ui-avatar-hoverModal-opacity: 0.8;
730
+ --gse-ui-avatar-content-borderRadius: 256px;
731
+ --gse-ui-avatar-content-default-border: 1px solid #ffffff;
732
+ --gse-ui-avatar-content-large-border: 2px solid #ffffff;
733
+ --gse-ui-avatar-groupSet-gap: -2px;
734
+ --gse-ui-avatar-focusRing-large-borderRadius: 96px;
735
+ --gse-ui-avatar-focusRing-large-border: 3px solid #7b88f7;
736
+ --gse-ui-avatar-focusRing-mediumSmall-borderRadius: 100px;
737
+ --gse-ui-avatar-focusRing-medium-border: 3px solid #7b88f7;
738
+ --gse-ui-avatar-focusRing-small-border: 2px solid #7b88f7;
739
+ --gse-ui-avatar-focusRing-xsmall-border: 2px solid #7b88f7;
740
+ --gse-ui-avatar-focus: #7b88f7;
741
+ --gse-ui-avatar-addChangeImage-hoverModal-shroudSize: 84px;
742
+ --gse-ui-avatar-addChangeImage-icon-size: 16px;
743
+ --gse-ui-globalNav-sideMenu: linear-gradient(135deg, #09b581 0%, #9de1cd 100%);
744
+ --gse-ui-globalNav-text: 700 12px/16px Roboto;
745
+ --gse-ui-globalNav-toggle-onQueue-text: 600 12px/16px Roboto;
746
+ --gse-ui-globalNav-toggle-gap: 16px;
747
+ --gse-ui-globalNav-toggle-offQueue-text: 400 12px/16px Roboto;
748
+ --gse-ui-globalNav-focus-border: 3px solid #7b88f7;
749
+ --gse-ui-globalNav-menuOption-height: 32px;
750
+ --gse-ui-globalNav-menuOption-width: 248px;
751
+ --gse-ui-globalNav-menuOption-padding: 0px 12px;
752
+ --gse-ui-globalNav-menuOption-gap: 8px;
753
+ --gse-ui-globalNav-menuOption-default-foregroundColor: #ffffff;
754
+ --gse-ui-globalNav-menuOption-hover-backgroundColor: #252e78;
755
+ --gse-ui-globalNav-menuOption-hover-foregroundColor: #ffffff;
756
+ --gse-ui-globalNav-menuOption-selected-backgroundColor: #4856cb;
757
+ --gse-ui-globalNav-menuOption-selected-foregroundColor: #ffffff;
758
+ --gse-ui-globalNav-menuOption-disabled-backgroundColor: #ffffff;
759
+ --gse-ui-globalNav-menuOption-focus-borderRadius: 8px;
760
+ --gse-ui-globalNav-menuOption-borderRadius: 4px;
761
+ --gse-ui-globalNav-menuOption-disableOpacity: 0.5;
762
+ --gse-ui-globalNav-menuOption-selectedPanel-backgroundColor: #3742a2;
763
+ --gse-ui-globalNav-menuOption-selectedPanel-foregroundColor: #ffffff;
764
+ --gse-ui-globalNav-menuOption-return-default-backgroundColor: #1c2463;
765
+ --gse-ui-globalNav-menuOption-return-default-foregroundColor: #ffffff;
766
+ --gse-ui-globalNav-menuOption-return-hover-backgroundColor: #141a4f;
767
+ --gse-ui-globalNav-menuOption-return-hover-foregroundColor: #ffffff;
768
+ --gse-ui-globalNav-menuOption-return-selected-backgroundColor: #4856cb;
769
+ --gse-ui-globalNav-menuOption-return-selected-foregroundColor: #ffffff;
770
+ --gse-ui-globalNav-menuOption-treeView-bar: #314669;
771
+ --gse-ui-globalNav-buttonReturn-height: 48px;
772
+ --gse-ui-globalNav-buttonReturn-width: 280px;
773
+ --gse-ui-globalNav-buttonReturn-padding: 16px 28px;
774
+ --gse-ui-globalNav-buttonReturn-gap: 12px;
775
+ --gse-ui-globalNav-treeView-border: 2px solid #3e5374;
776
+ --gse-ui-globalNav-treeView-gap: 8px;
777
+ --gse-ui-globalNav-treeView-width: 224px;
778
+ --gse-ui-globalNav-bar-padding: 8px 12px;
779
+ --gse-ui-globalNav-topBar-items-gap: 16px;
780
+ --gse-ui-globalNav-topBar-padding: 16px 24px;
781
+ --gse-ui-globalNav-topBar-height: 64px;
782
+ --gse-ui-globalNav-topBar-frame-backgroundColor: #ffffff;
783
+ --gse-ui-globalNav-topBar-frame-stroke: #c6ceec;
784
+ --gse-ui-globalNav-topBar-logo: #ff4f1f; /* Brand Orange from Spark 1.0 */
785
+ --gse-ui-globalNav-topBar-menuButton-closed-default-foregroundColor: #4856cb;
786
+ --gse-ui-globalNav-topBar-menuButton-closed-hover-backgroundColor: #3742a2;
787
+ --gse-ui-globalNav-topBar-menuButton-closed-hover-foregroundColorStroke: #4856cb;
788
+ --gse-ui-globalNav-topBar-menuButton-closed-hover-foregroundColor: #ffffff;
789
+ --gse-ui-globalNav-topBar-menuButton-open-default-foregroundColorStroke: #ffffff;
790
+ --gse-ui-globalNav-topBar-menuButton-open-hover-backgroundColor: #3742a2;
791
+ --gse-ui-globalNav-topBar-menuButton-open-hover-foregroundColor: #ffffff;
792
+ --gse-ui-globalNav-panel-panelTitle: #ffffff;
793
+ --gse-ui-globalNav-panel-primary: linear-gradient(127deg, #23395d 3.19%, #3e5374 225.06%);
794
+ --gse-ui-globalNav-panel-secondary: linear-gradient(358deg, #1b2b48 0.16%, #23395d 98.45%);
795
+ --gse-ui-dataTableComposed-boxShadow: 0 0 4px 1px rgba(35,57,92,0.1);
796
+ --gse-ui-dataTableComposed-width: 1440px;
797
+ --gse-ui-focus: 2px solid #7b88f7;
798
+ --gse-ui-tabs-item-height: 40px;
799
+ --gse-ui-tabs-item-horizontal-fixedHeight: 40px;
800
+ --gse-ui-tabs-item-horizontal-padding: 11px 12px 10px;
801
+ --gse-ui-tabs-item-disableOpacity: 0.5;
802
+ --gse-ui-tabs-item-itemText: 400 12px/18px Roboto;
803
+ --gse-ui-tabs-item-itemTextColor: #1b2c48;
804
+ --gse-ui-tabs-item-divider-horizontal-height: 1px;
805
+ --gse-ui-tabs-item-divider-vertical-height: 40px;
806
+ --gse-ui-tabs-item-divider-vertical-width: 1px;
807
+ --gse-ui-tabs-item-divider-dividerColor: #c6c8ce;
808
+ --gse-ui-tabs-item-indicator-vertical-height: 40px;
809
+ --gse-ui-tabs-item-indicator-vertical-width: 2px;
810
+ --gse-ui-tabs-item-indicator-horizontal-height: 2px;
811
+ --gse-ui-tabs-item-indicator-hoverColor: #4856cb;
812
+ --gse-ui-tabs-item-indicator-activeColor: #3742a2;
813
+ --gse-ui-tabs-item-icon-iconColor: #1b2c48;
814
+ --gse-ui-tabs-item-icon-size: 16px;
815
+ --gse-ui-tabs-item-gap: 8px;
816
+ --gse-ui-tabs-item-vertical-fixedHeight: 40px;
817
+ --gse-ui-tabs-item-vertical-padding: 11px 9px 10px 12px;
818
+ --gse-ui-tabs-item-focusRing-offset: 1px;
819
+ --gse-ui-tabs-set-vertical-height: 360px;
820
+ --gse-ui-tabs-set-vertical-width: 98px;
821
+ --gse-ui-tabs-set-vertical-marginRight: 16px;
822
+ --gse-ui-tabs-set-horizontal-width: 800px;
823
+ --gse-ui-tabs-set-horizontal-height: 40px;
824
+ --gse-ui-tabs-set-horizontal-marginBottom: 16px;
825
+ --gse-ui-tabs-set-gap: -1px;
826
+ --gse-ui-tabs-set-divider-horizontal-height: 1px;
827
+ --gse-ui-tabs-set-divider-vertical-width: 1px;
828
+ --gse-ui-tabs-focusRing-border: 3px solid #7b88f7;
829
+ --gse-ui-tabs-focusRing-borderRadius: 4px;
830
+ --gse-ui-advancedTabs-divider-dividerColor: #c6c8ce;
831
+ --gse-ui-advancedTabs-item-padding: 11px 12px 10px;
832
+ --gse-ui-advancedTabs-item-gap: 8px;
833
+ --gse-ui-advancedTabs-item-focus-borderRadius: 8px;
834
+ --gse-ui-advancedTabs-item-focus-border: 3px solid #7b88f7;
835
+ --gse-ui-advancedTabs-item-focus-borderCopy: 4px;
836
+ --gse-ui-advancedTabs-item-backgroundColor: #ffffff;
837
+ --gse-ui-advancedTabs-item-borderRadius: 4px 4px 0 0;
838
+ --gse-ui-advancedTabs-item-height: 48px;
839
+ --gse-ui-advancedTabs-item-width: 151px;
840
+ --gse-ui-advancedTabs-item-focusItem-height: 53px;
841
+ --gse-ui-advancedTabs-item-focusItem-width: 126px;
842
+ --gse-ui-advancedTabs-item-divider-bottom-height: 1px;
843
+ --gse-ui-advancedTabs-item-divider-right-height: 32px;
844
+ --gse-ui-advancedTabs-item-divider-right-width: 1px;
845
+ --gse-ui-advancedTabs-item-text-color: #1b2c48;
846
+ --gse-ui-advancedTabs-item-text-height: 9px;
847
+ --gse-ui-advancedTabs-item-indicator-hoverColor: #4856cb;
848
+ --gse-ui-advancedTabs-item-indicator-activeColor: #3742a2;
849
+ --gse-ui-advancedTabs-item-indicator-height: 2px;
850
+ --gse-ui-advancedTabs-item-icon-iconColor: #1b2c48;
851
+ --gse-ui-advancedTabs-item-icon-size: 16px;
852
+ --gse-ui-advancedTabs-item-menuButton-gap: 4px;
853
+ --gse-ui-advancedTabs-item-menuButton-height: 45px;
854
+ --gse-ui-advancedTabs-item-menuButton-width: 32px;
855
+ --gse-ui-advancedTabs-item-menuButton-defaultColor: #626e84;
856
+ --gse-ui-advancedTabs-item-menuButton-activeColor: #252e78;
857
+ --gse-ui-advancedTabs-item-menuButton-focus-height: 53px;
858
+ --gse-ui-advancedTabs-item-menuButton-focus-width: 40px;
859
+ --gse-ui-advancedTabs-item-itemText: 400 12px/18px Roboto;
860
+ --gse-ui-advancedTabs-button-add-height: 45px;
861
+ --gse-ui-advancedTabs-button-arrow-height: 48px;
862
+ --gse-ui-advancedTabs-set-backgroundColor: #f3f5fb;
863
+ --gse-ui-advancedTabs-set-standard-width: 920px;
864
+ --gse-ui-toast-closeButtonColor: #626e84;
865
+ --gse-ui-toast-success-backgroundColor: #ffffff;
866
+ --gse-ui-toast-success-foregroundColor: #1b2c48;
867
+ --gse-ui-toast-success-iconColor: #09b581;
868
+ --gse-ui-toast-warning-backgroundColor: #ffffff;
869
+ --gse-ui-toast-warning-foregroundColor: #1b2c48;
870
+ --gse-ui-toast-warning-iconColor: #f8c73e;
871
+ --gse-ui-toast-info-backgroundColor: #ffffff;
872
+ --gse-ui-toast-info-foregroundColor: #1b2c48;
873
+ --gse-ui-toast-info-iconColor: #6e5ddb;
874
+ --gse-ui-toast-action-backgroundColor: #ffffff;
875
+ --gse-ui-toast-action-foregroundColor: #1b2c48;
876
+ --gse-ui-toast-action-iconColor: #4856cb;
877
+ --gse-ui-toast-error-backgroundColor: #ffffff;
878
+ --gse-ui-toast-error-foregroundColor: #1b2c48;
879
+ --gse-ui-toast-error-iconColor: #e22245;
880
+ --gse-ui-toast-heading: 700 16px/24px Urbanist;
881
+ --gse-ui-toast-text: 400 14px/20px "Noto Sans";
882
+ --gse-ui-toast-margin: 16px;
883
+ --gse-ui-toast-gap: 12px;
884
+ --gse-ui-toast-gapText: 4px;
885
+ --gse-ui-toast-gapButton: 16px;
886
+ --gse-ui-toast-buttonBar-gap: 8px;
887
+ --gse-ui-toast-borderRadius: 8px;
888
+ --gse-ui-toast-boxShadow: 0 0 4px 1px rgba(35,57,92,0.1);
889
+ --gse-ui-toast-icon: 24px;
890
+ --gse-ui-toast-wrappingWidth: 320px;
891
+ --gse-ui-toast-stacking-gap: 4px;
892
+ --gse-ui-modal-closeButtonColor: #626e84;
893
+ --gse-ui-modal-headerColor: #1b2c48;
894
+ --gse-ui-modal-backgroundColor: #ffffff;
895
+ --gse-ui-modal-shroudColor: rgb(13.7% 22.4% 36.5% / 0.8);
896
+ --gse-ui-modal-header-gap: 12px;
897
+ --gse-ui-modal-padding: 32px;
898
+ --gse-ui-modal-gap: 16px;
899
+ --gse-ui-modal-heading: 700 24px/32px Urbanist;
900
+ --gse-ui-modal-icon: 32px;
901
+ --gse-ui-modal-small-width: 420px;
902
+ --gse-ui-modal-medium-width: 680px;
903
+ --gse-ui-modal-large-width: 800px;
904
+ --gse-ui-modal-buttonBar-gap: 8px;
905
+ --gse-ui-modal-boxShadow: 0 0 8px 1px rgba(35,57,92,0.15);
906
+ --gse-ui-modal-borderRadius: 16px;
907
+ --gse-ui-modal-shroud-opacity: 0.8;
908
+ --gse-ui-modal-dismissButton-paddingTop: 16px;
909
+ --gse-ui-modal-dismissButton-paddingRight: 8px;
910
+ --gse-ui-popover-borderRadius: 8px;
911
+ --gse-ui-popover-boxShadow: 0 0 8px 1px rgba(35,57,92,0.15);
912
+ --gse-ui-popover-closeButtonColor: #626e84;
913
+ --gse-ui-popover-headerColor: #1b2c48;
914
+ --gse-ui-popover-backgroundColor: #ffffff;
915
+ --gse-ui-popover-gap: 16px;
916
+ --gse-ui-popover-padding: 24px;
917
+ --gse-ui-popover-buttonsBar-gap: 8px;
918
+ --gse-ui-popover-header-gap: 4px;
919
+ --gse-ui-popover-spacer-height: 16px;
920
+ --gse-ui-popover-body-text: 400 14px/20px Roboto;
921
+ --gse-ui-popover-title-text: 700 16px/24px Urbanist;
922
+ --gse-ui-popover-anchor-width: 18px;
923
+ --gse-ui-popover-anchor-height: 9px;
924
+ --gse-ui-progressAndLoading-spinner-foreground: #4856cb;
925
+ --gse-ui-progressAndLoading-spinner-base: #dee1fd;
926
+ --gse-ui-progressAndLoading-spinner-large: 48px; /* keeping hard code as it cant have "px" */
927
+ --gse-ui-progressAndLoading-spinner-small: 16px; /* keeping hard code as it cant have "px" */
928
+ --gse-ui-progressAndLoading-spinner-text: 600 12px/18px "Noto Sans";
929
+ --gse-ui-progressAndLoading-textColor: #1b2c48;
930
+ --gse-ui-progressAndLoading-loadingState-large-header: 700 24px/32px Urbanist;
931
+ --gse-ui-progressAndLoading-loadingState-large-subheader: 600 16px/24px Roboto;
932
+ --gse-ui-progressAndLoading-loadingState-large-width: 600px;
933
+ --gse-ui-progressAndLoading-loadingState-medium-header: 700 18px/27px Urbanist;
934
+ --gse-ui-progressAndLoading-loadingState-medium-subheader: 600 14px/20px Roboto;
935
+ --gse-ui-progressAndLoading-loadingState-medium-width: 400px;
936
+ --gse-ui-progressAndLoading-loadingState-small-header: 700 16px/24px Urbanist;
937
+ --gse-ui-progressAndLoading-loadingState-small-subheader: 600 12px/18px Roboto;
938
+ --gse-ui-progressAndLoading-loadingState-small-width: 200px;
939
+ --gse-ui-progressAndLoading-large-gap: 24px;
940
+ --gse-ui-progressAndLoading-large-gapText: 4px;
941
+ --gse-ui-progressAndLoading-pageLoading-gap: -3px;
942
+ --gse-ui-progressAndLoading-medium-gap: 16px;
943
+ --gse-ui-progressAndLoading-medium-gapText: 4px;
944
+ --gse-ui-progressAndLoading-small-gap: 12px;
945
+ --gse-ui-progressAndLoading-small-gapText: 4px;
946
+ --gse-ui-progressAndLoading-blankState-large-header: 700 18px/27px Urbanist;
947
+ --gse-ui-progressAndLoading-blankState-large-subheader: 600 14px/20px Roboto;
948
+ --gse-ui-progressAndLoading-blankState-small-header: 700 14px/24px Urbanist;
949
+ --gse-ui-progressAndLoading-blankState-small-subheader: 600 12px/18px Roboto;
950
+ --gse-ui-progressAndLoading-largeBorder: 4px; /* Remove px because of SVG issues from COMUI-2226 */
951
+ --gse-ui-progressAndLoading-smallBorder: 2px; /* Remove px because of SVG issues from COMUI-2226 */
952
+ --gse-ui-progressAndLoading-thinBorder: 1px; /* Remove px because of SVG issues from COMUI-2226 */
953
+ --gse-ui-blankState-small-width: 250px;
954
+ --gse-ui-blankState-small-maxWidth: 569px;
955
+ --gse-ui-blankState-large-minWidth: 570px;
956
+ --gse-ui-blankState-icon-size-sm: 32px;
957
+ --gse-ui-blankState-icon-size-lg: 42px;
958
+ --gse-ui-blankState-padding: 32px 16px;
959
+ --gse-ui-blankState-gapMessage: 4px;
960
+ --gse-ui-blankState-gapMain: 12px;
961
+ --gse-ui-blankState-gapContent: 24px;
962
+ --gse-ui-blankState-iconColor: #767c8d;
963
+ --gse-ui-blankState-foregroundColor: #1b2c48;
964
+ --gse-ui-blankState-backgroundColor: #fbfcfe;
965
+ --gse-ui-blankState-borderRadius: 8px;
966
+ --gse-ui-accordion-header-height: 40px;
967
+ --gse-ui-accordion-header-padding: 10px 16px 10px 16px;
968
+ --gse-ui-accordion-header-chevronIcon: 16px;
969
+ --gse-ui-accordion-header-gap: 8px;
970
+ --gse-ui-accordion-header-default-foreground-labelColor: #1b2c48;
971
+ --gse-ui-accordion-header-default-foreground-chevronIcon-closed: #626e84;
972
+ --gse-ui-accordion-header-default-foreground-chevronIcon-open: #252e78;
973
+ --gse-ui-accordion-header-default-foreground-chevronIcon-hover: #3742a2;
974
+ --gse-ui-accordion-header-label-defaultText: 700 14px/20px Roboto;
975
+ --gse-ui-accordion-reversedHeader-padding: 2px;
976
+ --gse-ui-accordion-menuItem-height: 32px;
977
+ --gse-ui-accordion-menuItem-padding: 0 12px 0 24px;
978
+ --gse-ui-accordion-menuItem-startIcon: 16px;
979
+ --gse-ui-accordion-menuItem-parentIcon: 16px;
980
+ --gse-ui-accordion-menuItem-gap: 8px;
981
+ --gse-ui-accordion-menuItem-default-foreground-startIconColor: #1b2c48;
982
+ --gse-ui-accordion-menuItem-default-foreground-labelColor: #1b2c48;
983
+ --gse-ui-accordion-menuItem-default-foreground-startShortcutColor: #626e84;
984
+ --gse-ui-accordion-menuItem-default-foreground-parentIconColor: #626e84;
985
+ --gse-ui-accordion-menuItem-hover-foreground-startIconColor: #1b2c48;
986
+ --gse-ui-accordion-menuItem-hover-foreground-labelColor: #1b2c48;
987
+ --gse-ui-accordion-menuItem-hover-foreground-startShortcutColor: #1b2c48;
988
+ --gse-ui-accordion-menuItem-hover-foreground-parentIconColor: #1b2c48;
989
+ --gse-ui-accordion-menuItem-hover-backgroundColor: #eff0fe;
990
+ --gse-ui-accordion-menuItem-selected-foreground-startIconColor: #1b2c48;
991
+ --gse-ui-accordion-menuItem-selected-foreground-labelColor: #1b2c48;
992
+ --gse-ui-accordion-menuItem-selected-foreground-startShortcutColor: #1b2c48;
993
+ --gse-ui-accordion-menuItem-selected-foreground-parentIconColor: #1b2c48;
994
+ --gse-ui-accordion-menuItem-selected-backgroundColor: #ced2fc;
995
+ --gse-ui-accordion-menuItem-focus-borderRadius: 4px;
996
+ --gse-ui-accordion-menuItem-label-defaultText: 400 12px/18px Roboto;
997
+ --gse-ui-accordion-menuItem-label-selectedText: 600 12px/18px Roboto;
998
+ --gse-ui-accordion-menuItem-shortcut-text: 400 14px/20px Roboto;
999
+ --gse-ui-accordion-focusBorder: 2px solid #7b88f7;
1000
+ --gse-ui-accordion-contentItem-padding: 16px;
1001
+ --gse-ui-accordion-contentItem-gap: 16px;
1002
+ --gse-ui-accordion-contentItem-foregroundColor: #1b2c48;
1003
+ --gse-ui-accordion-contentItem-backgroundColor: #ffffff;
1004
+ --gse-ui-accordion-contentItem-defaultText: 400 12px/18px Roboto;
1005
+ --gse-ui-accordion-wrapper-dividerBorder: 1px solid #c6c8ce;
1006
+ --gse-ui-accordion-focus-offset-gap: 1px;
1007
+ --gse-ui-accordion-contentPanel-paddingBottom: 4px;
1008
+ --gse-ui-accordion-label-disabled-opacity: 0.5;
1009
+ }
1010
+
1011
+ [flare-mode=dark] {
1012
+ --gse-ui-formControl-input-contentText: 400 12px/18px Roboto;
1013
+ --gse-ui-formControl-input-default-border: 1px solid #a3a7b0;
1014
+ --gse-ui-formControl-input-hover-border: 1px solid #3742a2;
1015
+ --gse-ui-formControl-input-active-border: 1px solid #252e78;
1016
+ --gse-ui-formControl-input-error-border: 1px solid #e22245;
1017
+ --gse-ui-formControl-input-disabled-border: 1px solid #a3a7b0;
1018
+ --gse-ui-formControl-input-disabled-opacity: 0.5;
1019
+ --gse-ui-formControl-input-borderRadius: 4px;
1020
+ --gse-ui-formControl-input-backgroundColor: #ffffff;
1021
+ --gse-ui-formControl-input-placeholderColor: #626e84;
1022
+ --gse-ui-formControl-input-suggestionColor: #626e84;
1023
+ --gse-ui-formControl-input-populatedColor: #1b2c48;
1024
+ --gse-ui-formControl-input-inputClearable-inputClearableColor: #626e84;
1025
+ --gse-ui-formControl-input-inputClearable-size: 16px;
1026
+ --gse-ui-formControl-input-gap: 12px;
1027
+ --gse-ui-formControl-input-top: 8px;
1028
+ --gse-ui-formControl-input-padding: 8px 12px;
1029
+ --gse-ui-formControl-input-prefixSufix-text: 700 14px/20px Roboto;
1030
+ --gse-ui-formControl-input-prefixSufix-height: 32px;
1031
+ --gse-ui-formControl-input-prefixSufix-defaultColor: #626e84;
1032
+ --gse-ui-formControl-input-textfield-height: 32px;
1033
+ --gse-ui-formControl-input-textfield-minWidth: 45px;
1034
+ --gse-ui-formControl-input-colorPicker-size: 32px;
1035
+ --gse-ui-formControl-input-inputIcon-size: 16px;
1036
+ --gse-ui-formControl-input-inputIcon-defaultColor: #3e5374;
1037
+ --gse-ui-formControl-input-inputIcon-iconEndColor: #626e84;
1038
+ --gse-ui-formControl-input-focusRing-defaultColor: #7b88f7;
1039
+ --gse-ui-formControl-input-textarea-height: 96px;
1040
+ --gse-ui-formControl-input-focus-border: 3px solid #7b88f7;
1041
+ --gse-ui-formControl-input-spinbuttonIcon-size: 16px;
1042
+ --gse-ui-formControl-input-focusSelection-backgroundColor: #7b88f7;
1043
+ --gse-ui-formControl-label-padding: 0 0 8px 0;
1044
+ --gse-ui-formControl-label-gap: 4px;
1045
+ --gse-ui-formControl-label-text: 400 12px/18px Roboto;
1046
+ --gse-ui-formControl-label-textBold: 600 12px/18px Roboto;
1047
+ --gse-ui-formControl-label-labelColor: #1b2c48;
1048
+ --gse-ui-formControl-label-indicator-text: 400 12px/18px "Noto Sans";
1049
+ --gse-ui-formControl-label-indicator-requiredColor: #e22245;
1050
+ --gse-ui-formControl-label-indicator-optionalColor: #3e5374;
1051
+ --gse-ui-formControl-label-iconSize: 16px;
1052
+ --gse-ui-formControl-label-tooltipTrigger-optionalColor: #3e5374;
1053
+ --gse-ui-formControl-label-tooltipTrigger-borderRadius: 2px;
1054
+ --gse-ui-formControl-group-gapItems: 8px;
1055
+ --gse-ui-formControl-helper-gap: 4px;
1056
+ --gse-ui-formControl-helper-helperText: 400 12px/18px Roboto;
1057
+ --gse-ui-formControl-helper-padding: 8px 0 0 0;
1058
+ --gse-ui-formControl-helper-icon-padding: 1px 0 1px 0;
1059
+ --gse-ui-formControl-helper-paddingSmall: 4px 0 0 0;
1060
+ --gse-ui-formControl-helper-errorPadding: 4px 0 0 0;
1061
+ --gse-ui-formControl-helper-defaultColor: #626e84;
1062
+ --gse-ui-formControl-helper-errorColor: #e22245;
1063
+ --gse-ui-formControl-helper-iconSize: 16px;
1064
+ --gse-ui-formControl-spinButton-gap: 8px;
1065
+ --gse-ui-formControl-spinner-track: #4856cb;
1066
+ --gse-ui-formControl-spinner-errorColor: #dee1fd;
1067
+ --gse-ui-formControl-textarea-padding: 8px 12px;
1068
+ --gse-ui-formControl-focusRing-borderRadius: 4px;
1069
+ --gse-ui-card-backgroundColor: #ffffff;
1070
+ --gse-ui-card-borderRadius: 16px;
1071
+ --gse-ui-card-borderRadiusCopy: 16px;
1072
+ --gse-ui-card-default-border: 1px solid #c6c8ce;
1073
+ --gse-ui-card-raised-border: 1px solid #c6c8ce;
1074
+ --gse-ui-card-raised-boxShadow: 0 0 6px 1px rgba(35,57,92,0.12);
1075
+ --gse-ui-card-padding: 24px;
1076
+ --gse-ui-card-borderless-border: 1px solid transparent;
1077
+ --gse-ui-tooltip-light-border: 1px solid #c6c8ce;
1078
+ --gse-ui-tooltip-light-backgroundColor: #ffffff;
1079
+ --gse-ui-tooltip-light-foregroundColor: #1b2c48;
1080
+ --gse-ui-tooltip-dark-border: 1px solid #1b2c48;
1081
+ --gse-ui-tooltip-dark-backgroundColor: #1b2c48;
1082
+ --gse-ui-tooltip-dark-foregroundColor: #ffffff;
1083
+ --gse-ui-tooltip-dark-iconColor: #ffffff;
1084
+ --gse-ui-tooltip-boxShadow: 0 0 6px 1px rgba(35,57,92,0.12);
1085
+ --gse-ui-tooltip-padding: 8px 12px;
1086
+ --gse-ui-tooltip-height: 32px;
1087
+ --gse-ui-tooltip-gap: 8px;
1088
+ --gse-ui-tooltip-borderRadius: 4px;
1089
+ --gse-ui-tooltip-text: 400 12px/16px "Noto Sans";
1090
+ --gse-ui-tag-borderRadius: 16px;
1091
+ --gse-ui-tag-default-backgroundColor: #23395d;
1092
+ --gse-ui-tag-default-foregroundColor: #ffffff;
1093
+ --gse-ui-tag-accent1-backgroundColor: #e4e5e7;
1094
+ --gse-ui-tag-accent1-foregroundColor: #1b2c48;
1095
+ --gse-ui-tag-accent2-backgroundColor: #90d3dd;
1096
+ --gse-ui-tag-accent2-foregroundColor: #1b2c48;
1097
+ --gse-ui-tag-accent3-backgroundColor: #0c6d7e;
1098
+ --gse-ui-tag-accent3-foregroundColor: #ffffff;
1099
+ --gse-ui-tag-accent4-backgroundColor: #547688;
1100
+ --gse-ui-tag-accent4-foregroundColor: #ffffff;
1101
+ --gse-ui-tag-accent5-backgroundColor: #a5cae0;
1102
+ --gse-ui-tag-accent5-foregroundColor: #1b2c48;
1103
+ --gse-ui-tag-accent6-backgroundColor: #b5bfe6;
1104
+ --gse-ui-tag-accent6-foregroundColor: #1b2c48;
1105
+ --gse-ui-tag-text: 600 12px/18px Roboto;
1106
+ --gse-ui-tag-padding: 0 12px;
1107
+ --gse-ui-tag-removable-padding: 0 8px 0 12px;
1108
+ --gse-ui-tag-removable-gap: 4px;
1109
+ --gse-ui-tag-accent7-backgroundColor: #a05195;
1110
+ --gse-ui-tag-accent7-foregroundColor: #ffffff;
1111
+ --gse-ui-tag-height: 20px;
1112
+ --gse-ui-tag-accent8-backgroundColor: #f95d6a;
1113
+ --gse-ui-tag-accent8-foregroundColor: #1b2c48;
1114
+ --gse-ui-tag-accent9-backgroundColor: #fe8f85;
1115
+ --gse-ui-tag-accent9-foregroundColor: #1b2c48;
1116
+ --gse-ui-tag-accent10-backgroundColor: #ffc650;
1117
+ --gse-ui-tag-accent10-foregroundColor: #1b2c48;
1118
+ --gse-ui-tag-button-size: 16px;
1119
+ --gse-ui-tag-disabled-opacity: 0.5;
1120
+ --gse-ui-badge-borderRadius: 16px;
1121
+ --gse-ui-badge-text: 400 12px/18px Roboto;
1122
+ --gse-ui-badge-height: 20px;
1123
+ --gse-ui-badge-padding: 2px 12px;
1124
+ --gse-ui-badge-gap: 4px;
1125
+ --gse-ui-badge-info-bold-backgroundColor: #6e5ddb;
1126
+ --gse-ui-badge-info-bold-foregroundColor: #ffffff;
1127
+ --gse-ui-badge-info-regular-backgroundColor: #c5bef1;
1128
+ --gse-ui-badge-info-regular-foregroundColor: #1b2c48;
1129
+ --gse-ui-badge-success-bold-backgroundColor: #09b581;
1130
+ --gse-ui-badge-success-bold-foregroundColor: #1b2c48;
1131
+ --gse-ui-badge-success-regular-backgroundColor: #9de1cd;
1132
+ --gse-ui-badge-success-regular-foregroundColor: #1b2c48;
1133
+ --gse-ui-badge-warning-bold-backgroundColor: #f8c73e;
1134
+ --gse-ui-badge-warning-bold-foregroundColor: #1b2c48;
1135
+ --gse-ui-badge-warning-regular-backgroundColor: #fce9b2;
1136
+ --gse-ui-badge-warning-regular-foregroundColor: #1b2c48;
1137
+ --gse-ui-badge-error-bold-backgroundColor: #e22245;
1138
+ --gse-ui-badge-error-bold-foregroundColor: #ffffff;
1139
+ --gse-ui-badge-error-regular-backgroundColor: #f3a7b5;
1140
+ --gse-ui-badge-error-regular-foregroundColor: #1b2c48;
1141
+ --gse-ui-icon-small-size: 16px;
1142
+ --gse-ui-icon-medium-size: 24px;
1143
+ --gse-ui-icon-large-size: 32px;
1144
+ --gse-ui-icon-color: #3e5374;
1145
+ --gse-ui-alert-padding: 8px 16px;
1146
+ --gse-ui-alert-gap: 8px;
1147
+ --gse-ui-alert-info-backgroundColor: #e2dff8;
1148
+ --gse-ui-alert-info-foregroundColor: #1b2c48;
1149
+ --gse-ui-alert-info-iconColor: #6e5ddb;
1150
+ --gse-ui-alert-info-border: 1px solid #c5bef1;
1151
+ --gse-ui-alert-success-backgroundColor: #cef0e6;
1152
+ --gse-ui-alert-success-foregroundColor: #1b2c48;
1153
+ --gse-ui-alert-success-iconColor: #09b581;
1154
+ --gse-ui-alert-success-border: 1px solid #9de1cd;
1155
+ --gse-ui-alert-warning-backgroundColor: #fef4d8;
1156
+ --gse-ui-alert-warning-foregroundColor: #1b2c48;
1157
+ --gse-ui-alert-warning-iconColor: #f8c73e;
1158
+ --gse-ui-alert-warning-border: 1px solid #fce9b2;
1159
+ --gse-ui-alert-error-backgroundColor: #f9d3da;
1160
+ --gse-ui-alert-error-foregroundColor: #1b2c48;
1161
+ --gse-ui-alert-error-iconColor: #e22245;
1162
+ --gse-ui-alert-error-border: 1px solid #f3a7b5;
1163
+ --gse-ui-alert-text: 400 12px/18px Roboto;
1164
+ --gse-ui-alert-emphasisText: 700 12px/18px Roboto;
1165
+ --gse-ui-alert-borderRadius: 4px;
1166
+ --gse-ui-rating-default-color: #767c8d;
1167
+ --gse-ui-rating-active-color: #4856cb;
1168
+ --gse-ui-rating-hover-color: #3742a2;
1169
+ --gse-ui-rating-disabled-color: #767c8d;
1170
+ --gse-ui-rating-disabled-opacity: 0.5;
1171
+ --gse-ui-rating-size: 16px;
1172
+ --gse-ui-rating-star-gap: 8px;
1173
+ --gse-ui-breadcrumbs-primary-height: 20px;
1174
+ --gse-ui-breadcrumbs-primary-separator-padding: 0 12px;
1175
+ --gse-ui-breadcrumbs-primary-separator-typography: 700 16px/20px Roboto;
1176
+ --gse-ui-breadcrumbs-secondary-height: 18px;
1177
+ --gse-ui-breadcrumbs-secondary-separator-padding: 0 8px;
1178
+ --gse-ui-breadcrumbs-secondary-separator-typography: 700 14px/18px Roboto;
1179
+ --gse-ui-breadcrumbs-separator-color: #a3a7b0;
1180
+ --gse-ui-breadcrumbs-borderRadius: 0rem;
1181
+ --gse-ui-segmentedControl-button-padding: 0 12px;
1182
+ --gse-ui-segmentedControl-button-gap: 8px;
1183
+ --gse-ui-segmentedControl-button-start-borderRadius: 4px 0 0 4px;
1184
+ --gse-ui-segmentedControl-button-middle-borderRadius: 0rem;
1185
+ --gse-ui-segmentedControl-button-end-borderRadius: 0 4px 4px 0;
1186
+ --gse-ui-segmentedControl-button-disabled-opacity: 0.5;
1187
+ --gse-ui-segmentedControl-button-disabled-backgroundColor: rgba(0, 0, 0, 0);
1188
+ --gse-ui-segmentedControl-button-disabled-foregroundColor: #4856cb;
1189
+ --gse-ui-segmentedControl-button-default-backgroundColor: rgba(0, 0, 0, 0);
1190
+ --gse-ui-segmentedControl-button-default-foregroundColor: #4856cb;
1191
+ --gse-ui-segmentedControl-button-hover-backgroundColor: #dee1fd;
1192
+ --gse-ui-segmentedControl-button-hover-foregroundColor: #3742a2;
1193
+ --gse-ui-segmentedControl-button-active-backgroundColor: #4856cb;
1194
+ --gse-ui-segmentedControl-button-active-foregroundColor: #ffffff;
1195
+ --gse-ui-segmentedControl-borderRadius: 4px;
1196
+ --gse-ui-segmentedControl-height: 32px;
1197
+ --gse-ui-segmentedControl-border: 1px solid #4856cb;
1198
+ --gse-ui-segmentedControl-divider: 1px solid #4856cb;
1199
+ --gse-ui-segmentedControl-iconOnly-padding: 0 8px;
1200
+ --gse-ui-segmentedControl-focus-offset: 0rem;
1201
+ --gse-ui-formFooter-page-desktop-bottomPadding: 16px; /* The recommended vertical padding for the form footer content. */
1202
+ --gse-ui-formFooter-page-desktop-topPadding: 16px; /* The recommended vertical padding for the form footer content. */
1203
+ --gse-ui-formFooter-page-desktop-horizontalPadding: 32px; /* The recommended vertical padding for the form footer content. */
1204
+ --gse-ui-formFooter-page-desktop-gap: 16px; /* The recommended vertical padding for the form footer content. */
1205
+ --gse-ui-formFooter-page-mobile-bottomPadding: 16px; /* The recommended vertical padding for the form footer content. */
1206
+ --gse-ui-formFooter-page-mobile-topPadding: 16px; /* The recommended vertical padding for the form footer content. */
1207
+ --gse-ui-formFooter-page-mobile-horizontalPadding: 16px; /* The recommended vertical padding for the form footer content. */
1208
+ --gse-ui-formFooter-page-mobile-gap: 16px; /* The recommended vertical padding for the form footer content. */
1209
+ --gse-ui-formFooter-separator: 1px solid #c6c8ce; /* This is the recommended style for the form fotter separator/divider. */
1210
+ --gse-ui-formFooter-sideSheet-desktop-bottomPadding: 16px; /* The recommended vertical padding for the form footer content. */
1211
+ --gse-ui-formFooter-sideSheet-desktop-topPadding: 16px; /* The recommended vertical padding for the form footer content. */
1212
+ --gse-ui-formFooter-sideSheet-desktop-horizontalPadding: 24px; /* The recommended vertical padding for the form footer content. */
1213
+ --gse-ui-formFooter-sideSheet-desktop-gap: 16px; /* The recommended vertical padding for the form footer content. */
1214
+ --gse-ui-formFooter-modal-desktop-bottomPadding: 16px; /* The recommended vertical padding for the form footer content. */
1215
+ --gse-ui-formFooter-modal-desktop-topPadding: 16px; /* The recommended vertical padding for the form footer content. */
1216
+ --gse-ui-formFooter-modal-desktop-horizontalPadding: 32px; /* The recommended vertical padding for the form footer content. */
1217
+ --gse-ui-formFooter-modal-desktop-gap: 16px; /* The recommended vertical padding for the form footer content. */
1218
+ --gse-ui-formFooter-backgroundColor: #ffffff;
1219
+ --gse-ui-formFooter-border: 1px solid #4856cb;
1220
+ --gse-ui-copyToClipboard-label-active-backgroundColor: #dee1fd;
1221
+ --gse-ui-copyToClipboard-label-foregroundColor: #1b2c48;
1222
+ --gse-ui-copyToClipboard-label-padding: 2px 4px;
1223
+ --gse-ui-copyToClipboard-label-borderRadius: 4px;
1224
+ --gse-ui-copyToClipboard-label-text: 400 14px/20px Roboto;
1225
+ --gse-ui-copyToClipboard-gap: 16px;
1226
+ --gse-ui-copyToClipboard-contentContainer-gap: 2px;
1227
+ --gse-ui-copyToClipboard-iconContainer-padding: 4px;
1228
+ --gse-ui-copyToClipboard-tooltipIcon-success-foregroundColor: #09b581;
1229
+ --gse-ui-copyToClipboard-tooltipIcon-error-foregroundColor: #e22245;
1230
+ --gse-ui-dismissButton-foregroundColor: #626e84;
1231
+ --gse-ui-button-default-height: 32px;
1232
+ --gse-ui-button-default-padding: 0 12px;
1233
+ --gse-ui-button-default-paddingIconOnly: 8px;
1234
+ --gse-ui-button-iconOnly-width: 32px;
1235
+ --gse-ui-button-icon-size: 16px;
1236
+ --gse-ui-button-compact-height: 24px;
1237
+ --gse-ui-button-compact-padding: 0 12px;
1238
+ --gse-ui-button-compact-paddingIconOnly: 4px;
1239
+ --gse-ui-button-gap: 8px;
1240
+ --gse-ui-button-primary-default-backgroundColor: #4856cb;
1241
+ --gse-ui-button-primary-default-foregroundColor: #ffffff;
1242
+ --gse-ui-button-primary-hover-backgroundColor: #3742a2;
1243
+ --gse-ui-button-primary-hover-foregroundColor: #ffffff;
1244
+ --gse-ui-button-primary-active-backgroundColor: #252e78;
1245
+ --gse-ui-button-primary-active-foregroundColor: #ffffff;
1246
+ --gse-ui-button-secondary-default-backgroundColor: #eff0fe;
1247
+ --gse-ui-button-secondary-default-foregroundColor: #4856cb;
1248
+ --gse-ui-button-secondary-hover-backgroundColor: #dee1fd;
1249
+ --gse-ui-button-secondary-hover-foregroundColor: #3742a2;
1250
+ --gse-ui-button-secondary-active-backgroundColor: #ced2fc;
1251
+ --gse-ui-button-secondary-active-foregroundColor: #252e78;
1252
+ --gse-ui-button-tertiary-default-backgroundColor: rgba(0, 0, 0, 0);
1253
+ --gse-ui-button-tertiary-default-foregroundColor: #4856cb;
1254
+ --gse-ui-button-tertiary-default-border: 1px solid #4856cb;
1255
+ --gse-ui-button-tertiary-hover-backgroundColor: #3742a2;
1256
+ --gse-ui-button-tertiary-hover-foregroundColor: #ffffff;
1257
+ --gse-ui-button-tertiary-active-backgroundColor: #252e78;
1258
+ --gse-ui-button-tertiary-active-foregroundColor: #ffffff;
1259
+ --gse-ui-button-ghost-default-backgroundColor: rgba(0, 0, 0, 0);
1260
+ --gse-ui-button-ghost-default-foregroundColor: #4856cb;
1261
+ --gse-ui-button-ghost-hover-backgroundColor: #dee1fd;
1262
+ --gse-ui-button-ghost-hover-foregroundColor: #3742a2;
1263
+ --gse-ui-button-ghost-active-backgroundColor: #ced2fc;
1264
+ --gse-ui-button-ghost-active-foregroundColor: #252e78;
1265
+ --gse-ui-button-danger-default-backgroundColor: #e22245;
1266
+ --gse-ui-button-danger-default-foregroundColor: #ffffff;
1267
+ --gse-ui-button-danger-hover-backgroundColor: #881429;
1268
+ --gse-ui-button-danger-hover-foregroundColor: #ffffff;
1269
+ --gse-ui-button-danger-active-backgroundColor: #440a15;
1270
+ --gse-ui-button-danger-active-foregroundColor: #ffffff;
1271
+ --gse-ui-button-borderRadius: 4px;
1272
+ --gse-ui-button-disabled-opacity: 0.5;
1273
+ --gse-ui-button-text: 700 12px/18px "Noto Sans";
1274
+ --gse-ui-actionButton-rightSegment-size: 32px;
1275
+ --gse-ui-actionButton-rightSegment-padding: 0 8px;
1276
+ --gse-ui-actionButton-rightSegment-borderRadius: 0 4px 4px 0;
1277
+ --gse-ui-actionButton-rightSegment-focusBorderRadius: 0 8px 8px 0;
1278
+ --gse-ui-actionButton-height: 32px;
1279
+ --gse-ui-actionButton-focus-height: 40px;
1280
+ --gse-ui-actionButton-leftSegment-gap: 8px;
1281
+ --gse-ui-actionButton-leftSegment-padding: 0 16px;
1282
+ --gse-ui-actionButton-leftSegment-focusBorderRadius: 8px 0 0 8px;
1283
+ --gse-ui-actionButton-leftSegment-borderRadius: 4px 0 0 4px;
1284
+ --gse-ui-actionButton-borderRadius: 4px;
1285
+ --gse-ui-actionButton-tertiary-divider: 2px solid #4856cb;
1286
+ --gse-ui-actionButton-primary-divider: 2px solid #ffffff;
1287
+ --gse-ui-actionButton-secondary-divider: 2px solid #ffffff;
1288
+ --gse-ui-actionButton-danger-divider: 2px solid #ffffff;
1289
+ --gse-ui-links-asButton-height: 32px;
1290
+ --gse-ui-links-asButton-padding: 12px;
1291
+ --gse-ui-links-asButton-gap: 8px;
1292
+ --gse-ui-links-asButton-text: 700 14px/20px Roboto;
1293
+ --gse-ui-links-asButton-underlinedText: 700 14px/20px Roboto;
1294
+ --gse-ui-links-inLine-medium-height: 20px;
1295
+ --gse-ui-links-inLine-medium-text: 600 14px/20px "Noto Sans";
1296
+ --gse-ui-links-inLine-medium-underlinedText: 600 14px/20px "Noto Sans";
1297
+ --gse-ui-links-inLine-small-height: 18px;
1298
+ --gse-ui-links-inLine-small-text: 600 12px/18px "Noto Sans";
1299
+ --gse-ui-links-inLine-small-underlinedText: 600 12px/18px "Noto Sans";
1300
+ --gse-ui-links-inLine-padding: 4px;
1301
+ --gse-ui-links-icon: 16px;
1302
+ --gse-ui-links-default-foregroundColor: #4856cb;
1303
+ --gse-ui-links-disabled-foregroundColor: #4856cb;
1304
+ --gse-ui-links-hover-foregroundColor: #3742a2;
1305
+ --gse-ui-links-active-foregroundColor: #252e78;
1306
+ --gse-ui-links-visited-foregroundColor: #8a5ecc;
1307
+ --gse-ui-links-borderRadius: 0rem;
1308
+ --gse-ui-radioButton-icon-default-unselectedForegroundColor: #767c8d;
1309
+ --gse-ui-radioButton-icon-default-selectedForegroundColor: #4856cb;
1310
+ --gse-ui-radioButton-icon-hover-foregroundColor: #3742a2;
1311
+ --gse-ui-radioButton-icon-active-foregroundColor: #252e78;
1312
+ --gse-ui-radioButton-icon-error-foregroundColor: #e22245;
1313
+ --gse-ui-radioButton-icon-height: 16px;
1314
+ --gse-ui-radioButton-icon-width: 16px;
1315
+ --gse-ui-radioButton-label-foregroundColor: #1b2c48;
1316
+ --gse-ui-radioButton-label-text: 400 16px/18px Roboto;
1317
+ --gse-ui-radioButton-gap: 8px;
1318
+ --gse-ui-radioButton-helper-padding: 4px 0 0 24px;
1319
+ --gse-ui-radioButton-helper-gap: 8px;
1320
+ --gse-ui-radioButton-disabled-opacity: 0.5;
1321
+ --gse-ui-radioButton-focus-border: 2px solid #7b88f7;
1322
+ --gse-ui-radioButton-focus-borderRadius: 16px;
1323
+ --gse-ui-radioButton-focus-offset: 1px;
1324
+ --gse-ui-checkbox-icon-default-unselectedForegroundColor: #767c8d;
1325
+ --gse-ui-checkbox-icon-default-selectedForegroundColor: #4856cb;
1326
+ --gse-ui-checkbox-icon-hover-foregroundColor: #3742a2;
1327
+ --gse-ui-checkbox-icon-active-foregroundColor: #252e78;
1328
+ --gse-ui-checkbox-icon-error-foregroundColor: #e22245;
1329
+ --gse-ui-checkbox-icon-height: 16px;
1330
+ --gse-ui-checkbox-icon-width: 16px;
1331
+ --gse-ui-checkbox-label-foregroundColor: #1b2c48;
1332
+ --gse-ui-checkbox-label-text: 400 16px/18px Roboto;
1333
+ --gse-ui-checkbox-helper-padding: 4px 0 0 24px;
1334
+ --gse-ui-checkbox-helper-gap: 8px;
1335
+ --gse-ui-checkbox-gap: 8px;
1336
+ --gse-ui-checkbox-disabled-opacity: 0.5;
1337
+ --gse-ui-checkbox-focus-border: 2px solid #7b88f7;
1338
+ --gse-ui-checkbox-focus-borderRadius: 5.5px;
1339
+ --gse-ui-checkbox-focus-borderRadiusSmall: 2px;
1340
+ --gse-ui-checkbox-focus-offset: 1px;
1341
+ --gse-ui-checkbox-group-gap: 8px;
1342
+ --gse-ui-menu-option-padding: 8px 12px;
1343
+ --gse-ui-menu-option-gap: 8px;
1344
+ --gse-ui-menu-option-height: 32px;
1345
+ --gse-ui-menu-option-startIcon-height: 16px;
1346
+ --gse-ui-menu-option-startIcon-width: 16px;
1347
+ --gse-ui-menu-option-label-default-text: 400 12px/16px "Noto Sans";
1348
+ --gse-ui-menu-option-label-active-text: 700 12px/18px "Noto Sans";
1349
+ --gse-ui-menu-option-label-foregroundColor: #1b2c48;
1350
+ --gse-ui-menu-option-shortcut-text: 400 14px/20px "Noto Sans";
1351
+ --gse-ui-menu-option-shortcut-default-foregroundColor: #626e84;
1352
+ --gse-ui-menu-option-shortcut-selected-foregroundColor: #1b2c48;
1353
+ --gse-ui-menu-option-hover-backgroundColor: #eff0fe;
1354
+ --gse-ui-menu-option-selected-backgroundColor: #ced2fc;
1355
+ --gse-ui-menu-option-disabled-opacity: 0.5;
1356
+ --gse-ui-menu-option-checkbox-unchecked-default-foregroundColor: #767c8d;
1357
+ --gse-ui-menu-option-checkbox-unchecked-hover-foregroundColor: #3742a2;
1358
+ --gse-ui-menu-option-checkbox-unchecked-selected-foregroundColor: #252e78;
1359
+ --gse-ui-menu-option-checkbox-checked-default-foregroundColor: #4856cb;
1360
+ --gse-ui-menu-option-checkbox-checked-hover-foregroundColor: #3742a2;
1361
+ --gse-ui-menu-option-checkbox-checked-selected-foregroundColor: #252e78;
1362
+ --gse-ui-menu-option-parentIcon-width: 16px;
1363
+ --gse-ui-menu-option-parentIcon-height: 16px;
1364
+ --gse-ui-menu-option-parentIcon-default-foregroundColor: #3e5374;
1365
+ --gse-ui-menu-option-parentIcon-hover-foregroundColor: #23395d;
1366
+ --gse-ui-menu-option-parentIcon-selected-foregroundColor: #1b2c48;
1367
+ --gse-ui-menu-option-focus-border: 1px solid #7b88f7;
1368
+ --gse-ui-menu-option-default-backgroundColor: #ffffff;
1369
+ --gse-ui-menu-maxHeight: 344px;
1370
+ --gse-ui-menu-borderRadius: 4px;
1371
+ --gse-ui-menu-border: 1px solid #1b2c48;
1372
+ --gse-ui-menu-boxShadow: 0 0 4px 1px rgba(35,57,92,0.1);
1373
+ --gse-ui-menu-padding: 8px 0px;
1374
+ --gse-ui-menu-backgroundColor: #ffffff;
1375
+ --gse-ui-menu-scrollbar-foregroundColor: #3e5374;
1376
+ --gse-ui-menu-divider-backgroundColor: #c6c8ce; /* Color for the divider that separates the day picker and the time picker inside the calendar menu. */
1377
+ --gse-ui-menu-divider-margin: 4px 0 8px 0;
1378
+ --gse-ui-menu-divider-height: 1px;
1379
+ --gse-ui-menu-groupedMenu-title-padding: 8px 12px 4px;
1380
+ --gse-ui-menu-groupedMenu-title-height: 32px;
1381
+ --gse-ui-menu-groupedMenu-title-foregroundColor: #626e84;
1382
+ --gse-ui-menu-groupedMenu-title-text: 600 12px/16px Urbanist;
1383
+ --gse-ui-menu-groupedMenu-padding: 8px 8px;
1384
+ --gse-ui-menu-groupedMenu-divider-padding: 4px 0px 8px;
1385
+ --gse-ui-menu-groupedMenu-divider-height: 13px;
1386
+ --gse-ui-menu-groupedMenu-subtext-foregroundColor: #626e84;
1387
+ --gse-ui-dropdown-menu-emptyState-header-text: 700 12px/18px Roboto;
1388
+ --gse-ui-dropdown-menu-emptyState-header-foregroundColor: #23395d;
1389
+ --gse-ui-dropdown-menu-emptyState-subheader-text: 400 12px/18px Roboto;
1390
+ --gse-ui-dropdown-menu-emptyState-subheader-foregroundColor: #626e84;
1391
+ --gse-ui-dropdown-gap: 4px;
1392
+ --gse-ui-calendarMenu-day-range-width: 16px;
1393
+ --gse-ui-calendarMenu-day-range-height: 32px;
1394
+ --gse-ui-calendarMenu-day-input-height: 32px;
1395
+ --gse-ui-calendarMenu-day-input-width: 160px;
1396
+ --gse-ui-calendarMenu-day-headerText: 700 12px/16px Roboto;
1397
+ --gse-ui-calendarMenu-day-date-size: 32px;
1398
+ --gse-ui-calendarMenu-height: 234px;
1399
+ --gse-ui-calendarMenu-width: 250px;
1400
+ --gse-ui-calendarMenu-month-default-foregroundColor: #1b2c48;
1401
+ --gse-ui-calendarMenu-month-single-header-textWidth: 154px;
1402
+ --gse-ui-calendarMenu-month-single-header-width: 218px;
1403
+ --gse-ui-calendarMenu-month-single-header-height: 44px;
1404
+ --gse-ui-calendarMenu-month-monthCell-width: 66px;
1405
+ --gse-ui-calendarMenu-month-monthCell-height: 49px;
1406
+ --gse-ui-calendarMenu-month-headerText: 400 16px/24px "Noto Sans";
1407
+ --gse-ui-calendarMenu-month-range-vertical-width: 272px;
1408
+ --gse-ui-calendarMenu-month-range-vertical-height: 652px;
1409
+ --gse-ui-calendarMenu-month-defaultText: 400 12px/16px Roboto;
1410
+ --gse-ui-calendarMenu-month-currentText: 700 12px/16px Roboto;
1411
+ --gse-ui-calendarMenu-month-focusBorderRadius: 20px;
1412
+ --gse-ui-calendarMenu-month-borderRadius: 16px;
1413
+ --gse-ui-calendarMenu-month-calendarButton-focusBorderRadius: 2px;
1414
+ --gse-ui-calendarMenu-month-selected-foregroundColor: #ffffff;
1415
+ --gse-ui-calendarMenu-month-selected-backgroundColor: #4856cb;
1416
+ --gse-ui-calendarMenu-month-selected-hoverBackgroundColor: #3742a2;
1417
+ --gse-ui-calendarMenu-month-hover-backgroundColor: #dee1fd;
1418
+ --gse-ui-calendarMenu-dateBody-padding: 18px 24px;
1419
+ --gse-ui-calendarMenu-dateBody-gap: 8px;
1420
+ --gse-ui-calendarMenu-header-backgroundColor: #4856cb;
1421
+ --gse-ui-calendarMenu-header-foregroundColor: #ffffff;
1422
+ --gse-ui-calendarMenu-header-gap: 8px;
1423
+ --gse-ui-calendarMenu-header-padding: 10px 16px;
1424
+ --gse-ui-calendarMenu-header-arrow-padding: 8px;
1425
+ --gse-ui-calendarMenu-backgroundColor: #ffffff;
1426
+ --gse-ui-calendarMenu-date-defaultText: 400 12px/16px Roboto;
1427
+ --gse-ui-calendarMenu-date-currentText: 700 12px/16px Roboto;
1428
+ --gse-ui-calendarMenu-date-selected-foregroundColor: #ffffff;
1429
+ --gse-ui-calendarMenu-date-selected-backgroundColor: #4856cb;
1430
+ --gse-ui-calendarMenu-date-selected-hoverBackgroundColor: #3742a2;
1431
+ --gse-ui-calendarMenu-date-hover-backgroundColor: #dee1fd;
1432
+ --gse-ui-calendarMenu-date-range-backgroundColor: #dee1fd;
1433
+ --gse-ui-calendarMenu-date-default-foregroundColor: #1b2c48;
1434
+ --gse-ui-calendarMenu-single-header-borderRadius: 8px 8px 0 0;
1435
+ --gse-ui-calendarMenu-single-body-borderRadius: 0 0 8px 8px;
1436
+ --gse-ui-calendarMenu-range-header-firstMonth-borderRadius: 8px 0 0 0;
1437
+ --gse-ui-calendarMenu-range-header-secondMonth-borderRadius: 0 8px 0 0;
1438
+ --gse-ui-calendarMenu-range-body-firstMonth-borderRadius: 0 0 0 8px;
1439
+ --gse-ui-calendarMenu-range-body-secondMonth-borderRadius: 0 0 8px 0;
1440
+ --gse-ui-calendarMenu-range-date-endDate-borderRadius: 0 16px 16px 0;
1441
+ --gse-ui-calendarMenu-range-date-startDate-borderRadius: 16px 0 0 16px;
1442
+ --gse-ui-calendarMenu-disabled-opacity: 0.5;
1443
+ --gse-ui-calendarMenu-monthBody-padding: 18px 24px;
1444
+ --gse-ui-calendarMenu-monthBody-gap: 2px;
1445
+ --gse-ui-calendarMenu-boxShadow: 0px 2px 4px 1px #23395c1a;
1446
+ --gse-ui-datePicker-range-gap: 24px;
1447
+ --gse-ui-datePicker-startEndInput-gap: 8px;
1448
+ --gse-ui-datePicker-dateTyped-gap: 10px;
1449
+ --gse-ui-datePicker-dateTyped-backgroundColor: #dee1fd;
1450
+ --gse-ui-datePicker-disabled-opacity: 0.5;
1451
+ --gse-ui-datePicker-focusCalendar-gap: 3px;
1452
+ --gse-ui-datePicker-iconHover: #3742a2;
1453
+ --gse-ui-datePicker-iconFocus: #3742a2;
1454
+ --gse-ui-toggle-label: 400 12px/16px Roboto;
1455
+ --gse-ui-toggle-gap: 8px;
1456
+ --gse-ui-toggle-padding: 8px;
1457
+ --gse-ui-toggle-track-width: 32px;
1458
+ --gse-ui-toggle-track-height: 16px;
1459
+ --gse-ui-toggle-track-enabled-off-backgroundColor: #c6c8ce;
1460
+ --gse-ui-toggle-track-enabled-on-backgroundColor: #3742a2;
1461
+ --gse-ui-toggle-track-disabled-off-backgroundColor: #c6c8ce;
1462
+ --gse-ui-toggle-track-disabled-on-backgroundColor: #3742a2;
1463
+ --gse-ui-toggle-track-error-off-backgroundColor: #f3a7b5;
1464
+ --gse-ui-toggle-track-error-on-backgroundColor: #e22245;
1465
+ --gse-ui-toggle-track-hover-off-backgroundColor: #9ca6f9;
1466
+ --gse-ui-toggle-track-hover-on-backgroundColor: #252e78;
1467
+ --gse-ui-toggle-track-borderRadius: 8px;
1468
+ --gse-ui-toggle-handle-width: 16px;
1469
+ --gse-ui-toggle-handle-height: 16px;
1470
+ --gse-ui-toggle-handle-hover-border: 2px solid #4856cb;
1471
+ --gse-ui-toggle-handle-enabled-border: 2px solid #4856cb;
1472
+ --gse-ui-toggle-handle-disabled-border: 2px solid #4856cb;
1473
+ --gse-ui-toggle-handle-error-border: 2px solid #e22245;
1474
+ --gse-ui-toggle-handle-backgroundColor: #ffffff;
1475
+ --gse-ui-toggle-handle-foregroundColor: #4856cb;
1476
+ --gse-ui-toggle-handle-borderRadius: 100%;
1477
+ --gse-ui-toggle-disabled-opacity: 0.5;
1478
+ --gse-ui-toggle-focus-border: 2px solid #7b88f7;
1479
+ --gse-ui-toggle-focus-borderRadius: 16px;
1480
+ --gse-ui-toggle-focus-offset: 1px;
1481
+ --gse-ui-timePicker-clock-padding: 3px;
1482
+ --gse-ui-timePicker-clockStates-defaultColor: #626e84;
1483
+ --gse-ui-timePicker-clockStates-hoverColor: #3742a2;
1484
+ --gse-ui-timePicker-clockStates-activeColor: #4856cb;
1485
+ --gse-ui-timePicker-clockStates-disabledColor: lch(46 13.8 267 / 0.5);
1486
+ --gse-ui-timePicker-focusClock-border: 2px solid #7b88f7;
1487
+ --gse-ui-timePicker-focusClock-borderRadius: 2px;
1488
+ --gse-ui-timePicker-focusAmpm-border: 2px solid #7b88f7;
1489
+ --gse-ui-timePicker-focusAmpm-borderRadius: 2px;
1490
+ --gse-ui-timePicker-focusTime-border: 3px solid #7b88f7;
1491
+ --gse-ui-timePicker-focusTime-borderRadius: 4px;
1492
+ --gse-ui-timePicker-ampm-padding: 3px;
1493
+ --gse-ui-colorPicker-label-requiredSymbolColor: #e22245;
1494
+ --gse-ui-colorPicker-label-textColor: #1b2c48;
1495
+ --gse-ui-colorPicker-label-text: 400 12px/18px Roboto;
1496
+ --gse-ui-colorPicker-inputContainer-backgroundColor: #ffffff;
1497
+ --gse-ui-colorPicker-inputContainer-border-defaultColor: #a3a7b0;
1498
+ --gse-ui-colorPicker-inputContainer-border-hoverColor: #3742a2;
1499
+ --gse-ui-colorPicker-inputContainer-border-activeColor: #252e78;
1500
+ --gse-ui-colorPicker-inputContainer-border-errorColor: #e22245;
1501
+ --gse-ui-colorPicker-input-containerSizing: 32px;
1502
+ --gse-ui-colorPicker-input-swatchSizing: 24px;
1503
+ --gse-ui-colorPicker-input-swatchBorderRadius: 2px;
1504
+ --gse-ui-colorPicker-gap: 8px;
1505
+ --gse-ui-slider-handle-width: 20px;
1506
+ --gse-ui-slider-handle-height: 20px;
1507
+ --gse-ui-slider-handle-default-backgroundColor: #4856cb;
1508
+ --gse-ui-slider-handle-hover-backgroundColor: #3742a2;
1509
+ --gse-ui-slider-handle-active-backgroundColor: #252e78;
1510
+ --gse-ui-slider-handle-disabled-backgroundColor: #4856cb;
1511
+ --gse-ui-slider-handle-borderRadius: 100%;
1512
+ --gse-ui-slider-disabled-opacity: 0.5;
1513
+ --gse-ui-slider-label-text: 600 14px/20px Roboto;
1514
+ --gse-ui-slider-label-foregroundColor: #1b2c48;
1515
+ --gse-ui-slider-bar-selected-backgroundColor: #4856cb;
1516
+ --gse-ui-slider-bar-default-backgroundColor: #c6c8ce;
1517
+ --gse-ui-slider-bar-height: 4px;
1518
+ --gse-ui-slider-gap: 16px;
1519
+ --gse-ui-slider-focusRing-borderRadius: 100%;
1520
+ --gse-ui-slider-track-borderRadius: 4px;
1521
+ --gse-ui-flyoutMenu-anchor-height: 8px;
1522
+ --gse-ui-flyoutMenu-anchor-width: 76px;
1523
+ --gse-ui-flyoutMenu-width: 208px;
1524
+ --gse-ui-flyoutMenu-borderRadius: 4px;
1525
+ --gse-ui-flyoutMenu-padding: 8px 0px;
1526
+ --gse-ui-flyoutMenu-parenting-gap: 8px;
1527
+ --gse-ui-flyoutMenu-backgroundColor: #ffffff;
1528
+ --gse-ui-flyoutMenu-arrow-borderRadius: 4px;
1529
+ --gse-ui-phoneInput-dropdown-hover-backgroundColor: #eff0fe;
1530
+ --gse-ui-phoneInput-dropdown-active-backgroundColor: #ced2fc;
1531
+ --gse-ui-phoneInput-dropdown-foregroundColor: #626e84;
1532
+ --gse-ui-phoneInput-dropdown-flag-height: 12px;
1533
+ --gse-ui-phoneInput-dropdown-flag-width: 16px;
1534
+ --gse-ui-phoneInput-dropdown-height: 32px;
1535
+ --gse-ui-phoneInput-dropdown-menu-minWidth: 230px;
1536
+ --gse-ui-phoneInput-dropdown-icon-width: 16px;
1537
+ --gse-ui-phoneInput-dropdown-icon-height: 16px;
1538
+ --gse-ui-phoneInput-dropdown-padding: 0 8px 0 12px;
1539
+ --gse-ui-phoneInput-dropdown-disabled-padding: 0 4px 0 12px;
1540
+ --gse-ui-phoneInput-dropdown-gap: 4px;
1541
+ --gse-ui-phoneInput-countryCode-foregroundColor: #626e84;
1542
+ --gse-ui-phoneInput-minWidth: 230px;
1543
+ --gse-ui-contextMenu-button-default: 32px;
1544
+ --gse-ui-contextMenu-button-compact: 24px;
1545
+ --gse-ui-contextMenu-borderRadius: 4px;
1546
+ --gse-ui-contextMenu-menu-maxHeight: 344px;
1547
+ --gse-ui-contextMenu-menu-width: 220px;
1548
+ --gse-ui-monthPicker-calendarStates-defaultColor: #626e84;
1549
+ --gse-ui-monthPicker-calendarStates-hoverColor: #3742a2;
1550
+ --gse-ui-monthPicker-calendarStates-activeColor: #4856cb;
1551
+ --gse-ui-monthPicker-calendarStates-disabledColor: lch(46 13.8 267 / 0.5);
1552
+ --gse-ui-monthPicker-calendarStates-focus-border: 2px solid #7b88f7;
1553
+ --gse-ui-selectorCard-ilustrativeIcon-foregroundColor: #3e5374;
1554
+ --gse-ui-selectorCard-text-foregroundColor: #1b2c48;
1555
+ --gse-ui-selectorCard-default-backgroundColor: #ffffff;
1556
+ --gse-ui-selectorCard-default-selectedIndicator-selected-foregroundColor: #4856cb;
1557
+ --gse-ui-selectorCard-default-selectedIndicator-unselected-foregroundColor: #767c8d;
1558
+ --gse-ui-selectorCard-hover-backgroundColor: #eff0fe;
1559
+ --gse-ui-selectorCard-hover-selectedIndicator-foregroundColor: #3742a2;
1560
+ --gse-ui-selectorCard-active-backgroundColor: #ced2fc;
1561
+ --gse-ui-selectorCard-active-selectedIndicator-foregroundColor: #252e78;
1562
+ --gse-ui-selectorCard-error-backgroundColor: #fef3f3;
1563
+ --gse-ui-selectorCard-error-selectedIndicator-foregroundColor: #e22245;
1564
+ --gse-ui-selectorCard-error-border: 1px solid #e22245;
1565
+ --gse-ui-selectorCard-simple-minWidth: 108px;
1566
+ --gse-ui-selectorCard-simple-maxWidth: 316px;
1567
+ --gse-ui-selectorCard-simple-minHeight: 76px;
1568
+ --gse-ui-selectorCard-simple-maxHeight: 116px;
1569
+ --gse-ui-selectorCard-simple-padding: 12px;
1570
+ --gse-ui-selectorCard-simple-gap: 8px;
1571
+ --gse-ui-selectorCard-simple-borderRadius: 8px;
1572
+ --gse-ui-selectorCard-simple-label: 700 14px/24px Urbanist;
1573
+ --gse-ui-selectorCard-descriptive-minWidth: 216px;
1574
+ --gse-ui-selectorCard-descriptive-maxWidth: 316px;
1575
+ --gse-ui-selectorCard-descriptive-minHeight: 118px;
1576
+ --gse-ui-selectorCard-descriptive-maxHeight: 220px;
1577
+ --gse-ui-selectorCard-descriptive-padding: 16px;
1578
+ --gse-ui-selectorCard-descriptive-gap: 8px;
1579
+ --gse-ui-selectorCard-descriptive-text-gap: 4px;
1580
+ --gse-ui-selectorCard-descriptive-badge-marginTop: 8px;
1581
+ --gse-ui-selectorCard-descriptive-borderRadius: 16px;
1582
+ --gse-ui-selectorCard-descriptive-label: 700 16px/24px Urbanist;
1583
+ --gse-ui-selectorCard-descriptive-description: 400 12px/18px "Noto Sans";
1584
+ --gse-ui-selectorCard-unselected-border: 1px solid #c6c8ce;
1585
+ --gse-ui-selectorCard-selected-border: 1px solid #4856cb;
1586
+ --gse-ui-selectorCard-disabled-opacity: 0.5;
1587
+ --gse-ui-selectorCard-disabled-backgroundColor: #ffffff;
1588
+ --gse-ui-selectorCard-disabled-selectedIndicator-selected-foregroundColor: #4856cb;
1589
+ --gse-ui-selectorCard-disabled-selectedIndicator-unselected-foregroundColor: #767c8d;
1590
+ --gse-ui-search-counter-default-foregroundColor: #626e84;
1591
+ --gse-ui-search-counter-hover-foregroundColor: #4856cb;
1592
+ --gse-ui-search-counter-divider-border: 1px solid #a3a7b0;
1593
+ --gse-ui-search-counter-divider-foregroundColor: #a3a7b0;
1594
+ --gse-ui-search-counter-text: 400 12px/18px Roboto;
1595
+ --gse-ui-search-counter-gap: 4px;
1596
+ --gse-ui-search-counter-icon-height: 16px;
1597
+ --gse-ui-search-counter-icon-width: 16px;
1598
+ --gse-ui-search-width: 320px;
1599
+ --gse-ui-search-match-firstLevel-backgroundColor: #b5e2e8;
1600
+ --gse-ui-search-match-firstLevel-foregroundColour: #1b2c48;
1601
+ --gse-ui-search-match-subsequentLevel-foregroundColour: #1b2c48;
1602
+ --gse-ui-search-match-subsequentLevel-backgroundColor: #daf0f4;
1603
+ --gse-ui-simpleFilter-gap: 16px;
1604
+ --gse-ui-dataTableItems-header-text: 700 12px/16px Roboto;
1605
+ --gse-ui-dataTableItems-header-multiselect-default-height: 40px;
1606
+ --gse-ui-dataTableItems-header-multiselect-default-width: 41px;
1607
+ --gse-ui-dataTableItems-header-multiselect-default-selectedBar-height: 3px;
1608
+ --gse-ui-dataTableItems-header-multiselect-default-selectedBar-width: 41px;
1609
+ --gse-ui-dataTableItems-header-multiselect-compact-height: 32px;
1610
+ --gse-ui-dataTableItems-header-multiselect-compact-width: 64px;
1611
+ --gse-ui-dataTableItems-header-multiselect-compact-selectedBar-height: 3px;
1612
+ --gse-ui-dataTableItems-header-multiselect-compact-selectedBar-width: 64px;
1613
+ --gse-ui-dataTableItems-header-selectedIndicatorColor: #9ca6f9;
1614
+ --gse-ui-dataTableItems-header-defaultBackgroundColor: #ffffff;
1615
+ --gse-ui-dataTableItems-header-fixedBackgroundColor: #dee1fd;
1616
+ --gse-ui-dataTableItems-header-foregroundColor: #1b2c48;
1617
+ --gse-ui-dataTableItems-header-sort-foregroundColor: #626e84;
1618
+ --gse-ui-dataTableItems-header-default-height: 40px;
1619
+ --gse-ui-dataTableItems-header-default-width: 229px;
1620
+ --gse-ui-dataTableItems-header-compact-height: 32px;
1621
+ --gse-ui-dataTableItems-header-compact-width: 229px;
1622
+ --gse-ui-dataTableItems-header-padding: 0 12px;
1623
+ --gse-ui-dataTableItems-header-gap: 8px;
1624
+ --gse-ui-dataTableItems-header-selectedBar-height: 3px;
1625
+ --gse-ui-dataTableItems-header-selectedBar-width: 229px;
1626
+ --gse-ui-dataTableItems-divider: 1px solid #e8ebf7;
1627
+ --gse-ui-dataTableItems-scrollbar-borderRadius: 45px;
1628
+ --gse-ui-dataTableItems-scrollbar-foregroundColor: #626e84;
1629
+ --gse-ui-dataTableItems-cell-altBackgroundColor: #f3f5fb;
1630
+ --gse-ui-dataTableItems-cell-defaultBackgroundColor: #ffffff;
1631
+ --gse-ui-dataTableItems-cell-hoverBackgroundColor: #dee1fd;
1632
+ --gse-ui-dataTableItems-cell-foregroundColor: #1b2c48;
1633
+ --gse-ui-dataTableItems-cell-chevron-foregroundColor: #626e84;
1634
+ --gse-ui-dataTableItems-cell-multiselect-default-height: 40px;
1635
+ --gse-ui-dataTableItems-cell-multiselect-compact-height: 32px;
1636
+ --gse-ui-dataTableItems-cell-multiselect-padding: 0 16px;
1637
+ --gse-ui-dataTableItems-cell-multiselect-gap: 8px;
1638
+ --gse-ui-dataTableItems-cell-multiselect-checkboxCell-default-height: 40px;
1639
+ --gse-ui-dataTableItems-cell-multiselect-checkboxCell-default-width: 41px;
1640
+ --gse-ui-dataTableItems-cell-multiselect-checkboxCell-compact-height: 32px;
1641
+ --gse-ui-dataTableItems-cell-multiselect-checkboxCell-compact-width: 41px;
1642
+ --gse-ui-dataTableItems-cell-default-height: 40px;
1643
+ --gse-ui-dataTableItems-cell-default-width: 229px;
1644
+ --gse-ui-dataTableItems-cell-compact-height: 32px;
1645
+ --gse-ui-dataTableItems-cell-compact-width: 229px;
1646
+ --gse-ui-dataTableItems-cell-padding: 0 12px;
1647
+ --gse-ui-dataTableItems-cell-gap: 8px;
1648
+ --gse-ui-dataTableItems-cell-icon-foregroundColor: #1b2c48;
1649
+ --gse-ui-dataTableItems-cell-text: 400 12px/16px Roboto;
1650
+ --gse-ui-dataTableItems-cell-tablePagination-width: 727px;
1651
+ --gse-ui-dataTableItems-cell-tablePagination-height: 56px;
1652
+ --gse-ui-dataTableItems-cell-contextMenu-default-height: 40px;
1653
+ --gse-ui-dataTableItems-cell-contextMenu-default-width: 41px;
1654
+ --gse-ui-dataTableItems-cell-contextMenu-compact-height: 32px;
1655
+ --gse-ui-dataTableItems-cell-contextMenu-compact-width: 41px;
1656
+ --gse-ui-dataTableItems-editColumn-editColumnItem-gap: 8px;
1657
+ --gse-ui-dataTableItems-editColumn-editColumnItem-foregroundColor: #3e5374;
1658
+ --gse-ui-dataTableItems-editColumn-editColumnItem-height: 18px;
1659
+ --gse-ui-dataTableItems-editColumn-editColumnContent-gap: 10px;
1660
+ --gse-ui-dataTableItems-editColumn-editColumnContent-padding: 8px 0;
1661
+ --gse-ui-dataTableItems-tableToolbar-tableToolbarGroup-gap: 4px;
1662
+ --gse-ui-dataTableItems-tableToolbar-gap: 4px;
1663
+ --gse-ui-dataTableItems-tableToolbar-dividerColor: #c6ceec;
1664
+ --gse-ui-dataTableItems-tableToolbar-divider-width: 1px;
1665
+ --gse-ui-dataTableItems-tableToolbar-divider-height: 32px;
1666
+ --gse-ui-dataTableItems-tableToolbar-height: 32px;
1667
+ --gse-ui-dataTableItems-tablePagination-recordsetControls-gap: 10px;
1668
+ --gse-ui-dataTableItems-tablePagination-padding: 12px;
1669
+ --gse-ui-dataTableItems-tablePagination-divider: 1px solid #c6c8ce;
1670
+ --gse-ui-dataTableItems-tablePagination-defaultText: 400 12px/16px Roboto;
1671
+ --gse-ui-dataTableItems-tablePagination-currentResultText: 700 12px/16px Roboto;
1672
+ --gse-ui-dataTableItems-tablePagination-defaultBackgroundColor: #ffffff;
1673
+ --gse-ui-dataTableItems-tablePagination-foregroundColor: #1b2c48;
1674
+ --gse-ui-dataTableItems-tablePagination-countDisplay-gap: 4px;
1675
+ --gse-ui-avatar-groupShapes-gap: -4px;
1676
+ --gse-ui-avatar-large-size: 96px;
1677
+ --gse-ui-avatar-large-badge-size: 24px;
1678
+ --gse-ui-avatar-large-focusRing-size: 98px;
1679
+ --gse-ui-avatar-large-content-size: 84px;
1680
+ --gse-ui-avatar-large-initials: 600 36px/1 Urbanist;
1681
+ --gse-ui-avatar-large-presenceRing-width: 4px;
1682
+ --gse-ui-avatar-large-ucIntegration-size: 32px;
1683
+ --gse-ui-avatar-presenceRing-available: linear-gradient(135deg, #09b581 0%, #9de1cd 100%);
1684
+ --gse-ui-avatar-presenceRing-busy: linear-gradient(135deg, #e22245 0%, #f3a7b5 100%);
1685
+ --gse-ui-avatar-presenceRing-away: linear-gradient(135deg, #f8c73e 0%, #fce9b2 100%);
1686
+ --gse-ui-avatar-presenceRing-onQueue: linear-gradient(135deg, #4856cb 0%, #9ca6f9 100%);
1687
+ --gse-ui-avatar-presenceRing-offline: linear-gradient(135deg, #767c8d 0%, #a3a7b0 100%);
1688
+ --gse-ui-avatar-presenceRing-outOfOffice: linear-gradient(135deg, #b74ba4 0%, #f5bfeb 100%);
1689
+ --gse-ui-avatar-medium-size: 48px;
1690
+ --gse-ui-avatar-medium-badge-size: 16px;
1691
+ --gse-ui-avatar-medium-focusRing-size: 50px;
1692
+ --gse-ui-avatar-medium-content-size: 40px;
1693
+ --gse-ui-avatar-medium-initials: 600 18px/1 Urbanist;
1694
+ --gse-ui-avatar-medium-presenceRing-width: 3px;
1695
+ --gse-ui-avatar-small-size: 32px;
1696
+ --gse-ui-avatar-small-badge-size: 8px;
1697
+ --gse-ui-avatar-small-focusRing-size: 34px;
1698
+ --gse-ui-avatar-small-content-size: 26px;
1699
+ --gse-ui-avatar-small-initials: 600 12px/1 Urbanist;
1700
+ --gse-ui-avatar-small-substract-size: 30px;
1701
+ --gse-ui-avatar-small-presenceRing-width: 2px;
1702
+ --gse-ui-avatar-xsmall-size: 24px;
1703
+ --gse-ui-avatar-xsmall-focusRing-size: 26px;
1704
+ --gse-ui-avatar-xsmall-content-size: 18px;
1705
+ --gse-ui-avatar-xsmall-initials: 600 8px/1 Urbanist;
1706
+ --gse-ui-avatar-xsmall-presenceRing-width: 2px;
1707
+ --gse-ui-avatar-badge-available-color: #09b581;
1708
+ --gse-ui-avatar-badge-busy-color: #e22245;
1709
+ --gse-ui-avatar-badge-busy-icon-margin: 2px;
1710
+ --gse-ui-avatar-badge-away: #f8c73e;
1711
+ --gse-ui-avatar-badge-onQueue-color: #4856cb;
1712
+ --gse-ui-avatar-badge-offline-color: #626e84;
1713
+ --gse-ui-avatar-badge-outOfOffice: #b74ba4;
1714
+ --gse-ui-avatar-badge-notification-color: #fe624d;
1715
+ --gse-ui-avatar-badge-foregroundDefault-color: #ffffff;
1716
+ --gse-ui-avatar-badge-foregroundDark-color: #3e5374;
1717
+ --gse-ui-avatar-badge-notifications-icon-margin: 4px;
1718
+ --gse-ui-avatar-badge-queue-icon-margin: 4px;
1719
+ --gse-ui-avatar-media-initialsBackground-default: #115d71;
1720
+ --gse-ui-avatar-media-initialsBackground-accent1: #7785b8;
1721
+ --gse-ui-avatar-media-initialsBackground-accent2: #90d3dd;
1722
+ --gse-ui-avatar-media-initialsBackground-accent3: #0c6d7e;
1723
+ --gse-ui-avatar-media-initialsBackground-accent4: #547688;
1724
+ --gse-ui-avatar-media-initialsBackground-accent5: #a5cae0;
1725
+ --gse-ui-avatar-media-initialsBackground-accent6: #b5bfe6;
1726
+ --gse-ui-avatar-media-initialsBackground-accent7: #a05195;
1727
+ --gse-ui-avatar-media-initialsBackground-accent8: #f95d6a;
1728
+ --gse-ui-avatar-media-initialsBackground-accent9: #fe8f85;
1729
+ --gse-ui-avatar-media-initialsBackground-accent10: #ffc650;
1730
+ --gse-ui-avatar-media-initialsBackground-accent11: #fe624d;
1731
+ --gse-ui-avatar-media-initialsBackground-accent12: #c44b3b;
1732
+ --gse-ui-avatar-media-initialsBackground-overflowCount: #626e84;
1733
+ --gse-ui-avatar-media-initialsBackground-add: #ced2fc;
1734
+ --gse-ui-avatar-media-initialsForeground-default: #1b2c48;
1735
+ --gse-ui-avatar-media-initialsForeground-inverse: #ffffff;
1736
+ --gse-ui-avatar-media-initialsForeground-add: #4856cb;
1737
+ --gse-ui-avatar-hoverModal-shroudColor: #0f1929;
1738
+ --gse-ui-avatar-hoverModal-foregroundColor: #ffffff;
1739
+ --gse-ui-avatar-hoverModal-opacity: 0.8;
1740
+ --gse-ui-avatar-content-borderRadius: 256px;
1741
+ --gse-ui-avatar-content-default-border: 1px solid #ffffff;
1742
+ --gse-ui-avatar-content-large-border: 2px solid #ffffff;
1743
+ --gse-ui-avatar-groupSet-gap: -2px;
1744
+ --gse-ui-avatar-focusRing-large-borderRadius: 96px;
1745
+ --gse-ui-avatar-focusRing-large-border: 3px solid #7b88f7;
1746
+ --gse-ui-avatar-focusRing-mediumSmall-borderRadius: 100px;
1747
+ --gse-ui-avatar-focusRing-medium-border: 3px solid #7b88f7;
1748
+ --gse-ui-avatar-focusRing-small-border: 2px solid #7b88f7;
1749
+ --gse-ui-avatar-focusRing-xsmall-border: 2px solid #7b88f7;
1750
+ --gse-ui-avatar-focus: #7b88f7;
1751
+ --gse-ui-avatar-addChangeImage-hoverModal-shroudSize: 84px;
1752
+ --gse-ui-avatar-addChangeImage-icon-size: 16px;
1753
+ --gse-ui-globalNav-sideMenu: linear-gradient(135deg, #09b581 0%, #9de1cd 100%);
1754
+ --gse-ui-globalNav-text: 700 12px/16px Roboto;
1755
+ --gse-ui-globalNav-toggle-onQueue-text: 600 12px/16px Roboto;
1756
+ --gse-ui-globalNav-toggle-gap: 16px;
1757
+ --gse-ui-globalNav-toggle-offQueue-text: 400 12px/16px Roboto;
1758
+ --gse-ui-globalNav-focus-border: 3px solid #7b88f7;
1759
+ --gse-ui-globalNav-menuOption-height: 32px;
1760
+ --gse-ui-globalNav-menuOption-width: 248px;
1761
+ --gse-ui-globalNav-menuOption-padding: 0px 12px;
1762
+ --gse-ui-globalNav-menuOption-gap: 8px;
1763
+ --gse-ui-globalNav-menuOption-default-foregroundColor: #ffffff;
1764
+ --gse-ui-globalNav-menuOption-hover-backgroundColor: #252e78;
1765
+ --gse-ui-globalNav-menuOption-hover-foregroundColor: #ffffff;
1766
+ --gse-ui-globalNav-menuOption-selected-backgroundColor: #4856cb;
1767
+ --gse-ui-globalNav-menuOption-selected-foregroundColor: #ffffff;
1768
+ --gse-ui-globalNav-menuOption-disabled-backgroundColor: #ffffff;
1769
+ --gse-ui-globalNav-menuOption-focus-borderRadius: 8px;
1770
+ --gse-ui-globalNav-menuOption-borderRadius: 4px;
1771
+ --gse-ui-globalNav-menuOption-disableOpacity: 0.5;
1772
+ --gse-ui-globalNav-menuOption-selectedPanel-backgroundColor: #3742a2;
1773
+ --gse-ui-globalNav-menuOption-selectedPanel-foregroundColor: #ffffff;
1774
+ --gse-ui-globalNav-menuOption-return-default-backgroundColor: #1c2463;
1775
+ --gse-ui-globalNav-menuOption-return-default-foregroundColor: #ffffff;
1776
+ --gse-ui-globalNav-menuOption-return-hover-backgroundColor: #141a4f;
1777
+ --gse-ui-globalNav-menuOption-return-hover-foregroundColor: #ffffff;
1778
+ --gse-ui-globalNav-menuOption-return-selected-backgroundColor: #4856cb;
1779
+ --gse-ui-globalNav-menuOption-return-selected-foregroundColor: #ffffff;
1780
+ --gse-ui-globalNav-menuOption-treeView-bar: #314669;
1781
+ --gse-ui-globalNav-buttonReturn-height: 48px;
1782
+ --gse-ui-globalNav-buttonReturn-width: 280px;
1783
+ --gse-ui-globalNav-buttonReturn-padding: 16px 28px;
1784
+ --gse-ui-globalNav-buttonReturn-gap: 12px;
1785
+ --gse-ui-globalNav-treeView-border: 2px solid #3e5374;
1786
+ --gse-ui-globalNav-treeView-gap: 8px;
1787
+ --gse-ui-globalNav-treeView-width: 224px;
1788
+ --gse-ui-globalNav-bar-padding: 8px 12px;
1789
+ --gse-ui-globalNav-topBar-items-gap: 16px;
1790
+ --gse-ui-globalNav-topBar-padding: 16px 24px;
1791
+ --gse-ui-globalNav-topBar-height: 64px;
1792
+ --gse-ui-globalNav-topBar-frame-backgroundColor: #ffffff;
1793
+ --gse-ui-globalNav-topBar-frame-stroke: #c6ceec;
1794
+ --gse-ui-globalNav-topBar-logo: #ff4f1f; /* Brand Orange from Spark 1.0 */
1795
+ --gse-ui-globalNav-topBar-menuButton-closed-default-foregroundColor: #4856cb;
1796
+ --gse-ui-globalNav-topBar-menuButton-closed-hover-backgroundColor: #3742a2;
1797
+ --gse-ui-globalNav-topBar-menuButton-closed-hover-foregroundColorStroke: #4856cb;
1798
+ --gse-ui-globalNav-topBar-menuButton-closed-hover-foregroundColor: #ffffff;
1799
+ --gse-ui-globalNav-topBar-menuButton-open-default-foregroundColorStroke: #ffffff;
1800
+ --gse-ui-globalNav-topBar-menuButton-open-hover-backgroundColor: #3742a2;
1801
+ --gse-ui-globalNav-topBar-menuButton-open-hover-foregroundColor: #ffffff;
1802
+ --gse-ui-globalNav-panel-panelTitle: #ffffff;
1803
+ --gse-ui-globalNav-panel-primary: linear-gradient(127deg, #23395d 3.19%, #3e5374 225.06%);
1804
+ --gse-ui-globalNav-panel-secondary: linear-gradient(358deg, #1b2b48 0.16%, #23395d 98.45%);
1805
+ --gse-ui-dataTableComposed-boxShadow: 0 0 4px 1px rgba(35,57,92,0.1);
1806
+ --gse-ui-dataTableComposed-width: 1440px;
1807
+ --gse-ui-focus: 2px solid #7b88f7;
1808
+ --gse-ui-tabs-item-height: 40px;
1809
+ --gse-ui-tabs-item-horizontal-fixedHeight: 40px;
1810
+ --gse-ui-tabs-item-horizontal-padding: 11px 12px 10px;
1811
+ --gse-ui-tabs-item-disableOpacity: 0.5;
1812
+ --gse-ui-tabs-item-itemText: 400 12px/18px Roboto;
1813
+ --gse-ui-tabs-item-itemTextColor: #1b2c48;
1814
+ --gse-ui-tabs-item-divider-horizontal-height: 1px;
1815
+ --gse-ui-tabs-item-divider-vertical-height: 40px;
1816
+ --gse-ui-tabs-item-divider-vertical-width: 1px;
1817
+ --gse-ui-tabs-item-divider-dividerColor: #c6c8ce;
1818
+ --gse-ui-tabs-item-indicator-vertical-height: 40px;
1819
+ --gse-ui-tabs-item-indicator-vertical-width: 2px;
1820
+ --gse-ui-tabs-item-indicator-horizontal-height: 2px;
1821
+ --gse-ui-tabs-item-indicator-hoverColor: #4856cb;
1822
+ --gse-ui-tabs-item-indicator-activeColor: #3742a2;
1823
+ --gse-ui-tabs-item-icon-iconColor: #1b2c48;
1824
+ --gse-ui-tabs-item-icon-size: 16px;
1825
+ --gse-ui-tabs-item-gap: 8px;
1826
+ --gse-ui-tabs-item-vertical-fixedHeight: 40px;
1827
+ --gse-ui-tabs-item-vertical-padding: 11px 9px 10px 12px;
1828
+ --gse-ui-tabs-item-focusRing-offset: 1px;
1829
+ --gse-ui-tabs-set-vertical-height: 360px;
1830
+ --gse-ui-tabs-set-vertical-width: 98px;
1831
+ --gse-ui-tabs-set-vertical-marginRight: 16px;
1832
+ --gse-ui-tabs-set-horizontal-width: 800px;
1833
+ --gse-ui-tabs-set-horizontal-height: 40px;
1834
+ --gse-ui-tabs-set-horizontal-marginBottom: 16px;
1835
+ --gse-ui-tabs-set-gap: -1px;
1836
+ --gse-ui-tabs-set-divider-horizontal-height: 1px;
1837
+ --gse-ui-tabs-set-divider-vertical-width: 1px;
1838
+ --gse-ui-tabs-focusRing-border: 3px solid #7b88f7;
1839
+ --gse-ui-tabs-focusRing-borderRadius: 4px;
1840
+ --gse-ui-advancedTabs-divider-dividerColor: #c6c8ce;
1841
+ --gse-ui-advancedTabs-item-padding: 11px 12px 10px;
1842
+ --gse-ui-advancedTabs-item-gap: 8px;
1843
+ --gse-ui-advancedTabs-item-focus-borderRadius: 8px;
1844
+ --gse-ui-advancedTabs-item-focus-border: 3px solid #7b88f7;
1845
+ --gse-ui-advancedTabs-item-focus-borderCopy: 4px;
1846
+ --gse-ui-advancedTabs-item-backgroundColor: #ffffff;
1847
+ --gse-ui-advancedTabs-item-borderRadius: 4px 4px 0 0;
1848
+ --gse-ui-advancedTabs-item-height: 48px;
1849
+ --gse-ui-advancedTabs-item-width: 151px;
1850
+ --gse-ui-advancedTabs-item-focusItem-height: 53px;
1851
+ --gse-ui-advancedTabs-item-focusItem-width: 126px;
1852
+ --gse-ui-advancedTabs-item-divider-bottom-height: 1px;
1853
+ --gse-ui-advancedTabs-item-divider-right-height: 32px;
1854
+ --gse-ui-advancedTabs-item-divider-right-width: 1px;
1855
+ --gse-ui-advancedTabs-item-text-color: #1b2c48;
1856
+ --gse-ui-advancedTabs-item-text-height: 9px;
1857
+ --gse-ui-advancedTabs-item-indicator-hoverColor: #4856cb;
1858
+ --gse-ui-advancedTabs-item-indicator-activeColor: #3742a2;
1859
+ --gse-ui-advancedTabs-item-indicator-height: 2px;
1860
+ --gse-ui-advancedTabs-item-icon-iconColor: #1b2c48;
1861
+ --gse-ui-advancedTabs-item-icon-size: 16px;
1862
+ --gse-ui-advancedTabs-item-menuButton-gap: 4px;
1863
+ --gse-ui-advancedTabs-item-menuButton-height: 45px;
1864
+ --gse-ui-advancedTabs-item-menuButton-width: 32px;
1865
+ --gse-ui-advancedTabs-item-menuButton-defaultColor: #626e84;
1866
+ --gse-ui-advancedTabs-item-menuButton-activeColor: #252e78;
1867
+ --gse-ui-advancedTabs-item-menuButton-focus-height: 53px;
1868
+ --gse-ui-advancedTabs-item-menuButton-focus-width: 40px;
1869
+ --gse-ui-advancedTabs-item-itemText: 400 12px/18px Roboto;
1870
+ --gse-ui-advancedTabs-button-add-height: 45px;
1871
+ --gse-ui-advancedTabs-button-arrow-height: 48px;
1872
+ --gse-ui-advancedTabs-set-backgroundColor: #f3f5fb;
1873
+ --gse-ui-advancedTabs-set-standard-width: 920px;
1874
+ --gse-ui-toast-closeButtonColor: #626e84;
1875
+ --gse-ui-toast-success-backgroundColor: #ffffff;
1876
+ --gse-ui-toast-success-foregroundColor: #1b2c48;
1877
+ --gse-ui-toast-success-iconColor: #09b581;
1878
+ --gse-ui-toast-warning-backgroundColor: #ffffff;
1879
+ --gse-ui-toast-warning-foregroundColor: #1b2c48;
1880
+ --gse-ui-toast-warning-iconColor: #f8c73e;
1881
+ --gse-ui-toast-info-backgroundColor: #ffffff;
1882
+ --gse-ui-toast-info-foregroundColor: #1b2c48;
1883
+ --gse-ui-toast-info-iconColor: #6e5ddb;
1884
+ --gse-ui-toast-action-backgroundColor: #ffffff;
1885
+ --gse-ui-toast-action-foregroundColor: #1b2c48;
1886
+ --gse-ui-toast-action-iconColor: #4856cb;
1887
+ --gse-ui-toast-error-backgroundColor: #ffffff;
1888
+ --gse-ui-toast-error-foregroundColor: #1b2c48;
1889
+ --gse-ui-toast-error-iconColor: #e22245;
1890
+ --gse-ui-toast-heading: 700 16px/24px Urbanist;
1891
+ --gse-ui-toast-text: 400 14px/20px "Noto Sans";
1892
+ --gse-ui-toast-margin: 16px;
1893
+ --gse-ui-toast-gap: 12px;
1894
+ --gse-ui-toast-gapText: 4px;
1895
+ --gse-ui-toast-gapButton: 16px;
1896
+ --gse-ui-toast-buttonBar-gap: 8px;
1897
+ --gse-ui-toast-borderRadius: 8px;
1898
+ --gse-ui-toast-boxShadow: 0 0 4px 1px rgba(35,57,92,0.1);
1899
+ --gse-ui-toast-icon: 24px;
1900
+ --gse-ui-toast-wrappingWidth: 320px;
1901
+ --gse-ui-toast-stacking-gap: 4px;
1902
+ --gse-ui-modal-closeButtonColor: #626e84;
1903
+ --gse-ui-modal-headerColor: #1b2c48;
1904
+ --gse-ui-modal-backgroundColor: #ffffff;
1905
+ --gse-ui-modal-shroudColor: rgb(13.7% 22.4% 36.5% / 0.8);
1906
+ --gse-ui-modal-header-gap: 12px;
1907
+ --gse-ui-modal-padding: 32px;
1908
+ --gse-ui-modal-gap: 16px;
1909
+ --gse-ui-modal-heading: 700 24px/32px Urbanist;
1910
+ --gse-ui-modal-icon: 32px;
1911
+ --gse-ui-modal-small-width: 420px;
1912
+ --gse-ui-modal-medium-width: 680px;
1913
+ --gse-ui-modal-large-width: 800px;
1914
+ --gse-ui-modal-buttonBar-gap: 8px;
1915
+ --gse-ui-modal-boxShadow: 0 0 8px 1px rgba(35,57,92,0.15);
1916
+ --gse-ui-modal-borderRadius: 16px;
1917
+ --gse-ui-modal-shroud-opacity: 0.8;
1918
+ --gse-ui-modal-dismissButton-paddingTop: 16px;
1919
+ --gse-ui-modal-dismissButton-paddingRight: 8px;
1920
+ --gse-ui-popover-borderRadius: 8px;
1921
+ --gse-ui-popover-boxShadow: 0 0 8px 1px rgba(35,57,92,0.15);
1922
+ --gse-ui-popover-closeButtonColor: #626e84;
1923
+ --gse-ui-popover-headerColor: #1b2c48;
1924
+ --gse-ui-popover-backgroundColor: #ffffff;
1925
+ --gse-ui-popover-gap: 16px;
1926
+ --gse-ui-popover-padding: 24px;
1927
+ --gse-ui-popover-buttonsBar-gap: 8px;
1928
+ --gse-ui-popover-header-gap: 4px;
1929
+ --gse-ui-popover-spacer-height: 16px;
1930
+ --gse-ui-popover-body-text: 400 14px/20px Roboto;
1931
+ --gse-ui-popover-title-text: 700 16px/24px Urbanist;
1932
+ --gse-ui-popover-anchor-width: 18px;
1933
+ --gse-ui-popover-anchor-height: 9px;
1934
+ --gse-ui-progressAndLoading-spinner-foreground: #4856cb;
1935
+ --gse-ui-progressAndLoading-spinner-base: #dee1fd;
1936
+ --gse-ui-progressAndLoading-spinner-large: 48px; /* keeping hard code as it cant have "px" */
1937
+ --gse-ui-progressAndLoading-spinner-small: 16px; /* keeping hard code as it cant have "px" */
1938
+ --gse-ui-progressAndLoading-spinner-text: 600 12px/18px "Noto Sans";
1939
+ --gse-ui-progressAndLoading-textColor: #1b2c48;
1940
+ --gse-ui-progressAndLoading-loadingState-large-header: 700 24px/32px Urbanist;
1941
+ --gse-ui-progressAndLoading-loadingState-large-subheader: 600 16px/24px Roboto;
1942
+ --gse-ui-progressAndLoading-loadingState-large-width: 600px;
1943
+ --gse-ui-progressAndLoading-loadingState-medium-header: 700 18px/27px Urbanist;
1944
+ --gse-ui-progressAndLoading-loadingState-medium-subheader: 600 14px/20px Roboto;
1945
+ --gse-ui-progressAndLoading-loadingState-medium-width: 400px;
1946
+ --gse-ui-progressAndLoading-loadingState-small-header: 700 16px/24px Urbanist;
1947
+ --gse-ui-progressAndLoading-loadingState-small-subheader: 600 12px/18px Roboto;
1948
+ --gse-ui-progressAndLoading-loadingState-small-width: 200px;
1949
+ --gse-ui-progressAndLoading-large-gap: 24px;
1950
+ --gse-ui-progressAndLoading-large-gapText: 4px;
1951
+ --gse-ui-progressAndLoading-pageLoading-gap: -3px;
1952
+ --gse-ui-progressAndLoading-medium-gap: 16px;
1953
+ --gse-ui-progressAndLoading-medium-gapText: 4px;
1954
+ --gse-ui-progressAndLoading-small-gap: 12px;
1955
+ --gse-ui-progressAndLoading-small-gapText: 4px;
1956
+ --gse-ui-progressAndLoading-blankState-large-header: 700 18px/27px Urbanist;
1957
+ --gse-ui-progressAndLoading-blankState-large-subheader: 600 14px/20px Roboto;
1958
+ --gse-ui-progressAndLoading-blankState-small-header: 700 14px/24px Urbanist;
1959
+ --gse-ui-progressAndLoading-blankState-small-subheader: 600 12px/18px Roboto;
1960
+ --gse-ui-progressAndLoading-largeBorder: 4px; /* Remove px because of SVG issues from COMUI-2226 */
1961
+ --gse-ui-progressAndLoading-smallBorder: 2px; /* Remove px because of SVG issues from COMUI-2226 */
1962
+ --gse-ui-progressAndLoading-thinBorder: 1px; /* Remove px because of SVG issues from COMUI-2226 */
1963
+ --gse-ui-blankState-small-width: 250px;
1964
+ --gse-ui-blankState-small-maxWidth: 569px;
1965
+ --gse-ui-blankState-large-minWidth: 570px;
1966
+ --gse-ui-blankState-icon-size-sm: 32px;
1967
+ --gse-ui-blankState-icon-size-lg: 42px;
1968
+ --gse-ui-blankState-padding: 32px 16px;
1969
+ --gse-ui-blankState-gapMessage: 4px;
1970
+ --gse-ui-blankState-gapMain: 12px;
1971
+ --gse-ui-blankState-gapContent: 24px;
1972
+ --gse-ui-blankState-iconColor: #767c8d;
1973
+ --gse-ui-blankState-foregroundColor: #1b2c48;
1974
+ --gse-ui-blankState-backgroundColor: #fbfcfe;
1975
+ --gse-ui-blankState-borderRadius: 8px;
1976
+ --gse-ui-accordion-header-height: 40px;
1977
+ --gse-ui-accordion-header-padding: 10px 16px 10px 16px;
1978
+ --gse-ui-accordion-header-chevronIcon: 16px;
1979
+ --gse-ui-accordion-header-gap: 8px;
1980
+ --gse-ui-accordion-header-default-foreground-labelColor: #1b2c48;
1981
+ --gse-ui-accordion-header-default-foreground-chevronIcon-closed: #626e84;
1982
+ --gse-ui-accordion-header-default-foreground-chevronIcon-open: #252e78;
1983
+ --gse-ui-accordion-header-default-foreground-chevronIcon-hover: #3742a2;
1984
+ --gse-ui-accordion-header-label-defaultText: 700 14px/20px Roboto;
1985
+ --gse-ui-accordion-reversedHeader-padding: 2px;
1986
+ --gse-ui-accordion-menuItem-height: 32px;
1987
+ --gse-ui-accordion-menuItem-padding: 0 12px 0 24px;
1988
+ --gse-ui-accordion-menuItem-startIcon: 16px;
1989
+ --gse-ui-accordion-menuItem-parentIcon: 16px;
1990
+ --gse-ui-accordion-menuItem-gap: 8px;
1991
+ --gse-ui-accordion-menuItem-default-foreground-startIconColor: #1b2c48;
1992
+ --gse-ui-accordion-menuItem-default-foreground-labelColor: #1b2c48;
1993
+ --gse-ui-accordion-menuItem-default-foreground-startShortcutColor: #626e84;
1994
+ --gse-ui-accordion-menuItem-default-foreground-parentIconColor: #626e84;
1995
+ --gse-ui-accordion-menuItem-hover-foreground-startIconColor: #1b2c48;
1996
+ --gse-ui-accordion-menuItem-hover-foreground-labelColor: #1b2c48;
1997
+ --gse-ui-accordion-menuItem-hover-foreground-startShortcutColor: #1b2c48;
1998
+ --gse-ui-accordion-menuItem-hover-foreground-parentIconColor: #1b2c48;
1999
+ --gse-ui-accordion-menuItem-hover-backgroundColor: #eff0fe;
2000
+ --gse-ui-accordion-menuItem-selected-foreground-startIconColor: #1b2c48;
2001
+ --gse-ui-accordion-menuItem-selected-foreground-labelColor: #1b2c48;
2002
+ --gse-ui-accordion-menuItem-selected-foreground-startShortcutColor: #1b2c48;
2003
+ --gse-ui-accordion-menuItem-selected-foreground-parentIconColor: #1b2c48;
2004
+ --gse-ui-accordion-menuItem-selected-backgroundColor: #ced2fc;
2005
+ --gse-ui-accordion-menuItem-focus-borderRadius: 4px;
2006
+ --gse-ui-accordion-menuItem-label-defaultText: 400 12px/18px Roboto;
2007
+ --gse-ui-accordion-menuItem-label-selectedText: 600 12px/18px Roboto;
2008
+ --gse-ui-accordion-menuItem-shortcut-text: 400 14px/20px Roboto;
2009
+ --gse-ui-accordion-focusBorder: 2px solid #7b88f7;
2010
+ --gse-ui-accordion-contentItem-padding: 16px;
2011
+ --gse-ui-accordion-contentItem-gap: 16px;
2012
+ --gse-ui-accordion-contentItem-foregroundColor: #1b2c48;
2013
+ --gse-ui-accordion-contentItem-backgroundColor: #ffffff;
2014
+ --gse-ui-accordion-contentItem-defaultText: 400 12px/18px Roboto;
2015
+ --gse-ui-accordion-wrapper-dividerBorder: 1px solid #c6c8ce;
2016
+ --gse-ui-accordion-focus-offset-gap: 1px;
2017
+ --gse-ui-accordion-contentPanel-paddingBottom: 4px;
2018
+ --gse-ui-accordion-label-disabled-opacity: 0.5;
2019
+ }
2020
+
2021
+ /*# sourceMappingURL=ui.css.map */