@planningcenter/tapestry 2.4.0-rc.14 → 2.4.0-rc.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/dist/components/page-header/index.js +1 -1
  2. package/dist/components/sidenav/index.js +1 -1
  3. package/dist/index.css +1907 -1277
  4. package/dist/index.css.map +1 -1
  5. package/dist/reactRender.css +2209 -1585
  6. package/dist/reactRender.css.map +1 -1
  7. package/dist/reactRenderLegacy.css +2209 -1585
  8. package/dist/reactRenderLegacy.css.map +1 -1
  9. package/dist/tapestry-wc/dist/components/{p-ULekdMD1.js → p-BCbdYesf.js} +3 -3
  10. package/dist/tapestry-wc/dist/components/{p-ULekdMD1.js.map → p-BCbdYesf.js.map} +1 -1
  11. package/dist/tapestry-wc/dist/components/{p-DqXPQVkT.js → p-C1zaGJKr.js} +3 -3
  12. package/dist/tapestry-wc/dist/components/{p-DqXPQVkT.js.map → p-C1zaGJKr.js.map} +1 -1
  13. package/dist/tapestry-wc/dist/components/{p-py0j5eYn.js → p-D8VYkte8.js} +2 -2
  14. package/dist/tapestry-wc/dist/components/{p-py0j5eYn.js.map → p-D8VYkte8.js.map} +1 -1
  15. package/dist/tapestry-wc/dist/components/{p-B9_VLKcT.js → p-DfhQ3Ek8.js} +2 -2
  16. package/dist/tapestry-wc/dist/components/{p-B9_VLKcT.js.map → p-DfhQ3Ek8.js.map} +1 -1
  17. package/dist/tapestry-wc/dist/components/{p-DaNVZLtY.js → p-nN6LRQuE.js} +3 -3
  18. package/dist/tapestry-wc/dist/components/{p-DaNVZLtY.js.map → p-nN6LRQuE.js.map} +1 -1
  19. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js +2 -2
  20. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js.map +1 -1
  21. package/dist/tapestry-wc/dist/components/tds-page-header.js +3 -3
  22. package/dist/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
  23. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js +3 -3
  24. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
  25. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js +2 -2
  26. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js.map +1 -1
  27. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js +3 -3
  28. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
  29. package/dist/tapestry-wc/dist/components/tds-sidenav.js +5 -5
  30. package/dist/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
  31. package/dist/tokens.css +1070 -426
  32. package/dist/tokens.css.map +1 -1
  33. package/dist/tokens.d.ts +1 -0
  34. package/dist/tokens.d.ts.map +1 -1
  35. package/dist/unstable.css +2129 -1505
  36. package/dist/unstable.css.map +1 -1
  37. package/package.json +3 -3
package/dist/index.css CHANGED
@@ -1,1509 +1,2139 @@
1
1
  @layer t-critical, t-component;
2
2
 
