@planningcenter/tapestry 3.0.0-rc.22 → 3.0.0-rc.24

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 (38) hide show
  1. package/dist/components/page-header/index.js +1 -1
  2. package/dist/components/sidenav/index.js +1 -1
  3. package/dist/reactRender.css +1033 -1033
  4. package/dist/reactRender.css.map +1 -1
  5. package/dist/reactRenderLegacy.css +1033 -1033
  6. package/dist/reactRenderLegacy.css.map +1 -1
  7. package/dist/tapestry-wc/dist/components/{p-BX7_mF4Q.js → p-C0pXSfkK.js} +3 -3
  8. package/dist/tapestry-wc/dist/components/{p-BX7_mF4Q.js.map → p-C0pXSfkK.js.map} +1 -1
  9. package/dist/tapestry-wc/dist/components/{p-flyRTau_.js → p-C6cgcKTe.js} +2 -2
  10. package/dist/tapestry-wc/dist/components/{p-flyRTau_.js.map → p-C6cgcKTe.js.map} +1 -1
  11. package/dist/tapestry-wc/dist/components/{p-C-js6PYd.js → p-D8l_Sziw.js} +3 -3
  12. package/dist/tapestry-wc/dist/components/{p-C-js6PYd.js.map → p-D8l_Sziw.js.map} +1 -1
  13. package/dist/tapestry-wc/dist/components/{p-DIk76iNv.js → p-Dm53_R0v.js} +2 -2
  14. package/dist/tapestry-wc/dist/components/{p-DIk76iNv.js.map → p-Dm53_R0v.js.map} +1 -1
  15. package/dist/tapestry-wc/dist/components/{p-C7OwRTmf.js → p-abQfB3Jf.js} +3 -3
  16. package/dist/tapestry-wc/dist/components/{p-C7OwRTmf.js.map → p-abQfB3Jf.js.map} +1 -1
  17. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js +2 -2
  18. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js.map +1 -1
  19. package/dist/tapestry-wc/dist/components/tds-page-header.js +3 -3
  20. package/dist/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
  21. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js +3 -3
  22. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
  23. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js +2 -2
  24. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js.map +1 -1
  25. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js +3 -3
  26. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
  27. package/dist/tapestry-wc/dist/components/tds-sidenav.js +5 -5
  28. package/dist/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
  29. package/dist/tokens/tokens-deprecated.json +168 -0
  30. package/dist/tokens/ts/react-native-tokens.d.ts +162 -0
  31. package/dist/tokens/ts/react-native-tokens.d.ts.map +1 -1
  32. package/dist/tokens/ts/react-native-tokens.js +43 -1
  33. package/dist/tokens/ts/react-native-tokens.js.map +1 -1
  34. package/dist/tokens/ts/tokens.d.ts +42 -0
  35. package/dist/tokens/ts/tokens.d.ts.map +1 -1
  36. package/dist/tokens/ts/tokens.js +43 -1
  37. package/dist/tokens/ts/tokens.js.map +1 -1
  38. package/package.json +3 -3
package/dist/reactRender.css CHANGED
@@ -1,453 +1,5 @@
1
1
  @layer t-critical, t-component;
2
2
 
