@planningcenter/tapestry 3.0.0-rc.0 → 3.0.0-rc.10

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