From c3a930bc11e74b18f781000de57959c540c494dc Mon Sep 17 00:00:00 2001 From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com> Date: Fri, 18 Aug 2023 13:27:43 +0000 Subject: [PATCH 1/6] feat: init tailwind preset & plugin --- package.json | 4 +- pnpm-lock.yaml | 101 ++++---------------- src/index.ts | 1 + src/tailwind/index.ts | 211 ++++++++++++++++++++++++++++++++++++++++++ tailwind.config.js | 3 + 5 files changed, 233 insertions(+), 87 deletions(-) create mode 100644 src/tailwind/index.ts diff --git a/package.json b/package.json index ec5ba75..9a0fe8f 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,8 @@ }, "dependencies": { "clsx": "^2.0.0", - "tailwind-merge": "^1.14.0" + "tailwind-merge": "^1.14.0", + "tailwindcss": "^3.3.3" }, "devDependencies": { "@storybook/addon-essentials": "^7.3.1", @@ -66,7 +67,6 @@ "prettier": "^3.0.2", "publint": "^0.2.0", "storybook": "^7.3.1", - "tailwindcss": "^3.3.3", "tsup": "^7.2.0", "typescript": "^5.1.6" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7ea59e4..fbfde89 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -23,6 +23,9 @@ dependencies: tailwind-merge: specifier: ^1.14.0 version: 1.14.0 + tailwindcss: + specifier: ^3.3.3 + version: 3.3.3 devDependencies: '@storybook/addon-essentials': @@ -73,9 +76,6 @@ devDependencies: storybook: specifier: ^7.3.1 version: 7.3.1 - tailwindcss: - specifier: ^3.3.3 - version: 3.3.3 tsup: specifier: ^7.2.0 version: 7.2.0(postcss@8.4.28)(typescript@5.1.6) @@ -88,7 +88,7 @@ packages: /@alloc/quick-lru@5.2.0: resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==} engines: {node: '>=10'} - dev: true + dev: false /@ampproject/remapping@2.2.1: resolution: {integrity: sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==} @@ -1770,17 +1770,14 @@ packages: '@jridgewell/set-array': 1.1.2 '@jridgewell/sourcemap-codec': 1.4.15 '@jridgewell/trace-mapping': 0.3.19 - dev: true /@jridgewell/resolve-uri@3.1.1: resolution: {integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==} engines: {node: '>=6.0.0'} - dev: true /@jridgewell/set-array@1.1.2: resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==} engines: {node: '>=6.0.0'} - dev: true /@jridgewell/source-map@0.3.5: resolution: {integrity: sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==} @@ -1791,14 +1788,12 @@ packages: /@jridgewell/sourcemap-codec@1.4.15: resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==} - dev: true /@jridgewell/trace-mapping@0.3.19: resolution: {integrity: sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==} dependencies: '@jridgewell/resolve-uri': 3.1.1 '@jridgewell/sourcemap-codec': 1.4.15 - dev: true /@juggle/resize-observer@3.4.0: resolution: {integrity: sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==} @@ -1828,12 +1823,10 @@ packages: dependencies: '@nodelib/fs.stat': 2.0.5 run-parallel: 1.2.0 - dev: true /@nodelib/fs.stat@2.0.5: resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==} engines: {node: '>= 8'} - dev: true /@nodelib/fs.walk@1.2.8: resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==} @@ -1841,7 +1834,6 @@ packages: dependencies: '@nodelib/fs.scandir': 2.1.5 fastq: 1.15.0 - dev: true /@pkgjs/parseargs@0.11.0: resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==} @@ -3932,7 +3924,6 @@ packages: /any-promise@1.3.0: resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==} - dev: true /anymatch@3.1.3: resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==} @@ -3940,7 +3931,6 @@ packages: dependencies: normalize-path: 3.0.0 picomatch: 2.3.1 - dev: true /app-root-dir@1.0.2: resolution: {integrity: sha512-jlpIfsOoNoafl92Sz//64uQHGSyMrD2vYG5d8o2a4qGvyNCvXur7bzIsWtAC/6flI2RYAp3kv8rsfBtaLm7w0g==} @@ -3948,7 +3938,7 @@ packages: /arg@5.0.2: resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==} - dev: true + dev: false /argparse@1.0.10: resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==} @@ -4111,7 +4101,6 @@ packages: /balanced-match@1.0.2: resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} - dev: true /base64-js@1.5.1: resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==} @@ -4136,7 +4125,6 @@ packages: /binary-extensions@2.2.0: resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==} engines: {node: '>=8'} - dev: true /bl@4.1.0: resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==} @@ -4178,7 +4166,6 @@ packages: dependencies: balanced-match: 1.0.2 concat-map: 0.0.1 - dev: true /brace-expansion@2.0.1: resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==} @@ -4191,7 +4178,6 @@ packages: engines: {node: '>=8'} dependencies: fill-range: 7.0.1 - dev: true /browser-assert@1.2.1: resolution: {integrity: sha512-nfulgvOR6S4gt9UKCeGJOuSGBPGiFT6oQ/2UBnvTY/5aQ1PnksW72fhZkM30DzoRRv2WpwZf1vHHEr3mtuXIWQ==} @@ -4294,7 +4280,7 @@ packages: /camelcase-css@2.0.1: resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==} engines: {node: '>= 6'} - dev: true + dev: false /camelcase@5.3.1: resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==} @@ -4340,7 +4326,6 @@ packages: readdirp: 3.6.0 optionalDependencies: fsevents: 2.3.2 - dev: true /chownr@1.1.4: resolution: {integrity: sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==} @@ -4473,7 +4458,6 @@ packages: /commander@4.1.1: resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==} engines: {node: '>= 6'} - dev: true /commander@6.2.1: resolution: {integrity: sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==} @@ -4508,7 +4492,6 @@ packages: /concat-map@0.0.1: resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==} - dev: true /concat-stream@1.6.2: resolution: {integrity: sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==} @@ -4610,7 +4593,6 @@ packages: resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} engines: {node: '>=4'} hasBin: true - dev: true /csstype@3.1.2: resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==} @@ -4767,7 +4749,7 @@ packages: /didyoumean@1.2.2: resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==} - dev: true + dev: false /dir-glob@3.0.1: resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==} @@ -4778,7 +4760,7 @@ packages: /dlv@1.1.3: resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==} - dev: true + dev: false /doctrine@3.0.0: resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==} @@ -5143,7 +5125,6 @@ packages: glob-parent: 5.1.2 merge2: 1.4.1 micromatch: 4.0.5 - dev: true /fast-json-stable-stringify@2.1.0: resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==} @@ -5153,7 +5134,6 @@ packages: resolution: {integrity: sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==} dependencies: reusify: 1.0.4 - dev: true /fb-watchman@2.0.2: resolution: {integrity: sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==} @@ -5189,7 +5169,6 @@ packages: engines: {node: '>=8'} dependencies: to-regex-range: 5.0.1 - dev: true /finalhandler@1.2.0: resolution: {integrity: sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==} @@ -5319,19 +5298,16 @@ packages: /fs.realpath@1.0.0: resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==} - dev: true /fsevents@2.3.2: resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==} engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} os: [darwin] requiresBuild: true - dev: true optional: true /function-bind@1.1.1: resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==} - dev: true /functions-have-names@1.2.3: resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==} @@ -5405,14 +5381,13 @@ packages: engines: {node: '>= 6'} dependencies: is-glob: 4.0.3 - dev: true /glob-parent@6.0.2: resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==} engines: {node: '>=10.13.0'} dependencies: is-glob: 4.0.3 - dev: true + dev: false /glob-promise@4.2.2(glob@7.2.3): resolution: {integrity: sha512-xcUzJ8NWN5bktoTIX7eOclO1Npxd/dyVqUJxlLIDasT4C7KZyqlPIwkdJ0Ypiy3p2ZKahTjK4M9uC3sNSfNMzw==} @@ -5449,7 +5424,6 @@ packages: minimatch: 3.1.2 once: 1.4.0 path-is-absolute: 1.0.1 - dev: true /glob@7.2.3: resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==} @@ -5567,7 +5541,6 @@ packages: engines: {node: '>= 0.4.0'} dependencies: function-bind: 1.1.1 - dev: true /hosted-git-info@2.8.9: resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==} @@ -5701,11 +5674,9 @@ packages: dependencies: once: 1.4.0 wrappy: 1.0.2 - dev: true /inherits@2.0.4: resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==} - dev: true /internal-slot@1.0.5: resolution: {integrity: sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==} @@ -5767,7 +5738,6 @@ packages: engines: {node: '>=8'} dependencies: binary-extensions: 2.2.0 - dev: true /is-boolean-object@1.1.2: resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==} @@ -5786,7 +5756,6 @@ packages: resolution: {integrity: sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==} dependencies: has: 1.0.3 - dev: true /is-date-object@1.0.5: resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==} @@ -5808,7 +5777,6 @@ packages: /is-extglob@2.1.1: resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==} engines: {node: '>=0.10.0'} - dev: true /is-fullwidth-code-point@3.0.0: resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==} @@ -5832,7 +5800,6 @@ packages: engines: {node: '>=0.10.0'} dependencies: is-extglob: 2.1.1 - dev: true /is-gzip@1.0.0: resolution: {integrity: sha512-rcfALRIb1YewtnksfRIHGcIY93QnK8BIQ/2c9yDYcG/Y6+vRoJuTWBmmSEbyLLYtXm7q35pHOHbZFQBaLrhlWQ==} @@ -5866,7 +5833,6 @@ packages: /is-number@7.0.0: resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==} engines: {node: '>=0.12.0'} - dev: true /is-path-cwd@2.2.0: resolution: {integrity: sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==} @@ -6104,7 +6070,6 @@ packages: /jiti@1.19.1: resolution: {integrity: sha512-oVhqoRDaBXf7sjkll95LHVS6Myyyb1zaunVwk4Z0+WPSW4gjS0pl01zYKHScTuyEhQsFxV5L4DR5r+YqSyqyyg==} hasBin: true - dev: true /joycon@3.1.1: resolution: {integrity: sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==} @@ -6250,11 +6215,9 @@ packages: /lilconfig@2.1.0: resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==} engines: {node: '>=10'} - dev: true /lines-and-columns@1.2.4: resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==} - dev: true /lint-staged@14.0.0: resolution: {integrity: sha512-0tLf0pqZYkar/wu3nTctk4rVIG+d7PanDYv4/IQR4qwdqfQkTDziLRFnqMcLuLBTuUqmcLwsHPD2EjQ18d/oaA==} @@ -6481,7 +6444,6 @@ packages: /merge2@1.4.1: resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==} engines: {node: '>= 8'} - dev: true /methods@1.1.2: resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==} @@ -6494,7 +6456,6 @@ packages: dependencies: braces: 3.0.2 picomatch: 2.3.1 - dev: true /mime-db@1.52.0: resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==} @@ -6539,7 +6500,6 @@ packages: resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==} dependencies: brace-expansion: 1.1.11 - dev: true /minimatch@5.1.6: resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==} @@ -6628,13 +6588,11 @@ packages: any-promise: 1.3.0 object-assign: 4.1.1 thenify-all: 1.6.0 - dev: true /nanoid@3.3.6: resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==} engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} hasBin: true - dev: true /needle@3.2.0: resolution: {integrity: sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ==} @@ -6702,7 +6660,6 @@ packages: /normalize-path@3.0.0: resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==} engines: {node: '>=0.10.0'} - dev: true /normalize-range@0.1.2: resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==} @@ -6749,12 +6706,11 @@ packages: /object-assign@4.1.1: resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==} engines: {node: '>=0.10.0'} - dev: true /object-hash@3.0.0: resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==} engines: {node: '>= 6'} - dev: true + dev: false /object-inspect@1.12.3: resolution: {integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==} @@ -6799,7 +6755,6 @@ packages: resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==} dependencies: wrappy: 1.0.2 - dev: true /onetime@5.1.2: resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==} @@ -6930,7 +6885,6 @@ packages: /path-is-absolute@1.0.1: resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==} engines: {node: '>=0.10.0'} - dev: true /path-key@3.1.1: resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==} @@ -6944,7 +6898,6 @@ packages: /path-parse@1.0.7: resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==} - dev: true /path-scurry@1.10.1: resolution: {integrity: sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==} @@ -6981,12 +6934,10 @@ packages: /picocolors@1.0.0: resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==} - dev: true /picomatch@2.3.1: resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==} engines: {node: '>=8.6'} - dev: true /pidtree@0.6.0: resolution: {integrity: sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==} @@ -6997,7 +6948,7 @@ packages: /pify@2.3.0: resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==} engines: {node: '>=0.10.0'} - dev: true + dev: false /pify@4.0.1: resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==} @@ -7007,7 +6958,6 @@ packages: /pirates@4.0.6: resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==} engines: {node: '>= 6'} - dev: true /pkg-dir@3.0.0: resolution: {integrity: sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==} @@ -7047,7 +6997,7 @@ packages: postcss-value-parser: 4.2.0 read-cache: 1.0.0 resolve: 1.22.4 - dev: true + dev: false /postcss-js@4.0.1(postcss@8.4.28): resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==} @@ -7057,7 +7007,7 @@ packages: dependencies: camelcase-css: 2.0.1 postcss: 8.4.28 - dev: true + dev: false /postcss-load-config@4.0.1(postcss@8.4.28): resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==} @@ -7074,7 +7024,6 @@ packages: lilconfig: 2.1.0 postcss: 8.4.28 yaml: 2.3.1 - dev: true /postcss-loader@7.3.3(postcss@8.4.28)(webpack@5.88.2): resolution: {integrity: sha512-YgO/yhtevGO/vJePCQmTxiaEwER94LABZN0ZMT4A0vsak9TpO+RvKRs7EmJ8peIlB9xfXCsS7M8LjqncsUZ5HA==} @@ -7139,7 +7088,7 @@ packages: dependencies: postcss: 8.4.28 postcss-selector-parser: 6.0.13 - dev: true + dev: false /postcss-selector-parser@6.0.13: resolution: {integrity: sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==} @@ -7147,11 +7096,9 @@ packages: dependencies: cssesc: 3.0.0 util-deprecate: 1.0.2 - dev: true /postcss-value-parser@4.2.0: resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==} - dev: true /postcss@8.4.28: resolution: {integrity: sha512-Z7V5j0cq8oEKyejIKfpD8b4eBy9cwW2JWPk0+fB1HOAMsfHbnAXLLS+PfVWlzMSLQaWttKDt607I0XHmpE67Vw==} @@ -7160,7 +7107,6 @@ packages: nanoid: 3.3.6 picocolors: 1.0.0 source-map-js: 1.0.2 - dev: true /prettier@2.8.8: resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==} @@ -7309,7 +7255,6 @@ packages: /queue-microtask@1.2.3: resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} - dev: true /ramda@0.29.0: resolution: {integrity: sha512-BBea6L67bYLtdbOqfp8f58fPMqEwx0doL+pAi8TZyp2YWz8R9G8z9x75CZI8W+ftqhFHCpEX2cRnUUXK130iKA==} @@ -7489,7 +7434,7 @@ packages: resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==} dependencies: pify: 2.3.0 - dev: true + dev: false /read-pkg-up@7.0.1: resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==} @@ -7536,7 +7481,6 @@ packages: engines: {node: '>=8.10.0'} dependencies: picomatch: 2.3.1 - dev: true /recast@0.21.5: resolution: {integrity: sha512-hjMmLaUXAm1hIuTqOdeYObMslq/q+Xff6QE3Y2P+uoHAg2nmVlLBps2hzh1UJDdMtDTMXOFewK6ky51JQIeECg==} @@ -7663,7 +7607,6 @@ packages: is-core-module: 2.13.0 path-parse: 1.0.7 supports-preserve-symlinks-flag: 1.0.0 - dev: true /restore-cursor@3.1.0: resolution: {integrity: sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==} @@ -7684,7 +7627,6 @@ packages: /reusify@1.0.4: resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==} engines: {iojs: '>=1.0.0', node: '>=0.10.0'} - dev: true /rfdc@1.3.0: resolution: {integrity: sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==} @@ -7723,7 +7665,6 @@ packages: resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==} dependencies: queue-microtask: 1.2.3 - dev: true /sade@1.8.1: resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==} @@ -7926,7 +7867,6 @@ packages: /source-map-js@1.0.2: resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==} engines: {node: '>=0.10.0'} - dev: true /source-map-support@0.5.21: resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==} @@ -8101,7 +8041,6 @@ packages: mz: 2.7.0 pirates: 4.0.6 ts-interface-checker: 0.1.13 - dev: true /supports-color@5.5.0: resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==} @@ -8127,7 +8066,6 @@ packages: /supports-preserve-symlinks-flag@1.0.0: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} - dev: true /synchronous-promise@2.0.17: resolution: {integrity: sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g==} @@ -8166,7 +8104,7 @@ packages: sucrase: 3.34.0 transitivePeerDependencies: - ts-node - dev: true + dev: false /tapable@2.2.1: resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==} @@ -8284,13 +8222,11 @@ packages: 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 /through2@2.0.5: resolution: {integrity: sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==} @@ -8317,7 +8253,6 @@ packages: engines: {node: '>=8.0'} dependencies: is-number: 7.0.0 - dev: true /tocbot@4.21.1: resolution: {integrity: sha512-IfajhBTeg0HlMXu1f+VMbPef05QpDTsZ9X2Yn1+8npdaXsXg/+wrm9Ze1WG5OS1UDC3qJ5EQN/XOZ3gfXjPFCw==} @@ -8350,7 +8285,6 @@ packages: /ts-interface-checker@0.1.13: resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==} - dev: true /tslib@1.14.1: resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==} @@ -8584,7 +8518,6 @@ packages: /util-deprecate@1.0.2: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} - dev: true /util@0.12.5: resolution: {integrity: sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==} @@ -8817,7 +8750,6 @@ packages: /wrappy@1.0.2: resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==} - dev: true /write-file-atomic@2.4.3: resolution: {integrity: sha512-GaETH5wwsX+GcnzhPgKcKjJ6M2Cq3/iZp1WyY/X1CSqrW+jVNM9Y7D8EC2sM4ZG/V8wZlSniJnCKWPmBYAucRQ==} @@ -8883,7 +8815,6 @@ packages: /yaml@2.3.1: resolution: {integrity: sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==} engines: {node: '>= 14'} - dev: true /yargs-parser@20.2.9: resolution: {integrity: sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==} diff --git a/src/index.ts b/src/index.ts index b6c7193..e00695a 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1 +1,2 @@ export { cn } from "./utilities"; +export { zenmlPlugin, zenmlPreset } from "./tailwind/index"; diff --git a/src/tailwind/index.ts b/src/tailwind/index.ts new file mode 100644 index 0000000..dbba7a2 --- /dev/null +++ b/src/tailwind/index.ts @@ -0,0 +1,211 @@ +import plugin from "tailwindcss/plugin"; +import { Config } from "tailwindcss"; + +/** + * Tailwind Plugin that contains the tailwind setup for the ZenML design system + */ +export const zenmlPlugin = plugin( + function ({ addBase }) { + addBase({ + ":root": { + "--color-primary-900": "258 66% 7%", + "--color-primary-800": "259 66% 14%", + "--color-primary-700": "259 68% 21%", + "--color-primary-600": "260 67% 28%", + "--color-primary-500": "259 67% 35%", + "--color-primary-400": "260 89% 60%", + "--color-primary-300": "260 89% 68%", + "--color-primary-200": "260 89% 76%", + "--color-primary-100": "260 90% 84%", + "--color-primary-050": "259 90% 92%", + "--color-primary-025": "259 90% 96%", + "--color-neutral-900": "221 39% 11%", + "--color-neutral-800": "215 28% 17%", + "--color-neutral-700": "217 19% 27%", + "--color-neutral-600": "215 14% 34%", + "--color-neutral-500": "220 9% 46%", + "--color-neutral-400": "218 11% 65%", + "--color-neutral-300": "216 12% 84%", + "--color-neutral-200": "220 13% 91%", + "--color-neutral-100": "220 14% 96%", + "--color-neutral-050": "210 20% 98%", + "--color-neutral-000": "0 0% 100%", + "--color-error-900": "4 59% 19%", + "--color-error-800": "3 58% 29%", + "--color-error-700": "4 59% 39%", + "--color-error-600": "4 59% 48%", + "--color-error-500": "4 81% 58%", + "--color-error-400": "4 81% 65%", + "--color-error-300": "4 82% 72%", + "--color-error-200": "3 81% 79%", + "--color-error-100": "4 81% 86%", + "--color-error-050": "3 81% 92%", + "--color-warning-500": "32 95% 51%", + "--color-success-900": "137 75% 14%", + "--color-success-800": "137 75% 22%", + "--color-success-700": "137 74% 29%", + "--color-success-600": "137 75% 36%", + "--color-success-500": "137 74% 43%", + "--color-success-400": "137 56% 53%", + "--color-success-300": "137 56% 62%", + "--color-success-200": "137 56% 71%", + "--color-success-100": "137 57% 81%", + "--color-success-050": "137 55% 89%", + "--color-blue-900": "208 88% 10%", + "--color-blue-800": "209 88% 17%", + "--color-blue-700": "208 89% 25%", + "--color-blue-600": "208 89% 33%", + "--color-blue-500": "209 89% 42%", + "--color-blue-400": "209 90% 50%", + "--color-blue-300": "209 90% 58%", + "--color-blue-200": "208 89% 67%", + "--color-blue-100": "208 89% 75%", + "--color-blue-050": "209 90% 84%", + "--color-blue-025": "208 88% 90%", + "--color-text-primary": "var(--color-primary-900)", + "--color-text-secondary": "var(--color-neutral-500)", + "--color-text-tertiary": "var(--color-neutral-300)", + "--color-text-negative": "var(--color-neutral-000)", + "--color-text-brand": "var(--color-primary-500)", + "--color-text-error": "var(--color-error-500)", + "--color-text-warning": "var(--color-warning-500)", + "--color-text-success": "var(--color-success-500)", + "--color-surface-primary": "var(--color-neutral-000)", + "--color-surface-secondary": "var(--color-neutral-050)", + "--color-surface-tertiary": "var(--color-neutral-100)", + "--color-surface-strong": "var(--color-primary-400)", + "--color-border-minimal": "var(--color-neutral-100)", + "--color-border-moderate": "var(--color-neutral-200)", + "--color-border-bold": "var(--color-neutral-500)" + } + }); + }, + { + theme: { + spacing: { + 0: "0rem/*0px*/", + 0.25: "0.125rem/*2px*/", + 0.5: "0.25rem/*4px*/", + 1: "0.5rem/*8px*/", + 2: "0.75rem/*12px*/", + 3: "1rem/*16px*/", + 4: "1.25rem/*20px*/", + 5: "1.5rem/*24px*/", + 6: "2rem/*32px*/", + 7: "2.5rem/*40px*/", + 8: "3rem/*48px*/", + 9: "4rem/*64px*/", + 10: "4.5rem/*72px*/", + 11: "5rem/*80px*/", + 12: "6rem/*96px*/" + }, + extend: { + colors: { + theme: { + text: { + primary: "hsl(var(--color-text-primary) / )", + secondary: "hsl(var(--color-text-secondary) / )", + tertiary: "hsl(var(--color-text-tertiary) / )", + negative: "hsl(var(--color-text-negative) / )", + brand: "hsl(var(--color-text-brand) / )", + error: "hsl(var(--color-text-error) / )", + warning: "hsl(var(--color-text-warning) / )", + success: "hsl(var(--color-text-success) / )" + }, + surface: { + primary: "hsl(var(--color-surface-primary) / )", + secondary: "hsl(var(--color-surface-secondary) / )", + tertiary: "hsl(var(--color-surface-tertiary) / )", + strong: "hsl(var(--color-surface-strong) / )" + }, + border: { + minimal: "hsl(var(--color-border-minimal) / )", + moderate: "hsl(var(--color-border-moderate) / )", + bold: "hsl(var(--color-border-bold) / )" + } + }, + primary: { + 900: "hsl(var(--color-primary-900) / )", + 800: "hsl(var(--color-primary-800) / )", + 700: "hsl(var(--color-primary-700) / )", + 600: "hsl(var(--color-primary-600) / )", + 500: "hsl(var(--color-primary-500) / )", + 400: "hsl(var(--color-primary-400) / )", + 300: "hsl(var(--color-primary-300) / )", + 200: "hsl(var(--color-primary-200) / )", + 100: "hsl(var(--color-primary-100) / )", + 50: "hsl(var(--color-primary-050) / )", + 25: "hsl(var(--color-primary-025) / )" + }, + neutral: { + 900: "hsl(var(--color-neutral-900) / )", + 800: "hsl(var(--color-neutral-800) / )", + 700: "hsl(var(--color-neutral-700) / )", + 600: "hsl(var(--color-neutral-600) / )", + 500: "hsl(var(--color-neutral-500) / )", + 400: "hsl(var(--color-neutral-400) / )", + 300: "hsl(var(--color-neutral-300) / )", + 200: "hsl(var(--color-neutral-200) / )", + 100: "hsl(var(--color-neutral-100) / )", + 50: "hsl(var(--color-neutral-050) / )" + }, + error: { + 900: "hsl(var(--color-error-900) / )", + 800: "hsl(var(--color-error-800) / )", + 700: "hsl(var(--color-error-700) / )", + 600: "hsl(var(--color-error-600) / )", + 500: "hsl(var(--color-error-500) / )", + 400: "hsl(var(--color-error-400) / )", + 300: "hsl(var(--color-error-300) / )", + 200: "hsl(var(--color-error-200) / )", + 100: "hsl(var(--color-error-100) / )", + 50: "hsl(var(--color-error-050) / )" + }, + warning: { + 500: "hsl(var(--color-warning-500) / )" + }, + success: { + 900: "hsl(var(--color-success-900) / )", + 800: "hsl(var(--color-success-800) / )", + 700: "hsl(var(--color-success-700) / )", + 600: "hsl(var(--color-success-600) / )", + 500: "hsl(var(--color-success-500) / )", + 400: "hsl(var(--color-success-400) / )", + 300: "hsl(var(--color-success-300) / )", + 200: "hsl(var(--color-success-200) / )", + 100: "hsl(var(--color-success-100) / )", + 50: "hsl(var(--color-success-050) / )" + }, + blue: { + 900: "hsl(var(--color-blue-900) / )", + 800: "hsl(var(--color-blue-800) / )", + 700: "hsl(var(--color-blue-700) / )", + 600: "hsl(var(--color-blue-600) / )", + 500: "hsl(var(--color-blue-500) / )", + 400: "hsl(var(--color-blue-400) / )", + 300: "hsl(var(--color-blue-300) / )", + 200: "hsl(var(--color-blue-200) / )", + 100: "hsl(var(--color-blue-100) / )", + 50: "hsl(var(--color-blue-050) / )", + 25: "hsl(var(--color-blue-025) / )" + } + }, + backgroundImage: { + "gradient-dark": + "linear-gradient(to bottom right, hsl(var(--color-primary-500)), hsl(var(--color-primary-400)))" + }, + animation: { + "spin-slow": "spin 2s linear infinite" + } + } + } + } +); + +/** + * Tailwind preset containing a template tailwind.config with the ZenML Plugin included + */ +export const zenmlPreset = { + content: [], + plugins: [zenmlPlugin] +} satisfies Config; diff --git a/tailwind.config.js b/tailwind.config.js index ef09f8b..1c7b738 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,5 +1,8 @@ +import { zenmlPreset } from "./src/index"; + /** @type {import('tailwindcss').Config} */ export default { + presets: [zenmlPreset], content: ["./src/**/*.{js,ts,jsx,tsx}"], theme: { extend: {} From 8f821d439e082900d75cfae24a239fa49402468a Mon Sep 17 00:00:00 2001 From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com> Date: Fri, 18 Aug 2023 14:18:36 +0000 Subject: [PATCH 2/6] docs: additional docs --- src/docs/Tailwind.mdx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/docs/Tailwind.mdx b/src/docs/Tailwind.mdx index 581397e..5dd099e 100644 --- a/src/docs/Tailwind.mdx +++ b/src/docs/Tailwind.mdx @@ -1,3 +1,22 @@ import { Meta } from "@storybook/blocks"; + +# Tailwind + +The component library is designed to use Tailwind as the css framework. Therefore it exposes a **Tailwind Plugin** & **a Tailwind Preset** containing all relevant base styles for the ZenML design system. + +The styles aren't bundled into a dedicated stylesheet that can be imported from the lib itself. Therefore you need to extend the `content` prop of your `tailwind.config.js` like so: + +```js +import { zenmlPreset } from "@zenml-io/react-component-library"; + +/** @type {import('tailwindcss').Config} */ +export default { + presets: [zenmlPreset], + content: [ + "./src/**/*.{js,ts,jsx,tsx}", + "./node_modules/@zenml-io/react-component-library/**/*.{js,ts,jsx,tsx}" + ] +}; +``` From 19bd6ae7ca46a533210e096550e064bdbd75eef3 Mon Sep 17 00:00:00 2001 From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com> Date: Fri, 18 Aug 2023 14:28:46 +0000 Subject: [PATCH 3/6] feat: add fontsizes --- src/tailwind/index.ts | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/src/tailwind/index.ts b/src/tailwind/index.ts index dbba7a2..31fb4e1 100644 --- a/src/tailwind/index.ts +++ b/src/tailwind/index.ts @@ -99,6 +99,30 @@ export const zenmlPlugin = plugin( 11: "5rem/*80px*/", 12: "6rem/*96px*/" }, + fontSize: { + "text-xs": ["0.75rem", "1.125rem"], + "text-sm": ["0.875rem", "1.25rem"], + "text-md": ["1rem", "1.5rem"], + "text-lg": ["1.125rem", "1.75rem"], + "text-xl": ["1.25rem", "1.875rem"], + "display-xs": ["1.5rem", "2rem"], + "display-sm": ["1.875rem", "2.375rem"], + "display-md": [ + "2.25rem", + { + letterSpacing: "-0.045rem", + lineHeight: "2.75rem" + } + ], + "display-lg": [ + "3rem", + { + letterSpacing: "-0.06rem", + lineHeight: "3.75rem" + } + ], + "display-xl": ["3.75rem", "4.5rem"] + }, extend: { colors: { theme: { From 8043aca6e8e421b1a382303cab7eb8c17288dd9f Mon Sep 17 00:00:00 2001 From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com> Date: Fri, 18 Aug 2023 14:39:44 +0000 Subject: [PATCH 4/6] refactor: improve dx --- src/tailwind/index.ts | 50 +++++++++++++++++++++---------------------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/src/tailwind/index.ts b/src/tailwind/index.ts index 31fb4e1..cfa3415 100644 --- a/src/tailwind/index.ts +++ b/src/tailwind/index.ts @@ -83,45 +83,45 @@ export const zenmlPlugin = plugin( { theme: { spacing: { - 0: "0rem/*0px*/", - 0.25: "0.125rem/*2px*/", - 0.5: "0.25rem/*4px*/", - 1: "0.5rem/*8px*/", - 2: "0.75rem/*12px*/", - 3: "1rem/*16px*/", - 4: "1.25rem/*20px*/", - 5: "1.5rem/*24px*/", - 6: "2rem/*32px*/", - 7: "2.5rem/*40px*/", - 8: "3rem/*48px*/", - 9: "4rem/*64px*/", - 10: "4.5rem/*72px*/", - 11: "5rem/*80px*/", - 12: "6rem/*96px*/" + 0: "0rem/* 0px */", + 0.25: "0.125rem/* 2px */", + 0.5: "0.25rem/* 4px */", + 1: "0.5rem/* 8px */", + 2: "0.75rem/* 12px */", + 3: "1rem/* 16px */", + 4: "1.25rem/* 20px */", + 5: "1.5rem/* 24px */", + 6: "2rem/* 32px */", + 7: "2.5rem/* 40px */", + 8: "3rem/* 48px */", + 9: "4rem/* 64px */", + 10: "4.5rem/* 72px */", + 11: "5rem/* 80px */", + 12: "6rem/* 96px */" }, fontSize: { - "text-xs": ["0.75rem", "1.125rem"], - "text-sm": ["0.875rem", "1.25rem"], - "text-md": ["1rem", "1.5rem"], - "text-lg": ["1.125rem", "1.75rem"], - "text-xl": ["1.25rem", "1.875rem"], - "display-xs": ["1.5rem", "2rem"], - "display-sm": ["1.875rem", "2.375rem"], + "text-xs": ["0.75rem/* 12px */", "1.125rem"], + "text-sm": ["0.875rem/* 14px */", "1.25rem"], + "text-md": ["1rem/* 16px */", "1.5rem"], + "text-lg": ["1.125rem/* 18px */", "1.75rem"], + "text-xl": ["1.25rem/* 20px */", "1.875rem"], + "display-xs": ["1.5rem/* 24px */", "2rem"], + "display-sm": ["1.875rem/* 30px */", "2.375rem"], "display-md": [ - "2.25rem", + "2.25rem /* 36px */", { letterSpacing: "-0.045rem", lineHeight: "2.75rem" } ], "display-lg": [ - "3rem", + "3rem/* 48px */", { letterSpacing: "-0.06rem", lineHeight: "3.75rem" } ], - "display-xl": ["3.75rem", "4.5rem"] + "display-xl": ["3.75rem/* 60px */", "4.5rem"] }, extend: { colors: { From 1b853bdb722baa031f0f34728126eac07224a2c7 Mon Sep 17 00:00:00 2001 From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com> Date: Mon, 21 Aug 2023 08:10:47 +0000 Subject: [PATCH 5/6] feat: add warning color --- src/tailwind/index.ts | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/src/tailwind/index.ts b/src/tailwind/index.ts index cfa3415..6660715 100644 --- a/src/tailwind/index.ts +++ b/src/tailwind/index.ts @@ -40,7 +40,16 @@ export const zenmlPlugin = plugin( "--color-error-200": "3 81% 79%", "--color-error-100": "4 81% 86%", "--color-error-050": "3 81% 92%", + "--color-warning-900": "32 93% 17%", + "--color-warning-800": "33 92% 25%", + "--color-warning-700": "32 92% 34%", + "--color-warning-600": "33 93% 42%", "--color-warning-500": "32 95% 51%", + "--color-warning-400": "32 95% 59%", + "--color-warning-300": "32 95% 67%", + "--color-warning-200": "33 95% 75%", + "--color-warning-100": "32 95% 84%", + "--color-warning-050": "33 96% 90%", "--color-success-900": "137 75% 14%", "--color-success-800": "137 75% 22%", "--color-success-700": "137 74% 29%", @@ -186,7 +195,16 @@ export const zenmlPlugin = plugin( 50: "hsl(var(--color-error-050) / )" }, warning: { - 500: "hsl(var(--color-warning-500) / )" + 900: "hsl(var(--color-warning-900) / )", + 800: "hsl(var(--color-warning-800) / )", + 700: "hsl(var(--color-warning-700) / )", + 600: "hsl(var(--color-warning-600) / )", + 500: "hsl(var(--color-warning-500) / )", + 400: "hsl(var(--color-warning-400) / )", + 300: "hsl(var(--color-warning-300) / )", + 200: "hsl(var(--color-warning-200) / )", + 100: "hsl(var(--color-warning-100) / )", + 50: "hsl(var(--color-warning-050) / )" }, success: { 900: "hsl(var(--color-success-900) / )", From d96efd7f465637f753f02c0635ba08e177377c47 Mon Sep 17 00:00:00 2001 From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com> Date: Mon, 21 Aug 2023 08:52:31 +0000 Subject: [PATCH 6/6] feat: add border-radius --- src/tailwind/index.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/tailwind/index.ts b/src/tailwind/index.ts index 6660715..3d684b8 100644 --- a/src/tailwind/index.ts +++ b/src/tailwind/index.ts @@ -91,6 +91,12 @@ export const zenmlPlugin = plugin( }, { theme: { + borderRadius: { + sharp: "0px", + sm: "0.25rem/* 4px */", + md: "0.5rem/* 8px */", + rounded: "9999px" + }, spacing: { 0: "0rem/* 0px */", 0.25: "0.125rem/* 2px */",