@knapsack/sandbox-tokens 4.54.6--canary.4077.4d2b71a.0 → 4.54.6--canary.4097.9bae10e.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.mjs CHANGED
@@ -8,59 +8,85 @@ export const breakpointSmall = '330px';
8
8
  export const breakpointXlarge = '992px';
9
9
  export const breakpointXxlarge = '1240px';
10
10
  export const breakpointXxxlarge = '1440px';
11
- export const collectionsBrandsColorColorBrandADark = '#000000';
12
- export const collectionsBrandsColorColorBrandALight = '#000000';
13
- export const collectionsBrandsColorColorBrandBDark = '#000000';
14
- export const collectionsBrandsColorColorBrandBLight = '#000000';
15
- export const collectionsBrandsColorColor1BrandADark = '#000000';
16
- export const collectionsBrandsColorColor1BrandALight = '#000000';
17
- export const collectionsBrandsColorColor1BrandBDark = '#000000';
18
- export const collectionsBrandsColorColor1BrandBLight = '#000000';
19
- export const collectionsBrandsColorFontWeightBrandADark = 400;
20
- export const collectionsBrandsColorFontWeightBrandALight = 400;
21
- export const collectionsBrandsColorFontWeightBrandBDark = 400;
22
- export const collectionsBrandsColorFontWeightBrandBLight = 400;
23
- export const collectionsBrandsColorPrimaryBrandADark = '#0a13f7';
24
- export const collectionsBrandsColorPrimaryBrandALight = '#3ed93f';
11
+ export const spacingScale4 = '12px';
12
+ export const collectionsDensitySpacingLargeCompact = '12px';
13
+ export const spacingScale5 = '16px';
14
+ export const collectionsDensitySpacingLargeCozy = '16px';
15
+ export const spacingScale3 = '8px';
16
+ export const collectionsDensitySpacingMediumCompact = '8px';
17
+ export const collectionsDensitySpacingMediumCozy = '12px';
18
+ export const spacingScale2 = '4px';
19
+ export const collectionsDensitySpacingSmallCompact = '4px';
20
+ export const collectionsDensitySpacingSmallCozy = '8px';
21
+ export const collectionsDensitySpacingXlargeCompact = '16px';
22
+ export const spacingScale6 = '24px';
23
+ export const collectionsDensitySpacingXlargeCozy = '24px';
24
+ export const spacingScale1 = '2px';
25
+ export const collectionsDensitySpacingXsmallCompact = '2px';
26
+ export const collectionsDensitySpacingXsmallCozy = '4px';
27
+ export const spacingScale7 = '32px';
28
+ export const collectionsDensitySpacingXxlargeCompact = '32px';
29
+ export const spacingScale8 = '40px';
30
+ export const collectionsDensitySpacingXxlargeCozy = '40px';
31
+ export const collectionsDensitySpacingXxxlargeCompact = '40px';
32
+ export const spacingScale10 = '64px';
33
+ export const collectionsDensitySpacingXxxlargeCozy = '64px';
34
+ export const collectionsTestingColorColorBrandADark = '#000000';
35
+ export const collectionsTestingColorColorBrandALight = '#000000';
36
+ export const collectionsTestingColorColorBrandBDark = '#000000';
37
+ export const collectionsTestingColorColorBrandBLight = '#000000';
38
+ export const collectionsTestingColorColor1BrandADark = '#000000';
39
+ export const collectionsTestingColorColor1BrandALight = '#000000';
40
+ export const collectionsTestingColorColor1BrandBDark = '#000000';
41
+ export const collectionsTestingColorColor1BrandBLight = '#000000';
42
+ export const collectionsTestingColorFontWeightBrandADark = 400;
43
+ export const collectionsTestingColorFontWeightBrandALight = 400;
44
+ export const collectionsTestingColorFontWeightBrandBDark = 400;
45
+ export const collectionsTestingColorFontWeightBrandBLight = 400;
46
+ export const collectionsTestingColorPrimaryBrandADark = '#0a13f7';
47
+ export const collectionsTestingColorPrimaryBrandALight = '#3ed93f';
25
48
  export const colorPink800 = '#710D55';
26
- export const collectionsBrandsColorPrimaryBrandBDark = '#710D55';
49
+ export const collectionsTestingColorPrimaryBrandBDark = '#710D55';
27
50
  export const colorPink400 = '#F37491';
28
- export const collectionsBrandsColorPrimaryBrandBLight = '#F37491';
51
+ export const collectionsTestingColorPrimaryBrandBLight = '#F37491';
29
52
  export const colorPink500 = '#EC487D';
