@knapsack/sandbox-tokens 4.53.1--canary.3986.c6043f8.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (22) hide show
  1. package/.turbo/turbo-build.log +5 -0
  2. package/dist/design-tokens.android.xml +9 -0
  3. package/dist/design-tokens.cjs +110 -0
  4. package/dist/design-tokens.collections.css +170 -0
  5. package/dist/design-tokens.css +112 -0
  6. package/dist/design-tokens.css.scss +112 -0
  7. package/dist/design-tokens.d.cts +108 -0
  8. package/dist/design-tokens.d.mts +108 -0
  9. package/dist/design-tokens.d.ts +108 -0
  10. package/dist/design-tokens.js +108 -0
  11. package/dist/design-tokens.json +110 -0
  12. package/dist/design-tokens.less +108 -0
  13. package/dist/design-tokens.mjs +108 -0
  14. package/dist/design-tokens.nested.json +176 -0
  15. package/dist/design-tokens.scss +293 -0
  16. package/dist/design-tokens.style-dictionary.json +667 -0
  17. package/dist/design-tokens.w3c-spec.json +679 -0
  18. package/knapsack.config.cjs +30 -0
  19. package/package.json +41 -0
  20. package/readme.md +1 -0
  21. package/src/knapsack.design-tokens.json +679 -0
  22. package/tsconfig.json +8 -0