3
- :root[data-color-mode="dark"]{
4
- color-scheme:dark;
5
- --t-text-color-headline:hsl(0, 0%, 94%);
6
- --t-text-color:hsl(0, 0%, 80%);
7
- --t-text-color-secondary:hsl(0, 0%, 54%);
8
- --t-text-color-disabled:hsl(0, 0%, 25%);
9
- --t-text-color-placeholder:hsl(0, 0%, 38%);
10
- --t-text-color-interaction:hsl(204, 68%, 55%);
11
- --t-text-color-interaction-hover:hsl(204, 68%, 50%);
12
- --t-text-color-interaction-active:hsl(204, 68%, 45%);
13
- --t-text-color-interaction-visited:hsl(204, 68%, 50%);
14
- --t-text-color-status-neutral:hsl(0, 0%, 80%);
15
- --t-text-color-status-info:hsl(204, 68%, 55%);
16
- --t-text-color-status-success:hsl(97, 57%, 41%);
17
- --t-text-color-status-warning:hsl(42, 84%, 55%);
18
- --t-text-color-status-error:hsl(8, 61%, 61%);
19
- --t-text-color-tag-subtle-gray:hsl(0, 0%, 80%);
20
- --t-text-color-tag-subtle-blue:hsl(223, 46%, 84%);
21
- --t-text-color-tag-subtle-indigo:hsl(233, 78%, 84%);
22
- --t-text-color-tag-subtle-aqua:hsl(208, 77%, 85%);
23
- --t-text-color-tag-subtle-teal:hsl(180, 95%, 74%);
24
- --t-text-color-tag-subtle-green:hsl(99, 93%, 84%);
25
- --t-text-color-tag-subtle-yellow:hsl(29, 100%, 85%);
26
- --t-text-color-tag-subtle-orange:hsl(18, 100%, 85%);
27
- --t-text-color-tag-subtle-pink:hsl(328, 89%, 89%);
28
- --t-text-color-tag-subtle-purple:hsl(268, 70%, 88%);
29
- --t-text-color-tag-subtle-magenta:hsl(285, 70%, 88%);
30
- --t-text-color-tag-bold-gray:hsl(0, 0%, 100%);
31
- --t-text-color-tag-bold-indigo:hsl(0, 0%, 100%);
32
- --t-text-color-tag-bold-blue:hsl(0, 0%, 100%);
33
- --t-text-color-tag-bold-aqua:hsl(0, 0%, 100%);
34
- --t-text-color-tag-bold-teal:hsl(0, 0%, 100%);
35
- --t-text-color-tag-bold-green:hsl(0, 0%, 100%);
36
- --t-text-color-tag-bold-yellow:hsl(0, 0%, 100%);
37
- --t-text-color-tag-bold-orange:hsl(0, 0%, 100%);
38
- --t-text-color-tag-bold-pink:hsl(0, 0%, 100%);
39
- --t-text-color-tag-bold-purple:hsl(0, 0%, 100%);
40
- --t-text-color-tag-bold-magenta:hsl(0, 0%, 100%);
41
- --t-icon-color:hsl(0, 0%, 80%);
42
- --t-icon-color-secondary:hsl(0, 0%, 54%);
43
- --t-icon-color-dim:hsl(0, 0%, 38%);
44
- --t-icon-color-disabled:hsl(0, 0%, 25%);
45
- --t-icon-color-status-neutral:hsl(0, 0%, 54%);
46
- --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
47
- --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
48
- --t-icon-color-status-info:hsl(204, 68%, 55%);
49
- --t-icon-color-status-error:hsl(8, 61%, 61%);
50
- --t-fill-color-neutral-100:hsl(0, 0%, 10%);
51
- --t-fill-color-neutral-000:hsl(0, 0%, 98%);
52
- --t-fill-color-neutral-010:hsl(0, 0%, 88%);
53
- --t-fill-color-neutral-020:hsl(0, 0%, 68%);
54
- --t-fill-color-neutral-025:hsl(0, 0%, 58%);
55
- --t-fill-color-neutral-030:hsl(0, 0%, 50%);
56
- --t-fill-color-neutral-040:hsl(0, 0%, 32%);
57
- --t-fill-color-neutral-050:hsl(0, 0%, 24%);
58
- --t-fill-color-neutral-060:hsl(0, 0%, 19%);
59
- --t-fill-color-neutral-070:hsl(0, 0%, 17%);
60
- --t-fill-color-neutral-080:hsl(0, 0%, 15%);
61
- --t-fill-color-neutral-090:hsl(0, 0%, 12%);
62
- --t-fill-color-interaction:hsl(204, 100%, 35%);
63
- --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
64
- --t-fill-color-interaction-active:hsl(204, 80%, 45%);
65
- --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
66
- --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
67
- --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
68
- --t-fill-color-control:hsl(204, 100%, 35%);
69
- --t-fill-color-control-disabled:hsl(0, 0%, 20%);
70
- --t-fill-color-status-neutral:hsl(0, 0%, 24%);
71
- --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
72
- --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
73
- --t-fill-color-status-info:hsl(204, 100%, 35%);
74
- --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
75
- --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
76
- --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
77
- --t-fill-color-status-success-dim:hsl(120, 12%, 14%);
78
- --t-fill-color-status-warning-ghost:hsl(41, 18%, 17%);
79
- --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
80
- --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
81
- --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
82
- --t-fill-color-tooltip:hsla(0, 0%, 24%, 0.9);
83
- --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
84
- --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
85
- --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
86
- --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(9, 29%, 13%), hsl(276, 8%, 12%), hsl(203, 37%, 11%));
87
- --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%));
88
- --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 11%, 14%), hsl(266, 10%, 14%) 42%, hsl(203, 37%, 11%));
89
- --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%));
90
- --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%));
91
- --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(23, 46%, 18%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
92
- --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(23, 29%, 14%), hsl(276, 7%, 14%), hsl(203, 37%, 11%));
93
- --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
94
- --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
95
- --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
96
- --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
97
- --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(225, 11%, 22%), hsl(227, 20%, 18%) 45%, hsl(204, 70%, 12%));
98
- --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(220, 7%, 16%), hsl(227, 12%, 14%) 45%, hsl(203, 37%, 11%));
99
- --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%));
100
- --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%));
101
- --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%));
102
- --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%));
103
- --t-fill-color-tag-gray-010:hsl(0, 0%, 20%);
104
- --t-fill-color-tag-gray-020:hsl(0, 0%, 24%);
105
- --t-fill-color-tag-gray-030:hsl(0, 0%, 36%);
106
- --t-fill-color-tag-gray-040:hsl(0, 0%, 42%);
107
- --t-fill-color-tag-blue-010:hsl(219, 26%, 24%);
108
- --t-fill-color-tag-blue-020:hsl(220, 28%, 29%);
109
- --t-fill-color-tag-blue-030:hsl(219, 32%, 45%);
110
- --t-fill-color-tag-blue-040:hsl(220, 35%, 52%);
111
- --t-fill-color-tag-aqua-010:hsl(200, 30%, 21%);
112
- --t-fill-color-tag-aqua-020:hsl(200, 33%, 26%);
113
- --t-fill-color-tag-aqua-030:hsl(200, 39%, 38%);
114
- --t-fill-color-tag-aqua-040:hsl(200, 39%, 43%);
115
- --t-fill-color-tag-teal-010:hsl(169, 33%, 19%);
116
- --t-fill-color-tag-teal-020:hsl(169, 37%, 22%);
117
- --t-fill-color-tag-teal-030:hsl(169, 43%, 31%);
118
- --t-fill-color-tag-teal-040:hsl(169, 44%, 35%);
119
- --t-fill-color-tag-green-010:hsl(110, 30%, 20%);
120
- --t-fill-color-tag-green-020:hsl(112, 33%, 23%);
121
- --t-fill-color-tag-green-030:hsl(112, 37%, 33%);
122
- --t-fill-color-tag-green-040:hsl(112, 39%, 37%);
123
- --t-fill-color-tag-yellow-010:hsl(44, 39%, 19%);
124
- --t-fill-color-tag-yellow-020:hsl(44, 44%, 22%);
125
- --t-fill-color-tag-yellow-030:hsl(44, 50%, 31%);
126
- --t-fill-color-tag-yellow-040:hsl(44, 53%, 36%);
127
- --t-fill-color-tag-orange-010:hsl(21, 35%, 22%);
128
- --t-fill-color-tag-orange-020:hsl(20, 38%, 26%);
129
- --t-fill-color-tag-orange-030:hsl(21, 44%, 40%);
130
- --t-fill-color-tag-orange-040:hsl(21, 46%, 45%);
131
- --t-fill-color-tag-pink-010:hsl(331, 22%, 24%);
132
- --t-fill-color-tag-pink-020:hsl(324, 26%, 26%);
133
- --t-fill-color-tag-pink-030:hsl(324, 30%, 45%);
134
- --t-fill-color-tag-pink-040:hsl(324, 33%, 51%);
135
- --t-fill-color-tag-purple-010:hsl(274, 20%, 23%);
136
- --t-fill-color-tag-purple-020:hsl(274, 21%, 28%);
137
- --t-fill-color-tag-purple-030:hsl(274, 25%, 46%);
138
- --t-fill-color-tag-purple-040:hsl(274, 28%, 53%);
139
- --t-fill-color-tag-magenta-010:hsl(292, 20%, 21%);
140
- --t-fill-color-tag-magenta-020:hsl(292, 22%, 26%);
141
- --t-fill-color-tag-magenta-030:hsl(293, 26%, 42%);
142
- --t-fill-color-tag-magenta-040:hsl(292, 27%, 48%);
143
- --t-fill-color-tag-indigo-010:hsl(235, 21%, 24%);
144
- --t-fill-color-tag-indigo-020:hsl(236, 22%, 29%);
145
- --t-fill-color-tag-indigo-030:hsl(236, 26%, 50%);
146
- --t-fill-color-tag-indigo-040:hsl(236, 34%, 56%);
147
- --t-fill-color-button-neutral-solid:hsl(0, 0%, 19%);
148
- --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
149
- --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
150
- --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
151
- --t-fill-color-button-neutral-outline:hsl(0, 0%, 15%);
152
- --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 17%);
153
- --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 19%);
154
- --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 12%);
155
- --t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
156
- --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
157
- --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
158
- --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
159
- --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
160
- --t-fill-color-button-interaction-solid:hsl(204, 100%, 35%);
161
- --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
162
- --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
163
- --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
164
- --t-fill-color-button-interaction-outline:hsl(204, 32%, 15%);
165
- --t-fill-color-button-interaction-outline-hover:hsl(204, 39%, 17%);
166
- --t-fill-color-button-interaction-outline-active:hsl(205, 45%, 18%);
167
- --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 12%);
168
- --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
169
- --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
170
- --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
171
- --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
172
- --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
173
- --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
174
- --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
175
- --t-fill-color-button-delete-outline:hsl(8, 20%, 16%);
176
- --t-fill-color-button-delete-outline-hover:hsl(9, 24%, 17%);
177
- --t-fill-color-button-delete-outline-active:hsl(9, 29%, 19%);
178
- --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 12%);
179
- --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
180
- --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
181
- --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
182
- --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
183
- --t-fill-color-button-pill:hsl(0, 0%, 18%);
184
- --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
185
- --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
186
- --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
187
- --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
188
- --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
189
- --t-fill-color-transparency-light-030:hsla(0, 0%, 0%, 0.3);
190
- --t-fill-color-transparency-light-040:hsla(0, 0%, 0%, 0.4);
191
- --t-fill-color-transparency-light-050:hsla(0, 0%, 0%, 0.5);
192
- --t-fill-color-transparency-light-060:hsla(0, 0%, 0%, 0.6);
193
- --t-fill-color-transparency-light-070:hsla(0, 0%, 0%, 0.7);
194
- --t-fill-color-transparency-light-080:hsla(0, 0%, 0%, 0.8);
195
- --t-fill-color-transparency-light-090:hsla(0, 0%, 0%, 0.9);
196
- --t-fill-color-transparency-dark-010:hsla(0, 0%, 100%, 0.1);
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);
224
- }
225
-
226
- @media (prefers-color-scheme: dark){
227
- :root[data-color-mode="system"]{
228
- color-scheme:dark;
229
- --t-text-color-headline:hsl(0, 0%, 94%);
230
- --t-text-color:hsl(0, 0%, 80%);
231
- --t-text-color-secondary:hsl(0, 0%, 54%);
232
- --t-text-color-disabled:hsl(0, 0%, 25%);
233
- --t-text-color-placeholder:hsl(0, 0%, 38%);
234
- --t-text-color-interaction:hsl(204, 68%, 55%);
235
- --t-text-color-interaction-hover:hsl(204, 68%, 50%);
236
- --t-text-color-interaction-active:hsl(204, 68%, 45%);
237
- --t-text-color-interaction-visited:hsl(204, 68%, 50%);
238
- --t-text-color-status-neutral:hsl(0, 0%, 80%);
239
- --t-text-color-status-info:hsl(204, 68%, 55%);
240
- --t-text-color-status-success:hsl(97, 57%, 41%);
241
- --t-text-color-status-warning:hsl(42, 84%, 55%);
242
- --t-text-color-status-error:hsl(8, 61%, 61%);
243
- --t-text-color-tag-subtle-gray:hsl(0, 0%, 80%);
244
- --t-text-color-tag-subtle-blue:hsl(223, 46%, 84%);
245
- --t-text-color-tag-subtle-indigo:hsl(233, 78%, 84%);
246
- --t-text-color-tag-subtle-aqua:hsl(208, 77%, 85%);
247
- --t-text-color-tag-subtle-teal:hsl(180, 95%, 74%);
248
- --t-text-color-tag-subtle-green:hsl(99, 93%, 84%);
249
- --t-text-color-tag-subtle-yellow:hsl(29, 100%, 85%);
250
- --t-text-color-tag-subtle-orange:hsl(18, 100%, 85%);
251
- --t-text-color-tag-subtle-pink:hsl(328, 89%, 89%);
252
- --t-text-color-tag-subtle-purple:hsl(268, 70%, 88%);
253
- --t-text-color-tag-subtle-magenta:hsl(285, 70%, 88%);
254
- --t-text-color-tag-bold-gray:hsl(0, 0%, 100%);
255
- --t-text-color-tag-bold-indigo:hsl(0, 0%, 100%);
256
- --t-text-color-tag-bold-blue:hsl(0, 0%, 100%);
257
- --t-text-color-tag-bold-aqua:hsl(0, 0%, 100%);
258
- --t-text-color-tag-bold-teal:hsl(0, 0%, 100%);
259
- --t-text-color-tag-bold-green:hsl(0, 0%, 100%);
260
- --t-text-color-tag-bold-yellow:hsl(0, 0%, 100%);
261
- --t-text-color-tag-bold-orange:hsl(0, 0%, 100%);
262
- --t-text-color-tag-bold-pink:hsl(0, 0%, 100%);
263
- --t-text-color-tag-bold-purple:hsl(0, 0%, 100%);
264
- --t-text-color-tag-bold-magenta:hsl(0, 0%, 100%);
265
- --t-icon-color:hsl(0, 0%, 80%);
266
- --t-icon-color-secondary:hsl(0, 0%, 54%);
267
- --t-icon-color-dim:hsl(0, 0%, 38%);
268
- --t-icon-color-disabled:hsl(0, 0%, 25%);
269
- --t-icon-color-status-neutral:hsl(0, 0%, 54%);
270
- --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
271
- --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
272
- --t-icon-color-status-info:hsl(204, 68%, 55%);
273
- --t-icon-color-status-error:hsl(8, 61%, 61%);
274
- --t-fill-color-neutral-100:hsl(0, 0%, 10%);
275
- --t-fill-color-neutral-000:hsl(0, 0%, 98%);
276
- --t-fill-color-neutral-010:hsl(0, 0%, 88%);
277
- --t-fill-color-neutral-020:hsl(0, 0%, 68%);
278
- --t-fill-color-neutral-025:hsl(0, 0%, 58%);
279
- --t-fill-color-neutral-030:hsl(0, 0%, 50%);
280
- --t-fill-color-neutral-040:hsl(0, 0%, 32%);
281
- --t-fill-color-neutral-050:hsl(0, 0%, 24%);
282
- --t-fill-color-neutral-060:hsl(0, 0%, 19%);
283
- --t-fill-color-neutral-070:hsl(0, 0%, 17%);
284
- --t-fill-color-neutral-080:hsl(0, 0%, 15%);
285
- --t-fill-color-neutral-090:hsl(0, 0%, 12%);
286
- --t-fill-color-interaction:hsl(204, 100%, 35%);
287
- --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
288
- --t-fill-color-interaction-active:hsl(204, 80%, 45%);
289
- --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
290
- --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
291
- --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
292
- --t-fill-color-control:hsl(204, 100%, 35%);
293
- --t-fill-color-control-disabled:hsl(0, 0%, 20%);
294
- --t-fill-color-status-neutral:hsl(0, 0%, 24%);
295
- --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
296
- --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
297
- --t-fill-color-status-info:hsl(204, 100%, 35%);
298
- --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
299
- --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
300
- --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
301
- --t-fill-color-status-success-dim:hsl(120, 12%, 14%);
302
- --t-fill-color-status-warning-ghost:hsl(41, 18%, 17%);
303
- --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
304
- --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
305
- --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
306
- --t-fill-color-tooltip:hsla(0, 0%, 24%, 0.9);
307
- --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
308
- --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
309
- --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
310
- --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(9, 29%, 13%), hsl(276, 8%, 12%), hsl(203, 37%, 11%));
311
- --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%));
312
- --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 11%, 14%), hsl(266, 10%, 14%) 42%, hsl(203, 37%, 11%));
313
- --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%));
314
- --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%));
315
- --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(23, 46%, 18%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
316
- --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(23, 29%, 14%), hsl(276, 7%, 14%), hsl(203, 37%, 11%));
317
- --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
318
- --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
319
- --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
320
- --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
321
- --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(225, 11%, 22%), hsl(227, 20%, 18%) 45%, hsl(204, 70%, 12%));
322
- --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(220, 7%, 16%), hsl(227, 12%, 14%) 45%, hsl(203, 37%, 11%));
323
- --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%));
324
- --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%));
325
- --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%));
326
- --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%));
327
- --t-fill-color-tag-gray-010:hsl(0, 0%, 20%);
328
- --t-fill-color-tag-gray-020:hsl(0, 0%, 24%);
329
- --t-fill-color-tag-gray-030:hsl(0, 0%, 36%);
330
- --t-fill-color-tag-gray-040:hsl(0, 0%, 42%);
331
- --t-fill-color-tag-blue-010:hsl(219, 26%, 24%);
332
- --t-fill-color-tag-blue-020:hsl(220, 28%, 29%);
333
- --t-fill-color-tag-blue-030:hsl(219, 32%, 45%);
334
- --t-fill-color-tag-blue-040:hsl(220, 35%, 52%);
335
- --t-fill-color-tag-aqua-010:hsl(200, 30%, 21%);
336
- --t-fill-color-tag-aqua-020:hsl(200, 33%, 26%);
337
- --t-fill-color-tag-aqua-030:hsl(200, 39%, 38%);
338
- --t-fill-color-tag-aqua-040:hsl(200, 39%, 43%);
339
- --t-fill-color-tag-teal-010:hsl(169, 33%, 19%);
340
- --t-fill-color-tag-teal-020:hsl(169, 37%, 22%);
341
- --t-fill-color-tag-teal-030:hsl(169, 43%, 31%);
342
- --t-fill-color-tag-teal-040:hsl(169, 44%, 35%);
343
- --t-fill-color-tag-green-010:hsl(110, 30%, 20%);
344
- --t-fill-color-tag-green-020:hsl(112, 33%, 23%);
345
- --t-fill-color-tag-green-030:hsl(112, 37%, 33%);
346
- --t-fill-color-tag-green-040:hsl(112, 39%, 37%);
347
- --t-fill-color-tag-yellow-010:hsl(44, 39%, 19%);
348
- --t-fill-color-tag-yellow-020:hsl(44, 44%, 22%);
349
- --t-fill-color-tag-yellow-030:hsl(44, 50%, 31%);
350
- --t-fill-color-tag-yellow-040:hsl(44, 53%, 36%);
351
- --t-fill-color-tag-orange-010:hsl(21, 35%, 22%);
352
- --t-fill-color-tag-orange-020:hsl(20, 38%, 26%);
353
- --t-fill-color-tag-orange-030:hsl(21, 44%, 40%);
354
- --t-fill-color-tag-orange-040:hsl(21, 46%, 45%);
355
- --t-fill-color-tag-pink-010:hsl(331, 22%, 24%);
356
- --t-fill-color-tag-pink-020:hsl(324, 26%, 26%);
357
- --t-fill-color-tag-pink-030:hsl(324, 30%, 45%);
358
- --t-fill-color-tag-pink-040:hsl(324, 33%, 51%);
359
- --t-fill-color-tag-purple-010:hsl(274, 20%, 23%);
360
- --t-fill-color-tag-purple-020:hsl(274, 21%, 28%);
361
- --t-fill-color-tag-purple-030:hsl(274, 25%, 46%);
362
- --t-fill-color-tag-purple-040:hsl(274, 28%, 53%);
363
- --t-fill-color-tag-magenta-010:hsl(292, 20%, 21%);
364
- --t-fill-color-tag-magenta-020:hsl(292, 22%, 26%);
365
- --t-fill-color-tag-magenta-030:hsl(293, 26%, 42%);
366
- --t-fill-color-tag-magenta-040:hsl(292, 27%, 48%);
367
- --t-fill-color-tag-indigo-010:hsl(235, 21%, 24%);
368
- --t-fill-color-tag-indigo-020:hsl(236, 22%, 29%);
369
- --t-fill-color-tag-indigo-030:hsl(236, 26%, 50%);
370
- --t-fill-color-tag-indigo-040:hsl(236, 34%, 56%);
371
- --t-fill-color-button-neutral-solid:hsl(0, 0%, 19%);
372
- --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
373
- --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
374
- --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
375
- --t-fill-color-button-neutral-outline:hsl(0, 0%, 15%);
376
- --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 17%);
377
- --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 19%);
378
- --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 12%);
379
- --t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
380
- --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
381
- --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
382
- --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
383
- --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
384
- --t-fill-color-button-interaction-solid:hsl(204, 100%, 35%);
385
- --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
386
- --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
387
- --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
388
- --t-fill-color-button-interaction-outline:hsl(204, 32%, 15%);
389
- --t-fill-color-button-interaction-outline-hover:hsl(204, 39%, 17%);
390
- --t-fill-color-button-interaction-outline-active:hsl(205, 45%, 18%);
391
- --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 12%);
392
- --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
393
- --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
394
- --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
395
- --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
396
- --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
397
- --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
398
- --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
399
- --t-fill-color-button-delete-outline:hsl(8, 20%, 16%);
400
- --t-fill-color-button-delete-outline-hover:hsl(9, 24%, 17%);
401
- --t-fill-color-button-delete-outline-active:hsl(9, 29%, 19%);
402
- --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 12%);
403
- --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
404
- --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
405
- --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
406
- --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
407
- --t-fill-color-button-pill:hsl(0, 0%, 18%);
408
- --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
409
- --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
410
- --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
411
- --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
412
- --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
413
- --t-fill-color-transparency-light-030:hsla(0, 0%, 0%, 0.3);
414
- --t-fill-color-transparency-light-040:hsla(0, 0%, 0%, 0.4);
415
- --t-fill-color-transparency-light-050:hsla(0, 0%, 0%, 0.5);
416
- --t-fill-color-transparency-light-060:hsla(0, 0%, 0%, 0.6);
417
- --t-fill-color-transparency-light-070:hsla(0, 0%, 0%, 0.7);
418
- --t-fill-color-transparency-light-080:hsla(0, 0%, 0%, 0.8);
419
- --t-fill-color-transparency-light-090:hsla(0, 0%, 0%, 0.9);
420
- --t-fill-color-transparency-dark-010:hsla(0, 0%, 100%, 0.1);
421
- --t-fill-color-transparency-dark-020:hsla(0, 0%, 100%, 0.2);
422
- --t-fill-color-transparency-dark-030:hsla(0, 0%, 100%, 0.3);
423
- --t-fill-color-transparency-dark-040:hsla(0, 0%, 100%, 0.4);
424
- --t-fill-color-transparency-dark-050:hsla(0, 0%, 100%, 0.5);
425
- --t-fill-color-transparency-dark-060:hsla(0, 0%, 100%, 0.6);
426
- --t-fill-color-transparency-dark-070:hsla(0, 0%, 100%, 0.7);
427
- --t-fill-color-transparency-dark-080:hsla(0, 0%, 100%, 0.8);
428
- --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
429
- --t-surface-color-card:hsl(0, 0%, 12%);
430
- --t-surface-color-canvas:hsl(0, 0%, 10%);
431
- --t-border-color:hsl(0, 0%, 21%);
432
- --t-border-color-dark:hsl(0, 0%, 25%);
433
- --t-border-color-darker:hsl(0, 0%, 33%);
434
- --t-border-color-darkest:hsl(0, 0%, 38%);
435
- --t-border-color-disabled:hsl(0, 0%, 21%);
436
- --t-border-color-dim:hsl(0, 0%, 16%);
437
- --t-border-color-white:hsl(0, 0%, 12%);
438
- --t-border-color-status-neutral:hsl(0, 0%, 38%);
439
- --t-border-color-status-info:hsl(204, 100%, 35%);
440
- --t-border-color-button-neutral:hsl(0, 0%, 19%);
441
- --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
442
- --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
443
- --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
444
- --t-border-color-control-neutral:hsl(0, 0%, 33%);
445
- --t-border-color-control-info:hsl(204, 100%, 35%);
446
- --t-border-color-control-disabled:hsl(0, 0%, 21%);
447
- --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
448
- }
449
- }
450
-
451
3
  :root{
452
4
  --t-border-radius-sm:2px;
453
5
  --t-border-radius-md:4px;
@@ -825,100 +377,490 @@
825
377
  --t-border-color-darkest:hsl(0, 0%, 58%);
826
378
  --t-border-color-disabled:hsl(0, 0%, 88%);
827
379
  --t-border-color-dim:hsl(0, 0%, 95%);
828
- --t-border-color-white:hsl(0, 0%, 100%);
829
- --t-border-color-status-neutral:hsl(0, 0%, 58%);
830
- --t-border-color-status-info:hsl(204, 100%, 40%);
831
- --t-border-color-status-success:hsl(97, 57%, 40%);
832
- --t-border-color-status-warning:hsl(42, 84%, 63%);
833
- --t-border-color-status-error:hsl(8, 60%, 47%);
834
- --t-border-color-button-neutral:hsl(0, 0%, 88%);
835
- --t-border-color-button-info:hsl(204, 100%, 40%);
836
- --t-border-color-button-create:hsl(96, 57%, 33%);
837
- --t-border-color-button-delete:hsl(8, 60%, 47%);
838
- --t-border-color-control-neutral:hsl(0, 0%, 68%);
839
- --t-border-color-control-info:hsl(204, 100%, 40%);
840
- --t-border-color-control-success:hsl(97, 57%, 40%);
841
- --t-border-color-control-warning:hsl(42, 84%, 63%);
842
- --t-border-color-control-error:hsl(8, 60%, 47%);
843
- --t-border-color-control-disabled:hsl(0, 0%, 88%);
844
- --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.07);
845
- --t-font-sans-serif:ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
846
- --t-font-monospace:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
847
- --t-form-background-color:var(--t-fill-color-neutral-100);
848
- --t-form-background-color-disabled:var(--t-fill-color-neutral-070);
849
- --t-form-background-color-error:var(--t-fill-color-neutral-100);
850
- --t-form-background-color-readonly:var(--t-fill-color-neutral-070);
851
- --t-form-border-color:var(--t-border-color);
852
- --t-form-border-color-disabled:var(--t-border-color);
853
- --t-form-border-color-error:var(--t-border-color-status-error);
854
- --t-form-border-color-focus:var(--t-fill-color-interaction);
855
- --t-form-border-color-hover:var(--t-border-color-dark);
856
- --t-form-border-color-readonly:hsla(0, 0%, 100%, 0);
857
- --t-form-border-radius:var(--t-border-radius-md);
858
- --t-form-border-width:var(--t-border-width);
859
- --t-form-font-color:var(--t-text-color);
860
- --t-form-font-color-disabled:var(--t-text-color-disabled);
861
- --t-form-font-color-error:var(--t-text-color-status-error);
862
- --t-form-font-color-readonly:var(--t-text-color);
863
- --t-form-picker-icon-color:var(--t-icon-color);
864
- --t-form-placeholder-color:var(--t-text-color-placeholder);
865
- }
866
-
867
- :root{
868
- --t-border-color-default-base:var(--t-border-color);
869
- --t-border-color-default-dark:var(--t-border-color-dark);
870
- --t-border-color-default-darker:var(--t-border-color-darker);
871
- --t-border-color-default-darkest:var(--t-border-color-darkest);
872
- --t-border-color-default-dim:var(--t-border-color-dim);
873
- --t-border-color-default-disabled:var(--t-border-color-disabled);
874
- --t-border-color-default-white:var(--t-border-color-white);
875
- --t-border-radius-default:var(--t-border-radius);
876
- --t-border-width-default:var(--t-border-width);
877
- --t-fill-color-button-delete-ghost-default:var(--t-fill-color-button-delete-ghost);
878
- --t-fill-color-button-delete-outline-default:var(--t-fill-color-button-delete-outline);
879
- --t-fill-color-button-delete-solid-default:var(--t-fill-color-button-delete-solid);
880
- --t-fill-color-button-interaction-ghost-default:var(--t-fill-color-button-interaction-ghost);
881
- --t-fill-color-button-interaction-outline-default:var(--t-fill-color-button-interaction-outline);
882
- --t-fill-color-button-interaction-solid-default:var(--t-fill-color-button-interaction-solid);
883
- --t-fill-color-button-neutral-ghost-default:var(--t-fill-color-button-neutral-ghost);
884
- --t-fill-color-button-neutral-outline-default:var(--t-fill-color-button-neutral-outline);
885
- --t-fill-color-button-neutral-responsive-header-default:var(--t-fill-color-button-neutral-responsive-header);
886
- --t-fill-color-button-neutral-solid-default:var(--t-fill-color-button-neutral-solid);
887
- --t-fill-color-button-pill-default:var(--t-fill-color-button-pill);
888
- --t-fill-color-control-primary:var(--t-fill-color-control);
889
- --t-fill-color-interaction-default:var(--t-fill-color-interaction);
890
- --t-fill-color-product-staff-base:var(--t-fill-color-product-staff);
891
- --t-fill-color-status-error-primary:var(--t-fill-color-status-error);
892
- --t-fill-color-tooltip-primary:var(--t-fill-color-tooltip);
893
- --t-icon-color-default-dim:var(--t-icon-color-dim);
894
- --t-icon-color-default-disabled:var(--t-icon-color-disabled);
895
- --t-icon-color-default-inverted:var(--t-icon-color-inverted);
896
- --t-icon-color-default-primary:var(--t-icon-color);
897
- --t-icon-color-default-secondary:var(--t-icon-color-secondary);
898
- --t-icon-color-status-error-primary:var(--t-icon-color-status-error);
899
- --t-icon-color-status-info-primary:var(--t-icon-color-status-info);
900
- --t-icon-color-status-neutral-primary:var(--t-icon-color-status-neutral);
901
- --t-icon-color-status-success-primary:var(--t-icon-color-status-success);
902
- --t-icon-color-status-warning-primary:var(--t-icon-color-status-warning);
903
- --t-text-color-default-disabled:var(--t-text-color-disabled);
904
- --t-text-color-default-headline:var(--t-text-color-headline);
905
- --t-text-color-default-inverted:var(--t-text-color-inverted);
906
- --t-text-color-default-placeholder:var(--t-text-color-placeholder);
907
- --t-text-color-default-primary:var(--t-text-color);
908
- --t-text-color-default-secondary:var(--t-text-color-secondary);
909
- --t-text-color-interaction-primary:var(--t-text-color-interaction);
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-font-sans-serif:ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
398
+ --t-font-monospace:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
399
+ --t-form-background-color:var(--t-fill-color-neutral-100);
400
+ --t-form-background-color-disabled:var(--t-fill-color-neutral-070);
401
+ --t-form-background-color-error:var(--t-fill-color-neutral-100);
402
+ --t-form-background-color-readonly:var(--t-fill-color-neutral-070);
403
+ --t-form-border-color:var(--t-border-color);
404
+ --t-form-border-color-disabled:var(--t-border-color);
405
+ --t-form-border-color-error:var(--t-border-color-status-error);
406
+ --t-form-border-color-focus:var(--t-fill-color-interaction);
407
+ --t-form-border-color-hover:var(--t-border-color-dark);
408
+ --t-form-border-color-readonly:hsla(0, 0%, 100%, 0);
409
+ --t-form-border-radius:var(--t-border-radius-md);
410
+ --t-form-border-width:var(--t-border-width);
411
+ --t-form-font-color:var(--t-text-color);
412
+ --t-form-font-color-disabled:var(--t-text-color-disabled);
413
+ --t-form-font-color-error:var(--t-text-color-status-error);
414
+ --t-form-font-color-readonly:var(--t-text-color);
415
+ --t-form-picker-icon-color:var(--t-icon-color);
416
+ --t-form-placeholder-color:var(--t-text-color-placeholder);
417
+ }
418
+
419
+ :root[data-color-mode="dark"]{
420
+ color-scheme:dark;
421
+ --t-text-color-headline:hsl(0, 0%, 94%);
422
+ --t-text-color:hsl(0, 0%, 80%);
423
+ --t-text-color-secondary:hsl(0, 0%, 54%);
424
+ --t-text-color-disabled:hsl(0, 0%, 25%);
425
+ --t-text-color-placeholder:hsl(0, 0%, 38%);
426
+ --t-text-color-interaction:hsl(204, 68%, 55%);
427
+ --t-text-color-interaction-hover:hsl(204, 68%, 50%);
428
+ --t-text-color-interaction-active:hsl(204, 68%, 45%);
429
+ --t-text-color-interaction-visited:hsl(204, 68%, 50%);
430
+ --t-text-color-status-neutral:hsl(0, 0%, 80%);
431
+ --t-text-color-status-info:hsl(204, 68%, 55%);
432
+ --t-text-color-status-success:hsl(97, 57%, 41%);
433
+ --t-text-color-status-warning:hsl(42, 84%, 55%);
434
+ --t-text-color-status-error:hsl(8, 61%, 61%);
435
+ --t-text-color-tag-subtle-gray:hsl(0, 0%, 80%);
436
+ --t-text-color-tag-subtle-blue:hsl(223, 46%, 84%);
437
+ --t-text-color-tag-subtle-indigo:hsl(233, 78%, 84%);
438
+ --t-text-color-tag-subtle-aqua:hsl(208, 77%, 85%);
439
+ --t-text-color-tag-subtle-teal:hsl(180, 95%, 74%);
440
+ --t-text-color-tag-subtle-green:hsl(99, 93%, 84%);
441
+ --t-text-color-tag-subtle-yellow:hsl(29, 100%, 85%);
442
+ --t-text-color-tag-subtle-orange:hsl(18, 100%, 85%);
443
+ --t-text-color-tag-subtle-pink:hsl(328, 89%, 89%);
444
+ --t-text-color-tag-subtle-purple:hsl(268, 70%, 88%);
445
+ --t-text-color-tag-subtle-magenta:hsl(285, 70%, 88%);
446
+ --t-text-color-tag-bold-gray:hsl(0, 0%, 100%);
447
+ --t-text-color-tag-bold-indigo:hsl(0, 0%, 100%);
448
+ --t-text-color-tag-bold-blue:hsl(0, 0%, 100%);
449
+ --t-text-color-tag-bold-aqua:hsl(0, 0%, 100%);
450
+ --t-text-color-tag-bold-teal:hsl(0, 0%, 100%);
451
+ --t-text-color-tag-bold-green:hsl(0, 0%, 100%);
452
+ --t-text-color-tag-bold-yellow:hsl(0, 0%, 100%);
453
+ --t-text-color-tag-bold-orange:hsl(0, 0%, 100%);
454
+ --t-text-color-tag-bold-pink:hsl(0, 0%, 100%);
455
+ --t-text-color-tag-bold-purple:hsl(0, 0%, 100%);
456
+ --t-text-color-tag-bold-magenta:hsl(0, 0%, 100%);
457
+ --t-icon-color:hsl(0, 0%, 80%);
458
+ --t-icon-color-secondary:hsl(0, 0%, 54%);
459
+ --t-icon-color-dim:hsl(0, 0%, 38%);
460
+ --t-icon-color-disabled:hsl(0, 0%, 25%);
461
+ --t-icon-color-status-neutral:hsl(0, 0%, 54%);
462
+ --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
463
+ --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
464
+ --t-icon-color-status-info:hsl(204, 68%, 55%);
465
+ --t-icon-color-status-error:hsl(8, 61%, 61%);
466
+ --t-fill-color-neutral-100:hsl(0, 0%, 10%);
467
+ --t-fill-color-neutral-000:hsl(0, 0%, 98%);
468
+ --t-fill-color-neutral-010:hsl(0, 0%, 88%);
469
+ --t-fill-color-neutral-020:hsl(0, 0%, 68%);
470
+ --t-fill-color-neutral-025:hsl(0, 0%, 58%);
471
+ --t-fill-color-neutral-030:hsl(0, 0%, 50%);
472
+ --t-fill-color-neutral-040:hsl(0, 0%, 32%);
473
+ --t-fill-color-neutral-050:hsl(0, 0%, 24%);
474
+ --t-fill-color-neutral-060:hsl(0, 0%, 19%);
475
+ --t-fill-color-neutral-070:hsl(0, 0%, 17%);
476
+ --t-fill-color-neutral-080:hsl(0, 0%, 15%);
477
+ --t-fill-color-neutral-090:hsl(0, 0%, 12%);
478
+ --t-fill-color-interaction:hsl(204, 100%, 35%);
479
+ --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
480
+ --t-fill-color-interaction-active:hsl(204, 80%, 45%);
481
+ --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
482
+ --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
483
+ --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
484
+ --t-fill-color-control:hsl(204, 100%, 35%);
485
+ --t-fill-color-control-disabled:hsl(0, 0%, 20%);
486
+ --t-fill-color-status-neutral:hsl(0, 0%, 24%);
487
+ --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
488
+ --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
489
+ --t-fill-color-status-info:hsl(204, 100%, 35%);
490
+ --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
491
+ --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
492
+ --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
493
+ --t-fill-color-status-success-dim:hsl(120, 12%, 14%);
494
+ --t-fill-color-status-warning-ghost:hsl(41, 18%, 17%);
495
+ --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
496
+ --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
497
+ --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
498
+ --t-fill-color-tooltip:hsla(0, 0%, 24%, 0.9);
499
+ --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
500
+ --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
501
+ --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
502
+ --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(9, 29%, 13%), hsl(276, 8%, 12%), hsl(203, 37%, 11%));
503
+ --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%));
504
+ --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 11%, 14%), hsl(266, 10%, 14%) 42%, hsl(203, 37%, 11%));
505
+ --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%));
506
+ --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%));
507
+ --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(23, 46%, 18%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
508
+ --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(23, 29%, 14%), hsl(276, 7%, 14%), hsl(203, 37%, 11%));
509
+ --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
510
+ --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
511
+ --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
512
+ --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
513
+ --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(225, 11%, 22%), hsl(227, 20%, 18%) 45%, hsl(204, 70%, 12%));
514
+ --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(220, 7%, 16%), hsl(227, 12%, 14%) 45%, hsl(203, 37%, 11%));
515
+ --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%));
516
+ --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%));
517
+ --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%));
518
+ --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%));
519
+ --t-fill-color-tag-gray-010:hsl(0, 0%, 20%);
520
+ --t-fill-color-tag-gray-020:hsl(0, 0%, 24%);
521
+ --t-fill-color-tag-gray-030:hsl(0, 0%, 36%);
522
+ --t-fill-color-tag-gray-040:hsl(0, 0%, 42%);
523
+ --t-fill-color-tag-blue-010:hsl(219, 26%, 24%);
524
+ --t-fill-color-tag-blue-020:hsl(220, 28%, 29%);
525
+ --t-fill-color-tag-blue-030:hsl(219, 32%, 45%);
526
+ --t-fill-color-tag-blue-040:hsl(220, 35%, 52%);
527
+ --t-fill-color-tag-aqua-010:hsl(200, 30%, 21%);
528
+ --t-fill-color-tag-aqua-020:hsl(200, 33%, 26%);
529
+ --t-fill-color-tag-aqua-030:hsl(200, 39%, 38%);
530
+ --t-fill-color-tag-aqua-040:hsl(200, 39%, 43%);
531
+ --t-fill-color-tag-teal-010:hsl(169, 33%, 19%);
532
+ --t-fill-color-tag-teal-020:hsl(169, 37%, 22%);
533
+ --t-fill-color-tag-teal-030:hsl(169, 43%, 31%);
534
+ --t-fill-color-tag-teal-040:hsl(169, 44%, 35%);
535
+ --t-fill-color-tag-green-010:hsl(110, 30%, 20%);
536
+ --t-fill-color-tag-green-020:hsl(112, 33%, 23%);
537
+ --t-fill-color-tag-green-030:hsl(112, 37%, 33%);
538
+ --t-fill-color-tag-green-040:hsl(112, 39%, 37%);
539
+ --t-fill-color-tag-yellow-010:hsl(44, 39%, 19%);
540
+ --t-fill-color-tag-yellow-020:hsl(44, 44%, 22%);
541
+ --t-fill-color-tag-yellow-030:hsl(44, 50%, 31%);
542
+ --t-fill-color-tag-yellow-040:hsl(44, 53%, 36%);
543
+ --t-fill-color-tag-orange-010:hsl(21, 35%, 22%);
544
+ --t-fill-color-tag-orange-020:hsl(20, 38%, 26%);
545
+ --t-fill-color-tag-orange-030:hsl(21, 44%, 40%);
546
+ --t-fill-color-tag-orange-040:hsl(21, 46%, 45%);
547
+ --t-fill-color-tag-pink-010:hsl(331, 22%, 24%);
548
+ --t-fill-color-tag-pink-020:hsl(324, 26%, 26%);
549
+ --t-fill-color-tag-pink-030:hsl(324, 30%, 45%);
550
+ --t-fill-color-tag-pink-040:hsl(324, 33%, 51%);
551
+ --t-fill-color-tag-purple-010:hsl(274, 20%, 23%);
552
+ --t-fill-color-tag-purple-020:hsl(274, 21%, 28%);
553
+ --t-fill-color-tag-purple-030:hsl(274, 25%, 46%);
554
+ --t-fill-color-tag-purple-040:hsl(274, 28%, 53%);
555
+ --t-fill-color-tag-magenta-010:hsl(292, 20%, 21%);
556
+ --t-fill-color-tag-magenta-020:hsl(292, 22%, 26%);
557
+ --t-fill-color-tag-magenta-030:hsl(293, 26%, 42%);
558
+ --t-fill-color-tag-magenta-040:hsl(292, 27%, 48%);
559
+ --t-fill-color-tag-indigo-010:hsl(235, 21%, 24%);
560
+ --t-fill-color-tag-indigo-020:hsl(236, 22%, 29%);
561
+ --t-fill-color-tag-indigo-030:hsl(236, 26%, 50%);
562
+ --t-fill-color-tag-indigo-040:hsl(236, 34%, 56%);
563
+ --t-fill-color-button-neutral-solid:hsl(0, 0%, 19%);
564
+ --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
565
+ --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
566
+ --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
567
+ --t-fill-color-button-neutral-outline:hsl(0, 0%, 15%);
568
+ --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 17%);
569
+ --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 19%);
570
+ --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 12%);
571
+ --t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
572
+ --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
573
+ --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
574
+ --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
575
+ --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
576
+ --t-fill-color-button-interaction-solid:hsl(204, 100%, 35%);
577
+ --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
578
+ --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
579
+ --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
580
+ --t-fill-color-button-interaction-outline:hsl(204, 32%, 15%);
581
+ --t-fill-color-button-interaction-outline-hover:hsl(204, 39%, 17%);
582
+ --t-fill-color-button-interaction-outline-active:hsl(205, 45%, 18%);
583
+ --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 12%);
584
+ --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
585
+ --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
586
+ --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
587
+ --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
588
+ --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
589
+ --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
590
+ --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
591
+ --t-fill-color-button-delete-outline:hsl(8, 20%, 16%);
592
+ --t-fill-color-button-delete-outline-hover:hsl(9, 24%, 17%);
593
+ --t-fill-color-button-delete-outline-active:hsl(9, 29%, 19%);
594
+ --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 12%);
595
+ --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
596
+ --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
597
+ --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
598
+ --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
599
+ --t-fill-color-button-pill:hsl(0, 0%, 18%);
600
+ --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
601
+ --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
602
+ --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
603
+ --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
604
+ --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
605
+ --t-fill-color-transparency-light-030:hsla(0, 0%, 0%, 0.3);
606
+ --t-fill-color-transparency-light-040:hsla(0, 0%, 0%, 0.4);
607
+ --t-fill-color-transparency-light-050:hsla(0, 0%, 0%, 0.5);
608
+ --t-fill-color-transparency-light-060:hsla(0, 0%, 0%, 0.6);
609
+ --t-fill-color-transparency-light-070:hsla(0, 0%, 0%, 0.7);
610
+ --t-fill-color-transparency-light-080:hsla(0, 0%, 0%, 0.8);
611
+ --t-fill-color-transparency-light-090:hsla(0, 0%, 0%, 0.9);
612
+ --t-fill-color-transparency-dark-010:hsla(0, 0%, 100%, 0.1);
613
+ --t-fill-color-transparency-dark-020:hsla(0, 0%, 100%, 0.2);
614
+ --t-fill-color-transparency-dark-030:hsla(0, 0%, 100%, 0.3);
615
+ --t-fill-color-transparency-dark-040:hsla(0, 0%, 100%, 0.4);
616
+ --t-fill-color-transparency-dark-050:hsla(0, 0%, 100%, 0.5);
617
+ --t-fill-color-transparency-dark-060:hsla(0, 0%, 100%, 0.6);
618
+ --t-fill-color-transparency-dark-070:hsla(0, 0%, 100%, 0.7);
619
+ --t-fill-color-transparency-dark-080:hsla(0, 0%, 100%, 0.8);
620
+ --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
621
+ --t-surface-color-card:hsl(0, 0%, 12%);
622
+ --t-surface-color-canvas:hsl(0, 0%, 10%);
623
+ --t-border-color:hsl(0, 0%, 21%);
624
+ --t-border-color-dark:hsl(0, 0%, 25%);
625
+ --t-border-color-darker:hsl(0, 0%, 33%);
626
+ --t-border-color-darkest:hsl(0, 0%, 38%);
627
+ --t-border-color-disabled:hsl(0, 0%, 21%);
628
+ --t-border-color-dim:hsl(0, 0%, 16%);
629
+ --t-border-color-white:hsl(0, 0%, 12%);
630
+ --t-border-color-status-neutral:hsl(0, 0%, 38%);
631
+ --t-border-color-status-info:hsl(204, 100%, 35%);
632
+ --t-border-color-button-neutral:hsl(0, 0%, 19%);
633
+ --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
634
+ --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
635
+ --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
636
+ --t-border-color-control-neutral:hsl(0, 0%, 33%);
637
+ --t-border-color-control-info:hsl(204, 100%, 35%);
638
+ --t-border-color-control-disabled:hsl(0, 0%, 21%);
639
+ --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
910
640
  }
