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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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/.turbo/turbo-build.log ADDED
@@ -0,0 +1,5 @@
1
+
2
+ > @knapsack/sandbox-tokens@4.52.15 build /home/runner/work/app-monorepo/app-monorepo/apps/ui/libs/sandbox-tokens
3
+ > knapsack build:tokens
4
+
5
+ info Wrote design tokens to "dist"
package/dist/design-tokens.android.xml ADDED
@@ -0,0 +1,9 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <resources>
3
+ <dimen name="breakpoint_large">1.5rem</dimen>
4
+ <dimen name="breakpoint_medium">480px</dimen>
5
+ <dimen name="breakpoint_small">330px</dimen>
6
+ <dimen name="breakpoint_xlarge">992px</dimen>
7
+ <dimen name="breakpoint_xxlarge">1240px</dimen>
8
+ <dimen name="breakpoint_xxxlarge">1440px</dimen>
9
+ </resources>
package/dist/design-tokens.cjs ADDED
@@ -0,0 +1,110 @@
1
+ module.exports = {
2
+ ungroupedToken: 'Im Not Part of Any Group',
3
+ border1: 'red dotted 2px',
4
+ cypressLarge: '1.5rem',
5
+ radiusLarge: '1.5rem',
6
+ breakpointLarge: '1.5rem',
7
+ breakpointMedium: '480px',
8
+ breakpointSmall: '330px',
9
+ breakpointXlarge: '992px',
10
+ breakpointXxlarge: '1240px',
11
+ breakpointXxxlarge: '1440px',
12
+ collectionsBrandsColorColorBrandADark: '#000000',
13
+ collectionsBrandsColorColorBrandALight: '#000000',
14
+ collectionsBrandsColorColorBrandBDark: '#000000',
15
+ collectionsBrandsColorColorBrandBLight: '#000000',
16
+ collectionsBrandsColorColor1BrandADark: '#000000',
17
+ collectionsBrandsColorColor1BrandALight: '#000000',
18
+ collectionsBrandsColorColor1BrandBDark: '#000000',
19
+ collectionsBrandsColorColor1BrandBLight: '#000000',
20
+ collectionsBrandsColorPrimaryBrandADark: '#0a13f7',
21
+ collectionsBrandsColorPrimaryBrandALight: '#3ed93f',
22
+ colorPink800: '#710D55',
23
+ collectionsBrandsColorPrimaryBrandBDark: '#710D55',
24
+ colorPink400: '#F37491',
25
+ collectionsBrandsColorPrimaryBrandBLight: '#F37491',
26
+ colorPink500: '#EC487D',
27
+ collectionsBrandsColorSecondaryBrandADark: '#EC487D',
28
+ collectionsBrandsColorSecondaryBrandALight: '#EC487D',
29
+ colorPurple500: '#6A4CEC',
30
+ collectionsBrandsColorSecondaryBrandBDark: '#6A4CEC',
31
+ collectionsBrandsColorSecondaryBrandBLight: '#6A4CEC',
32
+ collectionsBrandsFooBarBrandADark: '1px',
33
+ collectionsBrandsFooBarBrandALight: '1px',
34
+ collectionsBrandsFooBarBrandBDark: '1px',
35
+ collectionsBrandsFooBarBrandBLight: '1px',
36
+ collectionsBrandsTestDimensionBrandALight: '2px',
37
+ spacingScale2: '4px',
38
+ collectionsDensitySpacingSmallCompact: '4px',
39
+ collectionsBrandsTestPrimaryBrandADark: '4px',
40
+ spacingScale8: '40px',
41
+ collectionsBrandsTestPrimaryBrandALight: '40px',
42
+ collectionsBrandsTestSecondaryBrandADark: '#cc2020',
43
+ collectionsBrandsTestSecondaryBrandALight: '#cc2020',
44
+ colorNeutral600: '#ACAAB6',
45
+ collectionsBrandsTestSecondaryBrandBDark: '#ACAAB6',
46
+ colorNeutral300: '#EDECEF',
47
+ collectionsBrandsTestSecondaryBrandBLight: '#EDECEF',
48
+ collectionsDensitySpacingLargeComfortable: '40px',
49
+ spacingScale5: '16px',
50
+ collectionsDensitySpacingLargeCompact: '16px',
51
+ spacingScale6: '24px',
52
+ collectionsDensitySpacingMediumComfortable: '24px',
53
+ collectionsDensitySpacingMediumCompact: '16px',
54
+ spacingScale3: '8px',
55
+ collectionsDensitySpacingSmallComfortable: '8px',
56
+ colorNeutral800: '#191335',
57
+ colorBlack: '#191335',
58
+ colorWhite: '#ffffff',
59
+ colorNeutral100: '#FAFAFB',
60
+ colorNeutral200: '#F6F6F7',
61
+ colorNeutral400: '#dedce2',
62
+ colorNeutral500: '#BFBDC6',
63
+ colorNeutral700: '#878496',
64
+ colorPink100: '#FFDDDB',
65
+ colorPink200: '#FCB6B8',
66
+ colorPink300: '#FA919F',
67
+ colorPink600: '#CA3473',
68
+ colorPink700: '#AA2469',
69
+ colorPurple100: '#E5DBFE',
70
+ colorPurple200: '#C9B8FE',
71
+ colorPurple300: '#AA94F9',
72
+ colorPurple400: '#9076F3',
73
+ colorPurple600: '#5036CB',
74
+ colorPurple700: '#3925AA',
75
+ colorPurple800: '#190F72',
76
+ colorTextDefault: '#191335',
77
+ colorTextDisabled: '#dedce2',
78
+ colorTextMuted: '#ACAAB6',
79
+ colorTextWhite: '#ffffff',
80
+ cypressMedium: '1rem',
81
+ cypressSmall: '0.5rem',
82
+ mediaQueryLarge: 'screen and (min-width: 1.5rem)',
83
+ mediaQueryMedium: 'screen and (min-width: 480px)',
84
+ mediaQuerySmall: 'screen and (min-width: 330px)',
85
+ miscBoolean: true,
86
+ miscDuration: '100ms',
87
+ miscIsAwesome: true,
88
+ miscIsAwesome2: true,
89
+ miscMagicNumber: 42,
90
+ miscShadow: '1px 1px 1px 1px #000000',
91
+ miscSomeText: 'Hello world',
92
+ radiusMedium: '8px',
93
+ radiusRound: '160px',
94
+ radiusSmall: '4px',
95
+ shadow1: '0px 5px 10px 0px #000000',
96
+ shadow2: '0px 10px 20px 0px #000000',
97
+ shadow3: '0px 15px 25px 0px #000000',
98
+ shadow4: '0px 20px 40px 0px #000000',
99
+ shadowColor: '#000000',
100
+ spacingScale1: '2px',
101
+ spacingScale4: '12px',
102
+ spacingScale7: '32px',
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.collections.css ADDED
@@ -0,0 +1,170 @@
1
+ :root {
2
+ --ungrouped-token: Im Not Part of Any Group;
3
+ --border-1: red dotted 2px;
4
+ --breakpoint-large: var(--radius-large);
5
+ --breakpoint-medium: 480px;
6
+ --breakpoint-small: 330px;
7
+ --breakpoint-xlarge: 992px;
8
+ --breakpoint-xxlarge: 1240px;
9
+ --breakpoint-xxxlarge: 1440px;
10
+ --collections-brands-color-color-brand-a-dark: #000000;
11
+ --collections-brands-color-color-brand-a-light: #000000;
12
+ --collections-brands-color-color-brand-b-dark: #000000;
13
+ --collections-brands-color-color-brand-b-light: #000000;
14
+ --collections-brands-color-color-1-brand-a-dark: #000000;
15
+ --collections-brands-color-color-1-brand-a-light: #000000;
16
+ --collections-brands-color-color-1-brand-b-dark: #000000;
17
+ --collections-brands-color-color-1-brand-b-light: #000000;
18
+ --collections-brands-color-primary-brand-a-dark: #0a13f7;
19
+ --collections-brands-color-primary-brand-a-light: #3ed93f;
20
+ --collections-brands-color-primary-brand-b-dark: var(--color-pink-800);
21
+ --collections-brands-color-primary-brand-b-light: var(--color-pink-400);
22
+ --collections-brands-color-secondary-brand-a-dark: var(--color-pink-500);
23
+ --collections-brands-color-secondary-brand-a-light: var(--color-pink-500);
24
+ --collections-brands-color-secondary-brand-b-dark: var(--color-purple-500);
25
+ --collections-brands-color-secondary-brand-b-light: var(--color-purple-500);
26
+ --collections-brands-foo-bar-brand-a-dark: 1px;
27
+ --collections-brands-foo-bar-brand-a-light: 1px;
28
+ --collections-brands-foo-bar-brand-b-dark: 1px;
29
+ --collections-brands-foo-bar-brand-b-light: 1px;
30
+ --collections-brands-test-dimension-brand-a-light: 2px;
31
+ --collections-brands-test-primary-brand-a-dark: var(
32
+ --collections-density-spacing-small-compact
33
+ );
34
+ --collections-brands-test-primary-brand-a-light: var(--spacing-scale-8);
35
+ --collections-brands-test-secondary-brand-a-dark: #cc2020;
36
+ --collections-brands-test-secondary-brand-a-light: #cc2020;
37
+ --collections-brands-test-secondary-brand-b-dark: var(--color-neutral-600);
38
+ --collections-brands-test-secondary-brand-b-light: var(--color-neutral-300);
39
+ --collections-density-spacing-large-comfortable: var(--spacing-scale-8);
40
+ --collections-density-spacing-large-compact: var(--spacing-scale-5);
41
+ --collections-density-spacing-medium-comfortable: var(--spacing-scale-6);
42
+ --collections-density-spacing-medium-compact: var(--spacing-scale-5);
43
+ --collections-density-spacing-small-comfortable: var(--spacing-scale-3);
44
+ --collections-density-spacing-small-compact: var(--spacing-scale-2);
45
+ --color-black: var(--color-neutral-800);
46
+ --color-white: #ffffff;
47
+ --color-neutral-100: #fafafb;
48
+ --color-neutral-200: #f6f6f7;
49
+ --color-neutral-300: #edecef;
50
+ --color-neutral-400: #dedce2;
51
+ --color-neutral-500: #bfbdc6;
52
+ --color-neutral-600: #acaab6;
53
+ --color-neutral-700: #878496;
54
+ --color-neutral-800: #191335;
55
+ --color-pink-100: #ffdddb;
56
+ --color-pink-200: #fcb6b8;
57
+ --color-pink-300: #fa919f;
58
+ --color-pink-400: #f37491;
59
+ --color-pink-500: #ec487d;
60
+ --color-pink-600: #ca3473;
61
+ --color-pink-700: #aa2469;
62
+ --color-pink-800: #710d55;
63
+ --color-purple-100: #e5dbfe;
64
+ --color-purple-200: #c9b8fe;
65
+ --color-purple-300: #aa94f9;
66
+ --color-purple-400: #9076f3;
67
+ --color-purple-500: #6a4cec;
68
+ --color-purple-600: #5036cb;
69
+ --color-purple-700: #3925aa;
70
+ --color-purple-800: #190f72;
71
+ --color-text-default: var(--color-neutral-800);
72
+ --color-text-disabled: var(--color-neutral-400);
73
+ --color-text-muted: var(--color-neutral-600);
74
+ --color-text-white: var(--color-white);
75
+ --cypress-large: 1.5rem;
76
+ --cypress-medium: 1rem;
77
+ --cypress-small: 0.5rem;
78
+ --media-query-large: screen and (min-width: var(--breakpoint-large));
79
+ --media-query-medium: screen and (min-width: var(--breakpoint-medium));
80
+ --media-query-small: screen and (min-width: var(--breakpoint-small));
81
+ --misc-boolean: true;
82
+ --misc-duration: 100ms;
83
+ --misc-is-awesome: true;
84
+ --misc-is-awesome2: var(--misc-is-awesome);
85
+ --misc-magic-number: 42;
86
+ --misc-shadow: 1px 1px 1px 1px #000000;
87
+ --misc-some-text: Hello world;
88
+ --radius-large: var(--cypress-large);
89
+ --radius-medium: 8px;
90
+ --radius-round: 160px;
91
+ --radius-small: 4px;
92
+ --shadow-1: 0px 5px 10px 0px #000000;
93
+ --shadow-2: 0px 10px 20px 0px #000000;
94
+ --shadow-3: 0px 15px 25px 0px #000000;
95
+ --shadow-4: 0px 20px 40px 0px #000000;
96
+ --shadow-color: #000000;
97
+ --spacing-scale-1: 2px;
98
+ --spacing-scale-2: 4px;
99
+ --spacing-scale-3: 8px;
100
+ --spacing-scale-4: 12px;
101
+ --spacing-scale-5: 16px;
102
+ --spacing-scale-6: 24px;
103
+ --spacing-scale-7: 32px;
104
+ --spacing-scale-8: 40px;
105
+ --spacing-scale-9: 48px;
106
+ --spacing-scale-10: 64px;
107
+ --spacing-scale-11: 80px;
108
+ --spacing-scale-12: 96px;
109
+ --spacing-scale-13: 160px;
110
+ --transition-a: 250ms cubic-bezier(0, 0, 1, 1) 100ms;
111
+ --transition-b: 500ms cubic-bezier(0.1, 1, 0.3, 1) 10ms;
112
+ }
113
+
114
+ :root,
115
+ [data-collections-brands='brandALight'] {
116
+ --color-color: var(--collections-brands-color-color-brand-a-light);
117
+ --color-color-1: var(--collections-brands-color-color-1-brand-a-light);
118
+ --color-primary: var(--collections-brands-color-primary-brand-a-light);
119
+ --color-secondary: var(--collections-brands-color-secondary-brand-a-light);
120
+ --foo-bar: var(--collections-brands-foo-bar-brand-a-light);
121
+ --test-dimension: var(--collections-brands-test-dimension-brand-a-light);
122
+ --test-primary: var(--collections-brands-test-primary-brand-a-light);
123
+ --test-secondary: var(--collections-brands-test-secondary-brand-a-light);
124
+ }
125
+
126
+ [data-collections-brands='brandADark'] {
127
+ --color-color: var(--collections-brands-color-color-brand-a-dark);
128
+ --color-color-1: var(--collections-brands-color-color-1-brand-a-dark);
129
+ --color-primary: var(--collections-brands-color-primary-brand-a-dark);
130
+ --color-secondary: var(--collections-brands-color-secondary-brand-a-dark);
131
+ --foo-bar: var(--collections-brands-foo-bar-brand-a-dark);
132
+ --test-dimension: var(--collections-brands-test-dimension-brand-a-light);
133
+ --test-primary: var(--collections-brands-test-primary-brand-a-dark);
134
+ --test-secondary: var(--collections-brands-test-secondary-brand-a-dark);
135
+ }
136
+
137
+ [data-collections-brands='brandBLight'] {
138
+ --color-color: var(--collections-brands-color-color-brand-b-light);
139
+ --color-color-1: var(--collections-brands-color-color-1-brand-b-light);
140
+ --color-primary: var(--collections-brands-color-primary-brand-b-light);
141
+ --color-secondary: var(--collections-brands-color-secondary-brand-b-light);
142
+ --foo-bar: var(--collections-brands-foo-bar-brand-b-light);
143
+ --test-dimension: var(--collections-brands-test-dimension-brand-a-light);
144
+ --test-primary: var(--collections-brands-test-primary-brand-a-dark);
145
+ --test-secondary: var(--collections-brands-test-secondary-brand-b-light);
146
+ }
147
+
148
+ [data-collections-brands='brandBDark'] {
149
+ --color-color: var(--collections-brands-color-color-brand-b-dark);
150
+ --color-color-1: var(--collections-brands-color-color-1-brand-b-dark);
151
+ --color-primary: var(--collections-brands-color-primary-brand-b-dark);
152
+ --color-secondary: var(--collections-brands-color-secondary-brand-b-dark);
153
+ --foo-bar: var(--collections-brands-foo-bar-brand-b-dark);
154
+ --test-dimension: var(--collections-brands-test-dimension-brand-a-light);
155
+ --test-primary: var(--collections-brands-test-primary-brand-a-dark);
156
+ --test-secondary: var(--collections-brands-test-secondary-brand-b-dark);
157
+ }
158
+
159
+ :root,
160
+ [data-collections-density='comfortable'] {
161
+ --spacing-large: var(--collections-density-spacing-large-comfortable);
162
+ --spacing-medium: var(--collections-density-spacing-medium-comfortable);
163
+ --spacing-small: var(--collections-density-spacing-small-comfortable);
164
+ }
165
+
166
+ [data-collections-density='compact'] {
167
+ --spacing-large: var(--collections-density-spacing-large-compact);
168
+ --spacing-medium: var(--collections-density-spacing-medium-compact);
169
+ --spacing-small: var(--collections-density-spacing-small-compact);
170
+ }
package/dist/design-tokens.css ADDED
@@ -0,0 +1,112 @@
1
+ :root {
2
+ --ungrouped-token: Im Not Part of Any Group;
3
+ --border-1: red dotted 2px;
4
+ --breakpoint-large: var(--radius-large);
5
+ --breakpoint-medium: 480px;
6
+ --breakpoint-small: 330px;
7
+ --breakpoint-xlarge: 992px;
8
+ --breakpoint-xxlarge: 1240px;
9
+ --breakpoint-xxxlarge: 1440px;
10
+ --collections-brands-color-color-brand-a-dark: #000000;
11
+ --collections-brands-color-color-brand-a-light: #000000;
12
+ --collections-brands-color-color-brand-b-dark: #000000;
13
+ --collections-brands-color-color-brand-b-light: #000000;
14
+ --collections-brands-color-color-1-brand-a-dark: #000000;
15
+ --collections-brands-color-color-1-brand-a-light: #000000;
16
+ --collections-brands-color-color-1-brand-b-dark: #000000;
17
+ --collections-brands-color-color-1-brand-b-light: #000000;
18
+ --collections-brands-color-primary-brand-a-dark: #0a13f7;
19
+ --collections-brands-color-primary-brand-a-light: #3ed93f;
20
+ --collections-brands-color-primary-brand-b-dark: var(--color-pink-800);
21
+ --collections-brands-color-primary-brand-b-light: var(--color-pink-400);
22
+ --collections-brands-color-secondary-brand-a-dark: var(--color-pink-500);
23
+ --collections-brands-color-secondary-brand-a-light: var(--color-pink-500);
24
+ --collections-brands-color-secondary-brand-b-dark: var(--color-purple-500);
25
+ --collections-brands-color-secondary-brand-b-light: var(--color-purple-500);
26
+ --collections-brands-foo-bar-brand-a-dark: 1px;
27
+ --collections-brands-foo-bar-brand-a-light: 1px;
28
+ --collections-brands-foo-bar-brand-b-dark: 1px;
29
+ --collections-brands-foo-bar-brand-b-light: 1px;
30
+ --collections-brands-test-dimension-brand-a-light: 2px;
31
+ --collections-brands-test-primary-brand-a-dark: var(
32
+ --collections-density-spacing-small-compact
33
+ );
34
+ --collections-brands-test-primary-brand-a-light: var(--spacing-scale-8);
35
+ --collections-brands-test-secondary-brand-a-dark: #cc2020;
36
+ --collections-brands-test-secondary-brand-a-light: #cc2020;
37
+ --collections-brands-test-secondary-brand-b-dark: var(--color-neutral-600);
38
+ --collections-brands-test-secondary-brand-b-light: var(--color-neutral-300);
39
+ --collections-density-spacing-large-comfortable: var(--spacing-scale-8);
40
+ --collections-density-spacing-large-compact: var(--spacing-scale-5);
41
+ --collections-density-spacing-medium-comfortable: var(--spacing-scale-6);
42
+ --collections-density-spacing-medium-compact: var(--spacing-scale-5);
43
+ --collections-density-spacing-small-comfortable: var(--spacing-scale-3);
44
+ --collections-density-spacing-small-compact: var(--spacing-scale-2);
45
+ --color-black: var(--color-neutral-800);
46
+ --color-white: #ffffff;
47
+ --color-neutral-100: #fafafb;
48
+ --color-neutral-200: #f6f6f7;
49
+ --color-neutral-300: #edecef;
50
+ --color-neutral-400: #dedce2;
51
+ --color-neutral-500: #bfbdc6;
52
+ --color-neutral-600: #acaab6;
53
+ --color-neutral-700: #878496;
54
+ --color-neutral-800: #191335;
55
+ --color-pink-100: #ffdddb;
56
+ --color-pink-200: #fcb6b8;
57
+ --color-pink-300: #fa919f;
58
+ --color-pink-400: #f37491;
59
+ --color-pink-500: #ec487d;
60
+ --color-pink-600: #ca3473;
61
+ --color-pink-700: #aa2469;
62
+ --color-pink-800: #710d55;
63
+ --color-purple-100: #e5dbfe;
64
+ --color-purple-200: #c9b8fe;
65
+ --color-purple-300: #aa94f9;
66
+ --color-purple-400: #9076f3;
67
+ --color-purple-500: #6a4cec;
68
+ --color-purple-600: #5036cb;
69
+ --color-purple-700: #3925aa;
70
+ --color-purple-800: #190f72;
71
+ --color-text-default: var(--color-neutral-800);
72
+ --color-text-disabled: var(--color-neutral-400);
73
+ --color-text-muted: var(--color-neutral-600);
74
+ --color-text-white: var(--color-white);
75
+ --cypress-large: 1.5rem;
76
+ --cypress-medium: 1rem;
77
+ --cypress-small: 0.5rem;
78
+ --media-query-large: screen and (min-width: var(--breakpoint-large));
79
+ --media-query-medium: screen and (min-width: var(--breakpoint-medium));
80
+ --media-query-small: screen and (min-width: var(--breakpoint-small));
81
+ --misc-boolean: true;
82
+ --misc-duration: 100ms;
83
+ --misc-is-awesome: true;
84
+ --misc-is-awesome2: var(--misc-is-awesome);
85
+ --misc-magic-number: 42;
86
+ --misc-shadow: 1px 1px 1px 1px #000000;
87
+ --misc-some-text: Hello world;
88
+ --radius-large: var(--cypress-large);
89
+ --radius-medium: 8px;
90
+ --radius-round: 160px;
91
+ --radius-small: 4px;
92
+ --shadow-1: 0px 5px 10px 0px #000000;
93
+ --shadow-2: 0px 10px 20px 0px #000000;
94
+ --shadow-3: 0px 15px 25px 0px #000000;
95
+ --shadow-4: 0px 20px 40px 0px #000000;
96
+ --shadow-color: #000000;
97
+ --spacing-scale-1: 2px;
98
+ --spacing-scale-2: 4px;
99
+ --spacing-scale-3: 8px;
100
+ --spacing-scale-4: 12px;
101
+ --spacing-scale-5: 16px;
102
+ --spacing-scale-6: 24px;
103
+ --spacing-scale-7: 32px;
104
+ --spacing-scale-8: 40px;
105
+ --spacing-scale-9: 48px;
106
+ --spacing-scale-10: 64px;
107
+ --spacing-scale-11: 80px;
108
+ --spacing-scale-12: 96px;
109
+ --spacing-scale-13: 160px;
110
+ --transition-a: 250ms cubic-bezier(0, 0, 1, 1) 100ms;
111
+ --transition-b: 500ms cubic-bezier(0.1, 1, 0.3, 1) 10ms;
112
+ }
package/dist/design-tokens.css.scss ADDED
@@ -0,0 +1,112 @@
1
+ :root {
2
+ --ungrouped-token: Im Not Part of Any Group;
3
+ --border-1: red dotted 2px;
4
+ --breakpoint-large: var(--radius-large);
5
+ --breakpoint-medium: 480px;
6
+ --breakpoint-small: 330px;
7
+ --breakpoint-xlarge: 992px;
8
+ --breakpoint-xxlarge: 1240px;
9
+ --breakpoint-xxxlarge: 1440px;
10
+ --collections-brands-color-color-brand-a-dark: #000000;
11
+ --collections-brands-color-color-brand-a-light: #000000;
12
+ --collections-brands-color-color-brand-b-dark: #000000;
13
+ --collections-brands-color-color-brand-b-light: #000000;
14
+ --collections-brands-color-color-1-brand-a-dark: #000000;
15
+ --collections-brands-color-color-1-brand-a-light: #000000;
16
+ --collections-brands-color-color-1-brand-b-dark: #000000;
17
+ --collections-brands-color-color-1-brand-b-light: #000000;
18
+ --collections-brands-color-primary-brand-a-dark: #0a13f7;
19
+ --collections-brands-color-primary-brand-a-light: #3ed93f;
20
+ --collections-brands-color-primary-brand-b-dark: var(--color-pink-800);
21
+ --collections-brands-color-primary-brand-b-light: var(--color-pink-400);
22
+ --collections-brands-color-secondary-brand-a-dark: var(--color-pink-500);
23
+ --collections-brands-color-secondary-brand-a-light: var(--color-pink-500);
24
+ --collections-brands-color-secondary-brand-b-dark: var(--color-purple-500);
25
+ --collections-brands-color-secondary-brand-b-light: var(--color-purple-500);
26
+ --collections-brands-foo-bar-brand-a-dark: 1px;
27
+ --collections-brands-foo-bar-brand-a-light: 1px;
28
+ --collections-brands-foo-bar-brand-b-dark: 1px;
29
+ --collections-brands-foo-bar-brand-b-light: 1px;
30
+ --collections-brands-test-dimension-brand-a-light: 2px;
31
+ --collections-brands-test-primary-brand-a-dark: var(
32
+ --collections-density-spacing-small-compact
33
+ );
34
+ --collections-brands-test-primary-brand-a-light: var(--spacing-scale-8);
35
+ --collections-brands-test-secondary-brand-a-dark: #cc2020;
36
+ --collections-brands-test-secondary-brand-a-light: #cc2020;
37
+ --collections-brands-test-secondary-brand-b-dark: var(--color-neutral-600);
38
+ --collections-brands-test-secondary-brand-b-light: var(--color-neutral-300);
39
+ --collections-density-spacing-large-comfortable: var(--spacing-scale-8);
40
+ --collections-density-spacing-large-compact: var(--spacing-scale-5);
41
+ --collections-density-spacing-medium-comfortable: var(--spacing-scale-6);
42
+ --collections-density-spacing-medium-compact: var(--spacing-scale-5);
43
+ --collections-density-spacing-small-comfortable: var(--spacing-scale-3);
44
+ --collections-density-spacing-small-compact: var(--spacing-scale-2);
45
+ --color-black: var(--color-neutral-800);
46
+ --color-white: #ffffff;
47
+ --color-neutral-100: #fafafb;
48
+ --color-neutral-200: #f6f6f7;
49
+ --color-neutral-300: #edecef;
50
+ --color-neutral-400: #dedce2;
51
+ --color-neutral-500: #bfbdc6;
52
+ --color-neutral-600: #acaab6;
53
+ --color-neutral-700: #878496;
54
+ --color-neutral-800: #191335;
55
+ --color-pink-100: #ffdddb;
56
+ --color-pink-200: #fcb6b8;
57
+ --color-pink-300: #fa919f;
58
+ --color-pink-400: #f37491;
59
+ --color-pink-500: #ec487d;
60
+ --color-pink-600: #ca3473;
61
+ --color-pink-700: #aa2469;
62
+ --color-pink-800: #710d55;
63
+ --color-purple-100: #e5dbfe;
64
+ --color-purple-200: #c9b8fe;
65
+ --color-purple-300: #aa94f9;
66
+ --color-purple-400: #9076f3;
67
+ --color-purple-500: #6a4cec;
68
+ --color-purple-600: #5036cb;
69
+ --color-purple-700: #3925aa;
70
+ --color-purple-800: #190f72;
71
+ --color-text-default: var(--color-neutral-800);
72
+ --color-text-disabled: var(--color-neutral-400);
73
+ --color-text-muted: var(--color-neutral-600);
74
+ --color-text-white: var(--color-white);
75
+ --cypress-large: 1.5rem;
76
+ --cypress-medium: 1rem;
77
+ --cypress-small: 0.5rem;
78
+ --media-query-large: screen and (min-width: var(--breakpoint-large));
79
+ --media-query-medium: screen and (min-width: var(--breakpoint-medium));
80
+ --media-query-small: screen and (min-width: var(--breakpoint-small));
81
+ --misc-boolean: true;
82
+ --misc-duration: 100ms;
83
+ --misc-is-awesome: true;
84
+ --misc-is-awesome2: var(--misc-is-awesome);
85
+ --misc-magic-number: 42;
86
+ --misc-shadow: 1px 1px 1px 1px #000000;
87
+ --misc-some-text: Hello world;
88
+ --radius-large: var(--cypress-large);
89
+ --radius-medium: 8px;
90
+ --radius-round: 160px;
91
+ --radius-small: 4px;
92
+ --shadow-1: 0px 5px 10px 0px #000000;
93
+ --shadow-2: 0px 10px 20px 0px #000000;
94
+ --shadow-3: 0px 15px 25px 0px #000000;
95
+ --shadow-4: 0px 20px 40px 0px #000000;
96
+ --shadow-color: #000000;
97
+ --spacing-scale-1: 2px;
98
+ --spacing-scale-2: 4px;
99
+ --spacing-scale-3: 8px;
100
+ --spacing-scale-4: 12px;
101
+ --spacing-scale-5: 16px;
102
+ --spacing-scale-6: 24px;
103
+ --spacing-scale-7: 32px;
104
+ --spacing-scale-8: 40px;
105
+ --spacing-scale-9: 48px;
106
+ --spacing-scale-10: 64px;
107
+ --spacing-scale-11: 80px;
108
+ --spacing-scale-12: 96px;
109
+ --spacing-scale-13: 160px;
110
+ --transition-a: 250ms cubic-bezier(0, 0, 1, 1) 100ms;
111
+ --transition-b: 500ms cubic-bezier(0.1, 1, 0.3, 1) 10ms;
112
+ }
package/dist/design-tokens.d.cts 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';