@planningcenter/tapestry 1.5.0-rc.24 → 1.5.0-rc.3

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 (112) 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 +143 -649
  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-Ge2rdriw.js → p-B-67IKcZ.js} +2 -2
  24. package/dist/tapestry-wc/dist/components/p-B-67IKcZ.js.map +1 -0
  25. package/dist/tapestry-wc/dist/components/{p-Wfh2OBYi.js → p-BMEnuMSh.js} +14 -6
  26. package/dist/tapestry-wc/dist/components/p-BMEnuMSh.js.map +1 -0
  27. package/dist/tapestry-wc/dist/components/{p-Dw98fduh.js → p-BOKFpywI.js} +3 -3
  28. package/dist/tapestry-wc/dist/components/p-BOKFpywI.js.map +1 -0
  29. package/dist/tapestry-wc/dist/components/{p-CiLsEvoO.js → p-BtM0k-xO.js} +4 -50
  30. package/dist/tapestry-wc/dist/components/p-BtM0k-xO.js.map +1 -0
  31. package/dist/tapestry-wc/dist/components/{p-Dtc7ry-6.js → p-DsbUR0FP.js} +18 -6
  32. package/dist/tapestry-wc/dist/components/p-DsbUR0FP.js.map +1 -0
  33. package/dist/tapestry-wc/dist/components/p-zXpXdjOf.js +93 -0
  34. package/dist/tapestry-wc/dist/components/p-zXpXdjOf.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 -33
  48. package/dist/tokens/ts/tokens.d.ts.map +1 -1
  49. package/dist/tokens/ts/tokens.js +0 -33
  50. package/dist/tokens/ts/tokens.js.map +1 -1
  51. package/dist/tokens.css +0 -33
  52. package/dist/tokens.css.map +1 -1
  53. package/dist/unstable.css +1018 -1203
  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 -11
  58. package/dist/unstable.js.map +1 -1
  59. package/dist/utilities/Icon.d.ts +1 -0
  60. package/dist/utilities/Icon.d.ts.map +1 -1
  61. package/dist/utilities/Icon.js +1 -0
  62. package/dist/utilities/Icon.js.map +1 -1
  63. package/dist/utilities/buttonLinkShared.d.ts.map +1 -1
  64. package/dist/utilities/buttonLinkShared.js +3 -4
  65. package/dist/utilities/buttonLinkShared.js.map +1 -1
  66. package/dist/webComponents.css +324 -509
  67. package/dist/webComponents.css.map +1 -1
  68. package/package.json +5 -7
  69. package/react-types/index.d.ts +12 -9
  70. package/dist/componentRegistration.d.ts +0 -2
  71. package/dist/componentRegistration.d.ts.map +0 -1
  72. package/dist/componentRegistration.js +0 -12
  73. package/dist/componentRegistration.js.map +0 -1
  74. package/dist/components/button/DropdownButton.d.ts +0 -15
  75. package/dist/components/button/DropdownButton.d.ts.map +0 -1
  76. package/dist/components/button/DropdownButton.js +0 -17
  77. package/dist/components/button/DropdownButton.js.map +0 -1
  78. package/dist/components/button/DropdownIconButton.d.ts +0 -5
  79. package/dist/components/button/DropdownIconButton.d.ts.map +0 -1
  80. package/dist/components/button/DropdownIconButton.js +0 -10
  81. package/dist/components/button/DropdownIconButton.js.map +0 -1
  82. package/dist/components/link/BaseLink.d.ts +0 -10
  83. package/dist/components/link/BaseLink.d.ts.map +0 -1
  84. package/dist/components/link/BaseLink.js +0 -20
  85. package/dist/components/link/BaseLink.js.map +0 -1
  86. package/dist/components/link/IconLink.d.ts +0 -12
  87. package/dist/components/link/IconLink.d.ts.map +0 -1
  88. package/dist/components/link/IconLink.js +0 -12
  89. package/dist/components/link/IconLink.js.map +0 -1
  90. package/dist/components/link/Link.d.ts +0 -12
  91. package/dist/components/link/Link.d.ts.map +0 -1
  92. package/dist/components/link/Link.js +0 -10
  93. package/dist/components/link/Link.js.map +0 -1
  94. package/dist/components/link/index.d.ts +0 -4
  95. package/dist/components/link/index.d.ts.map +0 -1
  96. package/dist/product-tokens/accounts.css +0 -17
  97. package/dist/product-tokens/calendar.css +0 -17
  98. package/dist/product-tokens/checkins.css +0 -17
  99. package/dist/product-tokens/giving.css +0 -17
  100. package/dist/product-tokens/groups.css +0 -17
  101. package/dist/product-tokens/home.css +0 -16
  102. package/dist/product-tokens/people.css +0 -17
  103. package/dist/product-tokens/publishing.css +0 -17
  104. package/dist/product-tokens/registrations.css +0 -17
  105. package/dist/product-tokens/services.css +0 -17
  106. package/dist/tapestry-render/dist/index.js +0 -21048
  107. package/dist/tapestry-render/dist/index.js.map +0 -1
  108. package/dist/tapestry-wc/dist/components/p-CiLsEvoO.js.map +0 -1
  109. package/dist/tapestry-wc/dist/components/p-Dtc7ry-6.js.map +0 -1
  110. package/dist/tapestry-wc/dist/components/p-Dw98fduh.js.map +0 -1
  111. package/dist/tapestry-wc/dist/components/p-Ge2rdriw.js.map +0 -1
  112. package/dist/tapestry-wc/dist/components/p-Wfh2OBYi.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
 
@@ -748,7 +425,7 @@
748
425
  .tds-page-header__title-bar {
749
426
  display: flex;
750
427
  flex-direction: column;
751
- gap: var(--t-spacing-2) var(--t-spacing-1);
428
+ gap: var(--t-spacing-2) var(--t-spacing-half);
752
429
  align-items: flex-start;
753
430
  justify-content: space-between;
754
431
  padding: 0 var(--tds-page-header-padding-x);
@@ -759,9 +436,8 @@
759
436
  }
760
437
 
761
438
  .tds-page-header__primary {
762
- flex: 1 1 max-content;
763
- min-width: 0;
764
- max-width: 100%;
439
+ flex: 1 1 auto;
440
+ width: 100%;
765
441
  }
766
442
 
767
443
  .tds-page-header__primary h1 {
@@ -770,7 +446,6 @@
770
446
  font-weight: var(--t-font-weight-normal);
771
447
  line-height: 40px;
772
448
  color: var(--tds-page-header-headline-color);
773
- overflow-wrap: break-word;
774
449
  }
775
450
 
776
451
  .has-multi-actions.tds-page-header [slot="actions"],
@@ -780,7 +455,6 @@
780
455
  gap: var(--t-spacing-half) var(--t-spacing-1);
781
456
  align-items: flex-start;
782
457
  justify-content: flex-start;
783
- min-width: 0;
784
458
  }
785
459
 
786
460
  .tds-page-header nav[slot="navigation"]:not(:has(ul)),
