@planningcenter/tapestry 1.0.0-rc.1 → 1.0.0-rc.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/index.css +273 -144
  2. package/dist/index.css.map +1 -1
  3. package/dist/packages/tapestry-wc/dist/components/tds-page-header.js +1 -1
  4. package/dist/packages/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
  5. package/dist/tokens/ts/tokens.d.ts +224 -95
  6. package/dist/tokens/ts/tokens.d.ts.map +1 -1
  7. package/dist/tokens/ts/tokens.js +224 -95
  8. package/dist/tokens/ts/tokens.js.map +1 -1
  9. package/dist/tokens.css +273 -144
  10. package/dist/tokens.css.map +1 -1
  11. package/dist/unstable.css +273 -144
  12. package/dist/unstable.css.map +1 -1
  13. package/dist/webComponents.css +273 -144
  14. package/dist/webComponents.css.map +1 -1
  15. package/package.json +3 -3
package/dist/index.css CHANGED
@@ -55,9 +55,9 @@
55
55
  --t-avatar-size-112: 112px;
56
56
  --t-text-color-default-headline: hsl(0, 0%, 12%);
57
57
  --t-text-color-default-primary: hsl(0, 0%, 24%);
58
- --t-text-color-default-secondary: hsl(0, 0%, 45%);
58
+ --t-text-color-default-secondary: hsl(0, 0%, 42%);
59
59
  --t-text-color-default-disabled: hsl(0, 0%, 81%);
60
- --t-text-color-default-placeholder: hsl(0, 0%, 62%);
60
+ --t-text-color-default-placeholder: hsl(0, 0%, 58%);
61
61
  --t-text-color-default-inverted: hsl(0, 0%, 100%);
62
62
  --t-text-color-interaction-primary: hsl(204, 100%, 40%);
63
63
  --t-text-color-interaction-hover: hsl(204, 100%, 35%);
@@ -70,6 +70,7 @@
70
70
  --t-text-color-status-error: hsl(8, 60%, 45%);
71
71
  --t-text-color-tag-subtle-gray: hsl(0, 0%, 24%);
72
72
  --t-text-color-tag-subtle-blue: hsl(224, 47%, 31%);
73
+ --t-text-color-tag-subtle-indigo: hsl(241, 59%, 28%);
73
74
  --t-text-color-tag-subtle-aqua: hsl(209, 77%, 22%);
74
75
  --t-text-color-tag-subtle-teal: hsl(180, 95%, 15%);
75
76
  --t-text-color-tag-subtle-green: hsl(100, 93%, 17%);
@@ -79,6 +80,7 @@
79
80
  --t-text-color-tag-subtle-purple: hsl(268, 71%, 27%);
80
81
  --t-text-color-tag-subtle-magenta: hsl(285, 71%, 20%);
81
82
  --t-text-color-tag-bold-gray: hsl(0, 0%, 24%);
83
+ --t-text-color-tag-bold-indigo: hsl(241, 59%, 28%);
82
84
  --t-text-color-tag-bold-blue: hsl(224, 47%, 31%);
83
85
  --t-text-color-tag-bold-aqua: hsl(209, 77%, 22%);
84
86
  --t-text-color-tag-bold-teal: hsl(180, 95%, 15%);
@@ -89,12 +91,12 @@
89
91
  --t-text-color-tag-bold-purple: hsl(268, 71%, 27%);
90
92
  --t-text-color-tag-bold-magenta: hsl(285, 71%, 20%);
91
93
  --t-icon-color-default-primary: hsl(0, 0%, 24%);
92
- --t-icon-color-default-secondary: hsl(0, 0%, 45%);
93
- --t-icon-color-default-dim: hsl(0, 0%, 62%);
94
+ --t-icon-color-default-secondary: hsl(0, 0%, 42%);
95
+ --t-icon-color-default-dim: hsl(0, 0%, 58%);
94
96
  --t-icon-color-default-disabled: hsl(0, 0%, 81%);
95
97
  --t-icon-color-default-inverted: hsl(0, 0%, 100%);
96
- --t-icon-color-status-neutral-primary: hsl(0, 0%, 45%);
97
- --t-icon-color-status-neutral-secondary: hsl(0, 0%, 62%);
98
+ --t-icon-color-status-neutral-primary: hsl(0, 0%, 42%);
99
+ --t-icon-color-status-neutral-secondary: hsl(0, 0%, 58%);
98
100
  --t-icon-color-status-neutral-bold: hsl(0, 0%, 24%);
99
101
  --t-icon-color-status-info-primary: hsl(204, 100%, 40%);
100
102
  --t-icon-color-status-success-primary: hsl(96, 57%, 33%);
@@ -103,8 +105,9 @@
103
105
  --t-icon-color-status-error-primary: hsl(8, 60%, 47%);
104
106
  --t-fill-color-neutral-000: hsl(0, 0%, 12%);
105
107
  --t-fill-color-neutral-010: hsl(0, 0%, 24%);
106
- --t-fill-color-neutral-020: hsl(0, 0%, 45%);
107
- --t-fill-color-neutral-030: hsl(0, 0%, 62%);
108
+ --t-fill-color-neutral-020: hsl(0, 0%, 42%);
109
+ --t-fill-color-neutral-025: hsl(0, 0%, 50%);
110
+ --t-fill-color-neutral-030: hsl(0, 0%, 58%);
108
111
  --t-fill-color-neutral-040: hsl(0, 0%, 81%);
109
112
  --t-fill-color-neutral-050: hsl(0, 0%, 88%);
110
113
  --t-fill-color-neutral-060: hsl(0, 0%, 93%);
@@ -116,13 +119,13 @@
116
119
  --t-fill-color-interaction-hover: hsl(204, 100%, 35%);
117
120
  --t-fill-color-interaction-active: hsl(204, 100%, 30%);
118
121
  --t-fill-color-interaction-disabled: hsl(0, 0%, 81%);