911
641
 
912
642
  @media (prefers-color-scheme: dark){
913
643
  :root[data-color-mode="system"]{
914
- --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
915
- --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
916
- --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
917
- --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
918
- --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
919
- --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
920
- --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
921
- --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
644
+ color-scheme:dark;
645
+ --t-text-color-headline:hsl(0, 0%, 94%);
646
+ --t-text-color:hsl(0, 0%, 80%);
647
+ --t-text-color-secondary:hsl(0, 0%, 54%);
648
+ --t-text-color-disabled:hsl(0, 0%, 25%);
649
+ --t-text-color-placeholder:hsl(0, 0%, 38%);
650
+ --t-text-color-interaction:hsl(204, 68%, 55%);
651
+ --t-text-color-interaction-hover:hsl(204, 68%, 50%);
652
+ --t-text-color-interaction-active:hsl(204, 68%, 45%);
653
+ --t-text-color-interaction-visited:hsl(204, 68%, 50%);
654
+ --t-text-color-status-neutral:hsl(0, 0%, 80%);
655
+ --t-text-color-status-info:hsl(204, 68%, 55%);
656
+ --t-text-color-status-success:hsl(97, 57%, 41%);
657
+ --t-text-color-status-warning:hsl(42, 84%, 55%);
658
+ --t-text-color-status-error:hsl(8, 61%, 61%);
659
+ --t-text-color-tag-subtle-gray:hsl(0, 0%, 80%);
660
+ --t-text-color-tag-subtle-blue:hsl(223, 46%, 84%);
661
+ --t-text-color-tag-subtle-indigo:hsl(233, 78%, 84%);
662
+ --t-text-color-tag-subtle-aqua:hsl(208, 77%, 85%);
663
+ --t-text-color-tag-subtle-teal:hsl(180, 95%, 74%);
664
+ --t-text-color-tag-subtle-green:hsl(99, 93%, 84%);
665
+ --t-text-color-tag-subtle-yellow:hsl(29, 100%, 85%);
666
+ --t-text-color-tag-subtle-orange:hsl(18, 100%, 85%);
667
+ --t-text-color-tag-subtle-pink:hsl(328, 89%, 89%);
668
+ --t-text-color-tag-subtle-purple:hsl(268, 70%, 88%);
669
+ --t-text-color-tag-subtle-magenta:hsl(285, 70%, 88%);
670
+ --t-text-color-tag-bold-gray:hsl(0, 0%, 100%);
671
+ --t-text-color-tag-bold-indigo:hsl(0, 0%, 100%);
672
+ --t-text-color-tag-bold-blue:hsl(0, 0%, 100%);
673
+ --t-text-color-tag-bold-aqua:hsl(0, 0%, 100%);
674
+ --t-text-color-tag-bold-teal:hsl(0, 0%, 100%);
675
+ --t-text-color-tag-bold-green:hsl(0, 0%, 100%);
676
+ --t-text-color-tag-bold-yellow:hsl(0, 0%, 100%);
677
+ --t-text-color-tag-bold-orange:hsl(0, 0%, 100%);
678
+ --t-text-color-tag-bold-pink:hsl(0, 0%, 100%);
679
+ --t-text-color-tag-bold-purple:hsl(0, 0%, 100%);
680
+ --t-text-color-tag-bold-magenta:hsl(0, 0%, 100%);
681
+ --t-icon-color:hsl(0, 0%, 80%);
682
+ --t-icon-color-secondary:hsl(0, 0%, 54%);
683
+ --t-icon-color-dim:hsl(0, 0%, 38%);
684
+ --t-icon-color-disabled:hsl(0, 0%, 25%);
685
+ --t-icon-color-status-neutral:hsl(0, 0%, 54%);
686
+ --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
687
+ --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
688
+ --t-icon-color-status-info:hsl(204, 68%, 55%);
689
+ --t-icon-color-status-error:hsl(8, 61%, 61%);
690
+ --t-fill-color-neutral-100:hsl(0, 0%, 10%);
691
+ --t-fill-color-neutral-000:hsl(0, 0%, 98%);
692
+ --t-fill-color-neutral-010:hsl(0, 0%, 88%);
693
+ --t-fill-color-neutral-020:hsl(0, 0%, 68%);
694
+ --t-fill-color-neutral-025:hsl(0, 0%, 58%);
695
+ --t-fill-color-neutral-030:hsl(0, 0%, 50%);
696
+ --t-fill-color-neutral-040:hsl(0, 0%, 32%);
697
+ --t-fill-color-neutral-050:hsl(0, 0%, 24%);
698
+ --t-fill-color-neutral-060:hsl(0, 0%, 19%);
699
+ --t-fill-color-neutral-070:hsl(0, 0%, 17%);
700
+ --t-fill-color-neutral-080:hsl(0, 0%, 15%);
701
+ --t-fill-color-neutral-090:hsl(0, 0%, 12%);
702
+ --t-fill-color-interaction:hsl(204, 100%, 35%);
703
+ --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
704
+ --t-fill-color-interaction-active:hsl(204, 80%, 45%);
705
+ --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
706
+ --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
707
+ --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
708
+ --t-fill-color-control:hsl(204, 100%, 35%);
709
+ --t-fill-color-control-disabled:hsl(0, 0%, 20%);
710
+ --t-fill-color-status-neutral:hsl(0, 0%, 24%);
711
+ --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
712
+ --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
713
+ --t-fill-color-status-info:hsl(204, 100%, 35%);
714
+ --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
715
+ --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
716
+ --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
717
+ --t-fill-color-status-success-dim:hsl(120, 12%, 14%);
718
+ --t-fill-color-status-warning-ghost:hsl(41, 18%, 17%);
719
+ --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
720
+ --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
721
+ --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
722
+ --t-fill-color-tooltip:hsla(0, 0%, 24%, 0.9);
723
+ --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
724
+ --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
725
+ --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
726
+ --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(9, 29%, 13%), hsl(276, 8%, 12%), hsl(203, 37%, 11%));
727
+ --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%));
728
+ --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 11%, 14%), hsl(266, 10%, 14%) 42%, hsl(203, 37%, 11%));
729
+ --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%));
730
+ --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%));
731
+ --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(23, 46%, 18%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
732
+ --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(23, 29%, 14%), hsl(276, 7%, 14%), hsl(203, 37%, 11%));
733
+ --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
734
+ --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
735
+ --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
736
+ --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
737
+ --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(225, 11%, 22%), hsl(227, 20%, 18%) 45%, hsl(204, 70%, 12%));
738
+ --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(220, 7%, 16%), hsl(227, 12%, 14%) 45%, hsl(203, 37%, 11%));
739
+ --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%));
740
+ --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%));
741
+ --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%));
742
+ --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%));
743
+ --t-fill-color-tag-gray-010:hsl(0, 0%, 20%);
744
+ --t-fill-color-tag-gray-020:hsl(0, 0%, 24%);
745
+ --t-fill-color-tag-gray-030:hsl(0, 0%, 36%);
746
+ --t-fill-color-tag-gray-040:hsl(0, 0%, 42%);
747
+ --t-fill-color-tag-blue-010:hsl(219, 26%, 24%);
748
+ --t-fill-color-tag-blue-020:hsl(220, 28%, 29%);
749
+ --t-fill-color-tag-blue-030:hsl(219, 32%, 45%);
750
+ --t-fill-color-tag-blue-040:hsl(220, 35%, 52%);
751
+ --t-fill-color-tag-aqua-010:hsl(200, 30%, 21%);
752
+ --t-fill-color-tag-aqua-020:hsl(200, 33%, 26%);
753
+ --t-fill-color-tag-aqua-030:hsl(200, 39%, 38%);
754
+ --t-fill-color-tag-aqua-040:hsl(200, 39%, 43%);
755
+ --t-fill-color-tag-teal-010:hsl(169, 33%, 19%);
756
+ --t-fill-color-tag-teal-020:hsl(169, 37%, 22%);
757
+ --t-fill-color-tag-teal-030:hsl(169, 43%, 31%);
758
+ --t-fill-color-tag-teal-040:hsl(169, 44%, 35%);
759
+ --t-fill-color-tag-green-010:hsl(110, 30%, 20%);
760
+ --t-fill-color-tag-green-020:hsl(112, 33%, 23%);
761
+ --t-fill-color-tag-green-030:hsl(112, 37%, 33%);
762
+ --t-fill-color-tag-green-040:hsl(112, 39%, 37%);
763
+ --t-fill-color-tag-yellow-010:hsl(44, 39%, 19%);
764
+ --t-fill-color-tag-yellow-020:hsl(44, 44%, 22%);
765
+ --t-fill-color-tag-yellow-030:hsl(44, 50%, 31%);
766
+ --t-fill-color-tag-yellow-040:hsl(44, 53%, 36%);
767
+ --t-fill-color-tag-orange-010:hsl(21, 35%, 22%);
768
+ --t-fill-color-tag-orange-020:hsl(20, 38%, 26%);
769
+ --t-fill-color-tag-orange-030:hsl(21, 44%, 40%);
770
+ --t-fill-color-tag-orange-040:hsl(21, 46%, 45%);
771
+ --t-fill-color-tag-pink-010:hsl(331, 22%, 24%);
772
+ --t-fill-color-tag-pink-020:hsl(324, 26%, 26%);
773
+ --t-fill-color-tag-pink-030:hsl(324, 30%, 45%);
774
+ --t-fill-color-tag-pink-040:hsl(324, 33%, 51%);
775
+ --t-fill-color-tag-purple-010:hsl(274, 20%, 23%);
776
+ --t-fill-color-tag-purple-020:hsl(274, 21%, 28%);
777
+ --t-fill-color-tag-purple-030:hsl(274, 25%, 46%);
778
+ --t-fill-color-tag-purple-040:hsl(274, 28%, 53%);
779
+ --t-fill-color-tag-magenta-010:hsl(292, 20%, 21%);
780
+ --t-fill-color-tag-magenta-020:hsl(292, 22%, 26%);
781
+ --t-fill-color-tag-magenta-030:hsl(293, 26%, 42%);
782
+ --t-fill-color-tag-magenta-040:hsl(292, 27%, 48%);
783
+ --t-fill-color-tag-indigo-010:hsl(235, 21%, 24%);
784
+ --t-fill-color-tag-indigo-020:hsl(236, 22%, 29%);
785
+ --t-fill-color-tag-indigo-030:hsl(236, 26%, 50%);
786
+ --t-fill-color-tag-indigo-040:hsl(236, 34%, 56%);
787
+ --t-fill-color-button-neutral-solid:hsl(0, 0%, 19%);
788
+ --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
789
+ --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
790
+ --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
791
+ --t-fill-color-button-neutral-outline:hsl(0, 0%, 15%);
792
+ --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 17%);
793
+ --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 19%);
794
+ --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 12%);
795
+ --t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
796
+ --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
797
+ --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
798
+ --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
799
+ --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
800
+ --t-fill-color-button-interaction-solid:hsl(204, 100%, 35%);
801
+ --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
802
+ --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
803
+ --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
804
+ --t-fill-color-button-interaction-outline:hsl(204, 32%, 15%);
805
+ --t-fill-color-button-interaction-outline-hover:hsl(204, 39%, 17%);
806
+ --t-fill-color-button-interaction-outline-active:hsl(205, 45%, 18%);
807
+ --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 12%);
808
+ --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
809
+ --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
810
+ --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
811
+ --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
812
+ --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
813
+ --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
814
+ --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
815
+ --t-fill-color-button-delete-outline:hsl(8, 20%, 16%);
816
+ --t-fill-color-button-delete-outline-hover:hsl(9, 24%, 17%);
817
+ --t-fill-color-button-delete-outline-active:hsl(9, 29%, 19%);
818
+ --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 12%);
819
+ --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
820
+ --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
821
+ --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
822
+ --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
823
+ --t-fill-color-button-pill:hsl(0, 0%, 18%);
824
+ --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
825
+ --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
826
+ --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
827
+ --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
828
+ --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
829
+ --t-fill-color-transparency-light-030:hsla(0, 0%, 0%, 0.3);
830
+ --t-fill-color-transparency-light-040:hsla(0, 0%, 0%, 0.4);
831
+ --t-fill-color-transparency-light-050:hsla(0, 0%, 0%, 0.5);
832
+ --t-fill-color-transparency-light-060:hsla(0, 0%, 0%, 0.6);
833
+ --t-fill-color-transparency-light-070:hsla(0, 0%, 0%, 0.7);
834
+ --t-fill-color-transparency-light-080:hsla(0, 0%, 0%, 0.8);
835
+ --t-fill-color-transparency-light-090:hsla(0, 0%, 0%, 0.9);
836
+ --t-fill-color-transparency-dark-010:hsla(0, 0%, 100%, 0.1);
837
+ --t-fill-color-transparency-dark-020:hsla(0, 0%, 100%, 0.2);
838
+ --t-fill-color-transparency-dark-030:hsla(0, 0%, 100%, 0.3);
839
+ --t-fill-color-transparency-dark-040:hsla(0, 0%, 100%, 0.4);
840
+ --t-fill-color-transparency-dark-050:hsla(0, 0%, 100%, 0.5);
841
+ --t-fill-color-transparency-dark-060:hsla(0, 0%, 100%, 0.6);
842
+ --t-fill-color-transparency-dark-070:hsla(0, 0%, 100%, 0.7);
843
+ --t-fill-color-transparency-dark-080:hsla(0, 0%, 100%, 0.8);
844
+ --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
845
+ --t-surface-color-card:hsl(0, 0%, 12%);
846
+ --t-surface-color-canvas:hsl(0, 0%, 10%);
847
+ --t-border-color:hsl(0, 0%, 21%);
848
+ --t-border-color-dark:hsl(0, 0%, 25%);
849
+ --t-border-color-darker:hsl(0, 0%, 33%);
850
+ --t-border-color-darkest:hsl(0, 0%, 38%);
851
+ --t-border-color-disabled:hsl(0, 0%, 21%);
852
+ --t-border-color-dim:hsl(0, 0%, 16%);
853
+ --t-border-color-white:hsl(0, 0%, 12%);
854
+ --t-border-color-status-neutral:hsl(0, 0%, 38%);
855
+ --t-border-color-status-info:hsl(204, 100%, 35%);
856
+ --t-border-color-button-neutral:hsl(0, 0%, 19%);
857
+ --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
858
+ --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
859
+ --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
860
+ --t-border-color-control-neutral:hsl(0, 0%, 33%);
861
+ --t-border-color-control-info:hsl(204, 100%, 35%);
862
+ --t-border-color-control-disabled:hsl(0, 0%, 21%);
863
+ --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
922
864
  }
