@planningcenter/tapestry 1.5.0-rc.12 → 1.5.0-rc.14

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