@planningcenter/tapestry 2.6.1-rc.2 → 2.7.1-rc.0

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