From f2f427791ada06a07c4fc606917bd9c4bc6f9470 Mon Sep 17 00:00:00 2001 From: Tyler Date: Fri, 19 Jul 2024 17:33:11 -0400 Subject: [PATCH] v0 --- .prettierrc.json | 2 +- package.json | 5 + pnpm-lock.yaml | 306 +++++++++++++++++++++++++++++++++++++++++++-- postcss.config.js | 6 + src/index.css | 4 + tailwind.config.js | 162 ++++++++++++++++++++++++ 6 files changed, 474 insertions(+), 11 deletions(-) create mode 100644 postcss.config.js create mode 100644 tailwind.config.js diff --git a/.prettierrc.json b/.prettierrc.json index c9605d1a5..c19c44344 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -3,7 +3,7 @@ "singleQuote": true, "trailingComma": "es5", "jsxBracketSameLine": false, - "plugins": ["@trivago/prettier-plugin-sort-imports"], + "plugins": ["@trivago/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"], "importOrder": [ "^./polyfills$", "^react$", diff --git a/package.json b/package.json index b6b554a25..f497b94df 100644 --- a/package.json +++ b/package.json @@ -133,6 +133,7 @@ "react-stately": "^3.23.0", "reselect": "^5.1.0", "styled-components": "^5.3.11", + "tailwind-merge": "^2.4.0", "unionize": "^3.1.0", "use-latest": "^1.2.1", "viem": "^2.16.2", @@ -165,6 +166,7 @@ "@wdio/types": "^8.32.4", "ajv": "^8.12.0", "assert": "^2.0.0", + "autoprefixer": "^10.4.19", "axios": "^1.6.7", "babel-loader": "^9.1.2", "babel-plugin-styled-components": "^2.1.4", @@ -187,10 +189,13 @@ "minimist": "^1.2.8", "node-fetch": "^3.3.1", "pnpm": "^8.6.6", + "postcss": "^8.4.39", "prettier": "^3.2.5", + "prettier-plugin-tailwindcss": "^0.6.5", "readline-sync": "^1.4.10", "rollup-plugin-sourcemaps": "^0.6.3", "stream-browserify": "^3.0.0", + "tailwindcss": "^3.4.6", "ts-node": "^10.9.2", "tsx": "^4.7.1", "typescript": "^5.1.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f50652561..3cb1ee418 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -275,6 +275,9 @@ dependencies: styled-components: specifier: ^5.3.11 version: 5.3.11(@babel/core@7.23.9)(react-dom@18.2.0)(react-is@18.3.1)(react@18.2.0) + tailwind-merge: + specifier: ^2.4.0 + version: 2.4.0 unionize: specifier: ^3.1.0 version: 3.1.0 @@ -367,6 +370,9 @@ devDependencies: assert: specifier: ^2.0.0 version: 2.0.0 + autoprefixer: + specifier: ^10.4.19 + version: 10.4.19(postcss@8.4.39) axios: specifier: ^1.6.7 version: 1.6.7 @@ -433,9 +439,15 @@ devDependencies: pnpm: specifier: ^8.6.6 version: 8.6.6 + postcss: + specifier: ^8.4.39 + version: 8.4.39 prettier: specifier: ^3.2.5 version: 3.2.5 + prettier-plugin-tailwindcss: + specifier: ^0.6.5 + version: 0.6.5(@trivago/prettier-plugin-sort-imports@4.3.0)(prettier@3.2.5) readline-sync: specifier: ^1.4.10 version: 1.4.10 @@ -445,6 +457,9 @@ devDependencies: stream-browserify: specifier: ^3.0.0 version: 3.0.0 + tailwindcss: + specifier: ^3.4.6 + version: 3.4.6(ts-node@10.9.2) ts-node: specifier: ^10.9.2 version: 10.9.2(@types/node@20.12.13)(typescript@5.1.3) @@ -506,6 +521,11 @@ packages: resolution: {integrity: sha512-0h+FrQDqe2Wn+IIGFkTCd4aAwTJ+7834Ek1COohCyV26AXhwQ7WQaz+4F/nLOeVl/3BtWHOHLPsq46V8YB46Eg==} dev: false + /@alloc/quick-lru@5.2.0: + resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==} + engines: {node: '>=10'} + dev: true + /@ampproject/remapping@2.2.1: resolution: {integrity: sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==} engines: {node: '>=6.0.0'} @@ -11971,6 +11991,10 @@ packages: engines: {node: '>=12'} dev: true + /any-promise@1.3.0: + resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==} + dev: true + /any-signal@2.1.2: resolution: {integrity: sha512-B+rDnWasMi/eWcajPcCWSlYc7muXOrcYrqgyzcdKisl2H/WTlQ0gip1KyQfr0ZlxJdsuWCj/LWwQm7fhyhRfIQ==} dependencies: @@ -12031,7 +12055,6 @@ packages: /arg@5.0.2: resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==} - dev: false /argparse@1.0.10: resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==} @@ -12252,6 +12275,22 @@ packages: engines: {node: '>=8.0.0'} dev: false + /autoprefixer@10.4.19(postcss@8.4.39): + resolution: {integrity: sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==} + engines: {node: ^10 || ^12 || >=14} + hasBin: true + peerDependencies: + postcss: ^8.1.0 + dependencies: + browserslist: 4.23.0 + caniuse-lite: 1.0.30001620 + fraction.js: 4.3.7 + normalize-range: 0.1.2 + picocolors: 1.0.1 + postcss: 8.4.39 + postcss-value-parser: 4.2.0 + dev: true + /available-typed-arrays@1.0.7: resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==} engines: {node: '>= 0.4'} @@ -12827,6 +12866,11 @@ packages: engines: {node: '>=6'} dev: true + /camelcase-css@2.0.1: + resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==} + engines: {node: '>= 6'} + dev: true + /camelcase-keys@6.2.2: resolution: {integrity: sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==} engines: {node: '>=8'} @@ -13190,6 +13234,11 @@ packages: /commander@2.20.3: resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==} + /commander@4.1.1: + resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==} + engines: {node: '>= 6'} + dev: true + /commander@9.5.0: resolution: {integrity: sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==} engines: {node: ^12.20.0 || >=14} @@ -13529,6 +13578,12 @@ packages: requiresBuild: true dev: true + /cssesc@3.0.0: + resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} + engines: {node: '>=4'} + hasBin: true + dev: true + /cssstyle@4.0.1: resolution: {integrity: sha512-8ZYiJ3A/3OkDd093CBT/0UKDWry7ak4BdPTFP2+QEP7cmhouyq/Up709ASSj2cK02BbZiMgk7kYjZNS4QP5qrQ==} engines: {node: '>=18'} @@ -14012,6 +14067,10 @@ packages: requiresBuild: true dev: true + /didyoumean@1.2.2: + resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==} + dev: true + /diff-sequences@29.6.3: resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} @@ -14049,6 +14108,10 @@ packages: hasBin: true dev: true + /dlv@1.1.3: + resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==} + dev: true + /dns-over-http-resolver@1.2.3(node-fetch@3.3.2): resolution: {integrity: sha512-miDiVSI6KSNbi4SVifzO/reD8rMnxgrlnkrlkugOLQpWQTe2qMdHsZp5DmfKjxNE+/T3VAAYLQUZMv9SMr6+AA==} dependencies: @@ -15702,6 +15765,10 @@ packages: fetch-blob: 3.2.0 dev: true + /fraction.js@4.3.7: + resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==} + dev: true + /fresh@0.5.2: resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==} engines: {node: '>= 0.6'} @@ -15934,6 +16001,7 @@ packages: /glob@7.1.7: resolution: {integrity: sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==} + deprecated: Glob versions prior to v9 are no longer supported dependencies: fs.realpath: 1.0.0 inflight: 1.0.6 @@ -15945,6 +16013,7 @@ packages: /glob@7.2.3: resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==} + deprecated: Glob versions prior to v9 are no longer supported dependencies: fs.realpath: 1.0.0 inflight: 1.0.6 @@ -18067,6 +18136,16 @@ packages: - supports-color dev: false + /lilconfig@2.1.0: + resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==} + engines: {node: '>=10'} + dev: true + + /lilconfig@3.1.2: + resolution: {integrity: sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==} + engines: {node: '>=14'} + dev: true + /lines-and-columns@1.2.4: resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==} dev: true @@ -19595,6 +19674,14 @@ packages: engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} dev: true + /mz@2.7.0: + resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==} + dependencies: + any-promise: 1.3.0 + object-assign: 4.1.1 + thenify-all: 1.6.0 + dev: true + /nan@2.18.0: resolution: {integrity: sha512-W7tfG7vMOGtD30sHoZSSc/JVYiyDPEyQVso/Zz+/uQd0B0L46gtC+pHha5FFMRpil6fm/AoEcRWyOVi4+E/f8w==} dev: false @@ -19803,6 +19890,11 @@ packages: resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==} engines: {node: '>=0.10.0'} + /normalize-range@0.1.2: + resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==} + engines: {node: '>=0.10.0'} + dev: true + /normalize-url@8.0.1: resolution: {integrity: sha512-IO9QvjUMWxPQQhs60oOu10CRkWCiZzSUkzbXGGV9pviYl1fXYcvkzQ5jV9z8Y6un8ARoVRl4EtC6v6jNqbaJ/w==} engines: {node: '>=14.16'} @@ -19863,6 +19955,11 @@ packages: resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==} engines: {node: '>=0.10.0'} + /object-hash@3.0.0: + resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==} + engines: {node: '>= 6'} + dev: true + /object-inspect@1.13.1: resolution: {integrity: sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==} dev: true @@ -20356,6 +20453,11 @@ packages: resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==} engines: {node: '>=8.6'} + /pify@2.3.0: + resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==} + engines: {node: '>=0.10.0'} + dev: true + /pify@3.0.0: resolution: {integrity: sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==} engines: {node: '>=4'} @@ -20429,7 +20531,6 @@ packages: /pirates@4.0.6: resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==} engines: {node: '>= 6'} - dev: false /pkg-dir@3.0.0: resolution: {integrity: sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==} @@ -20472,16 +20573,74 @@ packages: resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==} engines: {node: '>= 0.4'} + /postcss-import@15.1.0(postcss@8.4.39): + resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==} + engines: {node: '>=14.0.0'} + peerDependencies: + postcss: ^8.0.0 + dependencies: + postcss: 8.4.39 + postcss-value-parser: 4.2.0 + read-cache: 1.0.0 + resolve: 1.22.8 + dev: true + + /postcss-js@4.0.1(postcss@8.4.39): + resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==} + engines: {node: ^12 || ^14 || >= 16} + peerDependencies: + postcss: ^8.4.21 + dependencies: + camelcase-css: 2.0.1 + postcss: 8.4.39 + dev: true + + /postcss-load-config@4.0.2(postcss@8.4.39)(ts-node@10.9.2): + resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==} + engines: {node: '>= 14'} + peerDependencies: + postcss: '>=8.0.9' + ts-node: '>=9.0.0' + peerDependenciesMeta: + postcss: + optional: true + ts-node: + optional: true + dependencies: + lilconfig: 3.1.2 + postcss: 8.4.39 + ts-node: 10.9.2(@types/node@20.12.13)(typescript@5.1.3) + yaml: 2.4.5 + dev: true + + /postcss-nested@6.0.1(postcss@8.4.39): + resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==} + engines: {node: '>=12.0'} + peerDependencies: + postcss: ^8.2.14 + dependencies: + postcss: 8.4.39 + postcss-selector-parser: 6.1.1 + dev: true + + /postcss-selector-parser@6.1.1: + resolution: {integrity: sha512-b4dlw/9V8A71rLIDsSwVmak9z2DuBUB7CA1/wSdelNEzqsjoSPeADTWNO09lpH49Diy3/JIZ2bSPB1dI3LJCHg==} + engines: {node: '>=4'} + dependencies: + cssesc: 3.0.0 + util-deprecate: 1.0.2 + dev: true + /postcss-value-parser@4.2.0: resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==} - /postcss@8.4.34: - resolution: {integrity: sha512-4eLTO36woPSocqZ1zIrFD2K1v6wH7pY1uBh0JIM2KKfrVtGvPFiAku6aNOP0W1Wr9qwnaCsF0Z+CrVnryB2A8Q==} + /postcss@8.4.39: + resolution: {integrity: sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==} engines: {node: ^10 || ^12 || >=14} dependencies: nanoid: 3.3.7 picocolors: 1.0.1 - source-map-js: 1.0.2 + source-map-js: 1.2.0 dev: true /preact@10.17.0: @@ -20500,6 +20659,62 @@ packages: fast-diff: 1.3.0 dev: true + /prettier-plugin-tailwindcss@0.6.5(@trivago/prettier-plugin-sort-imports@4.3.0)(prettier@3.2.5): + resolution: {integrity: sha512-axfeOArc/RiGHjOIy9HytehlC0ZLeMaqY09mm8YCkMzznKiDkwFzOpBvtuhuv3xG5qB73+Mj7OCe2j/L1ryfuQ==} + engines: {node: '>=14.21.3'} + peerDependencies: + '@ianvs/prettier-plugin-sort-imports': '*' + '@prettier/plugin-pug': '*' + '@shopify/prettier-plugin-liquid': '*' + '@trivago/prettier-plugin-sort-imports': '*' + '@zackad/prettier-plugin-twig-melody': '*' + prettier: ^3.0 + prettier-plugin-astro: '*' + prettier-plugin-css-order: '*' + prettier-plugin-import-sort: '*' + prettier-plugin-jsdoc: '*' + prettier-plugin-marko: '*' + prettier-plugin-organize-attributes: '*' + prettier-plugin-organize-imports: '*' + prettier-plugin-sort-imports: '*' + prettier-plugin-style-order: '*' + prettier-plugin-svelte: '*' + peerDependenciesMeta: + '@ianvs/prettier-plugin-sort-imports': + optional: true + '@prettier/plugin-pug': + optional: true + '@shopify/prettier-plugin-liquid': + optional: true + '@trivago/prettier-plugin-sort-imports': + optional: true + '@zackad/prettier-plugin-twig-melody': + optional: true + prettier-plugin-astro: + optional: true + prettier-plugin-css-order: + optional: true + prettier-plugin-import-sort: + optional: true + prettier-plugin-jsdoc: + optional: true + prettier-plugin-marko: + optional: true + prettier-plugin-organize-attributes: + optional: true + prettier-plugin-organize-imports: + optional: true + prettier-plugin-sort-imports: + optional: true + prettier-plugin-style-order: + optional: true + prettier-plugin-svelte: + optional: true + dependencies: + '@trivago/prettier-plugin-sort-imports': 4.3.0(prettier@3.2.5) + prettier: 3.2.5 + dev: true + /prettier@2.8.1: resolution: {integrity: sha512-lqGoSJBQNJidqCHE80vqZJHWHRFoNYsSpP9AjFhlhi9ODCJA541svILes/+/1GM3VaL/abZi7cpFzOpdR9UPKg==} engines: {node: '>=10.13.0'} @@ -21214,6 +21429,12 @@ packages: dependencies: loose-envify: 1.4.0 + /read-cache@1.0.0: + resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==} + dependencies: + pify: 2.3.0 + dev: true + /read-pkg-up@10.0.0: resolution: {integrity: sha512-jgmKiS//w2Zs+YbX039CorlkOp8FIVbSAN8r8GJHDsGlmNPXo+VeHkqAwCiQVTTx5/LwLZTcEw59z3DvcLbr0g==} engines: {node: '>=16'} @@ -22225,8 +22446,8 @@ packages: atomic-sleep: 1.0.0 dev: false - /source-map-js@1.0.2: - resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==} + /source-map-js@1.2.0: + resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==} engines: {node: '>=0.10.0'} dev: true @@ -22604,6 +22825,20 @@ packages: transitivePeerDependencies: - '@babel/core' + /sucrase@3.35.0: + resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==} + engines: {node: '>=16 || 14 >=14.17'} + hasBin: true + dependencies: + '@jridgewell/gen-mapping': 0.3.5 + commander: 4.1.1 + glob: 10.3.16 + lines-and-columns: 1.2.4 + mz: 2.7.0 + pirates: 4.0.6 + ts-interface-checker: 0.1.13 + dev: true + /sudo-prompt@9.2.1: resolution: {integrity: sha512-Mu7R0g4ig9TUuGSxJavny5Rv0egCEtpZRNMrZaYS1vxkiIxGiGUwoezU3LazIQ+KE04hTrTfNPgxU5gzi7F5Pw==} dev: false @@ -22667,6 +22902,41 @@ packages: tslib: 2.6.2 dev: true + /tailwind-merge@2.4.0: + resolution: {integrity: sha512-49AwoOQNKdqKPd9CViyH5wJoSKsCDjUlzL8DxuGp3P1FsGY36NJDAa18jLZcaHAUUuTj+JB8IAo8zWgBNvBF7A==} + dev: false + + /tailwindcss@3.4.6(ts-node@10.9.2): + resolution: {integrity: sha512-1uRHzPB+Vzu57ocybfZ4jh5Q3SdlH7XW23J5sQoM9LhE9eIOlzxer/3XPSsycvih3rboRsvt0QCmzSrqyOYUIA==} + engines: {node: '>=14.0.0'} + hasBin: true + dependencies: + '@alloc/quick-lru': 5.2.0 + arg: 5.0.2 + chokidar: 3.5.3 + didyoumean: 1.2.2 + dlv: 1.1.3 + fast-glob: 3.3.2 + glob-parent: 6.0.2 + is-glob: 4.0.3 + jiti: 1.21.0 + lilconfig: 2.1.0 + micromatch: 4.0.5 + normalize-path: 3.0.0 + object-hash: 3.0.0 + picocolors: 1.0.1 + postcss: 8.4.39 + postcss-import: 15.1.0(postcss@8.4.39) + postcss-js: 4.0.1(postcss@8.4.39) + postcss-load-config: 4.0.2(postcss@8.4.39)(ts-node@10.9.2) + postcss-nested: 6.0.1(postcss@8.4.39) + postcss-selector-parser: 6.1.1 + resolve: 1.22.8 + sucrase: 3.35.0 + transitivePeerDependencies: + - ts-node + dev: true + /tapable@2.2.1: resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==} engines: {node: '>=6'} @@ -22769,6 +23039,19 @@ packages: resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==} dev: true + /thenify-all@1.6.0: + resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==} + engines: {node: '>=0.8'} + dependencies: + thenify: 3.3.1 + dev: true + + /thenify@3.3.1: + resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==} + dependencies: + any-promise: 1.3.0 + dev: true + /thread-stream@0.15.2: resolution: {integrity: sha512-UkEhKIg2pD+fjkHQKyJO3yoIvAP3N6RlNFt2dUhcS1FGvCD1cQa1M/PGknCLFIyZdtJOWQjejp7bdNqmN7zwdA==} dependencies: @@ -22921,6 +23204,10 @@ packages: typescript: 5.1.3 dev: true + /ts-interface-checker@0.1.13: + resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==} + dev: true + /ts-invariant@0.10.3: resolution: {integrity: sha512-uivwYcQaxAucv1CzRp2n/QdYPo4ILf9VXgH19zEIjFx2EJufV16P0JtJVpYHy89DItG6Kwj2oIUjrcK5au+4tQ==} engines: {node: '>=8'} @@ -23777,7 +24064,7 @@ packages: dependencies: '@types/node': 20.12.13 esbuild: 0.17.19 - postcss: 8.4.34 + postcss: 8.4.39 rollup: 3.28.0 optionalDependencies: fsevents: 2.3.3 @@ -23813,7 +24100,7 @@ packages: dependencies: '@types/node': 20.12.13 esbuild: 0.19.12 - postcss: 8.4.34 + postcss: 8.4.39 rollup: 4.9.6 optionalDependencies: fsevents: 2.3.3 @@ -24685,7 +24972,6 @@ packages: resolution: {integrity: sha512-aBx2bnqDzVOyNKfsysjA2ms5ZlnjSAW2eG3/L5G/CSujfjLJTJsEw1bGw8kCf04KodQWk1pxlGnZ56CRxiawmg==} engines: {node: '>= 14'} hasBin: true - dev: false /yargs-parser@18.1.3: resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==} diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 000000000..2e7af2b7f --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,6 @@ +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/src/index.css b/src/index.css index b6db95a87..3c122fb74 100644 --- a/src/index.css +++ b/src/index.css @@ -2,6 +2,10 @@ @import 'styles/text.css'; @import 'styles/animations.css'; +@tailwind base; +@tailwind components; +@tailwind utilities; + :root { height: 100%; color: var(--color-text-1); diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 000000000..51ddaeba8 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,162 @@ +/** @type {import('tailwindcss').Config} */ +const { BREAKPOINT_REM } = require('./src/constants/page'); +const plugin = require('tailwindcss/plugin'); + +export default { + content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'], + theme: { + screens: { + mobile: { max: BREAKPOINT_REM.mobile }, + notMobile: { min: BREAKPOINT_REM.mobile }, + tablet: { max: BREAKPOINT_REM.tablet }, + notTablet: { min: BREAKPOINT_REM.tablet }, + desktopSmall: { max: BREAKPOINT_REM.desktopSmall }, + desktopMedium: { min: BREAKPOINT_REM.desktopMedium }, + desktopLarge: { min: BREAKPOINT_REM.desktopLarge }, + }, + colors: { + white: 'var(--color-white)', + black: 'var(--color-black)', + green: 'var(--color-green)', + red: 'var(--color-red)', + + 'white-faded': 'var(--color-white-faded)', + + 'layer-0': 'var(--color-layer-0)', + 'layer-1': 'var(--color-layer-1)', + 'layer-2': 'var(--color-layer-2)', + 'layer-3': 'var(--color-layer-3)', + 'layer-4': 'var(--color-layer-4)', + 'layer-5': 'var(--color-layer-5)', + 'layer-6': 'var(--color-layer-6)', + 'layer-7': 'var(--color-layer-7)', + + border: 'var(--color-border)', + 'border-white': 'var(--color-border-white)', + 'border-red': 'var(--color-border-red)', + + 'text-0': 'var(--color-text-0)', + 'text-1': 'var(--color-text-1)', + 'text-2': 'var(--color-text-2)', + 'text-button': 'var(--color-text-button)', + + 'gradient-base-0': 'var(--color-gradient-base-0)', + 'gradient-base-1': 'var(--color-gradient-base-1)', + + accent: 'var(--color-accent)', + 'accent-faded': 'var(--color-accent-faded)', + favorite: 'var(--color-favorite)', + + success: 'var(--color-success)', + warning: 'var(--color-warning)', + error: 'var(--color-error)', + 'gradient-success': 'var(--color-gradient-success)', + 'gradient-warning': 'var(--color-gradient-warning)', + 'gradient-error': 'var(--color-gradient-error)', + + positive: 'var(--color-positive)', + negative: 'var(--color-negative)', + 'positive-dark': 'var(--color-positive-dark)', + 'negative-dark': 'var(--color-negative-dark)', + 'gradient-positive': 'var(--color-gradient-positive)', + 'gradient-negative': 'var(--color-gradient-negative)', + + 'risk-low': 'var(--color-risk-low)', + 'risk-medium': 'var(--color-risk-medium)', + 'risk-high': 'var(--color-risk-high)', + }, + fontFamily: { + base: 'var(--fontFamily-base)', + monospace: 'var(--fontFamily-monospace', + }, + fontSize: { + tiny: 'var(--fontSize-tiny)', + mini: 'var(--fontSize-mini)', + small: 'var(--fontSize-small)', + base: 'var(--fontSize-base)', + medium: 'var(--fontSize-medium)', + large: 'var(--fontSize-large)', + extra: 'var(--fontSize-extra)', + }, + fontWeight: { + regular: 'var(--fontWeight-regular)', + book: 'var(--fontWeight-book)', + medium: 'var(--fontWeight-medium)', + bold: 'var(--fontWeight-bold)', + }, + spacing: { + px: '1px', + 0: '0px', + 0.125: '0.125rem', + 0.25: '0.25rem', + 0.375: '0.375rem', + 0.5: '0.5rem', + 0.625: '0.625rem', + 0.75: '0.75rem', + 0.875: '0.875rem', + 1: '1rem', + 1.25: '1.25rem', + 1.5: '1.5rem', + 1.75: '1.75rem', + 2: '2rem', + 2.25: '2.25rem', + 2.5: '2.5rem', + 2.75: '2.75rem', + 3: '3rem', + 3.5: '3.5rem', + 4: '4rem', + 5: '5rem', + 6: '6rem', + 7: '7rem', + 8: '8rem', + 9: '9rem', + 10: '10rem', + 11: '11rem', + 12: '12rem', + 13: '13rem', + 14: '14rem', + 15: '15rem', + 16: '16rem', + 18: '18rem', + 20: '20rem', + 24: '24rem', + }, + extend: {}, + }, + plugins: [ + plugin(function ({ addUtilities }) { + addUtilities({ + '.font-tiny-regular': { font: 'var(--font-tiny-regular)' }, + '.font-tiny-book': { font: 'var(--font-tiny-book)' }, + '.font-tiny-medium': { font: 'var(--font-tiny-medium)' }, + + '.font-mini-regular': { font: 'var(--font-mini-regular)' }, + '.font-mini-book': { font: 'var(--font-mini-book)' }, + '.font-mini-medium': { font: 'var(--font-mini-medium)' }, + + '.font-small-regular': { font: 'var(--font-small-regular)' }, + '.font-small-book': { font: 'var(--font-small-book)' }, + '.font-small-medium': { font: 'var(--font-small-medium)' }, + '.font-small-bold': { font: 'var(--font-small-bold)' }, + + '.font-base-regular': { font: 'var(--font-base-regular)' }, + '.font-base-book': { font: 'var(--font-base-book)' }, + '.font-base-medium': { font: 'var(--font-base-medium)' }, + '.font-base-bold': { font: 'var(--font-base-bold)' }, + + '.font-medium-regular': { font: 'var(--font-medium-regular)' }, + '.font-medium-book': { font: 'var(--font-medium-book)' }, + '.font-medium-medium': { font: 'var(--font-medium-medium)' }, + + '.font-large-regular': { font: 'var(--font-large-regular)' }, + '.font-large-book': { font: 'var(--font-large-book)' }, + '.font-large-medium': { font: 'var(--font-large-medium)' }, + + '.font-extra-regular': { font: 'var(--font-extra-regular)' }, + '.font-extra-book': { font: 'var(--font-extra-book)' }, + '.font-extra-medium': { font: 'var(--font-extra-medium)' }, + '.font-extra-bold': { font: 'var(--font-extra-bold)' }, + }); + }), + ], +};