@atlaskit/tokens 11.1.0 → 11.2.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 (49) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/codemods/hypermod.config.tsx +3 -0
  3. package/codemods/remove-fallbacks/transform.tsx +24 -0
  4. package/dist/cjs/artifacts/palettes-raw/motion-palette.js +414 -63
  5. package/dist/cjs/artifacts/replacement-mapping.js +51 -3
  6. package/dist/cjs/artifacts/themes/atlassian-motion.js +2 -2
  7. package/dist/cjs/artifacts/token-default-values.js +25 -9
  8. package/dist/cjs/artifacts/token-names.js +19 -3
  9. package/dist/cjs/artifacts/tokens-raw/atlassian-motion.js +527 -47
  10. package/dist/cjs/entry-points/token-metadata.codegen.js +2342 -470
  11. package/dist/cjs/utils/token-usage-guidelines.js +117 -0
  12. package/dist/es2019/artifacts/palettes-raw/motion-palette.js +414 -63
  13. package/dist/es2019/artifacts/replacement-mapping.js +51 -3
  14. package/dist/es2019/artifacts/themes/atlassian-motion.js +119 -15
  15. package/dist/es2019/artifacts/token-default-values.js +25 -9
  16. package/dist/es2019/artifacts/token-names.js +19 -3
  17. package/dist/es2019/artifacts/tokens-raw/atlassian-motion.js +527 -47
  18. package/dist/es2019/entry-points/token-metadata.codegen.js +2342 -470
  19. package/dist/es2019/utils/token-usage-guidelines.js +109 -0
  20. package/dist/esm/artifacts/palettes-raw/motion-palette.js +414 -63
  21. package/dist/esm/artifacts/replacement-mapping.js +51 -3
  22. package/dist/esm/artifacts/themes/atlassian-motion.js +2 -2
  23. package/dist/esm/artifacts/token-default-values.js +25 -9
  24. package/dist/esm/artifacts/token-names.js +19 -3
  25. package/dist/esm/artifacts/tokens-raw/atlassian-motion.js +527 -47
  26. package/dist/esm/entry-points/token-metadata.codegen.js +2342 -470
  27. package/dist/esm/utils/token-usage-guidelines.js +111 -0
  28. package/dist/types/artifacts/palettes-raw/motion-palette.d.ts +5 -3
  29. package/dist/types/artifacts/replacement-mapping.d.ts +1 -1
  30. package/dist/types/artifacts/themes/atlassian-motion.d.ts +2 -2
  31. package/dist/types/artifacts/token-default-values.d.ts +25 -9
  32. package/dist/types/artifacts/token-names.d.ts +37 -5
  33. package/dist/types/artifacts/tokens-raw/atlassian-motion.d.ts +5 -3
  34. package/dist/types/entry-points/css-type-schema.codegen.d.ts +2 -2
  35. package/dist/types/entry-points/token-metadata.codegen.d.ts +6 -2
  36. package/dist/types/types.d.ts +31 -2
  37. package/dist/types/utils/token-usage-guidelines.d.ts +8 -0
  38. package/dist/types-ts4.5/artifacts/palettes-raw/motion-palette.d.ts +5 -3
  39. package/dist/types-ts4.5/artifacts/replacement-mapping.d.ts +1 -1
  40. package/dist/types-ts4.5/artifacts/themes/atlassian-motion.d.ts +2 -2
  41. package/dist/types-ts4.5/artifacts/token-default-values.d.ts +25 -9
  42. package/dist/types-ts4.5/artifacts/token-names.d.ts +37 -5
  43. package/dist/types-ts4.5/artifacts/tokens-raw/atlassian-motion.d.ts +5 -3
  44. package/dist/types-ts4.5/entry-points/css-type-schema.codegen.d.ts +2 -2
  45. package/dist/types-ts4.5/entry-points/token-metadata.codegen.d.ts +6 -2
  46. package/dist/types-ts4.5/types.d.ts +31 -2
  47. package/dist/types-ts4.5/utils/token-usage-guidelines.d.ts +8 -0
  48. package/package.json +12 -11
  49. package/tokens.docs.tsx +52 -0
package/dist/es2019/artifacts/replacement-mapping.js CHANGED
@@ -12,11 +12,20 @@
12
12
  * These changes will then be picked up by our tooling which will attempt to
13
13
  * migrate as many of these renames as possible.
14
14
  *
