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

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