@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.d.ts CHANGED
@@ -8,59 +8,85 @@ export declare const breakpointSmall = '330px';
8
8
  export declare const breakpointXlarge = '992px';
9
9
  export declare const breakpointXxlarge = '1240px';
10
10
  export declare const breakpointXxxlarge = '1440px';
11
- export declare const collectionsBrandsColorColorBrandADark = '#000000';
12
- export declare const collectionsBrandsColorColorBrandALight = '#000000';
13
- export declare const collectionsBrandsColorColorBrandBDark = '#000000';
14
- export declare const collectionsBrandsColorColorBrandBLight = '#000000';
15
- export declare const collectionsBrandsColorColor1BrandADark = '#000000';
16
- export declare const collectionsBrandsColorColor1BrandALight = '#000000';
17
- export declare const collectionsBrandsColorColor1BrandBDark = '#000000';
18
- export declare const collectionsBrandsColorColor1BrandBLight = '#000000';
19
- export declare const collectionsBrandsColorFontWeightBrandADark = 400;
20
- export declare const collectionsBrandsColorFontWeightBrandALight = 400;
21
- export declare const collectionsBrandsColorFontWeightBrandBDark = 400;
22
- export declare const collectionsBrandsColorFontWeightBrandBLight = 400;
23
- export declare const collectionsBrandsColorPrimaryBrandADark = '#0a13f7';
24
- export declare const collectionsBrandsColorPrimaryBrandALight = '#3ed93f';
11
+ export declare const spacingScale4 = '12px';
12
+ export declare const collectionsDensitySpacingLargeCompact = '12px';
13
+ export declare const spacingScale5 = '16px';
14
+ export declare const collectionsDensitySpacingLargeCozy = '16px';
15
+ export declare const spacingScale3 = '8px';
16
+ export declare const collectionsDensitySpacingMediumCompact = '8px';
17
+ export declare const collectionsDensitySpacingMediumCozy = '12px';
18
+ export declare const spacingScale2 = '4px';
19
+ export declare const collectionsDensitySpacingSmallCompact = '4px';
20
+ export declare const collectionsDensitySpacingSmallCozy = '8px';
21
+ export declare const collectionsDensitySpacingXlargeCompact = '16px';
22
+ export declare const spacingScale6 = '24px';
23
+ export declare const collectionsDensitySpacingXlargeCozy = '24px';
24
+ export declare const spacingScale1 = '2px';
25
+ export declare const collectionsDensitySpacingXsmallCompact = '2px';
26
+ export declare const collectionsDensitySpacingXsmallCozy = '4px';
27
+ export declare const spacingScale7 = '32px';
28
+ export declare const collectionsDensitySpacingXxlargeCompact = '32px';
29
+ export declare const spacingScale8 = '40px';
30
+ export declare const collectionsDensitySpacingXxlargeCozy = '40px';
31
+ export declare const collectionsDensitySpacingXxxlargeCompact = '40px';
32
+ export declare const spacingScale10 = '64px';
33
+ export declare const collectionsDensitySpacingXxxlargeCozy = '64px';
34
+ export declare const collectionsTestingColorColorBrandADark = '#000000';
35
+ export declare const collectionsTestingColorColorBrandALight = '#000000';
36
+ export declare const collectionsTestingColorColorBrandBDark = '#000000';
37
+ export declare const collectionsTestingColorColorBrandBLight = '#000000';
38
+ export declare const collectionsTestingColorColor1BrandADark = '#000000';
39
+ export declare const collectionsTestingColorColor1BrandALight = '#000000';
40
+ export declare const collectionsTestingColorColor1BrandBDark = '#000000';
41
+ export declare const collectionsTestingColorColor1BrandBLight = '#000000';
42
+ export declare const collectionsTestingColorFontWeightBrandADark = 400;
43
+ export declare const collectionsTestingColorFontWeightBrandALight = 400;
44
+ export declare const collectionsTestingColorFontWeightBrandBDark = 400;
45
+ export declare const collectionsTestingColorFontWeightBrandBLight = 400;
46
+ export declare const collectionsTestingColorPrimaryBrandADark = '#0a13f7';
47
+ export declare const collectionsTestingColorPrimaryBrandALight = '#3ed93f';
25
48
  export declare const colorPink800 = '#710D55';
26
- export declare const collectionsBrandsColorPrimaryBrandBDark = '#710D55';
49
+ export declare const collectionsTestingColorPrimaryBrandBDark = '#710D55';
27
50
  export declare const colorPink400 = '#F37491';
