@planningcenter/tapestry 2.4.0-rc.17 → 2.4.0-rc.19

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 (29) hide show
  1. package/dist/components/page-header/index.js +1 -1
  2. package/dist/components/sidenav/index.js +1 -1
  3. package/dist/reactRender.css +971 -971
  4. package/dist/reactRender.css.map +1 -1
  5. package/dist/reactRenderLegacy.css +971 -971
  6. package/dist/reactRenderLegacy.css.map +1 -1
  7. package/dist/tapestry-wc/dist/components/{p-O_EVmuyh.js → p-B2k0aSJX.js} +3 -3
  8. package/dist/tapestry-wc/dist/components/{p-O_EVmuyh.js.map → p-B2k0aSJX.js.map} +1 -1
  9. package/dist/tapestry-wc/dist/components/{p-B9-jvQ7W.js → p-Bzk57uA9.js} +2 -2
  10. package/dist/tapestry-wc/dist/components/{p-B9-jvQ7W.js.map → p-Bzk57uA9.js.map} +1 -1
  11. package/dist/tapestry-wc/dist/components/{p-CIS5rvaR.js → p-C8oFhMI2.js} +3 -3
  12. package/dist/tapestry-wc/dist/components/{p-CIS5rvaR.js.map → p-C8oFhMI2.js.map} +1 -1
  13. package/dist/tapestry-wc/dist/components/{p-xONKSncx.js → p-DwZ8zhNf.js} +3 -3
  14. package/dist/tapestry-wc/dist/components/{p-xONKSncx.js.map → p-DwZ8zhNf.js.map} +1 -1
  15. package/dist/tapestry-wc/dist/components/{p-Diqrdqrm.js → p-JL3YJavR.js} +2 -2
  16. package/dist/tapestry-wc/dist/components/{p-Diqrdqrm.js.map → p-JL3YJavR.js.map} +1 -1
  17. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js +2 -2
  18. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js.map +1 -1
  19. package/dist/tapestry-wc/dist/components/tds-page-header.js +3 -3
  20. package/dist/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
  21. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js +3 -3
  22. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
  23. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js +2 -2
  24. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js.map +1 -1
  25. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js +3 -3
  26. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
  27. package/dist/tapestry-wc/dist/components/tds-sidenav.js +5 -5
  28. package/dist/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
  29. package/package.json +3 -3
package/dist/reactRenderLegacy.css CHANGED
@@ -1,600 +1,600 @@
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;
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);
293
+
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;
297
+
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);
301
+
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);
256
304
  }
257
305
 
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);
306
+ .is-classic tds-sidenav, .is-classic .tds-sidenav,
307
+ .tds-sidenav--theme-gray{
308
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
309
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
310
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
311
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
312
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
265
313
  }
314
+ }
266
315
 
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;
316
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
317
+ display:flex;
282
318
  }
283
319
 
284
- .tds-sidenav-scroll-container{
285
- --webkit-overflow-scrolling:touch;
286
- display:block;
320
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
321
+ flex-direction:column;
322
+ gap:var(--t-spacing-half);
287
323
  width:100%;
288
- height:-moz-fit-content;
289
- height:fit-content;
290
- padding:var(--t-spacing-2);
291
- overflow-y:auto;
292
324
  }
293
325
 
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
- }
326
+ .tds-sidenav-section-list{
327
+ width:100%;
328
+ padding:0;
329
+ margin:0;
330
+ list-style:none;
307
331
  }
308
332
 
309
- @media (min-width: 720px){
310
- .tds-sidenav-responsive-header{
311
- display:none;
333
+ .tds-sidenav-section-header{
334
+ display:flex;
335
+ align-items:baseline;
336
+ justify-content:space-between;
337
+ padding-top:var(--t-spacing-2);
338
+ }
339
+
340
+ .tds-sidenav-section-header h2{
341
+ margin:0;
342
+ font-size:var(--t-font-size-sm);
343
+ font-weight:var(--t-font-weight-semibold);
344
+ line-height:1.35;
345
+ color:var(--t-text-color-default-secondary);
346
+ text-transform:uppercase;
347
+ }
348
+
349
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
350
+ padding-top:0;
351
+ }
352
+
353
+ .tds-sidenav-section-header [slot="label-actions"]{
354
+ display:flex;
355
+ gap:var(--t-spacing-half);
356
+ align-items:center;
312
357
  }
358
+
359
+ .tds-sidenav-section [slot="section-actions"]{
360
+ display:flex;
361
+ gap:12px;
362
+ align-items:center;
363
+ min-height:42px;
364
+ padding:var(--t-spacing-1) 0;
313
365
  }
314
366
 
315
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
316
- display:none;
317
- }
367
+ .tds-sidenav-section-list,
368
+ .tds-sidenav-item{
369
+ width:100%;
370
+ padding:0;
371
+ margin:0;
372
+ }
318
373
 
319
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
374
+ .tds-sidenav-item :is(a,button){
375
+ position:relative;
376
+ display:flex;
377
+ gap:12px;
378
+ align-items:center;
379
+ width:100%;
380
+ padding:12px;
381
+ overflow:hidden;
382
+ font-size:var(--t-font-size-sm);
383
+ line-height:18px;
384
+ color:var(--t-text-color-default-headline);
385
+ white-space:nowrap;
386
+ text-decoration:none;
387
+ -webkit-appearance:none;
388
+ -moz-appearance:none;
389
+ appearance:none;
390
+ cursor:pointer;
391
+ background-color:var(--tds-sidenav-item-background, transparent);
392
+ border:0;
393
+ border-radius:var(--t-border-radius-default);
394
+ transition:var(--tds-sidenav-item-transition);
395
+ }
396
+
397
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
320
398
  display:block;
399
+ flex:1;
400
+ overflow:hidden;
401
+ text-overflow:ellipsis;
402
+ text-align:left;
403
+ white-space:nowrap;
321
404
  }
322
405
 
323
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
324
- display:flex;
325
- flex-direction:column;
406
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
407
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
408
+ color:var(--t-text-color-default-headline);
409
+ text-decoration:none;
326
410
  }
327
411
 
328
- @layer t-critical{
329
- tds-page-header:not(.hydrated){
330
- display:none;
331
- }
332
- }
412
+ :is(.tds-sidenav-item :is(a,button)):active{
413
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
414
+ }
333
415
 
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;
416
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
417
+ overflow:hidden;
418
+ color:var(--tds-sidenav-item-icon-color);
419
+ }
351
420
 
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);
421
+ :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{
422
+ display:block;
423
+ width:var(--tds-sidenav-item-icon-size);
424
+ height:var(--tds-sidenav-item-icon-size);
425
+ }
354
426
 
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);
427
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
428
+ --tds-sidenav-indent:19px;
429
+ }
358
430
 
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);
431
+ [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list{
432
+ visibility:visible;
433
+ block-size:auto;
434
+ opacity:1;
435
+ }
361
436
 
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);
437
+ .tds-sidenav-item.selected > :is(a,button),.tds-sidenav-item:has(.tds-sidenav-section):has(.selected) > :is(a,button){
438
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-selected);
439
+ --tds-sidenav-item-icon-color:var(--tds-sidenav-item-icon-color-selected);
365
440
 
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);
441
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
442
+ font-weight:var(--t-font-weight-semibold);
371
443
  }
372
444
 
373
- .tds-page-header--profile{
374
- --tds-page-header-padding-y:20px;
445
+ .tds-sidenav-item:has(.tds-sidenav-section){
446
+ display:flex;
447
+ flex-direction:column;
448
+ gap:var(--t-spacing-half);
375
449
  }
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
- }
450
+
451
+ .tds-sidenav-item .tds-sidenav-section-list{
452
+ --tds-sidenav-item-depth:1;
453
+ gap:0;
390
454
  }
391
- }
392
455
 
393
- .tds-page-header{
394
- 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);
400
- }
456
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
457
+ visibility:hidden;
458
+ block-size:0;
459
+ overflow-y:clip;
460
+ opacity:0;
461
+ transition:content-visibility .2s allow-discrete, opacity .2s, block-size .2s;
462
+ }
401
463
 
402
- .tds-page-header:not(.has-nav){
403
- padding-bottom:var(--tds-page-header-padding-y);
404
- }
464
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
465
+ --tds-sidenav-item-depth:2;
466
+ }
405
467
 
406
- .tds-page-header.inactive{
407
- background:var(--tds-page-header-background-color-inactive);
408
- }
468
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
469
+ min-height:var(--t-element-size-2xl);
470
+ padding-block:9px;
471
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
472
+ line-height:1;
473
+ background-color:transparent;
474
+ }
409
475
 
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
- }
476
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
477
+ position:absolute;
478
+ top:0;
479
+ bottom:0;
480
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
481
+ width:2px;
482
+ content:"";
483
+ background-color:var(--tds-sidenav-item-nested-border-color);
484
+ transition:var(--tds-sidenav-item-transition);
485
+ }
418
486
 
419
- .tds-page-header--profile > .tds-page-header__title-bar{
420
- align-items:center;
421
- }
487
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
488
+ position:absolute;
489
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
490
+ z-index:-1;
491
+ height:100%;
492
+ content:"";
493
+ background-color:var(--tds-sidenav-item-nested-background);
494
+ border-radius:0 var(--t-border-radius-default) var(--t-border-radius-default) 0;
495
+ transition:var(--tds-sidenav-item-transition);
496
+ }
422
497
 
423
- .tds-page-header__primary{
424
- width:100%;
425
- }
498
+ :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)){
499
+ display:block;
500
+ text-align:left;
501
+ white-space:normal;
502
+ }
426
503
 
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
- }
504
+ :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{
505
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
506
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
507
+ }
435
508
 