923
865
  }
924
866
 
@@ -961,611 +903,669 @@
961
903
  --t-fill-color-button-delete-outline-dim-disabled:var(--t-fill-color-button-delete-outline-disabled);
962
904
  }
963
905
 
964
- :root[data-color-mode="dark"]{
965
- --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
966
- --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
967
- --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
968
- --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
969
- --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
970
- --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
971
- --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
972
- --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
973
- }
906
+ :root{
907
+ --t-border-color-default-base:var(--t-border-color);
908
+ --t-border-color-default-dark:var(--t-border-color-dark);
909
+ --t-border-color-default-darker:var(--t-border-color-darker);
910
+ --t-border-color-default-darkest:var(--t-border-color-darkest);
911
+ --t-border-color-default-dim:var(--t-border-color-dim);
912
+ --t-border-color-default-disabled:var(--t-border-color-disabled);
913
+ --t-border-color-default-white:var(--t-border-color-white);
914
+ --t-border-radius-default:var(--t-border-radius);
915
+ --t-border-width-default:var(--t-border-width);
916
+ --t-fill-color-button-delete-ghost-default:var(--t-fill-color-button-delete-ghost);
917
+ --t-fill-color-button-delete-outline-default:var(--t-fill-color-button-delete-outline);
918
+ --t-fill-color-button-delete-solid-default:var(--t-fill-color-button-delete-solid);
919
+ --t-fill-color-button-interaction-ghost-default:var(--t-fill-color-button-interaction-ghost);
920
+ --t-fill-color-button-interaction-outline-default:var(--t-fill-color-button-interaction-outline);
921
+ --t-fill-color-button-interaction-solid-default:var(--t-fill-color-button-interaction-solid);
922
+ --t-fill-color-button-neutral-ghost-default:var(--t-fill-color-button-neutral-ghost);
923
+ --t-fill-color-button-neutral-outline-default:var(--t-fill-color-button-neutral-outline);
924
+ --t-fill-color-button-neutral-responsive-header-default:var(--t-fill-color-button-neutral-responsive-header);
925
+ --t-fill-color-button-neutral-solid-default:var(--t-fill-color-button-neutral-solid);
926
+ --t-fill-color-button-pill-default:var(--t-fill-color-button-pill);
927
+ --t-fill-color-control-primary:var(--t-fill-color-control);
928
+ --t-fill-color-interaction-default:var(--t-fill-color-interaction);
929
+ --t-fill-color-product-staff-base:var(--t-fill-color-product-staff);
930
+ --t-fill-color-status-error-primary:var(--t-fill-color-status-error);
931
+ --t-fill-color-tooltip-primary:var(--t-fill-color-tooltip);
932
+ --t-icon-color-default-dim:var(--t-icon-color-dim);
933
+ --t-icon-color-default-disabled:var(--t-icon-color-disabled);
934
+ --t-icon-color-default-inverted:var(--t-icon-color-inverted);
935
+ --t-icon-color-default-primary:var(--t-icon-color);
936
+ --t-icon-color-default-secondary:var(--t-icon-color-secondary);
937
+ --t-icon-color-status-error-primary:var(--t-icon-color-status-error);
938
+ --t-icon-color-status-info-primary:var(--t-icon-color-status-info);
939
+ --t-icon-color-status-neutral-primary:var(--t-icon-color-status-neutral);
940
+ --t-icon-color-status-success-primary:var(--t-icon-color-status-success);
941
+ --t-icon-color-status-warning-primary:var(--t-icon-color-status-warning);
942
+ --t-text-color-default-disabled:var(--t-text-color-disabled);
943
+ --t-text-color-default-headline:var(--t-text-color-headline);
944
+ --t-text-color-default-inverted:var(--t-text-color-inverted);
945
+ --t-text-color-default-placeholder:var(--t-text-color-placeholder);
946
+ --t-text-color-default-primary:var(--t-text-color);
947
+ --t-text-color-default-secondary:var(--t-text-color-secondary);
948
+ --t-text-color-interaction-primary:var(--t-text-color-interaction);
949
+ }
950
+
974
951
 