@@ -789,7 +463,7 @@
789
463
  .tds-page-header nav.tds-page-header__nav ul {
790
464
  display: flex;
791
465
  gap: var(--t-spacing-half);
792
- padding: var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
466
+ padding: 0 var(--tds-page-header-nav-padding-x);
793
467
  margin: 0 0 -1px;
794
468
  overflow: auto;
795
469
  list-style: none;
@@ -800,9 +474,9 @@
800
474
  .tds-page-header nav[slot="navigation"] button,
801
475
  .tds-page-header nav.tds-page-header__nav a,
802
476
  .tds-page-header nav.tds-page-header__nav button {
803
- position: relative;
804
477
  display: inline-flex;
805
- padding: var(--tds-page-header-nav-item-padding-y)
478
+ padding:
479
+ var(--tds-page-header-nav-item-padding-y)
806
480
  var(--tds-page-header-nav-item-padding-x);
807
481
  font-size: var(--t-font-size-md);
808
482
  color: var(--tds-page-header-nav-item-color);
@@ -814,471 +488,683 @@
814
488
  cursor: pointer;
815
489
  outline-offset: -2px;
816
490
  background-color: var(--tds-page-header-nav-item-background-color);
817
- border: var(--tds-page-header-nav-item-border-width) solid
491
+ border:
492
+ var(--tds-page-header-nav-item-border-width) solid
818
493
  var(--tds-page-header-nav-item-border-color);
819
494
  border-bottom: 1px solid var(--tds-page-header-nav-item-border-bottom-color);
820
495
  border-radius: var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
821
496
  }
822
497
 
823
- .tds-page-header
824
- nav:is([slot="navigation"], .tds-page-header__nav)
825
- li:has(.indicator) {
826
- position: relative;
827
- }
828
-
829
- .tds-page-header
830
- nav:is([slot="navigation"], .tds-page-header__nav)
831
- li:has(.indicator)
832
- :is(a, button) {
833
- -webkit-mask: radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
834
- mask: radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
835
- }
836
-
837
- .tds-page-header
838
- nav:is([slot="navigation"], .tds-page-header__nav)
839
- li:has(.indicator)::before,
840
- .tds-page-header
841
- nav:is([slot="navigation"], .tds-page-header__nav)
842
- li:has(.indicator)::after {
843
- position: absolute;
844
- top: -5px;
845
- right: -2px;
846
- width: 10px;
847
- height: 10px;
848
- content: "";
849
- background: var(--tds-page-header-nav-item-indicator-color);
850
- border-radius: 50%;
851
- }
852
-
853
- @media (prefers-reduced-motion: no-preference) {
854
- .tds-page-header
855
- nav:is([slot="navigation"], .tds-page-header__nav)
856
- li:has(.indicator)::after {
857
- animation: indicator-pulse 1.25s ease infinite;
858
- }
859
- }
860
-
861
498
  .tds-page-header nav[slot="navigation"] a.selected,
862
499
  .tds-page-header nav[slot="navigation"] button.selected,
863
500
  .tds-page-header nav.tds-page-header__nav a.selected,
864
501
  .tds-page-header nav.tds-page-header__nav button.selected {
865
- --tds-page-header-nav-item-color: var(
866
- --tds-page-header-nav-item-color-selected
867
- );
868
- --tds-page-header-nav-item-border-color: var(
869
- --tds-page-header-nav-item-border-color-selected
870
- );
871
- --tds-page-header-nav-item-background-color: var(
872
- --tds-page-header-nav-item-background-color-selected
873
- );
874
- --tds-page-header-nav-item-border-bottom-color: var(
875
- --tds-page-header-nav-item-background-color-selected
876
- );
877
- }
878
-
879
- .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
880
- .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
881
- .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
882
- .tds-page-header nav.tds-page-header__nav button:not(.selected):hover {
883
- --tds-page-header-nav-item-color: var(--tds-page-header-nav-item-color-hover);
884
- --tds-page-header-nav-item-background-color: var(
885
- --tds-page-header-nav-item-background-color-hover
886
- );
887
- --tds-page-header-nav-item-border-color: var(
888
- --tds-page-header-nav-item-border-color-hover
889
- );
890
- }
891
-
892
- .tds-page-header nav[slot="navigation"] a:not(.selected):active,
893
- .tds-page-header nav[slot="navigation"] button:not(.selected):active,
894
- .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
895
- .tds-page-header nav.tds-page-header__nav button:not(.selected):active {
896
- background-color: var(--tds-page-header-nav-item-background-color-active);
897
- }
898
-
899
- .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
900
- .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
901
- .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
902
- .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled {
903
- color: var(--tds-page-header-nav-item-color-disabled);
904
- cursor: not-allowed;
905
- background-color: var(--tds-page-header-nav-item-background-color-disabled);
906
- opacity: 1;
907
- }
908
-
909
- @media (min-width: 960px) {
910
- .tds-page-header__title-bar,
911
- .tds-page-header--profile .tds-page-header__title-bar {
912
- flex-flow: row nowrap;
913
- row-gap: 12px;
914
- align-items: flex-start;
915
- }
916
-
917
- .has-multi-actions.tds-page-header [slot="actions"],
918
- .has-multi-actions.tds-page-header .tds-page-header__actions {
919
- justify-content: flex-end;
920
- margin-top: var(--t-spacing-half);
921
- }
922
- }
923
-
924
- @keyframes indicator-pulse {
925
- 0% {
926
- opacity: 0.3;
927
- transform: scale(0.9);
928
- }
929
- 100% {
930
- opacity: 0;
931
- transform: scale(1.75);
932
- }
933
- }
934
-
935
-
936
- @media (prefers-reduced-motion: no-preference) {
937
-
938
- :root {
939
- interpolate-size: allow-keywords;
940
- }
941
- }
942
-
943
- @layer tds-component {
944
- tds-sidenav {
945
- --tds-sidenav-indent: 12px;
946
- --tds-sidenav-item-depth: 0;
947
-
948
- --tds-sidenav-item-transition: background-color 0.2s
949
- cubic-bezier(0.19, 0.91, 0.38, 1);
950
-
951
- --tds-sidenav-item-background-hover: var(
952
- --t-fill-color-button-interaction-ghost-hover
953
- );
954
- --tds-sidenav-item-background-active: var(
955
- --t-fill-color-button-interaction-ghost-active
956
- );
957
- --tds-sidenav-item-background-selected: var(
958
- --t-fill-color-button-interaction-ghost-active
959
- );
960
-
961
- --tds-sidenav-item-nested-border-color: var(--t-fill-color-neutral-050);
962
- --tds-sidenav-item-nested-border-color-hover: var(
963
- --t-fill-color-neutral-050
964
- );
965
- --tds-sidenav-item-nested-border-color-selected: var(
966
- --t-border-color-status-info
502
+ --tds-page-header-nav-item-color:
503
+ var(
504
+ --tds-page-header-nav-item-color-selected
967
505
  );
968
-
969
- --tds-sidenav-item-icon-color: var(--t-icon-color-default-secondary);
970
- --tds-sidenav-item-icon-color-selected: var(--t-icon-color-default-primary);
971
- }
972
-
973
- .is-classic tds-sidenav,
974
- .tds-sidenav--theme-gray {
975
- --tds-sidenav-item-background-hover: var(--t-fill-color-neutral-080);
976
- --tds-sidenav-item-background-active: var(--t-fill-color-neutral-070);
977
- --tds-sidenav-item-background-selected: var(--t-fill-color-neutral-050);
978
- --tds-sidenav-item-nested-border-color-hover: var(
979
- --t-fill-color-neutral-050
506
+ --tds-page-header-nav-item-border-color:
507
+ var(
508
+ --tds-page-header-nav-item-border-color-selected
980
509
  );
981
- --tds-sidenav-item-nested-border-color-selected: var(
982
- --t-fill-color-neutral-010
510
+ --tds-page-header-nav-item-background-color:
511
+ var(
512
+ --tds-page-header-nav-item-background-color-selected
983
513
  );
984
- }
985
- }
986
-
987
- .tds-sidenav :where(nav,ul,.tds-sidenav-section) {
988
- display: flex;
989
- }
990
-
991
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse) {
992
- flex-direction: column;
993
- gap: var(--t-spacing-half);
994
- width: 100%;
995
- }
996
-
997
- .tds-sidenav-section-list {
998
- width: 100%;
999
- padding: 0;
1000
- margin: 0;
1001
- list-style: none;
1002
- }
1003
-
1004
- .tds-sidenav-section-header {
1005
- display: flex;
1006
- align-items: baseline;
1007
- justify-content: space-between;
1008
- padding-top: var(--t-spacing-2);
1009
- }
1010
-
1011
- .tds-sidenav-section-header h2 {
1012
- margin: 0;
1013
- font-size: var(--t-font-size-sm);
1014
- font-weight: var(--t-font-weight-semibold);
1015
- color: var(--t-text-color-default-secondary);
1016
- text-transform: uppercase;
1017
- line-height: 1.35;
1018
- }
1019
-
1020
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header {
1021
- margin-top: 0;
1022
- }
1023
-
1024
- .tds-sidenav-section-header [slot="label-actions"] {
1025
- display: flex;
1026
- align-items: center;
1027
- gap: var(--t-spacing-half);
1028
- }
1029
-
1030
- .tds-sidenav-section [slot="section-actions"] {
1031
- display: flex;
1032
- align-items: center;
1033
- min-height: 42px;
1034
- padding: var(--t-spacing-1) 0;
1035
- gap: 12px;
1036
- }
1037
-
1038
- .tds-sidenav-section-list,
1039
- .tds-sidenav-item {
1040
- width: 100%;
1041
- padding: 0;
1042
- margin: 0;
1043
- }
1044
-
1045
- .tds-sidenav-item :is(a,button) {
1046
- position: relative;
1047
- display: flex;
1048
- gap: 12px;
1049
- align-items: center;
1050
- width: 100%;
1051
- padding: 12px;
1052
- overflow: hidden;
1053
- font-size: var(--t-font-size-sm);
1054
- line-height: 18px;
1055
- color: var(--t-text-color-default-headline);
1056
- white-space: nowrap;
1057
- text-decoration: none;
1058
- -webkit-appearance: none;
1059
- -moz-appearance: none;
1060
- appearance: none;
1061
- cursor: pointer;
1062
- background-color: var(--tds-sidenav-item-background, transparent);
1063
- border: 0;
1064
- border-radius: var(--t-border-radius-default);
1065
- transition: var(--tds-sidenav-item-transition);
1066
- }
1067
-
1068
- :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)) {
1069
- display: block;
1070
- flex: 1;
1071
- overflow: hidden;
1072
- text-overflow: ellipsis;
1073
- text-align: left;
1074
- white-space: nowrap;
1075
- }
1076
-
1077
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible {
1078
- --tds-sidenav-item-background: var(--tds-sidenav-item-background-hover);
1079
- color: var(--t-text-color-default-headline);
1080
- text-decoration: none;
1081
- }
1082
-
1083
- :is(.tds-sidenav-item :is(a,button)):active {
1084
- --tds-sidenav-item-background: var(--tds-sidenav-item-background-active);
1085
- }
1086
-
1087
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]) {
1088
- overflow: hidden;
1089
- color: var(--tds-sidenav-item-icon-color);
1090
- }
1091
-
1092
- :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 {
1093
- display: block;
1094
- width: var(--t-element-size-md);
1095
- height: var(--t-element-size-md);
1096
- }
514
+ --tds-page-header-nav-item-border-bottom-color:
515
+ var(
516
+ --tds-page-header-nav-item-background-color-selected
517
+ );
518
+ }
1097
519
 