436
- .tds-page-header [slot="actions"]{
437
- width:100%;
438
- }
509
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
510
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
511
+ }
439
512
 
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
- }
513
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
514
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
515
+ font-weight:var(--t-font-weight-medium);
516
+ }
449
517
 
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{
518
+ .tds-sidenav-responsive-header{
454
519
  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
- }
462
-
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
- }
486
-
487
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator){
488
- position:relative;
489
- }
490
-
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
- }
495
-
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%;
520
+ gap:var(--t-spacing-2);
521
+ align-items:center;
522
+ width:100%;
506
523
  }
507
524
 
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;
525
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
526
+ order:0;
511
527
  }
512
- }
513
-
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
- }
523
-
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
- }
532
-
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
- }
539
-
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;
548
- }
549
528
 
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%;
529
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
530
+ flex:1;
531
+ order:1;
532
+ margin:0;
533
+ font-size:var(--t-font-size-lg);
534
+ font-weight:var(--t-font-weight-medium);
535
+ color:var(--t-text-color-default-headline);
556
536
  }
557
537
 
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;
538
+ @media (max-width: 719px){
539
+ .tds-sidenav-collapse{
540
+ z-index:10001;
541
+ display:none;
542
+ max-width:min(448px, calc(100vw - 48px));
543
+ padding:0;
544
+ margin:12px 0;
545
+ overflow:hidden;
546
+ outline:0;
547
+ background:var(--t-surface-color-card);
548
+ border:0;
549
+ border-radius:6px;
550
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
551
+ will-change:transform;
552
+ position-area:bottom span-right;
563
553
  }
564
554
 
565
- .tds-page-header [slot="actions"]{
566
- width:auto;
555
+ .tds-sidenav-scroll-container{
556
+ --webkit-overflow-scrolling:touch;
557
+ display:block;
558
+ width:100%;
559
+ height:-moz-fit-content;
560
+ height:fit-content;
561
+ padding:var(--t-spacing-2);
562
+ overflow-y:auto;
567
563
  }
568
564
 
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;
565
+ .tds-sidenav-item :is(a, button) :is(.prefix){
566
+ display:none;
567
+ }
568
+ @supports selector(:popover-open){
569
+ .tds-sidenav-collapse:popover-open{
570
+ display:flex;
571
+ }
572
+ }
573
+ @supports not selector(:popover-open){
574
+ .tds-sidenav-collapse.\:popover-open{
575
+ display:flex;
576
+ }
572
577
  }
573
578
  }
574
579
 
575
- .tds-page-header-phone,
576
- .tds-page-header-email{
577
- color:var(--tds-page-header-color);
578
- white-space:nowrap;
580
+ @media (min-width: 720px){
581
+ .tds-sidenav-responsive-header{
582
+ display:none;
583
+ }
579
584
  }
580
585
 
581
- .tds-page-header-email{
582
- max-width:100%;
583
- overflow:hidden;
584
- text-overflow:ellipsis;
585
- }
586
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
587
+ display:none;
588
+ }
586
589
 
587
- @keyframes indicator-pulse{
588
- 0%{
589
- opacity:.3;
590
- transform:scale(.9);
591
- }
590
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
591
+ display:block;
592
+ }
592
593
 
593
- 100%{
594
- opacity:0;
595
- transform:scale(1.75);
596
- }
597
- }
594
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
595
+ display:flex;
596
+ flex-direction:column;
597
+ }
598
598
 
599
599
  .tds-loading-spinner{
600
600
  --tds-loading-spinner-size:1.25em;
@@ -625,82 +625,35 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
625
625
  }
626
626
  }
627
627
 
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%);
628
+ :root[data-color-mode="dark"]{
629
+ color-scheme:dark;
630
+ --t-text-color-default-headline:hsl(0, 0%, 94%);
631
+ --t-text-color-default-primary:hsl(0, 0%, 80%);
632
+ --t-text-color-default-secondary:hsl(0, 0%, 54%);
633
+ --t-text-color-default-disabled:hsl(0, 0%, 25%);
634
+ --t-text-color-default-placeholder:hsl(0, 0%, 38%);
682
635
  --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%);
636
+ --t-text-color-interaction-primary:hsl(204, 68%, 55%);
637
+ --t-text-color-interaction-hover:hsl(204, 68%, 50%);
638
+ --t-text-color-interaction-active:hsl(204, 68%, 45%);
639
+ --t-text-color-interaction-visited:hsl(204, 68%, 50%);
640
+ --t-text-color-status-neutral:hsl(0, 0%, 80%);
641
+ --t-text-color-status-info:hsl(204, 68%, 55%);
642
+ --t-text-color-status-success:hsl(97, 57%, 41%);
643
+ --t-text-color-status-warning:hsl(42, 84%, 55%);
644
+ --t-text-color-status-error:hsl(8, 61%, 61%);
645
+ --t-text-color-tag-subtle-gray:hsl(0, 0%, 80%);
646
+ --t-text-color-tag-subtle-blue:hsl(223, 46%, 84%);
647
+ --t-text-color-tag-subtle-indigo:hsl(233, 78%, 84%);
648
+ --t-text-color-tag-subtle-aqua:hsl(208, 77%, 85%);
649
+ --t-text-color-tag-subtle-teal:hsl(180, 95%, 74%);
650
+ --t-text-color-tag-subtle-green:hsl(99, 93%, 84%);
651
+ --t-text-color-tag-subtle-yellow:hsl(29, 100%, 85%);
652
+ --t-text-color-tag-subtle-orange:hsl(18, 100%, 85%);
653
+ --t-text-color-tag-subtle-pink:hsl(328, 89%, 89%);
654
+ --t-text-color-tag-subtle-purple:hsl(268, 70%, 88%);
655
+ --t-text-color-tag-subtle-magenta:hsl(285, 70%, 88%);
656
+ --t-text-color-tag-bold-gray:hsl(0, 0%, 17%);
704
657
  --t-text-color-tag-bold-indigo:hsl(241, 59%, 28%);
705
658
  --t-text-color-tag-bold-blue:hsl(224, 47%, 31%);
706
659
  --t-text-color-tag-bold-aqua:hsl(209, 77%, 22%);
@@ -711,57 +664,57 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
711
664
  --t-text-color-tag-bold-pink:hsl(327, 88%, 20%);
712
665
  --t-text-color-tag-bold-purple:hsl(268, 71%, 27%);
713
666
  --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%);
667
+ --t-icon-color-default-primary:hsl(0, 0%, 80%);
668
+ --t-icon-color-default-secondary:hsl(0, 0%, 54%);
669
+ --t-icon-color-default-dim:hsl(0, 0%, 38%);
670
+ --t-icon-color-default-disabled:hsl(0, 0%, 25%);
718
671
  --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%);
672
+ --t-icon-color-status-neutral-primary:hsl(0, 0%, 54%);
673
+ --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
674
+ --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
675
+ --t-icon-color-status-info-primary:hsl(204, 68%, 55%);
723
676
  --t-icon-color-status-success-primary:hsl(96, 57%, 33%);
724
677
  --t-icon-color-status-success-secondary:hsl(97, 57%, 40%);
725
678
  --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%);
679
+ --t-icon-color-status-error-primary:hsl(8, 61%, 61%);
680
+ --t-fill-color-neutral-100:hsl(0, 0%, 10%);
681
+ --t-fill-color-neutral-000:hsl(0, 0%, 98%);
682
+ --t-fill-color-neutral-010:hsl(0, 0%, 88%);
683
+ --t-fill-color-neutral-020:hsl(0, 0%, 68%);
684
+ --t-fill-color-neutral-025:hsl(0, 0%, 58%);
685
+ --t-fill-color-neutral-030:hsl(0, 0%, 50%);
686
+ --t-fill-color-neutral-040:hsl(0, 0%, 32%);
687
+ --t-fill-color-neutral-050:hsl(0, 0%, 24%);
688
+ --t-fill-color-neutral-060:hsl(0, 0%, 19%);
689
+ --t-fill-color-neutral-070:hsl(0, 0%, 17%);
690
+ --t-fill-color-neutral-080:hsl(0, 0%, 15%);
691
+ --t-fill-color-neutral-090:hsl(0, 0%, 12%);
692
+ --t-fill-color-interaction-default:hsl(204, 100%, 35%);
693
+ --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
694
+ --t-fill-color-interaction-active:hsl(204, 80%, 45%);
695
+ --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
696
+ --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
697
+ --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
698
+ --t-fill-color-control-primary:hsl(204, 100%, 35%);
746
699
  --t-fill-color-control-secondary:hsl(97, 57%, 40%);
747
700
  --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%);
701
+ --t-fill-color-control-disabled:hsl(0, 0%, 20%);
702
+ --t-fill-color-status-neutral-solid:hsl(0, 0%, 24%);
703
+ --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
704
+ --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
705
+ --t-fill-color-status-info-solid:hsl(204, 100%, 35%);
706
+ --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
707
+ --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
755
708
  --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%);
709
+ --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
710
+ --t-fill-color-status-success-dim:hsl(120, 12%, 14%);
758
711
  --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%);
712
+ --t-fill-color-status-warning-ghost:hsl(41, 18%, 17%);
713
+ --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
761
714
  --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);
715
+ --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
716
+ --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
717
+ --t-fill-color-tooltip-primary:hsla(0, 0%, 24%, 0.9);
765
718
  --t-fill-color-product-accounts-010:hsl(212, 54%, 93%);
766
719
  --t-fill-color-product-accounts-020:hsl(209, 53%, 90%);
767
720
  --t-fill-color-product-accounts-030:hsl(210, 56%, 70%);
@@ -845,209 +798,160 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
845
798
  --t-fill-color-product-staff-base:hsl(328, 100%, 45%);
846
799
  --t-fill-color-product-staff-dark:hsl(328, 100%, 38%);
847
800
  --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%);
