@planningcenter/tapestry 2.6.0-qa-469.1 → 2.6.0-rc.0

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