@planningcenter/tapestry 2.4.0-rc.2 → 2.4.0-rc.20

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 (42) hide show
  1. package/dist/components/page-header/index.js +1 -1
  2. package/dist/components/sidenav/index.js +1 -1
  3. package/dist/index.css +1907 -1277
  4. package/dist/index.css.map +1 -1
  5. package/dist/reactRender.css +2126 -1502
  6. package/dist/reactRender.css.map +1 -1
  7. package/dist/reactRenderLegacy.css +2126 -1502
  8. package/dist/reactRenderLegacy.css.map +1 -1
  9. package/dist/tapestry-wc/dist/components/{p-CLwAWmuf.js → p-BeRBdTgg.js} +2 -2
  10. package/dist/tapestry-wc/dist/components/p-BeRBdTgg.js.map +1 -0
  11. package/dist/tapestry-wc/dist/components/{p-CeCAMGrz.js → p-Bm4mzfXP.js} +2 -2
  12. package/dist/tapestry-wc/dist/components/p-Bm4mzfXP.js.map +1 -0
  13. package/dist/tapestry-wc/dist/components/{p-BGI0jdHO.js → p-DSD_J55f.js} +3 -3
  14. package/dist/tapestry-wc/dist/components/p-DSD_J55f.js.map +1 -0
  15. package/dist/tapestry-wc/dist/components/{p-D_UI812x.js → p-DykUuEjv.js} +3 -3
  16. package/dist/tapestry-wc/dist/components/p-DykUuEjv.js.map +1 -0
  17. package/dist/tapestry-wc/dist/components/{p-m4YsmAHe.js → p-T-mo2mEc.js} +3 -3
  18. package/dist/tapestry-wc/dist/components/p-T-mo2mEc.js.map +1 -0
  19. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js +2 -2
  20. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js.map +1 -1
  21. package/dist/tapestry-wc/dist/components/tds-page-header.js +3 -3
  22. package/dist/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
  23. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js +3 -3
  24. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
  25. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js +2 -2
  26. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js.map +1 -1
  27. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js +3 -3
  28. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
  29. package/dist/tapestry-wc/dist/components/tds-sidenav.js +5 -5
  30. package/dist/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
  31. package/dist/tokens.css +1070 -426
  32. package/dist/tokens.css.map +1 -1
  33. package/dist/tokens.d.ts +1 -0
  34. package/dist/tokens.d.ts.map +1 -1
  35. package/dist/unstable.css +2129 -1505
  36. package/dist/unstable.css.map +1 -1
  37. package/package.json +11 -11
  38. package/dist/tapestry-wc/dist/components/p-BGI0jdHO.js.map +0 -1
  39. package/dist/tapestry-wc/dist/components/p-CLwAWmuf.js.map +0 -1
  40. package/dist/tapestry-wc/dist/components/p-CeCAMGrz.js.map +0 -1
  41. package/dist/tapestry-wc/dist/components/p-D_UI812x.js.map +0 -1
  42. package/dist/tapestry-wc/dist/components/p-m4YsmAHe.js.map +0 -1
package/dist/reactRenderLegacy.css CHANGED
@@ -1,1767 +1,2391 @@
1
1
  @layer t-critical, t-component;
2
2
 
3
3
 
4
- @media (prefers-reduced-motion: no-preference) {
4
+ @media (prefers-reduced-motion: no-preference){
5
5
 
6
- :root {
7
- interpolate-size: allow-keywords;
6
+ :root{
7
+ interpolate-size:allow-keywords;
8
8
  }
9
9
  }
10
10
 
11
- @layer tds-component {
12
- tds-sidenav, .tds-sidenav {
13
- --tds-sidenav-indent: 12px;
14
- --tds-sidenav-item-depth: 0;
11
+ @layer tds-component{
12
+ tds-sidenav, .tds-sidenav{
13
+ --tds-sidenav-indent:12px;
14
+ --tds-sidenav-item-depth:0;
15
15
 
16
- --tds-sidenav-item-transition: background-color .2s cubic-bezier(.19, .91, .38, 1);
16
+ --tds-sidenav-item-transition:background-color .2s cubic-bezier(.19, .91, .38, 1);
17
17
 
18
- --tds-sidenav-item-icon-size: var(--t-element-size-md);
19
- --tds-sidenav-item-background-hover: var(--t-fill-color-button-interaction-ghost-hover);
20
- --tds-sidenav-item-background-active: var(--t-fill-color-button-interaction-ghost-active);
21
- --tds-sidenav-item-background-selected: var(--t-fill-color-button-interaction-ghost-active);
18
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
19
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
20
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
21
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
22
22
 
23
- --tds-sidenav-item-nested-background-hover: var(--tds-sidenav-item-background-hover);
24
- --tds-sidenav-item-nested-background-active: var(--tds-sidenav-item-background-hover);
25
- --tds-sidenav-item-nested-background-selected: transparent;
23
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
24
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
25
+ --tds-sidenav-item-nested-background-selected:transparent;
26
26
 
27
- --tds-sidenav-item-nested-border-color: var(--t-fill-color-neutral-050);
28
- --tds-sidenav-item-nested-border-color-hover: var(--t-fill-color-neutral-050);
29
- --tds-sidenav-item-nested-border-color-selected: var(--t-border-color-status-info);
27
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
28
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
29
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
30
30
 
31
- --tds-sidenav-item-icon-color: var(--t-icon-color-default-secondary);
32
- --tds-sidenav-item-icon-color-selected: var(--t-icon-color-default-primary);
31
+ --tds-sidenav-item-icon-color:var(--t-icon-color-default-secondary);
32
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color-default-primary);
33
33
  }
34
34
 
35
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);
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);
42
42
  }
43
43
  }
44
44
 
45
- .tds-sidenav :where(nav,ul,.tds-sidenav-section) {
46
- display: flex;
45
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
46
+ display:flex;
47
47
  }
48
48
 
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%;
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
53
  }
54
54
 
55
- .tds-sidenav-section-list {
56
- width: 100%;
57
- padding: 0;
58
- margin: 0;
59
- list-style: none;
55
+ .tds-sidenav-section-list{
56
+ width:100%;
57
+ padding:0;
58
+ margin:0;
59
+ list-style:none;
60
60
  }
61
61
 
62
- .tds-sidenav-section-header {
63
- display: flex;
64
- align-items: baseline;
65
- justify-content: space-between;
66
- padding-top: var(--t-spacing-2);
62
+ .tds-sidenav-section-header{
63
+ display:flex;
64
+ align-items:baseline;
65
+ justify-content:space-between;
66
+ padding-top:var(--t-spacing-2);
67
67
  }
68
68
 
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;
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
76
  }
77
77
 
78
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header {
79
- padding-top: 0;
78
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
79
+ padding-top:0;
80
80
  }
81
81
 
82
- .tds-sidenav-section-header [slot="label-actions"] {
83
- display: flex;
84
- gap: var(--t-spacing-half);
85
- align-items: center;
82
+ .tds-sidenav-section-header [slot="label-actions"]{
83
+ display:flex;
84
+ gap:var(--t-spacing-half);
85
+ align-items:center;
86
86
  }
87
87
 
88
- .tds-sidenav-section [slot="section-actions"] {
89
- display: flex;
90
- gap: 12px;
91
- align-items: center;
92
- min-height: 42px;
93
- padding: var(--t-spacing-1) 0;
88
+ .tds-sidenav-section [slot="section-actions"]{
89
+ display:flex;
90
+ gap:12px;
91
+ align-items:center;
92
+ min-height:42px;
93
+ padding:var(--t-spacing-1) 0;
94
94
  }
95
95
 
96
96
  .tds-sidenav-section-list,
97
- .tds-sidenav-item {
98
- width: 100%;
99
- padding: 0;
100
- margin: 0;
101
- }
102
-
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);
97
+ .tds-sidenav-item{
98
+ width:100%;
99
+ padding:0;
100
+ margin:0;
101
+ }
102
+
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
124
  }
125
125
 
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;
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
133
  }
134
134
 
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;
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
139
  }
140
140
 
141
- :is(.tds-sidenav-item :is(a,button)):active {
142
- --tds-sidenav-item-background: var(--tds-sidenav-item-background-active);
141
+ :is(.tds-sidenav-item :is(a,button)):active{
142
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
143
143
  }
144
144
 
145
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]) {
146
- overflow: hidden;
147
- color: var(--tds-sidenav-item-icon-color);
145
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
146
+ overflow:hidden;
147
+ color:var(--tds-sidenav-item-icon-color);
148
148
  }
149
149
 
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);
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
154
  }
155
155
 
156
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section {
157
- --tds-sidenav-indent: 19px;
156
+ :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
157
+ --tds-sidenav-indent:19px;
158
158
  }
159
159
 
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;
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
164
  }
165
165
 
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);
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);
169
169
 
170
- --tds-sidenav-item-nested-background: var(--tds-sidenav-item-nested-background-selected);
171
- font-weight: var(--t-font-weight-semibold);
170
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-selected);
171
+ font-weight:var(--t-font-weight-semibold);
172
172
  }
173
173
 
174
- .tds-sidenav-item:has(.tds-sidenav-section) {
175
- display: flex;
176
- flex-direction: column;
177
- gap: var(--t-spacing-half);
174
+ .tds-sidenav-item:has(.tds-sidenav-section){
175
+ display:flex;
176
+ flex-direction:column;
177
+ gap:var(--t-spacing-half);
178
178
  }
179
179
 
180
- .tds-sidenav-item .tds-sidenav-section-list {
181
- --tds-sidenav-item-depth: 1;
182
- gap: 0;
180
+ .tds-sidenav-item .tds-sidenav-section-list{
181
+ --tds-sidenav-item-depth:1;
182
+ gap:0;
183
183
  }
184
184
 
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;
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
191
  }
192
192
 
193
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list {
194
- --tds-sidenav-item-depth: 2;
193
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
194
+ --tds-sidenav-item-depth:2;
195
195
  }
196
196
 
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;
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
203
  }
204
204
 
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);
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
214
  }
215
215
 
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);
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
225
  }
226
226
 
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;
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
231
  }
232
232
 
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);
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
236
  }
237
237
 
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);
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
240
  }
241
241
 
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);
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
245
  }
246
246
 
247
- .tds-sidenav-responsive-header {
248
- display: flex;
249
- gap: var(--t-spacing-2);
250
- align-items: center;
251
- width: 100%;
247
+ .tds-sidenav-responsive-header{
248
+ display:flex;
249
+ gap:var(--t-spacing-2);
250
+ align-items:center;
251
+ width:100%;
252
252
  }
253
253
 
254
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle {
255
- order: 0;
254
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
255
+ order:0;
256
256
  }
257
257
 
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);
258
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
259
+ flex:1;
260
+ order:1;
261
+ margin:0;
262
+ font-size:var(--t-font-size-lg);
263
+ font-weight:var(--t-font-weight-medium);
264
+ color:var(--t-text-color-default-headline);
265
265
  }
266
266
 
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;
267
+ @media (max-width: 719px){
268
+ .tds-sidenav-collapse{
269
+ z-index:10001;
270
+ display:none;
271
+ max-width:min(448px, calc(100vw - 48px));
272
+ padding:0;
273
+ margin:12px 0;
274
+ overflow:hidden;
275
+ outline:0;
276
+ background:var(--t-surface-color-card);
277
+ border:0;
278
+ border-radius:6px;
279
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
280
+ will-change:transform;
281
+ position-area:bottom span-right;
282
282
  }
283
283
 
284
- .tds-sidenav-scroll-container {
285
- --webkit-overflow-scrolling: touch;
286
- display: block;
287
- width: 100%;
288
- height: -moz-fit-content;
289
- height: fit-content;
290
- padding: var(--t-spacing-2);
291
- overflow-y: auto;
284
+ .tds-sidenav-scroll-container{
285
+ --webkit-overflow-scrolling:touch;
286
+ display:block;
287
+ width:100%;
288
+ height:-moz-fit-content;
289
+ height:fit-content;
290
+ padding:var(--t-spacing-2);
291
+ overflow-y:auto;
292
292
  }
293
293
 
294
- .tds-sidenav-item :is(a, button) :is(.prefix) {
295
- display: none;
294
+ .tds-sidenav-item :is(a, button) :is(.prefix){
295
+ display:none;
296
296
  }
297
-
298
- /* Modern browsers only */
299
- @supports selector(:popover-open) {
300
- .tds-sidenav-collapse:popover-open {
301
- display: flex;
297
+ @supports selector(:popover-open){
298
+ .tds-sidenav-collapse:popover-open{
299
+ display:flex;
302
300
  }
303
301
  }
304
-
305
- /* Older browsers only, running the polyfill */
306
- @supports not selector(:popover-open) {
307
- .tds-sidenav-collapse.\:popover-open {
308
- display: flex;
302
+ @supports not selector(:popover-open){
303
+ .tds-sidenav-collapse.\:popover-open{
304
+ display:flex;
309
305
  }
310
306
  }
311
307
  }
312
308
 
313
- @media (min-width: 720px) {
314
- .tds-sidenav-responsive-header {
315
- display: none;
309
+ @media (min-width: 720px){
310
+ .tds-sidenav-responsive-header{
311
+ display:none;
316
312
  }
317
313
  }
318
314
 
319
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]) {
320
- display: none;
315
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
316
+ display:none;
321
317
  }
322
318
 
323
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"] {
324
- display: block;
319
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
320
+ display:block;
325
321
  }
326
322
 
327
- tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
328
- display: flex;
329
- flex-direction: column;
323
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
324
+ display:flex;
325
+ flex-direction:column;
330
326
  }
331
327
 
332
- @layer t-critical {
333
- tds-page-header:not(.hydrated) {
334
- display: none;
328
+ @layer t-critical{
329
+ tds-page-header:not(.hydrated){
330
+ display:none;
335
331
  }
336
332
  }
337
333
 
338
- @layer t-component {
339
- .tds-page-header {
340
- --tds-page-header-background-color: var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
341
- --tds-page-header-background-color-inactive: var(--t-fill-color-neutral-090);
342
- --tds-page-header-color: var(--t-text-color-default-primary);
343
- --tds-page-header-headline-color: var(--t-text-color-default-headline);
344
- --tds-page-header-headline-font-size: var(--t-font-size-2xl);
345
- --tds-page-header-padding-x: var(--t-spacing-2);
346
- --tds-page-header-padding-y: var(--t-spacing-2);
347
- --tds-page-header-nav-padding-x: var(--tds-page-header-padding-x, var(--t-spacing-3));
348
- --tds-page-header-nav-gap: var(--t-spacing-1);
349
- --tds-page-header-nav-background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 100%);
350
- --tds-page-header-nav-item-padding-x: var(--t-spacing-1);
351
- --tds-page-header-nav-item-padding-y: var(--t-spacing-1);
352
- --tds-page-header-nav-item-color: var(--t-text-color-default-secondary);
353
- --tds-page-header-nav-item-background-color: var(--t-fill-color-transparency-light-060);
354
- --tds-page-header-nav-item-border-width: 1px;
355
-
356
- --tds-page-header-nav-item-border-color: var(--tds-page-header-nav-item-background-color);
357
- --tds-page-header-nav-item-border-bottom-color: var(--t-border-color-default-base);
358
-
359
- --tds-page-header-nav-item-color-hover: var(--t-text-color-default-primary);
360
- --tds-page-header-nav-item-background-color-hover: var(--t-fill-color-neutral-080);
361
- --tds-page-header-nav-item-border-color-hover: var(--tds-page-header-nav-item-background-color-hover);
362
-
363
- --tds-page-header-nav-item-background-color-active: var(--t-fill-color-neutral-060);
364
- --tds-page-header-nav-item-border-color-active: var(--tds-page-header-nav-item-background-color-hover);
365
-
366
- --tds-page-header-nav-item-color-disabled: var(--t-text-color-default-disabled);
367
- --tds-page-header-nav-item-background-color-disabled: var(--t-fill-color-neutral-080);
368
- --tds-page-header-nav-item-border-color-disabled: var(--tds-page-header-nav-item-background-color-disabled);
369
-
370
- --tds-page-header-nav-item-color-selected: var(--t-text-color-default-primary);
371
- --tds-page-header-nav-item-background-color-selected: var(--t-surface-color-canvas);
372
- --tds-page-header-nav-item-border-color-selected: var(--tds-page-header-nav-item-background-color-selected);
373
- --tds-page-header-nav-item-border-bottom-color-selected: var(--tds-page-header-nav-item-background-color-selected);
374
- --tds-page-header-nav-item-indicator-color: var(--t-icon-color-status-warning-primary);
334
+ @layer t-component{
335
+ .tds-page-header{
336
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
337
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
338
+ --tds-page-header-color:var(--t-text-color-default-primary);
339
+ --tds-page-header-headline-color:var(--t-text-color-default-headline);
340
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
341
+ --tds-page-header-padding-x:var(--t-spacing-2);
342
+ --tds-page-header-padding-y:var(--t-spacing-2);
343
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
344
+ --tds-page-header-nav-gap:var(--t-spacing-1);
345
+ --tds-page-header-nav-background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 100%);
346
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
347
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
348
+ --tds-page-header-nav-item-color:var(--t-text-color-default-secondary);
349
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-transparency-light-060);
350
+ --tds-page-header-nav-item-border-width:1px;
351
+
352
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
353
+ --tds-page-header-nav-item-border-bottom-color:var(--t-border-color-default-base);
354
+
355
+ --tds-page-header-nav-item-color-hover:var(--t-text-color-default-primary);
356
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-080);
357
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
358
+
359
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-060);
360
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-hover);
361
+
362
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-default-disabled);
363
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
364
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
365
+
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);
375
371
  }
376
372
 
377
- .tds-page-header--profile {
378
- --tds-page-header-padding-y: 20px;
373
+ .tds-page-header--profile{
374
+ --tds-page-header-padding-y:20px;
379
375
  }
380
- @media (min-width: 600px) {
381
- .tds-page-header {
382
- --tds-page-header-background-color: var(--t-surface-color-canvas);
383
- --tds-page-header-color: var(--t-text-color-default-secondary);
384
- --tds-page-header-padding-x: var(--t-spacing-3);
385
- --tds-page-header-headline-font-size: var(--t-font-size-3xl);
386
- --tds-page-header-nav-gap: var(--t-spacing-half);
387
- --tds-page-header-nav-background: transparent;
388
- --tds-page-header-nav-item-padding-x: var(--t-spacing-2);
389
- --tds-page-header-nav-item-border-width: 1px;
390
- --tds-page-header-nav-item-color: var(--t-text-color-default-primary);
391
- --tds-page-header-nav-item-background-color: var(--t-fill-color-neutral-070);
392
- --tds-page-header-nav-item-border-color-selected: var(--t-border-color-default-base);
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);
393
389
  }
394
390
  }
395
391
  }
396
392
 
397
- .tds-page-header {
398
- display: flex;
399
- flex-direction: column;
400
- padding-top: var(--tds-page-header-padding-y);
401
- color: var(--tds-page-header-color);
402
- background: var(--tds-page-header-background-color);
403
- border-bottom: 1px solid var(--t-border-color-default-base);
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);
404
400
  }
405
401
 