975
- @layer t-critical{
976
- tds-page-header:not(.hydrated){
977
- display:none;
978
- }
952
+ @media (prefers-reduced-motion: no-preference){
953
+
954
+ :root{
955
+ interpolate-size:allow-keywords;
979
956
  }
957
+ }
980
958
 
981
- @layer t-component{
982
- .tds-page-header{
983
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
984
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
985
- --tds-page-header-color:var(--t-text-color);
986
- --tds-page-header-headline-color:var(--t-text-color-headline);
987
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
988
- --tds-page-header-padding-x:var(--t-spacing-2);
989
- --tds-page-header-padding-y:var(--t-spacing-2);
990
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
991
- --tds-page-header-nav-gap:var(--t-spacing-1);
992
- --tds-page-header-nav-background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 100%);
993
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
994
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
995
- --tds-page-header-nav-item-color:var(--t-text-color-secondary);
996
- --tds-page-header-nav-item-background-color:var(--t-fill-color-transparency-light-060);
997
- --tds-page-header-nav-item-border-width:1px;
959
+ @layer tds-component{
960
+ tds-sidenav, .tds-sidenav{
961
+ --tds-sidenav-indent:12px;
962
+ --tds-sidenav-item-depth:0;
998
963
 
999
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1000
- --tds-page-header-nav-item-border-bottom-color:var(--t-border-color);
964
+ --tds-sidenav-item-transition:background-color .2s cubic-bezier(.19, .91, .38, 1);
1001
965
 
1002
- --tds-page-header-nav-item-color-hover:var(--t-text-color);
1003
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-080);
1004
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
966
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
967
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
968
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
969
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
1005
970
 
1006
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-060);
1007
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-hover);
971
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
972
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
973
+ --tds-sidenav-item-nested-background-selected:transparent;
1008
974
 
1009
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1010
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1011
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
975
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
976
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
977
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1012
978
 
1013
- --tds-page-header-nav-item-color-selected:var(--t-text-color);
1014
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1015
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1016
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1017
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
979
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
980
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1018
981
  }