28
- export declare const collectionsBrandsColorPrimaryBrandBLight = '#F37491';
51
+ export declare const collectionsTestingColorPrimaryBrandBLight = '#F37491';
29
52
  export declare const colorPink500 = '#EC487D';
30
- export declare const collectionsBrandsColorSecondaryBrandADark = '#EC487D';
31
- export declare const collectionsBrandsColorSecondaryBrandALight = '#EC487D';
53
+ export declare const collectionsTestingColorSecondaryBrandADark = '#EC487D';
54
+ export declare const collectionsTestingColorSecondaryBrandALight = '#EC487D';
32
55
  export declare const colorPurple500 = '#6A4CEC';
33
- export declare const collectionsBrandsColorSecondaryBrandBDark = '#6A4CEC';
34
- export declare const collectionsBrandsColorSecondaryBrandBLight = '#6A4CEC';
35
- export declare const collectionsBrandsFooBarBrandADark = '1px';
36
- export declare const collectionsBrandsFooBarBrandALight = '1px';
37
- export declare const collectionsBrandsFooBarBrandBDark = '1px';
38
- export declare const collectionsBrandsFooBarBrandBLight = '1px';
39
- export declare const collectionsBrandsTestDimensionBrandADark = '2px';
40
- export declare const collectionsBrandsTestDimensionBrandALight = '2px';
41
- export declare const collectionsBrandsTestDimensionBrandBDark = '2px';
42
- export declare const collectionsBrandsTestDimensionBrandBLight = '2px';
43
- export declare const spacingScale2 = '4px';
44
- export declare const collectionsDensitySpacingSmallCompact = '4px';
45
- export declare const collectionsBrandsTestPrimaryBrandADark = '4px';
46
- export declare const spacingScale8 = '40px';
47
- export declare const collectionsBrandsTestPrimaryBrandALight = '40px';
48
- export declare const collectionsBrandsTestPrimaryBrandBDark = '4px';
49
- export declare const collectionsBrandsTestPrimaryBrandBLight = '4px';
50
- export declare const collectionsBrandsTestSecondaryBrandADark = '#cc2020';
51
- export declare const collectionsBrandsTestSecondaryBrandALight = '#cc2020';
56
+ export declare const collectionsTestingColorSecondaryBrandBDark = '#6A4CEC';
57
+ export declare const collectionsTestingColorSecondaryBrandBLight = '#6A4CEC';
58
+ export declare const collectionsTestingFooBarBrandADark = '1px';
59
+ export declare const collectionsTestingFooBarBrandALight = '1px';
60
+ export declare const collectionsTestingFooBarBrandBDark = '1px';
61
+ export declare const collectionsTestingFooBarBrandBLight = '1px';
62
+ export declare const collectionsTestingTestDimensionBrandADark = '2px';
63
+ export declare const collectionsTestingTestDimensionBrandALight = '2px';
64
+ export declare const collectionsTestingTestDimensionBrandBDark = '2px';
65
+ export declare const collectionsTestingTestDimensionBrandBLight = '2px';
66
+ export declare const collectionsTestingTestPrimaryBrandADark = '4px';
67
+ export declare const collectionsTestingTestPrimaryBrandALight = '40px';
68
+ export declare const collectionsTestingTestPrimaryBrandBDark = '4px';
69
+ export declare const collectionsTestingTestPrimaryBrandBLight = '4px';
70
+ export declare const collectionsTestingTestSecondaryBrandADark = '#cc2020';
71
+ export declare const collectionsTestingTestSecondaryBrandALight = '#cc2020';
52
72
  export declare const colorNeutral600 = '#ACAAB6';
53
- export declare const collectionsBrandsTestSecondaryBrandBDark = '#ACAAB6';
73
+ export declare const collectionsTestingTestSecondaryBrandBDark = '#ACAAB6';
54
74
  export declare const colorNeutral300 = '#EDECEF';