package/dist/design-tokens.d.mts ADDED
@@ -0,0 +1,108 @@
1
+ export declare const ungroupedToken = 'Im Not Part of Any Group';
2
+ export declare const border1 = 'red dotted 2px';
3
+ export declare const cypressLarge = '1.5rem';
4
+ export declare const radiusLarge = '1.5rem';
5
+ export declare const breakpointLarge = '1.5rem';
6
+ export declare const breakpointMedium = '480px';
7
+ export declare const breakpointSmall = '330px';
8
+ export declare const breakpointXlarge = '992px';
9
+ export declare const breakpointXxlarge = '1240px';
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 collectionsBrandsColorPrimaryBrandADark = '#0a13f7';
20
+ export declare const collectionsBrandsColorPrimaryBrandALight = '#3ed93f';
21
+ export declare const colorPink800 = '#710D55';
22
+ export declare const collectionsBrandsColorPrimaryBrandBDark = '#710D55';
23
+ export declare const colorPink400 = '#F37491';
24
+ export declare const collectionsBrandsColorPrimaryBrandBLight = '#F37491';
25
+ export declare const colorPink500 = '#EC487D';
26
+ export declare const collectionsBrandsColorSecondaryBrandADark = '#EC487D';
27
+ export declare const collectionsBrandsColorSecondaryBrandALight = '#EC487D';
28
+ export declare const colorPurple500 = '#6A4CEC';
29
+ export declare const collectionsBrandsColorSecondaryBrandBDark = '#6A4CEC';
30
+ export declare const collectionsBrandsColorSecondaryBrandBLight = '#6A4CEC';
31
+ export declare const collectionsBrandsFooBarBrandADark = '1px';
32
+ export declare const collectionsBrandsFooBarBrandALight = '1px';
33
+ export declare const collectionsBrandsFooBarBrandBDark = '1px';
34
+ export declare const collectionsBrandsFooBarBrandBLight = '1px';
35
+ export declare const collectionsBrandsTestDimensionBrandALight = '2px';
36
+ export declare const spacingScale2 = '4px';
37
+ export declare const collectionsDensitySpacingSmallCompact = '4px';
38
+ export declare const collectionsBrandsTestPrimaryBrandADark = '4px';
39
+ export declare const spacingScale8 = '40px';
40
+ export declare const collectionsBrandsTestPrimaryBrandALight = '40px';
41
+ export declare const collectionsBrandsTestSecondaryBrandADark = '#cc2020';
42
+ export declare const collectionsBrandsTestSecondaryBrandALight = '#cc2020';
43
+ export declare const colorNeutral600 = '#ACAAB6';
44
+ export declare const collectionsBrandsTestSecondaryBrandBDark = '#ACAAB6';
45
+ export declare const colorNeutral300 = '#EDECEF';
46
+ export declare const collectionsBrandsTestSecondaryBrandBLight = '#EDECEF';
47
+ export declare const collectionsDensitySpacingLargeComfortable = '40px';
48
+ export declare const spacingScale5 = '16px';
49
+ export declare const collectionsDensitySpacingLargeCompact = '16px';
50
+ export declare const spacingScale6 = '24px';
51
+ export declare const collectionsDensitySpacingMediumComfortable = '24px';
52
+ export declare const collectionsDensitySpacingMediumCompact = '16px';
53
+ export declare const spacingScale3 = '8px';
54
+ export declare const collectionsDensitySpacingSmallComfortable = '8px';
55
+ export declare const colorNeutral800 = '#191335';
56
+ export declare const colorBlack = '#191335';
57
+ export declare const colorWhite = '#ffffff';
58
+ export declare const colorNeutral100 = '#FAFAFB';
59
+ export declare const colorNeutral200 = '#F6F6F7';
60
+ export declare const colorNeutral400 = '#dedce2';
61
+ export declare const colorNeutral500 = '#BFBDC6';
62
+ export declare const colorNeutral700 = '#878496';
63
+ export declare const colorPink100 = '#FFDDDB';
64
+ export declare const colorPink200 = '#FCB6B8';
65
+ export declare const colorPink300 = '#FA919F';
66
+ export declare const colorPink600 = '#CA3473';
67
+ export declare const colorPink700 = '#AA2469';
68
+ export declare const colorPurple100 = '#E5DBFE';
69
+ export declare const colorPurple200 = '#C9B8FE';
70
+ export declare const colorPurple300 = '#AA94F9';
71
+ export declare const colorPurple400 = '#9076F3';
72
+ export declare const colorPurple600 = '#5036CB';
73
+ export declare const colorPurple700 = '#3925AA';
74
+ export declare const colorPurple800 = '#190F72';
75
+ export declare const colorTextDefault = '#191335';
76
+ export declare const colorTextDisabled = '#dedce2';
77
+ export declare const colorTextMuted = '#ACAAB6';
78
+ export declare const colorTextWhite = '#ffffff';
79
+ export declare const cypressMedium = '1rem';
80
+ export declare const cypressSmall = '0.5rem';
81
+ export declare const mediaQueryLarge = 'screen and (min-width: 1.5rem)';
82
+ export declare const mediaQueryMedium = 'screen and (min-width: 480px)';
83
+ export declare const mediaQuerySmall = 'screen and (min-width: 330px)';
84
+ export declare const miscBoolean = true;
85
+ export declare const miscDuration = '100ms';
86
+ export declare const miscIsAwesome = true;
87
+ export declare const miscIsAwesome2 = true;
88
+ export declare const miscMagicNumber = 42;
89
+ export declare const miscShadow = '1px 1px 1px 1px #000000';
90
+ export declare const miscSomeText = 'Hello world';
91
+ export declare const radiusMedium = '8px';
92
+ export declare const radiusRound = '160px';
93
+ export declare const radiusSmall = '4px';
94
+ export declare const shadow1 = '0px 5px 10px 0px #000000';
95
+ export declare const shadow2 = '0px 10px 20px 0px #000000';
96
+ export declare const shadow3 = '0px 15px 25px 0px #000000';
97
+ export declare const shadow4 = '0px 20px 40px 0px #000000';
98
+ export declare const shadowColor = '#000000';
99
+ export declare const spacingScale1 = '2px';
100
+ export declare const spacingScale4 = '12px';
101
+ export declare const spacingScale7 = '32px';
102
+ export declare const spacingScale9 = '48px';
103
+ export declare const spacingScale10 = '64px';
104
+ export declare const spacingScale11 = '80px';
105
+ export declare const spacingScale12 = '96px';
106
+ export declare const spacingScale13 = '160px';
107
+ export declare const transitionA = '250ms cubic-bezier(0,0,1,1) 100ms';
108
+ export declare const transitionB = '500ms cubic-bezier(0.1,1,0.3,1) 10ms';
package/dist/design-tokens.d.ts ADDED
@@ -0,0 +1,108 @@
1
+ export declare const ungroupedToken = 'Im Not Part of Any Group';
2
+ export declare const border1 = 'red dotted 2px';
3
+ export declare const cypressLarge = '1.5rem';
4
+ export declare const radiusLarge = '1.5rem';
5
+ export declare const breakpointLarge = '1.5rem';
6
+ export declare const breakpointMedium = '480px';
7
+ export declare const breakpointSmall = '330px';
8
+ export declare const breakpointXlarge = '992px';
9
+ export declare const breakpointXxlarge = '1240px';
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 collectionsBrandsColorPrimaryBrandADark = '#0a13f7';
20
+ export declare const collectionsBrandsColorPrimaryBrandALight = '#3ed93f';
21
+ export declare const colorPink800 = '#710D55';
22
+ export declare const collectionsBrandsColorPrimaryBrandBDark = '#710D55';
23
+ export declare const colorPink400 = '#F37491';
24
+ export declare const collectionsBrandsColorPrimaryBrandBLight = '#F37491';
25
+ export declare const colorPink500 = '#EC487D';
26
+ export declare const collectionsBrandsColorSecondaryBrandADark = '#EC487D';
27
+ export declare const collectionsBrandsColorSecondaryBrandALight = '#EC487D';
28
+ export declare const colorPurple500 = '#6A4CEC';
29
+ export declare const collectionsBrandsColorSecondaryBrandBDark = '#6A4CEC';
30
+ export declare const collectionsBrandsColorSecondaryBrandBLight = '#6A4CEC';
31
+ export declare const collectionsBrandsFooBarBrandADark = '1px';
32
+ export declare const collectionsBrandsFooBarBrandALight = '1px';
33
+ export declare const collectionsBrandsFooBarBrandBDark = '1px';
34
+ export declare const collectionsBrandsFooBarBrandBLight = '1px';
35
+ export declare const collectionsBrandsTestDimensionBrandALight = '2px';
36
+ export declare const spacingScale2 = '4px';
37
+ export declare const collectionsDensitySpacingSmallCompact = '4px';
38
+ export declare const collectionsBrandsTestPrimaryBrandADark = '4px';
39
+ export declare const spacingScale8 = '40px';
40
+ export declare const collectionsBrandsTestPrimaryBrandALight = '40px';
41
+ export declare const collectionsBrandsTestSecondaryBrandADark = '#cc2020';
42
+ export declare const collectionsBrandsTestSecondaryBrandALight = '#cc2020';
43
+ export declare const colorNeutral600 = '#ACAAB6';
44
+ export declare const collectionsBrandsTestSecondaryBrandBDark = '#ACAAB6';
45
+ export declare const colorNeutral300 = '#EDECEF';
46
+ export declare const collectionsBrandsTestSecondaryBrandBLight = '#EDECEF';
47
+ export declare const collectionsDensitySpacingLargeComfortable = '40px';
48
+ export declare const spacingScale5 = '16px';
49
+ export declare const collectionsDensitySpacingLargeCompact = '16px';
50
+ export declare const spacingScale6 = '24px';
51
+ export declare const collectionsDensitySpacingMediumComfortable = '24px';
52
+ export declare const collectionsDensitySpacingMediumCompact = '16px';
53
+ export declare const spacingScale3 = '8px';
54
+ export declare const collectionsDensitySpacingSmallComfortable = '8px';
55
+ export declare const colorNeutral800 = '#191335';
56
+ export declare const colorBlack = '#191335';
57
+ export declare const colorWhite = '#ffffff';
58
+ export declare const colorNeutral100 = '#FAFAFB';
59
+ export declare const colorNeutral200 = '#F6F6F7';
60
+ export declare const colorNeutral400 = '#dedce2';
61
+ export declare const colorNeutral500 = '#BFBDC6';
62
+ export declare const colorNeutral700 = '#878496';
63
+ export declare const colorPink100 = '#FFDDDB';
64
+ export declare const colorPink200 = '#FCB6B8';
65
+ export declare const colorPink300 = '#FA919F';
66
+ export declare const colorPink600 = '#CA3473';
67
+ export declare const colorPink700 = '#AA2469';
68
+ export declare const colorPurple100 = '#E5DBFE';
69
+ export declare const colorPurple200 = '#C9B8FE';
70
+ export declare const colorPurple300 = '#AA94F9';
71
+ export declare const colorPurple400 = '#9076F3';
72
+ export declare const colorPurple600 = '#5036CB';
73
+ export declare const colorPurple700 = '#3925AA';
74
+ export declare const colorPurple800 = '#190F72';
75
+ export declare const colorTextDefault = '#191335';
76
+ export declare const colorTextDisabled = '#dedce2';
77
+ export declare const colorTextMuted = '#ACAAB6';
78
+ export declare const colorTextWhite = '#ffffff';
79
+ export declare const cypressMedium = '1rem';
80
+ export declare const cypressSmall = '0.5rem';
81
+ export declare const mediaQueryLarge = 'screen and (min-width: 1.5rem)';
82
+ export declare const mediaQueryMedium = 'screen and (min-width: 480px)';
83
+ export declare const mediaQuerySmall = 'screen and (min-width: 330px)';
84
+ export declare const miscBoolean = true;
85
+ export declare const miscDuration = '100ms';
86
+ export declare const miscIsAwesome = true;
87
+ export declare const miscIsAwesome2 = true;
88
+ export declare const miscMagicNumber = 42;
89
+ export declare const miscShadow = '1px 1px 1px 1px #000000';
90
+ export declare const miscSomeText = 'Hello world';
91
+ export declare const radiusMedium = '8px';
92
+ export declare const radiusRound = '160px';
93
+ export declare const radiusSmall = '4px';
94
+ export declare const shadow1 = '0px 5px 10px 0px #000000';
95
+ export declare const shadow2 = '0px 10px 20px 0px #000000';
96
+ export declare const shadow3 = '0px 15px 25px 0px #000000';
97
+ export declare const shadow4 = '0px 20px 40px 0px #000000';
98
+ export declare const shadowColor = '#000000';
99
+ export declare const spacingScale1 = '2px';
100
+ export declare const spacingScale4 = '12px';
101
+ export declare const spacingScale7 = '32px';
102
+ export declare const spacingScale9 = '48px';
103
+ export declare const spacingScale10 = '64px';
104
+ export declare const spacingScale11 = '80px';
105
+ export declare const spacingScale12 = '96px';
106
+ export declare const spacingScale13 = '160px';
107
+ export declare const transitionA = '250ms cubic-bezier(0,0,1,1) 100ms';
108
+ export declare const transitionB = '500ms cubic-bezier(0.1,1,0.3,1) 10ms';
package/dist/design-tokens.js ADDED
@@ -0,0 +1,108 @@
1
+ export const ungroupedToken = 'Im Not Part of Any Group';
2
+ export const border1 = 'red dotted 2px';
3
+ export const cypressLarge = '1.5rem';
4
+ export const radiusLarge = '1.5rem';
5
+ export const breakpointLarge = '1.5rem';
6
+ export const breakpointMedium = '480px';
7
+ export const breakpointSmall = '330px';
8
+ export const breakpointXlarge = '992px';
9
+ export const breakpointXxlarge = '1240px';
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 collectionsBrandsColorPrimaryBrandADark = '#0a13f7';
20
+ export const collectionsBrandsColorPrimaryBrandALight = '#3ed93f';
21
+ export const colorPink800 = '#710D55';
22
+ export const collectionsBrandsColorPrimaryBrandBDark = '#710D55';
23
+ export const colorPink400 = '#F37491';
24
+ export const collectionsBrandsColorPrimaryBrandBLight = '#F37491';
25
+ export const colorPink500 = '#EC487D';
26
+ export const collectionsBrandsColorSecondaryBrandADark = '#EC487D';
27
+ export const collectionsBrandsColorSecondaryBrandALight = '#EC487D';
28
+ export const colorPurple500 = '#6A4CEC';
29
+ export const collectionsBrandsColorSecondaryBrandBDark = '#6A4CEC';
30
+ export const collectionsBrandsColorSecondaryBrandBLight = '#6A4CEC';
31
+ export const collectionsBrandsFooBarBrandADark = '1px';
32
+ export const collectionsBrandsFooBarBrandALight = '1px';
33
+ export const collectionsBrandsFooBarBrandBDark = '1px';
34
+ export const collectionsBrandsFooBarBrandBLight = '1px';
35
+ export const collectionsBrandsTestDimensionBrandALight = '2px';
36
+ export const spacingScale2 = '4px';
37
+ export const collectionsDensitySpacingSmallCompact = '4px';
38
+ export const collectionsBrandsTestPrimaryBrandADark = '4px';
39
+ export const spacingScale8 = '40px';
40
+ export const collectionsBrandsTestPrimaryBrandALight = '40px';
41
+ export const collectionsBrandsTestSecondaryBrandADark = '#cc2020';
42
+ export const collectionsBrandsTestSecondaryBrandALight = '#cc2020';
43
+ export const colorNeutral600 = '#ACAAB6';
44
+ export const collectionsBrandsTestSecondaryBrandBDark = '#ACAAB6';
45
+ export const colorNeutral300 = '#EDECEF';
46
+ export const collectionsBrandsTestSecondaryBrandBLight = '#EDECEF';
47
+ export const collectionsDensitySpacingLargeComfortable = '40px';
48
+ export const spacingScale5 = '16px';
49
+ export const collectionsDensitySpacingLargeCompact = '16px';
50
+ export const spacingScale6 = '24px';
51
+ export const collectionsDensitySpacingMediumComfortable = '24px';
52
+ export const collectionsDensitySpacingMediumCompact = '16px';
53
+ export const spacingScale3 = '8px';
54
+ export const collectionsDensitySpacingSmallComfortable = '8px';
55
+ export const colorNeutral800 = '#191335';
56
+ export const colorBlack = '#191335';
57
+ export const colorWhite = '#ffffff';
58
+ export const colorNeutral100 = '#FAFAFB';
59
+ export const colorNeutral200 = '#F6F6F7';
60
+ export const colorNeutral400 = '#dedce2';
61
+ export const colorNeutral500 = '#BFBDC6';
62
+ export const colorNeutral700 = '#878496';
63
+ export const colorPink100 = '#FFDDDB';
64
+ export const colorPink200 = '#FCB6B8';
65
+ export const colorPink300 = '#FA919F';
66
+ export const colorPink600 = '#CA3473';
67
+ export const colorPink700 = '#AA2469';
68
+ export const colorPurple100 = '#E5DBFE';
69
+ export const colorPurple200 = '#C9B8FE';
70
+ export const colorPurple300 = '#AA94F9';
71
+ export const colorPurple400 = '#9076F3';
72
+ export const colorPurple600 = '#5036CB';
73
+ export const colorPurple700 = '#3925AA';
74
+ export const colorPurple800 = '#190F72';
75
+ export const colorTextDefault = '#191335';
76
+ export const colorTextDisabled = '#dedce2';
77
+ export const colorTextMuted = '#ACAAB6';
78
+ export const colorTextWhite = '#ffffff';
79
+ export const cypressMedium = '1rem';
80
+ export const cypressSmall = '0.5rem';
81
+ export const mediaQueryLarge = 'screen and (min-width: 1.5rem)';
82
+ export const mediaQueryMedium = 'screen and (min-width: 480px)';
83
+ export const mediaQuerySmall = 'screen and (min-width: 330px)';
84
+ export const miscBoolean = true;
85
+ export const miscDuration = '100ms';
86
+ export const miscIsAwesome = true;
87
+ export const miscIsAwesome2 = true;
88
+ export const miscMagicNumber = 42;
89
+ export const miscShadow = '1px 1px 1px 1px #000000';
90
+ export const miscSomeText = 'Hello world';
91
+ export const radiusMedium = '8px';
92
+ export const radiusRound = '160px';
93
+ export const radiusSmall = '4px';
94
+ export const shadow1 = '0px 5px 10px 0px #000000';
95
+ export const shadow2 = '0px 10px 20px 0px #000000';
96
+ export const shadow3 = '0px 15px 25px 0px #000000';
97
+ export const shadow4 = '0px 20px 40px 0px #000000';
98
+ export const shadowColor = '#000000';
99
+ export const spacingScale1 = '2px';
100
+ export const spacingScale4 = '12px';
101
+ export const spacingScale7 = '32px';
102
+ export const spacingScale9 = '48px';
103
+ export const spacingScale10 = '64px';
104
+ export const spacingScale11 = '80px';
105
+ export const spacingScale12 = '96px';
106
+ export const spacingScale13 = '160px';
107
+ export const transitionA = '250ms cubic-bezier(0,0,1,1) 100ms';
108
+ export const transitionB = '500ms cubic-bezier(0.1,1,0.3,1) 10ms';
package/dist/design-tokens.json ADDED
@@ -0,0 +1,110 @@
1
+ {
2
+ "ungroupedToken": "Im Not Part of Any Group",
3
+ "border1": "red dotted 2px",
4
+ "breakpointLarge": "1.5rem",
5
+ "breakpointMedium": "480px",
6
+ "breakpointSmall": "330px",
7
+ "breakpointXlarge": "992px",
8
+ "breakpointXxlarge": "1240px",
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
+ "collectionsBrandsColorPrimaryBrandADark": "#0a13f7",
19
+ "collectionsBrandsColorPrimaryBrandALight": "#3ed93f",
20
+ "collectionsBrandsColorPrimaryBrandBDark": "#710D55",
21
+ "collectionsBrandsColorPrimaryBrandBLight": "#F37491",
22
+ "collectionsBrandsColorSecondaryBrandADark": "#EC487D",
23
+ "collectionsBrandsColorSecondaryBrandALight": "#EC487D",
24
+ "collectionsBrandsColorSecondaryBrandBDark": "#6A4CEC",
25
+ "collectionsBrandsColorSecondaryBrandBLight": "#6A4CEC",
26
+ "collectionsBrandsFooBarBrandADark": "1px",
27
+ "collectionsBrandsFooBarBrandALight": "1px",
28
+ "collectionsBrandsFooBarBrandBDark": "1px",
29
+ "collectionsBrandsFooBarBrandBLight": "1px",
30
+ "collectionsBrandsTestDimensionBrandALight": "2px",
31
+ "collectionsBrandsTestPrimaryBrandADark": "4px",
32
+ "collectionsBrandsTestPrimaryBrandALight": "40px",
33
+ "collectionsBrandsTestSecondaryBrandADark": "#cc2020",
34
+ "collectionsBrandsTestSecondaryBrandALight": "#cc2020",
35
+ "collectionsBrandsTestSecondaryBrandBDark": "#ACAAB6",
36
+ "collectionsBrandsTestSecondaryBrandBLight": "#EDECEF",
37
+ "collectionsDensitySpacingLargeComfortable": "40px",
38
+ "collectionsDensitySpacingLargeCompact": "16px",
39
+ "collectionsDensitySpacingMediumComfortable": "24px",
40
+ "collectionsDensitySpacingMediumCompact": "16px",
41
+ "collectionsDensitySpacingSmallComfortable": "8px",
42
+ "collectionsDensitySpacingSmallCompact": "4px",
43
+ "colorBlack": "#191335",
44
+ "colorWhite": "#ffffff",
45
+ "colorNeutral100": "#FAFAFB",
46
+ "colorNeutral200": "#F6F6F7",
47
+ "colorNeutral300": "#EDECEF",
48
+ "colorNeutral400": "#dedce2",
49
+ "colorNeutral500": "#BFBDC6",
50
+ "colorNeutral600": "#ACAAB6",
51
+ "colorNeutral700": "#878496",
52
+ "colorNeutral800": "#191335",
53
+ "colorPink100": "#FFDDDB",
54
+ "colorPink200": "#FCB6B8",
55
+ "colorPink300": "#FA919F",
56
+ "colorPink400": "#F37491",
57
+ "colorPink500": "#EC487D",
58
+ "colorPink600": "#CA3473",
59
+ "colorPink700": "#AA2469",
60
+ "colorPink800": "#710D55",
61
+ "colorPurple100": "#E5DBFE",
62
+ "colorPurple200": "#C9B8FE",
63
+ "colorPurple300": "#AA94F9",
64
+ "colorPurple400": "#9076F3",
65
+ "colorPurple500": "#6A4CEC",
66
+ "colorPurple600": "#5036CB",
67
+ "colorPurple700": "#3925AA",
68
+ "colorPurple800": "#190F72",
69
+ "colorTextDefault": "#191335",
70
+ "colorTextDisabled": "#dedce2",
71
+ "colorTextMuted": "#ACAAB6",
72
+ "colorTextWhite": "#ffffff",
73
+ "cypressLarge": "1.5rem",
74
+ "cypressMedium": "1rem",
75
+ "cypressSmall": "0.5rem",
76
+ "mediaQueryLarge": "screen and (min-width: 1.5rem)",
77
+ "mediaQueryMedium": "screen and (min-width: 480px)",
78
+ "mediaQuerySmall": "screen and (min-width: 330px)",
79
+ "miscBoolean": true,
80
+ "miscDuration": "100ms",
81
+ "miscIsAwesome": true,
82
+ "miscIsAwesome2": true,
83
+ "miscMagicNumber": 42,
84
+ "miscShadow": "1px 1px 1px 1px #000000",
85
+ "miscSomeText": "Hello world",
86
+ "radiusLarge": "1.5rem",
87
+ "radiusMedium": "8px",
88
+ "radiusRound": "160px",
89
+ "radiusSmall": "4px",
90
+ "shadow1": "0px 5px 10px 0px #000000",
91
+ "shadow2": "0px 10px 20px 0px #000000",
92
+ "shadow3": "0px 15px 25px 0px #000000",
93
+ "shadow4": "0px 20px 40px 0px #000000",
94
+ "shadowColor": "#000000",
95
+ "spacingScale1": "2px",
96
+ "spacingScale2": "4px",
97
+ "spacingScale3": "8px",
98
+ "spacingScale4": "12px",
99
+ "spacingScale5": "16px",
100
+ "spacingScale6": "24px",
101
+ "spacingScale7": "32px",
102
+ "spacingScale8": "40px",
103
+ "spacingScale9": "48px",
104
+ "spacingScale10": "64px",
105
+ "spacingScale11": "80px",
106
+ "spacingScale12": "96px",
107
+ "spacingScale13": "160px",
108
+ "transitionA": "250ms cubic-bezier(0,0,1,1) 100ms",
109
+ "transitionB": "500ms cubic-bezier(0.1,1,0.3,1) 10ms"
110
+ }
package/dist/design-tokens.less ADDED
@@ -0,0 +1,108 @@
1
+ @ungrouped-token: Im Not Part of Any Group;
2
+ @border-1: red dotted 2px;
3
+ @cypress-large: 1.5rem;
4
+ @radius-large: @cypress-large;
5
+ @breakpoint-large: @radius-large;
6
+ @breakpoint-medium: 480px;
7
+ @breakpoint-small: 330px;
8
+ @breakpoint-xlarge: 992px;
9
+ @breakpoint-xxlarge: 1240px;
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-primary-brand-a-dark: #0a13f7;
20
+ @collections-brands-color-primary-brand-a-light: #3ed93f;
21
+ @color-pink-800: #710d55;
22
+ @collections-brands-color-primary-brand-b-dark: @color-pink-800;
23
+ @color-pink-400: #f37491;
24
+ @collections-brands-color-primary-brand-b-light: @color-pink-400;
25
+ @color-pink-500: #ec487d;
26
+ @collections-brands-color-secondary-brand-a-dark: @color-pink-500;
27
+ @collections-brands-color-secondary-brand-a-light: @color-pink-500;
28
+ @color-purple-500: #6a4cec;
29
+ @collections-brands-color-secondary-brand-b-dark: @color-purple-500;
30
+ @collections-brands-color-secondary-brand-b-light: @color-purple-500;
31
+ @collections-brands-foo-bar-brand-a-dark: 1px;
32
+ @collections-brands-foo-bar-brand-a-light: 1px;
33
+ @collections-brands-foo-bar-brand-b-dark: 1px;
34
+ @collections-brands-foo-bar-brand-b-light: 1px;
35
+ @collections-brands-test-dimension-brand-a-light: 2px;
36
+ @spacing-scale-2: 4px;
37
+ @collections-density-spacing-small-compact: @spacing-scale-2;
38
+ @collections-brands-test-primary-brand-a-dark: @collections-density-spacing-small-compact;
39
+ @spacing-scale-8: 40px;
40
+ @collections-brands-test-primary-brand-a-light: @spacing-scale-8;
41
+ @collections-brands-test-secondary-brand-a-dark: #cc2020;
42
+ @collections-brands-test-secondary-brand-a-light: #cc2020;
43
+ @color-neutral-600: #acaab6;
44
+ @collections-brands-test-secondary-brand-b-dark: @color-neutral-600;
45
+ @color-neutral-300: #edecef;
46
+ @collections-brands-test-secondary-brand-b-light: @color-neutral-300;
47
+ @collections-density-spacing-large-comfortable: @spacing-scale-8;
48
+ @spacing-scale-5: 16px;
49
+ @collections-density-spacing-large-compact: @spacing-scale-5;
50
+ @spacing-scale-6: 24px;
51
+ @collections-density-spacing-medium-comfortable: @spacing-scale-6;
52
+ @collections-density-spacing-medium-compact: @spacing-scale-5;
53
+ @spacing-scale-3: 8px;
54
+ @collections-density-spacing-small-comfortable: @spacing-scale-3;
55
+ @color-neutral-800: #191335;
56
+ @color-black: @color-neutral-800;
57
+ @color-white: #ffffff;
58
+ @color-neutral-100: #fafafb;
59
+ @color-neutral-200: #f6f6f7;
60
+ @color-neutral-400: #dedce2;
61
+ @color-neutral-500: #bfbdc6;
62
+ @color-neutral-700: #878496;
63
+ @color-pink-100: #ffdddb;
64
+ @color-pink-200: #fcb6b8;
65
+ @color-pink-300: #fa919f;
66
+ @color-pink-600: #ca3473;
67
+ @color-pink-700: #aa2469;
68
+ @color-purple-100: #e5dbfe;
69
+ @color-purple-200: #c9b8fe;
70
+ @color-purple-300: #aa94f9;
71
+ @color-purple-400: #9076f3;
72
+ @color-purple-600: #5036cb;
73
+ @color-purple-700: #3925aa;
74
+ @color-purple-800: #190f72;
75
+ @color-text-default: @color-neutral-800;
76
+ @color-text-disabled: @color-neutral-400;
77
+ @color-text-muted: @color-neutral-600;
78
+ @color-text-white: @color-white;
79
+ @cypress-medium: 1rem;
80
+ @cypress-small: 0.5rem;
81
+ @media-query-large: screen and (min-width: @breakpoint-large);
82
+ @media-query-medium: screen and (min-width: @breakpoint-medium);
83
+ @media-query-small: screen and (min-width: @breakpoint-small);
84
+ @misc-boolean: true;
85
+ @misc-duration: 100ms;
86
+ @misc-is-awesome: true;
87
+ @misc-is-awesome2: @misc-is-awesome;
88
+ @misc-magic-number: 42;
89
+ @misc-shadow: 1px 1px 1px 1px #000000;
90
+ @misc-some-text: Hello world;
91
+ @radius-medium: 8px;
92
+ @radius-round: 160px;
93
+ @radius-small: 4px;
94
+ @shadow-1: 0px 5px 10px 0px #000000;
95
+ @shadow-2: 0px 10px 20px 0px #000000;
96
+ @shadow-3: 0px 15px 25px 0px #000000;
97
+ @shadow-4: 0px 20px 40px 0px #000000;
98
+ @shadow-color: #000000;
99
+ @spacing-scale-1: 2px;
100
+ @spacing-scale-4: 12px;
101
+ @spacing-scale-7: 32px;
102
+ @spacing-scale-9: 48px;
103
+ @spacing-scale-10: 64px;
104
+ @spacing-scale-11: 80px;
105
+ @spacing-scale-12: 96px;
106
+ @spacing-scale-13: 160px;
107
+ @transition-a: 250ms cubic-bezier(0, 0, 1, 1) 100ms;
108
+ @transition-b: 500ms cubic-bezier(0.1, 1, 0.3, 1) 10ms;
package/dist/design-tokens.mjs ADDED
@@ -0,0 +1,108 @@
1
+ export const ungroupedToken = 'Im Not Part of Any Group';
2
+ export const border1 = 'red dotted 2px';
3
+ export const cypressLarge = '1.5rem';
4
+ export const radiusLarge = '1.5rem';
5
+ export const breakpointLarge = '1.5rem';
6
+ export const breakpointMedium = '480px';
7
+ export const breakpointSmall = '330px';
8
+ export const breakpointXlarge = '992px';
9
+ export const breakpointXxlarge = '1240px';
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 collectionsBrandsColorPrimaryBrandADark = '#0a13f7';
20
+ export const collectionsBrandsColorPrimaryBrandALight = '#3ed93f';
21
+ export const colorPink800 = '#710D55';
22
+ export const collectionsBrandsColorPrimaryBrandBDark = '#710D55';
23
+ export const colorPink400 = '#F37491';
24
+ export const collectionsBrandsColorPrimaryBrandBLight = '#F37491';
25
+ export const colorPink500 = '#EC487D';
26
+ export const collectionsBrandsColorSecondaryBrandADark = '#EC487D';
27
+ export const collectionsBrandsColorSecondaryBrandALight = '#EC487D';
28
+ export const colorPurple500 = '#6A4CEC';
29
+ export const collectionsBrandsColorSecondaryBrandBDark = '#6A4CEC';
30
+ export const collectionsBrandsColorSecondaryBrandBLight = '#6A4CEC';
31
+ export const collectionsBrandsFooBarBrandADark = '1px';
32
+ export const collectionsBrandsFooBarBrandALight = '1px';
33
+ export const collectionsBrandsFooBarBrandBDark = '1px';
34
+ export const collectionsBrandsFooBarBrandBLight = '1px';
35
+ export const collectionsBrandsTestDimensionBrandALight = '2px';
36
+ export const spacingScale2 = '4px';
37
+ export const collectionsDensitySpacingSmallCompact = '4px';
38
+ export const collectionsBrandsTestPrimaryBrandADark = '4px';
39
+ export const spacingScale8 = '40px';
40
+ export const collectionsBrandsTestPrimaryBrandALight = '40px';
41
+ export const collectionsBrandsTestSecondaryBrandADark = '#cc2020';
42
+ export const collectionsBrandsTestSecondaryBrandALight = '#cc2020';
43
+ export const colorNeutral600 = '#ACAAB6';
44
+ export const collectionsBrandsTestSecondaryBrandBDark = '#ACAAB6';
45
+ export const colorNeutral300 = '#EDECEF';
46
+ export const collectionsBrandsTestSecondaryBrandBLight = '#EDECEF';
47
+ export const collectionsDensitySpacingLargeComfortable = '40px';
48
+ export const spacingScale5 = '16px';
49
+ export const collectionsDensitySpacingLargeCompact = '16px';
50
+ export const spacingScale6 = '24px';
51
+ export const collectionsDensitySpacingMediumComfortable = '24px';
52
+ export const collectionsDensitySpacingMediumCompact = '16px';
53
+ export const spacingScale3 = '8px';
54
+ export const collectionsDensitySpacingSmallComfortable = '8px';
55
+ export const colorNeutral800 = '#191335';
56
+ export const colorBlack = '#191335';
57
+ export const colorWhite = '#ffffff';
58
+ export const colorNeutral100 = '#FAFAFB';
59
+ export const colorNeutral200 = '#F6F6F7';
60
+ export const colorNeutral400 = '#dedce2';
61
+ export const colorNeutral500 = '#BFBDC6';
62
+ export const colorNeutral700 = '#878496';
63
+ export const colorPink100 = '#FFDDDB';
64
+ export const colorPink200 = '#FCB6B8';
65
+ export const colorPink300 = '#FA919F';
66
+ export const colorPink600 = '#CA3473';
67
+ export const colorPink700 = '#AA2469';
68
+ export const colorPurple100 = '#E5DBFE';
69
+ export const colorPurple200 = '#C9B8FE';
70
+ export const colorPurple300 = '#AA94F9';
71
+ export const colorPurple400 = '#9076F3';
72
+ export const colorPurple600 = '#5036CB';
73
+ export const colorPurple700 = '#3925AA';
74
+ export const colorPurple800 = '#190F72';
75
+ export const colorTextDefault = '#191335';
76
+ export const colorTextDisabled = '#dedce2';
77
+ export const colorTextMuted = '#ACAAB6';
78
+ export const colorTextWhite = '#ffffff';
79
+ export const cypressMedium = '1rem';
80
+ export const cypressSmall = '0.5rem';
81
+ export const mediaQueryLarge = 'screen and (min-width: 1.5rem)';
82
+ export const mediaQueryMedium = 'screen and (min-width: 480px)';
83
+ export const mediaQuerySmall = 'screen and (min-width: 330px)';
84
+ export const miscBoolean = true;
85
+ export const miscDuration = '100ms';
86
+ export const miscIsAwesome = true;
87
+ export const miscIsAwesome2 = true;
88
+ export const miscMagicNumber = 42;
89
+ export const miscShadow = '1px 1px 1px 1px #000000';
90
+ export const miscSomeText = 'Hello world';
91
+ export const radiusMedium = '8px';
92
+ export const radiusRound = '160px';
93
+ export const radiusSmall = '4px';
94
+ export const shadow1 = '0px 5px 10px 0px #000000';
95
+ export const shadow2 = '0px 10px 20px 0px #000000';
96
+ export const shadow3 = '0px 15px 25px 0px #000000';
97
+ export const shadow4 = '0px 20px 40px 0px #000000';
98
+ export const shadowColor = '#000000';
99
+ export const spacingScale1 = '2px';
100
+ export const spacingScale4 = '12px';
101
+ export const spacingScale7 = '32px';
102
+ export const spacingScale9 = '48px';
103
+ export const spacingScale10 = '64px';
104
+ export const spacingScale11 = '80px';
105
+ export const spacingScale12 = '96px';
106
+ export const spacingScale13 = '160px';
107
+ export const transitionA = '250ms cubic-bezier(0,0,1,1) 100ms';
108
+ export const transitionB = '500ms cubic-bezier(0.1,1,0.3,1) 10ms';