1019
982
 
1020
- .tds-page-header--profile{
1021
- --tds-page-header-padding-y:20px;
1022
- }
1023
- @media (min-width: 600px){
1024
- .tds-page-header{
1025
- --tds-page-header-background-color:var(--t-surface-color-canvas);
1026
- --tds-page-header-color:var(--t-text-color-secondary);
1027
- --tds-page-header-padding-x:var(--t-spacing-3);
1028
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1029
- --tds-page-header-nav-gap:var(--t-spacing-half);
1030
- --tds-page-header-nav-background:transparent;
1031
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1032
- --tds-page-header-nav-item-border-width:1px;
1033
- --tds-page-header-nav-item-color:var(--t-text-color);
1034
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1035
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1036
- }
983
+ .tds-sidenav--theme-gray{
984
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
985
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
986
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
987
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
988
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1037
989
  }
1038
990
  }
1039
991
 
1040
- .tds-page-header{
1041
- display:flex;
1042
- flex-direction:column;
1043
- padding-top:var(--tds-page-header-padding-y);
1044
- color:var(--tds-page-header-color);
1045
- background:var(--tds-page-header-background-color);
1046
- border-bottom:1px solid var(--t-border-color);
1047
- }
992
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
993
+ display:flex;
994
+ }
1048
995
 
1049
- .tds-page-header:not(.has-nav){
1050
- padding-bottom:var(--tds-page-header-padding-y);
1051
- }
996
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
997
+ flex-direction:column;
998
+ gap:var(--t-spacing-half);
999
+ width:100%;
1000
+ }
1052
1001
 
1053
- .tds-page-header.inactive{
1054
- background:var(--tds-page-header-background-color-inactive);
1002
+ .tds-sidenav-section-list{
1003
+ width:100%;
1004
+ padding:0;
1005
+ margin:0;
1006
+ list-style:none;
1055
1007
  }
1056
1008
 
1057
- .tds-page-header__title-bar{
1009
+ .tds-sidenav-section-header{
1058
1010
  display:flex;
1059
- flex-direction:column;
1060
- gap:var(--t-spacing-2) var(--t-spacing-1);
1061
- align-items:flex-start;
1011
+ align-items:baseline;
1062
1012
  justify-content:space-between;
1063
- padding:0 var(--tds-page-header-padding-x);
1013
+ padding-top:var(--t-spacing-2);
1064
1014
  }
1065
1015
 
1066
- .tds-page-header--profile > .tds-page-header__title-bar{
1016
+ .tds-sidenav-section-header h2{
1017
+ margin:0;
1018
+ font-size:var(--t-font-size-sm);
1019
+ font-weight:var(--t-font-weight-semibold);
1020
+ line-height:1.35;
1021
+ color:var(--t-text-color-secondary);
1022
+ text-transform:uppercase;
1023
+ }
1024
+
1025
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1026
+ padding-top:0;
1027
+ }
1028
+
1029
+ .tds-sidenav-section-header [slot="label-actions"]{
1030
+ display:flex;
1031
+ gap:var(--t-spacing-half);
1032
+ align-items:center;
1033
+ }
1034
+
1035
+ .tds-sidenav-section [slot="section-actions"]{
1036
+ display:flex;
1037
+ gap:12px;
1067
1038
  align-items:center;
1039
+ min-height:42px;
1040
+ padding:var(--t-spacing-1) 0;
1068
1041
  }
1069
1042
 
1070
- .tds-page-header__primary{
1043
+ .tds-sidenav-section-list,
1044
+ .tds-sidenav-item{
1071
1045
  width:100%;
1072
- }
1073
-
1074
- .tds-page-header__primary h1{
1046
+ padding:0;
1075
1047
  margin:0;
1076
- font-size:var(--tds-page-header-headline-font-size);
1077
- font-weight:var(--t-font-weight-normal);
1078
- line-height:32px;
1079
- color:var(--tds-page-header-headline-color);
1080
- overflow-wrap:break-word;
1081
1048
  }
1082
1049
 
1083
- .tds-page-header [slot="actions"]{
1084
- width:100%;
1085
- }
1050
+ .tds-sidenav-item :is(a,button){
1051
+ position:relative;
1052
+ display:flex;
1053
+ gap:12px;
1054
+ align-items:center;
1055
+ width:100%;
1056
+ padding:12px;
1057
+ overflow:hidden;
1058
+ font-size:var(--t-font-size-sm);
1059
+ line-height:18px;
1060
+ color:var(--t-text-color-headline);
1061
+ white-space:nowrap;
1062
+ text-decoration:none;
1063
+ -webkit-appearance:none;
1064
+ -moz-appearance:none;
1065
+ appearance:none;
1066
+ cursor:pointer;
1067
+ background-color:var(--tds-sidenav-item-background, transparent);
1068
+ border:0;
1069
+ border-radius:var(--t-border-radius);
1070
+ transition:var(--tds-sidenav-item-transition);
1071
+ }
1072
+
1073
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1074
+ display:block;
1075
+ flex:1;
1076
+ overflow:hidden;
1077
+ text-overflow:ellipsis;
1078
+ text-align:left;
1079
+ white-space:nowrap;
1080
+ }
1081
+
1082
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1083
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1084
+ color:var(--t-text-color-headline);
1085
+ text-decoration:none;
1086
+ }
1087
+
1088
+ :is(.tds-sidenav-item :is(a,button)):active{
1089
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1090
+ }
1091
+
1092
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1093
+ overflow:hidden;
1094
+ color:var(--tds-sidenav-item-icon-color);
1095
+ }
1096
+
1097
+ :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{
1098
+ display:block;
1099
+ width:var(--tds-sidenav-item-icon-size);
1100
+ height:var(--tds-sidenav-item-icon-size);
1101
+ }
1102
+
1103
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1104
+ --tds-sidenav-indent:19px;
1105
+ }
1106
+
1107
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
1108
+ visibility:visible;
1109
+ block-size:auto;
1110
+ opacity:1;
1111
+ }
1112
+
1113
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1114
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1115
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1116
+
1117
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1118
+ font-weight:var(--t-font-weight-semibold);
1119
+ }
1086
1120
 
1087
- .has-multi-actions.tds-page-header [slot="actions"],
1088
- .has-multi-actions.tds-page-header .tds-page-header__actions{
1089
- display:flex;
1090
- flex-flow:row wrap;
1091
- gap:var(--t-spacing-half) var(--t-spacing-1);
1092
- align-items:flex-start;
1093
- justify-content:flex-start;
1094
- min-width:0;
1095
- }
1121
+ .tds-sidenav-item:has(.tds-sidenav-section){
1122
+ display:flex;
1123
+ flex-direction:column;
1124
+ gap:var(--t-spacing-half);
1125
+ }
1096
1126
 