1098
- :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section {
1099
- --tds-sidenav-indent: 19px;
1100
- }
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
+ }
1101
534
 
1102
- [aria-expanded="true"]:is(.tds-sidenav-item :is(a,button)) + .tds-sidenav-section-list {
1103
- visibility: visible;
1104
- block-size: auto;
1105
- opacity: 1;
1106
- }
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
+ }
1107
541
 
1108
- .tds-sidenav-item.selected :is(a,button) {
1109
- --tds-sidenav-item-nested-background: transparent;
1110
- --tds-sidenav-item-background: var(--tds-sidenav-item-background-selected);
1111
- --tds-sidenav-item-icon-color: var(--tds-sidenav-item-icon-color-selected);
1112
- font-weight: 600;
1113
- }
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
+ }
1114
551
 
1115
- .tds-sidenav-item .tds-sidenav-section-list {
1116
- --tds-sidenav-item-depth: 1;
1117
- 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;
1118
557
  }
1119
558
 
1120
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list) {
1121
- visibility: hidden;
1122
- block-size: 0;
1123
- overflow-y: clip;
1124
- opacity: 0;
1125
- transition:
1126
- content-visibility 0.2s allow-discrete,
1127
- opacity 0.2s,
1128
- block-size 0.2s;
1129
- }
559
+ .tds-page-header__primary {
560
+ width: auto;
561
+ }
1130
562
 
1131
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list {
1132
- --tds-sidenav-item-depth: 2;
1133
- }
563
+ [slot="actions"],
564
+ .tds-page-header__actions {
565
+ margin-left: auto;
566
+ }
1134
567
 
1135
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button) {
1136
- height: 32px;
1137
- padding-block: 9px;
1138
- padding-left: calc(
1139
- (var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) +
1140
- var(--tds-sidenav-indent) + 2px
1141
- );
1142
- line-height: 1;
1143
- background-color: transparent;
1144
- }
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
+ }
1145
574
 
1146
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before {
1147
- position: absolute;
1148
- top: 0;
1149
- bottom: 0;
1150
- left: calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1151
- width: 2px;
1152
- content: "";
1153
- background-color: var(--tds-sidenav-item-nested-border-color);
1154
- transition: var(--tds-sidenav-item-transition);
1155
- }
575
+ /**
576
+ * Do not edit directly, this file was auto-generated.
577
+ */
1156
578
 