30
- export const collectionsBrandsColorSecondaryBrandADark = '#EC487D';
31
- export const collectionsBrandsColorSecondaryBrandALight = '#EC487D';
53
+ export const collectionsTestingColorSecondaryBrandADark = '#EC487D';
54
+ export const collectionsTestingColorSecondaryBrandALight = '#EC487D';
32
55
  export const colorPurple500 = '#6A4CEC';
33
- export const collectionsBrandsColorSecondaryBrandBDark = '#6A4CEC';
34
- export const collectionsBrandsColorSecondaryBrandBLight = '#6A4CEC';
35
- export const collectionsBrandsFooBarBrandADark = '1px';
36
- export const collectionsBrandsFooBarBrandALight = '1px';
37
- export const collectionsBrandsFooBarBrandBDark = '1px';
38
- export const collectionsBrandsFooBarBrandBLight = '1px';
39
- export const collectionsBrandsTestDimensionBrandADark = '2px';
40
- export const collectionsBrandsTestDimensionBrandALight = '2px';
41
- export const collectionsBrandsTestDimensionBrandBDark = '2px';
42
- export const collectionsBrandsTestDimensionBrandBLight = '2px';
43
- export const spacingScale2 = '4px';
44
- export const collectionsDensitySpacingSmallCompact = '4px';
45
- export const collectionsBrandsTestPrimaryBrandADark = '4px';
46
- export const spacingScale8 = '40px';
47
- export const collectionsBrandsTestPrimaryBrandALight = '40px';
48
- export const collectionsBrandsTestPrimaryBrandBDark = '4px';
49
- export const collectionsBrandsTestPrimaryBrandBLight = '4px';
50
- export const collectionsBrandsTestSecondaryBrandADark = '#cc2020';
51
- export const collectionsBrandsTestSecondaryBrandALight = '#cc2020';
56
+ export const collectionsTestingColorSecondaryBrandBDark = '#6A4CEC';
57
+ export const collectionsTestingColorSecondaryBrandBLight = '#6A4CEC';
58
+ export const collectionsTestingFooBarBrandADark = '1px';
59
+ export const collectionsTestingFooBarBrandALight = '1px';
60
+ export const collectionsTestingFooBarBrandBDark = '1px';
61
+ export const collectionsTestingFooBarBrandBLight = '1px';
62
+ export const collectionsTestingTestDimensionBrandADark = '2px';
63
+ export const collectionsTestingTestDimensionBrandALight = '2px';
64
+ export const collectionsTestingTestDimensionBrandBDark = '2px';
65
+ export const collectionsTestingTestDimensionBrandBLight = '2px';
66
+ export const collectionsTestingTestPrimaryBrandADark = '4px';
67
+ export const collectionsTestingTestPrimaryBrandALight = '40px';
68
+ export const collectionsTestingTestPrimaryBrandBDark = '4px';
69
+ export const collectionsTestingTestPrimaryBrandBLight = '4px';
70
+ export const collectionsTestingTestSecondaryBrandADark = '#cc2020';
71
+ export const collectionsTestingTestSecondaryBrandALight = '#cc2020';
52
72
  export const colorNeutral600 = '#ACAAB6';
53
- export const collectionsBrandsTestSecondaryBrandBDark = '#ACAAB6';
73
+ export const collectionsTestingTestSecondaryBrandBDark = '#ACAAB6';
54
74
  export const colorNeutral300 = '#EDECEF';
55
- export const collectionsBrandsTestSecondaryBrandBLight = '#EDECEF';
56
- export const collectionsDensitySpacingLargeComfortable = '40px';
57
- export const spacingScale5 = '16px';
58
- export const collectionsDensitySpacingLargeCompact = '16px';
59
- export const spacingScale6 = '24px';
60
- export const collectionsDensitySpacingMediumComfortable = '24px';
61
- export const collectionsDensitySpacingMediumCompact = '16px';
62
- export const spacingScale3 = '8px';
63
- export const collectionsDensitySpacingSmallComfortable = '8px';
75
+ export const collectionsTestingTestSecondaryBrandBLight = '#EDECEF';
76
+ export const sandboxColorBrand = '#7A34ED';
77
+ export const collectionsThemeActionBaseDark = '#7A34ED';
78
+ export const collectionsThemeActionBaseLight = '#7A34ED';
79
+ export const sandboxColorWhite = '#ffffff';
80
+ export const collectionsThemeActionTextDark = '#ffffff';
81
+ export const collectionsThemeActionTextLight = '#ffffff';
82
+ export const collectionsThemeBackgroundContentDark = '#3B3644';
83
+ export const collectionsThemeBackgroundContentLight = '#FFFFFF';
84
+ export const collectionsThemeBackgroundPageDark = '#1F1C25';
85
+ export const collectionsThemeBackgroundPageLight = '#FDFCFE';
86
+ export const collectionsThemeTextBaseDark = '#F6F8FF';
87
+ export const collectionsThemeTextBaseLight = '#191F2C';
88
+ export const collectionsThemeTextSubtleDark = '#BEC3D3';
89
+ export const collectionsThemeTextSubtleLight = '#6E7A82';
64
90
  export const colorNeutral800 = '#191335';
