@knapsack/sandbox-tokens 4.54.10--canary.9c0b1fe.0 → 4.54.11--canary.88a6a4e.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (19) hide show
  1. package/.turbo/turbo-build.log +1 -1
  2. package/CHANGELOG.md +37 -0
  3. package/dist/design-tokens.cjs +39 -13
  4. package/dist/design-tokens.collections.css +87 -31
  5. package/dist/design-tokens.css +35 -13
  6. package/dist/design-tokens.css.scss +35 -13
  7. package/dist/design-tokens.d.cts +39 -13
  8. package/dist/design-tokens.d.mts +39 -13
  9. package/dist/design-tokens.d.ts +39 -13
  10. package/dist/design-tokens.js +39 -13
  11. package/dist/design-tokens.json +35 -13
  12. package/dist/design-tokens.less +35 -13
  13. package/dist/design-tokens.mjs +39 -13
  14. package/dist/design-tokens.nested.json +45 -15
  15. package/dist/design-tokens.scss +80 -28
  16. package/dist/design-tokens.style-dictionary.json +219 -38
  17. package/dist/design-tokens.w3c-spec.json +219 -38
  18. package/package.json +4 -4
  19. package/src/knapsack.design-tokens.json +219 -38
package/.turbo/turbo-build.log CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- > @knapsack/sandbox-tokens@4.54.9 build /home/runner/work/app-monorepo/app-monorepo/apps/ui/libs/sandbox-tokens
2
+ > @knapsack/sandbox-tokens@4.54.10 build /home/runner/work/app-monorepo/app-monorepo/apps/ui/libs/sandbox-tokens
3
3
  > knapsack build:tokens
4
4
 
5
5
  info Wrote design tokens to "dist"