1157
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after {
1158
- position: absolute;
1159
- inset: 0 0 0
1160
- calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1161
- z-index: -1;
1162
- height: 100%;
1163
- content: "";
1164
- background-color: var(--tds-sidenav-item-background);
1165
- border-radius: 0 var(--t-border-radius-default)
1166
- var(--t-border-radius-default) 0;
1167
- transition: var(--tds-sidenav-item-transition);
1168
- }
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-neutral-responsive-header-default: hsla(0, 0%, 0%, 0.1);
856
+ --t-fill-color-button-neutral-responsive-header-hover: hsla(0, 0%, 0%, 0.2);
857
+ --t-fill-color-button-neutral-responsive-header-active: hsla(0, 0%, 0%, 0.3);
858
+ --t-fill-color-button-neutral-responsive-header-disabled: hsla(0, 0%, 0%, 0.05);
859
+ --t-fill-color-button-interaction-solid-default: hsl(204, 100%, 40%);
860
+ --t-fill-color-button-interaction-solid-hover: hsl(204, 100%, 35%);
861
+ --t-fill-color-button-interaction-solid-active: hsl(204, 100%, 30%);
862
+ --t-fill-color-button-interaction-solid-disabled: hsl(0, 0%, 95%);
863
+ --t-fill-color-button-interaction-outline-dim-default: hsla(0, 0%, 100%, 0);
864
+ --t-fill-color-button-interaction-outline-dim-hover: hsl(204, 100%, 97%);
865
+ --t-fill-color-button-interaction-outline-dim-active: hsl(203, 94%, 94%);
866
+ --t-fill-color-button-interaction-outline-dim-disabled: hsl(0, 0%, 98%);
867
+ --t-fill-color-button-interaction-ghost-default: hsla(0, 0%, 100%, 0);
868
+ --t-fill-color-button-interaction-ghost-hover: hsl(204, 100%, 97%);
869
+ --t-fill-color-button-interaction-ghost-active: hsl(203, 94%, 94%);
870
+ --t-fill-color-button-interaction-ghost-disabled: hsla(0, 0%, 100%, 0);
871
+ --t-fill-color-button-delete-solid-default: hsl(8, 60%, 47%);
872
+ --t-fill-color-button-delete-solid-hover: hsl(8, 60%, 45%);
873
+ --t-fill-color-button-delete-solid-active: hsl(8, 60%, 40%);
874
+ --t-fill-color-button-delete-solid-disabled: hsl(0, 0%, 95%);
875
+ --t-fill-color-button-delete-outline-dim-default: hsla(0, 0%, 100%, 0);
876
+ --t-fill-color-button-delete-outline-dim-hover: hsl(7, 60%, 97%);
877
+ --t-fill-color-button-delete-outline-dim-active: hsl(9, 59%, 93%);
878
+ --t-fill-color-button-delete-outline-dim-disabled: hsl(0, 0%, 98%);
879
+ --t-fill-color-button-delete-ghost-default: hsla(0, 0%, 100%, 0);
880
+ --t-fill-color-button-delete-ghost-hover: hsl(7, 60%, 97%);
881
+ --t-fill-color-button-delete-ghost-active: hsl(9, 59%, 93%);
882
+ --t-fill-color-button-delete-ghost-disabled: hsla(0, 0%, 100%, 0);
883
+ --t-fill-color-button-pill-default: hsl(0, 0%, 93%);
884
+ --t-fill-color-button-pill-hover: hsl(0, 0%, 88%);
885
+ --t-fill-color-button-pill-active: hsl(0, 0%, 88%);
886
+ --t-fill-color-button-pill-disabled: hsl(0, 0%, 93%);
887
+ --t-fill-color-transparency-light-010: hsla(0, 0%, 100%, 0.1);
888
+ --t-fill-color-transparency-light-020: hsla(0, 0%, 100%, 0.2);
889
+ --t-fill-color-transparency-light-030: hsla(0, 0%, 100%, 0.3);
890
+ --t-fill-color-transparency-light-040: hsla(0, 0%, 100%, 0.4);
891
+ --t-fill-color-transparency-light-050: hsla(0, 0%, 100%, 0.5);
892
+ --t-fill-color-transparency-light-060: hsla(0, 0%, 100%, 0.6);
893
+ --t-fill-color-transparency-light-070: hsla(0, 0%, 100%, 0.7);
894
+ --t-fill-color-transparency-light-080: hsla(0, 0%, 100%, 0.8);
895
+ --t-fill-color-transparency-light-090: hsla(0, 0%, 100%, 0.9);
896
+ --t-fill-color-transparency-dark-010: hsla(0, 0%, 0%, 0.1);
897
+ --t-fill-color-transparency-dark-020: hsla(0, 0%, 0%, 0.2);
898
+ --t-fill-color-transparency-dark-030: hsla(0, 0%, 0%, 0.3);
899
+ --t-fill-color-transparency-dark-040: hsla(0, 0%, 0%, 0.4);
900
+ --t-fill-color-transparency-dark-050: hsla(0, 0%, 0%, 0.5);
901
+ --t-fill-color-transparency-dark-060: hsla(0, 0%, 0%, 0.6);
902
+ --t-fill-color-transparency-dark-070: hsla(0, 0%, 0%, 0.7);
903
+ --t-fill-color-transparency-dark-080: hsla(0, 0%, 0%, 0.8);
904
+ --t-fill-color-transparency-dark-090: hsla(0, 0%, 0%, 0.9);
905
+ --t-surface-color-canvas: hsl(0, 0%, 98%);
906
+ --t-surface-color-card: hsl(0, 0%, 100%);
907
+ --t-border-color-default-base: hsl(0, 0%, 88%);
908
+ --t-border-color-default-dark: hsl(0, 0%, 81%);
909
+ --t-border-color-default-darker: hsl(0, 0%, 68%);
910
+ --t-border-color-default-darkest: hsl(0, 0%, 58%);
911
+ --t-border-color-default-disabled: hsl(0, 0%, 88%);
912
+ --t-border-color-default-dim: hsl(0, 0%, 95%);
913
+ --t-border-color-default-white: hsl(0, 0%, 100%);
914
+ --t-border-color-status-neutral: hsl(0, 0%, 58%);
915
+ --t-border-color-status-info: hsl(204, 100%, 40%);
916
+ --t-border-color-status-success: hsl(97, 57%, 40%);
917
+ --t-border-color-status-warning: hsl(42, 84%, 63%);
918
+ --t-border-color-status-error: hsl(8, 60%, 47%);
919
+ --t-border-color-button-neutral: hsl(0, 0%, 88%);
920
+ --t-border-color-button-info: hsl(204, 100%, 40%);
921
+ --t-border-color-button-create: hsl(96, 57%, 33%);
922
+ --t-border-color-button-delete: hsl(8, 60%, 47%);
923
+ --t-border-color-control-neutral: hsl(0, 0%, 68%);
924
+ --t-border-color-control-info: hsl(204, 100%, 40%);
925
+ --t-border-color-control-success: hsl(97, 57%, 40%);
926
+ --t-border-color-control-warning: hsl(42, 84%, 63%);
927
+ --t-border-color-control-error: hsl(8, 60%, 47%);
928
+ --t-border-color-control-disabled: hsl(0, 0%, 88%);
929
+ --t-border-size-default: var(--t-border-width-default);
930
+ --t-border-size-thick: var(--t-border-width-thick);
931
+ --t-font-weight-semi-bold: var(--t-font-weight-semibold);
932
+ --t-text-color-tag-gray: var(--t-text-color-tag-bold-gray);
933
+ --t-text-color-tag-magenta: var(--t-text-color-tag-bold-magenta);
934
+ --t-text-color-tag-blue: var(--t-text-color-tag-bold-blue);
935
+ --t-text-color-tag-aqua: var(--t-text-color-tag-bold-aqua);
936
+ --t-text-color-tag-teal: var(--t-text-color-tag-bold-teal);
937
+ --t-text-color-tag-green: var(--t-text-color-tag-bold-green);
938
+ --t-text-color-tag-yellow: var(--t-text-color-tag-bold-yellow);
939
+ --t-text-color-tag-orange: var(--t-text-color-tag-bold-orange);
940
+ --t-text-color-tag-pink: var(--t-text-color-tag-bold-pink);
941
+ --t-text-color-tag-purple: var(--t-text-color-tag-bold-purple);
942
+ --t-icon-color-status-neutral-dark: hsl(0, 0%, 24%);
943
+ --t-icon-color-status-info-secondary: hsl(204, 100%, 40%);
944
+ --t-fill-color-alert-info: hsl(204, 94%, 49%);
945
+ --t-fill-color-alert-success: hsl(122, 60%, 41%);
946
+ --t-fill-color-alert-warning: hsl(43, 96%, 58%);
947
+ --t-fill-color-alert-error: hsl(4, 77%, 59%);
948
+ --t-fill-color-product-accounts-lightest: var(--t-fill-color-product-accounts-010);
949
+ --t-fill-color-product-accounts-lighter: var(--t-fill-color-product-accounts-020);
950
+ --t-fill-color-product-accounts-light: var(--t-fill-color-product-accounts-040);
951
+ --t-fill-color-product-accounts-base: var(--t-fill-color-product-accounts-050);
952
+ --t-fill-color-product-accounts-dark: var(--t-fill-color-product-accounts-060);
953
+ --t-fill-color-product-accounts-darker: var(--t-fill-color-product-accounts-070);
954
+ --t-fill-color-product-accounts-darkest: var(--t-fill-color-product-accounts-080);
955
+ --t-fill-color-product-calendar-lightest: var(--t-fill-color-product-calendar-020);
956
+ --t-fill-color-product-calendar-lighter: var(--t-fill-color-product-calendar-030);
957
+ --t-fill-color-product-calendar-light: var(--t-fill-color-product-calendar-040);
958
+ --t-fill-color-product-calendar-base: var(--t-fill-color-product-calendar-050);
959
+ --t-fill-color-product-calendar-dark: var(--t-fill-color-product-calendar-060);
960
+ --t-fill-color-product-calendar-darker: var(--t-fill-color-product-calendar-070);
961
+ --t-fill-color-product-calendar-darkest: var(--t-fill-color-product-calendar-080);
962
+ --t-fill-color-product-checkins-lightest: var(--t-fill-color-product-checkins-020);
963
+ --t-fill-color-product-checkins-lighter: var(--t-fill-color-product-checkins-030);
964
+ --t-fill-color-product-checkins-light: var(--t-fill-color-product-checkins-040);
965
+ --t-fill-color-product-checkins-base: var(--t-fill-color-product-checkins-050);
966
+ --t-fill-color-product-checkins-dark: var(--t-fill-color-product-checkins-060);
967
+ --t-fill-color-product-checkins-darker: var(--t-fill-color-product-checkins-070);
968
+ --t-fill-color-product-checkins-darkest: var(--t-fill-color-product-checkins-080);
969
+ --t-fill-color-product-giving-lightest: var(--t-fill-color-product-giving-020);
970
+ --t-fill-color-product-giving-lighter: var(--t-fill-color-product-giving-030);
971
+ --t-fill-color-product-giving-light: var(--t-fill-color-product-giving-040);
972
+ --t-fill-color-product-giving-base: var(--t-fill-color-product-giving-050);
973
+ --t-fill-color-product-giving-dark: var(--t-fill-color-product-giving-060);
974
+ --t-fill-color-product-giving-darker: var(--t-fill-color-product-giving-070);
975
+ --t-fill-color-product-giving-darkest: var(--t-fill-color-product-giving-080);
976
+ --t-fill-color-product-groups-lightest: var(--t-fill-color-product-groups-020);
977
+ --t-fill-color-product-groups-lighter: var(--t-fill-color-product-groups-030);
978
+ --t-fill-color-product-groups-light: var(--t-fill-color-product-groups-040);
979
+ --t-fill-color-product-groups-base: var(--t-fill-color-product-groups-050);
980
+ --t-fill-color-product-groups-dark: var(--t-fill-color-product-groups-060);
981
+ --t-fill-color-product-groups-darker: var(--t-fill-color-product-groups-070);
982
+ --t-fill-color-product-groups-darkest: var(--t-fill-color-product-groups-080);
983
+ --t-fill-color-product-home-lightest: var(--t-fill-color-product-home-020);
984
+ --t-fill-color-product-home-lighter: var(--t-fill-color-product-home-030);
985
+ --t-fill-color-product-home-light: var(--t-fill-color-product-home-040);
986
+ --t-fill-color-product-home-base: var(--t-fill-color-product-home-050);
987
+ --t-fill-color-product-home-dark: var(--t-fill-color-product-home-060);
988
+ --t-fill-color-product-home-darker: var(--t-fill-color-product-home-070);
989
+ --t-fill-color-product-home-darkest: var(--t-fill-color-product-home-080);
990
+ --t-fill-color-product-people-lightest: var(--t-fill-color-product-people-020);
991
+ --t-fill-color-product-people-lighter: var(--t-fill-color-product-people-030);
992
+ --t-fill-color-product-people-light: var(--t-fill-color-product-people-040);
993
+ --t-fill-color-product-people-base: var(--t-fill-color-product-people-050);
994
+ --t-fill-color-product-people-dark: var(--t-fill-color-product-people-060);
995
+ --t-fill-color-product-people-darker: var(--t-fill-color-product-people-070);
996
+ --t-fill-color-product-people-darkest: var(--t-fill-color-product-people-080);
997
+ --t-fill-color-product-publishing-lightest: var(--t-fill-color-product-publishing-020);
998
+ --t-fill-color-product-publishing-lighter: var(--t-fill-color-product-publishing-030);
999
+ --t-fill-color-product-publishing-light: var(--t-fill-color-product-publishing-040);
1000
+ --t-fill-color-product-publishing-base: var(--t-fill-color-product-publishing-050);
1001
+ --t-fill-color-product-publishing-dark: var(--t-fill-color-product-publishing-060);
1002
+ --t-fill-color-product-publishing-darker: var(--t-fill-color-product-publishing-070);
1003
+ --t-fill-color-product-publishing-darkest: var(--t-fill-color-product-publishing-080);
1004
+ --t-fill-color-product-registrations-lightest: var(--t-fill-color-product-registrations-020);
1005
+ --t-fill-color-product-registrations-lighter: var(--t-fill-color-product-registrations-030);
1006
+ --t-fill-color-product-registrations-light: var(--t-fill-color-product-registrations-040);
1007
+ --t-fill-color-product-registrations-base: var(--t-fill-color-product-registrations-050);
1008
+ --t-fill-color-product-registrations-dark: var(--t-fill-color-product-registrations-060);
1009
+ --t-fill-color-product-registrations-darker: var(--t-fill-color-product-registrations-070);
1010
+ --t-fill-color-product-registrations-darkest: var(--t-fill-color-product-registrations-080);
1011
+ --t-fill-color-product-services-lightest: var(--t-fill-color-product-services-020);
1012
+ --t-fill-color-product-services-lighter: var(--t-fill-color-product-services-030);
1013
+ --t-fill-color-product-services-light: var(--t-fill-color-product-services-040);
1014
+ --t-fill-color-product-services-base: var(--t-fill-color-product-services-050);
1015
+ --t-fill-color-product-services-dark: var(--t-fill-color-product-services-060);
1016
+ --t-fill-color-product-services-darker: var(--t-fill-color-product-services-070);
1017
+ --t-fill-color-product-services-darkest: var(--t-fill-color-product-services-080);
1018
+ --t-fill-color-tag-subtle-gray: var(--t-fill-color-tag-gray-010);
1019
+ --t-fill-color-tag-subtle-blue: var(--t-fill-color-tag-blue-010);
1020
+ --t-fill-color-tag-subtle-aqua: var(--t-fill-color-tag-aqua-010);
1021
+ --t-fill-color-tag-subtle-teal: var(--t-fill-color-tag-teal-010);
1022
+ --t-fill-color-tag-subtle-green: var(--t-fill-color-tag-green-010);
1023
+ --t-fill-color-tag-subtle-yellow: var(--t-fill-color-tag-yellow-010);
1024
+ --t-fill-color-tag-subtle-orange: var(--t-fill-color-tag-orange-010);
1025
+ --t-fill-color-tag-subtle-pink: var(--t-fill-color-tag-pink-010);
1026
+ --t-fill-color-tag-subtle-purple: var(--t-fill-color-tag-purple-010);
1027
+ --t-fill-color-tag-subtle-magenta: var(--t-fill-color-tag-magenta-010);
1028
+ --t-fill-color-tag-subtle-label-gray: var(--t-fill-color-tag-gray-020);
1029
+ --t-fill-color-tag-subtle-label-blue: var(--t-fill-color-tag-blue-020);
1030
+ --t-fill-color-tag-subtle-label-aqua: var(--t-fill-color-tag-aqua-020);
1031
+ --t-fill-color-tag-subtle-label-teal: var(--t-fill-color-tag-teal-020);
1032
+ --t-fill-color-tag-subtle-label-green: var(--t-fill-color-tag-green-020);
1033
+ --t-fill-color-tag-subtle-label-yellow: var(--t-fill-color-tag-yellow-020);
1034
+ --t-fill-color-tag-subtle-label-orange: var(--t-fill-color-tag-orange-020);
1035
+ --t-fill-color-tag-subtle-label-pink: var(--t-fill-color-tag-pink-020);
1036
+ --t-fill-color-tag-subtle-label-purple: var(--t-fill-color-tag-purple-020);
1037
+ --t-fill-color-tag-subtle-label-magenta: var(--t-fill-color-tag-magenta-020);
1038
+ --t-fill-color-tag-bold-gray: var(--t-fill-color-tag-gray-030);
1039
+ --t-fill-color-tag-bold-blue: var(--t-fill-color-tag-blue-030);
1040
+ --t-fill-color-tag-bold-aqua: var(--t-fill-color-tag-aqua-030);
1041
+ --t-fill-color-tag-bold-teal: var(--t-fill-color-tag-teal-030);
1042
+ --t-fill-color-tag-bold-green: var(--t-fill-color-tag-green-030);
1043
+ --t-fill-color-tag-bold-yellow: var(--t-fill-color-tag-yellow-030);
1044
+ --t-fill-color-tag-bold-orange: var(--t-fill-color-tag-orange-030);
1045
+ --t-fill-color-tag-bold-pink: var(--t-fill-color-tag-pink-030);
1046
+ --t-fill-color-tag-bold-purple: var(--t-fill-color-tag-purple-030);
1047
+ --t-fill-color-tag-bold-magenta: var(--t-fill-color-tag-magenta-030);
1048
+ --t-fill-color-tag-bold-label-gray: var(--t-fill-color-tag-gray-040);
1049
+ --t-fill-color-tag-bold-label-blue: var(--t-fill-color-tag-blue-040);
1050
+ --t-fill-color-tag-bold-label-aqua: var(--t-fill-color-tag-aqua-040);
1051
+ --t-fill-color-tag-bold-label-teal: var(--t-fill-color-tag-teal-040);
1052
+ --t-fill-color-tag-bold-label-green: var(--t-fill-color-tag-green-040);
1053
+ --t-fill-color-tag-bold-label-yellow: var(--t-fill-color-tag-yellow-040);
1054
+ --t-fill-color-tag-bold-label-orange: var(--t-fill-color-tag-orange-040);
1055
+ --t-fill-color-tag-bold-label-pink: var(--t-fill-color-tag-pink-040);
1056
+ --t-fill-color-tag-bold-label-purple: var(--t-fill-color-tag-purple-040);
1057
+ --t-fill-color-tag-bold-label-magenta: var(--t-fill-color-tag-magenta-040);
1058
+ --t-fill-color-button-neutral-outline-dim-disabled-solid: hsl(0, 0%, 98%);
1059
+ --t-fill-color-button-neutral-ghost-disabled-solid: hsl(0, 0%, 98%);
1060
+ --t-fill-color-button-default-info-solid-default: hsl(204, 100%, 40%);
1061
+ --t-fill-color-button-default-info-solid-hover: hsl(204, 100%, 35%);
1062
+ --t-fill-color-button-default-info-solid-active: hsl(204, 100%, 30%);
1063
+ --t-fill-color-button-default-info-solid-disabled: hsl(0, 0%, 81%);
1064
+ --t-fill-color-button-default-info-outline-dim-default: #ffffff00;
1065
+ --t-fill-color-button-default-info-outline-dim-hover: hsl(204, 100%, 97%);
1066
+ --t-fill-color-button-default-info-outline-dim-active: hsl(203, 94%, 94%);
1067
+ --t-fill-color-button-default-info-outline-dim-disabled: #ffffff00;
1068
+ --t-fill-color-button-default-info-ghost-default: #ffffff00;
1069
+ --t-fill-color-button-default-info-ghost-hover: hsl(204, 100%, 97%);
1070
+ --t-fill-color-button-default-info-ghost-active: hsl(203, 94%, 94%);
1071
+ --t-fill-color-button-default-info-ghost-disabled: #ffffff00;
1072
+ --t-fill-color-button-create-solid-default: hsl(96, 57%, 33%);
1073
+ --t-fill-color-button-create-solid-hover: hsl(97, 57%, 28%);
1074
+ --t-fill-color-button-create-solid-active: hsl(97, 57%, 23%);
1075
+ --t-fill-color-button-create-solid-disabled: hsl(0, 0%, 81%);
1076
+ --t-fill-color-button-create-ghost-default: #ffffff00;
1077
+ --t-fill-color-button-create-ghost-hover: hsl(96, 60%, 95%);
1078
+ --t-fill-color-button-create-ghost-active: hsl(97, 57%, 90%);
1079
+ --t-fill-color-button-create-ghost-disabled: #ffffff00;
1080
+ }
1169
1081
 
