@knapsack/sandbox-tokens 4.54.6--canary.4077.4d2b71a.0 → 4.54.6--canary.4093.b8af7d7.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (17) hide show
  1. package/dist/design-tokens.cjs +83 -51
  2. package/dist/design-tokens.collections.css +153 -90
  3. package/dist/design-tokens.css +74 -42
  4. package/dist/design-tokens.css.scss +74 -42
  5. package/dist/design-tokens.d.cts +83 -51
  6. package/dist/design-tokens.d.mts +83 -51
  7. package/dist/design-tokens.d.ts +83 -51
  8. package/dist/design-tokens.js +83 -51
  9. package/dist/design-tokens.json +73 -41
  10. package/dist/design-tokens.less +83 -51
  11. package/dist/design-tokens.mjs +83 -51
  12. package/dist/design-tokens.nested.json +80 -12
  13. package/dist/design-tokens.scss +199 -99
  14. package/dist/design-tokens.style-dictionary.json +395 -132
  15. package/dist/design-tokens.w3c-spec.json +395 -132
  16. package/package.json +4 -4
  17. package/src/knapsack.design-tokens.json +395 -132
package/dist/design-tokens.cjs CHANGED
@@ -9,59 +9,85 @@ module.exports = {
9
9
  breakpointXlarge: '992px',
10
10
  breakpointXxlarge: '1240px',
11
11
  breakpointXxxlarge: '1440px',
12
- collectionsBrandsColorColorBrandADark: '#000000',
13
- collectionsBrandsColorColorBrandALight: '#000000',
14
- collectionsBrandsColorColorBrandBDark: '#000000',
15
- collectionsBrandsColorColorBrandBLight: '#000000',
16
- collectionsBrandsColorColor1BrandADark: '#000000',
17
- collectionsBrandsColorColor1BrandALight: '#000000',
18
- collectionsBrandsColorColor1BrandBDark: '#000000',
19
- collectionsBrandsColorColor1BrandBLight: '#000000',
20
- collectionsBrandsColorFontWeightBrandADark: 400,
21
- collectionsBrandsColorFontWeightBrandALight: 400,
22
- collectionsBrandsColorFontWeightBrandBDark: 400,
23
- collectionsBrandsColorFontWeightBrandBLight: 400,
24
- collectionsBrandsColorPrimaryBrandADark: '#0a13f7',
25
- collectionsBrandsColorPrimaryBrandALight: '#3ed93f',
12
+ spacingScale4: '12px',
13
+ collectionsDensitySpacingLargeCompact: '12px',
14
+ spacingScale5: '16px',
15
+ collectionsDensitySpacingLargeCozy: '16px',
16
+ spacingScale3: '8px',
17
+ collectionsDensitySpacingMediumCompact: '8px',
18
+ collectionsDensitySpacingMediumCozy: '12px',
19
+ spacingScale2: '4px',
20
+ collectionsDensitySpacingSmallCompact: '4px',
21
+ collectionsDensitySpacingSmallCozy: '8px',
22
+ collectionsDensitySpacingXlargeCompact: '16px',
23
+ spacingScale6: '24px',
24
+ collectionsDensitySpacingXlargeCozy: '24px',
25
+ spacingScale1: '2px',
26
+ collectionsDensitySpacingXsmallCompact: '2px',
27
+ collectionsDensitySpacingXsmallCozy: '4px',
28
+ spacingScale7: '32px',
29
+ collectionsDensitySpacingXxlargeCompact: '32px',
30
+ spacingScale8: '40px',
31
+ collectionsDensitySpacingXxlargeCozy: '40px',
32
+ collectionsDensitySpacingXxxlargeCompact: '40px',
33
+ spacingScale10: '64px',
34
+ collectionsDensitySpacingXxxlargeCozy: '64px',
35
+ collectionsTestingColorColorBrandADark: '#000000',
36
+ collectionsTestingColorColorBrandALight: '#000000',
37
+ collectionsTestingColorColorBrandBDark: '#000000',
38
+ collectionsTestingColorColorBrandBLight: '#000000',
39
+ collectionsTestingColorColor1BrandADark: '#000000',
40
+ collectionsTestingColorColor1BrandALight: '#000000',
41
+ collectionsTestingColorColor1BrandBDark: '#000000',
42
+ collectionsTestingColorColor1BrandBLight: '#000000',
43
+ collectionsTestingColorFontWeightBrandADark: 400,
44
+ collectionsTestingColorFontWeightBrandALight: 400,
45
+ collectionsTestingColorFontWeightBrandBDark: 400,
46
+ collectionsTestingColorFontWeightBrandBLight: 400,
47
+ collectionsTestingColorPrimaryBrandADark: '#0a13f7',
48
+ collectionsTestingColorPrimaryBrandALight: '#3ed93f',
26
49
  colorPink800: '#710D55',
27
- collectionsBrandsColorPrimaryBrandBDark: '#710D55',
50
+ collectionsTestingColorPrimaryBrandBDark: '#710D55',
28
51
  colorPink400: '#F37491',
29
- collectionsBrandsColorPrimaryBrandBLight: '#F37491',
52
+ collectionsTestingColorPrimaryBrandBLight: '#F37491',
30
53
  colorPink500: '#EC487D',
31
- collectionsBrandsColorSecondaryBrandADark: '#EC487D',
32
- collectionsBrandsColorSecondaryBrandALight: '#EC487D',
54
+ collectionsTestingColorSecondaryBrandADark: '#EC487D',
55
+ collectionsTestingColorSecondaryBrandALight: '#EC487D',
33
56
  colorPurple500: '#6A4CEC',
34
- collectionsBrandsColorSecondaryBrandBDark: '#6A4CEC',
35
- collectionsBrandsColorSecondaryBrandBLight: '#6A4CEC',
36
- collectionsBrandsFooBarBrandADark: '1px',
37
- collectionsBrandsFooBarBrandALight: '1px',
38
- collectionsBrandsFooBarBrandBDark: '1px',
39
- collectionsBrandsFooBarBrandBLight: '1px',
40
- collectionsBrandsTestDimensionBrandADark: '2px',
41
- collectionsBrandsTestDimensionBrandALight: '2px',
42
- collectionsBrandsTestDimensionBrandBDark: '2px',
43
- collectionsBrandsTestDimensionBrandBLight: '2px',
44
- spacingScale2: '4px',
45
- collectionsDensitySpacingSmallCompact: '4px',
46
- collectionsBrandsTestPrimaryBrandADark: '4px',
47
- spacingScale8: '40px',
48
- collectionsBrandsTestPrimaryBrandALight: '40px',
49
- collectionsBrandsTestPrimaryBrandBDark: '4px',
50
- collectionsBrandsTestPrimaryBrandBLight: '4px',
51
- collectionsBrandsTestSecondaryBrandADark: '#cc2020',
52
- collectionsBrandsTestSecondaryBrandALight: '#cc2020',
57
+ collectionsTestingColorSecondaryBrandBDark: '#6A4CEC',
58
+ collectionsTestingColorSecondaryBrandBLight: '#6A4CEC',
59
+ collectionsTestingFooBarBrandADark: '1px',
60
+ collectionsTestingFooBarBrandALight: '1px',
61
+ collectionsTestingFooBarBrandBDark: '1px',
62
+ collectionsTestingFooBarBrandBLight: '1px',
63
+ collectionsTestingTestDimensionBrandADark: '2px',
64
+ collectionsTestingTestDimensionBrandALight: '2px',
65
+ collectionsTestingTestDimensionBrandBDark: '2px',
66
+ collectionsTestingTestDimensionBrandBLight: '2px',
67
+ collectionsTestingTestPrimaryBrandADark: '4px',
68
+ collectionsTestingTestPrimaryBrandALight: '40px',
69
+ collectionsTestingTestPrimaryBrandBDark: '4px',
70
+ collectionsTestingTestPrimaryBrandBLight: '4px',
71
+ collectionsTestingTestSecondaryBrandADark: '#cc2020',
72
+ collectionsTestingTestSecondaryBrandALight: '#cc2020',
53
73
  colorNeutral600: '#ACAAB6',
54
- collectionsBrandsTestSecondaryBrandBDark: '#ACAAB6',
74
+ collectionsTestingTestSecondaryBrandBDark: '#ACAAB6',
55
75
  colorNeutral300: '#EDECEF',
56
- collectionsBrandsTestSecondaryBrandBLight: '#EDECEF',
57
- collectionsDensitySpacingLargeComfortable: '40px',
58
- spacingScale5: '16px',
59
- collectionsDensitySpacingLargeCompact: '16px',
60
- spacingScale6: '24px',
61
- collectionsDensitySpacingMediumComfortable: '24px',
62
- collectionsDensitySpacingMediumCompact: '16px',
63
- spacingScale3: '8px',
64
- collectionsDensitySpacingSmallComfortable: '8px',
76
+ collectionsTestingTestSecondaryBrandBLight: '#EDECEF',
77
+ sandboxColorBrand: '#7A34ED',
78
+ collectionsThemeActionBaseDark: '#7A34ED',
79
+ collectionsThemeActionBaseLight: '#7A34ED',
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',
65
91
  colorNeutral800: '#191335',
66
92
  colorBlack: '#191335',
67
93
  colorWhite: '#ffffff',
@@ -101,16 +127,22 @@ module.exports = {
101
127
  radiusMedium: '8px',
102
128
  radiusRound: '160px',
103
129
  radiusSmall: '4px',
130
+ sandboxColorError: '#FF5C46',
131
+ sandboxColorSuccess: '#6BC313',
132
+ sandboxColorWarning: '#FAB120',
133
+ sandboxRadiusLarge: '16px',
134
+ sandboxRadiusMedium: '8px',
135
+ sandboxRadiusSmall: '4px',
136
+ sandboxRadiusXlarge: '32px',
137
+ sandboxRadiusXsmall: '2px',
138
+ sandboxWidthNarrow: '640px',
139
+ sandboxWidthWide: '1080px',
104
140
  shadow1: '0px 5px 10px 0px #000000',
105
141
  shadow2: '0px 10px 20px 0px #000000',
106
142
  shadow3: '0px 15px 25px 0px #000000',
107
143
  shadow4: '0px 20px 40px 0px #000000',
108
144
  shadowColor: '#000000',
109
- spacingScale1: '2px',
110
- spacingScale4: '12px',
111
- spacingScale7: '32px',
112
145
  spacingScale9: '48px',
113
- spacingScale10: '64px',
114
146
  spacingScale11: '80px',
115
147
  spacingScale12: '96px',
116
148
  spacingScale13: '160px',
package/dist/design-tokens.collections.css CHANGED
@@ -7,54 +7,74 @@
7
7
  --breakpoint-xlarge: 992px;
8
8
  --breakpoint-xxlarge: 1240px;
9
9
  --breakpoint-xxxlarge: 1440px;
10
- --collections-brands-color-color-brand-a-dark: #000000;
11
- --collections-brands-color-color-brand-a-light: #000000;
12
- --collections-brands-color-color-brand-b-dark: #000000;
13
- --collections-brands-color-color-brand-b-light: #000000;
14
- --collections-brands-color-color-1-brand-a-dark: #000000;
15
- --collections-brands-color-color-1-brand-a-light: #000000;
16
- --collections-brands-color-color-1-brand-b-dark: #000000;
17
- --collections-brands-color-color-1-brand-b-light: #000000;
18
- --collections-brands-color-font-weight-brand-a-dark: 400;
19
- --collections-brands-color-font-weight-brand-a-light: 400;
20
- --collections-brands-color-font-weight-brand-b-dark: 400;
21
- --collections-brands-color-font-weight-brand-b-light: 400;
22
- --collections-brands-color-primary-brand-a-dark: #0a13f7;
23
- --collections-brands-color-primary-brand-a-light: #3ed93f;
24
- --collections-brands-color-primary-brand-b-dark: var(--color-pink-800);
25
- --collections-brands-color-primary-brand-b-light: var(--color-pink-400);
26
- --collections-brands-color-secondary-brand-a-dark: var(--color-pink-500);
27
- --collections-brands-color-secondary-brand-a-light: var(--color-pink-500);
28
- --collections-brands-color-secondary-brand-b-dark: var(--color-purple-500);
29
- --collections-brands-color-secondary-brand-b-light: var(--color-purple-500);
30
- --collections-brands-foo-bar-brand-a-dark: 1px;
31
- --collections-brands-foo-bar-brand-a-light: 1px;
32
- --collections-brands-foo-bar-brand-b-dark: 1px;
33
- --collections-brands-foo-bar-brand-b-light: 1px;
34
- --collections-brands-test-dimension-brand-a-dark: 2px;
35
- --collections-brands-test-dimension-brand-a-light: 2px;
36
- --collections-brands-test-dimension-brand-b-dark: 2px;
37
- --collections-brands-test-dimension-brand-b-light: 2px;
38
- --collections-brands-test-primary-brand-a-dark: var(
10
+ --collections-density-spacing-large-compact: var(--spacing-scale-4);
11
+ --collections-density-spacing-large-cozy: var(--spacing-scale-5);
12
+ --collections-density-spacing-medium-compact: var(--spacing-scale-3);
13
+ --collections-density-spacing-medium-cozy: var(--spacing-scale-4);
14
+ --collections-density-spacing-small-compact: var(--spacing-scale-2);
15
+ --collections-density-spacing-small-cozy: var(--spacing-scale-3);
16
+ --collections-density-spacing-xlarge-compact: var(--spacing-scale-5);
17
+ --collections-density-spacing-xlarge-cozy: var(--spacing-scale-6);
18
+ --collections-density-spacing-xsmall-compact: var(--spacing-scale-1);
19
+ --collections-density-spacing-xsmall-cozy: var(--spacing-scale-2);
20
+ --collections-density-spacing-xxlarge-compact: var(--spacing-scale-7);
21
+ --collections-density-spacing-xxlarge-cozy: var(--spacing-scale-8);
22
+ --collections-density-spacing-xxxlarge-compact: var(--spacing-scale-8);
23
+ --collections-density-spacing-xxxlarge-cozy: var(--spacing-scale-10);
24
+ --collections-testing-color-color-brand-a-dark: #000000;
25
+ --collections-testing-color-color-brand-a-light: #000000;
26
+ --collections-testing-color-color-brand-b-dark: #000000;
27
+ --collections-testing-color-color-brand-b-light: #000000;
28
+ --collections-testing-color-color-1-brand-a-dark: #000000;
29
+ --collections-testing-color-color-1-brand-a-light: #000000;
30
+ --collections-testing-color-color-1-brand-b-dark: #000000;
31
+ --collections-testing-color-color-1-brand-b-light: #000000;
32
+ --collections-testing-color-font-weight-brand-a-dark: 400;
33
+ --collections-testing-color-font-weight-brand-a-light: 400;
34
+ --collections-testing-color-font-weight-brand-b-dark: 400;
35
+ --collections-testing-color-font-weight-brand-b-light: 400;
36
+ --collections-testing-color-primary-brand-a-dark: #0a13f7;
37
+ --collections-testing-color-primary-brand-a-light: #3ed93f;
38
+ --collections-testing-color-primary-brand-b-dark: var(--color-pink-800);
39
+ --collections-testing-color-primary-brand-b-light: var(--color-pink-400);
40
+ --collections-testing-color-secondary-brand-a-dark: var(--color-pink-500);
41
+ --collections-testing-color-secondary-brand-a-light: var(--color-pink-500);
42
+ --collections-testing-color-secondary-brand-b-dark: var(--color-purple-500);
43
+ --collections-testing-color-secondary-brand-b-light: var(--color-purple-500);
44
+ --collections-testing-foo-bar-brand-a-dark: 1px;
45
+ --collections-testing-foo-bar-brand-a-light: 1px;
46
+ --collections-testing-foo-bar-brand-b-dark: 1px;
47
+ --collections-testing-foo-bar-brand-b-light: 1px;
48
+ --collections-testing-test-dimension-brand-a-dark: 2px;
49
+ --collections-testing-test-dimension-brand-a-light: 2px;
50
+ --collections-testing-test-dimension-brand-b-dark: 2px;
51
+ --collections-testing-test-dimension-brand-b-light: 2px;
52
+ --collections-testing-test-primary-brand-a-dark: var(
39
53
  --collections-density-spacing-small-compact
40
54
  );
41
- --collections-brands-test-primary-brand-a-light: var(--spacing-scale-8);
42
- --collections-brands-test-primary-brand-b-dark: var(
55
+ --collections-testing-test-primary-brand-a-light: var(--spacing-scale-8);
56
+ --collections-testing-test-primary-brand-b-dark: var(
43
57
  --collections-density-spacing-small-compact
44
58
  );
45
- --collections-brands-test-primary-brand-b-light: var(
59
+ --collections-testing-test-primary-brand-b-light: var(
46
60
  --collections-density-spacing-small-compact
47
61
  );
48
- --collections-brands-test-secondary-brand-a-dark: #cc2020;
49
- --collections-brands-test-secondary-brand-a-light: #cc2020;
50
- --collections-brands-test-secondary-brand-b-dark: var(--color-neutral-600);
51
- --collections-brands-test-secondary-brand-b-light: var(--color-neutral-300);
52
- --collections-density-spacing-large-comfortable: var(--spacing-scale-8);
53
- --collections-density-spacing-large-compact: var(--spacing-scale-5);
54
- --collections-density-spacing-medium-comfortable: var(--spacing-scale-6);
55
- --collections-density-spacing-medium-compact: var(--spacing-scale-5);
56
- --collections-density-spacing-small-comfortable: var(--spacing-scale-3);
57
- --collections-density-spacing-small-compact: var(--spacing-scale-2);
62
+ --collections-testing-test-secondary-brand-a-dark: #cc2020;
63
+ --collections-testing-test-secondary-brand-a-light: #cc2020;
64
+ --collections-testing-test-secondary-brand-b-dark: var(--color-neutral-600);
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;
58
78
  --color-black: var(--color-neutral-800);
59
79
  --color-white: #ffffff;
60
80
  --color-neutral-100: #fafafb;
@@ -102,6 +122,18 @@
102
122
  --radius-medium: 8px;
103
123
  --radius-round: 160px;
104
124
  --radius-small: 4px;
125
+ --sandbox-color-brand: #7a34ed;
126
+ --sandbox-color-error: #ff5c46;
127
+ --sandbox-color-success: #6bc313;
128
+ --sandbox-color-warning: #fab120;
129
+ --sandbox-color-white: #ffffff;
130
+ --sandbox-radius-large: 16px;
131
+ --sandbox-radius-medium: 8px;
132
+ --sandbox-radius-small: 4px;
133
+ --sandbox-radius-xlarge: 32px;
134
+ --sandbox-radius-xsmall: 2px;
135
+ --sandbox-width-narrow: 640px;
136
+ --sandbox-width-wide: 1080px;
105
137
  --shadow-1: 0px 5px 10px 0px #000000;
106
138
  --shadow-2: 0px 10px 20px 0px #000000;
107
139
  --shadow-3: 0px 15px 25px 0px #000000;
@@ -125,67 +157,98 @@
125
157
  }
126
158
 
127
159
  :root,
128
- [data-collections-brands='brandALight'] {
129
- --color-color: var(--collections-brands-color-color-brand-a-light);
130
- --color-color-1: var(--collections-brands-color-color-1-brand-a-light);
160
+ [data-collections-density='cozy'] {
161
+ --spacing-large: var(--collections-density-spacing-large-cozy);
162
+ --spacing-medium: var(--collections-density-spacing-medium-cozy);
163
+ --spacing-small: var(--collections-density-spacing-small-cozy);
164
+ --spacing-xlarge: var(--collections-density-spacing-xlarge-cozy);
165
+ --spacing-xsmall: var(--collections-density-spacing-xsmall-cozy);
166
+ --spacing-xxlarge: var(--collections-density-spacing-xxlarge-cozy);
167
+ --spacing-xxxlarge: var(--collections-density-spacing-xxxlarge-cozy);
168
+ }
169
+
170
+ [data-collections-density='compact'] {
171
+ --spacing-large: var(--collections-density-spacing-large-compact);
172
+ --spacing-medium: var(--collections-density-spacing-medium-compact);
173
+ --spacing-small: var(--collections-density-spacing-small-compact);
174
+ --spacing-xlarge: var(--collections-density-spacing-xlarge-compact);
175
+ --spacing-xsmall: var(--collections-density-spacing-xsmall-compact);
176
+ --spacing-xxlarge: var(--collections-density-spacing-xxlarge-compact);
177
+ --spacing-xxxlarge: var(--collections-density-spacing-xxxlarge-compact);
178
+ }
179
+
180
+ :root,
181
+ [data-collections-testing='brandALight'] {
182
+ --color-color: var(--collections-testing-color-color-brand-a-light);
183
+ --color-color-1: var(--collections-testing-color-color-1-brand-a-light);
131
184
  --color-font-weight: var(
132
- --collections-brands-color-font-weight-brand-a-light
185
+ --collections-testing-color-font-weight-brand-a-light
133
186
  );
134
- --color-primary: var(--collections-brands-color-primary-brand-a-light);
135
- --color-secondary: var(--collections-brands-color-secondary-brand-a-light);
136
- --foo-bar: var(--collections-brands-foo-bar-brand-a-light);
137
- --test-dimension: var(--collections-brands-test-dimension-brand-a-light);
138
- --test-primary: var(--collections-brands-test-primary-brand-a-light);
139
- --test-secondary: var(--collections-brands-test-secondary-brand-a-light);
187
+ --color-primary: var(--collections-testing-color-primary-brand-a-light);
188
+ --color-secondary: var(--collections-testing-color-secondary-brand-a-light);
189
+ --foo-bar: var(--collections-testing-foo-bar-brand-a-light);
190
+ --test-dimension: var(--collections-testing-test-dimension-brand-a-light);
191
+ --test-primary: var(--collections-testing-test-primary-brand-a-light);
192
+ --test-secondary: var(--collections-testing-test-secondary-brand-a-light);
140
193
  }
141
194
 
142
- [data-collections-brands='brandADark'] {
143
- --color-color: var(--collections-brands-color-color-brand-a-dark);
144
- --color-color-1: var(--collections-brands-color-color-1-brand-a-dark);
145
- --color-font-weight: var(--collections-brands-color-font-weight-brand-a-dark);
146
- --color-primary: var(--collections-brands-color-primary-brand-a-dark);
147
- --color-secondary: var(--collections-brands-color-secondary-brand-a-dark);
148
- --foo-bar: var(--collections-brands-foo-bar-brand-a-dark);
149
- --test-dimension: var(--collections-brands-test-dimension-brand-a-dark);
150
- --test-primary: var(--collections-brands-test-primary-brand-a-dark);
151
- --test-secondary: var(--collections-brands-test-secondary-brand-a-dark);
195
+ [data-collections-testing='brandADark'] {
196
+ --color-color: var(--collections-testing-color-color-brand-a-dark);
197
+ --color-color-1: var(--collections-testing-color-color-1-brand-a-dark);
198
+ --color-font-weight: var(
199
+ --collections-testing-color-font-weight-brand-a-dark
200
+ );
201
+ --color-primary: var(--collections-testing-color-primary-brand-a-dark);
202
+ --color-secondary: var(--collections-testing-color-secondary-brand-a-dark);
203
+ --foo-bar: var(--collections-testing-foo-bar-brand-a-dark);
204
+ --test-dimension: var(--collections-testing-test-dimension-brand-a-dark);
205
+ --test-primary: var(--collections-testing-test-primary-brand-a-dark);
206
+ --test-secondary: var(--collections-testing-test-secondary-brand-a-dark);
152
207
  }
153
208
 
154
- [data-collections-brands='brandBLight'] {
155
- --color-color: var(--collections-brands-color-color-brand-b-light);
156
- --color-color-1: var(--collections-brands-color-color-1-brand-b-light);
209
+ [data-collections-testing='brandBLight'] {
210
+ --color-color: var(--collections-testing-color-color-brand-b-light);
211
+ --color-color-1: var(--collections-testing-color-color-1-brand-b-light);
157
212
  --color-font-weight: var(
158
- --collections-brands-color-font-weight-brand-b-light
213
+ --collections-testing-color-font-weight-brand-b-light
159
214
  );
160
- --color-primary: var(--collections-brands-color-primary-brand-b-light);
161
- --color-secondary: var(--collections-brands-color-secondary-brand-b-light);
162
- --foo-bar: var(--collections-brands-foo-bar-brand-b-light);
163
- --test-dimension: var(--collections-brands-test-dimension-brand-b-light);
164
- --test-primary: var(--collections-brands-test-primary-brand-b-light);
165
- --test-secondary: var(--collections-brands-test-secondary-brand-b-light);
215
+ --color-primary: var(--collections-testing-color-primary-brand-b-light);
216
+ --color-secondary: var(--collections-testing-color-secondary-brand-b-light);
217
+ --foo-bar: var(--collections-testing-foo-bar-brand-b-light);
218
+ --test-dimension: var(--collections-testing-test-dimension-brand-b-light);
219
+ --test-primary: var(--collections-testing-test-primary-brand-b-light);
220
+ --test-secondary: var(--collections-testing-test-secondary-brand-b-light);
166
221
  }
167
222
 
168
- [data-collections-brands='brandBDark'] {
169
- --color-color: var(--collections-brands-color-color-brand-b-dark);
170
- --color-color-1: var(--collections-brands-color-color-1-brand-b-dark);
171
- --color-font-weight: var(--collections-brands-color-font-weight-brand-b-dark);
172
- --color-primary: var(--collections-brands-color-primary-brand-b-dark);
173
- --color-secondary: var(--collections-brands-color-secondary-brand-b-dark);
174
- --foo-bar: var(--collections-brands-foo-bar-brand-b-dark);
175
- --test-dimension: var(--collections-brands-test-dimension-brand-b-dark);
176
- --test-primary: var(--collections-brands-test-primary-brand-b-dark);
177
- --test-secondary: var(--collections-brands-test-secondary-brand-b-dark);
223
+ [data-collections-testing='brandBDark'] {
224
+ --color-color: var(--collections-testing-color-color-brand-b-dark);
225
+ --color-color-1: var(--collections-testing-color-color-1-brand-b-dark);
226
+ --color-font-weight: var(
227
+ --collections-testing-color-font-weight-brand-b-dark
228
+ );
229
+ --color-primary: var(--collections-testing-color-primary-brand-b-dark);
230
+ --color-secondary: var(--collections-testing-color-secondary-brand-b-dark);
231
+ --foo-bar: var(--collections-testing-foo-bar-brand-b-dark);
232
+ --test-dimension: var(--collections-testing-test-dimension-brand-b-dark);
233
+ --test-primary: var(--collections-testing-test-primary-brand-b-dark);
234
+ --test-secondary: var(--collections-testing-test-secondary-brand-b-dark);
178
235
  }
179
236
 
180
237
  :root,
181
- [data-collections-density='comfortable'] {
182
- --spacing-large: var(--collections-density-spacing-large-comfortable);
183
- --spacing-medium: var(--collections-density-spacing-medium-comfortable);
184
- --spacing-small: var(--collections-density-spacing-small-comfortable);
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);
185
245
  }
186
246
 
187
- [data-collections-density='compact'] {
188
- --spacing-large: var(--collections-density-spacing-large-compact);
189
- --spacing-medium: var(--collections-density-spacing-medium-compact);
190
- --spacing-small: var(--collections-density-spacing-small-compact);
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);
191
254
  }
package/dist/design-tokens.css CHANGED
@@ -7,54 +7,74 @@
7
7
  --breakpoint-xlarge: 992px;
8
8
  --breakpoint-xxlarge: 1240px;
9
9
  --breakpoint-xxxlarge: 1440px;
10
- --collections-brands-color-color-brand-a-dark: #000000;
11
- --collections-brands-color-color-brand-a-light: #000000;
12
- --collections-brands-color-color-brand-b-dark: #000000;
13
- --collections-brands-color-color-brand-b-light: #000000;
14
- --collections-brands-color-color-1-brand-a-dark: #000000;
15
- --collections-brands-color-color-1-brand-a-light: #000000;
16
- --collections-brands-color-color-1-brand-b-dark: #000000;
17
- --collections-brands-color-color-1-brand-b-light: #000000;
18
- --collections-brands-color-font-weight-brand-a-dark: 400;
19
- --collections-brands-color-font-weight-brand-a-light: 400;
20
- --collections-brands-color-font-weight-brand-b-dark: 400;
21
- --collections-brands-color-font-weight-brand-b-light: 400;
22
- --collections-brands-color-primary-brand-a-dark: #0a13f7;
23
- --collections-brands-color-primary-brand-a-light: #3ed93f;
24
- --collections-brands-color-primary-brand-b-dark: var(--color-pink-800);
25
- --collections-brands-color-primary-brand-b-light: var(--color-pink-400);
26
- --collections-brands-color-secondary-brand-a-dark: var(--color-pink-500);
27
- --collections-brands-color-secondary-brand-a-light: var(--color-pink-500);
28
- --collections-brands-color-secondary-brand-b-dark: var(--color-purple-500);
29
- --collections-brands-color-secondary-brand-b-light: var(--color-purple-500);
30
- --collections-brands-foo-bar-brand-a-dark: 1px;
31
- --collections-brands-foo-bar-brand-a-light: 1px;
32
- --collections-brands-foo-bar-brand-b-dark: 1px;
33
- --collections-brands-foo-bar-brand-b-light: 1px;
34
- --collections-brands-test-dimension-brand-a-dark: 2px;
35
- --collections-brands-test-dimension-brand-a-light: 2px;
36
- --collections-brands-test-dimension-brand-b-dark: 2px;
37
- --collections-brands-test-dimension-brand-b-light: 2px;
38
- --collections-brands-test-primary-brand-a-dark: var(
10
+ --collections-density-spacing-large-compact: var(--spacing-scale-4);
11
+ --collections-density-spacing-large-cozy: var(--spacing-scale-5);
12
+ --collections-density-spacing-medium-compact: var(--spacing-scale-3);
13
+ --collections-density-spacing-medium-cozy: var(--spacing-scale-4);
14
+ --collections-density-spacing-small-compact: var(--spacing-scale-2);
15
+ --collections-density-spacing-small-cozy: var(--spacing-scale-3);
16
+ --collections-density-spacing-xlarge-compact: var(--spacing-scale-5);
17
+ --collections-density-spacing-xlarge-cozy: var(--spacing-scale-6);
18
+ --collections-density-spacing-xsmall-compact: var(--spacing-scale-1);
19
+ --collections-density-spacing-xsmall-cozy: var(--spacing-scale-2);
20
+ --collections-density-spacing-xxlarge-compact: var(--spacing-scale-7);
21
+ --collections-density-spacing-xxlarge-cozy: var(--spacing-scale-8);
22
+ --collections-density-spacing-xxxlarge-compact: var(--spacing-scale-8);
23
+ --collections-density-spacing-xxxlarge-cozy: var(--spacing-scale-10);
24
+ --collections-testing-color-color-brand-a-dark: #000000;
25
+ --collections-testing-color-color-brand-a-light: #000000;
26
+ --collections-testing-color-color-brand-b-dark: #000000;
27
+ --collections-testing-color-color-brand-b-light: #000000;
28
+ --collections-testing-color-color-1-brand-a-dark: #000000;
29
+ --collections-testing-color-color-1-brand-a-light: #000000;
30
+ --collections-testing-color-color-1-brand-b-dark: #000000;
31
+ --collections-testing-color-color-1-brand-b-light: #000000;
32
+ --collections-testing-color-font-weight-brand-a-dark: 400;
33
+ --collections-testing-color-font-weight-brand-a-light: 400;
34
+ --collections-testing-color-font-weight-brand-b-dark: 400;
35
+ --collections-testing-color-font-weight-brand-b-light: 400;
36
+ --collections-testing-color-primary-brand-a-dark: #0a13f7;
37
+ --collections-testing-color-primary-brand-a-light: #3ed93f;
38
+ --collections-testing-color-primary-brand-b-dark: var(--color-pink-800);
39
+ --collections-testing-color-primary-brand-b-light: var(--color-pink-400);
40
+ --collections-testing-color-secondary-brand-a-dark: var(--color-pink-500);
41
+ --collections-testing-color-secondary-brand-a-light: var(--color-pink-500);
42
+ --collections-testing-color-secondary-brand-b-dark: var(--color-purple-500);
43
+ --collections-testing-color-secondary-brand-b-light: var(--color-purple-500);
44
+ --collections-testing-foo-bar-brand-a-dark: 1px;
45
+ --collections-testing-foo-bar-brand-a-light: 1px;
46
+ --collections-testing-foo-bar-brand-b-dark: 1px;
47
+ --collections-testing-foo-bar-brand-b-light: 1px;
48
+ --collections-testing-test-dimension-brand-a-dark: 2px;
49
+ --collections-testing-test-dimension-brand-a-light: 2px;
50
+ --collections-testing-test-dimension-brand-b-dark: 2px;
51
+ --collections-testing-test-dimension-brand-b-light: 2px;
52
+ --collections-testing-test-primary-brand-a-dark: var(
39
53
  --collections-density-spacing-small-compact
40
54
  );
41
- --collections-brands-test-primary-brand-a-light: var(--spacing-scale-8);
42
- --collections-brands-test-primary-brand-b-dark: var(
55
+ --collections-testing-test-primary-brand-a-light: var(--spacing-scale-8);
56
+ --collections-testing-test-primary-brand-b-dark: var(
43
57
  --collections-density-spacing-small-compact
44
58
  );
45
- --collections-brands-test-primary-brand-b-light: var(
59
+ --collections-testing-test-primary-brand-b-light: var(
46
60
  --collections-density-spacing-small-compact
47
61
  );
48
- --collections-brands-test-secondary-brand-a-dark: #cc2020;
49
- --collections-brands-test-secondary-brand-a-light: #cc2020;
50
- --collections-brands-test-secondary-brand-b-dark: var(--color-neutral-600);
51
- --collections-brands-test-secondary-brand-b-light: var(--color-neutral-300);
52
- --collections-density-spacing-large-comfortable: var(--spacing-scale-8);
53
- --collections-density-spacing-large-compact: var(--spacing-scale-5);
54
- --collections-density-spacing-medium-comfortable: var(--spacing-scale-6);
55
- --collections-density-spacing-medium-compact: var(--spacing-scale-5);
56
- --collections-density-spacing-small-comfortable: var(--spacing-scale-3);
57
- --collections-density-spacing-small-compact: var(--spacing-scale-2);
62
+ --collections-testing-test-secondary-brand-a-dark: #cc2020;
63
+ --collections-testing-test-secondary-brand-a-light: #cc2020;
64
+ --collections-testing-test-secondary-brand-b-dark: var(--color-neutral-600);
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;
58
78
  --color-black: var(--color-neutral-800);
59
79
  --color-white: #ffffff;
60
80
  --color-neutral-100: #fafafb;
@@ -102,6 +122,18 @@
102
122
  --radius-medium: 8px;
103
123
  --radius-round: 160px;
104
124
  --radius-small: 4px;
125
+ --sandbox-color-brand: #7a34ed;
126
+ --sandbox-color-error: #ff5c46;
127
+ --sandbox-color-success: #6bc313;
128
+ --sandbox-color-warning: #fab120;
129
+ --sandbox-color-white: #ffffff;
130
+ --sandbox-radius-large: 16px;
131
+ --sandbox-radius-medium: 8px;
132
+ --sandbox-radius-small: 4px;
133
+ --sandbox-radius-xlarge: 32px;
134
+ --sandbox-radius-xsmall: 2px;
135
+ --sandbox-width-narrow: 640px;
136
+ --sandbox-width-wide: 1080px;
105
137
  --shadow-1: 0px 5px 10px 0px #000000;
106
138
  --shadow-2: 0px 10px 20px 0px #000000;
107
139
  --shadow-3: 0px 15px 25px 0px #000000;