@planningcenter/tapestry-tokens 0.0.1 → 2.7.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 (45) hide show
  1. package/dist/compose/TapestryDarkTokens.kt +196 -0
  2. package/dist/compose/TapestryTokens.kt +383 -0
  3. package/{src → dist}/css/components/banner.css +8 -8
  4. package/dist/css/product-tokens/accounts.css +17 -0
  5. package/dist/css/product-tokens/calendar.css +17 -0
  6. package/dist/css/product-tokens/checkins.css +17 -0
  7. package/dist/css/product-tokens/giving.css +17 -0
  8. package/dist/css/product-tokens/groups.css +17 -0
  9. package/dist/css/product-tokens/home.css +16 -0
  10. package/dist/css/product-tokens/people.css +17 -0
  11. package/dist/css/product-tokens/publishing.css +17 -0
  12. package/dist/css/product-tokens/registrations.css +17 -0
  13. package/dist/css/product-tokens/services.css +17 -0
  14. package/dist/css/tokens-alias-deprecated-removed-segments.css +48 -0
  15. package/dist/css/tokens-alias-deprecated.css +42 -0
  16. package/dist/css/tokens-alias.css +427 -0
  17. package/dist/css/tokens-dark-deprecated.css +14 -0
  18. package/dist/css/tokens-dark.css +226 -0
  19. package/dist/css/tokens-system-dark-deprecated.css +16 -0
  20. package/dist/css/tokens-system-dark.css +228 -0
  21. package/dist/js/tokens-deprecated.json +326 -0
  22. package/dist/js/tokens.json +2004 -0
  23. package/dist/swiftui/TapestryDarkTokens.swift +198 -0
  24. package/dist/swiftui/TapestryTokens.swift +382 -0
  25. package/dist/ts/react-native-tokens.d.ts +1959 -0
  26. package/dist/ts/react-native-tokens.d.ts.map +1 -0
  27. package/dist/ts/react-native-tokens.js +502 -0
  28. package/dist/ts/tokens.d.ts +505 -0
  29. package/dist/ts/tokens.d.ts.map +1 -0
  30. package/dist/ts/tokens.js +504 -0
  31. package/package.json +44 -17
  32. package/CHANGELOG.md +0 -0
  33. package/rollup.config.mjs +0 -12
  34. package/src/componentNames.js +0 -10
  35. package/src/css/tokens-alias-deprecated.css +0 -42
  36. package/src/css/tokens-alias.css +0 -334
  37. package/src/css/tokens.css +0 -2
  38. package/src/index.ts +0 -11
  39. package/src/json/alias.json +0 -1628
  40. package/src/json/components.json +0 -84
  41. package/src/json/primitives.json +0 -946
  42. package/src/style-dictionary.build.js +0 -367
  43. package/src/style-dictionary.config.js +0 -67
  44. package/src/ts/tokens.ts +0 -371
  45. package/tsconfig.build.json +0 -11