801
+ --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
802
+ --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
803
+ --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
804
+ --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(9, 29%, 13%), hsl(276, 8%, 12%), hsl(203, 37%, 11%));
805
+ --t-fill-color-product-checkins-gradient-page:linear-gradient(111.72deg, hsl(285, 17%, 18%) 25%, hsl(263, 15%, 17%) 60%, hsl(204, 70%, 12%));
806
+ --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 11%, 14%), hsl(266, 10%, 14%) 42%, hsl(203, 37%, 11%));
807
+ --t-fill-color-product-giving-gradient-page:linear-gradient(111.72deg, hsl(43, 80%, 16%), hsl(267, 15%, 14%) 58.5%, hsl(204, 70%, 12%));
808
+ --t-fill-color-product-giving-gradient-tint:linear-gradient(111.72deg, hsl(44, 49%, 13%), hsl(264, 8%, 12%) 58.5%, hsl(203, 37%, 11%));
809
+ --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(23, 46%, 18%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
810
+ --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(23, 29%, 14%), hsl(276, 7%, 14%), hsl(203, 37%, 11%));
811
+ --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
812
+ --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
813
+ --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
814
+ --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
815
+ --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(225, 11%, 22%), hsl(227, 20%, 18%) 45%, hsl(204, 70%, 12%));
816
+ --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(220, 7%, 16%), hsl(227, 12%, 14%) 45%, hsl(203, 37%, 11%));
817
+ --t-fill-color-product-registrations-gradient-page:linear-gradient(111.72deg, hsl(174, 34%, 18%), hsl(187, 39%, 14%) 39.5%, hsl(204, 70%, 12%));
818
+ --t-fill-color-product-registrations-gradient-tint:linear-gradient(111.72deg, hsl(173, 22%, 15%), hsl(185, 21%, 12%) 39.5%, hsl(203, 37%, 11%));
819
+ --t-fill-color-product-services-gradient-page:linear-gradient(111.72deg, hsl(87, 26%, 18%), hsl(88, 25%, 15%) 39.5%, hsl(204, 70%, 12%));
820
+ --t-fill-color-product-services-gradient-tint:linear-gradient(111.72deg, hsl(85, 17%, 14%), hsl(87, 14%, 13%) 39.5%, hsl(203, 37%, 11%));
821
+ --t-fill-color-tag-gray-010:hsl(0, 0%, 19%);
822
+ --t-fill-color-tag-gray-020:hsl(0, 0%, 17%);
823
+ --t-fill-color-tag-gray-030:hsl(0, 0%, 68%);
824
+ --t-fill-color-tag-gray-040:hsl(0, 0%, 58%);
825
+ --t-fill-color-tag-blue-010:hsl(229, 22%, 24%);
826
+ --t-fill-color-tag-blue-020:hsl(233, 27%, 23%);
887
827
  --t-fill-color-tag-blue-030:hsl(220, 98%, 81%);
888
828
  --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%);
829
+ --t-fill-color-tag-aqua-010:hsl(217, 25%, 24%);
830
+ --t-fill-color-tag-aqua-020:hsl(222, 27%, 22%);
891
831
  --t-fill-color-tag-aqua-030:hsl(201, 76%, 71%);
892
832
  --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%);
833
+ --t-fill-color-tag-teal-010:hsl(150, 20%, 24%);
834
+ --t-fill-color-tag-teal-020:hsl(147, 16%, 22%);
895
835
  --t-fill-color-tag-teal-030:hsl(169, 62%, 64%);
896
836
  --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%);
837
+ --t-fill-color-tag-green-010:hsl(108, 21%, 22%);
838
+ --t-fill-color-tag-green-020:hsl(109, 22%, 20%);
899
839
  --t-fill-color-tag-green-030:hsl(112, 57%, 65%);
900
840
  --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%);
841
+ --t-fill-color-tag-yellow-010:hsl(38, 27%, 23%);
842
+ --t-fill-color-tag-yellow-020:hsl(37, 27%, 21%);
903
843
  --t-fill-color-tag-yellow-030:hsl(44, 92%, 69%);
904
844
  --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%);
845
+ --t-fill-color-tag-orange-010:hsl(12, 25%, 23%);
846
+ --t-fill-color-tag-orange-020:hsl(10, 29%, 21%);
907
847
  --t-fill-color-tag-orange-030:hsl(21, 86%, 72%);
908
848
  --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%);
849
+ --t-fill-color-tag-pink-010:hsl(331, 22%, 24%);
850
+ --t-fill-color-tag-pink-020:hsl(338, 25%, 21%);
911
851
  --t-fill-color-tag-pink-030:hsl(324, 78%, 77%);
912
852
  --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%);
853
+ --t-fill-color-tag-purple-010:hsl(260, 25%, 24%);
854
+ --t-fill-color-tag-purple-020:hsl(254, 27%, 22%);
915
855
  --t-fill-color-tag-purple-030:hsl(273, 62%, 76%);
916
856
  --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%);
857
+ --t-fill-color-tag-magenta-010:hsl(276, 18%, 22%);
858
+ --t-fill-color-tag-magenta-020:hsl(277, 18%, 20%);
919
859
  --t-fill-color-tag-magenta-030:hsl(291, 48%, 70%);
920
860
  --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%);
861
+ --t-fill-color-tag-indigo-010:hsl(233, 30%, 27%);
862
+ --t-fill-color-tag-indigo-020:hsl(233, 30%, 23%);
923
863
  --t-fill-color-tag-indigo-030:hsl(233, 77%, 81%);
924
864
  --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);
865
+ --t-fill-color-button-neutral-solid-default:hsl(0, 0%, 19%);
866
+ --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
867
+ --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
868
+ --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
869
+ --t-fill-color-button-neutral-outline-dim-default:hsl(0, 0%, 15%);
870
+ --t-fill-color-button-neutral-outline-dim-hover:hsl(0, 0%, 17%);
871
+ --t-fill-color-button-neutral-outline-dim-active:hsl(0, 0%, 19%);
872
+ --t-fill-color-button-neutral-outline-dim-disabled:hsl(0, 0%, 12%);
873
+ --t-fill-color-button-neutral-ghost-default:hsla(0, 0%, 0%, 0);
874
+ --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
875
+ --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
876
+ --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
937
877
  --t-fill-color-button-neutral-responsive-header-default:hsla(0, 0%, 0%, 0.1);
938
878
  --t-fill-color-button-neutral-responsive-header-hover:hsla(0, 0%, 0%, 0.2);
939
879
  --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%);
880
+ --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
881
+ --t-fill-color-button-interaction-solid-default:hsl(204, 100%, 35%);
882
+ --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
883
+ --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
884
+ --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
885
+ --t-fill-color-button-interaction-outline-dim-default:hsl(204, 32%, 15%);
886
+ --t-fill-color-button-interaction-outline-dim-hover:hsl(204, 39%, 17%);
887
+ --t-fill-color-button-interaction-outline-dim-active:hsl(205, 45%, 18%);
888
+ --t-fill-color-button-interaction-outline-dim-disabled:hsl(0, 0%, 12%);
889
+ --t-fill-color-button-interaction-ghost-default:hsla(0, 0%, 0%, 0);
890
+ --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
891
+ --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
892
+ --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
893
+ --t-fill-color-button-delete-solid-default:hsl(8, 60%, 40%);
954
894
  --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-surface-color-card:hsl(0, 0%, 100%);