119
- --t-fill-color-control-neutral-off: hsl(0, 0%, 62%);
122
+ --t-fill-color-control-neutral-off: hsl(0, 0%, 58%);
120
123
  --t-fill-color-control-neutral-on: hsl(0, 0%, 24%);
121
124
  --t-fill-color-control-primary: hsl(204, 100%, 40%);
122
125
  --t-fill-color-control-secondary: hsl(97, 57%, 40%);
123
126
  --t-fill-color-control-error: hsl(8, 60%, 47%);
124
127
  --t-fill-color-control-disabled: hsl(0, 0%, 81%);
125
- --t-fill-color-status-neutral-solid: hsl(0, 0%, 45%);
128
+ --t-fill-color-status-neutral-solid: hsl(0, 0%, 42%);
126
129
  --t-fill-color-status-neutral-ghost: hsl(0, 0%, 93%);
127
130
  --t-fill-color-status-neutral-dim: hsl(0, 0%, 97%);
128
131
  --t-fill-color-status-info-solid: hsl(204, 100%, 40%);
@@ -138,60 +141,145 @@
138
141
  --t-fill-color-status-error-ghost: hsl(9, 59%, 93%);
139
142
  --t-fill-color-status-error-dim: hsl(7, 60%, 97%);
140
143
  --t-fill-color-tooltip-primary: hsla(0, 0%, 12%, 0.77);