406
- .tds-page-header:not(.has-nav) {
407
- padding-bottom: var(--tds-page-header-padding-y);
402
+ .tds-page-header:not(.has-nav){
403
+ padding-bottom:var(--tds-page-header-padding-y);
408
404
  }
409
405
 
410
- .tds-page-header.inactive {
411
- background: var(--tds-page-header-background-color-inactive);
406
+ .tds-page-header.inactive{
407
+ background:var(--tds-page-header-background-color-inactive);
412
408
  }
413
409
 
414
- .tds-page-header__title-bar {
415
- display: flex;
416
- flex-direction: column;
417
- gap: var(--t-spacing-2) var(--t-spacing-1);
418
- align-items: flex-start;
419
- justify-content: space-between;
420
- padding: 0 var(--tds-page-header-padding-x);
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);
421
417
  }
422
418
 
423
- .tds-page-header--profile > .tds-page-header__title-bar {
424
- align-items: center;
419
+ .tds-page-header--profile > .tds-page-header__title-bar{
420
+ align-items:center;
425
421
  }
426
422
 
427
- .tds-page-header__primary {
428
- width: 100%;
423
+ .tds-page-header__primary{
424
+ width:100%;
429
425
  }
430
426
 
431
- .tds-page-header__primary h1 {
432
- margin: 0;
433
- font-size: var(--tds-page-header-headline-font-size);
434
- font-weight: var(--t-font-weight-normal);
435
- line-height: 32px;
436
- color: var(--tds-page-header-headline-color);
437
- overflow-wrap: break-word;
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;
438
434
  }
439
435
 
440
- .tds-page-header [slot="actions"] {
441
- width: 100%;
436
+ .tds-page-header [slot="actions"]{
437
+ width:100%;
442
438
  }
443
439
 
444
440
  .has-multi-actions.tds-page-header [slot="actions"],
445
- .has-multi-actions.tds-page-header .tds-page-header__actions {
446
- display: flex;
447
- flex-flow: row wrap;
448
- gap: var(--t-spacing-half) var(--t-spacing-1);
449
- align-items: flex-start;
450
- justify-content: flex-start;
451
- min-width: 0;
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;
452
448
  }
453
449
 
454
450
  .tds-page-header nav[slot="navigation"]:not(:has(ul)),
455
451
  .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
456
452
  .tds-page-header nav[slot="navigation"] ul,
457
- .tds-page-header nav.tds-page-header__nav ul {
458
- display: flex;
459
- gap: var(--tds-page-header-nav-gap);
460
- padding: var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
461
- margin: 0 0 -1px;
462
- overflow: auto;
463
- list-style: none;
464
- background: var(--tds-page-header-nav-background);
453
+ .tds-page-header nav.tds-page-header__nav ul{
454
+ display:flex;
455
+ gap:var(--tds-page-header-nav-gap);
456
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
457
+ margin:0 0 -1px;
458
+ overflow:auto;
459
+ list-style:none;
460
+ background:var(--tds-page-header-nav-background);
465
461
  }
466
462
 
467
463
  .tds-page-header nav[slot="navigation"] a,
468
464
  .tds-page-header nav[slot="navigation"] button,
469
465
  .tds-page-header nav.tds-page-header__nav a,
470
- .tds-page-header nav.tds-page-header__nav button {
471
- position: relative;
472
- display: inline-flex;
473
- padding: var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
474
- font-size: var(--t-font-size-sm);
475
- line-height: 22px;
476
- color: var(--tds-page-header-nav-item-color);
477
- white-space: nowrap;
478
- text-decoration: none;
479
- -webkit-appearance: none;
480
- -moz-appearance: none;
481
- appearance: none;
482
- cursor: pointer;
483
- outline-offset: -2px;
484
- background-color: var(--tds-page-header-nav-item-background-color);
485
- background-clip: padding-box;
486
- border: var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
487
- border-bottom: 1px solid var(--tds-page-header-nav-item-border-bottom-color);
488
- border-radius: var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
489
- }
490
-
491
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) {
492
- position: relative;
493
- }
494
-
495
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) :is(a, button) {
496
- -webkit-mask: radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
497
- mask: radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
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);
498
494
  }
499
495
 
500
496
  .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::before,
501
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after {
502
- position: absolute;
503
- top: -5px;
504
- right: -2px;
505
- width: 10px;
506
- height: 10px;
507
- content: "";
508
- background: var(--tds-page-header-nav-item-indicator-color);
509
- border-radius: 50%;
510
- }
511
-
512
- @media (prefers-reduced-motion: no-preference) {
513
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after {
514
- animation: indicator-pulse 1.25s ease infinite;
497
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
498
+ position:absolute;
499
+ top:-5px;
500
+ right:-2px;
501
+ width:10px;
502
+ height:10px;
503
+ content:"";
504
+ background:var(--tds-page-header-nav-item-indicator-color);
505
+ border-radius:50%;
506
+ }
507
+
508
+ @media (prefers-reduced-motion: no-preference){
509
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
510
+ animation:indicator-pulse 1.25s ease infinite;
515
511
  }
516
512
  }
517
513
 
518
514
  .tds-page-header nav[slot="navigation"] a.selected,
519
515
  .tds-page-header nav[slot="navigation"] button.selected,
520
516
  .tds-page-header nav.tds-page-header__nav a.selected,
521
- .tds-page-header nav.tds-page-header__nav button.selected {
522
- --tds-page-header-nav-item-color: var(--tds-page-header-nav-item-color-selected);
523
- --tds-page-header-nav-item-border-color: var(--tds-page-header-nav-item-border-color-selected);
524
- --tds-page-header-nav-item-background-color: var(--tds-page-header-nav-item-background-color-selected);
525
- --tds-page-header-nav-item-border-bottom-color: var(--tds-page-header-nav-item-background-color-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);
526
522
  }
527
523
 
528
524
  .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
529
525
  .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
530
526
  .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
531
- .tds-page-header nav.tds-page-header__nav button:not(.selected):hover {
532
- --tds-page-header-nav-item-color: var(--tds-page-header-nav-item-color-hover);
533
- --tds-page-header-nav-item-background-color: var(--tds-page-header-nav-item-background-color-hover);
534
- --tds-page-header-nav-item-border-color: var(--tds-page-header-nav-item-border-color-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);
535
531
  }
536
532
 
537
533
  .tds-page-header nav[slot="navigation"] a:not(.selected):active,
538
534
  .tds-page-header nav[slot="navigation"] button:not(.selected):active,
539
535
  .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
540
- .tds-page-header nav.tds-page-header__nav button:not(.selected):active {
541
- background-color: var(--tds-page-header-nav-item-background-color-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);
542
538
  }
543
539
 
544
540
  .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
545
541
  .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
546
542
  .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
547
- .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled {
548
- color: var(--tds-page-header-nav-item-color-disabled);
549
- cursor: not-allowed;
550
- background-color: var(--tds-page-header-nav-item-background-color-disabled);
551
- opacity: 1;
552
- }
553
-
554
- @media (min-width: 960px) {
555
- .tds-page-header__primary {
556
- flex: 1 1 max-content;
557
- width: auto;
558
- min-width: 0;
559
- max-width: 100%;
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
+
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%;
560
556
  }
561
557
 
562
558
  .tds-page-header__title-bar,
563
- .tds-page-header--profile .tds-page-header__title-bar {
564
- flex-flow: row nowrap;
565
- row-gap: 12px;
566
- align-items: flex-start;
559
+ .tds-page-header--profile .tds-page-header__title-bar{
560
+ flex-flow:row nowrap;
561
+ row-gap:12px;
562
+ align-items:flex-start;
567
563
  }
568
564
 
569
- .tds-page-header [slot="actions"] {
570
- width: auto;
565
+ .tds-page-header [slot="actions"]{
566
+ width:auto;
571
567
  }
572
568
 
573
569
  .has-multi-actions.tds-page-header [slot="actions"],
574
- .has-multi-actions.tds-page-header .tds-page-header__actions {
575
- justify-content: flex-end;
570
+ .has-multi-actions.tds-page-header .tds-page-header__actions{
571
+ justify-content:flex-end;
576
572
  }
577
573
  }
578
574
 
579
575
  .tds-page-header-phone,
580
- .tds-page-header-email {
581
- color: var(--tds-page-header-color);
582
- white-space: nowrap;
576
+ .tds-page-header-email{
577
+ color:var(--tds-page-header-color);
578
+ white-space:nowrap;
583
579
  }
584
580
 
585
- /* Truncate email */
586
-
587
- .tds-page-header-email {
588
- max-width: 100%;
589
- overflow: hidden;
590
- text-overflow: ellipsis;
581
+ .tds-page-header-email{
582
+ max-width:100%;
583
+ overflow:hidden;
584
+ text-overflow:ellipsis;
591
585
  }
592
586
 
593
- @keyframes indicator-pulse {
594
- 0% {
595
- opacity: .3;
596
- transform: scale(.9);
587
+ @keyframes indicator-pulse{
588
+ 0%{
589
+ opacity:.3;
590
+ transform:scale(.9);
597
591
  }
598
592
 
599
- 100% {
600
- opacity: 0;
601
- transform: scale(1.75);
593
+ 100%{
594
+ opacity:0;
595
+ transform:scale(1.75);
602
596
  }
603
597
  }
604
598
 
605
- .tds-loading-spinner {
606
- --tds-loading-spinner-size: 1.25em;
599
+ .tds-loading-spinner{
600
+ --tds-loading-spinner-size:1.25em;
607
601
 
608
- position: absolute;
609
- right: 0;
610
- left: 0;
611
- visibility: var(--tds-loading-spinner-visibility, hidden);
612
- width: var(--tds-loading-spinner-size);
613
- height: var(--tds-loading-spinner-size);
614
- margin: auto;
615
- border: var(--tds-loading-spinner-track-width, 4px) solid var(--tds-loading-spinner-track-color, var(--t-fill-color-transparency-dark-020));
616
- border-top-color: var(--tds-loading-spinner-color, currentcolor);
617
- border-radius: 50%;
618
- animation: spinner-rotate 500ms infinite linear;
619
- animation-play-state: var(--tds-loading-spinner-animation-play-state, paused);
602
+ position:absolute;
603
+ right:0;
604
+ left:0;
605
+ visibility:var(--tds-loading-spinner-visibility, hidden);
606
+ width:var(--tds-loading-spinner-size);
607
+ height:var(--tds-loading-spinner-size);
608
+ margin:auto;
609
+ border:var(--tds-loading-spinner-track-width, 4px) solid var(--tds-loading-spinner-track-color, var(--t-fill-color-transparency-dark-020));
610
+ border-top-color:var(--tds-loading-spinner-color, currentcolor);
611
+ border-radius:50%;
612
+ animation:spinner-rotate 500ms infinite linear;
613
+ animation-play-state:var(--tds-loading-spinner-animation-play-state, paused);
620
614
  }
621
615
 
622
- @keyframes spinner-rotate {
623
- to {
624
- transform: rotate(360deg);
616
+ @keyframes spinner-rotate{
617
+ to{
618
+ transform:rotate(360deg);
625
619
  }
626
620
  }
627
621
 
628
- @media (prefers-reduced-motion: reduce) {
629
- [class*="--loading"] .tds-loading-spinner {
630
- --tds-loading-spinner-animation-play-state: paused;
622
+ @media (prefers-reduced-motion: reduce){
623
+ [class*="--loading"] .tds-loading-spinner{
624
+ --tds-loading-spinner-animation-play-state:paused;
631
625
  }
632
626
  }
633
627
 
634
- /**
635
- * Do not edit directly, this file was auto-generated.
636
- */
637
-
638
- :root {
639
- --t-border-radius-sm: 2px;
640
- --t-border-radius-md: 4px;
641
- --t-border-radius-lg: 8px;
642
- --t-border-radius-xl: 16px;
643
- --t-border-radius-round: 56px;
644
- --t-border-radius-default: 4px;
645
- --t-border-width-default: 1px;
646
- --t-border-width-thick: 2px;
647
- --t-spacing-1: 8px;
648
- --t-spacing-2: 16px;
649
- --t-spacing-3: 24px;
650
- --t-spacing-4: 32px;
651
- --t-spacing-5: 40px;
652
- --t-spacing-6: 48px;
653
- --t-spacing-7: 56px;
654
- --t-spacing-fourth: 2px;
655
- --t-spacing-half: 4px;
656
- --t-element-size-3xl: 48px;
657
- --t-element-size-2xl: 32px;
658
- --t-element-size-xl: 24px;
659
- --t-element-size-lg: 18px;
660
- --t-element-size-md: 16px;
661
- --t-element-size-sm: 14px;
662
- --t-element-size-xs: 12px;
663
- --t-font-size-4xl: 32px;
664
- --t-font-size-3xl: 28px;
665
- --t-font-size-2xl: 24px;
666
- --t-font-size-xl: 20px;
667
- --t-font-size-lg: 18px;
668
- --t-font-size-md: 16px;
669
- --t-font-size-sm: 14px;
670
- --t-font-size-xs: 12px;
671
- --t-font-size-2xs: 10px;
672
- --t-font-weight-normal: 400;
673
- --t-font-weight-medium: 500;
674
- --t-font-weight-semibold: 600;
675
- --t-font-weight-bold: 700;
676
- --t-container-size-xl: 48px;
677
- --t-container-size-lg: 40px;
678
- --t-container-size-md: 32px;
679
- --t-container-size-sm: 24px;
680
- --t-container-size-xs: 20px;
681
- --t-avatar-size-20: 20px;
682
- --t-avatar-size-24: 24px;
683
- --t-avatar-size-36: 36px;
684
- --t-avatar-size-48: 48px;
685
- --t-avatar-size-72: 72px;
686
- --t-avatar-size-112: 112px;
687
- --t-text-color-default-headline: hsl(0, 0%, 12%);
688
- --t-text-color-default-primary: hsl(0, 0%, 24%);
689
- --t-text-color-default-secondary: hsl(0, 0%, 42%);
690
- --t-text-color-default-disabled: hsl(0, 0%, 81%);
691
- --t-text-color-default-placeholder: hsl(0, 0%, 58%);
692
- --t-text-color-default-inverted: hsl(0, 0%, 100%);
693
- --t-text-color-interaction-primary: hsl(204, 100%, 40%);
694
- --t-text-color-interaction-hover: hsl(204, 100%, 35%);
695
- --t-text-color-interaction-active: hsl(204, 100%, 30%);
696
- --t-text-color-interaction-visited: hsl(204, 100%, 30%);
697
- --t-text-color-status-neutral: hsl(0, 0%, 24%);
698
- --t-text-color-status-info: hsl(204, 100%, 35%);
699
- --t-text-color-status-success: hsl(97, 57%, 28%);
700
- --t-text-color-status-warning: hsl(42, 100%, 29%);
701
- --t-text-color-status-error: hsl(8, 60%, 45%);
702
- --t-text-color-tag-subtle-gray: hsl(0, 0%, 24%);
703
- --t-text-color-tag-subtle-blue: hsl(224, 47%, 31%);
704
- --t-text-color-tag-subtle-indigo: hsl(241, 59%, 28%);
705
- --t-text-color-tag-subtle-aqua: hsl(209, 77%, 22%);
706
- --t-text-color-tag-subtle-teal: hsl(180, 95%, 15%);
707
- --t-text-color-tag-subtle-green: hsl(100, 93%, 17%);
708
- --t-text-color-tag-subtle-yellow: hsl(29, 100%, 23%);
709
- --t-text-color-tag-subtle-orange: hsl(18, 100%, 18%);
710
- --t-text-color-tag-subtle-pink: hsl(327, 88%, 20%);
711
- --t-text-color-tag-subtle-purple: hsl(268, 71%, 27%);
712
- --t-text-color-tag-subtle-magenta: hsl(285, 71%, 20%);
713
- --t-text-color-tag-bold-gray: hsl(0, 0%, 24%);
714
- --t-text-color-tag-bold-indigo: hsl(241, 59%, 28%);
715
- --t-text-color-tag-bold-blue: hsl(224, 47%, 31%);
716
- --t-text-color-tag-bold-aqua: hsl(209, 77%, 22%);
717
- --t-text-color-tag-bold-teal: hsl(180, 95%, 15%);
718
- --t-text-color-tag-bold-green: hsl(100, 93%, 17%);
719
- --t-text-color-tag-bold-yellow: hsl(29, 100%, 23%);
720
- --t-text-color-tag-bold-orange: hsl(18, 100%, 18%);
721
- --t-text-color-tag-bold-pink: hsl(327, 88%, 20%);
722
- --t-text-color-tag-bold-purple: hsl(268, 71%, 27%);
723
- --t-text-color-tag-bold-magenta: hsl(285, 71%, 20%);
724
- --t-icon-color-default-primary: hsl(0, 0%, 24%);
725
- --t-icon-color-default-secondary: hsl(0, 0%, 42%);
726
- --t-icon-color-default-dim: hsl(0, 0%, 58%);
727
- --t-icon-color-default-disabled: hsl(0, 0%, 81%);
728
- --t-icon-color-default-inverted: hsl(0, 0%, 100%);
729
- --t-icon-color-status-neutral-primary: hsl(0, 0%, 42%);
730
- --t-icon-color-status-neutral-secondary: hsl(0, 0%, 58%);
731
- --t-icon-color-status-neutral-bold: hsl(0, 0%, 24%);
732
- --t-icon-color-status-info-primary: hsl(204, 100%, 40%);
733
- --t-icon-color-status-success-primary: hsl(96, 57%, 33%);
734
- --t-icon-color-status-success-secondary: hsl(97, 57%, 40%);
735
- --t-icon-color-status-warning-primary: hsl(42, 84%, 49%);
736
- --t-icon-color-status-error-primary: hsl(8, 60%, 47%);
737
- --t-fill-color-neutral-100: hsl(0, 0%, 100%);
738
- --t-fill-color-neutral-000: hsl(0, 0%, 12%);
739
- --t-fill-color-neutral-010: hsl(0, 0%, 24%);
740
- --t-fill-color-neutral-020: hsl(0, 0%, 42%);
741
- --t-fill-color-neutral-025: hsl(0, 0%, 50%);
742
- --t-fill-color-neutral-030: hsl(0, 0%, 58%);
743
- --t-fill-color-neutral-040: hsl(0, 0%, 81%);
744
- --t-fill-color-neutral-050: hsl(0, 0%, 88%);
745
- --t-fill-color-neutral-060: hsl(0, 0%, 93%);
746
- --t-fill-color-neutral-070: hsl(0, 0%, 95%);
747
- --t-fill-color-neutral-080: hsl(0, 0%, 97%);
748
- --t-fill-color-neutral-090: hsl(0, 0%, 98%);
749
- --t-fill-color-interaction-default: hsl(204, 100%, 40%);
750
- --t-fill-color-interaction-hover: hsl(204, 100%, 35%);
751
- --t-fill-color-interaction-active: hsl(204, 100%, 30%);
752
- --t-fill-color-interaction-disabled: hsl(0, 0%, 81%);
753
- --t-fill-color-control-neutral-off: hsl(0, 0%, 58%);
754
- --t-fill-color-control-neutral-on: hsl(0, 0%, 24%);
755
- --t-fill-color-control-primary: hsl(204, 100%, 40%);
756
- --t-fill-color-control-secondary: hsl(97, 57%, 40%);
757
- --t-fill-color-control-error: hsl(8, 60%, 47%);
758
- --t-fill-color-control-disabled: hsl(0, 0%, 81%);
759
- --t-fill-color-status-neutral-solid: hsl(0, 0%, 42%);
760
- --t-fill-color-status-neutral-ghost: hsl(0, 0%, 93%);
761
- --t-fill-color-status-neutral-dim: hsl(0, 0%, 97%);
762
- --t-fill-color-status-info-solid: hsl(204, 100%, 40%);
763
- --t-fill-color-status-info-ghost: hsl(203, 94%, 94%);
764
- --t-fill-color-status-info-dim: hsl(204, 100%, 97%);
765
- --t-fill-color-status-success-solid: hsl(96, 57%, 33%);
766
- --t-fill-color-status-success-ghost: hsl(97, 57%, 90%);
767
- --t-fill-color-status-success-dim: hsl(96, 60%, 95%);
768
- --t-fill-color-status-warning-solid: hsl(42, 84%, 63%);
769
- --t-fill-color-status-warning-ghost: hsl(42, 87%, 94%);
770
- --t-fill-color-status-warning-dim: hsl(42, 87%, 97%);
771
- --t-fill-color-status-error-solid: hsl(8, 60%, 47%);
772
- --t-fill-color-status-error-ghost: hsl(9, 59%, 93%);
773
- --t-fill-color-status-error-dim: hsl(7, 60%, 97%);
774
- --t-fill-color-tooltip-primary: hsla(0, 0%, 12%, 0.9);
775
- --t-fill-color-product-accounts-010: hsl(212, 54%, 93%);
776
- --t-fill-color-product-accounts-020: hsl(209, 53%, 90%);
777
- --t-fill-color-product-accounts-030: hsl(210, 56%, 70%);
778
- --t-fill-color-product-accounts-040: hsl(210, 54%, 60%);
779
- --t-fill-color-product-accounts-050: hsl(210, 55%, 50%);
780
- --t-fill-color-product-accounts-060: hsl(210, 65%, 40%);
781
- --t-fill-color-product-accounts-070: hsl(211, 70%, 32%);
782
- --t-fill-color-product-accounts-080: hsl(210, 75%, 25%);
783
- --t-fill-color-product-calendar-010: hsl(8, 61%, 90%);
784
- --t-fill-color-product-calendar-020: hsl(8, 61%, 70%);
785
- --t-fill-color-product-calendar-030: hsl(8, 72%, 59%);
786
- --t-fill-color-product-calendar-040: hsl(8, 65%, 55%);
787
- --t-fill-color-product-calendar-050: hsl(9, 61%, 50%);
788
- --t-fill-color-product-calendar-060: hsl(8, 65%, 42%);
789
- --t-fill-color-product-calendar-070: hsl(7, 65%, 34%);
790
- --t-fill-color-product-calendar-080: hsl(9, 61%, 27%);
791
- --t-fill-color-product-checkins-010: hsl(285, 20%, 92%);
792
- --t-fill-color-product-checkins-020: hsl(283, 22%, 75%);
793
- --t-fill-color-product-checkins-030: hsl(284, 22%, 64%);
794
- --t-fill-color-product-checkins-040: hsl(283, 22%, 55%);
795
- --t-fill-color-product-checkins-050: hsl(283, 22%, 48%);
796
- --t-fill-color-product-checkins-060: hsl(283, 27%, 42%);
797
- --t-fill-color-product-checkins-070: hsl(284, 33%, 34%);
798
- --t-fill-color-product-checkins-080: hsl(283, 33%, 27%);
799
- --t-fill-color-product-giving-010: hsl(41, 95%, 93%);
800
- --t-fill-color-product-giving-020: hsl(42, 95%, 83%);
801
- --t-fill-color-product-giving-030: hsl(43, 95%, 75%);
802
- --t-fill-color-product-giving-040: hsl(43, 88%, 70%);
803
- --t-fill-color-product-giving-050: hsl(43, 88%, 64%);
804
- --t-fill-color-product-giving-060: hsl(42, 84%, 55%);
805
- --t-fill-color-product-giving-070: hsl(42, 84%, 48%);
806
- --t-fill-color-product-giving-080: hsl(42, 100%, 40%);
807
- --t-fill-color-product-groups-010: hsl(18, 95%, 92%);
808
- --t-fill-color-product-groups-020: hsl(17, 96%, 80%);
809
- --t-fill-color-product-groups-030: hsl(17, 96%, 70%);
810
- --t-fill-color-product-groups-040: hsl(17, 96%, 63%);
811
- --t-fill-color-product-groups-050: hsl(17, 88%, 55%);
812
- --t-fill-color-product-groups-060: hsl(12, 70%, 48%);
813
- --t-fill-color-product-groups-070: hsl(12, 70%, 40%);
814
- --t-fill-color-product-groups-080: hsl(14, 70%, 34%);
815
- --t-fill-color-product-home-010: hsl(221, 89%, 93%);
816
- --t-fill-color-product-home-020: hsl(221, 91%, 91%);
817
- --t-fill-color-product-home-030: hsl(221, 91%, 87%);
818
- --t-fill-color-product-home-040: hsl(221, 91%, 62%);
819
- --t-fill-color-product-home-050: hsl(221, 91%, 55%);
820
- --t-fill-color-product-home-060: hsl(221, 90%, 50%);
821
- --t-fill-color-product-home-070: hsl(221, 90%, 45%);
822
- --t-fill-color-product-home-080: hsl(218, 84%, 25%);
823
- --t-fill-color-product-people-010: hsl(219, 73%, 91%);
824
- --t-fill-color-product-people-020: hsl(220, 69%, 81%);
825
- --t-fill-color-product-people-030: hsl(221, 73%, 71%);
826
- --t-fill-color-product-people-040: hsl(221, 73%, 65%);
827
- --t-fill-color-product-people-050: hsl(220, 74%, 57%);
828
- --t-fill-color-product-people-060: hsl(220, 68%, 51%);
829
- --t-fill-color-product-people-070: hsl(220, 68%, 41%);
830
- --t-fill-color-product-people-080: hsl(221, 68%, 31%);
831
- --t-fill-color-product-publishing-010: hsl(220, 4%, 86%);
832
- --t-fill-color-product-publishing-020: hsl(222, 10%, 60%);
833
- --t-fill-color-product-publishing-030: hsl(221, 11%, 50%);
834
- --t-fill-color-product-publishing-040: hsl(222, 12%, 39%);
835
- --t-fill-color-product-publishing-050: hsl(220, 12%, 31%);
836
- --t-fill-color-product-publishing-060: hsl(220, 11%, 26%);
837
- --t-fill-color-product-publishing-070: hsl(217, 12%, 22%);
838
- --t-fill-color-product-publishing-080: hsl(214, 11%, 12%);
839
- --t-fill-color-product-registrations-010: hsl(173, 28%, 89%);
840
- --t-fill-color-product-registrations-020: hsl(176, 38%, 78%);
841
- --t-fill-color-product-registrations-030: hsl(176, 37%, 68%);
842
- --t-fill-color-product-registrations-040: hsl(176, 37%, 60%);
843
- --t-fill-color-product-registrations-050: hsl(175, 36%, 43%);
844
- --t-fill-color-product-registrations-060: hsl(175, 51%, 34%);
845
- --t-fill-color-product-registrations-070: hsl(174, 51%, 28%);
846
- --t-fill-color-product-registrations-080: hsl(175, 52%, 22%);
847
- --t-fill-color-product-services-010: hsl(88, 31%, 88%);
848
- --t-fill-color-product-services-020: hsl(88, 39%, 75%);
849
- --t-fill-color-product-services-030: hsl(88, 39%, 66%);
850
- --t-fill-color-product-services-040: hsl(88, 40%, 54%);
851
- --t-fill-color-product-services-050: hsl(88, 45%, 41%);
852
- --t-fill-color-product-services-060: hsl(89, 62%, 31%);
853
- --t-fill-color-product-services-070: hsl(89, 62%, 26%);
854
- --t-fill-color-product-services-080: hsl(89, 63%, 21%);
855
- --t-fill-color-product-staff-base: hsl(328, 100%, 45%);
856
- --t-fill-color-product-staff-dark: hsl(328, 100%, 38%);
857
- --t-fill-color-product-staff-darker: hsl(328, 100%, 33%);
858
- --t-fill-color-product-accounts-gradient-brand: linear-gradient(135deg, hsl(203, 86%, 57%), hsl(220, 76%, 57%));
859
- --t-fill-color-product-accounts-gradient-page: linear-gradient(111.72deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
860
- --t-fill-color-product-accounts-gradient-tint: linear-gradient(111.72deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
861
- --t-fill-color-product-api-gradient-brand: linear-gradient(180deg, hsl(221, 100%, 62%), hsl(217, 100%, 52%));
862
- --t-fill-color-product-calendar-gradient-brand: linear-gradient(135deg, hsl(10, 88%, 58%), hsl(8, 60%, 51%));
863
- --t-fill-color-product-calendar-gradient-page: linear-gradient(111.72deg, hsl(5, 80%, 80%), hsl(293, 13%, 74%), hsl(204, 67%, 73%));
864
- --t-fill-color-product-calendar-gradient-tint: linear-gradient(111.72deg, hsl(8, 100%, 94%), hsl(285, 18%, 91%), hsl(204, 67%, 92%));
865
- --t-fill-color-product-cc-gradient-brand: linear-gradient(135deg, hsl(207, 90%, 61%), hsl(123, 38%, 57%));
866
- --t-fill-color-product-checkins-gradient-brand: linear-gradient(135deg, hsl(283, 38%, 59%), hsl(284, 23%, 48%));
867
- --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%));
868
- --t-fill-color-product-checkins-gradient-tint: linear-gradient(111.72deg, hsl(285, 22%, 93%), hsl(225, 35%, 93%) 42%, hsl(204, 67%, 92%));
869
- --t-fill-color-product-giving-gradient-brand: linear-gradient(90deg, hsl(46, 91%, 55%), hsl(41, 89%, 55%));
870
- --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%));
871
- --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%));
872
- --t-fill-color-product-groups-gradient-brand: linear-gradient(135deg, hsl(30, 100%, 59%), hsl(19, 97%, 60%));
873
- --t-fill-color-product-groups-gradient-page: linear-gradient(111.72deg, hsl(17, 88%, 80%), hsl(293, 13%, 74%), hsl(204, 67%, 73%));
874
- --t-fill-color-product-groups-gradient-tint: linear-gradient(111.72deg, hsl(18, 87%, 94%), hsl(300, 12%, 92%), hsl(204, 67%, 92%));
875
- --t-fill-color-product-headcounts-gradient-brand: linear-gradient(135deg, hsl(283, 37%, 59%), hsl(285, 23%, 47%));
876
- --t-fill-color-product-home-gradient-page: linear-gradient(111.72deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
877
- --t-fill-color-product-home-gradient-tint: linear-gradient(111.72deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
878
- --t-fill-color-product-musicstand-gradient-brand: linear-gradient(135deg, hsl(204, 64%, 51%), hsl(211, 55%, 51%));
879
- --t-fill-color-product-people-gradient-brand: linear-gradient(135deg, hsl(205, 86%, 57%), hsl(220, 76%, 57%));
880
- --t-fill-color-product-people-gradient-page: linear-gradient(111.72deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
881
- --t-fill-color-product-people-gradient-tint: linear-gradient(111.72deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
882
- --t-fill-color-product-publishing-gradient-brand: linear-gradient(135deg, hsl(240, 4%, 49%), hsl(240, 6%, 39%));
883
- --t-fill-color-product-publishing-gradient-page: linear-gradient(111.72deg, hsl(217, 5%, 69%), hsl(214, 15%, 69%) 45%, hsl(204, 67%, 73%));
884
- --t-fill-color-product-publishing-gradient-tint: linear-gradient(111.72deg, hsl(210, 4%, 91%), hsl(214, 15%, 91%) 45%, hsl(204, 67%, 92%));
885
- --t-fill-color-product-registrations-gradient-brand: linear-gradient(135deg, hsl(168, 46%, 48%), hsl(175, 35%, 43%));
886
- --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%));
887
- --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%));
888
- --t-fill-color-product-services-gradient-brand: linear-gradient(135deg, hsl(96, 49%, 47%), hsl(89, 52%, 39%));
889
- --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%));
890
- --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%));
891
- --t-fill-color-tag-gray-010: hsl(0, 0%, 93%);
892
- --t-fill-color-tag-gray-020: hsl(0, 0%, 88%);
893
- --t-fill-color-tag-gray-030: hsl(0, 0%, 88%);
894
- --t-fill-color-tag-gray-040: hsl(0, 0%, 81%);
895
- --t-fill-color-tag-blue-010: hsl(220, 100%, 95%);
896
- --t-fill-color-tag-blue-020: hsl(221, 100%, 88%);
897
- --t-fill-color-tag-blue-030: hsl(220, 98%, 81%);
898
- --t-fill-color-tag-blue-040: hsl(220, 98%, 74%);
899
- --t-fill-color-tag-aqua-010: hsl(200, 82%, 89%);
900
- --t-fill-color-tag-aqua-020: hsl(200, 82%, 82%);
901
- --t-fill-color-tag-aqua-030: hsl(201, 76%, 71%);
902
- --t-fill-color-tag-aqua-040: hsl(200, 75%, 64%);
903
- --t-fill-color-tag-teal-010: hsl(163, 53%, 83%);
904
- --t-fill-color-tag-teal-020: hsl(164, 52%, 76%);
905
- --t-fill-color-tag-teal-030: hsl(169, 62%, 64%);
906
- --t-fill-color-tag-teal-040: hsl(169, 62%, 56%);
907
- --t-fill-color-tag-green-010: hsl(98, 59%, 85%);
908
- --t-fill-color-tag-green-020: hsl(99, 59%, 78%);
909
- --t-fill-color-tag-green-030: hsl(112, 57%, 65%);
910
- --t-fill-color-tag-green-040: hsl(112, 57%, 57%);
911
- --t-fill-color-tag-yellow-010: hsl(45, 77%, 85%);
912
- --t-fill-color-tag-yellow-020: hsl(44, 78%, 77%);
913
- --t-fill-color-tag-yellow-030: hsl(44, 92%, 69%);
914
- --t-fill-color-tag-yellow-040: hsl(44, 93%, 61%);
915
- --t-fill-color-tag-orange-010: hsl(22, 89%, 89%);
916
- --t-fill-color-tag-orange-020: hsl(21, 89%, 82%);
917
- --t-fill-color-tag-orange-030: hsl(21, 86%, 72%);
918
- --t-fill-color-tag-orange-040: hsl(21, 86%, 64%);
919
- --t-fill-color-tag-pink-010: hsl(311, 66%, 92%);
920
- --t-fill-color-tag-pink-020: hsl(310, 64%, 85%);
921
- --t-fill-color-tag-pink-030: hsl(324, 78%, 77%);
922
- --t-fill-color-tag-pink-040: hsl(324, 76%, 70%);
923
- --t-fill-color-tag-purple-010: hsl(259, 74%, 93%);
924
- --t-fill-color-tag-purple-020: hsl(259, 74%, 85%);
925
- --t-fill-color-tag-purple-030: hsl(273, 62%, 76%);
926
- --t-fill-color-tag-purple-040: hsl(273, 62%, 70%);
927
- --t-fill-color-tag-magenta-010: hsl(294, 37%, 90%);
928
- --t-fill-color-tag-magenta-020: hsl(291, 40%, 83%);
929
- --t-fill-color-tag-magenta-030: hsl(291, 48%, 70%);
930
- --t-fill-color-tag-magenta-040: hsl(292, 48%, 63%);
931
- --t-fill-color-tag-indigo-010: hsl(234, 78%, 93%);
932
- --t-fill-color-tag-indigo-020: hsl(233, 79%, 87%);
933
- --t-fill-color-tag-indigo-030: hsl(233, 77%, 81%);
934
- --t-fill-color-tag-indigo-040: hsl(236, 79%, 74%);
935
- --t-fill-color-button-neutral-solid-default: hsl(0, 0%, 93%);
936
- --t-fill-color-button-neutral-solid-hover: hsl(0, 0%, 88%);
937
- --t-fill-color-button-neutral-solid-active: hsl(0, 0%, 81%);
938
- --t-fill-color-button-neutral-solid-disabled: hsl(0, 0%, 95%);
939
- --t-fill-color-button-neutral-outline-dim-default: hsla(0, 0%, 100%, 0);
940
- --t-fill-color-button-neutral-outline-dim-hover: hsl(0, 0%, 95%);
941
- --t-fill-color-button-neutral-outline-dim-active: hsl(0, 0%, 93%);
942
- --t-fill-color-button-neutral-outline-dim-disabled: hsl(0, 0%, 98%);
943
- --t-fill-color-button-neutral-ghost-default: hsla(0, 0%, 100%, 0);
944
- --t-fill-color-button-neutral-ghost-hover: hsl(0, 0%, 95%);
945
- --t-fill-color-button-neutral-ghost-active: hsl(0, 0%, 93%);
946
- --t-fill-color-button-neutral-ghost-disabled: hsla(0, 0%, 100%, 0);
947
- --t-fill-color-button-neutral-responsive-header-default: hsla(0, 0%, 0%, 0.1);
948
- --t-fill-color-button-neutral-responsive-header-hover: hsla(0, 0%, 0%, 0.2);
949
- --t-fill-color-button-neutral-responsive-header-active: hsla(0, 0%, 0%, 0.3);
950
- --t-fill-color-button-neutral-responsive-header-disabled: hsla(0, 0%, 0%, 0.05);
951
- --t-fill-color-button-interaction-solid-default: hsl(204, 100%, 40%);
952
- --t-fill-color-button-interaction-solid-hover: hsl(204, 100%, 35%);
953
- --t-fill-color-button-interaction-solid-active: hsl(204, 100%, 30%);
954
- --t-fill-color-button-interaction-solid-disabled: hsl(0, 0%, 95%);
955
- --t-fill-color-button-interaction-outline-dim-default: hsla(0, 0%, 100%, 0);
956
- --t-fill-color-button-interaction-outline-dim-hover: hsl(204, 100%, 97%);
957
- --t-fill-color-button-interaction-outline-dim-active: hsl(203, 94%, 94%);
958
- --t-fill-color-button-interaction-outline-dim-disabled: hsl(0, 0%, 98%);
959
- --t-fill-color-button-interaction-ghost-default: hsla(0, 0%, 100%, 0);
960
- --t-fill-color-button-interaction-ghost-hover: hsl(204, 100%, 97%);
961
- --t-fill-color-button-interaction-ghost-active: hsl(203, 94%, 94%);
962
- --t-fill-color-button-interaction-ghost-disabled: hsla(0, 0%, 100%, 0);
963
- --t-fill-color-button-delete-solid-default: hsl(8, 60%, 47%);
964
- --t-fill-color-button-delete-solid-hover: hsl(8, 60%, 45%);
965
- --t-fill-color-button-delete-solid-active: hsl(8, 60%, 40%);
966
- --t-fill-color-button-delete-solid-disabled: hsl(0, 0%, 95%);
967
- --t-fill-color-button-delete-outline-dim-default: hsla(0, 0%, 100%, 0);
968
- --t-fill-color-button-delete-outline-dim-hover: hsl(7, 60%, 97%);
969
- --t-fill-color-button-delete-outline-dim-active: hsl(9, 59%, 93%);
970
- --t-fill-color-button-delete-outline-dim-disabled: hsl(0, 0%, 98%);
971
- --t-fill-color-button-delete-ghost-default: hsla(0, 0%, 100%, 0);
972
- --t-fill-color-button-delete-ghost-hover: hsl(7, 60%, 97%);
973
- --t-fill-color-button-delete-ghost-active: hsl(9, 59%, 93%);
974
- --t-fill-color-button-delete-ghost-disabled: hsla(0, 0%, 100%, 0);
975
- --t-fill-color-button-pill-default: hsl(0, 0%, 93%);
976
- --t-fill-color-button-pill-hover: hsl(0, 0%, 88%);
977
- --t-fill-color-button-pill-active: hsl(0, 0%, 88%);
978
- --t-fill-color-button-pill-disabled: hsl(0, 0%, 93%);
979
- --t-fill-color-transparency-light-010: hsla(0, 0%, 100%, 0.1);
980
- --t-fill-color-transparency-light-020: hsla(0, 0%, 100%, 0.2);
981
- --t-fill-color-transparency-light-030: hsla(0, 0%, 100%, 0.3);
982
- --t-fill-color-transparency-light-040: hsla(0, 0%, 100%, 0.4);
983
- --t-fill-color-transparency-light-050: hsla(0, 0%, 100%, 0.5);
984
- --t-fill-color-transparency-light-060: hsla(0, 0%, 100%, 0.6);
985
- --t-fill-color-transparency-light-070: hsla(0, 0%, 100%, 0.7);
986
- --t-fill-color-transparency-light-080: hsla(0, 0%, 100%, 0.8);
987
- --t-fill-color-transparency-light-090: hsla(0, 0%, 100%, 0.9);
988
- --t-fill-color-transparency-dark-010: hsla(0, 0%, 0%, 0.1);
989
- --t-fill-color-transparency-dark-020: hsla(0, 0%, 0%, 0.2);
990
- --t-fill-color-transparency-dark-030: hsla(0, 0%, 0%, 0.3);
991
- --t-fill-color-transparency-dark-040: hsla(0, 0%, 0%, 0.4);
992
- --t-fill-color-transparency-dark-050: hsla(0, 0%, 0%, 0.5);
993
- --t-fill-color-transparency-dark-060: hsla(0, 0%, 0%, 0.6);
994
- --t-fill-color-transparency-dark-070: hsla(0, 0%, 0%, 0.7);
995
- --t-fill-color-transparency-dark-080: hsla(0, 0%, 0%, 0.8);
996
- --t-fill-color-transparency-dark-090: hsla(0, 0%, 0%, 0.9);
997
- --t-surface-color-card: hsl(0, 0%, 100%);
998
- --t-surface-color-canvas: hsl(0, 0%, 100%);
999
- --t-border-color-default-base: hsl(0, 0%, 88%);
1000
- --t-border-color-default-dark: hsl(0, 0%, 81%);
1001
- --t-border-color-default-darker: hsl(0, 0%, 68%);
1002
- --t-border-color-default-darkest: hsl(0, 0%, 58%);
1003
- --t-border-color-default-disabled: hsl(0, 0%, 88%);
1004
- --t-border-color-default-dim: hsl(0, 0%, 95%);
1005
- --t-border-color-default-white: hsl(0, 0%, 100%);
1006
- --t-border-color-status-neutral: hsl(0, 0%, 58%);
1007
- --t-border-color-status-info: hsl(204, 100%, 40%);
1008
- --t-border-color-status-success: hsl(97, 57%, 40%);
1009
- --t-border-color-status-warning: hsl(42, 84%, 63%);
1010
- --t-border-color-status-error: hsl(8, 60%, 47%);
1011
- --t-border-color-button-neutral: hsl(0, 0%, 88%);
1012
- --t-border-color-button-info: hsl(204, 100%, 40%);
1013
- --t-border-color-button-create: hsl(96, 57%, 33%);
1014
- --t-border-color-button-delete: hsl(8, 60%, 47%);
1015
- --t-border-color-control-neutral: hsl(0, 0%, 68%);
1016
- --t-border-color-control-info: hsl(204, 100%, 40%);
1017
- --t-border-color-control-success: hsl(97, 57%, 40%);
1018
- --t-border-color-control-warning: hsl(42, 84%, 63%);
1019
- --t-border-color-control-error: hsl(8, 60%, 47%);
1020
- --t-border-color-control-disabled: hsl(0, 0%, 88%);
1021
- --t-form-background-color: var(--t-fill-color-neutral-100);
1022
- --t-form-background-color-disabled: var(--t-fill-color-neutral-070);
1023
- --t-form-background-color-error: var(--t-fill-color-neutral-100);
1024
- --t-form-background-color-readonly: var(--t-fill-color-neutral-070);
1025
- --t-form-border-color: var(--t-border-color-default-base);
1026
- --t-form-border-color-disabled: var(--t-border-color-default-base);
1027
- --t-form-border-color-error: var(--t-border-color-status-error);
1028
- --t-form-border-color-focus: var(--t-fill-color-interaction-default);
1029
- --t-form-border-color-hover: var(--t-border-color-default-dark);
1030
- --t-form-border-color-readonly: hsla(0, 0%, 100%, 0);
1031
- --t-form-border-radius: var(--t-border-radius-md);
1032
- --t-form-border-width: var(--t-border-width-default);
1033
- --t-form-font-color: var(--t-text-color-default-primary);
1034
- --t-form-font-color-disabled: var(--t-text-color-default-disabled);
1035
- --t-form-font-color-error: var(--t-text-color-status-error);
1036
- --t-form-font-color-readonly: var(--t-text-color-default-primary);
1037
- --t-form-picker-icon-color: var(--t-icon-color-default-primary);
1038
- --t-form-placeholder-color: var(--t-text-color-default-placeholder);
1039
- --t-border-size-default: var(--t-border-width-default);
1040
- --t-border-size-thick: var(--t-border-width-thick);
1041
- --t-font-weight-semi-bold: var(--t-font-weight-semibold);
1042
- --t-icon-color-status-neutral-dark: hsl(0, 0%, 24%);
1043
- --t-icon-color-status-info-secondary: hsl(204, 100%, 40%);
1044
- --t-fill-color-alert-info: hsl(204, 94%, 49%);
1045
- --t-fill-color-alert-success: hsl(122, 60%, 41%);
1046
- --t-fill-color-alert-warning: hsl(43, 96%, 58%);
1047
- --t-fill-color-alert-error: hsl(4, 77%, 59%);
1048
- --t-fill-color-button-neutral-outline-dim-disabled-solid: hsl(0, 0%, 98%);
1049
- --t-fill-color-button-neutral-ghost-disabled-solid: hsl(0, 0%, 98%);
1050
- --t-fill-color-button-create-solid-default: hsl(96, 57%, 33%);
1051
- --t-fill-color-button-create-solid-hover: hsl(97, 57%, 28%);
1052
- --t-fill-color-button-create-solid-active: hsl(97, 57%, 23%);
1053
- --t-fill-color-button-create-solid-disabled: hsl(0, 0%, 81%);
1054
- --t-fill-color-button-create-ghost-default: hsla(0, 0%, 100%, 0);
1055
- --t-fill-color-button-create-ghost-hover: hsl(96, 60%, 95%);
1056
- --t-fill-color-button-create-ghost-active: hsl(97, 57%, 90%);
1057
- --t-fill-color-button-create-ghost-disabled: hsla(0, 0%, 100%, 0);
1058
- }
1059
-
1060
- /**
1061
- * Do not edit directly, this file was auto-generated.
1062
- */
1063
-
1064
- .symbol {
1065
- display: inline-block;
1066
- vertical-align: text-top;
1067
- fill: currentColor;
1068
- height: 1em;
1069
- width: 1em;
1070
- }
1071
-
1072
- .tds-btn {
1073
- --tds-btn-padding-x: 12px;
1074
- --tds-btn-padding-truncated-x: 8px;
1075
- --tds-btn-padding-y: 3px;
1076
- --tds-btn-font-size: 16px;
1077
- --tds-btn-font-weight: 400;
1078
- --tds-btn-line-height: 1.5;
1079
- --tds-btn-color: var(--t-text-color-default-headline);
1080
- --tds-btn-bg: transparent;
1081
- --tds-btn-border-width: var(--t-border-width-default);
1082
- --tds-btn-border-color: transparent;
1083
- --tds-btn-border-radius: var(--t-border-radius-md);
1084
- --tds-btn-border-color-hover: transparent;
1085
- --tds-btn-disabled-opacity: 1;
1086
- --tds-btn-min-height: 32px;
1087
- --tds-btn-text-decoration: none;
1088
- --tds-btn-attention-icon-size: 1em;
1089
- display: inline-flex;
1090
- gap: 1ex;
1091
- align-items: center;
1092
- justify-content: center;
1093
- width: auto;
1094
- min-height: var(--tds-btn-min-height);
1095
- padding: var(--tds-btn-padding-y) var(--tds-btn-padding-x);
1096
- font-size: var(--tds-btn-font-size);
1097
- font-weight: var(--tds-btn-font-weight);
1098
- line-height: var(--tds-btn-line-height);
1099
- vertical-align: middle;
1100
- color: var(--tds-btn-color);
1101
- text-align: center;
1102
- -webkit-text-decoration: var(--tds-btn-text-decoration);
1103
- text-decoration: var(--tds-btn-text-decoration);
1104
- cursor: pointer;
1105
- -webkit-user-select: none;
1106
- -moz-user-select: none;
1107
- user-select: none;
1108
- background-color: var(--tds-btn-bg);
1109
- background-clip: padding-box;
1110
- border: var(--tds-btn-border-width) solid var(--tds-btn-border-color);
1111
- border-radius: var(--tds-btn-border-radius);
1112
- transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
1113
- }
1114
-
1115
- .tds-btn:where(.tds-btn--icononly,:has(.prefix,svg:not(.suffix))) {
1116
- padding-left: var(--tds-btn-padding-truncated-x);
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%);
635
+ --t-text-color-default-inverted:hsl(0, 0%, 100%);
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%);
657
+ --t-text-color-tag-bold-indigo:hsl(241, 59%, 28%);
658
+ --t-text-color-tag-bold-blue:hsl(224, 47%, 31%);
659
+ --t-text-color-tag-bold-aqua:hsl(209, 77%, 22%);
660
+ --t-text-color-tag-bold-teal:hsl(180, 95%, 15%);
661
+ --t-text-color-tag-bold-green:hsl(100, 93%, 17%);
662
+ --t-text-color-tag-bold-yellow:hsl(29, 100%, 23%);
663
+ --t-text-color-tag-bold-orange:hsl(18, 100%, 18%);
664
+ --t-text-color-tag-bold-pink:hsl(327, 88%, 20%);
665
+ --t-text-color-tag-bold-purple:hsl(268, 71%, 27%);
666
+ --t-text-color-tag-bold-magenta:hsl(285, 71%, 20%);
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%);
671
+ --t-icon-color-default-inverted:hsl(0, 0%, 100%);
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%);
676
+ --t-icon-color-status-success-primary:hsl(96, 57%, 33%);
677
+ --t-icon-color-status-success-secondary:hsl(97, 57%, 40%);
678
+ --t-icon-color-status-warning-primary:hsl(42, 84%, 49%);
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%);
699
+ --t-fill-color-control-secondary:hsl(97, 57%, 40%);
700
+ --t-fill-color-control-error:hsl(8, 60%, 47%);
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%);
708
+ --t-fill-color-status-success-solid:hsl(96, 57%, 33%);
709
+ --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
710
+ --t-fill-color-status-success-dim:hsl(120, 12%, 14%);
711
+ --t-fill-color-status-warning-solid:hsl(42, 84%, 63%);
712
+ --t-fill-color-status-warning-ghost:hsl(41, 18%, 17%);
713
+ --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
714
+ --t-fill-color-status-error-solid:hsl(8, 60%, 47%);
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);
718
+ --t-fill-color-product-accounts-010:hsl(212, 54%, 93%);
719
+ --t-fill-color-product-accounts-020:hsl(209, 53%, 90%);
720
+ --t-fill-color-product-accounts-030:hsl(210, 56%, 70%);
721
+ --t-fill-color-product-accounts-040:hsl(210, 54%, 60%);
722
+ --t-fill-color-product-accounts-050:hsl(210, 55%, 50%);
723
+ --t-fill-color-product-accounts-060:hsl(210, 65%, 40%);
724
+ --t-fill-color-product-accounts-070:hsl(211, 70%, 32%);
725
+ --t-fill-color-product-accounts-080:hsl(210, 75%, 25%);
726
+ --t-fill-color-product-calendar-010:hsl(8, 61%, 90%);
727
+ --t-fill-color-product-calendar-020:hsl(8, 61%, 70%);
728
+ --t-fill-color-product-calendar-030:hsl(8, 72%, 59%);
729
+ --t-fill-color-product-calendar-040:hsl(8, 65%, 55%);
730
+ --t-fill-color-product-calendar-050:hsl(9, 61%, 50%);
731
+ --t-fill-color-product-calendar-060:hsl(8, 65%, 42%);
732
+ --t-fill-color-product-calendar-070:hsl(7, 65%, 34%);
733
+ --t-fill-color-product-calendar-080:hsl(9, 61%, 27%);
734
+ --t-fill-color-product-checkins-010:hsl(285, 20%, 92%);
735
+ --t-fill-color-product-checkins-020:hsl(283, 22%, 75%);
736
+ --t-fill-color-product-checkins-030:hsl(284, 22%, 64%);
737
+ --t-fill-color-product-checkins-040:hsl(283, 22%, 55%);
738
+ --t-fill-color-product-checkins-050:hsl(283, 22%, 48%);
739
+ --t-fill-color-product-checkins-060:hsl(283, 27%, 42%);
740
+ --t-fill-color-product-checkins-070:hsl(284, 33%, 34%);
741
+ --t-fill-color-product-checkins-080:hsl(283, 33%, 27%);
742
+ --t-fill-color-product-giving-010:hsl(41, 95%, 93%);
743
+ --t-fill-color-product-giving-020:hsl(42, 95%, 83%);
744
+ --t-fill-color-product-giving-030:hsl(43, 95%, 75%);
745
+ --t-fill-color-product-giving-040:hsl(43, 88%, 70%);
746
+ --t-fill-color-product-giving-050:hsl(43, 88%, 64%);
747
+ --t-fill-color-product-giving-060:hsl(42, 84%, 55%);
748
+ --t-fill-color-product-giving-070:hsl(42, 84%, 48%);
749
+ --t-fill-color-product-giving-080:hsl(42, 100%, 40%);
750
+ --t-fill-color-product-groups-010:hsl(18, 95%, 92%);
751
+ --t-fill-color-product-groups-020:hsl(17, 96%, 80%);
752
+ --t-fill-color-product-groups-030:hsl(17, 96%, 70%);
753
+ --t-fill-color-product-groups-040:hsl(17, 96%, 63%);
754
+ --t-fill-color-product-groups-050:hsl(17, 88%, 55%);
755
+ --t-fill-color-product-groups-060:hsl(12, 70%, 48%);
756
+ --t-fill-color-product-groups-070:hsl(12, 70%, 40%);
757
+ --t-fill-color-product-groups-080:hsl(14, 70%, 34%);
758
+ --t-fill-color-product-home-010:hsl(221, 89%, 93%);
759
+ --t-fill-color-product-home-020:hsl(221, 91%, 91%);
760
+ --t-fill-color-product-home-030:hsl(221, 91%, 87%);
761
+ --t-fill-color-product-home-040:hsl(221, 91%, 62%);
762
+ --t-fill-color-product-home-050:hsl(221, 91%, 55%);
763
+ --t-fill-color-product-home-060:hsl(221, 90%, 50%);
764
+ --t-fill-color-product-home-070:hsl(221, 90%, 45%);
765
+ --t-fill-color-product-home-080:hsl(218, 84%, 25%);
766
+ --t-fill-color-product-people-010:hsl(219, 73%, 91%);
767
+ --t-fill-color-product-people-020:hsl(220, 69%, 81%);
768
+ --t-fill-color-product-people-030:hsl(221, 73%, 71%);
769
+ --t-fill-color-product-people-040:hsl(221, 73%, 65%);
770
+ --t-fill-color-product-people-050:hsl(220, 74%, 57%);
771
+ --t-fill-color-product-people-060:hsl(220, 68%, 51%);
772
+ --t-fill-color-product-people-070:hsl(220, 68%, 41%);
773
+ --t-fill-color-product-people-080:hsl(221, 68%, 31%);
774
+ --t-fill-color-product-publishing-010:hsl(220, 4%, 86%);
775
+ --t-fill-color-product-publishing-020:hsl(222, 10%, 60%);
776
+ --t-fill-color-product-publishing-030:hsl(221, 11%, 50%);
777
+ --t-fill-color-product-publishing-040:hsl(222, 12%, 39%);
778
+ --t-fill-color-product-publishing-050:hsl(220, 12%, 31%);
779
+ --t-fill-color-product-publishing-060:hsl(220, 11%, 26%);
780
+ --t-fill-color-product-publishing-070:hsl(217, 12%, 22%);
781
+ --t-fill-color-product-publishing-080:hsl(214, 11%, 12%);
782
+ --t-fill-color-product-registrations-010:hsl(173, 28%, 89%);
783
+ --t-fill-color-product-registrations-020:hsl(176, 38%, 78%);
784
+ --t-fill-color-product-registrations-030:hsl(176, 37%, 68%);
785
+ --t-fill-color-product-registrations-040:hsl(176, 37%, 60%);
786
+ --t-fill-color-product-registrations-050:hsl(175, 36%, 43%);
787
+ --t-fill-color-product-registrations-060:hsl(175, 51%, 34%);
788
+ --t-fill-color-product-registrations-070:hsl(174, 51%, 28%);
789
+ --t-fill-color-product-registrations-080:hsl(175, 52%, 22%);
790
+ --t-fill-color-product-services-010:hsl(88, 31%, 88%);
791
+ --t-fill-color-product-services-020:hsl(88, 39%, 75%);
792
+ --t-fill-color-product-services-030:hsl(88, 39%, 66%);
793
+ --t-fill-color-product-services-040:hsl(88, 40%, 54%);
794
+ --t-fill-color-product-services-050:hsl(88, 45%, 41%);
795
+ --t-fill-color-product-services-060:hsl(89, 62%, 31%);
796
+ --t-fill-color-product-services-070:hsl(89, 62%, 26%);
797
+ --t-fill-color-product-services-080:hsl(89, 63%, 21%);
798
+ --t-fill-color-product-staff-base:hsl(328, 100%, 45%);
799
+ --t-fill-color-product-staff-dark:hsl(328, 100%, 38%);
800
+ --t-fill-color-product-staff-darker:hsl(328, 100%, 33%);
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%);
827
+ --t-fill-color-tag-blue-030:hsl(220, 98%, 81%);
828
+ --t-fill-color-tag-blue-040:hsl(220, 98%, 74%);
829
+ --t-fill-color-tag-aqua-010:hsl(217, 25%, 24%);
830
+ --t-fill-color-tag-aqua-020:hsl(222, 27%, 22%);
831
+ --t-fill-color-tag-aqua-030:hsl(201, 76%, 71%);
832
+ --t-fill-color-tag-aqua-040:hsl(200, 75%, 64%);
833
+ --t-fill-color-tag-teal-010:hsl(150, 20%, 24%);
834
+ --t-fill-color-tag-teal-020:hsl(147, 16%, 22%);
835
+ --t-fill-color-tag-teal-030:hsl(169, 62%, 64%);
836
+ --t-fill-color-tag-teal-040:hsl(169, 62%, 56%);
837
+ --t-fill-color-tag-green-010:hsl(108, 21%, 22%);
838
+ --t-fill-color-tag-green-020:hsl(109, 22%, 20%);
839
+ --t-fill-color-tag-green-030:hsl(112, 57%, 65%);
840
+ --t-fill-color-tag-green-040:hsl(112, 57%, 57%);
841
+ --t-fill-color-tag-yellow-010:hsl(38, 27%, 23%);
842
+ --t-fill-color-tag-yellow-020:hsl(37, 27%, 21%);
843
+ --t-fill-color-tag-yellow-030:hsl(44, 92%, 69%);
844
+ --t-fill-color-tag-yellow-040:hsl(44, 93%, 61%);
845
+ --t-fill-color-tag-orange-010:hsl(12, 25%, 23%);
846
+ --t-fill-color-tag-orange-020:hsl(10, 29%, 21%);
847
+ --t-fill-color-tag-orange-030:hsl(21, 86%, 72%);
848
+ --t-fill-color-tag-orange-040:hsl(21, 86%, 64%);
849
+ --t-fill-color-tag-pink-010:hsl(331, 22%, 24%);
850
+ --t-fill-color-tag-pink-020:hsl(338, 25%, 21%);
851
+ --t-fill-color-tag-pink-030:hsl(324, 78%, 77%);
852
+ --t-fill-color-tag-pink-040:hsl(324, 76%, 70%);
853
+ --t-fill-color-tag-purple-010:hsl(260, 25%, 24%);
854
+ --t-fill-color-tag-purple-020:hsl(254, 27%, 22%);
855
+ --t-fill-color-tag-purple-030:hsl(273, 62%, 76%);
856
+ --t-fill-color-tag-purple-040:hsl(273, 62%, 70%);
857
+ --t-fill-color-tag-magenta-010:hsl(276, 18%, 22%);
858
+ --t-fill-color-tag-magenta-020:hsl(277, 18%, 20%);
859
+ --t-fill-color-tag-magenta-030:hsl(291, 48%, 70%);
860
+ --t-fill-color-tag-magenta-040:hsl(292, 48%, 63%);
861
+ --t-fill-color-tag-indigo-010:hsl(233, 30%, 27%);
862
+ --t-fill-color-tag-indigo-020:hsl(233, 30%, 23%);
863
+ --t-fill-color-tag-indigo-030:hsl(233, 77%, 81%);
864
+ --t-fill-color-tag-indigo-040:hsl(236, 79%, 74%);
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);
877
+ --t-fill-color-button-neutral-responsive-header-default:hsla(0, 0%, 0%, 0.1);
878
+ --t-fill-color-button-neutral-responsive-header-hover:hsla(0, 0%, 0%, 0.2);
879
+ --t-fill-color-button-neutral-responsive-header-active:hsla(0, 0%, 0%, 0.3);
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%);
894
+ --t-fill-color-button-delete-solid-hover:hsl(8, 60%, 45%);
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%);
951
+ }
952
+
953
+ @media (prefers-color-scheme: dark){
954
+ :root[data-color-mode="system"]{
955
+ color-scheme:dark;
956
+ --t-text-color-default-headline:hsl(0, 0%, 94%);
957
+ --t-text-color-default-primary:hsl(0, 0%, 80%);
958
+ --t-text-color-default-secondary:hsl(0, 0%, 54%);
959
+ --t-text-color-default-disabled:hsl(0, 0%, 25%);
960
+ --t-text-color-default-placeholder:hsl(0, 0%, 38%);
961
+ --t-text-color-default-inverted:hsl(0, 0%, 100%);
962
+ --t-text-color-interaction-primary:hsl(204, 68%, 55%);
963
+ --t-text-color-interaction-hover:hsl(204, 68%, 50%);
964
+ --t-text-color-interaction-active:hsl(204, 68%, 45%);
965
+ --t-text-color-interaction-visited:hsl(204, 68%, 50%);
966
+ --t-text-color-status-neutral:hsl(0, 0%, 80%);
967
+ --t-text-color-status-info:hsl(204, 68%, 55%);
968
+ --t-text-color-status-success:hsl(97, 57%, 41%);
969
+ --t-text-color-status-warning:hsl(42, 84%, 55%);
970
+ --t-text-color-status-error:hsl(8, 61%, 61%);
971
+ --t-text-color-tag-subtle-gray:hsl(0, 0%, 80%);
972
+ --t-text-color-tag-subtle-blue:hsl(223, 46%, 84%);
973
+ --t-text-color-tag-subtle-indigo:hsl(233, 78%, 84%);
974
+ --t-text-color-tag-subtle-aqua:hsl(208, 77%, 85%);
975
+ --t-text-color-tag-subtle-teal:hsl(180, 95%, 74%);
976
+ --t-text-color-tag-subtle-green:hsl(99, 93%, 84%);
977
+ --t-text-color-tag-subtle-yellow:hsl(29, 100%, 85%);
978
+ --t-text-color-tag-subtle-orange:hsl(18, 100%, 85%);
979
+ --t-text-color-tag-subtle-pink:hsl(328, 89%, 89%);
980
+ --t-text-color-tag-subtle-purple:hsl(268, 70%, 88%);
981
+ --t-text-color-tag-subtle-magenta:hsl(285, 70%, 88%);
982
+ --t-text-color-tag-bold-gray:hsl(0, 0%, 17%);
983
+ --t-text-color-tag-bold-indigo:hsl(241, 59%, 28%);
984
+ --t-text-color-tag-bold-blue:hsl(224, 47%, 31%);
985
+ --t-text-color-tag-bold-aqua:hsl(209, 77%, 22%);
986
+ --t-text-color-tag-bold-teal:hsl(180, 95%, 15%);
987
+ --t-text-color-tag-bold-green:hsl(100, 93%, 17%);
988
+ --t-text-color-tag-bold-yellow:hsl(29, 100%, 23%);
989
+ --t-text-color-tag-bold-orange:hsl(18, 100%, 18%);
990
+ --t-text-color-tag-bold-pink:hsl(327, 88%, 20%);
991
+ --t-text-color-tag-bold-purple:hsl(268, 71%, 27%);
992
+ --t-text-color-tag-bold-magenta:hsl(285, 71%, 20%);
993
+ --t-icon-color-default-primary:hsl(0, 0%, 80%);
994
+ --t-icon-color-default-secondary:hsl(0, 0%, 54%);
995
+ --t-icon-color-default-dim:hsl(0, 0%, 38%);
996
+ --t-icon-color-default-disabled:hsl(0, 0%, 25%);
997
+ --t-icon-color-default-inverted:hsl(0, 0%, 100%);
998
+ --t-icon-color-status-neutral-primary:hsl(0, 0%, 54%);
999
+ --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
1000
+ --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
1001
+ --t-icon-color-status-info-primary:hsl(204, 68%, 55%);
1002
+ --t-icon-color-status-success-primary:hsl(96, 57%, 33%);
1003
+ --t-icon-color-status-success-secondary:hsl(97, 57%, 40%);
1004
+ --t-icon-color-status-warning-primary:hsl(42, 84%, 49%);
1005
+ --t-icon-color-status-error-primary:hsl(8, 61%, 61%);
1006
+ --t-fill-color-neutral-100:hsl(0, 0%, 10%);
1007
+ --t-fill-color-neutral-000:hsl(0, 0%, 98%);
1008
+ --t-fill-color-neutral-010:hsl(0, 0%, 88%);
1009
+ --t-fill-color-neutral-020:hsl(0, 0%, 68%);
1010
+ --t-fill-color-neutral-025:hsl(0, 0%, 58%);
1011
+ --t-fill-color-neutral-030:hsl(0, 0%, 50%);
1012
+ --t-fill-color-neutral-040:hsl(0, 0%, 32%);
1013
+ --t-fill-color-neutral-050:hsl(0, 0%, 24%);
1014
+ --t-fill-color-neutral-060:hsl(0, 0%, 19%);
1015
+ --t-fill-color-neutral-070:hsl(0, 0%, 17%);
1016
+ --t-fill-color-neutral-080:hsl(0, 0%, 15%);
1017
+ --t-fill-color-neutral-090:hsl(0, 0%, 12%);
1018
+ --t-fill-color-interaction-default:hsl(204, 100%, 35%);
1019
+ --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
1020
+ --t-fill-color-interaction-active:hsl(204, 80%, 45%);
1021
+ --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
1022
+ --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
1023
+ --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
1024
+ --t-fill-color-control-primary:hsl(204, 100%, 35%);
1025
+ --t-fill-color-control-secondary:hsl(97, 57%, 40%);
1026
+ --t-fill-color-control-error:hsl(8, 60%, 47%);
1027
+ --t-fill-color-control-disabled:hsl(0, 0%, 20%);
1028
+ --t-fill-color-status-neutral-solid:hsl(0, 0%, 24%);
1029
+ --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
1030
+ --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
1031
+ --t-fill-color-status-info-solid:hsl(204, 100%, 35%);
1032
+ --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
1033
+ --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
1034
+ --t-fill-color-status-success-solid:hsl(96, 57%, 33%);
1035
+ --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
1036
+ --t-fill-color-status-success-dim:hsl(120, 12%, 14%);
1037
+ --t-fill-color-status-warning-solid:hsl(42, 84%, 63%);
1038
+ --t-fill-color-status-warning-ghost:hsl(41, 18%, 17%);
1039
+ --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
1040
+ --t-fill-color-status-error-solid:hsl(8, 60%, 47%);
1041
+ --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
1042
+ --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
1043
+ --t-fill-color-tooltip-primary:hsla(0, 0%, 24%, 0.9);
1044
+ --t-fill-color-product-accounts-010:hsl(212, 54%, 93%);
1045
+ --t-fill-color-product-accounts-020:hsl(209, 53%, 90%);
1046
+ --t-fill-color-product-accounts-030:hsl(210, 56%, 70%);
1047
+ --t-fill-color-product-accounts-040:hsl(210, 54%, 60%);
1048
+ --t-fill-color-product-accounts-050:hsl(210, 55%, 50%);
1049
+ --t-fill-color-product-accounts-060:hsl(210, 65%, 40%);
1050
+ --t-fill-color-product-accounts-070:hsl(211, 70%, 32%);
1051
+ --t-fill-color-product-accounts-080:hsl(210, 75%, 25%);
1052
+ --t-fill-color-product-calendar-010:hsl(8, 61%, 90%);
1053
+ --t-fill-color-product-calendar-020:hsl(8, 61%, 70%);
1054
+ --t-fill-color-product-calendar-030:hsl(8, 72%, 59%);
1055
+ --t-fill-color-product-calendar-040:hsl(8, 65%, 55%);
1056
+ --t-fill-color-product-calendar-050:hsl(9, 61%, 50%);
1057
+ --t-fill-color-product-calendar-060:hsl(8, 65%, 42%);
1058
+ --t-fill-color-product-calendar-070:hsl(7, 65%, 34%);
1059
+ --t-fill-color-product-calendar-080:hsl(9, 61%, 27%);
1060
+ --t-fill-color-product-checkins-010:hsl(285, 20%, 92%);
1061
+ --t-fill-color-product-checkins-020:hsl(283, 22%, 75%);
1062
+ --t-fill-color-product-checkins-030:hsl(284, 22%, 64%);
1063
+ --t-fill-color-product-checkins-040:hsl(283, 22%, 55%);
1064
+ --t-fill-color-product-checkins-050:hsl(283, 22%, 48%);
1065
+ --t-fill-color-product-checkins-060:hsl(283, 27%, 42%);
1066
+ --t-fill-color-product-checkins-070:hsl(284, 33%, 34%);
1067
+ --t-fill-color-product-checkins-080:hsl(283, 33%, 27%);
1068
+ --t-fill-color-product-giving-010:hsl(41, 95%, 93%);
1069
+ --t-fill-color-product-giving-020:hsl(42, 95%, 83%);
1070
+ --t-fill-color-product-giving-030:hsl(43, 95%, 75%);
1071
+ --t-fill-color-product-giving-040:hsl(43, 88%, 70%);
1072
+ --t-fill-color-product-giving-050:hsl(43, 88%, 64%);
1073
+ --t-fill-color-product-giving-060:hsl(42, 84%, 55%);
1074
+ --t-fill-color-product-giving-070:hsl(42, 84%, 48%);
1075
+ --t-fill-color-product-giving-080:hsl(42, 100%, 40%);
1076
+ --t-fill-color-product-groups-010:hsl(18, 95%, 92%);
1077
+ --t-fill-color-product-groups-020:hsl(17, 96%, 80%);
1078
+ --t-fill-color-product-groups-030:hsl(17, 96%, 70%);
1079
+ --t-fill-color-product-groups-040:hsl(17, 96%, 63%);
1080
+ --t-fill-color-product-groups-050:hsl(17, 88%, 55%);
1081
+ --t-fill-color-product-groups-060:hsl(12, 70%, 48%);
1082
+ --t-fill-color-product-groups-070:hsl(12, 70%, 40%);
1083
+ --t-fill-color-product-groups-080:hsl(14, 70%, 34%);
1084
+ --t-fill-color-product-home-010:hsl(221, 89%, 93%);
1085
+ --t-fill-color-product-home-020:hsl(221, 91%, 91%);
1086
+ --t-fill-color-product-home-030:hsl(221, 91%, 87%);
1087
+ --t-fill-color-product-home-040:hsl(221, 91%, 62%);
1088
+ --t-fill-color-product-home-050:hsl(221, 91%, 55%);
1089
+ --t-fill-color-product-home-060:hsl(221, 90%, 50%);
1090
+ --t-fill-color-product-home-070:hsl(221, 90%, 45%);
1091
+ --t-fill-color-product-home-080:hsl(218, 84%, 25%);
1092
+ --t-fill-color-product-people-010:hsl(219, 73%, 91%);
1093
+ --t-fill-color-product-people-020:hsl(220, 69%, 81%);
1094
+ --t-fill-color-product-people-030:hsl(221, 73%, 71%);
1095
+ --t-fill-color-product-people-040:hsl(221, 73%, 65%);
1096
+ --t-fill-color-product-people-050:hsl(220, 74%, 57%);
1097
+ --t-fill-color-product-people-060:hsl(220, 68%, 51%);
1098
+ --t-fill-color-product-people-070:hsl(220, 68%, 41%);
1099
+ --t-fill-color-product-people-080:hsl(221, 68%, 31%);
1100
+ --t-fill-color-product-publishing-010:hsl(220, 4%, 86%);
1101
+ --t-fill-color-product-publishing-020:hsl(222, 10%, 60%);
1102
+ --t-fill-color-product-publishing-030:hsl(221, 11%, 50%);
1103
+ --t-fill-color-product-publishing-040:hsl(222, 12%, 39%);
1104
+ --t-fill-color-product-publishing-050:hsl(220, 12%, 31%);
1105
+ --t-fill-color-product-publishing-060:hsl(220, 11%, 26%);
1106
+ --t-fill-color-product-publishing-070:hsl(217, 12%, 22%);
1107
+ --t-fill-color-product-publishing-080:hsl(214, 11%, 12%);
1108
+ --t-fill-color-product-registrations-010:hsl(173, 28%, 89%);
1109
+ --t-fill-color-product-registrations-020:hsl(176, 38%, 78%);
1110
+ --t-fill-color-product-registrations-030:hsl(176, 37%, 68%);
1111
+ --t-fill-color-product-registrations-040:hsl(176, 37%, 60%);
1112
+ --t-fill-color-product-registrations-050:hsl(175, 36%, 43%);
1113
+ --t-fill-color-product-registrations-060:hsl(175, 51%, 34%);
1114
+ --t-fill-color-product-registrations-070:hsl(174, 51%, 28%);
1115
+ --t-fill-color-product-registrations-080:hsl(175, 52%, 22%);
1116
+ --t-fill-color-product-services-010:hsl(88, 31%, 88%);
1117
+ --t-fill-color-product-services-020:hsl(88, 39%, 75%);
1118
+ --t-fill-color-product-services-030:hsl(88, 39%, 66%);
1119
+ --t-fill-color-product-services-040:hsl(88, 40%, 54%);
1120
+ --t-fill-color-product-services-050:hsl(88, 45%, 41%);
1121
+ --t-fill-color-product-services-060:hsl(89, 62%, 31%);
1122
+ --t-fill-color-product-services-070:hsl(89, 62%, 26%);
1123
+ --t-fill-color-product-services-080:hsl(89, 63%, 21%);
1124
+ --t-fill-color-product-staff-base:hsl(328, 100%, 45%);
1125
+ --t-fill-color-product-staff-dark:hsl(328, 100%, 38%);
1126
+ --t-fill-color-product-staff-darker:hsl(328, 100%, 33%);
1127
+ --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
1128
+ --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
1129
+ --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
1130
+ --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(9, 29%, 13%), hsl(276, 8%, 12%), hsl(203, 37%, 11%));
1131
+ --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%));
1132
+ --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 11%, 14%), hsl(266, 10%, 14%) 42%, hsl(203, 37%, 11%));
1133
+ --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%));
1134
+ --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%));
1135
+ --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(23, 46%, 18%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
1136
+ --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(23, 29%, 14%), hsl(276, 7%, 14%), hsl(203, 37%, 11%));
1137
+ --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
1138
+ --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
1139
+ --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
1140
+ --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
1141
+ --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(225, 11%, 22%), hsl(227, 20%, 18%) 45%, hsl(204, 70%, 12%));
1142
+ --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(220, 7%, 16%), hsl(227, 12%, 14%) 45%, hsl(203, 37%, 11%));
1143
+ --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%));
1144
+ --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%));
1145
+ --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%));
1146
+ --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%));
1147
+ --t-fill-color-tag-gray-010:hsl(0, 0%, 19%);
1148
+ --t-fill-color-tag-gray-020:hsl(0, 0%, 17%);
1149
+ --t-fill-color-tag-gray-030:hsl(0, 0%, 68%);
1150
+ --t-fill-color-tag-gray-040:hsl(0, 0%, 58%);
1151
+ --t-fill-color-tag-blue-010:hsl(229, 22%, 24%);
1152
+ --t-fill-color-tag-blue-020:hsl(233, 27%, 23%);
1153
+ --t-fill-color-tag-blue-030:hsl(220, 98%, 81%);
1154
+ --t-fill-color-tag-blue-040:hsl(220, 98%, 74%);
1155
+ --t-fill-color-tag-aqua-010:hsl(217, 25%, 24%);
1156
+ --t-fill-color-tag-aqua-020:hsl(222, 27%, 22%);
1157
+ --t-fill-color-tag-aqua-030:hsl(201, 76%, 71%);
1158
+ --t-fill-color-tag-aqua-040:hsl(200, 75%, 64%);
1159
+ --t-fill-color-tag-teal-010:hsl(150, 20%, 24%);
1160
+ --t-fill-color-tag-teal-020:hsl(147, 16%, 22%);
1161
+ --t-fill-color-tag-teal-030:hsl(169, 62%, 64%);
1162
+ --t-fill-color-tag-teal-040:hsl(169, 62%, 56%);
1163
+ --t-fill-color-tag-green-010:hsl(108, 21%, 22%);
1164
+ --t-fill-color-tag-green-020:hsl(109, 22%, 20%);
1165
+ --t-fill-color-tag-green-030:hsl(112, 57%, 65%);
1166
+ --t-fill-color-tag-green-040:hsl(112, 57%, 57%);
1167
+ --t-fill-color-tag-yellow-010:hsl(38, 27%, 23%);
1168
+ --t-fill-color-tag-yellow-020:hsl(37, 27%, 21%);
1169
+ --t-fill-color-tag-yellow-030:hsl(44, 92%, 69%);
1170
+ --t-fill-color-tag-yellow-040:hsl(44, 93%, 61%);
1171
+ --t-fill-color-tag-orange-010:hsl(12, 25%, 23%);
1172
+ --t-fill-color-tag-orange-020:hsl(10, 29%, 21%);
1173
+ --t-fill-color-tag-orange-030:hsl(21, 86%, 72%);
1174
+ --t-fill-color-tag-orange-040:hsl(21, 86%, 64%);
1175
+ --t-fill-color-tag-pink-010:hsl(331, 22%, 24%);
1176
+ --t-fill-color-tag-pink-020:hsl(338, 25%, 21%);
1177
+ --t-fill-color-tag-pink-030:hsl(324, 78%, 77%);
1178
+ --t-fill-color-tag-pink-040:hsl(324, 76%, 70%);
1179
+ --t-fill-color-tag-purple-010:hsl(260, 25%, 24%);
1180
+ --t-fill-color-tag-purple-020:hsl(254, 27%, 22%);
1181
+ --t-fill-color-tag-purple-030:hsl(273, 62%, 76%);
1182
+ --t-fill-color-tag-purple-040:hsl(273, 62%, 70%);
1183
+ --t-fill-color-tag-magenta-010:hsl(276, 18%, 22%);
1184
+ --t-fill-color-tag-magenta-020:hsl(277, 18%, 20%);
1185
+ --t-fill-color-tag-magenta-030:hsl(291, 48%, 70%);
1186
+ --t-fill-color-tag-magenta-040:hsl(292, 48%, 63%);
1187
+ --t-fill-color-tag-indigo-010:hsl(233, 30%, 27%);
1188
+ --t-fill-color-tag-indigo-020:hsl(233, 30%, 23%);
1189
+ --t-fill-color-tag-indigo-030:hsl(233, 77%, 81%);
1190
+ --t-fill-color-tag-indigo-040:hsl(236, 79%, 74%);
1191
+ --t-fill-color-button-neutral-solid-default:hsl(0, 0%, 19%);
1192
+ --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
1193
+ --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
1194
+ --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
1195
+ --t-fill-color-button-neutral-outline-dim-default:hsl(0, 0%, 15%);
1196
+ --t-fill-color-button-neutral-outline-dim-hover:hsl(0, 0%, 17%);
1197
+ --t-fill-color-button-neutral-outline-dim-active:hsl(0, 0%, 19%);
1198
+ --t-fill-color-button-neutral-outline-dim-disabled:hsl(0, 0%, 12%);
1199
+ --t-fill-color-button-neutral-ghost-default:hsla(0, 0%, 0%, 0);
1200
+ --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
1201
+ --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
1202
+ --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
1203
+ --t-fill-color-button-neutral-responsive-header-default:hsla(0, 0%, 0%, 0.1);
1204
+ --t-fill-color-button-neutral-responsive-header-hover:hsla(0, 0%, 0%, 0.2);
1205
+ --t-fill-color-button-neutral-responsive-header-active:hsla(0, 0%, 0%, 0.3);
1206
+ --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
1207
+ --t-fill-color-button-interaction-solid-default:hsl(204, 100%, 35%);
1208
+ --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
1209
+ --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
1210
+ --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
1211
+ --t-fill-color-button-interaction-outline-dim-default:hsl(204, 32%, 15%);
1212
+ --t-fill-color-button-interaction-outline-dim-hover:hsl(204, 39%, 17%);
1213
+ --t-fill-color-button-interaction-outline-dim-active:hsl(205, 45%, 18%);
1214
+ --t-fill-color-button-interaction-outline-dim-disabled:hsl(0, 0%, 12%);
1215
+ --t-fill-color-button-interaction-ghost-default:hsla(0, 0%, 0%, 0);
1216
+ --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
1217
+ --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
1218
+ --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
1219
+ --t-fill-color-button-delete-solid-default:hsl(8, 60%, 40%);
1220
+ --t-fill-color-button-delete-solid-hover:hsl(8, 60%, 45%);
1221
+ --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
1222
+ --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
1223
+ --t-fill-color-button-delete-outline-dim-default:hsl(8, 20%, 16%);
1224
+ --t-fill-color-button-delete-outline-dim-hover:hsl(9, 24%, 17%);
1225
+ --t-fill-color-button-delete-outline-dim-active:hsl(9, 29%, 19%);
1226
+ --t-fill-color-button-delete-outline-dim-disabled:hsl(0, 0%, 12%);
1227
+ --t-fill-color-button-delete-ghost-default:hsla(0, 0%, 0%, 0);
1228
+ --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
1229
+ --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
1230
+ --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
1231
+ --t-fill-color-button-pill-default:hsl(0, 0%, 18%);
1232
+ --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
1233
+ --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
1234
+ --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
1235
+ --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
1236
+ --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
1237
+ --t-fill-color-transparency-light-030:hsla(0, 0%, 0%, 0.3);
1238
+ --t-fill-color-transparency-light-040:hsla(0, 0%, 0%, 0.4);
1239
+ --t-fill-color-transparency-light-050:hsla(0, 0%, 0%, 0.5);
1240
+ --t-fill-color-transparency-light-060:hsla(0, 0%, 0%, 0.6);
1241
+ --t-fill-color-transparency-light-070:hsla(0, 0%, 0%, 0.7);
1242
+ --t-fill-color-transparency-light-080:hsla(0, 0%, 0%, 0.8);
1243
+ --t-fill-color-transparency-light-090:hsla(0, 0%, 0%, 0.9);
1244
+ --t-fill-color-transparency-dark-010:hsla(0, 0%, 100%, 0.1);
1245
+ --t-fill-color-transparency-dark-020:hsla(0, 0%, 100%, 0.2);
1246
+ --t-fill-color-transparency-dark-030:hsla(0, 0%, 100%, 0.3);
1247
+ --t-fill-color-transparency-dark-040:hsla(0, 0%, 100%, 0.4);
1248
+ --t-fill-color-transparency-dark-050:hsla(0, 0%, 100%, 0.5);
1249
+ --t-fill-color-transparency-dark-060:hsla(0, 0%, 100%, 0.6);
1250
+ --t-fill-color-transparency-dark-070:hsla(0, 0%, 100%, 0.7);
1251
+ --t-fill-color-transparency-dark-080:hsla(0, 0%, 100%, 0.8);
1252
+ --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
1253
+ --t-surface-color-card:hsl(0, 0%, 12%);
1254
+ --t-surface-color-canvas:hsl(0, 0%, 10%);
1255
+ --t-border-color-default-base:hsl(0, 0%, 21%);
1256
+ --t-border-color-default-dark:hsl(0, 0%, 25%);
1257
+ --t-border-color-default-darker:hsl(0, 0%, 33%);
1258
+ --t-border-color-default-darkest:hsl(0, 0%, 38%);
1259
+ --t-border-color-default-disabled:hsl(0, 0%, 21%);
1260
+ --t-border-color-default-dim:hsl(0, 0%, 16%);
1261
+ --t-border-color-default-white:hsl(0, 0%, 12%);
1262
+ --t-border-color-status-neutral:hsl(0, 0%, 38%);
1263
+ --t-border-color-status-info:hsl(204, 100%, 35%);
1264
+ --t-border-color-status-success:hsl(97, 57%, 40%);
1265
+ --t-border-color-status-warning:hsl(42, 84%, 63%);
1266
+ --t-border-color-status-error:hsl(8, 60%, 47%);
1267
+ --t-border-color-button-neutral:hsl(0, 0%, 19%);
1268
+ --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
1269
+ --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
1270
+ --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
1271
+ --t-border-color-control-neutral:hsl(0, 0%, 33%);
1272
+ --t-border-color-control-info:hsl(204, 100%, 35%);
1273
+ --t-border-color-control-success:hsl(97, 57%, 40%);
1274
+ --t-border-color-control-warning:hsl(42, 84%, 63%);
1275
+ --t-border-color-control-error:hsl(8, 60%, 47%);
1276
+ --t-border-color-control-disabled:hsl(0, 0%, 21%);
1277
+ }
1278
+ }
1279
+
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%);
1334
+ --t-text-color-default-inverted:hsl(0, 0%, 100%);
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%);
1356
+ --t-text-color-tag-bold-indigo:hsl(241, 59%, 28%);
1357
+ --t-text-color-tag-bold-blue:hsl(224, 47%, 31%);
1358
+ --t-text-color-tag-bold-aqua:hsl(209, 77%, 22%);
1359
+ --t-text-color-tag-bold-teal:hsl(180, 95%, 15%);
1360
+ --t-text-color-tag-bold-green:hsl(100, 93%, 17%);
1361
+ --t-text-color-tag-bold-yellow:hsl(29, 100%, 23%);
1362
+ --t-text-color-tag-bold-orange:hsl(18, 100%, 18%);
1363
+ --t-text-color-tag-bold-pink:hsl(327, 88%, 20%);
1364
+ --t-text-color-tag-bold-purple:hsl(268, 71%, 27%);
1365
+ --t-text-color-tag-bold-magenta:hsl(285, 71%, 20%);
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%);
1370
+ --t-icon-color-default-inverted:hsl(0, 0%, 100%);
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%);
1375
+ --t-icon-color-status-success-primary:hsl(96, 57%, 33%);
1376
+ --t-icon-color-status-success-secondary:hsl(97, 57%, 40%);
1377
+ --t-icon-color-status-warning-primary:hsl(42, 84%, 49%);
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%);
1398
+ --t-fill-color-control-secondary:hsl(97, 57%, 40%);
1399
+ --t-fill-color-control-error:hsl(8, 60%, 47%);
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%);
1407
+ --t-fill-color-status-success-solid:hsl(96, 57%, 33%);
1408
+ --t-fill-color-status-success-ghost:hsl(97, 57%, 90%);
1409
+ --t-fill-color-status-success-dim:hsl(96, 60%, 95%);
1410
+ --t-fill-color-status-warning-solid:hsl(42, 84%, 63%);
1411
+ --t-fill-color-status-warning-ghost:hsl(42, 87%, 94%);
1412
+ --t-fill-color-status-warning-dim:hsl(42, 87%, 97%);
1413
+ --t-fill-color-status-error-solid:hsl(8, 60%, 47%);
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);
1417
+ --t-fill-color-product-accounts-010:hsl(212, 54%, 93%);
1418
+ --t-fill-color-product-accounts-020:hsl(209, 53%, 90%);
1419
+ --t-fill-color-product-accounts-030:hsl(210, 56%, 70%);
1420
+ --t-fill-color-product-accounts-040:hsl(210, 54%, 60%);
1421
+ --t-fill-color-product-accounts-050:hsl(210, 55%, 50%);
1422
+ --t-fill-color-product-accounts-060:hsl(210, 65%, 40%);
1423
+ --t-fill-color-product-accounts-070:hsl(211, 70%, 32%);
1424
+ --t-fill-color-product-accounts-080:hsl(210, 75%, 25%);
1425
+ --t-fill-color-product-calendar-010:hsl(8, 61%, 90%);
1426
+ --t-fill-color-product-calendar-020:hsl(8, 61%, 70%);
1427
+ --t-fill-color-product-calendar-030:hsl(8, 72%, 59%);
1428
+ --t-fill-color-product-calendar-040:hsl(8, 65%, 55%);
1429
+ --t-fill-color-product-calendar-050:hsl(9, 61%, 50%);
1430
+ --t-fill-color-product-calendar-060:hsl(8, 65%, 42%);
1431
+ --t-fill-color-product-calendar-070:hsl(7, 65%, 34%);
1432
+ --t-fill-color-product-calendar-080:hsl(9, 61%, 27%);
1433
+ --t-fill-color-product-checkins-010:hsl(285, 20%, 92%);
1434
+ --t-fill-color-product-checkins-020:hsl(283, 22%, 75%);
1435
+ --t-fill-color-product-checkins-030:hsl(284, 22%, 64%);
1436
+ --t-fill-color-product-checkins-040:hsl(283, 22%, 55%);
1437
+ --t-fill-color-product-checkins-050:hsl(283, 22%, 48%);
1438
+ --t-fill-color-product-checkins-060:hsl(283, 27%, 42%);
1439
+ --t-fill-color-product-checkins-070:hsl(284, 33%, 34%);
1440
+ --t-fill-color-product-checkins-080:hsl(283, 33%, 27%);
1441
+ --t-fill-color-product-giving-010:hsl(41, 95%, 93%);
1442
+ --t-fill-color-product-giving-020:hsl(42, 95%, 83%);
1443
+ --t-fill-color-product-giving-030:hsl(43, 95%, 75%);
1444
+ --t-fill-color-product-giving-040:hsl(43, 88%, 70%);
1445
+ --t-fill-color-product-giving-050:hsl(43, 88%, 64%);
1446
+ --t-fill-color-product-giving-060:hsl(42, 84%, 55%);
1447
+ --t-fill-color-product-giving-070:hsl(42, 84%, 48%);
1448
+ --t-fill-color-product-giving-080:hsl(42, 100%, 40%);
1449
+ --t-fill-color-product-groups-010:hsl(18, 95%, 92%);
1450
+ --t-fill-color-product-groups-020:hsl(17, 96%, 80%);
1451
+ --t-fill-color-product-groups-030:hsl(17, 96%, 70%);
1452
+ --t-fill-color-product-groups-040:hsl(17, 96%, 63%);
1453
+ --t-fill-color-product-groups-050:hsl(17, 88%, 55%);
1454
+ --t-fill-color-product-groups-060:hsl(12, 70%, 48%);
1455
+ --t-fill-color-product-groups-070:hsl(12, 70%, 40%);
1456
+ --t-fill-color-product-groups-080:hsl(14, 70%, 34%);
1457
+ --t-fill-color-product-home-010:hsl(221, 89%, 93%);
1458
+ --t-fill-color-product-home-020:hsl(221, 91%, 91%);
1459
+ --t-fill-color-product-home-030:hsl(221, 91%, 87%);
1460
+ --t-fill-color-product-home-040:hsl(221, 91%, 62%);
1461
+ --t-fill-color-product-home-050:hsl(221, 91%, 55%);
1462
+ --t-fill-color-product-home-060:hsl(221, 90%, 50%);
1463
+ --t-fill-color-product-home-070:hsl(221, 90%, 45%);
1464
+ --t-fill-color-product-home-080:hsl(218, 84%, 25%);
1465
+ --t-fill-color-product-people-010:hsl(219, 73%, 91%);
1466
+ --t-fill-color-product-people-020:hsl(220, 69%, 81%);
1467
+ --t-fill-color-product-people-030:hsl(221, 73%, 71%);
1468
+ --t-fill-color-product-people-040:hsl(221, 73%, 65%);
1469
+ --t-fill-color-product-people-050:hsl(220, 74%, 57%);
1470
+ --t-fill-color-product-people-060:hsl(220, 68%, 51%);
1471
+ --t-fill-color-product-people-070:hsl(220, 68%, 41%);
1472
+ --t-fill-color-product-people-080:hsl(221, 68%, 31%);
1473
+ --t-fill-color-product-publishing-010:hsl(220, 4%, 86%);
1474
+ --t-fill-color-product-publishing-020:hsl(222, 10%, 60%);
1475
+ --t-fill-color-product-publishing-030:hsl(221, 11%, 50%);
1476
+ --t-fill-color-product-publishing-040:hsl(222, 12%, 39%);
1477
+ --t-fill-color-product-publishing-050:hsl(220, 12%, 31%);
1478
+ --t-fill-color-product-publishing-060:hsl(220, 11%, 26%);
1479
+ --t-fill-color-product-publishing-070:hsl(217, 12%, 22%);
1480
+ --t-fill-color-product-publishing-080:hsl(214, 11%, 12%);
1481
+ --t-fill-color-product-registrations-010:hsl(173, 28%, 89%);
1482
+ --t-fill-color-product-registrations-020:hsl(176, 38%, 78%);
1483
+ --t-fill-color-product-registrations-030:hsl(176, 37%, 68%);
1484
+ --t-fill-color-product-registrations-040:hsl(176, 37%, 60%);
1485
+ --t-fill-color-product-registrations-050:hsl(175, 36%, 43%);
1486
+ --t-fill-color-product-registrations-060:hsl(175, 51%, 34%);
1487
+ --t-fill-color-product-registrations-070:hsl(174, 51%, 28%);
1488
+ --t-fill-color-product-registrations-080:hsl(175, 52%, 22%);
1489
+ --t-fill-color-product-services-010:hsl(88, 31%, 88%);
1490
+ --t-fill-color-product-services-020:hsl(88, 39%, 75%);
1491
+ --t-fill-color-product-services-030:hsl(88, 39%, 66%);
1492
+ --t-fill-color-product-services-040:hsl(88, 40%, 54%);
1493
+ --t-fill-color-product-services-050:hsl(88, 45%, 41%);
1494
+ --t-fill-color-product-services-060:hsl(89, 62%, 31%);
1495
+ --t-fill-color-product-services-070:hsl(89, 62%, 26%);
1496
+ --t-fill-color-product-services-080:hsl(89, 63%, 21%);
1497
+ --t-fill-color-product-staff-base:hsl(328, 100%, 45%);
1498
+ --t-fill-color-product-staff-dark:hsl(328, 100%, 38%);
1499
+ --t-fill-color-product-staff-darker:hsl(328, 100%, 33%);
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%);
1539
+ --t-fill-color-tag-blue-030:hsl(220, 98%, 81%);
1540
+ --t-fill-color-tag-blue-040:hsl(220, 98%, 74%);
1541
+ --t-fill-color-tag-aqua-010:hsl(200, 82%, 89%);
1542
+ --t-fill-color-tag-aqua-020:hsl(200, 82%, 82%);
1543
+ --t-fill-color-tag-aqua-030:hsl(201, 76%, 71%);
1544
+ --t-fill-color-tag-aqua-040:hsl(200, 75%, 64%);
1545
+ --t-fill-color-tag-teal-010:hsl(163, 53%, 83%);
1546
+ --t-fill-color-tag-teal-020:hsl(164, 52%, 76%);
1547
+ --t-fill-color-tag-teal-030:hsl(169, 62%, 64%);
1548
+ --t-fill-color-tag-teal-040:hsl(169, 62%, 56%);
1549
+ --t-fill-color-tag-green-010:hsl(98, 59%, 85%);
1550
+ --t-fill-color-tag-green-020:hsl(99, 59%, 78%);
1551
+ --t-fill-color-tag-green-030:hsl(112, 57%, 65%);
1552
+ --t-fill-color-tag-green-040:hsl(112, 57%, 57%);
1553
+ --t-fill-color-tag-yellow-010:hsl(45, 77%, 85%);
1554
+ --t-fill-color-tag-yellow-020:hsl(44, 78%, 77%);
1555
+ --t-fill-color-tag-yellow-030:hsl(44, 92%, 69%);
1556
+ --t-fill-color-tag-yellow-040:hsl(44, 93%, 61%);
1557
+ --t-fill-color-tag-orange-010:hsl(22, 89%, 89%);
1558
+ --t-fill-color-tag-orange-020:hsl(21, 89%, 82%);
1559
+ --t-fill-color-tag-orange-030:hsl(21, 86%, 72%);
1560
+ --t-fill-color-tag-orange-040:hsl(21, 86%, 64%);
1561
+ --t-fill-color-tag-pink-010:hsl(311, 66%, 92%);
1562
+ --t-fill-color-tag-pink-020:hsl(310, 64%, 85%);
1563
+ --t-fill-color-tag-pink-030:hsl(324, 78%, 77%);
1564
+ --t-fill-color-tag-pink-040:hsl(324, 76%, 70%);
1565
+ --t-fill-color-tag-purple-010:hsl(259, 74%, 93%);
1566
+ --t-fill-color-tag-purple-020:hsl(259, 74%, 85%);
1567
+ --t-fill-color-tag-purple-030:hsl(273, 62%, 76%);
1568
+ --t-fill-color-tag-purple-040:hsl(273, 62%, 70%);
1569
+ --t-fill-color-tag-magenta-010:hsl(294, 37%, 90%);
1570
+ --t-fill-color-tag-magenta-020:hsl(291, 40%, 83%);
1571
+ --t-fill-color-tag-magenta-030:hsl(291, 48%, 70%);
1572
+ --t-fill-color-tag-magenta-040:hsl(292, 48%, 63%);
1573
+ --t-fill-color-tag-indigo-010:hsl(234, 78%, 93%);
1574
+ --t-fill-color-tag-indigo-020:hsl(233, 79%, 87%);
1575
+ --t-fill-color-tag-indigo-030:hsl(233, 77%, 81%);
1576
+ --t-fill-color-tag-indigo-040:hsl(236, 79%, 74%);
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);
1589
+ --t-fill-color-button-neutral-responsive-header-default:hsla(0, 0%, 0%, 0.1);
1590
+ --t-fill-color-button-neutral-responsive-header-hover:hsla(0, 0%, 0%, 0.2);
1591
+ --t-fill-color-button-neutral-responsive-header-active:hsla(0, 0%, 0%, 0.3);
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%);
1606
+ --t-fill-color-button-delete-solid-hover:hsl(8, 60%, 45%);
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%);
1650
+ --t-border-color-status-success:hsl(97, 57%, 40%);
1651
+ --t-border-color-status-warning:hsl(42, 84%, 63%);
1652
+ --t-border-color-status-error:hsl(8, 60%, 47%);
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%);
1659
+ --t-border-color-control-success:hsl(97, 57%, 40%);
1660
+ --t-border-color-control-warning:hsl(42, 84%, 63%);
1661
+ --t-border-color-control-error:hsl(8, 60%, 47%);
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
+ }
1701
+
1702
+ .symbol{
1703
+ display:inline-block;
1704
+ vertical-align:text-top;
1705
+ fill:currentColor;
1706
+ height:1em;
1707
+ width:1em;
1708
+ }
1709
+
1710
+ .tds-btn{
1711
+ --tds-btn-padding-x:12px;
1712
+ --tds-btn-padding-truncated-x:8px;
1713
+ --tds-btn-padding-y:3px;
1714
+ --tds-btn-font-size:16px;
1715
+ --tds-btn-font-weight:400;
1716
+ --tds-btn-line-height:1.5;
1717
+ --tds-btn-color:var(--t-text-color-default-headline);
1718
+ --tds-btn-bg:transparent;
1719
+ --tds-btn-border-width:var(--t-border-width-default);
1720
+ --tds-btn-border-color:transparent;
1721
+ --tds-btn-border-radius:var(--t-border-radius-md);
1722
+ --tds-btn-border-color-hover:transparent;
1723
+ --tds-btn-disabled-opacity:1;
1724
+ --tds-btn-min-height:32px;
1725
+ --tds-btn-text-decoration:none;
1726
+ --tds-btn-attention-icon-size:1em;
1727
+ display:inline-flex;
1728
+ gap:1ex;
1729
+ align-items:center;
1730
+ justify-content:center;
1731
+ width:auto;
1732
+ min-height:var(--tds-btn-min-height);
1733
+ padding:var(--tds-btn-padding-y) var(--tds-btn-padding-x);
1734
+ font-size:var(--tds-btn-font-size);
1735
+ font-weight:var(--tds-btn-font-weight);
1736
+ line-height:var(--tds-btn-line-height);
1737
+ vertical-align:middle;
1738
+ color:var(--tds-btn-color);
1739
+ text-align:center;
1740
+ -webkit-text-decoration:var(--tds-btn-text-decoration);
1741
+ text-decoration:var(--tds-btn-text-decoration);
1742
+ cursor:pointer;
1743
+ -webkit-user-select:none;
1744
+ -moz-user-select:none;
1745
+ user-select:none;
1746
+ background-color:var(--tds-btn-bg);
1747
+ background-clip:padding-box;
1748
+ border:var(--tds-btn-border-width) solid var(--tds-btn-border-color);
1749
+ border-radius:var(--tds-btn-border-radius);
1750
+ transition:color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
1751
+ }
1752
+
1753
+ .tds-btn:where(.tds-btn--icononly,:has(.prefix,svg:not(.suffix))){
1754
+ padding-left:var(--tds-btn-padding-truncated-x);
1117
1755
  }