988
- --t-surface-color-canvas:hsl(0, 0%, 100%);
989
- --t-border-color-default-base:hsl(0, 0%, 88%);
990
- --t-border-color-default-dark:hsl(0, 0%, 81%);
991
- --t-border-color-default-darker:hsl(0, 0%, 68%);
992
- --t-border-color-default-darkest:hsl(0, 0%, 58%);
993
- --t-border-color-default-disabled:hsl(0, 0%, 88%);
994
- --t-border-color-default-dim:hsl(0, 0%, 95%);
995
- --t-border-color-default-white:hsl(0, 0%, 100%);
996
- --t-border-color-status-neutral:hsl(0, 0%, 58%);
997
- --t-border-color-status-info:hsl(204, 100%, 40%);
998
- --t-border-color-status-success:hsl(97, 57%, 40%);
999
- --t-border-color-status-warning:hsl(42, 84%, 63%);
1000
- --t-border-color-status-error:hsl(8, 60%, 47%);
1001
- --t-border-color-button-neutral:hsl(0, 0%, 88%);
1002
- --t-border-color-button-info:hsl(204, 100%, 40%);
1003
- --t-border-color-button-create:hsl(96, 57%, 33%);
1004
- --t-border-color-button-delete:hsl(8, 60%, 47%);
1005
- --t-border-color-control-neutral:hsl(0, 0%, 68%);
1006
- --t-border-color-control-info:hsl(204, 100%, 40%);
1007
- --t-border-color-control-success:hsl(97, 57%, 40%);
1008
- --t-border-color-control-warning:hsl(42, 84%, 63%);
1009
- --t-border-color-control-error:hsl(8, 60%, 47%);
1010
- --t-border-color-control-disabled:hsl(0, 0%, 88%);
1011
- --t-form-background-color:var(--t-fill-color-neutral-100);
1012
- --t-form-background-color-disabled:var(--t-fill-color-neutral-070);
1013
- --t-form-background-color-error:var(--t-fill-color-neutral-100);
1014
- --t-form-background-color-readonly:var(--t-fill-color-neutral-070);
1015
- --t-form-border-color:var(--t-border-color-default-base);
1016
- --t-form-border-color-disabled:var(--t-border-color-default-base);
1017
- --t-form-border-color-error:var(--t-border-color-status-error);
1018
- --t-form-border-color-focus:var(--t-fill-color-interaction-default);
1019
- --t-form-border-color-hover:var(--t-border-color-default-dark);
1020
- --t-form-border-color-readonly:hsla(0, 0%, 100%, 0);
1021
- --t-form-border-radius:var(--t-border-radius-md);
1022
- --t-form-border-width:var(--t-border-width-default);
1023
- --t-form-font-color:var(--t-text-color-default-primary);
1024
- --t-form-font-color-disabled:var(--t-text-color-default-disabled);
1025
- --t-form-font-color-error:var(--t-text-color-status-error);
1026
- --t-form-font-color-readonly:var(--t-text-color-default-primary);
1027
- --t-form-picker-icon-color:var(--t-icon-color-default-primary);
1028
- --t-form-placeholder-color:var(--t-text-color-default-placeholder);
1029
- --t-border-size-default:var(--t-border-width-default);
1030
- --t-border-size-thick:var(--t-border-width-thick);
1031
- --t-font-weight-semi-bold:var(--t-font-weight-semibold);
1032
- --t-icon-color-status-neutral-dark:hsl(0, 0%, 24%);
1033
- --t-icon-color-status-info-secondary:hsl(204, 100%, 40%);
1034
- --t-fill-color-alert-info:hsl(204, 94%, 49%);
1035
- --t-fill-color-alert-success:hsl(122, 60%, 41%);
1036
- --t-fill-color-alert-warning:hsl(43, 96%, 58%);
1037
- --t-fill-color-alert-error:hsl(4, 77%, 59%);
1038
- --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 98%);
1039
- --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 98%);
1040
- --t-fill-color-button-create-solid-default:hsl(96, 57%, 33%);
1041
- --t-fill-color-button-create-solid-hover:hsl(97, 57%, 28%);
1042
- --t-fill-color-button-create-solid-active:hsl(97, 57%, 23%);
1043
- --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 81%);
1044
- --t-fill-color-button-create-ghost-default:hsla(0, 0%, 100%, 0);
1045
- --t-fill-color-button-create-ghost-hover:hsl(96, 60%, 95%);
1046
- --t-fill-color-button-create-ghost-active:hsl(97, 57%, 90%);
1047
- --t-fill-color-button-create-ghost-disabled:hsla(0, 0%, 100%, 0);
895
+ --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
896
+ --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
897
+ --t-fill-color-button-delete-outline-dim-default:hsl(8, 20%, 16%);
898
+ --t-fill-color-button-delete-outline-dim-hover:hsl(9, 24%, 17%);
899
+ --t-fill-color-button-delete-outline-dim-active:hsl(9, 29%, 19%);
900
+ --t-fill-color-button-delete-outline-dim-disabled:hsl(0, 0%, 12%);
901
+ --t-fill-color-button-delete-ghost-default:hsla(0, 0%, 0%, 0);
902
+ --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
903
+ --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
904
+ --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
905
+ --t-fill-color-button-pill-default:hsl(0, 0%, 18%);
906
+ --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
907
+ --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
908
+ --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
909
+ --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
910
+ --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
911
+ --t-fill-color-transparency-light-030:hsla(0, 0%, 0%, 0.3);
912
+ --t-fill-color-transparency-light-040:hsla(0, 0%, 0%, 0.4);
913
+ --t-fill-color-transparency-light-050:hsla(0, 0%, 0%, 0.5);
914
+ --t-fill-color-transparency-light-060:hsla(0, 0%, 0%, 0.6);
915
+ --t-fill-color-transparency-light-070:hsla(0, 0%, 0%, 0.7);
916
+ --t-fill-color-transparency-light-080:hsla(0, 0%, 0%, 0.8);
917
+ --t-fill-color-transparency-light-090:hsla(0, 0%, 0%, 0.9);
918
+ --t-fill-color-transparency-dark-010:hsla(0, 0%, 100%, 0.1);
919
+ --t-fill-color-transparency-dark-020:hsla(0, 0%, 100%, 0.2);
920
+ --t-fill-color-transparency-dark-030:hsla(0, 0%, 100%, 0.3);
921
+ --t-fill-color-transparency-dark-040:hsla(0, 0%, 100%, 0.4);
922
+ --t-fill-color-transparency-dark-050:hsla(0, 0%, 100%, 0.5);
923
+ --t-fill-color-transparency-dark-060:hsla(0, 0%, 100%, 0.6);
924
+ --t-fill-color-transparency-dark-070:hsla(0, 0%, 100%, 0.7);
925
+ --t-fill-color-transparency-dark-080:hsla(0, 0%, 100%, 0.8);
926
+ --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
927
+ --t-surface-color-card:hsl(0, 0%, 12%);
928
+ --t-surface-color-canvas:hsl(0, 0%, 10%);
929
+ --t-border-color-default-base:hsl(0, 0%, 21%);
930
+ --t-border-color-default-dark:hsl(0, 0%, 25%);
931
+ --t-border-color-default-darker:hsl(0, 0%, 33%);
932
+ --t-border-color-default-darkest:hsl(0, 0%, 38%);
933
+ --t-border-color-default-disabled:hsl(0, 0%, 21%);
934
+ --t-border-color-default-dim:hsl(0, 0%, 16%);
935
+ --t-border-color-default-white:hsl(0, 0%, 12%);
936
+ --t-border-color-status-neutral:hsl(0, 0%, 38%);
937
+ --t-border-color-status-info:hsl(204, 100%, 35%);
938
+ --t-border-color-status-success:hsl(97, 57%, 40%);
939
+ --t-border-color-status-warning:hsl(42, 84%, 63%);
940
+ --t-border-color-status-error:hsl(8, 60%, 47%);
941
+ --t-border-color-button-neutral:hsl(0, 0%, 19%);
942
+ --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
943
+ --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
944
+ --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
945
+ --t-border-color-control-neutral:hsl(0, 0%, 33%);
946
+ --t-border-color-control-info:hsl(204, 100%, 35%);
947
+ --t-border-color-control-success:hsl(97, 57%, 40%);
948
+ --t-border-color-control-warning:hsl(42, 84%, 63%);
949
+ --t-border-color-control-error:hsl(8, 60%, 47%);
950
+ --t-border-color-control-disabled:hsl(0, 0%, 21%);
1048
951
  }
1049
952
 