141
- --t-fill-color-tag-subtle-gray: hsl(0, 0%, 93%);
142
- --t-fill-color-tag-subtle-blue: hsl(220, 100%, 95%);
143
- --t-fill-color-tag-subtle-label-gray: hsl(0, 0%, 88%);
144
- --t-fill-color-tag-subtle-label-blue: hsl(221, 100%, 81%);
145
- --t-fill-color-tag-subtle-label-aqua: hsl(200, 82%, 82%);
146
- --t-fill-color-tag-subtle-label-teal: hsl(164, 52%, 76%);
147
- --t-fill-color-tag-subtle-label-green: hsl(99, 59%, 78%);
148
- --t-fill-color-tag-subtle-label-yellow: hsl(44, 78%, 77%);
149
- --t-fill-color-tag-subtle-label-orange: hsl(21, 89%, 82%);
150
- --t-fill-color-tag-subtle-label-pink: hsl(310, 64%, 85%);
151
- --t-fill-color-tag-subtle-label-purple: hsl(259, 74%, 85%);
152
- --t-fill-color-tag-subtle-label-magenta: hsl(291, 40%, 83%);
153
- --t-fill-color-tag-subtle-aqua: hsl(200, 82%, 89%);
154
- --t-fill-color-tag-subtle-teal: hsl(163, 53%, 83%);
155
- --t-fill-color-tag-subtle-green: hsl(98, 59%, 85%);
156
- --t-fill-color-tag-subtle-yellow: hsl(45, 77%, 85%);
157
- --t-fill-color-tag-subtle-orange: hsl(22, 89%, 89%);
158
- --t-fill-color-tag-subtle-pink: hsl(311, 66%, 92%);
159
- --t-fill-color-tag-subtle-purple: hsl(259, 74%, 93%);
160
- --t-fill-color-tag-subtle-magenta: hsl(294, 37%, 90%);
161
- --t-fill-color-tag-bold-gray: hsl(0, 0%, 88%);
162
- --t-fill-color-tag-bold-blue: hsl(220, 98%, 81%);
163
- --t-fill-color-tag-bold-aqua: hsl(201, 76%, 71%);
164
- --t-fill-color-tag-bold-teal: hsl(169, 62%, 64%);
165
- --t-fill-color-tag-bold-green: hsl(112, 57%, 65%);
166
- --t-fill-color-tag-bold-yellow: hsl(44, 92%, 69%);
167
- --t-fill-color-tag-bold-orange: hsl(21, 86%, 72%);
168
- --t-fill-color-tag-bold-pink: hsl(324, 78%, 77%);
169
- --t-fill-color-tag-bold-purple: hsl(273, 62%, 76%);
170
- --t-fill-color-tag-bold-magenta: hsl(291, 48%, 70%);
171
- --t-fill-color-tag-bold-label-gray: hsl(0, 0%, 81%);
172
- --t-fill-color-tag-bold-label-blue: hsl(220, 98%, 74%);
173
- --t-fill-color-tag-bold-label-aqua: hsl(200, 75%, 64%);
174
- --t-fill-color-tag-bold-label-teal: hsl(169, 62%, 56%);
175
- --t-fill-color-tag-bold-label-green: hsl(112, 57%, 57%);
176
- --t-fill-color-tag-bold-label-yellow: hsl(44, 93%, 61%);
177
- --t-fill-color-tag-bold-label-orange: hsl(21, 86%, 64%);
178
- --t-fill-color-tag-bold-label-pink: hsl(324, 76%, 70%);
179
- --t-fill-color-tag-bold-label-purple: hsl(273, 62%, 70%);
180
- --t-fill-color-tag-bold-label-magenta: hsl(292, 48%, 63%);
181
- --t-fill-color-button-neutral-solid-default: hsl(0, 0%, 45%);
144
+ --t-fill-color-product-accounts-010: hsl(212, 54%, 93%);
145
+ --t-fill-color-product-accounts-020: hsl(209, 53%, 90%);
146
+ --t-fill-color-product-accounts-030: hsl(210, 56%, 70%);
147
+ --t-fill-color-product-accounts-040: hsl(210, 54%, 60%);
148
+ --t-fill-color-product-accounts-050: hsl(210, 55%, 50%);
149
+ --t-fill-color-product-accounts-060: hsl(210, 65%, 40%);
150
+ --t-fill-color-product-accounts-070: hsl(211, 70%, 32%);
151
+ --t-fill-color-product-accounts-080: hsl(210, 75%, 25%);
152
+ --t-fill-color-product-calendar-010: hsl(8, 61%, 90%);
153
+ --t-fill-color-product-calendar-020: hsl(8, 61%, 70%);
154
+ --t-fill-color-product-calendar-030: hsl(8, 72%, 59%);
155
+ --t-fill-color-product-calendar-040: hsl(8, 65%, 55%);
156
+ --t-fill-color-product-calendar-050: hsl(9, 61%, 50%);
157
+ --t-fill-color-product-calendar-060: hsl(8, 65%, 42%);
158
+ --t-fill-color-product-calendar-070: hsl(7, 65%, 34%);
159
+ --t-fill-color-product-calendar-080: hsl(9, 61%, 27%);
160
+ --t-fill-color-product-checkins-010: hsl(285, 20%, 92%);
161
+ --t-fill-color-product-checkins-020: hsl(283, 22%, 75%);
162
+ --t-fill-color-product-checkins-030: hsl(284, 22%, 64%);
163
+ --t-fill-color-product-checkins-040: hsl(283, 22%, 55%);
164
+ --t-fill-color-product-checkins-050: hsl(283, 22%, 48%);
165
+ --t-fill-color-product-checkins-060: hsl(283, 27%, 42%);
166
+ --t-fill-color-product-checkins-070: hsl(284, 33%, 34%);
167
+ --t-fill-color-product-checkins-080: hsl(283, 33%, 27%);
168
+ --t-fill-color-product-giving-010: hsl(41, 95%, 93%);
169
+ --t-fill-color-product-giving-020: hsl(42, 95%, 83%);
170
+ --t-fill-color-product-giving-030: hsl(43, 95%, 75%);
171
+ --t-fill-color-product-giving-040: hsl(43, 88%, 70%);
172
+ --t-fill-color-product-giving-050: hsl(43, 88%, 64%);
173
+ --t-fill-color-product-giving-060: hsl(42, 84%, 55%);
174
+ --t-fill-color-product-giving-070: hsl(42, 84%, 48%);
175
+ --t-fill-color-product-giving-080: hsl(42, 100%, 40%);
176
+ --t-fill-color-product-groups-010: hsl(18, 95%, 92%);
177
+ --t-fill-color-product-groups-020: hsl(17, 96%, 80%);
178
+ --t-fill-color-product-groups-030: hsl(17, 96%, 70%);
179
+ --t-fill-color-product-groups-040: hsl(17, 96%, 63%);
180
+ --t-fill-color-product-groups-050: hsl(17, 88%, 55%);
181
+ --t-fill-color-product-groups-060: hsl(12, 70%, 48%);
182
+ --t-fill-color-product-groups-070: hsl(12, 70%, 40%);
183
+ --t-fill-color-product-groups-080: hsl(14, 70%, 34%);
184
+ --t-fill-color-product-home-010: hsl(221, 89%, 93%);
185
+ --t-fill-color-product-home-020: hsl(221, 91%, 91%);
186
+ --t-fill-color-product-home-030: hsl(221, 91%, 87%);
187
+ --t-fill-color-product-home-040: hsl(221, 91%, 62%);
188
+ --t-fill-color-product-home-050: hsl(221, 91%, 55%);
189
+ --t-fill-color-product-home-060: hsl(221, 90%, 50%);
190
+ --t-fill-color-product-home-070: hsl(221, 90%, 45%);
191
+ --t-fill-color-product-home-080: hsl(218, 84%, 25%);
192
+ --t-fill-color-product-people-010: hsl(219, 73%, 91%);
193
+ --t-fill-color-product-people-020: hsl(220, 69%, 81%);
194
+ --t-fill-color-product-people-030: hsl(221, 73%, 71%);
195
+ --t-fill-color-product-people-040: hsl(221, 73%, 65%);
196
+ --t-fill-color-product-people-050: hsl(220, 74%, 57%);
197
+ --t-fill-color-product-people-060: hsl(220, 68%, 51%);
198
+ --t-fill-color-product-people-070: hsl(220, 68%, 41%);
199
+ --t-fill-color-product-people-080: hsl(221, 68%, 31%);
200
+ --t-fill-color-product-publishing-010: hsl(220, 4%, 86%);
201
+ --t-fill-color-product-publishing-020: hsl(222, 10%, 60%);
202
+ --t-fill-color-product-publishing-030: hsl(221, 11%, 50%);
203
+ --t-fill-color-product-publishing-040: hsl(222, 12%, 39%);
204
+ --t-fill-color-product-publishing-050: hsl(220, 12%, 31%);
205
+ --t-fill-color-product-publishing-060: hsl(220, 11%, 26%);
206
+ --t-fill-color-product-publishing-070: hsl(217, 12%, 22%);
207
+ --t-fill-color-product-publishing-080: hsl(214, 11%, 12%);
208
+ --t-fill-color-product-registrations-010: hsl(173, 28%, 89%);
209
+ --t-fill-color-product-registrations-020: hsl(176, 38%, 78%);
210
+ --t-fill-color-product-registrations-030: hsl(176, 37%, 68%);
211
+ --t-fill-color-product-registrations-040: hsl(176, 37%, 60%);
212
+ --t-fill-color-product-registrations-050: hsl(175, 36%, 43%);
213
+ --t-fill-color-product-registrations-060: hsl(175, 51%, 34%);
214
+ --t-fill-color-product-registrations-070: hsl(174, 51%, 28%);
215
+ --t-fill-color-product-registrations-080: hsl(175, 52%, 22%);
216
+ --t-fill-color-product-services-010: hsl(88, 31%, 88%);
217
+ --t-fill-color-product-services-020: hsl(88, 39%, 75%);
218
+ --t-fill-color-product-services-030: hsl(88, 39%, 66%);
219
+ --t-fill-color-product-services-040: hsl(88, 40%, 54%);
220
+ --t-fill-color-product-services-050: hsl(88, 45%, 41%);
221
+ --t-fill-color-product-services-060: hsl(89, 62%, 31%);
222
+ --t-fill-color-product-services-070: hsl(89, 62%, 26%);
223
+ --t-fill-color-product-services-080: hsl(89, 63%, 21%);
224
+ --t-fill-color-product-staff-base: hsl(328, 100%, 45%);
225
+ --t-fill-color-product-staff-dark: hsl(328, 100%, 38%);
226
+ --t-fill-color-product-staff-darker: hsl(328, 100%, 33%);
227
+ --t-fill-color-tag-gray-010: hsl(0, 0%, 93%);
228
+ --t-fill-color-tag-gray-020: hsl(0, 0%, 88%);
229
+ --t-fill-color-tag-gray-030: hsl(0, 0%, 88%);
230
+ --t-fill-color-tag-gray-040: hsl(0, 0%, 81%);
231
+ --t-fill-color-tag-blue-010: hsl(220, 100%, 95%);
232
+ --t-fill-color-tag-blue-020: hsl(221, 100%, 88%);
233
+ --t-fill-color-tag-blue-030: hsl(220, 98%, 81%);
234
+ --t-fill-color-tag-blue-040: hsl(220, 98%, 74%);
235
+ --t-fill-color-tag-aqua-010: hsl(200, 82%, 89%);
236
+ --t-fill-color-tag-aqua-020: hsl(200, 82%, 82%);
237
+ --t-fill-color-tag-aqua-030: hsl(201, 76%, 71%);
238
+ --t-fill-color-tag-aqua-040: hsl(200, 75%, 64%);
239
+ --t-fill-color-tag-teal-010: hsl(163, 53%, 83%);
240
+ --t-fill-color-tag-teal-020: hsl(164, 52%, 76%);
241
+ --t-fill-color-tag-teal-030: hsl(169, 62%, 64%);
242
+ --t-fill-color-tag-teal-040: hsl(169, 62%, 56%);
243
+ --t-fill-color-tag-green-010: hsl(98, 59%, 85%);
244
+ --t-fill-color-tag-green-020: hsl(99, 59%, 78%);
245
+ --t-fill-color-tag-green-030: hsl(112, 57%, 65%);
246
+ --t-fill-color-tag-green-040: hsl(112, 57%, 57%);
247
+ --t-fill-color-tag-yellow-010: hsl(45, 77%, 85%);
248
+ --t-fill-color-tag-yellow-020: hsl(44, 78%, 77%);
249
+ --t-fill-color-tag-yellow-030: hsl(44, 92%, 69%);
250
+ --t-fill-color-tag-yellow-040: hsl(44, 93%, 61%);
251
+ --t-fill-color-tag-orange-010: hsl(22, 89%, 89%);
252
+ --t-fill-color-tag-orange-020: hsl(21, 89%, 82%);
253
+ --t-fill-color-tag-orange-030: hsl(21, 86%, 72%);
254
+ --t-fill-color-tag-orange-040: hsl(21, 86%, 64%);
255
+ --t-fill-color-tag-pink-010: hsl(311, 66%, 92%);
256
+ --t-fill-color-tag-pink-020: hsl(310, 64%, 85%);
257
+ --t-fill-color-tag-pink-030: hsl(324, 78%, 77%);
258
+ --t-fill-color-tag-pink-040: hsl(324, 76%, 70%);
259
+ --t-fill-color-tag-purple-010: hsl(259, 74%, 93%);
260
+ --t-fill-color-tag-purple-020: hsl(259, 74%, 85%);
261
+ --t-fill-color-tag-purple-030: hsl(273, 62%, 76%);
262
+ --t-fill-color-tag-purple-040: hsl(273, 62%, 70%);
263
+ --t-fill-color-tag-magenta-010: hsl(294, 37%, 90%);
264
+ --t-fill-color-tag-magenta-020: hsl(291, 40%, 83%);
265
+ --t-fill-color-tag-magenta-030: hsl(291, 48%, 70%);
266
+ --t-fill-color-tag-magenta-040: hsl(292, 48%, 63%);
267
+ --t-fill-color-tag-indigo-010: hsl(234, 78%, 93%);
268
+ --t-fill-color-tag-indigo-020: hsl(233, 79%, 87%);
269
+ --t-fill-color-tag-indigo-030: hsl(233, 77%, 81%);
270
+ --t-fill-color-tag-indigo-040: hsl(236, 79%, 74%);
271
+ --t-fill-color-button-neutral-solid-default: hsl(0, 0%, 42%);
182
272
  --t-fill-color-button-neutral-solid-hover: hsl(0, 0%, 24%);