1097
- .tds-page-header nav[slot="navigation"]:not(:has(ul)),
1098
- .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
1099
- .tds-page-header nav[slot="navigation"] ul,
1100
- .tds-page-header nav.tds-page-header__nav ul{
1101
- display:flex;
1102
- gap:var(--tds-page-header-nav-gap);
1103
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1104
- margin:0 0 -1px;
1105
- overflow:auto;
1106
- list-style:none;
1107
- background:var(--tds-page-header-nav-background);
1108
- }
1127
+ .tds-sidenav-item .tds-sidenav-section-list{
1128
+ --tds-sidenav-item-depth:1;
1129
+ gap:0;
1130
+ }
1109
1131
 
1110
- .tds-page-header nav[slot="navigation"] a,
1111
- .tds-page-header nav[slot="navigation"] button,
1112
- .tds-page-header nav.tds-page-header__nav a,
1113
- .tds-page-header nav.tds-page-header__nav button{
1114
- position:relative;
1115
- display:inline-flex;
1116
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1117
- font-size:var(--t-font-size-sm);
1118
- line-height:22px;
1119
- color:var(--tds-page-header-nav-item-color);
1120
- white-space:nowrap;
1121
- text-decoration:none;
1122
- -webkit-appearance:none;
1123
- -moz-appearance:none;
1124
- appearance:none;
1125
- cursor:pointer;
1126
- outline-offset:-2px;
1127
- background-color:var(--tds-page-header-nav-item-background-color);
1128
- background-clip:padding-box;
1129
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1130
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1131
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1132
- }
1132
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1133
+ visibility:hidden;
1134
+ block-size:0;
1135
+ overflow-y:clip;
1136
+ opacity:0;
1137
+ transition:content-visibility .2s allow-discrete, opacity .2s, block-size .2s;
1138
+ }
1133
1139
 
1134
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator){
1135
- position:relative;
1136
- }
1140
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1141
+ --tds-sidenav-item-depth:2;
1142
+ }
1137
1143
 
1138
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) :is(a, button){
1139
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1140
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1141
- }
1144
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1145
+ min-height:var(--t-element-size-2xl);
1146
+ padding-block:9px;
1147
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1148
+ line-height:1;
1149
+ background-color:transparent;
1150
+ }
1142
1151
 
1143
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::before,
1144
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
1145
- position:absolute;
1146
- top:-5px;
1147
- right:-2px;
1148
- width:10px;
1149
- height:10px;
1150
- content:"";
1151
- background:var(--tds-page-header-nav-item-indicator-color);
1152
- border-radius:50%;
1153
- }
1152
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1153
+ position:absolute;
1154
+ top:0;
1155
+ bottom:0;
1156
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1157
+ width:2px;
1158
+ content:"";
1159
+ background-color:var(--tds-sidenav-item-nested-border-color);
1160
+ transition:var(--tds-sidenav-item-transition);
1161
+ }
1154
1162
 
1155
- @media (prefers-reduced-motion: no-preference){
1156
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
1157
- animation:indicator-pulse 1.25s ease infinite;
1158
- }
1159
- }
1163
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1164
+ position:absolute;
1165
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1166
+ z-index:-1;
1167
+ height:100%;
1168
+ content:"";
1169
+ background-color:var(--tds-sidenav-item-nested-background);
1170
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1171
+ transition:var(--tds-sidenav-item-transition);
1172
+ }
1160
1173
 
1161
- .tds-page-header nav[slot="navigation"] a.selected,
1162
- .tds-page-header nav[slot="navigation"] button.selected,
1163
- .tds-page-header nav.tds-page-header__nav a.selected,
1164
- .tds-page-header nav.tds-page-header__nav button.selected{
1165
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1166
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1167
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1168
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1169
- }
1174
+ :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)){
1175
+ display:block;
1176
+ text-align:left;
1177
+ white-space:normal;
1178
+ }
1170
1179
 
1171
- .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
1172
- .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
1173
- .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
1174
- .tds-page-header nav.tds-page-header__nav button:not(.selected):hover{
1175
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1176
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1177
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1178
- }
1180
+ :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{
1181
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1182
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1183
+ }
1179
1184
 
1180
- .tds-page-header nav[slot="navigation"] a:not(.selected):active,
1181
- .tds-page-header nav[slot="navigation"] button:not(.selected):active,
1182
- .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
1183
- .tds-page-header nav.tds-page-header__nav button:not(.selected):active{
1184
- background-color:var(--tds-page-header-nav-item-background-color-active);
1185
- }
1185
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1186
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1187
+ }
1186
1188
 
1187
- .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
1188
- .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
1189
- .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
1190
- .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled{
1191
- color:var(--tds-page-header-nav-item-color-disabled);
1192
- cursor:not-allowed;
1193
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
1194
- opacity:1;
1189
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1190
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1191
+ font-weight:var(--t-font-weight-medium);
1192
+ }
1193
+
1194
+ .tds-sidenav-responsive-header{
1195
+ display:flex;
1196
+ gap:var(--t-spacing-2);
1197
+ align-items:center;
1198
+ width:100%;
1195
1199
  }
1196
1200
 
1197
- @media (min-width: 960px){
1198
- .tds-page-header__primary{
1199
- flex:1 1 max-content;
1200
- width:auto;
1201
- min-width:0;
1202
- max-width:100%;
1201
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1202
+ order:0;
1203
1203
  }
1204
1204
 
1205
- .tds-page-header__title-bar,
1206
- .tds-page-header--profile .tds-page-header__title-bar{
1207
- flex-flow:row nowrap;
1208
- row-gap:12px;
1209
- align-items:flex-start;
1205
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1206
+ flex:1;
1207
+ order:1;
1208
+ margin:0;
1209
+ font-size:var(--t-font-size-lg);
1210
+ font-weight:var(--t-font-weight-medium);
1211
+ color:var(--t-text-color-headline);
1210
1212
  }
1211
1213
 
1212
- .tds-page-header [slot="actions"]{
1213
- width:auto;
1214
+ @media (max-width: 719px){
1215
+ .tds-sidenav-collapse{
1216
+ z-index:10001;
1217
+ display:none;
1218
+ max-width:min(448px, calc(100vw - 48px));
1219
+ padding:0;
1220
+ margin:12px 0;
1221
+ overflow:hidden;
1222
+ outline:0;
1223
+ background:var(--t-surface-color-card);
1224
+ border:0;
1225
+ border-radius:6px;
1226
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1227
+ will-change:transform;
1228
+ position-area:bottom span-right;
1214
1229
  }
1215
1230
 
1216
- .has-multi-actions.tds-page-header [slot="actions"],
1217
- .has-multi-actions.tds-page-header .tds-page-header__actions{
1218
- justify-content:flex-end;
1231
+ .tds-sidenav-scroll-container{
1232
+ --webkit-overflow-scrolling:touch;
1233
+ display:block;
1234
+ width:100%;
1235
+ height:-moz-fit-content;
1236
+ height:fit-content;
1237
+ padding:var(--t-spacing-2);
1238
+ overflow-y:auto;
1219
1239
  }
1220
- }
1221
1240
 
1222
- .tds-page-header-phone,
1223
- .tds-page-header-email{
1224
- color:var(--tds-page-header-color);
1225
- white-space:nowrap;
1241
+ .tds-sidenav-item :is(a, button) :is(.prefix){
1242
+ display:none;
1243
+ }
1244
+ @supports selector(:popover-open){
1245
+ .tds-sidenav-collapse:popover-open{
1246
+ display:flex;
1247
+ }
1248
+ }
1249
+ @supports not selector(:popover-open){
1250
+ .tds-sidenav-collapse.\:popover-open{
1251
+ display:flex;
1252
+ }
1253
+ }
1226
1254
  }
1227
1255
 
1228
- .tds-page-header-email{
1229
- max-width:100%;
1230
- overflow:hidden;
1231
- text-overflow:ellipsis;
1256
+ @media (min-width: 720px){
1257
+ .tds-sidenav-responsive-header{
1258
+ display:none;
1259
+ }
1232
1260
  }
1233
1261
 
1234
- @keyframes indicator-pulse{
1235
- 0%{
1236
- opacity:.3;
1237
- transform:scale(.9);
1238
- }
1262
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1263
+ display:none;
1264
+ }
1239
1265
 
1240
- 100%{
1241
- opacity:0;
1242
- transform:scale(1.75);
1243
- }
1244
- }
1266
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1267
+ display:block;
1268
+ }
1245
1269
 
1270
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1271
+ display:flex;
1272
+ flex-direction:column;
1273
+ }
1246
1274
 
1247
- @media (prefers-reduced-motion: no-preference){
1275
+ :root[data-color-mode="dark"]{
1276
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
1277
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
1278
+ --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
1279
+ --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
1280
+ --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
1281
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
1282
+ --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
1283
+ --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
1284
+ }
1248
1285
 
1249
- :root{
1250
- interpolate-size:allow-keywords;
1286
+ @media (prefers-color-scheme: dark){
1287
+ :root[data-color-mode="system"]{
1288
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
1289
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
1290
+ --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
1291
+ --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
1292
+ --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
1293
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
1294
+ --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
1295
+ --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
1296
+ }
1251
1297
  }
1298
+
1299
+ @layer t-critical{
1300
+ tds-page-header:not(.hydrated){
1301
+ display:none;
1252
1302
  }
1303
+ }
1253
1304
 
1254
- @layer tds-component{
1255
- tds-sidenav, .tds-sidenav{
1256
- --tds-sidenav-indent:12px;
1257
- --tds-sidenav-item-depth:0;
1305
+ @layer t-component{
1306
+ .tds-page-header{
1307
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1308
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1309
+ --tds-page-header-color:var(--t-text-color);
1310
+ --tds-page-header-headline-color:var(--t-text-color-headline);
1311
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1312
+ --tds-page-header-padding-x:var(--t-spacing-2);
1313
+ --tds-page-header-padding-y:var(--t-spacing-2);
1314
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1315
+ --tds-page-header-nav-gap:var(--t-spacing-1);
1316
+ --tds-page-header-nav-background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 100%);
1317
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1318
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1319
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1320
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-transparency-light-060);
1321
+ --tds-page-header-nav-item-border-width:1px;
1258
1322
 
1259
- --tds-sidenav-item-transition:background-color .2s cubic-bezier(.19, .91, .38, 1);
1323
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1324
+ --tds-page-header-nav-item-border-bottom-color:var(--t-border-color);
1260
1325
 
1261
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
1262
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
1263
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
1264
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
1326
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
1327
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-080);
1328
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1265
1329
 
1266
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
1267
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
1268
- --tds-sidenav-item-nested-background-selected:transparent;
1330
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-060);
1331
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-hover);
1269
1332
 
1270
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
1271
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1272
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1333
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1334
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1335
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1273
1336
 
1274
- --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1275
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1337
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
1338
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1339
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1340
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1341
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1276
1342
  }
1277
1343
 
1278
- .tds-sidenav--theme-gray{
1279
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
1280
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
1281
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
1282
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1283
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
1344
+ .tds-page-header--profile{
1345
+ --tds-page-header-padding-y:20px;
1346
+ }
1347
+ @media (min-width: 600px){
1348
+ .tds-page-header{
1349
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
1350
+ --tds-page-header-color:var(--t-text-color-secondary);
1351
+ --tds-page-header-padding-x:var(--t-spacing-3);
1352
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1353
+ --tds-page-header-nav-gap:var(--t-spacing-half);
1354
+ --tds-page-header-nav-background:transparent;
1355
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1356
+ --tds-page-header-nav-item-border-width:1px;
1357
+ --tds-page-header-nav-item-color:var(--t-text-color);
1358
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1359
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1360
+ }
1284
1361
  }
1285
1362
  }
1286
1363
 
1287
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
1288
- display:flex;
1289
- }
1364
+ .tds-page-header{
1365
+ display:flex;
1366
+ flex-direction:column;
1367
+ padding-top:var(--tds-page-header-padding-y);
1368
+ color:var(--tds-page-header-color);
1369
+ background:var(--tds-page-header-background-color);
1370
+ border-bottom:1px solid var(--t-border-color);
1371
+ }
1290
1372
 
1291
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
1292
- flex-direction:column;
1293
- gap:var(--t-spacing-half);
1294
- width:100%;
1295
- }
1373
+ .tds-page-header:not(.has-nav){
1374
+ padding-bottom:var(--tds-page-header-padding-y);
1375
+ }
1296
1376
 