1050
- :root[data-color-mode="dark"]{
953
+ @media (prefers-color-scheme: dark){
954
+ :root[data-color-mode="system"]{
1051
955
  color-scheme:dark;
1052
956
  --t-text-color-default-headline:hsl(0, 0%, 94%);
1053
957
  --t-text-color-default-primary:hsl(0, 0%, 80%);
@@ -1371,37 +1275,84 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1371
1275
  --t-border-color-control-error:hsl(8, 60%, 47%);
1372
1276
  --t-border-color-control-disabled:hsl(0, 0%, 21%);
1373
1277
  }
1278
+ }
1374
1279
 
1375
- @media (prefers-color-scheme: dark){
1376
- :root[data-color-mode="system"]{
1377
- color-scheme:dark;
1378
- --t-text-color-default-headline:hsl(0, 0%, 94%);
1379
- --t-text-color-default-primary:hsl(0, 0%, 80%);
1380
- --t-text-color-default-secondary:hsl(0, 0%, 54%);
1381
- --t-text-color-default-disabled:hsl(0, 0%, 25%);
1382
- --t-text-color-default-placeholder:hsl(0, 0%, 38%);
1280
+ :root{
1281
+ --t-border-radius-sm:2px;
1282
+ --t-border-radius-md:4px;
1283
+ --t-border-radius-lg:8px;
1284
+ --t-border-radius-xl:16px;
1285
+ --t-border-radius-round:56px;
1286
+ --t-border-radius-default:4px;
1287
+ --t-border-width-default:1px;
1288
+ --t-border-width-thick:2px;
1289
+ --t-spacing-1:8px;
1290
+ --t-spacing-2:16px;
1291
+ --t-spacing-3:24px;
1292
+ --t-spacing-4:32px;
1293
+ --t-spacing-5:40px;
1294
+ --t-spacing-6:48px;
1295
+ --t-spacing-7:56px;
1296
+ --t-spacing-fourth:2px;
1297
+ --t-spacing-half:4px;
1298
+ --t-element-size-3xl:48px;
1299
+ --t-element-size-2xl:32px;
1300
+ --t-element-size-xl:24px;
1301
+ --t-element-size-lg:18px;
1302
+ --t-element-size-md:16px;
1303
+ --t-element-size-sm:14px;
1304
+ --t-element-size-xs:12px;
1305
+ --t-font-size-4xl:32px;
1306
+ --t-font-size-3xl:28px;
1307
+ --t-font-size-2xl:24px;
1308
+ --t-font-size-xl:20px;
1309
+ --t-font-size-lg:18px;
1310
+ --t-font-size-md:16px;
1311
+ --t-font-size-sm:14px;
1312
+ --t-font-size-xs:12px;
1313
+ --t-font-size-2xs:10px;
1314
+ --t-font-weight-normal:400;
1315
+ --t-font-weight-medium:500;
1316
+ --t-font-weight-semibold:600;
1317
+ --t-font-weight-bold:700;
1318
+ --t-container-size-xl:48px;
1319
+ --t-container-size-lg:40px;
1320
+ --t-container-size-md:32px;
1321
+ --t-container-size-sm:24px;
1322
+ --t-container-size-xs:20px;
1323
+ --t-avatar-size-20:20px;
1324
+ --t-avatar-size-24:24px;
1325
+ --t-avatar-size-36:36px;
1326
+ --t-avatar-size-48:48px;
1327
+ --t-avatar-size-72:72px;
1328
+ --t-avatar-size-112:112px;
1329
+ --t-text-color-default-headline:hsl(0, 0%, 12%);
1330
+ --t-text-color-default-primary:hsl(0, 0%, 24%);
1331
+ --t-text-color-default-secondary:hsl(0, 0%, 42%);
1332
+ --t-text-color-default-disabled:hsl(0, 0%, 81%);
1333
+ --t-text-color-default-placeholder:hsl(0, 0%, 58%);
1383
1334
  --t-text-color-default-inverted:hsl(0, 0%, 100%);
1384
- --t-text-color-interaction-primary:hsl(204, 68%, 55%);
1385
- --t-text-color-interaction-hover:hsl(204, 68%, 50%);
1386
- --t-text-color-interaction-active:hsl(204, 68%, 45%);
1387
- --t-text-color-interaction-visited:hsl(204, 68%, 50%);
1388
- --t-text-color-status-neutral:hsl(0, 0%, 80%);
1389
- --t-text-color-status-info:hsl(204, 68%, 55%);
1390
- --t-text-color-status-success:hsl(97, 57%, 41%);
1391
- --t-text-color-status-warning:hsl(42, 84%, 55%);
1392
- --t-text-color-status-error:hsl(8, 61%, 61%);
1393
- --t-text-color-tag-subtle-gray:hsl(0, 0%, 80%);
1394
- --t-text-color-tag-subtle-blue:hsl(223, 46%, 84%);
1395
- --t-text-color-tag-subtle-indigo:hsl(233, 78%, 84%);
1396
- --t-text-color-tag-subtle-aqua:hsl(208, 77%, 85%);
1397
- --t-text-color-tag-subtle-teal:hsl(180, 95%, 74%);
1398
- --t-text-color-tag-subtle-green:hsl(99, 93%, 84%);
1399
- --t-text-color-tag-subtle-yellow:hsl(29, 100%, 85%);
1400
- --t-text-color-tag-subtle-orange:hsl(18, 100%, 85%);
1401
- --t-text-color-tag-subtle-pink:hsl(328, 89%, 89%);
1402
- --t-text-color-tag-subtle-purple:hsl(268, 70%, 88%);
1403
- --t-text-color-tag-subtle-magenta:hsl(285, 70%, 88%);
1404
- --t-text-color-tag-bold-gray:hsl(0, 0%, 17%);
1335
+ --t-text-color-interaction-primary:hsl(204, 100%, 40%);
1336
+ --t-text-color-interaction-hover:hsl(204, 100%, 35%);
1337
+ --t-text-color-interaction-active:hsl(204, 100%, 30%);
1338
+ --t-text-color-interaction-visited:hsl(204, 100%, 30%);
1339
+ --t-text-color-status-neutral:hsl(0, 0%, 24%);
1340
+ --t-text-color-status-info:hsl(204, 100%, 35%);
1341
+ --t-text-color-status-success:hsl(97, 57%, 28%);
1342
+ --t-text-color-status-warning:hsl(42, 100%, 29%);
1343
+ --t-text-color-status-error:hsl(8, 60%, 45%);
1344
+ --t-text-color-tag-subtle-gray:hsl(0, 0%, 24%);
1345
+ --t-text-color-tag-subtle-blue:hsl(224, 47%, 31%);
1346
+ --t-text-color-tag-subtle-indigo:hsl(241, 59%, 28%);
1347
+ --t-text-color-tag-subtle-aqua:hsl(209, 77%, 22%);
1348
+ --t-text-color-tag-subtle-teal:hsl(180, 95%, 15%);
1349
+ --t-text-color-tag-subtle-green:hsl(100, 93%, 17%);
1350
+ --t-text-color-tag-subtle-yellow:hsl(29, 100%, 23%);
1351
+ --t-text-color-tag-subtle-orange:hsl(18, 100%, 18%);
1352
+ --t-text-color-tag-subtle-pink:hsl(327, 88%, 20%);
1353
+ --t-text-color-tag-subtle-purple:hsl(268, 71%, 27%);
1354
+ --t-text-color-tag-subtle-magenta:hsl(285, 71%, 20%);
1355
+ --t-text-color-tag-bold-gray:hsl(0, 0%, 24%);
1405
1356
  --t-text-color-tag-bold-indigo:hsl(241, 59%, 28%);
1406
1357
  --t-text-color-tag-bold-blue:hsl(224, 47%, 31%);
1407
1358
  --t-text-color-tag-bold-aqua:hsl(209, 77%, 22%);
@@ -1412,57 +1363,57 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1412
1363
  --t-text-color-tag-bold-pink:hsl(327, 88%, 20%);
1413
1364
  --t-text-color-tag-bold-purple:hsl(268, 71%, 27%);
1414
1365
  --t-text-color-tag-bold-magenta:hsl(285, 71%, 20%);
1415
- --t-icon-color-default-primary:hsl(0, 0%, 80%);
1416
- --t-icon-color-default-secondary:hsl(0, 0%, 54%);
1417
- --t-icon-color-default-dim:hsl(0, 0%, 38%);
1418
- --t-icon-color-default-disabled:hsl(0, 0%, 25%);
1366
+ --t-icon-color-default-primary:hsl(0, 0%, 24%);
1367
+ --t-icon-color-default-secondary:hsl(0, 0%, 42%);
1368
+ --t-icon-color-default-dim:hsl(0, 0%, 58%);
1369
+ --t-icon-color-default-disabled:hsl(0, 0%, 81%);
1419
1370
  --t-icon-color-default-inverted:hsl(0, 0%, 100%);
1420
- --t-icon-color-status-neutral-primary:hsl(0, 0%, 54%);
1421
- --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
1422
- --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
1423
- --t-icon-color-status-info-primary:hsl(204, 68%, 55%);
1371
+ --t-icon-color-status-neutral-primary:hsl(0, 0%, 42%);
1372
+ --t-icon-color-status-neutral-secondary:hsl(0, 0%, 58%);
1373
+ --t-icon-color-status-neutral-bold:hsl(0, 0%, 24%);
1374
+ --t-icon-color-status-info-primary:hsl(204, 100%, 40%);
1424
1375
  --t-icon-color-status-success-primary:hsl(96, 57%, 33%);
1425
1376
  --t-icon-color-status-success-secondary:hsl(97, 57%, 40%);
1426
1377
  --t-icon-color-status-warning-primary:hsl(42, 84%, 49%);
1427
- --t-icon-color-status-error-primary:hsl(8, 61%, 61%);
1428
- --t-fill-color-neutral-100:hsl(0, 0%, 10%);
1429
- --t-fill-color-neutral-000:hsl(0, 0%, 98%);
1430
- --t-fill-color-neutral-010:hsl(0, 0%, 88%);
1431
- --t-fill-color-neutral-020:hsl(0, 0%, 68%);
1432
- --t-fill-color-neutral-025:hsl(0, 0%, 58%);
1433
- --t-fill-color-neutral-030:hsl(0, 0%, 50%);
1434
- --t-fill-color-neutral-040:hsl(0, 0%, 32%);
1435
- --t-fill-color-neutral-050:hsl(0, 0%, 24%);
1436
- --t-fill-color-neutral-060:hsl(0, 0%, 19%);
1437
- --t-fill-color-neutral-070:hsl(0, 0%, 17%);
1438
- --t-fill-color-neutral-080:hsl(0, 0%, 15%);
1439
- --t-fill-color-neutral-090:hsl(0, 0%, 12%);
1440
- --t-fill-color-interaction-default:hsl(204, 100%, 35%);
1441
- --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
1442
- --t-fill-color-interaction-active:hsl(204, 80%, 45%);
1443
- --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
1444
- --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
1445
- --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
1446
- --t-fill-color-control-primary:hsl(204, 100%, 35%);
1378
+ --t-icon-color-status-error-primary:hsl(8, 60%, 47%);
1379
+ --t-fill-color-neutral-100:hsl(0, 0%, 100%);
1380
+ --t-fill-color-neutral-000:hsl(0, 0%, 12%);
1381
+ --t-fill-color-neutral-010:hsl(0, 0%, 24%);
1382
+ --t-fill-color-neutral-020:hsl(0, 0%, 42%);
1383
+ --t-fill-color-neutral-025:hsl(0, 0%, 50%);
1384
+ --t-fill-color-neutral-030:hsl(0, 0%, 58%);
1385
+ --t-fill-color-neutral-040:hsl(0, 0%, 81%);
1386
+ --t-fill-color-neutral-050:hsl(0, 0%, 88%);
1387
+ --t-fill-color-neutral-060:hsl(0, 0%, 93%);
1388
+ --t-fill-color-neutral-070:hsl(0, 0%, 95%);
1389
+ --t-fill-color-neutral-080:hsl(0, 0%, 97%);
1390
+ --t-fill-color-neutral-090:hsl(0, 0%, 98%);
1391
+ --t-fill-color-interaction-default:hsl(204, 100%, 40%);
1392
+ --t-fill-color-interaction-hover:hsl(204, 100%, 35%);
1393
+ --t-fill-color-interaction-active:hsl(204, 100%, 30%);
1394
+ --t-fill-color-interaction-disabled:hsl(0, 0%, 81%);
1395
+ --t-fill-color-control-neutral-off:hsl(0, 0%, 58%);
1396
+ --t-fill-color-control-neutral-on:hsl(0, 0%, 24%);
1397
+ --t-fill-color-control-primary:hsl(204, 100%, 40%);
1447
1398
  --t-fill-color-control-secondary:hsl(97, 57%, 40%);
1448
1399
  --t-fill-color-control-error:hsl(8, 60%, 47%);
1449
- --t-fill-color-control-disabled:hsl(0, 0%, 20%);
1450
- --t-fill-color-status-neutral-solid:hsl(0, 0%, 24%);
1451
- --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
1452
- --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
1453
- --t-fill-color-status-info-solid:hsl(204, 100%, 35%);
1454
- --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
1455
- --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
1400
+ --t-fill-color-control-disabled:hsl(0, 0%, 81%);
1401
+ --t-fill-color-status-neutral-solid:hsl(0, 0%, 42%);
1402
+ --t-fill-color-status-neutral-ghost:hsl(0, 0%, 93%);
1403
+ --t-fill-color-status-neutral-dim:hsl(0, 0%, 97%);
1404
+ --t-fill-color-status-info-solid:hsl(204, 100%, 40%);
1405
+ --t-fill-color-status-info-ghost:hsl(203, 94%, 94%);
1406
+ --t-fill-color-status-info-dim:hsl(204, 100%, 97%);
1456
1407
  --t-fill-color-status-success-solid:hsl(96, 57%, 33%);
1457
- --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
1458
- --t-fill-color-status-success-dim:hsl(120, 12%, 14%);
1408
+ --t-fill-color-status-success-ghost:hsl(97, 57%, 90%);
1409
+ --t-fill-color-status-success-dim:hsl(96, 60%, 95%);
1459
1410
  --t-fill-color-status-warning-solid:hsl(42, 84%, 63%);
1460
- --t-fill-color-status-warning-ghost:hsl(41, 18%, 17%);
1461
- --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
1411
+ --t-fill-color-status-warning-ghost:hsl(42, 87%, 94%);
1412
+ --t-fill-color-status-warning-dim:hsl(42, 87%, 97%);
1462
1413
  --t-fill-color-status-error-solid:hsl(8, 60%, 47%);
1463
- --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
1464
- --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
1465
- --t-fill-color-tooltip-primary:hsla(0, 0%, 24%, 0.9);
1414
+ --t-fill-color-status-error-ghost:hsl(9, 59%, 93%);
1415
+ --t-fill-color-status-error-dim:hsl(7, 60%, 97%);
1416
+ --t-fill-color-tooltip-primary:hsla(0, 0%, 12%, 0.9);
1466
1417
  --t-fill-color-product-accounts-010:hsl(212, 54%, 93%);
1467
1418
  --t-fill-color-product-accounts-020:hsl(209, 53%, 90%);
1468
1419
  --t-fill-color-product-accounts-030:hsl(210, 56%, 70%);
@@ -1546,157 +1497,206 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1546
1497
  --t-fill-color-product-staff-base:hsl(328, 100%, 45%);
1547
1498
  --t-fill-color-product-staff-dark:hsl(328, 100%, 38%);
1548
1499
  --t-fill-color-product-staff-darker:hsl(328, 100%, 33%);
1549
- --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
1550
- --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
1551
- --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
1552
- --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(9, 29%, 13%), hsl(276, 8%, 12%), hsl(203, 37%, 11%));
1553
- --t-fill-color-product-checkins-gradient-page:linear-gradient(111.72deg, hsl(285, 17%, 18%) 25%, hsl(263, 15%, 17%) 60%, hsl(204, 70%, 12%));
1554
- --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 11%, 14%), hsl(266, 10%, 14%) 42%, hsl(203, 37%, 11%));
1555
- --t-fill-color-product-giving-gradient-page:linear-gradient(111.72deg, hsl(43, 80%, 16%), hsl(267, 15%, 14%) 58.5%, hsl(204, 70%, 12%));
1556
- --t-fill-color-product-giving-gradient-tint:linear-gradient(111.72deg, hsl(44, 49%, 13%), hsl(264, 8%, 12%) 58.5%, hsl(203, 37%, 11%));
1557
- --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(23, 46%, 18%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
1558
- --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(23, 29%, 14%), hsl(276, 7%, 14%), hsl(203, 37%, 11%));
1559
- --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
1560
- --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
1561
- --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
1562
- --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
1563
- --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(225, 11%, 22%), hsl(227, 20%, 18%) 45%, hsl(204, 70%, 12%));
1564
- --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(220, 7%, 16%), hsl(227, 12%, 14%) 45%, hsl(203, 37%, 11%));
1565
- --t-fill-color-product-registrations-gradient-page:linear-gradient(111.72deg, hsl(174, 34%, 18%), hsl(187, 39%, 14%) 39.5%, hsl(204, 70%, 12%));
1566
- --t-fill-color-product-registrations-gradient-tint:linear-gradient(111.72deg, hsl(173, 22%, 15%), hsl(185, 21%, 12%) 39.5%, hsl(203, 37%, 11%));
1567
- --t-fill-color-product-services-gradient-page:linear-gradient(111.72deg, hsl(87, 26%, 18%), hsl(88, 25%, 15%) 39.5%, hsl(204, 70%, 12%));
1568
- --t-fill-color-product-services-gradient-tint:linear-gradient(111.72deg, hsl(85, 17%, 14%), hsl(87, 14%, 13%) 39.5%, hsl(203, 37%, 11%));
1569
- --t-fill-color-tag-gray-010:hsl(0, 0%, 19%);
1570
- --t-fill-color-tag-gray-020:hsl(0, 0%, 17%);
1571
- --t-fill-color-tag-gray-030:hsl(0, 0%, 68%);
1572
- --t-fill-color-tag-gray-040:hsl(0, 0%, 58%);
1573
- --t-fill-color-tag-blue-010:hsl(229, 22%, 24%);
1574
- --t-fill-color-tag-blue-020:hsl(233, 27%, 23%);
1500
+ --t-fill-color-product-accounts-gradient-brand:linear-gradient(135deg, hsl(203, 86%, 57%), hsl(220, 76%, 57%));
1501
+ --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
1502
+ --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
1503
+ --t-fill-color-product-api-gradient-brand:linear-gradient(180deg, hsl(221, 100%, 62%), hsl(217, 100%, 52%));
1504
+ --t-fill-color-product-calendar-gradient-brand:linear-gradient(135deg, hsl(10, 88%, 58%), hsl(8, 60%, 51%));
1505
+ --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(5, 80%, 80%), hsl(293, 13%, 74%), hsl(204, 67%, 73%));
1506
+ --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(8, 100%, 94%), hsl(285, 18%, 91%), hsl(204, 67%, 92%));
1507
+ --t-fill-color-product-cc-gradient-brand:linear-gradient(135deg, hsl(207, 90%, 61%), hsl(123, 38%, 57%));
1508
+ --t-fill-color-product-checkins-gradient-brand:linear-gradient(135deg, hsl(283, 38%, 59%), hsl(284, 23%, 48%));
1509
+ --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%));
1510
+ --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 22%, 93%), hsl(225, 35%, 93%) 42%, hsl(204, 67%, 92%));
1511
+ --t-fill-color-product-giving-gradient-brand:linear-gradient(90deg, hsl(46, 91%, 55%), hsl(41, 89%, 55%));
1512
+ --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%));
1513
+ --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%));
1514
+ --t-fill-color-product-groups-gradient-brand:linear-gradient(135deg, hsl(30, 100%, 59%), hsl(19, 97%, 60%));
1515
+ --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(17, 88%, 80%), hsl(293, 13%, 74%), hsl(204, 67%, 73%));
1516
+ --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(18, 87%, 94%), hsl(300, 12%, 92%), hsl(204, 67%, 92%));
1517
+ --t-fill-color-product-headcounts-gradient-brand:linear-gradient(135deg, hsl(283, 37%, 59%), hsl(285, 23%, 47%));
1518
+ --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
1519
+ --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
1520
+ --t-fill-color-product-musicstand-gradient-brand:linear-gradient(135deg, hsl(204, 64%, 51%), hsl(211, 55%, 51%));
1521
+ --t-fill-color-product-people-gradient-brand:linear-gradient(135deg, hsl(205, 86%, 57%), hsl(220, 76%, 57%));
1522
+ --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
1523
+ --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
1524
+ --t-fill-color-product-publishing-gradient-brand:linear-gradient(135deg, hsl(240, 4%, 49%), hsl(240, 6%, 39%));
1525
+ --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(217, 5%, 69%), hsl(214, 15%, 69%) 45%, hsl(204, 67%, 73%));
1526
+ --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(210, 4%, 91%), hsl(214, 15%, 91%) 45%, hsl(204, 67%, 92%));
1527
+ --t-fill-color-product-registrations-gradient-brand:linear-gradient(135deg, hsl(168, 46%, 48%), hsl(175, 35%, 43%));
1528
+ --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%));
1529
+ --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%));
1530
+ --t-fill-color-product-services-gradient-brand:linear-gradient(135deg, hsl(96, 49%, 47%), hsl(89, 52%, 39%));
1531
+ --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%));
1532
+ --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%));
1533
+ --t-fill-color-tag-gray-010:hsl(0, 0%, 93%);
1534
+ --t-fill-color-tag-gray-020:hsl(0, 0%, 88%);
1535
+ --t-fill-color-tag-gray-030:hsl(0, 0%, 88%);
1536
+ --t-fill-color-tag-gray-040:hsl(0, 0%, 81%);
1537
+ --t-fill-color-tag-blue-010:hsl(220, 100%, 95%);
1538
+ --t-fill-color-tag-blue-020:hsl(221, 100%, 88%);
1575
1539
  --t-fill-color-tag-blue-030:hsl(220, 98%, 81%);
