commerce-toolkit 0.0.0 → 0.0.2

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.
@@ -0,0 +1,233 @@
1
+ import containerQueries from '@tailwindcss/container-queries';
2
+ import typography from '@tailwindcss/typography';
3
+ import animate from 'tailwindcss-animate';
4
+
5
+ /** @type {import('tailwindcss').Config} */
6
+ export default {
7
+ theme: {
8
+ extend: {
9
+ typography: {
10
+ DEFAULT: {
11
+ css: {
12
+ h1: {
13
+ color: 'hsl(var(--foreground))',
14
+ fontFamily: 'var(--font-family-heading)',
15
+ },
16
+ h2: {
17
+ color: 'hsl(var(--foreground))',
18
+ fontFamily: 'var(--font-family-heading)',
19
+ },
20
+ h3: {
21
+ color: 'hsl(var(--foreground))',
22
+ fontFamily: 'var(--font-family-heading)',
23
+ },
24
+ h4: {
25
+ color: 'hsl(var(--foreground))',
26
+ fontFamily: 'var(--font-family-heading)',
27
+ },
28
+ h5: {
29
+ color: 'hsl(var(--foreground))',
30
+ fontFamily: 'var(--font-family-heading)',
31
+ },
32
+ h6: {
33
+ color: 'hsl(var(--foreground))',
34
+ fontFamily: 'var(--font-family-heading)',
35
+ },
36
+ p: {
37
+ color: 'hsl(var(--foreground))',
38
+ fontFamily: 'var(--font-family-body)',
39
+ },
40
+ a: {
41
+ color: 'color-mix(in oklab, hsl(var(--primary)), black 15%)',
42
+ textDecoration: 'none',
43
+ '&:hover': {
44
+ textDecoration: 'underline',
45
+ },
46
+ },
47
+ img: {
48
+ borderRadius: '1rem',
49
+ },
50
+ ul: {
51
+ color: 'hsl(var(--contrast-500))',
52
+ fontFamily: 'var(--font-family-body)',
53
+ },
54
+ ol: {
55
+ color: 'hsl(var(--contrast-500))',
56
+ fontFamily: 'var(--font-family-body)',
57
+ },
58
+ strong: {
59
+ fontWeight: '600',
60
+ },
61
+ blockquote: {
62
+ borderLeftColor: 'hsl(var(--contrast-300))',
63
+ p: {
64
+ color: 'hsl(var(--contrast-500))',
65
+ fontStyle: 'normal',
66
+ fontWeight: '400',
67
+ },
68
+ },
69
+ code: {
70
+ color: 'hsl(var(--contrast-500))',
71
+ fontFamily: 'var(--font-family-mono)',
72
+ },
73
+ pre: {
74
+ color: 'hsl(var(--background))',
75
+ backgroundColor: 'hsl(var(--foreground))',
76
+ fontFamily: 'var(--font-family-mono)',
77
+ },
78
+ },
79
+ },
80
+ },
81
+ colors: {
82
+ primary: {
83
+ DEFAULT: 'hsl(var(--primary))',
84
+ highlight: 'color-mix(in oklab, hsl(var(--primary)), white 75%)',
85
+ shadow: 'color-mix(in oklab, hsl(var(--primary)), black 75%)',
86
+ },
87
+ accent: {
88
+ DEFAULT: 'hsl(var(--accent))',
89
+ highlight: 'color-mix(in oklab, hsl(var(--accent)), white 75%)',
90
+ shadow: 'color-mix(in oklab, hsl(var(--accent)), black 75%)',
91
+ },
92
+ success: {
93
+ DEFAULT: 'hsl(var(--success))',
94
+ highlight: 'color-mix(in oklab, hsl(var(--success)), white 75%)',
95
+ shadow: 'color-mix(in oklab, hsl(var(--success)), black 75%)',
96
+ },
97
+ error: {
98
+ DEFAULT: 'hsl(var(--error))',
99
+ highlight: 'color-mix(in oklab, hsl(var(--error)), white 75%)',
100
+ shadow: 'color-mix(in oklab, hsl(var(--error)), black 75%)',
101
+ },
102
+ warning: {
103
+ DEFAULT: 'hsl(var(--warning))',
104
+ highlight: 'color-mix(in oklab, hsl(var(--warning)), white 75%)',
105
+ shadow: 'color-mix(in oklab, hsl(var(--warning)), black 75%)',
106
+ },
107
+ info: {
108
+ DEFAULT: 'hsl(var(--info))',
109
+ highlight: 'color-mix(in oklab, hsl(var(--info)), white 75%)',
110
+ shadow: 'color-mix(in oklab, hsl(var(--info)), black 75%)',
111
+ },
112
+ background: 'hsl(var(--background))',
113
+ foreground: 'hsl(var(--foreground))',
114
+ contrast: {
115
+ 100: 'hsl(var(--contrast-100))',
116
+ 200: 'hsl(var(--contrast-200))',
117
+ 300: 'hsl(var(--contrast-300))',
118
+ 400: 'hsl(var(--contrast-400))',
119
+ 500: 'hsl(var(--contrast-500))',
120
+ },
121
+ },
122
+ fontFamily: {
123
+ heading: [
124
+ 'var(--font-family-heading)',
125
+ {
126
+ fontFeatureSettings: 'var(--font-feature-settings-heading)',
127
+ fontVariationSettings: 'var(--font-variation-settings-heading)',
128
+ },
129
+ ],
130
+ body: [
131
+ 'var(--font-family-body)',
132
+ {
133
+ fontFeatureSettings: 'var(--font-feature-settings-body)',
134
+ fontVariationSettings: 'var(--font-variation-settings-body)',
135
+ },
136
+ ],
137
+ mono: [
138
+ 'var(--font-family-mono)',
139
+ {
140
+ fontFeatureSettings: 'var(--font-feature-settings-mono)',
141
+ fontVariationSettings: 'var(--font-variation-settings-mono)',
142
+ },
143
+ ],
144
+ },
145
+ fontSize: {
146
+ xs: 'var(--font-size-xs, 0.75rem)',
147
+ sm: 'var(--font-size-sm, 0.875rem)',
148
+ base: 'var(--font-size-base, 1rem)',
149
+ lg: 'var(--font-size-lg, 1.125rem)',
150
+ xl: 'var(--font-size-xl, 1.25rem)',
151
+ '2xl': 'var(--font-size-2xl, 1.5rem)',
152
+ '3xl': 'var(--font-size-3xl, 1.875rem)',
153
+ '4xl': 'var(--font-size-4xl, 2.25rem)',
154
+ '5xl': 'var(--font-size-5xl, 3rem)',
155
+ '6xl': 'var(--font-size-6xl, 3.75rem)',
156
+ '7xl': 'var(--font-size-7xl, 4.5rem)',
157
+ '8xl': 'var(--font-size-8xl, 6rem)',
158
+ '9xl': 'var(--font-size-9xl, 8rem)',
159
+ },
160
+ shadows: {
161
+ sm: 'var(--shadow-sm)',
162
+ DEFAULT: 'var(--shadow-base)',
163
+ md: 'var(--shadow-md)',
164
+ lg: 'var(--shadow-lg)',
165
+ xl: 'var(--shadow-xl)',
166
+ },
167
+ keyframes: {
168
+ collapse: {
169
+ from: { height: 'var(--radix-accordion-content-height)' },
170
+ to: { height: '0' },
171
+ },
172
+ expand: {
173
+ from: { height: '0' },
174
+ to: { height: 'var(--radix-accordion-content-height)' },
175
+ },
176
+ 'marching-ants': {
177
+ to: {
178
+ 'background-position':
179
+ '0 0, 0 -1px, calc(100% + 1px) 0, 100% calc(100% + 1px), -1px 100%',
180
+ },
181
+ },
182
+ rotateFade: {
183
+ from: { opacity: '1', transform: 'rotateZ(0deg) translate3d(-50%,-50%,0)' },
184
+ '35%': { opacity: '0' },
185
+ '70%': { opacity: '0' },
186
+ to: { opacity: '1', transform: 'rotateZ(360deg) translate3d(-50%,-50%,0)' },
187
+ },
188
+ rotate: {
189
+ from: {
190
+ transform: 'rotateZ(0deg) translate3d(-50%,-50%,0)',
191
+ },
192
+ to: {
193
+ transform: 'rotateZ(360deg) translate3d(-50%,-50%,0)',
194
+ },
195
+ },
196
+ scroll: {
197
+ to: { backgroundPosition: '5px 0' },
198
+ },
199
+ dotScrollSmall: {
200
+ to: { backgroundPosition: '-6px -6px, -12px -12px' },
201
+ },
202
+ dotScrollLarge: {
203
+ to: { backgroundPosition: '-8px -8px, -16px -16px' },
204
+ },
205
+ scrollLeft: {
206
+ '0%': { transform: 'translateX(0)' },
207
+ '100%': { transform: 'translateX(-100%)' },
208
+ },
209
+ shake: {
210
+ '10%, 90%': { transform: 'translate3d(-1px, 0, 0)' },
211
+ '20%, 80%': { transform: 'translate3d(1px, 0, 0)' },
212
+ '30%, 50%, 70%': { transform: 'translate3d(-2px, 0, 0)' },
213
+ '40%, 60%': { transform: 'translate3d(2px, 0, 0)' },
214
+ },
215
+ slideIn: {
216
+ '0%': { transform: 'translateX(-100%)' },
217
+ '100%': { transform: 'translateX(0%)' },
218
+ },
219
+ },
220
+ animation: {
221
+ collapse: 'collapse 400ms cubic-bezier(1, 0, 0.25, 1)',
222
+ expand: 'expand 400ms cubic-bezier(1, 0, 0.25, 1)',
223
+ marching: 'marching-ants 10s linear infinite',
224
+ rotate: 'rotate 2000ms linear infinite',
225
+ scroll: 'scroll 200ms infinite linear both',
226
+ scrollLeft: 'scrollLeft var(--marquee-duration) linear infinite',
227
+ shake: 'shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both',
228
+ slideIn: 'slideIn 800ms cubic-bezier(0.25, 1, 0, 1)',
229
+ },
230
+ },
231
+ },
232
+ plugins: [animate, containerQueries, typography],
233
+ };