@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/.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';