1576
1540
  --t-fill-color-tag-blue-040:hsl(220, 98%, 74%);
1577
- --t-fill-color-tag-aqua-010:hsl(217, 25%, 24%);
1578
- --t-fill-color-tag-aqua-020:hsl(222, 27%, 22%);
1541
+ --t-fill-color-tag-aqua-010:hsl(200, 82%, 89%);
1542
+ --t-fill-color-tag-aqua-020:hsl(200, 82%, 82%);
1579
1543
  --t-fill-color-tag-aqua-030:hsl(201, 76%, 71%);
1580
1544
  --t-fill-color-tag-aqua-040:hsl(200, 75%, 64%);
1581
- --t-fill-color-tag-teal-010:hsl(150, 20%, 24%);
1582
- --t-fill-color-tag-teal-020:hsl(147, 16%, 22%);
1545
+ --t-fill-color-tag-teal-010:hsl(163, 53%, 83%);
1546
+ --t-fill-color-tag-teal-020:hsl(164, 52%, 76%);
1583
1547
  --t-fill-color-tag-teal-030:hsl(169, 62%, 64%);
1584
1548
  --t-fill-color-tag-teal-040:hsl(169, 62%, 56%);
1585
- --t-fill-color-tag-green-010:hsl(108, 21%, 22%);
1586
- --t-fill-color-tag-green-020:hsl(109, 22%, 20%);
1549
+ --t-fill-color-tag-green-010:hsl(98, 59%, 85%);
1550
+ --t-fill-color-tag-green-020:hsl(99, 59%, 78%);
1587
1551
  --t-fill-color-tag-green-030:hsl(112, 57%, 65%);