65
91
  export const colorBlack = '#191335';
66
92
  export const colorWhite = '#ffffff';
@@ -100,16 +126,22 @@ export const miscSomeText = 'Hello world';
100
126
  export const radiusMedium = '8px';
101
127
  export const radiusRound = '160px';
102
128
  export const radiusSmall = '4px';
129
+ export const sandboxColorError = '#FF5C46';
130
+ export const sandboxColorSuccess = '#6BC313';
131
+ export const sandboxColorWarning = '#FAB120';
132
+ export const sandboxRadiusLarge = '16px';
133
+ export const sandboxRadiusMedium = '8px';
134
+ export const sandboxRadiusSmall = '4px';
135
+ export const sandboxRadiusXlarge = '32px';
136
+ export const sandboxRadiusXsmall = '2px';
137
+ export const sandboxWidthNarrow = '640px';
138
+ export const sandboxWidthWide = '1080px';
103
139
  export const shadow1 = '0px 5px 10px 0px #000000';
104
140
  export const shadow2 = '0px 10px 20px 0px #000000';
105
141
  export const shadow3 = '0px 15px 25px 0px #000000';
106
142
  export const shadow4 = '0px 20px 40px 0px #000000';
107
143
  export const shadowColor = '#000000';
108
- export const spacingScale1 = '2px';
109
- export const spacingScale4 = '12px';
110
- export const spacingScale7 = '32px';
111
144
  export const spacingScale9 = '48px';
112
- export const spacingScale10 = '64px';
113
145
  export const spacingScale11 = '80px';
114
146
  export const spacingScale12 = '96px';
115
147
  export const spacingScale13 = '160px';
package/dist/design-tokens.nested.json CHANGED
@@ -12,7 +12,39 @@
12
12
  "xxxlarge": "1440px"
13
13
  },