3
- /**
4
- * Do not edit directly, this file was auto-generated.
5
- */
6
-
7
- :root {
8
- --t-border-radius-sm: 2px;
9
- --t-border-radius-md: 4px;
10
- --t-border-radius-lg: 8px;
11
- --t-border-radius-xl: 16px;
12
- --t-border-radius-round: 56px;
13
- --t-border-radius-default: 4px;
14
- --t-border-width-default: 1px;
15
- --t-border-width-thick: 2px;
16
- --t-spacing-1: 8px;
17
- --t-spacing-2: 16px;
18
- --t-spacing-3: 24px;
19
- --t-spacing-4: 32px;
20
- --t-spacing-5: 40px;
21
- --t-spacing-6: 48px;
22
- --t-spacing-7: 56px;
23
- --t-spacing-fourth: 2px;
24
- --t-spacing-half: 4px;
25
- --t-element-size-3xl: 48px;
26
- --t-element-size-2xl: 32px;
27
- --t-element-size-xl: 24px;
28
- --t-element-size-lg: 18px;
29
- --t-element-size-md: 16px;
30
- --t-element-size-sm: 14px;
31
- --t-element-size-xs: 12px;
32
- --t-font-size-4xl: 32px;
33
- --t-font-size-3xl: 28px;
34
- --t-font-size-2xl: 24px;
35
- --t-font-size-xl: 20px;
36
- --t-font-size-lg: 18px;
37
- --t-font-size-md: 16px;
38
- --t-font-size-sm: 14px;
39
- --t-font-size-xs: 12px;
40
- --t-font-size-2xs: 10px;
41
- --t-font-weight-normal: 400;
42
- --t-font-weight-medium: 500;
43
- --t-font-weight-semibold: 600;
44
- --t-font-weight-bold: 700;
45
- --t-container-size-xl: 48px;
46
- --t-container-size-lg: 40px;
47
- --t-container-size-md: 32px;
48
- --t-container-size-sm: 24px;
49
- --t-container-size-xs: 20px;
50
- --t-avatar-size-20: 20px;
51
- --t-avatar-size-24: 24px;
52
- --t-avatar-size-36: 36px;
53
- --t-avatar-size-48: 48px;
54
- --t-avatar-size-72: 72px;
55
- --t-avatar-size-112: 112px;
56
- --t-text-color-default-headline: hsl(0, 0%, 12%);
57
- --t-text-color-default-primary: hsl(0, 0%, 24%);
58
- --t-text-color-default-secondary: hsl(0, 0%, 42%);
59
- --t-text-color-default-disabled: hsl(0, 0%, 81%);
60
- --t-text-color-default-placeholder: hsl(0, 0%, 58%);
61
- --t-text-color-default-inverted: hsl(0, 0%, 100%);
62
- --t-text-color-interaction-primary: hsl(204, 100%, 40%);
63
- --t-text-color-interaction-hover: hsl(204, 100%, 35%);
64
- --t-text-color-interaction-active: hsl(204, 100%, 30%);
65
- --t-text-color-interaction-visited: hsl(204, 100%, 30%);
66
- --t-text-color-status-neutral: hsl(0, 0%, 24%);
67
- --t-text-color-status-info: hsl(204, 100%, 35%);
68
- --t-text-color-status-success: hsl(97, 57%, 28%);
69
- --t-text-color-status-warning: hsl(42, 100%, 29%);
70
- --t-text-color-status-error: hsl(8, 60%, 45%);
71
- --t-text-color-tag-subtle-gray: hsl(0, 0%, 24%);
72
- --t-text-color-tag-subtle-blue: hsl(224, 47%, 31%);
73
- --t-text-color-tag-subtle-indigo: hsl(241, 59%, 28%);
74
- --t-text-color-tag-subtle-aqua: hsl(209, 77%, 22%);
75
- --t-text-color-tag-subtle-teal: hsl(180, 95%, 15%);
76
- --t-text-color-tag-subtle-green: hsl(100, 93%, 17%);
77
- --t-text-color-tag-subtle-yellow: hsl(29, 100%, 23%);
78
- --t-text-color-tag-subtle-orange: hsl(18, 100%, 18%);
79
- --t-text-color-tag-subtle-pink: hsl(327, 88%, 20%);
80
- --t-text-color-tag-subtle-purple: hsl(268, 71%, 27%);
81
- --t-text-color-tag-subtle-magenta: hsl(285, 71%, 20%);
82
- --t-text-color-tag-bold-gray: hsl(0, 0%, 24%);
83
- --t-text-color-tag-bold-indigo: hsl(241, 59%, 28%);
84
- --t-text-color-tag-bold-blue: hsl(224, 47%, 31%);
85
- --t-text-color-tag-bold-aqua: hsl(209, 77%, 22%);
86
- --t-text-color-tag-bold-teal: hsl(180, 95%, 15%);
87
- --t-text-color-tag-bold-green: hsl(100, 93%, 17%);
88
- --t-text-color-tag-bold-yellow: hsl(29, 100%, 23%);
89
- --t-text-color-tag-bold-orange: hsl(18, 100%, 18%);
90
- --t-text-color-tag-bold-pink: hsl(327, 88%, 20%);
91
- --t-text-color-tag-bold-purple: hsl(268, 71%, 27%);
92
- --t-text-color-tag-bold-magenta: hsl(285, 71%, 20%);
93
- --t-icon-color-default-primary: hsl(0, 0%, 24%);
94
- --t-icon-color-default-secondary: hsl(0, 0%, 42%);
95
- --t-icon-color-default-dim: hsl(0, 0%, 58%);
96
- --t-icon-color-default-disabled: hsl(0, 0%, 81%);
97
- --t-icon-color-default-inverted: hsl(0, 0%, 100%);
98
- --t-icon-color-status-neutral-primary: hsl(0, 0%, 42%);
99
- --t-icon-color-status-neutral-secondary: hsl(0, 0%, 58%);
100
- --t-icon-color-status-neutral-bold: hsl(0, 0%, 24%);
101
- --t-icon-color-status-info-primary: hsl(204, 100%, 40%);
102
- --t-icon-color-status-success-primary: hsl(96, 57%, 33%);
103
- --t-icon-color-status-success-secondary: hsl(97, 57%, 40%);
104
- --t-icon-color-status-warning-primary: hsl(42, 84%, 49%);
105
- --t-icon-color-status-error-primary: hsl(8, 60%, 47%);
106
- --t-fill-color-neutral-100: hsl(0, 0%, 100%);
107
- --t-fill-color-neutral-000: hsl(0, 0%, 12%);
108
- --t-fill-color-neutral-010: hsl(0, 0%, 24%);
109
- --t-fill-color-neutral-020: hsl(0, 0%, 42%);
110
- --t-fill-color-neutral-025: hsl(0, 0%, 50%);
111
- --t-fill-color-neutral-030: hsl(0, 0%, 58%);
112
- --t-fill-color-neutral-040: hsl(0, 0%, 81%);
113
- --t-fill-color-neutral-050: hsl(0, 0%, 88%);
114
- --t-fill-color-neutral-060: hsl(0, 0%, 93%);
115
- --t-fill-color-neutral-070: hsl(0, 0%, 95%);
116
- --t-fill-color-neutral-080: hsl(0, 0%, 97%);
117
- --t-fill-color-neutral-090: hsl(0, 0%, 98%);
118
- --t-fill-color-interaction-default: hsl(204, 100%, 40%);
119
- --t-fill-color-interaction-hover: hsl(204, 100%, 35%);
120
- --t-fill-color-interaction-active: hsl(204, 100%, 30%);
121
- --t-fill-color-interaction-disabled: hsl(0, 0%, 81%);
122
- --t-fill-color-control-neutral-off: hsl(0, 0%, 58%);
123
- --t-fill-color-control-neutral-on: hsl(0, 0%, 24%);
124
- --t-fill-color-control-primary: hsl(204, 100%, 40%);
125
- --t-fill-color-control-secondary: hsl(97, 57%, 40%);
126
- --t-fill-color-control-error: hsl(8, 60%, 47%);
127
- --t-fill-color-control-disabled: hsl(0, 0%, 81%);
128
- --t-fill-color-status-neutral-solid: hsl(0, 0%, 42%);
129
- --t-fill-color-status-neutral-ghost: hsl(0, 0%, 93%);
130
- --t-fill-color-status-neutral-dim: hsl(0, 0%, 97%);
131
- --t-fill-color-status-info-solid: hsl(204, 100%, 40%);
132
- --t-fill-color-status-info-ghost: hsl(203, 94%, 94%);
133
- --t-fill-color-status-info-dim: hsl(204, 100%, 97%);
134
- --t-fill-color-status-success-solid: hsl(96, 57%, 33%);
135
- --t-fill-color-status-success-ghost: hsl(97, 57%, 90%);
136
- --t-fill-color-status-success-dim: hsl(96, 60%, 95%);
137
- --t-fill-color-status-warning-solid: hsl(42, 84%, 63%);
138
- --t-fill-color-status-warning-ghost: hsl(42, 87%, 94%);
139
- --t-fill-color-status-warning-dim: hsl(42, 87%, 97%);
140
- --t-fill-color-status-error-solid: hsl(8, 60%, 47%);
141
- --t-fill-color-status-error-ghost: hsl(9, 59%, 93%);
142
- --t-fill-color-status-error-dim: hsl(7, 60%, 97%);
143
- --t-fill-color-tooltip-primary: hsla(0, 0%, 12%, 0.9);
144
- --t-fill-color-product-accounts-010: hsl(212, 54%, 93%);
145
- --t-fill-color-product-accounts-020: hsl(209, 53%, 90%);
146
- --t-fill-color-product-accounts-030: hsl(210, 56%, 70%);
147
- --t-fill-color-product-accounts-040: hsl(210, 54%, 60%);
148
- --t-fill-color-product-accounts-050: hsl(210, 55%, 50%);
149
- --t-fill-color-product-accounts-060: hsl(210, 65%, 40%);
150
- --t-fill-color-product-accounts-070: hsl(211, 70%, 32%);
151
- --t-fill-color-product-accounts-080: hsl(210, 75%, 25%);
152
- --t-fill-color-product-calendar-010: hsl(8, 61%, 90%);
153
- --t-fill-color-product-calendar-020: hsl(8, 61%, 70%);
154
- --t-fill-color-product-calendar-030: hsl(8, 72%, 59%);
155
- --t-fill-color-product-calendar-040: hsl(8, 65%, 55%);
156
- --t-fill-color-product-calendar-050: hsl(9, 61%, 50%);
157
- --t-fill-color-product-calendar-060: hsl(8, 65%, 42%);
158
- --t-fill-color-product-calendar-070: hsl(7, 65%, 34%);
159
- --t-fill-color-product-calendar-080: hsl(9, 61%, 27%);
160
- --t-fill-color-product-checkins-010: hsl(285, 20%, 92%);
161
- --t-fill-color-product-checkins-020: hsl(283, 22%, 75%);
162
- --t-fill-color-product-checkins-030: hsl(284, 22%, 64%);
163
- --t-fill-color-product-checkins-040: hsl(283, 22%, 55%);
164
- --t-fill-color-product-checkins-050: hsl(283, 22%, 48%);
165
- --t-fill-color-product-checkins-060: hsl(283, 27%, 42%);
166
- --t-fill-color-product-checkins-070: hsl(284, 33%, 34%);
167
- --t-fill-color-product-checkins-080: hsl(283, 33%, 27%);
168
- --t-fill-color-product-giving-010: hsl(41, 95%, 93%);
169
- --t-fill-color-product-giving-020: hsl(42, 95%, 83%);
170
- --t-fill-color-product-giving-030: hsl(43, 95%, 75%);
171
- --t-fill-color-product-giving-040: hsl(43, 88%, 70%);
172
- --t-fill-color-product-giving-050: hsl(43, 88%, 64%);
173
- --t-fill-color-product-giving-060: hsl(42, 84%, 55%);
174
- --t-fill-color-product-giving-070: hsl(42, 84%, 48%);
175
- --t-fill-color-product-giving-080: hsl(42, 100%, 40%);
176
- --t-fill-color-product-groups-010: hsl(18, 95%, 92%);
177
- --t-fill-color-product-groups-020: hsl(17, 96%, 80%);
178
- --t-fill-color-product-groups-030: hsl(17, 96%, 70%);
179
- --t-fill-color-product-groups-040: hsl(17, 96%, 63%);
180
- --t-fill-color-product-groups-050: hsl(17, 88%, 55%);
181
- --t-fill-color-product-groups-060: hsl(12, 70%, 48%);
182
- --t-fill-color-product-groups-070: hsl(12, 70%, 40%);
183
- --t-fill-color-product-groups-080: hsl(14, 70%, 34%);
184
- --t-fill-color-product-home-010: hsl(221, 89%, 93%);
185
- --t-fill-color-product-home-020: hsl(221, 91%, 91%);
186
- --t-fill-color-product-home-030: hsl(221, 91%, 87%);
187
- --t-fill-color-product-home-040: hsl(221, 91%, 62%);
188
- --t-fill-color-product-home-050: hsl(221, 91%, 55%);
189
- --t-fill-color-product-home-060: hsl(221, 90%, 50%);
190
- --t-fill-color-product-home-070: hsl(221, 90%, 45%);
191
- --t-fill-color-product-home-080: hsl(218, 84%, 25%);
192
- --t-fill-color-product-people-010: hsl(219, 73%, 91%);
193
- --t-fill-color-product-people-020: hsl(220, 69%, 81%);
194
- --t-fill-color-product-people-030: hsl(221, 73%, 71%);
195
- --t-fill-color-product-people-040: hsl(221, 73%, 65%);
196
- --t-fill-color-product-people-050: hsl(220, 74%, 57%);
197
- --t-fill-color-product-people-060: hsl(220, 68%, 51%);
198
- --t-fill-color-product-people-070: hsl(220, 68%, 41%);
199
- --t-fill-color-product-people-080: hsl(221, 68%, 31%);
200
- --t-fill-color-product-publishing-010: hsl(220, 4%, 86%);
201
- --t-fill-color-product-publishing-020: hsl(222, 10%, 60%);
202
- --t-fill-color-product-publishing-030: hsl(221, 11%, 50%);
203
- --t-fill-color-product-publishing-040: hsl(222, 12%, 39%);
204
- --t-fill-color-product-publishing-050: hsl(220, 12%, 31%);
205
- --t-fill-color-product-publishing-060: hsl(220, 11%, 26%);
206
- --t-fill-color-product-publishing-070: hsl(217, 12%, 22%);
207
- --t-fill-color-product-publishing-080: hsl(214, 11%, 12%);
208
- --t-fill-color-product-registrations-010: hsl(173, 28%, 89%);
209
- --t-fill-color-product-registrations-020: hsl(176, 38%, 78%);
210
- --t-fill-color-product-registrations-030: hsl(176, 37%, 68%);
211
- --t-fill-color-product-registrations-040: hsl(176, 37%, 60%);
212
- --t-fill-color-product-registrations-050: hsl(175, 36%, 43%);
213
- --t-fill-color-product-registrations-060: hsl(175, 51%, 34%);
214
- --t-fill-color-product-registrations-070: hsl(174, 51%, 28%);
215
- --t-fill-color-product-registrations-080: hsl(175, 52%, 22%);
216
- --t-fill-color-product-services-010: hsl(88, 31%, 88%);
217
- --t-fill-color-product-services-020: hsl(88, 39%, 75%);
218
- --t-fill-color-product-services-030: hsl(88, 39%, 66%);
219
- --t-fill-color-product-services-040: hsl(88, 40%, 54%);
220
- --t-fill-color-product-services-050: hsl(88, 45%, 41%);
221
- --t-fill-color-product-services-060: hsl(89, 62%, 31%);
222
- --t-fill-color-product-services-070: hsl(89, 62%, 26%);
223
- --t-fill-color-product-services-080: hsl(89, 63%, 21%);
224
- --t-fill-color-product-staff-base: hsl(328, 100%, 45%);
225
- --t-fill-color-product-staff-dark: hsl(328, 100%, 38%);
226
- --t-fill-color-product-staff-darker: hsl(328, 100%, 33%);
227
- --t-fill-color-product-accounts-gradient-brand: linear-gradient(135deg, hsl(203, 86%, 57%), hsl(220, 76%, 57%));
228
- --t-fill-color-product-accounts-gradient-page: linear-gradient(111.72deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
229
- --t-fill-color-product-accounts-gradient-tint: linear-gradient(111.72deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
230
- --t-fill-color-product-api-gradient-brand: linear-gradient(180deg, hsl(221, 100%, 62%), hsl(217, 100%, 52%));
231
- --t-fill-color-product-calendar-gradient-brand: linear-gradient(135deg, hsl(10, 88%, 58%), hsl(8, 60%, 51%));
232
- --t-fill-color-product-calendar-gradient-page: linear-gradient(111.72deg, hsl(5, 80%, 80%), hsl(293, 13%, 74%), hsl(204, 67%, 73%));
233
- --t-fill-color-product-calendar-gradient-tint: linear-gradient(111.72deg, hsl(8, 100%, 94%), hsl(285, 18%, 91%), hsl(204, 67%, 92%));
234
- --t-fill-color-product-cc-gradient-brand: linear-gradient(135deg, hsl(207, 90%, 61%), hsl(123, 38%, 57%));
235
- --t-fill-color-product-checkins-gradient-brand: linear-gradient(135deg, hsl(283, 38%, 59%), hsl(284, 23%, 48%));
236
- --t-fill-color-product-checkins-gradient-page: linear-gradient(111.72deg, hsl(283, 21%, 77%) 25%, hsl(227, 36%, 78%) 60%, hsl(204, 67%, 73%));
237
- --t-fill-color-product-checkins-gradient-tint: linear-gradient(111.72deg, hsl(285, 22%, 93%), hsl(225, 35%, 93%) 42%, hsl(204, 67%, 92%));
238
- --t-fill-color-product-giving-gradient-brand: linear-gradient(90deg, hsl(46, 91%, 55%), hsl(41, 89%, 55%));
239
- --t-fill-color-product-giving-gradient-page: linear-gradient(111.72deg, hsl(42, 84%, 80%), hsl(255, 21%, 89%) 58.5%, hsl(204, 67%, 73%));
240
- --t-fill-color-product-giving-gradient-tint: linear-gradient(111.72deg, hsl(42, 87%, 94%), hsl(260, 18%, 97%) 58.5%, hsl(204, 67%, 92%));
241
- --t-fill-color-product-groups-gradient-brand: linear-gradient(135deg, hsl(30, 100%, 59%), hsl(19, 97%, 60%));
242
- --t-fill-color-product-groups-gradient-page: linear-gradient(111.72deg, hsl(17, 88%, 80%), hsl(293, 13%, 74%), hsl(204, 67%, 73%));
243
- --t-fill-color-product-groups-gradient-tint: linear-gradient(111.72deg, hsl(18, 87%, 94%), hsl(300, 12%, 92%), hsl(204, 67%, 92%));
244
- --t-fill-color-product-headcounts-gradient-brand: linear-gradient(135deg, hsl(283, 37%, 59%), hsl(285, 23%, 47%));
245
- --t-fill-color-product-home-gradient-page: linear-gradient(111.72deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
246
- --t-fill-color-product-home-gradient-tint: linear-gradient(111.72deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
247
- --t-fill-color-product-musicstand-gradient-brand: linear-gradient(135deg, hsl(204, 64%, 51%), hsl(211, 55%, 51%));
248
- --t-fill-color-product-people-gradient-brand: linear-gradient(135deg, hsl(205, 86%, 57%), hsl(220, 76%, 57%));
249
- --t-fill-color-product-people-gradient-page: linear-gradient(111.72deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
250
- --t-fill-color-product-people-gradient-tint: linear-gradient(111.72deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
251
- --t-fill-color-product-publishing-gradient-brand: linear-gradient(135deg, hsl(240, 4%, 49%), hsl(240, 6%, 39%));
252
- --t-fill-color-product-publishing-gradient-page: linear-gradient(111.72deg, hsl(217, 5%, 69%), hsl(214, 15%, 69%) 45%, hsl(204, 67%, 73%));
253
- --t-fill-color-product-publishing-gradient-tint: linear-gradient(111.72deg, hsl(210, 4%, 91%), hsl(214, 15%, 91%) 45%, hsl(204, 67%, 92%));
254
- --t-fill-color-product-registrations-gradient-brand: linear-gradient(135deg, hsl(168, 46%, 48%), hsl(175, 35%, 43%));
255
- --t-fill-color-product-registrations-gradient-page: linear-gradient(111.72deg, hsl(175, 27%, 74%), hsl(196, 46%, 73%) 39.5%, hsl(204, 67%, 73%));
256
- --t-fill-color-product-registrations-gradient-tint: linear-gradient(111.72deg, hsl(175, 28%, 92%), hsl(196, 46%, 92%) 39.5%, hsl(204, 67%, 92%));
257
- --t-fill-color-product-services-gradient-brand: linear-gradient(135deg, hsl(96, 49%, 47%), hsl(89, 52%, 39%));
258
- --t-fill-color-product-services-gradient-page: linear-gradient(111.72deg, hsl(89, 31%, 73%), hsl(122, 29%, 78%) 39.5%, hsl(204, 67%, 73%));
259
- --t-fill-color-product-services-gradient-tint: linear-gradient(111.72deg, hsl(88, 32%, 92%), hsl(126, 29%, 93%) 39.5%, hsl(204, 67%, 92%));
260
- --t-fill-color-tag-gray-010: hsl(0, 0%, 93%);
261
- --t-fill-color-tag-gray-020: hsl(0, 0%, 88%);
262
- --t-fill-color-tag-gray-030: hsl(0, 0%, 88%);
263
- --t-fill-color-tag-gray-040: hsl(0, 0%, 81%);
264
- --t-fill-color-tag-blue-010: hsl(220, 100%, 95%);
265
- --t-fill-color-tag-blue-020: hsl(221, 100%, 88%);
266
- --t-fill-color-tag-blue-030: hsl(220, 98%, 81%);
267
- --t-fill-color-tag-blue-040: hsl(220, 98%, 74%);
268
- --t-fill-color-tag-aqua-010: hsl(200, 82%, 89%);
269
- --t-fill-color-tag-aqua-020: hsl(200, 82%, 82%);
270
- --t-fill-color-tag-aqua-030: hsl(201, 76%, 71%);
271
- --t-fill-color-tag-aqua-040: hsl(200, 75%, 64%);
272
- --t-fill-color-tag-teal-010: hsl(163, 53%, 83%);
273
- --t-fill-color-tag-teal-020: hsl(164, 52%, 76%);
274
- --t-fill-color-tag-teal-030: hsl(169, 62%, 64%);
275
- --t-fill-color-tag-teal-040: hsl(169, 62%, 56%);
276
- --t-fill-color-tag-green-010: hsl(98, 59%, 85%);
277
- --t-fill-color-tag-green-020: hsl(99, 59%, 78%);
278
- --t-fill-color-tag-green-030: hsl(112, 57%, 65%);
279
- --t-fill-color-tag-green-040: hsl(112, 57%, 57%);
280
- --t-fill-color-tag-yellow-010: hsl(45, 77%, 85%);
281
- --t-fill-color-tag-yellow-020: hsl(44, 78%, 77%);
282
- --t-fill-color-tag-yellow-030: hsl(44, 92%, 69%);
283
- --t-fill-color-tag-yellow-040: hsl(44, 93%, 61%);
284
- --t-fill-color-tag-orange-010: hsl(22, 89%, 89%);
285
- --t-fill-color-tag-orange-020: hsl(21, 89%, 82%);
286
- --t-fill-color-tag-orange-030: hsl(21, 86%, 72%);
287
- --t-fill-color-tag-orange-040: hsl(21, 86%, 64%);
288
- --t-fill-color-tag-pink-010: hsl(311, 66%, 92%);
289
- --t-fill-color-tag-pink-020: hsl(310, 64%, 85%);
290
- --t-fill-color-tag-pink-030: hsl(324, 78%, 77%);
291
- --t-fill-color-tag-pink-040: hsl(324, 76%, 70%);
292
- --t-fill-color-tag-purple-010: hsl(259, 74%, 93%);
293
- --t-fill-color-tag-purple-020: hsl(259, 74%, 85%);
294
- --t-fill-color-tag-purple-030: hsl(273, 62%, 76%);
295
- --t-fill-color-tag-purple-040: hsl(273, 62%, 70%);
296
- --t-fill-color-tag-magenta-010: hsl(294, 37%, 90%);
297
- --t-fill-color-tag-magenta-020: hsl(291, 40%, 83%);
298
- --t-fill-color-tag-magenta-030: hsl(291, 48%, 70%);
299
- --t-fill-color-tag-magenta-040: hsl(292, 48%, 63%);
300
- --t-fill-color-tag-indigo-010: hsl(234, 78%, 93%);
301
- --t-fill-color-tag-indigo-020: hsl(233, 79%, 87%);
302
- --t-fill-color-tag-indigo-030: hsl(233, 77%, 81%);
303
- --t-fill-color-tag-indigo-040: hsl(236, 79%, 74%);
304
- --t-fill-color-button-neutral-solid-default: hsl(0, 0%, 93%);
305
- --t-fill-color-button-neutral-solid-hover: hsl(0, 0%, 88%);
306
- --t-fill-color-button-neutral-solid-active: hsl(0, 0%, 81%);
307
- --t-fill-color-button-neutral-solid-disabled: hsl(0, 0%, 95%);
308
- --t-fill-color-button-neutral-outline-dim-default: hsla(0, 0%, 100%, 0);
309
- --t-fill-color-button-neutral-outline-dim-hover: hsl(0, 0%, 95%);
310
- --t-fill-color-button-neutral-outline-dim-active: hsl(0, 0%, 93%);
311
- --t-fill-color-button-neutral-outline-dim-disabled: hsl(0, 0%, 98%);
312
- --t-fill-color-button-neutral-ghost-default: hsla(0, 0%, 100%, 0);
313
- --t-fill-color-button-neutral-ghost-hover: hsl(0, 0%, 95%);
314
- --t-fill-color-button-neutral-ghost-active: hsl(0, 0%, 93%);
315
- --t-fill-color-button-neutral-ghost-disabled: hsla(0, 0%, 100%, 0);
316
- --t-fill-color-button-neutral-responsive-header-default: hsla(0, 0%, 0%, 0.1);
317
- --t-fill-color-button-neutral-responsive-header-hover: hsla(0, 0%, 0%, 0.2);
318
- --t-fill-color-button-neutral-responsive-header-active: hsla(0, 0%, 0%, 0.3);
319
- --t-fill-color-button-neutral-responsive-header-disabled: hsla(0, 0%, 0%, 0.05);
320
- --t-fill-color-button-interaction-solid-default: hsl(204, 100%, 40%);
321
- --t-fill-color-button-interaction-solid-hover: hsl(204, 100%, 35%);
322
- --t-fill-color-button-interaction-solid-active: hsl(204, 100%, 30%);
323
- --t-fill-color-button-interaction-solid-disabled: hsl(0, 0%, 95%);
324
- --t-fill-color-button-interaction-outline-dim-default: hsla(0, 0%, 100%, 0);
325
- --t-fill-color-button-interaction-outline-dim-hover: hsl(204, 100%, 97%);
326
- --t-fill-color-button-interaction-outline-dim-active: hsl(203, 94%, 94%);
327
- --t-fill-color-button-interaction-outline-dim-disabled: hsl(0, 0%, 98%);
328
- --t-fill-color-button-interaction-ghost-default: hsla(0, 0%, 100%, 0);
329
- --t-fill-color-button-interaction-ghost-hover: hsl(204, 100%, 97%);
330
- --t-fill-color-button-interaction-ghost-active: hsl(203, 94%, 94%);
331
- --t-fill-color-button-interaction-ghost-disabled: hsla(0, 0%, 100%, 0);
332
- --t-fill-color-button-delete-solid-default: hsl(8, 60%, 47%);
333
- --t-fill-color-button-delete-solid-hover: hsl(8, 60%, 45%);
334
- --t-fill-color-button-delete-solid-active: hsl(8, 60%, 40%);
335
- --t-fill-color-button-delete-solid-disabled: hsl(0, 0%, 95%);
336
- --t-fill-color-button-delete-outline-dim-default: hsla(0, 0%, 100%, 0);
337
- --t-fill-color-button-delete-outline-dim-hover: hsl(7, 60%, 97%);
338
- --t-fill-color-button-delete-outline-dim-active: hsl(9, 59%, 93%);
339
- --t-fill-color-button-delete-outline-dim-disabled: hsl(0, 0%, 98%);
340
- --t-fill-color-button-delete-ghost-default: hsla(0, 0%, 100%, 0);
341
- --t-fill-color-button-delete-ghost-hover: hsl(7, 60%, 97%);
342
- --t-fill-color-button-delete-ghost-active: hsl(9, 59%, 93%);
343
- --t-fill-color-button-delete-ghost-disabled: hsla(0, 0%, 100%, 0);
344
- --t-fill-color-button-pill-default: hsl(0, 0%, 93%);
345
- --t-fill-color-button-pill-hover: hsl(0, 0%, 88%);
346
- --t-fill-color-button-pill-active: hsl(0, 0%, 88%);
347
- --t-fill-color-button-pill-disabled: hsl(0, 0%, 93%);
348
- --t-fill-color-transparency-light-010: hsla(0, 0%, 100%, 0.1);
349
- --t-fill-color-transparency-light-020: hsla(0, 0%, 100%, 0.2);
350
- --t-fill-color-transparency-light-030: hsla(0, 0%, 100%, 0.3);
351
- --t-fill-color-transparency-light-040: hsla(0, 0%, 100%, 0.4);
352
- --t-fill-color-transparency-light-050: hsla(0, 0%, 100%, 0.5);
353
- --t-fill-color-transparency-light-060: hsla(0, 0%, 100%, 0.6);
354
- --t-fill-color-transparency-light-070: hsla(0, 0%, 100%, 0.7);
355
- --t-fill-color-transparency-light-080: hsla(0, 0%, 100%, 0.8);
356
- --t-fill-color-transparency-light-090: hsla(0, 0%, 100%, 0.9);
357
- --t-fill-color-transparency-dark-010: hsla(0, 0%, 0%, 0.1);
358
- --t-fill-color-transparency-dark-020: hsla(0, 0%, 0%, 0.2);
359
- --t-fill-color-transparency-dark-030: hsla(0, 0%, 0%, 0.3);
360
- --t-fill-color-transparency-dark-040: hsla(0, 0%, 0%, 0.4);
361
- --t-fill-color-transparency-dark-050: hsla(0, 0%, 0%, 0.5);
362
- --t-fill-color-transparency-dark-060: hsla(0, 0%, 0%, 0.6);
363
- --t-fill-color-transparency-dark-070: hsla(0, 0%, 0%, 0.7);
364
- --t-fill-color-transparency-dark-080: hsla(0, 0%, 0%, 0.8);
365
- --t-fill-color-transparency-dark-090: hsla(0, 0%, 0%, 0.9);
366
- --t-surface-color-card: hsl(0, 0%, 100%);
367
- --t-surface-color-canvas: hsl(0, 0%, 100%);
368
- --t-border-color-default-base: hsl(0, 0%, 88%);
369
- --t-border-color-default-dark: hsl(0, 0%, 81%);
370
- --t-border-color-default-darker: hsl(0, 0%, 68%);
371
- --t-border-color-default-darkest: hsl(0, 0%, 58%);
372
- --t-border-color-default-disabled: hsl(0, 0%, 88%);
373
- --t-border-color-default-dim: hsl(0, 0%, 95%);
374
- --t-border-color-default-white: hsl(0, 0%, 100%);
375
- --t-border-color-status-neutral: hsl(0, 0%, 58%);
376
- --t-border-color-status-info: hsl(204, 100%, 40%);
377
- --t-border-color-status-success: hsl(97, 57%, 40%);
378
- --t-border-color-status-warning: hsl(42, 84%, 63%);
379
- --t-border-color-status-error: hsl(8, 60%, 47%);
380
- --t-border-color-button-neutral: hsl(0, 0%, 88%);
381
- --t-border-color-button-info: hsl(204, 100%, 40%);
382
- --t-border-color-button-create: hsl(96, 57%, 33%);
383
- --t-border-color-button-delete: hsl(8, 60%, 47%);
384
- --t-border-color-control-neutral: hsl(0, 0%, 68%);
385
- --t-border-color-control-info: hsl(204, 100%, 40%);
386
- --t-border-color-control-success: hsl(97, 57%, 40%);
387
- --t-border-color-control-warning: hsl(42, 84%, 63%);
388
- --t-border-color-control-error: hsl(8, 60%, 47%);
389
- --t-border-color-control-disabled: hsl(0, 0%, 88%);
390
- --t-form-background-color: var(--t-fill-color-neutral-100);
391
- --t-form-background-color-disabled: var(--t-fill-color-neutral-070);
392
- --t-form-background-color-error: var(--t-fill-color-neutral-100);
393
- --t-form-background-color-readonly: var(--t-fill-color-neutral-070);
394
- --t-form-border-color: var(--t-border-color-default-base);
395
- --t-form-border-color-disabled: var(--t-border-color-default-base);
396
- --t-form-border-color-error: var(--t-border-color-status-error);
397
- --t-form-border-color-focus: var(--t-fill-color-interaction-default);
398
- --t-form-border-color-hover: var(--t-border-color-default-dark);
399
- --t-form-border-color-readonly: hsla(0, 0%, 100%, 0);
400
- --t-form-border-radius: var(--t-border-radius-md);
401
- --t-form-border-width: var(--t-border-width-default);
402
- --t-form-font-color: var(--t-text-color-default-primary);
403
- --t-form-font-color-disabled: var(--t-text-color-default-disabled);
404
- --t-form-font-color-error: var(--t-text-color-status-error);
405
- --t-form-font-color-readonly: var(--t-text-color-default-primary);
406
- --t-form-picker-icon-color: var(--t-icon-color-default-primary);
407
- --t-form-placeholder-color: var(--t-text-color-default-placeholder);
408
- --t-border-size-default: var(--t-border-width-default);
409
- --t-border-size-thick: var(--t-border-width-thick);
410
- --t-font-weight-semi-bold: var(--t-font-weight-semibold);
411
- --t-icon-color-status-neutral-dark: hsl(0, 0%, 24%);
412
- --t-icon-color-status-info-secondary: hsl(204, 100%, 40%);
413
- --t-fill-color-alert-info: hsl(204, 94%, 49%);
414
- --t-fill-color-alert-success: hsl(122, 60%, 41%);
415
- --t-fill-color-alert-warning: hsl(43, 96%, 58%);
416
- --t-fill-color-alert-error: hsl(4, 77%, 59%);
417
- --t-fill-color-button-neutral-outline-dim-disabled-solid: hsl(0, 0%, 98%);
418
- --t-fill-color-button-neutral-ghost-disabled-solid: hsl(0, 0%, 98%);
419
- --t-fill-color-button-create-solid-default: hsl(96, 57%, 33%);
420
- --t-fill-color-button-create-solid-hover: hsl(97, 57%, 28%);
421
- --t-fill-color-button-create-solid-active: hsl(97, 57%, 23%);
422
- --t-fill-color-button-create-solid-disabled: hsl(0, 0%, 81%);
423
- --t-fill-color-button-create-ghost-default: hsla(0, 0%, 100%, 0);
424
- --t-fill-color-button-create-ghost-hover: hsl(96, 60%, 95%);
425
- --t-fill-color-button-create-ghost-active: hsl(97, 57%, 90%);
426
- --t-fill-color-button-create-ghost-disabled: hsla(0, 0%, 100%, 0);
427
- }
428
-
429
- /**
430
- * Do not edit directly, this file was auto-generated.
431
- */
432
-
433
- @layer t-critical {
434
- tds-page-header:not(.hydrated) {
435
- display: none;
3
+ :root{
4
+ --t-border-radius-sm:2px;
5
+ --t-border-radius-md:4px;
6
+ --t-border-radius-lg:8px;
7
+ --t-border-radius-xl:16px;
8
+ --t-border-radius-round:56px;
9
+ --t-border-radius-default:4px;
10
+ --t-border-width-default:1px;
11
+ --t-border-width-thick:2px;
12
+ --t-spacing-1:8px;
13
+ --t-spacing-2:16px;
14
+ --t-spacing-3:24px;
15
+ --t-spacing-4:32px;
16
+ --t-spacing-5:40px;
17
+ --t-spacing-6:48px;
18
+ --t-spacing-7:56px;
19
+ --t-spacing-fourth:2px;
20
+ --t-spacing-half:4px;
21
+ --t-element-size-3xl:48px;
22
+ --t-element-size-2xl:32px;
23
+ --t-element-size-xl:24px;
24
+ --t-element-size-lg:18px;
25
+ --t-element-size-md:16px;
26
+ --t-element-size-sm:14px;
27
+ --t-element-size-xs:12px;
28
+ --t-font-size-4xl:32px;
29
+ --t-font-size-3xl:28px;
30
+ --t-font-size-2xl:24px;
31
+ --t-font-size-xl:20px;
32
+ --t-font-size-lg:18px;
33
+ --t-font-size-md:16px;
34
+ --t-font-size-sm:14px;
35
+ --t-font-size-xs:12px;
36
+ --t-font-size-2xs:10px;
37
+ --t-font-weight-normal:400;
38
+ --t-font-weight-medium:500;
39
+ --t-font-weight-semibold:600;
40
+ --t-font-weight-bold:700;
41
+ --t-container-size-xl:48px;
42
+ --t-container-size-lg:40px;
43
+ --t-container-size-md:32px;
44
+ --t-container-size-sm:24px;
45
+ --t-container-size-xs:20px;
46
+ --t-avatar-size-20:20px;
47
+ --t-avatar-size-24:24px;
48
+ --t-avatar-size-36:36px;
49
+ --t-avatar-size-48:48px;
50
+ --t-avatar-size-72:72px;
51
+ --t-avatar-size-112:112px;
52
+ --t-text-color-default-headline:hsl(0, 0%, 12%);
53
+ --t-text-color-default-primary:hsl(0, 0%, 24%);
54
+ --t-text-color-default-secondary:hsl(0, 0%, 42%);
55
+ --t-text-color-default-disabled:hsl(0, 0%, 81%);
56
+ --t-text-color-default-placeholder:hsl(0, 0%, 58%);
57
+ --t-text-color-default-inverted:hsl(0, 0%, 100%);
58
+ --t-text-color-interaction-primary:hsl(204, 100%, 40%);
59
+ --t-text-color-interaction-hover:hsl(204, 100%, 35%);
60
+ --t-text-color-interaction-active:hsl(204, 100%, 30%);
61
+ --t-text-color-interaction-visited:hsl(204, 100%, 30%);
62
+ --t-text-color-status-neutral:hsl(0, 0%, 24%);
63
+ --t-text-color-status-info:hsl(204, 100%, 35%);
64
+ --t-text-color-status-success:hsl(97, 57%, 28%);
65
+ --t-text-color-status-warning:hsl(42, 100%, 29%);
66
+ --t-text-color-status-error:hsl(8, 60%, 45%);
67
+ --t-text-color-tag-subtle-gray:hsl(0, 0%, 24%);
68
+ --t-text-color-tag-subtle-blue:hsl(224, 47%, 31%);
69
+ --t-text-color-tag-subtle-indigo:hsl(241, 59%, 28%);
70
+ --t-text-color-tag-subtle-aqua:hsl(209, 77%, 22%);
71
+ --t-text-color-tag-subtle-teal:hsl(180, 95%, 15%);
72
+ --t-text-color-tag-subtle-green:hsl(100, 93%, 17%);
73
+ --t-text-color-tag-subtle-yellow:hsl(29, 100%, 23%);
74
+ --t-text-color-tag-subtle-orange:hsl(18, 100%, 18%);
75
+ --t-text-color-tag-subtle-pink:hsl(327, 88%, 20%);
76
+ --t-text-color-tag-subtle-purple:hsl(268, 71%, 27%);
77
+ --t-text-color-tag-subtle-magenta:hsl(285, 71%, 20%);
78
+ --t-text-color-tag-bold-gray:hsl(0, 0%, 24%);
79
+ --t-text-color-tag-bold-indigo:hsl(241, 59%, 28%);
80
+ --t-text-color-tag-bold-blue:hsl(224, 47%, 31%);
81
+ --t-text-color-tag-bold-aqua:hsl(209, 77%, 22%);
82
+ --t-text-color-tag-bold-teal:hsl(180, 95%, 15%);
83
+ --t-text-color-tag-bold-green:hsl(100, 93%, 17%);
84
+ --t-text-color-tag-bold-yellow:hsl(29, 100%, 23%);
85
+ --t-text-color-tag-bold-orange:hsl(18, 100%, 18%);
86
+ --t-text-color-tag-bold-pink:hsl(327, 88%, 20%);
87
+ --t-text-color-tag-bold-purple:hsl(268, 71%, 27%);
88
+ --t-text-color-tag-bold-magenta:hsl(285, 71%, 20%);
89
+ --t-icon-color-default-primary:hsl(0, 0%, 24%);
90
+ --t-icon-color-default-secondary:hsl(0, 0%, 42%);
91
+ --t-icon-color-default-dim:hsl(0, 0%, 58%);
92
+ --t-icon-color-default-disabled:hsl(0, 0%, 81%);
93
+ --t-icon-color-default-inverted:hsl(0, 0%, 100%);
94
+ --t-icon-color-status-neutral-primary:hsl(0, 0%, 42%);
95
+ --t-icon-color-status-neutral-secondary:hsl(0, 0%, 58%);
96
+ --t-icon-color-status-neutral-bold:hsl(0, 0%, 24%);
97
+ --t-icon-color-status-info-primary:hsl(204, 100%, 40%);
98
+ --t-icon-color-status-success-primary:hsl(96, 57%, 33%);
99
+ --t-icon-color-status-success-secondary:hsl(97, 57%, 40%);
100
+ --t-icon-color-status-warning-primary:hsl(42, 84%, 49%);
101
+ --t-icon-color-status-error-primary:hsl(8, 60%, 47%);
102
+ --t-fill-color-neutral-100:hsl(0, 0%, 100%);
103
+ --t-fill-color-neutral-000:hsl(0, 0%, 12%);
104
+ --t-fill-color-neutral-010:hsl(0, 0%, 24%);
105
+ --t-fill-color-neutral-020:hsl(0, 0%, 42%);
106
+ --t-fill-color-neutral-025:hsl(0, 0%, 50%);
107
+ --t-fill-color-neutral-030:hsl(0, 0%, 58%);
108
+ --t-fill-color-neutral-040:hsl(0, 0%, 81%);
109
+ --t-fill-color-neutral-050:hsl(0, 0%, 88%);
110
+ --t-fill-color-neutral-060:hsl(0, 0%, 93%);
111
+ --t-fill-color-neutral-070:hsl(0, 0%, 95%);
112
+ --t-fill-color-neutral-080:hsl(0, 0%, 97%);
113
+ --t-fill-color-neutral-090:hsl(0, 0%, 98%);
114
+ --t-fill-color-interaction-default:hsl(204, 100%, 40%);
115
+ --t-fill-color-interaction-hover:hsl(204, 100%, 35%);
116
+ --t-fill-color-interaction-active:hsl(204, 100%, 30%);
117
+ --t-fill-color-interaction-disabled:hsl(0, 0%, 81%);
118
+ --t-fill-color-control-neutral-off:hsl(0, 0%, 58%);
119
+ --t-fill-color-control-neutral-on:hsl(0, 0%, 24%);
120
+ --t-fill-color-control-primary:hsl(204, 100%, 40%);
121
+ --t-fill-color-control-secondary:hsl(97, 57%, 40%);
122
+ --t-fill-color-control-error:hsl(8, 60%, 47%);
123
+ --t-fill-color-control-disabled:hsl(0, 0%, 81%);
124
+ --t-fill-color-status-neutral-solid:hsl(0, 0%, 42%);
125
+ --t-fill-color-status-neutral-ghost:hsl(0, 0%, 93%);
126
+ --t-fill-color-status-neutral-dim:hsl(0, 0%, 97%);
127
+ --t-fill-color-status-info-solid:hsl(204, 100%, 40%);
128
+ --t-fill-color-status-info-ghost:hsl(203, 94%, 94%);
129
+ --t-fill-color-status-info-dim:hsl(204, 100%, 97%);
130
+ --t-fill-color-status-success-solid:hsl(96, 57%, 33%);
131
+ --t-fill-color-status-success-ghost:hsl(97, 57%, 90%);
132
+ --t-fill-color-status-success-dim:hsl(96, 60%, 95%);
133
+ --t-fill-color-status-warning-solid:hsl(42, 84%, 63%);
134
+ --t-fill-color-status-warning-ghost:hsl(42, 87%, 94%);
135
+ --t-fill-color-status-warning-dim:hsl(42, 87%, 97%);
136
+ --t-fill-color-status-error-solid:hsl(8, 60%, 47%);
137
+ --t-fill-color-status-error-ghost:hsl(9, 59%, 93%);
138
+ --t-fill-color-status-error-dim:hsl(7, 60%, 97%);
139
+ --t-fill-color-tooltip-primary:hsla(0, 0%, 12%, 0.9);
140
+ --t-fill-color-product-accounts-010:hsl(212, 54%, 93%);
141
+ --t-fill-color-product-accounts-020:hsl(209, 53%, 90%);
142
+ --t-fill-color-product-accounts-030:hsl(210, 56%, 70%);
143
+ --t-fill-color-product-accounts-040:hsl(210, 54%, 60%);
144
+ --t-fill-color-product-accounts-050:hsl(210, 55%, 50%);
145
+ --t-fill-color-product-accounts-060:hsl(210, 65%, 40%);
146
+ --t-fill-color-product-accounts-070:hsl(211, 70%, 32%);
147
+ --t-fill-color-product-accounts-080:hsl(210, 75%, 25%);
148
+ --t-fill-color-product-calendar-010:hsl(8, 61%, 90%);
149
+ --t-fill-color-product-calendar-020:hsl(8, 61%, 70%);
150
+ --t-fill-color-product-calendar-030:hsl(8, 72%, 59%);
151
+ --t-fill-color-product-calendar-040:hsl(8, 65%, 55%);
152
+ --t-fill-color-product-calendar-050:hsl(9, 61%, 50%);
153
+ --t-fill-color-product-calendar-060:hsl(8, 65%, 42%);
154
+ --t-fill-color-product-calendar-070:hsl(7, 65%, 34%);
155
+ --t-fill-color-product-calendar-080:hsl(9, 61%, 27%);
156
+ --t-fill-color-product-checkins-010:hsl(285, 20%, 92%);
157
+ --t-fill-color-product-checkins-020:hsl(283, 22%, 75%);
158
+ --t-fill-color-product-checkins-030:hsl(284, 22%, 64%);
159
+ --t-fill-color-product-checkins-040:hsl(283, 22%, 55%);
160
+ --t-fill-color-product-checkins-050:hsl(283, 22%, 48%);
161
+ --t-fill-color-product-checkins-060:hsl(283, 27%, 42%);
162
+ --t-fill-color-product-checkins-070:hsl(284, 33%, 34%);
163
+ --t-fill-color-product-checkins-080:hsl(283, 33%, 27%);
164
+ --t-fill-color-product-giving-010:hsl(41, 95%, 93%);
165
+ --t-fill-color-product-giving-020:hsl(42, 95%, 83%);
166
+ --t-fill-color-product-giving-030:hsl(43, 95%, 75%);
167
+ --t-fill-color-product-giving-040:hsl(43, 88%, 70%);
168
+ --t-fill-color-product-giving-050:hsl(43, 88%, 64%);
169
+ --t-fill-color-product-giving-060:hsl(42, 84%, 55%);
170
+ --t-fill-color-product-giving-070:hsl(42, 84%, 48%);
171
+ --t-fill-color-product-giving-080:hsl(42, 100%, 40%);
172
+ --t-fill-color-product-groups-010:hsl(18, 95%, 92%);
173
+ --t-fill-color-product-groups-020:hsl(17, 96%, 80%);
174
+ --t-fill-color-product-groups-030:hsl(17, 96%, 70%);
175
+ --t-fill-color-product-groups-040:hsl(17, 96%, 63%);
176
+ --t-fill-color-product-groups-050:hsl(17, 88%, 55%);
177
+ --t-fill-color-product-groups-060:hsl(12, 70%, 48%);
178
+ --t-fill-color-product-groups-070:hsl(12, 70%, 40%);
179
+ --t-fill-color-product-groups-080:hsl(14, 70%, 34%);
180
+ --t-fill-color-product-home-010:hsl(221, 89%, 93%);
181
+ --t-fill-color-product-home-020:hsl(221, 91%, 91%);
182
+ --t-fill-color-product-home-030:hsl(221, 91%, 87%);
183
+ --t-fill-color-product-home-040:hsl(221, 91%, 62%);
184
+ --t-fill-color-product-home-050:hsl(221, 91%, 55%);
185
+ --t-fill-color-product-home-060:hsl(221, 90%, 50%);
186
+ --t-fill-color-product-home-070:hsl(221, 90%, 45%);
187
+ --t-fill-color-product-home-080:hsl(218, 84%, 25%);
188
+ --t-fill-color-product-people-010:hsl(219, 73%, 91%);
189
+ --t-fill-color-product-people-020:hsl(220, 69%, 81%);
190
+ --t-fill-color-product-people-030:hsl(221, 73%, 71%);
191
+ --t-fill-color-product-people-040:hsl(221, 73%, 65%);
192
+ --t-fill-color-product-people-050:hsl(220, 74%, 57%);
193
+ --t-fill-color-product-people-060:hsl(220, 68%, 51%);
194
+ --t-fill-color-product-people-070:hsl(220, 68%, 41%);
195
+ --t-fill-color-product-people-080:hsl(221, 68%, 31%);
196
+ --t-fill-color-product-publishing-010:hsl(220, 4%, 86%);
197
+ --t-fill-color-product-publishing-020:hsl(222, 10%, 60%);
198
+ --t-fill-color-product-publishing-030:hsl(221, 11%, 50%);
199
+ --t-fill-color-product-publishing-040:hsl(222, 12%, 39%);
200
+ --t-fill-color-product-publishing-050:hsl(220, 12%, 31%);
201
+ --t-fill-color-product-publishing-060:hsl(220, 11%, 26%);
202
+ --t-fill-color-product-publishing-070:hsl(217, 12%, 22%);
203
+ --t-fill-color-product-publishing-080:hsl(214, 11%, 12%);
204
+ --t-fill-color-product-registrations-010:hsl(173, 28%, 89%);
205
+ --t-fill-color-product-registrations-020:hsl(176, 38%, 78%);
206
+ --t-fill-color-product-registrations-030:hsl(176, 37%, 68%);
207
+ --t-fill-color-product-registrations-040:hsl(176, 37%, 60%);
208
+ --t-fill-color-product-registrations-050:hsl(175, 36%, 43%);
209
+ --t-fill-color-product-registrations-060:hsl(175, 51%, 34%);
210
+ --t-fill-color-product-registrations-070:hsl(174, 51%, 28%);
211
+ --t-fill-color-product-registrations-080:hsl(175, 52%, 22%);
212
+ --t-fill-color-product-services-010:hsl(88, 31%, 88%);
213
+ --t-fill-color-product-services-020:hsl(88, 39%, 75%);
214
+ --t-fill-color-product-services-030:hsl(88, 39%, 66%);
215
+ --t-fill-color-product-services-040:hsl(88, 40%, 54%);
216
+ --t-fill-color-product-services-050:hsl(88, 45%, 41%);
217
+ --t-fill-color-product-services-060:hsl(89, 62%, 31%);
218
+ --t-fill-color-product-services-070:hsl(89, 62%, 26%);
219
+ --t-fill-color-product-services-080:hsl(89, 63%, 21%);
220
+ --t-fill-color-product-staff-base:hsl(328, 100%, 45%);
221
+ --t-fill-color-product-staff-dark:hsl(328, 100%, 38%);
222
+ --t-fill-color-product-staff-darker:hsl(328, 100%, 33%);
223
+ --t-fill-color-product-accounts-gradient-brand:linear-gradient(135deg, hsl(203, 86%, 57%), hsl(220, 76%, 57%));
224
+ --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
225
+ --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
226
+ --t-fill-color-product-api-gradient-brand:linear-gradient(180deg, hsl(221, 100%, 62%), hsl(217, 100%, 52%));
227
+ --t-fill-color-product-calendar-gradient-brand:linear-gradient(135deg, hsl(10, 88%, 58%), hsl(8, 60%, 51%));
228
+ --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(5, 80%, 80%), hsl(293, 13%, 74%), hsl(204, 67%, 73%));
229
+ --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(8, 100%, 94%), hsl(285, 18%, 91%), hsl(204, 67%, 92%));
230
+ --t-fill-color-product-cc-gradient-brand:linear-gradient(135deg, hsl(207, 90%, 61%), hsl(123, 38%, 57%));
231
+ --t-fill-color-product-checkins-gradient-brand:linear-gradient(135deg, hsl(283, 38%, 59%), hsl(284, 23%, 48%));
232
+ --t-fill-color-product-checkins-gradient-page:linear-gradient(111.72deg, hsl(283, 21%, 77%) 25%, hsl(227, 36%, 78%) 60%, hsl(204, 67%, 73%));
233
+ --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 22%, 93%), hsl(225, 35%, 93%) 42%, hsl(204, 67%, 92%));
234
+ --t-fill-color-product-giving-gradient-brand:linear-gradient(90deg, hsl(46, 91%, 55%), hsl(41, 89%, 55%));
235
+ --t-fill-color-product-giving-gradient-page:linear-gradient(111.72deg, hsl(42, 84%, 80%), hsl(255, 21%, 89%) 58.5%, hsl(204, 67%, 73%));
236
+ --t-fill-color-product-giving-gradient-tint:linear-gradient(111.72deg, hsl(42, 87%, 94%), hsl(260, 18%, 97%) 58.5%, hsl(204, 67%, 92%));
237
+ --t-fill-color-product-groups-gradient-brand:linear-gradient(135deg, hsl(30, 100%, 59%), hsl(19, 97%, 60%));
238
+ --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(17, 88%, 80%), hsl(293, 13%, 74%), hsl(204, 67%, 73%));
239
+ --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(18, 87%, 94%), hsl(300, 12%, 92%), hsl(204, 67%, 92%));
240
+ --t-fill-color-product-headcounts-gradient-brand:linear-gradient(135deg, hsl(283, 37%, 59%), hsl(285, 23%, 47%));
241
+ --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
242
+ --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
243
+ --t-fill-color-product-musicstand-gradient-brand:linear-gradient(135deg, hsl(204, 64%, 51%), hsl(211, 55%, 51%));
244
+ --t-fill-color-product-people-gradient-brand:linear-gradient(135deg, hsl(205, 86%, 57%), hsl(220, 76%, 57%));
245
+ --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
246
+ --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
247
+ --t-fill-color-product-publishing-gradient-brand:linear-gradient(135deg, hsl(240, 4%, 49%), hsl(240, 6%, 39%));
248
+ --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(217, 5%, 69%), hsl(214, 15%, 69%) 45%, hsl(204, 67%, 73%));
249
+ --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(210, 4%, 91%), hsl(214, 15%, 91%) 45%, hsl(204, 67%, 92%));
250
+ --t-fill-color-product-registrations-gradient-brand:linear-gradient(135deg, hsl(168, 46%, 48%), hsl(175, 35%, 43%));
251
+ --t-fill-color-product-registrations-gradient-page:linear-gradient(111.72deg, hsl(175, 27%, 74%), hsl(196, 46%, 73%) 39.5%, hsl(204, 67%, 73%));
252
+ --t-fill-color-product-registrations-gradient-tint:linear-gradient(111.72deg, hsl(175, 28%, 92%), hsl(196, 46%, 92%) 39.5%, hsl(204, 67%, 92%));
253
+ --t-fill-color-product-services-gradient-brand:linear-gradient(135deg, hsl(96, 49%, 47%), hsl(89, 52%, 39%));
254
+ --t-fill-color-product-services-gradient-page:linear-gradient(111.72deg, hsl(89, 31%, 73%), hsl(122, 29%, 78%) 39.5%, hsl(204, 67%, 73%));
255
+ --t-fill-color-product-services-gradient-tint:linear-gradient(111.72deg, hsl(88, 32%, 92%), hsl(126, 29%, 93%) 39.5%, hsl(204, 67%, 92%));
256
+ --t-fill-color-tag-gray-010:hsl(0, 0%, 93%);
257
+ --t-fill-color-tag-gray-020:hsl(0, 0%, 88%);
258
+ --t-fill-color-tag-gray-030:hsl(0, 0%, 88%);
259
+ --t-fill-color-tag-gray-040:hsl(0, 0%, 81%);
260
+ --t-fill-color-tag-blue-010:hsl(220, 100%, 95%);
261
+ --t-fill-color-tag-blue-020:hsl(221, 100%, 88%);
262
+ --t-fill-color-tag-blue-030:hsl(220, 98%, 81%);
263
+ --t-fill-color-tag-blue-040:hsl(220, 98%, 74%);
264
+ --t-fill-color-tag-aqua-010:hsl(200, 82%, 89%);
265
+ --t-fill-color-tag-aqua-020:hsl(200, 82%, 82%);
266
+ --t-fill-color-tag-aqua-030:hsl(201, 76%, 71%);
267
+ --t-fill-color-tag-aqua-040:hsl(200, 75%, 64%);
268
+ --t-fill-color-tag-teal-010:hsl(163, 53%, 83%);
269
+ --t-fill-color-tag-teal-020:hsl(164, 52%, 76%);
270
+ --t-fill-color-tag-teal-030:hsl(169, 62%, 64%);
271
+ --t-fill-color-tag-teal-040:hsl(169, 62%, 56%);
272
+ --t-fill-color-tag-green-010:hsl(98, 59%, 85%);
273
+ --t-fill-color-tag-green-020:hsl(99, 59%, 78%);
274
+ --t-fill-color-tag-green-030:hsl(112, 57%, 65%);
275
+ --t-fill-color-tag-green-040:hsl(112, 57%, 57%);
276
+ --t-fill-color-tag-yellow-010:hsl(45, 77%, 85%);
277
+ --t-fill-color-tag-yellow-020:hsl(44, 78%, 77%);
278
+ --t-fill-color-tag-yellow-030:hsl(44, 92%, 69%);
279
+ --t-fill-color-tag-yellow-040:hsl(44, 93%, 61%);
280
+ --t-fill-color-tag-orange-010:hsl(22, 89%, 89%);
281
+ --t-fill-color-tag-orange-020:hsl(21, 89%, 82%);
282
+ --t-fill-color-tag-orange-030:hsl(21, 86%, 72%);
283
+ --t-fill-color-tag-orange-040:hsl(21, 86%, 64%);
284
+ --t-fill-color-tag-pink-010:hsl(311, 66%, 92%);
285
+ --t-fill-color-tag-pink-020:hsl(310, 64%, 85%);
286
+ --t-fill-color-tag-pink-030:hsl(324, 78%, 77%);
287
+ --t-fill-color-tag-pink-040:hsl(324, 76%, 70%);
288
+ --t-fill-color-tag-purple-010:hsl(259, 74%, 93%);
289
+ --t-fill-color-tag-purple-020:hsl(259, 74%, 85%);
290
+ --t-fill-color-tag-purple-030:hsl(273, 62%, 76%);
291
+ --t-fill-color-tag-purple-040:hsl(273, 62%, 70%);
292
+ --t-fill-color-tag-magenta-010:hsl(294, 37%, 90%);
293
+ --t-fill-color-tag-magenta-020:hsl(291, 40%, 83%);
294
+ --t-fill-color-tag-magenta-030:hsl(291, 48%, 70%);
295
+ --t-fill-color-tag-magenta-040:hsl(292, 48%, 63%);
296
+ --t-fill-color-tag-indigo-010:hsl(234, 78%, 93%);
297
+ --t-fill-color-tag-indigo-020:hsl(233, 79%, 87%);
298
+ --t-fill-color-tag-indigo-030:hsl(233, 77%, 81%);
299
+ --t-fill-color-tag-indigo-040:hsl(236, 79%, 74%);
300
+ --t-fill-color-button-neutral-solid-default:hsl(0, 0%, 93%);
301
+ --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 88%);
302
+ --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 81%);
303
+ --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 95%);
304
+ --t-fill-color-button-neutral-outline-dim-default:hsla(0, 0%, 100%, 0);
305
+ --t-fill-color-button-neutral-outline-dim-hover:hsl(0, 0%, 95%);
306
+ --t-fill-color-button-neutral-outline-dim-active:hsl(0, 0%, 93%);
307
+ --t-fill-color-button-neutral-outline-dim-disabled:hsl(0, 0%, 98%);
308
+ --t-fill-color-button-neutral-ghost-default:hsla(0, 0%, 100%, 0);
309
+ --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 95%);
310
+ --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 93%);
311
+ --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 100%, 0);
312
+ --t-fill-color-button-neutral-responsive-header-default:hsla(0, 0%, 0%, 0.1);
313
+ --t-fill-color-button-neutral-responsive-header-hover:hsla(0, 0%, 0%, 0.2);
314
+ --t-fill-color-button-neutral-responsive-header-active:hsla(0, 0%, 0%, 0.3);
315
+ --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 0%, 0.05);
316
+ --t-fill-color-button-interaction-solid-default:hsl(204, 100%, 40%);
317
+ --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 35%);
318
+ --t-fill-color-button-interaction-solid-active:hsl(204, 100%, 30%);
319
+ --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 95%);
320
+ --t-fill-color-button-interaction-outline-dim-default:hsla(0, 0%, 100%, 0);
321
+ --t-fill-color-button-interaction-outline-dim-hover:hsl(204, 100%, 97%);
322
+ --t-fill-color-button-interaction-outline-dim-active:hsl(203, 94%, 94%);
323
+ --t-fill-color-button-interaction-outline-dim-disabled:hsl(0, 0%, 98%);
324
+ --t-fill-color-button-interaction-ghost-default:hsla(0, 0%, 100%, 0);
325
+ --t-fill-color-button-interaction-ghost-hover:hsl(204, 100%, 97%);
326
+ --t-fill-color-button-interaction-ghost-active:hsl(203, 94%, 94%);
327
+ --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 100%, 0);
328
+ --t-fill-color-button-delete-solid-default:hsl(8, 60%, 47%);
329
+ --t-fill-color-button-delete-solid-hover:hsl(8, 60%, 45%);
330
+ --t-fill-color-button-delete-solid-active:hsl(8, 60%, 40%);
331
+ --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 95%);
332
+ --t-fill-color-button-delete-outline-dim-default:hsla(0, 0%, 100%, 0);
333
+ --t-fill-color-button-delete-outline-dim-hover:hsl(7, 60%, 97%);
334
+ --t-fill-color-button-delete-outline-dim-active:hsl(9, 59%, 93%);
335
+ --t-fill-color-button-delete-outline-dim-disabled:hsl(0, 0%, 98%);
336
+ --t-fill-color-button-delete-ghost-default:hsla(0, 0%, 100%, 0);
337
+ --t-fill-color-button-delete-ghost-hover:hsl(7, 60%, 97%);
338
+ --t-fill-color-button-delete-ghost-active:hsl(9, 59%, 93%);
339
+ --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 100%, 0);
340
+ --t-fill-color-button-pill-default:hsl(0, 0%, 93%);
341
+ --t-fill-color-button-pill-hover:hsl(0, 0%, 88%);
342
+ --t-fill-color-button-pill-active:hsl(0, 0%, 88%);
343
+ --t-fill-color-button-pill-disabled:hsl(0, 0%, 93%);
344
+ --t-fill-color-transparency-light-010:hsla(0, 0%, 100%, 0.1);
345
+ --t-fill-color-transparency-light-020:hsla(0, 0%, 100%, 0.2);
346
+ --t-fill-color-transparency-light-030:hsla(0, 0%, 100%, 0.3);
347
+ --t-fill-color-transparency-light-040:hsla(0, 0%, 100%, 0.4);
348
+ --t-fill-color-transparency-light-050:hsla(0, 0%, 100%, 0.5);
349
+ --t-fill-color-transparency-light-060:hsla(0, 0%, 100%, 0.6);
350
+ --t-fill-color-transparency-light-070:hsla(0, 0%, 100%, 0.7);
351
+ --t-fill-color-transparency-light-080:hsla(0, 0%, 100%, 0.8);
352
+ --t-fill-color-transparency-light-090:hsla(0, 0%, 100%, 0.9);
353
+ --t-fill-color-transparency-dark-010:hsla(0, 0%, 0%, 0.1);
354
+ --t-fill-color-transparency-dark-020:hsla(0, 0%, 0%, 0.2);
355
+ --t-fill-color-transparency-dark-030:hsla(0, 0%, 0%, 0.3);
356
+ --t-fill-color-transparency-dark-040:hsla(0, 0%, 0%, 0.4);
357
+ --t-fill-color-transparency-dark-050:hsla(0, 0%, 0%, 0.5);
358
+ --t-fill-color-transparency-dark-060:hsla(0, 0%, 0%, 0.6);
359
+ --t-fill-color-transparency-dark-070:hsla(0, 0%, 0%, 0.7);
360
+ --t-fill-color-transparency-dark-080:hsla(0, 0%, 0%, 0.8);
361
+ --t-fill-color-transparency-dark-090:hsla(0, 0%, 0%, 0.9);
362
+ --t-surface-color-card:hsl(0, 0%, 100%);
363
+ --t-surface-color-canvas:hsl(0, 0%, 100%);
364
+ --t-border-color-default-base:hsl(0, 0%, 88%);
365
+ --t-border-color-default-dark:hsl(0, 0%, 81%);
366
+ --t-border-color-default-darker:hsl(0, 0%, 68%);
367
+ --t-border-color-default-darkest:hsl(0, 0%, 58%);
368
+ --t-border-color-default-disabled:hsl(0, 0%, 88%);
369
+ --t-border-color-default-dim:hsl(0, 0%, 95%);
370
+ --t-border-color-default-white:hsl(0, 0%, 100%);
371
+ --t-border-color-status-neutral:hsl(0, 0%, 58%);
372
+ --t-border-color-status-info:hsl(204, 100%, 40%);
373
+ --t-border-color-status-success:hsl(97, 57%, 40%);
374
+ --t-border-color-status-warning:hsl(42, 84%, 63%);
375
+ --t-border-color-status-error:hsl(8, 60%, 47%);
376
+ --t-border-color-button-neutral:hsl(0, 0%, 88%);
377
+ --t-border-color-button-info:hsl(204, 100%, 40%);
378
+ --t-border-color-button-create:hsl(96, 57%, 33%);
379
+ --t-border-color-button-delete:hsl(8, 60%, 47%);
380
+ --t-border-color-control-neutral:hsl(0, 0%, 68%);
381
+ --t-border-color-control-info:hsl(204, 100%, 40%);
382
+ --t-border-color-control-success:hsl(97, 57%, 40%);
383
+ --t-border-color-control-warning:hsl(42, 84%, 63%);
384
+ --t-border-color-control-error:hsl(8, 60%, 47%);
385
+ --t-border-color-control-disabled:hsl(0, 0%, 88%);
386
+ --t-form-background-color:var(--t-fill-color-neutral-100);
387
+ --t-form-background-color-disabled:var(--t-fill-color-neutral-070);
388
+ --t-form-background-color-error:var(--t-fill-color-neutral-100);
389
+ --t-form-background-color-readonly:var(--t-fill-color-neutral-070);
390
+ --t-form-border-color:var(--t-border-color-default-base);
391
+ --t-form-border-color-disabled:var(--t-border-color-default-base);
392
+ --t-form-border-color-error:var(--t-border-color-status-error);
393
+ --t-form-border-color-focus:var(--t-fill-color-interaction-default);
394
+ --t-form-border-color-hover:var(--t-border-color-default-dark);
395
+ --t-form-border-color-readonly:hsla(0, 0%, 100%, 0);
396
+ --t-form-border-radius:var(--t-border-radius-md);
397
+ --t-form-border-width:var(--t-border-width-default);
398
+ --t-form-font-color:var(--t-text-color-default-primary);
399
+ --t-form-font-color-disabled:var(--t-text-color-default-disabled);
400
+ --t-form-font-color-error:var(--t-text-color-status-error);
401
+ --t-form-font-color-readonly:var(--t-text-color-default-primary);
402
+ --t-form-picker-icon-color:var(--t-icon-color-default-primary);
403
+ --t-form-placeholder-color:var(--t-text-color-default-placeholder);
404
+ --t-border-size-default:var(--t-border-width-default);
405
+ --t-border-size-thick:var(--t-border-width-thick);
406
+ --t-font-weight-semi-bold:var(--t-font-weight-semibold);
407
+ --t-icon-color-status-neutral-dark:hsl(0, 0%, 24%);
408
+ --t-icon-color-status-info-secondary:hsl(204, 100%, 40%);
409
+ --t-fill-color-alert-info:hsl(204, 94%, 49%);
410
+ --t-fill-color-alert-success:hsl(122, 60%, 41%);
411
+ --t-fill-color-alert-warning:hsl(43, 96%, 58%);
412
+ --t-fill-color-alert-error:hsl(4, 77%, 59%);
413
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 98%);
414
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 98%);
415
+ --t-fill-color-button-create-solid-default:hsl(96, 57%, 33%);
416
+ --t-fill-color-button-create-solid-hover:hsl(97, 57%, 28%);
417
+ --t-fill-color-button-create-solid-active:hsl(97, 57%, 23%);
418
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 81%);
419
+ --t-fill-color-button-create-ghost-default:hsla(0, 0%, 100%, 0);
420
+ --t-fill-color-button-create-ghost-hover:hsl(96, 60%, 95%);
421
+ --t-fill-color-button-create-ghost-active:hsl(97, 57%, 90%);
422
+ --t-fill-color-button-create-ghost-disabled:hsla(0, 0%, 100%, 0);
423
+ }
424
+
425
+ :root[data-color-mode="dark"]{
426
+ color-scheme:dark;
427
+ --t-text-color-default-headline:hsl(0, 0%, 94%);
428
+ --t-text-color-default-primary:hsl(0, 0%, 80%);
429
+ --t-text-color-default-secondary:hsl(0, 0%, 54%);
430
+ --t-text-color-default-disabled:hsl(0, 0%, 25%);
431
+ --t-text-color-default-placeholder:hsl(0, 0%, 38%);
432
+ --t-text-color-default-inverted:hsl(0, 0%, 100%);
433
+ --t-text-color-interaction-primary:hsl(204, 68%, 55%);
434
+ --t-text-color-interaction-hover:hsl(204, 68%, 50%);
435
+ --t-text-color-interaction-active:hsl(204, 68%, 45%);
436
+ --t-text-color-interaction-visited:hsl(204, 68%, 50%);
437
+ --t-text-color-status-neutral:hsl(0, 0%, 80%);
438
+ --t-text-color-status-info:hsl(204, 68%, 55%);
439
+ --t-text-color-status-success:hsl(97, 57%, 41%);
440
+ --t-text-color-status-warning:hsl(42, 84%, 55%);
441
+ --t-text-color-status-error:hsl(8, 61%, 61%);
442
+ --t-text-color-tag-subtle-gray:hsl(0, 0%, 80%);
443
+ --t-text-color-tag-subtle-blue:hsl(223, 46%, 84%);
444
+ --t-text-color-tag-subtle-indigo:hsl(233, 78%, 84%);
445
+ --t-text-color-tag-subtle-aqua:hsl(208, 77%, 85%);
446
+ --t-text-color-tag-subtle-teal:hsl(180, 95%, 74%);
447
+ --t-text-color-tag-subtle-green:hsl(99, 93%, 84%);
448
+ --t-text-color-tag-subtle-yellow:hsl(29, 100%, 85%);
449
+ --t-text-color-tag-subtle-orange:hsl(18, 100%, 85%);
450
+ --t-text-color-tag-subtle-pink:hsl(328, 89%, 89%);
451
+ --t-text-color-tag-subtle-purple:hsl(268, 70%, 88%);
452
+ --t-text-color-tag-subtle-magenta:hsl(285, 70%, 88%);
453
+ --t-text-color-tag-bold-gray:hsl(0, 0%, 17%);
454
+ --t-text-color-tag-bold-indigo:hsl(241, 59%, 28%);
455
+ --t-text-color-tag-bold-blue:hsl(224, 47%, 31%);
456
+ --t-text-color-tag-bold-aqua:hsl(209, 77%, 22%);
457
+ --t-text-color-tag-bold-teal:hsl(180, 95%, 15%);
458
+ --t-text-color-tag-bold-green:hsl(100, 93%, 17%);
459
+ --t-text-color-tag-bold-yellow:hsl(29, 100%, 23%);
460
+ --t-text-color-tag-bold-orange:hsl(18, 100%, 18%);
461
+ --t-text-color-tag-bold-pink:hsl(327, 88%, 20%);
462
+ --t-text-color-tag-bold-purple:hsl(268, 71%, 27%);
463
+ --t-text-color-tag-bold-magenta:hsl(285, 71%, 20%);
464
+ --t-icon-color-default-primary:hsl(0, 0%, 80%);
465
+ --t-icon-color-default-secondary:hsl(0, 0%, 54%);
466
+ --t-icon-color-default-dim:hsl(0, 0%, 38%);
467
+ --t-icon-color-default-disabled:hsl(0, 0%, 25%);
468
+ --t-icon-color-default-inverted:hsl(0, 0%, 100%);
469
+ --t-icon-color-status-neutral-primary:hsl(0, 0%, 54%);
470
+ --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
471
+ --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
472
+ --t-icon-color-status-info-primary:hsl(204, 68%, 55%);
473
+ --t-icon-color-status-success-primary:hsl(96, 57%, 33%);
474
+ --t-icon-color-status-success-secondary:hsl(97, 57%, 40%);
475
+ --t-icon-color-status-warning-primary:hsl(42, 84%, 49%);
476
+ --t-icon-color-status-error-primary:hsl(8, 61%, 61%);
477
+ --t-fill-color-neutral-100:hsl(0, 0%, 10%);
478
+ --t-fill-color-neutral-000:hsl(0, 0%, 98%);
479
+ --t-fill-color-neutral-010:hsl(0, 0%, 88%);
480
+ --t-fill-color-neutral-020:hsl(0, 0%, 68%);
481
+ --t-fill-color-neutral-025:hsl(0, 0%, 58%);
482
+ --t-fill-color-neutral-030:hsl(0, 0%, 50%);
483
+ --t-fill-color-neutral-040:hsl(0, 0%, 32%);
484
+ --t-fill-color-neutral-050:hsl(0, 0%, 24%);
485
+ --t-fill-color-neutral-060:hsl(0, 0%, 19%);
486
+ --t-fill-color-neutral-070:hsl(0, 0%, 17%);
487
+ --t-fill-color-neutral-080:hsl(0, 0%, 15%);
488
+ --t-fill-color-neutral-090:hsl(0, 0%, 12%);
489
+ --t-fill-color-interaction-default:hsl(204, 100%, 35%);
490
+ --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
491
+ --t-fill-color-interaction-active:hsl(204, 80%, 45%);
492
+ --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
493
+ --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
494
+ --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
495
+ --t-fill-color-control-primary:hsl(204, 100%, 35%);
496
+ --t-fill-color-control-secondary:hsl(97, 57%, 40%);
497
+ --t-fill-color-control-error:hsl(8, 60%, 47%);
498
+ --t-fill-color-control-disabled:hsl(0, 0%, 20%);
499
+ --t-fill-color-status-neutral-solid:hsl(0, 0%, 24%);
500
+ --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
501
+ --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
502
+ --t-fill-color-status-info-solid:hsl(204, 100%, 35%);
503
+ --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
504
+ --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
505
+ --t-fill-color-status-success-solid:hsl(96, 57%, 33%);
506
+ --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
507
+ --t-fill-color-status-success-dim:hsl(120, 12%, 14%);
508
+ --t-fill-color-status-warning-solid:hsl(42, 84%, 63%);
509
+ --t-fill-color-status-warning-ghost:hsl(41, 18%, 17%);
510
+ --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
511
+ --t-fill-color-status-error-solid:hsl(8, 60%, 47%);
512
+ --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
513
+ --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
514
+ --t-fill-color-tooltip-primary:hsla(0, 0%, 24%, 0.9);
515
+ --t-fill-color-product-accounts-010:hsl(212, 54%, 93%);
516
+ --t-fill-color-product-accounts-020:hsl(209, 53%, 90%);
517
+ --t-fill-color-product-accounts-030:hsl(210, 56%, 70%);
518
+ --t-fill-color-product-accounts-040:hsl(210, 54%, 60%);
519
+ --t-fill-color-product-accounts-050:hsl(210, 55%, 50%);
520
+ --t-fill-color-product-accounts-060:hsl(210, 65%, 40%);
521
+ --t-fill-color-product-accounts-070:hsl(211, 70%, 32%);
522
+ --t-fill-color-product-accounts-080:hsl(210, 75%, 25%);
523
+ --t-fill-color-product-calendar-010:hsl(8, 61%, 90%);
524
+ --t-fill-color-product-calendar-020:hsl(8, 61%, 70%);
525
+ --t-fill-color-product-calendar-030:hsl(8, 72%, 59%);
526
+ --t-fill-color-product-calendar-040:hsl(8, 65%, 55%);
527
+ --t-fill-color-product-calendar-050:hsl(9, 61%, 50%);
528
+ --t-fill-color-product-calendar-060:hsl(8, 65%, 42%);
529
+ --t-fill-color-product-calendar-070:hsl(7, 65%, 34%);
530
+ --t-fill-color-product-calendar-080:hsl(9, 61%, 27%);
531
+ --t-fill-color-product-checkins-010:hsl(285, 20%, 92%);
532
+ --t-fill-color-product-checkins-020:hsl(283, 22%, 75%);
533
+ --t-fill-color-product-checkins-030:hsl(284, 22%, 64%);
534
+ --t-fill-color-product-checkins-040:hsl(283, 22%, 55%);
535
+ --t-fill-color-product-checkins-050:hsl(283, 22%, 48%);
536
+ --t-fill-color-product-checkins-060:hsl(283, 27%, 42%);
537
+ --t-fill-color-product-checkins-070:hsl(284, 33%, 34%);
538
+ --t-fill-color-product-checkins-080:hsl(283, 33%, 27%);
539
+ --t-fill-color-product-giving-010:hsl(41, 95%, 93%);
540
+ --t-fill-color-product-giving-020:hsl(42, 95%, 83%);
541
+ --t-fill-color-product-giving-030:hsl(43, 95%, 75%);
542
+ --t-fill-color-product-giving-040:hsl(43, 88%, 70%);
543
+ --t-fill-color-product-giving-050:hsl(43, 88%, 64%);
544
+ --t-fill-color-product-giving-060:hsl(42, 84%, 55%);
545
+ --t-fill-color-product-giving-070:hsl(42, 84%, 48%);
546
+ --t-fill-color-product-giving-080:hsl(42, 100%, 40%);
547
+ --t-fill-color-product-groups-010:hsl(18, 95%, 92%);
548
+ --t-fill-color-product-groups-020:hsl(17, 96%, 80%);
549
+ --t-fill-color-product-groups-030:hsl(17, 96%, 70%);
550
+ --t-fill-color-product-groups-040:hsl(17, 96%, 63%);
551
+ --t-fill-color-product-groups-050:hsl(17, 88%, 55%);
552
+ --t-fill-color-product-groups-060:hsl(12, 70%, 48%);
553
+ --t-fill-color-product-groups-070:hsl(12, 70%, 40%);
554
+ --t-fill-color-product-groups-080:hsl(14, 70%, 34%);
555
+ --t-fill-color-product-home-010:hsl(221, 89%, 93%);
556
+ --t-fill-color-product-home-020:hsl(221, 91%, 91%);
557
+ --t-fill-color-product-home-030:hsl(221, 91%, 87%);
558
+ --t-fill-color-product-home-040:hsl(221, 91%, 62%);
559
+ --t-fill-color-product-home-050:hsl(221, 91%, 55%);
560
+ --t-fill-color-product-home-060:hsl(221, 90%, 50%);
561
+ --t-fill-color-product-home-070:hsl(221, 90%, 45%);
562
+ --t-fill-color-product-home-080:hsl(218, 84%, 25%);
563
+ --t-fill-color-product-people-010:hsl(219, 73%, 91%);
564
+ --t-fill-color-product-people-020:hsl(220, 69%, 81%);
565
+ --t-fill-color-product-people-030:hsl(221, 73%, 71%);
566
+ --t-fill-color-product-people-040:hsl(221, 73%, 65%);
567
+ --t-fill-color-product-people-050:hsl(220, 74%, 57%);
568
+ --t-fill-color-product-people-060:hsl(220, 68%, 51%);
569
+ --t-fill-color-product-people-070:hsl(220, 68%, 41%);
570
+ --t-fill-color-product-people-080:hsl(221, 68%, 31%);
571
+ --t-fill-color-product-publishing-010:hsl(220, 4%, 86%);
572
+ --t-fill-color-product-publishing-020:hsl(222, 10%, 60%);
573
+ --t-fill-color-product-publishing-030:hsl(221, 11%, 50%);
574
+ --t-fill-color-product-publishing-040:hsl(222, 12%, 39%);
575
+ --t-fill-color-product-publishing-050:hsl(220, 12%, 31%);
576
+ --t-fill-color-product-publishing-060:hsl(220, 11%, 26%);
577
+ --t-fill-color-product-publishing-070:hsl(217, 12%, 22%);
578
+ --t-fill-color-product-publishing-080:hsl(214, 11%, 12%);
579
+ --t-fill-color-product-registrations-010:hsl(173, 28%, 89%);
580
+ --t-fill-color-product-registrations-020:hsl(176, 38%, 78%);
581
+ --t-fill-color-product-registrations-030:hsl(176, 37%, 68%);
582
+ --t-fill-color-product-registrations-040:hsl(176, 37%, 60%);
583
+ --t-fill-color-product-registrations-050:hsl(175, 36%, 43%);
584
+ --t-fill-color-product-registrations-060:hsl(175, 51%, 34%);
585
+ --t-fill-color-product-registrations-070:hsl(174, 51%, 28%);
586
+ --t-fill-color-product-registrations-080:hsl(175, 52%, 22%);
587
+ --t-fill-color-product-services-010:hsl(88, 31%, 88%);
588
+ --t-fill-color-product-services-020:hsl(88, 39%, 75%);
589
+ --t-fill-color-product-services-030:hsl(88, 39%, 66%);
590
+ --t-fill-color-product-services-040:hsl(88, 40%, 54%);
591
+ --t-fill-color-product-services-050:hsl(88, 45%, 41%);
592
+ --t-fill-color-product-services-060:hsl(89, 62%, 31%);
593
+ --t-fill-color-product-services-070:hsl(89, 62%, 26%);
594
+ --t-fill-color-product-services-080:hsl(89, 63%, 21%);
595
+ --t-fill-color-product-staff-base:hsl(328, 100%, 45%);
596
+ --t-fill-color-product-staff-dark:hsl(328, 100%, 38%);
597
+ --t-fill-color-product-staff-darker:hsl(328, 100%, 33%);
598
+ --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
599
+ --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
600
+ --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
601
+ --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(9, 29%, 13%), hsl(276, 8%, 12%), hsl(203, 37%, 11%));
602
+ --t-fill-color-product-checkins-gradient-page:linear-gradient(111.72deg, hsl(285, 17%, 18%) 25%, hsl(263, 15%, 17%) 60%, hsl(204, 70%, 12%));
603
+ --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 11%, 14%), hsl(266, 10%, 14%) 42%, hsl(203, 37%, 11%));
604
+ --t-fill-color-product-giving-gradient-page:linear-gradient(111.72deg, hsl(43, 80%, 16%), hsl(267, 15%, 14%) 58.5%, hsl(204, 70%, 12%));
605
+ --t-fill-color-product-giving-gradient-tint:linear-gradient(111.72deg, hsl(44, 49%, 13%), hsl(264, 8%, 12%) 58.5%, hsl(203, 37%, 11%));
606
+ --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(23, 46%, 18%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
607
+ --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(23, 29%, 14%), hsl(276, 7%, 14%), hsl(203, 37%, 11%));
608
+ --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
609
+ --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
610
+ --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
611
+ --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
612
+ --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(225, 11%, 22%), hsl(227, 20%, 18%) 45%, hsl(204, 70%, 12%));
613
+ --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(220, 7%, 16%), hsl(227, 12%, 14%) 45%, hsl(203, 37%, 11%));
614
+ --t-fill-color-product-registrations-gradient-page:linear-gradient(111.72deg, hsl(174, 34%, 18%), hsl(187, 39%, 14%) 39.5%, hsl(204, 70%, 12%));
615
+ --t-fill-color-product-registrations-gradient-tint:linear-gradient(111.72deg, hsl(173, 22%, 15%), hsl(185, 21%, 12%) 39.5%, hsl(203, 37%, 11%));
616
+ --t-fill-color-product-services-gradient-page:linear-gradient(111.72deg, hsl(87, 26%, 18%), hsl(88, 25%, 15%) 39.5%, hsl(204, 70%, 12%));
617
+ --t-fill-color-product-services-gradient-tint:linear-gradient(111.72deg, hsl(85, 17%, 14%), hsl(87, 14%, 13%) 39.5%, hsl(203, 37%, 11%));
618
+ --t-fill-color-tag-gray-010:hsl(0, 0%, 19%);
619
+ --t-fill-color-tag-gray-020:hsl(0, 0%, 17%);
620
+ --t-fill-color-tag-gray-030:hsl(0, 0%, 68%);
621
+ --t-fill-color-tag-gray-040:hsl(0, 0%, 58%);
622
+ --t-fill-color-tag-blue-010:hsl(229, 22%, 24%);
623
+ --t-fill-color-tag-blue-020:hsl(233, 27%, 23%);
624
+ --t-fill-color-tag-blue-030:hsl(220, 98%, 81%);
625
+ --t-fill-color-tag-blue-040:hsl(220, 98%, 74%);
626
+ --t-fill-color-tag-aqua-010:hsl(217, 25%, 24%);
627
+ --t-fill-color-tag-aqua-020:hsl(222, 27%, 22%);
628
+ --t-fill-color-tag-aqua-030:hsl(201, 76%, 71%);
629
+ --t-fill-color-tag-aqua-040:hsl(200, 75%, 64%);
630
+ --t-fill-color-tag-teal-010:hsl(150, 20%, 24%);
631
+ --t-fill-color-tag-teal-020:hsl(147, 16%, 22%);
632
+ --t-fill-color-tag-teal-030:hsl(169, 62%, 64%);
633
+ --t-fill-color-tag-teal-040:hsl(169, 62%, 56%);
634
+ --t-fill-color-tag-green-010:hsl(108, 21%, 22%);
635
+ --t-fill-color-tag-green-020:hsl(109, 22%, 20%);
636
+ --t-fill-color-tag-green-030:hsl(112, 57%, 65%);
637
+ --t-fill-color-tag-green-040:hsl(112, 57%, 57%);
638
+ --t-fill-color-tag-yellow-010:hsl(38, 27%, 23%);
639
+ --t-fill-color-tag-yellow-020:hsl(37, 27%, 21%);
640
+ --t-fill-color-tag-yellow-030:hsl(44, 92%, 69%);
641
+ --t-fill-color-tag-yellow-040:hsl(44, 93%, 61%);
642
+ --t-fill-color-tag-orange-010:hsl(12, 25%, 23%);
643
+ --t-fill-color-tag-orange-020:hsl(10, 29%, 21%);
644
+ --t-fill-color-tag-orange-030:hsl(21, 86%, 72%);
645
+ --t-fill-color-tag-orange-040:hsl(21, 86%, 64%);
646
+ --t-fill-color-tag-pink-010:hsl(331, 22%, 24%);
647
+ --t-fill-color-tag-pink-020:hsl(338, 25%, 21%);
648
+ --t-fill-color-tag-pink-030:hsl(324, 78%, 77%);
649
+ --t-fill-color-tag-pink-040:hsl(324, 76%, 70%);
650
+ --t-fill-color-tag-purple-010:hsl(260, 25%, 24%);
651
+ --t-fill-color-tag-purple-020:hsl(254, 27%, 22%);
652
+ --t-fill-color-tag-purple-030:hsl(273, 62%, 76%);
653
+ --t-fill-color-tag-purple-040:hsl(273, 62%, 70%);
654
+ --t-fill-color-tag-magenta-010:hsl(276, 18%, 22%);
655
+ --t-fill-color-tag-magenta-020:hsl(277, 18%, 20%);
656
+ --t-fill-color-tag-magenta-030:hsl(291, 48%, 70%);
657
+ --t-fill-color-tag-magenta-040:hsl(292, 48%, 63%);
658
+ --t-fill-color-tag-indigo-010:hsl(233, 30%, 27%);
659
+ --t-fill-color-tag-indigo-020:hsl(233, 30%, 23%);
660
+ --t-fill-color-tag-indigo-030:hsl(233, 77%, 81%);
661
+ --t-fill-color-tag-indigo-040:hsl(236, 79%, 74%);
662
+ --t-fill-color-button-neutral-solid-default:hsl(0, 0%, 19%);
663
+ --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
664
+ --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
665
+ --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
666
+ --t-fill-color-button-neutral-outline-dim-default:hsl(0, 0%, 15%);
667
+ --t-fill-color-button-neutral-outline-dim-hover:hsl(0, 0%, 17%);
668
+ --t-fill-color-button-neutral-outline-dim-active:hsl(0, 0%, 19%);
669
+ --t-fill-color-button-neutral-outline-dim-disabled:hsl(0, 0%, 12%);
670
+ --t-fill-color-button-neutral-ghost-default:hsla(0, 0%, 0%, 0);
671
+ --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
672
+ --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
673
+ --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
674
+ --t-fill-color-button-neutral-responsive-header-default:hsla(0, 0%, 0%, 0.1);
675
+ --t-fill-color-button-neutral-responsive-header-hover:hsla(0, 0%, 0%, 0.2);
676
+ --t-fill-color-button-neutral-responsive-header-active:hsla(0, 0%, 0%, 0.3);
677
+ --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
678
+ --t-fill-color-button-interaction-solid-default:hsl(204, 100%, 35%);
679
+ --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
680
+ --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
681
+ --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
682
+ --t-fill-color-button-interaction-outline-dim-default:hsl(204, 32%, 15%);
683
+ --t-fill-color-button-interaction-outline-dim-hover:hsl(204, 39%, 17%);
684
+ --t-fill-color-button-interaction-outline-dim-active:hsl(205, 45%, 18%);
685
+ --t-fill-color-button-interaction-outline-dim-disabled:hsl(0, 0%, 12%);
686
+ --t-fill-color-button-interaction-ghost-default:hsla(0, 0%, 0%, 0);
687
+ --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
688
+ --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
689
+ --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
690
+ --t-fill-color-button-delete-solid-default:hsl(8, 60%, 40%);
691
+ --t-fill-color-button-delete-solid-hover:hsl(8, 60%, 45%);
692
+ --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
693
+ --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
694
+ --t-fill-color-button-delete-outline-dim-default:hsl(8, 20%, 16%);
695
+ --t-fill-color-button-delete-outline-dim-hover:hsl(9, 24%, 17%);
696
+ --t-fill-color-button-delete-outline-dim-active:hsl(9, 29%, 19%);
697
+ --t-fill-color-button-delete-outline-dim-disabled:hsl(0, 0%, 12%);
698
+ --t-fill-color-button-delete-ghost-default:hsla(0, 0%, 0%, 0);
699
+ --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
700
+ --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
701
+ --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
702
+ --t-fill-color-button-pill-default:hsl(0, 0%, 18%);
703
+ --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
704
+ --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
705
+ --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
706
+ --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
707
+ --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
708
+ --t-fill-color-transparency-light-030:hsla(0, 0%, 0%, 0.3);
709
+ --t-fill-color-transparency-light-040:hsla(0, 0%, 0%, 0.4);
710
+ --t-fill-color-transparency-light-050:hsla(0, 0%, 0%, 0.5);
711
+ --t-fill-color-transparency-light-060:hsla(0, 0%, 0%, 0.6);
712
+ --t-fill-color-transparency-light-070:hsla(0, 0%, 0%, 0.7);
713
+ --t-fill-color-transparency-light-080:hsla(0, 0%, 0%, 0.8);
714
+ --t-fill-color-transparency-light-090:hsla(0, 0%, 0%, 0.9);
715
+ --t-fill-color-transparency-dark-010:hsla(0, 0%, 100%, 0.1);
716
+ --t-fill-color-transparency-dark-020:hsla(0, 0%, 100%, 0.2);
717
+ --t-fill-color-transparency-dark-030:hsla(0, 0%, 100%, 0.3);
718
+ --t-fill-color-transparency-dark-040:hsla(0, 0%, 100%, 0.4);
719
+ --t-fill-color-transparency-dark-050:hsla(0, 0%, 100%, 0.5);
720
+ --t-fill-color-transparency-dark-060:hsla(0, 0%, 100%, 0.6);
721
+ --t-fill-color-transparency-dark-070:hsla(0, 0%, 100%, 0.7);
722
+ --t-fill-color-transparency-dark-080:hsla(0, 0%, 100%, 0.8);
723
+ --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
724
+ --t-surface-color-card:hsl(0, 0%, 12%);
725
+ --t-surface-color-canvas:hsl(0, 0%, 10%);
726
+ --t-border-color-default-base:hsl(0, 0%, 21%);
727
+ --t-border-color-default-dark:hsl(0, 0%, 25%);
728
+ --t-border-color-default-darker:hsl(0, 0%, 33%);
729
+ --t-border-color-default-darkest:hsl(0, 0%, 38%);
730
+ --t-border-color-default-disabled:hsl(0, 0%, 21%);
731
+ --t-border-color-default-dim:hsl(0, 0%, 16%);
732
+ --t-border-color-default-white:hsl(0, 0%, 12%);
733
+ --t-border-color-status-neutral:hsl(0, 0%, 38%);
734
+ --t-border-color-status-info:hsl(204, 100%, 35%);
735
+ --t-border-color-status-success:hsl(97, 57%, 40%);
736
+ --t-border-color-status-warning:hsl(42, 84%, 63%);
737
+ --t-border-color-status-error:hsl(8, 60%, 47%);
738
+ --t-border-color-button-neutral:hsl(0, 0%, 19%);
739
+ --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
740
+ --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
741
+ --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
742
+ --t-border-color-control-neutral:hsl(0, 0%, 33%);
743
+ --t-border-color-control-info:hsl(204, 100%, 35%);
744
+ --t-border-color-control-success:hsl(97, 57%, 40%);
745
+ --t-border-color-control-warning:hsl(42, 84%, 63%);
746
+ --t-border-color-control-error:hsl(8, 60%, 47%);
747
+ --t-border-color-control-disabled:hsl(0, 0%, 21%);
748
+ }
749
+
750
+ @media (prefers-color-scheme: dark){
751
+ :root[data-color-mode="system"]{
752
+ color-scheme:dark;
753
+ --t-text-color-default-headline:hsl(0, 0%, 94%);
754
+ --t-text-color-default-primary:hsl(0, 0%, 80%);
755
+ --t-text-color-default-secondary:hsl(0, 0%, 54%);
756
+ --t-text-color-default-disabled:hsl(0, 0%, 25%);
757
+ --t-text-color-default-placeholder:hsl(0, 0%, 38%);
758
+ --t-text-color-default-inverted:hsl(0, 0%, 100%);
759
+ --t-text-color-interaction-primary:hsl(204, 68%, 55%);
760
+ --t-text-color-interaction-hover:hsl(204, 68%, 50%);
761
+ --t-text-color-interaction-active:hsl(204, 68%, 45%);
762
+ --t-text-color-interaction-visited:hsl(204, 68%, 50%);
763
+ --t-text-color-status-neutral:hsl(0, 0%, 80%);
764
+ --t-text-color-status-info:hsl(204, 68%, 55%);
765
+ --t-text-color-status-success:hsl(97, 57%, 41%);
766
+ --t-text-color-status-warning:hsl(42, 84%, 55%);
767
+ --t-text-color-status-error:hsl(8, 61%, 61%);
768
+ --t-text-color-tag-subtle-gray:hsl(0, 0%, 80%);
769
+ --t-text-color-tag-subtle-blue:hsl(223, 46%, 84%);
770
+ --t-text-color-tag-subtle-indigo:hsl(233, 78%, 84%);
771
+ --t-text-color-tag-subtle-aqua:hsl(208, 77%, 85%);
772
+ --t-text-color-tag-subtle-teal:hsl(180, 95%, 74%);
773
+ --t-text-color-tag-subtle-green:hsl(99, 93%, 84%);
774
+ --t-text-color-tag-subtle-yellow:hsl(29, 100%, 85%);
775
+ --t-text-color-tag-subtle-orange:hsl(18, 100%, 85%);
776
+ --t-text-color-tag-subtle-pink:hsl(328, 89%, 89%);
777
+ --t-text-color-tag-subtle-purple:hsl(268, 70%, 88%);
778
+ --t-text-color-tag-subtle-magenta:hsl(285, 70%, 88%);
779
+ --t-text-color-tag-bold-gray:hsl(0, 0%, 17%);
780
+ --t-text-color-tag-bold-indigo:hsl(241, 59%, 28%);
781
+ --t-text-color-tag-bold-blue:hsl(224, 47%, 31%);
782
+ --t-text-color-tag-bold-aqua:hsl(209, 77%, 22%);
783
+ --t-text-color-tag-bold-teal:hsl(180, 95%, 15%);
784
+ --t-text-color-tag-bold-green:hsl(100, 93%, 17%);
785
+ --t-text-color-tag-bold-yellow:hsl(29, 100%, 23%);
786
+ --t-text-color-tag-bold-orange:hsl(18, 100%, 18%);
787
+ --t-text-color-tag-bold-pink:hsl(327, 88%, 20%);
788
+ --t-text-color-tag-bold-purple:hsl(268, 71%, 27%);
789
+ --t-text-color-tag-bold-magenta:hsl(285, 71%, 20%);
790
+ --t-icon-color-default-primary:hsl(0, 0%, 80%);
791
+ --t-icon-color-default-secondary:hsl(0, 0%, 54%);
792
+ --t-icon-color-default-dim:hsl(0, 0%, 38%);
793
+ --t-icon-color-default-disabled:hsl(0, 0%, 25%);
794
+ --t-icon-color-default-inverted:hsl(0, 0%, 100%);
795
+ --t-icon-color-status-neutral-primary:hsl(0, 0%, 54%);
796
+ --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
797
+ --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
798
+ --t-icon-color-status-info-primary:hsl(204, 68%, 55%);
799
+ --t-icon-color-status-success-primary:hsl(96, 57%, 33%);
800
+ --t-icon-color-status-success-secondary:hsl(97, 57%, 40%);
801
+ --t-icon-color-status-warning-primary:hsl(42, 84%, 49%);
802
+ --t-icon-color-status-error-primary:hsl(8, 61%, 61%);
803
+ --t-fill-color-neutral-100:hsl(0, 0%, 10%);
804
+ --t-fill-color-neutral-000:hsl(0, 0%, 98%);
805
+ --t-fill-color-neutral-010:hsl(0, 0%, 88%);
806
+ --t-fill-color-neutral-020:hsl(0, 0%, 68%);
807
+ --t-fill-color-neutral-025:hsl(0, 0%, 58%);
808
+ --t-fill-color-neutral-030:hsl(0, 0%, 50%);
809
+ --t-fill-color-neutral-040:hsl(0, 0%, 32%);
810
+ --t-fill-color-neutral-050:hsl(0, 0%, 24%);
811
+ --t-fill-color-neutral-060:hsl(0, 0%, 19%);
812
+ --t-fill-color-neutral-070:hsl(0, 0%, 17%);
813
+ --t-fill-color-neutral-080:hsl(0, 0%, 15%);
814
+ --t-fill-color-neutral-090:hsl(0, 0%, 12%);
815
+ --t-fill-color-interaction-default:hsl(204, 100%, 35%);
816
+ --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
817
+ --t-fill-color-interaction-active:hsl(204, 80%, 45%);
818
+ --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
819
+ --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
820
+ --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
821
+ --t-fill-color-control-primary:hsl(204, 100%, 35%);
822
+ --t-fill-color-control-secondary:hsl(97, 57%, 40%);
823
+ --t-fill-color-control-error:hsl(8, 60%, 47%);
824
+ --t-fill-color-control-disabled:hsl(0, 0%, 20%);
825
+ --t-fill-color-status-neutral-solid:hsl(0, 0%, 24%);
826
+ --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
827
+ --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
828
+ --t-fill-color-status-info-solid:hsl(204, 100%, 35%);
829
+ --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
830
+ --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
831
+ --t-fill-color-status-success-solid:hsl(96, 57%, 33%);
832
+ --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
833
+ --t-fill-color-status-success-dim:hsl(120, 12%, 14%);
834
+ --t-fill-color-status-warning-solid:hsl(42, 84%, 63%);
835
+ --t-fill-color-status-warning-ghost:hsl(41, 18%, 17%);
836
+ --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
837
+ --t-fill-color-status-error-solid:hsl(8, 60%, 47%);
838
+ --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
839
+ --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
840
+ --t-fill-color-tooltip-primary:hsla(0, 0%, 24%, 0.9);
841
+ --t-fill-color-product-accounts-010:hsl(212, 54%, 93%);
842
+ --t-fill-color-product-accounts-020:hsl(209, 53%, 90%);
843
+ --t-fill-color-product-accounts-030:hsl(210, 56%, 70%);
844
+ --t-fill-color-product-accounts-040:hsl(210, 54%, 60%);
845
+ --t-fill-color-product-accounts-050:hsl(210, 55%, 50%);
846
+ --t-fill-color-product-accounts-060:hsl(210, 65%, 40%);
847
+ --t-fill-color-product-accounts-070:hsl(211, 70%, 32%);
848
+ --t-fill-color-product-accounts-080:hsl(210, 75%, 25%);
849
+ --t-fill-color-product-calendar-010:hsl(8, 61%, 90%);
850
+ --t-fill-color-product-calendar-020:hsl(8, 61%, 70%);
851
+ --t-fill-color-product-calendar-030:hsl(8, 72%, 59%);
852
+ --t-fill-color-product-calendar-040:hsl(8, 65%, 55%);
853
+ --t-fill-color-product-calendar-050:hsl(9, 61%, 50%);
854
+ --t-fill-color-product-calendar-060:hsl(8, 65%, 42%);
855
+ --t-fill-color-product-calendar-070:hsl(7, 65%, 34%);
856
+ --t-fill-color-product-calendar-080:hsl(9, 61%, 27%);
857
+ --t-fill-color-product-checkins-010:hsl(285, 20%, 92%);
858
+ --t-fill-color-product-checkins-020:hsl(283, 22%, 75%);
859
+ --t-fill-color-product-checkins-030:hsl(284, 22%, 64%);
860
+ --t-fill-color-product-checkins-040:hsl(283, 22%, 55%);
861
+ --t-fill-color-product-checkins-050:hsl(283, 22%, 48%);
862
+ --t-fill-color-product-checkins-060:hsl(283, 27%, 42%);
863
+ --t-fill-color-product-checkins-070:hsl(284, 33%, 34%);
864
+ --t-fill-color-product-checkins-080:hsl(283, 33%, 27%);
865
+ --t-fill-color-product-giving-010:hsl(41, 95%, 93%);
866
+ --t-fill-color-product-giving-020:hsl(42, 95%, 83%);
867
+ --t-fill-color-product-giving-030:hsl(43, 95%, 75%);
868
+ --t-fill-color-product-giving-040:hsl(43, 88%, 70%);
869
+ --t-fill-color-product-giving-050:hsl(43, 88%, 64%);
870
+ --t-fill-color-product-giving-060:hsl(42, 84%, 55%);
871
+ --t-fill-color-product-giving-070:hsl(42, 84%, 48%);
872
+ --t-fill-color-product-giving-080:hsl(42, 100%, 40%);
873
+ --t-fill-color-product-groups-010:hsl(18, 95%, 92%);
874
+ --t-fill-color-product-groups-020:hsl(17, 96%, 80%);
875
+ --t-fill-color-product-groups-030:hsl(17, 96%, 70%);
876
+ --t-fill-color-product-groups-040:hsl(17, 96%, 63%);
877
+ --t-fill-color-product-groups-050:hsl(17, 88%, 55%);
878
+ --t-fill-color-product-groups-060:hsl(12, 70%, 48%);
879
+ --t-fill-color-product-groups-070:hsl(12, 70%, 40%);
880
+ --t-fill-color-product-groups-080:hsl(14, 70%, 34%);
881
+ --t-fill-color-product-home-010:hsl(221, 89%, 93%);
882
+ --t-fill-color-product-home-020:hsl(221, 91%, 91%);
883
+ --t-fill-color-product-home-030:hsl(221, 91%, 87%);
884
+ --t-fill-color-product-home-040:hsl(221, 91%, 62%);
885
+ --t-fill-color-product-home-050:hsl(221, 91%, 55%);
886
+ --t-fill-color-product-home-060:hsl(221, 90%, 50%);
887
+ --t-fill-color-product-home-070:hsl(221, 90%, 45%);
888
+ --t-fill-color-product-home-080:hsl(218, 84%, 25%);
889
+ --t-fill-color-product-people-010:hsl(219, 73%, 91%);
890
+ --t-fill-color-product-people-020:hsl(220, 69%, 81%);
891
+ --t-fill-color-product-people-030:hsl(221, 73%, 71%);
892
+ --t-fill-color-product-people-040:hsl(221, 73%, 65%);
893
+ --t-fill-color-product-people-050:hsl(220, 74%, 57%);
894
+ --t-fill-color-product-people-060:hsl(220, 68%, 51%);
895
+ --t-fill-color-product-people-070:hsl(220, 68%, 41%);
896
+ --t-fill-color-product-people-080:hsl(221, 68%, 31%);
897
+ --t-fill-color-product-publishing-010:hsl(220, 4%, 86%);
898
+ --t-fill-color-product-publishing-020:hsl(222, 10%, 60%);
899
+ --t-fill-color-product-publishing-030:hsl(221, 11%, 50%);
900
+ --t-fill-color-product-publishing-040:hsl(222, 12%, 39%);
901
+ --t-fill-color-product-publishing-050:hsl(220, 12%, 31%);
902
+ --t-fill-color-product-publishing-060:hsl(220, 11%, 26%);
903
+ --t-fill-color-product-publishing-070:hsl(217, 12%, 22%);
904
+ --t-fill-color-product-publishing-080:hsl(214, 11%, 12%);
905
+ --t-fill-color-product-registrations-010:hsl(173, 28%, 89%);
906
+ --t-fill-color-product-registrations-020:hsl(176, 38%, 78%);
907
+ --t-fill-color-product-registrations-030:hsl(176, 37%, 68%);
908
+ --t-fill-color-product-registrations-040:hsl(176, 37%, 60%);
909
+ --t-fill-color-product-registrations-050:hsl(175, 36%, 43%);
910
+ --t-fill-color-product-registrations-060:hsl(175, 51%, 34%);
911
+ --t-fill-color-product-registrations-070:hsl(174, 51%, 28%);
912
+ --t-fill-color-product-registrations-080:hsl(175, 52%, 22%);
913
+ --t-fill-color-product-services-010:hsl(88, 31%, 88%);
914
+ --t-fill-color-product-services-020:hsl(88, 39%, 75%);
915
+ --t-fill-color-product-services-030:hsl(88, 39%, 66%);
916
+ --t-fill-color-product-services-040:hsl(88, 40%, 54%);
917
+ --t-fill-color-product-services-050:hsl(88, 45%, 41%);
918
+ --t-fill-color-product-services-060:hsl(89, 62%, 31%);
919
+ --t-fill-color-product-services-070:hsl(89, 62%, 26%);
920
+ --t-fill-color-product-services-080:hsl(89, 63%, 21%);
921
+ --t-fill-color-product-staff-base:hsl(328, 100%, 45%);
922
+ --t-fill-color-product-staff-dark:hsl(328, 100%, 38%);
923
+ --t-fill-color-product-staff-darker:hsl(328, 100%, 33%);
924
+ --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
925
+ --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
926
+ --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
927
+ --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(9, 29%, 13%), hsl(276, 8%, 12%), hsl(203, 37%, 11%));
928
+ --t-fill-color-product-checkins-gradient-page:linear-gradient(111.72deg, hsl(285, 17%, 18%) 25%, hsl(263, 15%, 17%) 60%, hsl(204, 70%, 12%));
929
+ --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 11%, 14%), hsl(266, 10%, 14%) 42%, hsl(203, 37%, 11%));
930
+ --t-fill-color-product-giving-gradient-page:linear-gradient(111.72deg, hsl(43, 80%, 16%), hsl(267, 15%, 14%) 58.5%, hsl(204, 70%, 12%));
931
+ --t-fill-color-product-giving-gradient-tint:linear-gradient(111.72deg, hsl(44, 49%, 13%), hsl(264, 8%, 12%) 58.5%, hsl(203, 37%, 11%));
932
+ --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(23, 46%, 18%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
933
+ --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(23, 29%, 14%), hsl(276, 7%, 14%), hsl(203, 37%, 11%));
934
+ --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
935
+ --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
936
+ --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
937
+ --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
938
+ --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(225, 11%, 22%), hsl(227, 20%, 18%) 45%, hsl(204, 70%, 12%));
939
+ --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(220, 7%, 16%), hsl(227, 12%, 14%) 45%, hsl(203, 37%, 11%));
940
+ --t-fill-color-product-registrations-gradient-page:linear-gradient(111.72deg, hsl(174, 34%, 18%), hsl(187, 39%, 14%) 39.5%, hsl(204, 70%, 12%));
941
+ --t-fill-color-product-registrations-gradient-tint:linear-gradient(111.72deg, hsl(173, 22%, 15%), hsl(185, 21%, 12%) 39.5%, hsl(203, 37%, 11%));
942
+ --t-fill-color-product-services-gradient-page:linear-gradient(111.72deg, hsl(87, 26%, 18%), hsl(88, 25%, 15%) 39.5%, hsl(204, 70%, 12%));
943
+ --t-fill-color-product-services-gradient-tint:linear-gradient(111.72deg, hsl(85, 17%, 14%), hsl(87, 14%, 13%) 39.5%, hsl(203, 37%, 11%));
944
+ --t-fill-color-tag-gray-010:hsl(0, 0%, 19%);
945
+ --t-fill-color-tag-gray-020:hsl(0, 0%, 17%);
946
+ --t-fill-color-tag-gray-030:hsl(0, 0%, 68%);
947
+ --t-fill-color-tag-gray-040:hsl(0, 0%, 58%);
948
+ --t-fill-color-tag-blue-010:hsl(229, 22%, 24%);
949
+ --t-fill-color-tag-blue-020:hsl(233, 27%, 23%);
950
+ --t-fill-color-tag-blue-030:hsl(220, 98%, 81%);
951
+ --t-fill-color-tag-blue-040:hsl(220, 98%, 74%);
952
+ --t-fill-color-tag-aqua-010:hsl(217, 25%, 24%);
953
+ --t-fill-color-tag-aqua-020:hsl(222, 27%, 22%);
954
+ --t-fill-color-tag-aqua-030:hsl(201, 76%, 71%);
955
+ --t-fill-color-tag-aqua-040:hsl(200, 75%, 64%);
956
+ --t-fill-color-tag-teal-010:hsl(150, 20%, 24%);
957
+ --t-fill-color-tag-teal-020:hsl(147, 16%, 22%);
958
+ --t-fill-color-tag-teal-030:hsl(169, 62%, 64%);
959
+ --t-fill-color-tag-teal-040:hsl(169, 62%, 56%);
960
+ --t-fill-color-tag-green-010:hsl(108, 21%, 22%);
961
+ --t-fill-color-tag-green-020:hsl(109, 22%, 20%);
962
+ --t-fill-color-tag-green-030:hsl(112, 57%, 65%);
963
+ --t-fill-color-tag-green-040:hsl(112, 57%, 57%);
964
+ --t-fill-color-tag-yellow-010:hsl(38, 27%, 23%);
965
+ --t-fill-color-tag-yellow-020:hsl(37, 27%, 21%);
966
+ --t-fill-color-tag-yellow-030:hsl(44, 92%, 69%);
967
+ --t-fill-color-tag-yellow-040:hsl(44, 93%, 61%);
968
+ --t-fill-color-tag-orange-010:hsl(12, 25%, 23%);
969
+ --t-fill-color-tag-orange-020:hsl(10, 29%, 21%);
970
+ --t-fill-color-tag-orange-030:hsl(21, 86%, 72%);
971
+ --t-fill-color-tag-orange-040:hsl(21, 86%, 64%);
972
+ --t-fill-color-tag-pink-010:hsl(331, 22%, 24%);
973
+ --t-fill-color-tag-pink-020:hsl(338, 25%, 21%);
974
+ --t-fill-color-tag-pink-030:hsl(324, 78%, 77%);
975
+ --t-fill-color-tag-pink-040:hsl(324, 76%, 70%);
976
+ --t-fill-color-tag-purple-010:hsl(260, 25%, 24%);
977
+ --t-fill-color-tag-purple-020:hsl(254, 27%, 22%);
978
+ --t-fill-color-tag-purple-030:hsl(273, 62%, 76%);
979
+ --t-fill-color-tag-purple-040:hsl(273, 62%, 70%);
980
+ --t-fill-color-tag-magenta-010:hsl(276, 18%, 22%);
981
+ --t-fill-color-tag-magenta-020:hsl(277, 18%, 20%);
982
+ --t-fill-color-tag-magenta-030:hsl(291, 48%, 70%);
983
+ --t-fill-color-tag-magenta-040:hsl(292, 48%, 63%);
984
+ --t-fill-color-tag-indigo-010:hsl(233, 30%, 27%);
985
+ --t-fill-color-tag-indigo-020:hsl(233, 30%, 23%);
986
+ --t-fill-color-tag-indigo-030:hsl(233, 77%, 81%);
987
+ --t-fill-color-tag-indigo-040:hsl(236, 79%, 74%);
988
+ --t-fill-color-button-neutral-solid-default:hsl(0, 0%, 19%);
989
+ --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
990
+ --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
991
+ --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
992
+ --t-fill-color-button-neutral-outline-dim-default:hsl(0, 0%, 15%);
993
+ --t-fill-color-button-neutral-outline-dim-hover:hsl(0, 0%, 17%);
994
+ --t-fill-color-button-neutral-outline-dim-active:hsl(0, 0%, 19%);
995
+ --t-fill-color-button-neutral-outline-dim-disabled:hsl(0, 0%, 12%);
996
+ --t-fill-color-button-neutral-ghost-default:hsla(0, 0%, 0%, 0);
997
+ --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
998
+ --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
999
+ --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
1000
+ --t-fill-color-button-neutral-responsive-header-default:hsla(0, 0%, 0%, 0.1);
1001
+ --t-fill-color-button-neutral-responsive-header-hover:hsla(0, 0%, 0%, 0.2);
1002
+ --t-fill-color-button-neutral-responsive-header-active:hsla(0, 0%, 0%, 0.3);
1003
+ --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
1004
+ --t-fill-color-button-interaction-solid-default:hsl(204, 100%, 35%);
1005
+ --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
1006
+ --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
1007
+ --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
1008
+ --t-fill-color-button-interaction-outline-dim-default:hsl(204, 32%, 15%);
1009
+ --t-fill-color-button-interaction-outline-dim-hover:hsl(204, 39%, 17%);
1010
+ --t-fill-color-button-interaction-outline-dim-active:hsl(205, 45%, 18%);
1011
+ --t-fill-color-button-interaction-outline-dim-disabled:hsl(0, 0%, 12%);
1012
+ --t-fill-color-button-interaction-ghost-default:hsla(0, 0%, 0%, 0);
1013
+ --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
1014
+ --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
1015
+ --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
1016
+ --t-fill-color-button-delete-solid-default:hsl(8, 60%, 40%);
1017
+ --t-fill-color-button-delete-solid-hover:hsl(8, 60%, 45%);
1018
+ --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
1019
+ --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
1020
+ --t-fill-color-button-delete-outline-dim-default:hsl(8, 20%, 16%);
1021
+ --t-fill-color-button-delete-outline-dim-hover:hsl(9, 24%, 17%);
1022
+ --t-fill-color-button-delete-outline-dim-active:hsl(9, 29%, 19%);
1023
+ --t-fill-color-button-delete-outline-dim-disabled:hsl(0, 0%, 12%);
1024
+ --t-fill-color-button-delete-ghost-default:hsla(0, 0%, 0%, 0);
1025
+ --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
1026
+ --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
1027
+ --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
1028
+ --t-fill-color-button-pill-default:hsl(0, 0%, 18%);
1029
+ --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
1030
+ --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
1031
+ --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
1032
+ --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
1033
+ --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
1034
+ --t-fill-color-transparency-light-030:hsla(0, 0%, 0%, 0.3);
1035
+ --t-fill-color-transparency-light-040:hsla(0, 0%, 0%, 0.4);
1036
+ --t-fill-color-transparency-light-050:hsla(0, 0%, 0%, 0.5);
1037
+ --t-fill-color-transparency-light-060:hsla(0, 0%, 0%, 0.6);
1038
+ --t-fill-color-transparency-light-070:hsla(0, 0%, 0%, 0.7);
1039
+ --t-fill-color-transparency-light-080:hsla(0, 0%, 0%, 0.8);
1040
+ --t-fill-color-transparency-light-090:hsla(0, 0%, 0%, 0.9);
1041
+ --t-fill-color-transparency-dark-010:hsla(0, 0%, 100%, 0.1);
1042
+ --t-fill-color-transparency-dark-020:hsla(0, 0%, 100%, 0.2);
1043
+ --t-fill-color-transparency-dark-030:hsla(0, 0%, 100%, 0.3);
1044
+ --t-fill-color-transparency-dark-040:hsla(0, 0%, 100%, 0.4);
1045
+ --t-fill-color-transparency-dark-050:hsla(0, 0%, 100%, 0.5);
1046
+ --t-fill-color-transparency-dark-060:hsla(0, 0%, 100%, 0.6);
1047
+ --t-fill-color-transparency-dark-070:hsla(0, 0%, 100%, 0.7);
1048
+ --t-fill-color-transparency-dark-080:hsla(0, 0%, 100%, 0.8);
1049
+ --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
1050
+ --t-surface-color-card:hsl(0, 0%, 12%);
1051
+ --t-surface-color-canvas:hsl(0, 0%, 10%);
1052
+ --t-border-color-default-base:hsl(0, 0%, 21%);
1053
+ --t-border-color-default-dark:hsl(0, 0%, 25%);
1054
+ --t-border-color-default-darker:hsl(0, 0%, 33%);
1055
+ --t-border-color-default-darkest:hsl(0, 0%, 38%);
1056
+ --t-border-color-default-disabled:hsl(0, 0%, 21%);
1057
+ --t-border-color-default-dim:hsl(0, 0%, 16%);
1058
+ --t-border-color-default-white:hsl(0, 0%, 12%);
1059
+ --t-border-color-status-neutral:hsl(0, 0%, 38%);
1060
+ --t-border-color-status-info:hsl(204, 100%, 35%);
1061
+ --t-border-color-status-success:hsl(97, 57%, 40%);
1062
+ --t-border-color-status-warning:hsl(42, 84%, 63%);
1063
+ --t-border-color-status-error:hsl(8, 60%, 47%);
1064
+ --t-border-color-button-neutral:hsl(0, 0%, 19%);
1065
+ --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
1066
+ --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
1067
+ --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
1068
+ --t-border-color-control-neutral:hsl(0, 0%, 33%);
1069
+ --t-border-color-control-info:hsl(204, 100%, 35%);
1070
+ --t-border-color-control-success:hsl(97, 57%, 40%);
1071
+ --t-border-color-control-warning:hsl(42, 84%, 63%);
1072
+ --t-border-color-control-error:hsl(8, 60%, 47%);
1073
+ --t-border-color-control-disabled:hsl(0, 0%, 21%);
1074
+ }
1075
+ }
1076
+
1077
+ @layer t-critical{
1078
+ tds-page-header:not(.hydrated){
1079
+ display:none;
436
1080
  }
437
1081
  }