1588
1552
  --t-fill-color-tag-green-040:hsl(112, 57%, 57%);
1589
- --t-fill-color-tag-yellow-010:hsl(38, 27%, 23%);
1590
- --t-fill-color-tag-yellow-020:hsl(37, 27%, 21%);
1553
+ --t-fill-color-tag-yellow-010:hsl(45, 77%, 85%);
1554
+ --t-fill-color-tag-yellow-020:hsl(44, 78%, 77%);
1591
1555
  --t-fill-color-tag-yellow-030:hsl(44, 92%, 69%);
1592
1556
  --t-fill-color-tag-yellow-040:hsl(44, 93%, 61%);
1593
- --t-fill-color-tag-orange-010:hsl(12, 25%, 23%);
1594
- --t-fill-color-tag-orange-020:hsl(10, 29%, 21%);
1557
+ --t-fill-color-tag-orange-010:hsl(22, 89%, 89%);
1558
+ --t-fill-color-tag-orange-020:hsl(21, 89%, 82%);
1595
1559
  --t-fill-color-tag-orange-030:hsl(21, 86%, 72%);
1596
1560
  --t-fill-color-tag-orange-040:hsl(21, 86%, 64%);
1597
- --t-fill-color-tag-pink-010:hsl(331, 22%, 24%);
1598
- --t-fill-color-tag-pink-020:hsl(338, 25%, 21%);
1561
+ --t-fill-color-tag-pink-010:hsl(311, 66%, 92%);
1562
+ --t-fill-color-tag-pink-020:hsl(310, 64%, 85%);
1599
1563
  --t-fill-color-tag-pink-030:hsl(324, 78%, 77%);
1600
1564
  --t-fill-color-tag-pink-040:hsl(324, 76%, 70%);
1601
- --t-fill-color-tag-purple-010:hsl(260, 25%, 24%);
1602
- --t-fill-color-tag-purple-020:hsl(254, 27%, 22%);
1565
+ --t-fill-color-tag-purple-010:hsl(259, 74%, 93%);
1566
+ --t-fill-color-tag-purple-020:hsl(259, 74%, 85%);
1603
1567
  --t-fill-color-tag-purple-030:hsl(273, 62%, 76%);
1604
1568
  --t-fill-color-tag-purple-040:hsl(273, 62%, 70%);
1605
- --t-fill-color-tag-magenta-010:hsl(276, 18%, 22%);
1606
- --t-fill-color-tag-magenta-020:hsl(277, 18%, 20%);
1569
+ --t-fill-color-tag-magenta-010:hsl(294, 37%, 90%);
1570
+ --t-fill-color-tag-magenta-020:hsl(291, 40%, 83%);
1607
1571
  --t-fill-color-tag-magenta-030:hsl(291, 48%, 70%);
1608
1572
  --t-fill-color-tag-magenta-040:hsl(292, 48%, 63%);
1609
- --t-fill-color-tag-indigo-010:hsl(233, 30%, 27%);
1610
- --t-fill-color-tag-indigo-020:hsl(233, 30%, 23%);
1573
+ --t-fill-color-tag-indigo-010:hsl(234, 78%, 93%);
1574
+ --t-fill-color-tag-indigo-020:hsl(233, 79%, 87%);
1611
1575
  --t-fill-color-tag-indigo-030:hsl(233, 77%, 81%);
1612
1576
  --t-fill-color-tag-indigo-040:hsl(236, 79%, 74%);
1613
- --t-fill-color-button-neutral-solid-default:hsl(0, 0%, 19%);
1614
- --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
1615
- --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
1616
- --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
1617
- --t-fill-color-button-neutral-outline-dim-default:hsl(0, 0%, 15%);
1618
- --t-fill-color-button-neutral-outline-dim-hover:hsl(0, 0%, 17%);
1619
- --t-fill-color-button-neutral-outline-dim-active:hsl(0, 0%, 19%);
1620
- --t-fill-color-button-neutral-outline-dim-disabled:hsl(0, 0%, 12%);
1621
- --t-fill-color-button-neutral-ghost-default:hsla(0, 0%, 0%, 0);
1622
- --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
1623
- --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
1624
- --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
1577
+ --t-fill-color-button-neutral-solid-default:hsl(0, 0%, 93%);
1578
+ --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 88%);
1579
+ --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 81%);
1580
+ --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 95%);
1581
+ --t-fill-color-button-neutral-outline-dim-default:hsla(0, 0%, 100%, 0);
1582
+ --t-fill-color-button-neutral-outline-dim-hover:hsl(0, 0%, 95%);
1583
+ --t-fill-color-button-neutral-outline-dim-active:hsl(0, 0%, 93%);
1584
+ --t-fill-color-button-neutral-outline-dim-disabled:hsl(0, 0%, 98%);
1585
+ --t-fill-color-button-neutral-ghost-default:hsla(0, 0%, 100%, 0);
1586
+ --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 95%);
1587
+ --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 93%);
1588
+ --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 100%, 0);
1625
1589
  --t-fill-color-button-neutral-responsive-header-default:hsla(0, 0%, 0%, 0.1);
1626
1590
  --t-fill-color-button-neutral-responsive-header-hover:hsla(0, 0%, 0%, 0.2);
1627
1591
  --t-fill-color-button-neutral-responsive-header-active:hsla(0, 0%, 0%, 0.3);
1628
- --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
1629
- --t-fill-color-button-interaction-solid-default:hsl(204, 100%, 35%);
1630
- --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
1631
- --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
1632
- --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
1633
- --t-fill-color-button-interaction-outline-dim-default:hsl(204, 32%, 15%);
1634
- --t-fill-color-button-interaction-outline-dim-hover:hsl(204, 39%, 17%);
1635
- --t-fill-color-button-interaction-outline-dim-active:hsl(205, 45%, 18%);
1636
- --t-fill-color-button-interaction-outline-dim-disabled:hsl(0, 0%, 12%);
1637
- --t-fill-color-button-interaction-ghost-default:hsla(0, 0%, 0%, 0);
1638
- --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
1639
- --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
1640
- --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
1641
- --t-fill-color-button-delete-solid-default:hsl(8, 60%, 40%);
1592
+ --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 0%, 0.05);
1593
+ --t-fill-color-button-interaction-solid-default:hsl(204, 100%, 40%);
1594
+ --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 35%);
1595
+ --t-fill-color-button-interaction-solid-active:hsl(204, 100%, 30%);
1596
+ --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 95%);
1597
+ --t-fill-color-button-interaction-outline-dim-default:hsla(0, 0%, 100%, 0);
1598
+ --t-fill-color-button-interaction-outline-dim-hover:hsl(204, 100%, 97%);
1599
+ --t-fill-color-button-interaction-outline-dim-active:hsl(203, 94%, 94%);
1600
+ --t-fill-color-button-interaction-outline-dim-disabled:hsl(0, 0%, 98%);
1601
+ --t-fill-color-button-interaction-ghost-default:hsla(0, 0%, 100%, 0);
1602
+ --t-fill-color-button-interaction-ghost-hover:hsl(204, 100%, 97%);
1603
+ --t-fill-color-button-interaction-ghost-active:hsl(203, 94%, 94%);
1604
+ --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 100%, 0);
1605
+ --t-fill-color-button-delete-solid-default:hsl(8, 60%, 47%);
1642
1606
  --t-fill-color-button-delete-solid-hover:hsl(8, 60%, 45%);