55
- export declare const collectionsBrandsTestSecondaryBrandBLight = '#EDECEF';
56
- export declare const collectionsDensitySpacingLargeComfortable = '40px';
57
- export declare const spacingScale5 = '16px';
58
- export declare const collectionsDensitySpacingLargeCompact = '16px';
59
- export declare const spacingScale6 = '24px';
60
- export declare const collectionsDensitySpacingMediumComfortable = '24px';
61
- export declare const collectionsDensitySpacingMediumCompact = '16px';
62
- export declare const spacingScale3 = '8px';
63
- export declare const collectionsDensitySpacingSmallComfortable = '8px';
75
+ export declare const collectionsTestingTestSecondaryBrandBLight = '#EDECEF';
76
+ export declare const sandboxColorBrand = '#7A34ED';
77
+ export declare const collectionsThemeActionBaseDark = '#7A34ED';
78
+ export declare const collectionsThemeActionBaseLight = '#7A34ED';
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';
64
90
  export declare const colorNeutral800 = '#191335';
65
91
  export declare const colorBlack = '#191335';
66
92
  export declare const colorWhite = '#ffffff';
@@ -100,16 +126,22 @@ export declare const miscSomeText = 'Hello world';
100
126
  export declare const radiusMedium = '8px';
101
127
  export declare const radiusRound = '160px';
102
128
  export declare const radiusSmall = '4px';
129
+ export declare const sandboxColorError = '#FF5C46';
130
+ export declare const sandboxColorSuccess = '#6BC313';
131
+ export declare const sandboxColorWarning = '#FAB120';
132
+ export declare const sandboxRadiusLarge = '16px';
133
+ export declare const sandboxRadiusMedium = '8px';
134
+ export declare const sandboxRadiusSmall = '4px';
135
+ export declare const sandboxRadiusXlarge = '32px';
136
+ export declare const sandboxRadiusXsmall = '2px';
137
+ export declare const sandboxWidthNarrow = '640px';
138
+ export declare const sandboxWidthWide = '1080px';
103
139
  export declare const shadow1 = '0px 5px 10px 0px #000000';
104
140
  export declare const shadow2 = '0px 10px 20px 0px #000000';
105
141
  export declare const shadow3 = '0px 15px 25px 0px #000000';
106
142
  export declare const shadow4 = '0px 20px 40px 0px #000000';
107
143
  export declare const shadowColor = '#000000';
108
- export declare const spacingScale1 = '2px';
109
- export declare const spacingScale4 = '12px';
110
- export declare const spacingScale7 = '32px';
111
144
  export declare const spacingScale9 = '48px';
112
- export declare const spacingScale10 = '64px';
113
145
  export declare const spacingScale11 = '80px';
114
146
  export declare const spacingScale12 = '96px';
115
147
  export declare const spacingScale13 = '160px';
package/dist/design-tokens.js 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.json CHANGED
@@ -7,48 +7,68 @@
7
7
  "breakpointXlarge": "992px",
8
8
  "breakpointXxlarge": "1240px",
9
9
  "breakpointXxxlarge": "1440px",
10
- "collectionsBrandsColorColorBrandADark": "#000000",
11
- "collectionsBrandsColorColorBrandALight": "#000000",
12
- "collectionsBrandsColorColorBrandBDark": "#000000",
13
- "collectionsBrandsColorColorBrandBLight": "#000000",
14
- "collectionsBrandsColorColor1BrandADark": "#000000",
15
- "collectionsBrandsColorColor1BrandALight": "#000000",
16
- "collectionsBrandsColorColor1BrandBDark": "#000000",
17
- "collectionsBrandsColorColor1BrandBLight": "#000000",
18
- "collectionsBrandsColorFontWeightBrandADark": 400,
19
- "collectionsBrandsColorFontWeightBrandALight": 400,
20
- "collectionsBrandsColorFontWeightBrandBDark": 400,
21
- "collectionsBrandsColorFontWeightBrandBLight": 400,
22
- "collectionsBrandsColorPrimaryBrandADark": "#0a13f7",
23
- "collectionsBrandsColorPrimaryBrandALight": "#3ed93f",
24
- "collectionsBrandsColorPrimaryBrandBDark": "#710D55",
25
- "collectionsBrandsColorPrimaryBrandBLight": "#F37491",
26
- "collectionsBrandsColorSecondaryBrandADark": "#EC487D",
27
- "collectionsBrandsColorSecondaryBrandALight": "#EC487D",
28
- "collectionsBrandsColorSecondaryBrandBDark": "#6A4CEC",
29
- "collectionsBrandsColorSecondaryBrandBLight": "#6A4CEC",
30
- "collectionsBrandsFooBarBrandADark": "1px",
31
- "collectionsBrandsFooBarBrandALight": "1px",
32
- "collectionsBrandsFooBarBrandBDark": "1px",
33
- "collectionsBrandsFooBarBrandBLight": "1px",
34
- "collectionsBrandsTestDimensionBrandADark": "2px",
35
- "collectionsBrandsTestDimensionBrandALight": "2px",
36
- "collectionsBrandsTestDimensionBrandBDark": "2px",
37
- "collectionsBrandsTestDimensionBrandBLight": "2px",
38
- "collectionsBrandsTestPrimaryBrandADark": "4px",
39
- "collectionsBrandsTestPrimaryBrandALight": "40px",
40
- "collectionsBrandsTestPrimaryBrandBDark": "4px",
41
- "collectionsBrandsTestPrimaryBrandBLight": "4px",
42
- "collectionsBrandsTestSecondaryBrandADark": "#cc2020",
43
- "collectionsBrandsTestSecondaryBrandALight": "#cc2020",
44
- "collectionsBrandsTestSecondaryBrandBDark": "#ACAAB6",
45
- "collectionsBrandsTestSecondaryBrandBLight": "#EDECEF",
46
- "collectionsDensitySpacingLargeComfortable": "40px",
47
- "collectionsDensitySpacingLargeCompact": "16px",
48
- "collectionsDensitySpacingMediumComfortable": "24px",
49
- "collectionsDensitySpacingMediumCompact": "16px",
50
- "collectionsDensitySpacingSmallComfortable": "8px",
10
+ "collectionsDensitySpacingLargeCompact": "12px",
11
+ "collectionsDensitySpacingLargeCozy": "16px",
12
+ "collectionsDensitySpacingMediumCompact": "8px",
13
+ "collectionsDensitySpacingMediumCozy": "12px",
51
14
  "collectionsDensitySpacingSmallCompact": "4px",