438
1082
 
439
- @layer t-component {
440
- .tds-page-header {
441
- --tds-page-header-background-color: var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
442
- --tds-page-header-background-color-inactive: var(--t-fill-color-neutral-090);
443
- --tds-page-header-color: var(--t-text-color-default-primary);
444
- --tds-page-header-headline-color: var(--t-text-color-default-headline);
445
- --tds-page-header-headline-font-size: var(--t-font-size-2xl);
446
- --tds-page-header-padding-x: var(--t-spacing-2);
447
- --tds-page-header-padding-y: var(--t-spacing-2);
448
- --tds-page-header-nav-padding-x: var(--tds-page-header-padding-x, var(--t-spacing-3));
449
- --tds-page-header-nav-gap: var(--t-spacing-1);
450
- --tds-page-header-nav-background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 100%);
451
- --tds-page-header-nav-item-padding-x: var(--t-spacing-1);
452
- --tds-page-header-nav-item-padding-y: var(--t-spacing-1);
453
- --tds-page-header-nav-item-color: var(--t-text-color-default-secondary);
454
- --tds-page-header-nav-item-background-color: var(--t-fill-color-transparency-light-060);
455
- --tds-page-header-nav-item-border-width: 1px;
456
-
457
- --tds-page-header-nav-item-border-color: var(--tds-page-header-nav-item-background-color);
458
- --tds-page-header-nav-item-border-bottom-color: var(--t-border-color-default-base);
459
-
460
- --tds-page-header-nav-item-color-hover: var(--t-text-color-default-primary);
461
- --tds-page-header-nav-item-background-color-hover: var(--t-fill-color-neutral-080);
462
- --tds-page-header-nav-item-border-color-hover: var(--tds-page-header-nav-item-background-color-hover);
463
-
464
- --tds-page-header-nav-item-background-color-active: var(--t-fill-color-neutral-060);
465
- --tds-page-header-nav-item-border-color-active: var(--tds-page-header-nav-item-background-color-hover);
466
-
467
- --tds-page-header-nav-item-color-disabled: var(--t-text-color-default-disabled);
468
- --tds-page-header-nav-item-background-color-disabled: var(--t-fill-color-neutral-080);
469
- --tds-page-header-nav-item-border-color-disabled: var(--tds-page-header-nav-item-background-color-disabled);
470
-
471
- --tds-page-header-nav-item-color-selected: var(--t-text-color-default-primary);
472
- --tds-page-header-nav-item-background-color-selected: var(--t-surface-color-canvas);
473
- --tds-page-header-nav-item-border-color-selected: var(--tds-page-header-nav-item-background-color-selected);
474
- --tds-page-header-nav-item-border-bottom-color-selected: var(--tds-page-header-nav-item-background-color-selected);
475
- --tds-page-header-nav-item-indicator-color: var(--t-icon-color-status-warning-primary);
1083
+ @layer t-component{
1084
+ .tds-page-header{
1085
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1086
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1087
+ --tds-page-header-color:var(--t-text-color-default-primary);
1088
+ --tds-page-header-headline-color:var(--t-text-color-default-headline);
1089
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1090
+ --tds-page-header-padding-x:var(--t-spacing-2);
1091
+ --tds-page-header-padding-y:var(--t-spacing-2);
1092
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1093
+ --tds-page-header-nav-gap:var(--t-spacing-1);
1094
+ --tds-page-header-nav-background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 100%);
1095
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1096
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1097
+ --tds-page-header-nav-item-color:var(--t-text-color-default-secondary);
1098
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-transparency-light-060);
1099
+ --tds-page-header-nav-item-border-width:1px;
1100
+
1101
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1102
+ --tds-page-header-nav-item-border-bottom-color:var(--t-border-color-default-base);
1103
+
1104
+ --tds-page-header-nav-item-color-hover:var(--t-text-color-default-primary);
1105
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-080);
1106
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1107
+
1108
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-060);
1109
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-hover);
1110
+
1111
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-default-disabled);
1112
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1113
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1114
+
1115
+ --tds-page-header-nav-item-color-selected:var(--t-text-color-default-primary);
1116
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1117
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1118
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1119
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning-primary);
476
1120
  }
