Skip to content

Commit 6b8de73

Browse files
gioboagioboa
committed
fix tailwind config
1 parent 5719174 commit 6b8de73

File tree

3 files changed

+258
-23
lines changed

3 files changed

+258
-23
lines changed

‎apps/qwik-demo-app/tailwind.config.js

+237-2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,248 @@
11
const { join } = require('path');
2+
const tailwindCssVariables = require('@mertasan/tailwindcss-variables');
23

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

‎package.json

+6-7
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,13 @@
55
"scripts": {},
66
"private": false,
77
"devDependencies": {
8-
"@builder.io/qwik": "~1.1.0",
98
"@builder.io/qwik-city": "~1.1.0",
9+
"@builder.io/qwik": "~1.1.0",
1010
"@commitlint/cli": "^17.6.1",
1111
"@commitlint/config-angular": "^17.6.1",
1212
"@commitlint/config-conventional": "^17.6.1",
1313
"@jscutlery/semver": "^2.30.1",
14+
"@mertasan/tailwindcss-variables": "^2.6.1",
1415
"@nrwl/cypress": "15.9.2",
1516
"@nrwl/eslint-plugin-nx": "15.9.2",
1617
"@nrwl/linter": "15.9.2",
@@ -25,10 +26,10 @@
2526
"autoprefixer": "~10.4.11",
2627
"cypress": "^12.10.0",
2728
"cz-conventional-changelog": "^3.3.0",
28-
"eslint": "~8.38.0",
2929
"eslint-config-prettier": "8.8.0",
3030
"eslint-plugin-cypress": "^2.13.2",
3131
"eslint-plugin-qwik": "~1.1.0",
32+
"eslint": "~8.38.0",
3233
"husky": "^8.0.3",
3334
"jsdom": "~21.1.1",
3435
"ngx-deploy-npm": "^5.2.0",
@@ -37,13 +38,14 @@
3738
"postcss": "~8.4.16",
3839
"prettier": "^2.8.7",
3940
"qwik-nx": "^0.15.4",
41+
"sass": "^1.62.1",
4042
"tailwindcss": "~3.1.8",
4143
"tslib": "^2.5.3",
4244
"undici": "^5.22.0",
43-
"vite": "~4.3.1",
4445
"vite-plugin-dts": "~2.3.0",
4546
"vite-plugin-eslint": "^1.8.1",
4647
"vite-tsconfig-paths": "~4.2.0",
48+
"vite": "~4.3.1",
4749
"vitest": "^0.30.1"
4850
},
4951
"config": {
@@ -53,8 +55,5 @@
5355
},
5456
"keywords": [
5557
"qwik"
56-
],
57-
"dependencies": {
58-
"sass": "^1.62.1"
59-
}
58+
]
6059
}

0 commit comments

Comments
 (0)