Skip to content

Commit 83dd8a8

Browse files
gioboagioboa
committed
change tailwind.config.js
1 parent 8e643ea commit 83dd8a8

File tree

4 files changed

+263
-1
lines changed

4 files changed

+263
-1
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"@nrwl/nx-cloud": "^16.0.5",
2323
"@nrwl/vite": "16.3.2",
2424
"@nrwl/workspace": "^16.3.2",
25+
"@storefront-ui/tw-plugin-peer-next": "^2.3.1",
2526
"@types/node": "20.2.5",
2627
"@typescript-eslint/eslint-plugin": "^5.59.9",
2728
"@typescript-eslint/parser": "^5.59.9",

‎packages/qwik-storefront-ui/src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
export * from './components';
22
export * from './shared/usePopover';
3+
export * from './tailwind.config';

‎packages/qwik-storefront-ui/src/tailwind.config.js‎

Lines changed: 249 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,249 @@
1+
import tailwindCssVariables from '@mertasan/tailwindcss-variables';
2+
import peerNextPlugin from '@storefront-ui/tw-plugin-peer-next';
3+
4+
export const tailwindConfig = {
5+
content: [],
6+
future: {
7+
hoverOnlyWhenSupported: true,
8+
},
9+
theme: {
10+
extend: {
11+
outlineColor: ({ theme }) => ({
12+
DEFAULT: theme('colors.secondary.600'),
13+
}),
14+
outlineOffset: {
15+
DEFAULT: '2px',
16+
},
17+
outlineWidth: {
18+
DEFAULT: '2px',
19+
},
20+
boxShadow: {
21+
DEFAULT:
22+
'0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06)',
23+
md: '0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06)',
24+
},
25+
backgroundImage: {
26+
'checked-checkbox-current':
27+
'linear-gradient(-45deg,transparent 65%, currentcolor 65.99%),linear-gradient(45deg,transparent 75%, currentcolor 75.99%),linear-gradient(-45deg, currentcolor 40%,transparent 40.99%),linear-gradient(45deg, currentcolor 30%, white 30.99%, white 40%,transparent 40.99%),linear-gradient(-45deg, white 50%, currentcolor 50.99%)',
28+
'indeterminate-checkbox-current':
29+
'linear-gradient(90deg,transparent 80%, currentcolor 80%),linear-gradient(-90deg,transparent 80%, currentcolor 80%),linear-gradient(0deg, currentcolor 43%, white 43%, white 57%, currentcolor 57%)',
30+
},
31+
colors: {
32+
brand: 'rgb(var(--colors-brand) / <alpha-value>)',
33+
neutral: {
34+
900: 'rgb(var(--colors-neutral-900) / <alpha-value>)',
35+
800: 'rgb(var(--colors-neutral-800) / <alpha-value>)',
36+
700: 'rgb(var(--colors-neutral-700) / <alpha-value>)',
37+
600: 'rgb(var(--colors-neutral-600) / <alpha-value>)',
38+
500: 'rgb(var(--colors-neutral-500) / <alpha-value>)',
39+
400: 'rgb(var(--colors-neutral-400) / <alpha-value>)',
40+
300: 'rgb(var(--colors-neutral-300) / <alpha-value>)',
41+
200: 'rgb(var(--colors-neutral-200) / <alpha-value>)',
42+
100: 'rgb(var(--colors-neutral-100) / <alpha-value>)',
43+
50: 'rgb(var(--colors-neutral-50) / <alpha-value>)',
44+
},
45+
primary: {
46+
900: 'rgb(var(--colors-primary-900) / <alpha-value>)',
47+
800: 'rgb(var(--colors-primary-800) / <alpha-value>)',
48+
700: 'rgb(var(--colors-primary-700) / <alpha-value>)',
49+
600: 'rgb(var(--colors-primary-600) / <alpha-value>)',
50+
500: 'rgb(var(--colors-primary-500) / <alpha-value>)',
51+
400: 'rgb(var(--colors-primary-400) / <alpha-value>)',
52+
300: 'rgb(var(--colors-primary-300) / <alpha-value>)',
53+
200: 'rgb(var(--colors-primary-200) / <alpha-value>)',
54+
100: 'rgb(var(--colors-primary-100) / <alpha-value>)',
55+
50: 'rgb(var(--colors-primary-50) / <alpha-value>)',
56+
},
57+
secondary: {
58+
900: 'rgb(var(--colors-secondary-900) / <alpha-value>)',
59+
800: 'rgb(var(--colors-secondary-800) / <alpha-value>)',
60+
700: 'rgb(var(--colors-secondary-700) / <alpha-value>)',
61+
600: 'rgb(var(--colors-secondary-600) / <alpha-value>)',
62+
500: 'rgb(var(--colors-secondary-500) / <alpha-value>)',
63+
400: 'rgb(var(--colors-secondary-400) / <alpha-value>)',
64+
300: 'rgb(var(--colors-secondary-300) / <alpha-value>)',
65+
200: 'rgb(var(--colors-secondary-200) / <alpha-value>)',
66+
100: 'rgb(var(--colors-secondary-100) / <alpha-value>)',
67+
50: 'rgb(var(--colors-secondary-50) / <alpha-value>)',
68+
},
69+
positive: {
70+
900: 'rgb(var(--colors-positive-900) / <alpha-value>)',
71+
800: 'rgb(var(--colors-positive-800) / <alpha-value>)',
72+
700: 'rgb(var(--colors-positive-700) / <alpha-value>)',
73+
600: 'rgb(var(--colors-positive-600) / <alpha-value>)',
74+
500: 'rgb(var(--colors-positive-500) / <alpha-value>)',
75+
400: 'rgb(var(--colors-positive-400) / <alpha-value>)',
76+
300: 'rgb(var(--colors-positive-300) / <alpha-value>)',
77+
200: 'rgb(var(--colors-positive-200) / <alpha-value>)',
78+
100: 'rgb(var(--colors-positive-100) / <alpha-value>)',
79+
50: 'rgb(var(--colors-positive-50) / <alpha-value>)',
80+
},
81+
negative: {
82+
900: 'rgb(var(--colors-negative-900) / <alpha-value>)',
83+
800: 'rgb(var(--colors-negative-800) / <alpha-value>)',
84+
700: 'rgb(var(--colors-negative-700) / <alpha-value>)',
85+
600: 'rgb(var(--colors-negative-600) / <alpha-value>)',
86+
500: 'rgb(var(--colors-negative-500) / <alpha-value>)',
87+
400: 'rgb(var(--colors-negative-400) / <alpha-value>)',
88+
300: 'rgb(var(--colors-negative-300) / <alpha-value>)',
89+
200: 'rgb(var(--colors-negative-200) / <alpha-value>)',
90+
100: 'rgb(var(--colors-negative-100) / <alpha-value>)',
91+
50: 'rgb(var(--colors-negative-50) / <alpha-value>)',
92+
},
93+
warning: {
94+
900: 'rgb(var(--colors-warning-900) / <alpha-value>)',
95+
800: 'rgb(var(--colors-warning-800) / <alpha-value>)',
96+
700: 'rgb(var(--colors-warning-700) / <alpha-value>)',
97+
600: 'rgb(var(--colors-warning-600) / <alpha-value>)',
98+
500: 'rgb(var(--colors-warning-500) / <alpha-value>)',
99+
400: 'rgb(var(--colors-warning-400) / <alpha-value>)',
100+
300: 'rgb(var(--colors-warning-300) / <alpha-value>)',
101+
200: 'rgb(var(--colors-warning-200) / <alpha-value>)',
102+
100: 'rgb(var(--colors-warning-100) / <alpha-value>)',
103+
50: 'rgb(var(--colors-warning-50) / <alpha-value>)',
104+
},
105+
disabled: {
106+
900: 'rgb(var(--colors-disabled-900) / 0.5)',
107+
800: 'rgb(var(--colors-disabled-800) / 0.5)',
108+
700: 'rgb(var(--colors-disabled-700) / 0.5)',
109+
600: 'rgb(var(--colors-disabled-600) / 0.5)',
110+
500: 'rgb(var(--colors-disabled-500) / 0.5)',
111+
400: 'rgb(var(--colors-disabled-400) / 0.5)',
112+
300: 'rgb(var(--colors-disabled-300) / 0.5)',
113+
200: 'rgb(var(--colors-disabled-200) / 0.5)',
114+
100: 'rgb(var(--colors-disabled-100) / 0.5)',
115+
50: 'rgb(var(--colors-disabled-50) / 0.5)',
116+
},
117+
},
118+
fontFamily: {
119+
headings: 'Red Hat Display, sans-serif',
120+
body: 'Red Hat Text, sans-serif',
121+
},
122+
screens: {
123+
xs: '376px',
124+
sm: '640px',
125+
},
126+
keyframes: {
127+
'stroke-loader-circular': {
128+
'0%': { 'stroke-dasharray': '1, 200', 'stroke-dashoffset': '0' },
129+
'50%': { 'stroke-dasharray': '140, 200', 'stroke-dashoffset': '-35' },
130+
'100%': {
131+
'stroke-dasharray': '89, 200',
132+
'stroke-dashoffset': '-150',
133+
},
134+
},
135+
line: {
136+
from: {
137+
left: '-100%',
138+
width: '100%',
139+
},
140+
to: {
141+
left: '100%',
142+
width: '10%',
143+
},
144+
},
145+
},
146+
animation: {
147+
'spin-slow': 'spin 1.5s linear infinite',
148+
line: 'line 1.5s ease-in infinite',
149+
'stroke-loader-circular':
150+
'stroke-loader-circular 2s ease-in-out infinite',
151+
},
152+
fontSize: {
153+
'2xs': ['10px', '11px'],
154+
'3xs': ['8px', '8px'],
155+
},
156+
},
157+
variables: {
158+
DEFAULT: {
159+
colors: {
160+
primary: {
161+
50: '240 253 244',
162+
100: '220 252 231',
163+
200: '187 247 208',
164+
300: '134 239 172',
165+
400: '74 222 128',
166+
500: '2 198 82',
167+
600: '10 171 69',
168+
700: '1 137 55',
169+
800: '22 101 52',
170+
900: '20 83 45',
171+
},
172+
secondary: {
173+
50: '245 243 255',
174+
100: '237 233 254',
175+
200: '221 214 254',
176+
300: '196 181 253',
177+
400: '167 139 250',
178+
500: '135 92 246',
179+
600: '111 64 236',
180+
700: '97 49 221',
181+
800: '83 30 211',
182+
900: '68 21 178',
183+
},
184+
positive: {
185+
50: '240 253 244',
186+
100: '220 252 231',
187+
200: '187 247 208',
188+
300: '134 239 172',
189+
400: '74 222 128',
190+
500: '2 198 82',
191+
600: '10 171 69',
192+
700: '1 137 55',
193+
800: '22 101 52',
194+
900: '20 83 45',
195+
},
196+
negative: {
197+
50: '255 241 242',
198+
100: '255 228 230',
199+
200: '254 205 211',
200+
300: '253 164 175',
201+
400: '251 113 133',
202+
500: '244 63 94',
203+
600: '225 29 72',
204+
700: '190 18 60',
205+
800: '159 18 57',
206+
900: '136 19 55',
207+
},
208+
warning: {
209+
50: '254 252 232',
210+
100: '254 249 195',
211+
200: '254 240 138',
212+
300: '253 224 71',
213+
400: '250 204 21',
214+
500: '234 179 8',
215+
600: '202 138 4',
216+
700: '161 98 7',
217+
800: '133 77 14',
218+
900: '113 63 18',
219+
},
220+
neutral: {
221+
50: '250 250 250',
222+
100: '244 244 245',
223+
200: '228 228 231',
224+
300: '212 212 216',
225+
400: '161 161 170',
226+
500: '113 113 122',
227+
600: '82 82 91',
228+
700: '63 63 70',
229+
800: '39 39 42',
230+
900: '24 24 27',
231+
},
232+
disabled: {
233+
50: '250 250 250',
234+
100: '244 244 245',
235+
200: '228 228 231',
236+
300: '212 212 216',
237+
400: '161 161 170',
238+
500: '113 113 122',
239+
600: '82 82 91',
240+
700: '63 63 70',
241+
800: '39 39 42',
242+
900: '24 24 27',
243+
},
244+
},
245+
},
246+
},
247+
},
248+
plugins: [tailwindCssVariables, peerNextPlugin],
249+
};

‎pnpm-lock.yaml‎

Lines changed: 12 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)