1118
1756
 
1119
- .tds-btn:where(.tds-btn--icononly,:has(.suffix,svg:not(.prefix))) {
1120
- padding-right: var(--tds-btn-padding-truncated-x);
1757
+ .tds-btn:where(.tds-btn--icononly,:has(.suffix,svg:not(.prefix))){
1758
+ padding-right:var(--tds-btn-padding-truncated-x);
1121
1759
  }
1122
1760
 
1123
- .tds-btn:hover {
1124
- color: var(--tds-btn-color-hover);
1125
- background-color: var(--tds-btn-bg-hover);
1126
- border-color: var(--tds-btn-border-color-hover);
1761
+ .tds-btn:hover{
1762
+ color:var(--tds-btn-color-hover);
1763
+ background-color:var(--tds-btn-bg-hover);
1764
+ border-color:var(--tds-btn-border-color-hover);
1127
1765
  }
1128
1766
 
1129
- .tds-btn:focus-visible {
1130
- color: var(--tds-btn-color-hover);
1131
- outline: solid 3px var(--t-border-color-status-info);
1132
- outline-offset: 1px;
1133
- background-color: var(--tds-btn-bg-hover);
1134
- border-color: var(--tds-btn-border-color-hover);
1767
+ .tds-btn:focus-visible{
1768
+ color:var(--tds-btn-color-hover);
1769
+ outline:solid 3px var(--t-border-color-status-info);
1770
+ outline-offset:1px;
1771
+ background-color:var(--tds-btn-bg-hover);
1772
+ border-color:var(--tds-btn-border-color-hover);
1135
1773
  }
1136
1774
 
1137
- .tds-btn:active,.tds-btn.active {
1138
- color: var(--tds-btn-color-active);
1139
- background-color: var(--tds-btn-bg-active);
1140
- border-color: var(--tds-btn-border-color-active);
1775
+ .tds-btn:active,.tds-btn.active{
1776
+ color:var(--tds-btn-color-active);
1777
+ background-color:var(--tds-btn-bg-active);
1778
+ border-color:var(--tds-btn-border-color-active);
1141
1779
  }
1142
1780
 
1143
- .tds-btn:disabled,.tds-btn.disabled {
1144
- --tds-btn-loading-spinner-track-color: var(--t-fill-color-transparency-dark-020);
1145
- --tds-btn-loading-spinner-color: var(--t-text-color-status-neutral);
1146
- color: var(--tds-btn-color-disabled);
1147
- pointer-events: none;
1148
- background-color: var(--tds-btn-bg-disabled);
1149
- border-color: var(--tds-btn-border-color-disabled);
1150
- opacity: var(--tds-btn-disabled-opacity);
1781
+ .tds-btn:disabled,.tds-btn.disabled{
1782
+ --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-dark-020);
1783
+ --tds-btn-loading-spinner-color:var(--t-text-color-status-neutral);
1784
+ color:var(--tds-btn-color-disabled);
1785
+ pointer-events:none;
1786
+ background-color:var(--tds-btn-bg-disabled);
1787
+ border-color:var(--tds-btn-border-color-disabled);
1788
+ opacity:var(--tds-btn-disabled-opacity);
1151
1789
  }
1152
1790
 
1153
- .tds-btn svg:not(.symbol) {
1154
- display: block;
1155
- inline-size: auto;
1156
- block-size: auto;
1157
- max-block-size: .66666667lh;
1158
- color: var(--tds-btn-icon-color, currentColor);
1791
+ .tds-btn svg:not(.symbol){
1792
+ display:block;
1793
+ inline-size:auto;
1794
+ block-size:auto;
1795
+ max-block-size:.66666667lh;
1796
+ color:var(--tds-btn-icon-color, currentColor);
1159
1797
  }
1160
1798
 
1161
- .tds-btn .tds-loading-spinner {
1162
- --tds-loading-spinner-track-color: var(--tds-btn-loading-spinner-track-color);
1163
- --tds-loading-spinner-track-width: var(--tds-btn-loading-spinner-track-width);
1164
- --tds-loading-spinner-color: var(--tds-btn-loading-spinner-color);
1165
- --tds-loading-spinner-visibility: var(--tds-btn-loading-spinner-visibility);
1166
- --tds-loading-spinner-animation-play-state: var(--tds-btn-loading-spinner-animation-play-state);
1799
+ .tds-btn .tds-loading-spinner{
1800
+ --tds-loading-spinner-track-color:var(--tds-btn-loading-spinner-track-color);
1801
+ --tds-loading-spinner-track-width:var(--tds-btn-loading-spinner-track-width);
1802
+ --tds-loading-spinner-color:var(--tds-btn-loading-spinner-color);
1803
+ --tds-loading-spinner-visibility:var(--tds-btn-loading-spinner-visibility);
1804
+ --tds-loading-spinner-animation-play-state:var(--tds-btn-loading-spinner-animation-play-state);
1167
1805
  }
1168
1806
 
1169
- @media (prefers-reduced-motion: reduce) {
1807
+ @media (prefers-reduced-motion: reduce){
1170
1808
 
1171
- .tds-btn {
1172
- transition: none;
1809
+ .tds-btn{
1810
+ transition:none;
1173
1811
  }
1174
1812
  }
1175
1813
 
1176
- /* Effective height 48px */
1177
-
1178
- .tds-btn--xl {
1179
- --tds-btn-padding-y: 11px;
1180
- --tds-btn-padding-x: 18px;
1181
- --tds-btn-padding-truncated-x: 12px;
1182
- --tds-btn-min-height: 48px;
1183
- }
1184
-
1185
- /* Effective height 40px */
1186
-
1187
- .tds-btn--lg {
1188
- --tds-btn-padding-y: 7px;
1189
- --tds-btn-padding-x: 14px;
1190
- --tds-btn-min-height: 40px;
1191
- }
1192
-
1193
- /* Effective height 24px */
1194
-
1195
- .tds-btn--sm {
1196
- --tds-btn-padding-y: .5px;
1197
- --tds-btn-padding-x: 7px;
1198
- --tds-btn-padding-truncated-x: 4px;
1199
- --tds-btn-min-height: 24px;
1200
- --tds-btn-font-size: var(--t-font-size-sm);
1201
- --tds-btn-loading-spinner-track-width: 3px;
1202
- }
1203
-
1204
- /* Effective height 20px */
1205
-
1206
- .tds-btn--xs {
1207
- --tds-btn-padding-y: 0;
1208
- --tds-btn-padding-x: 5px;
1209
- --tds-btn-padding-truncated-x: 5px;
1210
- --tds-btn-min-height: 20px;
1211
- --tds-btn-font-size: var(--t-font-size-xs);
1212
- --tds-btn-loading-spinner-track-width: 3px;
1213
- }
1214
-
1215
- .tds-btn--neutral {
1216
- --tds-btn-color: var(--t-text-color-status-neutral);
1217
- --tds-btn-bg: var(--t-fill-color-button-neutral-solid-default);
1218
- --tds-btn-border-color: var(--t-fill-color-button-neutral-solid-default);
1219
- --tds-btn-color-hover: var(--t-text-color-status-neutral);
1220
- --tds-btn-bg-hover: var(--t-fill-color-button-neutral-solid-hover);
1221
- --tds-btn-border-color-hover: var(--t-fill-color-button-neutral-solid-hover);
1222
- --tds-btn-color-active: var(--t-text-color-status-neutral);
1223
- --tds-btn-bg-active: var(--t-fill-color-button-neutral-solid-active);
1224
- --tds-btn-border-color-active: var(--t-fill-color-button-neutral-solid-active);
1225
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1226
- --tds-btn-bg-disabled: var(--t-fill-color-button-neutral-solid-disabled);
1227
- --tds-btn-border-color-disabled: var(--t-fill-color-button-neutral-solid-disabled);
1228
- }
1229
-
1230
- .tds-btn--interaction {
1231
- --tds-btn-color: var(--t-text-color-default-inverted);
1232
- --tds-btn-bg: var(--t-fill-color-button-interaction-solid-default);
1233
- --tds-btn-border-color: var(--t-fill-color-button-interaction-solid-default);
1234
- --tds-btn-color-hover: var(--t-text-color-default-inverted);
1235
- --tds-btn-bg-hover: var(--t-fill-color-button-interaction-solid-hover);
1236
- --tds-btn-border-color-hover: var(--t-fill-color-button-interaction-solid-hover);
1237
- --tds-btn-color-active: var(--t-text-color-default-inverted);
1238
- --tds-btn-bg-active: var(--t-fill-color-button-interaction-solid-active);
1239
- --tds-btn-border-color-active: var(--t-fill-color-button-interaction-solid-active);
1240
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1241
- --tds-btn-bg-disabled: var(--t-fill-color-button-interaction-solid-disabled);
1242
- --tds-btn-border-color-disabled: var(--tds-btn-bg-disabled);
1243
- --tds-btn-loading-spinner-track-color: var(--t-fill-color-transparency-light-020);
1244
- }
1245
-
1246
- .tds-btn--delete {
1247
- --tds-btn-color: var(--t-text-color-default-inverted);
1248
- --tds-btn-bg: var(--t-fill-color-button-delete-solid-default);
1249
- --tds-btn-border-color: var(--t-fill-color-button-delete-solid-default);
1250
- --tds-btn-color-hover: var(--t-text-color-default-inverted);
1251
- --tds-btn-bg-hover: var(--t-fill-color-button-delete-solid-hover);
1252
- --tds-btn-border-color-hover: var(--t-fill-color-button-delete-solid-hover);
1253
- --tds-btn-color-active: var(--t-text-color-default-inverted);
1254
- --tds-btn-bg-active: var(--t-fill-color-button-delete-solid-active);
1255
- --tds-btn-border-color-active: var(--t-fill-color-button-delete-solid-active);
1256
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1257
- --tds-btn-bg-disabled: var(--t-fill-color-button-delete-solid-disabled);
1258
- --tds-btn-border-color-disabled: var(--tds-btn-bg-disabled);
1259
- --tds-btn-loading-spinner-track-color: var(--t-fill-color-transparency-light-020);
1260
- }
1261
-
1262
- .tds-btn--outline-neutral {
1263
- --tds-btn-color: var(--t-text-color-status-neutral);
1264
- --tds-btn-border-color: var(--t-border-color-button-neutral);
1265
- --tds-btn-color-hover: var(--tds-btn-color);
1266
- --tds-btn-bg-hover: var(--t-fill-color-button-neutral-outline-dim-hover);
1267
- --tds-btn-border-color-hover: var(--t-border-color-button-neutral);
1268
- --tds-btn-color-active: var(--tds-btn-color);
1269
- --tds-btn-bg-active: var(--t-fill-color-button-neutral-outline-dim-active);
1270
- --tds-btn-border-color-active: var(--t-border-color-button-neutral);
1271
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1272
- --tds-btn-bg-disabled: var(--t-fill-color-button-neutral-outline-dim-disabled);
1273
- --tds-btn-border-color-disabled: var(--t-border-color-button-neutral);
1274
- }
1275
-
1276
- .tds-btn--outline-interaction {
1277
- --tds-btn-color: var(--t-text-color-interaction-primary);
1278
- --tds-btn-border-color: var(--t-border-color-button-info);
1279
- --tds-btn-color-hover: var(--tds-btn-color);
1280
- --tds-btn-bg-hover: var(--t-fill-color-button-interaction-outline-dim-hover);
1281
- --tds-btn-border-color-hover: var(--tds-btn-border-color);
1282
- --tds-btn-color-active: var(--tds-btn-color);
1283
- --tds-btn-bg-active: var(--t-fill-color-button-interaction-outline-dim-active);
1284
- --tds-btn-border-color-active: var(--tds-btn-border-color);
1285
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1286
- --tds-btn-bg-disabled: var(--t-fill-color-button-interaction-outline-dim-disabled);
1287
- --tds-btn-border-color-disabled: var(--t-border-color-button-neutral);
1288
- --tds-btn-loading-spinner-track-color: var(--t-fill-color-status-info-ghost);
1289
- }
1290
-
1291
- .tds-btn--outline-delete {
1292
- --tds-btn-color: var(--t-text-color-status-error);
1293
- --tds-btn-border-color: var(--t-border-color-button-delete);
1294
- --tds-btn-color-hover: var(--tds-btn-color);
1295
- --tds-btn-bg-hover: var(--t-fill-color-button-delete-outline-dim-hover);
1296
- --tds-btn-border-color-hover: var(--tds-btn-border-color);
1297
- --tds-btn-color-active: var(--tds-btn-color);
1298
- --tds-btn-bg-active: var(--t-fill-color-button-delete-outline-dim-active);
1299
- --tds-btn-border-color-active: var(--tds-btn-border-color);
1300
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1301
- --tds-btn-bg-disabled: var(--t-fill-color-button-delete-outline-dim-disabled);
1302
- --tds-btn-border-color-disabled: var(--t-border-color-button-neutral);
1303
- --tds-btn-loading-spinner-track-color: var(--t-fill-color-status-error-ghost);
1304
- }
1305
-
1306
- .tds-btn--ghost-neutral {
1307
- --tds-btn-color: var(--t-text-color-status-neutral);
1308
- --tds-btn-border-color: transparent;
1309
- --tds-btn-color-hover: var(--tds-btn-color);
1310
- --tds-btn-bg-hover: var(--t-fill-color-button-neutral-outline-dim-hover);
1311
- --tds-btn-border-color-hover: var(--tds-btn-bg-hover);
1312
- --tds-btn-color-active: var(--tds-btn-color);
1313
- --tds-btn-bg-active: var(--t-fill-color-button-neutral-outline-dim-active);
1314
- --tds-btn-border-color-active: var(--tds-btn-bg-active);
1315
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1316
- --tds-btn-bg-disabled: transparent;
1317
- --tds-btn-border-color-disabled: transparent;
1318
- }
1319
-
1320
- .tds-btn--ghost-interaction {
1321
- --tds-btn-color: var(--t-text-color-interaction-primary);
1322
- --tds-btn-border-color: transparent;
1323
- --tds-btn-color-hover: var(--tds-btn-color);
1324
- --tds-btn-bg-hover: var(--t-fill-color-button-interaction-outline-dim-hover);
1325
- --tds-btn-border-color-hover: var(--tds-btn-bg-hover);
1326
- --tds-btn-color-active: var(--tds-btn-color);
1327
- --tds-btn-bg-active: var(--t-fill-color-button-interaction-outline-dim-active);
1328
- --tds-btn-border-color-active: var(--tds-btn-bg-active);
1329
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1330
- --tds-btn-bg-disabled: transparent;
1331
- --tds-btn-border-color-disabled: transparent;
1332
- --tds-btn-loading-spinner-track-color: var(--t-fill-color-status-info-ghost);
1333
- }
1334
-
1335
- .tds-btn--ghost-delete {
1336
- --tds-btn-color: var(--t-text-color-status-error);
1337
- --tds-btn-border-color: transparent;
1338
- --tds-btn-color-hover: var(--tds-btn-color);
1339
- --tds-btn-bg-hover: var(--t-fill-color-button-delete-outline-dim-hover);
1340
- --tds-btn-border-color-hover: var(--tds-btn-bg-hover);
1341
- --tds-btn-color-active: var(--tds-btn-color);
1342
- --tds-btn-bg-active: var(--t-fill-color-button-delete-outline-dim-active);
1343
- --tds-btn-border-color-active: var(--tds-btn-bg-active);
1344
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1345
- --tds-btn-bg-disabled: transparent;
1346
- --tds-btn-border-color-disabled: transparent;
1347
- --tds-btn-loading-spinner-track-color: var(--t-fill-color-status-error-ghost);
1348
- }
1349
-
1350
- .tds-btn--inline-text {
1351
- --tds-btn-color: var(--t-text-color-interaction-primary);
1352
- --tds-btn-color-hover: var(--t-text-color-interaction-hover);
1353
- --tds-btn-color-active: var(--t-text-color-interaction-active);
1354
- --tds-btn-bg: transparent;
1355
- --tds-btn-bg-hover: transparent;
1356
- --tds-btn-padding-y: 0;
1357
- --tds-btn-padding-x: 0;
1358
- --tds-btn-min-height: auto;
1359
- --tds-btn-text-decoration: underline;
1360
- --tds-btn-border-width: 0;
1361
- --tds-btn-border-color: transparent;
1362
- --tds-btn-font-size: inherit;
1363
- --tds-btn-font-weight: inherit;
1364
- --tds-btn-line-height: inherit;
1365
- --tds-btn-loading-spinner-track-color: var(--t-fill-color-status-info-ghost);
1366
- font-family: inherit;
1367
- font-style: inherit;
1368
- vertical-align: inherit;
1369
- }
1370
-
1371
- .tds-btn--inline-text:hover,.tds-btn--inline-text:focus-visible {
1372
- --tds-btn-text-decoration: none;
1814
+ .tds-btn--xl{
1815
+ --tds-btn-padding-y:11px;
1816
+ --tds-btn-padding-x:18px;
1817
+ --tds-btn-padding-truncated-x:12px;
1818
+ --tds-btn-min-height:48px;
1819
+ }
1820
+
1821
+ .tds-btn--lg{
1822
+ --tds-btn-padding-y:7px;
1823
+ --tds-btn-padding-x:14px;
1824
+ --tds-btn-min-height:40px;
1825
+ }
1826
+
1827
+ .tds-btn--sm{
1828
+ --tds-btn-padding-y:.5px;
1829
+ --tds-btn-padding-x:7px;
1830
+ --tds-btn-padding-truncated-x:4px;
1831
+ --tds-btn-min-height:24px;
1832
+ --tds-btn-font-size:var(--t-font-size-sm);
1833
+ --tds-btn-loading-spinner-track-width:3px;
1834
+ }
1835
+
1836
+ .tds-btn--xs{
1837
+ --tds-btn-padding-y:0;
1838
+ --tds-btn-padding-x:5px;
1839
+ --tds-btn-padding-truncated-x:5px;
1840
+ --tds-btn-min-height:20px;
1841
+ --tds-btn-font-size:var(--t-font-size-xs);
1842
+ --tds-btn-loading-spinner-track-width:3px;
1843
+ }
1844
+
1845
+ .tds-btn--neutral{
1846
+ --tds-btn-color:var(--t-text-color-status-neutral);
1847
+ --tds-btn-bg:var(--t-fill-color-button-neutral-solid-default);
1848
+ --tds-btn-border-color:var(--t-fill-color-button-neutral-solid-default);
1849
+ --tds-btn-color-hover:var(--t-text-color-status-neutral);
1850
+ --tds-btn-bg-hover:var(--t-fill-color-button-neutral-solid-hover);
1851
+ --tds-btn-border-color-hover:var(--t-fill-color-button-neutral-solid-hover);
1852
+ --tds-btn-color-active:var(--t-text-color-status-neutral);
1853
+ --tds-btn-bg-active:var(--t-fill-color-button-neutral-solid-active);
1854
+ --tds-btn-border-color-active:var(--t-fill-color-button-neutral-solid-active);
1855
+ --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1856
+ --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-solid-disabled);
1857
+ --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-solid-disabled);
1858
+ }
1859
+
1860
+ .tds-btn--interaction{
1861
+ --tds-btn-color:var(--t-text-color-default-inverted);
1862
+ --tds-btn-bg:var(--t-fill-color-button-interaction-solid-default);
1863
+ --tds-btn-border-color:var(--t-fill-color-button-interaction-solid-default);
1864
+ --tds-btn-color-hover:var(--t-text-color-default-inverted);
1865
+ --tds-btn-bg-hover:var(--t-fill-color-button-interaction-solid-hover);
1866
+ --tds-btn-border-color-hover:var(--t-fill-color-button-interaction-solid-hover);
1867
+ --tds-btn-color-active:var(--t-text-color-default-inverted);
1868
+ --tds-btn-bg-active:var(--t-fill-color-button-interaction-solid-active);
1869
+ --tds-btn-border-color-active:var(--t-fill-color-button-interaction-solid-active);
1870
+ --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1871
+ --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
1872
+ --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
1873
+ --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
1874
+ }
1875
+
1876
+ .tds-btn--delete{
1877
+ --tds-btn-color:var(--t-text-color-default-inverted);
1878
+ --tds-btn-bg:var(--t-fill-color-button-delete-solid-default);
1879
+ --tds-btn-border-color:var(--t-fill-color-button-delete-solid-default);
1880
+ --tds-btn-color-hover:var(--t-text-color-default-inverted);
1881
+ --tds-btn-bg-hover:var(--t-fill-color-button-delete-solid-hover);
1882
+ --tds-btn-border-color-hover:var(--t-fill-color-button-delete-solid-hover);
1883
+ --tds-btn-color-active:var(--t-text-color-default-inverted);
1884
+ --tds-btn-bg-active:var(--t-fill-color-button-delete-solid-active);
1885
+ --tds-btn-border-color-active:var(--t-fill-color-button-delete-solid-active);
1886
+ --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1887
+ --tds-btn-bg-disabled:var(--t-fill-color-button-delete-solid-disabled);
1888
+ --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
1889
+ --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
1890
+ }
1891
+
1892
+ .tds-btn--outline-neutral{
1893
+ --tds-btn-color:var(--t-text-color-status-neutral);
1894
+ --tds-btn-border-color:var(--t-border-color-button-neutral);
1895
+ --tds-btn-color-hover:var(--tds-btn-color);
1896
+ --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-dim-hover);
1897
+ --tds-btn-border-color-hover:var(--t-border-color-button-neutral);
1898
+ --tds-btn-color-active:var(--tds-btn-color);
1899
+ --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-dim-active);
1900
+ --tds-btn-border-color-active:var(--t-border-color-button-neutral);
1901
+ --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1902
+ --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-dim-disabled);
1903
+ --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
1904
+ }
1905
+
1906
+ .tds-btn--outline-interaction{
1907
+ --tds-btn-color:var(--t-text-color-interaction-primary);
1908
+ --tds-btn-border-color:var(--t-border-color-button-info);
1909
+ --tds-btn-color-hover:var(--tds-btn-color);
1910
+ --tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-dim-hover);
1911
+ --tds-btn-border-color-hover:var(--tds-btn-border-color);
1912
+ --tds-btn-color-active:var(--tds-btn-color);
1913
+ --tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-dim-active);
1914
+ --tds-btn-border-color-active:var(--tds-btn-border-color);
1915
+ --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1916
+ --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-outline-dim-disabled);
1917
+ --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
1918
+ --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-info-ghost);
1919
+ }
1920
+
1921
+ .tds-btn--outline-delete{
1922
+ --tds-btn-color:var(--t-text-color-status-error);
1923
+ --tds-btn-border-color:var(--t-border-color-button-delete);
1924
+ --tds-btn-color-hover:var(--tds-btn-color);
1925
+ --tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-dim-hover);
1926
+ --tds-btn-border-color-hover:var(--tds-btn-border-color);
1927
+ --tds-btn-color-active:var(--tds-btn-color);
1928
+ --tds-btn-bg-active:var(--t-fill-color-button-delete-outline-dim-active);
1929
+ --tds-btn-border-color-active:var(--tds-btn-border-color);
1930
+ --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1931
+ --tds-btn-bg-disabled:var(--t-fill-color-button-delete-outline-dim-disabled);
1932
+ --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
1933
+ --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-error-ghost);
1934
+ }
1935
+
1936
+ .tds-btn--ghost-neutral{
1937
+ --tds-btn-color:var(--t-text-color-status-neutral);
1938
+ --tds-btn-border-color:transparent;
1939
+ --tds-btn-color-hover:var(--tds-btn-color);
1940
+ --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-dim-hover);
1941
+ --tds-btn-border-color-hover:var(--tds-btn-bg-hover);
1942
+ --tds-btn-color-active:var(--tds-btn-color);
1943
+ --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-dim-active);
1944
+ --tds-btn-border-color-active:var(--tds-btn-bg-active);
1945
+ --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1946
+ --tds-btn-bg-disabled:transparent;
1947
+ --tds-btn-border-color-disabled:transparent;
1948
+ }
1949
+
1950
+ .tds-btn--ghost-interaction{
1951
+ --tds-btn-color:var(--t-text-color-interaction-primary);
1952
+ --tds-btn-border-color:transparent;
1953
+ --tds-btn-color-hover:var(--tds-btn-color);
1954
+ --tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-dim-hover);
1955
+ --tds-btn-border-color-hover:var(--tds-btn-bg-hover);
1956
+ --tds-btn-color-active:var(--tds-btn-color);
1957
+ --tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-dim-active);
1958
+ --tds-btn-border-color-active:var(--tds-btn-bg-active);
1959
+ --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1960
+ --tds-btn-bg-disabled:transparent;
1961
+ --tds-btn-border-color-disabled:transparent;
1962
+ --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-info-ghost);
1963
+ }
1964
+
1965
+ .tds-btn--ghost-delete{
1966
+ --tds-btn-color:var(--t-text-color-status-error);
1967
+ --tds-btn-border-color:transparent;
1968
+ --tds-btn-color-hover:var(--tds-btn-color);
1969
+ --tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-dim-hover);
1970
+ --tds-btn-border-color-hover:var(--tds-btn-bg-hover);
1971
+ --tds-btn-color-active:var(--tds-btn-color);
1972
+ --tds-btn-bg-active:var(--t-fill-color-button-delete-outline-dim-active);
1973
+ --tds-btn-border-color-active:var(--tds-btn-bg-active);
1974
+ --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1975
+ --tds-btn-bg-disabled:transparent;
1976
+ --tds-btn-border-color-disabled:transparent;
1977
+ --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-error-ghost);
1978
+ }
1979
+
1980
+ .tds-btn--inline-text{
1981
+ --tds-btn-color:var(--t-text-color-interaction-primary);
1982
+ --tds-btn-color-hover:var(--t-text-color-interaction-hover);
1983
+ --tds-btn-color-active:var(--t-text-color-interaction-active);
1984
+ --tds-btn-bg:transparent;
1985
+ --tds-btn-bg-hover:transparent;
1986
+ --tds-btn-padding-y:0;
1987
+ --tds-btn-padding-x:0;
1988
+ --tds-btn-min-height:auto;
1989
+ --tds-btn-text-decoration:underline;
1990
+ --tds-btn-border-width:0;
1991
+ --tds-btn-border-color:transparent;
1992
+ --tds-btn-font-size:inherit;
1993
+ --tds-btn-font-weight:inherit;
1994
+ --tds-btn-line-height:inherit;
1995
+ --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-info-ghost);
1996
+ font-family:inherit;
1997
+ font-style:inherit;
1998
+ vertical-align:inherit;
1999
+ }
2000
+
2001
+ .tds-btn--inline-text:hover,.tds-btn--inline-text:focus-visible{
2002
+ --tds-btn-text-decoration:none;
1373
2003
  }
