@planningcenter/tapestry 3.0.0-rc.11 → 3.0.0-rc.13

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 (32) hide show
  1. package/dist/components/link/BaseLink.js +1 -1
  2. package/dist/components/link/BaseLink.js.map +1 -1
  3. package/dist/components/page-header/index.js +1 -1
  4. package/dist/components/sidenav/index.js +1 -1
  5. package/dist/reactRender.css +501 -501
  6. package/dist/reactRender.css.map +1 -1
  7. package/dist/reactRenderLegacy.css +501 -501
  8. package/dist/reactRenderLegacy.css.map +1 -1
  9. package/dist/tapestry-wc/dist/components/{p-BSqooG3Q.js → p-CpZ0hUNM.js} +2 -2
  10. package/dist/tapestry-wc/dist/components/{p-BSqooG3Q.js.map → p-CpZ0hUNM.js.map} +1 -1
  11. package/dist/tapestry-wc/dist/components/{p-BENN-B90.js → p-Czop0bFj.js} +2 -2
  12. package/dist/tapestry-wc/dist/components/{p-BENN-B90.js.map → p-Czop0bFj.js.map} +1 -1
  13. package/dist/tapestry-wc/dist/components/{p-C_2jFU2Z.js → p-DXDkvHFj.js} +3 -3
  14. package/dist/tapestry-wc/dist/components/{p-C_2jFU2Z.js.map → p-DXDkvHFj.js.map} +1 -1
  15. package/dist/tapestry-wc/dist/components/{p-DGOVIgy4.js → p-ZW3Io_5F.js} +3 -3
  16. package/dist/tapestry-wc/dist/components/{p-DGOVIgy4.js.map → p-ZW3Io_5F.js.map} +1 -1
  17. package/dist/tapestry-wc/dist/components/{p-DMt3FD_X.js → p-u_Tnrxmv.js} +3 -3
  18. package/dist/tapestry-wc/dist/components/{p-DMt3FD_X.js.map → p-u_Tnrxmv.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/tokens-deprecated.json +19 -38
  32. package/package.json +3 -3
@@ -1,421 +1,6 @@
1
1
  @layer t-critical, t-component;
2
2
 
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:4px;
10
- --t-border-width: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-spacing-1-half:12px;
22
- --t-element-size-3xl:48px;
23
- --t-element-size-2xl:32px;
24
- --t-element-size-xl:24px;
25
- --t-element-size-lg:18px;
26
- --t-element-size-md:16px;
27
- --t-element-size-sm:14px;
28
- --t-element-size-xs:12px;
29
- --t-font-size-4xl:32px;
30
- --t-font-size-3xl:28px;
31
- --t-font-size-2xl:24px;
32
- --t-font-size-xl:20px;
33
- --t-font-size-lg:18px;
34
- --t-font-size-md:16px;
35
- --t-font-size-sm:14px;
36
- --t-font-size-xs:12px;
37
- --t-font-size-2xs:10px;
38
- --t-font-weight-normal:400;
39
- --t-font-weight-medium:500;
40
- --t-font-weight-semibold:600;
41
- --t-font-weight-bold:700;
42
- --t-container-size-xl:48px;
43
- --t-container-size-lg:40px;
44
- --t-container-size-md:32px;
45
- --t-container-size-sm:24px;
46
- --t-container-size-xs:20px;
47
- --t-avatar-size-20:20px;
48
- --t-avatar-size-24:24px;
49
- --t-avatar-size-36:36px;
50
- --t-avatar-size-48:48px;
51
- --t-avatar-size-72:72px;
52
- --t-avatar-size-112:112px;
53
- --t-text-color-headline:hsl(0, 0%, 12%);
54
- --t-text-color:hsl(0, 0%, 24%);
55
- --t-text-color-secondary:hsl(0, 0%, 42%);
56
- --t-text-color-disabled:hsl(0, 0%, 81%);
57
- --t-text-color-placeholder:hsl(0, 0%, 58%);
58
- --t-text-color-inverted:hsl(0, 0%, 100%);
59
- --t-text-color-interaction:hsl(204, 100%, 40%);
60
- --t-text-color-interaction-hover:hsl(204, 100%, 35%);
61
- --t-text-color-interaction-active:hsl(204, 100%, 30%);
62
- --t-text-color-interaction-visited:hsl(204, 100%, 30%);
63
- --t-text-color-status-neutral:hsl(0, 0%, 24%);
64
- --t-text-color-status-info:hsl(204, 100%, 35%);
65
- --t-text-color-status-success:hsl(97, 57%, 28%);
66
- --t-text-color-status-warning:hsl(42, 100%, 29%);
67
- --t-text-color-status-error:hsl(8, 60%, 45%);
68
- --t-text-color-tag-subtle-gray:hsl(0, 0%, 24%);
69
- --t-text-color-tag-subtle-blue:hsl(224, 47%, 31%);
70
- --t-text-color-tag-subtle-indigo:hsl(241, 59%, 28%);
71
- --t-text-color-tag-subtle-aqua:hsl(209, 77%, 22%);
72
- --t-text-color-tag-subtle-teal:hsl(180, 95%, 15%);
73
- --t-text-color-tag-subtle-green:hsl(100, 93%, 17%);
74
- --t-text-color-tag-subtle-yellow:hsl(29, 100%, 23%);
75
- --t-text-color-tag-subtle-orange:hsl(18, 100%, 18%);
76
- --t-text-color-tag-subtle-pink:hsl(327, 88%, 20%);
77
- --t-text-color-tag-subtle-purple:hsl(268, 71%, 27%);
78
- --t-text-color-tag-subtle-magenta:hsl(285, 71%, 20%);
79
- --t-text-color-tag-bold-gray:hsl(0, 0%, 24%);
80
- --t-text-color-tag-bold-indigo:hsl(241, 59%, 28%);
81
- --t-text-color-tag-bold-blue:hsl(224, 47%, 31%);
82
- --t-text-color-tag-bold-aqua:hsl(209, 77%, 22%);
83
- --t-text-color-tag-bold-teal:hsl(180, 95%, 15%);
84
- --t-text-color-tag-bold-green:hsl(100, 93%, 17%);
85
- --t-text-color-tag-bold-yellow:hsl(29, 100%, 23%);
86
- --t-text-color-tag-bold-orange:hsl(18, 100%, 18%);
87
- --t-text-color-tag-bold-pink:hsl(327, 88%, 20%);
88
- --t-text-color-tag-bold-purple:hsl(268, 71%, 27%);
89
- --t-text-color-tag-bold-magenta:hsl(285, 71%, 20%);
90
- --t-icon-color:hsl(0, 0%, 24%);
91
- --t-icon-color-secondary:hsl(0, 0%, 42%);
92
- --t-icon-color-dim:hsl(0, 0%, 58%);
93
- --t-icon-color-disabled:hsl(0, 0%, 81%);
94
- --t-icon-color-inverted:hsl(0, 0%, 100%);
95
- --t-icon-color-status-neutral:hsl(0, 0%, 42%);
96
- --t-icon-color-status-neutral-secondary:hsl(0, 0%, 58%);
97
- --t-icon-color-status-neutral-bold:hsl(0, 0%, 24%);
98
- --t-icon-color-status-info:hsl(204, 100%, 40%);
99
- --t-icon-color-status-success:hsl(96, 57%, 33%);
100
- --t-icon-color-status-success-secondary:hsl(97, 57%, 40%);
101
- --t-icon-color-status-warning:hsl(42, 84%, 49%);
102
- --t-icon-color-status-error:hsl(8, 60%, 47%);
103
- --t-fill-color-neutral-100:hsl(0, 0%, 100%);
104
- --t-fill-color-neutral-000:hsl(0, 0%, 12%);
105
- --t-fill-color-neutral-010:hsl(0, 0%, 24%);
106
- --t-fill-color-neutral-020:hsl(0, 0%, 42%);
107
- --t-fill-color-neutral-025:hsl(0, 0%, 50%);
108
- --t-fill-color-neutral-030:hsl(0, 0%, 58%);
109
- --t-fill-color-neutral-040:hsl(0, 0%, 81%);
110
- --t-fill-color-neutral-050:hsl(0, 0%, 88%);
111
- --t-fill-color-neutral-060:hsl(0, 0%, 93%);
112
- --t-fill-color-neutral-070:hsl(0, 0%, 95%);
113
- --t-fill-color-neutral-080:hsl(0, 0%, 97%);
114
- --t-fill-color-neutral-090:hsl(0, 0%, 98%);
115
- --t-fill-color-interaction:hsl(204, 100%, 40%);
116
- --t-fill-color-interaction-hover:hsl(204, 100%, 35%);
117
- --t-fill-color-interaction-active:hsl(204, 100%, 30%);
118
- --t-fill-color-interaction-disabled:hsl(0, 0%, 81%);
119
- --t-fill-color-control-neutral-off:hsl(0, 0%, 58%);
120
- --t-fill-color-control-neutral-on:hsl(0, 0%, 24%);
121
- --t-fill-color-control:hsl(204, 100%, 40%);
122
- --t-fill-color-control-secondary:hsl(97, 57%, 40%);
123
- --t-fill-color-control-error:hsl(8, 60%, 47%);
124
- --t-fill-color-control-disabled:hsl(0, 0%, 81%);
125
- --t-fill-color-status-neutral:hsl(0, 0%, 42%);
126
- --t-fill-color-status-neutral-ghost:hsl(0, 0%, 93%);
127
- --t-fill-color-status-neutral-dim:hsl(0, 0%, 97%);
128
- --t-fill-color-status-info:hsl(204, 100%, 40%);
129
- --t-fill-color-status-info-ghost:hsl(203, 94%, 94%);
130
- --t-fill-color-status-info-dim:hsl(204, 100%, 97%);
131
- --t-fill-color-status-success:hsl(96, 57%, 33%);
132
- --t-fill-color-status-success-ghost:hsl(97, 57%, 90%);
133
- --t-fill-color-status-success-dim:hsl(96, 60%, 95%);
134
- --t-fill-color-status-warning:hsl(42, 84%, 63%);
135
- --t-fill-color-status-warning-ghost:hsl(42, 87%, 94%);
136
- --t-fill-color-status-warning-dim:hsl(42, 87%, 97%);
137
- --t-fill-color-status-error:hsl(8, 60%, 47%);
138
- --t-fill-color-status-error-ghost:hsl(9, 59%, 93%);
139
- --t-fill-color-status-error-dim:hsl(7, 60%, 97%);
140
- --t-fill-color-tooltip:hsla(0, 0%, 12%, 0.9);
141
- --t-fill-color-product-accounts-010:hsl(212, 54%, 93%);
142
- --t-fill-color-product-accounts-020:hsl(209, 53%, 90%);
143
- --t-fill-color-product-accounts-030:hsl(210, 56%, 70%);
144
- --t-fill-color-product-accounts-040:hsl(210, 54%, 60%);
145
- --t-fill-color-product-accounts-050:hsl(210, 55%, 50%);
146
- --t-fill-color-product-accounts-060:hsl(210, 65%, 40%);
147
- --t-fill-color-product-accounts-070:hsl(211, 70%, 32%);
148
- --t-fill-color-product-accounts-080:hsl(210, 75%, 25%);
149
- --t-fill-color-product-calendar-010:hsl(8, 61%, 90%);
150
- --t-fill-color-product-calendar-020:hsl(8, 61%, 70%);
151
- --t-fill-color-product-calendar-030:hsl(8, 72%, 59%);
152
- --t-fill-color-product-calendar-040:hsl(8, 65%, 55%);
153
- --t-fill-color-product-calendar-050:hsl(9, 61%, 50%);
154
- --t-fill-color-product-calendar-060:hsl(8, 65%, 42%);
155
- --t-fill-color-product-calendar-070:hsl(7, 65%, 34%);
156
- --t-fill-color-product-calendar-080:hsl(9, 61%, 27%);
157
- --t-fill-color-product-checkins-010:hsl(285, 20%, 92%);
158
- --t-fill-color-product-checkins-020:hsl(283, 22%, 75%);
159
- --t-fill-color-product-checkins-030:hsl(284, 22%, 64%);
160
- --t-fill-color-product-checkins-040:hsl(283, 22%, 55%);
161
- --t-fill-color-product-checkins-050:hsl(283, 22%, 48%);
162
- --t-fill-color-product-checkins-060:hsl(283, 27%, 42%);
163
- --t-fill-color-product-checkins-070:hsl(284, 33%, 34%);
164
- --t-fill-color-product-checkins-080:hsl(283, 33%, 27%);
165
- --t-fill-color-product-giving-010:hsl(41, 95%, 93%);
166
- --t-fill-color-product-giving-020:hsl(42, 95%, 83%);
167
- --t-fill-color-product-giving-030:hsl(43, 95%, 75%);
168
- --t-fill-color-product-giving-040:hsl(43, 88%, 70%);
169
- --t-fill-color-product-giving-050:hsl(43, 88%, 64%);
170
- --t-fill-color-product-giving-060:hsl(42, 84%, 55%);
171
- --t-fill-color-product-giving-070:hsl(42, 84%, 48%);
172
- --t-fill-color-product-giving-080:hsl(42, 100%, 40%);
173
- --t-fill-color-product-groups-010:hsl(18, 95%, 92%);
174
- --t-fill-color-product-groups-020:hsl(17, 96%, 80%);
175
- --t-fill-color-product-groups-030:hsl(17, 96%, 70%);
176
- --t-fill-color-product-groups-040:hsl(17, 96%, 63%);
177
- --t-fill-color-product-groups-050:hsl(17, 88%, 55%);
178
- --t-fill-color-product-groups-060:hsl(12, 70%, 48%);
179
- --t-fill-color-product-groups-070:hsl(12, 70%, 40%);
180
- --t-fill-color-product-groups-080:hsl(14, 70%, 34%);
181
- --t-fill-color-product-home-010:hsl(221, 89%, 93%);
182
- --t-fill-color-product-home-020:hsl(221, 91%, 91%);
183
- --t-fill-color-product-home-030:hsl(221, 91%, 87%);
184
- --t-fill-color-product-home-040:hsl(221, 91%, 62%);
185
- --t-fill-color-product-home-050:hsl(221, 91%, 55%);
186
- --t-fill-color-product-home-060:hsl(221, 90%, 50%);
187
- --t-fill-color-product-home-070:hsl(221, 90%, 45%);
188
- --t-fill-color-product-home-080:hsl(218, 84%, 25%);
189
- --t-fill-color-product-people-010:hsl(219, 73%, 91%);
190
- --t-fill-color-product-people-020:hsl(220, 69%, 81%);
191
- --t-fill-color-product-people-030:hsl(221, 73%, 71%);
192
- --t-fill-color-product-people-040:hsl(221, 73%, 65%);
193
- --t-fill-color-product-people-050:hsl(220, 74%, 57%);
194
- --t-fill-color-product-people-060:hsl(220, 68%, 51%);
195
- --t-fill-color-product-people-070:hsl(220, 68%, 41%);
196
- --t-fill-color-product-people-080:hsl(221, 68%, 31%);
197
- --t-fill-color-product-publishing-010:hsl(220, 4%, 86%);
198
- --t-fill-color-product-publishing-020:hsl(222, 10%, 60%);
199
- --t-fill-color-product-publishing-030:hsl(221, 11%, 50%);
200
- --t-fill-color-product-publishing-040:hsl(222, 12%, 39%);
201
- --t-fill-color-product-publishing-050:hsl(220, 12%, 31%);
202
- --t-fill-color-product-publishing-060:hsl(220, 11%, 26%);
203
- --t-fill-color-product-publishing-070:hsl(217, 12%, 22%);
204
- --t-fill-color-product-publishing-080:hsl(214, 11%, 12%);
205
- --t-fill-color-product-registrations-010:hsl(173, 28%, 89%);
206
- --t-fill-color-product-registrations-020:hsl(176, 38%, 78%);
207
- --t-fill-color-product-registrations-030:hsl(176, 37%, 68%);
208
- --t-fill-color-product-registrations-040:hsl(176, 37%, 60%);
209
- --t-fill-color-product-registrations-050:hsl(175, 36%, 43%);
210
- --t-fill-color-product-registrations-060:hsl(175, 51%, 34%);
211
- --t-fill-color-product-registrations-070:hsl(174, 51%, 28%);
212
- --t-fill-color-product-registrations-080:hsl(175, 52%, 22%);
213
- --t-fill-color-product-services-010:hsl(88, 31%, 88%);
214
- --t-fill-color-product-services-020:hsl(88, 39%, 75%);
215
- --t-fill-color-product-services-030:hsl(88, 39%, 66%);
216
- --t-fill-color-product-services-040:hsl(88, 40%, 54%);
217
- --t-fill-color-product-services-050:hsl(88, 45%, 41%);
218
- --t-fill-color-product-services-060:hsl(89, 62%, 31%);
219
- --t-fill-color-product-services-070:hsl(89, 62%, 26%);
220
- --t-fill-color-product-services-080:hsl(89, 63%, 21%);
221
- --t-fill-color-product-staff:hsl(328, 100%, 45%);
222
- --t-fill-color-product-staff-dark:hsl(328, 100%, 38%);
223
- --t-fill-color-product-staff-darker:hsl(328, 100%, 33%);
224
- --t-fill-color-product-accounts-gradient-brand:linear-gradient(135deg, hsl(203, 86%, 57%), hsl(220, 76%, 57%));
225
- --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
226
- --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
227
- --t-fill-color-product-api-gradient-brand:linear-gradient(180deg, hsl(221, 100%, 62%), hsl(217, 100%, 52%));
228
- --t-fill-color-product-calendar-gradient-brand:linear-gradient(135deg, hsl(10, 88%, 58%), hsl(8, 60%, 51%));
229
- --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(5, 80%, 80%), hsl(293, 13%, 74%), hsl(204, 67%, 73%));
230
- --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(8, 100%, 94%), hsl(285, 18%, 91%), hsl(204, 67%, 92%));
231
- --t-fill-color-product-cc-gradient-brand:linear-gradient(135deg, hsl(207, 90%, 61%), hsl(123, 38%, 57%));
232
- --t-fill-color-product-checkins-gradient-brand:linear-gradient(135deg, hsl(283, 38%, 59%), hsl(284, 23%, 48%));
233
- --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%));
234
- --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 22%, 93%), hsl(225, 35%, 93%) 42%, hsl(204, 67%, 92%));
235
- --t-fill-color-product-giving-gradient-brand:linear-gradient(90deg, hsl(46, 91%, 55%), hsl(41, 89%, 55%));
236
- --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%));
237
- --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%));
238
- --t-fill-color-product-groups-gradient-brand:linear-gradient(135deg, hsl(30, 100%, 59%), hsl(19, 97%, 60%));
239
- --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(17, 88%, 80%), hsl(293, 13%, 74%), hsl(204, 67%, 73%));
240
- --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(18, 87%, 94%), hsl(300, 12%, 92%), hsl(204, 67%, 92%));
241
- --t-fill-color-product-headcounts-gradient-brand:linear-gradient(135deg, hsl(283, 37%, 59%), hsl(285, 23%, 47%));
242
- --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
243
- --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
244
- --t-fill-color-product-musicstand-gradient-brand:linear-gradient(135deg, hsl(204, 64%, 51%), hsl(211, 55%, 51%));
245
- --t-fill-color-product-people-gradient-brand:linear-gradient(135deg, hsl(205, 86%, 57%), hsl(220, 76%, 57%));
246
- --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
247
- --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
248
- --t-fill-color-product-publishing-gradient-brand:linear-gradient(135deg, hsl(240, 4%, 49%), hsl(240, 6%, 39%));
249
- --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(217, 5%, 69%), hsl(214, 15%, 69%) 45%, hsl(204, 67%, 73%));
250
- --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(210, 4%, 91%), hsl(214, 15%, 91%) 45%, hsl(204, 67%, 92%));
251
- --t-fill-color-product-registrations-gradient-brand:linear-gradient(135deg, hsl(168, 46%, 48%), hsl(175, 35%, 43%));
252
- --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%));
253
- --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%));
254
- --t-fill-color-product-services-gradient-brand:linear-gradient(135deg, hsl(96, 49%, 47%), hsl(89, 52%, 39%));
255
- --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%));
256
- --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%));
257
- --t-fill-color-tag-gray-010:hsl(0, 0%, 93%);
258
- --t-fill-color-tag-gray-020:hsl(0, 0%, 88%);
259
- --t-fill-color-tag-gray-030:hsl(0, 0%, 88%);
260
- --t-fill-color-tag-gray-040:hsl(0, 0%, 81%);
261
- --t-fill-color-tag-blue-010:hsl(220, 100%, 95%);
262
- --t-fill-color-tag-blue-020:hsl(221, 100%, 88%);
263
- --t-fill-color-tag-blue-030:hsl(220, 98%, 81%);
264
- --t-fill-color-tag-blue-040:hsl(220, 98%, 74%);
265
- --t-fill-color-tag-aqua-010:hsl(200, 82%, 89%);
266
- --t-fill-color-tag-aqua-020:hsl(200, 82%, 82%);
267
- --t-fill-color-tag-aqua-030:hsl(201, 76%, 71%);
268
- --t-fill-color-tag-aqua-040:hsl(200, 75%, 64%);
269
- --t-fill-color-tag-teal-010:hsl(163, 53%, 83%);
270
- --t-fill-color-tag-teal-020:hsl(164, 52%, 76%);
271
- --t-fill-color-tag-teal-030:hsl(169, 62%, 64%);
272
- --t-fill-color-tag-teal-040:hsl(169, 62%, 56%);
273
- --t-fill-color-tag-green-010:hsl(98, 59%, 85%);
274
- --t-fill-color-tag-green-020:hsl(99, 59%, 78%);
275
- --t-fill-color-tag-green-030:hsl(112, 57%, 65%);
276
- --t-fill-color-tag-green-040:hsl(112, 57%, 57%);
277
- --t-fill-color-tag-yellow-010:hsl(45, 77%, 85%);
278
- --t-fill-color-tag-yellow-020:hsl(44, 78%, 77%);
279
- --t-fill-color-tag-yellow-030:hsl(44, 92%, 69%);
280
- --t-fill-color-tag-yellow-040:hsl(44, 93%, 61%);
281
- --t-fill-color-tag-orange-010:hsl(22, 89%, 89%);
282
- --t-fill-color-tag-orange-020:hsl(21, 89%, 82%);
283
- --t-fill-color-tag-orange-030:hsl(21, 86%, 72%);
284
- --t-fill-color-tag-orange-040:hsl(21, 86%, 64%);
285
- --t-fill-color-tag-pink-010:hsl(311, 66%, 92%);
286
- --t-fill-color-tag-pink-020:hsl(310, 64%, 85%);
287
- --t-fill-color-tag-pink-030:hsl(324, 78%, 77%);
288
- --t-fill-color-tag-pink-040:hsl(324, 76%, 70%);
289
- --t-fill-color-tag-purple-010:hsl(259, 74%, 93%);
290
- --t-fill-color-tag-purple-020:hsl(259, 74%, 85%);
291
- --t-fill-color-tag-purple-030:hsl(273, 62%, 76%);
292
- --t-fill-color-tag-purple-040:hsl(273, 62%, 70%);
293
- --t-fill-color-tag-magenta-010:hsl(294, 37%, 90%);
294
- --t-fill-color-tag-magenta-020:hsl(291, 40%, 83%);
295
- --t-fill-color-tag-magenta-030:hsl(291, 48%, 70%);
296
- --t-fill-color-tag-magenta-040:hsl(292, 48%, 63%);
297
- --t-fill-color-tag-indigo-010:hsl(234, 78%, 93%);
298
- --t-fill-color-tag-indigo-020:hsl(233, 79%, 87%);
299
- --t-fill-color-tag-indigo-030:hsl(233, 77%, 81%);
300
- --t-fill-color-tag-indigo-040:hsl(236, 79%, 74%);
301
- --t-fill-color-button-neutral-solid:hsl(0, 0%, 93%);
302
- --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 88%);
303
- --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 81%);
304
- --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 95%);
305
- --t-fill-color-button-neutral-outline:hsla(0, 0%, 100%, 0);
306
- --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 95%);
307
- --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 93%);
308
- --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 98%);
309
- --t-fill-color-button-neutral-ghost:hsla(0, 0%, 100%, 0);
310
- --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 95%);
311
- --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 93%);
312
- --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 100%, 0);
313
- --t-fill-color-button-neutral-responsive-header:hsla(0, 0%, 0%, 0.1);
314
- --t-fill-color-button-neutral-responsive-header-hover:hsla(0, 0%, 0%, 0.2);
315
- --t-fill-color-button-neutral-responsive-header-active:hsla(0, 0%, 0%, 0.3);
316
- --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 0%, 0.05);
317
- --t-fill-color-button-interaction-solid:hsl(204, 100%, 40%);
318
- --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 35%);
319
- --t-fill-color-button-interaction-solid-active:hsl(204, 100%, 30%);
320
- --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 95%);
321
- --t-fill-color-button-interaction-outline:hsla(0, 0%, 100%, 0);
322
- --t-fill-color-button-interaction-outline-hover:hsl(204, 100%, 97%);
323
- --t-fill-color-button-interaction-outline-active:hsl(203, 94%, 94%);
324
- --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 98%);
325
- --t-fill-color-button-interaction-ghost:hsla(0, 0%, 100%, 0);
326
- --t-fill-color-button-interaction-ghost-hover:hsl(204, 100%, 97%);
327
- --t-fill-color-button-interaction-ghost-active:hsl(203, 94%, 94%);
328
- --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 100%, 0);
329
- --t-fill-color-button-delete-solid:hsl(8, 60%, 47%);
330
- --t-fill-color-button-delete-solid-hover:hsl(8, 60%, 45%);
331
- --t-fill-color-button-delete-solid-active:hsl(8, 60%, 40%);
332
- --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 95%);
333
- --t-fill-color-button-delete-outline:hsla(0, 0%, 100%, 0);
334
- --t-fill-color-button-delete-outline-hover:hsl(7, 60%, 97%);
335
- --t-fill-color-button-delete-outline-active:hsl(9, 59%, 93%);
336
- --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 98%);
337
- --t-fill-color-button-delete-ghost:hsla(0, 0%, 100%, 0);
338
- --t-fill-color-button-delete-ghost-hover:hsl(7, 60%, 97%);
339
- --t-fill-color-button-delete-ghost-active:hsl(9, 59%, 93%);
340
- --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 100%, 0);
341
- --t-fill-color-button-pill:hsl(0, 0%, 93%);
342
- --t-fill-color-button-pill-hover:hsl(0, 0%, 88%);
343
- --t-fill-color-button-pill-active:hsl(0, 0%, 88%);
344
- --t-fill-color-button-pill-disabled:hsl(0, 0%, 93%);
345
- --t-fill-color-transparency-light-010:hsla(0, 0%, 100%, 0.1);
346
- --t-fill-color-transparency-light-020:hsla(0, 0%, 100%, 0.2);
347
- --t-fill-color-transparency-light-030:hsla(0, 0%, 100%, 0.3);
348
- --t-fill-color-transparency-light-040:hsla(0, 0%, 100%, 0.4);
349
- --t-fill-color-transparency-light-050:hsla(0, 0%, 100%, 0.5);
350
- --t-fill-color-transparency-light-060:hsla(0, 0%, 100%, 0.6);
351
- --t-fill-color-transparency-light-070:hsla(0, 0%, 100%, 0.7);
352
- --t-fill-color-transparency-light-080:hsla(0, 0%, 100%, 0.8);
353
- --t-fill-color-transparency-light-090:hsla(0, 0%, 100%, 0.9);
354
- --t-fill-color-transparency-dark-010:hsla(0, 0%, 0%, 0.1);
355
- --t-fill-color-transparency-dark-020:hsla(0, 0%, 0%, 0.2);
356
- --t-fill-color-transparency-dark-030:hsla(0, 0%, 0%, 0.3);
357
- --t-fill-color-transparency-dark-040:hsla(0, 0%, 0%, 0.4);
358
- --t-fill-color-transparency-dark-050:hsla(0, 0%, 0%, 0.5);
359
- --t-fill-color-transparency-dark-060:hsla(0, 0%, 0%, 0.6);
360
- --t-fill-color-transparency-dark-070:hsla(0, 0%, 0%, 0.7);
361
- --t-fill-color-transparency-dark-080:hsla(0, 0%, 0%, 0.8);
362
- --t-fill-color-transparency-dark-090:hsla(0, 0%, 0%, 0.9);
363
- --t-fill-color-transparency-dark-static-010:hsla(0, 0%, 0%, 0.1);
364
- --t-fill-color-transparency-dark-static-020:hsla(0, 0%, 0%, 0.2);
365
- --t-fill-color-transparency-dark-static-030:hsla(0, 0%, 0%, 0.3);
366
- --t-fill-color-transparency-dark-static-040:hsla(0, 0%, 0%, 0.4);
367
- --t-fill-color-transparency-dark-static-050:hsla(0, 0%, 0%, 0.5);
368
- --t-fill-color-transparency-dark-static-060:hsla(0, 0%, 0%, 0.6);
369
- --t-fill-color-transparency-dark-static-070:hsla(0, 0%, 0%, 0.7);
370
- --t-fill-color-transparency-dark-static-080:hsla(0, 0%, 0%, 0.8);
371
- --t-fill-color-transparency-dark-static-090:hsla(0, 0%, 0%, 0.9);
372
- --t-surface-color-card:hsl(0, 0%, 100%);
373
- --t-surface-color-canvas:hsl(0, 0%, 100%);
374
- --t-border-color:hsl(0, 0%, 88%);
375
- --t-border-color-dark:hsl(0, 0%, 81%);
376
- --t-border-color-darker:hsl(0, 0%, 68%);
377
- --t-border-color-darkest:hsl(0, 0%, 58%);
378
- --t-border-color-disabled:hsl(0, 0%, 88%);
379
- --t-border-color-dim:hsl(0, 0%, 95%);
380
- --t-border-color-white:hsl(0, 0%, 100%);
381
- --t-border-color-status-neutral:hsl(0, 0%, 58%);
382
- --t-border-color-status-info:hsl(204, 100%, 40%);
383
- --t-border-color-status-success:hsl(97, 57%, 40%);
384
- --t-border-color-status-warning:hsl(42, 84%, 63%);
385
- --t-border-color-status-error:hsl(8, 60%, 47%);
386
- --t-border-color-button-neutral:hsl(0, 0%, 88%);
387
- --t-border-color-button-info:hsl(204, 100%, 40%);
388
- --t-border-color-button-create:hsl(96, 57%, 33%);
389
- --t-border-color-button-delete:hsl(8, 60%, 47%);
390
- --t-border-color-control-neutral:hsl(0, 0%, 68%);
391
- --t-border-color-control-info:hsl(204, 100%, 40%);
392
- --t-border-color-control-success:hsl(97, 57%, 40%);
393
- --t-border-color-control-warning:hsl(42, 84%, 63%);
394
- --t-border-color-control-error:hsl(8, 60%, 47%);
395
- --t-border-color-control-disabled:hsl(0, 0%, 88%);
396
- --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.07);
397
- --t-form-background-color:var(--t-fill-color-neutral-100);
398
- --t-form-background-color-disabled:var(--t-fill-color-neutral-070);
399
- --t-form-background-color-error:var(--t-fill-color-neutral-100);
400
- --t-form-background-color-readonly:var(--t-fill-color-neutral-070);
401
- --t-form-border-color:var(--t-border-color);
402
- --t-form-border-color-disabled:var(--t-border-color);
403
- --t-form-border-color-error:var(--t-border-color-status-error);
404
- --t-form-border-color-focus:var(--t-fill-color-interaction);
405
- --t-form-border-color-hover:var(--t-border-color-dark);
406
- --t-form-border-color-readonly:hsla(0, 0%, 100%, 0);
407
- --t-form-border-radius:var(--t-border-radius-md);
408
- --t-form-border-width:var(--t-border-width);
409
- --t-form-font-color:var(--t-text-color);
410
- --t-form-font-color-disabled:var(--t-text-color-disabled);
411
- --t-form-font-color-error:var(--t-text-color-status-error);
412
- --t-form-font-color-readonly:var(--t-text-color);
413
- --t-form-picker-icon-color:var(--t-icon-color);
414
- --t-form-placeholder-color:var(--t-text-color-placeholder);
415
- }
416
-
417
- @media (prefers-color-scheme: dark){
418
- :root[data-color-mode="system"]{
3
+ :root[data-color-mode="dark"]{
419
4
  color-scheme:dark;
420
5
  --t-text-color-headline:hsl(0, 0%, 94%);
421
6
  --t-text-color:hsl(0, 0%, 80%);
@@ -609,82 +194,37 @@
609
194
  --t-fill-color-transparency-light-080:hsla(0, 0%, 0%, 0.8);
610
195
  --t-fill-color-transparency-light-090:hsla(0, 0%, 0%, 0.9);
611
196
  --t-fill-color-transparency-dark-010:hsla(0, 0%, 100%, 0.1);
612
- --t-fill-color-transparency-dark-020:hsla(0, 0%, 100%, 0.2);
613
- --t-fill-color-transparency-dark-030:hsla(0, 0%, 100%, 0.3);
614
- --t-fill-color-transparency-dark-040:hsla(0, 0%, 100%, 0.4);
615
- --t-fill-color-transparency-dark-050:hsla(0, 0%, 100%, 0.5);
616
- --t-fill-color-transparency-dark-060:hsla(0, 0%, 100%, 0.6);
617
- --t-fill-color-transparency-dark-070:hsla(0, 0%, 100%, 0.7);
618
- --t-fill-color-transparency-dark-080:hsla(0, 0%, 100%, 0.8);
619
- --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
620
- --t-surface-color-card:hsl(0, 0%, 12%);
621
- --t-surface-color-canvas:hsl(0, 0%, 10%);
622
- --t-border-color:hsl(0, 0%, 21%);
623
- --t-border-color-dark:hsl(0, 0%, 25%);
624
- --t-border-color-darker:hsl(0, 0%, 33%);
625
- --t-border-color-darkest:hsl(0, 0%, 38%);
626
- --t-border-color-disabled:hsl(0, 0%, 21%);
627
- --t-border-color-dim:hsl(0, 0%, 16%);
628
- --t-border-color-white:hsl(0, 0%, 12%);
629
- --t-border-color-status-neutral:hsl(0, 0%, 38%);
630
- --t-border-color-status-info:hsl(204, 100%, 35%);
631
- --t-border-color-button-neutral:hsl(0, 0%, 19%);
632
- --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
633
- --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
634
- --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
635
- --t-border-color-control-neutral:hsl(0, 0%, 33%);
636
- --t-border-color-control-info:hsl(204, 100%, 35%);
637
- --t-border-color-control-disabled:hsl(0, 0%, 21%);
638
- --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
639
- }
640
- }
641
-
642
- :root{
643
- --t-border-color-default-base:var(--t-border-color);
644
- --t-border-color-default-dark:var(--t-border-color-dark);
645
- --t-border-color-default-darker:var(--t-border-color-darker);
646
- --t-border-color-default-darkest:var(--t-border-color-darkest);
647
- --t-border-color-default-dim:var(--t-border-color-dim);
648
- --t-border-color-default-disabled:var(--t-border-color-disabled);
649
- --t-border-color-default-white:var(--t-border-color-white);
650
- --t-border-radius-default:var(--t-border-radius);
651
- --t-border-width-default:var(--t-border-width);
652
- --t-fill-color-button-delete-ghost-default:var(--t-fill-color-button-delete-ghost);
653
- --t-fill-color-button-delete-outline-default:var(--t-fill-color-button-delete-outline);
654
- --t-fill-color-button-delete-solid-default:var(--t-fill-color-button-delete-solid);
655
- --t-fill-color-button-interaction-ghost-default:var(--t-fill-color-button-interaction-ghost);
656
- --t-fill-color-button-interaction-outline-default:var(--t-fill-color-button-interaction-outline);
657
- --t-fill-color-button-interaction-solid-default:var(--t-fill-color-button-interaction-solid);
658
- --t-fill-color-button-neutral-ghost-default:var(--t-fill-color-button-neutral-ghost);
659
- --t-fill-color-button-neutral-outline-default:var(--t-fill-color-button-neutral-outline);
660
- --t-fill-color-button-neutral-responsive-header-default:var(--t-fill-color-button-neutral-responsive-header);
661
- --t-fill-color-button-neutral-solid-default:var(--t-fill-color-button-neutral-solid);
662
- --t-fill-color-button-pill-default:var(--t-fill-color-button-pill);
663
- --t-fill-color-control-primary:var(--t-fill-color-control);
664
- --t-fill-color-interaction-default:var(--t-fill-color-interaction);
665
- --t-fill-color-product-staff-base:var(--t-fill-color-product-staff);
666
- --t-fill-color-status-error-primary:var(--t-fill-color-status-error);
667
- --t-fill-color-tooltip-primary:var(--t-fill-color-tooltip);
668
- --t-icon-color-default-dim:var(--t-icon-color-dim);
669
- --t-icon-color-default-disabled:var(--t-icon-color-disabled);
670
- --t-icon-color-default-inverted:var(--t-icon-color-inverted);
671
- --t-icon-color-default-primary:var(--t-icon-color);
672
- --t-icon-color-default-secondary:var(--t-icon-color-secondary);
673
- --t-icon-color-status-error-primary:var(--t-icon-color-status-error);
674
- --t-icon-color-status-info-primary:var(--t-icon-color-status-info);
675
- --t-icon-color-status-neutral-primary:var(--t-icon-color-status-neutral);
676
- --t-icon-color-status-success-primary:var(--t-icon-color-status-success);
677
- --t-icon-color-status-warning-primary:var(--t-icon-color-status-warning);
678
- --t-text-color-default-disabled:var(--t-text-color-disabled);
679
- --t-text-color-default-headline:var(--t-text-color-headline);
680
- --t-text-color-default-inverted:var(--t-text-color-inverted);
681
- --t-text-color-default-placeholder:var(--t-text-color-placeholder);
682
- --t-text-color-default-primary:var(--t-text-color);
683
- --t-text-color-default-secondary:var(--t-text-color-secondary);
684
- --t-text-color-interaction-primary:var(--t-text-color-interaction);
197
+ --t-fill-color-transparency-dark-020:hsla(0, 0%, 100%, 0.2);
198
+ --t-fill-color-transparency-dark-030:hsla(0, 0%, 100%, 0.3);
199
+ --t-fill-color-transparency-dark-040:hsla(0, 0%, 100%, 0.4);
200
+ --t-fill-color-transparency-dark-050:hsla(0, 0%, 100%, 0.5);
201
+ --t-fill-color-transparency-dark-060:hsla(0, 0%, 100%, 0.6);
202
+ --t-fill-color-transparency-dark-070:hsla(0, 0%, 100%, 0.7);
203
+ --t-fill-color-transparency-dark-080:hsla(0, 0%, 100%, 0.8);
204
+ --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
205
+ --t-surface-color-card:hsl(0, 0%, 12%);
206
+ --t-surface-color-canvas:hsl(0, 0%, 10%);
207
+ --t-border-color:hsl(0, 0%, 21%);
208
+ --t-border-color-dark:hsl(0, 0%, 25%);
209
+ --t-border-color-darker:hsl(0, 0%, 33%);
210
+ --t-border-color-darkest:hsl(0, 0%, 38%);
211
+ --t-border-color-disabled:hsl(0, 0%, 21%);
212
+ --t-border-color-dim:hsl(0, 0%, 16%);
213
+ --t-border-color-white:hsl(0, 0%, 12%);
214
+ --t-border-color-status-neutral:hsl(0, 0%, 38%);
215
+ --t-border-color-status-info:hsl(204, 100%, 35%);
216
+ --t-border-color-button-neutral:hsl(0, 0%, 19%);
217
+ --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
218
+ --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
219
+ --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
220
+ --t-border-color-control-neutral:hsl(0, 0%, 33%);
221
+ --t-border-color-control-info:hsl(204, 100%, 35%);
222
+ --t-border-color-control-disabled:hsl(0, 0%, 21%);
223
+ --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
685
224
  }
686
225
 
687
- :root[data-color-mode="dark"]{
226
+ @media (prefers-color-scheme: dark){
227
+ :root[data-color-mode="system"]{
688
228
  color-scheme:dark;
689
229
  --t-text-color-headline:hsl(0, 0%, 94%);
690
230
  --t-text-color:hsl(0, 0%, 80%);
@@ -906,6 +446,7 @@
906
446
  --t-border-color-control-disabled:hsl(0, 0%, 21%);
907
447
  --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
908
448
  }
449
+ }
909
450
 
910
451
  :root[data-color-mode="dark"]{
911
452
  --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
@@ -918,17 +459,418 @@
918
459
  --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
919
460
  }
920
461
 
921
- @media (prefers-color-scheme: dark){
922
- :root[data-color-mode="system"]{
923
- --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
924
- --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
925
- --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
926
- --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
927
- --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
928
- --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
929
- --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
930
- --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
931
- }
462
+ :root{
463
+ --t-border-radius-sm:2px;
464
+ --t-border-radius-md:4px;
465
+ --t-border-radius-lg:8px;
466
+ --t-border-radius-xl:16px;
467
+ --t-border-radius-round:56px;
468
+ --t-border-radius:4px;
469
+ --t-border-width:1px;
470
+ --t-border-width-thick:2px;
471
+ --t-spacing-1:8px;
472
+ --t-spacing-2:16px;
473
+ --t-spacing-3:24px;
474
+ --t-spacing-4:32px;
475
+ --t-spacing-5:40px;
476
+ --t-spacing-6:48px;
477
+ --t-spacing-7:56px;
478
+ --t-spacing-fourth:2px;
479
+ --t-spacing-half:4px;
480
+ --t-spacing-1-half:12px;
481
+ --t-element-size-3xl:48px;
482
+ --t-element-size-2xl:32px;
483
+ --t-element-size-xl:24px;
484
+ --t-element-size-lg:18px;
485
+ --t-element-size-md:16px;
486
+ --t-element-size-sm:14px;
487
+ --t-element-size-xs:12px;
488
+ --t-font-size-4xl:32px;
489
+ --t-font-size-3xl:28px;
490
+ --t-font-size-2xl:24px;
491
+ --t-font-size-xl:20px;
492
+ --t-font-size-lg:18px;
493
+ --t-font-size-md:16px;
494
+ --t-font-size-sm:14px;
495
+ --t-font-size-xs:12px;
496
+ --t-font-size-2xs:10px;
497
+ --t-font-weight-normal:400;
498
+ --t-font-weight-medium:500;
499
+ --t-font-weight-semibold:600;
500
+ --t-font-weight-bold:700;
501
+ --t-container-size-xl:48px;
502
+ --t-container-size-lg:40px;
503
+ --t-container-size-md:32px;
504
+ --t-container-size-sm:24px;
505
+ --t-container-size-xs:20px;
506
+ --t-avatar-size-20:20px;
507
+ --t-avatar-size-24:24px;
508
+ --t-avatar-size-36:36px;
509
+ --t-avatar-size-48:48px;
510
+ --t-avatar-size-72:72px;
511
+ --t-avatar-size-112:112px;
512
+ --t-text-color-headline:hsl(0, 0%, 12%);
513
+ --t-text-color:hsl(0, 0%, 24%);
514
+ --t-text-color-secondary:hsl(0, 0%, 42%);
515
+ --t-text-color-disabled:hsl(0, 0%, 81%);
516
+ --t-text-color-placeholder:hsl(0, 0%, 58%);
517
+ --t-text-color-inverted:hsl(0, 0%, 100%);
518
+ --t-text-color-interaction:hsl(204, 100%, 40%);
519
+ --t-text-color-interaction-hover:hsl(204, 100%, 35%);
520
+ --t-text-color-interaction-active:hsl(204, 100%, 30%);
521
+ --t-text-color-interaction-visited:hsl(204, 100%, 30%);
522
+ --t-text-color-status-neutral:hsl(0, 0%, 24%);
523
+ --t-text-color-status-info:hsl(204, 100%, 35%);
524
+ --t-text-color-status-success:hsl(97, 57%, 28%);
525
+ --t-text-color-status-warning:hsl(42, 100%, 29%);
526
+ --t-text-color-status-error:hsl(8, 60%, 45%);
527
+ --t-text-color-tag-subtle-gray:hsl(0, 0%, 24%);
528
+ --t-text-color-tag-subtle-blue:hsl(224, 47%, 31%);
529
+ --t-text-color-tag-subtle-indigo:hsl(241, 59%, 28%);
530
+ --t-text-color-tag-subtle-aqua:hsl(209, 77%, 22%);
531
+ --t-text-color-tag-subtle-teal:hsl(180, 95%, 15%);
532
+ --t-text-color-tag-subtle-green:hsl(100, 93%, 17%);
533
+ --t-text-color-tag-subtle-yellow:hsl(29, 100%, 23%);
534
+ --t-text-color-tag-subtle-orange:hsl(18, 100%, 18%);
535
+ --t-text-color-tag-subtle-pink:hsl(327, 88%, 20%);
536
+ --t-text-color-tag-subtle-purple:hsl(268, 71%, 27%);
537
+ --t-text-color-tag-subtle-magenta:hsl(285, 71%, 20%);
538
+ --t-text-color-tag-bold-gray:hsl(0, 0%, 24%);
539
+ --t-text-color-tag-bold-indigo:hsl(241, 59%, 28%);
540
+ --t-text-color-tag-bold-blue:hsl(224, 47%, 31%);
541
+ --t-text-color-tag-bold-aqua:hsl(209, 77%, 22%);
542
+ --t-text-color-tag-bold-teal:hsl(180, 95%, 15%);
543
+ --t-text-color-tag-bold-green:hsl(100, 93%, 17%);
544
+ --t-text-color-tag-bold-yellow:hsl(29, 100%, 23%);
545
+ --t-text-color-tag-bold-orange:hsl(18, 100%, 18%);
546
+ --t-text-color-tag-bold-pink:hsl(327, 88%, 20%);
547
+ --t-text-color-tag-bold-purple:hsl(268, 71%, 27%);
548
+ --t-text-color-tag-bold-magenta:hsl(285, 71%, 20%);
549
+ --t-icon-color:hsl(0, 0%, 24%);
550
+ --t-icon-color-secondary:hsl(0, 0%, 42%);
551
+ --t-icon-color-dim:hsl(0, 0%, 58%);
552
+ --t-icon-color-disabled:hsl(0, 0%, 81%);
553
+ --t-icon-color-inverted:hsl(0, 0%, 100%);
554
+ --t-icon-color-status-neutral:hsl(0, 0%, 42%);
555
+ --t-icon-color-status-neutral-secondary:hsl(0, 0%, 58%);
556
+ --t-icon-color-status-neutral-bold:hsl(0, 0%, 24%);
557
+ --t-icon-color-status-info:hsl(204, 100%, 40%);
558
+ --t-icon-color-status-success:hsl(96, 57%, 33%);
559
+ --t-icon-color-status-success-secondary:hsl(97, 57%, 40%);
560
+ --t-icon-color-status-warning:hsl(42, 84%, 49%);
561
+ --t-icon-color-status-error:hsl(8, 60%, 47%);
562
+ --t-fill-color-neutral-100:hsl(0, 0%, 100%);
563
+ --t-fill-color-neutral-000:hsl(0, 0%, 12%);
564
+ --t-fill-color-neutral-010:hsl(0, 0%, 24%);
565
+ --t-fill-color-neutral-020:hsl(0, 0%, 42%);
566
+ --t-fill-color-neutral-025:hsl(0, 0%, 50%);
567
+ --t-fill-color-neutral-030:hsl(0, 0%, 58%);
568
+ --t-fill-color-neutral-040:hsl(0, 0%, 81%);
569
+ --t-fill-color-neutral-050:hsl(0, 0%, 88%);
570
+ --t-fill-color-neutral-060:hsl(0, 0%, 93%);
571
+ --t-fill-color-neutral-070:hsl(0, 0%, 95%);
572
+ --t-fill-color-neutral-080:hsl(0, 0%, 97%);
573
+ --t-fill-color-neutral-090:hsl(0, 0%, 98%);
574
+ --t-fill-color-interaction:hsl(204, 100%, 40%);
575
+ --t-fill-color-interaction-hover:hsl(204, 100%, 35%);
576
+ --t-fill-color-interaction-active:hsl(204, 100%, 30%);
577
+ --t-fill-color-interaction-disabled:hsl(0, 0%, 81%);
578
+ --t-fill-color-control-neutral-off:hsl(0, 0%, 58%);
579
+ --t-fill-color-control-neutral-on:hsl(0, 0%, 24%);
580
+ --t-fill-color-control:hsl(204, 100%, 40%);
581
+ --t-fill-color-control-secondary:hsl(97, 57%, 40%);
582
+ --t-fill-color-control-error:hsl(8, 60%, 47%);
583
+ --t-fill-color-control-disabled:hsl(0, 0%, 81%);
584
+ --t-fill-color-status-neutral:hsl(0, 0%, 42%);
585
+ --t-fill-color-status-neutral-ghost:hsl(0, 0%, 93%);
586
+ --t-fill-color-status-neutral-dim:hsl(0, 0%, 97%);
587
+ --t-fill-color-status-info:hsl(204, 100%, 40%);
588
+ --t-fill-color-status-info-ghost:hsl(203, 94%, 94%);
589
+ --t-fill-color-status-info-dim:hsl(204, 100%, 97%);
590
+ --t-fill-color-status-success:hsl(96, 57%, 33%);
591
+ --t-fill-color-status-success-ghost:hsl(97, 57%, 90%);
592
+ --t-fill-color-status-success-dim:hsl(96, 60%, 95%);
593
+ --t-fill-color-status-warning:hsl(42, 84%, 63%);
594
+ --t-fill-color-status-warning-ghost:hsl(42, 87%, 94%);
595
+ --t-fill-color-status-warning-dim:hsl(42, 87%, 97%);
596
+ --t-fill-color-status-error:hsl(8, 60%, 47%);
597
+ --t-fill-color-status-error-ghost:hsl(9, 59%, 93%);
598
+ --t-fill-color-status-error-dim:hsl(7, 60%, 97%);
599
+ --t-fill-color-tooltip:hsla(0, 0%, 12%, 0.9);
600
+ --t-fill-color-product-accounts-010:hsl(212, 54%, 93%);
601
+ --t-fill-color-product-accounts-020:hsl(209, 53%, 90%);
602
+ --t-fill-color-product-accounts-030:hsl(210, 56%, 70%);
603
+ --t-fill-color-product-accounts-040:hsl(210, 54%, 60%);
604
+ --t-fill-color-product-accounts-050:hsl(210, 55%, 50%);
605
+ --t-fill-color-product-accounts-060:hsl(210, 65%, 40%);
606
+ --t-fill-color-product-accounts-070:hsl(211, 70%, 32%);
607
+ --t-fill-color-product-accounts-080:hsl(210, 75%, 25%);
608
+ --t-fill-color-product-calendar-010:hsl(8, 61%, 90%);
609
+ --t-fill-color-product-calendar-020:hsl(8, 61%, 70%);
610
+ --t-fill-color-product-calendar-030:hsl(8, 72%, 59%);
611
+ --t-fill-color-product-calendar-040:hsl(8, 65%, 55%);
612
+ --t-fill-color-product-calendar-050:hsl(9, 61%, 50%);
613
+ --t-fill-color-product-calendar-060:hsl(8, 65%, 42%);
614
+ --t-fill-color-product-calendar-070:hsl(7, 65%, 34%);
615
+ --t-fill-color-product-calendar-080:hsl(9, 61%, 27%);
616
+ --t-fill-color-product-checkins-010:hsl(285, 20%, 92%);
617
+ --t-fill-color-product-checkins-020:hsl(283, 22%, 75%);
618
+ --t-fill-color-product-checkins-030:hsl(284, 22%, 64%);
619
+ --t-fill-color-product-checkins-040:hsl(283, 22%, 55%);
620
+ --t-fill-color-product-checkins-050:hsl(283, 22%, 48%);
621
+ --t-fill-color-product-checkins-060:hsl(283, 27%, 42%);
622
+ --t-fill-color-product-checkins-070:hsl(284, 33%, 34%);
623
+ --t-fill-color-product-checkins-080:hsl(283, 33%, 27%);
624
+ --t-fill-color-product-giving-010:hsl(41, 95%, 93%);
625
+ --t-fill-color-product-giving-020:hsl(42, 95%, 83%);
626
+ --t-fill-color-product-giving-030:hsl(43, 95%, 75%);
627
+ --t-fill-color-product-giving-040:hsl(43, 88%, 70%);
628
+ --t-fill-color-product-giving-050:hsl(43, 88%, 64%);
629
+ --t-fill-color-product-giving-060:hsl(42, 84%, 55%);
630
+ --t-fill-color-product-giving-070:hsl(42, 84%, 48%);
631
+ --t-fill-color-product-giving-080:hsl(42, 100%, 40%);
632
+ --t-fill-color-product-groups-010:hsl(18, 95%, 92%);
633
+ --t-fill-color-product-groups-020:hsl(17, 96%, 80%);
634
+ --t-fill-color-product-groups-030:hsl(17, 96%, 70%);
635
+ --t-fill-color-product-groups-040:hsl(17, 96%, 63%);
636
+ --t-fill-color-product-groups-050:hsl(17, 88%, 55%);
637
+ --t-fill-color-product-groups-060:hsl(12, 70%, 48%);
638
+ --t-fill-color-product-groups-070:hsl(12, 70%, 40%);
639
+ --t-fill-color-product-groups-080:hsl(14, 70%, 34%);
640
+ --t-fill-color-product-home-010:hsl(221, 89%, 93%);
641
+ --t-fill-color-product-home-020:hsl(221, 91%, 91%);
642
+ --t-fill-color-product-home-030:hsl(221, 91%, 87%);
643
+ --t-fill-color-product-home-040:hsl(221, 91%, 62%);
644
+ --t-fill-color-product-home-050:hsl(221, 91%, 55%);
645
+ --t-fill-color-product-home-060:hsl(221, 90%, 50%);
646
+ --t-fill-color-product-home-070:hsl(221, 90%, 45%);
647
+ --t-fill-color-product-home-080:hsl(218, 84%, 25%);
648
+ --t-fill-color-product-people-010:hsl(219, 73%, 91%);
649
+ --t-fill-color-product-people-020:hsl(220, 69%, 81%);
650
+ --t-fill-color-product-people-030:hsl(221, 73%, 71%);
651
+ --t-fill-color-product-people-040:hsl(221, 73%, 65%);
652
+ --t-fill-color-product-people-050:hsl(220, 74%, 57%);
653
+ --t-fill-color-product-people-060:hsl(220, 68%, 51%);
654
+ --t-fill-color-product-people-070:hsl(220, 68%, 41%);
655
+ --t-fill-color-product-people-080:hsl(221, 68%, 31%);
656
+ --t-fill-color-product-publishing-010:hsl(220, 4%, 86%);
657
+ --t-fill-color-product-publishing-020:hsl(222, 10%, 60%);
658
+ --t-fill-color-product-publishing-030:hsl(221, 11%, 50%);
659
+ --t-fill-color-product-publishing-040:hsl(222, 12%, 39%);
660
+ --t-fill-color-product-publishing-050:hsl(220, 12%, 31%);
661
+ --t-fill-color-product-publishing-060:hsl(220, 11%, 26%);
662
+ --t-fill-color-product-publishing-070:hsl(217, 12%, 22%);
663
+ --t-fill-color-product-publishing-080:hsl(214, 11%, 12%);
664
+ --t-fill-color-product-registrations-010:hsl(173, 28%, 89%);
665
+ --t-fill-color-product-registrations-020:hsl(176, 38%, 78%);
666
+ --t-fill-color-product-registrations-030:hsl(176, 37%, 68%);
667
+ --t-fill-color-product-registrations-040:hsl(176, 37%, 60%);
668
+ --t-fill-color-product-registrations-050:hsl(175, 36%, 43%);
669
+ --t-fill-color-product-registrations-060:hsl(175, 51%, 34%);
670
+ --t-fill-color-product-registrations-070:hsl(174, 51%, 28%);
671
+ --t-fill-color-product-registrations-080:hsl(175, 52%, 22%);
672
+ --t-fill-color-product-services-010:hsl(88, 31%, 88%);
673
+ --t-fill-color-product-services-020:hsl(88, 39%, 75%);
674
+ --t-fill-color-product-services-030:hsl(88, 39%, 66%);
675
+ --t-fill-color-product-services-040:hsl(88, 40%, 54%);
676
+ --t-fill-color-product-services-050:hsl(88, 45%, 41%);
677
+ --t-fill-color-product-services-060:hsl(89, 62%, 31%);
678
+ --t-fill-color-product-services-070:hsl(89, 62%, 26%);
679
+ --t-fill-color-product-services-080:hsl(89, 63%, 21%);
680
+ --t-fill-color-product-staff:hsl(328, 100%, 45%);
681
+ --t-fill-color-product-staff-dark:hsl(328, 100%, 38%);
682
+ --t-fill-color-product-staff-darker:hsl(328, 100%, 33%);
683
+ --t-fill-color-product-accounts-gradient-brand:linear-gradient(135deg, hsl(203, 86%, 57%), hsl(220, 76%, 57%));
684
+ --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
685
+ --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
686
+ --t-fill-color-product-api-gradient-brand:linear-gradient(180deg, hsl(221, 100%, 62%), hsl(217, 100%, 52%));
687
+ --t-fill-color-product-calendar-gradient-brand:linear-gradient(135deg, hsl(10, 88%, 58%), hsl(8, 60%, 51%));
688
+ --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(5, 80%, 80%), hsl(293, 13%, 74%), hsl(204, 67%, 73%));
689
+ --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(8, 100%, 94%), hsl(285, 18%, 91%), hsl(204, 67%, 92%));
690
+ --t-fill-color-product-cc-gradient-brand:linear-gradient(135deg, hsl(207, 90%, 61%), hsl(123, 38%, 57%));
691
+ --t-fill-color-product-checkins-gradient-brand:linear-gradient(135deg, hsl(283, 38%, 59%), hsl(284, 23%, 48%));
692
+ --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%));
693
+ --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 22%, 93%), hsl(225, 35%, 93%) 42%, hsl(204, 67%, 92%));
694
+ --t-fill-color-product-giving-gradient-brand:linear-gradient(90deg, hsl(46, 91%, 55%), hsl(41, 89%, 55%));
695
+ --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%));
696
+ --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%));
697
+ --t-fill-color-product-groups-gradient-brand:linear-gradient(135deg, hsl(30, 100%, 59%), hsl(19, 97%, 60%));
698
+ --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(17, 88%, 80%), hsl(293, 13%, 74%), hsl(204, 67%, 73%));
699
+ --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(18, 87%, 94%), hsl(300, 12%, 92%), hsl(204, 67%, 92%));
700
+ --t-fill-color-product-headcounts-gradient-brand:linear-gradient(135deg, hsl(283, 37%, 59%), hsl(285, 23%, 47%));
701
+ --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
702
+ --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
703
+ --t-fill-color-product-musicstand-gradient-brand:linear-gradient(135deg, hsl(204, 64%, 51%), hsl(211, 55%, 51%));
704
+ --t-fill-color-product-people-gradient-brand:linear-gradient(135deg, hsl(205, 86%, 57%), hsl(220, 76%, 57%));
705
+ --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
706
+ --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
707
+ --t-fill-color-product-publishing-gradient-brand:linear-gradient(135deg, hsl(240, 4%, 49%), hsl(240, 6%, 39%));
708
+ --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(217, 5%, 69%), hsl(214, 15%, 69%) 45%, hsl(204, 67%, 73%));
709
+ --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(210, 4%, 91%), hsl(214, 15%, 91%) 45%, hsl(204, 67%, 92%));
710
+ --t-fill-color-product-registrations-gradient-brand:linear-gradient(135deg, hsl(168, 46%, 48%), hsl(175, 35%, 43%));
711
+ --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%));
712
+ --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%));
713
+ --t-fill-color-product-services-gradient-brand:linear-gradient(135deg, hsl(96, 49%, 47%), hsl(89, 52%, 39%));
714
+ --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%));
715
+ --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%));
716
+ --t-fill-color-tag-gray-010:hsl(0, 0%, 93%);
717
+ --t-fill-color-tag-gray-020:hsl(0, 0%, 88%);
718
+ --t-fill-color-tag-gray-030:hsl(0, 0%, 88%);
719
+ --t-fill-color-tag-gray-040:hsl(0, 0%, 81%);
720
+ --t-fill-color-tag-blue-010:hsl(220, 100%, 95%);
721
+ --t-fill-color-tag-blue-020:hsl(221, 100%, 88%);
722
+ --t-fill-color-tag-blue-030:hsl(220, 98%, 81%);
723
+ --t-fill-color-tag-blue-040:hsl(220, 98%, 74%);
724
+ --t-fill-color-tag-aqua-010:hsl(200, 82%, 89%);
725
+ --t-fill-color-tag-aqua-020:hsl(200, 82%, 82%);
726
+ --t-fill-color-tag-aqua-030:hsl(201, 76%, 71%);
727
+ --t-fill-color-tag-aqua-040:hsl(200, 75%, 64%);
728
+ --t-fill-color-tag-teal-010:hsl(163, 53%, 83%);
729
+ --t-fill-color-tag-teal-020:hsl(164, 52%, 76%);
730
+ --t-fill-color-tag-teal-030:hsl(169, 62%, 64%);
731
+ --t-fill-color-tag-teal-040:hsl(169, 62%, 56%);
732
+ --t-fill-color-tag-green-010:hsl(98, 59%, 85%);
733
+ --t-fill-color-tag-green-020:hsl(99, 59%, 78%);
734
+ --t-fill-color-tag-green-030:hsl(112, 57%, 65%);
735
+ --t-fill-color-tag-green-040:hsl(112, 57%, 57%);
736
+ --t-fill-color-tag-yellow-010:hsl(45, 77%, 85%);
737
+ --t-fill-color-tag-yellow-020:hsl(44, 78%, 77%);
738
+ --t-fill-color-tag-yellow-030:hsl(44, 92%, 69%);
739
+ --t-fill-color-tag-yellow-040:hsl(44, 93%, 61%);
740
+ --t-fill-color-tag-orange-010:hsl(22, 89%, 89%);
741
+ --t-fill-color-tag-orange-020:hsl(21, 89%, 82%);
742
+ --t-fill-color-tag-orange-030:hsl(21, 86%, 72%);
743
+ --t-fill-color-tag-orange-040:hsl(21, 86%, 64%);
744
+ --t-fill-color-tag-pink-010:hsl(311, 66%, 92%);
745
+ --t-fill-color-tag-pink-020:hsl(310, 64%, 85%);
746
+ --t-fill-color-tag-pink-030:hsl(324, 78%, 77%);
747
+ --t-fill-color-tag-pink-040:hsl(324, 76%, 70%);
748
+ --t-fill-color-tag-purple-010:hsl(259, 74%, 93%);
749
+ --t-fill-color-tag-purple-020:hsl(259, 74%, 85%);
750
+ --t-fill-color-tag-purple-030:hsl(273, 62%, 76%);
751
+ --t-fill-color-tag-purple-040:hsl(273, 62%, 70%);
752
+ --t-fill-color-tag-magenta-010:hsl(294, 37%, 90%);
753
+ --t-fill-color-tag-magenta-020:hsl(291, 40%, 83%);
754
+ --t-fill-color-tag-magenta-030:hsl(291, 48%, 70%);
755
+ --t-fill-color-tag-magenta-040:hsl(292, 48%, 63%);
756
+ --t-fill-color-tag-indigo-010:hsl(234, 78%, 93%);
757
+ --t-fill-color-tag-indigo-020:hsl(233, 79%, 87%);
758
+ --t-fill-color-tag-indigo-030:hsl(233, 77%, 81%);
759
+ --t-fill-color-tag-indigo-040:hsl(236, 79%, 74%);
760
+ --t-fill-color-button-neutral-solid:hsl(0, 0%, 93%);
761
+ --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 88%);
762
+ --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 81%);
763
+ --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 95%);
764
+ --t-fill-color-button-neutral-outline:hsla(0, 0%, 100%, 0);
765
+ --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 95%);
766
+ --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 93%);
767
+ --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 98%);
768
+ --t-fill-color-button-neutral-ghost:hsla(0, 0%, 100%, 0);
769
+ --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 95%);
770
+ --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 93%);
771
+ --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 100%, 0);
772
+ --t-fill-color-button-neutral-responsive-header:hsla(0, 0%, 0%, 0.1);
773
+ --t-fill-color-button-neutral-responsive-header-hover:hsla(0, 0%, 0%, 0.2);
774
+ --t-fill-color-button-neutral-responsive-header-active:hsla(0, 0%, 0%, 0.3);
775
+ --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 0%, 0.05);
776
+ --t-fill-color-button-interaction-solid:hsl(204, 100%, 40%);
777
+ --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 35%);
778
+ --t-fill-color-button-interaction-solid-active:hsl(204, 100%, 30%);
779
+ --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 95%);
780
+ --t-fill-color-button-interaction-outline:hsla(0, 0%, 100%, 0);
781
+ --t-fill-color-button-interaction-outline-hover:hsl(204, 100%, 97%);
782
+ --t-fill-color-button-interaction-outline-active:hsl(203, 94%, 94%);
783
+ --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 98%);
784
+ --t-fill-color-button-interaction-ghost:hsla(0, 0%, 100%, 0);
785
+ --t-fill-color-button-interaction-ghost-hover:hsl(204, 100%, 97%);
786
+ --t-fill-color-button-interaction-ghost-active:hsl(203, 94%, 94%);
787
+ --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 100%, 0);
788
+ --t-fill-color-button-delete-solid:hsl(8, 60%, 47%);
789
+ --t-fill-color-button-delete-solid-hover:hsl(8, 60%, 45%);
790
+ --t-fill-color-button-delete-solid-active:hsl(8, 60%, 40%);
791
+ --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 95%);
792
+ --t-fill-color-button-delete-outline:hsla(0, 0%, 100%, 0);
793
+ --t-fill-color-button-delete-outline-hover:hsl(7, 60%, 97%);
794
+ --t-fill-color-button-delete-outline-active:hsl(9, 59%, 93%);
795
+ --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 98%);
796
+ --t-fill-color-button-delete-ghost:hsla(0, 0%, 100%, 0);
797
+ --t-fill-color-button-delete-ghost-hover:hsl(7, 60%, 97%);
798
+ --t-fill-color-button-delete-ghost-active:hsl(9, 59%, 93%);
799
+ --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 100%, 0);
800
+ --t-fill-color-button-pill:hsl(0, 0%, 93%);
801
+ --t-fill-color-button-pill-hover:hsl(0, 0%, 88%);
802
+ --t-fill-color-button-pill-active:hsl(0, 0%, 88%);
803
+ --t-fill-color-button-pill-disabled:hsl(0, 0%, 93%);
804
+ --t-fill-color-transparency-light-010:hsla(0, 0%, 100%, 0.1);
805
+ --t-fill-color-transparency-light-020:hsla(0, 0%, 100%, 0.2);
806
+ --t-fill-color-transparency-light-030:hsla(0, 0%, 100%, 0.3);
807
+ --t-fill-color-transparency-light-040:hsla(0, 0%, 100%, 0.4);
808
+ --t-fill-color-transparency-light-050:hsla(0, 0%, 100%, 0.5);
809
+ --t-fill-color-transparency-light-060:hsla(0, 0%, 100%, 0.6);
810
+ --t-fill-color-transparency-light-070:hsla(0, 0%, 100%, 0.7);
811
+ --t-fill-color-transparency-light-080:hsla(0, 0%, 100%, 0.8);
812
+ --t-fill-color-transparency-light-090:hsla(0, 0%, 100%, 0.9);
813
+ --t-fill-color-transparency-dark-010:hsla(0, 0%, 0%, 0.1);
814
+ --t-fill-color-transparency-dark-020:hsla(0, 0%, 0%, 0.2);
815
+ --t-fill-color-transparency-dark-030:hsla(0, 0%, 0%, 0.3);
816
+ --t-fill-color-transparency-dark-040:hsla(0, 0%, 0%, 0.4);
817
+ --t-fill-color-transparency-dark-050:hsla(0, 0%, 0%, 0.5);
818
+ --t-fill-color-transparency-dark-060:hsla(0, 0%, 0%, 0.6);
819
+ --t-fill-color-transparency-dark-070:hsla(0, 0%, 0%, 0.7);
820
+ --t-fill-color-transparency-dark-080:hsla(0, 0%, 0%, 0.8);
821
+ --t-fill-color-transparency-dark-090:hsla(0, 0%, 0%, 0.9);
822
+ --t-fill-color-transparency-dark-static-010:hsla(0, 0%, 0%, 0.1);
823
+ --t-fill-color-transparency-dark-static-020:hsla(0, 0%, 0%, 0.2);
824
+ --t-fill-color-transparency-dark-static-030:hsla(0, 0%, 0%, 0.3);
825
+ --t-fill-color-transparency-dark-static-040:hsla(0, 0%, 0%, 0.4);
826
+ --t-fill-color-transparency-dark-static-050:hsla(0, 0%, 0%, 0.5);
827
+ --t-fill-color-transparency-dark-static-060:hsla(0, 0%, 0%, 0.6);
828
+ --t-fill-color-transparency-dark-static-070:hsla(0, 0%, 0%, 0.7);
829
+ --t-fill-color-transparency-dark-static-080:hsla(0, 0%, 0%, 0.8);
830
+ --t-fill-color-transparency-dark-static-090:hsla(0, 0%, 0%, 0.9);
831
+ --t-surface-color-card:hsl(0, 0%, 100%);
832
+ --t-surface-color-canvas:hsl(0, 0%, 100%);
833
+ --t-border-color:hsl(0, 0%, 88%);
834
+ --t-border-color-dark:hsl(0, 0%, 81%);
835
+ --t-border-color-darker:hsl(0, 0%, 68%);
836
+ --t-border-color-darkest:hsl(0, 0%, 58%);
837
+ --t-border-color-disabled:hsl(0, 0%, 88%);
838
+ --t-border-color-dim:hsl(0, 0%, 95%);
839
+ --t-border-color-white:hsl(0, 0%, 100%);
840
+ --t-border-color-status-neutral:hsl(0, 0%, 58%);
841
+ --t-border-color-status-info:hsl(204, 100%, 40%);
842
+ --t-border-color-status-success:hsl(97, 57%, 40%);
843
+ --t-border-color-status-warning:hsl(42, 84%, 63%);
844
+ --t-border-color-status-error:hsl(8, 60%, 47%);
845
+ --t-border-color-button-neutral:hsl(0, 0%, 88%);
846
+ --t-border-color-button-info:hsl(204, 100%, 40%);
847
+ --t-border-color-button-create:hsl(96, 57%, 33%);
848
+ --t-border-color-button-delete:hsl(8, 60%, 47%);
849
+ --t-border-color-control-neutral:hsl(0, 0%, 68%);
850
+ --t-border-color-control-info:hsl(204, 100%, 40%);
851
+ --t-border-color-control-success:hsl(97, 57%, 40%);
852
+ --t-border-color-control-warning:hsl(42, 84%, 63%);
853
+ --t-border-color-control-error:hsl(8, 60%, 47%);
854
+ --t-border-color-control-disabled:hsl(0, 0%, 88%);
855
+ --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.07);
856
+ --t-form-background-color:var(--t-fill-color-neutral-100);
857
+ --t-form-background-color-disabled:var(--t-fill-color-neutral-070);
858
+ --t-form-background-color-error:var(--t-fill-color-neutral-100);
859
+ --t-form-background-color-readonly:var(--t-fill-color-neutral-070);
860
+ --t-form-border-color:var(--t-border-color);
861
+ --t-form-border-color-disabled:var(--t-border-color);
862
+ --t-form-border-color-error:var(--t-border-color-status-error);
863
+ --t-form-border-color-focus:var(--t-fill-color-interaction);
864
+ --t-form-border-color-hover:var(--t-border-color-dark);
865
+ --t-form-border-color-readonly:hsla(0, 0%, 100%, 0);
866
+ --t-form-border-radius:var(--t-border-radius-md);
867
+ --t-form-border-width:var(--t-border-width);
868
+ --t-form-font-color:var(--t-text-color);
869
+ --t-form-font-color-disabled:var(--t-text-color-disabled);
870
+ --t-form-font-color-error:var(--t-text-color-status-error);
871
+ --t-form-font-color-readonly:var(--t-text-color);
872
+ --t-form-picker-icon-color:var(--t-icon-color);
873
+ --t-form-placeholder-color:var(--t-text-color-placeholder);
932
874
  }