15
+ "collectionsDensitySpacingSmallCozy": "8px",
16
+ "collectionsDensitySpacingXlargeCompact": "16px",
17
+ "collectionsDensitySpacingXlargeCozy": "24px",
18
+ "collectionsDensitySpacingXsmallCompact": "2px",
19
+ "collectionsDensitySpacingXsmallCozy": "4px",
20
+ "collectionsDensitySpacingXxlargeCompact": "32px",
21
+ "collectionsDensitySpacingXxlargeCozy": "40px",
22
+ "collectionsDensitySpacingXxxlargeCompact": "40px",
23
+ "collectionsDensitySpacingXxxlargeCozy": "64px",
24
+ "collectionsTestingColorColorBrandADark": "#000000",
25
+ "collectionsTestingColorColorBrandALight": "#000000",
26
+ "collectionsTestingColorColorBrandBDark": "#000000",
27
+ "collectionsTestingColorColorBrandBLight": "#000000",
28
+ "collectionsTestingColorColor1BrandADark": "#000000",
29
+ "collectionsTestingColorColor1BrandALight": "#000000",
30
+ "collectionsTestingColorColor1BrandBDark": "#000000",
31
+ "collectionsTestingColorColor1BrandBLight": "#000000",
32
+ "collectionsTestingColorFontWeightBrandADark": 400,
33
+ "collectionsTestingColorFontWeightBrandALight": 400,
34
+ "collectionsTestingColorFontWeightBrandBDark": 400,
35
+ "collectionsTestingColorFontWeightBrandBLight": 400,
36
+ "collectionsTestingColorPrimaryBrandADark": "#0a13f7",
37
+ "collectionsTestingColorPrimaryBrandALight": "#3ed93f",
38
+ "collectionsTestingColorPrimaryBrandBDark": "#710D55",
39
+ "collectionsTestingColorPrimaryBrandBLight": "#F37491",
40
+ "collectionsTestingColorSecondaryBrandADark": "#EC487D",
41
+ "collectionsTestingColorSecondaryBrandALight": "#EC487D",
42
+ "collectionsTestingColorSecondaryBrandBDark": "#6A4CEC",
43
+ "collectionsTestingColorSecondaryBrandBLight": "#6A4CEC",
44
+ "collectionsTestingFooBarBrandADark": "1px",
45
+ "collectionsTestingFooBarBrandALight": "1px",
46
+ "collectionsTestingFooBarBrandBDark": "1px",
47
+ "collectionsTestingFooBarBrandBLight": "1px",
48
+ "collectionsTestingTestDimensionBrandADark": "2px",
49
+ "collectionsTestingTestDimensionBrandALight": "2px",
50
+ "collectionsTestingTestDimensionBrandBDark": "2px",
51
+ "collectionsTestingTestDimensionBrandBLight": "2px",
52
+ "collectionsTestingTestPrimaryBrandADark": "4px",
53
+ "collectionsTestingTestPrimaryBrandALight": "40px",
54
+ "collectionsTestingTestPrimaryBrandBDark": "4px",
55
+ "collectionsTestingTestPrimaryBrandBLight": "4px",
56
+ "collectionsTestingTestSecondaryBrandADark": "#cc2020",
57
+ "collectionsTestingTestSecondaryBrandALight": "#cc2020",
58
+ "collectionsTestingTestSecondaryBrandBDark": "#ACAAB6",
59
+ "collectionsTestingTestSecondaryBrandBLight": "#EDECEF",
60
+ "collectionsThemeActionBaseDark": "#7A34ED",
61
+ "collectionsThemeActionBaseLight": "#7A34ED",
62
+ "collectionsThemeActionTextDark": "#ffffff",
63
+ "collectionsThemeActionTextLight": "#ffffff",
64
+ "collectionsThemeBackgroundContentDark": "#3B3644",
65
+ "collectionsThemeBackgroundContentLight": "#FFFFFF",
66
+ "collectionsThemeBackgroundPageDark": "#1F1C25",
67
+ "collectionsThemeBackgroundPageLight": "#FDFCFE",
68
+ "collectionsThemeTextBaseDark": "#F6F8FF",
69
+ "collectionsThemeTextBaseLight": "#191F2C",
70
+ "collectionsThemeTextSubtleDark": "#BEC3D3",
71
+ "collectionsThemeTextSubtleLight": "#6E7A82",
52
72
  "colorBlack": "#191335",