1170
- :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 {
1171
- --tds-sidenav-item-nested-border-color: var(
1172
- --tds-sidenav-item-nested-border-color-hover
1173
- );
1174
- --tds-sidenav-item-background: var(--tds-sidenav-item-background-hover);
1175
- }
1082
+ /**
1083
+ * Do not edit directly, this file was auto-generated.
1084
+ */
1176
1085
 
1177
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button) {
1178
- --tds-sidenav-item-nested-border-color: var(
1179
- --tds-sidenav-item-nested-border-color-selected
1180
- );
1181
- }
1086
+ /**
1087
+ * Do not edit directly, this file was auto-generated.
1088
+ */
1182
1089
 
1183
- .tds-sidenav-responsive-header {
1090
+ .t-banner {
1091
+ --t-banner-font-size: var(--t-font-size-md);
1092
+ --t-banner-font-color: var(--t-text-color-default-primary);
1093
+ --t-banner-background-color: var(--t-fill-color-status-neutral-ghost);
1094
+ --t-banner-spacing: var(--t-spacing-2);
1095
+ --t-banner-border-radius: var(--t-border-radius-md);
1096
+ --t-banner-title-font-color: var(--t-text-color-default-headline);
1097
+ --t-banner-title-font-size: var(--t-font-size-md);
1098
+ --t-banner-title-font-weight: var(--t-font-weight-semibold);
1099
+ --t-banner-icon-fill-color: hsla(0, 0%, 0%, 0);
1100
+ --t-banner-background-color-info: var(--t-fill-color-status-info-ghost);
1101
+ --t-banner-icon-fill-color-info: var(--t-icon-color-status-info-primary);
1102
+ --t-banner-background-color-warning: var(--t-fill-color-status-warning-ghost);
1103
+ --t-banner-icon-fill-color-warning: var(--t-icon-color-status-warning-primary);
1104
+ --t-banner-background-color-error: var(--t-fill-color-status-error-ghost);
1105
+ --t-banner-icon-fill-color-error: var(--t-icon-color-status-error-primary);
1106
+ --t-banner-background-color-success: var(--t-fill-color-status-success-ghost);
1107
+ --t-banner-icon-fill-color-success: var(--t-icon-color-status-success-primary);
1108
+ --t-banner-link-font-color-hover: var(--t-text-color-default-headline);
1109
+ font-size: var(--t-banner-font-size);
1110
+ color: var(--t-banner-font-color);
1111
+ line-height: 1.4;
1112
+ background-color: var(--t-banner-background-color);
1113
+ padding: var(--t-banner-spacing);
1114
+ border-radius: var(--t-banner-border-radius);
1184
1115
  display: flex;
1185
- gap: var(--t-spacing-2);
1186
- align-items: center;
1187
- width: 100%;
1116
+ gap: var(--t-banner-spacing);
1188
1117
  }
1189
1118
 
1190
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle {
1191
- display: flex;
1192
- align-items: center;
1193
- justify-content: center;
1194
- order: 0;
1195
- height: var(--t-container-size-md);
1196
- padding: 3px var(--t-spacing-1);
1197
- background-color: var(--t-fill-color-button-neutral-outline-dim-default);
1198
- border: 1px solid var(--t-border-color-button-neutral);
1199
- border-radius: var(--t-border-radius-md);
1200
- }
1201
-
1202
- :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 {
1203
- background-color: var(--t-fill-color-button-neutral-outline-dim-hover);
1204
- }
1205
-
1206
- :is(.tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle):active {
1207
- background-color: var(--t-fill-color-button-neutral-outline-dim-active);
1208
- }
1209
-
1210
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label {
1211
- flex: 1;
1212
- order: 1;
1213
- margin: 0;
1214
- font-size: var(--t-font-size-lg);
1215
- font-weight: var(--t-font-weight-medium);
1216
- color: var(--t-text-color-default-headline);
1217
- }
1119
+ .t-banner-title {
1120
+ font-size: var(--t-banner-title-font-size);
1121
+ font-weight: var(--t-banner-title-font-weight);
1122
+ color: var(--t-banner-title-font-color);
1123
+ margin-bottom: var(--t-spacing-half);
1124
+ display: block;
1125
+ }
1218
1126
 
1219
- @media (max-width: 719px) {
1220
- .tds-sidenav-collapse {
1221
- position: absolute;
1222
- z-index: 10001;
1223
- display: none;
1224
- max-width: min(448px, calc(100vw - 48px));
1225
- padding: 0;
1226
- margin: 12px 0;
1227
- overflow: hidden;
1228
- outline: 0;
1229
- background: var(--t-surface-color-card);
1230
- border: 0;
1231
- border-radius: 6px;
1232
- box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.25);
1233
- will-change: transform;
1234
- position-area: bottom span-right;
1235
- }
1127
+ .t-banner-icon {
1128
+ margin-top: 1px;
1129
+ }
1236
1130
 
1237
- .tds-sidenav-collapse:popover-open,
1238
- .tds-sidenav-collapse.\:popover-open {
1239
- display: flex;
1240
- }
1131
+ .t-banner-icon svg {
1132
+ fill: var(--t-banner-icon-fill-color);
1133
+ }
1241
1134
 
1242
- .tds-sidenav-scroll-container {
1243
- --webkit-overflow-scrolling: touch;
1244
- display: block;
1245
- width: 100%;
1246
- height: -moz-fit-content;
1247
- height: fit-content;
1248
- padding: var(--t-spacing-2);
1249
- overflow-y: auto;
1250
- }
1135
+ .t-banner-body a {
1136
+ color: inherit;
1137
+ text-decoration: underline;
1138
+ text-underline-offset: 2px;
1139
+ transition: color 0.1s linear;
1140
+ }
1251
1141
 
1252
- .tds-sidenav-item :is(a, button) :is(.prefix, [slot="prefix"]) {
1253
- display: none;
1254
- }
1142
+ .t-banner-body a:hover {
1143
+ color: var(--t-banner-cta-font-color-hover);
1255
1144
  }
1256
1145
 
1257
- @media (min-width: 720px) {
1258
- .tds-sidenav-responsive-header {
1259
- display: none;
1260
- }
1146
+ .t-banner--status-info {
1147
+ --t-banner-background-color: var(--t-banner-background-color-info);
1148
+ --t-banner-icon-fill-color: var(--t-banner-icon-fill-color-info);
1261
1149
  }
1262
1150
 
1263
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]) {
1264
- display: none;
1265
- }
1151
+ .t-banner--status-warning {
1152
+ --t-banner-background-color: var(--t-banner-background-color-warning);
1153
+ --t-banner-icon-fill-color: var(--t-banner-icon-fill-color-warning);
1154
+ }
1266
1155
 