183
273
  --t-fill-color-button-neutral-solid-active: hsl(0, 0%, 12%);
184
274
  --t-fill-color-button-neutral-solid-disabled: hsl(0, 0%, 95%);
185
275
  --t-fill-color-button-neutral-outline-dim-default: hsla(0, 0%, 100%, 0);
186
276
  --t-fill-color-button-neutral-outline-dim-hover: hsl(0, 0%, 95%);
187
277
  --t-fill-color-button-neutral-outline-dim-active: hsl(0, 0%, 93%);
188
- --t-fill-color-button-neutral-outline-dim-disabled: hsla(0, 0%, 100%, 0);
189
- --t-fill-color-button-neutral-outline-dim-disabled-solid: hsl(0, 0%, 98%);
278
+ --t-fill-color-button-neutral-outline-dim-disabled: hsl(0, 0%, 98%);
190
279
  --t-fill-color-button-neutral-ghost-default: hsla(0, 0%, 100%, 0);
191
280
  --t-fill-color-button-neutral-ghost-hover: hsl(0, 0%, 95%);
192
281
  --t-fill-color-button-neutral-ghost-active: hsl(0, 0%, 93%);
193
- --t-fill-color-button-neutral-ghost-disabled: hsla(0, 0%, 100%, 0);
194
- --t-fill-color-button-neutral-ghost-disabled-solid: hsl(0, 0%, 98%);
282
+ --t-fill-color-button-neutral-ghost-disabled: hsl(0, 0%, 98%);
195
283
  --t-fill-color-button-interaction-solid-default: hsl(204, 100%, 40%);
196
284
  --t-fill-color-button-interaction-solid-hover: hsl(204, 100%, 35%);
197
285
  --t-fill-color-button-interaction-solid-active: hsl(204, 100%, 30%);
