diff --git a/apps/qwik-demo-app/tailwind.config.js b/apps/qwik-demo-app/tailwind.config.js index 0c71b4e..b81200e 100644 --- a/apps/qwik-demo-app/tailwind.config.js +++ b/apps/qwik-demo-app/tailwind.config.js @@ -1,4 +1,5 @@ const { join } = require('path'); +const tailwindCssVariables = require('@mertasan/tailwindcss-variables'); /** @type {import('tailwindcss').Config} */ module.exports = { @@ -6,8 +7,242 @@ module.exports = { join(__dirname, 'src/**/*.{js,ts,jsx,tsx,mdx}'), join(__dirname, '../../packages/qwik-storefront-ui/src/**/*.{js,ts,jsx,tsx,mdx}') ], + future: { + hoverOnlyWhenSupported: true, + }, theme: { - extend: {}, + extend: { + outlineColor: ({ theme }) => ({ + DEFAULT: theme('colors.secondary.600'), + }), + outlineOffset: { + DEFAULT: '2px', + }, + outlineWidth: { + DEFAULT: '2px', + }, + boxShadow: { + DEFAULT: '0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06)', + md: '0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06)', + }, + backgroundImage: { + 'checked-checkbox-current': + '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%)', + 'indeterminate-checkbox-current': + '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%)', + }, + colors: { + brand: 'rgb(var(--colors-brand) / )', + neutral: { + '900': 'rgb(var(--colors-neutral-900) / )', + '800': 'rgb(var(--colors-neutral-800) / )', + '700': 'rgb(var(--colors-neutral-700) / )', + '600': 'rgb(var(--colors-neutral-600) / )', + '500': 'rgb(var(--colors-neutral-500) / )', + '400': 'rgb(var(--colors-neutral-400) / )', + '300': 'rgb(var(--colors-neutral-300) / )', + '200': 'rgb(var(--colors-neutral-200) / )', + '100': 'rgb(var(--colors-neutral-100) / )', + '50': 'rgb(var(--colors-neutral-50) / )', + }, + primary: { + '900': 'rgb(var(--colors-primary-900) / )', + '800': 'rgb(var(--colors-primary-800) / )', + '700': 'rgb(var(--colors-primary-700) / )', + '600': 'rgb(var(--colors-primary-600) / )', + '500': 'rgb(var(--colors-primary-500) / )', + '400': 'rgb(var(--colors-primary-400) / )', + '300': 'rgb(var(--colors-primary-300) / )', + '200': 'rgb(var(--colors-primary-200) / )', + '100': 'rgb(var(--colors-primary-100) / )', + '50': 'rgb(var(--colors-primary-50) / )', + }, + secondary: { + '900': 'rgb(var(--colors-secondary-900) / )', + '800': 'rgb(var(--colors-secondary-800) / )', + '700': 'rgb(var(--colors-secondary-700) / )', + '600': 'rgb(var(--colors-secondary-600) / )', + '500': 'rgb(var(--colors-secondary-500) / )', + '400': 'rgb(var(--colors-secondary-400) / )', + '300': 'rgb(var(--colors-secondary-300) / )', + '200': 'rgb(var(--colors-secondary-200) / )', + '100': 'rgb(var(--colors-secondary-100) / )', + '50': 'rgb(var(--colors-secondary-50) / )', + }, + positive: { + '900': 'rgb(var(--colors-positive-900) / )', + '800': 'rgb(var(--colors-positive-800) / )', + '700': 'rgb(var(--colors-positive-700) / )', + '600': 'rgb(var(--colors-positive-600) / )', + '500': 'rgb(var(--colors-positive-500) / )', + '400': 'rgb(var(--colors-positive-400) / )', + '300': 'rgb(var(--colors-positive-300) / )', + '200': 'rgb(var(--colors-positive-200) / )', + '100': 'rgb(var(--colors-positive-100) / )', + '50': 'rgb(var(--colors-positive-50) / )', + }, + negative: { + '900': 'rgb(var(--colors-negative-900) / )', + '800': 'rgb(var(--colors-negative-800) / )', + '700': 'rgb(var(--colors-negative-700) / )', + '600': 'rgb(var(--colors-negative-600) / )', + '500': 'rgb(var(--colors-negative-500) / )', + '400': 'rgb(var(--colors-negative-400) / )', + '300': 'rgb(var(--colors-negative-300) / )', + '200': 'rgb(var(--colors-negative-200) / )', + '100': 'rgb(var(--colors-negative-100) / )', + '50': 'rgb(var(--colors-negative-50) / )', + }, + warning: { + '900': 'rgb(var(--colors-warning-900) / )', + '800': 'rgb(var(--colors-warning-800) / )', + '700': 'rgb(var(--colors-warning-700) / )', + '600': 'rgb(var(--colors-warning-600) / )', + '500': 'rgb(var(--colors-warning-500) / )', + '400': 'rgb(var(--colors-warning-400) / )', + '300': 'rgb(var(--colors-warning-300) / )', + '200': 'rgb(var(--colors-warning-200) / )', + '100': 'rgb(var(--colors-warning-100) / )', + '50': 'rgb(var(--colors-warning-50) / )', + }, + disabled: { + '900': 'rgb(var(--colors-disabled-900) / 0.5)', + '800': 'rgb(var(--colors-disabled-800) / 0.5)', + '700': 'rgb(var(--colors-disabled-700) / 0.5)', + '600': 'rgb(var(--colors-disabled-600) / 0.5)', + '500': 'rgb(var(--colors-disabled-500) / 0.5)', + '400': 'rgb(var(--colors-disabled-400) / 0.5)', + '300': 'rgb(var(--colors-disabled-300) / 0.5)', + '200': 'rgb(var(--colors-disabled-200) / 0.5)', + '100': 'rgb(var(--colors-disabled-100) / 0.5)', + '50': 'rgb(var(--colors-disabled-50) / 0.5)', + }, + }, + fontFamily: { + headings: 'Red Hat Display, sans-serif', + body: 'Red Hat Text, sans-serif', + }, + screens: { + xs: '376px', + sm: '640px', + }, + keyframes: { + 'stroke-loader-circular': { + '0%': { 'stroke-dasharray': '1, 200', 'stroke-dashoffset': '0' }, + '50%': { 'stroke-dasharray': '140, 200', 'stroke-dashoffset': '-35' }, + '100%': { 'stroke-dasharray': '89, 200', 'stroke-dashoffset': '-150' }, + }, + line: { + from: { + left: '-100%', + width: '100%', + }, + to: { + left: '100%', + width: '10%', + }, + }, + }, + animation: { + 'spin-slow': 'spin 1.5s linear infinite', + line: 'line 1.5s ease-in infinite', + 'stroke-loader-circular': 'stroke-loader-circular 2s ease-in-out infinite', + }, + fontSize: { + '2xs': ['10px', '11px'], + '3xs': ['8px', '8px'], + }, + }, + variables: { + DEFAULT: { + colors: { + primary: { + '50': '240 253 244', + '100': '220 252 231', + '200': '187 247 208', + '300': '134 239 172', + '400': '74 222 128', + '500': '2 198 82', + '600': '10 171 69', + '700': '1 137 55', + '800': '22 101 52', + '900': '20 83 45', + }, + secondary: { + '50': '245 243 255', + '100': '237 233 254', + '200': '221 214 254', + '300': '196 181 253', + '400': '167 139 250', + '500': '135 92 246', + '600': '111 64 236', + '700': '97 49 221', + '800': '83 30 211', + '900': '68 21 178', + }, + positive: { + '50': '240 253 244', + '100': '220 252 231', + '200': '187 247 208', + '300': '134 239 172', + '400': '74 222 128', + '500': '2 198 82', + '600': '10 171 69', + '700': '1 137 55', + '800': '22 101 52', + '900': '20 83 45', + }, + negative: { + '50': '255 241 242', + '100': '255 228 230', + '200': '254 205 211', + '300': '253 164 175', + '400': '251 113 133', + '500': '244 63 94', + '600': '225 29 72', + '700': '190 18 60', + '800': '159 18 57', + '900': '136 19 55', + }, + warning: { + '50': '254 252 232', + '100': '254 249 195', + '200': '254 240 138', + '300': '253 224 71', + '400': '250 204 21', + '500': '234 179 8', + '600': '202 138 4', + '700': '161 98 7', + '800': '133 77 14', + '900': '113 63 18', + }, + neutral: { + '50': '250 250 250', + '100': '244 244 245', + '200': '228 228 231', + '300': '212 212 216', + '400': '161 161 170', + '500': '113 113 122', + '600': '82 82 91', + '700': '63 63 70', + '800': '39 39 42', + '900': '24 24 27', + }, + disabled: { + '50': '250 250 250', + '100': '244 244 245', + '200': '228 228 231', + '300': '212 212 216', + '400': '161 161 170', + '500': '113 113 122', + '600': '82 82 91', + '700': '63 63 70', + '800': '39 39 42', + '900': '24 24 27', + }, + }, + }, + }, }, - plugins: [], + plugins: [tailwindCssVariables] }; diff --git a/package.json b/package.json index f0b6d8a..ad6e998 100644 --- a/package.json +++ b/package.json @@ -5,12 +5,13 @@ "scripts": {}, "private": false, "devDependencies": { - "@builder.io/qwik": "~1.1.0", "@builder.io/qwik-city": "~1.1.0", + "@builder.io/qwik": "~1.1.0", "@commitlint/cli": "^17.6.1", "@commitlint/config-angular": "^17.6.1", "@commitlint/config-conventional": "^17.6.1", "@jscutlery/semver": "^2.30.1", + "@mertasan/tailwindcss-variables": "^2.6.1", "@nrwl/cypress": "15.9.2", "@nrwl/eslint-plugin-nx": "15.9.2", "@nrwl/linter": "15.9.2", @@ -25,10 +26,10 @@ "autoprefixer": "~10.4.11", "cypress": "^12.10.0", "cz-conventional-changelog": "^3.3.0", - "eslint": "~8.38.0", "eslint-config-prettier": "8.8.0", "eslint-plugin-cypress": "^2.13.2", "eslint-plugin-qwik": "~1.1.0", + "eslint": "~8.38.0", "husky": "^8.0.3", "jsdom": "~21.1.1", "ngx-deploy-npm": "^5.2.0", @@ -37,13 +38,14 @@ "postcss": "~8.4.16", "prettier": "^2.8.7", "qwik-nx": "^0.15.4", + "sass": "^1.62.1", "tailwindcss": "~3.1.8", "tslib": "^2.5.3", "undici": "^5.22.0", - "vite": "~4.3.1", "vite-plugin-dts": "~2.3.0", "vite-plugin-eslint": "^1.8.1", "vite-tsconfig-paths": "~4.2.0", + "vite": "~4.3.1", "vitest": "^0.30.1" }, "config": { @@ -53,8 +55,5 @@ }, "keywords": [ "qwik" - ], - "dependencies": { - "sass": "^1.62.1" - } + ] } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3cfd106..01c22a7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,6 +1,9 @@ lockfileVersion: '6.0' dependencies: + '@mertasan/tailwindcss-variables': + specifier: ^2.6.1 + version: 2.6.1(autoprefixer@10.4.11)(postcss@8.4.23) sass: specifier: ^1.62.1 version: 1.62.1 @@ -1972,6 +1975,18 @@ packages: - supports-color dev: true + /@mertasan/tailwindcss-variables@2.6.1(autoprefixer@10.4.11)(postcss@8.4.23): + resolution: {integrity: sha512-tiOU/BIVEYaVbzeD34kEEFfdSkKQJ4t4t8GMo9PP8owtr6HEU9j3QquwIeWdt92/zKzkXVeLIuCMlj4now5fhA==} + engines: {node: '>=12.13.0'} + peerDependencies: + autoprefixer: ^10.0.2 + postcss: ^8.0.9 + dependencies: + autoprefixer: 10.4.11(postcss@8.4.23) + lodash: 4.17.21 + postcss: 8.4.23 + dev: false + /@microsoft/api-extractor-model@7.26.4(@types/node@18.15.13): resolution: {integrity: sha512-PDCgCzXDo+SLY5bsfl4bS7hxaeEtnXj7XtuzEE+BtALp7B5mK/NrS2kHWU69pohgsRmEALycQdaQPXoyT2i5MQ==} dependencies: @@ -3017,7 +3032,6 @@ packages: picocolors: 1.0.0 postcss: 8.4.23 postcss-value-parser: 4.2.0 - dev: true /available-typed-arrays@1.0.5: resolution: {integrity: sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==} @@ -3182,7 +3196,6 @@ packages: electron-to-chromium: 1.4.368 node-releases: 2.0.10 update-browserslist-db: 1.0.11(browserslist@4.21.5) - dev: true /buffer-crc32@0.2.13: resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==} @@ -3249,7 +3262,6 @@ packages: /caniuse-lite@1.0.30001481: resolution: {integrity: sha512-KCqHwRnaa1InZBtqXzP98LPg0ajCVujMKjqKDhZEthIpAsJl/YEIa3YvXjGXPVqzZVguccuu7ga9KOE1J9rKPQ==} - dev: true /caseless@0.12.0: resolution: {integrity: sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==} @@ -4101,7 +4113,6 @@ packages: /electron-to-chromium@1.4.368: resolution: {integrity: sha512-e2aeCAixCj9M7nJxdB/wDjO6mbYX+lJJxSJCXDzlr5YPGYVofuJwGN9nKg2o6wWInjX6XmxRinn3AeJMK81ltw==} - dev: true /emoji-regex@8.0.0: resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==} @@ -4222,7 +4233,6 @@ packages: /escalade@3.1.1: resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==} engines: {node: '>=6'} - dev: true /escape-string-regexp@1.0.5: resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==} @@ -4708,7 +4718,6 @@ packages: /fraction.js@4.2.0: resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==} - dev: true /fs-constants@1.0.0: resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==} @@ -5896,7 +5905,6 @@ packages: /lodash@4.17.21: resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==} - dev: true /log-symbols@4.1.0: resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==} @@ -6534,7 +6542,6 @@ packages: resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==} engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} hasBin: true - dev: true /natural-compare-lite@1.4.0: resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==} @@ -6602,7 +6609,6 @@ packages: /node-releases@2.0.10: resolution: {integrity: sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==} - dev: true /normalize-package-data@2.5.0: resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==} @@ -6630,7 +6636,6 @@ packages: /normalize-range@0.1.2: resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==} engines: {node: '>=0.10.0'} - dev: true /npm-run-path@4.0.1: resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==} @@ -7003,7 +7008,6 @@ packages: /picocolors@1.0.0: resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==} - dev: true /picomatch@2.3.1: resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==} @@ -7092,7 +7096,6 @@ packages: /postcss-value-parser@4.2.0: resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==} - dev: true /postcss@8.4.23: resolution: {integrity: sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==} @@ -7101,7 +7104,6 @@ packages: nanoid: 3.3.6 picocolors: 1.0.0 source-map-js: 1.0.2 - dev: true /prelude-ls@1.1.2: resolution: {integrity: sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==} @@ -8369,7 +8371,6 @@ packages: browserslist: 4.21.5 escalade: 3.1.1 picocolors: 1.0.0 - dev: true /uri-js@4.4.1: resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}