package/CHANGELOG.md CHANGED
@@ -1,3 +1,40 @@
1
+ # v4.54.10 (Thu May 23 2024)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - Merge branch 'latest' into feature/ksp-5105-improve-template-suggestion-labels-in-pattern-form ([@GormanDesign](https://github.com/GormanDesign))
6
+ - Merge branch 'latest' into feature/ksp-5103-clean-up-add-pattern-form ([@GormanDesign](https://github.com/GormanDesign))
7
+ - Merge branch 'feature/ksp-5090-sandbox-components-update-styling-and-theming' into update-card-component ([@mabry1985](https://github.com/mabry1985))
8
+ - Merge branch 'feature/ksp-4994-update-ks-sandbox-components' into feature/ksp-5090-sandbox-components-update-styling-and-theming ([@mabry1985](https://github.com/mabry1985))
9
+ - Merge branch 'latest' into feature/ksp-4994-update-ks-sandbox-components ([@mabry1985](https://github.com/mabry1985))
10
+ - update button styling ([@mabry1985](https://github.com/mabry1985))
11
+ - update hero styles ([@mabry1985](https://github.com/mabry1985))
12
+ - update to use shadow-1 ([@mabry1985](https://github.com/mabry1985))
13
+ - add card shadow token and css ([@mabry1985](https://github.com/mabry1985))
14
+ - Merge branch 'feature/ksp-5053-update-figma-parsing-logic-to-manage-string-properties' into feature/ksp-4994-update-ks-sandbox-components ([@mabry1985](https://github.com/mabry1985))
15
+ - Merge branch 'latest' into feature/ksp-5053-update-figma-parsing-logic-to-manage-string-properties ([@EvanLovely](https://github.com/EvanLovely))
16
+ - Merge branch 'feature/ksp-5013-ui-logic-to-import-simple-frame-to-demo' into feature/ksp-5053-update-figma-parsing-logic-to-manage-string-properties ([@mabry1985](https://github.com/mabry1985))
17
+ - Merge branch 'latest' into feature/ksp-5013-ui-logic-to-import-simple-frame-to-demo ([@mabry1985](https://github.com/mabry1985))
18
+
19
+ #### 🏠 Internal
20
+
21
+ - KSP-5100: var-refs in tokens collections UI [#4175](https://github.com/knapsack-labs/app-monorepo/pull/4175) ([@illepic](https://github.com/illepic))
22
+ - improve template suggestion labels in pattern form [#4154](https://github.com/knapsack-labs/app-monorepo/pull/4154) ([@GormanDesign](https://github.com/GormanDesign))
23
+ - Update node types to 20.11.30 [#4171](https://github.com/knapsack-labs/app-monorepo/pull/4171) ([@greylabel](https://github.com/greylabel))
24
+ - update sandbox components [#4081](https://github.com/knapsack-labs/app-monorepo/pull/4081) ([@mabry1985](https://github.com/mabry1985) [@EvanLovely](https://github.com/EvanLovely))
25
+ - update styling for sandbox components [#4134](https://github.com/knapsack-labs/app-monorepo/pull/4134) ([@mabry1985](https://github.com/mabry1985))
26
+ - adds logic for disallowing intercom in workspaces [#4137](https://github.com/knapsack-labs/app-monorepo/pull/4137) ([@mabry1985](https://github.com/mabry1985))
27
+
28
+ #### Authors: 5
29
+
30
+ - Christopher Bloom ([@illepic](https://github.com/illepic))
31
+ - Evan Lovely ([@EvanLovely](https://github.com/EvanLovely))
32
+ - Grant Gaudet ([@greylabel](https://github.com/greylabel))
33
+ - Josh Mabry ([@mabry1985](https://github.com/mabry1985))
34
+ - Matt Gorman ([@GormanDesign](https://github.com/GormanDesign))
35
+
36
+ ---
37
+
1
38
  # v4.54.9 (Tue May 21 2024)
2
39
 
3
40
  #### 🏠 Internal
package/dist/design-tokens.cjs CHANGED
@@ -74,20 +74,46 @@ module.exports = {
74
74
  collectionsTestingTestSecondaryBrandBDark: '#ACAAB6',
75
75
  colorNeutral300: '#EDECEF',
76
76
  collectionsTestingTestSecondaryBrandBLight: '#EDECEF',
77
- sandboxColorBrand: '#7A34ED',
78
- collectionsThemeActionBaseDark: '#7A34ED',
79
- collectionsThemeActionBaseLight: '#7A34ED',
77
+ collectionsTestingTestTertiaryBrandALight: '#000000',
78
+ collectionsTestingTestTertiaryBrandBDark: '#000000',
79
+ collectionsTestingTestTertiaryBrandBLight: '#000000',
80
80
  sandboxColorWhite: '#ffffff',
81
- collectionsThemeActionTextDark: '#ffffff',
82
- collectionsThemeActionTextLight: '#ffffff',
83
- collectionsThemeBackgroundContentDark: '#3B3644',
84
- collectionsThemeBackgroundContentLight: '#FFFFFF',
85
- collectionsThemeBackgroundPageDark: '#1F1C25',
86
- collectionsThemeBackgroundPageLight: '#FDFCFE',
87
- collectionsThemeTextBaseDark: '#F6F8FF',
88
- collectionsThemeTextBaseLight: '#191F2C',
89
- collectionsThemeTextSubtleDark: '#BEC3D3',
90
- collectionsThemeTextSubtleLight: '#6E7A82',
81
+ collectionsThemeActionTextArcadiaDark: '#ffffff',
82
+ collectionsThemeActionTextArcadiaLight: '#ffffff',
83
+ collectionsThemeActionTextBasisDark: '#ffffff',
84
+ collectionsThemeActionTextBasisLight: '#ffffff',
85
+ collectionsThemeBackgroundContentArcadiaDark: '#3B3644',
86
+ collectionsThemeBackgroundContentArcadiaLight: '#FFFFFF',
87
+ collectionsThemeBackgroundContentBasisDark: '#3B3644',
88
+ collectionsThemeBackgroundContentBasisLight: '#FFFFFF',
89
+ collectionsThemeBackgroundPageArcadiaDark: '#1F1C25',
90
+ collectionsThemeBackgroundPageArcadiaLight: '#FDFCFE',
91
+ collectionsThemeBackgroundPageBasisDark: '#1F1C25',
92
+ collectionsThemeBackgroundPageBasisLight: '#FDFCFE',
93
+ collectionsThemeBrandColorArcadiaDark: '#7A34ED',
94
+ collectionsThemeBrandColorArcadiaLight: '#7A34ED',
95
+ collectionsThemeBrandColorBasisDark: '#ED7734',
96
+ collectionsThemeBrandColorBasisLight: '#ED7734',
97
+ collectionsThemeBrandFontFamilyArcadiaDark: 'Inter',
98
+ collectionsThemeBrandFontFamilyArcadiaLight: 'Inter',
99
+ collectionsThemeBrandFontFamilyBasisDark: 'Merriweather',
100
+ collectionsThemeBrandFontFamilyBasisLight: 'Merriweather',
101
+ collectionsThemeBrandLogoArcadiaDark:
102
+ "url('https://knapsack.imgix.net/site/ks-sandbox/logo-arcadia-4id5a3sy3ysvg')",
103
+ collectionsThemeBrandLogoArcadiaLight:
104
+ "url('https://knapsack.imgix.net/site/ks-sandbox/logo-arcadia-4id5a3sy3ysvg')",
105
+ collectionsThemeBrandLogoBasisDark:
106
+ "url('https://knapsack.imgix.net/site/ks-sandbox/logo-basis-34vzcamdqxpng')",
107
+ collectionsThemeBrandLogoBasisLight:
108
+ "url('https://knapsack.imgix.net/site/ks-sandbox/logo-basis-34vzcamdqxpng')",
109
+ collectionsThemeTextBaseArcadiaDark: '#F6F8FF',
110
+ collectionsThemeTextBaseArcadiaLight: '#191F2C',
111
+ collectionsThemeTextBaseBasisDark: '#F6F8FF',
112
+ collectionsThemeTextBaseBasisLight: '#191F2C',
113
+ collectionsThemeTextSubtleArcadiaDark: '#BEC3D3',
114
+ collectionsThemeTextSubtleArcadiaLight: '#6E7A82',
115
+ collectionsThemeTextSubtleBasisDark: '#BEC3D3',
116
+ collectionsThemeTextSubtleBasisLight: '#6E7A82',
91
117
  colorNeutral800: '#191335',
92
118
  colorBlack: '#191335',
93
119
  colorWhite: '#ffffff',
package/dist/design-tokens.collections.css CHANGED
@@ -63,18 +63,41 @@
63
63
  --collections-testing-test-secondary-brand-a-light: #cc2020;
64
64
  --collections-testing-test-secondary-brand-b-dark: var(--color-neutral-600);
65
65
  --collections-testing-test-secondary-brand-b-light: var(--color-neutral-300);
66
- --collections-theme-action-base-dark: var(--sandbox-color-brand);
67
- --collections-theme-action-base-light: var(--sandbox-color-brand);
68
- --collections-theme-action-text-dark: var(--sandbox-color-white);
69
- --collections-theme-action-text-light: var(--sandbox-color-white);
70
- --collections-theme-background-content-dark: #3b3644;
71
- --collections-theme-background-content-light: #ffffff;
72
- --collections-theme-background-page-dark: #1f1c25;
73
- --collections-theme-background-page-light: #fdfcfe;
74
- --collections-theme-text-base-dark: #f6f8ff;
75
- --collections-theme-text-base-light: #191f2c;
76
- --collections-theme-text-subtle-dark: #bec3d3;
77
- --collections-theme-text-subtle-light: #6e7a82;
66
+ --collections-testing-test-tertiary-brand-a-light: #000000;
67
+ --collections-testing-test-tertiary-brand-b-dark: #000000;
68
+ --collections-testing-test-tertiary-brand-b-light: #000000;
69
+ --collections-theme-action-text-arcadia-dark: var(--sandbox-color-white);
70
+ --collections-theme-action-text-arcadia-light: var(--sandbox-color-white);
71
+ --collections-theme-action-text-basis-dark: var(--sandbox-color-white);
72
+ --collections-theme-action-text-basis-light: var(--sandbox-color-white);
73
+ --collections-theme-background-content-arcadia-dark: #3b3644;
74
+ --collections-theme-background-content-arcadia-light: #ffffff;
75
+ --collections-theme-background-content-basis-dark: #3b3644;
76
+ --collections-theme-background-content-basis-light: #ffffff;
77
+ --collections-theme-background-page-arcadia-dark: #1f1c25;
78
+ --collections-theme-background-page-arcadia-light: #fdfcfe;
79
+ --collections-theme-background-page-basis-dark: #1f1c25;
80
+ --collections-theme-background-page-basis-light: #fdfcfe;
81
+ --collections-theme-brand-color-arcadia-dark: #7a34ed;
82
+ --collections-theme-brand-color-arcadia-light: #7a34ed;
83
+ --collections-theme-brand-color-basis-dark: #ed7734;
84
+ --collections-theme-brand-color-basis-light: #ed7734;
85
+ --collections-theme-brand-font-family-arcadia-dark: Inter;
86
+ --collections-theme-brand-font-family-arcadia-light: Inter;
87
+ --collections-theme-brand-font-family-basis-dark: Merriweather;
88
+ --collections-theme-brand-font-family-basis-light: Merriweather;
89
+ --collections-theme-brand-logo-arcadia-dark: url('https://knapsack.imgix.net/site/ks-sandbox/logo-arcadia-4id5a3sy3ysvg');
90
+ --collections-theme-brand-logo-arcadia-light: url('https://knapsack.imgix.net/site/ks-sandbox/logo-arcadia-4id5a3sy3ysvg');
91
+ --collections-theme-brand-logo-basis-dark: url('https://knapsack.imgix.net/site/ks-sandbox/logo-basis-34vzcamdqxpng');
92
+ --collections-theme-brand-logo-basis-light: url('https://knapsack.imgix.net/site/ks-sandbox/logo-basis-34vzcamdqxpng');
93
+ --collections-theme-text-base-arcadia-dark: #f6f8ff;
94
+ --collections-theme-text-base-arcadia-light: #191f2c;
95
+ --collections-theme-text-base-basis-dark: #f6f8ff;
96
+ --collections-theme-text-base-basis-light: #191f2c;
97
+ --collections-theme-text-subtle-arcadia-dark: #bec3d3;
98
+ --collections-theme-text-subtle-arcadia-light: #6e7a82;
99
+ --collections-theme-text-subtle-basis-dark: #bec3d3;
100
+ --collections-theme-text-subtle-basis-light: #6e7a82;
78
101
  --color-black: var(--color-neutral-800);
79
102
  --color-white: #ffffff;
80
103
  --color-neutral-100: #fafafb;
@@ -122,7 +145,6 @@
122
145
  --radius-medium: 8px;
123
146
  --radius-round: 160px;
124
147
  --radius-small: 4px;
125
- --sandbox-color-brand: #7a34ed;
126
148
  --sandbox-color-error: #ff5c46;
127
149
  --sandbox-color-success: #6bc313;
128
150
  --sandbox-color-warning: #fab120;
@@ -188,8 +210,8 @@
188
210
  --color-secondary: var(--collections-testing-color-secondary-brand-a-light);
189
211
  --foo-bar: var(--collections-testing-foo-bar-brand-a-light);
190
212
  --test-dimension: var(--collections-testing-test-dimension-brand-a-light);
191
- --test-primary: var(--collections-testing-test-primary-brand-a-light);
192
213
  --test-secondary: var(--collections-testing-test-secondary-brand-a-light);
214
+ --test-tertiary: var(--collections-testing-test-tertiary-brand-a-light);
193
215
  }
194
216
 
195
217
  [data-collections-testing='brandADark'] {
@@ -202,8 +224,8 @@
202
224
  --color-secondary: var(--collections-testing-color-secondary-brand-a-dark);
203
225
  --foo-bar: var(--collections-testing-foo-bar-brand-a-dark);
204
226
  --test-dimension: var(--collections-testing-test-dimension-brand-a-dark);
205
- --test-primary: var(--collections-testing-test-primary-brand-a-dark);
206
227
  --test-secondary: var(--collections-testing-test-secondary-brand-a-dark);
228
+ --test-tertiary: var(--collections-testing-test-secondary);
207
229
  }
208
230
 
209
231
  [data-collections-testing='brandBLight'] {
@@ -216,8 +238,8 @@
216
238
  --color-secondary: var(--collections-testing-color-secondary-brand-b-light);
217
239
  --foo-bar: var(--collections-testing-foo-bar-brand-b-light);
218
240
  --test-dimension: var(--collections-testing-test-dimension-brand-b-light);
219
- --test-primary: var(--collections-testing-test-primary-brand-b-light);
220
241
  --test-secondary: var(--collections-testing-test-secondary-brand-b-light);
242
+ --test-tertiary: var(--collections-testing-test-tertiary-brand-b-light);
221
243
  }
222
244
 
223
245
  [data-collections-testing='brandBDark'] {
@@ -230,25 +252,59 @@
230
252
  --color-secondary: var(--collections-testing-color-secondary-brand-b-dark);
231
253
  --foo-bar: var(--collections-testing-foo-bar-brand-b-dark);
232
254
  --test-dimension: var(--collections-testing-test-dimension-brand-b-dark);
233
- --test-primary: var(--collections-testing-test-primary-brand-b-dark);
234
255
  --test-secondary: var(--collections-testing-test-secondary-brand-b-dark);
256
+ --test-tertiary: var(--collections-testing-test-tertiary-brand-b-dark);
235
257
  }
236
258
 
237
259
  :root,
238
- [data-collections-theme='light'] {
239
- --action-base: var(--collections-theme-action-base-light);
240
- --action-text: var(--collections-theme-action-text-light);
241
- --background-content: var(--collections-theme-background-content-light);
242
- --background-page: var(--collections-theme-background-page-light);
243
- --text-base: var(--collections-theme-text-base-light);
244
- --text-subtle: var(--collections-theme-text-subtle-light);
260
+ [data-collections-theme='arcadiaLight'] {
261
+ --action-base: var(--collections-theme-brand-color);
262
+ --action-text: var(--collections-theme-action-text-arcadia-light);
263
+ --background-content: var(
264
+ --collections-theme-background-content-arcadia-light
265
+ );
266
+ --background-page: var(--collections-theme-background-page-arcadia-light);
267
+ --brand-color: var(--collections-theme-brand-color-arcadia-light);
268
+ --brand-font-family: var(--collections-theme-brand-font-family-arcadia-light);
269
+ --brand-logo: var(--collections-theme-brand-logo-arcadia-light);
270
+ --text-base: var(--collections-theme-text-base-arcadia-light);
271
+ --text-subtle: var(--collections-theme-text-subtle-arcadia-light);
272
+ }
273
+
274
+ [data-collections-theme='arcadiaDark'] {
275
+ --action-base: var(--collections-theme-brand-color);
276
+ --action-text: var(--collections-theme-action-text-arcadia-dark);
277
+ --background-content: var(
278
+ --collections-theme-background-content-arcadia-dark
279
+ );
280
+ --background-page: var(--collections-theme-background-page-arcadia-dark);
281
+ --brand-color: var(--collections-theme-brand-color-arcadia-dark);
282
+ --brand-font-family: var(--collections-theme-brand-font-family-arcadia-dark);
283
+ --brand-logo: var(--collections-theme-brand-logo-arcadia-dark);
284
+ --text-base: var(--collections-theme-text-base-arcadia-dark);
285
+ --text-subtle: var(--collections-theme-text-subtle-arcadia-dark);
286
+ }
287
+
288
+ [data-collections-theme='basisLight'] {
289
+ --action-base: var(--collections-theme-brand-color);
290
+ --action-text: var(--collections-theme-action-text-basis-light);
291
+ --background-content: var(--collections-theme-background-content-basis-light);
292
+ --background-page: var(--collections-theme-background-page-basis-light);
293
+ --brand-color: var(--collections-theme-brand-color-basis-light);
294
+ --brand-font-family: var(--collections-theme-brand-font-family-basis-light);
295
+ --brand-logo: var(--collections-theme-brand-logo-basis-light);
296
+ --text-base: var(--collections-theme-text-base-basis-light);
297
+ --text-subtle: var(--collections-theme-text-subtle-basis-light);
245
298
  }
246
299
 
247
- [data-collections-theme='dark'] {
248
- --action-base: var(--collections-theme-action-base-dark);
249
- --action-text: var(--collections-theme-action-text-dark);
250
- --background-content: var(--collections-theme-background-content-dark);
251
- --background-page: var(--collections-theme-background-page-dark);
252
- --text-base: var(--collections-theme-text-base-dark);
253
- --text-subtle: var(--collections-theme-text-subtle-dark);
300
+ [data-collections-theme='basisDark'] {
301
+ --action-base: var(--collections-theme-brand-color);
302
+ --action-text: var(--collections-theme-action-text-basis-dark);
303
+ --background-content: var(--collections-theme-background-content-basis-dark);
304
+ --background-page: var(--collections-theme-background-page-basis-dark);
305
+ --brand-color: var(--collections-theme-brand-color-basis-dark);
306
+ --brand-font-family: var(--collections-theme-brand-font-family-basis-dark);
307
+ --brand-logo: var(--collections-theme-brand-logo-basis-dark);
308
+ --text-base: var(--collections-theme-text-base-basis-dark);
309
+ --text-subtle: var(--collections-theme-text-subtle-basis-dark);
254
310
  }
package/dist/design-tokens.css CHANGED
@@ -63,18 +63,41 @@
63
63
  --collections-testing-test-secondary-brand-a-light: #cc2020;
64
64
  --collections-testing-test-secondary-brand-b-dark: var(--color-neutral-600);
65
65
  --collections-testing-test-secondary-brand-b-light: var(--color-neutral-300);
66
- --collections-theme-action-base-dark: var(--sandbox-color-brand);
67
- --collections-theme-action-base-light: var(--sandbox-color-brand);
68
- --collections-theme-action-text-dark: var(--sandbox-color-white);
69
- --collections-theme-action-text-light: var(--sandbox-color-white);
70
- --collections-theme-background-content-dark: #3b3644;
71
- --collections-theme-background-content-light: #ffffff;
72
- --collections-theme-background-page-dark: #1f1c25;
73
- --collections-theme-background-page-light: #fdfcfe;
74
- --collections-theme-text-base-dark: #f6f8ff;
75
- --collections-theme-text-base-light: #191f2c;
76
- --collections-theme-text-subtle-dark: #bec3d3;
77
- --collections-theme-text-subtle-light: #6e7a82;
66
+ --collections-testing-test-tertiary-brand-a-light: #000000;
67
+ --collections-testing-test-tertiary-brand-b-dark: #000000;
68
+ --collections-testing-test-tertiary-brand-b-light: #000000;
69
+ --collections-theme-action-text-arcadia-dark: var(--sandbox-color-white);
70
+ --collections-theme-action-text-arcadia-light: var(--sandbox-color-white);
71
+ --collections-theme-action-text-basis-dark: var(--sandbox-color-white);
72
+ --collections-theme-action-text-basis-light: var(--sandbox-color-white);
73
+ --collections-theme-background-content-arcadia-dark: #3b3644;
74
+ --collections-theme-background-content-arcadia-light: #ffffff;
75
+ --collections-theme-background-content-basis-dark: #3b3644;
76
+ --collections-theme-background-content-basis-light: #ffffff;
77
+ --collections-theme-background-page-arcadia-dark: #1f1c25;
78
+ --collections-theme-background-page-arcadia-light: #fdfcfe;
79
+ --collections-theme-background-page-basis-dark: #1f1c25;
80
+ --collections-theme-background-page-basis-light: #fdfcfe;
81
+ --collections-theme-brand-color-arcadia-dark: #7a34ed;
82
+ --collections-theme-brand-color-arcadia-light: #7a34ed;
83
+ --collections-theme-brand-color-basis-dark: #ed7734;
84
+ --collections-theme-brand-color-basis-light: #ed7734;
85
+ --collections-theme-brand-font-family-arcadia-dark: Inter;
86
+ --collections-theme-brand-font-family-arcadia-light: Inter;
87
+ --collections-theme-brand-font-family-basis-dark: Merriweather;
88
+ --collections-theme-brand-font-family-basis-light: Merriweather;
89
+ --collections-theme-brand-logo-arcadia-dark: url('https://knapsack.imgix.net/site/ks-sandbox/logo-arcadia-4id5a3sy3ysvg');
90
+ --collections-theme-brand-logo-arcadia-light: url('https://knapsack.imgix.net/site/ks-sandbox/logo-arcadia-4id5a3sy3ysvg');
91
+ --collections-theme-brand-logo-basis-dark: url('https://knapsack.imgix.net/site/ks-sandbox/logo-basis-34vzcamdqxpng');
92
+ --collections-theme-brand-logo-basis-light: url('https://knapsack.imgix.net/site/ks-sandbox/logo-basis-34vzcamdqxpng');
93
+ --collections-theme-text-base-arcadia-dark: #f6f8ff;
94
+ --collections-theme-text-base-arcadia-light: #191f2c;
95
+ --collections-theme-text-base-basis-dark: #f6f8ff;
96
+ --collections-theme-text-base-basis-light: #191f2c;
97
+ --collections-theme-text-subtle-arcadia-dark: #bec3d3;
98
+ --collections-theme-text-subtle-arcadia-light: #6e7a82;
99
+ --collections-theme-text-subtle-basis-dark: #bec3d3;
100
+ --collections-theme-text-subtle-basis-light: #6e7a82;
78
101
  --color-black: var(--color-neutral-800);
79
102
  --color-white: #ffffff;
80
103
  --color-neutral-100: #fafafb;
@@ -122,7 +145,6 @@
122
145
  --radius-medium: 8px;
123
146
  --radius-round: 160px;
124
147
  --radius-small: 4px;
125
- --sandbox-color-brand: #7a34ed;
126
148
  --sandbox-color-error: #ff5c46;
127
149
  --sandbox-color-success: #6bc313;
128
150
  --sandbox-color-warning: #fab120;
package/dist/design-tokens.css.scss CHANGED
@@ -63,18 +63,41 @@
63
63
  --collections-testing-test-secondary-brand-a-light: #cc2020;
64
64
  --collections-testing-test-secondary-brand-b-dark: var(--color-neutral-600);
65
65
  --collections-testing-test-secondary-brand-b-light: var(--color-neutral-300);
66
- --collections-theme-action-base-dark: var(--sandbox-color-brand);
67
- --collections-theme-action-base-light: var(--sandbox-color-brand);
68
- --collections-theme-action-text-dark: var(--sandbox-color-white);
69
- --collections-theme-action-text-light: var(--sandbox-color-white);
70
- --collections-theme-background-content-dark: #3b3644;
71
- --collections-theme-background-content-light: #ffffff;
72
- --collections-theme-background-page-dark: #1f1c25;
73
- --collections-theme-background-page-light: #fdfcfe;
74
- --collections-theme-text-base-dark: #f6f8ff;
75
- --collections-theme-text-base-light: #191f2c;
76
- --collections-theme-text-subtle-dark: #bec3d3;
77
- --collections-theme-text-subtle-light: #6e7a82;
66
+ --collections-testing-test-tertiary-brand-a-light: #000000;
67
+ --collections-testing-test-tertiary-brand-b-dark: #000000;
68
+ --collections-testing-test-tertiary-brand-b-light: #000000;
69
+ --collections-theme-action-text-arcadia-dark: var(--sandbox-color-white);
70
+ --collections-theme-action-text-arcadia-light: var(--sandbox-color-white);
71
+ --collections-theme-action-text-basis-dark: var(--sandbox-color-white);
72
+ --collections-theme-action-text-basis-light: var(--sandbox-color-white);
73
+ --collections-theme-background-content-arcadia-dark: #3b3644;
74
+ --collections-theme-background-content-arcadia-light: #ffffff;
75
+ --collections-theme-background-content-basis-dark: #3b3644;
76
+ --collections-theme-background-content-basis-light: #ffffff;
77
+ --collections-theme-background-page-arcadia-dark: #1f1c25;
78
+ --collections-theme-background-page-arcadia-light: #fdfcfe;
79
+ --collections-theme-background-page-basis-dark: #1f1c25;
80
+ --collections-theme-background-page-basis-light: #fdfcfe;
81
+ --collections-theme-brand-color-arcadia-dark: #7a34ed;
82
+ --collections-theme-brand-color-arcadia-light: #7a34ed;
83
+ --collections-theme-brand-color-basis-dark: #ed7734;
84
+ --collections-theme-brand-color-basis-light: #ed7734;
85
+ --collections-theme-brand-font-family-arcadia-dark: Inter;
86
+ --collections-theme-brand-font-family-arcadia-light: Inter;
87
+ --collections-theme-brand-font-family-basis-dark: Merriweather;
88
+ --collections-theme-brand-font-family-basis-light: Merriweather;
89
+ --collections-theme-brand-logo-arcadia-dark: url('https://knapsack.imgix.net/site/ks-sandbox/logo-arcadia-4id5a3sy3ysvg');
90
+ --collections-theme-brand-logo-arcadia-light: url('https://knapsack.imgix.net/site/ks-sandbox/logo-arcadia-4id5a3sy3ysvg');
91
+ --collections-theme-brand-logo-basis-dark: url('https://knapsack.imgix.net/site/ks-sandbox/logo-basis-34vzcamdqxpng');
92
+ --collections-theme-brand-logo-basis-light: url('https://knapsack.imgix.net/site/ks-sandbox/logo-basis-34vzcamdqxpng');
93
+ --collections-theme-text-base-arcadia-dark: #f6f8ff;
94
+ --collections-theme-text-base-arcadia-light: #191f2c;
95
+ --collections-theme-text-base-basis-dark: #f6f8ff;
96
+ --collections-theme-text-base-basis-light: #191f2c;
97
+ --collections-theme-text-subtle-arcadia-dark: #bec3d3;
98
+ --collections-theme-text-subtle-arcadia-light: #6e7a82;
99
+ --collections-theme-text-subtle-basis-dark: #bec3d3;
100
+ --collections-theme-text-subtle-basis-light: #6e7a82;
78
101
  --color-black: var(--color-neutral-800);
79
102
  --color-white: #ffffff;
80
103
  --color-neutral-100: #fafafb;
@@ -122,7 +145,6 @@
122
145
  --radius-medium: 8px;
123
146
  --radius-round: 160px;
124
147
  --radius-small: 4px;
125
- --sandbox-color-brand: #7a34ed;
126
148
  --sandbox-color-error: #ff5c46;
127
149
  --sandbox-color-success: #6bc313;
128
150
  --sandbox-color-warning: #fab120;
package/dist/design-tokens.d.cts CHANGED
@@ -73,20 +73,46 @@ export declare const colorNeutral600 = '#ACAAB6';
73
73
  export declare const collectionsTestingTestSecondaryBrandBDark = '#ACAAB6';
74
74
  export declare const colorNeutral300 = '#EDECEF';
75
75
  export declare const collectionsTestingTestSecondaryBrandBLight = '#EDECEF';
76
- export declare const sandboxColorBrand = '#7A34ED';
77
- export declare const collectionsThemeActionBaseDark = '#7A34ED';
78
- export declare const collectionsThemeActionBaseLight = '#7A34ED';
76
+ export declare const collectionsTestingTestTertiaryBrandALight = '#000000';
77
+ export declare const collectionsTestingTestTertiaryBrandBDark = '#000000';
78
+ export declare const collectionsTestingTestTertiaryBrandBLight = '#000000';
79
79
  export declare const sandboxColorWhite = '#ffffff';
80
- export declare const collectionsThemeActionTextDark = '#ffffff';
81
- export declare const collectionsThemeActionTextLight = '#ffffff';
82
- export declare const collectionsThemeBackgroundContentDark = '#3B3644';
83
- export declare const collectionsThemeBackgroundContentLight = '#FFFFFF';
84
- export declare const collectionsThemeBackgroundPageDark = '#1F1C25';
85
- export declare const collectionsThemeBackgroundPageLight = '#FDFCFE';
86
- export declare const collectionsThemeTextBaseDark = '#F6F8FF';
87
- export declare const collectionsThemeTextBaseLight = '#191F2C';
88
- export declare const collectionsThemeTextSubtleDark = '#BEC3D3';
89
- export declare const collectionsThemeTextSubtleLight = '#6E7A82';
80
+ export declare const collectionsThemeActionTextArcadiaDark = '#ffffff';
81
+ export declare const collectionsThemeActionTextArcadiaLight = '#ffffff';
82
+ export declare const collectionsThemeActionTextBasisDark = '#ffffff';
83
+ export declare const collectionsThemeActionTextBasisLight = '#ffffff';
84
+ export declare const collectionsThemeBackgroundContentArcadiaDark = '#3B3644';
85
+ export declare const collectionsThemeBackgroundContentArcadiaLight = '#FFFFFF';
86
+ export declare const collectionsThemeBackgroundContentBasisDark = '#3B3644';
87
+ export declare const collectionsThemeBackgroundContentBasisLight = '#FFFFFF';
88
+ export declare const collectionsThemeBackgroundPageArcadiaDark = '#1F1C25';
89
+ export declare const collectionsThemeBackgroundPageArcadiaLight = '#FDFCFE';
90
+ export declare const collectionsThemeBackgroundPageBasisDark = '#1F1C25';
91
+ export declare const collectionsThemeBackgroundPageBasisLight = '#FDFCFE';
92
+ export declare const collectionsThemeBrandColorArcadiaDark = '#7A34ED';
93
+ export declare const collectionsThemeBrandColorArcadiaLight = '#7A34ED';
94
+ export declare const collectionsThemeBrandColorBasisDark = '#ED7734';
95
+ export declare const collectionsThemeBrandColorBasisLight = '#ED7734';
96
+ export declare const collectionsThemeBrandFontFamilyArcadiaDark = 'Inter';
97
+ export declare const collectionsThemeBrandFontFamilyArcadiaLight = 'Inter';
98
+ export declare const collectionsThemeBrandFontFamilyBasisDark = 'Merriweather';
99
+ export declare const collectionsThemeBrandFontFamilyBasisLight = 'Merriweather';
100
+ export declare const collectionsThemeBrandLogoArcadiaDark =
101
+ "url('https://knapsack.imgix.net/site/ks-sandbox/logo-arcadia-4id5a3sy3ysvg')";
102
+ export declare const collectionsThemeBrandLogoArcadiaLight =
103
+ "url('https://knapsack.imgix.net/site/ks-sandbox/logo-arcadia-4id5a3sy3ysvg')";
104
+ export declare const collectionsThemeBrandLogoBasisDark =
105
+ "url('https://knapsack.imgix.net/site/ks-sandbox/logo-basis-34vzcamdqxpng')";
106
+ export declare const collectionsThemeBrandLogoBasisLight =
107
+ "url('https://knapsack.imgix.net/site/ks-sandbox/logo-basis-34vzcamdqxpng')";
108
+ export declare const collectionsThemeTextBaseArcadiaDark = '#F6F8FF';
109
+ export declare const collectionsThemeTextBaseArcadiaLight = '#191F2C';
110
+ export declare const collectionsThemeTextBaseBasisDark = '#F6F8FF';
111
+ export declare const collectionsThemeTextBaseBasisLight = '#191F2C';
112
+ export declare const collectionsThemeTextSubtleArcadiaDark = '#BEC3D3';
113
+ export declare const collectionsThemeTextSubtleArcadiaLight = '#6E7A82';
114
+ export declare const collectionsThemeTextSubtleBasisDark = '#BEC3D3';
115
+ export declare const collectionsThemeTextSubtleBasisLight = '#6E7A82';
90
116
  export declare const colorNeutral800 = '#191335';
91
117
  export declare const colorBlack = '#191335';
92
118
  export declare const colorWhite = '#ffffff';
package/dist/design-tokens.d.mts CHANGED
@@ -73,20 +73,46 @@ export declare const colorNeutral600 = '#ACAAB6';
73
73
  export declare const collectionsTestingTestSecondaryBrandBDark = '#ACAAB6';
74
74
  export declare const colorNeutral300 = '#EDECEF';
75
75
  export declare const collectionsTestingTestSecondaryBrandBLight = '#EDECEF';
76
- export declare const sandboxColorBrand = '#7A34ED';
77
- export declare const collectionsThemeActionBaseDark = '#7A34ED';
78
- export declare const collectionsThemeActionBaseLight = '#7A34ED';
76
+ export declare const collectionsTestingTestTertiaryBrandALight = '#000000';
77
+ export declare const collectionsTestingTestTertiaryBrandBDark = '#000000';
78
+ export declare const collectionsTestingTestTertiaryBrandBLight = '#000000';
79
79
  export declare const sandboxColorWhite = '#ffffff';
80
- export declare const collectionsThemeActionTextDark = '#ffffff';
81
- export declare const collectionsThemeActionTextLight = '#ffffff';
82
- export declare const collectionsThemeBackgroundContentDark = '#3B3644';
83
- export declare const collectionsThemeBackgroundContentLight = '#FFFFFF';
84
- export declare const collectionsThemeBackgroundPageDark = '#1F1C25';
85
- export declare const collectionsThemeBackgroundPageLight = '#FDFCFE';
86
- export declare const collectionsThemeTextBaseDark = '#F6F8FF';
87
- export declare const collectionsThemeTextBaseLight = '#191F2C';
88
- export declare const collectionsThemeTextSubtleDark = '#BEC3D3';
89
- export declare const collectionsThemeTextSubtleLight = '#6E7A82';
80
+ export declare const collectionsThemeActionTextArcadiaDark = '#ffffff';
81
+ export declare const collectionsThemeActionTextArcadiaLight = '#ffffff';
82
+ export declare const collectionsThemeActionTextBasisDark = '#ffffff';
83
+ export declare const collectionsThemeActionTextBasisLight = '#ffffff';
84
+ export declare const collectionsThemeBackgroundContentArcadiaDark = '#3B3644';
85
+ export declare const collectionsThemeBackgroundContentArcadiaLight = '#FFFFFF';
86
+ export declare const collectionsThemeBackgroundContentBasisDark = '#3B3644';
87
+ export declare const collectionsThemeBackgroundContentBasisLight = '#FFFFFF';
88
+ export declare const collectionsThemeBackgroundPageArcadiaDark = '#1F1C25';
89
+ export declare const collectionsThemeBackgroundPageArcadiaLight = '#FDFCFE';
90
+ export declare const collectionsThemeBackgroundPageBasisDark = '#1F1C25';
91
+ export declare const collectionsThemeBackgroundPageBasisLight = '#FDFCFE';
92
+ export declare const collectionsThemeBrandColorArcadiaDark = '#7A34ED';
93
+ export declare const collectionsThemeBrandColorArcadiaLight = '#7A34ED';
94
+ export declare const collectionsThemeBrandColorBasisDark = '#ED7734';
95
+ export declare const collectionsThemeBrandColorBasisLight = '#ED7734';
96
+ export declare const collectionsThemeBrandFontFamilyArcadiaDark = 'Inter';
97
+ export declare const collectionsThemeBrandFontFamilyArcadiaLight = 'Inter';
98
+ export declare const collectionsThemeBrandFontFamilyBasisDark = 'Merriweather';
99
+ export declare const collectionsThemeBrandFontFamilyBasisLight = 'Merriweather';
100
+ export declare const collectionsThemeBrandLogoArcadiaDark =
101
+ "url('https://knapsack.imgix.net/site/ks-sandbox/logo-arcadia-4id5a3sy3ysvg')";
102
+ export declare const collectionsThemeBrandLogoArcadiaLight =
103
+ "url('https://knapsack.imgix.net/site/ks-sandbox/logo-arcadia-4id5a3sy3ysvg')";
104
+ export declare const collectionsThemeBrandLogoBasisDark =
105
+ "url('https://knapsack.imgix.net/site/ks-sandbox/logo-basis-34vzcamdqxpng')";
106
+ export declare const collectionsThemeBrandLogoBasisLight =
107
+ "url('https://knapsack.imgix.net/site/ks-sandbox/logo-basis-34vzcamdqxpng')";
108
+ export declare const collectionsThemeTextBaseArcadiaDark = '#F6F8FF';
109
+ export declare const collectionsThemeTextBaseArcadiaLight = '#191F2C';
110
+ export declare const collectionsThemeTextBaseBasisDark = '#F6F8FF';
111
+ export declare const collectionsThemeTextBaseBasisLight = '#191F2C';
112
+ export declare const collectionsThemeTextSubtleArcadiaDark = '#BEC3D3';
113
+ export declare const collectionsThemeTextSubtleArcadiaLight = '#6E7A82';
114
+ export declare const collectionsThemeTextSubtleBasisDark = '#BEC3D3';
115
+ export declare const collectionsThemeTextSubtleBasisLight = '#6E7A82';
90
116
  export declare const colorNeutral800 = '#191335';
91
117
  export declare const colorBlack = '#191335';
92
118
  export declare const colorWhite = '#ffffff';
package/dist/design-tokens.d.ts CHANGED
@@ -73,20 +73,46 @@ export declare const colorNeutral600 = '#ACAAB6';
73
73
  export declare const collectionsTestingTestSecondaryBrandBDark = '#ACAAB6';
74
74
  export declare const colorNeutral300 = '#EDECEF';
75
75
  export declare const collectionsTestingTestSecondaryBrandBLight = '#EDECEF';
76
- export declare const sandboxColorBrand = '#7A34ED';
77
- export declare const collectionsThemeActionBaseDark = '#7A34ED';
78
- export declare const collectionsThemeActionBaseLight = '#7A34ED';
76
+ export declare const collectionsTestingTestTertiaryBrandALight = '#000000';
77
+ export declare const collectionsTestingTestTertiaryBrandBDark = '#000000';
78
+ export declare const collectionsTestingTestTertiaryBrandBLight = '#000000';
79
79
  export declare const sandboxColorWhite = '#ffffff';
80
- export declare const collectionsThemeActionTextDark = '#ffffff';
81
- export declare const collectionsThemeActionTextLight = '#ffffff';
82
- export declare const collectionsThemeBackgroundContentDark = '#3B3644';
83
- export declare const collectionsThemeBackgroundContentLight = '#FFFFFF';
84
- export declare const collectionsThemeBackgroundPageDark = '#1F1C25';
85
- export declare const collectionsThemeBackgroundPageLight = '#FDFCFE';
86
- export declare const collectionsThemeTextBaseDark = '#F6F8FF';
87
- export declare const collectionsThemeTextBaseLight = '#191F2C';
88
- export declare const collectionsThemeTextSubtleDark = '#BEC3D3';
89
- export declare const collectionsThemeTextSubtleLight = '#6E7A82';
80
+ export declare const collectionsThemeActionTextArcadiaDark = '#ffffff';
81
+ export declare const collectionsThemeActionTextArcadiaLight = '#ffffff';
82
+ export declare const collectionsThemeActionTextBasisDark = '#ffffff';
83
+ export declare const collectionsThemeActionTextBasisLight = '#ffffff';
84
+ export declare const collectionsThemeBackgroundContentArcadiaDark = '#3B3644';
85
+ export declare const collectionsThemeBackgroundContentArcadiaLight = '#FFFFFF';
86
+ export declare const collectionsThemeBackgroundContentBasisDark = '#3B3644';
87
+ export declare const collectionsThemeBackgroundContentBasisLight = '#FFFFFF';
88
+ export declare const collectionsThemeBackgroundPageArcadiaDark = '#1F1C25';
89
+ export declare const collectionsThemeBackgroundPageArcadiaLight = '#FDFCFE';
90
+ export declare const collectionsThemeBackgroundPageBasisDark = '#1F1C25';
91
+ export declare const collectionsThemeBackgroundPageBasisLight = '#FDFCFE';
92
+ export declare const collectionsThemeBrandColorArcadiaDark = '#7A34ED';
93
+ export declare const collectionsThemeBrandColorArcadiaLight = '#7A34ED';
94
+ export declare const collectionsThemeBrandColorBasisDark = '#ED7734';
95
+ export declare const collectionsThemeBrandColorBasisLight = '#ED7734';
96
+ export declare const collectionsThemeBrandFontFamilyArcadiaDark = 'Inter';
97
+ export declare const collectionsThemeBrandFontFamilyArcadiaLight = 'Inter';
98
+ export declare const collectionsThemeBrandFontFamilyBasisDark = 'Merriweather';
99
+ export declare const collectionsThemeBrandFontFamilyBasisLight = 'Merriweather';
100
+ export declare const collectionsThemeBrandLogoArcadiaDark =
101
+ "url('https://knapsack.imgix.net/site/ks-sandbox/logo-arcadia-4id5a3sy3ysvg')";
102
+ export declare const collectionsThemeBrandLogoArcadiaLight =
103
+ "url('https://knapsack.imgix.net/site/ks-sandbox/logo-arcadia-4id5a3sy3ysvg')";
104
+ export declare const collectionsThemeBrandLogoBasisDark =
105
+ "url('https://knapsack.imgix.net/site/ks-sandbox/logo-basis-34vzcamdqxpng')";
106
+ export declare const collectionsThemeBrandLogoBasisLight =
107
+ "url('https://knapsack.imgix.net/site/ks-sandbox/logo-basis-34vzcamdqxpng')";
108
+ export declare const collectionsThemeTextBaseArcadiaDark = '#F6F8FF';
109
+ export declare const collectionsThemeTextBaseArcadiaLight = '#191F2C';
110
+ export declare const collectionsThemeTextBaseBasisDark = '#F6F8FF';
111
+ export declare const collectionsThemeTextBaseBasisLight = '#191F2C';
112
+ export declare const collectionsThemeTextSubtleArcadiaDark = '#BEC3D3';
113
+ export declare const collectionsThemeTextSubtleArcadiaLight = '#6E7A82';
114
+ export declare const collectionsThemeTextSubtleBasisDark = '#BEC3D3';
115
+ export declare const collectionsThemeTextSubtleBasisLight = '#6E7A82';
90
116
  export declare const colorNeutral800 = '#191335';
91
117
  export declare const colorBlack = '#191335';
92
118
  export declare const colorWhite = '#ffffff';