15
- * @codegen <<SignedSource::71a61fb83f1440f2c7e0c2b84375593c>>
15
+ * @codegen <<SignedSource::e46353a7329c8e87640e1586a2ec2ce7>>
16
16
  * @codegenCommand yarn build tokens
17
17
  */
18
18
 
19
19
  const replacementMapper = [{
20
+ "path": "motion.avatar.enter",
21
+ "state": "experimental"
22
+ }, {
23
+ "path": "motion.avatar.exit",
24
+ "state": "experimental"
25
+ }, {
26
+ "path": "motion.avatar.hovered",
27
+ "state": "experimental"
28
+ }, {
20
29
  "path": "motion.content.enter.long",
21
30
  "state": "experimental"
22
31
  }, {
@@ -35,10 +44,49 @@ const replacementMapper = [{
35
44
  "path": "motion.content.exit.short",
36
45
  "state": "experimental"
37
46
  }, {
38
- "path": "motion.dialog.enter",
47
+ "path": "motion.flag.enter",
48
+ "state": "experimental"
49
+ }, {
50
+ "path": "motion.flag.exit",
51
+ "state": "experimental"
52
+ }, {
53
+ "path": "motion.flag.reposition",
54
+ "state": "experimental"
55
+ }, {
56
+ "path": "motion.modal.enter",
57
+ "state": "experimental"
58
+ }, {
59
+ "path": "motion.modal.exit",
60
+ "state": "experimental"
61
+ }, {
62
+ "path": "motion.popup.enter.bottom",
63
+ "state": "experimental"
64
+ }, {
65
+ "path": "motion.popup.enter.left",
66
+ "state": "experimental"
67
+ }, {
68
+ "path": "motion.popup.enter.right",
69
+ "state": "experimental"
70
+ }, {
71
+ "path": "motion.popup.enter.top",
72
+ "state": "experimental"
73
+ }, {
74
+ "path": "motion.popup.exit.bottom",
75
+ "state": "experimental"
76
+ }, {
77
+ "path": "motion.popup.exit.left",
78
+ "state": "experimental"
79
+ }, {
80
+ "path": "motion.popup.exit.right",
81
+ "state": "experimental"
82
+ }, {
83
+ "path": "motion.popup.exit.top",
84
+ "state": "experimental"
85
+ }, {
86
+ "path": "motion.spotlight.enter",
39
87
  "state": "experimental"
40
88
  }, {
41
- "path": "motion.dialog.exit",
89
+ "path": "motion.spotlight.exit",
42
90
  "state": "experimental"
43
91
  }, {
44
92
  "path": "font.body.UNSAFE_small",
package/dist/es2019/artifacts/themes/atlassian-motion.js CHANGED
@@ -1,9 +1,73 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::d9cba7f2a25f65f78c6ad172ff6364ce>>
3
+ * @codegen <<SignedSource::335cdc677cad1d4b1fd602ac8f261e85>>
4
4
  * @codegenCommand yarn build tokens
5
5
  */
6
6
  export default `
7
+ @keyframes SlideInTop {
8
+ 0% {
9
+ transform: translateY(8px);
10
+ }
11
+ 100% {
12
+ transform: translateY(0px);
13
+ }
14
+ }
15
+ @keyframes SlideInBottom {
16
+ 0% {
17
+ transform: translateY(-8px);
18
+ }
19
+ 100% {
20
+ transform: translateY(0px);
21
+ }
22
+ }
23
+ @keyframes SlideInLeft {
24
+ 0% {
25
+ transform: translateX(8px);
26
+ }
27
+ 100% {
28
+ transform: translateX(0px);
29
+ }
30
+ }
31
+ @keyframes SlideInRight {
32
+ 0% {
33
+ transform: translateX(-8px);
34
+ }
35
+ 100% {
36
+ transform: translateX(0px);
37
+ }
38
+ }
39
+ @keyframes SlideOutTop {
40
+ 0% {
41
+ transform: translateY(0px);
42
+ }
43
+ 100% {
44
+ transform: translateY(4px);
45
+ }
46
+ }
47
+ @keyframes SlideOutBottom {
48
+ 0% {
49
+ transform: translateY(0px);
50
+ }
51
+ 100% {
52
+ transform: translateY(-4px);
53
+ }
54
+ }
55
+ @keyframes SlideOutLeft {
56
+ 0% {
57
+ transform: translateX(0px);
58
+ }
59
+ 100% {
60
+ transform: translateX(4px);
61
+ }
62
+ }
63
+ @keyframes SlideOutRight {
64
+ 0% {
65
+ transform: translateX(0px);
66
+ }
67
+ 100% {
68
+ transform: translateX(-4px);
69
+ }
70
+ }
7
71
  @keyframes ScaleIn80 {
8
72
  0% {
9
73
  transform: scale(0.8);
@@ -84,30 +148,70 @@ export default `
84
148
  opacity: 0;
85
149
  }
86
150
  }
87
- @keyframes RotateIn {
151
+ @keyframes SlideIn15PercentLeft {
152
+ 0% {
153
+ transform: translateX(-15%);
154
+ transform-origin: left;
155
+ }
156
+ 100% {
157
+ transform: translateX(0px);
158
+ transform-origin: left;
159
+ }
160
+ }
161
+ @keyframes SlideOut15PercentLeft {
162
+ 0% {
163
+ transform: translateX(0px);
164
+ transform-origin: left;
165
+ }
166
+ 100% {
167
+ transform: translateX(-15%);
168
+ transform-origin: left;
169
+ }
170
+ }
171
+ @keyframes SlideIn50PercentLeft {
88
172
  0% {
89
- transform: rotate(0deg);
173
+ transform: translateX(-50%);
174
+ transform-origin: left;
90
175
  }
91
176
  100% {
92
- transform: rotate(5deg);
177
+ transform: translateX(0px);
178
+ transform-origin: left;
93
179
  }
94
180
  }
95
- @keyframes RotateOut {
181
+ @keyframes SlideOut50PercentLeft {
96
182
  0% {
97
- transform: rotate(5deg);
183
+ transform: translateX(0px);
184
+ transform-origin: left;
98
185
  }
99
186
  100% {
100
- transform: rotate(0deg);
187
+ transform: translateX(-50%);
188
+ transform-origin: left;
101
189
  }
102
190
  }
103
191
  html[data-theme~="motion:motion"], [data-subtree-theme][data-theme~="motion:motion"] {
104
- --ds-content-enter-long: 400ms cubic-bezier(0.66, 0, 0.34, 1) FadeIn;
105
- --ds-content-enter-medium: 200ms cubic-bezier(0.66, 0, 0.34, 1) FadeIn;
106
- --ds-content-enter-short: 100ms cubic-bezier(0.66, 0, 0.34, 1) FadeIn;
107
- --ds-content-exit-long: 200ms cubic-bezier(0.66, 0, 0.34, 1) FadeOut;
108
- --ds-content-exit-medium: 100ms cubic-bezier(0.66, 0, 0.34, 1) FadeOut;
109
- --ds-content-exit-short: 50ms cubic-bezier(0.66, 0, 0.34, 1) FadeOut;
110
- --ds-dialog-enter: 350ms cubic-bezier(0.66, 0, 0.34, 1) ScaleIn80, 350ms cubic-bezier(0.66, 0, 0.34, 1) FadeIn;
111
- --ds-dialog-exit: 350ms cubic-bezier(0.66, 0, 0.34, 1) ScaleOut80, 350ms cubic-bezier(0.66, 0, 0.34, 1) FadeOut;
192
+ --ds-avatar-enter: 150ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleIn80, 150ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeIn;
193
+ --ds-avatar-exit: 100ms cubic-bezier(0.32, 0, 0.67, 0) ScaleOut80, 100ms cubic-bezier(0.32, 0, 0.67, 0) FadeOut;
194
+ --ds-avatar-hovered: transform 100ms cubic-bezier(0.32, 0, 0.67, 0);
195
+ --ds-content-enter-long: 400ms cubic-bezier(0.4, 0, 0, 1) FadeIn;
196
+ --ds-content-enter-medium: 200ms cubic-bezier(0.4, 0, 0, 1) FadeIn;
197
+ --ds-content-enter-short: 100ms cubic-bezier(0.4, 0, 0, 1) FadeIn;
198
+ --ds-content-exit-long: 200ms cubic-bezier(0.4, 0, 0, 1) FadeOut;
199
+ --ds-content-exit-medium: 100ms cubic-bezier(0.4, 0, 0, 1) FadeOut;
200
+ --ds-content-exit-short: 50ms cubic-bezier(0.4, 0, 0, 1) FadeOut;
201
+ --ds-flag-enter: 250ms cubic-bezier(0, 0.4, 0, 1) SlideIn50PercentLeft, 250ms cubic-bezier(0, 0.4, 0, 1) FadeIn;
202
+ --ds-flag-exit: 200ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOut15PercentLeft, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut;
203
+ --ds-flag-reposition: transform 300ms cubic-bezier(0.4, 0, 0, 1);
204
+ --ds-modal-enter: 200ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95, 200ms cubic-bezier(0.4, 0, 0, 1) FadeIn;
205
+ --ds-modal-exit: 200ms cubic-bezier(0.4, 1, 0.6, 1) ScaleOut95, 200ms cubic-bezier(0.4, 1, 0.6, 1) FadeOut;
206
+ --ds-popup-enter-bottom: 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn;
207
+ --ds-popup-enter-left: 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn;
208
+ --ds-popup-enter-right: 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn;
209
+ --ds-popup-enter-top: 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn;
210
+ --ds-popup-exit-bottom: 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut;
211
+ --ds-popup-exit-left: 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut;
212
+ --ds-popup-exit-right: 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut;
213
+ --ds-popup-exit-top: 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut;
214
+ --ds-spotlight-enter: 250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95, 250ms cubic-bezier(0.4, 0, 0, 1) FadeIn;
215
+ --ds-spotlight-exit: 200ms cubic-bezier(0.4, 1, 0.6, 1) ScaleOut95, 200ms cubic-bezier(0.4, 1, 0.6, 1) FadeOut;
112
216
  }
113
217
  `;
package/dist/es2019/artifacts/token-default-values.js CHANGED
@@ -7,18 +7,34 @@
7
7
  * Token names mapped to their value in the default Atlassian themes ('light').
8
8
  * These default values are used by the Babel plugin to optionally provide automatic fallbacks.
9
9
  *
10
- * @codegen <<SignedSource::a18a0cf6bb63fbd882dcfe06ef046047>>
10
+ * @codegen <<SignedSource::c8dea3807fda6392faffb7299b6ecb9a>>
11
11
  * @codegenCommand yarn build tokens
12
12
  */
13
13
  const defaultTokenValues = {
14
- 'motion.content.enter.long': '400ms cubic-bezier(0.66, 0, 0.34, 1) FadeIn',
15
- 'motion.content.enter.medium': '200ms cubic-bezier(0.66, 0, 0.34, 1) FadeIn',
16
- 'motion.content.enter.short': '100ms cubic-bezier(0.66, 0, 0.34, 1) FadeIn',
17
- 'motion.content.exit.long': '200ms cubic-bezier(0.66, 0, 0.34, 1) FadeOut',
18
- 'motion.content.exit.medium': '100ms cubic-bezier(0.66, 0, 0.34, 1) FadeOut',
19
- 'motion.content.exit.short': '50ms cubic-bezier(0.66, 0, 0.34, 1) FadeOut',
20
- 'motion.dialog.enter': '350ms cubic-bezier(0.66, 0, 0.34, 1) ScaleIn80, 350ms cubic-bezier(0.66, 0, 0.34, 1) FadeIn',
21
- 'motion.dialog.exit': '350ms cubic-bezier(0.66, 0, 0.34, 1) ScaleOut80, 350ms cubic-bezier(0.66, 0, 0.34, 1) FadeOut',
14
+ 'motion.avatar.enter': '150ms cubic-bezier(0.6, 0, 0.8, 0.6) ScaleIn80, 150ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeIn',
15
+ 'motion.avatar.exit': '100ms cubic-bezier(0.32, 0, 0.67, 0) ScaleOut80, 100ms cubic-bezier(0.32, 0, 0.67, 0) FadeOut',
16
+ 'motion.avatar.hovered': 'transform 100ms cubic-bezier(0.32, 0, 0.67, 0)',
17
+ 'motion.content.enter.long': '400ms cubic-bezier(0.4, 0, 0, 1) FadeIn',
18
+ 'motion.content.enter.medium': '200ms cubic-bezier(0.4, 0, 0, 1) FadeIn',
19
+ 'motion.content.enter.short': '100ms cubic-bezier(0.4, 0, 0, 1) FadeIn',
20
+ 'motion.content.exit.long': '200ms cubic-bezier(0.4, 0, 0, 1) FadeOut',
21
+ 'motion.content.exit.medium': '100ms cubic-bezier(0.4, 0, 0, 1) FadeOut',
22
+ 'motion.content.exit.short': '50ms cubic-bezier(0.4, 0, 0, 1) FadeOut',
23
+ 'motion.flag.enter': '250ms cubic-bezier(0, 0.4, 0, 1) SlideIn50PercentLeft, 250ms cubic-bezier(0, 0.4, 0, 1) FadeIn',
24
+ 'motion.flag.exit': '200ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOut15PercentLeft, 200ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut',
25
+ 'motion.flag.reposition': 'transform 300ms cubic-bezier(0.4, 0, 0, 1)',
26
+ 'motion.modal.enter': '200ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95, 200ms cubic-bezier(0.4, 0, 0, 1) FadeIn',
27
+ 'motion.modal.exit': '200ms cubic-bezier(0.4, 1, 0.6, 1) ScaleOut95, 200ms cubic-bezier(0.4, 1, 0.6, 1) FadeOut',
28
+ 'motion.popup.enter.bottom': '150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn',
29
+ 'motion.popup.enter.left': '150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn',
30
+ 'motion.popup.enter.right': '150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn',
31
+ 'motion.popup.enter.top': '150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn',
32
+ 'motion.popup.exit.bottom': '100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut',
33
+ 'motion.popup.exit.left': '100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut',
34
+ 'motion.popup.exit.right': '100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut',
35
+ 'motion.popup.exit.top': '100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut',
36
+ 'motion.spotlight.enter': '250ms cubic-bezier(0.4, 0, 0, 1) ScaleIn95, 250ms cubic-bezier(0.4, 0, 0, 1) FadeIn',
37
+ 'motion.spotlight.exit': '200ms cubic-bezier(0.4, 1, 0.6, 1) ScaleOut95, 200ms cubic-bezier(0.4, 1, 0.6, 1) FadeOut',
22
38
  'color.text': '#292A2E',
23
39
  'color.text.accent.lime': '#4C6B1F',
24
40
  'color.text.accent.lime.bolder': '#37471F',
package/dist/es2019/artifacts/token-names.js CHANGED
@@ -1,17 +1,33 @@
1
1
  /**
2
2
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
3
- * @codegen <<SignedSource::f76d5451a0ccdab4ce74bc3e952aec8c>>
3
+ * @codegen <<SignedSource::921c184d9a6e3b52bd2ab053939ce9ad>>
4
4
  * @codegenCommand yarn build tokens
5
5
  */
6
6
  const tokens = {
7
+ 'motion.avatar.enter': '--ds-avatar-enter',
8
+ 'motion.avatar.exit': '--ds-avatar-exit',
9
+ 'motion.avatar.hovered': '--ds-avatar-hovered',
7
10
  'motion.content.enter.long': '--ds-content-enter-long',
8
11
  'motion.content.enter.medium': '--ds-content-enter-medium',
9
12
  'motion.content.enter.short': '--ds-content-enter-short',
10
13
  'motion.content.exit.long': '--ds-content-exit-long',
11
14
  'motion.content.exit.medium': '--ds-content-exit-medium',
12
15
  'motion.content.exit.short': '--ds-content-exit-short',
13
- 'motion.dialog.enter': '--ds-dialog-enter',
14
- 'motion.dialog.exit': '--ds-dialog-exit',
16
+ 'motion.flag.enter': '--ds-flag-enter',
17
+ 'motion.flag.exit': '--ds-flag-exit',
18
+ 'motion.flag.reposition': '--ds-flag-reposition',
19
+ 'motion.modal.enter': '--ds-modal-enter',
20
+ 'motion.modal.exit': '--ds-modal-exit',
21
+ 'motion.popup.enter.bottom': '--ds-popup-enter-bottom',
22
+ 'motion.popup.enter.left': '--ds-popup-enter-left',
23
+ 'motion.popup.enter.right': '--ds-popup-enter-right',
24
+ 'motion.popup.enter.top': '--ds-popup-enter-top',
25
+ 'motion.popup.exit.bottom': '--ds-popup-exit-bottom',
26
+ 'motion.popup.exit.left': '--ds-popup-exit-left',
27
+ 'motion.popup.exit.right': '--ds-popup-exit-right',
28
+ 'motion.popup.exit.top': '--ds-popup-exit-top',
29
+ 'motion.spotlight.enter': '--ds-spotlight-enter',
30
+ 'motion.spotlight.exit': '--ds-spotlight-exit',
15
31
  'color.text': '--ds-text',
16
32
  'color.text.accent.lime': '--ds-text-accent-lime',
17
33
  'color.text.accent.lime.bolder': '--ds-text-accent-lime-bolder',