1374
2004
 
1375
- .tds-btn--primary-page-header {
1376
- --tds-btn-color: var(--t-text-color-default-inverted);
1377
- --tds-btn-bg: var(--t-fill-color-button-interaction-solid-default);
1378
- --tds-btn-border-color: var(--t-fill-color-button-interaction-solid-default);
1379
- --tds-btn-color-hover: var(--t-text-color-default-inverted);
1380
- --tds-btn-bg-hover: var(--t-fill-color-button-interaction-solid-hover);
1381
- --tds-btn-border-color-hover: var(--t-fill-color-button-interaction-solid-hover);
1382
- --tds-btn-color-active: var(--t-text-color-default-inverted);
1383
- --tds-btn-bg-active: var(--t-fill-color-button-interaction-solid-active);
1384
- --tds-btn-border-color-active: var(--t-fill-color-button-interaction-solid-active);
1385
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1386
- --tds-btn-bg-disabled: var(--t-fill-color-button-interaction-solid-disabled);
1387
- --tds-btn-border-color-disabled: var(--tds-btn-bg-disabled);
1388
- --tds-btn-loading-spinner-track-color: var(--t-fill-color-transparency-light-020);
1389
- }
1390
-
1391
- .tds-btn--secondary-page-header {
1392
- --tds-btn-color: var(--t-text-color-status-neutral);
1393
- --tds-btn-bg: var(--t-fill-color-button-neutral-responsive-header-default);
1394
- --tds-btn-border-color: var(--t-fill-color-button-neutral-responsive-header-default);
1395
- --tds-btn-color-hover: var(--t-text-color-status-neutral);
1396
- --tds-btn-bg-hover: var(--t-fill-color-button-neutral-responsive-header-hover);
1397
- --tds-btn-border-color-hover: var(--t-fill-color-button-neutral-responsive-header-hover);
1398
- --tds-btn-color-active: var(--t-text-color-status-neutral);
1399
- --tds-btn-bg-active: var(--t-fill-color-button-neutral-responsive-header-active);
1400
- --tds-btn-border-color-active: var(--t-fill-color-button-neutral-responsive-header-active);
1401
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1402
- --tds-btn-bg-disabled: var(--t-fill-color-button-neutral-responsive-header-disabled);
1403
- --tds-btn-border-color-disabled: var(--t-fill-color-button-neutral-responsive-header-disabled);
1404
- }
1405
-
1406
- @media (min-width: 600px) {
1407
-
1408
- .tds-btn--secondary-page-header {
1409
- --tds-btn-color: var(--t-text-color-status-neutral);
1410
- --tds-btn-bg: transparent;
1411
- --tds-btn-border-color: var(--t-border-color-button-neutral);
1412
- --tds-btn-color-hover: var(--tds-btn-color);
1413
- --tds-btn-bg-hover: var(--t-fill-color-button-neutral-outline-dim-hover);
1414
- --tds-btn-border-color-hover: var(--t-border-color-button-neutral);
1415
- --tds-btn-color-active: var(--tds-btn-color);
1416
- --tds-btn-bg-active: var(--t-fill-color-button-neutral-outline-dim-active);
1417
- --tds-btn-border-color-active: var(--t-border-color-button-neutral);
1418
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1419
- --tds-btn-bg-disabled: var(--t-fill-color-button-neutral-outline-dim-disabled);
1420
- --tds-btn-border-color-disabled: var(--t-border-color-button-neutral);
2005
+ .tds-btn--primary-page-header{
2006
+ --tds-btn-color:var(--t-text-color-default-inverted);
2007
+ --tds-btn-bg:var(--t-fill-color-button-interaction-solid-default);
2008
+ --tds-btn-border-color:var(--t-fill-color-button-interaction-solid-default);
2009
+ --tds-btn-color-hover:var(--t-text-color-default-inverted);
2010
+ --tds-btn-bg-hover:var(--t-fill-color-button-interaction-solid-hover);
2011
+ --tds-btn-border-color-hover:var(--t-fill-color-button-interaction-solid-hover);
2012
+ --tds-btn-color-active:var(--t-text-color-default-inverted);
2013
+ --tds-btn-bg-active:var(--t-fill-color-button-interaction-solid-active);
2014
+ --tds-btn-border-color-active:var(--t-fill-color-button-interaction-solid-active);
2015
+ --tds-btn-color-disabled:var(--t-text-color-default-disabled);
2016
+ --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
2017
+ --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
2018
+ --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
2019
+ }
2020
+
2021
+ .tds-btn--secondary-page-header{
2022
+ --tds-btn-color:var(--t-text-color-status-neutral);
2023
+ --tds-btn-bg:var(--t-fill-color-button-neutral-responsive-header-default);
2024
+ --tds-btn-border-color:var(--t-fill-color-button-neutral-responsive-header-default);
2025
+ --tds-btn-color-hover:var(--t-text-color-status-neutral);
2026
+ --tds-btn-bg-hover:var(--t-fill-color-button-neutral-responsive-header-hover);
2027
+ --tds-btn-border-color-hover:var(--t-fill-color-button-neutral-responsive-header-hover);
2028
+ --tds-btn-color-active:var(--t-text-color-status-neutral);
2029
+ --tds-btn-bg-active:var(--t-fill-color-button-neutral-responsive-header-active);
2030
+ --tds-btn-border-color-active:var(--t-fill-color-button-neutral-responsive-header-active);
2031
+ --tds-btn-color-disabled:var(--t-text-color-default-disabled);
2032
+ --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-responsive-header-disabled);
2033
+ --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-responsive-header-disabled);
2034
+ }
2035
+
2036
+ @media (min-width: 600px){
2037
+
2038
+ .tds-btn--secondary-page-header{
2039
+ --tds-btn-color:var(--t-text-color-status-neutral);
2040
+ --tds-btn-bg:transparent;
2041
+ --tds-btn-border-color:var(--t-border-color-button-neutral);
2042
+ --tds-btn-color-hover:var(--tds-btn-color);
2043
+ --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-dim-hover);
2044
+ --tds-btn-border-color-hover:var(--t-border-color-button-neutral);
2045
+ --tds-btn-color-active:var(--tds-btn-color);
2046
+ --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-dim-active);
2047
+ --tds-btn-border-color-active:var(--t-border-color-button-neutral);
2048
+ --tds-btn-color-disabled:var(--t-text-color-default-disabled);
2049
+ --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-dim-disabled);
2050
+ --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
1421
2051
  }