1267
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"] {
1268
- display: block;
1269
- }
1156
+ .t-banner--status-error {
1157
+ --t-banner-background-color: var(--t-banner-background-color-error);
1158
+ --t-banner-icon-fill-color: var(--t-banner-icon-fill-color-error);
1159
+ }
1270
1160
 
1271
- tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
1272
- display: flex;
1273
- flex-direction: column;
1274
- }
1161
+ .t-banner--status-success {
1162
+ --t-banner-background-color: var(--t-banner-background-color-success);
1163
+ --t-banner-icon-fill-color: var(--t-banner-icon-fill-color-success);
1164
+ }
1275
1165
 
1276
- .symbol {
1277
- display: inline-block;
1278
- vertical-align: text-top;
1279
- fill: currentColor;
1280
- height: 1em;
1281
- width: 1em;
1166
+ .t-banner--sm {
1167
+ --t-banner-spacing: calc(var(--t-spacing-half) + var(--t-spacing-1));
1282
1168
  }
1283
1169
 
1284
1170
  .tds-btn {
@@ -1315,11 +1201,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
1315
1201
  background-color: var(--tds-btn-bg);
1316
1202
  border: var(--tds-btn-border-width) solid var(--tds-btn-border-color);
1317
1203
  border-radius: var(--tds-btn-border-radius);
1318
- transition:
1319
- color 0.15s ease-in-out,
1320
- background-color 0.15s ease-in-out,
1321
- border-color 0.15s ease-in-out,
1322
- box-shadow 0.15s ease-in-out;
1204
+ transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
1323
1205
  }
1324
1206
 
1325
1207
  .tds-btn:where(.tds-btn--icononly,:has(.prefix,svg:not(.suffix))) {
@@ -1358,11 +1240,11 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
1358
1240
  opacity: var(--tds-btn-disabled-opacity);
1359
1241
  }
1360
1242
 
1361
- .tds-btn svg:not(.symbol) {
1243
+ .tds-btn svg {
1362
1244
  display: block;
1363
1245
  inline-size: auto;
1364
1246
  block-size: auto;
1365
- max-block-size: 0.66666667lh;
1247
+ max-block-size: .66666667lh;
1366
1248
  color: var(--tds-btn-icon-color, currentColor);
1367
1249
  }
1368
1250
 
@@ -1393,7 +1275,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
1393
1275
  /* Effective height 24px */
1394
1276
 
1395
1277
  .tds-btn--sm {
1396
- --tds-btn-padding-y: 0.5px;
1278
+ --tds-btn-padding-y: .5px;
1397
1279
  --tds-btn-padding-x: 7px;
1398
1280
  --tds-btn-padding-truncated-x: 4px;
1399
1281
  --tds-btn-min-height: 24px;
@@ -1419,14 +1301,10 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
1419
1301
  --tds-btn-border-color-hover: var(--t-fill-color-button-neutral-solid-hover);
1420
1302
  --tds-btn-color-active: var(--t-text-color-default-inverted);
1421
1303
  --tds-btn-bg-active: var(--t-fill-color-button-neutral-solid-active);
1422
- --tds-btn-border-color-active: var(
1423
- --t-fill-color-button-neutral-solid-active
1424
- );
1304
+ --tds-btn-border-color-active: var(--t-fill-color-button-neutral-solid-active);
1425
1305
  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1426
1306
  --tds-btn-bg-disabled: var(--t-fill-color-button-neutral-solid-disabled);
1427
- --tds-btn-border-color-disabled: var(
1428
- --t-fill-color-button-neutral-solid-disabled
1429
- );
1307
+ --tds-btn-border-color-disabled: var(--t-fill-color-button-neutral-solid-disabled);
1430
1308
  }
1431
1309
 
1432
1310
  .tds-btn--interaction {
@@ -1435,14 +1313,10 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
1435
1313
  --tds-btn-border-color: var(--t-fill-color-button-interaction-solid-default);
1436
1314
  --tds-btn-color-hover: var(--t-text-color-default-inverted);
1437
1315
  --tds-btn-bg-hover: var(--t-fill-color-button-interaction-solid-hover);
1438
- --tds-btn-border-color-hover: var(
1439
- --t-fill-color-button-interaction-solid-hover
1440
- );
1316
+ --tds-btn-border-color-hover: var(--t-fill-color-button-interaction-solid-hover);
1441
1317
  --tds-btn-color-active: var(--t-text-color-default-inverted);
1442
1318
  --tds-btn-bg-active: var(--t-fill-color-button-interaction-solid-active);
1443
- --tds-btn-border-color-active: var(
1444
- --t-fill-color-button-interaction-solid-active
1445
- );
1319
+ --tds-btn-border-color-active: var(--t-fill-color-button-interaction-solid-active);
1446
1320
  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1447
1321
  --tds-btn-bg-disabled: var(--t-fill-color-button-interaction-solid-disabled);
1448
1322
  --tds-btn-border-color-disabled: var(--tds-btn-bg-disabled);
@@ -1473,9 +1347,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
1473
1347
  --tds-btn-bg-active: var(--t-fill-color-button-neutral-outline-dim-active);
1474
1348
  --tds-btn-border-color-active: var(--t-border-color-button-neutral);
1475
1349
  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1476
- --tds-btn-bg-disabled: var(
1477
- --t-fill-color-button-neutral-outline-dim-disabled
1478
- );
1350
+ --tds-btn-bg-disabled: var(--t-fill-color-button-neutral-outline-dim-disabled);
1479
1351
  --tds-btn-border-color-disabled: var(--t-border-color-button-neutral);
1480
1352
  }
1481
1353
 
@@ -1486,14 +1358,10 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
1486
1358
  --tds-btn-bg-hover: var(--t-fill-color-button-interaction-outline-dim-hover);
1487
1359
  --tds-btn-border-color-hover: var(--tds-btn-border-color);
1488
1360
  --tds-btn-color-active: var(--tds-btn-color);
1489
- --tds-btn-bg-active: var(
1490
- --t-fill-color-button-interaction-outline-dim-active
1491
- );
1361
+ --tds-btn-bg-active: var(--t-fill-color-button-interaction-outline-dim-active);
1492
1362
  --tds-btn-border-color-active: var(--tds-btn-border-color);
1493
1363
  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1494
- --tds-btn-bg-disabled: var(
1495
- --t-fill-color-button-interaction-outline-dim-disabled
1496
- );
1364
+ --tds-btn-bg-disabled: var(--t-fill-color-button-interaction-outline-dim-disabled);
1497
1365
  --tds-btn-border-color-disabled: var(--t-border-color-button-neutral);
1498
1366
  }
1499
1367
 
@@ -1532,9 +1400,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
1532
1400
  --tds-btn-bg-hover: var(--t-fill-color-button-interaction-outline-dim-hover);
1533
1401
  --tds-btn-border-color-hover: var(--tds-btn-bg-hover);
1534
1402
  --tds-btn-color-active: var(--tds-btn-color);
1535
- --tds-btn-bg-active: var(
1536
- --t-fill-color-button-interaction-outline-dim-active
1537
- );
1403
+ --tds-btn-bg-active: var(--t-fill-color-button-interaction-outline-dim-active);
1538
1404
  --tds-btn-border-color-active: var(--tds-btn-bg-active);
1539
1405
  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1540
1406
  --tds-btn-bg-disabled: transparent;
@@ -1561,69 +1427,28 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
1561
1427
  --tds-btn-border-color: var(--t-fill-color-button-interaction-solid-default);
1562
1428
  --tds-btn-color-hover: var(--t-text-color-default-inverted);
1563
1429
  --tds-btn-bg-hover: var(--t-fill-color-button-interaction-solid-hover);
1564
- --tds-btn-border-color-hover: var(
1565
- --t-fill-color-button-interaction-solid-hover
1566
- );
1430
+ --tds-btn-border-color-hover: var(--t-fill-color-button-interaction-solid-hover);
1567
1431
  --tds-btn-color-active: var(--t-text-color-default-inverted);
1568
1432
  --tds-btn-bg-active: var(--t-fill-color-button-interaction-solid-active);
1569
- --tds-btn-border-color-active: var(
1570
- --t-fill-color-button-interaction-solid-active
1571
- );
1433
+ --tds-btn-border-color-active: var(--t-fill-color-button-interaction-solid-active);
1572
1434
  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1573
1435
  --tds-btn-bg-disabled: var(--t-fill-color-button-interaction-solid-disabled);
1574
1436
  --tds-btn-border-color-disabled: var(--tds-btn-bg-disabled);
1575
1437
  }