933
875
 
934
876
  :root{
@@ -970,6 +912,64 @@
970
912
  --t-fill-color-button-delete-outline-dim-disabled:var(--t-fill-color-button-delete-outline-disabled);
971
913
  }
972
914
 
915
+ @media (prefers-color-scheme: dark){
916
+ :root[data-color-mode="system"]{
917
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
918
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
919
+ --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
920
+ --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
921
+ --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
922
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
923
+ --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
924
+ --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
925
+ }
926
+ }
927
+
928
+ :root{
929
+ --t-border-color-default-base:var(--t-border-color);
930
+ --t-border-color-default-dark:var(--t-border-color-dark);
931
+ --t-border-color-default-darker:var(--t-border-color-darker);
932
+ --t-border-color-default-darkest:var(--t-border-color-darkest);
933
+ --t-border-color-default-dim:var(--t-border-color-dim);
934
+ --t-border-color-default-disabled:var(--t-border-color-disabled);
935
+ --t-border-color-default-white:var(--t-border-color-white);
936
+ --t-border-radius-default:var(--t-border-radius);
937
+ --t-border-width-default:var(--t-border-width);
938
+ --t-fill-color-button-delete-ghost-default:var(--t-fill-color-button-delete-ghost);
939
+ --t-fill-color-button-delete-outline-default:var(--t-fill-color-button-delete-outline);
940
+ --t-fill-color-button-delete-solid-default:var(--t-fill-color-button-delete-solid);
941
+ --t-fill-color-button-interaction-ghost-default:var(--t-fill-color-button-interaction-ghost);
942
+ --t-fill-color-button-interaction-outline-default:var(--t-fill-color-button-interaction-outline);
943
+ --t-fill-color-button-interaction-solid-default:var(--t-fill-color-button-interaction-solid);
944
+ --t-fill-color-button-neutral-ghost-default:var(--t-fill-color-button-neutral-ghost);
945
+ --t-fill-color-button-neutral-outline-default:var(--t-fill-color-button-neutral-outline);
946
+ --t-fill-color-button-neutral-responsive-header-default:var(--t-fill-color-button-neutral-responsive-header);
947
+ --t-fill-color-button-neutral-solid-default:var(--t-fill-color-button-neutral-solid);
948
+ --t-fill-color-button-pill-default:var(--t-fill-color-button-pill);
949
+ --t-fill-color-control-primary:var(--t-fill-color-control);
950
+ --t-fill-color-interaction-default:var(--t-fill-color-interaction);
951
+ --t-fill-color-product-staff-base:var(--t-fill-color-product-staff);
952
+ --t-fill-color-status-error-primary:var(--t-fill-color-status-error);
953
+ --t-fill-color-tooltip-primary:var(--t-fill-color-tooltip);
954
+ --t-icon-color-default-dim:var(--t-icon-color-dim);
955
+ --t-icon-color-default-disabled:var(--t-icon-color-disabled);
956
+ --t-icon-color-default-inverted:var(--t-icon-color-inverted);
957
+ --t-icon-color-default-primary:var(--t-icon-color);
958
+ --t-icon-color-default-secondary:var(--t-icon-color-secondary);
959
+ --t-icon-color-status-error-primary:var(--t-icon-color-status-error);
960
+ --t-icon-color-status-info-primary:var(--t-icon-color-status-info);
961
+ --t-icon-color-status-neutral-primary:var(--t-icon-color-status-neutral);
962
+ --t-icon-color-status-success-primary:var(--t-icon-color-status-success);
963
+ --t-icon-color-status-warning-primary:var(--t-icon-color-status-warning);
964
+ --t-text-color-default-disabled:var(--t-text-color-disabled);
965
+ --t-text-color-default-headline:var(--t-text-color-headline);
966
+ --t-text-color-default-inverted:var(--t-text-color-inverted);
967
+ --t-text-color-default-placeholder:var(--t-text-color-placeholder);
968
+ --t-text-color-default-primary:var(--t-text-color);
969
+ --t-text-color-default-secondary:var(--t-text-color-secondary);
970
+ --t-text-color-interaction-primary:var(--t-text-color-interaction);
971
+ }
972
+
973
973
  @layer t-critical{
974
974
  tds-page-header:not(.hydrated){
975
975
  display:none;