1422
2052
  }
1423
2053
 
1424
- .tds-btn--staff-only {
1425
- --tds-btn-color: var(--t-text-color-default-inverted);
1426
- --tds-btn-bg: var(--t-fill-color-product-staff-base);
1427
- --tds-btn-border-color: var(--t-border-color-default-white);
1428
- --tds-btn-color-hover: var(--t-text-color-default-inverted);
1429
- --tds-btn-bg-hover: var(--t-fill-color-product-staff-dark);
1430
- --tds-btn-border-color-hover: var(--t-border-color-default-white);
1431
- --tds-btn-color-active: var(--t-text-color-default-inverted);
1432
- --tds-btn-bg-active: var(--t-fill-color-product-staff-darker);
1433
- --tds-btn-border-color-active: var(--t-border-color-default-white);
1434
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1435
- --tds-btn-bg-disabled: var(--t-fill-color-button-interaction-solid-disabled);
1436
- --tds-btn-border-color-disabled: var(--tds-btn-bg-disabled);
1437
- --tds-btn-loading-spinner-track-color: var(--t-fill-color-transparency-light-020);
1438
- }
1439
-
1440
- .tds-btn--pill {
1441
- --tds-btn-border-radius: 999px;
1442
- --tds-btn-padding-y: 4px;
1443
- --tds-btn-padding-x: 13px;
1444
-
1445
- --tds-btn-color: var(--t-text-color-default-primary);
1446
- --tds-btn-bg: var(--t-fill-color-button-pill-default);
1447
- --tds-btn-border-color: var(--tds-btn-bg);
1448
- --tds-btn-color-hover: var(--tds-btn-color);
1449
- --tds-btn-bg-hover: var(--t-fill-color-button-pill-hover);
1450
- --tds-btn-border-color-hover: var(--tds-btn-bg-hover);
1451
-
1452
- --tds-btn-color-active: var(--tds-btn-color);
1453
- --tds-btn-bg-active: var(--t-fill-color-button-pill-active);
1454
- --tds-btn-border-color-active: var(--tds-btn-bg-active);
1455
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1456
- --tds-btn-bg-disabled: var(--t-fill-color-button-neutral-solid-disabled);
1457
- --tds-btn-border-color-disabled: var(--t-fill-color-button-neutral-solid-disabled);
1458
- --tds-btn-icon-color: var(--t-icon-color-default-secondary);
1459
- --tds-btn-min-height: 32px;
1460
- }
1461
-
1462
- .tds-btn--pill:is(.tds-btn--sm) {
1463
- --tds-btn-padding-y: 1px;
1464
- --tds-btn-padding-x: 7px;
1465
- --tds-btn-min-height: auto;
2054
+ .tds-btn--staff-only{
2055
+ --tds-btn-color:var(--t-text-color-default-inverted);
2056
+ --tds-btn-bg:var(--t-fill-color-product-staff-base);
2057
+ --tds-btn-border-color:var(--t-border-color-default-white);
2058
+ --tds-btn-color-hover:var(--t-text-color-default-inverted);
2059
+ --tds-btn-bg-hover:var(--t-fill-color-product-staff-dark);
2060
+ --tds-btn-border-color-hover:var(--t-border-color-default-white);
2061
+ --tds-btn-color-active:var(--t-text-color-default-inverted);
2062
+ --tds-btn-bg-active:var(--t-fill-color-product-staff-darker);
2063
+ --tds-btn-border-color-active:var(--t-border-color-default-white);
2064
+ --tds-btn-color-disabled:var(--t-text-color-default-disabled);
2065
+ --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
2066
+ --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
2067
+ --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
2068
+ }
2069
+
2070
+ .tds-btn--pill{
2071
+ --tds-btn-border-radius:999px;
2072
+ --tds-btn-padding-y:4px;
2073
+ --tds-btn-padding-x:13px;
2074
+
2075
+ --tds-btn-color:var(--t-text-color-default-primary);
2076
+ --tds-btn-bg:var(--t-fill-color-button-pill-default);
2077
+ --tds-btn-border-color:var(--tds-btn-bg);
2078
+ --tds-btn-color-hover:var(--tds-btn-color);
2079
+ --tds-btn-bg-hover:var(--t-fill-color-button-pill-hover);
2080
+ --tds-btn-border-color-hover:var(--tds-btn-bg-hover);
2081
+
2082
+ --tds-btn-color-active:var(--tds-btn-color);
2083
+ --tds-btn-bg-active:var(--t-fill-color-button-pill-active);
2084
+ --tds-btn-border-color-active:var(--tds-btn-bg-active);
2085
+ --tds-btn-color-disabled:var(--t-text-color-default-disabled);
2086
+ --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-solid-disabled);
2087
+ --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-solid-disabled);
2088
+ --tds-btn-icon-color:var(--t-icon-color-default-secondary);
2089
+ --tds-btn-min-height:32px;
2090
+ }
2091
+
2092
+ .tds-btn--pill:is(.tds-btn--sm){
2093
+ --tds-btn-padding-y:1px;
2094
+ --tds-btn-padding-x:7px;
2095
+ --tds-btn-min-height:auto;
1466
2096
  }