14
14
  "collections": {
15
- "brands": {
15
+ "density": {
16
+ "spacing": {
17
+ "large": {
18
+ "compact": "12px",
19
+ "cozy": "16px"
20
+ },
21
+ "medium": {
22
+ "compact": "8px",
23
+ "cozy": "12px"
24
+ },
25
+ "small": {
26
+ "compact": "4px",
27
+ "cozy": "8px"
28
+ },
29
+ "xlarge": {
30
+ "compact": "16px",
31
+ "cozy": "24px"
32
+ },
33
+ "xsmall": {
34
+ "compact": "2px",
35
+ "cozy": "4px"
36
+ },
37
+ "xxlarge": {
38
+ "compact": "32px",
39
+ "cozy": "40px"
40
+ },
41
+ "xxxlarge": {
42
+ "compact": "40px",
43
+ "cozy": "64px"
44
+ }
45
+ }
46
+ },
47
+ "testing": {
16
48
  "color": {
17
49
  "color": {
18
50
  "brandADark": "#000000",
@@ -74,19 +106,35 @@
74
106
  }
75
107
  }
76
108
  },
77
- "density": {
78
- "spacing": {
79
- "large": {
80
- "comfortable": "40px",
81
- "compact": "16px"
109
+ "theme": {
110
+ "action": {
111
+ "base": {
112
+ "dark": "#7A34ED",
113
+ "light": "#7A34ED"
82
114
  },
83
- "medium": {
84
- "comfortable": "24px",
85
- "compact": "16px"
115
+ "text": {
116
+ "dark": "#ffffff",
117
+ "light": "#ffffff"
118
+ }
119
+ },
120
+ "background": {
121
+ "content": {
122
+ "dark": "#3B3644",
123
+ "light": "#FFFFFF"
86
124
  },
87
- "small": {
88
- "comfortable": "8px",
89
- "compact": "4px"
125
+ "page": {
126
+ "dark": "#1F1C25",
127
+ "light": "#FDFCFE"
128
+ }
129
+ },
130
+ "text": {
131
+ "base": {
132
+ "dark": "#F6F8FF",
133
+ "light": "#191F2C"
134
+ },
135
+ "subtle": {
136
+ "dark": "#BEC3D3",
137
+ "light": "#6E7A82"
90
138
  }
91
139
  }
92
140
  }
@@ -158,6 +206,26 @@
158
206
  "round": "160px",
159
207
  "small": "4px"
160
208
  },
209
+ "sandbox": {
210
+ "color": {
211
+ "brand": "#7A34ED",
212
+ "error": "#FF5C46",
213
+ "success": "#6BC313",
214
+ "warning": "#FAB120",
215
+ "white": "#ffffff"
216
+ },
217
+ "radius": {
218
+ "large": "16px",
219
+ "medium": "8px",
220
+ "small": "4px",
221
+ "xlarge": "32px",
222
+ "xsmall": "2px"
223
+ },
224
+ "width": {
225
+ "narrow": "640px",
226
+ "wide": "1080px"
227
+ }
228
+ },
161
229
  "shadow": {
162
230
  "1": "0px 5px 10px 0px #000000",
163
231
  "2": "0px 10px 20px 0px #000000",
package/dist/design-tokens.scss CHANGED
@@ -8,59 +8,85 @@ $breakpoint-small: 330px;
8
8
  $breakpoint-xlarge: 992px;
9
9
  $breakpoint-xxlarge: 1240px;
10
10
  $breakpoint-xxxlarge: 1440px;
11
- $collections-brands-color-color-brand-a-dark: #000000;
12
- $collections-brands-color-color-brand-a-light: #000000;
13
- $collections-brands-color-color-brand-b-dark: #000000;
14
- $collections-brands-color-color-brand-b-light: #000000;
15
- $collections-brands-color-color-1-brand-a-dark: #000000;
16
- $collections-brands-color-color-1-brand-a-light: #000000;
17
- $collections-brands-color-color-1-brand-b-dark: #000000;
18
- $collections-brands-color-color-1-brand-b-light: #000000;
19
- $collections-brands-color-font-weight-brand-a-dark: 400;
20
- $collections-brands-color-font-weight-brand-a-light: 400;
21
- $collections-brands-color-font-weight-brand-b-dark: 400;
22
- $collections-brands-color-font-weight-brand-b-light: 400;
23
- $collections-brands-color-primary-brand-a-dark: #0a13f7;
24
- $collections-brands-color-primary-brand-a-light: #3ed93f;
11
+ $spacing-scale-4: 12px;
12
+ $collections-density-spacing-large-compact: $spacing-scale-4;
13
+ $spacing-scale-5: 16px;
14
+ $collections-density-spacing-large-cozy: $spacing-scale-5;
15
+ $spacing-scale-3: 8px;
16
+ $collections-density-spacing-medium-compact: $spacing-scale-3;
17
+ $collections-density-spacing-medium-cozy: $spacing-scale-4;
18
+ $spacing-scale-2: 4px;
19
+ $collections-density-spacing-small-compact: $spacing-scale-2;
20
+ $collections-density-spacing-small-cozy: $spacing-scale-3;
21
+ $collections-density-spacing-xlarge-compact: $spacing-scale-5;
22
+ $spacing-scale-6: 24px;
23
+ $collections-density-spacing-xlarge-cozy: $spacing-scale-6;
24
+ $spacing-scale-1: 2px;
25
+ $collections-density-spacing-xsmall-compact: $spacing-scale-1;
26
+ $collections-density-spacing-xsmall-cozy: $spacing-scale-2;
27
+ $spacing-scale-7: 32px;
28
+ $collections-density-spacing-xxlarge-compact: $spacing-scale-7;
29
+ $spacing-scale-8: 40px;
30
+ $collections-density-spacing-xxlarge-cozy: $spacing-scale-8;
31
+ $collections-density-spacing-xxxlarge-compact: $spacing-scale-8;
32
+ $spacing-scale-10: 64px;
33
+ $collections-density-spacing-xxxlarge-cozy: $spacing-scale-10;
34
+ $collections-testing-color-color-brand-a-dark: #000000;
35
+ $collections-testing-color-color-brand-a-light: #000000;
36
+ $collections-testing-color-color-brand-b-dark: #000000;
37
+ $collections-testing-color-color-brand-b-light: #000000;
38
+ $collections-testing-color-color-1-brand-a-dark: #000000;
39
+ $collections-testing-color-color-1-brand-a-light: #000000;
40
+ $collections-testing-color-color-1-brand-b-dark: #000000;
41
+ $collections-testing-color-color-1-brand-b-light: #000000;
42
+ $collections-testing-color-font-weight-brand-a-dark: 400;
43
+ $collections-testing-color-font-weight-brand-a-light: 400;
44
+ $collections-testing-color-font-weight-brand-b-dark: 400;
45
+ $collections-testing-color-font-weight-brand-b-light: 400;
46
+ $collections-testing-color-primary-brand-a-dark: #0a13f7;
47
+ $collections-testing-color-primary-brand-a-light: #3ed93f;
25
48
  $color-pink-800: #710d55;
26
- $collections-brands-color-primary-brand-b-dark: $color-pink-800;
49
+ $collections-testing-color-primary-brand-b-dark: $color-pink-800;
27
50
  $color-pink-400: #f37491;
28
- $collections-brands-color-primary-brand-b-light: $color-pink-400;
51
+ $collections-testing-color-primary-brand-b-light: $color-pink-400;
29
52
  $color-pink-500: #ec487d;
30
- $collections-brands-color-secondary-brand-a-dark: $color-pink-500;
31
- $collections-brands-color-secondary-brand-a-light: $color-pink-500;
53
+ $collections-testing-color-secondary-brand-a-dark: $color-pink-500;
54
+ $collections-testing-color-secondary-brand-a-light: $color-pink-500;
32
55
  $color-purple-500: #6a4cec;
33
- $collections-brands-color-secondary-brand-b-dark: $color-purple-500;
34
- $collections-brands-color-secondary-brand-b-light: $color-purple-500;
35
- $collections-brands-foo-bar-brand-a-dark: 1px;
36
- $collections-brands-foo-bar-brand-a-light: 1px;
37
- $collections-brands-foo-bar-brand-b-dark: 1px;
38
- $collections-brands-foo-bar-brand-b-light: 1px;
39
- $collections-brands-test-dimension-brand-a-dark: 2px;
40
- $collections-brands-test-dimension-brand-a-light: 2px;
41
- $collections-brands-test-dimension-brand-b-dark: 2px;
42
- $collections-brands-test-dimension-brand-b-light: 2px;
43
- $spacing-scale-2: 4px;
44
- $collections-density-spacing-small-compact: $spacing-scale-2;
45
- $collections-brands-test-primary-brand-a-dark: $collections-density-spacing-small-compact;
46
- $spacing-scale-8: 40px;
47
- $collections-brands-test-primary-brand-a-light: $spacing-scale-8;
48
- $collections-brands-test-primary-brand-b-dark: $collections-density-spacing-small-compact;
49
- $collections-brands-test-primary-brand-b-light: $collections-density-spacing-small-compact;
50
- $collections-brands-test-secondary-brand-a-dark: #cc2020;
51
- $collections-brands-test-secondary-brand-a-light: #cc2020;
56
+ $collections-testing-color-secondary-brand-b-dark: $color-purple-500;
57
+ $collections-testing-color-secondary-brand-b-light: $color-purple-500;
58
+ $collections-testing-foo-bar-brand-a-dark: 1px;
59
+ $collections-testing-foo-bar-brand-a-light: 1px;
60
+ $collections-testing-foo-bar-brand-b-dark: 1px;
61
+ $collections-testing-foo-bar-brand-b-light: 1px;
62
+ $collections-testing-test-dimension-brand-a-dark: 2px;
63
+ $collections-testing-test-dimension-brand-a-light: 2px;
64
+ $collections-testing-test-dimension-brand-b-dark: 2px;
65
+ $collections-testing-test-dimension-brand-b-light: 2px;
66
+ $collections-testing-test-primary-brand-a-dark: $collections-density-spacing-small-compact;
67
+ $collections-testing-test-primary-brand-a-light: $spacing-scale-8;
68
+ $collections-testing-test-primary-brand-b-dark: $collections-density-spacing-small-compact;
69
+ $collections-testing-test-primary-brand-b-light: $collections-density-spacing-small-compact;
70
+ $collections-testing-test-secondary-brand-a-dark: #cc2020;
71
+ $collections-testing-test-secondary-brand-a-light: #cc2020;
52
72
  $color-neutral-600: #acaab6;
53
- $collections-brands-test-secondary-brand-b-dark: $color-neutral-600;
73
+ $collections-testing-test-secondary-brand-b-dark: $color-neutral-600;
54
74
  $color-neutral-300: #edecef;
55
- $collections-brands-test-secondary-brand-b-light: $color-neutral-300;
56
- $collections-density-spacing-large-comfortable: $spacing-scale-8;
57
- $spacing-scale-5: 16px;
58
- $collections-density-spacing-large-compact: $spacing-scale-5;
59
- $spacing-scale-6: 24px;
60
- $collections-density-spacing-medium-comfortable: $spacing-scale-6;
61
- $collections-density-spacing-medium-compact: $spacing-scale-5;
62
- $spacing-scale-3: 8px;
63
- $collections-density-spacing-small-comfortable: $spacing-scale-3;
75
+ $collections-testing-test-secondary-brand-b-light: $color-neutral-300;
76
+ $sandbox-color-brand: #7a34ed;
77
+ $collections-theme-action-base-dark: $sandbox-color-brand;
78
+ $collections-theme-action-base-light: $sandbox-color-brand;
79
+ $sandbox-color-white: #ffffff;
80
+ $collections-theme-action-text-dark: $sandbox-color-white;
81
+ $collections-theme-action-text-light: $sandbox-color-white;
82
+ $collections-theme-background-content-dark: #3b3644;
83
+ $collections-theme-background-content-light: #ffffff;
84
+ $collections-theme-background-page-dark: #1f1c25;
85
+ $collections-theme-background-page-light: #fdfcfe;
86
+ $collections-theme-text-base-dark: #f6f8ff;
87
+ $collections-theme-text-base-light: #191f2c;
88
+ $collections-theme-text-subtle-dark: #bec3d3;
89
+ $collections-theme-text-subtle-light: #6e7a82;
64
90
  $color-neutral-800: #191335;
65
91
  $color-black: $color-neutral-800;
66
92
  $color-white: #ffffff;
@@ -109,16 +135,22 @@ $misc-some-text: Hello world;
109
135
  $radius-medium: 8px;
110
136
  $radius-round: 160px;
111
137
  $radius-small: 4px;
138
+ $sandbox-color-error: #ff5c46;
139
+ $sandbox-color-success: #6bc313;
140
+ $sandbox-color-warning: #fab120;
141
+ $sandbox-radius-large: 16px;
142
+ $sandbox-radius-medium: 8px;
143
+ $sandbox-radius-small: 4px;
144
+ $sandbox-radius-xlarge: 32px;
145
+ $sandbox-radius-xsmall: 2px;
146
+ $sandbox-width-narrow: 640px;
147
+ $sandbox-width-wide: 1080px;
112
148
  $shadow-1: 0px 5px 10px 0px #000000;
113
149
  $shadow-2: 0px 10px 20px 0px #000000;
114
150
  $shadow-3: 0px 15px 25px 0px #000000;
115
151
  $shadow-4: 0px 20px 40px 0px #000000;
116
152
  $shadow-color: #000000;
117
- $spacing-scale-1: 2px;
118
- $spacing-scale-4: 12px;
119
- $spacing-scale-7: 32px;
120
153
  $spacing-scale-9: 48px;
121
- $spacing-scale-10: 64px;
122
154
  $spacing-scale-11: 80px;
123
155
  $spacing-scale-12: 96px;
124
156
  $spacing-scale-13: 160px;
@@ -138,81 +170,129 @@ $tokens: (
138
170
  'xxxlarge': $breakpoint-xxxlarge,
139
171
  ),
140
172
  'collections': (
141
- 'brands': (
173
+ 'density': (
174
+ 'spacing': (
175
+ 'large': (
176
+ 'compact': $collections-density-spacing-large-compact,
177
+ 'cozy': $collections-density-spacing-large-cozy,
178
+ ),
179
+ 'medium': (
180
+ 'compact': $collections-density-spacing-medium-compact,
181
+ 'cozy': $collections-density-spacing-medium-cozy,
182
+ ),
183
+ 'small': (
184
+ 'compact': $collections-density-spacing-small-compact,
185
+ 'cozy': $collections-density-spacing-small-cozy,
186
+ ),
187
+ 'xlarge': (
188
+ 'compact': $collections-density-spacing-xlarge-compact,
189
+ 'cozy': $collections-density-spacing-xlarge-cozy,
190
+ ),
191
+ 'xsmall': (
192
+ 'compact': $collections-density-spacing-xsmall-compact,
193
+ 'cozy': $collections-density-spacing-xsmall-cozy,
194
+ ),
195
+ 'xxlarge': (
196
+ 'compact': $collections-density-spacing-xxlarge-compact,
197
+ 'cozy': $collections-density-spacing-xxlarge-cozy,
198
+ ),
199
+ 'xxxlarge': (
200
+ 'compact': $collections-density-spacing-xxxlarge-compact,
201
+ 'cozy': $collections-density-spacing-xxxlarge-cozy,
202
+ ),
203
+ ),
204
+ ),
205
+ 'testing': (
142
206
  'color': (
143
207
  'color': (
144
- 'brandADark': $collections-brands-color-color-brand-a-dark,
145
- 'brandALight': $collections-brands-color-color-brand-a-light,
146
- 'brandBDark': $collections-brands-color-color-brand-b-dark,
147
- 'brandBLight': $collections-brands-color-color-brand-b-light,
208
+ 'brandADark': $collections-testing-color-color-brand-a-dark,
209
+ 'brandALight': $collections-testing-color-color-brand-a-light,
210
+ 'brandBDark': $collections-testing-color-color-brand-b-dark,
211
+ 'brandBLight': $collections-testing-color-color-brand-b-light,
148
212
  ),
149
213
  'color 1': (
150
- 'brandADark': $collections-brands-color-color-1-brand-a-dark,
151
- 'brandALight': $collections-brands-color-color-1-brand-a-light,
152
- 'brandBDark': $collections-brands-color-color-1-brand-b-dark,
153
- 'brandBLight': $collections-brands-color-color-1-brand-b-light,
214
+ 'brandADark': $collections-testing-color-color-1-brand-a-dark,
215
+ 'brandALight': $collections-testing-color-color-1-brand-a-light,
216
+ 'brandBDark': $collections-testing-color-color-1-brand-b-dark,
217
+ 'brandBLight': $collections-testing-color-color-1-brand-b-light,
154
218
  ),
155
219
  'fontWeight': (
156
- 'brandADark': $collections-brands-color-font-weight-brand-a-dark,
157
- 'brandALight': $collections-brands-color-font-weight-brand-a-light,
158
- 'brandBDark': $collections-brands-color-font-weight-brand-b-dark,
159
- 'brandBLight': $collections-brands-color-font-weight-brand-b-light,
220
+ 'brandADark': $collections-testing-color-font-weight-brand-a-dark,
221
+ 'brandALight': $collections-testing-color-font-weight-brand-a-light,
222
+ 'brandBDark': $collections-testing-color-font-weight-brand-b-dark,
223
+ 'brandBLight': $collections-testing-color-font-weight-brand-b-light,
160
224
  ),
161
225
  'primary': (
162
- 'brandADark': $collections-brands-color-primary-brand-a-dark,
163
- 'brandALight': $collections-brands-color-primary-brand-a-light,
164
- 'brandBDark': $collections-brands-color-primary-brand-b-dark,
165
- 'brandBLight': $collections-brands-color-primary-brand-b-light,
226
+ 'brandADark': $collections-testing-color-primary-brand-a-dark,
227
+ 'brandALight': $collections-testing-color-primary-brand-a-light,
228
+ 'brandBDark': $collections-testing-color-primary-brand-b-dark,
229
+ 'brandBLight': $collections-testing-color-primary-brand-b-light,
166
230
  ),
167
231
  'secondary': (
168
- 'brandADark': $collections-brands-color-secondary-brand-a-dark,
169
- 'brandALight': $collections-brands-color-secondary-brand-a-light,
170
- 'brandBDark': $collections-brands-color-secondary-brand-b-dark,
171
- 'brandBLight': $collections-brands-color-secondary-brand-b-light,
232
+ 'brandADark': $collections-testing-color-secondary-brand-a-dark,
233
+ 'brandALight': $collections-testing-color-secondary-brand-a-light,
234
+ 'brandBDark': $collections-testing-color-secondary-brand-b-dark,
235
+ 'brandBLight': $collections-testing-color-secondary-brand-b-light,
172
236
  ),
173
237
  ),
174
238
  'foo': (
175
239
  'bar': (
176
- 'brandADark': $collections-brands-foo-bar-brand-a-dark,
177
- 'brandALight': $collections-brands-foo-bar-brand-a-light,
178
- 'brandBDark': $collections-brands-foo-bar-brand-b-dark,
179
- 'brandBLight': $collections-brands-foo-bar-brand-b-light,
240
+ 'brandADark': $collections-testing-foo-bar-brand-a-dark,
241
+ 'brandALight': $collections-testing-foo-bar-brand-a-light,
242
+ 'brandBDark': $collections-testing-foo-bar-brand-b-dark,
243
+ 'brandBLight': $collections-testing-foo-bar-brand-b-light,
180
244
  ),
181
245
  ),
182
246
  'test': (
183
247
  'dimension': (
184
- 'brandADark': $collections-brands-test-dimension-brand-a-dark,
185
- 'brandALight': $collections-brands-test-dimension-brand-a-light,
186
- 'brandBDark': $collections-brands-test-dimension-brand-b-dark,
187
- 'brandBLight': $collections-brands-test-dimension-brand-b-light,
248
+ 'brandADark': $collections-testing-test-dimension-brand-a-dark,
249
+ 'brandALight': $collections-testing-test-dimension-brand-a-light,
250
+ 'brandBDark': $collections-testing-test-dimension-brand-b-dark,
251
+ 'brandBLight': $collections-testing-test-dimension-brand-b-light,
188
252
  ),
189
253
  'primary': (
190
- 'brandADark': $collections-brands-test-primary-brand-a-dark,
191
- 'brandALight': $collections-brands-test-primary-brand-a-light,
192
- 'brandBDark': $collections-brands-test-primary-brand-b-dark,
193
- 'brandBLight': $collections-brands-test-primary-brand-b-light,
254
+ 'brandADark': $collections-testing-test-primary-brand-a-dark,
255
+ 'brandALight': $collections-testing-test-primary-brand-a-light,
256
+ 'brandBDark': $collections-testing-test-primary-brand-b-dark,
257
+ 'brandBLight': $collections-testing-test-primary-brand-b-light,
194
258
  ),
195
259
  'secondary': (
196
- 'brandADark': $collections-brands-test-secondary-brand-a-dark,
197
- 'brandALight': $collections-brands-test-secondary-brand-a-light,
198
- 'brandBDark': $collections-brands-test-secondary-brand-b-dark,
199
- 'brandBLight': $collections-brands-test-secondary-brand-b-light,
260
+ 'brandADark': $collections-testing-test-secondary-brand-a-dark,
261
+ 'brandALight': $collections-testing-test-secondary-brand-a-light,
262
+ 'brandBDark': $collections-testing-test-secondary-brand-b-dark,
263
+ 'brandBLight': $collections-testing-test-secondary-brand-b-light,
200
264
  ),
201
265
  ),
202
266
  ),
203
- 'density': (
204
- 'spacing': (
205
- 'large': (
206
- 'comfortable': $collections-density-spacing-large-comfortable,
207
- 'compact': $collections-density-spacing-large-compact,
267
+ 'theme': (
268
+ 'action': (
269
+ 'base': (
270
+ 'dark': $collections-theme-action-base-dark,
271
+ 'light': $collections-theme-action-base-light,
208
272
  ),
209
- 'medium': (
210
- 'comfortable': $collections-density-spacing-medium-comfortable,
211
- 'compact': $collections-density-spacing-medium-compact,
273
+ 'text': (
274
+ 'dark': $collections-theme-action-text-dark,
275
+ 'light': $collections-theme-action-text-light,
212
276
  ),
213
- 'small': (
214
- 'comfortable': $collections-density-spacing-small-comfortable,
215
- 'compact': $collections-density-spacing-small-compact,
277
+ ),
278
+ 'background': (
279
+ 'content': (
280
+ 'dark': $collections-theme-background-content-dark,
281
+ 'light': $collections-theme-background-content-light,
282
+ ),
283
+ 'page': (
284
+ 'dark': $collections-theme-background-page-dark,
285
+ 'light': $collections-theme-background-page-light,
286
+ ),
287
+ ),
288
+ 'text': (
289
+ 'base': (
290
+ 'dark': $collections-theme-text-base-dark,
291
+ 'light': $collections-theme-text-base-light,
292
+ ),
293
+ 'subtle': (
294
+ 'dark': $collections-theme-text-subtle-dark,
295
+ 'light': $collections-theme-text-subtle-light,
216
296
  ),
217
297
  ),
218
298
  ),
@@ -284,6 +364,26 @@ $tokens: (
284
364
  'round': $radius-round,
285
365
  'small': $radius-small,
286
366
  ),
367
+ 'sandbox': (
368
+ 'color': (
369
+ 'brand': $sandbox-color-brand,
370
+ 'error': $sandbox-color-error,
371
+ 'success': $sandbox-color-success,
372
+ 'warning': $sandbox-color-warning,
373
+ 'white': $sandbox-color-white,
374
+ ),
375
+ 'radius': (
376
+ 'large': $sandbox-radius-large,
377
+ 'medium': $sandbox-radius-medium,
378
+ 'small': $sandbox-radius-small,
379
+ 'xlarge': $sandbox-radius-xlarge,
380
+ 'xsmall': $sandbox-radius-xsmall,
381
+ ),
382
+ 'width': (
383
+ 'narrow': $sandbox-width-narrow,
384
+ 'wide': $sandbox-width-wide,
385
+ ),
386
+ ),
287
387
  'shadow': (
288
388
  '1': $shadow-1,
289
389
  '2': $shadow-2,