@@ -220,77 +308,6 @@
220
308
  --t-fill-color-button-pill-hover: hsl(0, 0%, 88%);
221
309
  --t-fill-color-button-pill-active: hsl(0, 0%, 88%);
222
310
  --t-fill-color-button-pill-disabled: hsl(0, 0%, 93%);
223
- --t-fill-color-product-accounts-base: hsl(210, 55%, 50%);
224
- --t-fill-color-product-accounts-light: hsl(210, 54%, 60%);
225
- --t-fill-color-product-accounts-lighter: hsl(209, 53%, 90%);
226
- --t-fill-color-product-accounts-lightest: hsl(212, 54%, 93%);
227
- --t-fill-color-product-accounts-dark: hsl(210, 65%, 40%);
228
- --t-fill-color-product-accounts-darker: hsl(211, 70%, 32%);
229
- --t-fill-color-product-accounts-darkest: hsl(210, 75%, 25%);
230
- --t-fill-color-product-calendar-base: hsl(9, 61%, 50%);
231
- --t-fill-color-product-calendar-light: hsl(8, 65%, 55%);
232
- --t-fill-color-product-calendar-lighter: hsl(8, 72%, 59%);
233
- --t-fill-color-product-calendar-lightest: hsl(8, 61%, 70%);
234
- --t-fill-color-product-calendar-dark: hsl(8, 65%, 42%);
235
- --t-fill-color-product-calendar-darker: hsl(7, 65%, 34%);
236
- --t-fill-color-product-calendar-darkest: hsl(9, 61%, 27%);
237
- --t-fill-color-product-checkins-base: hsl(283, 22%, 48%);
238
- --t-fill-color-product-checkins-light: hsl(283, 22%, 55%);
239
- --t-fill-color-product-checkins-lighter: hsl(284, 22%, 64%);
240
- --t-fill-color-product-checkins-lightest: hsl(283, 22%, 75%);
241
- --t-fill-color-product-checkins-dark: hsl(283, 27%, 42%);
242
- --t-fill-color-product-checkins-darker: hsl(284, 33%, 34%);
243
- --t-fill-color-product-checkins-darkest: hsl(283, 33%, 27%);
244
- --t-fill-color-product-giving-base: hsl(43, 88%, 64%);
245
- --t-fill-color-product-giving-light: hsl(43, 88%, 70%);
246
- --t-fill-color-product-giving-lighter: hsl(43, 95%, 75%);
247
- --t-fill-color-product-giving-lightest: hsl(42, 95%, 83%);
248
- --t-fill-color-product-giving-dark: hsl(42, 84%, 55%);
249
- --t-fill-color-product-giving-darker: hsl(42, 84%, 48%);
250
- --t-fill-color-product-giving-darkest: hsl(42, 100%, 40%);
251
- --t-fill-color-product-groups-base: hsl(17, 88%, 55%);
252
- --t-fill-color-product-groups-light: hsl(17, 96%, 63%);
253
- --t-fill-color-product-groups-lighter: hsl(17, 96%, 70%);
254
- --t-fill-color-product-groups-lightest: hsl(17, 96%, 80%);
255
- --t-fill-color-product-groups-dark: hsl(12, 70%, 48%);
256
- --t-fill-color-product-groups-darker: hsl(12, 70%, 40%);
257
- --t-fill-color-product-groups-darkest: hsl(14, 70%, 34%);
258
- --t-fill-color-product-home-base: hsl(221, 91%, 55%);
259
- --t-fill-color-product-home-light: hsl(221, 91%, 62%);
260
- --t-fill-color-product-home-lighter: hsl(221, 91%, 87%);
261
- --t-fill-color-product-home-lightest: hsl(221, 91%, 91%);
262
- --t-fill-color-product-home-dark: hsl(221, 90%, 50%);
263
- --t-fill-color-product-home-darker: hsl(221, 90%, 45%);
264
- --t-fill-color-product-home-darkest: hsl(218, 84%, 25%);
265
- --t-fill-color-product-people-base: hsl(220, 74%, 57%);
266
- --t-fill-color-product-people-light: hsl(221, 73%, 65%);
267
- --t-fill-color-product-people-lighter: hsl(221, 73%, 71%);
268
- --t-fill-color-product-people-lightest: hsl(220, 69%, 81%);
269
- --t-fill-color-product-people-dark: hsl(220, 68%, 51%);
270
- --t-fill-color-product-people-darker: hsl(220, 68%, 41%);
271
- --t-fill-color-product-people-darkest: hsl(221, 68%, 31%);
272
- --t-fill-color-product-publishing-base: hsl(220, 12%, 31%);
273
- --t-fill-color-product-publishing-light: hsl(222, 12%, 39%);
274
- --t-fill-color-product-publishing-lighter: hsl(221, 11%, 50%);
275
- --t-fill-color-product-publishing-lightest: hsl(222, 10%, 60%);
276
- --t-fill-color-product-publishing-dark: hsl(220, 11%, 26%);
277
- --t-fill-color-product-publishing-darker: hsl(217, 12%, 22%);
278
- --t-fill-color-product-publishing-darkest: hsl(214, 11%, 12%);
279
- --t-fill-color-product-registrations-base: hsl(175, 36%, 43%);
280
- --t-fill-color-product-registrations-light: hsl(176, 37%, 60%);
281
- --t-fill-color-product-registrations-lighter: hsl(176, 37%, 68%);
282
- --t-fill-color-product-registrations-lightest: hsl(176, 38%, 78%);
283
- --t-fill-color-product-registrations-dark: hsl(175, 51%, 34%);
284
- --t-fill-color-product-registrations-darker: hsl(174, 51%, 28%);
285
- --t-fill-color-product-registrations-darkest: hsl(175, 52%, 22%);
286
- --t-fill-color-product-services-base: hsl(88, 45%, 41%);
287
- --t-fill-color-product-services-light: hsl(88, 40%, 54%);
288
- --t-fill-color-product-services-lighter: hsl(88, 39%, 66%);
289
- --t-fill-color-product-services-lightest: hsl(88, 39%, 75%);
290
- --t-fill-color-product-services-dark: hsl(89, 62%, 32%);
291
- --t-fill-color-product-services-darker: hsl(89, 62%, 26%);
292
- --t-fill-color-product-services-darkest: hsl(89, 63%, 21%);
293
- --t-fill-color-product-staff-base: hsl(328, 100%, 45%);
294
311
  --t-fill-color-transparency-light-010: hsla(0, 0%, 100%, 0.1);