1576
1438
 
1577
1439
  .tds-btn--secondary-page-header {
1578
- --tds-btn-border-width: 0;
1579
1440
  --tds-btn-color: var(--t-text-color-status-neutral);
1580
- --tds-btn-bg: var(--t-fill-color-button-neutral-responsive-header-default);
1581
- --tds-btn-border-color: var(
1582
- --t-fill-color-button-neutral-responsive-header-default
1583
- );
1584
- --tds-btn-color-hover: var(--t-text-color-status-neutral);
1585
- --tds-btn-bg-hover: var(
1586
- --t-fill-color-button-neutral-responsive-header-hover
1587
- );
1588
- --tds-btn-border-color-hover: var(
1589
- --t-fill-color-button-neutral-responsive-header-hover
1590
- );
1591
- --tds-btn-color-active: var(--t-text-color-status-neutral);
1592
- --tds-btn-bg-active: var(
1593
- --t-fill-color-button-neutral-responsive-header-active
1594
- );
1595
- --tds-btn-border-color-active: var(
1596
- --t-fill-color-button-neutral-responsive-header-active
1597
- );
1441
+ --tds-btn-border-color: var(--t-border-color-button-neutral);
1442
+ --tds-btn-color-hover: var(--tds-btn-color);
1443
+ --tds-btn-bg-hover: var(--t-fill-color-button-neutral-outline-dim-hover);
1444
+ --tds-btn-border-color-hover: var(--t-border-color-button-neutral);
1445
+ --tds-btn-color-active: var(--tds-btn-color);
1446
+ --tds-btn-bg-active: var(--t-fill-color-button-neutral-outline-dim-active);
1447
+ --tds-btn-border-color-active: var(--t-border-color-button-neutral);
1598
1448
  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1599
- --tds-btn-bg-disabled: var(
1600
- --t-fill-color-button-neutral-responsive-header-disabled
1601
- );
1602
- --tds-btn-border-color-disabled: var(
1603
- --t-fill-color-button-neutral-responsive-header-disabled
1604
- );
1605
- }
1606
-
1607
- @media (min-width: 720px) {
1608
-
1609
- .tds-btn--secondary-page-header {
1610
- --tds-btn-border-width: 1px;
1611
- --tds-btn-color: var(--t-text-color-status-neutral);
1612
- --tds-btn-bg: transparent;
1613
- --tds-btn-border-color: var(--t-border-color-button-neutral);
1614
- --tds-btn-color-hover: var(--tds-btn-color);
1615
- --tds-btn-bg-hover: var(--t-fill-color-button-neutral-outline-dim-hover);
1616
- --tds-btn-border-color-hover: var(--t-border-color-button-neutral);
1617
- --tds-btn-color-active: var(--tds-btn-color);
1618
- --tds-btn-bg-active: var(--t-fill-color-button-neutral-outline-dim-active);
1619
- --tds-btn-border-color-active: var(--t-border-color-button-neutral);
1620
- --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1621
- --tds-btn-bg-disabled: var(
1622
- --t-fill-color-button-neutral-outline-dim-disabled
1623
- );
1624
- --tds-btn-border-color-disabled: var(--t-border-color-button-neutral);
1449
+ --tds-btn-bg-disabled: var(--t-fill-color-button-neutral-outline-dim-disabled);
1450
+ --tds-btn-border-color-disabled: var(--t-border-color-button-neutral);
1625
1451
  }
1626
- }
1627
1452
 