package/src/css/tokens-alias-deprecated.css DELETED
@@ -1,42 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
4
-
5
- :root {
6
- --t-text-color-tag-gray: hsl(0, 0%, 24%);
7
- --t-text-color-tag-magenta: hsl(285, 71%, 20%);
8
- --t-text-color-tag-blue: hsl(224, 47%, 31%);
9
- --t-text-color-tag-aqua: hsl(209, 77%, 22%);
10
- --t-text-color-tag-teal: hsl(180, 95%, 15%);
11
- --t-text-color-tag-green: hsl(100, 93%, 17%);
12
- --t-text-color-tag-yellow: hsl(29, 100%, 23%);
13
- --t-text-color-tag-orange: hsl(18, 100%, 18%);
14
- --t-text-color-tag-pink: hsl(327, 88%, 20%);
15
- --t-text-color-tag-purple: hsl(268, 71%, 27%);
16
- --t-icon-color-status-neutral-dark: hsl(0, 0%, 24%);
17
- --t-icon-color-status-info-secondary: hsl(204, 100%, 40%);
18
- --t-fill-color-alert-info: hsl(204, 94%, 49%);
19
- --t-fill-color-alert-success: hsl(122, 60%, 41%);
20
- --t-fill-color-alert-warning: hsl(43, 96%, 58%);
21
- --t-fill-color-alert-error: hsl(4, 77%, 59%);
22
- --t-fill-color-button-default-info-solid-default: hsl(204, 100%, 40%);
23
- --t-fill-color-button-default-info-solid-hover: hsl(204, 100%, 35%);
24
- --t-fill-color-button-default-info-solid-active: hsl(204, 100%, 30%);
25
- --t-fill-color-button-default-info-solid-disabled: hsl(0, 0%, 81%);
26
- --t-fill-color-button-default-info-outline-dim-default: hsla(0, 0%, 100%, 0);
27
- --t-fill-color-button-default-info-outline-dim-hover: hsl(204, 100%, 97%);
28
- --t-fill-color-button-default-info-outline-dim-active: hsl(203, 94%, 94%);
29
- --t-fill-color-button-default-info-outline-dim-disabled: hsla(0, 0%, 100%, 0);
30
- --t-fill-color-button-default-info-ghost-default: hsla(0, 0%, 100%, 0);
31
- --t-fill-color-button-default-info-ghost-hover: hsl(204, 100%, 97%);
32
- --t-fill-color-button-default-info-ghost-active: hsl(203, 94%, 94%);
33
- --t-fill-color-button-default-info-ghost-disabled: hsla(0, 0%, 100%, 0);
34
- --t-fill-color-button-create-solid-default: hsl(96, 57%, 33%);
35
- --t-fill-color-button-create-solid-hover: hsl(97, 57%, 28%);
36
- --t-fill-color-button-create-solid-active: hsl(97, 57%, 23%);
37
- --t-fill-color-button-create-solid-disabled: hsl(0, 0%, 81%);
38
- --t-fill-color-button-create-ghost-default: hsla(0, 0%, 100%, 0);
39
- --t-fill-color-button-create-ghost-hover: hsl(96, 60%, 95%);
40
- --t-fill-color-button-create-ghost-active: hsl(97, 57%, 90%);
41
- --t-fill-color-button-create-ghost-disabled: hsla(0, 0%, 100%, 0);
42
- }
package/src/css/tokens-alias.css DELETED
@@ -1,334 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
4
-
5
- :root {
6
- --t-border-radius-sm: 2px;
7
- --t-border-radius-md: 4px;
8
- --t-border-radius-lg: 8px;
9
- --t-border-radius-xl: 16px;
10
- --t-border-radius-round: 56px;
11
- --t-border-radius-default: 4px;
12
- --t-border-size-default: 1px;
13
- --t-border-size-thick: 2px;
14
- --t-spacing-1: 8px;
15
- --t-spacing-2: 16px;
16
- --t-spacing-3: 24px;
17
- --t-spacing-4: 32px;
18
- --t-spacing-5: 40px;
19
- --t-spacing-6: 48px;
20
- --t-spacing-7: 56px;
21
- --t-spacing-fourth: 2px;
22
- --t-spacing-half: 4px;
23
- --t-element-size-3xl: 48px;
24
- --t-element-size-2xl: 32px;
25
- --t-element-size-xl: 24px;
26
- --t-element-size-lg: 18px;
27
- --t-element-size-md: 16px;
28
- --t-element-size-sm: 14px;
29
- --t-element-size-xs: 12px;
30
- --t-font-size-4xl: 32px;
31
- --t-font-size-3xl: 28px;
32
- --t-font-size-2xl: 24px;
33
- --t-font-size-xl: 20px;
34
- --t-font-size-lg: 18px;
35
- --t-font-size-md: 16px;
36
- --t-font-size-sm: 14px;
37
- --t-font-size-xs: 12px;
38
- --t-font-size-2xs: 10px;
39
- --t-font-weight-normal: 400;
40
- --t-font-weight-medium: 500;
41
- --t-font-weight-semi-bold: 600;
42
- --t-font-weight-bold: 700;
43
- --t-container-size-xl: 48px;
44
- --t-container-size-lg: 40px;
45
- --t-container-size-md: 32px;
46
- --t-container-size-sm: 24px;
47
- --t-container-size-xs: 20px;
48
- --t-avatar-size-20: 20px;
49
- --t-avatar-size-24: 24px;
50
- --t-avatar-size-36: 36px;
51
- --t-avatar-size-48: 48px;
52
- --t-avatar-size-72: 72px;
53
- --t-avatar-size-112: 112px;
54
- --t-text-color-default-headline: hsl(0, 0%, 12%);
55
- --t-text-color-default-primary: hsl(0, 0%, 24%);
56
- --t-text-color-default-secondary: hsl(0, 0%, 45%);
57
- --t-text-color-default-disabled: hsl(0, 0%, 81%);
58
- --t-text-color-default-placeholder: hsl(0, 0%, 62%);
59
- --t-text-color-default-inverted: hsl(0, 0%, 100%);
60
- --t-text-color-interaction-primary: hsl(204, 100%, 40%);
61
- --t-text-color-interaction-hover: hsl(204, 100%, 35%);
62
- --t-text-color-interaction-active: hsl(204, 100%, 30%);
63
- --t-text-color-interaction-visited: hsl(204, 100%, 30%);
64
- --t-text-color-status-neutral: hsl(0, 0%, 24%);
65
- --t-text-color-status-info: hsl(204, 100%, 35%);
66
- --t-text-color-status-success: hsl(97, 57%, 28%);
67
- --t-text-color-status-warning: hsl(42, 100%, 29%);
68
- --t-text-color-status-error: hsl(8, 60%, 45%);
69
- --t-text-color-tag-subtle-gray: hsl(0, 0%, 24%);
70
- --t-text-color-tag-subtle-blue: hsl(224, 47%, 31%);
71
- --t-text-color-tag-subtle-aqua: hsl(209, 77%, 22%);
72
- --t-text-color-tag-subtle-teal: hsl(180, 95%, 15%);
73
- --t-text-color-tag-subtle-green: hsl(100, 93%, 17%);
74
- --t-text-color-tag-subtle-yellow: hsl(29, 100%, 23%);
75
- --t-text-color-tag-subtle-orange: hsl(18, 100%, 18%);
76
- --t-text-color-tag-subtle-pink: hsl(327, 88%, 20%);
77
- --t-text-color-tag-subtle-purple: hsl(268, 71%, 27%);
78
- --t-text-color-tag-subtle-magenta: hsl(285, 71%, 20%);
79
- --t-text-color-tag-bold-gray: hsl(0, 0%, 24%);
80
- --t-text-color-tag-bold-blue: hsl(224, 47%, 31%);
81
- --t-text-color-tag-bold-aqua: hsl(209, 77%, 22%);
82
- --t-text-color-tag-bold-teal: hsl(180, 95%, 15%);
83
- --t-text-color-tag-bold-green: hsl(100, 93%, 17%);
84
- --t-text-color-tag-bold-yellow: hsl(29, 100%, 23%);
85
- --t-text-color-tag-bold-orange: hsl(18, 100%, 18%);
86
- --t-text-color-tag-bold-pink: hsl(327, 88%, 20%);
87
- --t-text-color-tag-bold-purple: hsl(268, 71%, 27%);
88
- --t-text-color-tag-bold-magenta: hsl(285, 71%, 20%);
89
- --t-icon-color-default-primary: hsl(0, 0%, 24%);
90
- --t-icon-color-default-secondary: hsl(0, 0%, 45%);
91
- --t-icon-color-default-dim: hsl(0, 0%, 62%);
92
- --t-icon-color-default-disabled: hsl(0, 0%, 81%);
93
- --t-icon-color-default-inverted: hsl(0, 0%, 100%);
94
- --t-icon-color-status-neutral-primary: hsl(0, 0%, 45%);
95
- --t-icon-color-status-neutral-secondary: hsl(0, 0%, 62%);
96
- --t-icon-color-status-neutral-bold: hsl(0, 0%, 24%);
97
- --t-icon-color-status-info-primary: hsl(204, 100%, 40%);
98
- --t-icon-color-status-success-primary: hsl(96, 57%, 33%);
99
- --t-icon-color-status-success-secondary: hsl(97, 57%, 40%);
100
- --t-icon-color-status-warning-primary: hsl(42, 84%, 49%);
101
- --t-icon-color-status-error-primary: hsl(8, 60%, 47%);
102
- --t-fill-color-neutral-000: hsl(0, 0%, 12%);
103
- --t-fill-color-neutral-010: hsl(0, 0%, 24%);
104
- --t-fill-color-neutral-020: hsl(0, 0%, 45%);
105
- --t-fill-color-neutral-030: hsl(0, 0%, 62%);
106
- --t-fill-color-neutral-040: hsl(0, 0%, 81%);
107
- --t-fill-color-neutral-050: hsl(0, 0%, 88%);
108
- --t-fill-color-neutral-060: hsl(0, 0%, 93%);
109
- --t-fill-color-neutral-070: hsl(0, 0%, 95%);
110
- --t-fill-color-neutral-080: hsl(0, 0%, 97%);
111
- --t-fill-color-neutral-090: hsl(0, 0%, 98%);
112
- --t-fill-color-neutral-100: hsl(0, 0%, 100%);
113
- --t-fill-color-interaction-default: hsl(204, 100%, 40%);
114
- --t-fill-color-interaction-hover: hsl(204, 100%, 35%);
115
- --t-fill-color-interaction-active: hsl(204, 100%, 30%);
116
- --t-fill-color-interaction-disabled: hsl(0, 0%, 81%);
117
- --t-fill-color-control-neutral-off: hsl(0, 0%, 62%);
118
- --t-fill-color-control-neutral-on: hsl(0, 0%, 24%);
119
- --t-fill-color-control-primary: hsl(204, 100%, 40%);
120
- --t-fill-color-control-secondary: hsl(97, 57%, 40%);
121
- --t-fill-color-control-error: hsl(8, 60%, 47%);
122
- --t-fill-color-control-disabled: hsl(0, 0%, 81%);
123
- --t-fill-color-status-neutral-solid: hsl(0, 0%, 45%);
124
- --t-fill-color-status-neutral-ghost: hsl(0, 0%, 93%);
125
- --t-fill-color-status-neutral-dim: hsl(0, 0%, 97%);
126
- --t-fill-color-status-info-solid: hsl(204, 100%, 40%);
127
- --t-fill-color-status-info-ghost: hsl(203, 94%, 94%);
128
- --t-fill-color-status-info-dim: hsl(204, 100%, 97%);
129
- --t-fill-color-status-success-solid: hsl(96, 57%, 33%);
130
- --t-fill-color-status-success-ghost: hsl(97, 57%, 90%);
131
- --t-fill-color-status-success-dim: hsl(96, 60%, 95%);
132
- --t-fill-color-status-warning-solid: hsl(42, 84%, 63%);
133
- --t-fill-color-status-warning-ghost: hsl(42, 87%, 94%);
134
- --t-fill-color-status-warning-dim: hsl(42, 87%, 97%);
135
- --t-fill-color-status-error-solid: hsl(8, 60%, 47%);
136
- --t-fill-color-status-error-ghost: hsl(9, 59%, 93%);
137
- --t-fill-color-status-error-dim: hsl(7, 60%, 97%);
138
- --t-fill-color-tooltip-primary: hsla(0, 0%, 12%, 0.77);
139
- --t-fill-color-tag-subtle-gray: hsl(0, 0%, 93%);
140
- --t-fill-color-tag-subtle-blue: hsl(220, 100%, 95%);
141
- --t-fill-color-tag-subtle-label-gray: hsl(0, 0%, 88%);
142
- --t-fill-color-tag-subtle-label-blue: hsl(221, 100%, 81%);
143
- --t-fill-color-tag-subtle-label-aqua: hsl(200, 82%, 82%);
144
- --t-fill-color-tag-subtle-label-teal: hsl(164, 52%, 76%);
145
- --t-fill-color-tag-subtle-label-green: hsl(99, 59%, 78%);
146
- --t-fill-color-tag-subtle-label-yellow: hsl(44, 78%, 77%);
147
- --t-fill-color-tag-subtle-label-orange: hsl(21, 89%, 82%);
148
- --t-fill-color-tag-subtle-label-pink: hsl(310, 64%, 85%);
149
- --t-fill-color-tag-subtle-label-purple: hsl(259, 74%, 85%);
150
- --t-fill-color-tag-subtle-label-magenta: hsl(291, 40%, 83%);
151
- --t-fill-color-tag-subtle-aqua: hsl(200, 82%, 89%);
152
- --t-fill-color-tag-subtle-teal: hsl(163, 53%, 83%);
153
- --t-fill-color-tag-subtle-green: hsl(98, 59%, 85%);
154
- --t-fill-color-tag-subtle-yellow: hsl(45, 77%, 85%);
155
- --t-fill-color-tag-subtle-orange: hsl(22, 89%, 89%);
156
- --t-fill-color-tag-subtle-pink: hsl(311, 66%, 92%);
157
- --t-fill-color-tag-subtle-purple: hsl(259, 74%, 93%);
158
- --t-fill-color-tag-subtle-magenta: hsl(294, 37%, 90%);
159
- --t-fill-color-tag-bold-gray: hsl(0, 0%, 88%);
160
- --t-fill-color-tag-bold-blue: hsl(220, 98%, 81%);
161
- --t-fill-color-tag-bold-aqua: hsl(201, 76%, 71%);
162
- --t-fill-color-tag-bold-teal: hsl(169, 62%, 64%);
163
- --t-fill-color-tag-bold-green: hsl(112, 57%, 65%);
164
- --t-fill-color-tag-bold-yellow: hsl(44, 92%, 69%);
165
- --t-fill-color-tag-bold-orange: hsl(21, 86%, 72%);
166
- --t-fill-color-tag-bold-pink: hsl(324, 78%, 77%);
167
- --t-fill-color-tag-bold-purple: hsl(273, 62%, 76%);
168
- --t-fill-color-tag-bold-magenta: hsl(291, 48%, 70%);
169
- --t-fill-color-tag-bold-label-gray: hsl(0, 0%, 81%);
170
- --t-fill-color-tag-bold-label-blue: hsl(220, 98%, 74%);
171
- --t-fill-color-tag-bold-label-aqua: hsl(200, 75%, 64%);
172
- --t-fill-color-tag-bold-label-teal: hsl(169, 62%, 56%);
173
- --t-fill-color-tag-bold-label-green: hsl(112, 57%, 57%);
174
- --t-fill-color-tag-bold-label-yellow: hsl(44, 93%, 61%);
175
- --t-fill-color-tag-bold-label-orange: hsl(21, 86%, 64%);
176
- --t-fill-color-tag-bold-label-pink: hsl(324, 76%, 70%);
177
- --t-fill-color-tag-bold-label-purple: hsl(273, 62%, 70%);
178
- --t-fill-color-tag-bold-label-magenta: hsl(292, 48%, 63%);
179
- --t-fill-color-button-neutral-solid-default: hsl(0, 0%, 45%);
180
- --t-fill-color-button-neutral-solid-hover: hsl(0, 0%, 24%);
181
- --t-fill-color-button-neutral-solid-active: hsl(0, 0%, 12%);
182
- --t-fill-color-button-neutral-solid-disabled: hsl(0, 0%, 95%);
183
- --t-fill-color-button-neutral-outline-dim-default: hsla(0, 0%, 100%, 0);
184
- --t-fill-color-button-neutral-outline-dim-hover: hsl(0, 0%, 95%);
185
- --t-fill-color-button-neutral-outline-dim-active: hsl(0, 0%, 93%);
186
- --t-fill-color-button-neutral-outline-dim-disabled: hsla(0, 0%, 100%, 0);
187
- --t-fill-color-button-neutral-outline-dim-disabled-solid: hsl(0, 0%, 98%);
188
- --t-fill-color-button-neutral-ghost-default: hsla(0, 0%, 100%, 0);
189
- --t-fill-color-button-neutral-ghost-hover: hsl(0, 0%, 95%);
190
- --t-fill-color-button-neutral-ghost-active: hsl(0, 0%, 93%);
191
- --t-fill-color-button-neutral-ghost-disabled: hsla(0, 0%, 100%, 0);
192
- --t-fill-color-button-neutral-ghost-disabled-solid: hsl(0, 0%, 98%);
193
- --t-fill-color-button-interaction-solid-default: hsl(204, 100%, 40%);
194
- --t-fill-color-button-interaction-solid-hover: hsl(204, 100%, 35%);
195
- --t-fill-color-button-interaction-solid-active: hsl(204, 100%, 30%);
196
- --t-fill-color-button-interaction-solid-disabled: hsl(0, 0%, 81%);
197
- --t-fill-color-button-interaction-outline-dim-default: hsla(0, 0%, 100%, 0);
198
- --t-fill-color-button-interaction-outline-dim-hover: hsl(204, 100%, 97%);
199
- --t-fill-color-button-interaction-outline-dim-active: hsl(203, 94%, 94%);
200
- --t-fill-color-button-interaction-outline-dim-disabled: hsla(0, 0%, 100%, 0);
201
- --t-fill-color-button-interaction-ghost-default: hsla(0, 0%, 100%, 0);
202
- --t-fill-color-button-interaction-ghost-hover: hsl(204, 100%, 97%);
203
- --t-fill-color-button-interaction-ghost-active: hsl(203, 94%, 94%);
204
- --t-fill-color-button-interaction-ghost-disabled: hsla(0, 0%, 100%, 0);
205
- --t-fill-color-button-delete-solid-default: hsl(8, 60%, 47%);
206
- --t-fill-color-button-delete-solid-hover: hsl(8, 60%, 45%);
207
- --t-fill-color-button-delete-solid-active: hsl(8, 60%, 40%);
208
- --t-fill-color-button-delete-solid-disabled: hsl(0, 0%, 81%);
209
- --t-fill-color-button-delete-outline-dim-default: hsla(0, 0%, 100%, 0);
210
- --t-fill-color-button-delete-outline-dim-hover: hsl(7, 60%, 97%);
211
- --t-fill-color-button-delete-outline-dim-active: hsl(9, 59%, 93%);
212
- --t-fill-color-button-delete-outline-dim-disabled: hsla(0, 0%, 100%, 0);
213
- --t-fill-color-button-delete-ghost-default: hsla(0, 0%, 100%, 0);
214
- --t-fill-color-button-delete-ghost-hover: hsl(7, 60%, 97%);
215
- --t-fill-color-button-delete-ghost-active: hsl(9, 59%, 93%);
216
- --t-fill-color-button-delete-ghost-disabled: hsla(0, 0%, 100%, 0);
217
- --t-fill-color-button-pill-default: hsl(0, 0%, 93%);
218
- --t-fill-color-button-pill-hover: hsl(0, 0%, 88%);
219
- --t-fill-color-button-pill-active: hsl(0, 0%, 88%);
220
- --t-fill-color-button-pill-disabled: hsl(0, 0%, 93%);
221
- --t-fill-color-product-accounts-base: hsl(210, 55%, 50%);
222
- --t-fill-color-product-accounts-light: hsl(210, 54%, 60%);
223
- --t-fill-color-product-accounts-lighter: hsl(209, 53%, 90%);
224
- --t-fill-color-product-accounts-lightest: hsl(212, 54%, 93%);
225
- --t-fill-color-product-accounts-dark: hsl(210, 65%, 40%);
226
- --t-fill-color-product-accounts-darker: hsl(211, 70%, 32%);
227
- --t-fill-color-product-accounts-darkest: hsl(210, 75%, 25%);
228
- --t-fill-color-product-calendar-base: hsl(9, 61%, 50%);
229
- --t-fill-color-product-calendar-light: hsl(8, 65%, 55%);
230
- --t-fill-color-product-calendar-lighter: hsl(8, 72%, 59%);
231
- --t-fill-color-product-calendar-lightest: hsl(8, 61%, 70%);
232
- --t-fill-color-product-calendar-dark: hsl(8, 65%, 42%);
233
- --t-fill-color-product-calendar-darker: hsl(7, 65%, 34%);
234
- --t-fill-color-product-calendar-darkest: hsl(9, 61%, 27%);
235
- --t-fill-color-product-checkins-base: hsl(283, 22%, 48%);
236
- --t-fill-color-product-checkins-light: hsl(283, 22%, 55%);
237
- --t-fill-color-product-checkins-lighter: hsl(284, 22%, 64%);
238
- --t-fill-color-product-checkins-lightest: hsl(283, 22%, 75%);
239
- --t-fill-color-product-checkins-dark: hsl(283, 27%, 42%);
240
- --t-fill-color-product-checkins-darker: hsl(284, 33%, 34%);
241
- --t-fill-color-product-checkins-darkest: hsl(283, 33%, 27%);
242
- --t-fill-color-product-giving-base: hsl(43, 88%, 64%);
243
- --t-fill-color-product-giving-light: hsl(43, 88%, 70%);
244
- --t-fill-color-product-giving-lighter: hsl(43, 95%, 75%);
245
- --t-fill-color-product-giving-lightest: hsl(42, 95%, 83%);
246
- --t-fill-color-product-giving-dark: hsl(42, 84%, 55%);
247
- --t-fill-color-product-giving-darker: hsl(42, 84%, 48%);
248
- --t-fill-color-product-giving-darkest: hsl(42, 100%, 40%);
249
- --t-fill-color-product-groups-base: hsl(17, 88%, 55%);
250
- --t-fill-color-product-groups-light: hsl(17, 96%, 63%);
251
- --t-fill-color-product-groups-lighter: hsl(17, 96%, 70%);
252
- --t-fill-color-product-groups-lightest: hsl(17, 96%, 80%);
253
- --t-fill-color-product-groups-dark: hsl(12, 70%, 48%);
254
- --t-fill-color-product-groups-darker: hsl(12, 70%, 40%);
255
- --t-fill-color-product-groups-darkest: hsl(14, 70%, 34%);
256
- --t-fill-color-product-home-base: hsl(221, 91%, 55%);
257
- --t-fill-color-product-home-light: hsl(221, 91%, 62%);
258
- --t-fill-color-product-home-lighter: hsl(221, 91%, 87%);
259
- --t-fill-color-product-home-lightest: hsl(221, 91%, 91%);
260
- --t-fill-color-product-home-dark: hsl(221, 90%, 50%);
261
- --t-fill-color-product-home-darker: hsl(221, 90%, 45%);
262
- --t-fill-color-product-home-darkest: hsl(218, 84%, 25%);
263
- --t-fill-color-product-people-base: hsl(220, 74%, 57%);
264
- --t-fill-color-product-people-light: hsl(221, 73%, 65%);
265
- --t-fill-color-product-people-lighter: hsl(221, 73%, 71%);
266
- --t-fill-color-product-people-lightest: hsl(220, 69%, 81%);
267
- --t-fill-color-product-people-dark: hsl(220, 68%, 51%);
268
- --t-fill-color-product-people-darker: hsl(220, 68%, 41%);
269
- --t-fill-color-product-people-darkest: hsl(221, 68%, 31%);
270
- --t-fill-color-product-publishing-base: hsl(220, 12%, 31%);
271
- --t-fill-color-product-publishing-light: hsl(222, 12%, 39%);
272
- --t-fill-color-product-publishing-lighter: hsl(221, 11%, 50%);
273
- --t-fill-color-product-publishing-lightest: hsl(222, 10%, 60%);
274
- --t-fill-color-product-publishing-dark: hsl(220, 11%, 26%);
275
- --t-fill-color-product-publishing-darker: hsl(217, 12%, 22%);
276
- --t-fill-color-product-publishing-darkest: hsl(214, 11%, 12%);
277
- --t-fill-color-product-registrations-base: hsl(175, 36%, 43%);
278
- --t-fill-color-product-registrations-light: hsl(176, 37%, 60%);
279
- --t-fill-color-product-registrations-lighter: hsl(176, 37%, 68%);
280
- --t-fill-color-product-registrations-lightest: hsl(176, 38%, 78%);
281
- --t-fill-color-product-registrations-dark: hsl(175, 51%, 34%);
282
- --t-fill-color-product-registrations-darker: hsl(174, 51%, 28%);
283
- --t-fill-color-product-registrations-darkest: hsl(175, 52%, 22%);
284
- --t-fill-color-product-services-base: hsl(88, 45%, 41%);
285
- --t-fill-color-product-services-light: hsl(88, 40%, 54%);
286
- --t-fill-color-product-services-lighter: hsl(88, 39%, 66%);
287
- --t-fill-color-product-services-lightest: hsl(88, 39%, 75%);
288
- --t-fill-color-product-services-dark: hsl(89, 62%, 32%);
289
- --t-fill-color-product-services-darker: hsl(89, 62%, 26%);
290
- --t-fill-color-product-services-darkest: hsl(89, 63%, 21%);
291
- --t-fill-color-product-staff-base: hsl(328, 100%, 45%);
292
- --t-fill-color-transparency-light-010: hsla(0, 0%, 100%, 0.1);
293
- --t-fill-color-transparency-light-020: hsla(0, 0%, 100%, 0.2);
294
- --t-fill-color-transparency-light-030: hsla(0, 0%, 100%, 0.3);
295
- --t-fill-color-transparency-light-040: hsla(0, 0%, 100%, 0.4);
296
- --t-fill-color-transparency-light-050: hsla(0, 0%, 100%, 0.5);
297
- --t-fill-color-transparency-light-060: hsla(0, 0%, 100%, 0.6);
298
- --t-fill-color-transparency-light-070: hsla(0, 0%, 100%, 0.7);
299
- --t-fill-color-transparency-light-080: hsla(0, 0%, 100%, 0.8);
300
- --t-fill-color-transparency-light-090: hsla(0, 0%, 100%, 0.9);
301
- --t-fill-color-transparency-dark-010: hsla(0, 0%, 0%, 0.1);
302
- --t-fill-color-transparency-dark-020: hsla(0, 0%, 0%, 0.2);
303
- --t-fill-color-transparency-dark-030: hsla(0, 0%, 0%, 0.3);
304
- --t-fill-color-transparency-dark-040: hsla(0, 0%, 0%, 0.4);
305
- --t-fill-color-transparency-dark-050: hsla(0, 0%, 0%, 0.5);
306
- --t-fill-color-transparency-dark-060: hsla(0, 0%, 0%, 0.6);
307
- --t-fill-color-transparency-dark-070: hsla(0, 0%, 0%, 0.7);
308
- --t-fill-color-transparency-dark-080: hsla(0, 0%, 0%, 0.8);
309
- --t-fill-color-transparency-dark-090: hsla(0, 0%, 0%, 0.9);
310
- --t-surface-color-canvas: hsl(0, 0%, 98%);
311
- --t-surface-color-card: hsl(0, 0%, 100%);
312
- --t-border-color-default-base: hsl(0, 0%, 88%);
313
- --t-border-color-default-dark: hsl(0, 0%, 81%);
314
- --t-border-color-default-darker: hsl(0, 0%, 68%);
315
- --t-border-color-default-darkest: hsl(0, 0%, 62%);
316
- --t-border-color-default-disabled: hsl(0, 0%, 88%);
317
- --t-border-color-default-dim: hsl(0, 0%, 95%);
318
- --t-border-color-default-white: hsl(0, 0%, 100%);
319
- --t-border-color-status-neutral: hsl(0, 0%, 62%);
320
- --t-border-color-status-info: hsl(204, 100%, 40%);
321
- --t-border-color-status-success: hsl(97, 57%, 40%);
322
- --t-border-color-status-warning: hsl(42, 84%, 63%);
323
- --t-border-color-status-error: hsl(8, 60%, 47%);
324
- --t-border-color-button-neutral: hsl(0, 0%, 88%);
325
- --t-border-color-button-info: hsl(204, 100%, 40%);
326
- --t-border-color-button-create: hsl(96, 57%, 33%);
327
- --t-border-color-button-delete: hsl(8, 60%, 47%);
328
- --t-border-color-control-neutral: hsl(0, 0%, 68%);
329
- --t-border-color-control-info: hsl(204, 100%, 40%);
330
- --t-border-color-control-success: hsl(97, 57%, 40%);
331
- --t-border-color-control-warning: hsl(42, 84%, 63%);
332
- --t-border-color-control-error: hsl(8, 60%, 47%);
333
- --t-border-color-control-disabled: hsl(0, 0%, 88%);
334
- }
package/src/css/tokens.css DELETED
@@ -1,2 +0,0 @@
1
- @import "tokens-alias.css";
2
- @import "tokens-alias-deprecated.css";
package/src/index.ts DELETED
@@ -1,11 +0,0 @@
1
- export * from "./ts/tokens"
2
-
3
- import { tokens } from "./ts/tokens"
4
-
5
- export function token<T extends keyof typeof tokens>(varName: T) {
6
- return `var(${varName})` as const
7
- }
8
-
9
- export function computedToken<T extends keyof typeof tokens>(varName: T) {
10
- return tokens[varName] as (typeof tokens)[T]
11
- }