1467
2097
 
1468
- .tds-btn--pill:is(.tds-btn--xs) {
1469
- --tds-btn-padding-y: 1px;
1470
- --tds-btn-padding-x: 9px;
1471
- --tds-btn-min-height: auto;
2098
+ .tds-btn--pill:is(.tds-btn--xs){
2099
+ --tds-btn-padding-y:1px;
2100
+ --tds-btn-padding-x:9px;
2101
+ --tds-btn-min-height:auto;
1472
2102
  }
1473
2103
 
1474
- .tds-btn--pill:disabled,.tds-btn--pill.disabled {
1475
- --tds-btn-icon-color: inherit;
2104
+ .tds-btn--pill:disabled,.tds-btn--pill.disabled{
2105
+ --tds-btn-icon-color:inherit;
1476
2106
  }
1477
2107
 
1478
- .tds-btn--dropdown .suffix {
1479
- transition: transform .2s ease-in-out;
2108
+ .tds-btn--dropdown .suffix{
2109
+ transition:transform .2s ease-in-out;
1480
2110
  }
1481
2111
 
1482
- .tds-btn--dropdown[aria-expanded="true"] .suffix {
1483
- transform: rotate(-180deg);
2112
+ .tds-btn--dropdown[aria-expanded="true"] .suffix{
2113
+ transform:rotate(-180deg);
1484
2114
  }
1485
2115
 
1486
- .tds-btn--full-width {
1487
- width: 100%;
2116
+ .tds-btn--full-width{
2117
+ width:100%;
1488
2118
  }
1489
2119
 
1490
- .tds-btn--loading {
1491
- --tds-btn-loading-spinner-visibility: visible;
1492
- --tds-btn-loading-spinner-animation-play-state: running;
2120
+ .tds-btn--loading{
2121
+ --tds-btn-loading-spinner-visibility:visible;
2122
+ --tds-btn-loading-spinner-animation-play-state:running;
1493
2123
 
1494
- position: relative;
2124
+ position:relative;
1495
2125
  }
1496
2126
 
1497
- .tds-btn--loading :not(.tds-loading-spinner) {
1498
- visibility: hidden;
2127
+ .tds-btn--loading :not(.tds-loading-spinner){
2128
+ visibility:hidden;
1499
2129
  }
1500
2130
 
1501
- .tds-btn--attention .attention-icon {
1502
- display: inline-block;
1503
- width: var(--tds-btn-attention-icon-size);
1504
- height: var(--tds-btn-attention-icon-size);
1505
- background-color: var(--t-icon-color-status-warning-primary);
1506
- border: .125em solid var(--t-border-color-default-white);
1507
- border-radius: var(--t-border-radius-round);
1508
- }
1509
-
1510
- .tds-checkbox {
1511
- --tds-checkbox-column-gap: var(--t-spacing-1);
1512
- --tds-checkbox-cursor: pointer;
1513
- --tds-checkbox-line-height: 1.4;
1514
- --tds-checkbox-transition-property: background-color, border-color;
1515
-
1516
- --tds-checkbox-input-size: var(--t-element-size-md);
1517
- --tds-checkbox-input-border-radius: 3px;
1518
- --tds-checkbox-input-border-color: var(--t-border-color-control-neutral);
1519
- --tds-checkbox-input-background-color: transparent;
1520
- --tds-checkbox-input-border-color-hover: var(--t-border-color-button-info);
1521
- --tds-checkbox-input-background-color-hover: var(--t-fill-color-button-interaction-outline-dim-hover);
1522
- --tds-checkbox-input-border-color-checked: var(--t-border-color-control-info);
1523
- --tds-checkbox-input-background-color-checked: var(--t-fill-color-control-primary);
1524
- --tds-checkbox-input-border-color-disabled: var(--t-border-color-control-disabled);
1525
- --tds-checkbox-input-background-color-disabled: var(--t-fill-color-neutral-070);
1526
-
1527
- --tds-checkbox-input-icon: none;
1528
- --tds-checkbox-input-icon-visibility: hidden;
1529
- --tds-checkbox-input-icon-opacity: 0;
1530
- --tds-checkbox-input-icon-fill: var(--t-icon-color-default-inverted);
1531
- --tds-checkbox-input-icon-checked: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1532
- --tds-checkbox-input-icon-indeterminate: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
1533
-
1534
- --tds-checkbox-font-size: var(--t-font-size-md);
1535
- --tds-checkbox-label-color: var(--t-text-color-default-primary);
1536
-
1537
- --tds-checkbox-description-font-size: var(--t-font-size-sm);
1538
- --tds-checkbox-description-line-height: 1.35;
1539
- --tds-checkbox-description-color: var(--t-text-color-default-secondary);
1540
-
1541
- position: relative;
1542
- display: inline-grid;
1543
- grid-template-areas:
1544
- "checkbox label"
1545
- ". description";
1546
- grid-template-columns: auto 1fr;
1547
- gap: var(--t-spacing-fourth) var(--tds-checkbox-column-gap);
1548
- line-height: var(--tds-checkbox-line-height);
1549
- cursor: var(--tds-checkbox-cursor);
1550
- -webkit-user-select: none;
1551
- -moz-user-select: none;
1552
- user-select: none;
1553
- }
1554
-
1555
- .tds-checkbox label {
1556
- grid-area: label;
1557
- font-size: var(--tds-checkbox-font-size);
1558
- color: var(--tds-checkbox-label-color);
1559
- cursor: var(--tds-checkbox-cursor);
2131
+ .tds-btn--attention .attention-icon{
2132
+ display:inline-block;
2133
+ width:var(--tds-btn-attention-icon-size);
2134
+ height:var(--tds-btn-attention-icon-size);
2135
+ background-color:var(--t-icon-color-status-warning-primary);
2136
+ border:.125em solid var(--t-border-color-default-white);
2137
+ border-radius:var(--t-border-radius-round);
2138
+ }
2139
+
2140
+ .tds-checkbox{
2141
+ --tds-checkbox-column-gap:var(--t-spacing-1);
2142
+ --tds-checkbox-cursor:pointer;
2143
+ --tds-checkbox-line-height:1.4;
2144
+ --tds-checkbox-transition-property:background-color, border-color;
2145
+
2146
+ --tds-checkbox-input-size:var(--t-element-size-md);
2147
+ --tds-checkbox-input-border-radius:3px;
2148
+ --tds-checkbox-input-border-color:var(--t-border-color-control-neutral);
2149
+ --tds-checkbox-input-background-color:transparent;
2150
+ --tds-checkbox-input-border-color-hover:var(--t-border-color-button-info);
2151
+ --tds-checkbox-input-background-color-hover:var(--t-fill-color-button-interaction-outline-dim-hover);
2152
+ --tds-checkbox-input-border-color-checked:var(--t-border-color-control-info);
2153
+ --tds-checkbox-input-background-color-checked:var(--t-fill-color-control-primary);
2154
+ --tds-checkbox-input-border-color-disabled:var(--t-border-color-control-disabled);
2155
+ --tds-checkbox-input-background-color-disabled:var(--t-fill-color-neutral-070);
2156
+
2157
+ --tds-checkbox-input-icon:none;
2158
+ --tds-checkbox-input-icon-visibility:hidden;
2159
+ --tds-checkbox-input-icon-opacity:0;
2160
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-default-inverted);
2161
+ --tds-checkbox-input-icon-checked:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
2162
+ --tds-checkbox-input-icon-indeterminate:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
2163
+
2164
+ --tds-checkbox-font-size:var(--t-font-size-md);
2165
+ --tds-checkbox-label-color:var(--t-text-color-default-primary);
2166
+
2167
+ --tds-checkbox-description-font-size:var(--t-font-size-sm);
2168
+ --tds-checkbox-description-line-height:1.35;
2169
+ --tds-checkbox-description-color:var(--t-text-color-default-secondary);
2170
+
2171
+ position:relative;
2172
+ display:inline-grid;
2173
+ grid-template-areas:"checkbox label" ". description";
2174
+ grid-template-columns:auto 1fr;
2175
+ gap:var(--t-spacing-fourth) var(--tds-checkbox-column-gap);
2176
+ line-height:var(--tds-checkbox-line-height);
2177
+ cursor:var(--tds-checkbox-cursor);
2178
+ -webkit-user-select:none;
2179
+ -moz-user-select:none;
2180
+ user-select:none;
2181
+ }
2182
+
2183
+ .tds-checkbox label{
2184
+ grid-area:label;
2185
+ font-size:var(--tds-checkbox-font-size);
2186
+ color:var(--tds-checkbox-label-color);
2187
+ cursor:var(--tds-checkbox-cursor);
1560
2188
  }
1561
2189
 
1562
- .tds-checkbox input[type="checkbox"] {
1563
- position: relative;
1564
- grid-area: checkbox;
1565
- width: 1em;
1566
- height: 1em;
1567
- margin: calc((1lh - 1em) / 2) 0 0;
1568
- font-size: var(--tds-checkbox-font-size);
1569
- line-height: inherit;
1570
- -webkit-appearance: none;
1571
- -moz-appearance: none;
1572
- appearance: none;
1573
- cursor: var(--tds-checkbox-cursor);
1574
- background-color: var(--tds-checkbox-input-background-color);
1575
- border: var(--t-border-width-default) solid var(--tds-checkbox-input-border-color);
1576
- border-radius: var(--tds-checkbox-input-border-radius);
1577
- transition-timing-function: ease-in-out;
1578
- transition-duration: 180ms;
1579
- transition-property: var(--tds-checkbox-transition-property);
2190
+ .tds-checkbox input[type="checkbox"]{
2191
+ position:relative;
2192
+ grid-area:checkbox;
2193
+ width:1em;
2194
+ height:1em;
2195
+ margin:calc((1lh - 1em) / 2) 0 0;
2196
+ font-size:var(--tds-checkbox-font-size);
2197
+ line-height:inherit;
2198
+ -webkit-appearance:none;
2199
+ -moz-appearance:none;
2200
+ appearance:none;
2201
+ cursor:var(--tds-checkbox-cursor);
2202
+ background-color:var(--tds-checkbox-input-background-color);
2203
+ border:var(--t-border-width-default) solid var(--tds-checkbox-input-border-color);
2204
+ border-radius:var(--tds-checkbox-input-border-radius);
2205
+ transition-timing-function:ease-in-out;
2206
+ transition-duration:180ms;
2207
+ transition-property:var(--tds-checkbox-transition-property);
1580
2208
  }
1581
2209
 
1582
- :is(.tds-checkbox input[type="checkbox"])::before {
1583
- position: absolute;
1584
- top: 50%;
1585
- left: 50%;
1586
- visibility: var(--tds-checkbox-input-icon-visibility);
1587
- width: 100%;
1588
- height: 100%;
1589
- content: "";
1590
- background-color: var(--tds-checkbox-input-icon-fill);
1591
- border-radius: var(--tds-checkbox-input-border-radius);
1592
- opacity: var(--tds-checkbox-input-icon-opacity);
1593
- -webkit-mask-image: var(--tds-checkbox-input-icon);
1594
- mask-image: var(--tds-checkbox-input-icon);
1595
- -webkit-mask-repeat: no-repeat;
1596
- mask-repeat: no-repeat;
1597
- -webkit-mask-size: contain;
1598
- mask-size: contain;
1599
- transform: translate(-50%, -50%);
2210
+ :is(.tds-checkbox input[type="checkbox"])::before{
2211
+ position:absolute;
2212
+ top:50%;
2213
+ left:50%;
2214
+ visibility:var(--tds-checkbox-input-icon-visibility);
2215
+ width:100%;
2216
+ height:100%;
2217
+ content:"";
2218
+ background-color:var(--tds-checkbox-input-icon-fill);
2219
+ border-radius:var(--tds-checkbox-input-border-radius);
2220
+ opacity:var(--tds-checkbox-input-icon-opacity);
2221
+ -webkit-mask-image:var(--tds-checkbox-input-icon);
2222
+ mask-image:var(--tds-checkbox-input-icon);
2223
+ -webkit-mask-repeat:no-repeat;
2224
+ mask-repeat:no-repeat;
2225
+ -webkit-mask-size:contain;
2226
+ mask-size:contain;
2227
+ transform:translate(-50%, -50%);
1600
2228
  }
1601
2229
 
1602
- :is(.tds-checkbox input[type="checkbox"]):hover {
1603
- --tds-checkbox-input-background-color: var(--tds-checkbox-input-background-color-hover);
1604
- --tds-checkbox-input-border-color: var(--tds-checkbox-input-border-color-hover);
2230
+ :is(.tds-checkbox input[type="checkbox"]):hover{
2231
+ --tds-checkbox-input-background-color:var(--tds-checkbox-input-background-color-hover);
2232
+ --tds-checkbox-input-border-color:var(--tds-checkbox-input-border-color-hover);
1605
2233
  }
1606
2234
 
1607
- :is(.tds-checkbox input[type="checkbox"]):focus-visible {
1608
- outline: solid 2px var(--t-border-color-status-info);
1609
- outline-offset: 1px;
2235
+ :is(.tds-checkbox input[type="checkbox"]):focus-visible{
2236
+ outline:solid 2px var(--t-border-color-status-info);
2237
+ outline-offset:1px;
1610
2238
  }
1611
2239
 
1612
- :is(.tds-checkbox input[type="checkbox"]):checked,:is(.tds-checkbox input[type="checkbox"]):indeterminate {
1613
- --tds-checkbox-input-background-color: var(--tds-checkbox-input-background-color-checked);
1614
- --tds-checkbox-input-border-color: var(--tds-checkbox-input-border-color-checked);
1615
- --tds-checkbox-input-icon-visibility: visible;
1616
- --tds-checkbox-input-icon-opacity: 1;
2240
+ :is(.tds-checkbox input[type="checkbox"]):checked,:is(.tds-checkbox input[type="checkbox"]):indeterminate{
2241
+ --tds-checkbox-input-background-color:var(--tds-checkbox-input-background-color-checked);
2242
+ --tds-checkbox-input-border-color:var(--tds-checkbox-input-border-color-checked);
2243
+ --tds-checkbox-input-icon-visibility:visible;
2244
+ --tds-checkbox-input-icon-opacity:1;
1617
2245
  }
1618
2246
 
1619
- :is(.tds-checkbox input[type="checkbox"]):disabled {
1620
- --tds-checkbox-input-background-color: var(--tds-checkbox-input-background-color-disabled);
1621
- --tds-checkbox-input-border-color: var(--tds-checkbox-input-border-color-disabled);
1622
- --tds-checkbox-input-icon-fill: var(--t-icon-color-default-disabled);
1623
- pointer-events: none;
2247
+ :is(.tds-checkbox input[type="checkbox"]):disabled{
2248
+ --tds-checkbox-input-background-color:var(--tds-checkbox-input-background-color-disabled);
2249
+ --tds-checkbox-input-border-color:var(--tds-checkbox-input-border-color-disabled);
2250
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-default-disabled);
2251
+ pointer-events:none;
1624
2252
  }
1625
2253
 
1626
- .tds-checkbox:has(input:disabled) {
1627
- --tds-checkbox-label-color: var(--t-text-color-default-disabled);
1628
- --tds-checkbox-description-color: var(--t-text-color-default-disabled);
1629
- --tds-checkbox-cursor: not-allowed;
1630
- --tds-checkbox-input-background-color-checked: var(--t-fill-color-control-disabled);
1631
- --tds-checkbox-input-border-color-checked: var(--tds-checkbox-input-border-color-disabled);
2254
+ .tds-checkbox:has(input:disabled){
2255
+ --tds-checkbox-label-color:var(--t-text-color-default-disabled);
2256
+ --tds-checkbox-description-color:var(--t-text-color-default-disabled);
2257
+ --tds-checkbox-cursor:not-allowed;
2258
+ --tds-checkbox-input-background-color-checked:var(--t-fill-color-control-disabled);
2259
+ --tds-checkbox-input-border-color-checked:var(--tds-checkbox-input-border-color-disabled);
1632
2260
  }
1633
2261
 
1634
- .tds-checkbox:has(input:checked) {
1635
- --tds-checkbox-input-icon: var(--tds-checkbox-input-icon-checked);
2262
+ .tds-checkbox:has(input:checked){
2263
+ --tds-checkbox-input-icon:var(--tds-checkbox-input-icon-checked);
1636
2264
  }
1637
2265
 
1638
- .tds-checkbox .tds-checkbox--indeterminate,.tds-checkbox:has(input:indeterminate) {
1639
- --tds-checkbox-input-icon: var(--tds-checkbox-input-icon-indeterminate);
2266
+ .tds-checkbox .tds-checkbox--indeterminate,.tds-checkbox:has(input:indeterminate){
2267
+ --tds-checkbox-input-icon:var(--tds-checkbox-input-icon-indeterminate);
1640
2268
  }
1641
2269
 
1642
- @media (prefers-reduced-motion: reduce) {
2270
+ @media (prefers-reduced-motion: reduce){
1643
2271
 
1644
- .tds-checkbox {
1645
- --tds-checkbox-transition-property: none;
2272
+ .tds-checkbox{
2273
+ --tds-checkbox-transition-property:none;
1646
2274
  }
1647
2275
  }
1648
2276
 
1649
- .tds-checkbox-description {
1650
- grid-area: description;
1651
- margin: 0;
1652
- margin-top: var(--t-spacing-fourth);
1653
- font-size: var(--tds-checkbox-description-font-size);
1654
- line-height: var(--tds-checkbox-description-line-height);
1655
- color: var(--tds-checkbox-description-color);
1656
- cursor: text;
2277
+ .tds-checkbox-description{
2278
+ grid-area:description;
2279
+ margin:0;
2280
+ margin-top:var(--t-spacing-fourth);
2281
+ font-size:var(--tds-checkbox-description-font-size);
2282
+ line-height:var(--tds-checkbox-description-line-height);
2283
+ color:var(--tds-checkbox-description-color);
2284
+ cursor:text;
1657
2285
  }
1658
2286
 
1659
2287
  .tds-checkbox--invalid,
1660
- .tds-checkbox:has(input:invalid) {
1661
- --tds-checkbox-input-border-color: var(--t-border-color-button-delete);
1662
- --tds-checkbox-input-border-color-hover: var(--t-border-color-button-delete);
1663
- --tds-checkbox-input-background-color-hover: var(--t-fill-color-button-delete-outline-dim-hover);
1664
- --tds-checkbox-input-border-color-checked: var(--t-fill-color-button-delete-solid-default);
1665
- --tds-checkbox-input-background-color-checked: var(--t-fill-color-button-delete-solid-default);
1666
- --tds-checkbox-description-color: var(--t-text-color-status-error);
1667
- }
1668
-
1669
- .tds-checkbox--sm {
1670
- --tds-checkbox-column-gap: 6px;
1671
- --tds-checkbox-line-height: 1.35;
1672
- --tds-checkbox-input-size: var(--t-element-size-sm);
1673
- --tds-checkbox-font-size: var(--t-font-size-sm);
1674
- --tds-checkbox-description-font-size: var(--t-font-size-xs);
1675
- --tds-checkbox-description-line-height: 1.3;
1676
- }
1677
-
1678
- .tds-checkbox--xs {
1679
- --tds-checkbox-column-gap: var(--t-spacing-half);
1680
- --tds-checkbox-line-height: 1.3;
1681
- --tds-checkbox-input-size: var(--t-element-size-xs);
1682
- --tds-checkbox-font-size: var(--t-font-size-xs);
1683
- --tds-checkbox-description-font-size: var(--t-font-size-xs);
1684
- --tds-checkbox-description-line-height: 1.25;
1685
- }
1686
-
1687
- /**
1688
- * Do not edit directly, this file was auto-generated.
1689
- */
1690
-
1691
- .t-banner {
1692
- --t-banner-font-size: var(--t-font-size-md);
1693
- --t-banner-font-color: var(--t-text-color-default-primary);
1694
- --t-banner-background-color: var(--t-fill-color-status-neutral-ghost);
1695
- --t-banner-spacing: var(--t-spacing-2);
1696
- --t-banner-border-radius: var(--t-border-radius-md);
1697
- --t-banner-title-font-color: var(--t-text-color-default-headline);
1698
- --t-banner-title-font-size: var(--t-font-size-md);
1699
- --t-banner-title-font-weight: var(--t-font-weight-semibold);
1700
- --t-banner-icon-fill-color: hsla(0, 0%, 0%, 0);
1701
- --t-banner-background-color-info: var(--t-fill-color-status-info-ghost);
1702
- --t-banner-icon-fill-color-info: var(--t-icon-color-status-info-primary);
1703
- --t-banner-background-color-warning: var(--t-fill-color-status-warning-ghost);
1704
- --t-banner-icon-fill-color-warning: var(--t-icon-color-status-warning-primary);
1705
- --t-banner-background-color-error: var(--t-fill-color-status-error-ghost);
1706
- --t-banner-icon-fill-color-error: var(--t-icon-color-status-error-primary);
1707
- --t-banner-background-color-success: var(--t-fill-color-status-success-ghost);
1708
- --t-banner-icon-fill-color-success: var(--t-icon-color-status-success-primary);
1709
- --t-banner-link-font-color-hover: var(--t-text-color-default-headline);
1710
- display: flex;
1711
- gap: var(--t-banner-spacing);
1712
- padding: var(--t-banner-spacing);
1713
- font-size: var(--t-banner-font-size);
1714
- line-height: 1.4;
1715
- color: var(--t-banner-font-color);
1716
- background-color: var(--t-banner-background-color);
1717
- border-radius: var(--t-banner-border-radius);
1718
- }
1719
-
1720
- .t-banner-title {
1721
- display: block;
1722
- margin-bottom: var(--t-spacing-half);
1723
- font-size: var(--t-banner-title-font-size);
1724
- font-weight: var(--t-banner-title-font-weight);
1725
- color: var(--t-banner-title-font-color);
1726
- }
1727
-
1728
- .t-banner-icon {
1729
- margin-top: 1px;
1730
- }
1731
-
1732
- .t-banner-icon svg {
1733
- fill: var(--t-banner-icon-fill-color);
1734
- }
1735
-
1736
- .t-banner-body a {
1737
- color: inherit;
1738
- text-decoration: underline;
1739
- text-underline-offset: 2px;
1740
- transition: color .1s linear;
1741
- }
1742
-
1743
- .t-banner--status-info {
1744
- --t-banner-background-color: var(--t-banner-background-color-info);
1745
- --t-banner-icon-fill-color: var(--t-banner-icon-fill-color-info);
1746
- }
1747
-
1748
- .t-banner--status-warning {
1749
- --t-banner-background-color: var(--t-banner-background-color-warning);
1750
- --t-banner-icon-fill-color: var(--t-banner-icon-fill-color-warning);
1751
- }
1752
-
1753
- .t-banner--status-error {
1754
- --t-banner-background-color: var(--t-banner-background-color-error);
1755
- --t-banner-icon-fill-color: var(--t-banner-icon-fill-color-error);
1756
- }
1757
-
1758
- .t-banner--status-success {
1759
- --t-banner-background-color: var(--t-banner-background-color-success);
1760
- --t-banner-icon-fill-color: var(--t-banner-icon-fill-color-success);
1761
- }
1762
-
1763
- .t-banner--sm {
1764
- --t-banner-spacing: calc(var(--t-spacing-half) + var(--t-spacing-1));
2288
+ .tds-checkbox:has(input:invalid){
2289
+ --tds-checkbox-input-border-color:var(--t-border-color-button-delete);
2290
+ --tds-checkbox-input-border-color-hover:var(--t-border-color-button-delete);
2291
+ --tds-checkbox-input-background-color-hover:var(--t-fill-color-button-delete-outline-dim-hover);
2292
+ --tds-checkbox-input-border-color-checked:var(--t-fill-color-button-delete-solid-default);
2293
+ --tds-checkbox-input-background-color-checked:var(--t-fill-color-button-delete-solid-default);
2294
+ --tds-checkbox-description-color:var(--t-text-color-status-error);
2295
+ }
2296
+
2297
+ .tds-checkbox--sm{
2298
+ --tds-checkbox-column-gap:6px;
2299
+ --tds-checkbox-line-height:1.35;
2300
+ --tds-checkbox-input-size:var(--t-element-size-sm);
2301
+ --tds-checkbox-font-size:var(--t-font-size-sm);
2302
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
2303
+ --tds-checkbox-description-line-height:1.3;
2304
+ }
2305
+
2306
+ .tds-checkbox--xs{
2307
+ --tds-checkbox-column-gap:var(--t-spacing-half);
2308
+ --tds-checkbox-line-height:1.3;
2309
+ --tds-checkbox-input-size:var(--t-element-size-xs);
2310
+ --tds-checkbox-font-size:var(--t-font-size-xs);
2311
+ --tds-checkbox-description-font-size:var(--t-font-size-xs);
2312
+ --tds-checkbox-description-line-height:1.25;
2313
+ }
2314
+
2315
+ .t-banner{
2316
+ --t-banner-font-size:var(--t-font-size-md);
2317
+ --t-banner-font-color:var(--t-text-color-default-primary);
2318
+ --t-banner-background-color:var(--t-fill-color-status-neutral-ghost);
2319
+ --t-banner-spacing:var(--t-spacing-2);
2320
+ --t-banner-border-radius:var(--t-border-radius-md);
2321
+ --t-banner-title-font-color:var(--t-text-color-default-headline);
2322
+ --t-banner-title-font-size:var(--t-font-size-md);
2323
+ --t-banner-title-font-weight:var(--t-font-weight-semibold);
2324
+ --t-banner-icon-fill-color:hsla(0, 0%, 0%, 0);
2325
+ --t-banner-background-color-info:var(--t-fill-color-status-info-ghost);
2326
+ --t-banner-icon-fill-color-info:var(--t-icon-color-status-info-primary);
2327
+ --t-banner-background-color-warning:var(--t-fill-color-status-warning-ghost);
2328
+ --t-banner-icon-fill-color-warning:var(--t-icon-color-status-warning-primary);
2329
+ --t-banner-background-color-error:var(--t-fill-color-status-error-ghost);
2330
+ --t-banner-icon-fill-color-error:var(--t-icon-color-status-error-primary);
2331
+ --t-banner-background-color-success:var(--t-fill-color-status-success-ghost);
2332
+ --t-banner-icon-fill-color-success:var(--t-icon-color-status-success-primary);
2333
+ --t-banner-link-font-color-hover:var(--t-text-color-default-headline);
2334
+ display:flex;
2335
+ gap:var(--t-banner-spacing);
2336
+ padding:var(--t-banner-spacing);
2337
+ font-size:var(--t-banner-font-size);
2338
+ line-height:1.4;
2339
+ color:var(--t-banner-font-color);
2340
+ background-color:var(--t-banner-background-color);
2341
+ border-radius:var(--t-banner-border-radius);
2342
+ }
2343
+
2344
+ .t-banner-title{
2345
+ display:block;
2346
+ margin-bottom:var(--t-spacing-half);
2347
+ font-size:var(--t-banner-title-font-size);
2348
+ font-weight:var(--t-banner-title-font-weight);
2349
+ color:var(--t-banner-title-font-color);
2350
+ }
2351
+
2352
+ .t-banner-icon{
2353
+ margin-top:1px;
2354
+ }
2355
+
2356
+ .t-banner-icon svg{
2357
+ fill:var(--t-banner-icon-fill-color);
2358
+ }
2359
+
2360
+ .t-banner-body a{
2361
+ color:inherit;
2362
+ text-decoration:underline;
2363
+ text-underline-offset:2px;
2364
+ transition:color .1s linear;
2365
+ }
2366
+
2367
+ .t-banner--status-info{
2368
+ --t-banner-background-color:var(--t-banner-background-color-info);
2369
+ --t-banner-icon-fill-color:var(--t-banner-icon-fill-color-info);
2370
+ }
2371
+
2372
+ .t-banner--status-warning{
2373
+ --t-banner-background-color:var(--t-banner-background-color-warning);
2374
+ --t-banner-icon-fill-color:var(--t-banner-icon-fill-color-warning);
2375
+ }
2376
+
2377
+ .t-banner--status-error{
2378
+ --t-banner-background-color:var(--t-banner-background-color-error);
2379
+ --t-banner-icon-fill-color:var(--t-banner-icon-fill-color-error);
2380
+ }
2381
+
2382
+ .t-banner--status-success{
2383
+ --t-banner-background-color:var(--t-banner-background-color-success);
2384
+ --t-banner-icon-fill-color:var(--t-banner-icon-fill-color-success);
2385
+ }
2386
+
2387
+ .t-banner--sm{
2388
+ --t-banner-spacing:calc(var(--t-spacing-half) + var(--t-spacing-1));
1765
2389
  }
1766
2390
 
1767
2391
  /*# sourceMappingURL=reactRenderLegacy.css.map */