1297
- .tds-sidenav-section-list{
1298
- width:100%;
1299
- padding:0;
1300
- margin:0;
1301
- list-style:none;
1377
+ .tds-page-header.inactive{
1378
+ background:var(--tds-page-header-background-color-inactive);
1302
1379
  }
1303
1380
 
1304
- .tds-sidenav-section-header{
1381
+ .tds-page-header__title-bar{
1305
1382
  display:flex;
1306
- align-items:baseline;
1383
+ flex-direction:column;
1384
+ gap:var(--t-spacing-2) var(--t-spacing-1);
1385
+ align-items:flex-start;
1307
1386
  justify-content:space-between;
1308
- padding-top:var(--t-spacing-2);
1387
+ padding:0 var(--tds-page-header-padding-x);
1309
1388
  }
1310
1389
 
1311
- .tds-sidenav-section-header h2{
1312
- margin:0;
1313
- font-size:var(--t-font-size-sm);
1314
- font-weight:var(--t-font-weight-semibold);
1315
- line-height:1.35;
1316
- color:var(--t-text-color-secondary);
1317
- text-transform:uppercase;
1318
- }
1319
-
1320
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
1321
- padding-top:0;
1322
- }
1323
-
1324
- .tds-sidenav-section-header [slot="label-actions"]{
1325
- display:flex;
1326
- gap:var(--t-spacing-half);
1327
- align-items:center;
1328
- }
1329
-
1330
- .tds-sidenav-section [slot="section-actions"]{
1331
- display:flex;
1332
- gap:12px;
1390
+ .tds-page-header--profile > .tds-page-header__title-bar{
1333
1391
  align-items:center;
1334
- min-height:42px;
1335
- padding:var(--t-spacing-1) 0;
1336
1392
  }
1337
1393
 
1338
- .tds-sidenav-section-list,
1339
- .tds-sidenav-item{
1394
+ .tds-page-header__primary{
1340
1395
  width:100%;
1341
- padding:0;
1342
- margin:0;
1343
1396
  }
1344
1397
 
1345
- .tds-sidenav-item :is(a,button){
1346
- position:relative;
1347
- display:flex;
1348
- gap:12px;
1349
- align-items:center;
1350
- width:100%;
1351
- padding:12px;
1352
- overflow:hidden;
1353
- font-size:var(--t-font-size-sm);
1354
- line-height:18px;
1355
- color:var(--t-text-color-headline);
1356
- white-space:nowrap;
1357
- text-decoration:none;
1358
- -webkit-appearance:none;
1359
- -moz-appearance:none;
1360
- appearance:none;
1361
- cursor:pointer;
1362
- background-color:var(--tds-sidenav-item-background, transparent);
1363
- border:0;
1364
- border-radius:var(--t-border-radius);
1365
- transition:var(--tds-sidenav-item-transition);
1366
- }
1367
-
1368
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
1369
- display:block;
1370
- flex:1;
1371
- overflow:hidden;
1372
- text-overflow:ellipsis;
1373
- text-align:left;
1374
- white-space:nowrap;
1375
- }
1376
-
1377
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1378
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1379
- color:var(--t-text-color-headline);
1380
- text-decoration:none;
1381
- }
1382
-
1383
- :is(.tds-sidenav-item :is(a,button)):active{
1384
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
1385
- }
1386
-
1387
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
1388
- overflow:hidden;
1389
- color:var(--tds-sidenav-item-icon-color);
1390
- }
1391
-
1392
- :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{
1393
- display:block;
1394
- width:var(--tds-sidenav-item-icon-size);
1395
- height:var(--tds-sidenav-item-icon-size);
1396
- }
1397
-
1398
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
1399
- --tds-sidenav-indent:19px;
1400
- }
1401
-
1402
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
1403
- visibility:visible;
1404
- block-size:auto;
1405
- opacity:1;
1406
- }
1407
-
1408
- .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
1409
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
1410
- --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
1411
-
1412
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
1413
- font-weight:var(--t-font-weight-semibold);
1414
- }
1415
-
1416
- .tds-sidenav-item:has(.tds-sidenav-section){
1417
- display:flex;
1418
- flex-direction:column;
1419
- gap:var(--t-spacing-half);
1420
- }
1421
-
1422
- .tds-sidenav-item .tds-sidenav-section-list{
1423
- --tds-sidenav-item-depth:1;
1424
- gap:0;
1425
- }
1398
+ .tds-page-header__primary h1{
1399
+ margin:0;
1400
+ font-size:var(--tds-page-header-headline-font-size);
1401
+ font-weight:var(--t-font-weight-normal);
1402
+ line-height:32px;
1403
+ color:var(--tds-page-header-headline-color);
1404
+ overflow-wrap:break-word;
1405
+ }
1426
1406
 
1427
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1428
- visibility:hidden;
1429
- block-size:0;
1430
- overflow-y:clip;
1431
- opacity:0;
1432
- transition:content-visibility .2s allow-discrete, opacity .2s, block-size .2s;
1433
- }
1407
+ .tds-page-header [slot="actions"]{
1408
+ width:100%;
1409
+ }
1434
1410
 
1435
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1436
- --tds-sidenav-item-depth:2;
1437
- }
1411
+ .has-multi-actions.tds-page-header [slot="actions"],
1412
+ .has-multi-actions.tds-page-header .tds-page-header__actions{
1413
+ display:flex;
1414
+ flex-flow:row wrap;
1415
+ gap:var(--t-spacing-half) var(--t-spacing-1);
1416
+ align-items:flex-start;
1417
+ justify-content:flex-start;
1418
+ min-width:0;
1419
+ }
1438
1420
 
1439
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1440
- min-height:var(--t-element-size-2xl);
1441
- padding-block:9px;
1442
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1443
- line-height:1;
1444
- background-color:transparent;
1445
- }
1421
+ .tds-page-header nav[slot="navigation"]:not(:has(ul)),
1422
+ .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
1423
+ .tds-page-header nav[slot="navigation"] ul,
1424
+ .tds-page-header nav.tds-page-header__nav ul{
1425
+ display:flex;
1426
+ gap:var(--tds-page-header-nav-gap);
1427
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1428
+ margin:0 0 -1px;
1429
+ overflow:auto;
1430
+ list-style:none;
1431
+ background:var(--tds-page-header-nav-background);
1432
+ }
1446
1433
 
1447
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1448
- position:absolute;
1449
- top:0;
1450
- bottom:0;
1451
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1452
- width:2px;
1453
- content:"";
1454
- background-color:var(--tds-sidenav-item-nested-border-color);
1455
- transition:var(--tds-sidenav-item-transition);
1456
- }
1434
+ .tds-page-header nav[slot="navigation"] a,
1435
+ .tds-page-header nav[slot="navigation"] button,
1436
+ .tds-page-header nav.tds-page-header__nav a,
1437
+ .tds-page-header nav.tds-page-header__nav button{
1438
+ position:relative;
1439
+ display:inline-flex;
1440
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1441
+ font-size:var(--t-font-size-sm);
1442
+ line-height:22px;
1443
+ color:var(--tds-page-header-nav-item-color);
1444
+ white-space:nowrap;
1445
+ text-decoration:none;
1446
+ -webkit-appearance:none;
1447
+ -moz-appearance:none;
1448
+ appearance:none;
1449
+ cursor:pointer;
1450
+ outline-offset:-2px;
1451
+ background-color:var(--tds-page-header-nav-item-background-color);
1452
+ background-clip:padding-box;
1453
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1454
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1455
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1456
+ }
1457
1457
 
1458
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1459
- position:absolute;
1460
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1461
- z-index:-1;
1462
- height:100%;
1463
- content:"";
1464
- background-color:var(--tds-sidenav-item-nested-background);
1465
- border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1466
- transition:var(--tds-sidenav-item-transition);
1467
- }
1458
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator){
1459
+ position:relative;
1460
+ }
1468
1461
 
1469
- :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)){
1470
- display:block;
1471
- text-align:left;
1472
- white-space:normal;
1473
- }
1462
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) :is(a, button){
1463
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1464
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1465
+ }
1474
1466
 
1475
- :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{
1476
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1477
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1478
- }
1467
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::before,
1468
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
1469
+ position:absolute;
1470
+ top:-5px;
1471
+ right:-2px;
1472
+ width:10px;
1473
+ height:10px;
1474
+ content:"";
1475
+ background:var(--tds-page-header-nav-item-indicator-color);
1476
+ border-radius:50%;
1477
+ }
1479
1478
 
1480
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1481
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1482
- }
1479
+ @media (prefers-reduced-motion: no-preference){
1480
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
1481
+ animation:indicator-pulse 1.25s ease infinite;
1482
+ }
1483
+ }
1483
1484
 
1484
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1485
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1486
- font-weight:var(--t-font-weight-medium);
1487
- }
1485
+ .tds-page-header nav[slot="navigation"] a.selected,
1486
+ .tds-page-header nav[slot="navigation"] button.selected,
1487
+ .tds-page-header nav.tds-page-header__nav a.selected,
1488
+ .tds-page-header nav.tds-page-header__nav button.selected{
1489
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1490
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1491
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1492
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1493
+ }
1488
1494
 
1489
- .tds-sidenav-responsive-header{
1490
- display:flex;
1491
- gap:var(--t-spacing-2);
1492
- align-items:center;
1493
- width:100%;
1495
+ .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
1496
+ .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
1497
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
1498
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):hover{
1499
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1500
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1501
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1494
1502
  }
1495
1503
 
1496
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1497
- order:0;
1498
- }
1504
+ .tds-page-header nav[slot="navigation"] a:not(.selected):active,
1505
+ .tds-page-header nav[slot="navigation"] button:not(.selected):active,
1506
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
1507
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):active{
1508
+ background-color:var(--tds-page-header-nav-item-background-color-active);
1509
+ }
1499
1510
 
1500
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1501
- flex:1;
1502
- order:1;
1503
- margin:0;
1504
- font-size:var(--t-font-size-lg);
1505
- font-weight:var(--t-font-weight-medium);
1506
- color:var(--t-text-color-headline);
1507
- }
1511
+ .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
1512
+ .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
1513
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
1514
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled{
1515
+ color:var(--tds-page-header-nav-item-color-disabled);
1516
+ cursor:not-allowed;
1517
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
1518
+ opacity:1;
1519
+ }
1508
1520
 
1509
- @media (max-width: 719px){
1510
- .tds-sidenav-collapse{
1511
- z-index:10001;
1512
- display:none;
1513
- max-width:min(448px, calc(100vw - 48px));
1514
- padding:0;
1515
- margin:12px 0;
1516
- overflow:hidden;
1517
- outline:0;
1518
- background:var(--t-surface-color-card);
1519
- border:0;
1520
- border-radius:6px;
1521
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1522
- will-change:transform;
1523
- position-area:bottom span-right;
1521
+ @media (min-width: 960px){
1522
+ .tds-page-header__primary{
1523
+ flex:1 1 max-content;
1524
+ width:auto;
1525
+ min-width:0;
1526
+ max-width:100%;
1524
1527
  }
1525
1528
 
1526
- .tds-sidenav-scroll-container{
1527
- --webkit-overflow-scrolling:touch;
1528
- display:block;
1529
- width:100%;
1530
- height:-moz-fit-content;
1531
- height:fit-content;
1532
- padding:var(--t-spacing-2);
1533
- overflow-y:auto;
1529
+ .tds-page-header__title-bar,
1530
+ .tds-page-header--profile .tds-page-header__title-bar{
1531
+ flex-flow:row nowrap;
1532
+ row-gap:12px;
1533
+ align-items:flex-start;
1534
1534
  }
1535
1535
 
1536
- .tds-sidenav-item :is(a, button) :is(.prefix){
1537
- display:none;
1538
- }
1539
- @supports selector(:popover-open){
1540
- .tds-sidenav-collapse:popover-open{
1541
- display:flex;
1542
- }
1536
+ .tds-page-header [slot="actions"]{
1537
+ width:auto;
1543
1538
  }
1544
- @supports not selector(:popover-open){
1545
- .tds-sidenav-collapse.\:popover-open{
1546
- display:flex;
1547
- }
1539
+
1540
+ .has-multi-actions.tds-page-header [slot="actions"],
1541
+ .has-multi-actions.tds-page-header .tds-page-header__actions{
1542
+ justify-content:flex-end;
1548
1543
  }
1549
1544
  }
1550
1545
 
1551
- @media (min-width: 720px){
1552
- .tds-sidenav-responsive-header{
1553
- display:none;
1554
- }
1546
+ .tds-page-header-phone,
1547
+ .tds-page-header-email{
1548
+ color:var(--tds-page-header-color);
1549
+ white-space:nowrap;
1555
1550
  }
1556
1551
 
1557
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1558
- display:none;
1559
- }
1552
+ .tds-page-header-email{
1553
+ max-width:100%;
1554
+ overflow:hidden;
1555
+ text-overflow:ellipsis;
1556
+ }
1560
1557
 
1561
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1562
- display:block;
1563
- }
1558
+ @keyframes indicator-pulse{
1559
+ 0%{
1560
+ opacity:.3;
1561
+ transform:scale(.9);
1562
+ }
1564
1563
 
1565
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1566
- display:flex;
1567
- flex-direction:column;
1568
- }
1564
+ 100%{
1565
+ opacity:0;
1566
+ transform:scale(1.75);
1567
+ }
1568
+ }
1569
1569
 
1570
1570
  .tds-loading-spinner{
1571
1571
  --tds-loading-spinner-size:1.25em;