295
312
  --t-fill-color-transparency-light-020: hsla(0, 0%, 100%, 0.2);
296
313
  --t-fill-color-transparency-light-030: hsla(0, 0%, 100%, 0.3);
@@ -314,11 +331,11 @@
314
331
  --t-border-color-default-base: hsl(0, 0%, 88%);
315
332
  --t-border-color-default-dark: hsl(0, 0%, 81%);
316
333
  --t-border-color-default-darker: hsl(0, 0%, 68%);
317
- --t-border-color-default-darkest: hsl(0, 0%, 62%);
334
+ --t-border-color-default-darkest: hsl(0, 0%, 58%);
318
335
  --t-border-color-default-disabled: hsl(0, 0%, 88%);
319
336
  --t-border-color-default-dim: hsl(0, 0%, 95%);
320
337
  --t-border-color-default-white: hsl(0, 0%, 100%);
321
- --t-border-color-status-neutral: hsl(0, 0%, 62%);
338
+ --t-border-color-status-neutral: hsl(0, 0%, 58%);
322
339
  --t-border-color-status-info: hsl(204, 100%, 40%);
323
340
  --t-border-color-status-success: hsl(97, 57%, 40%);
324
341
  --t-border-color-status-warning: hsl(42, 84%, 63%);
@@ -333,42 +350,154 @@
333
350
  --t-border-color-control-warning: hsl(42, 84%, 63%);
334
351
  --t-border-color-control-error: hsl(8, 60%, 47%);
335
352
  --t-border-color-control-disabled: hsl(0, 0%, 88%);
336
- --t-text-color-tag-gray: hsl(0, 0%, 24%);
337
- --t-text-color-tag-magenta: hsl(285, 71%, 20%);
338
- --t-text-color-tag-blue: hsl(224, 47%, 31%);
339
- --t-text-color-tag-aqua: hsl(209, 77%, 22%);
340
- --t-text-color-tag-teal: hsl(180, 95%, 15%);
341
- --t-text-color-tag-green: hsl(100, 93%, 17%);
342
- --t-text-color-tag-yellow: hsl(29, 100%, 23%);
343
- --t-text-color-tag-orange: hsl(18, 100%, 18%);
344
- --t-text-color-tag-pink: hsl(327, 88%, 20%);
345
- --t-text-color-tag-purple: hsl(268, 71%, 27%);
353
+ --t-text-color-tag-gray: var(--t-text-color-tag-bold-gray);
354
+ --t-text-color-tag-magenta: var(--t-text-color-tag-bold-magenta);
355
+ --t-text-color-tag-blue: var(--t-text-color-tag-bold-blue);
356
+ --t-text-color-tag-aqua: var(--t-text-color-tag-bold-aqua);
357
+ --t-text-color-tag-teal: var(--t-text-color-tag-bold-teal);
358
+ --t-text-color-tag-green: var(--t-text-color-tag-bold-green);
359
+ --t-text-color-tag-yellow: var(--t-text-color-tag-bold-yellow);
360
+ --t-text-color-tag-orange: var(--t-text-color-tag-bold-orange);
361
+ --t-text-color-tag-pink: var(--t-text-color-tag-bold-pink);
362
+ --t-text-color-tag-purple: var(--t-text-color-tag-bold-purple);
346
363
  --t-icon-color-status-neutral-dark: hsl(0, 0%, 24%);
347
364
  --t-icon-color-status-info-secondary: hsl(204, 100%, 40%);
348
365
  --t-fill-color-alert-info: hsl(204, 94%, 49%);
349
366
  --t-fill-color-alert-success: hsl(122, 60%, 41%);
350
367
  --t-fill-color-alert-warning: hsl(43, 96%, 58%);
351
368
  --t-fill-color-alert-error: hsl(4, 77%, 59%);