53
73
  "colorWhite": "#ffffff",
54
74
  "colorNeutral100": "#FAFAFB",
@@ -96,6 +116,18 @@
96
116
  "radiusMedium": "8px",
97
117
  "radiusRound": "160px",
98
118
  "radiusSmall": "4px",
119
+ "sandboxColorBrand": "#7A34ED",
120
+ "sandboxColorError": "#FF5C46",
121
+ "sandboxColorSuccess": "#6BC313",
122
+ "sandboxColorWarning": "#FAB120",
123
+ "sandboxColorWhite": "#ffffff",
124
+ "sandboxRadiusLarge": "16px",
125
+ "sandboxRadiusMedium": "8px",
126
+ "sandboxRadiusSmall": "4px",
127
+ "sandboxRadiusXlarge": "32px",
128
+ "sandboxRadiusXsmall": "2px",
129
+ "sandboxWidthNarrow": "640px",
130
+ "sandboxWidthWide": "1080px",
99
131
  "shadow1": "0px 5px 10px 0px #000000",
100
132
  "shadow2": "0px 10px 20px 0px #000000",
101
133
  "shadow3": "0px 15px 25px 0px #000000",
package/dist/design-tokens.less CHANGED
@@ -8,59 +8,85 @@
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;
@@ -100,16 +126,22 @@
100
126
  @radius-medium: 8px;
101
127
  @radius-round: 160px;
102
128
  @radius-small: 4px;
129
+ @sandbox-color-error: #ff5c46;
130
+ @sandbox-color-success: #6bc313;
131
+ @sandbox-color-warning: #fab120;
132
+ @sandbox-radius-large: 16px;
133
+ @sandbox-radius-medium: 8px;
134
+ @sandbox-radius-small: 4px;
135
+ @sandbox-radius-xlarge: 32px;
136
+ @sandbox-radius-xsmall: 2px;
137
+ @sandbox-width-narrow: 640px;
138
+ @sandbox-width-wide: 1080px;
103
139
  @shadow-1: 0px 5px 10px 0px #000000;
104
140
  @shadow-2: 0px 10px 20px 0px #000000;
105
141
  @shadow-3: 0px 15px 25px 0px #000000;
106
142
  @shadow-4: 0px 20px 40px 0px #000000;
107
143
  @shadow-color: #000000;
108
- @spacing-scale-1: 2px;
109
- @spacing-scale-4: 12px;
110
- @spacing-scale-7: 32px;
111
144
  @spacing-scale-9: 48px;
112
- @spacing-scale-10: 64px;
113
145
  @spacing-scale-11: 80px;
114
146
  @spacing-scale-12: 96px;
115
147
  @spacing-scale-13: 160px;