477
1121
 
478
- .tds-page-header--profile {
479
- --tds-page-header-padding-y: 20px;
1122
+ .tds-page-header--profile{
1123
+ --tds-page-header-padding-y:20px;
480
1124
  }
481
- @media (min-width: 600px) {
482
- .tds-page-header {
483
- --tds-page-header-background-color: var(--t-surface-color-canvas);
484
- --tds-page-header-color: var(--t-text-color-default-secondary);
485
- --tds-page-header-padding-x: var(--t-spacing-3);
486
- --tds-page-header-headline-font-size: var(--t-font-size-3xl);
487
- --tds-page-header-nav-gap: var(--t-spacing-half);
488
- --tds-page-header-nav-background: transparent;
489
- --tds-page-header-nav-item-padding-x: var(--t-spacing-2);
490
- --tds-page-header-nav-item-border-width: 1px;
491
- --tds-page-header-nav-item-color: var(--t-text-color-default-primary);
492
- --tds-page-header-nav-item-background-color: var(--t-fill-color-neutral-070);
493
- --tds-page-header-nav-item-border-color-selected: var(--t-border-color-default-base);
1125
+ @media (min-width: 600px){
1126
+ .tds-page-header{
1127
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
1128
+ --tds-page-header-color:var(--t-text-color-default-secondary);
1129
+ --tds-page-header-padding-x:var(--t-spacing-3);
1130
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1131
+ --tds-page-header-nav-gap:var(--t-spacing-half);
1132
+ --tds-page-header-nav-background:transparent;
1133
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1134
+ --tds-page-header-nav-item-border-width:1px;
1135
+ --tds-page-header-nav-item-color:var(--t-text-color-default-primary);
1136
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1137
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color-default-base);
494
1138
  }
495
1139
  }
496
1140
  }
497
1141
 
498
- .tds-page-header {
499
- display: flex;
500
- flex-direction: column;
501
- padding-top: var(--tds-page-header-padding-y);
502
- color: var(--tds-page-header-color);
503
- background: var(--tds-page-header-background-color);
504
- border-bottom: 1px solid var(--t-border-color-default-base);
1142
+ .tds-page-header{
1143
+ display:flex;
1144
+ flex-direction:column;
1145
+ padding-top:var(--tds-page-header-padding-y);
1146
+ color:var(--tds-page-header-color);
1147
+ background:var(--tds-page-header-background-color);
1148
+ border-bottom:1px solid var(--t-border-color-default-base);
505
1149
  }
506
1150
 
507
- .tds-page-header:not(.has-nav) {
508
- padding-bottom: var(--tds-page-header-padding-y);
1151
+ .tds-page-header:not(.has-nav){
1152
+ padding-bottom:var(--tds-page-header-padding-y);
509
1153
  }
510
1154
 
511
- .tds-page-header.inactive {
512
- background: var(--tds-page-header-background-color-inactive);
1155
+ .tds-page-header.inactive{
1156
+ background:var(--tds-page-header-background-color-inactive);
513
1157
  }
514
1158
 
515
- .tds-page-header__title-bar {
516
- display: flex;
517
- flex-direction: column;
518
- gap: var(--t-spacing-2) var(--t-spacing-1);
519
- align-items: flex-start;
520
- justify-content: space-between;
521
- padding: 0 var(--tds-page-header-padding-x);
1159
+ .tds-page-header__title-bar{
1160
+ display:flex;
1161
+ flex-direction:column;
1162
+ gap:var(--t-spacing-2) var(--t-spacing-1);
1163
+ align-items:flex-start;
1164
+ justify-content:space-between;
1165
+ padding:0 var(--tds-page-header-padding-x);
522
1166
  }
523
1167
 
524
- .tds-page-header--profile > .tds-page-header__title-bar {
525
- align-items: center;
1168
+ .tds-page-header--profile > .tds-page-header__title-bar{
1169
+ align-items:center;
526
1170
  }
527
1171
 
528
- .tds-page-header__primary {
529
- width: 100%;
1172
+ .tds-page-header__primary{
1173
+ width:100%;
530
1174
  }
531
1175
 
532
- .tds-page-header__primary h1 {
533
- margin: 0;
534
- font-size: var(--tds-page-header-headline-font-size);
535
- font-weight: var(--t-font-weight-normal);
536
- line-height: 32px;
537
- color: var(--tds-page-header-headline-color);
538
- overflow-wrap: break-word;
1176
+ .tds-page-header__primary h1{
1177
+ margin:0;
1178
+ font-size:var(--tds-page-header-headline-font-size);
1179
+ font-weight:var(--t-font-weight-normal);
1180
+ line-height:32px;
1181
+ color:var(--tds-page-header-headline-color);
1182
+ overflow-wrap:break-word;
539
1183
  }
540
1184
 
541
- .tds-page-header [slot="actions"] {
542
- width: 100%;
1185
+ .tds-page-header [slot="actions"]{
1186
+ width:100%;
543
1187
  }
544
1188
 
545
1189
  .has-multi-actions.tds-page-header [slot="actions"],
546
- .has-multi-actions.tds-page-header .tds-page-header__actions {
547
- display: flex;
548
- flex-flow: row wrap;
549
- gap: var(--t-spacing-half) var(--t-spacing-1);
550
- align-items: flex-start;
551
- justify-content: flex-start;
552
- min-width: 0;
1190
+ .has-multi-actions.tds-page-header .tds-page-header__actions{
1191
+ display:flex;
1192
+ flex-flow:row wrap;
1193
+ gap:var(--t-spacing-half) var(--t-spacing-1);
1194
+ align-items:flex-start;
1195
+ justify-content:flex-start;
1196
+ min-width:0;
553
1197
  }
554
1198
 
555
1199
  .tds-page-header nav[slot="navigation"]:not(:has(ul)),
556
1200
  .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
557
1201
  .tds-page-header nav[slot="navigation"] ul,
558
- .tds-page-header nav.tds-page-header__nav ul {
559
- display: flex;
560
- gap: var(--tds-page-header-nav-gap);
561
- padding: var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
562
- margin: 0 0 -1px;
563
- overflow: auto;
564
- list-style: none;
565
- background: var(--tds-page-header-nav-background);
1202
+ .tds-page-header nav.tds-page-header__nav ul{
1203
+ display:flex;
1204
+ gap:var(--tds-page-header-nav-gap);
1205
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1206
+ margin:0 0 -1px;
1207
+ overflow:auto;
1208
+ list-style:none;
1209
+ background:var(--tds-page-header-nav-background);
566
1210
  }
567
1211
 
568
1212
  .tds-page-header nav[slot="navigation"] a,
569
1213
  .tds-page-header nav[slot="navigation"] button,
570
1214
  .tds-page-header nav.tds-page-header__nav a,
571
- .tds-page-header nav.tds-page-header__nav button {
572
- position: relative;
573
- display: inline-flex;
574
- padding: var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
575
- font-size: var(--t-font-size-sm);
576
- line-height: 22px;
577
- color: var(--tds-page-header-nav-item-color);
578
- white-space: nowrap;
579
- text-decoration: none;
580
- -webkit-appearance: none;
581
- -moz-appearance: none;
582
- appearance: none;
583
- cursor: pointer;
584
- outline-offset: -2px;
585
- background-color: var(--tds-page-header-nav-item-background-color);
586
- background-clip: padding-box;
587
- border: var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
588
- border-bottom: 1px solid var(--tds-page-header-nav-item-border-bottom-color);
589
- border-radius: var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
590
- }
591
-
592
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) {
593
- position: relative;
594
- }
595
-
596
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) :is(a, button) {
597
- -webkit-mask: radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
598
- mask: radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1215
+ .tds-page-header nav.tds-page-header__nav button{
1216
+ position:relative;
1217
+ display:inline-flex;
1218
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1219
+ font-size:var(--t-font-size-sm);
1220
+ line-height:22px;
1221
+ color:var(--tds-page-header-nav-item-color);
1222
+ white-space:nowrap;
1223
+ text-decoration:none;
1224
+ -webkit-appearance:none;
1225
+ -moz-appearance:none;
1226
+ appearance:none;
1227
+ cursor:pointer;
1228
+ outline-offset:-2px;
1229
+ background-color:var(--tds-page-header-nav-item-background-color);
1230
+ background-clip:padding-box;
1231
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1232
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1233
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1234
+ }
1235
+
1236
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator){
1237
+ position:relative;
1238
+ }
1239
+
1240
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) :is(a, button){
1241
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1242
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
599
1243
  }
600
1244
 
601
1245
  .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::before,
602
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after {
603
- position: absolute;
604
- top: -5px;
605
- right: -2px;
606
- width: 10px;
607
- height: 10px;
608
- content: "";
609
- background: var(--tds-page-header-nav-item-indicator-color);
610
- border-radius: 50%;
611
- }
612
-
613
- @media (prefers-reduced-motion: no-preference) {
614
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after {
615
- animation: indicator-pulse 1.25s ease infinite;
1246
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
1247
+ position:absolute;
1248
+ top:-5px;
1249
+ right:-2px;
1250
+ width:10px;
1251
+ height:10px;
1252
+ content:"";
1253
+ background:var(--tds-page-header-nav-item-indicator-color);
1254
+ border-radius:50%;
1255
+ }
1256
+
1257
+ @media (prefers-reduced-motion: no-preference){
1258
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
1259
+ animation:indicator-pulse 1.25s ease infinite;
616
1260
  }
617
1261
  }
618
1262
 
619
1263
  .tds-page-header nav[slot="navigation"] a.selected,
620
1264
  .tds-page-header nav[slot="navigation"] button.selected,
621
1265
  .tds-page-header nav.tds-page-header__nav a.selected,
622
- .tds-page-header nav.tds-page-header__nav button.selected {
623
- --tds-page-header-nav-item-color: var(--tds-page-header-nav-item-color-selected);
624
- --tds-page-header-nav-item-border-color: var(--tds-page-header-nav-item-border-color-selected);
625
- --tds-page-header-nav-item-background-color: var(--tds-page-header-nav-item-background-color-selected);
626
- --tds-page-header-nav-item-border-bottom-color: var(--tds-page-header-nav-item-background-color-selected);
1266
+ .tds-page-header nav.tds-page-header__nav button.selected{
1267
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1268
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1269
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1270
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
627
1271
  }
628
1272
 
629
1273
  .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
630
1274
  .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
631
1275
  .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
632
- .tds-page-header nav.tds-page-header__nav button:not(.selected):hover {
633
- --tds-page-header-nav-item-color: var(--tds-page-header-nav-item-color-hover);
634
- --tds-page-header-nav-item-background-color: var(--tds-page-header-nav-item-background-color-hover);
635
- --tds-page-header-nav-item-border-color: var(--tds-page-header-nav-item-border-color-hover);
1276
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):hover{
1277
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1278
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1279
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
636
1280
  }
637
1281
 
638
1282
  .tds-page-header nav[slot="navigation"] a:not(.selected):active,
639
1283
  .tds-page-header nav[slot="navigation"] button:not(.selected):active,
640
1284
  .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
641
- .tds-page-header nav.tds-page-header__nav button:not(.selected):active {
642
- background-color: var(--tds-page-header-nav-item-background-color-active);
1285
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):active{
1286
+ background-color:var(--tds-page-header-nav-item-background-color-active);
643
1287
  }
644
1288
 
645
1289
  .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
646
1290
  .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
647
1291
  .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
648
- .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled {
649
- color: var(--tds-page-header-nav-item-color-disabled);
650
- cursor: not-allowed;
651
- background-color: var(--tds-page-header-nav-item-background-color-disabled);
652
- opacity: 1;
653
- }
654
-
655
- @media (min-width: 960px) {
656
- .tds-page-header__primary {
657
- flex: 1 1 max-content;
658
- width: auto;
659
- min-width: 0;
660
- max-width: 100%;
1292
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled{
1293
+ color:var(--tds-page-header-nav-item-color-disabled);
1294
+ cursor:not-allowed;
1295
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
1296
+ opacity:1;
1297
+ }
1298
+
1299
+ @media (min-width: 960px){
1300
+ .tds-page-header__primary{
1301
+ flex:1 1 max-content;
1302
+ width:auto;
1303
+ min-width:0;
1304
+ max-width:100%;
661
1305
  }
662
1306
 
663
1307
  .tds-page-header__title-bar,
664
- .tds-page-header--profile .tds-page-header__title-bar {
665
- flex-flow: row nowrap;
666
- row-gap: 12px;
667
- align-items: flex-start;
1308
+ .tds-page-header--profile .tds-page-header__title-bar{
1309
+ flex-flow:row nowrap;
1310
+ row-gap:12px;
1311
+ align-items:flex-start;
668
1312
  }
669
1313
 
670
- .tds-page-header [slot="actions"] {
671
- width: auto;
1314
+ .tds-page-header [slot="actions"]{
1315
+ width:auto;
672
1316
  }
673
1317
 
674
1318
  .has-multi-actions.tds-page-header [slot="actions"],
675
- .has-multi-actions.tds-page-header .tds-page-header__actions {
676
- justify-content: flex-end;
1319
+ .has-multi-actions.tds-page-header .tds-page-header__actions{
1320
+ justify-content:flex-end;
677
1321
  }
678
1322
  }
679
1323
 
680
1324
  .tds-page-header-phone,
681
- .tds-page-header-email {
682
- color: var(--tds-page-header-color);
683
- white-space: nowrap;
1325
+ .tds-page-header-email{
1326
+ color:var(--tds-page-header-color);
1327
+ white-space:nowrap;
684
1328
  }
685
1329
 
686
- /* Truncate email */
687
-
688
- .tds-page-header-email {
689
- max-width: 100%;
690
- overflow: hidden;
691
- text-overflow: ellipsis;
1330
+ .tds-page-header-email{
1331
+ max-width:100%;
1332
+ overflow:hidden;
1333
+ text-overflow:ellipsis;
692
1334
  }
693
1335
 
694
- @keyframes indicator-pulse {
695
- 0% {
696
- opacity: .3;
697
- transform: scale(.9);
1336
+ @keyframes indicator-pulse{
1337
+ 0%{
1338
+ opacity:.3;
1339
+ transform:scale(.9);
698
1340
  }
699
1341
 
700
- 100% {
701
- opacity: 0;
702
- transform: scale(1.75);
1342
+ 100%{
1343
+ opacity:0;
1344
+ transform:scale(1.75);
703
1345
  }
704
1346
  }
705
1347
 
706
1348
 
707
- @media (prefers-reduced-motion: no-preference) {
1349
+ @media (prefers-reduced-motion: no-preference){
708
1350
 
709
- :root {
710
- interpolate-size: allow-keywords;
1351
+ :root{
1352
+ interpolate-size:allow-keywords;
711
1353
  }
712
1354
  }
713
1355
 
714
- @layer tds-component {
715
- tds-sidenav, .tds-sidenav {
716
- --tds-sidenav-indent: 12px;
717
- --tds-sidenav-item-depth: 0;
1356
+ @layer tds-component{
1357
+ tds-sidenav, .tds-sidenav{
1358
+ --tds-sidenav-indent:12px;
1359
+ --tds-sidenav-item-depth:0;
718
1360
 
719
- --tds-sidenav-item-transition: background-color .2s cubic-bezier(.19, .91, .38, 1);
1361
+ --tds-sidenav-item-transition:background-color .2s cubic-bezier(.19, .91, .38, 1);
720
1362
 
721
- --tds-sidenav-item-icon-size: var(--t-element-size-md);
722
- --tds-sidenav-item-background-hover: var(--t-fill-color-button-interaction-ghost-hover);
723
- --tds-sidenav-item-background-active: var(--t-fill-color-button-interaction-ghost-active);
724
- --tds-sidenav-item-background-selected: var(--t-fill-color-button-interaction-ghost-active);
1363
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
1364
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
1365
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
1366
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
725
1367
 
726
- --tds-sidenav-item-nested-background-hover: var(--tds-sidenav-item-background-hover);
727
- --tds-sidenav-item-nested-background-active: var(--tds-sidenav-item-background-hover);
728
- --tds-sidenav-item-nested-background-selected: transparent;
1368
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
1369
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
1370
+ --tds-sidenav-item-nested-background-selected:transparent;
729
1371
 
730
- --tds-sidenav-item-nested-border-color: var(--t-fill-color-neutral-050);
731
- --tds-sidenav-item-nested-border-color-hover: var(--t-fill-color-neutral-050);
732
- --tds-sidenav-item-nested-border-color-selected: var(--t-border-color-status-info);
1372
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
1373
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1374
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
733
1375
 
734
- --tds-sidenav-item-icon-color: var(--t-icon-color-default-secondary);
735
- --tds-sidenav-item-icon-color-selected: var(--t-icon-color-default-primary);
1376
+ --tds-sidenav-item-icon-color:var(--t-icon-color-default-secondary);
1377
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color-default-primary);
736
1378
  }
737
1379
 
738
1380
  .is-classic tds-sidenav, .is-classic .tds-sidenav,
739
- .tds-sidenav--theme-gray {
740
- --tds-sidenav-item-background-hover: var(--t-fill-color-neutral-080);
741
- --tds-sidenav-item-background-active: var(--t-fill-color-neutral-070);
742
- --tds-sidenav-item-background-selected: var(--t-fill-color-neutral-050);
743
- --tds-sidenav-item-nested-border-color-hover: var(--t-fill-color-neutral-050);
744
- --tds-sidenav-item-nested-border-color-selected: var(--t-fill-color-neutral-010);
1381
+ .tds-sidenav--theme-gray{
1382
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1383
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1384
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1385
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1386
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
745
1387
  }
746
1388
  }
747
1389
 
748
- .tds-sidenav :where(nav,ul,.tds-sidenav-section) {
749
- display: flex;
1390
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1391
+ display:flex;
750
1392
  }
751
1393
 
752
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse) {
753
- flex-direction: column;
754
- gap: var(--t-spacing-half);
755
- width: 100%;
1394
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1395
+ flex-direction:column;
1396
+ gap:var(--t-spacing-half);
1397
+ width:100%;
756
1398
  }
757
1399
 
758
- .tds-sidenav-section-list {
759
- width: 100%;
760
- padding: 0;
761
- margin: 0;
762
- list-style: none;
1400
+ .tds-sidenav-section-list{
1401
+ width:100%;
1402
+ padding:0;
1403
+ margin:0;
1404
+ list-style:none;
763
1405
  }
764
1406
 
765
- .tds-sidenav-section-header {
766
- display: flex;
767
- align-items: baseline;
768
- justify-content: space-between;
769
- padding-top: var(--t-spacing-2);
1407
+ .tds-sidenav-section-header{
1408
+ display:flex;
1409
+ align-items:baseline;
1410
+ justify-content:space-between;
1411
+ padding-top:var(--t-spacing-2);
770
1412
  }
771
1413
 
772
- .tds-sidenav-section-header h2 {
773
- margin: 0;
774
- font-size: var(--t-font-size-sm);
775
- font-weight: var(--t-font-weight-semibold);
776
- line-height: 1.35;
777
- color: var(--t-text-color-default-secondary);
778
- text-transform: uppercase;
1414
+ .tds-sidenav-section-header h2{
1415
+ margin:0;
1416
+ font-size:var(--t-font-size-sm);
1417
+ font-weight:var(--t-font-weight-semibold);
1418
+ line-height:1.35;
1419
+ color:var(--t-text-color-default-secondary);
1420
+ text-transform:uppercase;
779
1421
  }
780
1422
 
781
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header {
782
- padding-top: 0;
1423
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1424
+ padding-top:0;
783
1425
  }
784
1426
 
785
- .tds-sidenav-section-header [slot="label-actions"] {
786
- display: flex;
787
- gap: var(--t-spacing-half);
788
- align-items: center;
1427
+ .tds-sidenav-section-header [slot="label-actions"]{
1428
+ display:flex;
1429
+ gap:var(--t-spacing-half);
1430
+ align-items:center;
789
1431
  }
790
1432
 
791
- .tds-sidenav-section [slot="section-actions"] {
792
- display: flex;
793
- gap: 12px;
794
- align-items: center;
795
- min-height: 42px;
796
- padding: var(--t-spacing-1) 0;
1433
+ .tds-sidenav-section [slot="section-actions"]{
1434
+ display:flex;
1435
+ gap:12px;
1436
+ align-items:center;
1437
+ min-height:42px;
1438
+ padding:var(--t-spacing-1) 0;
797
1439
  }
798
1440
 
799
1441
  .tds-sidenav-section-list,
800
- .tds-sidenav-item {
801
- width: 100%;
802
- padding: 0;
803
- margin: 0;
804
- }
805
-
806
- .tds-sidenav-item :is(a,button) {
807
- position: relative;
808
- display: flex;
809
- gap: 12px;
810
- align-items: center;
811
- width: 100%;
812
- padding: 12px;
813
- overflow: hidden;
814
- font-size: var(--t-font-size-sm);
815
- line-height: 18px;
816
- color: var(--t-text-color-default-headline);
817
- white-space: nowrap;
818
- text-decoration: none;
819
- -webkit-appearance: none;
820
- -moz-appearance: none;
821
- appearance: none;
822
- cursor: pointer;
823
- background-color: var(--tds-sidenav-item-background, transparent);
824
- border: 0;
825
- border-radius: var(--t-border-radius-default);
826
- transition: var(--tds-sidenav-item-transition);
1442
+ .tds-sidenav-item{
1443
+ width:100%;
1444
+ padding:0;
1445
+ margin:0;
1446
+ }
1447
+
1448
+ .tds-sidenav-item :is(a,button){
1449
+ position:relative;
1450
+ display:flex;
1451
+ gap:12px;
1452
+ align-items:center;
1453
+ width:100%;
1454
+ padding:12px;
1455
+ overflow:hidden;
1456
+ font-size:var(--t-font-size-sm);
1457
+ line-height:18px;
1458
+ color:var(--t-text-color-default-headline);
1459
+ white-space:nowrap;
1460
+ text-decoration:none;
1461
+ -webkit-appearance:none;
1462
+ -moz-appearance:none;
1463
+ appearance:none;
1464
+ cursor:pointer;
1465
+ background-color:var(--tds-sidenav-item-background, transparent);
1466
+ border:0;
1467
+ border-radius:var(--t-border-radius-default);
1468
+ transition:var(--tds-sidenav-item-transition);
827
1469
  }
828
1470
 
829
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)) {
830
- display: block;
831
- flex: 1;
832
- overflow: hidden;
833
- text-overflow: ellipsis;
834
- text-align: left;
835
- white-space: nowrap;
1471
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1472
+ display:block;
1473
+ flex:1;
1474
+ overflow:hidden;
1475
+ text-overflow:ellipsis;
1476
+ text-align:left;
1477
+ white-space:nowrap;
836
1478
  }
837
1479
 
838
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible {
839
- --tds-sidenav-item-background: var(--tds-sidenav-item-background-hover);
840
- color: var(--t-text-color-default-headline);
841
- text-decoration: none;
1480
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1481
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1482
+ color:var(--t-text-color-default-headline);
1483
+ text-decoration:none;
842
1484
  }
843
1485
 
844
- :is(.tds-sidenav-item :is(a,button)):active {
845
- --tds-sidenav-item-background: var(--tds-sidenav-item-background-active);
1486
+ :is(.tds-sidenav-item :is(a,button)):active{
1487
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
846
1488
  }
847
1489
 
848
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]) {
849
- overflow: hidden;
850
- color: var(--tds-sidenav-item-icon-color);
1490
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1491
+ overflow:hidden;
1492
+ color:var(--tds-sidenav-item-icon-color);
851
1493
  }
852
1494
 
853
- :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg {
854
- display: block;
855
- width: var(--tds-sidenav-item-icon-size);
856
- height: var(--tds-sidenav-item-icon-size);
1495
+ :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
1496
+ display:block;
1497
+ width:var(--tds-sidenav-item-icon-size);
1498
+ height:var(--tds-sidenav-item-icon-size);
857
1499
  }
858
1500
 
859
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section {
860
- --tds-sidenav-indent: 19px;
1501
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1502
+ --tds-sidenav-indent:19px;
861
1503
  }
862
1504
 
863
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list {
864
- visibility: visible;
865
- block-size: auto;
866
- opacity: 1;
1505
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
1506
+ visibility:visible;
1507
+ block-size:auto;
1508
+ opacity:1;
867
1509
  }
868
1510
 
869
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button) {
870
- --tds-sidenav-item-background: var(--tds-sidenav-item-background-selected);
871
- --tds-sidenav-item-icon-color: var(--tds-sidenav-item-icon-color-selected);
1511
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1512
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1513
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
872
1514
 
873
- --tds-sidenav-item-nested-background: var(--tds-sidenav-item-nested-background-selected);
874
- font-weight: var(--t-font-weight-semibold);
1515
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1516
+ font-weight:var(--t-font-weight-semibold);
875
1517
  }
876
1518
 
877
- .tds-sidenav-item:has(.tds-sidenav-section) {
878
- display: flex;
879
- flex-direction: column;
880
- gap: var(--t-spacing-half);
1519
+ .tds-sidenav-item:has(.tds-sidenav-section){
1520
+ display:flex;
1521
+ flex-direction:column;
1522
+ gap:var(--t-spacing-half);
881
1523
  }
882
1524
 
883
- .tds-sidenav-item .tds-sidenav-section-list {
884
- --tds-sidenav-item-depth: 1;
885
- gap: 0;
1525
+ .tds-sidenav-item .tds-sidenav-section-list{
1526
+ --tds-sidenav-item-depth:1;
1527
+ gap:0;
886
1528
  }
887
1529
 
888
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list) {
889
- visibility: hidden;
890
- block-size: 0;
891
- overflow-y: clip;
892
- opacity: 0;
893
- transition: content-visibility .2s allow-discrete, opacity .2s, block-size .2s;
1530
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1531
+ visibility:hidden;
1532
+ block-size:0;
1533
+ overflow-y:clip;
1534
+ opacity:0;
1535
+ transition:content-visibility .2s allow-discrete, opacity .2s, block-size .2s;
894
1536
  }
895
1537
 
896
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list {
897
- --tds-sidenav-item-depth: 2;
1538
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1539
+ --tds-sidenav-item-depth:2;
898
1540
  }
899
1541
 
900
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button) {
901
- min-height: var(--t-element-size-2xl);
902
- padding-block: 9px;
903
- padding-left: calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
904
- line-height: 1;
905
- background-color: transparent;
1542
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1543
+ min-height:var(--t-element-size-2xl);
1544
+ padding-block:9px;
1545
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1546
+ line-height:1;
1547
+ background-color:transparent;
906
1548
  }
907
1549
 
908
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before {
909
- position: absolute;
910
- top: 0;
911
- bottom: 0;
912
- left: calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
913
- width: 2px;
914
- content: "";
915
- background-color: var(--tds-sidenav-item-nested-border-color);
916
- transition: var(--tds-sidenav-item-transition);
1550
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1551
+ position:absolute;
1552
+ top:0;
1553
+ bottom:0;
1554
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1555
+ width:2px;
1556
+ content:"";
1557
+ background-color:var(--tds-sidenav-item-nested-border-color);
1558
+ transition:var(--tds-sidenav-item-transition);
917
1559
  }
918
1560
 
919
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after {
920
- position: absolute;
921
- inset: 0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
922
- z-index: -1;
923
- height: 100%;
924
- content: "";
925
- background-color: var(--tds-sidenav-item-nested-background);
926
- border-radius: 0 var(--t-border-radius-default) var(--t-border-radius-default) 0;
927
- transition: var(--tds-sidenav-item-transition);
1561
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1562
+ position:absolute;
1563
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1564
+ z-index:-1;
1565
+ height:100%;
1566
+ content:"";
1567
+ background-color:var(--tds-sidenav-item-nested-background);
1568
+ border-radius:0 var(--t-border-radius-default) var(--t-border-radius-default) 0;
1569
+ transition:var(--tds-sidenav-item-transition);
928
1570
  }
929
1571
 
930
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)) {
931
- display: block;
932
- text-align: left;
933
- white-space: normal;
1572
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
1573
+ display:block;
1574
+ text-align:left;
1575
+ white-space:normal;
934
1576
  }
935
1577
 
936
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible {
937
- --tds-sidenav-item-nested-border-color: var(--tds-sidenav-item-nested-border-color-hover);
938
- --tds-sidenav-item-nested-background: var(--tds-sidenav-item-nested-background-hover);
1578
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
1579
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1580
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
939
1581
  }
940
1582
 
941
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active {
942
- --tds-sidenav-item-nested-background: var(--tds-sidenav-item-nested-background-active);
1583
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1584
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
943
1585
  }
944
1586
 
945
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button) {
946
- --tds-sidenav-item-nested-border-color: var(--tds-sidenav-item-nested-border-color-selected);
947
- font-weight: var(--t-font-weight-medium);
1587
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1588
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1589
+ font-weight:var(--t-font-weight-medium);
948
1590
  }
949
1591
 
950
- .tds-sidenav-responsive-header {
951
- display: flex;
952
- gap: var(--t-spacing-2);
953
- align-items: center;
954
- width: 100%;
1592
+ .tds-sidenav-responsive-header{
1593
+ display:flex;
1594
+ gap:var(--t-spacing-2);
1595
+ align-items:center;
1596
+ width:100%;
955
1597
  }
956
1598
 
957
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle {
958
- order: 0;
1599
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1600
+ order:0;
959
1601
  }
960
1602
 
961
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label {
962
- flex: 1;
963
- order: 1;
964
- margin: 0;
965
- font-size: var(--t-font-size-lg);
966
- font-weight: var(--t-font-weight-medium);
967
- color: var(--t-text-color-default-headline);
1603
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1604
+ flex:1;
1605
+ order:1;
1606
+ margin:0;
1607
+ font-size:var(--t-font-size-lg);
1608
+ font-weight:var(--t-font-weight-medium);
1609
+ color:var(--t-text-color-default-headline);
968
1610
  }
969
1611
 
970
- @media (max-width: 719px) {
971
- .tds-sidenav-collapse {
972
- z-index: 10001;
973
- display: none;
974
- max-width: min(448px, calc(100vw - 48px));
975
- padding: 0;
976
- margin: 12px 0;
977
- overflow: hidden;
978
- outline: 0;
979
- background: var(--t-surface-color-card);
980
- border: 0;
981
- border-radius: 6px;
982
- box-shadow: 0 8px 20px 0 rgba(0, 0, 0, .25);
983
- will-change: transform;
984
- position-area: bottom span-right;
1612
+ @media (max-width: 719px){
1613
+ .tds-sidenav-collapse{
1614
+ z-index:10001;
1615
+ display:none;
1616
+ max-width:min(448px, calc(100vw - 48px));
1617
+ padding:0;
1618
+ margin:12px 0;
1619
+ overflow:hidden;
1620
+ outline:0;
1621
+ background:var(--t-surface-color-card);
1622
+ border:0;
1623
+ border-radius:6px;
1624
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1625
+ will-change:transform;
1626
+ position-area:bottom span-right;
985
1627
  }
986
1628
 
987
- .tds-sidenav-scroll-container {
988
- --webkit-overflow-scrolling: touch;
989
- display: block;
990
- width: 100%;
991
- height: -moz-fit-content;
992
- height: fit-content;
993
- padding: var(--t-spacing-2);
994
- overflow-y: auto;
1629
+ .tds-sidenav-scroll-container{
1630
+ --webkit-overflow-scrolling:touch;
1631
+ display:block;
1632
+ width:100%;
1633
+ height:-moz-fit-content;
1634
+ height:fit-content;
1635
+ padding:var(--t-spacing-2);
1636
+ overflow-y:auto;
995
1637
  }
996
1638
 
997
- .tds-sidenav-item :is(a, button) :is(.prefix) {
998
- display: none;
1639
+ .tds-sidenav-item :is(a, button) :is(.prefix){
1640
+ display:none;
999
1641
  }
1000
-
1001
- /* Modern browsers only */
1002
- @supports selector(:popover-open) {
1003
- .tds-sidenav-collapse:popover-open {
1004
- display: flex;
1642
+ @supports selector(:popover-open){
1643
+ .tds-sidenav-collapse:popover-open{
1644
+ display:flex;
1005
1645
  }
1006
1646
  }
1007
-
1008
- /* Older browsers only, running the polyfill */
1009
- @supports not selector(:popover-open) {
1010
- .tds-sidenav-collapse.\:popover-open {
1011
- display: flex;
1647
+ @supports not selector(:popover-open){
1648
+ .tds-sidenav-collapse.\:popover-open{
1649
+ display:flex;
1012
1650
  }
1013
1651
  }
1014
1652
  }
1015
1653
 
1016
- @media (min-width: 720px) {
1017
- .tds-sidenav-responsive-header {
1018
- display: none;
1654
+ @media (min-width: 720px){
1655
+ .tds-sidenav-responsive-header{
1656
+ display:none;
1019
1657
  }
1020
1658
  }
1021
1659
 
1022
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]) {
1023
- display: none;
1660
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1661
+ display:none;
1024
1662
  }
1025
1663
 
1026
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"] {
1027
- display: block;
1664
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1665
+ display:block;
1028
1666
  }
1029
1667
 
1030
- tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
1031
- display: flex;
1032
- flex-direction: column;
1668
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1669
+ display:flex;
1670
+ flex-direction:column;
1033
1671
  }
1034
1672
 
1035
- .symbol {
1036
- display: inline-block;
1037
- vertical-align: text-top;
1038
- fill: currentColor;
1039
- height: 1em;
1040
- width: 1em;
1041
- }
1042
-
1043
- .tds-btn {
1044
- --tds-btn-padding-x: 12px;
1045
- --tds-btn-padding-truncated-x: 8px;
1046
- --tds-btn-padding-y: 3px;
1047
- --tds-btn-font-size: 16px;
1048
- --tds-btn-font-weight: 400;
1049
- --tds-btn-line-height: 1.5;
1050
- --tds-btn-color: var(--t-text-color-default-headline);
1051
- --tds-btn-bg: transparent;
1052
- --tds-btn-border-width: var(--t-border-width-default);
1053
- --tds-btn-border-color: transparent;
1054
- --tds-btn-border-radius: var(--t-border-radius-md);
1055
- --tds-btn-border-color-hover: transparent;
1056
- --tds-btn-disabled-opacity: 1;
1057
- --tds-btn-min-height: 32px;
1058
- --tds-btn-text-decoration: none;
1059
- --tds-btn-attention-icon-size: 1em;
1060
- display: inline-flex;
1061
- gap: 1ex;
1062
- align-items: center;
1063
- justify-content: center;
1064
- width: auto;
1065
- min-height: var(--tds-btn-min-height);
1066
- padding: var(--tds-btn-padding-y) var(--tds-btn-padding-x);
1067
- font-size: var(--tds-btn-font-size);
1068
- font-weight: var(--tds-btn-font-weight);
1069
- line-height: var(--tds-btn-line-height);
1070
- vertical-align: middle;
1071
- color: var(--tds-btn-color);
1072
- text-align: center;
1073
- -webkit-text-decoration: var(--tds-btn-text-decoration);
1074
- text-decoration: var(--tds-btn-text-decoration);
1075
- cursor: pointer;
1076
- -webkit-user-select: none;
1077
- -moz-user-select: none;
1078
- user-select: none;
1079
- background-color: var(--tds-btn-bg);
1080
- background-clip: padding-box;
1081
- border: var(--tds-btn-border-width) solid var(--tds-btn-border-color);
1082
- border-radius: var(--tds-btn-border-radius);
1083
- transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
1084
- }
1085
-
1086
- .tds-btn:where(.tds-btn--icononly,:has(.prefix,svg:not(.suffix))) {
1087
- padding-left: var(--tds-btn-padding-truncated-x);
1673
+ .symbol{
1674
+ display:inline-block;
1675
+ vertical-align:text-top;
1676
+ fill:currentColor;
1677
+ height:1em;
1678
+ width:1em;
1679
+ }
1680
+
1681
+ .tds-btn{
1682
+ --tds-btn-padding-x:12px;
1683
+ --tds-btn-padding-truncated-x:8px;
1684
+ --tds-btn-padding-y:3px;
1685
+ --tds-btn-font-size:16px;
1686
+ --tds-btn-font-weight:400;
1687
+ --tds-btn-line-height:1.5;
1688
+ --tds-btn-color:var(--t-text-color-default-headline);
1689
+ --tds-btn-bg:transparent;
1690
+ --tds-btn-border-width:var(--t-border-width-default);
1691
+ --tds-btn-border-color:transparent;
1692
+ --tds-btn-border-radius:var(--t-border-radius-md);
1693
+ --tds-btn-border-color-hover:transparent;
1694
+ --tds-btn-disabled-opacity:1;
1695
+ --tds-btn-min-height:32px;
1696
+ --tds-btn-text-decoration:none;
1697
+ --tds-btn-attention-icon-size:1em;
1698
+ display:inline-flex;
1699
+ gap:1ex;
1700
+ align-items:center;
1701
+ justify-content:center;
1702
+ width:auto;
1703
+ min-height:var(--tds-btn-min-height);
1704
+ padding:var(--tds-btn-padding-y) var(--tds-btn-padding-x);
1705
+ font-size:var(--tds-btn-font-size);
1706
+ font-weight:var(--tds-btn-font-weight);
1707
+ line-height:var(--tds-btn-line-height);
1708
+ vertical-align:middle;
1709
+ color:var(--tds-btn-color);
1710
+ text-align:center;
1711
+ -webkit-text-decoration:var(--tds-btn-text-decoration);
1712
+ text-decoration:var(--tds-btn-text-decoration);
1713
+ cursor:pointer;
1714
+ -webkit-user-select:none;
1715
+ -moz-user-select:none;
1716
+ user-select:none;
1717
+ background-color:var(--tds-btn-bg);
1718
+ background-clip:padding-box;
1719
+ border:var(--tds-btn-border-width) solid var(--tds-btn-border-color);
1720
+ border-radius:var(--tds-btn-border-radius);
1721
+ transition:color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
1722
+ }
1723
+
1724
+ .tds-btn:where(.tds-btn--icononly,:has(.prefix,svg:not(.suffix))){
1725
+ padding-left:var(--tds-btn-padding-truncated-x);
1088
1726
  }
1089
1727
 
1090
- .tds-btn:where(.tds-btn--icononly,:has(.suffix,svg:not(.prefix))) {
1091
- padding-right: var(--tds-btn-padding-truncated-x);
1728
+ .tds-btn:where(.tds-btn--icononly,:has(.suffix,svg:not(.prefix))){
1729
+ padding-right:var(--tds-btn-padding-truncated-x);
1092
1730
  }
1093
1731
 
1094
- .tds-btn:hover {
1095
- color: var(--tds-btn-color-hover);
1096
- background-color: var(--tds-btn-bg-hover);
1097
- border-color: var(--tds-btn-border-color-hover);
1732
+ .tds-btn:hover{
1733
+ color:var(--tds-btn-color-hover);
1734
+ background-color:var(--tds-btn-bg-hover);
1735
+ border-color:var(--tds-btn-border-color-hover);
1098
1736
  }
1099
1737
 
1100
- .tds-btn:focus-visible {
1101
- color: var(--tds-btn-color-hover);
1102
- outline: solid 3px var(--t-border-color-status-info);
1103
- outline-offset: 1px;
1104
- background-color: var(--tds-btn-bg-hover);
1105
- border-color: var(--tds-btn-border-color-hover);
1738
+ .tds-btn:focus-visible{
1739
+ color:var(--tds-btn-color-hover);
1740
+ outline:solid 3px var(--t-border-color-status-info);
1741
+ outline-offset:1px;
1742
+ background-color:var(--tds-btn-bg-hover);
1743
+ border-color:var(--tds-btn-border-color-hover);
1106
1744
  }
1107
1745
 
1108
- .tds-btn:active,.tds-btn.active {
1109
- color: var(--tds-btn-color-active);
1110
- background-color: var(--tds-btn-bg-active);
1111
- border-color: var(--tds-btn-border-color-active);
1746
+ .tds-btn:active,.tds-btn.active{
1747
+ color:var(--tds-btn-color-active);
1748
+ background-color:var(--tds-btn-bg-active);
1749
+ border-color:var(--tds-btn-border-color-active);
1112
1750
  }
1113
1751
 
1114
- .tds-btn:disabled,.tds-btn.disabled {
1115
- --tds-btn-loading-spinner-track-color: var(--t-fill-color-transparency-dark-020);
1116
- --tds-btn-loading-spinner-color: var(--t-text-color-status-neutral);
1117
- color: var(--tds-btn-color-disabled);
1118
- pointer-events: none;
1119
- background-color: var(--tds-btn-bg-disabled);
1120
- border-color: var(--tds-btn-border-color-disabled);
1121
- opacity: var(--tds-btn-disabled-opacity);
1752
+ .tds-btn:disabled,.tds-btn.disabled{
1753
+ --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-dark-020);
1754
+ --tds-btn-loading-spinner-color:var(--t-text-color-status-neutral);
1755
+ color:var(--tds-btn-color-disabled);
1756
+ pointer-events:none;
1757
+ background-color:var(--tds-btn-bg-disabled);
1758
+ border-color:var(--tds-btn-border-color-disabled);
1759
+ opacity:var(--tds-btn-disabled-opacity);
1122
1760
  }
1123
1761
 
1124
- .tds-btn svg:not(.symbol) {
1125
- display: block;
1126
- inline-size: auto;
1127
- block-size: auto;
1128
- max-block-size: .66666667lh;
1129
- color: var(--tds-btn-icon-color, currentColor);
1762
+ .tds-btn svg:not(.symbol){
1763
+ display:block;
1764
+ inline-size:auto;
1765
+ block-size:auto;
1766
+ max-block-size:.66666667lh;
1767
+ color:var(--tds-btn-icon-color, currentColor);
1130
1768
  }
1131
1769
 
1132
- .tds-btn .tds-loading-spinner {
1133
- --tds-loading-spinner-track-color: var(--tds-btn-loading-spinner-track-color);
1134
- --tds-loading-spinner-track-width: var(--tds-btn-loading-spinner-track-width);
1135
- --tds-loading-spinner-color: var(--tds-btn-loading-spinner-color);
1136
- --tds-loading-spinner-visibility: var(--tds-btn-loading-spinner-visibility);
1137
- --tds-loading-spinner-animation-play-state: var(--tds-btn-loading-spinner-animation-play-state);
1770
+ .tds-btn .tds-loading-spinner{
1771
+ --tds-loading-spinner-track-color:var(--tds-btn-loading-spinner-track-color);
1772
+ --tds-loading-spinner-track-width:var(--tds-btn-loading-spinner-track-width);
1773
+ --tds-loading-spinner-color:var(--tds-btn-loading-spinner-color);
1774
+ --tds-loading-spinner-visibility:var(--tds-btn-loading-spinner-visibility);
1775
+ --tds-loading-spinner-animation-play-state:var(--tds-btn-loading-spinner-animation-play-state);
1138
1776
  }
1139
1777
 
1140
- @media (prefers-reduced-motion: reduce) {
1778
+ @media (prefers-reduced-motion: reduce){
1141
1779
 
1142
- .tds-btn {
1143
- transition: none;
1780
+ .tds-btn{
1781
+ transition:none;
1144
1782
  }
1145
1783
  }
1146
1784
 
1147
- /* Effective height 48px */
1148
-
1149
- .tds-btn--xl {
1150
- --tds-btn-padding-y: 11px;
1151
- --tds-btn-padding-x: 18px;
1152
- --tds-btn-padding-truncated-x: 12px;
1153
- --tds-btn-min-height: 48px;
1154
- }
1155
-
1156
- /* Effective height 40px */
1157
-
1158
- .tds-btn--lg {
1159
- --tds-btn-padding-y: 7px;
1160
- --tds-btn-padding-x: 14px;
1161
- --tds-btn-min-height: 40px;
1162
- }
1163
-
1164
- /* Effective height 24px */
1165
-
1166
- .tds-btn--sm {
1167
- --tds-btn-padding-y: .5px;
1168
- --tds-btn-padding-x: 7px;
1169
- --tds-btn-padding-truncated-x: 4px;
1170
- --tds-btn-min-height: 24px;
1171
- --tds-btn-font-size: var(--t-font-size-sm);
1172
- --tds-btn-loading-spinner-track-width: 3px;
1173
- }
1174
-
1175
- /* Effective height 20px */
1176
-
1177
- .tds-btn--xs {
1178
- --tds-btn-padding-y: 0;
1179
- --tds-btn-padding-x: 5px;
1180
- --tds-btn-padding-truncated-x: 5px;
1181
- --tds-btn-min-height: 20px;
1182
- --tds-btn-font-size: var(--t-font-size-xs);
1183
- --tds-btn-loading-spinner-track-width: 3px;
1184
- }
1185
-
1186
- .tds-btn--neutral {
1187
- --tds-btn-color: var(--t-text-color-status-neutral);
1188
- --tds-btn-bg: var(--t-fill-color-button-neutral-solid-default);
1189
- --tds-btn-border-color: var(--t-fill-color-button-neutral-solid-default);
1190
- --tds-btn-color-hover: var(--t-text-color-status-neutral);
1191
- --tds-btn-bg-hover: var(--t-fill-color-button-neutral-solid-hover);
1192
- --tds-btn-border-color-hover: var(--t-fill-color-button-neutral-solid-hover);
1193
- --tds-btn-color-active: var(--t-text-color-status-neutral);
1194
- --tds-btn-bg-active: var(--t-fill-color-button-neutral-solid-active);
1195
- --tds-btn-border-color-active: var(--t-fill-color-button-neutral-solid-active);
1196
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1197
- --tds-btn-bg-disabled: var(--t-fill-color-button-neutral-solid-disabled);
1198
- --tds-btn-border-color-disabled: var(--t-fill-color-button-neutral-solid-disabled);
1199
- }
1200
-
1201
- .tds-btn--interaction {
1202
- --tds-btn-color: var(--t-text-color-default-inverted);
1203
- --tds-btn-bg: var(--t-fill-color-button-interaction-solid-default);
1204
- --tds-btn-border-color: var(--t-fill-color-button-interaction-solid-default);
1205
- --tds-btn-color-hover: var(--t-text-color-default-inverted);
1206
- --tds-btn-bg-hover: var(--t-fill-color-button-interaction-solid-hover);
1207
- --tds-btn-border-color-hover: var(--t-fill-color-button-interaction-solid-hover);
1208
- --tds-btn-color-active: var(--t-text-color-default-inverted);
1209
- --tds-btn-bg-active: var(--t-fill-color-button-interaction-solid-active);
1210
- --tds-btn-border-color-active: var(--t-fill-color-button-interaction-solid-active);
1211
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1212
- --tds-btn-bg-disabled: var(--t-fill-color-button-interaction-solid-disabled);
1213
- --tds-btn-border-color-disabled: var(--tds-btn-bg-disabled);
1214
- --tds-btn-loading-spinner-track-color: var(--t-fill-color-transparency-light-020);
1215
- }
1216
-
1217
- .tds-btn--delete {
1218
- --tds-btn-color: var(--t-text-color-default-inverted);
1219
- --tds-btn-bg: var(--t-fill-color-button-delete-solid-default);
1220
- --tds-btn-border-color: var(--t-fill-color-button-delete-solid-default);
1221
- --tds-btn-color-hover: var(--t-text-color-default-inverted);
1222
- --tds-btn-bg-hover: var(--t-fill-color-button-delete-solid-hover);
1223
- --tds-btn-border-color-hover: var(--t-fill-color-button-delete-solid-hover);
1224
- --tds-btn-color-active: var(--t-text-color-default-inverted);
1225
- --tds-btn-bg-active: var(--t-fill-color-button-delete-solid-active);
1226
- --tds-btn-border-color-active: var(--t-fill-color-button-delete-solid-active);
1227
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1228
- --tds-btn-bg-disabled: var(--t-fill-color-button-delete-solid-disabled);
1229
- --tds-btn-border-color-disabled: var(--tds-btn-bg-disabled);
1230
- --tds-btn-loading-spinner-track-color: var(--t-fill-color-transparency-light-020);
1231
- }
1232
-
1233
- .tds-btn--outline-neutral {
1234
- --tds-btn-color: var(--t-text-color-status-neutral);
1235
- --tds-btn-border-color: var(--t-border-color-button-neutral);
1236
- --tds-btn-color-hover: var(--tds-btn-color);
1237
- --tds-btn-bg-hover: var(--t-fill-color-button-neutral-outline-dim-hover);
1238
- --tds-btn-border-color-hover: var(--t-border-color-button-neutral);
1239
- --tds-btn-color-active: var(--tds-btn-color);
1240
- --tds-btn-bg-active: var(--t-fill-color-button-neutral-outline-dim-active);
1241
- --tds-btn-border-color-active: var(--t-border-color-button-neutral);
1242
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1243
- --tds-btn-bg-disabled: var(--t-fill-color-button-neutral-outline-dim-disabled);
1244
- --tds-btn-border-color-disabled: var(--t-border-color-button-neutral);
1245
- }
1246
-
1247
- .tds-btn--outline-interaction {
1248
- --tds-btn-color: var(--t-text-color-interaction-primary);
1249
- --tds-btn-border-color: var(--t-border-color-button-info);
1250
- --tds-btn-color-hover: var(--tds-btn-color);
1251
- --tds-btn-bg-hover: var(--t-fill-color-button-interaction-outline-dim-hover);
1252
- --tds-btn-border-color-hover: var(--tds-btn-border-color);
1253
- --tds-btn-color-active: var(--tds-btn-color);
1254
- --tds-btn-bg-active: var(--t-fill-color-button-interaction-outline-dim-active);
1255
- --tds-btn-border-color-active: var(--tds-btn-border-color);
1256
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1257
- --tds-btn-bg-disabled: var(--t-fill-color-button-interaction-outline-dim-disabled);
1258
- --tds-btn-border-color-disabled: var(--t-border-color-button-neutral);
1259
- --tds-btn-loading-spinner-track-color: var(--t-fill-color-status-info-ghost);
1260
- }
1261
-
1262
- .tds-btn--outline-delete {
1263
- --tds-btn-color: var(--t-text-color-status-error);
1264
- --tds-btn-border-color: var(--t-border-color-button-delete);
1265
- --tds-btn-color-hover: var(--tds-btn-color);
1266
- --tds-btn-bg-hover: var(--t-fill-color-button-delete-outline-dim-hover);
1267
- --tds-btn-border-color-hover: var(--tds-btn-border-color);
1268
- --tds-btn-color-active: var(--tds-btn-color);
1269
- --tds-btn-bg-active: var(--t-fill-color-button-delete-outline-dim-active);
1270
- --tds-btn-border-color-active: var(--tds-btn-border-color);
1271
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1272
- --tds-btn-bg-disabled: var(--t-fill-color-button-delete-outline-dim-disabled);
1273
- --tds-btn-border-color-disabled: var(--t-border-color-button-neutral);
1274
- --tds-btn-loading-spinner-track-color: var(--t-fill-color-status-error-ghost);
1275
- }
1276
-
1277
- .tds-btn--ghost-neutral {
1278
- --tds-btn-color: var(--t-text-color-status-neutral);
1279
- --tds-btn-border-color: transparent;
1280
- --tds-btn-color-hover: var(--tds-btn-color);
1281
- --tds-btn-bg-hover: var(--t-fill-color-button-neutral-outline-dim-hover);
1282
- --tds-btn-border-color-hover: var(--tds-btn-bg-hover);
1283
- --tds-btn-color-active: var(--tds-btn-color);
1284
- --tds-btn-bg-active: var(--t-fill-color-button-neutral-outline-dim-active);
1285
- --tds-btn-border-color-active: var(--tds-btn-bg-active);
1286
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1287
- --tds-btn-bg-disabled: transparent;
1288
- --tds-btn-border-color-disabled: transparent;
1289
- }
1290
-
1291
- .tds-btn--ghost-interaction {
1292
- --tds-btn-color: var(--t-text-color-interaction-primary);
1293
- --tds-btn-border-color: transparent;
1294
- --tds-btn-color-hover: var(--tds-btn-color);
1295
- --tds-btn-bg-hover: var(--t-fill-color-button-interaction-outline-dim-hover);
1296
- --tds-btn-border-color-hover: var(--tds-btn-bg-hover);
1297
- --tds-btn-color-active: var(--tds-btn-color);
1298
- --tds-btn-bg-active: var(--t-fill-color-button-interaction-outline-dim-active);
1299
- --tds-btn-border-color-active: var(--tds-btn-bg-active);
1300
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1301
- --tds-btn-bg-disabled: transparent;
1302
- --tds-btn-border-color-disabled: transparent;
1303
- --tds-btn-loading-spinner-track-color: var(--t-fill-color-status-info-ghost);
1304
- }
1305
-
1306
- .tds-btn--ghost-delete {
1307
- --tds-btn-color: var(--t-text-color-status-error);
1308
- --tds-btn-border-color: transparent;
1309
- --tds-btn-color-hover: var(--tds-btn-color);
1310
- --tds-btn-bg-hover: var(--t-fill-color-button-delete-outline-dim-hover);
1311
- --tds-btn-border-color-hover: var(--tds-btn-bg-hover);
1312
- --tds-btn-color-active: var(--tds-btn-color);
1313
- --tds-btn-bg-active: var(--t-fill-color-button-delete-outline-dim-active);
1314
- --tds-btn-border-color-active: var(--tds-btn-bg-active);
1315
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1316
- --tds-btn-bg-disabled: transparent;
1317
- --tds-btn-border-color-disabled: transparent;
1318
- --tds-btn-loading-spinner-track-color: var(--t-fill-color-status-error-ghost);
1319
- }
1320
-
1321
- .tds-btn--inline-text {
1322
- --tds-btn-color: var(--t-text-color-interaction-primary);
1323
- --tds-btn-color-hover: var(--t-text-color-interaction-hover);
1324
- --tds-btn-color-active: var(--t-text-color-interaction-active);
1325
- --tds-btn-bg: transparent;
1326
- --tds-btn-bg-hover: transparent;
1327
- --tds-btn-padding-y: 0;
1328
- --tds-btn-padding-x: 0;
1329
- --tds-btn-min-height: auto;
1330
- --tds-btn-text-decoration: underline;
1331
- --tds-btn-border-width: 0;
1332
- --tds-btn-border-color: transparent;
1333
- --tds-btn-font-size: inherit;
1334
- --tds-btn-font-weight: inherit;
1335
- --tds-btn-line-height: inherit;
1336
- --tds-btn-loading-spinner-track-color: var(--t-fill-color-status-info-ghost);
1337
- font-family: inherit;
1338
- font-style: inherit;
1339
- vertical-align: inherit;
1340
- }
1341
-
1342
- .tds-btn--inline-text:hover,.tds-btn--inline-text:focus-visible {
1343
- --tds-btn-text-decoration: none;
1785
+ .tds-btn--xl{
1786
+ --tds-btn-padding-y:11px;
1787
+ --tds-btn-padding-x:18px;
1788
+ --tds-btn-padding-truncated-x:12px;
1789
+ --tds-btn-min-height:48px;
1790
+ }
1791
+
1792
+ .tds-btn--lg{
1793
+ --tds-btn-padding-y:7px;
1794
+ --tds-btn-padding-x:14px;
1795
+ --tds-btn-min-height:40px;
1796
+ }
1797
+
1798
+ .tds-btn--sm{
1799
+ --tds-btn-padding-y:.5px;
1800
+ --tds-btn-padding-x:7px;
1801
+ --tds-btn-padding-truncated-x:4px;
1802
+ --tds-btn-min-height:24px;
1803
+ --tds-btn-font-size:var(--t-font-size-sm);
1804
+ --tds-btn-loading-spinner-track-width:3px;
1805
+ }
1806
+
1807
+ .tds-btn--xs{
1808
+ --tds-btn-padding-y:0;
1809
+ --tds-btn-padding-x:5px;
1810
+ --tds-btn-padding-truncated-x:5px;
1811
+ --tds-btn-min-height:20px;
1812
+ --tds-btn-font-size:var(--t-font-size-xs);
1813
+ --tds-btn-loading-spinner-track-width:3px;
1814
+ }
1815
+
1816
+ .tds-btn--neutral{
1817
+ --tds-btn-color:var(--t-text-color-status-neutral);
1818
+ --tds-btn-bg:var(--t-fill-color-button-neutral-solid-default);
1819
+ --tds-btn-border-color:var(--t-fill-color-button-neutral-solid-default);
1820
+ --tds-btn-color-hover:var(--t-text-color-status-neutral);
1821
+ --tds-btn-bg-hover:var(--t-fill-color-button-neutral-solid-hover);
1822
+ --tds-btn-border-color-hover:var(--t-fill-color-button-neutral-solid-hover);
1823
+ --tds-btn-color-active:var(--t-text-color-status-neutral);
1824
+ --tds-btn-bg-active:var(--t-fill-color-button-neutral-solid-active);
1825
+ --tds-btn-border-color-active:var(--t-fill-color-button-neutral-solid-active);
1826
+ --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1827
+ --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-solid-disabled);
1828
+ --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-solid-disabled);
1829
+ }
1830
+
1831
+ .tds-btn--interaction{
1832
+ --tds-btn-color:var(--t-text-color-default-inverted);
1833
+ --tds-btn-bg:var(--t-fill-color-button-interaction-solid-default);
1834
+ --tds-btn-border-color:var(--t-fill-color-button-interaction-solid-default);
1835
+ --tds-btn-color-hover:var(--t-text-color-default-inverted);
1836
+ --tds-btn-bg-hover:var(--t-fill-color-button-interaction-solid-hover);
1837
+ --tds-btn-border-color-hover:var(--t-fill-color-button-interaction-solid-hover);
1838
+ --tds-btn-color-active:var(--t-text-color-default-inverted);
1839
+ --tds-btn-bg-active:var(--t-fill-color-button-interaction-solid-active);
1840
+ --tds-btn-border-color-active:var(--t-fill-color-button-interaction-solid-active);
1841
+ --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1842
+ --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
1843
+ --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
1844
+ --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
1845
+ }
1846
+
1847
+ .tds-btn--delete{
1848
+ --tds-btn-color:var(--t-text-color-default-inverted);
1849
+ --tds-btn-bg:var(--t-fill-color-button-delete-solid-default);
1850
+ --tds-btn-border-color:var(--t-fill-color-button-delete-solid-default);
1851
+ --tds-btn-color-hover:var(--t-text-color-default-inverted);
1852
+ --tds-btn-bg-hover:var(--t-fill-color-button-delete-solid-hover);
1853
+ --tds-btn-border-color-hover:var(--t-fill-color-button-delete-solid-hover);
1854
+ --tds-btn-color-active:var(--t-text-color-default-inverted);
1855
+ --tds-btn-bg-active:var(--t-fill-color-button-delete-solid-active);
1856
+ --tds-btn-border-color-active:var(--t-fill-color-button-delete-solid-active);
1857
+ --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1858
+ --tds-btn-bg-disabled:var(--t-fill-color-button-delete-solid-disabled);
1859
+ --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
1860
+ --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
1861
+ }
1862
+
1863
+ .tds-btn--outline-neutral{
1864
+ --tds-btn-color:var(--t-text-color-status-neutral);
1865
+ --tds-btn-border-color:var(--t-border-color-button-neutral);
1866
+ --tds-btn-color-hover:var(--tds-btn-color);
1867
+ --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-dim-hover);
1868
+ --tds-btn-border-color-hover:var(--t-border-color-button-neutral);
1869
+ --tds-btn-color-active:var(--tds-btn-color);
1870
+ --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-dim-active);
1871
+ --tds-btn-border-color-active:var(--t-border-color-button-neutral);
1872
+ --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1873
+ --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-dim-disabled);
1874
+ --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
1875
+ }
1876
+
1877
+ .tds-btn--outline-interaction{
1878
+ --tds-btn-color:var(--t-text-color-interaction-primary);
1879
+ --tds-btn-border-color:var(--t-border-color-button-info);
1880
+ --tds-btn-color-hover:var(--tds-btn-color);
1881
+ --tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-dim-hover);
1882
+ --tds-btn-border-color-hover:var(--tds-btn-border-color);
1883
+ --tds-btn-color-active:var(--tds-btn-color);
1884
+ --tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-dim-active);
1885
+ --tds-btn-border-color-active:var(--tds-btn-border-color);
1886
+ --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1887
+ --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-outline-dim-disabled);
1888
+ --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
1889
+ --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-info-ghost);
1890
+ }
1891
+
1892
+ .tds-btn--outline-delete{
1893
+ --tds-btn-color:var(--t-text-color-status-error);
1894
+ --tds-btn-border-color:var(--t-border-color-button-delete);
1895
+ --tds-btn-color-hover:var(--tds-btn-color);
1896
+ --tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-dim-hover);
1897
+ --tds-btn-border-color-hover:var(--tds-btn-border-color);
1898
+ --tds-btn-color-active:var(--tds-btn-color);
1899
+ --tds-btn-bg-active:var(--t-fill-color-button-delete-outline-dim-active);
1900
+ --tds-btn-border-color-active:var(--tds-btn-border-color);
1901
+ --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1902
+ --tds-btn-bg-disabled:var(--t-fill-color-button-delete-outline-dim-disabled);
1903
+ --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
1904
+ --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-error-ghost);
1905
+ }
1906
+
1907
+ .tds-btn--ghost-neutral{
1908
+ --tds-btn-color:var(--t-text-color-status-neutral);
1909
+ --tds-btn-border-color:transparent;
1910
+ --tds-btn-color-hover:var(--tds-btn-color);
1911
+ --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-dim-hover);
1912
+ --tds-btn-border-color-hover:var(--tds-btn-bg-hover);
1913
+ --tds-btn-color-active:var(--tds-btn-color);
1914
+ --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-dim-active);
1915
+ --tds-btn-border-color-active:var(--tds-btn-bg-active);
1916
+ --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1917
+ --tds-btn-bg-disabled:transparent;
1918
+ --tds-btn-border-color-disabled:transparent;
1919
+ }
1920
+
1921
+ .tds-btn--ghost-interaction{
1922
+ --tds-btn-color:var(--t-text-color-interaction-primary);
1923
+ --tds-btn-border-color:transparent;
1924
+ --tds-btn-color-hover:var(--tds-btn-color);
1925
+ --tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-dim-hover);
1926
+ --tds-btn-border-color-hover:var(--tds-btn-bg-hover);
1927
+ --tds-btn-color-active:var(--tds-btn-color);
1928
+ --tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-dim-active);
1929
+ --tds-btn-border-color-active:var(--tds-btn-bg-active);
1930
+ --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1931
+ --tds-btn-bg-disabled:transparent;
1932
+ --tds-btn-border-color-disabled:transparent;
1933
+ --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-info-ghost);
1934
+ }
1935
+
1936
+ .tds-btn--ghost-delete{
1937
+ --tds-btn-color:var(--t-text-color-status-error);
1938
+ --tds-btn-border-color:transparent;
1939
+ --tds-btn-color-hover:var(--tds-btn-color);
1940
+ --tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-dim-hover);
1941
+ --tds-btn-border-color-hover:var(--tds-btn-bg-hover);
1942
+ --tds-btn-color-active:var(--tds-btn-color);
1943
+ --tds-btn-bg-active:var(--t-fill-color-button-delete-outline-dim-active);
1944
+ --tds-btn-border-color-active:var(--tds-btn-bg-active);
1945
+ --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1946
+ --tds-btn-bg-disabled:transparent;
1947
+ --tds-btn-border-color-disabled:transparent;
1948
+ --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-error-ghost);
1949
+ }
1950
+
1951
+ .tds-btn--inline-text{
1952
+ --tds-btn-color:var(--t-text-color-interaction-primary);
1953
+ --tds-btn-color-hover:var(--t-text-color-interaction-hover);
1954
+ --tds-btn-color-active:var(--t-text-color-interaction-active);
1955
+ --tds-btn-bg:transparent;
1956
+ --tds-btn-bg-hover:transparent;
1957
+ --tds-btn-padding-y:0;
1958
+ --tds-btn-padding-x:0;
1959
+ --tds-btn-min-height:auto;
1960
+ --tds-btn-text-decoration:underline;
1961
+ --tds-btn-border-width:0;
1962
+ --tds-btn-border-color:transparent;
1963
+ --tds-btn-font-size:inherit;
1964
+ --tds-btn-font-weight:inherit;
1965
+ --tds-btn-line-height:inherit;
1966
+ --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-info-ghost);
1967
+ font-family:inherit;
1968
+ font-style:inherit;
1969
+ vertical-align:inherit;
1970
+ }
1971
+
1972
+ .tds-btn--inline-text:hover,.tds-btn--inline-text:focus-visible{
1973
+ --tds-btn-text-decoration:none;
1344
1974
  }
1345
1975
 
1346
- .tds-btn--primary-page-header {
1347
- --tds-btn-color: var(--t-text-color-default-inverted);
1348
- --tds-btn-bg: var(--t-fill-color-button-interaction-solid-default);
1349
- --tds-btn-border-color: var(--t-fill-color-button-interaction-solid-default);
1350
- --tds-btn-color-hover: var(--t-text-color-default-inverted);
1351
- --tds-btn-bg-hover: var(--t-fill-color-button-interaction-solid-hover);
1352
- --tds-btn-border-color-hover: var(--t-fill-color-button-interaction-solid-hover);
1353
- --tds-btn-color-active: var(--t-text-color-default-inverted);
1354
- --tds-btn-bg-active: var(--t-fill-color-button-interaction-solid-active);
1355
- --tds-btn-border-color-active: var(--t-fill-color-button-interaction-solid-active);
1356
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1357
- --tds-btn-bg-disabled: var(--t-fill-color-button-interaction-solid-disabled);
1358
- --tds-btn-border-color-disabled: var(--tds-btn-bg-disabled);
1359
- --tds-btn-loading-spinner-track-color: var(--t-fill-color-transparency-light-020);
1360
- }
1361
-
1362
- .tds-btn--secondary-page-header {
1363
- --tds-btn-color: var(--t-text-color-status-neutral);
1364
- --tds-btn-bg: var(--t-fill-color-button-neutral-responsive-header-default);
1365
- --tds-btn-border-color: var(--t-fill-color-button-neutral-responsive-header-default);
1366
- --tds-btn-color-hover: var(--t-text-color-status-neutral);
1367
- --tds-btn-bg-hover: var(--t-fill-color-button-neutral-responsive-header-hover);
1368
- --tds-btn-border-color-hover: var(--t-fill-color-button-neutral-responsive-header-hover);
1369
- --tds-btn-color-active: var(--t-text-color-status-neutral);
1370
- --tds-btn-bg-active: var(--t-fill-color-button-neutral-responsive-header-active);
1371
- --tds-btn-border-color-active: var(--t-fill-color-button-neutral-responsive-header-active);
1372
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1373
- --tds-btn-bg-disabled: var(--t-fill-color-button-neutral-responsive-header-disabled);
1374
- --tds-btn-border-color-disabled: var(--t-fill-color-button-neutral-responsive-header-disabled);
1375
- }
1376
-
1377
- @media (min-width: 600px) {
1378
-
1379
- .tds-btn--secondary-page-header {
1380
- --tds-btn-color: var(--t-text-color-status-neutral);
1381
- --tds-btn-bg: transparent;
1382
- --tds-btn-border-color: var(--t-border-color-button-neutral);
1383
- --tds-btn-color-hover: var(--tds-btn-color);
1384
- --tds-btn-bg-hover: var(--t-fill-color-button-neutral-outline-dim-hover);
1385
- --tds-btn-border-color-hover: var(--t-border-color-button-neutral);
1386
- --tds-btn-color-active: var(--tds-btn-color);
1387
- --tds-btn-bg-active: var(--t-fill-color-button-neutral-outline-dim-active);
1388
- --tds-btn-border-color-active: var(--t-border-color-button-neutral);
1389
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1390
- --tds-btn-bg-disabled: var(--t-fill-color-button-neutral-outline-dim-disabled);
1391
- --tds-btn-border-color-disabled: var(--t-border-color-button-neutral);
1976
+ .tds-btn--primary-page-header{
1977
+ --tds-btn-color:var(--t-text-color-default-inverted);
1978
+ --tds-btn-bg:var(--t-fill-color-button-interaction-solid-default);
1979
+ --tds-btn-border-color:var(--t-fill-color-button-interaction-solid-default);
1980
+ --tds-btn-color-hover:var(--t-text-color-default-inverted);
1981
+ --tds-btn-bg-hover:var(--t-fill-color-button-interaction-solid-hover);
1982
+ --tds-btn-border-color-hover:var(--t-fill-color-button-interaction-solid-hover);
1983
+ --tds-btn-color-active:var(--t-text-color-default-inverted);
1984
+ --tds-btn-bg-active:var(--t-fill-color-button-interaction-solid-active);
1985
+ --tds-btn-border-color-active:var(--t-fill-color-button-interaction-solid-active);
1986
+ --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1987
+ --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
1988
+ --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
1989
+ --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
1990
+ }
1991
+
1992
+ .tds-btn--secondary-page-header{
1993
+ --tds-btn-color:var(--t-text-color-status-neutral);
1994
+ --tds-btn-bg:var(--t-fill-color-button-neutral-responsive-header-default);
1995
+ --tds-btn-border-color:var(--t-fill-color-button-neutral-responsive-header-default);
1996
+ --tds-btn-color-hover:var(--t-text-color-status-neutral);
1997
+ --tds-btn-bg-hover:var(--t-fill-color-button-neutral-responsive-header-hover);
1998
+ --tds-btn-border-color-hover:var(--t-fill-color-button-neutral-responsive-header-hover);
1999
+ --tds-btn-color-active:var(--t-text-color-status-neutral);
2000
+ --tds-btn-bg-active:var(--t-fill-color-button-neutral-responsive-header-active);
2001
+ --tds-btn-border-color-active:var(--t-fill-color-button-neutral-responsive-header-active);
2002
+ --tds-btn-color-disabled:var(--t-text-color-default-disabled);
2003
+ --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-responsive-header-disabled);
2004
+ --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-responsive-header-disabled);
2005
+ }
2006
+
2007
+ @media (min-width: 600px){
2008
+
2009
+ .tds-btn--secondary-page-header{
2010
+ --tds-btn-color:var(--t-text-color-status-neutral);
2011
+ --tds-btn-bg:transparent;
2012
+ --tds-btn-border-color:var(--t-border-color-button-neutral);
2013
+ --tds-btn-color-hover:var(--tds-btn-color);
2014
+ --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-dim-hover);
2015
+ --tds-btn-border-color-hover:var(--t-border-color-button-neutral);
2016
+ --tds-btn-color-active:var(--tds-btn-color);
2017
+ --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-dim-active);
2018
+ --tds-btn-border-color-active:var(--t-border-color-button-neutral);
2019
+ --tds-btn-color-disabled:var(--t-text-color-default-disabled);
2020
+ --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-dim-disabled);
2021
+ --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
1392
2022
  }
1393
2023
  }
1394
2024
 
1395
- .tds-btn--staff-only {
1396
- --tds-btn-color: var(--t-text-color-default-inverted);
1397
- --tds-btn-bg: var(--t-fill-color-product-staff-base);
1398
- --tds-btn-border-color: var(--t-border-color-default-white);
1399
- --tds-btn-color-hover: var(--t-text-color-default-inverted);
1400
- --tds-btn-bg-hover: var(--t-fill-color-product-staff-dark);
1401
- --tds-btn-border-color-hover: var(--t-border-color-default-white);
1402
- --tds-btn-color-active: var(--t-text-color-default-inverted);
1403
- --tds-btn-bg-active: var(--t-fill-color-product-staff-darker);
1404
- --tds-btn-border-color-active: var(--t-border-color-default-white);
1405
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1406
- --tds-btn-bg-disabled: var(--t-fill-color-button-interaction-solid-disabled);
1407
- --tds-btn-border-color-disabled: var(--tds-btn-bg-disabled);
1408
- --tds-btn-loading-spinner-track-color: var(--t-fill-color-transparency-light-020);
1409
- }
1410
-
1411
- .tds-btn--pill {
1412
- --tds-btn-border-radius: 999px;
1413
- --tds-btn-padding-y: 4px;
1414
- --tds-btn-padding-x: 13px;
1415
-
1416
- --tds-btn-color: var(--t-text-color-default-primary);
1417
- --tds-btn-bg: var(--t-fill-color-button-pill-default);
1418
- --tds-btn-border-color: var(--tds-btn-bg);
1419
- --tds-btn-color-hover: var(--tds-btn-color);
1420
- --tds-btn-bg-hover: var(--t-fill-color-button-pill-hover);
1421
- --tds-btn-border-color-hover: var(--tds-btn-bg-hover);
1422
-
1423
- --tds-btn-color-active: var(--tds-btn-color);
1424
- --tds-btn-bg-active: var(--t-fill-color-button-pill-active);
1425
- --tds-btn-border-color-active: var(--tds-btn-bg-active);
1426
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1427
- --tds-btn-bg-disabled: var(--t-fill-color-button-neutral-solid-disabled);
1428
- --tds-btn-border-color-disabled: var(--t-fill-color-button-neutral-solid-disabled);
1429
- --tds-btn-icon-color: var(--t-icon-color-default-secondary);
1430
- --tds-btn-min-height: 32px;
1431
- }
1432
-
1433
- .tds-btn--pill:is(.tds-btn--sm) {
1434
- --tds-btn-padding-y: 1px;
1435
- --tds-btn-padding-x: 7px;
1436
- --tds-btn-min-height: auto;
2025
+ .tds-btn--staff-only{
2026
+ --tds-btn-color:var(--t-text-color-default-inverted);
2027
+ --tds-btn-bg:var(--t-fill-color-product-staff-base);
2028
+ --tds-btn-border-color:var(--t-border-color-default-white);
2029
+ --tds-btn-color-hover:var(--t-text-color-default-inverted);
2030
+ --tds-btn-bg-hover:var(--t-fill-color-product-staff-dark);
2031
+ --tds-btn-border-color-hover:var(--t-border-color-default-white);
2032
+ --tds-btn-color-active:var(--t-text-color-default-inverted);
2033
+ --tds-btn-bg-active:var(--t-fill-color-product-staff-darker);
2034
+ --tds-btn-border-color-active:var(--t-border-color-default-white);
2035
+ --tds-btn-color-disabled:var(--t-text-color-default-disabled);
2036
+ --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
2037
+ --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
2038
+ --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
2039
+ }
2040
+
2041
+ .tds-btn--pill{
2042
+ --tds-btn-border-radius:999px;
2043
+ --tds-btn-padding-y:4px;
2044
+ --tds-btn-padding-x:13px;
2045
+
2046
+ --tds-btn-color:var(--t-text-color-default-primary);
2047
+ --tds-btn-bg:var(--t-fill-color-button-pill-default);
2048
+ --tds-btn-border-color:var(--tds-btn-bg);
2049
+ --tds-btn-color-hover:var(--tds-btn-color);
2050
+ --tds-btn-bg-hover:var(--t-fill-color-button-pill-hover);
2051
+ --tds-btn-border-color-hover:var(--tds-btn-bg-hover);
2052
+
2053
+ --tds-btn-color-active:var(--tds-btn-color);
2054
+ --tds-btn-bg-active:var(--t-fill-color-button-pill-active);
2055
+ --tds-btn-border-color-active:var(--tds-btn-bg-active);
2056
+ --tds-btn-color-disabled:var(--t-text-color-default-disabled);
2057
+ --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-solid-disabled);
2058
+ --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-solid-disabled);
2059
+ --tds-btn-icon-color:var(--t-icon-color-default-secondary);
2060
+ --tds-btn-min-height:32px;
2061
+ }
2062
+
2063
+ .tds-btn--pill:is(.tds-btn--sm){
2064
+ --tds-btn-padding-y:1px;
2065
+ --tds-btn-padding-x:7px;
2066
+ --tds-btn-min-height:auto;
1437
2067
  }
1438
2068
 
1439
- .tds-btn--pill:is(.tds-btn--xs) {
1440
- --tds-btn-padding-y: 1px;
1441
- --tds-btn-padding-x: 9px;
1442
- --tds-btn-min-height: auto;
2069
+ .tds-btn--pill:is(.tds-btn--xs){
2070
+ --tds-btn-padding-y:1px;
2071
+ --tds-btn-padding-x:9px;
2072
+ --tds-btn-min-height:auto;
1443
2073
  }
1444
2074
 
1445
- .tds-btn--pill:disabled,.tds-btn--pill.disabled {
1446
- --tds-btn-icon-color: inherit;
2075
+ .tds-btn--pill:disabled,.tds-btn--pill.disabled{
2076
+ --tds-btn-icon-color:inherit;
1447
2077
  }
1448
2078
 
1449
- .tds-btn--dropdown .suffix {
1450
- transition: transform .2s ease-in-out;
2079
+ .tds-btn--dropdown .suffix{
2080
+ transition:transform .2s ease-in-out;
1451
2081
  }
1452
2082
 
1453
- .tds-btn--dropdown[aria-expanded="true"] .suffix {
1454
- transform: rotate(-180deg);
2083
+ .tds-btn--dropdown[aria-expanded="true"] .suffix{
2084
+ transform:rotate(-180deg);
1455
2085
  }
1456
2086
 
1457
- .tds-btn--full-width {
1458
- width: 100%;
2087
+ .tds-btn--full-width{
2088
+ width:100%;
1459
2089
  }
1460
2090
 
1461
- .tds-btn--loading {
1462
- --tds-btn-loading-spinner-visibility: visible;
1463
- --tds-btn-loading-spinner-animation-play-state: running;
2091
+ .tds-btn--loading{
2092
+ --tds-btn-loading-spinner-visibility:visible;
2093
+ --tds-btn-loading-spinner-animation-play-state:running;
1464
2094
 
1465
- position: relative;
2095
+ position:relative;
1466
2096
  }
1467
2097
 
1468
- .tds-btn--loading :not(.tds-loading-spinner) {
1469
- visibility: hidden;
2098
+ .tds-btn--loading :not(.tds-loading-spinner){
2099
+ visibility:hidden;
1470
2100
  }
1471
2101
 
1472
- .tds-btn--attention .attention-icon {
1473
- display: inline-block;
1474
- width: var(--tds-btn-attention-icon-size);
1475
- height: var(--tds-btn-attention-icon-size);
1476
- background-color: var(--t-icon-color-status-warning-primary);
1477
- border: .125em solid var(--t-border-color-default-white);
1478
- border-radius: var(--t-border-radius-round);
1479
- }
1480
-
1481
- .tds-loading-spinner {
1482
- --tds-loading-spinner-size: 1.25em;
1483
-
1484
- position: absolute;
1485
- right: 0;
1486
- left: 0;
1487
- visibility: var(--tds-loading-spinner-visibility, hidden);
1488
- width: var(--tds-loading-spinner-size);
1489
- height: var(--tds-loading-spinner-size);
1490
- margin: auto;
1491
- border: var(--tds-loading-spinner-track-width, 4px) solid var(--tds-loading-spinner-track-color, var(--t-fill-color-transparency-dark-020));
1492
- border-top-color: var(--tds-loading-spinner-color, currentcolor);
1493
- border-radius: 50%;
1494
- animation: spinner-rotate 500ms infinite linear;
1495
- animation-play-state: var(--tds-loading-spinner-animation-play-state, paused);
1496
- }
1497
-
1498
- @keyframes spinner-rotate {
1499
- to {
1500
- transform: rotate(360deg);
2102
+ .tds-btn--attention .attention-icon{
2103
+ display:inline-block;
2104
+ width:var(--tds-btn-attention-icon-size);
2105
+ height:var(--tds-btn-attention-icon-size);
2106
+ background-color:var(--t-icon-color-status-warning-primary);
2107
+ border:.125em solid var(--t-border-color-default-white);
2108
+ border-radius:var(--t-border-radius-round);
2109
+ }
2110
+
2111
+ .tds-loading-spinner{
2112
+ --tds-loading-spinner-size:1.25em;
2113
+
2114
+ position:absolute;
2115
+ right:0;
2116
+ left:0;
2117
+ visibility:var(--tds-loading-spinner-visibility, hidden);
2118
+ width:var(--tds-loading-spinner-size);
2119
+ height:var(--tds-loading-spinner-size);
2120
+ margin:auto;
2121
+ border:var(--tds-loading-spinner-track-width, 4px) solid var(--tds-loading-spinner-track-color, var(--t-fill-color-transparency-dark-020));
2122
+ border-top-color:var(--tds-loading-spinner-color, currentcolor);
2123
+ border-radius:50%;
2124
+ animation:spinner-rotate 500ms infinite linear;
2125
+ animation-play-state:var(--tds-loading-spinner-animation-play-state, paused);
2126
+ }
2127
+
2128
+ @keyframes spinner-rotate{
2129
+ to{
2130
+ transform:rotate(360deg);
1501
2131
  }
1502
2132
  }
1503
2133
 
1504
- @media (prefers-reduced-motion: reduce) {
1505
- [class*="--loading"] .tds-loading-spinner {
1506
- --tds-loading-spinner-animation-play-state: paused;
2134
+ @media (prefers-reduced-motion: reduce){
2135
+ [class*="--loading"] .tds-loading-spinner{
2136
+ --tds-loading-spinner-animation-play-state:paused;
1507
2137
  }
1508
2138
  }
1509
2139