369
+ --t-fill-color-product-accounts-lightest: var(--t-fill-color-product-accounts-010);
370
+ --t-fill-color-product-accounts-lighter: var(--t-fill-color-product-accounts-020);
371
+ --t-fill-color-product-accounts-light: var(--t-fill-color-product-accounts-040);
372
+ --t-fill-color-product-accounts-base: var(--t-fill-color-product-accounts-050);
373
+ --t-fill-color-product-accounts-dark: var(--t-fill-color-product-accounts-060);
374
+ --t-fill-color-product-accounts-darker: var(--t-fill-color-product-accounts-070);
375
+ --t-fill-color-product-accounts-darkest: var(--t-fill-color-product-accounts-080);
376
+ --t-fill-color-product-calendar-lightest: var(--t-fill-color-product-calendar-020);
377
+ --t-fill-color-product-calendar-lighter: var(--t-fill-color-product-calendar-030);
378
+ --t-fill-color-product-calendar-light: var(--t-fill-color-product-calendar-040);
379
+ --t-fill-color-product-calendar-base: var(--t-fill-color-product-calendar-050);
380
+ --t-fill-color-product-calendar-dark: var(--t-fill-color-product-calendar-060);
381
+ --t-fill-color-product-calendar-darker: var(--t-fill-color-product-calendar-070);
382
+ --t-fill-color-product-calendar-darkest: var(--t-fill-color-product-calendar-080);
383
+ --t-fill-color-product-checkins-lightest: var(--t-fill-color-product-checkins-020);
384
+ --t-fill-color-product-checkins-lighter: var(--t-fill-color-product-checkins-030);
385
+ --t-fill-color-product-checkins-light: var(--t-fill-color-product-checkins-040);
386
+ --t-fill-color-product-checkins-base: var(--t-fill-color-product-checkins-050);
387
+ --t-fill-color-product-checkins-dark: var(--t-fill-color-product-checkins-060);
388
+ --t-fill-color-product-checkins-darker: var(--t-fill-color-product-checkins-070);
389
+ --t-fill-color-product-checkins-darkest: var(--t-fill-color-product-checkins-080);
390
+ --t-fill-color-product-giving-lightest: var(--t-fill-color-product-giving-020);
391
+ --t-fill-color-product-giving-lighter: var(--t-fill-color-product-giving-030);
392
+ --t-fill-color-product-giving-light: var(--t-fill-color-product-giving-040);
393
+ --t-fill-color-product-giving-base: var(--t-fill-color-product-giving-050);
394
+ --t-fill-color-product-giving-dark: var(--t-fill-color-product-giving-060);
395
+ --t-fill-color-product-giving-darker: var(--t-fill-color-product-giving-070);
396
+ --t-fill-color-product-giving-darkest: var(--t-fill-color-product-giving-080);
397
+ --t-fill-color-product-groups-lightest: var(--t-fill-color-product-groups-020);
398
+ --t-fill-color-product-groups-lighter: var(--t-fill-color-product-groups-030);
399
+ --t-fill-color-product-groups-light: var(--t-fill-color-product-groups-040);
400
+ --t-fill-color-product-groups-base: var(--t-fill-color-product-groups-050);
401
+ --t-fill-color-product-groups-dark: var(--t-fill-color-product-groups-060);
402
+ --t-fill-color-product-groups-darker: var(--t-fill-color-product-groups-070);
403
+ --t-fill-color-product-groups-darkest: var(--t-fill-color-product-groups-080);
404
+ --t-fill-color-product-home-lightest: var(--t-fill-color-product-home-020);
405
+ --t-fill-color-product-home-lighter: var(--t-fill-color-product-home-030);
406
+ --t-fill-color-product-home-light: var(--t-fill-color-product-home-040);
407
+ --t-fill-color-product-home-base: var(--t-fill-color-product-home-050);
408
+ --t-fill-color-product-home-dark: var(--t-fill-color-product-home-060);
409
+ --t-fill-color-product-home-darker: var(--t-fill-color-product-home-070);
410
+ --t-fill-color-product-home-darkest: var(--t-fill-color-product-home-080);
411
+ --t-fill-color-product-people-lightest: var(--t-fill-color-product-people-020);
412
+ --t-fill-color-product-people-lighter: var(--t-fill-color-product-people-030);
413
+ --t-fill-color-product-people-light: var(--t-fill-color-product-people-040);
414
+ --t-fill-color-product-people-base: var(--t-fill-color-product-people-050);
415
+ --t-fill-color-product-people-dark: var(--t-fill-color-product-people-060);
416
+ --t-fill-color-product-people-darker: var(--t-fill-color-product-people-070);
417
+ --t-fill-color-product-people-darkest: var(--t-fill-color-product-people-080);
418
+ --t-fill-color-product-publishing-lightest: var(--t-fill-color-product-publishing-020);
419
+ --t-fill-color-product-publishing-lighter: var(--t-fill-color-product-publishing-030);
420
+ --t-fill-color-product-publishing-light: var(--t-fill-color-product-publishing-040);
421
+ --t-fill-color-product-publishing-base: var(--t-fill-color-product-publishing-050);
422
+ --t-fill-color-product-publishing-dark: var(--t-fill-color-product-publishing-060);
423
+ --t-fill-color-product-publishing-darker: var(--t-fill-color-product-publishing-070);
424
+ --t-fill-color-product-publishing-darkest: var(--t-fill-color-product-publishing-080);
425
+ --t-fill-color-product-registrations-lightest: var(--t-fill-color-product-registrations-020);
426
+ --t-fill-color-product-registrations-lighter: var(--t-fill-color-product-registrations-030);
427
+ --t-fill-color-product-registrations-light: var(--t-fill-color-product-registrations-040);
428
+ --t-fill-color-product-registrations-base: var(--t-fill-color-product-registrations-050);
429
+ --t-fill-color-product-registrations-dark: var(--t-fill-color-product-registrations-060);
430
+ --t-fill-color-product-registrations-darker: var(--t-fill-color-product-registrations-070);
431
+ --t-fill-color-product-registrations-darkest: var(--t-fill-color-product-registrations-080);
432
+ --t-fill-color-product-services-lightest: var(--t-fill-color-product-services-020);
433
+ --t-fill-color-product-services-lighter: var(--t-fill-color-product-services-030);
434
+ --t-fill-color-product-services-light: var(--t-fill-color-product-services-040);
435
+ --t-fill-color-product-services-base: var(--t-fill-color-product-services-050);
436
+ --t-fill-color-product-services-dark: var(--t-fill-color-product-services-060);
437
+ --t-fill-color-product-services-darker: var(--t-fill-color-product-services-070);
438
+ --t-fill-color-product-services-darkest: var(--t-fill-color-product-services-080);
439
+ --t-fill-color-tag-subtle-gray: var(--t-fill-color-tag-gray-010);
440
+ --t-fill-color-tag-subtle-blue: var(--t-fill-color-tag-blue-010);
441
+ --t-fill-color-tag-subtle-aqua: var(--t-fill-color-tag-aqua-010);
442
+ --t-fill-color-tag-subtle-teal: var(--t-fill-color-tag-teal-010);
443
+ --t-fill-color-tag-subtle-green: var(--t-fill-color-tag-green-010);
444
+ --t-fill-color-tag-subtle-yellow: var(--t-fill-color-tag-yellow-010);
445
+ --t-fill-color-tag-subtle-orange: var(--t-fill-color-tag-orange-010);
446
+ --t-fill-color-tag-subtle-pink: var(--t-fill-color-tag-pink-010);
447
+ --t-fill-color-tag-subtle-purple: var(--t-fill-color-tag-purple-010);
448
+ --t-fill-color-tag-subtle-magenta: var(--t-fill-color-tag-magenta-010);
449
+ --t-fill-color-tag-subtle-label-gray: var(--t-fill-color-tag-gray-020);
450
+ --t-fill-color-tag-subtle-label-blue: var(--t-fill-color-tag-blue-020);
451
+ --t-fill-color-tag-subtle-label-aqua: var(--t-fill-color-tag-aqua-020);
452
+ --t-fill-color-tag-subtle-label-teal: var(--t-fill-color-tag-teal-020);
453
+ --t-fill-color-tag-subtle-label-green: var(--t-fill-color-tag-green-020);
454
+ --t-fill-color-tag-subtle-label-yellow: var(--t-fill-color-tag-yellow-020);
455
+ --t-fill-color-tag-subtle-label-orange: var(--t-fill-color-tag-orange-020);
456
+ --t-fill-color-tag-subtle-label-pink: var(--t-fill-color-tag-pink-020);
457
+ --t-fill-color-tag-subtle-label-purple: var(--t-fill-color-tag-purple-020);
458
+ --t-fill-color-tag-subtle-label-magenta: var(--t-fill-color-tag-magenta-020);
459
+ --t-fill-color-tag-bold-gray: var(--t-fill-color-tag-gray-030);
460
+ --t-fill-color-tag-bold-blue: var(--t-fill-color-tag-blue-030);
461
+ --t-fill-color-tag-bold-aqua: var(--t-fill-color-tag-aqua-030);
462
+ --t-fill-color-tag-bold-teal: var(--t-fill-color-tag-teal-030);
463
+ --t-fill-color-tag-bold-green: var(--t-fill-color-tag-green-030);
464
+ --t-fill-color-tag-bold-yellow: var(--t-fill-color-tag-yellow-030);
465
+ --t-fill-color-tag-bold-orange: var(--t-fill-color-tag-orange-030);
466
+ --t-fill-color-tag-bold-pink: var(--t-fill-color-tag-pink-030);
467
+ --t-fill-color-tag-bold-purple: var(--t-fill-color-tag-purple-030);
468
+ --t-fill-color-tag-bold-magenta: var(--t-fill-color-tag-magenta-030);
469
+ --t-fill-color-tag-bold-label-gray: var(--t-fill-color-tag-gray-040);
470
+ --t-fill-color-tag-bold-label-blue: var(--t-fill-color-tag-blue-040);
471
+ --t-fill-color-tag-bold-label-aqua: var(--t-fill-color-tag-aqua-040);
472
+ --t-fill-color-tag-bold-label-teal: var(--t-fill-color-tag-teal-040);
473
+ --t-fill-color-tag-bold-label-green: var(--t-fill-color-tag-green-040);
474
+ --t-fill-color-tag-bold-label-yellow: var(--t-fill-color-tag-yellow-040);
475
+ --t-fill-color-tag-bold-label-orange: var(--t-fill-color-tag-orange-040);
476
+ --t-fill-color-tag-bold-label-pink: var(--t-fill-color-tag-pink-040);
477
+ --t-fill-color-tag-bold-label-purple: var(--t-fill-color-tag-purple-040);
478
+ --t-fill-color-tag-bold-label-magenta: var(--t-fill-color-tag-magenta-040);
479
+ --t-fill-color-button-neutral-outline-dim-disabled-solid: hsl(0, 0%, 98%);
480
+ --t-fill-color-button-neutral-ghost-disabled-solid: hsl(0, 0%, 98%);
352
481
  --t-fill-color-button-default-info-solid-default: hsl(204, 100%, 40%);