1628
1453
  .tds-btn--pill {
1629
1454
  --tds-btn-border-radius: 999px;
@@ -1642,9 +1467,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
1642
1467
  --tds-btn-border-color-active: var(--tds-btn-bg-active);
1643
1468
  --tds-btn-color-disabled: var(--t-text-color-default-disabled);
1644
1469
  --tds-btn-bg-disabled: var(--t-fill-color-button-neutral-solid-disabled);
1645
- --tds-btn-border-color-disabled: var(
1646
- --t-fill-color-button-neutral-solid-disabled
1647
- );
1470
+ --tds-btn-border-color-disabled: var(--t-fill-color-button-neutral-solid-disabled);
1648
1471
  --tds-btn-icon-color: var(--t-icon-color-default-secondary);
1649
1472
  --tds-btn-min-height: 32px;
1650
1473
  }
@@ -1665,12 +1488,4 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"] {
1665
1488
  --tds-btn-icon-color: inherit;
1666
1489
  }
1667
1490
 
1668
- .tds-btn--dropdown .suffix {
1669
- transition: transform 0.2s ease-in-out;
1670
- }
1671
-
1672
- .tds-btn--dropdown[aria-expanded="true"] .suffix {
1673
- transform: rotate(-180deg);
1674
- }
1675
-
1676
1491
  /*# sourceMappingURL=unstable.css.map */