@planningcenter/tapestry 1.5.0-rc.19 → 1.5.0-rc.2

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