353
482
  --t-fill-color-button-default-info-solid-hover: hsl(204, 100%, 35%);
354
483
  --t-fill-color-button-default-info-solid-active: hsl(204, 100%, 30%);
355
484
  --t-fill-color-button-default-info-solid-disabled: hsl(0, 0%, 81%);
356
- --t-fill-color-button-default-info-outline-dim-default: hsla(0, 0%, 100%, 0);
485
+ --t-fill-color-button-default-info-outline-dim-default: #ffffff00;
357
486
  --t-fill-color-button-default-info-outline-dim-hover: hsl(204, 100%, 97%);
358
487
  --t-fill-color-button-default-info-outline-dim-active: hsl(203, 94%, 94%);
359
- --t-fill-color-button-default-info-outline-dim-disabled: hsla(0, 0%, 100%, 0);
360
- --t-fill-color-button-default-info-ghost-default: hsla(0, 0%, 100%, 0);
488
+ --t-fill-color-button-default-info-outline-dim-disabled: #ffffff00;
489
+ --t-fill-color-button-default-info-ghost-default: #ffffff00;
361
490
  --t-fill-color-button-default-info-ghost-hover: hsl(204, 100%, 97%);
362
491
  --t-fill-color-button-default-info-ghost-active: hsl(203, 94%, 94%);
363
- --t-fill-color-button-default-info-ghost-disabled: hsla(0, 0%, 100%, 0);
492
+ --t-fill-color-button-default-info-ghost-disabled: #ffffff00;
364
493
  --t-fill-color-button-create-solid-default: hsl(96, 57%, 33%);
365
494
  --t-fill-color-button-create-solid-hover: hsl(97, 57%, 28%);
366
495
  --t-fill-color-button-create-solid-active: hsl(97, 57%, 23%);
367
496
  --t-fill-color-button-create-solid-disabled: hsl(0, 0%, 81%);
368
- --t-fill-color-button-create-ghost-default: hsla(0, 0%, 100%, 0);
497
+ --t-fill-color-button-create-ghost-default: #ffffff00;
369
498
  --t-fill-color-button-create-ghost-hover: hsl(96, 60%, 95%);
370
499
  --t-fill-color-button-create-ghost-active: hsl(97, 57%, 90%);
371
- --t-fill-color-button-create-ghost-disabled: hsla(0, 0%, 100%, 0);
500
+ --t-fill-color-button-create-ghost-disabled: #ffffff00;
372
501
  }
373
502
 
374
503
  /**