1643
- --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
1644
- --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
1645
- --t-fill-color-button-delete-outline-dim-default:hsl(8, 20%, 16%);
1646
- --t-fill-color-button-delete-outline-dim-hover:hsl(9, 24%, 17%);
1647
- --t-fill-color-button-delete-outline-dim-active:hsl(9, 29%, 19%);
1648
- --t-fill-color-button-delete-outline-dim-disabled:hsl(0, 0%, 12%);
1649
- --t-fill-color-button-delete-ghost-default:hsla(0, 0%, 0%, 0);
1650
- --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
1651
- --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
1652
- --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
1653
- --t-fill-color-button-pill-default:hsl(0, 0%, 18%);
1654
- --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
1655
- --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
1656
- --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
1657
- --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
1658
- --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
1659
- --t-fill-color-transparency-light-030:hsla(0, 0%, 0%, 0.3);
1660
- --t-fill-color-transparency-light-040:hsla(0, 0%, 0%, 0.4);
1661
- --t-fill-color-transparency-light-050:hsla(0, 0%, 0%, 0.5);
1662
- --t-fill-color-transparency-light-060:hsla(0, 0%, 0%, 0.6);
1663
- --t-fill-color-transparency-light-070:hsla(0, 0%, 0%, 0.7);
1664
- --t-fill-color-transparency-light-080:hsla(0, 0%, 0%, 0.8);
1665
- --t-fill-color-transparency-light-090:hsla(0, 0%, 0%, 0.9);
1666
- --t-fill-color-transparency-dark-010:hsla(0, 0%, 100%, 0.1);
1667
- --t-fill-color-transparency-dark-020:hsla(0, 0%, 100%, 0.2);
1668
- --t-fill-color-transparency-dark-030:hsla(0, 0%, 100%, 0.3);
1669
- --t-fill-color-transparency-dark-040:hsla(0, 0%, 100%, 0.4);
1670
- --t-fill-color-transparency-dark-050:hsla(0, 0%, 100%, 0.5);
1671
- --t-fill-color-transparency-dark-060:hsla(0, 0%, 100%, 0.6);
1672
- --t-fill-color-transparency-dark-070:hsla(0, 0%, 100%, 0.7);
1673
- --t-fill-color-transparency-dark-080:hsla(0, 0%, 100%, 0.8);
1674
- --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
1675
- --t-surface-color-card:hsl(0, 0%, 12%);
1676
- --t-surface-color-canvas:hsl(0, 0%, 10%);
1677
- --t-border-color-default-base:hsl(0, 0%, 21%);
1678
- --t-border-color-default-dark:hsl(0, 0%, 25%);
1679
- --t-border-color-default-darker:hsl(0, 0%, 33%);
1680
- --t-border-color-default-darkest:hsl(0, 0%, 38%);
1681
- --t-border-color-default-disabled:hsl(0, 0%, 21%);
1682
- --t-border-color-default-dim:hsl(0, 0%, 16%);
1683
- --t-border-color-default-white:hsl(0, 0%, 12%);
1684
- --t-border-color-status-neutral:hsl(0, 0%, 38%);
1685
- --t-border-color-status-info:hsl(204, 100%, 35%);
1607
+ --t-fill-color-button-delete-solid-active:hsl(8, 60%, 40%);
1608
+ --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 95%);
1609
+ --t-fill-color-button-delete-outline-dim-default:hsla(0, 0%, 100%, 0);
1610
+ --t-fill-color-button-delete-outline-dim-hover:hsl(7, 60%, 97%);
1611
+ --t-fill-color-button-delete-outline-dim-active:hsl(9, 59%, 93%);
1612
+ --t-fill-color-button-delete-outline-dim-disabled:hsl(0, 0%, 98%);
1613
+ --t-fill-color-button-delete-ghost-default:hsla(0, 0%, 100%, 0);
1614
+ --t-fill-color-button-delete-ghost-hover:hsl(7, 60%, 97%);
1615
+ --t-fill-color-button-delete-ghost-active:hsl(9, 59%, 93%);
1616
+ --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 100%, 0);
1617
+ --t-fill-color-button-pill-default:hsl(0, 0%, 93%);
1618
+ --t-fill-color-button-pill-hover:hsl(0, 0%, 88%);
1619
+ --t-fill-color-button-pill-active:hsl(0, 0%, 88%);
1620
+ --t-fill-color-button-pill-disabled:hsl(0, 0%, 93%);
1621
+ --t-fill-color-transparency-light-010:hsla(0, 0%, 100%, 0.1);
1622
+ --t-fill-color-transparency-light-020:hsla(0, 0%, 100%, 0.2);
1623
+ --t-fill-color-transparency-light-030:hsla(0, 0%, 100%, 0.3);
1624
+ --t-fill-color-transparency-light-040:hsla(0, 0%, 100%, 0.4);
1625
+ --t-fill-color-transparency-light-050:hsla(0, 0%, 100%, 0.5);
1626
+ --t-fill-color-transparency-light-060:hsla(0, 0%, 100%, 0.6);
1627
+ --t-fill-color-transparency-light-070:hsla(0, 0%, 100%, 0.7);
1628
+ --t-fill-color-transparency-light-080:hsla(0, 0%, 100%, 0.8);
1629
+ --t-fill-color-transparency-light-090:hsla(0, 0%, 100%, 0.9);
1630
+ --t-fill-color-transparency-dark-010:hsla(0, 0%, 0%, 0.1);
1631
+ --t-fill-color-transparency-dark-020:hsla(0, 0%, 0%, 0.2);
1632
+ --t-fill-color-transparency-dark-030:hsla(0, 0%, 0%, 0.3);
1633
+ --t-fill-color-transparency-dark-040:hsla(0, 0%, 0%, 0.4);
1634
+ --t-fill-color-transparency-dark-050:hsla(0, 0%, 0%, 0.5);
1635
+ --t-fill-color-transparency-dark-060:hsla(0, 0%, 0%, 0.6);
1636
+ --t-fill-color-transparency-dark-070:hsla(0, 0%, 0%, 0.7);
1637
+ --t-fill-color-transparency-dark-080:hsla(0, 0%, 0%, 0.8);
1638
+ --t-fill-color-transparency-dark-090:hsla(0, 0%, 0%, 0.9);
1639
+ --t-surface-color-card:hsl(0, 0%, 100%);
1640
+ --t-surface-color-canvas:hsl(0, 0%, 100%);
1641
+ --t-border-color-default-base:hsl(0, 0%, 88%);
1642
+ --t-border-color-default-dark:hsl(0, 0%, 81%);
1643
+ --t-border-color-default-darker:hsl(0, 0%, 68%);
1644
+ --t-border-color-default-darkest:hsl(0, 0%, 58%);
1645
+ --t-border-color-default-disabled:hsl(0, 0%, 88%);
1646
+ --t-border-color-default-dim:hsl(0, 0%, 95%);
1647
+ --t-border-color-default-white:hsl(0, 0%, 100%);
1648
+ --t-border-color-status-neutral:hsl(0, 0%, 58%);
1649
+ --t-border-color-status-info:hsl(204, 100%, 40%);
1686
1650
  --t-border-color-status-success:hsl(97, 57%, 40%);
1687
1651
  --t-border-color-status-warning:hsl(42, 84%, 63%);
1688
1652
  --t-border-color-status-error:hsl(8, 60%, 47%);
1689
- --t-border-color-button-neutral:hsl(0, 0%, 19%);
1690
- --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
1691
- --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
1692
- --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
1693
- --t-border-color-control-neutral:hsl(0, 0%, 33%);
1694
- --t-border-color-control-info:hsl(204, 100%, 35%);
1653
+ --t-border-color-button-neutral:hsl(0, 0%, 88%);
1654
+ --t-border-color-button-info:hsl(204, 100%, 40%);
1655
+ --t-border-color-button-create:hsl(96, 57%, 33%);
1656
+ --t-border-color-button-delete:hsl(8, 60%, 47%);
1657
+ --t-border-color-control-neutral:hsl(0, 0%, 68%);
1658
+ --t-border-color-control-info:hsl(204, 100%, 40%);
1695
1659
  --t-border-color-control-success:hsl(97, 57%, 40%);
1696
1660
  --t-border-color-control-warning:hsl(42, 84%, 63%);
1697
1661
  --t-border-color-control-error:hsl(8, 60%, 47%);
1698
- --t-border-color-control-disabled:hsl(0, 0%, 21%);
1699
- }
1662
+ --t-border-color-control-disabled:hsl(0, 0%, 88%);
1663
+ --t-form-background-color:var(--t-fill-color-neutral-100);
1664
+ --t-form-background-color-disabled:var(--t-fill-color-neutral-070);
1665
+ --t-form-background-color-error:var(--t-fill-color-neutral-100);
1666
+ --t-form-background-color-readonly:var(--t-fill-color-neutral-070);
1667
+ --t-form-border-color:var(--t-border-color-default-base);
1668
+ --t-form-border-color-disabled:var(--t-border-color-default-base);
1669
+ --t-form-border-color-error:var(--t-border-color-status-error);
1670
+ --t-form-border-color-focus:var(--t-fill-color-interaction-default);
1671
+ --t-form-border-color-hover:var(--t-border-color-default-dark);
1672
+ --t-form-border-color-readonly:hsla(0, 0%, 100%, 0);
1673
+ --t-form-border-radius:var(--t-border-radius-md);
1674
+ --t-form-border-width:var(--t-border-width-default);
1675
+ --t-form-font-color:var(--t-text-color-default-primary);
1676
+ --t-form-font-color-disabled:var(--t-text-color-default-disabled);
1677
+ --t-form-font-color-error:var(--t-text-color-status-error);
1678
+ --t-form-font-color-readonly:var(--t-text-color-default-primary);
1679
+ --t-form-picker-icon-color:var(--t-icon-color-default-primary);
1680
+ --t-form-placeholder-color:var(--t-text-color-default-placeholder);
1681
+ --t-border-size-default:var(--t-border-width-default);
1682
+ --t-border-size-thick:var(--t-border-width-thick);
1683
+ --t-font-weight-semi-bold:var(--t-font-weight-semibold);
1684
+ --t-icon-color-status-neutral-dark:hsl(0, 0%, 24%);
1685
+ --t-icon-color-status-info-secondary:hsl(204, 100%, 40%);
1686
+ --t-fill-color-alert-info:hsl(204, 94%, 49%);
1687
+ --t-fill-color-alert-success:hsl(122, 60%, 41%);
1688
+ --t-fill-color-alert-warning:hsl(43, 96%, 58%);
1689
+ --t-fill-color-alert-error:hsl(4, 77%, 59%);
1690
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 98%);
1691
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 98%);
1692
+ --t-fill-color-button-create-solid-default:hsl(96, 57%, 33%);
1693
+ --t-fill-color-button-create-solid-hover:hsl(97, 57%, 28%);
1694
+ --t-fill-color-button-create-solid-active:hsl(97, 57%, 23%);
1695
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 81%);
1696
+ --t-fill-color-button-create-ghost-default:hsla(0, 0%, 100%, 0);
1697
+ --t-fill-color-button-create-ghost-hover:hsl(96, 60%, 95%);
1698
+ --t-fill-color-button-create-ghost-active:hsl(97, 57%, 90%);
1699
+ --t-fill-color-button-create-ghost-disabled:hsla(0, 0%, 100%, 0);
1700
1700
  }
1701
1701
 
1702
1702
  .symbol{