From c96f6563e72649590a002ef1ccb560949efaf6e8 Mon Sep 17 00:00:00 2001 From: Christian Busch Date: Thu, 4 Dec 2025 13:23:19 +0100 Subject: [PATCH 1/3] chore: bump deps --- bun.lock | 116 ++++++++++++++++++------------------------- website/package.json | 6 +-- 2 files changed, 52 insertions(+), 70 deletions(-) diff --git a/bun.lock b/bun.lock index d8e110a182..3c52e817ab 100644 --- a/bun.lock +++ b/bun.lock @@ -533,9 +533,9 @@ "@chakra-ui/better-auth": "0.3.0", "@effect/schema": "0.75.5", "@icons-pack/react-simple-icons": "13.8.0", - "@pandacss/dev": "1.5.1", - "@pandacss/preset-base": "1.5.1", - "@pandacss/preset-panda": "1.5.1", + "@pandacss/dev": "1.6.1", + "@pandacss/preset-base": "1.6.1", + "@pandacss/preset-panda": "1.6.1", "@park-ui/panda-preset": "0.43.1", "@shikijs/rehype": "3.17.0", "@shikijs/transformers": "3.17.0", @@ -1111,37 +1111,37 @@ "@oxc-transform/binding-win32-x64-msvc": ["@oxc-transform/binding-win32-x64-msvc@0.96.0", "", { "os": "win32", "cpu": "x64" }, "sha512-0fI0P0W7bSO/GCP/N5dkmtB9vBqCA4ggo1WmXTnxNJVmFFOtcA1vYm1I9jl8fxo+sucW2WnlpnI4fjKdo3JKxA=="], - "@pandacss/config": ["@pandacss/config@1.5.1", "", { "dependencies": { "@pandacss/logger": "1.5.1", "@pandacss/preset-base": "1.5.1", "@pandacss/preset-panda": "1.5.1", "@pandacss/shared": "1.5.1", "@pandacss/types": "1.5.1", "bundle-n-require": "1.1.2", "escalade": "3.1.2", "merge-anything": "5.1.7", "microdiff": "1.5.0", "typescript": "5.9.3" } }, "sha512-aO+YVRlccLXuFC30DEO9ZDkvXwjbCXk1blIpii8PuclTAR0+YPq8xXVRTVK3fR3MiA0zROca8nAf5Kb+wHVKPw=="], + "@pandacss/config": ["@pandacss/config@1.6.1", "", { "dependencies": { "@pandacss/logger": "1.6.1", "@pandacss/preset-base": "1.6.1", "@pandacss/preset-panda": "1.6.1", "@pandacss/shared": "1.6.1", "@pandacss/types": "1.6.1", "bundle-n-require": "1.1.2", "escalade": "3.2.0", "merge-anything": "6.0.6", "microdiff": "1.5.0", "typescript": "5.9.3" } }, "sha512-rcNJCIrBLXYSFyZ49cAmkAlgQCFPAKCsQfEuNHuv7KTuL+qyykpTcaN20ZQ3sXT/0mxM+bSzhlTye/wI5zngBw=="], - "@pandacss/core": ["@pandacss/core@1.5.1", "", { "dependencies": { "@csstools/postcss-cascade-layers": "5.0.2", "@pandacss/is-valid-prop": "^1.5.1", "@pandacss/logger": "1.5.1", "@pandacss/shared": "1.5.1", "@pandacss/token-dictionary": "1.5.1", "@pandacss/types": "1.5.1", "browserslist": "4.24.4", "hookable": "5.5.3", "lightningcss": "1.25.1", "lodash.merge": "4.6.2", "outdent": "0.8.0", "postcss": "8.5.6", "postcss-discard-duplicates": "7.0.2", "postcss-discard-empty": "7.0.1", "postcss-merge-rules": "7.0.6", "postcss-minify-selectors": "7.0.5", "postcss-nested": "7.0.2", "postcss-normalize-whitespace": "7.0.1", "postcss-selector-parser": "7.1.0", "ts-pattern": "5.9.0" } }, "sha512-okuvSm5o0gmQmkpLONH4ReqgBVOMMsfb9MyK8vpcZUpzvMBiraVcgsbLxKQyHlmVDZNbKLLokIycb8KEpqtIDQ=="], + "@pandacss/core": ["@pandacss/core@1.6.1", "", { "dependencies": { "@csstools/postcss-cascade-layers": "5.0.2", "@pandacss/is-valid-prop": "^1.6.1", "@pandacss/logger": "1.6.1", "@pandacss/shared": "1.6.1", "@pandacss/token-dictionary": "1.6.1", "@pandacss/types": "1.6.1", "browserslist": "4.28.0", "hookable": "5.5.3", "lightningcss": "1.30.2", "lodash.merge": "4.6.2", "outdent": "0.8.0", "postcss": "8.5.6", "postcss-discard-duplicates": "7.0.2", "postcss-discard-empty": "7.0.1", "postcss-merge-rules": "7.0.7", "postcss-minify-selectors": "7.0.5", "postcss-nested": "7.0.2", "postcss-normalize-whitespace": "7.0.1", "postcss-selector-parser": "7.1.1", "ts-pattern": "5.9.0" } }, "sha512-k4hDOX0illxlZfrOLgTJD1qk4aKLCW7ppLdZvKZdd1VrxFIla3wurtwAQ42D1bP13LST2dnAUus+fmymQNw3zw=="], - "@pandacss/dev": ["@pandacss/dev@1.5.1", "", { "dependencies": { "@clack/prompts": "0.11.0", "@pandacss/config": "1.5.1", "@pandacss/logger": "1.5.1", "@pandacss/node": "1.5.1", "@pandacss/postcss": "1.5.1", "@pandacss/preset-base": "1.5.1", "@pandacss/preset-panda": "1.5.1", "@pandacss/shared": "1.5.1", "@pandacss/token-dictionary": "1.5.1", "@pandacss/types": "1.5.1", "cac": "6.7.14" }, "bin": { "panda": "bin.js", "pandacss": "bin.js" } }, "sha512-U1NWO3ZgOLlABtDk6MMQwTNYOCiUtUg+HEoHPdEExLzNn+20mrLf1IZWJyn4zXKSpANGSi79EV7X4yxPa+W+MA=="], + "@pandacss/dev": ["@pandacss/dev@1.6.1", "", { "dependencies": { "@clack/prompts": "0.11.0", "@pandacss/config": "1.6.1", "@pandacss/logger": "1.6.1", "@pandacss/node": "1.6.1", "@pandacss/postcss": "1.6.1", "@pandacss/preset-base": "1.6.1", "@pandacss/preset-panda": "1.6.1", "@pandacss/shared": "1.6.1", "@pandacss/token-dictionary": "1.6.1", "@pandacss/types": "1.6.1", "cac": "6.7.14" }, "bin": { "panda": "bin.js", "pandacss": "bin.js" } }, "sha512-+4Kxx000PjZjr+fbVYM1M3H89BVGmeGuI8/zVGjp1UJZycQglUi6F+2W0POYnlJ2vdmnmmRJmAGvoGEkSFzSYA=="], - "@pandacss/extractor": ["@pandacss/extractor@1.5.1", "", { "dependencies": { "@pandacss/shared": "1.5.1", "ts-evaluator": "1.2.0", "ts-morph": "27.0.2" } }, "sha512-/DG4MnVo5LA0SpJq4rI0RgOp8kPjZMP5a1+q4MwLDHPtfWTwPaiKv7LULBW1L11V+fMOYn+d44dBKgU4dj6oSg=="], + "@pandacss/extractor": ["@pandacss/extractor@1.6.1", "", { "dependencies": { "@pandacss/shared": "1.6.1", "ts-evaluator": "1.2.0", "ts-morph": "27.0.2" } }, "sha512-gfBP6s+cIs1IQ9yGkj0Wzjzdl+NO4VYWCYjqxqicDlfpNntDy7o4OalN5ymaphfYCTkQlcpB3wGwh1BtYMVH/A=="], - "@pandacss/generator": ["@pandacss/generator@1.5.1", "", { "dependencies": { "@pandacss/core": "1.5.1", "@pandacss/is-valid-prop": "^1.5.1", "@pandacss/logger": "1.5.1", "@pandacss/shared": "1.5.1", "@pandacss/token-dictionary": "1.5.1", "@pandacss/types": "1.5.1", "javascript-stringify": "2.1.0", "outdent": " ^0.8.0", "pluralize": "8.0.0", "postcss": "8.5.6", "ts-pattern": "5.9.0" } }, "sha512-kijxpjpvRQBz16BiBcghknthsdmVxSJD5C71jlcM4aVeqoZSCWDNcmlL/2SSCMy7oC6HANu2oRXS/L1YgYzHGA=="], + "@pandacss/generator": ["@pandacss/generator@1.6.1", "", { "dependencies": { "@pandacss/core": "1.6.1", "@pandacss/is-valid-prop": "^1.6.1", "@pandacss/logger": "1.6.1", "@pandacss/shared": "1.6.1", "@pandacss/token-dictionary": "1.6.1", "@pandacss/types": "1.6.1", "javascript-stringify": "2.1.0", "outdent": " ^0.8.0", "pluralize": "8.0.0", "postcss": "8.5.6", "ts-pattern": "5.9.0" } }, "sha512-KtE1eb3XGsPRl4bVGGhT9Mx8phPUviH0qsDU7rTTwnKyBZAiFmLR5sFsxcXrssuAWY7899ffU5WK2Kjuf8tduw=="], - "@pandacss/is-valid-prop": ["@pandacss/is-valid-prop@1.5.1", "", {}, "sha512-AlOt+MqqwDlIdVEdW6wEtvDmX8MmPv004oD+7tdGN54HKpD9jqrwPwwS9p7YQ7nai631JlyladshFHqe1xl7+w=="], + "@pandacss/is-valid-prop": ["@pandacss/is-valid-prop@1.6.1", "", {}, "sha512-adOSTq2JekBkvblToblRtrGjEJUxDTH40HTo5Lm5+l2jygKIb1fXHgwRG6JnO/z1QIA4DaCZftMRyVcOfQhagQ=="], - "@pandacss/logger": ["@pandacss/logger@1.5.1", "", { "dependencies": { "@pandacss/types": "1.5.1", "kleur": "4.1.5" } }, "sha512-jC835vvSGIOxCZcqXH1alXdzO/ThUCE3HXGjt17mGli/QiVT3b/v83n/Cfz0wiHP3zSUlwVYaPAlXryepsQNWA=="], + "@pandacss/logger": ["@pandacss/logger@1.6.1", "", { "dependencies": { "@pandacss/types": "1.6.1", "kleur": "4.1.5" } }, "sha512-RJEErjZm2V5wiywZZ4+FfaMwC+boQGDRysvUeC5NYy7SmN8/B9r5JaRO2UBMuYPtmihXI1+WqV74hhrxWBoK4A=="], - "@pandacss/node": ["@pandacss/node@1.5.1", "", { "dependencies": { "@pandacss/config": "1.5.1", "@pandacss/core": "1.5.1", "@pandacss/generator": "1.5.1", "@pandacss/logger": "1.5.1", "@pandacss/parser": "1.5.1", "@pandacss/reporter": "1.5.1", "@pandacss/shared": "1.5.1", "@pandacss/token-dictionary": "1.5.1", "@pandacss/types": "1.5.1", "browserslist": "4.24.4", "chokidar": "4.0.3", "fast-glob": "3.3.3", "fs-extra": "11.2.0", "glob-parent": "6.0.2", "is-glob": "4.0.3", "lodash.merge": "4.6.2", "look-it-up": "2.1.0", "outdent": " ^0.8.0", "package-manager-detector": "1.5.0", "perfect-debounce": "1.0.0", "picomatch": "4.0.3", "pkg-types": "2.3.0", "pluralize": "8.0.0", "postcss": "8.5.6", "prettier": "3.2.5", "ts-morph": "27.0.2", "ts-pattern": "5.9.0", "tsconfck": "3.1.6" } }, "sha512-qgiydokbjWcSqzsuCP1LR91IOLs7JgsMJkgAbEim/PdVH3NbKNjCUx9mK8bt1JO3/GKNC+GfePpacxGLmt/p6w=="], + "@pandacss/node": ["@pandacss/node@1.6.1", "", { "dependencies": { "@pandacss/config": "1.6.1", "@pandacss/core": "1.6.1", "@pandacss/generator": "1.6.1", "@pandacss/logger": "1.6.1", "@pandacss/parser": "1.6.1", "@pandacss/reporter": "1.6.1", "@pandacss/shared": "1.6.1", "@pandacss/token-dictionary": "1.6.1", "@pandacss/types": "1.6.1", "browserslist": "4.28.0", "chokidar": "4.0.3", "fast-glob": "3.3.3", "fs-extra": "11.3.2", "glob-parent": "6.0.2", "is-glob": "4.0.3", "lodash.merge": "4.6.2", "look-it-up": "2.1.0", "outdent": " ^0.8.0", "package-manager-detector": "1.6.0", "perfect-debounce": "1.0.0", "picomatch": "4.0.3", "pkg-types": "2.3.0", "pluralize": "8.0.0", "postcss": "8.5.6", "prettier": "3.2.5", "ts-morph": "27.0.2", "ts-pattern": "5.9.0", "tsconfck": "3.1.6" } }, "sha512-90AW5Li8P+EJCUGr/qNbDfw+xdaLPWyNPwNK3t1aBx3/UIBs6Rmzsx/sqpQB7kecQmbwvTXhVdsPeWAIb9cyow=="], - "@pandacss/parser": ["@pandacss/parser@1.5.1", "", { "dependencies": { "@pandacss/config": "^1.5.1", "@pandacss/core": "^1.5.1", "@pandacss/extractor": "1.5.1", "@pandacss/logger": "1.5.1", "@pandacss/shared": "1.5.1", "@pandacss/types": "1.5.1", "@vue/compiler-sfc": "3.5.22", "magic-string": "0.30.19", "ts-morph": "27.0.2", "ts-pattern": "5.9.0" } }, "sha512-CuG5qdsQkw2xjxzN9pkfl9JaPgK28FJnRj9jmLb98Vo3J+NkUD2NyzL4k69lKZv9nbcmwn7+HbvMP/DKfx8OvQ=="], + "@pandacss/parser": ["@pandacss/parser@1.6.1", "", { "dependencies": { "@pandacss/config": "^1.6.1", "@pandacss/core": "^1.6.1", "@pandacss/extractor": "1.6.1", "@pandacss/logger": "1.6.1", "@pandacss/shared": "1.6.1", "@pandacss/types": "1.6.1", "@vue/compiler-sfc": "3.5.25", "magic-string": "0.30.21", "ts-morph": "27.0.2", "ts-pattern": "5.9.0" } }, "sha512-Lqcs1EJji9xhJ/OWEtRibDUuRodhfmP6KpI0RvdUqrxW+2XpklLne/LK/hCss0lowQBqUVLoeeQpVqEl/QpNDA=="], - "@pandacss/postcss": ["@pandacss/postcss@1.5.1", "", { "dependencies": { "@pandacss/node": "1.5.1", "postcss": "8.5.6" } }, "sha512-fZZOf0n6WKm3JQnGXC4Y8RGzw9jDdYpFGaSpVLpE4VotbfBq/jZtACw/pLa4ryferJhRp+WraBvYtKg6w2bQ9w=="], + "@pandacss/postcss": ["@pandacss/postcss@1.6.1", "", { "dependencies": { "@pandacss/node": "1.6.1", "postcss": "8.5.6" } }, "sha512-S5IhDl9F0OCeGhhqry9zi3WMCzb9NUXJxXrJO7I5HbFw2jBgn9vNje/ttSA5udJb8WLPQAH1xlKApAvcFBNSpQ=="], - "@pandacss/preset-base": ["@pandacss/preset-base@1.5.1", "", { "dependencies": { "@pandacss/types": "1.5.1" } }, "sha512-I8USdmUqPPkluznTFilbzLgXzU/+NEzeCvkwuwfi0QZlmGXOXnatM/7IUK7yatNikPx3neqmNh4o4WwWE04dGQ=="], + "@pandacss/preset-base": ["@pandacss/preset-base@1.6.1", "", { "dependencies": { "@pandacss/types": "1.6.1" } }, "sha512-KMIwDtRQJF2EwoCSrz0Mks6JD9Tioy09zGYcfDj91Va2dCsOaDpAyBDHBqmX6pfgHT4PnZWd0tg3Rh8bK7F5Qw=="], - "@pandacss/preset-panda": ["@pandacss/preset-panda@1.5.1", "", { "dependencies": { "@pandacss/types": "1.5.1" } }, "sha512-ZA/MhFK3O/fYIS4p2HDpyPMgCISAi+g5LoPzX/jQbQ5WGfkBS8sTmxIM/XapGNVHAzXFzYOTwqQ87KP3Siiozw=="], + "@pandacss/preset-panda": ["@pandacss/preset-panda@1.6.1", "", { "dependencies": { "@pandacss/types": "1.6.1" } }, "sha512-NqkDEX0w59OSCFojGdtqRb1juTJmNLYR14PLhkVay38/ZMBCECPJhhCZxG26y+iOGXJRc8Do3TYiGvh7Qe7QMQ=="], - "@pandacss/reporter": ["@pandacss/reporter@1.5.1", "", { "dependencies": { "@pandacss/core": "1.5.1", "@pandacss/generator": "1.5.1", "@pandacss/logger": "1.5.1", "@pandacss/shared": "1.5.1", "@pandacss/types": "1.5.1", "table": "6.9.0", "wordwrapjs": "5.1.1" } }, "sha512-fCgX/VN9ZDZpvfYJU+bdQpwoR48cMmhtTvPYJIek6KoANKXXJFbpgC5t2N6EtTkktg+3+unks3XpU3FvQdGHTQ=="], + "@pandacss/reporter": ["@pandacss/reporter@1.6.1", "", { "dependencies": { "@pandacss/core": "1.6.1", "@pandacss/generator": "1.6.1", "@pandacss/logger": "1.6.1", "@pandacss/shared": "1.6.1", "@pandacss/types": "1.6.1", "table": "6.9.0", "wordwrapjs": "5.1.1" } }, "sha512-sbzQhZDxeum9Jfx1AMJVu3+qN0SxShlJLuxUau/ziNAx6J3ngOliTi0sMFskMIwUDrRbDHxPkWvWX3ClElzCCA=="], - "@pandacss/shared": ["@pandacss/shared@1.5.1", "", {}, "sha512-pTHbfT6N7vt6/BncGoMduCo4jnYOvyHC8XdSgV3mzStdGJqw+0R30jeULixYrv7HFGDXCNxzohQ2k8YGOk6UoQ=="], + "@pandacss/shared": ["@pandacss/shared@1.6.1", "", {}, "sha512-lfI6tIWh7SlO2DrAoPBnBexr4dbznI/XLFQE6txN9AiHxwuh/sFtpnn5ZTm3aMnrsFF2sQvHd61s4xLbQsXoNQ=="], - "@pandacss/token-dictionary": ["@pandacss/token-dictionary@1.5.1", "", { "dependencies": { "@pandacss/logger": "^1.5.1", "@pandacss/shared": "1.5.1", "@pandacss/types": "1.5.1", "picomatch": "^4.0.0", "ts-pattern": "5.9.0" } }, "sha512-w/dSvEaskD7zYHYWbPdYG+zrFLVsYYYJl9hT2cE2spccgJCid40Ov/4/zuP67rC9rPfs7qETMy6ydTPGbCfZ5A=="], + "@pandacss/token-dictionary": ["@pandacss/token-dictionary@1.6.1", "", { "dependencies": { "@pandacss/logger": "^1.6.1", "@pandacss/shared": "1.6.1", "@pandacss/types": "1.6.1", "picomatch": "^4.0.0", "ts-pattern": "5.9.0" } }, "sha512-zPRjwsDDxAHVaaQFadtI9C34LWz+kAS9UJrQNrQjz14ULi8croeSenALx4m5M6nuxPDpAEIa98NxY4VqWrgGFQ=="], - "@pandacss/types": ["@pandacss/types@1.5.1", "", {}, "sha512-fUDPtP3+yW8q5gPC2UfDcrdd/QW3H24kNt5vD30f5dt0CGDGkSoRUP4iJVNViEfQS2MzfDCnYI+PFOCw3eeQFw=="], + "@pandacss/types": ["@pandacss/types@1.6.1", "", {}, "sha512-H+BzBFf582mkmjuv4TckWA8zyMxrZSMvRdD9rLuv7ftddEA1dxf0Pj+jGE0VIGJU7+fc7TXR4nVk/kGUpqQ3ww=="], "@parcel/watcher": ["@parcel/watcher@2.5.1", "", { "dependencies": { "detect-libc": "^1.0.3", "is-glob": "^4.0.3", "micromatch": "^4.0.5", "node-addon-api": "^7.0.0" }, "optionalDependencies": { "@parcel/watcher-android-arm64": "2.5.1", "@parcel/watcher-darwin-arm64": "2.5.1", "@parcel/watcher-darwin-x64": "2.5.1", "@parcel/watcher-freebsd-x64": "2.5.1", "@parcel/watcher-linux-arm-glibc": "2.5.1", "@parcel/watcher-linux-arm-musl": "2.5.1", "@parcel/watcher-linux-arm64-glibc": "2.5.1", "@parcel/watcher-linux-arm64-musl": "2.5.1", "@parcel/watcher-linux-x64-glibc": "2.5.1", "@parcel/watcher-linux-x64-musl": "2.5.1", "@parcel/watcher-win32-arm64": "2.5.1", "@parcel/watcher-win32-ia32": "2.5.1", "@parcel/watcher-win32-x64": "2.5.1" } }, "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg=="], @@ -2001,7 +2001,7 @@ "braces": ["braces@3.0.3", "", { "dependencies": { "fill-range": "^7.1.1" } }, "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA=="], - "browserslist": ["browserslist@4.24.4", "", { "dependencies": { "caniuse-lite": "^1.0.30001688", "electron-to-chromium": "^1.5.73", "node-releases": "^2.0.19", "update-browserslist-db": "^1.1.1" }, "bin": { "browserslist": "cli.js" } }, "sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A=="], + "browserslist": ["browserslist@4.28.0", "", { "dependencies": { "baseline-browser-mapping": "^2.8.25", "caniuse-lite": "^1.0.30001754", "electron-to-chromium": "^1.5.249", "node-releases": "^2.0.27", "update-browserslist-db": "^1.1.4" }, "bin": { "browserslist": "cli.js" } }, "sha512-tbydkR/CxfMwelN0vwdP/pLkDwyAASZ+VfWm4EOwlB6SWhx1sYnWLqo8N5j0rAzPfzfRaxt0mM/4wPU/Su84RQ=="], "buffer": ["buffer@6.0.3", "", { "dependencies": { "base64-js": "^1.3.1", "ieee754": "^1.2.1" } }, "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA=="], @@ -2373,7 +2373,7 @@ "esbuild-windows-arm64": ["esbuild-windows-arm64@0.14.47", "", { "os": "win32", "cpu": "arm64" }, "sha512-HFSW2lnp62fl86/qPQlqw6asIwCnEsEoNIL1h2uVMgakddf+vUuMcCbtUY1i8sst7KkgHrVKCJQB33YhhOweCQ=="], - "escalade": ["escalade@3.1.2", "", {}, "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA=="], + "escalade": ["escalade@3.2.0", "", {}, "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="], "escape-html": ["escape-html@1.0.3", "", {}, "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="], @@ -2837,6 +2837,8 @@ "lightningcss": ["lightningcss@1.25.1", "", { "dependencies": { "detect-libc": "^1.0.3" }, "optionalDependencies": { "lightningcss-darwin-arm64": "1.25.1", "lightningcss-darwin-x64": "1.25.1", "lightningcss-freebsd-x64": "1.25.1", "lightningcss-linux-arm-gnueabihf": "1.25.1", "lightningcss-linux-arm64-gnu": "1.25.1", "lightningcss-linux-arm64-musl": "1.25.1", "lightningcss-linux-x64-gnu": "1.25.1", "lightningcss-linux-x64-musl": "1.25.1", "lightningcss-win32-x64-msvc": "1.25.1" } }, "sha512-V0RMVZzK1+rCHpymRv4URK2lNhIRyO8g7U7zOFwVAhJuat74HtkjIQpQRKNCwFEYkRGpafOpmXXLoaoBcyVtBg=="], + "lightningcss-android-arm64": ["lightningcss-android-arm64@1.30.2", "", { "os": "android", "cpu": "arm64" }, "sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A=="], + "lightningcss-darwin-arm64": ["lightningcss-darwin-arm64@1.25.1", "", { "os": "darwin", "cpu": "arm64" }, "sha512-G4Dcvv85bs5NLENcu/s1f7ehzE3D5ThnlWSDwE190tWXRQCQaqwcuHe+MGSVI/slm0XrxnaayXY+cNl3cSricw=="], "lightningcss-darwin-x64": ["lightningcss-darwin-x64@1.25.1", "", { "os": "darwin", "cpu": "x64" }, "sha512-dYWuCzzfqRueDSmto6YU5SoGHvZTMU1Em9xvhcdROpmtOQLorurUZz8+xFxZ51lCO2LnYbfdjZ/gCqWEkwixNg=="], @@ -2853,6 +2855,8 @@ "lightningcss-linux-x64-musl": ["lightningcss-linux-x64-musl@1.25.1", "", { "os": "linux", "cpu": "x64" }, "sha512-TdcNqFsAENEEFr8fJWg0Y4fZ/nwuqTRsIr7W7t2wmDUlA8eSXVepeeONYcb+gtTj1RaXn/WgNLB45SFkz+XBZA=="], + "lightningcss-win32-arm64-msvc": ["lightningcss-win32-arm64-msvc@1.30.2", "", { "os": "win32", "cpu": "arm64" }, "sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ=="], + "lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.25.1", "", { "os": "win32", "cpu": "x64" }, "sha512-9KZZkmmy9oGDSrnyHuxP6iMhbsgChUiu/NSgOx+U1I/wTngBStDf2i2aGRCHvFqj19HqqBEI4WuGVQBa2V6e0A=="], "lilconfig": ["lilconfig@3.1.3", "", {}, "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw=="], @@ -3299,7 +3303,7 @@ "postcss-merge-longhand": ["postcss-merge-longhand@7.0.5", "", { "dependencies": { "postcss-value-parser": "^4.2.0", "stylehacks": "^7.0.5" }, "peerDependencies": { "postcss": "^8.4.32" } }, "sha512-Kpu5v4Ys6QI59FxmxtNB/iHUVDn9Y9sYw66D6+SZoIk4QTz1prC4aYkhIESu+ieG1iylod1f8MILMs1Em3mmIw=="], - "postcss-merge-rules": ["postcss-merge-rules@7.0.6", "", { "dependencies": { "browserslist": "^4.25.1", "caniuse-api": "^3.0.0", "cssnano-utils": "^5.0.1", "postcss-selector-parser": "^7.1.0" }, "peerDependencies": { "postcss": "^8.4.32" } }, "sha512-2jIPT4Tzs8K87tvgCpSukRQ2jjd+hH6Bb8rEEOUDmmhOeTcqDg5fEFK8uKIu+Pvc3//sm3Uu6FRqfyv7YF7+BQ=="], + "postcss-merge-rules": ["postcss-merge-rules@7.0.7", "", { "dependencies": { "browserslist": "^4.27.0", "caniuse-api": "^3.0.0", "cssnano-utils": "^5.0.1", "postcss-selector-parser": "^7.1.0" }, "peerDependencies": { "postcss": "^8.4.32" } }, "sha512-njWJrd/Ms6XViwowaaCc+/vqhPG3SmXn725AGrnl+BgTuRPEacjiLEaGq16J6XirMJbtKkTwnt67SS+e2WGoew=="], "postcss-minify-font-values": ["postcss-minify-font-values@7.0.1", "", { "dependencies": { "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.4.32" } }, "sha512-2m1uiuJeTplll+tq4ENOQSzB8LRnSUChBv7oSyFLsJRtUgAAJGP6LLz0/8lkinTgxrmJSPOEhgY1bMXOQ4ZXhQ=="], @@ -4193,8 +4197,6 @@ "@babel/core/semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="], - "@babel/helper-compilation-targets/browserslist": ["browserslist@4.28.0", "", { "dependencies": { "baseline-browser-mapping": "^2.8.25", "caniuse-lite": "^1.0.30001754", "electron-to-chromium": "^1.5.249", "node-releases": "^2.0.27", "update-browserslist-db": "^1.1.4" }, "bin": { "browserslist": "cli.js" } }, "sha512-tbydkR/CxfMwelN0vwdP/pLkDwyAASZ+VfWm4EOwlB6SWhx1sYnWLqo8N5j0rAzPfzfRaxt0mM/4wPU/Su84RQ=="], - "@babel/helper-compilation-targets/lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "^3.0.2" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="], "@babel/helper-compilation-targets/semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="], @@ -4265,32 +4267,28 @@ "@octokit/plugin-rest-endpoint-methods/@octokit/types": ["@octokit/types@15.0.2", "", { "dependencies": { "@octokit/openapi-types": "^26.0.0" } }, "sha512-rR+5VRjhYSer7sC51krfCctQhVTmjyUMAaShfPB8mscVa8tSoLyon3coxQmXu0ahJoLVWl8dSGD/3OGZlFV44Q=="], + "@pandacss/config/merge-anything": ["merge-anything@6.0.6", "", { "dependencies": { "is-what": "^5.2.0" } }, "sha512-F3K1W45PvTjRZzbcYIhXntNr8cux00gUxR8IzNPPG+80gNlAHZGVBwFyN4x5yjw/7QkLPKDbRQBK4KrJKo69mw=="], + + "@pandacss/core/lightningcss": ["lightningcss@1.30.2", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.30.2", "lightningcss-darwin-arm64": "1.30.2", "lightningcss-darwin-x64": "1.30.2", "lightningcss-freebsd-x64": "1.30.2", "lightningcss-linux-arm-gnueabihf": "1.30.2", "lightningcss-linux-arm64-gnu": "1.30.2", "lightningcss-linux-arm64-musl": "1.30.2", "lightningcss-linux-x64-gnu": "1.30.2", "lightningcss-linux-x64-musl": "1.30.2", "lightningcss-win32-arm64-msvc": "1.30.2", "lightningcss-win32-x64-msvc": "1.30.2" } }, "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ=="], + "@pandacss/core/postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="], "@pandacss/core/postcss-nested": ["postcss-nested@7.0.2", "", { "dependencies": { "postcss-selector-parser": "^7.0.0" }, "peerDependencies": { "postcss": "^8.2.14" } }, "sha512-5osppouFc0VR9/VYzYxO03VaDa3e8F23Kfd6/9qcZTUI8P58GIYlArOET2Wq0ywSl2o2PjELhYOFI4W7l5QHKw=="], - "@pandacss/core/postcss-selector-parser": ["postcss-selector-parser@7.1.0", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA=="], + "@pandacss/core/postcss-selector-parser": ["postcss-selector-parser@7.1.1", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg=="], "@pandacss/generator/postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="], "@pandacss/node/chokidar": ["chokidar@4.0.3", "", { "dependencies": { "readdirp": "^4.0.1" } }, "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA=="], - "@pandacss/node/fs-extra": ["fs-extra@11.2.0", "", { "dependencies": { "graceful-fs": "^4.2.0", "jsonfile": "^6.0.1", "universalify": "^2.0.0" } }, "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw=="], - "@pandacss/node/glob-parent": ["glob-parent@6.0.2", "", { "dependencies": { "is-glob": "^4.0.3" } }, "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A=="], - "@pandacss/node/package-manager-detector": ["package-manager-detector@1.5.0", "", {}, "sha512-uBj69dVlYe/+wxj8JOpr97XfsxH/eumMt6HqjNTmJDf/6NO9s+0uxeOneIz3AsPt2m6y9PqzDzd3ATcU17MNfw=="], - "@pandacss/node/perfect-debounce": ["perfect-debounce@1.0.0", "", {}, "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA=="], "@pandacss/node/postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="], "@pandacss/node/prettier": ["prettier@3.2.5", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A=="], - "@pandacss/parser/@vue/compiler-sfc": ["@vue/compiler-sfc@3.5.22", "", { "dependencies": { "@babel/parser": "^7.28.4", "@vue/compiler-core": "3.5.22", "@vue/compiler-dom": "3.5.22", "@vue/compiler-ssr": "3.5.22", "@vue/shared": "3.5.22", "estree-walker": "^2.0.2", "magic-string": "^0.30.19", "postcss": "^8.5.6", "source-map-js": "^1.2.1" } }, "sha512-tbTR1zKGce4Lj+JLzFXDq36K4vcSZbJ1RBu8FxcDv1IGRz//Dh2EBqksyGVypz3kXpshIfWKGOCcqpSbyGWRJQ=="], - - "@pandacss/parser/magic-string": ["magic-string@0.30.19", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw=="], - "@pandacss/postcss/postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="], "@parcel/watcher/detect-libc": ["detect-libc@1.0.3", "", { "bin": { "detect-libc": "./bin/detect-libc.js" } }, "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg=="], @@ -4473,8 +4471,6 @@ "ast-v8-to-istanbul/js-tokens": ["js-tokens@9.0.1", "", {}, "sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ=="], - "autoprefixer/browserslist": ["browserslist@4.28.0", "", { "dependencies": { "baseline-browser-mapping": "^2.8.25", "caniuse-lite": "^1.0.30001754", "electron-to-chromium": "^1.5.249", "node-releases": "^2.0.27", "update-browserslist-db": "^1.1.4" }, "bin": { "browserslist": "cli.js" } }, "sha512-tbydkR/CxfMwelN0vwdP/pLkDwyAASZ+VfWm4EOwlB6SWhx1sYnWLqo8N5j0rAzPfzfRaxt0mM/4wPU/Su84RQ=="], - "babel-plugin-jsx-dom-expressions/@babel/helper-module-imports": ["@babel/helper-module-imports@7.18.6", "", { "dependencies": { "@babel/types": "^7.18.6" } }, "sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA=="], "better-auth/jose": ["jose@6.1.2", "", {}, "sha512-MpcPtHLE5EmztuFIqB0vzHAWJPpmN1E6L4oo+kze56LIs3MyXIj9ZHMDxqOvkP38gBR7K1v3jqd4WU2+nrfONQ=="], @@ -4489,8 +4485,6 @@ "c12/chokidar": ["chokidar@4.0.3", "", { "dependencies": { "readdirp": "^4.0.1" } }, "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA=="], - "caniuse-api/browserslist": ["browserslist@4.28.0", "", { "dependencies": { "baseline-browser-mapping": "^2.8.25", "caniuse-lite": "^1.0.30001754", "electron-to-chromium": "^1.5.249", "node-releases": "^2.0.27", "update-browserslist-db": "^1.1.4" }, "bin": { "browserslist": "cli.js" } }, "sha512-tbydkR/CxfMwelN0vwdP/pLkDwyAASZ+VfWm4EOwlB6SWhx1sYnWLqo8N5j0rAzPfzfRaxt0mM/4wPU/Su84RQ=="], - "clipboardy/execa": ["execa@8.0.1", "", { "dependencies": { "cross-spawn": "^7.0.3", "get-stream": "^8.0.1", "human-signals": "^5.0.0", "is-stream": "^3.0.0", "merge-stream": "^2.0.0", "npm-run-path": "^5.1.0", "onetime": "^6.0.0", "signal-exit": "^4.1.0", "strip-final-newline": "^3.0.0" } }, "sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg=="], "cliui/string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="], @@ -4513,12 +4507,8 @@ "cssnano/postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="], - "cssnano-preset-default/browserslist": ["browserslist@4.28.0", "", { "dependencies": { "baseline-browser-mapping": "^2.8.25", "caniuse-lite": "^1.0.30001754", "electron-to-chromium": "^1.5.249", "node-releases": "^2.0.27", "update-browserslist-db": "^1.1.4" }, "bin": { "browserslist": "cli.js" } }, "sha512-tbydkR/CxfMwelN0vwdP/pLkDwyAASZ+VfWm4EOwlB6SWhx1sYnWLqo8N5j0rAzPfzfRaxt0mM/4wPU/Su84RQ=="], - "cssnano-preset-default/postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="], - "cssnano-preset-default/postcss-merge-rules": ["postcss-merge-rules@7.0.7", "", { "dependencies": { "browserslist": "^4.27.0", "caniuse-api": "^3.0.0", "cssnano-utils": "^5.0.1", "postcss-selector-parser": "^7.1.0" }, "peerDependencies": { "postcss": "^8.4.32" } }, "sha512-njWJrd/Ms6XViwowaaCc+/vqhPG3SmXn725AGrnl+BgTuRPEacjiLEaGq16J6XirMJbtKkTwnt67SS+e2WGoew=="], - "cssnano-utils/postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="], "csso/css-tree": ["css-tree@2.2.1", "", { "dependencies": { "mdn-data": "2.0.28", "source-map-js": "^1.0.1" } }, "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA=="], @@ -4629,12 +4619,8 @@ "postcss-calc/postcss-selector-parser": ["postcss-selector-parser@7.1.0", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA=="], - "postcss-colormin/browserslist": ["browserslist@4.28.0", "", { "dependencies": { "baseline-browser-mapping": "^2.8.25", "caniuse-lite": "^1.0.30001754", "electron-to-chromium": "^1.5.249", "node-releases": "^2.0.27", "update-browserslist-db": "^1.1.4" }, "bin": { "browserslist": "cli.js" } }, "sha512-tbydkR/CxfMwelN0vwdP/pLkDwyAASZ+VfWm4EOwlB6SWhx1sYnWLqo8N5j0rAzPfzfRaxt0mM/4wPU/Su84RQ=="], - "postcss-colormin/postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="], - "postcss-convert-values/browserslist": ["browserslist@4.28.0", "", { "dependencies": { "baseline-browser-mapping": "^2.8.25", "caniuse-lite": "^1.0.30001754", "electron-to-chromium": "^1.5.249", "node-releases": "^2.0.27", "update-browserslist-db": "^1.1.4" }, "bin": { "browserslist": "cli.js" } }, "sha512-tbydkR/CxfMwelN0vwdP/pLkDwyAASZ+VfWm4EOwlB6SWhx1sYnWLqo8N5j0rAzPfzfRaxt0mM/4wPU/Su84RQ=="], - "postcss-convert-values/postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="], "postcss-discard-comments/postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="], @@ -4649,8 +4635,6 @@ "postcss-merge-longhand/postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="], - "postcss-merge-rules/browserslist": ["browserslist@4.28.0", "", { "dependencies": { "baseline-browser-mapping": "^2.8.25", "caniuse-lite": "^1.0.30001754", "electron-to-chromium": "^1.5.249", "node-releases": "^2.0.27", "update-browserslist-db": "^1.1.4" }, "bin": { "browserslist": "cli.js" } }, "sha512-tbydkR/CxfMwelN0vwdP/pLkDwyAASZ+VfWm4EOwlB6SWhx1sYnWLqo8N5j0rAzPfzfRaxt0mM/4wPU/Su84RQ=="], - "postcss-merge-rules/postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="], "postcss-merge-rules/postcss-selector-parser": ["postcss-selector-parser@7.1.0", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA=="], @@ -4659,8 +4643,6 @@ "postcss-minify-gradients/postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="], - "postcss-minify-params/browserslist": ["browserslist@4.28.0", "", { "dependencies": { "baseline-browser-mapping": "^2.8.25", "caniuse-lite": "^1.0.30001754", "electron-to-chromium": "^1.5.249", "node-releases": "^2.0.27", "update-browserslist-db": "^1.1.4" }, "bin": { "browserslist": "cli.js" } }, "sha512-tbydkR/CxfMwelN0vwdP/pLkDwyAASZ+VfWm4EOwlB6SWhx1sYnWLqo8N5j0rAzPfzfRaxt0mM/4wPU/Su84RQ=="], - "postcss-minify-params/postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="], "postcss-minify-selectors/postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="], @@ -4681,8 +4663,6 @@ "postcss-normalize-timing-functions/postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="], - "postcss-normalize-unicode/browserslist": ["browserslist@4.28.0", "", { "dependencies": { "baseline-browser-mapping": "^2.8.25", "caniuse-lite": "^1.0.30001754", "electron-to-chromium": "^1.5.249", "node-releases": "^2.0.27", "update-browserslist-db": "^1.1.4" }, "bin": { "browserslist": "cli.js" } }, "sha512-tbydkR/CxfMwelN0vwdP/pLkDwyAASZ+VfWm4EOwlB6SWhx1sYnWLqo8N5j0rAzPfzfRaxt0mM/4wPU/Su84RQ=="], - "postcss-normalize-unicode/postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="], "postcss-normalize-url/postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="], @@ -4691,8 +4671,6 @@ "postcss-ordered-values/postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="], - "postcss-reduce-initial/browserslist": ["browserslist@4.28.0", "", { "dependencies": { "baseline-browser-mapping": "^2.8.25", "caniuse-lite": "^1.0.30001754", "electron-to-chromium": "^1.5.249", "node-releases": "^2.0.27", "update-browserslist-db": "^1.1.4" }, "bin": { "browserslist": "cli.js" } }, "sha512-tbydkR/CxfMwelN0vwdP/pLkDwyAASZ+VfWm4EOwlB6SWhx1sYnWLqo8N5j0rAzPfzfRaxt0mM/4wPU/Su84RQ=="], - "postcss-reduce-initial/postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="], "postcss-reduce-transforms/postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="], @@ -4747,8 +4725,6 @@ "strip-literal/js-tokens": ["js-tokens@9.0.1", "", {}, "sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ=="], - "stylehacks/browserslist": ["browserslist@4.28.0", "", { "dependencies": { "baseline-browser-mapping": "^2.8.25", "caniuse-lite": "^1.0.30001754", "electron-to-chromium": "^1.5.249", "node-releases": "^2.0.27", "update-browserslist-db": "^1.1.4" }, "bin": { "browserslist": "cli.js" } }, "sha512-tbydkR/CxfMwelN0vwdP/pLkDwyAASZ+VfWm4EOwlB6SWhx1sYnWLqo8N5j0rAzPfzfRaxt0mM/4wPU/Su84RQ=="], - "stylehacks/postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="], "stylehacks/postcss-selector-parser": ["postcss-selector-parser@7.1.0", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA=="], @@ -4807,8 +4783,6 @@ "untun/pathe": ["pathe@1.1.2", "", {}, "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ=="], - "update-browserslist-db/escalade": ["escalade@3.2.0", "", {}, "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="], - "vee-validate/@vue/devtools-api": ["@vue/devtools-api@7.7.9", "", { "dependencies": { "@vue/devtools-kit": "^7.7.9" } }, "sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g=="], "vee-validate/type-fest": ["type-fest@4.41.0", "", {}, "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA=="], @@ -4877,6 +4851,8 @@ "write-yaml-file/write-file-atomic": ["write-file-atomic@3.0.3", "", { "dependencies": { "imurmurhash": "^0.1.4", "is-typedarray": "^1.0.0", "signal-exit": "^3.0.2", "typedarray-to-buffer": "^3.1.5" } }, "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q=="], + "yargs/escalade": ["escalade@3.1.2", "", {}, "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA=="], + "yargs/string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="], "yauzl/buffer-crc32": ["buffer-crc32@0.2.13", "", {}, "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ=="], @@ -5359,17 +5335,27 @@ "@octokit/plugin-rest-endpoint-methods/@octokit/types/@octokit/openapi-types": ["@octokit/openapi-types@26.0.0", "", {}, "sha512-7AtcfKtpo77j7Ts73b4OWhOZHTKo/gGY8bB3bNBQz4H+GRSWqx2yvj8TXRsbdTE0eRmYmXOEY66jM7mJ7LzfsA=="], - "@pandacss/parser/@vue/compiler-sfc/@vue/compiler-core": ["@vue/compiler-core@3.5.22", "", { "dependencies": { "@babel/parser": "^7.28.4", "@vue/shared": "3.5.22", "entities": "^4.5.0", "estree-walker": "^2.0.2", "source-map-js": "^1.2.1" } }, "sha512-jQ0pFPmZwTEiRNSb+i9Ow/I/cHv2tXYqsnHKKyCQ08irI2kdF5qmYedmF8si8mA7zepUFmJ2hqzS8CQmNOWOkQ=="], + "@pandacss/config/merge-anything/is-what": ["is-what@5.5.0", "", {}, "sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw=="], - "@pandacss/parser/@vue/compiler-sfc/@vue/compiler-dom": ["@vue/compiler-dom@3.5.22", "", { "dependencies": { "@vue/compiler-core": "3.5.22", "@vue/shared": "3.5.22" } }, "sha512-W8RknzUM1BLkypvdz10OVsGxnMAuSIZs9Wdx1vzA3mL5fNMN15rhrSCLiTm6blWeACwUwizzPVqGJgOGBEN/hA=="], + "@pandacss/core/lightningcss/lightningcss-darwin-arm64": ["lightningcss-darwin-arm64@1.30.2", "", { "os": "darwin", "cpu": "arm64" }, "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA=="], - "@pandacss/parser/@vue/compiler-sfc/@vue/compiler-ssr": ["@vue/compiler-ssr@3.5.22", "", { "dependencies": { "@vue/compiler-dom": "3.5.22", "@vue/shared": "3.5.22" } }, "sha512-GdgyLvg4R+7T8Nk2Mlighx7XGxq/fJf9jaVofc3IL0EPesTE86cP/8DD1lT3h1JeZr2ySBvyqKQJgbS54IX1Ww=="], + "@pandacss/core/lightningcss/lightningcss-darwin-x64": ["lightningcss-darwin-x64@1.30.2", "", { "os": "darwin", "cpu": "x64" }, "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ=="], - "@pandacss/parser/@vue/compiler-sfc/@vue/shared": ["@vue/shared@3.5.22", "", {}, "sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w=="], + "@pandacss/core/lightningcss/lightningcss-freebsd-x64": ["lightningcss-freebsd-x64@1.30.2", "", { "os": "freebsd", "cpu": "x64" }, "sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA=="], - "@pandacss/parser/@vue/compiler-sfc/magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="], + "@pandacss/core/lightningcss/lightningcss-linux-arm-gnueabihf": ["lightningcss-linux-arm-gnueabihf@1.30.2", "", { "os": "linux", "cpu": "arm" }, "sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA=="], - "@pandacss/parser/@vue/compiler-sfc/postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="], + "@pandacss/core/lightningcss/lightningcss-linux-arm64-gnu": ["lightningcss-linux-arm64-gnu@1.30.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A=="], + + "@pandacss/core/lightningcss/lightningcss-linux-arm64-musl": ["lightningcss-linux-arm64-musl@1.30.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA=="], + + "@pandacss/core/lightningcss/lightningcss-linux-x64-gnu": ["lightningcss-linux-x64-gnu@1.30.2", "", { "os": "linux", "cpu": "x64" }, "sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w=="], + + "@pandacss/core/lightningcss/lightningcss-linux-x64-musl": ["lightningcss-linux-x64-musl@1.30.2", "", { "os": "linux", "cpu": "x64" }, "sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA=="], + + "@pandacss/core/lightningcss/lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.30.2", "", { "os": "win32", "cpu": "x64" }, "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw=="], + + "@pandacss/core/postcss-nested/postcss-selector-parser": ["postcss-selector-parser@7.1.0", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA=="], "@rushstack/node-core-library/semver/lru-cache": ["lru-cache@6.0.0", "", { "dependencies": { "yallist": "^4.0.0" } }, "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA=="], @@ -5537,8 +5523,6 @@ "cliui/wrap-ansi/ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="], - "cssnano-preset-default/postcss-merge-rules/postcss-selector-parser": ["postcss-selector-parser@7.1.0", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA=="], - "csso/css-tree/mdn-data": ["mdn-data@2.0.28", "", {}, "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g=="], "form-data/mime-types/mime-db": ["mime-db@1.52.0", "", {}, "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="], @@ -6093,8 +6077,6 @@ "@nuxt/devtools/execa/onetime/mimic-fn": ["mimic-fn@4.0.0", "", {}, "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw=="], - "@pandacss/parser/@vue/compiler-sfc/@vue/compiler-core/entities": ["entities@4.5.0", "", {}, "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="], - "@solidjs/start/shiki/@shikijs/engine-javascript/oniguruma-to-es": ["oniguruma-to-es@2.3.0", "", { "dependencies": { "emoji-regex-xs": "^1.0.0", "regex": "^5.1.1", "regex-recursion": "^5.1.1" } }, "sha512-bwALDxriqfKGfUufKGGepCzu9x7nJQuoRoAFp4AnwehhC2crqrDIAP/uN2qdlsAvSMpeRC3+Yzhqc7hLmle5+g=="], "@testing-library/vue/@testing-library/dom/chalk/ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="], diff --git a/website/package.json b/website/package.json index 65953f8123..d39d77cf27 100644 --- a/website/package.json +++ b/website/package.json @@ -15,9 +15,9 @@ "@chakra-ui/better-auth": "0.3.0", "@effect/schema": "0.75.5", "@icons-pack/react-simple-icons": "13.8.0", - "@pandacss/dev": "1.5.1", - "@pandacss/preset-base": "1.5.1", - "@pandacss/preset-panda": "1.5.1", + "@pandacss/dev": "1.6.1", + "@pandacss/preset-base": "1.6.1", + "@pandacss/preset-panda": "1.6.1", "@park-ui/panda-preset": "0.43.1", "@shikijs/rehype": "3.17.0", "@shikijs/transformers": "3.17.0", From d3338b9398ef9223784be8f25b62617d0e964aa0 Mon Sep 17 00:00:00 2001 From: Christian Busch Date: Thu, 4 Dec 2025 13:44:02 +0100 Subject: [PATCH 2/3] chore: add styles --- .storybook/styles-v2/global.css | 100 + .storybook/styles-v2/recipes.css | 43 + .../styles-v2/recipes/absolute-center.css | 34 + .storybook/styles-v2/recipes/accordion.css | 88 + .storybook/styles-v2/recipes/alert.css | 271 ++ .storybook/styles-v2/recipes/avatar.css | 142 + .storybook/styles-v2/recipes/badge.css | 98 + .storybook/styles-v2/recipes/breadcrumb.css | 111 + .storybook/styles-v2/recipes/button.css | 215 ++ .storybook/styles-v2/recipes/card.css | 62 + .storybook/styles-v2/recipes/carousel.css | 80 + .storybook/styles-v2/recipes/checkbox.css | 144 + .storybook/styles-v2/recipes/code.css | 75 + .storybook/styles-v2/recipes/combobox.css | 491 +++ .storybook/styles-v2/recipes/dialog.css | 268 ++ .storybook/styles-v2/recipes/drawer.css | 228 ++ .storybook/styles-v2/recipes/editable.css | 99 + .storybook/styles-v2/recipes/file-upload.css | 114 + .storybook/styles-v2/recipes/form-label.css | 18 + .storybook/styles-v2/recipes/group.css | 33 + .storybook/styles-v2/recipes/icon.css | 41 + .storybook/styles-v2/recipes/input-addon.css | 84 + .storybook/styles-v2/recipes/input-group.css | 107 + .storybook/styles-v2/recipes/input.css | 158 + .storybook/styles-v2/recipes/kbd.css | 78 + .storybook/styles-v2/recipes/link.css | 53 + .storybook/styles-v2/recipes/menu.css | 288 ++ .storybook/styles-v2/recipes/number-input.css | 205 + .storybook/styles-v2/recipes/pin-input.css | 138 + .storybook/styles-v2/recipes/progress.css | 114 + .../styles-v2/recipes/radio-card-group.css | 178 + .storybook/styles-v2/recipes/radio-group.css | 112 + .storybook/styles-v2/recipes/rating-group.css | 116 + .storybook/styles-v2/recipes/scroll-area.css | 127 + .../styles-v2/recipes/segment-group.css | 169 + .storybook/styles-v2/recipes/select.css | 403 ++ .storybook/styles-v2/recipes/skeleton.css | 51 + .storybook/styles-v2/recipes/slider.css | 168 + .storybook/styles-v2/recipes/spinner.css | 46 + .../styles-v2/recipes/switch-recipe.css | 167 + .storybook/styles-v2/recipes/table.css | 105 + .storybook/styles-v2/recipes/tabs.css | 235 ++ .storybook/styles-v2/recipes/tags-input.css | 310 ++ .storybook/styles-v2/recipes/textarea.css | 148 + .storybook/styles-v2/recipes/toggle-group.css | 8 + .storybook/styles-v2/reset.css | 173 + .storybook/styles-v2/tokens.css | 3324 +++++++++++++++++ .storybook/styles-v2/utilities.css | 1120 ++++++ 48 files changed, 10940 insertions(+) create mode 100644 .storybook/styles-v2/global.css create mode 100644 .storybook/styles-v2/recipes.css create mode 100644 .storybook/styles-v2/recipes/absolute-center.css create mode 100644 .storybook/styles-v2/recipes/accordion.css create mode 100644 .storybook/styles-v2/recipes/alert.css create mode 100644 .storybook/styles-v2/recipes/avatar.css create mode 100644 .storybook/styles-v2/recipes/badge.css create mode 100644 .storybook/styles-v2/recipes/breadcrumb.css create mode 100644 .storybook/styles-v2/recipes/button.css create mode 100644 .storybook/styles-v2/recipes/card.css create mode 100644 .storybook/styles-v2/recipes/carousel.css create mode 100644 .storybook/styles-v2/recipes/checkbox.css create mode 100644 .storybook/styles-v2/recipes/code.css create mode 100644 .storybook/styles-v2/recipes/combobox.css create mode 100644 .storybook/styles-v2/recipes/dialog.css create mode 100644 .storybook/styles-v2/recipes/drawer.css create mode 100644 .storybook/styles-v2/recipes/editable.css create mode 100644 .storybook/styles-v2/recipes/file-upload.css create mode 100644 .storybook/styles-v2/recipes/form-label.css create mode 100644 .storybook/styles-v2/recipes/group.css create mode 100644 .storybook/styles-v2/recipes/icon.css create mode 100644 .storybook/styles-v2/recipes/input-addon.css create mode 100644 .storybook/styles-v2/recipes/input-group.css create mode 100644 .storybook/styles-v2/recipes/input.css create mode 100644 .storybook/styles-v2/recipes/kbd.css create mode 100644 .storybook/styles-v2/recipes/link.css create mode 100644 .storybook/styles-v2/recipes/menu.css create mode 100644 .storybook/styles-v2/recipes/number-input.css create mode 100644 .storybook/styles-v2/recipes/pin-input.css create mode 100644 .storybook/styles-v2/recipes/progress.css create mode 100644 .storybook/styles-v2/recipes/radio-card-group.css create mode 100644 .storybook/styles-v2/recipes/radio-group.css create mode 100644 .storybook/styles-v2/recipes/rating-group.css create mode 100644 .storybook/styles-v2/recipes/scroll-area.css create mode 100644 .storybook/styles-v2/recipes/segment-group.css create mode 100644 .storybook/styles-v2/recipes/select.css create mode 100644 .storybook/styles-v2/recipes/skeleton.css create mode 100644 .storybook/styles-v2/recipes/slider.css create mode 100644 .storybook/styles-v2/recipes/spinner.css create mode 100644 .storybook/styles-v2/recipes/switch-recipe.css create mode 100644 .storybook/styles-v2/recipes/table.css create mode 100644 .storybook/styles-v2/recipes/tabs.css create mode 100644 .storybook/styles-v2/recipes/tags-input.css create mode 100644 .storybook/styles-v2/recipes/textarea.css create mode 100644 .storybook/styles-v2/recipes/toggle-group.css create mode 100644 .storybook/styles-v2/reset.css create mode 100644 .storybook/styles-v2/tokens.css create mode 100644 .storybook/styles-v2/utilities.css diff --git a/.storybook/styles-v2/global.css b/.storybook/styles-v2/global.css new file mode 100644 index 0000000000..dfbf7c9714 --- /dev/null +++ b/.storybook/styles-v2/global.css @@ -0,0 +1,100 @@ +@layer base { + :root { + --made-with-panda: '🐼'; +} + + *,::before,::after,::backdrop { + --blur: /*-*/ /*-*/; + --brightness: /*-*/ /*-*/; + --contrast: /*-*/ /*-*/; + --grayscale: /*-*/ /*-*/; + --hue-rotate: /*-*/ /*-*/; + --invert: /*-*/ /*-*/; + --saturate: /*-*/ /*-*/; + --sepia: /*-*/ /*-*/; + --drop-shadow: /*-*/ /*-*/; + --backdrop-blur: /*-*/ /*-*/; + --backdrop-brightness: /*-*/ /*-*/; + --backdrop-contrast: /*-*/ /*-*/; + --backdrop-grayscale: /*-*/ /*-*/; + --backdrop-hue-rotate: /*-*/ /*-*/; + --backdrop-invert: /*-*/ /*-*/; + --backdrop-opacity: /*-*/ /*-*/; + --backdrop-saturate: /*-*/ /*-*/; + --backdrop-sepia: /*-*/ /*-*/; + --gradient-from-position: /*-*/ /*-*/; + --gradient-to-position: /*-*/ /*-*/; + --gradient-via-position: /*-*/ /*-*/; + --scroll-snap-strictness: proximity; + --border-spacing-x: 0; + --border-spacing-y: 0; + --translate-x: 0; + --translate-y: 0; + --rotate: 0; + --rotate-x: 0; + --rotate-y: 0; + --skew-x: 0; + --skew-y: 0; + --scale-x: 1; + --scale-y: 1; +} + + html { + --colors-color-palette-1: var(--colors-neutral-1); + --colors-color-palette-2: var(--colors-neutral-2); + --colors-color-palette-3: var(--colors-neutral-3); + --colors-color-palette-4: var(--colors-neutral-4); + --colors-color-palette-5: var(--colors-neutral-5); + --colors-color-palette-6: var(--colors-neutral-6); + --colors-color-palette-7: var(--colors-neutral-7); + --colors-color-palette-8: var(--colors-neutral-8); + --colors-color-palette-9: var(--colors-neutral-9); + --colors-color-palette-10: var(--colors-neutral-10); + --colors-color-palette-11: var(--colors-neutral-11); + --colors-color-palette-12: var(--colors-neutral-12); + --colors-color-palette-a1: var(--colors-neutral-a1); + --colors-color-palette-a2: var(--colors-neutral-a2); + --colors-color-palette-a3: var(--colors-neutral-a3); + --colors-color-palette-a4: var(--colors-neutral-a4); + --colors-color-palette-a5: var(--colors-neutral-a5); + --colors-color-palette-a6: var(--colors-neutral-a6); + --colors-color-palette-a7: var(--colors-neutral-a7); + --colors-color-palette-a8: var(--colors-neutral-a8); + --colors-color-palette-a9: var(--colors-neutral-a9); + --colors-color-palette-a10: var(--colors-neutral-a10); + --colors-color-palette-a11: var(--colors-neutral-a11); + --colors-color-palette-a12: var(--colors-neutral-a12); + --colors-color-palette-solid-bg: var(--colors-neutral-solid-bg); + --colors-color-palette-solid-bg-hover: var(--colors-neutral-solid-bg-hover); + --colors-color-palette-solid-fg: var(--colors-neutral-solid-fg); + --colors-color-palette-subtle-bg: var(--colors-neutral-subtle-bg); + --colors-color-palette-subtle-bg-hover: var(--colors-neutral-subtle-bg-hover); + --colors-color-palette-subtle-bg-active: var(--colors-neutral-subtle-bg-active); + --colors-color-palette-subtle-fg: var(--colors-neutral-subtle-fg); + --colors-color-palette-surface-bg: var(--colors-neutral-surface-bg); + --colors-color-palette-surface-bg-hover: var(--colors-neutral-surface-bg-hover); + --colors-color-palette-surface-bg-active: var(--colors-neutral-surface-bg-active); + --colors-color-palette-surface-border: var(--colors-neutral-surface-border); + --colors-color-palette-surface-border-hover: var(--colors-neutral-surface-border-hover); + --colors-color-palette-surface-fg: var(--colors-neutral-surface-fg); + --colors-color-palette-outline-bg-hover: var(--colors-neutral-outline-bg-hover); + --colors-color-palette-outline-bg-active: var(--colors-neutral-outline-bg-active); + --colors-color-palette-outline-border: var(--colors-neutral-outline-border); + --colors-color-palette-outline-fg: var(--colors-neutral-outline-fg); + --colors-color-palette-plain-bg-hover: var(--colors-neutral-plain-bg-hover); + --colors-color-palette-plain-bg-active: var(--colors-neutral-plain-bg-active); + --colors-color-palette-plain-fg: var(--colors-neutral-plain-fg); +} + + * { + --global-color-border: var(--colors-border); + --global-color-placeholder: var(--colors-fg-subtle); + --global-color-selection: var(--colors-color-palette-subtle-bg); + --global-color-focus-ring: var(--colors-color-palette-solid-bg); +} + + body { + background: var(--colors-canvas); + color: var(--colors-fg-default); +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes.css b/.storybook/styles-v2/recipes.css new file mode 100644 index 0000000000..9ecf644548 --- /dev/null +++ b/.storybook/styles-v2/recipes.css @@ -0,0 +1,43 @@ +@import './recipes/group.css'; +@import './recipes/button.css'; +@import './recipes/icon.css'; +@import './recipes/spinner.css'; +@import './recipes/absolute-center.css'; +@import './recipes/skeleton.css'; +@import './recipes/accordion.css'; +@import './recipes/alert.css'; +@import './recipes/avatar.css'; +@import './recipes/badge.css'; +@import './recipes/breadcrumb.css'; +@import './recipes/menu.css'; +@import './recipes/card.css'; +@import './recipes/input.css'; +@import './recipes/carousel.css'; +@import './recipes/checkbox.css'; +@import './recipes/link.css'; +@import './recipes/input-group.css'; +@import './recipes/code.css'; +@import './recipes/combobox.css'; +@import './recipes/dialog.css'; +@import './recipes/drawer.css'; +@import './recipes/editable.css'; +@import './recipes/file-upload.css'; +@import './recipes/input-addon.css'; +@import './recipes/kbd.css'; +@import './recipes/number-input.css'; +@import './recipes/pin-input.css'; +@import './recipes/textarea.css'; +@import './recipes/progress.css'; +@import './recipes/radio-card-group.css'; +@import './recipes/radio-group.css'; +@import './recipes/rating-group.css'; +@import './recipes/scroll-area.css'; +@import './recipes/segment-group.css'; +@import './recipes/select.css'; +@import './recipes/slider.css'; +@import './recipes/switch-recipe.css'; +@import './recipes/table.css'; +@import './recipes/tabs.css'; +@import './recipes/tags-input.css'; +@import './recipes/toggle-group.css'; +@import './recipes/form-label.css'; \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/absolute-center.css b/.storybook/styles-v2/recipes/absolute-center.css new file mode 100644 index 0000000000..8c8127ea1a --- /dev/null +++ b/.storybook/styles-v2/recipes/absolute-center.css @@ -0,0 +1,34 @@ +@layer recipes { + @layer _base { + .absolute-center { + position: absolute; + display: flex; + align-items: center; + justify-content: center; +} +} + + .absolute-center--axis_both { + inset-inline-start: 50%; + translate: -50% -50%; + top: 50%; +} + + :where([dir=rtl], :dir(rtl)) .absolute-center--axis_both { + translate: 50% -50%; +} + + .absolute-center--axis_horizontal { + inset-inline-start: 50%; + translate: -50%; +} + + :where([dir=rtl], :dir(rtl)) .absolute-center--axis_horizontal { + translate: 50%; +} + + .absolute-center--axis_vertical { + translate: 0 -50%; + top: 50%; +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/accordion.css b/.storybook/styles-v2/recipes/accordion.css new file mode 100644 index 0000000000..acd6ee4c33 --- /dev/null +++ b/.storybook/styles-v2/recipes/accordion.css @@ -0,0 +1,88 @@ +@layer recipes.slots { + @layer _base { + .accordion__root { + --accordion-radius: var(--radii-l2); + width: var(--sizes-full); +} + + .accordion__item { + overflow-anchor: none; +} + + .accordion__itemTrigger { + border-radius: var(--accordion-radius); + gap: var(--spacing-3); + align-items: center; + color: var(--colors-fg-default); + cursor: pointer; + display: flex; + font-weight: var(--font-weights-semibold); + justify-content: space-between; + text-align: start; + font-size: var(--font-sizes-lg); + line-height: 1.75rem; + width: var(--sizes-full); +} + + .accordion__itemTrigger:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) { + cursor: not-allowed; + opacity: 0.67; + filter: grayscale(100%); +} + + .accordion__itemTrigger:is(:focus-visible, [data-focus-visible]) { + outline: 2px solid; + outline-color: colorPalette.focusRing; +} + + .accordion__itemContent { + overflow: hidden; + border-radius: var(--accordion-radius); +} + + .accordion__itemContent:is([open], [data-open], [data-state="open"], :popover-open) { + animation-name: expand-height, fade-in; + animation-duration: var(--durations-normal); +} + + .accordion__itemContent:is([closed], [data-closed], [data-state="closed"]) { + animation-name: collapse-height, fade-out; + animation-duration: var(--durations-normal); +} + + .accordion__itemIndicator { + transition: rotate 0.2s; + transform-origin: center; + color: var(--colors-fg-subtle); +} + + .accordion__itemIndicator:is([open], [data-open], [data-state="open"], :popover-open) { + rotate: 180deg; +} + + .accordion__itemIndicator :where(svg) { + width: 1.2em; + height: 1.2em; +} + + .accordion__itemBody { + color: var(--colors-fg-muted); + padding-bottom: calc(var(--accordion-padding-y) * 2); +} +} + + .accordion__root--size_md { + --accordion-padding-x: var(--spacing-4); + --accordion-padding-y: var(--spacing-2\.5); +} + + .accordion__itemTrigger--size_md { + padding-block: var(--accordion-padding-y); + font-size: var(--font-sizes-md); + line-height: 1.5rem; +} + + .accordion__item--variant_outline { + border-bottom-width: 1px; +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/alert.css b/.storybook/styles-v2/recipes/alert.css new file mode 100644 index 0000000000..0fef744c2b --- /dev/null +++ b/.storybook/styles-v2/recipes/alert.css @@ -0,0 +1,271 @@ +@layer recipes.slots { + @layer _base { + .alert__root { + border-radius: var(--radii-l3); + align-items: flex-start; + display: flex; + position: relative; + width: var(--sizes-full); +} + + [data-scope="alert"][data-part="content"] { + flex: 1 1 0%; + gap: var(--spacing-1); + display: flex; + flex-direction: column; +} + + .alert__content { + flex: 1 1 0%; + gap: var(--spacing-1); + display: flex; + flex-direction: column; +} + + .alert__description { + display: inline; +} + + .alert__indicator { + display: inline-flex; + align-items: center; + justify-content: center; + flex-shrink: 0; +} + + .alert__title { + font-weight: var(--font-weights-semibold); +} +} + + .alert__root--size_md { + padding: var(--spacing-4); + gap: var(--spacing-3); + font-size: var(--font-sizes-sm); + line-height: 1.25rem; +} + + .alert__indicator--size_md :where(svg) { + width: var(--sizes-5); + height: var(--sizes-5); +} + + .alert__root--status_info { + --colors-color-palette-1: var(--colors-blue-1); + --colors-color-palette-2: var(--colors-blue-2); + --colors-color-palette-3: var(--colors-blue-3); + --colors-color-palette-4: var(--colors-blue-4); + --colors-color-palette-5: var(--colors-blue-5); + --colors-color-palette-6: var(--colors-blue-6); + --colors-color-palette-7: var(--colors-blue-7); + --colors-color-palette-8: var(--colors-blue-8); + --colors-color-palette-9: var(--colors-blue-9); + --colors-color-palette-10: var(--colors-blue-10); + --colors-color-palette-11: var(--colors-blue-11); + --colors-color-palette-12: var(--colors-blue-12); + --colors-color-palette-a1: var(--colors-blue-a1); + --colors-color-palette-a2: var(--colors-blue-a2); + --colors-color-palette-a3: var(--colors-blue-a3); + --colors-color-palette-a4: var(--colors-blue-a4); + --colors-color-palette-a5: var(--colors-blue-a5); + --colors-color-palette-a6: var(--colors-blue-a6); + --colors-color-palette-a7: var(--colors-blue-a7); + --colors-color-palette-a8: var(--colors-blue-a8); + --colors-color-palette-a9: var(--colors-blue-a9); + --colors-color-palette-a10: var(--colors-blue-a10); + --colors-color-palette-a11: var(--colors-blue-a11); + --colors-color-palette-a12: var(--colors-blue-a12); + --colors-color-palette-solid-bg: var(--colors-blue-solid-bg); + --colors-color-palette-solid-bg-hover: var(--colors-blue-solid-bg-hover); + --colors-color-palette-solid-fg: var(--colors-blue-solid-fg); + --colors-color-palette-subtle-bg: var(--colors-blue-subtle-bg); + --colors-color-palette-subtle-bg-hover: var(--colors-blue-subtle-bg-hover); + --colors-color-palette-subtle-bg-active: var(--colors-blue-subtle-bg-active); + --colors-color-palette-subtle-fg: var(--colors-blue-subtle-fg); + --colors-color-palette-surface-bg: var(--colors-blue-surface-bg); + --colors-color-palette-surface-bg-active: var(--colors-blue-surface-bg-active); + --colors-color-palette-surface-border: var(--colors-blue-surface-border); + --colors-color-palette-surface-border-hover: var(--colors-blue-surface-border-hover); + --colors-color-palette-surface-fg: var(--colors-blue-surface-fg); + --colors-color-palette-outline-bg-hover: var(--colors-blue-outline-bg-hover); + --colors-color-palette-outline-bg-active: var(--colors-blue-outline-bg-active); + --colors-color-palette-outline-border: var(--colors-blue-outline-border); + --colors-color-palette-outline-fg: var(--colors-blue-outline-fg); + --colors-color-palette-plain-bg-hover: var(--colors-blue-plain-bg-hover); + --colors-color-palette-plain-bg-active: var(--colors-blue-plain-bg-active); + --colors-color-palette-plain-fg: var(--colors-blue-plain-fg); +} + + .alert__root--variant_subtle { + background: var(--colors-color-palette-subtle-bg); + color: var(--colors-color-palette-subtle-fg); +} + + .alert__root--size_lg { + padding: var(--spacing-4); + gap: var(--spacing-4); + font-size: var(--font-sizes-md); + line-height: 1.5rem; +} + + .alert__indicator--size_lg :where(svg) { + width: var(--sizes-6); + height: var(--sizes-6); +} + + .alert__root--variant_solid { + background: var(--colors-color-palette-solid-bg); + color: var(--colors-color-palette-solid-fg); +} + + .alert__root--variant_surface { + background: var(--colors-color-palette-surface-bg); + border-width: 1px; + border-color: var(--colors-color-palette-surface-border); + color: var(--colors-color-palette-surface-fg); +} + + .alert__root--variant_outline { + border-width: 1px; + border-color: var(--colors-color-palette-outline-border); + color: var(--colors-color-palette-outline-fg); +} + + .alert__root--status_warning { + --colors-color-palette-1: var(--colors-orange-1); + --colors-color-palette-2: var(--colors-orange-2); + --colors-color-palette-3: var(--colors-orange-3); + --colors-color-palette-4: var(--colors-orange-4); + --colors-color-palette-5: var(--colors-orange-5); + --colors-color-palette-6: var(--colors-orange-6); + --colors-color-palette-7: var(--colors-orange-7); + --colors-color-palette-8: var(--colors-orange-8); + --colors-color-palette-9: var(--colors-orange-9); + --colors-color-palette-10: var(--colors-orange-10); + --colors-color-palette-11: var(--colors-orange-11); + --colors-color-palette-12: var(--colors-orange-12); + --colors-color-palette-a1: var(--colors-orange-a1); + --colors-color-palette-a2: var(--colors-orange-a2); + --colors-color-palette-a3: var(--colors-orange-a3); + --colors-color-palette-a4: var(--colors-orange-a4); + --colors-color-palette-a5: var(--colors-orange-a5); + --colors-color-palette-a6: var(--colors-orange-a6); + --colors-color-palette-a7: var(--colors-orange-a7); + --colors-color-palette-a8: var(--colors-orange-a8); + --colors-color-palette-a9: var(--colors-orange-a9); + --colors-color-palette-a10: var(--colors-orange-a10); + --colors-color-palette-a11: var(--colors-orange-a11); + --colors-color-palette-a12: var(--colors-orange-a12); + --colors-color-palette-solid-bg: var(--colors-orange-solid-bg); + --colors-color-palette-solid-bg-hover: var(--colors-orange-solid-bg-hover); + --colors-color-palette-solid-fg: var(--colors-orange-solid-fg); + --colors-color-palette-subtle-bg: var(--colors-orange-subtle-bg); + --colors-color-palette-subtle-bg-hover: var(--colors-orange-subtle-bg-hover); + --colors-color-palette-subtle-bg-active: var(--colors-orange-subtle-bg-active); + --colors-color-palette-subtle-fg: var(--colors-orange-subtle-fg); + --colors-color-palette-surface-bg: var(--colors-orange-surface-bg); + --colors-color-palette-surface-bg-active: var(--colors-orange-surface-bg-active); + --colors-color-palette-surface-border: var(--colors-orange-surface-border); + --colors-color-palette-surface-border-hover: var(--colors-orange-surface-border-hover); + --colors-color-palette-surface-fg: var(--colors-orange-surface-fg); + --colors-color-palette-outline-bg-hover: var(--colors-orange-outline-bg-hover); + --colors-color-palette-outline-bg-active: var(--colors-orange-outline-bg-active); + --colors-color-palette-outline-border: var(--colors-orange-outline-border); + --colors-color-palette-outline-fg: var(--colors-orange-outline-fg); + --colors-color-palette-plain-bg-hover: var(--colors-orange-plain-bg-hover); + --colors-color-palette-plain-bg-active: var(--colors-orange-plain-bg-active); + --colors-color-palette-plain-fg: var(--colors-orange-plain-fg); +} + + .alert__root--status_success { + --colors-color-palette-1: var(--colors-green-1); + --colors-color-palette-2: var(--colors-green-2); + --colors-color-palette-3: var(--colors-green-3); + --colors-color-palette-4: var(--colors-green-4); + --colors-color-palette-5: var(--colors-green-5); + --colors-color-palette-6: var(--colors-green-6); + --colors-color-palette-7: var(--colors-green-7); + --colors-color-palette-8: var(--colors-green-8); + --colors-color-palette-9: var(--colors-green-9); + --colors-color-palette-10: var(--colors-green-10); + --colors-color-palette-11: var(--colors-green-11); + --colors-color-palette-12: var(--colors-green-12); + --colors-color-palette-a1: var(--colors-green-a1); + --colors-color-palette-a2: var(--colors-green-a2); + --colors-color-palette-a3: var(--colors-green-a3); + --colors-color-palette-a4: var(--colors-green-a4); + --colors-color-palette-a5: var(--colors-green-a5); + --colors-color-palette-a6: var(--colors-green-a6); + --colors-color-palette-a7: var(--colors-green-a7); + --colors-color-palette-a8: var(--colors-green-a8); + --colors-color-palette-a9: var(--colors-green-a9); + --colors-color-palette-a10: var(--colors-green-a10); + --colors-color-palette-a11: var(--colors-green-a11); + --colors-color-palette-a12: var(--colors-green-a12); + --colors-color-palette-solid-bg: var(--colors-green-solid-bg); + --colors-color-palette-solid-bg-hover: var(--colors-green-solid-bg-hover); + --colors-color-palette-solid-fg: var(--colors-green-solid-fg); + --colors-color-palette-subtle-bg: var(--colors-green-subtle-bg); + --colors-color-palette-subtle-bg-hover: var(--colors-green-subtle-bg-hover); + --colors-color-palette-subtle-bg-active: var(--colors-green-subtle-bg-active); + --colors-color-palette-subtle-fg: var(--colors-green-subtle-fg); + --colors-color-palette-surface-bg: var(--colors-green-surface-bg); + --colors-color-palette-surface-bg-active: var(--colors-green-surface-bg-active); + --colors-color-palette-surface-border: var(--colors-green-surface-border); + --colors-color-palette-surface-border-hover: var(--colors-green-surface-border-hover); + --colors-color-palette-surface-fg: var(--colors-green-surface-fg); + --colors-color-palette-outline-bg-hover: var(--colors-green-outline-bg-hover); + --colors-color-palette-outline-bg-active: var(--colors-green-outline-bg-active); + --colors-color-palette-outline-border: var(--colors-green-outline-border); + --colors-color-palette-outline-fg: var(--colors-green-outline-fg); + --colors-color-palette-plain-bg-hover: var(--colors-green-plain-bg-hover); + --colors-color-palette-plain-bg-active: var(--colors-green-plain-bg-active); + --colors-color-palette-plain-fg: var(--colors-green-plain-fg); +} + + .alert__root--status_error { + --colors-color-palette-1: var(--colors-red-1); + --colors-color-palette-2: var(--colors-red-2); + --colors-color-palette-3: var(--colors-red-3); + --colors-color-palette-4: var(--colors-red-4); + --colors-color-palette-5: var(--colors-red-5); + --colors-color-palette-6: var(--colors-red-6); + --colors-color-palette-7: var(--colors-red-7); + --colors-color-palette-8: var(--colors-red-8); + --colors-color-palette-9: var(--colors-red-9); + --colors-color-palette-10: var(--colors-red-10); + --colors-color-palette-11: var(--colors-red-11); + --colors-color-palette-12: var(--colors-red-12); + --colors-color-palette-a1: var(--colors-red-a1); + --colors-color-palette-a2: var(--colors-red-a2); + --colors-color-palette-a3: var(--colors-red-a3); + --colors-color-palette-a4: var(--colors-red-a4); + --colors-color-palette-a5: var(--colors-red-a5); + --colors-color-palette-a6: var(--colors-red-a6); + --colors-color-palette-a7: var(--colors-red-a7); + --colors-color-palette-a8: var(--colors-red-a8); + --colors-color-palette-a9: var(--colors-red-a9); + --colors-color-palette-a10: var(--colors-red-a10); + --colors-color-palette-a11: var(--colors-red-a11); + --colors-color-palette-a12: var(--colors-red-a12); + --colors-color-palette-solid-bg: var(--colors-red-solid-bg); + --colors-color-palette-solid-bg-hover: var(--colors-red-solid-bg-hover); + --colors-color-palette-solid-fg: var(--colors-red-solid-fg); + --colors-color-palette-subtle-bg: var(--colors-red-subtle-bg); + --colors-color-palette-subtle-bg-hover: var(--colors-red-subtle-bg-hover); + --colors-color-palette-subtle-bg-active: var(--colors-red-subtle-bg-active); + --colors-color-palette-subtle-fg: var(--colors-red-subtle-fg); + --colors-color-palette-surface-bg: var(--colors-red-surface-bg); + --colors-color-palette-surface-bg-active: var(--colors-red-surface-bg-active); + --colors-color-palette-surface-border: var(--colors-red-surface-border); + --colors-color-palette-surface-border-hover: var(--colors-red-surface-border-hover); + --colors-color-palette-surface-fg: var(--colors-red-surface-fg); + --colors-color-palette-outline-bg-hover: var(--colors-red-outline-bg-hover); + --colors-color-palette-outline-bg-active: var(--colors-red-outline-bg-active); + --colors-color-palette-outline-border: var(--colors-red-outline-border); + --colors-color-palette-outline-fg: var(--colors-red-outline-fg); + --colors-color-palette-plain-bg-hover: var(--colors-red-plain-bg-hover); + --colors-color-palette-plain-bg-active: var(--colors-red-plain-bg-active); + --colors-color-palette-plain-fg: var(--colors-red-plain-fg); +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/avatar.css b/.storybook/styles-v2/recipes/avatar.css new file mode 100644 index 0000000000..5a8e2fe0cc --- /dev/null +++ b/.storybook/styles-v2/recipes/avatar.css @@ -0,0 +1,142 @@ +@layer recipes.slots { + @layer _base { + .avatar__root { + display: inline-flex; + align-items: center; + justify-content: center; + font-weight: var(--font-weights-medium); + position: relative; + vertical-align: top; + flex-shrink: 0; + -webkit-user-select: none; + user-select: none; + font-size: var(--avatar-font-size); + width: var(--avatar-size); + height: var(--avatar-size); +} + + .avatar__root,.avatar__image { + border-radius: var(--avatar-radius); +} + + .avatar__image { + object-fit: cover; + width: 100%; + height: 100%; +} + + .avatar__fallback { + border-radius: var(--avatar-radius); + line-height: 1; + text-transform: uppercase; + font-weight: var(--font-weights-medium); + font-size: var(--avatar-font-size); +} +} + + .avatar__root--size_lg { + --avatar-font-size: var(--font-sizes-md); + --avatar-size: var(--sizes-11); +} + + .avatar__fallback--size_lg :where(svg) { + width: var(--sizes-5\.5); + height: var(--sizes-5\.5); +} + + .avatar__root--shape_full { + --avatar-radius: var(--radii-full); +} + + .avatar__root--variant_subtle { + background: var(--colors-color-palette-subtle-bg); + color: var(--colors-color-palette-subtle-fg); +} + + .avatar__root--size_md { + --avatar-font-size: var(--font-sizes-md); + --avatar-size: var(--sizes-10); +} + + .avatar__fallback--size_md :where(svg) { + width: var(--sizes-5); + height: var(--sizes-5); +} + + .avatar__root--size_full { + --avatar-size: 100%; + --avatar-font-size: 100%; +} + + .avatar__root--size_2xs { + --avatar-font-size: var(--font-sizes-2xs); + --avatar-size: var(--sizes-6); +} + + .avatar__fallback--size_2xs :where(svg) { + width: var(--sizes-3); + height: var(--sizes-3); +} + + .avatar__root--size_xs { + --avatar-font-size: var(--font-sizes-xs); + --avatar-size: var(--sizes-8); +} + + .avatar__fallback--size_xs :where(svg) { + width: var(--sizes-4); + height: var(--sizes-4); +} + + .avatar__root--size_sm { + --avatar-font-size: var(--font-sizes-sm); + --avatar-size: var(--sizes-9); +} + + .avatar__fallback--size_sm :where(svg) { + width: var(--sizes-4\.5); + height: var(--sizes-4\.5); +} + + .avatar__root--size_xl { + --avatar-font-size: var(--font-sizes-lg); + --avatar-size: var(--sizes-12); +} + + .avatar__fallback--size_xl :where(svg) { + width: var(--sizes-6); + height: var(--sizes-6); +} + + .avatar__root--size_2xl { + --avatar-font-size: var(--font-sizes-xl); + --avatar-size: var(--sizes-16); +} + + .avatar__fallback--size_2xl :where(svg) { + width: var(--sizes-8); + height: var(--sizes-8); +} + + .avatar__root--variant_solid { + background: var(--colors-color-palette-solid-bg); + color: var(--colors-color-palette-solid-fg); +} + + .avatar__root--variant_surface { + background: var(--colors-color-palette-surface-bg); + border-width: 1px; + border-color: var(--colors-color-palette-surface-border); + color: var(--colors-color-palette-surface-fg); +} + + .avatar__root--variant_outline { + border-width: 1px; + border-color: var(--colors-color-palette-outline-border); + color: var(--colors-color-palette-outline-fg); +} + + .avatar__root--shape_rounded { + --avatar-radius: var(--radii-l3); +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/badge.css b/.storybook/styles-v2/recipes/badge.css new file mode 100644 index 0000000000..6c6715f4d6 --- /dev/null +++ b/.storybook/styles-v2/recipes/badge.css @@ -0,0 +1,98 @@ +@layer recipes { + @layer _base { + .badge { + border-radius: var(--radii-l2); + display: inline-flex; + align-items: center; + line-height: 1; + font-weight: var(--font-weights-medium); + font-variant-numeric: tabular-nums; + white-space: nowrap; + -webkit-user-select: none; + user-select: none; +} +} + + .badge--variant_subtle { + background: var(--colors-color-palette-subtle-bg); + color: var(--colors-color-palette-subtle-fg); +} + + .badge--size_md { + padding-inline: var(--spacing-2); + gap: var(--spacing-1); + font-size: var(--font-sizes-xs); + height: var(--sizes-5); +} + + .badge--size_md :where(svg) { + width: var(--sizes-3); + height: var(--sizes-3); +} + + .badge--variant_solid { + background: var(--colors-color-palette-solid-bg); + color: var(--colors-color-palette-solid-fg); +} + + .badge--variant_surface { + background: var(--colors-color-palette-surface-bg); + border-width: 1px; + border-color: var(--colors-color-palette-surface-border); + color: var(--colors-color-palette-surface-fg); +} + + .badge--variant_outline { + border-width: 1px; + border-color: var(--colors-color-palette-outline-border); + color: var(--colors-color-palette-outline-fg); +} + + .badge--size_sm { + padding-inline: var(--spacing-1\.5); + gap: var(--spacing-0\.5); + font-size: var(--font-sizes-xs); + height: var(--sizes-4\.5); +} + + .badge--size_sm :where(svg) { + width: var(--sizes-2\.5); + height: var(--sizes-2\.5); +} + + .badge--size_lg { + padding-inline: var(--spacing-2\.5); + gap: var(--spacing-1); + font-size: var(--font-sizes-xs); + height: var(--sizes-5\.5); +} + + .badge--size_lg :where(svg) { + width: var(--sizes-3\.5); + height: var(--sizes-3\.5); +} + + .badge--size_xl { + padding-inline: var(--spacing-2\.5); + gap: var(--spacing-1\.5); + font-size: var(--font-sizes-sm); + height: var(--sizes-6); +} + + .badge--size_xl :where(svg) { + width: var(--sizes-4); + height: var(--sizes-4); +} + + .badge--size_2xl { + padding-inline: var(--spacing-3); + gap: var(--spacing-1\.5); + font-size: var(--font-sizes-md); + height: var(--sizes-7); +} + + .badge--size_2xl :where(svg) { + width: var(--sizes-4\.5); + height: var(--sizes-4\.5); +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/breadcrumb.css b/.storybook/styles-v2/recipes/breadcrumb.css new file mode 100644 index 0000000000..516c0107ce --- /dev/null +++ b/.storybook/styles-v2/recipes/breadcrumb.css @@ -0,0 +1,111 @@ +@layer recipes.slots { + @layer _base { + .breadcrumb__list { + list-style: none; + align-items: center; + display: flex; + word-break: break-word; +} + + .breadcrumb__link { + border-radius: var(--radii-l1); + gap: var(--spacing-2); + outline: 0; + text-decoration: none; + transition: color; + align-items: center; + display: inline-flex; + --focus-ring-color: var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC)); +} + + .breadcrumb__link:is(:focus, [data-focus]) { + outline-width: var(--focus-ring-width, 2px); + outline-offset: var(--focus-ring-offset, 2px); + outline-style: var(--focus-ring-style, solid); + outline-color: var(--focus-ring-color); +} + + .breadcrumb__link :where(svg) { + width: 1em; + height: 1em; +} + + .breadcrumb__item { + display: inline-flex; + align-items: center; + color: var(--colors-fg-muted); +} + + .breadcrumb__item:last-child { + color: var(--colors-fg-default); +} + + .breadcrumb__separator { + color: var(--colors-fg-subtle); +} + + .breadcrumb__separator :where(svg) { + width: 1em; + height: 1em; +} + + :where([dir=rtl], :dir(rtl)) .breadcrumb__separator { + rotate: 180deg; +} + + .breadcrumb__ellipsis { + align-items: center; + color: var(--colors-fg-muted); + display: inline-flex; + justify-content: center; +} + + .breadcrumb__ellipsis :where(svg) { + width: 1em; + height: 1em; +} +} + + .breadcrumb__link--variant_plain { + color: var(--colors-fg-muted); +} + + .breadcrumb__link--variant_plain[aria-current=page],.breadcrumb__link--variant_plain:not(:disabled):hover { + color: var(--colors-fg-default); +} + + .breadcrumb__list--size_md { + gap: var(--spacing-1\.5); + font-size: var(--font-sizes-md); + line-height: 1.5rem; +} + + .breadcrumb__link--variant_underline { + text-decoration: underline; + text-decoration-thickness: 0.1em; + text-underline-offset: 0.125em; + text-decoration-color: var(--colors-fg-subtle); +} + + .breadcrumb__link--variant_underline:not(:disabled):hover { + text-decoration-color: var(--colors-fg-default); +} + + .breadcrumb__list--size_xs { + gap: var(--spacing-1); + font-size: var(--font-sizes-xs); + line-height: 1.125rem; +} + + .breadcrumb__list--size_sm { + gap: var(--spacing-1); + font-size: var(--font-sizes-sm); + line-height: 1.25rem; +} + + .breadcrumb__list--size_lg { + gap: var(--spacing-2); + font-size: var(--font-sizes-lg); + line-height: 1.75rem; +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/button.css b/.storybook/styles-v2/recipes/button.css new file mode 100644 index 0000000000..a2c25b04ea --- /dev/null +++ b/.storybook/styles-v2/recipes/button.css @@ -0,0 +1,215 @@ +@layer recipes { + @layer _base { + .button { + border-radius: var(--radii-l2); + gap: var(--spacing-2); + outline: 0; + transition-property: background-color, border-color, color, box-shadow; + transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1)); + transition-duration: var(--transition-duration, 150ms); + align-items: center; + appearance: none; + -webkit-appearance: none; + cursor: pointer; + display: inline-flex; + flex-shrink: 0; + font-weight: var(--font-weights-semibold); + isolation: isolate; + justify-content: center; + position: relative; + --transition-prop: background-color, border-color, color, box-shadow; + -webkit-user-select: none; + user-select: none; + vertical-align: middle; + white-space: nowrap; + --focus-ring-color: var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC)); +} + + .button:is(:focus-visible, [data-focus-visible]) { + outline-width: var(--focus-ring-width, 2px); + outline-offset: var(--focus-ring-offset, 2px); + outline-style: var(--focus-ring-style, solid); + outline-color: var(--focus-ring-color); +} + + .button :where(svg) { + flex-shrink: 0; +} + + .button:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) { + cursor: not-allowed; + opacity: 0.67; + filter: grayscale(100%); +} +} + + .button--variant_plain { + color: var(--colors-color-palette-plain-fg); +} + + .button--variant_plain:is([data-state=on]) { + background: var(--colors-color-palette-plain-bg-active); +} + + .button--variant_plain:not(:disabled):hover { + background: var(--colors-color-palette-plain-bg-hover); +} + + .button--variant_plain:not(:disabled):active { + background: var(--colors-color-palette-plain-bg-active); +} + + .button--size_md { + padding-inline: var(--spacing-3\.5); + font-size: var(--font-sizes-sm); + line-height: 1.25rem; + height: var(--sizes-10); + min-width: var(--sizes-10); +} + + .button--size_md :where(svg) { + width: var(--sizes-5); + height: var(--sizes-5); +} + + .button--variant_solid { + background: var(--colors-color-palette-solid-bg); + color: var(--colors-color-palette-solid-fg); +} + + .button--variant_solid:not(:disabled):hover { + background: var(--colors-color-palette-solid-bg-hover); +} + + .button--size_sm { + padding-inline: var(--spacing-3); + font-size: var(--font-sizes-sm); + line-height: 1.25rem; + height: var(--sizes-9); + min-width: var(--sizes-9); +} + + .button--size_sm :where(svg) { + width: var(--sizes-4); + height: var(--sizes-4); +} + + .button--size_xs { + padding-inline: var(--spacing-2\.5); + font-size: var(--font-sizes-sm); + line-height: 1.25rem; + height: var(--sizes-8); + min-width: var(--sizes-8); +} + + .button--size_xs :where(svg) { + width: var(--sizes-4); + height: var(--sizes-4); +} + + .button--variant_outline { + border-width: 1px; + border-color: var(--colors-color-palette-outline-border); + color: var(--colors-color-palette-outline-fg); +} + + .button--variant_outline:is([data-state=on]) { + background: var(--colors-color-palette-outline-bg-active); +} + + .button--variant_outline:not(:disabled):hover { + background: var(--colors-color-palette-outline-bg-hover); +} + + .button--variant_outline:not(:disabled):active { + background: var(--colors-color-palette-outline-bg-active); +} + + .button--variant_surface { + background: var(--colors-color-palette-surface-bg); + border-width: 1px; + border-color: var(--colors-color-palette-surface-border); + color: var(--colors-color-palette-surface-fg); +} + + .button--variant_surface:is([data-state=on]) { + background: var(--colors-color-palette-surface-bg-active); +} + + .button--variant_surface:not(:disabled):hover { + border-color: var(--colors-color-palette-surface-border-hover); +} + + .button--variant_surface:not(:disabled):active { + background: var(--colors-color-palette-surface-bg-active); +} + + .button--variant_subtle { + background: var(--colors-color-palette-subtle-bg); + color: var(--colors-color-palette-subtle-fg); +} + + .button--variant_subtle:is([data-state=on]) { + background: var(--colors-color-palette-subtle-bg-active); +} + + .button--variant_subtle:not(:disabled):hover { + background: var(--colors-color-palette-subtle-bg-hover); +} + + .button--variant_subtle:not(:disabled):active { + background: var(--colors-color-palette-subtle-bg-active); +} + + .button--size_lg { + padding-inline: var(--spacing-4); + font-size: var(--font-sizes-md); + line-height: 1.5rem; + height: var(--sizes-11); + min-width: var(--sizes-11); +} + + .button--size_lg :where(svg) { + width: var(--sizes-5); + height: var(--sizes-5); +} + + .button--size_xl { + padding-inline: var(--spacing-4\.5); + font-size: var(--font-sizes-md); + line-height: 1.5rem; + height: var(--sizes-12); + min-width: var(--sizes-12); +} + + .button--size_xl :where(svg) { + width: var(--sizes-5\.5); + height: var(--sizes-5\.5); +} + + .button--size_2xs { + padding-inline: var(--spacing-2); + font-size: var(--font-sizes-xs); + line-height: 1.125rem; + height: var(--sizes-6); + min-width: var(--sizes-6); +} + + .button--size_2xs :where(svg) { + width: var(--sizes-3\.5); + height: var(--sizes-3\.5); +} + + .button--size_2xl { + padding-inline: var(--spacing-6); + font-size: var(--font-sizes-xl); + line-height: 1.875rem; + height: var(--sizes-16); + min-width: var(--sizes-16); +} + + .button--size_2xl :where(svg) { + width: var(--sizes-6); + height: var(--sizes-6); +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/card.css b/.storybook/styles-v2/recipes/card.css new file mode 100644 index 0000000000..87f21ddd38 --- /dev/null +++ b/.storybook/styles-v2/recipes/card.css @@ -0,0 +1,62 @@ +@layer recipes.slots { + @layer _base { + .card__root { + border-radius: var(--radii-l3); + overflow: hidden; + position: relative; +} + + .card__root,.card__header { + display: flex; + flex-direction: column; +} + + .card__header { + padding: var(--spacing-6); + gap: var(--spacing-1); +} + + .card__body { + flex: 1 1 0%; + flex-direction: column; +} + + .card__body,.card__footer { + padding-inline: var(--spacing-6); + display: flex; + padding-bottom: var(--spacing-6); +} + + .card__footer { + gap: var(--spacing-3); + justify-content: flex-end; + padding-top: var(--spacing-2); +} + + .card__title { + font-size: var(--font-sizes-lg); + line-height: 1.75rem; + font-weight: var(--font-weights-semibold); +} + + .card__description { + color: var(--colors-fg-muted); + font-size: var(--font-sizes-sm); + line-height: 1.25rem; +} +} + + .card__root--variant_outline { + background: var(--colors-gray-surface-bg); + border-width: 1px; +} + + .card__root--variant_elevated { + background: var(--colors-gray-surface-bg); + box-shadow: var(--shadows-lg); +} + + .card__root--variant_subtle { + background: var(--colors-gray-subtle-bg); +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/carousel.css b/.storybook/styles-v2/recipes/carousel.css new file mode 100644 index 0000000000..09469a5e77 --- /dev/null +++ b/.storybook/styles-v2/recipes/carousel.css @@ -0,0 +1,80 @@ +@layer recipes.slots { + @layer _base { + .carousel__root { + gap: var(--spacing-2); + position: relative; + display: flex; + flex-direction: column; +} + + .carousel__root[data-orientation=vertical] { + flex-direction: row; +} + + .carousel__itemGroup { + flex: 1 1 0%; +} + + .carousel__control { + border-radius: var(--radii-l2); + align-items: center; + justify-content: space-between; + display: flex; +} + + .carousel__control[data-orientation=vertical] { + flex-direction: column; +} + + .carousel__indicatorGroup { + display: flex; +} + + .carousel__indicatorGroup[data-orientation=vertical] { + flex-direction: column; +} + + .carousel__indicator { + background: var(--colors-gray-subtle-bg); + border-radius: var(--radii-full); + cursor: pointer; + --focus-ring-color: var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC)); +} + + .carousel__indicator:is(:focus-visible, [data-focus-visible]) { + outline-width: var(--focus-ring-width, 2px); + outline-offset: var(--focus-ring-offset, 2px); + outline-style: var(--focus-ring-style, solid); + outline-color: var(--focus-ring-color); +} + + .carousel__indicator:is([aria-current=true], [data-current]) { + background: var(--colors-color-palette-solid-bg); +} +} + + .carousel__control--size_md,.carousel__indicatorGroup--size_md { + gap: var(--spacing-3); +} + + .carousel__indicator--size_md { + width: var(--sizes-2\.5); + height: var(--sizes-2\.5); +} + + .carousel__control--inline_true { + padding: var(--spacing-1); + position: absolute; + transform: translateX(-50%); + bottom: var(--spacing-3); + left: 50%; +} + + :root .carousel__control--inline_true,.light .carousel__control--inline_true { + background: var(--colors-white-a11); +} + + .dark .carousel__control--inline_true { + background: var(--colors-black-a11); +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/checkbox.css b/.storybook/styles-v2/recipes/checkbox.css new file mode 100644 index 0000000000..9561d10ebe --- /dev/null +++ b/.storybook/styles-v2/recipes/checkbox.css @@ -0,0 +1,144 @@ +@layer recipes.slots { + @layer _base { + .checkbox__root { + gap: var(--spacing-2); + display: inline-flex; + align-items: center; + vertical-align: top; + position: relative; +} + + .checkbox__root:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) { + cursor: not-allowed; + opacity: 0.67; + filter: grayscale(100%); +} + + .checkbox__label { + font-weight: var(--font-weights-medium); + -webkit-user-select: none; + user-select: none; +} + + .checkbox__control { + border-width: 1px; + border-color: transparent; + border-radius: var(--radii-l1); + display: inline-flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + cursor: pointer; + --focus-ring-color: var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC)); +} + + .checkbox__control:is(:focus-visible, [data-focus-visible]) { + outline-width: var(--focus-ring-width, 2px); + outline-offset: var(--focus-ring-offset, 2px); + outline-style: var(--focus-ring-style, solid); + outline-color: var(--focus-ring-color); +} + + .checkbox__control :where(svg) { + width: var(--sizes-full); + height: var(--sizes-full); +} +} + + .checkbox__control--variant_solid { + border-color: var(--colors-border); +} + + .checkbox__control--variant_solid:is(:checked, [data-checked], [data-state=checked], [aria-checked=true], [data-state=indeterminate]) { + background: var(--colors-color-palette-solid-bg); + border-color: var(--colors-color-palette-solid-bg); + color: var(--colors-color-palette-solid-fg); +} + + .checkbox__control--variant_solid:is(:user-invalid, [data-invalid], [aria-invalid=true]) { + background: var(--colors-error); +} + + .checkbox__root--size_md { + gap: var(--spacing-3); +} + + .checkbox__label--size_md { + font-size: var(--font-sizes-md); + line-height: 1.5rem; +} + + .checkbox__control--size_md { + width: var(--sizes-5); + height: var(--sizes-5); +} + + .checkbox__control--size_md :where(svg) { + width: var(--sizes-3\.5); + height: var(--sizes-3\.5); +} + + .checkbox__root--size_sm { + gap: var(--spacing-2); +} + + .checkbox__label--size_sm { + font-size: var(--font-sizes-sm); + line-height: 1.25rem; +} + + .checkbox__control--size_sm { + width: var(--sizes-4\.5); + height: var(--sizes-4\.5); +} + + .checkbox__control--size_sm :where(svg) { + width: var(--sizes-3); + height: var(--sizes-3); +} + + .checkbox__root--size_lg { + gap: var(--spacing-3); +} + + .checkbox__label--size_lg { + font-size: var(--font-sizes-lg); + line-height: 1.75rem; +} + + .checkbox__control--size_lg { + width: var(--sizes-5\.5); + height: var(--sizes-5\.5); +} + + .checkbox__control--size_lg :where(svg) { + width: var(--sizes-4); + height: var(--sizes-4); +} + + .checkbox__control--variant_surface { + background: var(--colors-color-palette-surface-bg); + border-width: 1px; + border-color: var(--colors-color-palette-surface-border); + color: var(--colors-color-palette-surface-fg); +} + + .checkbox__control--variant_subtle { + background: var(--colors-color-palette-subtle-bg); + color: var(--colors-color-palette-subtle-fg); +} + + .checkbox__control--variant_outline { + border-width: 1px; + border-color: var(--colors-color-palette-outline-border); + color: var(--colors-color-palette-outline-fg); +} + + .checkbox__control--variant_outline:is(:checked, [data-checked], [data-state=checked], [aria-checked=true], [data-state=indeterminate]) { + border-color: var(--colors-color-palette-solid-bg); +} + + .checkbox__control--variant_plain { + color: var(--colors-color-palette-plain-fg); +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/code.css b/.storybook/styles-v2/recipes/code.css new file mode 100644 index 0000000000..0e4af0292d --- /dev/null +++ b/.storybook/styles-v2/recipes/code.css @@ -0,0 +1,75 @@ +@layer recipes { + @layer _base { + .code { + border-radius: var(--radii-l2); + gap: var(--spacing-1); + align-items: center; + display: inline-flex; + font-variant-numeric: tabular-nums; + font-weight: var(--font-weights-medium); + font-family: code; + line-height: 1; +} +} + + .code--size_md { + padding-inline: var(--spacing-1); + font-size: var(--font-sizes-sm); + line-height: 1.25rem; + height: var(--sizes-5); + min-width: var(--sizes-5); +} + + .code--variant_subtle { + background: var(--colors-color-palette-subtle-bg); + color: var(--colors-color-palette-subtle-fg); +} + + .code--variant_solid { + background: var(--colors-color-palette-solid-bg); + color: var(--colors-color-palette-solid-fg); +} + + .code--variant_outline { + border-width: 1px; + border-color: var(--colors-color-palette-outline-border); + color: var(--colors-color-palette-outline-fg); +} + + .code--variant_surface { + background: var(--colors-color-palette-surface-bg); + border-width: 1px; + border-color: var(--colors-color-palette-surface-border); + color: var(--colors-color-palette-surface-fg); +} + + .code--variant_plain { + color: var(--colors-color-palette-plain-fg); +} + + .code--size_sm { + font-size: var(--font-sizes-xs); + line-height: 1.125rem; + height: var(--sizes-4\.5); + min-width: var(--sizes-4\.5); +} + + .code--size_sm,.code--size_lg { + padding-inline: var(--spacing-1); +} + + .code--size_lg { + font-size: var(--font-sizes-sm); + line-height: 1.25rem; + height: var(--sizes-5\.5); + min-width: var(--sizes-5\.5); +} + + .code--size_xl { + padding-inline: var(--spacing-1); + font-size: var(--font-sizes-md); + line-height: 1.5rem; + height: var(--sizes-6); + min-width: var(--sizes-6); +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/combobox.css b/.storybook/styles-v2/recipes/combobox.css new file mode 100644 index 0000000000..5b152b3b1f --- /dev/null +++ b/.storybook/styles-v2/recipes/combobox.css @@ -0,0 +1,491 @@ +@layer recipes.slots { + @layer _base { + .combobox__root { + gap: var(--spacing-1\.5); + display: flex; + flex-direction: column; + width: var(--sizes-full); +} + + .combobox__clearTrigger { + color: var(--colors-fg-muted); +} + + .combobox__content { + background: var(--colors-gray-surface-bg); + border-radius: var(--radii-l2); + outline: 0; + box-shadow: var(--shadows-md); + display: flex; + flex-direction: column; + z-index: var(--z-index-dropdown); + max-height: min(var(--available-height), var(--sizes-96)); + min-width: max(var(--reference-width), var(--sizes-40)); + overflow-y: auto; +} + + .combobox__content:is([open], [data-open], [data-state="open"], :popover-open) { + transform-origin: var(--transform-origin); +} + + .combobox__content:is([open], [data-open], [data-state="open"], :popover-open)[data-placement^=top] { + animation-name: slide-from-bottom, fade-in; +} + + .combobox__content:is([open], [data-open], [data-state="open"], :popover-open)[data-placement^=bottom] { + animation-name: slide-from-top, fade-in; +} + + .combobox__content:is([open], [data-open], [data-state="open"], :popover-open)[data-placement^=left] { + animation-name: slide-from-right, fade-in; +} + + .combobox__content:is([open], [data-open], [data-state="open"], :popover-open)[data-placement^=right] { + animation-name: slide-from-left, fade-in; +} + + .combobox__content:is([open], [data-open], [data-state="open"], :popover-open) { + animation-duration: var(--durations-slow); +} + + .combobox__content:is([closed], [data-closed], [data-state="closed"]) { + transform-origin: var(--transform-origin); +} + + .combobox__content:is([closed], [data-closed], [data-state="closed"])[data-placement^=top] { + animation-name: slide-to-bottom, fade-out; +} + + .combobox__content:is([closed], [data-closed], [data-state="closed"])[data-placement^=bottom] { + animation-name: slide-to-top, fade-out; +} + + .combobox__content:is([closed], [data-closed], [data-state="closed"])[data-placement^=left] { + animation-name: slide-to-right, fade-out; +} + + .combobox__content:is([closed], [data-closed], [data-state="closed"])[data-placement^=right] { + animation-name: slide-to-left, fade-out; +} + + .combobox__content:is([closed], [data-closed], [data-state="closed"]) { + animation-duration: var(--durations-fastest); +} + + .combobox__content[data-empty]:not(:has([data-scope=combobox][data-part=empty])) { + opacity: 0; +} + + .combobox__control,.combobox__input { + position: relative; +} + + .combobox__input { + border-radius: var(--radii-l2); + outline: 0; + transition-property: var(--transition-prop, color, background-color, border-color, outline-color, text-decoration-color, fill, stroke); + transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1)); + transition-duration: var(--transition-duration, 150ms); + overflow: hidden; + appearance: none; + -webkit-appearance: none; + text-align: start; + text-overflow: ellipsis; + white-space: nowrap; + height: var(--input-height); + min-height: var(--input-height); + min-width: var(--input-height); + width: 100%; +} + + .combobox__input:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) { + cursor: not-allowed; + opacity: 0.67; + filter: grayscale(100%); +} + + .combobox__item { + border-radius: var(--radii-l1); + align-items: center; + cursor: pointer; + display: flex; + justify-content: space-between; +} + + .combobox__item[data-highlighted] { + background: var(--colors-gray-surface-bg-hover); +} + + .combobox__item:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) { + cursor: not-allowed; + opacity: 0.67; + filter: grayscale(100%); +} + + .combobox__item:not(:disabled):hover { + background: var(--colors-gray-surface-bg-hover); +} + + .combobox__itemGroup,.combobox__itemGroupLabel { + display: flex; + flex-direction: column; +} + + .combobox__itemGroupLabel { + gap: 1px; + align-items: flex-start; + color: var(--colors-fg-subtle); + font-weight: var(--font-weights-medium); + justify-content: center; +} + + .combobox__itemGroupLabel::after { + background: var(--colors-border); + content: ""; + width: 100%; + height: 1px; +} + + .combobox__itemIndicator { + color: var(--colors-color-palette-plain-fg); +} + + .combobox__label { + font-size: var(--font-sizes-sm); + line-height: 1.25rem; + font-weight: var(--font-weights-medium); +} + + .combobox__trigger { + color: var(--colors-fg-subtle); +} + + .combobox__empty { + color: var(--colors-fg-subtle); +} + + .combobox__empty,.combobox__indicatorGroup { + display: flex; + align-items: center; +} + + .combobox__indicatorGroup { + gap: var(--spacing-1); + justify-content: center; + position: absolute; + inset-inline-end: var(--spacing-0); + top: var(--spacing-0); + bottom: var(--spacing-0); +} +} + + .combobox__content--size_md { + padding: var(--spacing-1); + gap: var(--spacing-0\.5); +} + + .combobox__content--size_md,.combobox__input--size_md { + font-size: var(--font-sizes-md); + line-height: 1.5rem; +} + + .combobox__input--size_md { + --input-height: var(--sizes-10); + padding-inline: var(--spacing-3); + padding-inline-end: var(--spacing-14); +} + + .combobox__item--size_md { + padding-inline: var(--spacing-2); + gap: var(--spacing-2); + min-height: var(--sizes-10); +} + + .combobox__item--size_md :where(svg) { + width: var(--sizes-4); + height: var(--sizes-4); +} + + .combobox__itemGroup--size_md { + gap: var(--spacing-0\.5); +} + + .combobox__itemGroupLabel--size_md { + padding-inline: var(--spacing-2); + height: var(--sizes-10); +} + + .combobox__empty--size_md { + padding-inline: var(--spacing-2); + min-height: var(--sizes-10); +} + + .combobox__indicatorGroup--size_md { + padding-inline: var(--spacing-3); +} + + .combobox__indicatorGroup--size_md :where(svg) { + width: var(--sizes-4); + height: var(--sizes-4); +} + + .combobox__input--variant_outline { + border-width: 1px; + border-color: var(--colors-gray-outline-border); + --focus-ring-color: var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC)); +} + + .combobox__input--variant_outline:is(:focus-visible, [data-focus-visible]) { + outline-offset: 0px; + outline-width: var(--focus-ring-width, 1px); + outline-color: var(--focus-ring-color); + outline-style: var(--focus-ring-style, solid); + border-color: var(--focus-ring-color); +} + + .combobox__input--variant_outline:is(:user-invalid, [data-invalid], [aria-invalid=true]) { + border-color: var(--colors-error); + --focus-ring-color-prop: var(--colors-error); +} + + .combobox__input--variant_surface { + background: var(--colors-gray-surface-bg); + border-width: 1px; + border-color: var(--colors-gray-surface-border); + --focus-ring-color: var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC)); +} + + .combobox__input--variant_surface:is(:focus-visible, [data-focus-visible]) { + outline-offset: 0px; + outline-width: var(--focus-ring-width, 1px); + outline-color: var(--focus-ring-color); + outline-style: var(--focus-ring-style, solid); + border-color: var(--focus-ring-color); +} + + .combobox__input--variant_surface:is(:user-invalid, [data-invalid], [aria-invalid=true]) { + border-color: var(--colors-error); + --focus-ring-color-prop: var(--colors-error); +} + + .combobox__input--variant_subtle { + background: var(--colors-gray-subtle-bg); + border-width: 1px; + border-color: transparent; + color: var(--colors-gray-subtle-fg); + --focus-ring-color: var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC)); +} + + .combobox__input--variant_subtle:is(:focus-visible, [data-focus-visible]) { + outline-offset: 0px; + outline-width: var(--focus-ring-width, 1px); + outline-color: var(--focus-ring-color); + outline-style: var(--focus-ring-style, solid); + border-color: var(--focus-ring-color); +} + + .combobox__input--variant_subtle:is(:user-invalid, [data-invalid], [aria-invalid=true]) { + border-color: var(--colors-error); + --focus-ring-color-prop: var(--colors-error); +} + + .combobox__content--size_xs { + padding: var(--spacing-1); + gap: var(--spacing-0\.5); +} + + .combobox__content--size_xs,.combobox__input--size_xs { + font-size: var(--font-sizes-sm); + line-height: 1.25rem; +} + + .combobox__input--size_xs { + --input-height: var(--sizes-8); + padding-inline: var(--spacing-2); + padding-inline-end: var(--spacing-12); +} + + .combobox__item--size_xs { + padding-inline: var(--spacing-1); + gap: var(--spacing-2); + min-height: var(--sizes-8); +} + + .combobox__item--size_xs :where(svg) { + width: var(--sizes-3\.5); + height: var(--sizes-3\.5); +} + + .combobox__itemGroup--size_xs { + gap: var(--spacing-0\.5); +} + + .combobox__itemGroupLabel--size_xs { + padding-inline: var(--spacing-1); + height: var(--sizes-8); +} + + .combobox__empty--size_xs { + padding-inline: var(--spacing-1); + min-height: var(--sizes-8); +} + + .combobox__indicatorGroup--size_xs { + padding-inline: var(--spacing-2); +} + + .combobox__indicatorGroup--size_xs :where(svg) { + width: var(--sizes-3\.5); + height: var(--sizes-3\.5); +} + + .combobox__content--size_sm { + padding: var(--spacing-1); + gap: var(--spacing-0\.5); +} + + .combobox__content--size_sm,.combobox__input--size_sm { + font-size: var(--font-sizes-sm); + line-height: 1.25rem; +} + + .combobox__input--size_sm { + --input-height: var(--sizes-9); + padding-inline: var(--spacing-2\.5); + padding-inline-end: var(--spacing-14); +} + + .combobox__item--size_sm { + padding-inline: var(--spacing-1\.5); + gap: var(--spacing-2); + min-height: var(--sizes-9); +} + + .combobox__item--size_sm :where(svg) { + width: var(--sizes-4); + height: var(--sizes-4); +} + + .combobox__itemGroup--size_sm { + gap: var(--spacing-0\.5); +} + + .combobox__itemGroupLabel--size_sm { + padding-inline: var(--spacing-1\.5); + height: var(--sizes-9); +} + + .combobox__empty--size_sm { + padding-inline: var(--spacing-1\.5); + min-height: var(--sizes-9); +} + + .combobox__indicatorGroup--size_sm { + padding-inline: var(--spacing-2\.5); +} + + .combobox__indicatorGroup--size_sm :where(svg) { + width: var(--sizes-4); + height: var(--sizes-4); +} + + .combobox__content--size_lg { + padding: var(--spacing-1); + gap: var(--spacing-0\.5); +} + + .combobox__content--size_lg,.combobox__input--size_lg { + font-size: var(--font-sizes-md); + line-height: 1.5rem; +} + + .combobox__input--size_lg { + --input-height: var(--sizes-11); + padding-inline: var(--spacing-3\.5); + padding-inline-end: var(--spacing-16); +} + + .combobox__item--size_lg { + padding-inline: var(--spacing-2\.5); + gap: var(--spacing-2); + min-height: var(--sizes-11); +} + + .combobox__item--size_lg :where(svg) { + width: var(--sizes-4\.5); + height: var(--sizes-4\.5); +} + + .combobox__itemGroup--size_lg { + gap: var(--spacing-0\.5); +} + + .combobox__itemGroupLabel--size_lg { + padding-inline: var(--spacing-2\.5); + height: var(--sizes-11); +} + + .combobox__empty--size_lg { + padding-inline: var(--spacing-2\.5); + min-height: var(--sizes-11); +} + + .combobox__indicatorGroup--size_lg { + padding-inline: var(--spacing-3\.5); +} + + .combobox__indicatorGroup--size_lg :where(svg) { + width: var(--sizes-4\.5); + height: var(--sizes-4\.5); +} + + .combobox__content--size_xl { + padding: var(--spacing-1); + gap: var(--spacing-1); +} + + .combobox__content--size_xl,.combobox__input--size_xl { + font-size: var(--font-sizes-lg); + line-height: 1.75rem; +} + + .combobox__input--size_xl { + --input-height: var(--sizes-12); + padding-inline: var(--spacing-4); + padding-inline-end: var(--spacing-16); +} + + .combobox__item--size_xl { + padding-inline: var(--spacing-3); + gap: var(--spacing-3); + min-height: var(--sizes-12); +} + + .combobox__item--size_xl :where(svg) { + width: var(--sizes-5); + height: var(--sizes-5); +} + + .combobox__itemGroup--size_xl { + gap: var(--spacing-1); +} + + .combobox__itemGroupLabel--size_xl { + padding-inline: var(--spacing-3); + height: var(--sizes-12); +} + + .combobox__empty--size_xl { + padding-inline: var(--spacing-3); + min-height: var(--sizes-12); +} + + .combobox__indicatorGroup--size_xl { + padding-inline: var(--spacing-4); +} + + .combobox__indicatorGroup--size_xl :where(svg) { + width: var(--sizes-5); + height: var(--sizes-5); +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/dialog.css b/.storybook/styles-v2/recipes/dialog.css new file mode 100644 index 0000000000..7ea2a1841f --- /dev/null +++ b/.storybook/styles-v2/recipes/dialog.css @@ -0,0 +1,268 @@ +@layer recipes.slots { + @layer _base { + .dialog__backdrop { + background: var(--colors-black-a7); + position: fixed; + z-index: var(--z-index); + height: 100dvh; + left: var(--spacing-0); + top: var(--spacing-0); + width: 100dvw; +} + + .dialog__backdrop:is([open], [data-open], [data-state="open"], :popover-open) { + animation-name: fade-in; + animation-timing-function: emphasized-in; + animation-duration: var(--durations-normal); +} + + .dialog__backdrop:is([closed], [data-closed], [data-state="closed"]) { + animation-name: fade-out; + animation-timing-function: emphasized-out; + animation-duration: var(--durations-fast); +} + + .dialog__positioner { + justify-content: center; + position: fixed; + height: 100dvh; + left: var(--spacing-0); + overscroll-behavior-y: none; + top: var(--spacing-0); + width: 100dvw; +} + + .dialog__positioner,.dialog__content { + --dialog-z-index: var(--z-index-modal); + display: flex; + z-index: calc(var(--dialog-z-index) + var(--layer-index, 0)); +} + + .dialog__content { + background: var(--colors-gray-surface-bg); + border-radius: var(--radii-l3); + margin-block: var(--dialog-margin, var(--dialog-base-margin)); + outline: 0; + padding-block: var(--spacing-4); + gap: var(--spacing-4); + box-shadow: var(--shadows-lg); + flex-direction: column; + position: relative; + font-size: var(--font-sizes-sm); + line-height: 1.25rem; + width: 100%; +} + + .dialog__content:is([open], [data-open], [data-state="open"], :popover-open) { + animation-duration: var(--durations-slowest); +} + + .dialog__content:is([closed], [data-closed], [data-state="closed"]) { + animation-duration: var(--durations-normal); +} + + @media screen and (min-width: 48rem) { + .dialog__content { + padding-block: var(--spacing-6); + gap: var(--spacing-6); +} +} + + .dialog__title { + font-weight: var(--font-weights-semibold); + font-size: var(--font-sizes-lg); + line-height: 1.75rem; +} + + .dialog__description { + color: var(--colors-fg-muted); + font-size: var(--font-sizes-sm); + line-height: 1.25rem; +} + + .dialog__closeTrigger { + position: absolute; + inset-inline-end: var(--spacing-3); + top: var(--spacing-3); +} + + .dialog__header { + gap: var(--spacing-0\.5); + padding-inline: var(--spacing-4); + flex: 0; + display: flex; + flex-direction: column; +} + + @media screen and (min-width: 48rem) { + .dialog__header { + padding-inline: var(--spacing-6); +} +} + + .dialog__body { + flex: 1 1 0%; + padding-inline: var(--spacing-4); + display: flex; + flex-direction: column; + align-items: flex-start; +} + + @media screen and (min-width: 48rem) { + .dialog__body { + padding-inline: var(--spacing-6); +} +} + + .dialog__footer { + flex: 0; + gap: var(--spacing-3); + padding-inline: var(--spacing-4); + display: flex; + align-items: center; + justify-content: flex-end; +} + + @media screen and (min-width: 48rem) { + .dialog__footer { + padding-inline: var(--spacing-6); +} +} +} + + .dialog__content--size_md { + max-width: var(--sizes-md); +} + + .dialog__positioner--scrollBehavior_outside { + overflow: auto; + pointer-events: auto; +} + + .dialog__positioner--placement_center { + align-items: center; +} + + .dialog__content--placement_center { + --dialog-base-margin: auto; + margin-inline: auto; +} + + .dialog__content--motionPreset_scale:is([open], [data-open], [data-state="open"], :popover-open) { + animation-name: scale-in, fade-in; +} + + .dialog__content--motionPreset_scale:is([closed], [data-closed], [data-state="closed"]) { + animation-name: scale-out, fade-out; +} + + .dialog__positioner--size_cover { + padding: var(--spacing-8); +} + + .dialog__content--size_cover { + --dialog-margin: 0; + width: 100%; + height: 100%; +} + + .dialog__content--size_full { + --dialog-margin: 0; + border-radius: 0; + max-width: 100dvw; + min-height: 100dvh; +} + + .dialog__positioner--scrollBehavior_inside { + overflow: hidden; +} + + .dialog__content--scrollBehavior_inside { + max-height: calc(100% - 7.5rem); +} + + .dialog__body--scrollBehavior_inside { + overflow: auto; +} + + .dialog__content--size_sm { + max-width: var(--sizes-sm); +} + + @media screen and (max-width: 47.9975rem) { + .mdDown\:dialog__content--size_full { + --dialog-margin: 0; + border-radius: 0; + max-width: 100dvw; + min-height: 100dvh; +} +} + + @media screen and (min-width: 48rem) { + .md\:dialog__content--size_lg { + max-width: var(--sizes-lg); +} +} + + .dialog__content--motionPreset_slide-in-bottom:is([open], [data-open], [data-state="open"], :popover-open) { + animation-name: slide-from-bottom, fade-in; +} + + .dialog__content--motionPreset_slide-in-bottom:is([closed], [data-closed], [data-state="closed"]) { + animation-name: slide-to-bottom, fade-out; +} + + .dialog__content--motionPreset_slide-in-top:is([open], [data-open], [data-state="open"], :popover-open) { + animation-name: slide-from-top, fade-in; +} + + .dialog__content--motionPreset_slide-in-top:is([closed], [data-closed], [data-state="closed"]) { + animation-name: slide-to-top, fade-out; +} + + .dialog__content--motionPreset_slide-in-left:is([open], [data-open], [data-state="open"], :popover-open) { + animation-name: slide-from-left, fade-in; +} + + .dialog__content--motionPreset_slide-in-left:is([closed], [data-closed], [data-state="closed"]) { + animation-name: slide-to-left, fade-out; +} + + .dialog__content--motionPreset_slide-in-right:is([open], [data-open], [data-state="open"], :popover-open) { + animation-name: slide-from-right, fade-in; +} + + .dialog__content--motionPreset_slide-in-right:is([closed], [data-closed], [data-state="closed"]) { + animation-name: slide-to-right, fade-out; +} + + .dialog__content--size_xs { + max-width: var(--sizes-xs); +} + + .dialog__content--size_lg { + max-width: var(--sizes-lg); +} + + .dialog__content--size_xl { + max-width: var(--sizes-xl); +} + + .dialog__positioner--placement_top { + align-items: flex-start; +} + + .dialog__content--placement_top { + --dialog-base-margin: var(--spacing-16); + margin-inline: auto; +} + + .dialog__positioner--placement_bottom { + align-items: flex-end; +} + + .dialog__content--placement_bottom { + --dialog-base-margin: var(--spacing-16); + margin-inline: auto; +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/drawer.css b/.storybook/styles-v2/recipes/drawer.css new file mode 100644 index 0000000000..83558e9120 --- /dev/null +++ b/.storybook/styles-v2/recipes/drawer.css @@ -0,0 +1,228 @@ +@layer recipes.slots { + @layer _base { + .drawer__backdrop { + background: var(--colors-black-a7); + position: fixed; + inset-inline-start: var(--spacing-0); + z-index: var(--z-index-overlay); + top: var(--spacing-0); + width: 100vw; + height: 100dvh; +} + + .drawer__backdrop:is([open], [data-open], [data-state="open"], :popover-open) { + animation-name: fade-in; + animation-timing-function: emphasized-in; + animation-duration: var(--durations-slow); +} + + .drawer__backdrop:is([closed], [data-closed], [data-state="closed"]) { + animation-name: fade-out; + animation-timing-function: emphasized-out; + animation-duration: var(--durations-normal); +} + + .drawer__positioner { + position: fixed; + inset-inline-start: var(--spacing-0); + width: 100vw; + height: 100dvh; + top: var(--spacing-0); + overscroll-behavior-y: none; +} + + .drawer__positioner,.drawer__content { + display: flex; + z-index: var(--z-index-modal); +} + + .drawer__content { + background: var(--colors-gray-surface-bg); + outline: 0; + flex-direction: column; + position: relative; + color: inherit; + box-shadow: var(--shadows-lg); + width: 100%; + max-height: 100dvh; +} + + .drawer__content:is([open], [data-open], [data-state="open"], :popover-open) { + animation-duration: var(--durations-slowest); + animation-timing-function: cubic-bezier(0.05, 0.7, 0.1, 1.0); +} + + .drawer__content:is([closed], [data-closed], [data-state="closed"]) { + animation-duration: var(--durations-normal); + animation-timing-function: cubic-bezier(0.3, 0.0, 0.8, 0.15); +} + + .drawer__title { + color: var(--colors-fg-default); + font-weight: var(--font-weights-semibold); + font-size: var(--font-sizes-xl); + line-height: 1.875rem; +} + + .drawer__description { + color: var(--colors-fg-muted); + font-size: var(--font-sizes-sm); + line-height: 1.25rem; +} + + .drawer__closeTrigger { + position: absolute; + inset-inline-end: var(--spacing-3); + top: var(--spacing-3); +} + + .drawer__header { + gap: var(--spacing-1); + padding-inline: var(--spacing-4); + flex: 0; + display: flex; + flex-direction: column; + padding-top: var(--spacing-4); + padding-bottom: var(--spacing-4); +} + + @media screen and (min-width: 48rem) { + .drawer__header { + padding-inline: var(--spacing-6); + padding-top: var(--spacing-6); +} +} + + .drawer__body { + padding: var(--spacing-4); + flex: 1 1 0%; + overflow: auto; + display: flex; + flex-direction: column; + align-items: flex-start; +} + + @media screen and (min-width: 48rem) { + .drawer__body { + padding: var(--spacing-6); +} +} + + .drawer__footer { + flex: 0; + gap: var(--spacing-3); + padding-block: var(--spacing-4); + padding-inline: var(--spacing-4); + display: flex; + align-items: center; + justify-content: flex-end; +} + + @media screen and (min-width: 48rem) { + .drawer__footer { + padding-inline: var(--spacing-6); +} +} +} + + .drawer__positioner--placement_end { + justify-content: flex-end; + align-items: stretch; +} + + .drawer__content--placement_end:is([open], [data-open], [data-state="open"], :popover-open) { + animation-name: slide-from-right-full, fade-in; +} + + :where([dir=rtl], :dir(rtl)) .drawer__content--placement_end:is([open], [data-open], [data-state="open"], :popover-open) { + animation-name: slide-from-left-full, fade-in; +} + + .drawer__content--placement_end:is([closed], [data-closed], [data-state="closed"]) { + animation-name: slide-to-right-full, fade-out; +} + + :where([dir=rtl], :dir(rtl)) .drawer__content--placement_end:is([closed], [data-closed], [data-state="closed"]) { + animation-name: slide-to-left-full, fade-out; +} + + .drawer__content--size_sm { + max-width: var(--sizes-sm); +} + + .drawer__content--size_xs { + max-width: var(--sizes-xs); +} + + .drawer__content--size_md { + max-width: var(--sizes-md); +} + + .drawer__content--size_lg { + max-width: var(--sizes-lg); +} + + .drawer__content--size_xl { + max-width: var(--sizes-xl); +} + + .drawer__content--size_full { + max-width: 100vw; + height: 100dvh; +} + + .drawer__positioner--placement_start { + justify-content: flex-start; + align-items: stretch; +} + + .drawer__content--placement_start:is([open], [data-open], [data-state="open"], :popover-open) { + animation-name: slide-from-left-full, fade-in; +} + + :where([dir=rtl], :dir(rtl)) .drawer__content--placement_start:is([open], [data-open], [data-state="open"], :popover-open) { + animation-name: slide-from-right-full, fade-in; +} + + .drawer__content--placement_start:is([closed], [data-closed], [data-state="closed"]) { + animation-name: slide-to-left-full, fade-out; +} + + :where([dir=rtl], :dir(rtl)) .drawer__content--placement_start:is([closed], [data-closed], [data-state="closed"]) { + animation-name: slide-to-right-full, fade-out; +} + + .drawer__positioner--placement_top { + justify-content: stretch; + align-items: flex-start; +} + + .drawer__content--placement_top { + max-width: 100%; +} + + .drawer__content--placement_top:is([open], [data-open], [data-state="open"], :popover-open) { + animation-name: slide-from-top-full, fade-in; +} + + .drawer__content--placement_top:is([closed], [data-closed], [data-state="closed"]) { + animation-name: slide-to-top-full, fade-out; +} + + .drawer__positioner--placement_bottom { + justify-content: stretch; + align-items: flex-end; +} + + .drawer__content--placement_bottom { + max-width: 100%; +} + + .drawer__content--placement_bottom:is([open], [data-open], [data-state="open"], :popover-open) { + animation-name: slide-from-bottom-full, fade-in; +} + + .drawer__content--placement_bottom:is([closed], [data-closed], [data-state="closed"]) { + animation-name: slide-to-bottom-full, fade-out; +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/editable.css b/.storybook/styles-v2/recipes/editable.css new file mode 100644 index 0000000000..22a8104779 --- /dev/null +++ b/.storybook/styles-v2/recipes/editable.css @@ -0,0 +1,99 @@ +@layer recipes.slots { + @layer _base { + .editable__root { + gap: var(--spacing-1\.5); + position: relative; + width: var(--sizes-full); +} + + .editable__root,.editable__preview { + align-items: center; + display: inline-flex; +} + + .editable__preview { + border-radius: var(--radii-l2); + cursor: default; + --transition-duration: var(--durations-normal); + transition-duration: var(--durations-normal); + --transition-prop: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; +} + + .editable__preview:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) { + -webkit-user-select: none; + user-select: none; +} + + .editable__preview:not(:disabled):hover { + background: var(--colors-gray-plain-bg-hover); +} + + .editable__input { + border-radius: var(--radii-l2); + --focus-ring-width: 2px; + --focus-ring-color: var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC)); +} + + .editable__input:is(:focus, [data-focus]) { + outline-offset: 0px; + outline-width: var(--focus-ring-width, 1px); + outline-color: var(--focus-ring-color); + outline-style: var(--focus-ring-style, solid); + border-color: var(--focus-ring-color); +} + + .editable__input { + --transition-duration: var(--durations-normal); + transition-duration: var(--durations-normal); + --transition-prop: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + width: var(--sizes-full); +} + + .editable__input:is(:focus-visible, [data-focus-visible]) { + outline-offset: -1px; +} + + .editable__control { + gap: var(--spacing-1\.5); + align-items: center; + display: inline-flex; +} +} + + .editable__preview--size_md,.editable__input--size_md { + padding-inline: var(--spacing-3\.5); + padding-block: var(--spacing-2\.5); + font-size: var(--font-sizes-sm); + line-height: 1.25rem; +} + + .editable__preview--size_sm,.editable__input--size_sm { + padding-inline: var(--spacing-3); + padding-block: var(--spacing-2); + font-size: var(--font-sizes-sm); + line-height: 1.25rem; +} + + .editable__preview--size_2xs,.editable__input--size_2xs { + padding-inline: var(--spacing-2); + padding-block: var(--spacing-0\.5); + font-size: var(--font-sizes-xs); + line-height: 1.125rem; +} + + .editable__preview--size_xs,.editable__input--size_xs { + padding-inline: var(--spacing-2\.5); + padding-block: var(--spacing-1\.5); + font-size: var(--font-sizes-sm); + line-height: 1.25rem; +} + + .editable__preview--size_lg,.editable__input--size_lg { + padding-inline: var(--spacing-4); + padding-block: var(--spacing-2\.5); + font-size: var(--font-sizes-md); + line-height: 1.5rem; +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/file-upload.css b/.storybook/styles-v2/recipes/file-upload.css new file mode 100644 index 0000000000..200a44c57d --- /dev/null +++ b/.storybook/styles-v2/recipes/file-upload.css @@ -0,0 +1,114 @@ +@layer recipes.slots { + @layer _base { + .file-upload__root { + gap: var(--spacing-1\.5); + align-items: flex-start; + width: var(--sizes-full); +} + + .file-upload__root,.file-upload__dropzone { + display: flex; + flex-direction: column; +} + + .file-upload__dropzone { + background: var(--colors-gray-surface-bg); + border-radius: var(--radii-l3); + border-style: dashed; + border-width: 2px; + transition: backgrounds; + align-items: center; + --focus-ring-color: var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC)); +} + + .file-upload__dropzone:is(:focus-visible, [data-focus-visible]) { + outline-width: var(--focus-ring-width, 2px); + outline-offset: var(--focus-ring-offset, 2px); + outline-style: var(--focus-ring-style, solid); + outline-color: var(--focus-ring-color); +} + + .file-upload__dropzone { + justify-content: center; + width: var(--sizes-full); +} + + .file-upload__dropzone[data-dragging] { + background: var(--colors-gray-surface-bg-hover); + border-style: solid; + border-color: var(--colors-color-palette-solid-bg); +} + + .file-upload__item { + background: var(--colors-gray-surface-bg); + border-radius: var(--radii-l3); + border-width: 1px; + align-items: start; + animation-duration: var(--durations-normal); + animation-name: fade-in; + display: flex; + position: relative; + width: var(--sizes-full); +} + + .file-upload__itemDeleteTrigger { + color: var(--colors-fg-subtle); +} + + .file-upload__itemGroup { + display: flex; + align-items: start; + flex-direction: column; + width: var(--sizes-full); +} + + .file-upload__itemName { + color: var(--colors-fg-default); + font-weight: var(--font-weights-medium); +} + + .file-upload__itemPreviewImage { + border-radius: var(--radii-l2); + aspect-ratio: 1; + object-fit: cover; + max-width: var(--sizes-20); +} + + .file-upload__itemSizeText { + color: var(--colors-fg-muted); +} + + .file-upload__label { + font-size: var(--font-sizes-sm); + line-height: 1.25rem; + font-weight: var(--font-weights-medium); +} +} + + .file-upload__root--size_md { + gap: var(--spacing-4); +} + + .file-upload__dropzone--size_md { + padding-inline: var(--spacing-6); + padding-block: var(--spacing-4); + gap: var(--spacing-0); + min-height: var(--sizes-xs); +} + + .file-upload__item--size_md { + padding: var(--spacing-4); + gap: var(--spacing-3); + font-size: var(--font-sizes-sm); + line-height: 1.25rem; +} + + .file-upload__itemDeleteTrigger--size_md :where(svg) { + width: var(--sizes-4); + height: var(--sizes-4); +} + + .file-upload__itemGroup--size_md { + gap: var(--spacing-3); +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/form-label.css b/.storybook/styles-v2/recipes/form-label.css new file mode 100644 index 0000000000..4d9a971eb9 --- /dev/null +++ b/.storybook/styles-v2/recipes/form-label.css @@ -0,0 +1,18 @@ +@layer recipes { + @layer _base { + .form-label { + color: var(--colors-fg-default); + font-weight: var(--font-weights-medium); +} +} + + .form-label--size_md,.form-label--size_sm,.form-label--size_lg { + font-size: var(--font-sizes-sm); + line-height: 1.25rem; +} + + .form-label--size_xl { + font-size: var(--font-sizes-md); + line-height: 1.5rem; +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/group.css b/.storybook/styles-v2/recipes/group.css new file mode 100644 index 0000000000..363f8007e2 --- /dev/null +++ b/.storybook/styles-v2/recipes/group.css @@ -0,0 +1,33 @@ +@layer recipes { + @layer _base { + .group { + gap: var(--spacing-2); + display: inline-flex; + position: relative; +} + + .group > *:is(:focus-visible, [data-focus-visible]) { + z-index: 1; +} +} + + .group--orientation_horizontal { + flex-direction: row; +} + + .group--attached_true { + gap: var(--spacing-0); +} + + .group--grow_true { + display: flex; +} + + .group--grow_true > * { + flex: 1 1 0%; +} + + .group--orientation_vertical { + flex-direction: column; +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/icon.css b/.storybook/styles-v2/recipes/icon.css new file mode 100644 index 0000000000..808668c3cb --- /dev/null +++ b/.storybook/styles-v2/recipes/icon.css @@ -0,0 +1,41 @@ +@layer recipes { + @layer _base { + .icon { + color: currentcolor; + display: inline-block; + flex-shrink: 0; + vertical-align: middle; + line-height: 1em; +} +} + + .icon--size_md { + width: var(--sizes-5); + height: var(--sizes-5); +} + + .icon--size_lg { + width: var(--sizes-5\.5); + height: var(--sizes-5\.5); +} + + .icon--size_sm { + width: var(--sizes-4\.5); + height: var(--sizes-4\.5); +} + + .icon--size_2xs { + width: var(--sizes-3); + height: var(--sizes-3); +} + + .icon--size_xs { + width: var(--sizes-4); + height: var(--sizes-4); +} + + .icon--size_xl { + width: var(--sizes-6); + height: var(--sizes-6); +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/input-addon.css b/.storybook/styles-v2/recipes/input-addon.css new file mode 100644 index 0000000000..215434e393 --- /dev/null +++ b/.storybook/styles-v2/recipes/input-addon.css @@ -0,0 +1,84 @@ +@layer recipes { + @layer _base { + .input-addon { + border-radius: var(--radii-l2); + flex: 0 0 auto; + align-items: center; + align-self: stretch; + color: var(--colors-fg-muted); + display: flex; + white-space: nowrap; + width: auto; +} +} + + .input-addon--size_md { + padding-inline: var(--spacing-3); + font-size: var(--font-sizes-md); + line-height: 1.5rem; +} + + .input-addon--size_md :where(svg) { + width: var(--sizes-5); + height: var(--sizes-5); +} + + .input-addon--variant_outline { + border-width: 1px; + border-color: var(--colors-gray-outline-border); +} + + .input-addon--variant_surface { + background: var(--colors-gray-surface-bg); + border-width: 1px; + border-color: var(--colors-gray-surface-border); +} + + .input-addon--variant_subtle { + background: var(--colors-gray-subtle-bg); +} + + .input-addon--size_xs { + padding-inline: var(--spacing-2); + font-size: var(--font-sizes-sm); + line-height: 1.25rem; +} + + .input-addon--size_xs :where(svg) { + width: var(--sizes-4); + height: var(--sizes-4); +} + + .input-addon--size_sm { + padding-inline: var(--spacing-2\.5); + font-size: var(--font-sizes-sm); + line-height: 1.25rem; +} + + .input-addon--size_sm :where(svg) { + width: var(--sizes-4\.5); + height: var(--sizes-4\.5); +} + + .input-addon--size_lg { + padding-inline: var(--spacing-3\.5); + font-size: var(--font-sizes-md); + line-height: 1.5rem; +} + + .input-addon--size_lg :where(svg) { + width: var(--sizes-5); + height: var(--sizes-5); +} + + .input-addon--size_xl { + padding-inline: var(--spacing-4); + font-size: var(--font-sizes-lg); + line-height: 1.75rem; +} + + .input-addon--size_xl :where(svg) { + width: var(--sizes-5\.5); + height: var(--sizes-5\.5); +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/input-group.css b/.storybook/styles-v2/recipes/input-group.css new file mode 100644 index 0000000000..b80ffe56ed --- /dev/null +++ b/.storybook/styles-v2/recipes/input-group.css @@ -0,0 +1,107 @@ +@layer recipes.slots { + @layer _base { + .input-group__root { + position: relative; + width: var(--sizes-full); +} + + .input-group__element { + align-items: center; + color: var(--colors-fg-muted); + display: flex; + justify-content: center; + position: absolute; + z-index: 2; + height: var(--sizes-full); +} + + .input-group__element :where(svg) { + color: var(--colors-fg-subtle); +} +} + + .input-group__root--size_md > input:not(:first-child) { + padding-inline-start: var(--spacing-9) !important; +} + + .input-group__root--size_md > input:not(:last-child) { + padding-inline-end: var(--spacing-9) !important; +} + + .input-group__element--size_md { + min-width: var(--sizes-10); +} + + .input-group__element--size_md :where(svg) { + width: var(--sizes-5); + height: var(--sizes-5); +} + + .input-group__root--size_xs > input:not(:first-child) { + padding-inline-start: var(--spacing-7) !important; +} + + .input-group__root--size_xs > input:not(:last-child) { + padding-inline-end: var(--spacing-7) !important; +} + + .input-group__element--size_xs { + min-width: var(--sizes-8); +} + + .input-group__element--size_xs :where(svg) { + width: var(--sizes-4); + height: var(--sizes-4); +} + + .input-group__root--size_sm > input:not(:first-child) { + padding-inline-start: var(--spacing-8) !important; +} + + .input-group__root--size_sm > input:not(:last-child) { + padding-inline-end: var(--spacing-8) !important; +} + + .input-group__element--size_sm { + min-width: var(--sizes-9); +} + + .input-group__element--size_sm :where(svg) { + width: var(--sizes-4\.5); + height: var(--sizes-4\.5); +} + + .input-group__root--size_lg > input:not(:first-child) { + padding-inline-start: var(--spacing-10) !important; +} + + .input-group__root--size_lg > input:not(:last-child) { + padding-inline-end: var(--spacing-10) !important; +} + + .input-group__element--size_lg { + min-width: var(--sizes-11); +} + + .input-group__element--size_lg :where(svg) { + width: var(--sizes-5); + height: var(--sizes-5); +} + + .input-group__root--size_xl > input:not(:first-child) { + padding-inline-start: var(--spacing-11) !important; +} + + .input-group__root--size_xl > input:not(:last-child) { + padding-inline-end: var(--spacing-11) !important; +} + + .input-group__element--size_xl { + min-width: var(--sizes-11); +} + + .input-group__element--size_xl :where(svg) { + width: var(--sizes-5\.5); + height: var(--sizes-5\.5); +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/input.css b/.storybook/styles-v2/recipes/input.css new file mode 100644 index 0000000000..5314b6b6b2 --- /dev/null +++ b/.storybook/styles-v2/recipes/input.css @@ -0,0 +1,158 @@ +@layer recipes { + @layer _base { + .input { + border-radius: var(--radii-l2); + outline: 0; + transition-property: var(--transition-prop, color, background-color, border-color, outline-color, text-decoration-color, fill, stroke); + transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1)); + transition-duration: var(--transition-duration, 150ms); + appearance: none; + -webkit-appearance: none; + position: relative; + text-align: start; + height: var(--input-height); + min-height: var(--input-height); + min-width: var(--input-height); + width: 100%; +} + + .input:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) { + cursor: not-allowed; + opacity: 0.67; + filter: grayscale(100%); +} +} + + .input--size_md { + --input-height: var(--sizes-10); + padding-inline: var(--spacing-3); + font-size: var(--font-sizes-md); + line-height: 1.5rem; +} + + .input--variant_outline { + border-width: 1px; + border-color: var(--colors-gray-outline-border); + --focus-ring-color: var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC)); +} + + .input--variant_outline:is(:focus-visible, [data-focus-visible]) { + outline-offset: 0px; + outline-width: var(--focus-ring-width, 1px); + outline-color: var(--focus-ring-color); + outline-style: var(--focus-ring-style, solid); + border-color: var(--focus-ring-color); +} + + .input--variant_outline:is(:user-invalid, [data-invalid], [aria-invalid=true]) { + border-color: var(--colors-error); + --focus-ring-color-prop: var(--colors-error); +} + + .input--variant_surface { + background: var(--colors-gray-surface-bg); + border-width: 1px; + border-color: var(--colors-gray-surface-border); + --focus-ring-color: var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC)); +} + + .input--variant_surface:is(:focus-visible, [data-focus-visible]) { + outline-offset: 0px; + outline-width: var(--focus-ring-width, 1px); + outline-color: var(--focus-ring-color); + outline-style: var(--focus-ring-style, solid); + border-color: var(--focus-ring-color); +} + + .input--variant_surface:is(:user-invalid, [data-invalid], [aria-invalid=true]) { + border-color: var(--colors-error); + --focus-ring-color-prop: var(--colors-error); +} + + .input--variant_subtle { + background: var(--colors-gray-subtle-bg); + border-width: 1px; + border-color: transparent; + color: var(--colors-gray-subtle-fg); + --focus-ring-color: var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC)); +} + + .input--variant_subtle:is(:focus-visible, [data-focus-visible]) { + outline-offset: 0px; + outline-width: var(--focus-ring-width, 1px); + outline-color: var(--focus-ring-color); + outline-style: var(--focus-ring-style, solid); + border-color: var(--focus-ring-color); +} + + .input--variant_subtle:is(:user-invalid, [data-invalid], [aria-invalid=true]) { + border-color: var(--colors-error); + --focus-ring-color-prop: var(--colors-error); +} + + .input--variant_flushed { + border-radius: 0; + padding-inline: var(--spacing-0); + color: var(--colors-fg-default); + border-bottom-width: 1px; + border-bottom-color: var(--colors-gray-outline-border); +} + + .input--variant_flushed:is(:user-invalid, [data-invalid], [aria-invalid=true]) { + border-color: var(--colors-error); +} + + .input--variant_flushed:is(:focus, [data-focus]) { + border-color: var(--colors-color-palette-solid-bg); + --shadow-color: var(--colors-color-palette-solid-bg); + box-shadow: 0 1px 0 0 var(--shadow-color); +} + + .input--variant_flushed:is(:focus, [data-focus]):is(:user-invalid, [data-invalid], [aria-invalid=true]) { + border-color: var(--colors-error); + --shadow-color: var(--colors-error); +} + + .input--size_2xs { + --input-height: var(--sizes-7); + padding-inline: var(--spacing-1\.5); + font-size: var(--font-sizes-xs); + line-height: 1.125rem; +} + + .input--size_xs { + --input-height: var(--sizes-8); + padding-inline: var(--spacing-2); +} + + .input--size_xs,.input--size_sm { + font-size: var(--font-sizes-sm); + line-height: 1.25rem; +} + + .input--size_sm { + --input-height: var(--sizes-9); + padding-inline: var(--spacing-2\.5); +} + + .input--size_lg { + --input-height: var(--sizes-11); + padding-inline: var(--spacing-3\.5); + font-size: var(--font-sizes-md); + line-height: 1.5rem; +} + + .input--size_xl { + --input-height: var(--sizes-12); + padding-inline: var(--spacing-4); + font-size: var(--font-sizes-lg); + line-height: 1.75rem; +} + + .input--size_2xl { + --input-height: var(--sizes-16); + padding-inline: var(--spacing-4\.5); + font-size: var(--font-sizes-3xl); + line-height: 2.375rem; +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/kbd.css b/.storybook/styles-v2/recipes/kbd.css new file mode 100644 index 0000000000..d3d9cbc239 --- /dev/null +++ b/.storybook/styles-v2/recipes/kbd.css @@ -0,0 +1,78 @@ +@layer recipes { + @layer _base { + .kbd { + border-radius: var(--radii-l2); + display: inline-flex; + align-items: center; + font-weight: var(--font-weights-medium); + font-family: code; + flex-shrink: 0; + white-space: nowrap; + word-spacing: -0.5em; + -webkit-user-select: none; + user-select: none; + justify-content: center; +} +} + + .kbd--size_md { + padding-inline: var(--spacing-1); + font-size: var(--font-sizes-sm); + line-height: 1.25rem; + height: var(--sizes-5); + min-width: var(--sizes-5); +} + + .kbd--variant_subtle { + background: var(--colors-color-palette-subtle-bg); + color: var(--colors-color-palette-subtle-fg); +} + + .kbd--size_sm { + font-size: var(--font-sizes-xs); + line-height: 1.125rem; + height: var(--sizes-4\.5); + min-width: var(--sizes-4\.5); +} + + .kbd--size_sm,.kbd--size_lg { + padding-inline: var(--spacing-1); +} + + .kbd--size_lg { + font-size: var(--font-sizes-sm); + line-height: 1.25rem; + height: var(--sizes-5\.5); + min-width: var(--sizes-5\.5); +} + + .kbd--size_xl { + padding-inline: var(--spacing-1); + font-size: var(--font-sizes-md); + line-height: 1.5rem; + height: var(--sizes-6); + min-width: var(--sizes-6); +} + + .kbd--variant_solid { + background: var(--colors-color-palette-solid-bg); + color: var(--colors-color-palette-solid-fg); +} + + .kbd--variant_surface { + background: var(--colors-color-palette-surface-bg); + border-width: 1px; + border-color: var(--colors-color-palette-surface-border); + color: var(--colors-color-palette-surface-fg); +} + + .kbd--variant_outline { + border-width: 1px; + border-color: var(--colors-color-palette-outline-border); + color: var(--colors-color-palette-outline-fg); +} + + .kbd--variant_plain { + color: var(--colors-color-palette-plain-fg); +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/link.css b/.storybook/styles-v2/recipes/link.css new file mode 100644 index 0000000000..afc0b9994e --- /dev/null +++ b/.storybook/styles-v2/recipes/link.css @@ -0,0 +1,53 @@ +@layer recipes { + @layer _base { + .link { + border-radius: var(--radii-l1); + gap: var(--spacing-1\.5); + outline: var(--borders-none); + align-items: center; + cursor: pointer; + display: inline-flex; + --focus-ring-color: var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC)); +} + + .link:is(:focus-visible, [data-focus-visible]) { + outline-width: var(--focus-ring-width, 2px); + outline-offset: var(--focus-ring-offset, 2px); + outline-style: var(--focus-ring-style, solid); + outline-color: var(--focus-ring-color); +} + + .link { + font-weight: var(--font-weights-medium); + text-decoration-line: underline; + text-decoration-thickness: 0.1em; + text-underline-offset: 0.125em; + --transition-duration: var(--durations-normal); + transition-duration: var(--durations-normal); + --transition-prop: text-decoration-color; + transition-property: text-decoration-color; +} + + .link :where(svg) { + width: 1em; + height: 1em; +} +} + + .link--variant_underline { + --mix-textDecorationColor: color-mix(in srgb, var(--colors-color-palette-surface-fg) 60%, transparent); + text-decoration-color: var(--mix-textDecorationColor, var(--colors-color-palette-surface-fg)); +} + + .link--variant_underline:not(:disabled):hover { + text-decoration-color: var(--colors-color-palette-surface-fg); +} + + .link--variant_plain { + text-decoration-color: transparent; +} + + .link--variant_plain:not(:disabled):hover { + text-decoration-color: var(--colors-color-palette-surface-fg); +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/menu.css b/.storybook/styles-v2/recipes/menu.css new file mode 100644 index 0000000000..ed81c8244a --- /dev/null +++ b/.storybook/styles-v2/recipes/menu.css @@ -0,0 +1,288 @@ +@layer recipes.slots { + @layer _base { + .menu__content { + --menu-z-index: var(--z-index-dropdown); + background: var(--colors-gray-surface-bg); + border-radius: var(--radii-l3); + outline: 0; + overflow: hidden; + box-shadow: var(--shadows-md); + display: flex; + flex-direction: column; + position: relative; + z-index: calc(var(--menu-z-index) + var(--layer-index, 0)); + max-height: min(var(--available-height), var(--sizes-96)); + min-width: max(var(--reference-width), var(--sizes-40)); + overflow-y: auto; +} + + .menu__content:is([open], [data-open], [data-state="open"], :popover-open) { + transform-origin: var(--transform-origin); +} + + .menu__content:is([open], [data-open], [data-state="open"], :popover-open)[data-placement^=top] { + animation-name: slide-from-bottom, fade-in; +} + + .menu__content:is([open], [data-open], [data-state="open"], :popover-open)[data-placement^=bottom] { + animation-name: slide-from-top, fade-in; +} + + .menu__content:is([open], [data-open], [data-state="open"], :popover-open)[data-placement^=left] { + animation-name: slide-from-right, fade-in; +} + + .menu__content:is([open], [data-open], [data-state="open"], :popover-open)[data-placement^=right] { + animation-name: slide-from-left, fade-in; +} + + .menu__content:is([open], [data-open], [data-state="open"], :popover-open) { + animation-duration: var(--durations-fast); +} + + .menu__content:is([closed], [data-closed], [data-state="closed"]) { + transform-origin: var(--transform-origin); +} + + .menu__content:is([closed], [data-closed], [data-state="closed"])[data-placement^=top] { + animation-name: slide-to-bottom, fade-out; +} + + .menu__content:is([closed], [data-closed], [data-state="closed"])[data-placement^=bottom] { + animation-name: slide-to-top, fade-out; +} + + .menu__content:is([closed], [data-closed], [data-state="closed"])[data-placement^=left] { + animation-name: slide-to-right, fade-out; +} + + .menu__content:is([closed], [data-closed], [data-state="closed"])[data-placement^=right] { + animation-name: slide-to-left, fade-out; +} + + .menu__content:is([closed], [data-closed], [data-state="closed"]) { + animation-duration: var(--durations-faster); +} + + .menu__item { + border-radius: var(--radii-l2); + flex: 0 0 auto; + outline: 0; + text-decoration: none; + align-items: center; + display: flex; + text-align: start; + -webkit-user-select: none; + user-select: none; + width: 100%; +} + + .menu__item[data-highlighted] { + background: var(--colors-gray-surface-bg-hover); +} + + .menu__item:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) { + cursor: not-allowed; + opacity: 0.67; + filter: grayscale(100%); +} + + .menu__itemGroupLabel { + gap: 1px; + align-items: flex-start; + color: var(--colors-fg-subtle); + display: flex; + flex-direction: column; + font-weight: var(--font-weights-medium); + justify-content: center; +} + + .menu__itemGroupLabel::after { + background: var(--colors-border); + content: ""; + width: 100%; + height: 1px; +} + + .menu__itemIndicator { + flex: 1 1 0%; + justify-content: flex-end; + display: flex; +} + + .menu__itemIndicator:is(:checked, [data-checked], [data-state=checked], [aria-checked=true], [data-state=indeterminate]) :where(svg) { + color: var(--colors-color-palette-plain-fg); +} + + .menu__trigger:is(:focus-visible, [data-focus-visible]) { + --focus-ring-color: var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC)); +} + + .menu__trigger:is(:focus-visible, [data-focus-visible]):is(:focus-visible, [data-focus-visible]) { + outline-width: var(--focus-ring-width, 2px); + outline-offset: var(--focus-ring-offset, 2px); + outline-style: var(--focus-ring-style, solid); + outline-color: var(--focus-ring-color); +} +} + + .menu__content--size_sm { + padding: var(--spacing-1); + gap: var(--spacing-0\.5); + font-size: var(--font-sizes-sm); + line-height: 1.25rem; +} + + .menu__item--size_sm { + padding-inline: var(--spacing-1\.5); + gap: var(--spacing-2); + min-height: var(--sizes-9); +} + + .menu__item--size_sm :where(svg) { + width: var(--sizes-4); + height: var(--sizes-4); +} + + .menu__itemGroup--size_sm { + gap: var(--spacing-0\.5); +} + + .menu__itemGroupLabel--size_sm { + padding-inline: var(--spacing-1\.5); + height: var(--sizes-9); +} + + .menu__separator--size_sm { + margin-inline: calc(var(--spacing-1\.5) * -1); + margin-block: var(--spacing-0\.5); +} + + .menu__content--size_md { + padding: var(--spacing-1); + gap: var(--spacing-0\.5); + font-size: var(--font-sizes-md); + line-height: 1.5rem; +} + + .menu__item--size_md { + padding-inline: var(--spacing-2); + gap: var(--spacing-2); + min-height: var(--sizes-10); +} + + .menu__item--size_md :where(svg) { + width: var(--sizes-4); + height: var(--sizes-4); +} + + .menu__itemGroup--size_md { + gap: var(--spacing-0\.5); +} + + .menu__itemGroupLabel--size_md { + padding-inline: var(--spacing-2); + height: var(--sizes-10); +} + + .menu__separator--size_md { + margin-inline: calc(var(--spacing-2) * -1); + margin-block: var(--spacing-0\.5); +} + + .menu__content--size_xs { + padding: var(--spacing-1); + gap: var(--spacing-0\.5); + font-size: var(--font-sizes-sm); + line-height: 1.25rem; +} + + .menu__item--size_xs { + padding-inline: var(--spacing-1); + gap: var(--spacing-2); + min-height: var(--sizes-8); +} + + .menu__item--size_xs :where(svg) { + width: var(--sizes-3\.5); + height: var(--sizes-3\.5); +} + + .menu__itemGroup--size_xs { + gap: var(--spacing-0\.5); +} + + .menu__itemGroupLabel--size_xs { + padding-inline: var(--spacing-1); + height: var(--sizes-8); +} + + .menu__separator--size_xs { + margin-inline: calc(var(--spacing-1) * -1); + margin-block: var(--spacing-0\.5); +} + + .menu__content--size_lg { + padding: var(--spacing-1); + gap: var(--spacing-0\.5); + font-size: var(--font-sizes-md); + line-height: 1.5rem; +} + + .menu__item--size_lg { + padding-inline: var(--spacing-2\.5); + gap: var(--spacing-2); + min-height: var(--sizes-11); +} + + .menu__item--size_lg :where(svg) { + width: var(--sizes-4\.5); + height: var(--sizes-4\.5); +} + + .menu__itemGroup--size_lg { + gap: var(--spacing-0\.5); +} + + .menu__itemGroupLabel--size_lg { + padding-inline: var(--spacing-2\.5); + height: var(--sizes-11); +} + + .menu__separator--size_lg { + margin-inline: calc(var(--spacing-2\.5) * -1); + margin-block: var(--spacing-0\.5); +} + + .menu__content--size_xl { + padding: var(--spacing-1); + gap: var(--spacing-1); + font-size: var(--font-sizes-lg); + line-height: 1.75rem; +} + + .menu__item--size_xl { + padding-inline: var(--spacing-3); + gap: var(--spacing-3); + min-height: var(--sizes-12); +} + + .menu__item--size_xl :where(svg) { + width: var(--sizes-5); + height: var(--sizes-5); +} + + .menu__itemGroup--size_xl { + gap: var(--spacing-1); +} + + .menu__itemGroupLabel--size_xl { + padding-inline: var(--spacing-3); + height: var(--sizes-12); +} + + .menu__separator--size_xl { + margin-inline: calc(var(--spacing-3) * -1); + margin-block: var(--spacing-0); +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/number-input.css b/.storybook/styles-v2/recipes/number-input.css new file mode 100644 index 0000000000..747643e92e --- /dev/null +++ b/.storybook/styles-v2/recipes/number-input.css @@ -0,0 +1,205 @@ +@layer recipes.slots { + @layer _base { + .number-input__root { + isolation: isolate; + position: relative; +} + + .number-input__root:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) { + cursor: not-allowed; + opacity: 0.67; + filter: grayscale(100%); +} + + .number-input__label { + color: var(--colors-fg-default); + font-weight: var(--font-weights-medium); +} + + .number-input__input { + border-radius: var(--radii-l2); + outline: 0; + transition-property: var(--transition-prop, color, background-color, border-color, outline-color, text-decoration-color, fill, stroke); + transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1)); + transition-duration: var(--transition-duration, 150ms); + appearance: none; + -webkit-appearance: none; + position: relative; + text-align: start; + vertical-align: top; + padding-inline-end: calc(var(--stepper-width) + 0.5rem); + height: var(--input-height); + min-height: var(--input-height); + min-width: var(--input-height); + width: 100%; +} + + .number-input__input:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) { + cursor: not-allowed; + opacity: 0.67; + filter: grayscale(100%); +} + + .number-input__control { + margin: 1px; + border-inline-start-width: 1px; + display: flex; +} + + .number-input__control > :not([hidden]) ~ :not([hidden]) { + border-top-width: 1px; + border-bottom-width: 0px; +} + + .number-input__control { + flex-direction: column; + inset-inline-end: 0px; + position: absolute; + z-index: 1; + height: calc(100% - 2px); + top: var(--spacing-0); + width: var(--stepper-width); +} + + .number-input__incrementTrigger { + flex: 1 1 0%; + transition-property: var(--transition-prop, color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter); + transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1)); + transition-duration: var(--transition-duration, 150ms); + align-items: center; + color: var(--colors-fg-muted); + cursor: pointer; + display: flex; + justify-content: center; + line-height: 1; + -webkit-user-select: none; + user-select: none; + border-top-right-radius: var(--radii-l2); +} + + .number-input__incrementTrigger :where(svg) { + width: 1em; + height: 1em; +} + + .number-input__incrementTrigger:not(:disabled):hover { + background: var(--colors-gray-surface-bg-hover); +} + + .number-input__incrementTrigger:not(:disabled):active { + background: var(--colors-gray-surface-bg-active); +} + + .number-input__decrementTrigger { + flex: 1 1 0%; + transition-property: var(--transition-prop, color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter); + transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1)); + transition-duration: var(--transition-duration, 150ms); + align-items: center; + color: var(--colors-fg-muted); + cursor: pointer; + display: flex; + justify-content: center; + line-height: 1; + -webkit-user-select: none; + user-select: none; + border-bottom-right-radius: var(--radii-l2); +} + + .number-input__decrementTrigger :where(svg) { + width: 1em; + height: 1em; +} + + .number-input__decrementTrigger:not(:disabled):hover { + background: var(--colors-gray-surface-bg-hover); +} + + .number-input__decrementTrigger:not(:disabled):active { + background: var(--colors-gray-surface-bg-active); +} +} + + .number-input__input--size_md { + --input-height: var(--sizes-10); + padding-inline: var(--spacing-3); + font-size: var(--font-sizes-md); + line-height: 1.5rem; +} + + .number-input__control--size_md { + --stepper-width: var(--sizes-5); +} + + .number-input__input--variant_outline { + border-width: 1px; + border-color: var(--colors-gray-outline-border); + --focus-ring-color: var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC)); +} + + .number-input__input--variant_outline:is(:focus-visible, [data-focus-visible]) { + outline-offset: 0px; + outline-width: var(--focus-ring-width, 1px); + outline-color: var(--focus-ring-color); + outline-style: var(--focus-ring-style, solid); + border-color: var(--focus-ring-color); +} + + .number-input__input--variant_outline:is(:user-invalid, [data-invalid], [aria-invalid=true]) { + border-color: var(--colors-error); + --focus-ring-color-prop: var(--colors-error); +} + + .number-input__input--size_sm { + --input-height: var(--sizes-9); + padding-inline: var(--spacing-2\.5); + font-size: var(--font-sizes-sm); + line-height: 1.25rem; +} + + .number-input__control--size_sm { + --stepper-width: var(--sizes-4\.5); +} + + .number-input__input--size_lg { + --input-height: var(--sizes-11); + padding-inline: var(--spacing-3\.5); + font-size: var(--font-sizes-md); + line-height: 1.5rem; +} + + .number-input__control--size_lg { + --stepper-width: var(--sizes-5\.5); +} + + .number-input__input--size_xl { + --input-height: var(--sizes-12); + padding-inline: var(--spacing-4); + font-size: var(--font-sizes-lg); + line-height: 1.75rem; +} + + .number-input__control--size_xl { + --stepper-width: var(--sizes-6); +} + + .number-input__input--variant_surface { + background: var(--colors-gray-surface-bg); + border-width: 1px; + border-color: var(--colors-gray-surface-border); + --focus-ring-color: var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC)); +} + + .number-input__input--variant_surface:is(:focus-visible, [data-focus-visible]) { + outline-offset: 0px; + outline-width: var(--focus-ring-width, 1px); + outline-color: var(--focus-ring-color); + outline-style: var(--focus-ring-style, solid); + border-color: var(--focus-ring-color); +} + + .number-input__input--variant_surface:is(:user-invalid, [data-invalid], [aria-invalid=true]) { + border-color: var(--colors-error); + --focus-ring-color-prop: var(--colors-error); +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/pin-input.css b/.storybook/styles-v2/recipes/pin-input.css new file mode 100644 index 0000000000..b5766dda71 --- /dev/null +++ b/.storybook/styles-v2/recipes/pin-input.css @@ -0,0 +1,138 @@ +@layer recipes.slots { + @layer _base { + .pin-input__input { + border-radius: var(--radii-l2); + outline: 0; + transition-property: var(--transition-prop, color, background-color, border-color, outline-color, text-decoration-color, fill, stroke); + transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1)); + transition-duration: var(--transition-duration, 150ms); + padding-inline: var(--spacing-1) !important; + appearance: none; + -webkit-appearance: none; + position: relative; + text-align: center; + height: var(--input-height); + min-height: var(--input-height); + min-width: var(--input-height); + width: var(--input-height); +} + + .pin-input__input:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) { + cursor: not-allowed; + opacity: 0.67; + filter: grayscale(100%); +} + + .pin-input__control { + gap: var(--spacing-2); + display: inline-flex; + isolation: isolate; +} +} + + .pin-input__input--size_md { + --input-height: var(--sizes-10); + padding-inline: var(--spacing-3); + font-size: var(--font-sizes-md); + line-height: 1.5rem; +} + + .pin-input__input--variant_outline { + border-width: 1px; + border-color: var(--colors-gray-outline-border); + --focus-ring-color: var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC)); +} + + .pin-input__input--variant_outline:is(:focus-visible, [data-focus-visible]) { + outline-offset: 0px; + outline-width: var(--focus-ring-width, 1px); + outline-color: var(--focus-ring-color); + outline-style: var(--focus-ring-style, solid); + border-color: var(--focus-ring-color); +} + + .pin-input__input--variant_outline:is(:user-invalid, [data-invalid], [aria-invalid=true]) { + border-color: var(--colors-error); + --focus-ring-color-prop: var(--colors-error); +} + + .pin-input__input--size_xs { + --input-height: var(--sizes-8); + padding-inline: var(--spacing-2); +} + + .pin-input__input--size_xs,.pin-input__input--size_sm { + font-size: var(--font-sizes-sm); + line-height: 1.25rem; +} + + .pin-input__input--size_sm { + --input-height: var(--sizes-9); + padding-inline: var(--spacing-2\.5); +} + + .pin-input__input--size_lg { + --input-height: var(--sizes-11); + padding-inline: var(--spacing-3\.5); + font-size: var(--font-sizes-md); + line-height: 1.5rem; +} + + .pin-input__input--size_xl { + --input-height: var(--sizes-12); + padding-inline: var(--spacing-4); + font-size: var(--font-sizes-lg); + line-height: 1.75rem; +} + + .pin-input__input--size_2xl { + --input-height: var(--sizes-16); + padding-inline: var(--spacing-4\.5); + font-size: var(--font-sizes-3xl); + line-height: 2.375rem; +} + + .pin-input__input--variant_subtle { + background: var(--colors-gray-subtle-bg); + border-width: 1px; + border-color: transparent; + color: var(--colors-gray-subtle-fg); + --focus-ring-color: var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC)); +} + + .pin-input__input--variant_subtle:is(:focus-visible, [data-focus-visible]) { + outline-offset: 0px; + outline-width: var(--focus-ring-width, 1px); + outline-color: var(--focus-ring-color); + outline-style: var(--focus-ring-style, solid); + border-color: var(--focus-ring-color); +} + + .pin-input__input--variant_subtle:is(:user-invalid, [data-invalid], [aria-invalid=true]) { + border-color: var(--colors-error); + --focus-ring-color-prop: var(--colors-error); +} + + .pin-input__input--variant_flushed { + border-radius: 0; + padding-inline: var(--spacing-0); + color: var(--colors-fg-default); + border-bottom-width: 1px; + border-bottom-color: var(--colors-gray-outline-border); +} + + .pin-input__input--variant_flushed:is(:user-invalid, [data-invalid], [aria-invalid=true]) { + border-color: var(--colors-error); +} + + .pin-input__input--variant_flushed:is(:focus, [data-focus]) { + border-color: var(--colors-color-palette-solid-bg); + --shadow-color: var(--colors-color-palette-solid-bg); + box-shadow: 0 1px 0 0 var(--shadow-color); +} + + .pin-input__input--variant_flushed:is(:focus, [data-focus]):is(:user-invalid, [data-invalid], [aria-invalid=true]) { + border-color: var(--colors-error); + --shadow-color: var(--colors-error); +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/progress.css b/.storybook/styles-v2/recipes/progress.css new file mode 100644 index 0000000000..6b079757dc --- /dev/null +++ b/.storybook/styles-v2/recipes/progress.css @@ -0,0 +1,114 @@ +@layer recipes.slots { + @layer _base { + .progress__root { + font-size: var(--font-sizes-sm); + line-height: 1.25rem; + position: relative; +} + + .progress__label { + gap: var(--spacing-1); + display: inline-flex; + font-weight: var(--font-weights-medium); + align-items: center; +} + + .progress__track { + overflow: hidden; + position: relative; +} + + .progress__range { + display: flex; + align-items: center; + justify-content: center; + --transition-prop: width, height; + transition-property: width, height; + --transition-duration: var(--durations-slow); + transition-duration: var(--durations-slow); + background-color: var(--track-color); + height: 100%; +} + + .progress__range:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate"]) { + --animate-from-x: -40%; + --animate-to-x: 100%; + animation: position 1s ease infinite normal none running; + position: absolute; + will-change: left; + background-image: linear-gradient(to right, transparent 0%, var(--track-color) 50%, transparent 100%); + min-width: 50%; +} + + .progress__valueText { + font-size: var(--font-sizes-xs); + line-height: 1; + font-weight: var(--font-weights-medium); +} +} + + .progress__track--variant_solid { + background-color: var(--colors-gray-subtle-bg); +} + + .progress__range--variant_solid { + background-color: var(--colors-color-palette-solid-bg); + color: var(--colors-color-palette-solid-fg); +} + + .progress__track--size_md { + height: var(--sizes-2\.5); +} + + .progress__track--shape_rounded { + border-radius: var(--radii-l1); +} + + .progress__range--striped_true { + --stripe-size: 1rem; + background-image: linear-gradient(45deg, var(--stripe-color) 25%, transparent 25%, transparent 50%, var(--stripe-color) 50%, var(--stripe-color) 75%, transparent 75%, transparent); + background-size: var(--stripe-size) var(--stripe-size); +} + + :root .progress__range--striped_true,.light .progress__range--striped_true { + --stripe-color: rgba(255, 255, 255, 0.3); +} + + .dark .progress__range--striped_true { + --stripe-color: rgba(0, 0, 0, 0.3); +} + + .progress__range--animated_true { + --animate-from: var(--stripe-size); + animation: bg-position 1s linear infinite; +} + + .progress__track--variant_subtle { + background-color: var(--colors-color-palette-subtle-bg-active); +} + + .progress__range--variant_subtle { + background-color: var(--colors-color-palette-solid-bg); + color: var(--colors-color-palette-solid-fg); +} + + .progress__track--shape_full { + border-radius: var(--radii-full); +} + + .progress__track--size_xs { + height: var(--sizes-1\.5); +} + + .progress__track--size_sm { + height: var(--sizes-2); +} + + .progress__track--size_lg { + height: var(--sizes-3); +} + + .progress__track--size_xl { + height: var(--sizes-3\.5); +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/radio-card-group.css b/.storybook/styles-v2/recipes/radio-card-group.css new file mode 100644 index 0000000000..d0877a8174 --- /dev/null +++ b/.storybook/styles-v2/recipes/radio-card-group.css @@ -0,0 +1,178 @@ +@layer recipes.slots { + @layer _base { + .radio-card-group__root { + gap: var(--spacing-1\.5); + display: flex; + flex-direction: column; + width: var(--sizes-full); +} + + .radio-card-group__label { + font-size: var(--font-sizes-sm); + line-height: 1.25rem; + font-weight: var(--font-weights-medium); +} + + .radio-card-group__item { + border-radius: var(--radii-l2); + align-items: center; + cursor: pointer; + display: flex; + justify-content: space-between; + -webkit-user-select: none; + user-select: none; + width: var(--sizes-full); +} + + .radio-card-group__itemText { + font-size: var(--font-sizes-sm); + line-height: 1.25rem; + font-weight: var(--font-weights-medium); +} + + .radio-card-group__itemControl { + border-radius: var(--radii-full); + align-items: center; + display: inline-flex; + flex-shrink: 0; + justify-content: center; + vertical-align: top; +} + + .radio-card-group__itemControl::after { + border-radius: var(--radii-full); + content: ""; + display: block; +} + + .radio-card-group__itemControl:is(:focus-visible, [data-focus-visible]) { + --focus-ring-color: var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC)); +} + + .radio-card-group__itemControl:is(:focus-visible, [data-focus-visible]):is(:focus-visible, [data-focus-visible]) { + outline-width: var(--focus-ring-width, 2px); + outline-offset: var(--focus-ring-offset, 2px); + outline-style: var(--focus-ring-style, solid); + outline-color: var(--focus-ring-color); +} +} + + .radio-card-group__item--variant_outline { + border-width: 1px; + border-color: var(--colors-gray-outline-border); +} + + .radio-card-group__item--variant_outline:is(:checked, [data-checked], [data-state=checked], [aria-checked=true], [data-state=indeterminate]) { + border-color: var(--colors-color-palette-solid-bg); + box-shadow: 0 0 0 1px var(--shadow-color); + --shadow-color: var(--colors-color-palette-solid-bg); +} + + .radio-card-group__itemControl--variant_outline { + border-width: 1px; + border-color: var(--colors-gray-outline-border); +} + + .radio-card-group__itemControl--variant_outline:is(:checked, [data-checked], [data-state=checked], [aria-checked=true], [data-state=indeterminate]) { + background: var(--colors-color-palette-solid-bg); + border-color: var(--colors-color-palette-solid-bg); +} + + .radio-card-group__itemControl--variant_outline:is(:checked, [data-checked], [data-state=checked], [aria-checked=true], [data-state=indeterminate])::after { + background: var(--colors-color-palette-solid-fg); +} + + .radio-card-group__item--size_md { + padding: var(--spacing-4); + gap: var(--spacing-2); +} + + .radio-card-group__itemText--size_md { + font-size: var(--font-sizes-sm); + line-height: 1.25rem; +} + + .radio-card-group__itemControl--size_md { + width: var(--sizes-5); + height: var(--sizes-5); +} + + .radio-card-group__itemControl--size_md::after { + width: var(--sizes-2); + height: var(--sizes-2); +} + + .radio-card-group__item--variant_subtle { + background: var(--colors-gray-subtle-bg); + color: var(--colors-gray-subtle-fg); +} + + .radio-card-group__item--variant_subtle:is(:checked, [data-checked], [data-state=checked], [aria-checked=true], [data-state=indeterminate]) { + background: var(--colors-color-palette-subtle-bg); + color: var(--colors-color-palette-subtle-fg); +} + + .radio-card-group__itemControl--variant_subtle { + border-width: 1px; + border-color: gray.subtle.border; +} + + .radio-card-group__itemControl--variant_subtle:is(:checked, [data-checked], [data-state=checked], [aria-checked=true], [data-state=indeterminate]) { + border-color: var(--colors-color-palette-solid-bg); +} + + .radio-card-group__itemControl--variant_subtle:is(:checked, [data-checked], [data-state=checked], [aria-checked=true], [data-state=indeterminate])::after { + background: var(--colors-color-palette-solid-bg); +} + + .radio-card-group__item--variant_surface { + background: var(--colors-gray-surface-bg); + border-width: 1px; + border-color: var(--colors-gray-surface-border); + color: var(--colors-gray-surface-fg); +} + + .radio-card-group__item--variant_surface:is(:checked, [data-checked], [data-state=checked], [aria-checked=true], [data-state=indeterminate]) { + border-color: var(--colors-color-palette-solid-bg); + box-shadow: 0 0 0 1px var(--shadow-color); + --shadow-color: var(--colors-color-palette-solid-bg); +} + + .radio-card-group__itemControl--variant_surface { + border-width: 1px; + border-color: var(--colors-gray-outline-border); +} + + .radio-card-group__itemControl--variant_surface:is(:checked, [data-checked], [data-state=checked], [aria-checked=true], [data-state=indeterminate]) { + background: var(--colors-color-palette-solid-bg); + border-color: var(--colors-color-palette-solid-bg); +} + + .radio-card-group__itemControl--variant_surface:is(:checked, [data-checked], [data-state=checked], [aria-checked=true], [data-state=indeterminate])::after { + background: var(--colors-color-palette-solid-fg); +} + + .radio-card-group__item--variant_solid { + border-width: 1px; +} + + .radio-card-group__item--variant_solid:is(:checked, [data-checked], [data-state=checked], [aria-checked=true], [data-state=indeterminate]) { + background: var(--colors-color-palette-solid-bg); + border-color: var(--colors-color-palette-solid-bg); + color: var(--colors-color-palette-solid-fg); +} + + .radio-card-group__itemControl--variant_solid { + border-width: 1px; + border-color: var(--colors-gray-outline-border); +} + + .radio-card-group__itemControl--variant_solid:is(:checked, [data-checked], [data-state=checked], [aria-checked=true], [data-state=indeterminate]) { + background: var(--colors-color-palette-solid-fg); + border-color: var(--colors-color-palette-solid-fg); +} + + .radio-card-group__itemControl--variant_solid:is(:checked, [data-checked], [data-state=checked], [aria-checked=true], [data-state=indeterminate])::after { + background: var(--colors-color-palette-solid-bg); +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/radio-group.css b/.storybook/styles-v2/recipes/radio-group.css new file mode 100644 index 0000000000..209a829f19 --- /dev/null +++ b/.storybook/styles-v2/recipes/radio-group.css @@ -0,0 +1,112 @@ +@layer recipes.slots { + @layer _base { + .radio-group__root { + gap: var(--spacing-3); + display: flex; + flex-direction: column; +} + + .radio-group__item { + align-items: center; + cursor: pointer; + display: flex; +} + + .radio-group__item:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) { + cursor: not-allowed; + opacity: 0.67; + filter: grayscale(100%); +} + + .radio-group__itemText { + font-weight: var(--font-weights-medium); + -webkit-user-select: none; + user-select: none; +} + + .radio-group__itemControl { + border-radius: var(--radii-full); + align-items: center; + display: inline-flex; + flex-shrink: 0; + justify-content: center; + vertical-align: top; +} + + .radio-group__itemControl::after { + border-radius: var(--radii-full); + content: ""; + display: block; + width: 40%; + height: 40%; +} + + .radio-group__itemControl:is(:focus-visible, [data-focus-visible]) { + --focus-ring-color: var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC)); +} + + .radio-group__itemControl:is(:focus-visible, [data-focus-visible]):is(:focus-visible, [data-focus-visible]) { + outline-width: var(--focus-ring-width, 2px); + outline-offset: var(--focus-ring-offset, 2px); + outline-style: var(--focus-ring-style, solid); + outline-color: var(--focus-ring-color); +} +} + + .radio-group__itemControl--variant_solid { + box-shadow: inset 0 0 0 1px var(--shadow-color); + --shadow-color: var(--colors-gray-surface-border); +} + + .radio-group__itemControl--variant_solid:is(:checked, [data-checked], [data-state=checked], [aria-checked=true], [data-state=indeterminate]) { + background: var(--colors-color-palette-solid-bg); + color: var(--colors-color-palette-solid-fg); + --shadow-color: var(--colors-color-palette-solid-bg); +} + + .radio-group__itemControl--variant_solid:is(:checked, [data-checked], [data-state=checked], [aria-checked=true], [data-state=indeterminate])::after { + background: var(--colors-color-palette-solid-fg); +} + + .radio-group__item--size_md { + gap: var(--spacing-3); +} + + .radio-group__itemText--size_md { + font-size: var(--font-sizes-md); + line-height: 1.5rem; +} + + .radio-group__itemControl--size_md { + width: var(--sizes-5); + height: var(--sizes-5); +} + + .radio-group__item--size_sm { + gap: var(--spacing-2); +} + + .radio-group__itemText--size_sm { + font-size: var(--font-sizes-sm); + line-height: 1.25rem; +} + + .radio-group__itemControl--size_sm { + width: var(--sizes-4\.5); + height: var(--sizes-4\.5); +} + + .radio-group__item--size_lg { + gap: var(--spacing-3); +} + + .radio-group__itemText--size_lg { + font-size: var(--font-sizes-lg); + line-height: 1.75rem; +} + + .radio-group__itemControl--size_lg { + width: var(--sizes-5\.5); + height: var(--sizes-5\.5); +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/rating-group.css b/.storybook/styles-v2/recipes/rating-group.css new file mode 100644 index 0000000000..f39385f1fc --- /dev/null +++ b/.storybook/styles-v2/recipes/rating-group.css @@ -0,0 +1,116 @@ +@layer recipes.slots { + @layer _base { + .rating-group__root { + align-items: center; + display: inline-flex; + vertical-align: top; +} + + .rating-group__label { + font-weight: var(--font-weights-medium); +} + + .rating-group__label,.rating-group__item { + -webkit-user-select: none; + user-select: none; +} + + .rating-group__item { + justify-content: center; +} + + .rating-group__item,.rating-group__control { + align-items: center; + display: inline-flex; +} + + .rating-group__control { + gap: var(--spacing-0\.5); +} + + .rating-group__itemIndicator { + --clip-path: inset(0 50% 0 0); + display: inline-flex; + align-items: center; + justify-content: center; + position: relative; +} + + :where([dir=rtl], :dir(rtl)) .rating-group__itemIndicator { + --clip-path: inset(0 0 0 50%); +} + + .rating-group__itemIndicator :where(svg) { + stroke: currentColor; + display: inline-block; + flex-shrink: 0; + position: absolute; + width: inherit; + height: inherit; + left: var(--spacing-0); + top: var(--spacing-0); +} + + .rating-group__itemIndicator [data-bg] { + color: var(--colors-gray-subtle-bg); +} + + .rating-group__itemIndicator [data-fg] { + color: transparent; +} + + .rating-group__itemIndicator[data-highlighted]:not([data-half]) [data-fg],.rating-group__itemIndicator[data-half] [data-fg] { + color: var(--colors-color-palette-solid-bg); +} + + .rating-group__itemIndicator[data-half] [data-fg] { + clip-path: var(--clip-path); + -webkit-clip-path: var(--clip-path); +} +} + + .rating-group__root--size_md { + gap: var(--spacing-3); +} + + .rating-group__itemIndicator--size_md { + width: var(--sizes-5); + height: var(--sizes-5); +} + + .rating-group__root--size_xs { + gap: var(--spacing-2); +} + + .rating-group__itemIndicator--size_xs { + width: var(--sizes-4); + height: var(--sizes-4); +} + + .rating-group__root--size_sm { + gap: var(--spacing-2); +} + + .rating-group__itemIndicator--size_sm { + width: var(--sizes-4\.5); + height: var(--sizes-4\.5); +} + + .rating-group__root--size_lg { + gap: var(--spacing-3); +} + + .rating-group__itemIndicator--size_lg { + width: var(--sizes-5\.5); + height: var(--sizes-5\.5); +} + + .rating-group__root--size_xl { + gap: var(--spacing-3); +} + + .rating-group__itemIndicator--size_xl { + width: var(--sizes-6); + height: var(--sizes-6); +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/scroll-area.css b/.storybook/styles-v2/recipes/scroll-area.css new file mode 100644 index 0000000000..5704484db2 --- /dev/null +++ b/.storybook/styles-v2/recipes/scroll-area.css @@ -0,0 +1,127 @@ +@layer recipes.slots { + @layer _base { + .scroll-area__root { + --scrollbar-margin: 0px; + --scrollbar-size: calc(var(--thumb-size) + calc(var(--scrollbar-margin) * 2)); + overflow: hidden; + position: relative; +} + + .scroll-area__root,.scroll-area__viewport { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; +} + + .scroll-area__viewport { + -webkit-overflow-scrolling: touch; + scrollbar-width: none; +} + + .scroll-area__viewport::-webkit-scrollbar { + display: none; +} + + .scroll-area__viewport[data-overflow-x] [data-pinned]::after { + content: ""; + position: absolute; + pointer-events: none; + top: var(--spacing-0); + bottom: -1px; + width: 32px; +} + + .scroll-area__viewport[data-overflow-x]:not([data-at-left]) [data-pinned="left"]::after { + inset-inline-end: var(--spacing-0); + translate: 100% 0; + box-shadow: var(--shadows-inset); +} + + .scroll-area__scrollbar { + align-items: center; + display: flex; + position: relative; + touch-action: none; + -webkit-user-select: none; + user-select: none; + z-index: var(--z-index-overlay); +} + + .scroll-area__scrollbar[data-orientation=vertical] { + padding-block: var(--scrollbar-margin); + flex-direction: column; + width: var(--scrollbar-size); +} + + .scroll-area__scrollbar[data-orientation=vertical]:not([data-overflow-y]) { + display: none; +} + + .scroll-area__scrollbar[data-orientation=horizontal] { + padding-inline: var(--scrollbar-margin); + flex-direction: row; + height: var(--scrollbar-size); +} + + .scroll-area__scrollbar[data-orientation=horizontal]:not([data-overflow-x]) { + display: none; +} + + .scroll-area__thumb { + background: var(--thumb-bg); + border-radius: var(--radii-full); + --transition-duration: var(--durations-normal); + transition-duration: var(--durations-normal); + --transition-prop: background, color, box-shadow; + transition-property: background, color, box-shadow; + --transition-easing: var(--easings-default); + transition-timing-function: var(--easings-default); +} + + .scroll-area__thumb[data-orientation=vertical] { + width: var(--thumb-size); +} + + .scroll-area__thumb[data-orientation=horizontal] { + height: var(--thumb-size); +} +} + + .scroll-area__root--size_md { + --thumb-size: var(--sizes-2); +} + + .scroll-area__scrollbar--scrollbar_auto[data-scrolling],.scroll-area__scrollbar--scrollbar_auto[data-hover] { + --thumb-bg: var(--colors-gray-subtle-bg-active); +} + + .scroll-area__content--scrollbar_visible[data-overflow-y] { + padding-inline-end: var(--scrollbar-size); +} + + .scroll-area__content--scrollbar_visible[data-overflow-x] { + padding-bottom: var(--scrollbar-size); +} + + .scroll-area__scrollbar--scrollbar_visible { + background: var(--colors-gray-subtle-bg); + border-radius: var(--radii-full); +} + + .scroll-area__thumb--scrollbar_visible { + --thumb-bg: var(--colors-gray-subtle-bg-active); +} + + .scroll-area__root--size_sm { + --thumb-size: var(--sizes-1\.5); +} + + .scroll-area__root--size_xs { + --thumb-size: var(--sizes-1); +} + + .scroll-area__root--size_lg { + --thumb-size: var(--sizes-2\.5); +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/segment-group.css b/.storybook/styles-v2/recipes/segment-group.css new file mode 100644 index 0000000000..62d84f14cb --- /dev/null +++ b/.storybook/styles-v2/recipes/segment-group.css @@ -0,0 +1,169 @@ +@layer recipes.slots { + @layer _base { + .segment-group__root { + border-radius: var(--radii-l3); + box-shadow: inset 0 0 0px 1px var(--shadow-color); + --shadow-color: var(--colors-border); + display: inline-flex; + align-items: center; + justify-content: center; + isolation: isolate; + position: relative; +} + + :root .segment-group__root,.light .segment-group__root { + background: var(--colors-gray-2); +} + + .dark .segment-group__root { + background: var(--colors-gray-1); +} + + .segment-group__root[data-orientation=vertical] { + flex-direction: column; + align-items: stretch; +} + + .segment-group__item { + border-radius: var(--radii-l3); + gap: var(--spacing-2); + align-items: center; + display: inline-flex; + flex-shrink: 0; + font-weight: var(--font-weights-medium); + justify-content: center; + position: relative; + -webkit-user-select: none; + user-select: none; +} + + .segment-group__item::before { + background: var(--colors-gray-surface-border); + transition: opacity 0.2s; + content: ""; + position: absolute; +} + + .segment-group__item:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) { + opacity: 0.5; +} + + .segment-group__item:has(input:focus-visible) { + --focus-ring-color: var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC)); +} + + .segment-group__item:has(input:focus-visible):is(:focus-visible, [data-focus-visible]) { + outline-width: var(--focus-ring-width, 2px); + outline-offset: var(--focus-ring-offset, 2px); + outline-style: var(--focus-ring-style, solid); + outline-color: var(--focus-ring-color); +} + + .segment-group__item[data-orientation=horizontal]::before { + inset-block: var(--spacing-1\.5); + inset-inline-start: var(--spacing-0); + width: 1px; +} + + .segment-group__item[data-orientation=vertical]::before { + inset-inline: var(--spacing-1\.5); + inset-block-start: var(--spacing-0); + height: 1px; +} + + .segment-group__item + .segment-group__item[data-state=checked]::before,.segment-group__item[data-state=checked] + .segment-group__item::before,.segment-group__item:first-of-type::before { + opacity: 0; +} + + .segment-group__indicator { + border-width: 1px; + border-color: var(--colors-gray-surface-border); + border-radius: var(--radii-l3); + position: absolute; + z-index: -1; + height: var(--height); + width: var(--width); +} + + :root .segment-group__indicator,.light .segment-group__indicator { + background: var(--colors-white); +} + + .dark .segment-group__indicator { + background: var(--colors-gray-2); +} +} + + .segment-group__item--size_md { + padding-inline: var(--spacing-3\.5); + font-size: var(--font-sizes-sm); + line-height: 1.25rem; + height: var(--sizes-10); + min-width: var(--sizes-10); +} + + .segment-group__item--size_md :where(svg) { + width: var(--sizes-5); + height: var(--sizes-5); +} + + .segment-group__root--fitted_true { + display: flex; +} + + .segment-group__item--fitted_true { + flex: 1 1 0%; +} + + .segment-group__item--size_xs { + padding-inline: var(--spacing-2\.5); + font-size: var(--font-sizes-sm); + line-height: 1.25rem; + height: var(--sizes-8); + min-width: var(--sizes-8); +} + + .segment-group__item--size_xs :where(svg) { + width: var(--sizes-4); + height: var(--sizes-4); +} + + .segment-group__item--size_sm { + padding-inline: var(--spacing-3); + font-size: var(--font-sizes-sm); + line-height: 1.25rem; + height: var(--sizes-9); + min-width: var(--sizes-9); +} + + .segment-group__item--size_sm :where(svg) { + width: var(--sizes-4); + height: var(--sizes-4); +} + + .segment-group__item--size_lg { + padding-inline: var(--spacing-4); + font-size: var(--font-sizes-md); + line-height: 1.5rem; + height: var(--sizes-11); + min-width: var(--sizes-11); +} + + .segment-group__item--size_lg :where(svg) { + width: var(--sizes-5); + height: var(--sizes-5); +} + + .segment-group__item--size_xl { + padding-inline: var(--spacing-4\.5); + font-size: var(--font-sizes-md); + line-height: 1.5rem; + height: var(--sizes-12); + min-width: var(--sizes-12); +} + + .segment-group__item--size_xl :where(svg) { + width: var(--sizes-5\.5); + height: var(--sizes-5\.5); +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/select.css b/.storybook/styles-v2/recipes/select.css new file mode 100644 index 0000000000..1b94b0b104 --- /dev/null +++ b/.storybook/styles-v2/recipes/select.css @@ -0,0 +1,403 @@ +@layer recipes.slots { + @layer _base { + .select__label { + font-weight: var(--font-weights-medium); + font-size: var(--font-sizes-sm); + line-height: 1.25rem; +} + + .select__label,.select__trigger { + -webkit-user-select: none; + user-select: none; +} + + .select__trigger { + border-radius: var(--radii-l2); + outline: 0; + transition-property: var(--transition-prop, color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter); + transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1)); + transition-duration: var(--transition-duration, 150ms); + align-items: center; + cursor: pointer; + display: flex; + justify-content: space-between; + text-align: start; + min-width: var(--sizes-0); + width: var(--sizes-full); +} + + .select__trigger:is(:placeholder-shown, [data-placeholder-shown]) { + color: var(--colors-fg-subtle); +} + + .select__trigger:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) { + cursor: not-allowed; + opacity: 0.67; + filter: grayscale(100%); +} + + .select__indicator { + justify-content: center; + color: var(--colors-fg-subtle); +} + + .select__indicator,.select__item { + display: flex; + align-items: center; +} + + .select__item { + border-radius: var(--radii-l1); + cursor: pointer; + justify-content: space-between; + -webkit-user-select: none; + user-select: none; +} + + .select__item[data-highlighted] { + background: var(--colors-gray-surface-bg-hover); +} + + .select__item:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) { + cursor: not-allowed; + opacity: 0.67; + filter: grayscale(100%); +} + + .select__item:not(:disabled):hover { + background: var(--colors-gray-surface-bg-hover); +} + + .select__itemIndicator { + color: var(--colors-color-palette-plain-fg); +} + + .select__itemGroupLabel { + gap: 1px; + align-items: flex-start; + color: var(--colors-fg-subtle); + display: flex; + flex-direction: column; + font-weight: var(--font-weights-medium); + justify-content: center; +} + + .select__itemGroupLabel::after { + background: var(--colors-gray-4); + content: ""; + width: 100%; + height: 1px; +} + + .select__content { + background: var(--colors-gray-surface-bg); + border-radius: var(--radii-l2); + outline: 0; + box-shadow: var(--shadows-md); + display: flex; + flex-direction: column; + z-index: var(--z-index-dropdown); + max-height: min(var(--available-height), var(--sizes-96)); + min-width: max(var(--reference-width), var(--sizes-40)); + overflow-y: auto; +} + + .select__content:is([open], [data-open], [data-state="open"], :popover-open) { + transform-origin: var(--transform-origin); +} + + .select__content:is([open], [data-open], [data-state="open"], :popover-open)[data-placement^=top] { + animation-name: slide-from-bottom, fade-in; +} + + .select__content:is([open], [data-open], [data-state="open"], :popover-open)[data-placement^=bottom] { + animation-name: slide-from-top, fade-in; +} + + .select__content:is([open], [data-open], [data-state="open"], :popover-open)[data-placement^=left] { + animation-name: slide-from-right, fade-in; +} + + .select__content:is([open], [data-open], [data-state="open"], :popover-open)[data-placement^=right] { + animation-name: slide-from-left, fade-in; +} + + .select__content:is([open], [data-open], [data-state="open"], :popover-open) { + animation-duration: var(--durations-slow); +} + + .select__content:is([closed], [data-closed], [data-state="closed"]) { + transform-origin: var(--transform-origin); +} + + .select__content:is([closed], [data-closed], [data-state="closed"])[data-placement^=top] { + animation-name: slide-to-bottom, fade-out; +} + + .select__content:is([closed], [data-closed], [data-state="closed"])[data-placement^=bottom] { + animation-name: slide-to-top, fade-out; +} + + .select__content:is([closed], [data-closed], [data-state="closed"])[data-placement^=left] { + animation-name: slide-to-right, fade-out; +} + + .select__content:is([closed], [data-closed], [data-state="closed"])[data-placement^=right] { + animation-name: slide-to-left, fade-out; +} + + .select__content:is([closed], [data-closed], [data-state="closed"]) { + animation-duration: var(--durations-fastest); +} + + .select__root { + gap: var(--spacing-1\.5); + display: flex; + flex-direction: column; + width: var(--sizes-full); +} + + .select__valueText { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + + .select__indicatorGroup { + gap: var(--spacing-1); + display: flex; + align-items: center; + pointer-events: none; +} +} + + .select__trigger--size_md { + padding-inline: var(--spacing-3); + gap: var(--spacing-2); + font-size: var(--font-sizes-md); + line-height: 1.5rem; + height: var(--sizes-10); +} + + .select__trigger--size_md :where(svg) { + width: var(--sizes-4); + height: var(--sizes-4); +} + + .select__item--size_md { + padding-inline: var(--spacing-2); + gap: var(--spacing-2); + min-height: var(--sizes-10); +} + + .select__item--size_md :where(svg) { + width: var(--sizes-4); + height: var(--sizes-4); +} + + .select__itemGroup--size_md { + gap: var(--spacing-0\.5); +} + + .select__itemGroupLabel--size_md { + padding-inline: var(--spacing-2); + height: var(--sizes-10); +} + + .select__content--size_md { + padding: var(--spacing-1); + gap: var(--spacing-0\.5); + font-size: var(--font-sizes-md); + line-height: 1.5rem; +} + + .select__trigger--variant_outline { + border-width: 1px; + border-color: var(--colors-gray-outline-border); + --focus-ring-color: var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC)); +} + + .select__trigger--variant_outline:is(:focus-visible, [data-focus-visible]) { + outline-offset: 0px; + outline-width: var(--focus-ring-width, 1px); + outline-color: var(--focus-ring-color); + outline-style: var(--focus-ring-style, solid); + border-color: var(--focus-ring-color); +} + + .select__trigger--variant_surface { + background: var(--colors-gray-surface-bg); + border-width: 1px; + border-color: var(--colors-gray-surface-border); + --focus-ring-color: var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC)); +} + + .select__trigger--variant_surface:is(:focus-visible, [data-focus-visible]) { + outline-offset: 0px; + outline-width: var(--focus-ring-width, 1px); + outline-color: var(--focus-ring-color); + outline-style: var(--focus-ring-style, solid); + border-color: var(--focus-ring-color); +} + + .select__trigger--size_xs { + padding-inline: var(--spacing-2); + gap: var(--spacing-2); + font-size: var(--font-sizes-sm); + line-height: 1.25rem; + height: var(--sizes-8); +} + + .select__trigger--size_xs :where(svg) { + width: var(--sizes-3\.5); + height: var(--sizes-3\.5); +} + + .select__item--size_xs { + padding-inline: var(--spacing-1); + gap: var(--spacing-2); + min-height: var(--sizes-8); +} + + .select__item--size_xs :where(svg) { + width: var(--sizes-3\.5); + height: var(--sizes-3\.5); +} + + .select__itemGroup--size_xs { + gap: var(--spacing-0\.5); +} + + .select__itemGroupLabel--size_xs { + padding-inline: var(--spacing-1); + height: var(--sizes-8); +} + + .select__content--size_xs { + padding: var(--spacing-1); + gap: var(--spacing-0\.5); +} + + .select__content--size_xs,.select__trigger--size_sm { + font-size: var(--font-sizes-sm); + line-height: 1.25rem; +} + + .select__trigger--size_sm { + padding-inline: var(--spacing-2\.5); + gap: var(--spacing-2); + height: var(--sizes-9); +} + + .select__trigger--size_sm :where(svg) { + width: var(--sizes-4); + height: var(--sizes-4); +} + + .select__item--size_sm { + padding-inline: var(--spacing-1\.5); + gap: var(--spacing-2); + min-height: var(--sizes-9); +} + + .select__item--size_sm :where(svg) { + width: var(--sizes-4); + height: var(--sizes-4); +} + + .select__itemGroup--size_sm { + gap: var(--spacing-0\.5); +} + + .select__itemGroupLabel--size_sm { + padding-inline: var(--spacing-1\.5); + height: var(--sizes-9); +} + + .select__content--size_sm { + padding: var(--spacing-1); + gap: var(--spacing-0\.5); + font-size: var(--font-sizes-sm); + line-height: 1.25rem; +} + + .select__trigger--size_lg { + padding-inline: var(--spacing-3\.5); + gap: var(--spacing-2); + font-size: var(--font-sizes-md); + line-height: 1.5rem; + height: var(--sizes-11); +} + + .select__trigger--size_lg :where(svg) { + width: var(--sizes-4\.5); + height: var(--sizes-4\.5); +} + + .select__item--size_lg { + padding-inline: var(--spacing-2\.5); + gap: var(--spacing-2); + min-height: var(--sizes-11); +} + + .select__item--size_lg :where(svg) { + width: var(--sizes-4\.5); + height: var(--sizes-4\.5); +} + + .select__itemGroup--size_lg { + gap: var(--spacing-0\.5); +} + + .select__itemGroupLabel--size_lg { + padding-inline: var(--spacing-2\.5); + height: var(--sizes-11); +} + + .select__content--size_lg { + padding: var(--spacing-1); + gap: var(--spacing-0\.5); + font-size: var(--font-sizes-md); + line-height: 1.5rem; +} + + .select__trigger--size_xl { + padding-inline: var(--spacing-4); + gap: var(--spacing-3); + font-size: var(--font-sizes-lg); + line-height: 1.75rem; + height: var(--sizes-12); +} + + .select__trigger--size_xl :where(svg) { + width: var(--sizes-5); + height: var(--sizes-5); +} + + .select__item--size_xl { + padding-inline: var(--spacing-3); + gap: var(--spacing-3); + min-height: var(--sizes-12); +} + + .select__item--size_xl :where(svg) { + width: var(--sizes-5); + height: var(--sizes-5); +} + + .select__itemGroup--size_xl { + gap: var(--spacing-1); +} + + .select__itemGroupLabel--size_xl { + padding-inline: var(--spacing-3); + height: var(--sizes-12); +} + + .select__content--size_xl { + padding: var(--spacing-1); + gap: var(--spacing-1); + font-size: var(--font-sizes-lg); + line-height: 1.75rem; +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/skeleton.css b/.storybook/styles-v2/recipes/skeleton.css new file mode 100644 index 0000000000..d2dfbb32e1 --- /dev/null +++ b/.storybook/styles-v2/recipes/skeleton.css @@ -0,0 +1,51 @@ +@layer recipes { + .skeleton--variant_pulse { + background: var(--colors-gray-subtle-bg-active); + animation: var(--animations-pulse); + animation-duration: var(--duration, 1.2s); +} + + .skeleton--loading_true { + border-radius: var(--radii-l2); + box-shadow: none; + background-clip: padding-box; + -webkit-background-clip: padding-box; + cursor: default; + color: transparent; + pointer-events: none; + -webkit-user-select: none; + user-select: none; + flex-shrink: 0; +} + + .skeleton--loading_true::before,.skeleton--loading_true::after,.skeleton--loading_true * { + visibility: hidden; +} + + .skeleton--circle_true { + flex: 0 0 auto; + border-radius: 9999px; + display: flex; + align-items: center; + justify-content: center; +} + + .skeleton--variant_shine { + --animate-from: 200%; + --animate-to: -200%; + --start-color: var(--colors-gray-subtle-bg); + --end-color: var(--colors-gray-subtle-bg-active); + animation: bg-position var(--duration, 5s) ease-in-out infinite; + background-image: linear-gradient(270deg,var(--start-color),var(--end-color),var(--end-color),var(--start-color)); + background-size: 400% 100%; +} + + .skeleton--loading_false { + background: unset; + animation: fade-in var(--fade-duration, 0.1s) ease-out !important; +} + + .skeleton--variant_none { + animation: none; +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/slider.css b/.storybook/styles-v2/recipes/slider.css new file mode 100644 index 0000000000..8bb43e26cb --- /dev/null +++ b/.storybook/styles-v2/recipes/slider.css @@ -0,0 +1,168 @@ +@layer recipes.slots { + @layer _base { + .slider__root { + gap: var(--spacing-1); + display: flex; + flex-direction: column; + position: relative; + isolation: isolate; + touch-action: none; + width: var(--sizes-full); +} + + .slider__root,.slider__label { + font-size: var(--font-sizes-sm); + line-height: 1.25rem; +} + + .slider__label { + font-weight: var(--font-weights-medium); +} + + .slider__thumb { + outline: 0; + border-radius: var(--radii-full); + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + width: var(--slider-thumb-size); + height: var(--slider-thumb-size); +} + + .slider__thumb:is(:focus-visible, [data-focus-visible]) { + outline: 2px; + outline-color: colorPalette.solid; + outline-offset: 2px; + ring-offset-color: bg; +} + + .slider__track { + overflow: hidden; + border-radius: var(--radii-full); + flex: 1 1 0%; +} + + .slider__range { + width: inherit; + height: inherit; +} + + .slider__control { + display: inline-flex; + align-items: center; +} + + .slider__markerGroup { + position: absolute !important; + z-index: 1; +} + + .slider__marker { + gap: calc(var(--slider-thumb-size) / 2); + display: flex; + align-items: center; + color: var(--colors-fg-muted); + font-size: var(--font-sizes-xs); + line-height: 1.125rem; +} + + .slider__markerIndicator { + background: var(--colors-color-palette-solid-fg); + border-radius: var(--radii-full); + width: var(--slider-marker-size); + height: var(--slider-marker-size); +} +} + + .slider__root--size_md { + --slider-thumb-size: var(--sizes-5); + --slider-track-size: var(--sizes-2); + --slider-marker-center: 8px; + --slider-marker-size: var(--sizes-1); + --slider-marker-inset: 4px; +} + + .slider__thumb--variant_outline { + background: var(--colors-gray-surface-bg); + border-width: 2px; + border-color: var(--colors-color-palette-solid-bg); + box-shadow: var(--shadows-xs); +} + + .slider__track--variant_outline { + background: var(--colors-border); +} + + .slider__range--variant_outline { + background: var(--colors-color-palette-solid-bg); +} + + .slider__thumb--orientation_horizontal { + translate: 0 -50%; + top: 50%; +} + + .slider__track--orientation_horizontal { + height: var(--slider-track-size); +} + + .slider__control--orientation_horizontal { + flex-direction: row; + width: 100%; + min-height: var(--slider-thumb-size); +} + + .slider__control--orientation_horizontal[data-has-mark-label] { + margin-bottom: var(--spacing-4); +} + + .slider__markerGroup--orientation_horizontal { + inset-inline: var(--slider-marker-inset); + top: var(--slider-marker-center); +} + + .slider__marker--orientation_horizontal { + flex-direction: column; +} + + .slider__root--size_sm,.slider__root--size_lg { + --slider-thumb-size: var(--sizes-5); + --slider-track-size: var(--sizes-2); + --slider-marker-center: 8px; + --slider-marker-size: var(--sizes-1); + --slider-marker-inset: 4px; +} + + .slider__root--orientation_vertical { + display: inline-flex; +} + + .slider__thumb--orientation_vertical { + translate: -50% 0; + left: 50%; +} + + .slider__track--orientation_vertical { + width: var(--slider-track-size); +} + + .slider__control--orientation_vertical { + flex-direction: column; + height: 100%; + min-width: var(--slider-thumb-size); +} + + .slider__control--orientation_vertical[data-has-mark-label] { + margin-inline-end: var(--spacing-4); +} + + .slider__markerGroup--orientation_vertical { + inset-block: var(--slider-marker-inset); + inset-inline-start: var(--slider-marker-center); +} + + .slider__marker--orientation_vertical { + flex-direction: row; +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/spinner.css b/.storybook/styles-v2/recipes/spinner.css new file mode 100644 index 0000000000..31f6b3a07d --- /dev/null +++ b/.storybook/styles-v2/recipes/spinner.css @@ -0,0 +1,46 @@ +@layer recipes { + @layer _base { + .spinner { + --spinner-track-color: transparent; + animation: var(--animations-spin); + border-color: currentColor; + border-radius: var(--radii-full); + border-style: solid; + border-width: 2px; + animation-duration: var(--durations-slowest); + border-inline-start-color: var(--spinner-track-color); + display: inline-block; + border-bottom-color: var(--spinner-track-color); + height: var(--spinner-size); + width: var(--spinner-size); +} +} + + .spinner--size_inherit { + --spinner-size: 1em; +} + + .spinner--size_md { + --spinner-size: var(--sizes-5); +} + + .spinner--size_xs { + --spinner-size: var(--sizes-3); +} + + .spinner--size_sm { + --spinner-size: var(--sizes-4); +} + + .spinner--size_lg { + --spinner-size: var(--sizes-6); +} + + .spinner--size_xl { + --spinner-size: var(--sizes-7); +} + + .spinner--size_2xl { + --spinner-size: var(--sizes-8); +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/switch-recipe.css b/.storybook/styles-v2/recipes/switch-recipe.css new file mode 100644 index 0000000000..8fdc5efdce --- /dev/null +++ b/.storybook/styles-v2/recipes/switch-recipe.css @@ -0,0 +1,167 @@ +@layer recipes.slots { + @layer _base { + .switch__root { + --switch-diff: calc(var(--switch-width) - var(--switch-height)); + --switch-x: var(--switch-diff); + display: inline-flex; + align-items: center; + position: relative; + vertical-align: middle; +} + + :where([dir=rtl], :dir(rtl)) .switch__root { + --switch-x: calc(var(--switch-diff) * -1); +} + + .switch__label { + font-weight: var(--font-weights-medium); + -webkit-user-select: none; + user-select: none; + line-height: 1; +} + + .switch__control { + gap: 0.5rem; + border-radius: var(--radii-full); + transition: backgrounds; + display: inline-flex; + flex-shrink: 0; + justify-content: flex-start; + cursor: pointer; + position: relative; + --focus-ring-color: var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC)); +} + + .switch__control:is(:focus-visible, [data-focus-visible]) { + outline-width: var(--focus-ring-width, 2px); + outline-offset: var(--focus-ring-offset, 2px); + outline-style: var(--focus-ring-style, solid); + outline-color: var(--focus-ring-color); +} + + .switch__control { + width: var(--switch-width); + height: var(--switch-height); +} + + .switch__control:is(:user-invalid, [data-invalid], [aria-invalid=true]) { + outline: 2px solid; + outline-color: var(--colors-error); + outline-offset: 2px; +} + + .switch__control:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) { + cursor: not-allowed; + opacity: 0.67; + filter: grayscale(100%); +} + + .switch__thumb { + border-radius: inherit; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + --transition-prop: translate; + transition-property: translate; + --transition-duration: var(--durations-fast); + transition-duration: var(--durations-fast); +} + + .switch__thumb:is(:checked, [data-checked], [data-state=checked], [aria-checked=true], [data-state=indeterminate]) { + translate: var(--switch-x) 0; +} + + .switch__indicator { + place-content: center; + transition: inset-inline-start 0.12s ease; + position: absolute; + font-size: var(--switch-indicator-font-size); + font-weight: var(--font-weights-medium); + flex-shrink: 0; + -webkit-user-select: none; + user-select: none; + display: grid; + inset-inline-start: calc(var(--switch-x) - 2px); + height: var(--switch-height); + width: var(--switch-height); +} + + .switch__indicator:is(:checked, [data-checked], [data-state=checked], [aria-checked=true], [data-state=indeterminate]) { + inset-inline-start: 2px; +} +} + + .switch__control--variant_solid { + background: var(--colors-gray-subtle-bg); + border-radius: var(--radii-full); + --focus-ring-color: var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC)); +} + + .switch__control--variant_solid:is(:focus-visible, [data-focus-visible]) { + outline-width: var(--focus-ring-width, 2px); + outline-offset: var(--focus-ring-offset, 2px); + outline-style: var(--focus-ring-style, solid); + outline-color: var(--focus-ring-color); +} + + .switch__control--variant_solid:is(:checked, [data-checked], [data-state=checked], [aria-checked=true], [data-state=indeterminate]) { + background: var(--colors-color-palette-solid-bg); +} + + .switch__thumb--variant_solid { + background: var(--colors-white); + scale: 0.8; + box-shadow: var(--shadows-xs); + width: var(--switch-height); + height: var(--switch-height); +} + + .switch__thumb--variant_solid:is(:checked, [data-checked], [data-state=checked], [aria-checked=true], [data-state=indeterminate]) { + background: var(--colors-color-palette-solid-fg); +} + + .switch__root--size_md { + --switch-width: var(--sizes-10); + --switch-height: var(--sizes-5); + --switch-indicator-font-size: var(--font-sizes-sm); + gap: var(--spacing-3); +} + + .switch__label--size_md { + font-size: var(--font-sizes-md); +} + + .switch__root--size_lg { + --switch-width: var(--sizes-11); + --switch-height: var(--sizes-5\.5); + --switch-indicator-font-size: var(--font-sizes-md); + gap: var(--spacing-3); +} + + .switch__label--size_lg { + font-size: var(--font-sizes-lg); +} + + .switch__root--size_xs { + --switch-width: var(--sizes-8); + --switch-height: var(--sizes-4); + --switch-indicator-font-size: var(--font-sizes-xs); + gap: var(--spacing-2); +} + + .switch__label--size_xs { + font-size: var(--font-sizes-sm); +} + + .switch__root--size_sm { + --switch-width: var(--sizes-9); + --switch-height: var(--sizes-4\.5); + --switch-indicator-font-size: var(--font-sizes-xs); + gap: var(--spacing-2); +} + + .switch__label--size_sm { + font-size: var(--font-sizes-sm); +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/table.css b/.storybook/styles-v2/recipes/table.css new file mode 100644 index 0000000000..3be84ea0b7 --- /dev/null +++ b/.storybook/styles-v2/recipes/table.css @@ -0,0 +1,105 @@ +@layer recipes.slots { + @layer _base { + .table__root { + border-collapse: collapse; + font-variant-numeric: lining-nums tabular-nums; + text-align: start; + vertical-align: top; + width: var(--sizes-full); +} + + .table__cell { + overflow: hidden; + align-items: center; + color: var(--colors-fg-muted); + text-align: start; + text-overflow: ellipsis; + font-size: var(--font-sizes-sm); + line-height: 1.25rem; + white-space: nowrap; + box-shadow: inset 0 -1px 0 0 var(--shadow-color); + --shadow-color: var(--colors-border); +} + + .table__cell:is([data-pinned]) { + background: inherit; + overflow: unset; + box-shadow: inset 0 -1px 0 0 var(--shadow-color); + position: sticky; + --shadow-color: var(--colors-border); + z-index: 1; +} + + .table__foot { + font-weight: var(--font-weights-medium); +} + + .table__foot td { + box-shadow: inset 0 1px 0 0 var(--shadow-color) !important; + --shadow-color: var(--colors-border); +} + + .table__head { + color: var(--colors-fg-muted); + font-weight: var(--font-weights-semibold); + text-align: start; + white-space: nowrap; + font-size: var(--font-sizes-xs); + line-height: 1.125rem; +} + + .table__header { + text-align: left; + vertical-align: middle; + box-shadow: inset 0 -1px 0 0 var(--shadow-color); + --shadow-color: var(--colors-border); +} + + .table__header:is([data-pinned]) { + background: inherit; + position: sticky; + z-index: 2; +} + + .table__row:last-child td { + box-shadow: none; +} + + .table__caption { + color: var(--colors-fg-subtle); + font-weight: var(--font-weights-medium); +} +} + + .table__root--size_md { + font-size: var(--font-sizes-sm); + line-height: 1.25rem; +} + + .table__cell--size_md,.table__header--size_md { + padding-inline: var(--spacing-3); + padding-block: var(--spacing-3); +} + + .table__cell--columnBorder_true:not(:last-of-type),.table__header--columnBorder_true:not(:last-of-type) { + border-inline-end-width: 1px; +} + + .table__body--interactive_true tr:not(:disabled):hover,.table__header--variant_surface { + background: var(--colors-gray-surface-bg-hover); +} + + .table__row--variant_surface { + background: var(--colors-gray-surface-bg); +} + + .table__head--stickyHeader_true :where(tr) { + position: sticky; + z-index: 2; + top: var(--table-sticky-offset, 0); +} + + .table__row--striped_true:nth-of-type(odd) td { + background: var(--colors-gray-surface-bg-hover); +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/tabs.css b/.storybook/styles-v2/recipes/tabs.css new file mode 100644 index 0000000000..20c847cc14 --- /dev/null +++ b/.storybook/styles-v2/recipes/tabs.css @@ -0,0 +1,235 @@ +@layer recipes.slots { + @layer _base { + .tabs__root { + position: relative; + display: flex; + align-items: start; +} + + .tabs__root[data-orientation=horizontal] { + gap: var(--spacing-2); + flex-direction: column; +} + + .tabs__root[data-orientation=vertical] { + gap: var(--spacing-4); + flex-direction: row; +} + + .tabs__list { + display: flex; + position: relative; + isolation: isolate; +} + + .tabs__list[data-orientation=horizontal] { + flex-direction: row; +} + + .tabs__list[data-orientation=vertical] { + flex-direction: column; +} + + .tabs__trigger { + outline: 0; + align-items: center; + cursor: pointer; + display: flex; + font-weight: var(--font-weights-semibold); + position: relative; +} + + .tabs__trigger:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) { + cursor: not-allowed; + opacity: 0.67; + filter: grayscale(100%); +} + + .tabs__trigger:is(:focus-visible, [data-focus-visible]) { + z-index: 1; + --focus-ring-color: var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC)); +} + + .tabs__trigger:is(:focus-visible, [data-focus-visible]):is(:focus-visible, [data-focus-visible]) { + outline-width: var(--focus-ring-width, 2px); + outline-offset: var(--focus-ring-offset, 2px); + outline-style: var(--focus-ring-style, solid); + outline-color: var(--focus-ring-color); +} + + .tabs__content { + --focus-ring-color: var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC)); +} + + .tabs__content:is(:focus-visible, [data-focus-visible]) { + outline-offset: 0px; + outline-width: var(--focus-ring-width, 1px); + outline-color: var(--focus-ring-color); + outline-style: var(--focus-ring-style, solid); + border-color: var(--focus-ring-color); +} + + .tabs__content[data-orientation=horizontal] { + width: 100%; +} + + .tabs__content[data-orientation=vertical] { + height: 100%; +} + + .tabs__indicator { + z-index: -1; + width: var(--width); + height: var(--height); +} +} + + .tabs__list--size_md { + gap: var(--spacing-1); +} + + .tabs__trigger--size_md { + padding-inline: var(--spacing-4); + gap: var(--spacing-2); + font-size: var(--font-sizes-sm); + line-height: 1.25rem; + height: var(--sizes-10); + min-width: var(--sizes-10); +} + + .tabs__root--variant_line { + align-items: stretch; +} + + .tabs__list--variant_line[data-orientation=vertical] { + border-inline-start-width: 1px; +} + + .tabs__list--variant_line[data-orientation=horizontal] { + border-bottom-width: 1px; +} + + .tabs__trigger--variant_line { + color: var(--colors-fg-muted); +} + + .tabs__trigger--variant_line:is([aria-selected=true], [data-selected]) { + color: var(--colors-color-palette-plain-fg); +} + + .tabs__indicator--variant_line { + background: var(--colors-color-palette-solid-bg); +} + + .tabs__indicator--variant_line[data-orientation=horizontal] { + transform: translateY(1px); + bottom: var(--spacing-0); + height: var(--sizes-0\.5); +} + + .tabs__indicator--variant_line[data-orientation=vertical] { + transform: translateX(-1px); + left: var(--spacing-0); + width: var(--sizes-0\.5); +} + + .tabs__root--fitted_true { + align-items: stretch; +} + + .tabs__trigger--fitted_true { + flex: 1 1 0%; + text-align: center; + justify-content: center; +} + + .tabs__list--size_xs { + gap: var(--spacing-1); +} + + .tabs__trigger--size_xs { + padding-inline: var(--spacing-3); + gap: var(--spacing-2); + font-size: var(--font-sizes-xs); + line-height: 1.125rem; + height: var(--sizes-8); + min-width: var(--sizes-8); +} + + .tabs__list--size_sm { + gap: var(--spacing-1); +} + + .tabs__trigger--size_sm { + padding-inline: var(--spacing-3\.5); + gap: var(--spacing-2); + font-size: var(--font-sizes-sm); + line-height: 1.25rem; + height: var(--sizes-9); + min-width: var(--sizes-9); +} + + .tabs__list--size_lg { + gap: var(--spacing-1); +} + + .tabs__trigger--size_lg { + padding-inline: var(--spacing-4\.5); + gap: var(--spacing-2); + font-size: var(--font-sizes-md); + line-height: 1.5rem; + height: var(--sizes-11); + min-width: var(--sizes-11); +} + + .tabs__trigger--variant_subtle { + color: var(--colors-fg-muted); +} + + .tabs__trigger--variant_subtle:is([aria-selected=true], [data-selected]) { + color: var(--colors-color-palette-subtle-fg); +} + + .tabs__indicator--variant_subtle { + background: var(--colors-color-palette-subtle-bg); + border-radius: var(--radii-l2); + color: var(--colors-color-palette-subtle-fg); +} + + .tabs__list--variant_enclosed { + padding: var(--spacing-1); + border-radius: var(--radii-l3); + box-shadow: inset 0 0 0px 1px var(--shadow-color); + --shadow-color: var(--colors-border); +} + + :root .tabs__list--variant_enclosed,.light .tabs__list--variant_enclosed { + background: var(--colors-gray-2); +} + + .dark .tabs__list--variant_enclosed { + background: var(--colors-gray-1); +} + + .tabs__trigger--variant_enclosed { + color: var(--colors-fg-muted); +} + + .tabs__trigger--variant_enclosed:is([aria-selected=true], [data-selected]) { + color: var(--colors-color-palette-surface-fg); +} + + .tabs__indicator--variant_enclosed { + border-radius: var(--radii-l2); +} + + :root .tabs__indicator--variant_enclosed,.light .tabs__indicator--variant_enclosed { + background: var(--colors-white); + box-shadow: var(--shadows-xs); +} + + .dark .tabs__indicator--variant_enclosed { + background: var(--colors-gray-2); + box-shadow: none; +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/tags-input.css b/.storybook/styles-v2/recipes/tags-input.css new file mode 100644 index 0000000000..a7a5ea0269 --- /dev/null +++ b/.storybook/styles-v2/recipes/tags-input.css @@ -0,0 +1,310 @@ +@layer recipes.slots { + @layer _base { + .tags-input__root { + gap: var(--spacing-1\.5); + display: flex; + flex-direction: column; + width: var(--sizes-full); +} + + .tags-input__label { + font-size: var(--font-sizes-sm); + line-height: 1.25rem; + font-weight: var(--font-weights-medium); +} + + .tags-input__control { + --focus-color: var(--colors-color-palette-solid-bg); + --error-color: var(--colors-error); + --input-height: var(--tags-input-height); + padding-inline: var(--tags-input-px); + border-radius: var(--radii-l2); + align-items: center; + display: flex; + flex-wrap: wrap; + position: relative; + --transition-duration: var(--durations-normal); + transition-duration: var(--durations-normal); + --transition-prop: border-color, box-shadow; + transition-property: border-color, box-shadow; + min-height: var(--tags-input-height); +} + + .tags-input__control:is(:user-invalid, [data-invalid], [aria-invalid=true]) { + border-color: var(--error-color); +} + + .tags-input__control:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) { + opacity: 0.5; +} + + .tags-input__input { + padding-inline: calc(var(--tags-input-item-px) / 1.25); + flex: 1 1 0%; + outline: var(--borders-none); + height: var(--tags-input-item-height); + min-width: var(--sizes-20); +} + + .tags-input__input:is(:read-only, [data-read-only], [aria-readonly=true]) { + display: none; +} + + .tags-input__clearTrigger { + border-radius: var(--radii-l1); + width: calc(var(--tags-input-item-height) / 1.5); + height: calc(var(--tags-input-item-height) / 1.5); + align-items: center; + color: var(--colors-fg-muted); + display: flex; + --focus-ring-width: 2px; + --focus-ring-color: var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC)); +} + + .tags-input__clearTrigger:is(:focus-visible, [data-focus-visible]) { + outline-offset: 0px; + outline-width: var(--focus-ring-width, 1px); + outline-color: var(--focus-ring-color); + outline-style: var(--focus-ring-style, solid); + border-color: var(--focus-ring-color); +} + + .tags-input__clearTrigger { + justify-content: center; + cursor: button; +} + + .tags-input__clearTrigger:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) { + cursor: initial; +} + + .tags-input__clearTrigger :where(svg) { + width: var(--sizes-5); + height: var(--sizes-5); +} + + .tags-input__itemPreview { + border-radius: var(--radii-l1); + align-items: center; + display: inline-flex; + -webkit-user-select: none; + user-select: none; +} + + .tags-input__itemPreview,.tags-input__itemInput { + padding-inline: var(--tags-input-item-px); + height: var(--tags-input-item-height); +} + + .tags-input__itemInput { + outline: var(--borders-none); + line-height: 1; + vertical-align: middle; + min-width: 2ch; +} + + .tags-input__itemText { + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; +} + + .tags-input__itemDeleteTrigger { + border-radius: var(--radii-l1); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; +} + + .tags-input__itemDeleteTrigger:not(:disabled):hover { + background: var(--colors-color-palette-plain-bg-hover); +} +} + + .tags-input__root--size_md { + --tags-input-height: var(--sizes-10); + --tags-input-px: var(--spacing-1\.5); + --tags-input-item-height: var(--sizes-7); + --tags-input-item-px: var(--spacing-2); + font-size: var(--font-sizes-sm); + line-height: 1.25rem; +} + + .tags-input__root--size_md :where(svg) { + width: var(--sizes-3\.5); + height: var(--sizes-3\.5); +} + + .tags-input__control--size_md { + gap: var(--spacing-1\.5); +} + + .tags-input__itemPreview--size_md { + gap: var(--spacing-1); +} + + .tags-input__itemDeleteTrigger--size_md { + width: var(--sizes-5); + height: var(--sizes-5); + margin-inline-end: calc(var(--spacing-1) * -1); +} + + .tags-input__control--variant_outline { + border-width: 1px; +} + + .tags-input__control--variant_outline:is(:focus, [data-focus]) { + border-color: var(--focus-color); + outline-width: 1px; + outline-style: solid; + outline-color: var(--focus-color); +} + + .tags-input__control--variant_outline:is(:focus, [data-focus]):is(:user-invalid, [data-invalid], [aria-invalid=true]) { + border-color: var(--error-color); + outline-color: var(--error-color); +} + + .tags-input__itemPreview--variant_outline { + background: var(--colors-color-palette-subtle-bg); + color: var(--colors-color-palette-subtle-fg); +} + + .tags-input__itemPreview--variant_outline[data-highlighted] { + background: var(--colors-color-palette-subtle-bg-hover); +} + + .tags-input__control--variant_subtle { + background: var(--colors-gray-subtle-bg); + border-width: 1px; + border-color: transparent; + color: var(--colors-gray-subtle-fg); +} + + .tags-input__control--variant_subtle:is(:focus, [data-focus]) { + border-color: var(--focus-color); + outline-width: 1px; + outline-style: solid; + outline-color: var(--focus-color); +} + + .tags-input__control--variant_subtle:is(:focus, [data-focus]):is(:user-invalid, [data-invalid], [aria-invalid=true]) { + border-color: var(--error-color); + outline-color: var(--error-color); +} + + .tags-input__itemPreview--variant_subtle { + background: var(--colors-gray-surface-bg); + border-width: 1px; +} + + .tags-input__itemPreview--variant_subtle[data-highlighted] { + background: var(--colors-gray-surface-bg-hover); + border-color: var(--colors-gray-surface-border-hover); +} + + .tags-input__control--variant_surface { + background: var(--colors-gray-surface-bg); + border-width: 1px; + border-color: var(--colors-gray-surface-border); +} + + .tags-input__control--variant_surface:is(:focus, [data-focus]) { + border-color: var(--focus-color); + outline-width: 1px; + outline-style: solid; + outline-color: var(--focus-color); +} + + .tags-input__control--variant_surface:is(:focus, [data-focus]):is(:user-invalid, [data-invalid], [aria-invalid=true]) { + border-color: var(--error-color); + outline-color: var(--error-color); +} + + .tags-input__itemPreview--variant_surface { + background: var(--colors-color-palette-subtle-bg); + color: var(--colors-color-palette-subtle-fg); +} + + .tags-input__itemPreview--variant_surface[data-highlighted] { + background: var(--colors-color-palette-subtle-bg-hover); +} + + .tags-input__root--size_xs { + --tags-input-height: var(--sizes-8); + --tags-input-px: var(--spacing-1\.5); + --tags-input-item-height: var(--sizes-5); + --tags-input-item-px: var(--spacing-1); + font-size: var(--font-sizes-xs); + line-height: 1.125rem; +} + + .tags-input__root--size_xs :where(svg) { + width: var(--sizes-3); + height: var(--sizes-3); +} + + .tags-input__control--size_xs,.tags-input__itemPreview--size_xs { + gap: var(--spacing-1); +} + + .tags-input__itemDeleteTrigger--size_xs { + width: var(--sizes-3\.5); + height: var(--sizes-3\.5); + margin-inline-end: -1px; +} + + .tags-input__root--size_sm { + --tags-input-height: var(--sizes-9); + --tags-input-px: var(--spacing-1\.5); + --tags-input-item-height: var(--sizes-6); + --tags-input-item-px: var(--spacing-1\.5); + font-size: var(--font-sizes-sm); + line-height: 1.25rem; +} + + .tags-input__root--size_sm :where(svg) { + width: var(--sizes-3\.5); + height: var(--sizes-3\.5); +} + + .tags-input__control--size_sm,.tags-input__itemPreview--size_sm { + gap: var(--spacing-1); +} + + .tags-input__itemDeleteTrigger--size_sm { + width: var(--sizes-4\.5); + height: var(--sizes-4\.5); + margin-inline-end: calc(var(--spacing-0\.5) * -1); +} + + .tags-input__root--size_lg { + --tags-input-height: var(--sizes-11); + --tags-input-px: var(--spacing-1\.5); + --tags-input-item-height: var(--sizes-8); + --tags-input-item-px: var(--spacing-2\.5); + font-size: var(--font-sizes-md); + line-height: 1.5rem; +} + + .tags-input__root--size_lg :where(svg) { + width: var(--sizes-4); + height: var(--sizes-4); +} + + .tags-input__control--size_lg { + gap: var(--spacing-1\.5); +} + + .tags-input__itemPreview--size_lg { + gap: var(--spacing-1); +} + + .tags-input__itemDeleteTrigger--size_lg { + width: var(--sizes-6); + height: var(--sizes-6); + margin-inline-end: calc(var(--spacing-1\.5) * -1); +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/textarea.css b/.storybook/styles-v2/recipes/textarea.css new file mode 100644 index 0000000000..e5df981d4a --- /dev/null +++ b/.storybook/styles-v2/recipes/textarea.css @@ -0,0 +1,148 @@ +@layer recipes { + @layer _base { + .textarea { + border-radius: var(--radii-l2); + outline: 0; + transition-property: box-shadow, border-color; + transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1)); + transition-duration: var(--transition-duration, 150ms); + appearance: none; + -webkit-appearance: none; + position: relative; + --transition-prop: box-shadow, border-color; + min-width: var(--sizes-0); + width: 100%; +} + + .textarea:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) { + cursor: not-allowed; + opacity: 0.67; + filter: grayscale(100%); +} +} + + .textarea--size_md { + padding-inline: var(--spacing-3); + padding-block: 7px; + font-size: var(--font-sizes-md); + line-height: 1.5rem; + scroll-padding-bottom: 7px; +} + + .textarea--variant_surface { + background: var(--colors-gray-surface-bg); + border-width: 1px; + border-color: var(--colors-gray-surface-border); + --focus-ring-color: var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC)); +} + + .textarea--variant_surface:is(:focus-visible, [data-focus-visible]) { + outline-offset: 0px; + outline-width: var(--focus-ring-width, 1px); + outline-color: var(--focus-ring-color); + outline-style: var(--focus-ring-style, solid); + border-color: var(--focus-ring-color); +} + + .textarea--variant_surface:is(:user-invalid, [data-invalid], [aria-invalid=true]) { + border-color: var(--colors-error); + --focus-ring-color-prop: var(--colors-error); +} + + .textarea--variant_outline { + border-width: 1px; + border-color: var(--colors-gray-outline-border); + --focus-ring-color: var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC)); +} + + .textarea--variant_outline:is(:focus-visible, [data-focus-visible]) { + outline-offset: 0px; + outline-width: var(--focus-ring-width, 1px); + outline-color: var(--focus-ring-color); + outline-style: var(--focus-ring-style, solid); + border-color: var(--focus-ring-color); +} + + .textarea--variant_outline:is(:user-invalid, [data-invalid], [aria-invalid=true]) { + border-color: var(--colors-error); + --focus-ring-color-prop: var(--colors-error); +} + + .textarea--variant_subtle { + background: var(--colors-gray-subtle-bg); + border-width: 1px; + border-color: transparent; + color: var(--colors-gray-subtle-fg); + --focus-ring-color: var(--focus-ring-color-prop, var(--global-color-focus-ring, #005FCC)); +} + + .textarea--variant_subtle:is(:focus-visible, [data-focus-visible]) { + outline-offset: 0px; + outline-width: var(--focus-ring-width, 1px); + outline-color: var(--focus-ring-color); + outline-style: var(--focus-ring-style, solid); + border-color: var(--focus-ring-color); +} + + .textarea--variant_subtle:is(:user-invalid, [data-invalid], [aria-invalid=true]) { + border-color: var(--colors-error); + --focus-ring-color-prop: var(--colors-error); +} + + .textarea--variant_flushed { + border-radius: 0; + padding-inline: var(--spacing-0); + color: var(--colors-fg-default); + border-bottom-width: 1px; + border-bottom-color: var(--colors-gray-outline-border); +} + + .textarea--variant_flushed:is(:user-invalid, [data-invalid], [aria-invalid=true]) { + border-color: var(--colors-error); +} + + .textarea--variant_flushed:is(:focus, [data-focus]) { + border-color: var(--colors-color-palette-solid-bg); + --shadow-color: var(--colors-color-palette-solid-bg); + box-shadow: 0 1px 0 0 var(--shadow-color); +} + + .textarea--variant_flushed:is(:focus, [data-focus]):is(:user-invalid, [data-invalid], [aria-invalid=true]) { + border-color: var(--colors-error); + --shadow-color: var(--colors-error); +} + + .textarea--size_xs { + padding-inline: var(--spacing-2); + padding-block: 5px; + scroll-padding-bottom: 5px; +} + + .textarea--size_xs,.textarea--size_sm { + font-size: var(--font-sizes-sm); + line-height: 1.25rem; +} + + .textarea--size_sm { + padding-inline: var(--spacing-2\.5); + padding-block: 7px; + scroll-padding-bottom: 7px; +} + + .textarea--size_lg { + padding-inline: var(--spacing-3\.5); + font-size: var(--font-sizes-md); + line-height: 1.5rem; +} + + .textarea--size_lg,.textarea--size_xl { + padding-block: 9px; + scroll-padding-bottom: 9px; +} + + .textarea--size_xl { + padding-inline: var(--spacing-4); + font-size: var(--font-sizes-lg); + line-height: 1.75rem; +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/toggle-group.css b/.storybook/styles-v2/recipes/toggle-group.css new file mode 100644 index 0000000000..0c338f04e0 --- /dev/null +++ b/.storybook/styles-v2/recipes/toggle-group.css @@ -0,0 +1,8 @@ +@layer recipes.slots { + .toggle-group__root--variant_outline { + padding: var(--spacing-1); + border-radius: var(--radii-l3); + border-width: 1px; + gap: var(--spacing-1); +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/reset.css b/.storybook/styles-v2/reset.css new file mode 100644 index 0000000000..2bd6205e4b --- /dev/null +++ b/.storybook/styles-v2/reset.css @@ -0,0 +1,173 @@ +@layer reset { + html,:host { + --font-fallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; + line-height: 1.5; + -webkit-text-size-adjust: 100%; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -moz-tab-size: 4; + tab-size: 4; + font-family: var(--global-font-body, var(--font-fallback)); + -webkit-tap-highlight-color: transparent; +} + + *,::before,::after,::backdrop,::file-selector-button { + margin: 0px; + padding: 0px; + border-width: 0px; + border-style: solid; + border-color: var(--global-color-border, currentcolor); + box-sizing: border-box; +} + + hr { + color: inherit; + height: 0px; + border-top-width: 1px; +} + + body { + line-height: inherit; + height: 100%; +} + + img { + border-style: none; +} + + img,svg,video,canvas,audio,iframe,embed,object { + display: block; + vertical-align: middle; +} + + img,video { + max-width: 100%; + height: auto; +} + + h1,h2,h3,h4,h5,h6 { + text-wrap: balance; + font-size: inherit; + font-weight: inherit; +} + + p,h1,h2,h3,h4,h5,h6 { + overflow-wrap: break-word; +} + + ol,ul,menu { + list-style: none; +} + + button,input:where([type='button'], [type='reset'], [type='submit']),::file-selector-button { + appearance: button; + -webkit-appearance: button; +} + + button,input,optgroup,select,textarea,::file-selector-button { + font: inherit; + background: transparent; + font-feature-settings: inherit; + font-variation-settings: inherit; + letter-spacing: inherit; + color: inherit; +} + + ::placeholder { + --placeholder-fallback: rgba(0, 0, 0, 0.5); + opacity: 1; + color: var(--global-color-placeholder, var(--placeholder-fallback)); +} + + @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) { + ::placeholder { + --placeholder-fallback: color-mix(in oklab, currentcolor 50%, transparent); +} +} + + ::selection { + background-color: var(--global-color-selection, rgba(0, 115, 255, 0.3)); +} + + textarea { + resize: vertical; +} + + table { + border-color: inherit; + text-indent: 0px; + border-collapse: collapse; +} + + summary { + display: list-item; +} + + small { + font-size: 80%; +} + + sub,sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + + sub { + bottom: -0.25em; +} + + sup { + top: -0.5em; +} + + dialog { + padding: 0px; +} + + a { + text-decoration: inherit; + color: inherit; +} + + abbr:where([title]) { + text-decoration: underline dotted; +} + + b,strong { + font-weight: bolder; +} + + code,kbd,samp,pre { + --font-mono-fallback: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New'; + font-family: var(--global-font-mono, var(--font-mono-fallback)); + font-size: 1em; + font-feature-settings: normal; + font-variation-settings: normal; +} + + progress { + vertical-align: baseline; +} + + ::-webkit-search-decoration,::-webkit-search-cancel-button { + -webkit-appearance: none; +} + + ::-webkit-inner-spin-button,::-webkit-outer-spin-button { + height: auto; +} + + :-moz-ui-invalid { + box-shadow: none; +} + + :-moz-focusring { + outline: auto; +} + + [hidden]:where(:not([hidden='until-found'])) { + display: none !important; +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/tokens.css b/.storybook/styles-v2/tokens.css new file mode 100644 index 0000000000..1082a03cf5 --- /dev/null +++ b/.storybook/styles-v2/tokens.css @@ -0,0 +1,3324 @@ +@layer tokens { + :where(:root, :host) { + --aspect-ratios-square: 1 / 1; + --aspect-ratios-landscape: 4 / 3; + --aspect-ratios-portrait: 3 / 4; + --aspect-ratios-wide: 16 / 9; + --aspect-ratios-ultrawide: 18 / 5; + --aspect-ratios-golden: 1.618 / 1; + --borders-none: none; + --easings-default: cubic-bezier(0.4, 0, 0.2, 1); + --easings-linear: linear; + --easings-in: cubic-bezier(0.4, 0, 1, 1); + --easings-out: cubic-bezier(0, 0, 0.2, 1); + --easings-in-out: cubic-bezier(0.4, 0, 0.2, 1); + --radii-xs: 0.125rem; + --radii-sm: 0.25rem; + --radii-md: 0.375rem; + --radii-lg: 0.5rem; + --radii-xl: 0.75rem; + --radii-2xl: 1rem; + --radii-3xl: 1.5rem; + --radii-4xl: 2rem; + --radii-full: 9999px; + --font-weights-thin: 100; + --font-weights-extralight: 200; + --font-weights-light: 300; + --font-weights-normal: 400; + --font-weights-medium: 500; + --font-weights-semibold: 600; + --font-weights-bold: 700; + --font-weights-extrabold: 800; + --font-weights-black: 900; + --line-heights-none: 1; + --line-heights-tight: 1.25; + --line-heights-snug: 1.375; + --line-heights-normal: 1.5; + --line-heights-relaxed: 1.625; + --line-heights-loose: 2; + --fonts-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --fonts-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; + --fonts-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + --letter-spacings-tighter: -0.05em; + --letter-spacings-tight: -0.025em; + --letter-spacings-normal: 0em; + --letter-spacings-wide: 0.025em; + --letter-spacings-wider: 0.05em; + --letter-spacings-widest: 0.1em; + --font-sizes-2xs: 0.5rem; + --font-sizes-xs: 0.75rem; + --font-sizes-sm: 0.875rem; + --font-sizes-md: 1rem; + --font-sizes-lg: 1.125rem; + --font-sizes-xl: 1.25rem; + --font-sizes-2xl: 1.5rem; + --font-sizes-3xl: 1.875rem; + --font-sizes-4xl: 2.25rem; + --font-sizes-5xl: 3rem; + --font-sizes-6xl: 3.75rem; + --font-sizes-7xl: 4.5rem; + --font-sizes-8xl: 6rem; + --font-sizes-9xl: 8rem; + --shadows-2xs: 0 1px rgb(0 0 0 / 0.05); + --shadows-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); + --shadows-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); + --shadows-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --shadows-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --shadows-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); + --shadows-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); + --shadows-inset-2xs: inset 0 1px rgb(0 0 0 / 0.05); + --shadows-inset-xs: inset 0 1px 1px rgb(0 0 0 / 0.05); + --shadows-inset-sm: inset 0 2px 4px rgb(0 0 0 / 0.05); + --blurs-xs: 4px; + --blurs-sm: 8px; + --blurs-md: 12px; + --blurs-lg: 16px; + --blurs-xl: 24px; + --blurs-2xl: 40px; + --blurs-3xl: 64px; + --spacing-0: 0rem; + --spacing-1: 0.25rem; + --spacing-2: 0.5rem; + --spacing-3: 0.75rem; + --spacing-4: 1rem; + --spacing-5: 1.25rem; + --spacing-6: 1.5rem; + --spacing-7: 1.75rem; + --spacing-8: 2rem; + --spacing-9: 2.25rem; + --spacing-10: 2.5rem; + --spacing-11: 2.75rem; + --spacing-12: 3rem; + --spacing-14: 3.5rem; + --spacing-16: 4rem; + --spacing-20: 5rem; + --spacing-24: 6rem; + --spacing-28: 7rem; + --spacing-32: 8rem; + --spacing-36: 9rem; + --spacing-40: 10rem; + --spacing-44: 11rem; + --spacing-48: 12rem; + --spacing-52: 13rem; + --spacing-56: 14rem; + --spacing-60: 15rem; + --spacing-64: 16rem; + --spacing-72: 18rem; + --spacing-80: 20rem; + --spacing-96: 24rem; + --spacing-0\.5: 0.125rem; + --spacing-1\.5: 0.375rem; + --spacing-2\.5: 0.625rem; + --spacing-3\.5: 0.875rem; + --spacing-4\.5: 1.125rem; + --spacing-5\.5: 1.375rem; + --sizes-0: 0rem; + --sizes-1: 0.25rem; + --sizes-2: 0.5rem; + --sizes-3: 0.75rem; + --sizes-4: 1rem; + --sizes-5: 1.25rem; + --sizes-6: 1.5rem; + --sizes-7: 1.75rem; + --sizes-8: 2rem; + --sizes-9: 2.25rem; + --sizes-10: 2.5rem; + --sizes-11: 2.75rem; + --sizes-12: 3rem; + --sizes-14: 3.5rem; + --sizes-16: 4rem; + --sizes-20: 5rem; + --sizes-24: 6rem; + --sizes-28: 7rem; + --sizes-32: 8rem; + --sizes-36: 9rem; + --sizes-40: 10rem; + --sizes-44: 11rem; + --sizes-48: 12rem; + --sizes-52: 13rem; + --sizes-56: 14rem; + --sizes-60: 15rem; + --sizes-64: 16rem; + --sizes-72: 18rem; + --sizes-80: 20rem; + --sizes-96: 24rem; + --sizes-0\.5: 0.125rem; + --sizes-1\.5: 0.375rem; + --sizes-2\.5: 0.625rem; + --sizes-3\.5: 0.875rem; + --sizes-4\.5: 1.125rem; + --sizes-5\.5: 1.375rem; + --sizes-xs: 20rem; + --sizes-sm: 24rem; + --sizes-md: 28rem; + --sizes-lg: 32rem; + --sizes-xl: 36rem; + --sizes-2xl: 42rem; + --sizes-3xl: 48rem; + --sizes-4xl: 56rem; + --sizes-5xl: 64rem; + --sizes-6xl: 72rem; + --sizes-7xl: 80rem; + --sizes-8xl: 90rem; + --sizes-prose: 65ch; + --sizes-full: 100%; + --sizes-min: min-content; + --sizes-max: max-content; + --sizes-fit: fit-content; + --sizes-breakpoint-sm: 640px; + --sizes-breakpoint-md: 768px; + --sizes-breakpoint-lg: 1024px; + --sizes-breakpoint-xl: 1280px; + --sizes-breakpoint-2xl: 1536px; + --animations-spin: spin 1s linear infinite; + --animations-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; + --animations-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + --animations-bounce: bounce 1s infinite; + --colors-black: #000000; + --colors-black-a1: rgba(0, 0, 0, 0.05); + --colors-black-a2: rgba(0, 0, 0, 0.1); + --colors-black-a3: rgba(0, 0, 0, 0.15); + --colors-black-a4: rgba(0, 0, 0, 0.2); + --colors-black-a5: rgba(0, 0, 0, 0.3); + --colors-black-a6: rgba(0, 0, 0, 0.4); + --colors-black-a7: rgba(0, 0, 0, 0.5); + --colors-black-a8: rgba(0, 0, 0, 0.6); + --colors-black-a9: rgba(0, 0, 0, 0.7); + --colors-black-a10: rgba(0, 0, 0, 0.8); + --colors-black-a11: rgba(0, 0, 0, 0.9); + --colors-black-a12: rgba(0, 0, 0, 0.95); + --colors-white: #ffffff; + --colors-white-a1: rgba(255, 255, 255, 0.05); + --colors-white-a2: rgba(255, 255, 255, 0.1); + --colors-white-a3: rgba(255, 255, 255, 0.15); + --colors-white-a4: rgba(255, 255, 255, 0.2); + --colors-white-a5: rgba(255, 255, 255, 0.3); + --colors-white-a6: rgba(255, 255, 255, 0.4); + --colors-white-a7: rgba(255, 255, 255, 0.5); + --colors-white-a8: rgba(255, 255, 255, 0.6); + --colors-white-a9: rgba(255, 255, 255, 0.7); + --colors-white-a10: rgba(255, 255, 255, 0.8); + --colors-white-a11: rgba(255, 255, 255, 0.9); + --colors-white-a12: rgba(255, 255, 255, 0.95); + --durations-fastest: 50ms; + --durations-faster: 100ms; + --durations-fast: 150ms; + --durations-normal: 200ms; + --durations-slow: 250ms; + --durations-slower: 300ms; + --durations-slowest: 400ms; + --z-index-hide: -1; + --z-index-base: 0; + --z-index-docked: 10; + --z-index-dropdown: 1000; + --z-index-sticky: 1100; + --z-index-banner: 1200; + --z-index-overlay: 1300; + --z-index-modal: 1400; + --z-index-popover: 1500; + --z-index-skip-link: 1600; + --z-index-toast: 1700; + --z-index-tooltip: 1800; + --breakpoints-sm: 640px; + --breakpoints-md: 768px; + --breakpoints-lg: 1024px; + --breakpoints-xl: 1280px; + --breakpoints-2xl: 1536px; + --radii-l1: var(--radii-xs); + --radii-l2: var(--radii-sm); + --radii-l3: var(--radii-md); +} + + :where(:root, .light) { + --colors-amber-1: #fefdfb; + --colors-amber-2: #fefbe9; + --colors-amber-3: #fff7c2; + --colors-amber-4: #ffee9c; + --colors-amber-5: #fbe577; + --colors-amber-6: #f3d673; + --colors-amber-7: #e9c162; + --colors-amber-8: #e2a336; + --colors-amber-9: #ffc53d; + --colors-amber-10: #ffba18; + --colors-amber-11: #ab6400; + --colors-amber-12: #4f3422; + --colors-amber-a1: #c0800004; + --colors-amber-a2: #f4d10016; + --colors-amber-a3: #ffde003d; + --colors-amber-a4: #ffd40063; + --colors-amber-a5: #f8cf0088; + --colors-amber-a6: #eab5008c; + --colors-amber-a7: #dc9b009d; + --colors-amber-a8: #da8a00c9; + --colors-amber-a9: #ffb300c2; + --colors-amber-a10: #ffb300e7; + --colors-amber-a11: #ab6400; + --colors-amber-a12: #341500dd; + --colors-amber-solid-bg: var(--colors-amber-9); + --colors-amber-solid-bg-hover: var(--colors-amber-10); + --colors-amber-solid-fg: var(--colors-gray-12); + --colors-amber-subtle-bg: var(--colors-amber-a3); + --colors-amber-subtle-bg-hover: var(--colors-amber-a4); + --colors-amber-subtle-bg-active: var(--colors-amber-a5); + --colors-amber-subtle-fg: var(--colors-amber-a11); + --colors-amber-surface-bg: var(--colors-amber-a2); + --colors-amber-surface-bg-active: var(--colors-amber-a3); + --colors-amber-surface-border: var(--colors-amber-a6); + --colors-amber-surface-border-hover: var(--colors-amber-a7); + --colors-amber-surface-fg: var(--colors-amber-a11); + --colors-amber-outline-bg-hover: var(--colors-amber-a2); + --colors-amber-outline-bg-active: var(--colors-amber-a3); + --colors-amber-outline-border: var(--colors-amber-a7); + --colors-amber-outline-fg: var(--colors-amber-a11); + --colors-amber-plain-bg-hover: var(--colors-amber-a3); + --colors-amber-plain-bg-active: var(--colors-amber-a4); + --colors-amber-plain-fg: var(--colors-amber-a11); + --colors-blue-1: #fbfdff; + --colors-blue-2: #f4faff; + --colors-blue-3: #e6f4fe; + --colors-blue-4: #d5efff; + --colors-blue-5: #c2e5ff; + --colors-blue-6: #acd8fc; + --colors-blue-7: #8ec8f6; + --colors-blue-8: #5eb1ef; + --colors-blue-9: #0090ff; + --colors-blue-10: #0588f0; + --colors-blue-11: #0d74ce; + --colors-blue-12: #113264; + --colors-blue-a1: #0080ff04; + --colors-blue-a2: #008cff0b; + --colors-blue-a3: #008ff519; + --colors-blue-a4: #009eff2a; + --colors-blue-a5: #0093ff3d; + --colors-blue-a6: #0088f653; + --colors-blue-a7: #0083eb71; + --colors-blue-a8: #0084e6a1; + --colors-blue-a9: #0090ff; + --colors-blue-a10: #0086f0fa; + --colors-blue-a11: #006dcbf2; + --colors-blue-a12: #002359ee; + --colors-blue-solid-bg: var(--colors-blue-9); + --colors-blue-solid-bg-hover: var(--colors-blue-10); + --colors-blue-solid-fg: white; + --colors-blue-subtle-bg: var(--colors-blue-a3); + --colors-blue-subtle-bg-hover: var(--colors-blue-a4); + --colors-blue-subtle-bg-active: var(--colors-blue-a5); + --colors-blue-subtle-fg: var(--colors-blue-a11); + --colors-blue-surface-bg: var(--colors-blue-a2); + --colors-blue-surface-bg-active: var(--colors-blue-a3); + --colors-blue-surface-border: var(--colors-blue-a6); + --colors-blue-surface-border-hover: var(--colors-blue-a7); + --colors-blue-surface-fg: var(--colors-blue-a11); + --colors-blue-outline-bg-hover: var(--colors-blue-a2); + --colors-blue-outline-bg-active: var(--colors-blue-a3); + --colors-blue-outline-border: var(--colors-blue-a7); + --colors-blue-outline-fg: var(--colors-blue-a11); + --colors-blue-plain-bg-hover: var(--colors-blue-a3); + --colors-blue-plain-bg-active: var(--colors-blue-a4); + --colors-blue-plain-fg: var(--colors-blue-a11); + --colors-bronze-1: #fdfcfc; + --colors-bronze-2: #fdf7f5; + --colors-bronze-3: #f6edea; + --colors-bronze-4: #efe4df; + --colors-bronze-5: #e7d9d3; + --colors-bronze-6: #dfcdc5; + --colors-bronze-7: #d3bcb3; + --colors-bronze-8: #c2a499; + --colors-bronze-9: #a18072; + --colors-bronze-10: #957468; + --colors-bronze-11: #7d5e54; + --colors-bronze-12: #43302b; + --colors-bronze-a1: #55000003; + --colors-bronze-a2: #cc33000a; + --colors-bronze-a3: #92250015; + --colors-bronze-a4: #80280020; + --colors-bronze-a5: #7423002c; + --colors-bronze-a6: #7324003a; + --colors-bronze-a7: #6c1f004c; + --colors-bronze-a8: #671c0066; + --colors-bronze-a9: #551a008d; + --colors-bronze-a10: #4c150097; + --colors-bronze-a11: #3d0f00ab; + --colors-bronze-a12: #1d0600d4; + --colors-bronze-solid-bg: var(--colors-bronze-9); + --colors-bronze-solid-bg-hover: var(--colors-bronze-10); + --colors-bronze-solid-fg: white; + --colors-bronze-subtle-bg: var(--colors-bronze-a3); + --colors-bronze-subtle-bg-hover: var(--colors-bronze-a4); + --colors-bronze-subtle-bg-active: var(--colors-bronze-a5); + --colors-bronze-subtle-fg: var(--colors-bronze-a11); + --colors-bronze-surface-bg: var(--colors-bronze-a2); + --colors-bronze-surface-bg-active: var(--colors-bronze-a3); + --colors-bronze-surface-border: var(--colors-bronze-a6); + --colors-bronze-surface-border-hover: var(--colors-bronze-a7); + --colors-bronze-surface-fg: var(--colors-bronze-a11); + --colors-bronze-outline-bg-hover: var(--colors-bronze-a2); + --colors-bronze-outline-bg-active: var(--colors-bronze-a3); + --colors-bronze-outline-border: var(--colors-bronze-a7); + --colors-bronze-outline-fg: var(--colors-bronze-a11); + --colors-bronze-plain-bg-hover: var(--colors-bronze-a3); + --colors-bronze-plain-bg-active: var(--colors-bronze-a4); + --colors-bronze-plain-fg: var(--colors-bronze-a11); + --colors-brown-1: #fefdfc; + --colors-brown-2: #fcf9f6; + --colors-brown-3: #f6eee7; + --colors-brown-4: #f0e4d9; + --colors-brown-5: #ebdaca; + --colors-brown-6: #e4cdb7; + --colors-brown-7: #dcbc9f; + --colors-brown-8: #cea37e; + --colors-brown-9: #ad7f58; + --colors-brown-10: #a07553; + --colors-brown-11: #815e46; + --colors-brown-12: #3e332e; + --colors-brown-a1: #aa550003; + --colors-brown-a2: #aa550009; + --colors-brown-a3: #a04b0018; + --colors-brown-a4: #9b4a0026; + --colors-brown-a5: #9f4d0035; + --colors-brown-a6: #a04e0048; + --colors-brown-a7: #a34e0060; + --colors-brown-a8: #9f4a0081; + --colors-brown-a9: #823c00a7; + --colors-brown-a10: #723300ac; + --colors-brown-a11: #522100b9; + --colors-brown-a12: #140600d1; + --colors-brown-solid-bg: var(--colors-brown-9); + --colors-brown-solid-bg-hover: var(--colors-brown-10); + --colors-brown-solid-fg: white; + --colors-brown-subtle-bg: var(--colors-brown-a3); + --colors-brown-subtle-bg-hover: var(--colors-brown-a4); + --colors-brown-subtle-bg-active: var(--colors-brown-a5); + --colors-brown-subtle-fg: var(--colors-brown-a11); + --colors-brown-surface-bg: var(--colors-brown-a2); + --colors-brown-surface-bg-active: var(--colors-brown-a3); + --colors-brown-surface-border: var(--colors-brown-a6); + --colors-brown-surface-border-hover: var(--colors-brown-a7); + --colors-brown-surface-fg: var(--colors-brown-a11); + --colors-brown-outline-bg-hover: var(--colors-brown-a2); + --colors-brown-outline-bg-active: var(--colors-brown-a3); + --colors-brown-outline-border: var(--colors-brown-a7); + --colors-brown-outline-fg: var(--colors-brown-a11); + --colors-brown-plain-bg-hover: var(--colors-brown-a3); + --colors-brown-plain-bg-active: var(--colors-brown-a4); + --colors-brown-plain-fg: var(--colors-brown-a11); + --colors-crimson-1: #fffcfd; + --colors-crimson-2: #fef7f9; + --colors-crimson-3: #ffe9f0; + --colors-crimson-4: #fedce7; + --colors-crimson-5: #facedd; + --colors-crimson-6: #f3bed1; + --colors-crimson-7: #eaacc3; + --colors-crimson-8: #e093b2; + --colors-crimson-9: #e93d82; + --colors-crimson-10: #df3478; + --colors-crimson-11: #cb1d63; + --colors-crimson-12: #621639; + --colors-crimson-a1: #ff005503; + --colors-crimson-a2: #e0004008; + --colors-crimson-a3: #ff005216; + --colors-crimson-a4: #f8005123; + --colors-crimson-a5: #e5004f31; + --colors-crimson-a6: #d0004b41; + --colors-crimson-a7: #bf004753; + --colors-crimson-a8: #b6004a6c; + --colors-crimson-a9: #e2005bc2; + --colors-crimson-a10: #d70056cb; + --colors-crimson-a11: #c4004fe2; + --colors-crimson-a12: #530026e9; + --colors-crimson-solid-bg: var(--colors-crimson-9); + --colors-crimson-solid-bg-hover: var(--colors-crimson-10); + --colors-crimson-solid-fg: white; + --colors-crimson-subtle-bg: var(--colors-crimson-a3); + --colors-crimson-subtle-bg-hover: var(--colors-crimson-a4); + --colors-crimson-subtle-bg-active: var(--colors-crimson-a5); + --colors-crimson-subtle-fg: var(--colors-crimson-a11); + --colors-crimson-surface-bg: var(--colors-crimson-a2); + --colors-crimson-surface-bg-active: var(--colors-crimson-a3); + --colors-crimson-surface-border: var(--colors-crimson-a6); + --colors-crimson-surface-border-hover: var(--colors-crimson-a7); + --colors-crimson-surface-fg: var(--colors-crimson-a11); + --colors-crimson-outline-bg-hover: var(--colors-crimson-a2); + --colors-crimson-outline-bg-active: var(--colors-crimson-a3); + --colors-crimson-outline-border: var(--colors-crimson-a7); + --colors-crimson-outline-fg: var(--colors-crimson-a11); + --colors-crimson-plain-bg-hover: var(--colors-crimson-a3); + --colors-crimson-plain-bg-active: var(--colors-crimson-a4); + --colors-crimson-plain-fg: var(--colors-crimson-a11); + --colors-cyan-1: #fafdfe; + --colors-cyan-2: #f2fafb; + --colors-cyan-3: #def7f9; + --colors-cyan-4: #caf1f6; + --colors-cyan-5: #b5e9f0; + --colors-cyan-6: #9ddde7; + --colors-cyan-7: #7dcedc; + --colors-cyan-8: #3db9cf; + --colors-cyan-9: #00a2c7; + --colors-cyan-10: #0797b9; + --colors-cyan-11: #107d98; + --colors-cyan-12: #0d3c48; + --colors-cyan-a1: #0099cc05; + --colors-cyan-a2: #009db10d; + --colors-cyan-a3: #00c2d121; + --colors-cyan-a4: #00bcd435; + --colors-cyan-a5: #01b4cc4a; + --colors-cyan-a6: #00a7c162; + --colors-cyan-a7: #009fbb82; + --colors-cyan-a8: #00a3c0c2; + --colors-cyan-a9: #00a2c7; + --colors-cyan-a10: #0094b7f8; + --colors-cyan-a11: #007491ef; + --colors-cyan-a12: #00323ef2; + --colors-cyan-solid-bg: var(--colors-cyan-9); + --colors-cyan-solid-bg-hover: var(--colors-cyan-10); + --colors-cyan-solid-fg: white; + --colors-cyan-subtle-bg: var(--colors-cyan-a3); + --colors-cyan-subtle-bg-hover: var(--colors-cyan-a4); + --colors-cyan-subtle-bg-active: var(--colors-cyan-a5); + --colors-cyan-subtle-fg: var(--colors-cyan-a11); + --colors-cyan-surface-bg: var(--colors-cyan-a2); + --colors-cyan-surface-bg-active: var(--colors-cyan-a3); + --colors-cyan-surface-border: var(--colors-cyan-a6); + --colors-cyan-surface-border-hover: var(--colors-cyan-a7); + --colors-cyan-surface-fg: var(--colors-cyan-a11); + --colors-cyan-outline-bg-hover: var(--colors-cyan-a2); + --colors-cyan-outline-bg-active: var(--colors-cyan-a3); + --colors-cyan-outline-border: var(--colors-cyan-a7); + --colors-cyan-outline-fg: var(--colors-cyan-a11); + --colors-cyan-plain-bg-hover: var(--colors-cyan-a3); + --colors-cyan-plain-bg-active: var(--colors-cyan-a4); + --colors-cyan-plain-fg: var(--colors-cyan-a11); + --colors-gold-1: #fdfdfc; + --colors-gold-2: #faf9f2; + --colors-gold-3: #f2f0e7; + --colors-gold-4: #eae6db; + --colors-gold-5: #e1dccf; + --colors-gold-6: #d8d0bf; + --colors-gold-7: #cbc0aa; + --colors-gold-8: #b9a88d; + --colors-gold-9: #978365; + --colors-gold-10: #8c7a5e; + --colors-gold-11: #71624b; + --colors-gold-12: #3b352b; + --colors-gold-a1: #55550003; + --colors-gold-a2: #9d8a000d; + --colors-gold-a3: #75600018; + --colors-gold-a4: #6b4e0024; + --colors-gold-a5: #60460030; + --colors-gold-a6: #64440040; + --colors-gold-a7: #63420055; + --colors-gold-a8: #633d0072; + --colors-gold-a9: #5332009a; + --colors-gold-a10: #492d00a1; + --colors-gold-a11: #362100b4; + --colors-gold-a12: #130c00d4; + --colors-gold-solid-bg: var(--colors-gold-9); + --colors-gold-solid-bg-hover: var(--colors-gold-10); + --colors-gold-solid-fg: white; + --colors-gold-subtle-bg: var(--colors-gold-a3); + --colors-gold-subtle-bg-hover: var(--colors-gold-a4); + --colors-gold-subtle-bg-active: var(--colors-gold-a5); + --colors-gold-subtle-fg: var(--colors-gold-a11); + --colors-gold-surface-bg: var(--colors-gold-a2); + --colors-gold-surface-bg-active: var(--colors-gold-a3); + --colors-gold-surface-border: var(--colors-gold-a6); + --colors-gold-surface-border-hover: var(--colors-gold-a7); + --colors-gold-surface-fg: var(--colors-gold-a11); + --colors-gold-outline-bg-hover: var(--colors-gold-a2); + --colors-gold-outline-bg-active: var(--colors-gold-a3); + --colors-gold-outline-border: var(--colors-gold-a7); + --colors-gold-outline-fg: var(--colors-gold-a11); + --colors-gold-plain-bg-hover: var(--colors-gold-a3); + --colors-gold-plain-bg-active: var(--colors-gold-a4); + --colors-gold-plain-fg: var(--colors-gold-a11); + --colors-grass-1: #fbfefb; + --colors-grass-2: #f5fbf5; + --colors-grass-3: #e9f6e9; + --colors-grass-4: #daf1db; + --colors-grass-5: #c9e8ca; + --colors-grass-6: #b2ddb5; + --colors-grass-7: #94ce9a; + --colors-grass-8: #65ba74; + --colors-grass-9: #46a758; + --colors-grass-10: #3e9b4f; + --colors-grass-11: #2a7e3b; + --colors-grass-12: #203c25; + --colors-grass-a1: #00c00004; + --colors-grass-a2: #0099000a; + --colors-grass-a3: #00970016; + --colors-grass-a4: #009f0725; + --colors-grass-a5: #00930536; + --colors-grass-a6: #008f0a4d; + --colors-grass-a7: #018b0f6b; + --colors-grass-a8: #008d199a; + --colors-grass-a9: #008619b9; + --colors-grass-a10: #007b17c1; + --colors-grass-a11: #006514d5; + --colors-grass-a12: #002006df; + --colors-grass-solid-bg: var(--colors-grass-9); + --colors-grass-solid-bg-hover: var(--colors-grass-10); + --colors-grass-solid-fg: white; + --colors-grass-subtle-bg: var(--colors-grass-a3); + --colors-grass-subtle-bg-hover: var(--colors-grass-a4); + --colors-grass-subtle-bg-active: var(--colors-grass-a5); + --colors-grass-subtle-fg: var(--colors-grass-a11); + --colors-grass-surface-bg: var(--colors-grass-a2); + --colors-grass-surface-bg-active: var(--colors-grass-a3); + --colors-grass-surface-border: var(--colors-grass-a6); + --colors-grass-surface-border-hover: var(--colors-grass-a7); + --colors-grass-surface-fg: var(--colors-grass-a11); + --colors-grass-outline-bg-hover: var(--colors-grass-a2); + --colors-grass-outline-bg-active: var(--colors-grass-a3); + --colors-grass-outline-border: var(--colors-grass-a7); + --colors-grass-outline-fg: var(--colors-grass-a11); + --colors-grass-plain-bg-hover: var(--colors-grass-a3); + --colors-grass-plain-bg-active: var(--colors-grass-a4); + --colors-grass-plain-fg: var(--colors-grass-a11); + --colors-green-1: #fbfefc; + --colors-green-2: #f4fbf6; + --colors-green-3: #e6f6eb; + --colors-green-4: #d6f1df; + --colors-green-5: #c4e8d1; + --colors-green-6: #adddc0; + --colors-green-7: #8eceaa; + --colors-green-8: #5bb98b; + --colors-green-9: #30a46c; + --colors-green-10: #2b9a66; + --colors-green-11: #218358; + --colors-green-12: #193b2d; + --colors-green-a1: #00c04004; + --colors-green-a2: #00a32f0b; + --colors-green-a3: #00a43319; + --colors-green-a4: #00a83829; + --colors-green-a5: #019c393b; + --colors-green-a6: #00963c52; + --colors-green-a7: #00914071; + --colors-green-a8: #00924ba4; + --colors-green-a9: #008f4acf; + --colors-green-a10: #008647d4; + --colors-green-a11: #00713fde; + --colors-green-a12: #002616e6; + --colors-green-solid-bg: var(--colors-green-9); + --colors-green-solid-bg-hover: var(--colors-green-10); + --colors-green-solid-fg: white; + --colors-green-subtle-bg: var(--colors-green-a3); + --colors-green-subtle-bg-hover: var(--colors-green-a4); + --colors-green-subtle-bg-active: var(--colors-green-a5); + --colors-green-subtle-fg: var(--colors-green-a11); + --colors-green-surface-bg: var(--colors-green-a2); + --colors-green-surface-bg-active: var(--colors-green-a3); + --colors-green-surface-border: var(--colors-green-a6); + --colors-green-surface-border-hover: var(--colors-green-a7); + --colors-green-surface-fg: var(--colors-green-a11); + --colors-green-outline-bg-hover: var(--colors-green-a2); + --colors-green-outline-bg-active: var(--colors-green-a3); + --colors-green-outline-border: var(--colors-green-a7); + --colors-green-outline-fg: var(--colors-green-a11); + --colors-green-plain-bg-hover: var(--colors-green-a3); + --colors-green-plain-bg-active: var(--colors-green-a4); + --colors-green-plain-fg: var(--colors-green-a11); + --colors-indigo-1: #fdfdfe; + --colors-indigo-2: #f7f9ff; + --colors-indigo-3: #edf2fe; + --colors-indigo-4: #e1e9ff; + --colors-indigo-5: #d2deff; + --colors-indigo-6: #c1d0ff; + --colors-indigo-7: #abbdf9; + --colors-indigo-8: #8da4ef; + --colors-indigo-9: #3e63dd; + --colors-indigo-10: #3358d4; + --colors-indigo-11: #3a5bc7; + --colors-indigo-12: #1f2d5c; + --colors-indigo-a1: #00008002; + --colors-indigo-a2: #0040ff08; + --colors-indigo-a3: #0047f112; + --colors-indigo-a4: #0044ff1e; + --colors-indigo-a5: #0044ff2d; + --colors-indigo-a6: #003eff3e; + --colors-indigo-a7: #0037ed54; + --colors-indigo-a8: #0034dc72; + --colors-indigo-a9: #0031d2c1; + --colors-indigo-a10: #002ec9cc; + --colors-indigo-a11: #002bb7c5; + --colors-indigo-a12: #001046e0; + --colors-indigo-solid-bg: var(--colors-indigo-9); + --colors-indigo-solid-bg-hover: var(--colors-indigo-10); + --colors-indigo-solid-fg: white; + --colors-indigo-subtle-bg: var(--colors-indigo-a3); + --colors-indigo-subtle-bg-hover: var(--colors-indigo-a4); + --colors-indigo-subtle-bg-active: var(--colors-indigo-a5); + --colors-indigo-subtle-fg: var(--colors-indigo-a11); + --colors-indigo-surface-bg: var(--colors-indigo-a2); + --colors-indigo-surface-bg-active: var(--colors-indigo-a3); + --colors-indigo-surface-border: var(--colors-indigo-a6); + --colors-indigo-surface-border-hover: var(--colors-indigo-a7); + --colors-indigo-surface-fg: var(--colors-indigo-a11); + --colors-indigo-outline-bg-hover: var(--colors-indigo-a2); + --colors-indigo-outline-bg-active: var(--colors-indigo-a3); + --colors-indigo-outline-border: var(--colors-indigo-a7); + --colors-indigo-outline-fg: var(--colors-indigo-a11); + --colors-indigo-plain-bg-hover: var(--colors-indigo-a3); + --colors-indigo-plain-bg-active: var(--colors-indigo-a4); + --colors-indigo-plain-fg: var(--colors-indigo-a11); + --colors-iris-1: #fdfdff; + --colors-iris-2: #f8f8ff; + --colors-iris-3: #f0f1fe; + --colors-iris-4: #e6e7ff; + --colors-iris-5: #dadcff; + --colors-iris-6: #cbcdff; + --colors-iris-7: #b8baf8; + --colors-iris-8: #9b9ef0; + --colors-iris-9: #5b5bd6; + --colors-iris-10: #5151cd; + --colors-iris-11: #5753c6; + --colors-iris-12: #272962; + --colors-iris-a1: #0000ff02; + --colors-iris-a2: #0000ff07; + --colors-iris-a3: #0011ee0f; + --colors-iris-a4: #000bff19; + --colors-iris-a5: #000eff25; + --colors-iris-a6: #000aff34; + --colors-iris-a7: #0008e647; + --colors-iris-a8: #0008d964; + --colors-iris-a9: #0000c0a4; + --colors-iris-a10: #0000b6ae; + --colors-iris-a11: #0600abac; + --colors-iris-a12: #000246d8; + --colors-iris-solid-bg: var(--colors-iris-9); + --colors-iris-solid-bg-hover: var(--colors-iris-10); + --colors-iris-solid-fg: white; + --colors-iris-subtle-bg: var(--colors-iris-a3); + --colors-iris-subtle-bg-hover: var(--colors-iris-a4); + --colors-iris-subtle-bg-active: var(--colors-iris-a5); + --colors-iris-subtle-fg: var(--colors-iris-a11); + --colors-iris-surface-bg: var(--colors-iris-a2); + --colors-iris-surface-bg-active: var(--colors-iris-a3); + --colors-iris-surface-border: var(--colors-iris-a6); + --colors-iris-surface-border-hover: var(--colors-iris-a7); + --colors-iris-surface-fg: var(--colors-iris-a11); + --colors-iris-outline-bg-hover: var(--colors-iris-a2); + --colors-iris-outline-bg-active: var(--colors-iris-a3); + --colors-iris-outline-border: var(--colors-iris-a7); + --colors-iris-outline-fg: var(--colors-iris-a11); + --colors-iris-plain-bg-hover: var(--colors-iris-a3); + --colors-iris-plain-bg-active: var(--colors-iris-a4); + --colors-iris-plain-fg: var(--colors-iris-a11); + --colors-jade-1: #fbfefd; + --colors-jade-2: #f4fbf7; + --colors-jade-3: #e6f7ed; + --colors-jade-4: #d6f1e3; + --colors-jade-5: #c3e9d7; + --colors-jade-6: #acdec8; + --colors-jade-7: #8bceb6; + --colors-jade-8: #56ba9f; + --colors-jade-9: #29a383; + --colors-jade-10: #26997b; + --colors-jade-11: #208368; + --colors-jade-12: #1d3b31; + --colors-jade-a1: #00c08004; + --colors-jade-a2: #00a3460b; + --colors-jade-a3: #00ae4819; + --colors-jade-a4: #00a85129; + --colors-jade-a5: #00a2553c; + --colors-jade-a6: #009a5753; + --colors-jade-a7: #00945f74; + --colors-jade-a8: #00976ea9; + --colors-jade-a9: #00916bd6; + --colors-jade-a10: #008764d9; + --colors-jade-a11: #007152df; + --colors-jade-a12: #002217e2; + --colors-jade-solid-bg: var(--colors-jade-9); + --colors-jade-solid-bg-hover: var(--colors-jade-10); + --colors-jade-solid-fg: white; + --colors-jade-subtle-bg: var(--colors-jade-a3); + --colors-jade-subtle-bg-hover: var(--colors-jade-a4); + --colors-jade-subtle-bg-active: var(--colors-jade-a5); + --colors-jade-subtle-fg: var(--colors-jade-a11); + --colors-jade-surface-bg: var(--colors-jade-a2); + --colors-jade-surface-bg-active: var(--colors-jade-a3); + --colors-jade-surface-border: var(--colors-jade-a6); + --colors-jade-surface-border-hover: var(--colors-jade-a7); + --colors-jade-surface-fg: var(--colors-jade-a11); + --colors-jade-outline-bg-hover: var(--colors-jade-a2); + --colors-jade-outline-bg-active: var(--colors-jade-a3); + --colors-jade-outline-border: var(--colors-jade-a7); + --colors-jade-outline-fg: var(--colors-jade-a11); + --colors-jade-plain-bg-hover: var(--colors-jade-a3); + --colors-jade-plain-bg-active: var(--colors-jade-a4); + --colors-jade-plain-fg: var(--colors-jade-a11); + --colors-lime-1: #fcfdfa; + --colors-lime-2: #f8faf3; + --colors-lime-3: #eef6d6; + --colors-lime-4: #e2f0bd; + --colors-lime-5: #d3e7a6; + --colors-lime-6: #c2da91; + --colors-lime-7: #abc978; + --colors-lime-8: #8db654; + --colors-lime-9: #bdee63; + --colors-lime-10: #b0e64c; + --colors-lime-11: #5c7c2f; + --colors-lime-12: #37401c; + --colors-lime-a1: #66990005; + --colors-lime-a2: #6b95000c; + --colors-lime-a3: #96c80029; + --colors-lime-a4: #8fc60042; + --colors-lime-a5: #81bb0059; + --colors-lime-a6: #72aa006e; + --colors-lime-a7: #61990087; + --colors-lime-a8: #559200ab; + --colors-lime-a9: #93e4009c; + --colors-lime-a10: #8fdc00b3; + --colors-lime-a11: #375f00d0; + --colors-lime-a12: #1e2900e3; + --colors-lime-solid-bg: var(--colors-lime-9); + --colors-lime-solid-bg-hover: var(--colors-lime-10); + --colors-lime-solid-fg: var(--colors-gray-12); + --colors-lime-subtle-bg: var(--colors-lime-a3); + --colors-lime-subtle-bg-hover: var(--colors-lime-a4); + --colors-lime-subtle-bg-active: var(--colors-lime-a5); + --colors-lime-subtle-fg: var(--colors-lime-a11); + --colors-lime-surface-bg: var(--colors-lime-a2); + --colors-lime-surface-bg-active: var(--colors-lime-a3); + --colors-lime-surface-border: var(--colors-lime-a6); + --colors-lime-surface-border-hover: var(--colors-lime-a7); + --colors-lime-surface-fg: var(--colors-lime-a11); + --colors-lime-outline-bg-hover: var(--colors-lime-a2); + --colors-lime-outline-bg-active: var(--colors-lime-a3); + --colors-lime-outline-border: var(--colors-lime-a7); + --colors-lime-outline-fg: var(--colors-lime-a11); + --colors-lime-plain-bg-hover: var(--colors-lime-a3); + --colors-lime-plain-bg-active: var(--colors-lime-a4); + --colors-lime-plain-fg: var(--colors-lime-a11); + --colors-mauve-1: #fdfcfd; + --colors-mauve-2: #faf9fb; + --colors-mauve-3: #f2eff3; + --colors-mauve-4: #eae7ec; + --colors-mauve-5: #e3dfe6; + --colors-mauve-6: #dbd8e0; + --colors-mauve-7: #d0cdd7; + --colors-mauve-8: #bcbac7; + --colors-mauve-9: #8e8c99; + --colors-mauve-10: #84828e; + --colors-mauve-11: #65636d; + --colors-mauve-12: #211f26; + --colors-mauve-a1: #55005503; + --colors-mauve-a2: #2b005506; + --colors-mauve-a3: #30004010; + --colors-mauve-a4: #20003618; + --colors-mauve-a5: #20003820; + --colors-mauve-a6: #14003527; + --colors-mauve-a7: #10003332; + --colors-mauve-a8: #08003145; + --colors-mauve-a9: #05001d73; + --colors-mauve-a10: #0500197d; + --colors-mauve-a11: #0400119c; + --colors-mauve-a12: #020008e0; + --colors-mauve-solid-bg: var(--colors-black); + --colors-mauve-solid-bg-hover: var(--colors-gray-12); + --colors-mauve-solid-fg: var(--colors-white); + --colors-mauve-subtle-bg: var(--colors-gray-a3); + --colors-mauve-subtle-bg-hover: var(--colors-gray-a4); + --colors-mauve-subtle-bg-active: var(--colors-gray-a5); + --colors-mauve-subtle-fg: var(--colors-gray-12); + --colors-mauve-surface-bg: var(--colors-white); + --colors-mauve-surface-bg-hover: var(--colors-gray-2); + --colors-mauve-surface-bg-active: var(--colors-gray-3); + --colors-mauve-surface-border: var(--colors-gray-6); + --colors-mauve-surface-border-hover: var(--colors-gray-7); + --colors-mauve-surface-fg: var(--colors-gray-12); + --colors-mauve-outline-bg-hover: var(--colors-gray-a2); + --colors-mauve-outline-bg-active: var(--colors-gray-a3); + --colors-mauve-outline-border: var(--colors-gray-6); + --colors-mauve-outline-fg: var(--colors-gray-12); + --colors-mauve-plain-bg-hover: var(--colors-gray-a3); + --colors-mauve-plain-bg-active: var(--colors-gray-a4); + --colors-mauve-plain-fg: var(--colors-gray-12); + --colors-mint-1: #f9fefd; + --colors-mint-2: #f2fbf9; + --colors-mint-3: #ddf9f2; + --colors-mint-4: #c8f4e9; + --colors-mint-5: #b3ecde; + --colors-mint-6: #9ce0d0; + --colors-mint-7: #7ecfbd; + --colors-mint-8: #4cbba5; + --colors-mint-9: #86ead4; + --colors-mint-10: #7de0cb; + --colors-mint-11: #027864; + --colors-mint-12: #16433c; + --colors-mint-a1: #00d5aa06; + --colors-mint-a2: #00b18a0d; + --colors-mint-a3: #00d29e22; + --colors-mint-a4: #00cc9937; + --colors-mint-a5: #00c0914c; + --colors-mint-a6: #00b08663; + --colors-mint-a7: #00a17d81; + --colors-mint-a8: #009e7fb3; + --colors-mint-a9: #00d3a579; + --colors-mint-a10: #00c39982; + --colors-mint-a11: #007763fd; + --colors-mint-a12: #00312ae9; + --colors-mint-solid-bg: var(--colors-mint-9); + --colors-mint-solid-bg-hover: var(--colors-mint-10); + --colors-mint-solid-fg: var(--colors-gray-12); + --colors-mint-subtle-bg: var(--colors-mint-a3); + --colors-mint-subtle-bg-hover: var(--colors-mint-a4); + --colors-mint-subtle-bg-active: var(--colors-mint-a5); + --colors-mint-subtle-fg: var(--colors-mint-a11); + --colors-mint-surface-bg: var(--colors-mint-a2); + --colors-mint-surface-bg-active: var(--colors-mint-a3); + --colors-mint-surface-border: var(--colors-mint-a6); + --colors-mint-surface-border-hover: var(--colors-mint-a7); + --colors-mint-surface-fg: var(--colors-mint-a11); + --colors-mint-outline-bg-hover: var(--colors-mint-a2); + --colors-mint-outline-bg-active: var(--colors-mint-a3); + --colors-mint-outline-border: var(--colors-mint-a7); + --colors-mint-outline-fg: var(--colors-mint-a11); + --colors-mint-plain-bg-hover: var(--colors-mint-a3); + --colors-mint-plain-bg-active: var(--colors-mint-a4); + --colors-mint-plain-fg: var(--colors-mint-a11); + --colors-neutral-1: #fcfcfc; + --colors-neutral-2: #f9f9f9; + --colors-neutral-3: #f0f0f0; + --colors-neutral-4: #e8e8e8; + --colors-neutral-5: #e0e0e0; + --colors-neutral-6: #d9d9d9; + --colors-neutral-7: #cecece; + --colors-neutral-8: #bbbbbb; + --colors-neutral-9: #8d8d8d; + --colors-neutral-10: #838383; + --colors-neutral-11: #646464; + --colors-neutral-12: #202020; + --colors-neutral-a1: #00000003; + --colors-neutral-a2: #00000006; + --colors-neutral-a3: #0000000f; + --colors-neutral-a4: #00000017; + --colors-neutral-a5: #0000001f; + --colors-neutral-a6: #00000026; + --colors-neutral-a7: #00000031; + --colors-neutral-a8: #00000044; + --colors-neutral-a9: #00000072; + --colors-neutral-a10: #0000007c; + --colors-neutral-a11: #0000009b; + --colors-neutral-a12: #000000df; + --colors-neutral-solid-bg: var(--colors-black); + --colors-neutral-solid-bg-hover: var(--colors-gray-12); + --colors-neutral-solid-fg: var(--colors-white); + --colors-neutral-subtle-bg: var(--colors-gray-a3); + --colors-neutral-subtle-bg-hover: var(--colors-gray-a4); + --colors-neutral-subtle-bg-active: var(--colors-gray-a5); + --colors-neutral-subtle-fg: var(--colors-gray-12); + --colors-neutral-surface-bg: var(--colors-white); + --colors-neutral-surface-bg-hover: var(--colors-gray-2); + --colors-neutral-surface-bg-active: var(--colors-gray-3); + --colors-neutral-surface-border: var(--colors-gray-6); + --colors-neutral-surface-border-hover: var(--colors-gray-7); + --colors-neutral-surface-fg: var(--colors-gray-12); + --colors-neutral-outline-bg-hover: var(--colors-gray-a2); + --colors-neutral-outline-bg-active: var(--colors-gray-a3); + --colors-neutral-outline-border: var(--colors-gray-6); + --colors-neutral-outline-fg: var(--colors-gray-12); + --colors-neutral-plain-bg-hover: var(--colors-gray-a3); + --colors-neutral-plain-bg-active: var(--colors-gray-a4); + --colors-neutral-plain-fg: var(--colors-gray-12); + --colors-olive-1: #fcfdfc; + --colors-olive-2: #f8faf8; + --colors-olive-3: #eff1ef; + --colors-olive-4: #e7e9e7; + --colors-olive-5: #dfe2df; + --colors-olive-6: #d7dad7; + --colors-olive-7: #cccfcc; + --colors-olive-8: #b9bcb8; + --colors-olive-9: #898e87; + --colors-olive-10: #7f847d; + --colors-olive-11: #60655f; + --colors-olive-12: #1d211c; + --colors-olive-a1: #00550003; + --colors-olive-a2: #00490007; + --colors-olive-a3: #00200010; + --colors-olive-a4: #00160018; + --colors-olive-a5: #00180020; + --colors-olive-a6: #00140028; + --colors-olive-a7: #000f0033; + --colors-olive-a8: #040f0047; + --colors-olive-a9: #050f0078; + --colors-olive-a10: #040e0082; + --colors-olive-a11: #020a00a0; + --colors-olive-a12: #010600e3; + --colors-olive-solid-bg: var(--colors-black); + --colors-olive-solid-bg-hover: var(--colors-gray-12); + --colors-olive-solid-fg: var(--colors-white); + --colors-olive-subtle-bg: var(--colors-gray-a3); + --colors-olive-subtle-bg-hover: var(--colors-gray-a4); + --colors-olive-subtle-bg-active: var(--colors-gray-a5); + --colors-olive-subtle-fg: var(--colors-gray-12); + --colors-olive-surface-bg: var(--colors-white); + --colors-olive-surface-bg-hover: var(--colors-gray-2); + --colors-olive-surface-bg-active: var(--colors-gray-3); + --colors-olive-surface-border: var(--colors-gray-6); + --colors-olive-surface-border-hover: var(--colors-gray-7); + --colors-olive-surface-fg: var(--colors-gray-12); + --colors-olive-outline-bg-hover: var(--colors-gray-a2); + --colors-olive-outline-bg-active: var(--colors-gray-a3); + --colors-olive-outline-border: var(--colors-gray-6); + --colors-olive-outline-fg: var(--colors-gray-12); + --colors-olive-plain-bg-hover: var(--colors-gray-a3); + --colors-olive-plain-bg-active: var(--colors-gray-a4); + --colors-olive-plain-fg: var(--colors-gray-12); + --colors-orange-1: #fefcfb; + --colors-orange-2: #fff7ed; + --colors-orange-3: #ffefd6; + --colors-orange-4: #ffdfb5; + --colors-orange-5: #ffd19a; + --colors-orange-6: #ffc182; + --colors-orange-7: #f5ae73; + --colors-orange-8: #ec9455; + --colors-orange-9: #f76b15; + --colors-orange-10: #ef5f00; + --colors-orange-11: #cc4e00; + --colors-orange-12: #582d1d; + --colors-orange-a1: #c0400004; + --colors-orange-a2: #ff8e0012; + --colors-orange-a3: #ff9c0029; + --colors-orange-a4: #ff91014a; + --colors-orange-a5: #ff8b0065; + --colors-orange-a6: #ff81007d; + --colors-orange-a7: #ed6c008c; + --colors-orange-a8: #e35f00aa; + --colors-orange-a9: #f65e00ea; + --colors-orange-a10: #ef5f00; + --colors-orange-a11: #cc4e00; + --colors-orange-a12: #431200e2; + --colors-orange-solid-bg: var(--colors-orange-9); + --colors-orange-solid-bg-hover: var(--colors-orange-10); + --colors-orange-solid-fg: white; + --colors-orange-subtle-bg: var(--colors-orange-a3); + --colors-orange-subtle-bg-hover: var(--colors-orange-a4); + --colors-orange-subtle-bg-active: var(--colors-orange-a5); + --colors-orange-subtle-fg: var(--colors-orange-a11); + --colors-orange-surface-bg: var(--colors-orange-a2); + --colors-orange-surface-bg-active: var(--colors-orange-a3); + --colors-orange-surface-border: var(--colors-orange-a6); + --colors-orange-surface-border-hover: var(--colors-orange-a7); + --colors-orange-surface-fg: var(--colors-orange-a11); + --colors-orange-outline-bg-hover: var(--colors-orange-a2); + --colors-orange-outline-bg-active: var(--colors-orange-a3); + --colors-orange-outline-border: var(--colors-orange-a7); + --colors-orange-outline-fg: var(--colors-orange-a11); + --colors-orange-plain-bg-hover: var(--colors-orange-a3); + --colors-orange-plain-bg-active: var(--colors-orange-a4); + --colors-orange-plain-fg: var(--colors-orange-a11); + --colors-pink-1: #fffcfe; + --colors-pink-2: #fef7fb; + --colors-pink-3: #fee9f5; + --colors-pink-4: #fbdcef; + --colors-pink-5: #f6cee7; + --colors-pink-6: #efbfdd; + --colors-pink-7: #e7acd0; + --colors-pink-8: #dd93c2; + --colors-pink-9: #d6409f; + --colors-pink-10: #cf3897; + --colors-pink-11: #c2298a; + --colors-pink-12: #651249; + --colors-pink-a1: #ff00aa03; + --colors-pink-a2: #e0008008; + --colors-pink-a3: #f4008c16; + --colors-pink-a4: #e2008b23; + --colors-pink-a5: #d1008331; + --colors-pink-a6: #c0007840; + --colors-pink-a7: #b6006f53; + --colors-pink-a8: #af006f6c; + --colors-pink-a9: #c8007fbf; + --colors-pink-a10: #c2007ac7; + --colors-pink-a11: #b60074d6; + --colors-pink-a12: #59003bed; + --colors-pink-solid-bg: var(--colors-pink-9); + --colors-pink-solid-bg-hover: var(--colors-pink-10); + --colors-pink-solid-fg: white; + --colors-pink-subtle-bg: var(--colors-pink-a3); + --colors-pink-subtle-bg-hover: var(--colors-pink-a4); + --colors-pink-subtle-bg-active: var(--colors-pink-a5); + --colors-pink-subtle-fg: var(--colors-pink-a11); + --colors-pink-surface-bg: var(--colors-pink-a2); + --colors-pink-surface-bg-active: var(--colors-pink-a3); + --colors-pink-surface-border: var(--colors-pink-a6); + --colors-pink-surface-border-hover: var(--colors-pink-a7); + --colors-pink-surface-fg: var(--colors-pink-a11); + --colors-pink-outline-bg-hover: var(--colors-pink-a2); + --colors-pink-outline-bg-active: var(--colors-pink-a3); + --colors-pink-outline-border: var(--colors-pink-a7); + --colors-pink-outline-fg: var(--colors-pink-a11); + --colors-pink-plain-bg-hover: var(--colors-pink-a3); + --colors-pink-plain-bg-active: var(--colors-pink-a4); + --colors-pink-plain-fg: var(--colors-pink-a11); + --colors-plum-1: #fefcff; + --colors-plum-2: #fdf7fd; + --colors-plum-3: #fbebfb; + --colors-plum-4: #f7def8; + --colors-plum-5: #f2d1f3; + --colors-plum-6: #e9c2ec; + --colors-plum-7: #deade3; + --colors-plum-8: #cf91d8; + --colors-plum-9: #ab4aba; + --colors-plum-10: #a144af; + --colors-plum-11: #953ea3; + --colors-plum-12: #53195d; + --colors-plum-a1: #aa00ff03; + --colors-plum-a2: #c000c008; + --colors-plum-a3: #cc00cc14; + --colors-plum-a4: #c200c921; + --colors-plum-a5: #b700bd2e; + --colors-plum-a6: #a400b03d; + --colors-plum-a7: #9900a852; + --colors-plum-a8: #9000a56e; + --colors-plum-a9: #89009eb5; + --colors-plum-a10: #7f0092bb; + --colors-plum-a11: #730086c1; + --colors-plum-a12: #40004be6; + --colors-plum-solid-bg: var(--colors-plum-9); + --colors-plum-solid-bg-hover: var(--colors-plum-10); + --colors-plum-solid-fg: white; + --colors-plum-subtle-bg: var(--colors-plum-a3); + --colors-plum-subtle-bg-hover: var(--colors-plum-a4); + --colors-plum-subtle-bg-active: var(--colors-plum-a5); + --colors-plum-subtle-fg: var(--colors-plum-a11); + --colors-plum-surface-bg: var(--colors-plum-a2); + --colors-plum-surface-bg-active: var(--colors-plum-a3); + --colors-plum-surface-border: var(--colors-plum-a6); + --colors-plum-surface-border-hover: var(--colors-plum-a7); + --colors-plum-surface-fg: var(--colors-plum-a11); + --colors-plum-outline-bg-hover: var(--colors-plum-a2); + --colors-plum-outline-bg-active: var(--colors-plum-a3); + --colors-plum-outline-border: var(--colors-plum-a7); + --colors-plum-outline-fg: var(--colors-plum-a11); + --colors-plum-plain-bg-hover: var(--colors-plum-a3); + --colors-plum-plain-bg-active: var(--colors-plum-a4); + --colors-plum-plain-fg: var(--colors-plum-a11); + --colors-purple-1: #fefcfe; + --colors-purple-2: #fbf7fe; + --colors-purple-3: #f7edfe; + --colors-purple-4: #f2e2fc; + --colors-purple-5: #ead5f9; + --colors-purple-6: #e0c4f4; + --colors-purple-7: #d1afec; + --colors-purple-8: #be93e4; + --colors-purple-9: #8e4ec6; + --colors-purple-10: #8347b9; + --colors-purple-11: #8145b5; + --colors-purple-12: #402060; + --colors-purple-a1: #aa00aa03; + --colors-purple-a2: #8000e008; + --colors-purple-a3: #8e00f112; + --colors-purple-a4: #8d00e51d; + --colors-purple-a5: #8000db2a; + --colors-purple-a6: #7a01d03b; + --colors-purple-a7: #6d00c350; + --colors-purple-a8: #6600c06c; + --colors-purple-a9: #5c00adb1; + --colors-purple-a10: #53009eb8; + --colors-purple-a11: #52009aba; + --colors-purple-a12: #250049df; + --colors-purple-solid-bg: var(--colors-purple-9); + --colors-purple-solid-bg-hover: var(--colors-purple-10); + --colors-purple-solid-fg: white; + --colors-purple-subtle-bg: var(--colors-purple-a3); + --colors-purple-subtle-bg-hover: var(--colors-purple-a4); + --colors-purple-subtle-bg-active: var(--colors-purple-a5); + --colors-purple-subtle-fg: var(--colors-purple-a11); + --colors-purple-surface-bg: var(--colors-purple-a2); + --colors-purple-surface-bg-active: var(--colors-purple-a3); + --colors-purple-surface-border: var(--colors-purple-a6); + --colors-purple-surface-border-hover: var(--colors-purple-a7); + --colors-purple-surface-fg: var(--colors-purple-a11); + --colors-purple-outline-bg-hover: var(--colors-purple-a2); + --colors-purple-outline-bg-active: var(--colors-purple-a3); + --colors-purple-outline-border: var(--colors-purple-a7); + --colors-purple-outline-fg: var(--colors-purple-a11); + --colors-purple-plain-bg-hover: var(--colors-purple-a3); + --colors-purple-plain-bg-active: var(--colors-purple-a4); + --colors-purple-plain-fg: var(--colors-purple-a11); + --colors-red-1: #fffcfc; + --colors-red-2: #fff7f7; + --colors-red-3: #feebec; + --colors-red-4: #ffdbdc; + --colors-red-5: #ffcdce; + --colors-red-6: #fdbdbe; + --colors-red-7: #f4a9aa; + --colors-red-8: #eb8e90; + --colors-red-9: #e5484d; + --colors-red-10: #dc3e42; + --colors-red-11: #ce2c31; + --colors-red-12: #641723; + --colors-red-a1: #ff000003; + --colors-red-a2: #ff000008; + --colors-red-a3: #f3000d14; + --colors-red-a4: #ff000824; + --colors-red-a5: #ff000632; + --colors-red-a6: #f8000442; + --colors-red-a7: #df000356; + --colors-red-a8: #d2000571; + --colors-red-a9: #db0007b7; + --colors-red-a10: #d10005c1; + --colors-red-a11: #c40006d3; + --colors-red-a12: #55000de8; + --colors-red-solid-bg: var(--colors-red-9); + --colors-red-solid-bg-hover: var(--colors-red-10); + --colors-red-solid-fg: white; + --colors-red-subtle-bg: var(--colors-red-a3); + --colors-red-subtle-bg-hover: var(--colors-red-a4); + --colors-red-subtle-bg-active: var(--colors-red-a5); + --colors-red-subtle-fg: var(--colors-red-a11); + --colors-red-surface-bg: var(--colors-red-a2); + --colors-red-surface-bg-active: var(--colors-red-a3); + --colors-red-surface-border: var(--colors-red-a6); + --colors-red-surface-border-hover: var(--colors-red-a7); + --colors-red-surface-fg: var(--colors-red-a11); + --colors-red-outline-bg-hover: var(--colors-red-a2); + --colors-red-outline-bg-active: var(--colors-red-a3); + --colors-red-outline-border: var(--colors-red-a7); + --colors-red-outline-fg: var(--colors-red-a11); + --colors-red-plain-bg-hover: var(--colors-red-a3); + --colors-red-plain-bg-active: var(--colors-red-a4); + --colors-red-plain-fg: var(--colors-red-a11); + --colors-ruby-1: #fffcfd; + --colors-ruby-2: #fff7f8; + --colors-ruby-3: #feeaed; + --colors-ruby-4: #ffdce1; + --colors-ruby-5: #ffced6; + --colors-ruby-6: #f8bfc8; + --colors-ruby-7: #efacb8; + --colors-ruby-8: #e592a3; + --colors-ruby-9: #e54666; + --colors-ruby-10: #dc3b5d; + --colors-ruby-11: #ca244d; + --colors-ruby-12: #64172b; + --colors-ruby-a1: #ff005503; + --colors-ruby-a2: #ff002008; + --colors-ruby-a3: #f3002515; + --colors-ruby-a4: #ff002523; + --colors-ruby-a5: #ff002a31; + --colors-ruby-a6: #e4002440; + --colors-ruby-a7: #ce002553; + --colors-ruby-a8: #c300286d; + --colors-ruby-a9: #db002cb9; + --colors-ruby-a10: #d2002cc4; + --colors-ruby-a11: #c10030db; + --colors-ruby-a12: #550016e8; + --colors-ruby-solid-bg: var(--colors-ruby-9); + --colors-ruby-solid-bg-hover: var(--colors-ruby-10); + --colors-ruby-solid-fg: white; + --colors-ruby-subtle-bg: var(--colors-ruby-a3); + --colors-ruby-subtle-bg-hover: var(--colors-ruby-a4); + --colors-ruby-subtle-bg-active: var(--colors-ruby-a5); + --colors-ruby-subtle-fg: var(--colors-ruby-a11); + --colors-ruby-surface-bg: var(--colors-ruby-a2); + --colors-ruby-surface-bg-active: var(--colors-ruby-a3); + --colors-ruby-surface-border: var(--colors-ruby-a6); + --colors-ruby-surface-border-hover: var(--colors-ruby-a7); + --colors-ruby-surface-fg: var(--colors-ruby-a11); + --colors-ruby-outline-bg-hover: var(--colors-ruby-a2); + --colors-ruby-outline-bg-active: var(--colors-ruby-a3); + --colors-ruby-outline-border: var(--colors-ruby-a7); + --colors-ruby-outline-fg: var(--colors-ruby-a11); + --colors-ruby-plain-bg-hover: var(--colors-ruby-a3); + --colors-ruby-plain-bg-active: var(--colors-ruby-a4); + --colors-ruby-plain-fg: var(--colors-ruby-a11); + --colors-sage-1: #fbfdfc; + --colors-sage-2: #f7f9f8; + --colors-sage-3: #eef1f0; + --colors-sage-4: #e6e9e8; + --colors-sage-5: #dfe2e0; + --colors-sage-6: #d7dad9; + --colors-sage-7: #cbcfcd; + --colors-sage-8: #b8bcba; + --colors-sage-9: #868e8b; + --colors-sage-10: #7c8481; + --colors-sage-11: #5f6563; + --colors-sage-12: #1a211e; + --colors-sage-a1: #00804004; + --colors-sage-a2: #00402008; + --colors-sage-a3: #002d1e11; + --colors-sage-a4: #001f1519; + --colors-sage-a5: #00180820; + --colors-sage-a6: #00140d28; + --colors-sage-a7: #00140a34; + --colors-sage-a8: #000f0847; + --colors-sage-a9: #00110b79; + --colors-sage-a10: #00100a83; + --colors-sage-a11: #000a07a0; + --colors-sage-a12: #000805e5; + --colors-sage-solid-bg: var(--colors-black); + --colors-sage-solid-bg-hover: var(--colors-gray-12); + --colors-sage-solid-fg: var(--colors-white); + --colors-sage-subtle-bg: var(--colors-gray-a3); + --colors-sage-subtle-bg-hover: var(--colors-gray-a4); + --colors-sage-subtle-bg-active: var(--colors-gray-a5); + --colors-sage-subtle-fg: var(--colors-gray-12); + --colors-sage-surface-bg: var(--colors-white); + --colors-sage-surface-bg-hover: var(--colors-gray-2); + --colors-sage-surface-bg-active: var(--colors-gray-3); + --colors-sage-surface-border: var(--colors-gray-6); + --colors-sage-surface-border-hover: var(--colors-gray-7); + --colors-sage-surface-fg: var(--colors-gray-12); + --colors-sage-outline-bg-hover: var(--colors-gray-a2); + --colors-sage-outline-bg-active: var(--colors-gray-a3); + --colors-sage-outline-border: var(--colors-gray-6); + --colors-sage-outline-fg: var(--colors-gray-12); + --colors-sage-plain-bg-hover: var(--colors-gray-a3); + --colors-sage-plain-bg-active: var(--colors-gray-a4); + --colors-sage-plain-fg: var(--colors-gray-12); + --colors-sand-1: #fdfdfc; + --colors-sand-2: #f9f9f8; + --colors-sand-3: #f1f0ef; + --colors-sand-4: #e9e8e6; + --colors-sand-5: #e2e1de; + --colors-sand-6: #dad9d6; + --colors-sand-7: #cfceca; + --colors-sand-8: #bcbbb5; + --colors-sand-9: #8d8d86; + --colors-sand-10: #82827c; + --colors-sand-11: #63635e; + --colors-sand-12: #21201c; + --colors-sand-a1: #55550003; + --colors-sand-a2: #25250007; + --colors-sand-a3: #20100010; + --colors-sand-a4: #1f150019; + --colors-sand-a5: #1f180021; + --colors-sand-a6: #19130029; + --colors-sand-a7: #19140035; + --colors-sand-a8: #1915014a; + --colors-sand-a9: #0f0f0079; + --colors-sand-a10: #0c0c0083; + --colors-sand-a11: #080800a1; + --colors-sand-a12: #060500e3; + --colors-sand-solid-bg: var(--colors-black); + --colors-sand-solid-bg-hover: var(--colors-gray-12); + --colors-sand-solid-fg: var(--colors-white); + --colors-sand-subtle-bg: var(--colors-gray-a3); + --colors-sand-subtle-bg-hover: var(--colors-gray-a4); + --colors-sand-subtle-bg-active: var(--colors-gray-a5); + --colors-sand-subtle-fg: var(--colors-gray-12); + --colors-sand-surface-bg: var(--colors-white); + --colors-sand-surface-bg-hover: var(--colors-gray-2); + --colors-sand-surface-bg-active: var(--colors-gray-3); + --colors-sand-surface-border: var(--colors-gray-6); + --colors-sand-surface-border-hover: var(--colors-gray-7); + --colors-sand-surface-fg: var(--colors-gray-12); + --colors-sand-outline-bg-hover: var(--colors-gray-a2); + --colors-sand-outline-bg-active: var(--colors-gray-a3); + --colors-sand-outline-border: var(--colors-gray-6); + --colors-sand-outline-fg: var(--colors-gray-12); + --colors-sand-plain-bg-hover: var(--colors-gray-a3); + --colors-sand-plain-bg-active: var(--colors-gray-a4); + --colors-sand-plain-fg: var(--colors-gray-12); + --colors-sky-1: #f9feff; + --colors-sky-2: #f1fafd; + --colors-sky-3: #e1f6fd; + --colors-sky-4: #d1f0fa; + --colors-sky-5: #bee7f5; + --colors-sky-6: #a9daed; + --colors-sky-7: #8dcae3; + --colors-sky-8: #60b3d7; + --colors-sky-9: #7ce2fe; + --colors-sky-10: #74daf8; + --colors-sky-11: #00749e; + --colors-sky-12: #1d3e56; + --colors-sky-a1: #00d5ff06; + --colors-sky-a2: #00a4db0e; + --colors-sky-a3: #00b3ee1e; + --colors-sky-a4: #00ace42e; + --colors-sky-a5: #00a1d841; + --colors-sky-a6: #0092ca56; + --colors-sky-a7: #0089c172; + --colors-sky-a8: #0085bf9f; + --colors-sky-a9: #00c7fe83; + --colors-sky-a10: #00bcf38b; + --colors-sky-a11: #00749e; + --colors-sky-a12: #002540e2; + --colors-sky-solid-bg: var(--colors-sky-9); + --colors-sky-solid-bg-hover: var(--colors-sky-10); + --colors-sky-solid-fg: var(--colors-gray-12); + --colors-sky-subtle-bg: var(--colors-sky-a3); + --colors-sky-subtle-bg-hover: var(--colors-sky-a4); + --colors-sky-subtle-bg-active: var(--colors-sky-a5); + --colors-sky-subtle-fg: var(--colors-sky-a11); + --colors-sky-surface-bg: var(--colors-sky-a2); + --colors-sky-surface-bg-active: var(--colors-sky-a3); + --colors-sky-surface-border: var(--colors-sky-a6); + --colors-sky-surface-border-hover: var(--colors-sky-a7); + --colors-sky-surface-fg: var(--colors-sky-a11); + --colors-sky-outline-bg-hover: var(--colors-sky-a2); + --colors-sky-outline-bg-active: var(--colors-sky-a3); + --colors-sky-outline-border: var(--colors-sky-a7); + --colors-sky-outline-fg: var(--colors-sky-a11); + --colors-sky-plain-bg-hover: var(--colors-sky-a3); + --colors-sky-plain-bg-active: var(--colors-sky-a4); + --colors-sky-plain-fg: var(--colors-sky-a11); + --colors-slate-1: #fcfcfd; + --colors-slate-2: #f9f9fb; + --colors-slate-3: #f0f0f3; + --colors-slate-4: #e8e8ec; + --colors-slate-5: #e0e1e6; + --colors-slate-6: #d9d9e0; + --colors-slate-7: #cdced6; + --colors-slate-8: #b9bbc6; + --colors-slate-9: #8b8d98; + --colors-slate-10: #80838d; + --colors-slate-11: #60646c; + --colors-slate-12: #1c2024; + --colors-slate-a1: #00005503; + --colors-slate-a2: #00005506; + --colors-slate-a3: #0000330f; + --colors-slate-a4: #00002d17; + --colors-slate-a5: #0009321f; + --colors-slate-a6: #00002f26; + --colors-slate-a7: #00062e32; + --colors-slate-a8: #00083046; + --colors-slate-a9: #00051d74; + --colors-slate-a10: #00071b7f; + --colors-slate-a11: #0007149f; + --colors-slate-a12: #000509e3; + --colors-slate-solid-bg: var(--colors-black); + --colors-slate-solid-bg-hover: var(--colors-gray-12); + --colors-slate-solid-fg: var(--colors-white); + --colors-slate-subtle-bg: var(--colors-gray-a3); + --colors-slate-subtle-bg-hover: var(--colors-gray-a4); + --colors-slate-subtle-bg-active: var(--colors-gray-a5); + --colors-slate-subtle-fg: var(--colors-gray-12); + --colors-slate-surface-bg: var(--colors-white); + --colors-slate-surface-bg-hover: var(--colors-gray-2); + --colors-slate-surface-bg-active: var(--colors-gray-3); + --colors-slate-surface-border: var(--colors-gray-6); + --colors-slate-surface-border-hover: var(--colors-gray-7); + --colors-slate-surface-fg: var(--colors-gray-12); + --colors-slate-outline-bg-hover: var(--colors-gray-a2); + --colors-slate-outline-bg-active: var(--colors-gray-a3); + --colors-slate-outline-border: var(--colors-gray-6); + --colors-slate-outline-fg: var(--colors-gray-12); + --colors-slate-plain-bg-hover: var(--colors-gray-a3); + --colors-slate-plain-bg-active: var(--colors-gray-a4); + --colors-slate-plain-fg: var(--colors-gray-12); + --colors-teal-1: #fafefd; + --colors-teal-2: #f3fbf9; + --colors-teal-3: #e0f8f3; + --colors-teal-4: #ccf3ea; + --colors-teal-5: #b8eae0; + --colors-teal-6: #a1ded2; + --colors-teal-7: #83cdc1; + --colors-teal-8: #53b9ab; + --colors-teal-9: #12a594; + --colors-teal-10: #0d9b8a; + --colors-teal-11: #008573; + --colors-teal-12: #0d3d38; + --colors-teal-a1: #00cc9905; + --colors-teal-a2: #00aa800c; + --colors-teal-a3: #00c69d1f; + --colors-teal-a4: #00c39633; + --colors-teal-a5: #00b49047; + --colors-teal-a6: #00a6855e; + --colors-teal-a7: #0099807c; + --colors-teal-a8: #009783ac; + --colors-teal-a9: #009e8ced; + --colors-teal-a10: #009684f2; + --colors-teal-a11: #008573; + --colors-teal-a12: #00332df2; + --colors-teal-solid-bg: var(--colors-teal-9); + --colors-teal-solid-bg-hover: var(--colors-teal-10); + --colors-teal-solid-fg: white; + --colors-teal-subtle-bg: var(--colors-teal-a3); + --colors-teal-subtle-bg-hover: var(--colors-teal-a4); + --colors-teal-subtle-bg-active: var(--colors-teal-a5); + --colors-teal-subtle-fg: var(--colors-teal-a11); + --colors-teal-surface-bg: var(--colors-teal-a2); + --colors-teal-surface-bg-active: var(--colors-teal-a3); + --colors-teal-surface-border: var(--colors-teal-a6); + --colors-teal-surface-border-hover: var(--colors-teal-a7); + --colors-teal-surface-fg: var(--colors-teal-a11); + --colors-teal-outline-bg-hover: var(--colors-teal-a2); + --colors-teal-outline-bg-active: var(--colors-teal-a3); + --colors-teal-outline-border: var(--colors-teal-a7); + --colors-teal-outline-fg: var(--colors-teal-a11); + --colors-teal-plain-bg-hover: var(--colors-teal-a3); + --colors-teal-plain-bg-active: var(--colors-teal-a4); + --colors-teal-plain-fg: var(--colors-teal-a11); + --colors-tomato-1: #fffcfc; + --colors-tomato-2: #fff8f7; + --colors-tomato-3: #feebe7; + --colors-tomato-4: #ffdcd3; + --colors-tomato-5: #ffcdc2; + --colors-tomato-6: #fdbdaf; + --colors-tomato-7: #f5a898; + --colors-tomato-8: #ec8e7b; + --colors-tomato-9: #e54d2e; + --colors-tomato-10: #dd4425; + --colors-tomato-11: #d13415; + --colors-tomato-12: #5c271f; + --colors-tomato-a1: #ff000003; + --colors-tomato-a2: #ff200008; + --colors-tomato-a3: #f52b0018; + --colors-tomato-a4: #ff35002c; + --colors-tomato-a5: #ff2e003d; + --colors-tomato-a6: #f92d0050; + --colors-tomato-a7: #e7280067; + --colors-tomato-a8: #db250084; + --colors-tomato-a9: #df2600d1; + --colors-tomato-a10: #d72400da; + --colors-tomato-a11: #cd2200ea; + --colors-tomato-a12: #460900e0; + --colors-tomato-solid-bg: var(--colors-tomato-9); + --colors-tomato-solid-bg-hover: var(--colors-tomato-10); + --colors-tomato-solid-fg: white; + --colors-tomato-subtle-bg: var(--colors-tomato-a3); + --colors-tomato-subtle-bg-hover: var(--colors-tomato-a4); + --colors-tomato-subtle-bg-active: var(--colors-tomato-a5); + --colors-tomato-subtle-fg: var(--colors-tomato-a11); + --colors-tomato-surface-bg: var(--colors-tomato-a2); + --colors-tomato-surface-bg-active: var(--colors-tomato-a3); + --colors-tomato-surface-border: var(--colors-tomato-a6); + --colors-tomato-surface-border-hover: var(--colors-tomato-a7); + --colors-tomato-surface-fg: var(--colors-tomato-a11); + --colors-tomato-outline-bg-hover: var(--colors-tomato-a2); + --colors-tomato-outline-bg-active: var(--colors-tomato-a3); + --colors-tomato-outline-border: var(--colors-tomato-a7); + --colors-tomato-outline-fg: var(--colors-tomato-a11); + --colors-tomato-plain-bg-hover: var(--colors-tomato-a3); + --colors-tomato-plain-bg-active: var(--colors-tomato-a4); + --colors-tomato-plain-fg: var(--colors-tomato-a11); + --colors-violet-1: #fdfcfe; + --colors-violet-2: #faf8ff; + --colors-violet-3: #f4f0fe; + --colors-violet-4: #ebe4ff; + --colors-violet-5: #e1d9ff; + --colors-violet-6: #d4cafe; + --colors-violet-7: #c2b5f5; + --colors-violet-8: #aa99ec; + --colors-violet-9: #6e56cf; + --colors-violet-10: #654dc4; + --colors-violet-11: #6550b9; + --colors-violet-12: #2f265f; + --colors-violet-a1: #5500aa03; + --colors-violet-a2: #4900ff07; + --colors-violet-a3: #4400ee0f; + --colors-violet-a4: #4300ff1b; + --colors-violet-a5: #3600ff26; + --colors-violet-a6: #3100fb35; + --colors-violet-a7: #2d01dd4a; + --colors-violet-a8: #2b00d066; + --colors-violet-a9: #2400b7a9; + --colors-violet-a10: #2300abb2; + --colors-violet-a11: #1f0099af; + --colors-violet-a12: #0b0043d9; + --colors-violet-solid-bg: var(--colors-violet-9); + --colors-violet-solid-bg-hover: var(--colors-violet-10); + --colors-violet-solid-fg: white; + --colors-violet-subtle-bg: var(--colors-violet-a3); + --colors-violet-subtle-bg-hover: var(--colors-violet-a4); + --colors-violet-subtle-bg-active: var(--colors-violet-a5); + --colors-violet-subtle-fg: var(--colors-violet-a11); + --colors-violet-surface-bg: var(--colors-violet-a2); + --colors-violet-surface-bg-active: var(--colors-violet-a3); + --colors-violet-surface-border: var(--colors-violet-a6); + --colors-violet-surface-border-hover: var(--colors-violet-a7); + --colors-violet-surface-fg: var(--colors-violet-a11); + --colors-violet-outline-bg-hover: var(--colors-violet-a2); + --colors-violet-outline-bg-active: var(--colors-violet-a3); + --colors-violet-outline-border: var(--colors-violet-a7); + --colors-violet-outline-fg: var(--colors-violet-a11); + --colors-violet-plain-bg-hover: var(--colors-violet-a3); + --colors-violet-plain-bg-active: var(--colors-violet-a4); + --colors-violet-plain-fg: var(--colors-violet-a11); + --colors-yellow-1: #fdfdf9; + --colors-yellow-2: #fefce9; + --colors-yellow-3: #fffab8; + --colors-yellow-4: #fff394; + --colors-yellow-5: #ffe770; + --colors-yellow-6: #f3d768; + --colors-yellow-7: #e4c767; + --colors-yellow-8: #d5ae39; + --colors-yellow-9: #ffe629; + --colors-yellow-10: #ffdc00; + --colors-yellow-11: #9e6c00; + --colors-yellow-12: #473b1f; + --colors-yellow-a1: #aaaa0006; + --colors-yellow-a2: #f4dd0016; + --colors-yellow-a3: #ffee0047; + --colors-yellow-a4: #ffe3016b; + --colors-yellow-a5: #ffd5008f; + --colors-yellow-a6: #ebbc0097; + --colors-yellow-a7: #d2a10098; + --colors-yellow-a8: #c99700c6; + --colors-yellow-a9: #ffe100d6; + --colors-yellow-a10: #ffdc00; + --colors-yellow-a11: #9e6c00; + --colors-yellow-a12: #2e2000e0; + --colors-yellow-solid-bg: var(--colors-yellow-9); + --colors-yellow-solid-bg-hover: var(--colors-yellow-10); + --colors-yellow-solid-fg: var(--colors-gray-12); + --colors-yellow-subtle-bg: var(--colors-yellow-a3); + --colors-yellow-subtle-bg-hover: var(--colors-yellow-a4); + --colors-yellow-subtle-bg-active: var(--colors-yellow-a5); + --colors-yellow-subtle-fg: var(--colors-yellow-a11); + --colors-yellow-surface-bg: var(--colors-yellow-a2); + --colors-yellow-surface-bg-active: var(--colors-yellow-a3); + --colors-yellow-surface-border: var(--colors-yellow-a6); + --colors-yellow-surface-border-hover: var(--colors-yellow-a7); + --colors-yellow-surface-fg: var(--colors-yellow-a11); + --colors-yellow-outline-bg-hover: var(--colors-yellow-a2); + --colors-yellow-outline-bg-active: var(--colors-yellow-a3); + --colors-yellow-outline-border: var(--colors-yellow-a7); + --colors-yellow-outline-fg: var(--colors-yellow-a11); + --colors-yellow-plain-bg-hover: var(--colors-yellow-a3); + --colors-yellow-plain-bg-active: var(--colors-yellow-a4); + --colors-yellow-plain-fg: var(--colors-yellow-a11); + --colors-gray-1: #fcfcfc; + --colors-gray-2: #f9f9f9; + --colors-gray-3: #f0f0f0; + --colors-gray-4: #e8e8e8; + --colors-gray-5: #e0e0e0; + --colors-gray-6: #d9d9d9; + --colors-gray-7: #cecece; + --colors-gray-8: #bbbbbb; + --colors-gray-9: #8d8d8d; + --colors-gray-10: #838383; + --colors-gray-11: #646464; + --colors-gray-12: #202020; + --colors-gray-a1: #00000003; + --colors-gray-a2: #00000006; + --colors-gray-a3: #0000000f; + --colors-gray-a4: #00000017; + --colors-gray-a5: #0000001f; + --colors-gray-a6: #00000026; + --colors-gray-a7: #00000031; + --colors-gray-a8: #00000044; + --colors-gray-a9: #00000072; + --colors-gray-a10: #0000007c; + --colors-gray-a11: #0000009b; + --colors-gray-a12: #000000df; + --colors-gray-solid-bg: var(--colors-black); + --colors-gray-solid-bg-hover: var(--colors-gray-12); + --colors-gray-solid-fg: var(--colors-white); + --colors-gray-subtle-bg: var(--colors-gray-a3); + --colors-gray-subtle-bg-hover: var(--colors-gray-a4); + --colors-gray-subtle-bg-active: var(--colors-gray-a5); + --colors-gray-subtle-fg: var(--colors-gray-12); + --colors-gray-surface-bg: var(--colors-white); + --colors-gray-surface-bg-hover: var(--colors-gray-2); + --colors-gray-surface-bg-active: var(--colors-gray-3); + --colors-gray-surface-border: var(--colors-gray-6); + --colors-gray-surface-border-hover: var(--colors-gray-7); + --colors-gray-surface-fg: var(--colors-gray-12); + --colors-gray-outline-bg-hover: var(--colors-gray-a2); + --colors-gray-outline-bg-active: var(--colors-gray-a3); + --colors-gray-outline-border: var(--colors-gray-6); + --colors-gray-outline-fg: var(--colors-gray-12); + --colors-gray-plain-bg-hover: var(--colors-gray-a3); + --colors-gray-plain-bg-active: var(--colors-gray-a4); + --colors-gray-plain-fg: var(--colors-gray-12); + --colors-fg-default: var(--colors-gray-12); + --colors-fg-muted: var(--colors-gray-11); + --colors-fg-subtle: var(--colors-gray-10); + --colors-canvas: var(--colors-gray-1); + --colors-border: var(--colors-gray-4); + --colors-error: var(--colors-red-9); + --colors-bg-subtle: var(--colors-gray-2); + --shadows-xs: 0px 1px 2px var(--colors-gray-a6), 0px 0px 1px var(--colors-gray-a7); + --shadows-sm: 0px 2px 4px var(--colors-gray-a4), 0px 0px 1px var(--colors-gray-a4); + --shadows-md: 0px 4px 8px var(--colors-gray-a4), 0px 0px 1px var(--colors-gray-a4); + --shadows-lg: 0px 8px 16px var(--colors-gray-a4), 0px 0px 1px var(--colors-gray-a4); + --shadows-xl: 0px 16px 24px var(--colors-gray-a4), 0px 0px 1px var(--colors-gray-a4); + --shadows-2xl: 0px 24px 40px var(--colors-gray-a4), 0px 0px 1px var(--colors-gray-a4); + --shadows-inset: inset 8px 0 12px -8px var(--colors-gray-a4) +} + + .dark { + --colors-amber-1: #16120c; + --colors-amber-2: #1d180f; + --colors-amber-3: #302008; + --colors-amber-4: #3f2700; + --colors-amber-5: #4d3000; + --colors-amber-6: #5c3d05; + --colors-amber-7: #714f19; + --colors-amber-8: #8f6424; + --colors-amber-9: #ffc53d; + --colors-amber-10: #ffd60a; + --colors-amber-11: #ffca16; + --colors-amber-12: #ffe7b3; + --colors-amber-a1: #e63c0006; + --colors-amber-a2: #fd9b000d; + --colors-amber-a3: #fa820022; + --colors-amber-a4: #fc820032; + --colors-amber-a5: #fd8b0041; + --colors-amber-a6: #fd9b0051; + --colors-amber-a7: #ffab2567; + --colors-amber-a8: #ffae3587; + --colors-amber-a9: #ffc53d; + --colors-amber-a10: #ffd60a; + --colors-amber-a11: #ffca16; + --colors-amber-a12: #ffe7b3; + --colors-amber-solid-bg: var(--colors-amber-9); + --colors-amber-solid-bg-hover: var(--colors-amber-10); + --colors-amber-solid-fg: var(--colors-gray-1); + --colors-amber-subtle-bg: var(--colors-amber-a3); + --colors-amber-subtle-bg-hover: var(--colors-amber-a4); + --colors-amber-subtle-bg-active: var(--colors-amber-a5); + --colors-amber-subtle-fg: var(--colors-amber-a11); + --colors-amber-surface-bg: var(--colors-amber-a2); + --colors-amber-surface-bg-active: var(--colors-amber-a3); + --colors-amber-surface-border: var(--colors-amber-a6); + --colors-amber-surface-border-hover: var(--colors-amber-a7); + --colors-amber-surface-fg: var(--colors-amber-a11); + --colors-amber-outline-bg-hover: var(--colors-amber-a2); + --colors-amber-outline-bg-active: var(--colors-amber-a3); + --colors-amber-outline-border: var(--colors-amber-a7); + --colors-amber-outline-fg: var(--colors-amber-a11); + --colors-amber-plain-bg-hover: var(--colors-amber-a3); + --colors-amber-plain-bg-active: var(--colors-amber-a4); + --colors-amber-plain-fg: var(--colors-amber-a11); + --colors-blue-1: #0d1520; + --colors-blue-2: #111927; + --colors-blue-3: #0d2847; + --colors-blue-4: #003362; + --colors-blue-5: #004074; + --colors-blue-6: #104d87; + --colors-blue-7: #205d9e; + --colors-blue-8: #2870bd; + --colors-blue-9: #0090ff; + --colors-blue-10: #3b9eff; + --colors-blue-11: #70b8ff; + --colors-blue-12: #c2e6ff; + --colors-blue-a1: #004df211; + --colors-blue-a2: #1166fb18; + --colors-blue-a3: #0077ff3a; + --colors-blue-a4: #0075ff57; + --colors-blue-a5: #0081fd6b; + --colors-blue-a6: #0f89fd7f; + --colors-blue-a7: #2a91fe98; + --colors-blue-a8: #3094feb9; + --colors-blue-a9: #0090ff; + --colors-blue-a10: #3b9eff; + --colors-blue-a11: #70b8ff; + --colors-blue-a12: #c2e6ff; + --colors-blue-solid-bg: var(--colors-blue-9); + --colors-blue-solid-bg-hover: var(--colors-blue-10); + --colors-blue-solid-fg: white; + --colors-blue-subtle-bg: var(--colors-blue-a3); + --colors-blue-subtle-bg-hover: var(--colors-blue-a4); + --colors-blue-subtle-bg-active: var(--colors-blue-a5); + --colors-blue-subtle-fg: var(--colors-blue-a11); + --colors-blue-surface-bg: var(--colors-blue-a2); + --colors-blue-surface-bg-active: var(--colors-blue-a3); + --colors-blue-surface-border: var(--colors-blue-a6); + --colors-blue-surface-border-hover: var(--colors-blue-a7); + --colors-blue-surface-fg: var(--colors-blue-a11); + --colors-blue-outline-bg-hover: var(--colors-blue-a2); + --colors-blue-outline-bg-active: var(--colors-blue-a3); + --colors-blue-outline-border: var(--colors-blue-a7); + --colors-blue-outline-fg: var(--colors-blue-a11); + --colors-blue-plain-bg-hover: var(--colors-blue-a3); + --colors-blue-plain-bg-active: var(--colors-blue-a4); + --colors-blue-plain-fg: var(--colors-blue-a11); + --colors-bronze-1: #141110; + --colors-bronze-2: #1c1917; + --colors-bronze-3: #262220; + --colors-bronze-4: #302a27; + --colors-bronze-5: #3b3330; + --colors-bronze-6: #493e3a; + --colors-bronze-7: #5a4c47; + --colors-bronze-8: #6f5f58; + --colors-bronze-9: #a18072; + --colors-bronze-10: #ae8c7e; + --colors-bronze-11: #d4b3a5; + --colors-bronze-12: #ede0d9; + --colors-bronze-a1: #d1110004; + --colors-bronze-a2: #fbbc910c; + --colors-bronze-a3: #faceb817; + --colors-bronze-a4: #facdb622; + --colors-bronze-a5: #ffd2c12d; + --colors-bronze-a6: #ffd1c03c; + --colors-bronze-a7: #fdd0c04f; + --colors-bronze-a8: #ffd6c565; + --colors-bronze-a9: #fec7b09b; + --colors-bronze-a10: #fecab5a9; + --colors-bronze-a11: #ffd7c6d1; + --colors-bronze-a12: #fff1e9ec; + --colors-bronze-solid-bg: var(--colors-bronze-9); + --colors-bronze-solid-bg-hover: var(--colors-bronze-10); + --colors-bronze-solid-fg: white; + --colors-bronze-subtle-bg: var(--colors-bronze-a3); + --colors-bronze-subtle-bg-hover: var(--colors-bronze-a4); + --colors-bronze-subtle-bg-active: var(--colors-bronze-a5); + --colors-bronze-subtle-fg: var(--colors-bronze-a11); + --colors-bronze-surface-bg: var(--colors-bronze-a2); + --colors-bronze-surface-bg-active: var(--colors-bronze-a3); + --colors-bronze-surface-border: var(--colors-bronze-a6); + --colors-bronze-surface-border-hover: var(--colors-bronze-a7); + --colors-bronze-surface-fg: var(--colors-bronze-a11); + --colors-bronze-outline-bg-hover: var(--colors-bronze-a2); + --colors-bronze-outline-bg-active: var(--colors-bronze-a3); + --colors-bronze-outline-border: var(--colors-bronze-a7); + --colors-bronze-outline-fg: var(--colors-bronze-a11); + --colors-bronze-plain-bg-hover: var(--colors-bronze-a3); + --colors-bronze-plain-bg-active: var(--colors-bronze-a4); + --colors-bronze-plain-fg: var(--colors-bronze-a11); + --colors-brown-1: #12110f; + --colors-brown-2: #1c1816; + --colors-brown-3: #28211d; + --colors-brown-4: #322922; + --colors-brown-5: #3e3128; + --colors-brown-6: #4d3c2f; + --colors-brown-7: #614a39; + --colors-brown-8: #7c5f46; + --colors-brown-9: #ad7f58; + --colors-brown-10: #b88c67; + --colors-brown-11: #dbb594; + --colors-brown-12: #f2e1ca; + --colors-brown-a1: #91110002; + --colors-brown-a2: #fba67c0c; + --colors-brown-a3: #fcb58c19; + --colors-brown-a4: #fbbb8a24; + --colors-brown-a5: #fcb88931; + --colors-brown-a6: #fdba8741; + --colors-brown-a7: #ffbb8856; + --colors-brown-a8: #ffbe8773; + --colors-brown-a9: #feb87da8; + --colors-brown-a10: #ffc18cb3; + --colors-brown-a11: #fed1aad9; + --colors-brown-a12: #feecd4f2; + --colors-brown-solid-bg: var(--colors-brown-9); + --colors-brown-solid-bg-hover: var(--colors-brown-10); + --colors-brown-solid-fg: white; + --colors-brown-subtle-bg: var(--colors-brown-a3); + --colors-brown-subtle-bg-hover: var(--colors-brown-a4); + --colors-brown-subtle-bg-active: var(--colors-brown-a5); + --colors-brown-subtle-fg: var(--colors-brown-a11); + --colors-brown-surface-bg: var(--colors-brown-a2); + --colors-brown-surface-bg-active: var(--colors-brown-a3); + --colors-brown-surface-border: var(--colors-brown-a6); + --colors-brown-surface-border-hover: var(--colors-brown-a7); + --colors-brown-surface-fg: var(--colors-brown-a11); + --colors-brown-outline-bg-hover: var(--colors-brown-a2); + --colors-brown-outline-bg-active: var(--colors-brown-a3); + --colors-brown-outline-border: var(--colors-brown-a7); + --colors-brown-outline-fg: var(--colors-brown-a11); + --colors-brown-plain-bg-hover: var(--colors-brown-a3); + --colors-brown-plain-bg-active: var(--colors-brown-a4); + --colors-brown-plain-fg: var(--colors-brown-a11); + --colors-crimson-1: #191114; + --colors-crimson-2: #201318; + --colors-crimson-3: #381525; + --colors-crimson-4: #4d122f; + --colors-crimson-5: #5c1839; + --colors-crimson-6: #6d2545; + --colors-crimson-7: #873356; + --colors-crimson-8: #b0436e; + --colors-crimson-9: #e93d82; + --colors-crimson-10: #ee518a; + --colors-crimson-11: #ff92ad; + --colors-crimson-12: #fdd3e8; + --colors-crimson-a1: #f4126709; + --colors-crimson-a2: #f22f7a11; + --colors-crimson-a3: #fe2a8b2a; + --colors-crimson-a4: #fd158741; + --colors-crimson-a5: #fd278f51; + --colors-crimson-a6: #fe459763; + --colors-crimson-a7: #fd559b7f; + --colors-crimson-a8: #fe5b9bab; + --colors-crimson-a9: #fe418de8; + --colors-crimson-a10: #ff5693ed; + --colors-crimson-a11: #ff92ad; + --colors-crimson-a12: #ffd5eafd; + --colors-crimson-solid-bg: var(--colors-crimson-9); + --colors-crimson-solid-bg-hover: var(--colors-crimson-10); + --colors-crimson-solid-fg: white; + --colors-crimson-subtle-bg: var(--colors-crimson-a3); + --colors-crimson-subtle-bg-hover: var(--colors-crimson-a4); + --colors-crimson-subtle-bg-active: var(--colors-crimson-a5); + --colors-crimson-subtle-fg: var(--colors-crimson-a11); + --colors-crimson-surface-bg: var(--colors-crimson-a2); + --colors-crimson-surface-bg-active: var(--colors-crimson-a3); + --colors-crimson-surface-border: var(--colors-crimson-a6); + --colors-crimson-surface-border-hover: var(--colors-crimson-a7); + --colors-crimson-surface-fg: var(--colors-crimson-a11); + --colors-crimson-outline-bg-hover: var(--colors-crimson-a2); + --colors-crimson-outline-bg-active: var(--colors-crimson-a3); + --colors-crimson-outline-border: var(--colors-crimson-a7); + --colors-crimson-outline-fg: var(--colors-crimson-a11); + --colors-crimson-plain-bg-hover: var(--colors-crimson-a3); + --colors-crimson-plain-bg-active: var(--colors-crimson-a4); + --colors-crimson-plain-fg: var(--colors-crimson-a11); + --colors-cyan-1: #0b161a; + --colors-cyan-2: #101b20; + --colors-cyan-3: #082c36; + --colors-cyan-4: #003848; + --colors-cyan-5: #004558; + --colors-cyan-6: #045468; + --colors-cyan-7: #12677e; + --colors-cyan-8: #11809c; + --colors-cyan-9: #00a2c7; + --colors-cyan-10: #23afd0; + --colors-cyan-11: #4ccce6; + --colors-cyan-12: #b6ecf7; + --colors-cyan-a1: #0091f70a; + --colors-cyan-a2: #02a7f211; + --colors-cyan-a3: #00befd28; + --colors-cyan-a4: #00baff3b; + --colors-cyan-a5: #00befd4d; + --colors-cyan-a6: #00c7fd5e; + --colors-cyan-a7: #14cdff75; + --colors-cyan-a8: #11cfff95; + --colors-cyan-a9: #00cfffc3; + --colors-cyan-a10: #28d6ffcd; + --colors-cyan-a11: #52e1fee5; + --colors-cyan-a12: #bbf3fef7; + --colors-cyan-solid-bg: var(--colors-cyan-9); + --colors-cyan-solid-bg-hover: var(--colors-cyan-10); + --colors-cyan-solid-fg: white; + --colors-cyan-subtle-bg: var(--colors-cyan-a3); + --colors-cyan-subtle-bg-hover: var(--colors-cyan-a4); + --colors-cyan-subtle-bg-active: var(--colors-cyan-a5); + --colors-cyan-subtle-fg: var(--colors-cyan-a11); + --colors-cyan-surface-bg: var(--colors-cyan-a2); + --colors-cyan-surface-bg-active: var(--colors-cyan-a3); + --colors-cyan-surface-border: var(--colors-cyan-a6); + --colors-cyan-surface-border-hover: var(--colors-cyan-a7); + --colors-cyan-surface-fg: var(--colors-cyan-a11); + --colors-cyan-outline-bg-hover: var(--colors-cyan-a2); + --colors-cyan-outline-bg-active: var(--colors-cyan-a3); + --colors-cyan-outline-border: var(--colors-cyan-a7); + --colors-cyan-outline-fg: var(--colors-cyan-a11); + --colors-cyan-plain-bg-hover: var(--colors-cyan-a3); + --colors-cyan-plain-bg-active: var(--colors-cyan-a4); + --colors-cyan-plain-fg: var(--colors-cyan-a11); + --colors-gold-1: #121211; + --colors-gold-2: #1b1a17; + --colors-gold-3: #24231f; + --colors-gold-4: #2d2b26; + --colors-gold-5: #38352e; + --colors-gold-6: #444039; + --colors-gold-7: #544f46; + --colors-gold-8: #696256; + --colors-gold-9: #978365; + --colors-gold-10: #a39073; + --colors-gold-11: #cbb99f; + --colors-gold-12: #e8e2d9; + --colors-gold-a1: #91911102; + --colors-gold-a2: #f9e29d0b; + --colors-gold-a3: #f8ecbb15; + --colors-gold-a4: #ffeec41e; + --colors-gold-a5: #feecc22a; + --colors-gold-a6: #feebcb37; + --colors-gold-a7: #ffedcd48; + --colors-gold-a8: #fdeaca5f; + --colors-gold-a9: #ffdba690; + --colors-gold-a10: #fedfb09d; + --colors-gold-a11: #fee7c6c8; + --colors-gold-a12: #fef7ede7; + --colors-gold-solid-bg: var(--colors-gold-9); + --colors-gold-solid-bg-hover: var(--colors-gold-10); + --colors-gold-solid-fg: white; + --colors-gold-subtle-bg: var(--colors-gold-a3); + --colors-gold-subtle-bg-hover: var(--colors-gold-a4); + --colors-gold-subtle-bg-active: var(--colors-gold-a5); + --colors-gold-subtle-fg: var(--colors-gold-a11); + --colors-gold-surface-bg: var(--colors-gold-a2); + --colors-gold-surface-bg-active: var(--colors-gold-a3); + --colors-gold-surface-border: var(--colors-gold-a6); + --colors-gold-surface-border-hover: var(--colors-gold-a7); + --colors-gold-surface-fg: var(--colors-gold-a11); + --colors-gold-outline-bg-hover: var(--colors-gold-a2); + --colors-gold-outline-bg-active: var(--colors-gold-a3); + --colors-gold-outline-border: var(--colors-gold-a7); + --colors-gold-outline-fg: var(--colors-gold-a11); + --colors-gold-plain-bg-hover: var(--colors-gold-a3); + --colors-gold-plain-bg-active: var(--colors-gold-a4); + --colors-gold-plain-fg: var(--colors-gold-a11); + --colors-grass-1: #0e1511; + --colors-grass-2: #141a15; + --colors-grass-3: #1b2a1e; + --colors-grass-4: #1d3a24; + --colors-grass-5: #25482d; + --colors-grass-6: #2d5736; + --colors-grass-7: #366740; + --colors-grass-8: #3e7949; + --colors-grass-9: #46a758; + --colors-grass-10: #53b365; + --colors-grass-11: #71d083; + --colors-grass-12: #c2f0c2; + --colors-grass-a1: #00de1205; + --colors-grass-a2: #5ef7780a; + --colors-grass-a3: #70fe8c1b; + --colors-grass-a4: #57ff802c; + --colors-grass-a5: #68ff8b3b; + --colors-grass-a6: #71ff8f4b; + --colors-grass-a7: #77fd925d; + --colors-grass-a8: #77fd9070; + --colors-grass-a9: #65ff82a1; + --colors-grass-a10: #72ff8dae; + --colors-grass-a11: #89ff9fcd; + --colors-grass-a12: #ceffceef; + --colors-grass-solid-bg: var(--colors-grass-9); + --colors-grass-solid-bg-hover: var(--colors-grass-10); + --colors-grass-solid-fg: white; + --colors-grass-subtle-bg: var(--colors-grass-a3); + --colors-grass-subtle-bg-hover: var(--colors-grass-a4); + --colors-grass-subtle-bg-active: var(--colors-grass-a5); + --colors-grass-subtle-fg: var(--colors-grass-a11); + --colors-grass-surface-bg: var(--colors-grass-a2); + --colors-grass-surface-bg-active: var(--colors-grass-a3); + --colors-grass-surface-border: var(--colors-grass-a6); + --colors-grass-surface-border-hover: var(--colors-grass-a7); + --colors-grass-surface-fg: var(--colors-grass-a11); + --colors-grass-outline-bg-hover: var(--colors-grass-a2); + --colors-grass-outline-bg-active: var(--colors-grass-a3); + --colors-grass-outline-border: var(--colors-grass-a7); + --colors-grass-outline-fg: var(--colors-grass-a11); + --colors-grass-plain-bg-hover: var(--colors-grass-a3); + --colors-grass-plain-bg-active: var(--colors-grass-a4); + --colors-grass-plain-fg: var(--colors-grass-a11); + --colors-green-1: #0e1512; + --colors-green-2: #121b17; + --colors-green-3: #132d21; + --colors-green-4: #113b29; + --colors-green-5: #174933; + --colors-green-6: #20573e; + --colors-green-7: #28684a; + --colors-green-8: #2f7c57; + --colors-green-9: #30a46c; + --colors-green-10: #33b074; + --colors-green-11: #3dd68c; + --colors-green-12: #b1f1cb; + --colors-green-a1: #00de4505; + --colors-green-a2: #29f99d0b; + --colors-green-a3: #22ff991e; + --colors-green-a4: #11ff992d; + --colors-green-a5: #2bffa23c; + --colors-green-a6: #44ffaa4b; + --colors-green-a7: #50fdac5e; + --colors-green-a8: #54ffad73; + --colors-green-a9: #44ffa49e; + --colors-green-a10: #43fea4ab; + --colors-green-a11: #46fea5d4; + --colors-green-a12: #bbffd7f0; + --colors-green-solid-bg: var(--colors-green-9); + --colors-green-solid-bg-hover: var(--colors-green-10); + --colors-green-solid-fg: white; + --colors-green-subtle-bg: var(--colors-green-a3); + --colors-green-subtle-bg-hover: var(--colors-green-a4); + --colors-green-subtle-bg-active: var(--colors-green-a5); + --colors-green-subtle-fg: var(--colors-green-a11); + --colors-green-surface-bg: var(--colors-green-a2); + --colors-green-surface-bg-active: var(--colors-green-a3); + --colors-green-surface-border: var(--colors-green-a6); + --colors-green-surface-border-hover: var(--colors-green-a7); + --colors-green-surface-fg: var(--colors-green-a11); + --colors-green-outline-bg-hover: var(--colors-green-a2); + --colors-green-outline-bg-active: var(--colors-green-a3); + --colors-green-outline-border: var(--colors-green-a7); + --colors-green-outline-fg: var(--colors-green-a11); + --colors-green-plain-bg-hover: var(--colors-green-a3); + --colors-green-plain-bg-active: var(--colors-green-a4); + --colors-green-plain-fg: var(--colors-green-a11); + --colors-indigo-1: #11131f; + --colors-indigo-2: #141726; + --colors-indigo-3: #182449; + --colors-indigo-4: #1d2e62; + --colors-indigo-5: #253974; + --colors-indigo-6: #304384; + --colors-indigo-7: #3a4f97; + --colors-indigo-8: #435db1; + --colors-indigo-9: #3e63dd; + --colors-indigo-10: #5472e4; + --colors-indigo-11: #9eb1ff; + --colors-indigo-12: #d6e1ff; + --colors-indigo-a1: #1133ff0f; + --colors-indigo-a2: #3354fa17; + --colors-indigo-a3: #2f62ff3c; + --colors-indigo-a4: #3566ff57; + --colors-indigo-a5: #4171fd6b; + --colors-indigo-a6: #5178fd7c; + --colors-indigo-a7: #5a7fff90; + --colors-indigo-a8: #5b81feac; + --colors-indigo-a9: #4671ffdb; + --colors-indigo-a10: #5c7efee3; + --colors-indigo-a11: #9eb1ff; + --colors-indigo-a12: #d6e1ff; + --colors-indigo-solid-bg: var(--colors-indigo-9); + --colors-indigo-solid-bg-hover: var(--colors-indigo-10); + --colors-indigo-solid-fg: white; + --colors-indigo-subtle-bg: var(--colors-indigo-a3); + --colors-indigo-subtle-bg-hover: var(--colors-indigo-a4); + --colors-indigo-subtle-bg-active: var(--colors-indigo-a5); + --colors-indigo-subtle-fg: var(--colors-indigo-a11); + --colors-indigo-surface-bg: var(--colors-indigo-a2); + --colors-indigo-surface-bg-active: var(--colors-indigo-a3); + --colors-indigo-surface-border: var(--colors-indigo-a6); + --colors-indigo-surface-border-hover: var(--colors-indigo-a7); + --colors-indigo-surface-fg: var(--colors-indigo-a11); + --colors-indigo-outline-bg-hover: var(--colors-indigo-a2); + --colors-indigo-outline-bg-active: var(--colors-indigo-a3); + --colors-indigo-outline-border: var(--colors-indigo-a7); + --colors-indigo-outline-fg: var(--colors-indigo-a11); + --colors-indigo-plain-bg-hover: var(--colors-indigo-a3); + --colors-indigo-plain-bg-active: var(--colors-indigo-a4); + --colors-indigo-plain-fg: var(--colors-indigo-a11); + --colors-iris-1: #13131e; + --colors-iris-2: #171625; + --colors-iris-3: #202248; + --colors-iris-4: #262a65; + --colors-iris-5: #303374; + --colors-iris-6: #3d3e82; + --colors-iris-7: #4a4a95; + --colors-iris-8: #5958b1; + --colors-iris-9: #5b5bd6; + --colors-iris-10: #6e6ade; + --colors-iris-11: #b1a9ff; + --colors-iris-12: #e0dffe; + --colors-iris-a1: #3636fe0e; + --colors-iris-a2: #564bf916; + --colors-iris-a3: #525bff3b; + --colors-iris-a4: #4d58ff5a; + --colors-iris-a5: #5b62fd6b; + --colors-iris-a6: #6d6ffd7a; + --colors-iris-a7: #7777fe8e; + --colors-iris-a8: #7b7afeac; + --colors-iris-a9: #6a6afed4; + --colors-iris-a10: #7d79ffdc; + --colors-iris-a11: #b1a9ff; + --colors-iris-a12: #e1e0fffe; + --colors-iris-solid-bg: var(--colors-iris-9); + --colors-iris-solid-bg-hover: var(--colors-iris-10); + --colors-iris-solid-fg: white; + --colors-iris-subtle-bg: var(--colors-iris-a3); + --colors-iris-subtle-bg-hover: var(--colors-iris-a4); + --colors-iris-subtle-bg-active: var(--colors-iris-a5); + --colors-iris-subtle-fg: var(--colors-iris-a11); + --colors-iris-surface-bg: var(--colors-iris-a2); + --colors-iris-surface-bg-active: var(--colors-iris-a3); + --colors-iris-surface-border: var(--colors-iris-a6); + --colors-iris-surface-border-hover: var(--colors-iris-a7); + --colors-iris-surface-fg: var(--colors-iris-a11); + --colors-iris-outline-bg-hover: var(--colors-iris-a2); + --colors-iris-outline-bg-active: var(--colors-iris-a3); + --colors-iris-outline-border: var(--colors-iris-a7); + --colors-iris-outline-fg: var(--colors-iris-a11); + --colors-iris-plain-bg-hover: var(--colors-iris-a3); + --colors-iris-plain-bg-active: var(--colors-iris-a4); + --colors-iris-plain-fg: var(--colors-iris-a11); + --colors-jade-1: #0d1512; + --colors-jade-2: #121c18; + --colors-jade-3: #0f2e22; + --colors-jade-4: #0b3b2c; + --colors-jade-5: #114837; + --colors-jade-6: #1b5745; + --colors-jade-7: #246854; + --colors-jade-8: #2a7e68; + --colors-jade-9: #29a383; + --colors-jade-10: #27b08b; + --colors-jade-11: #1fd8a4; + --colors-jade-12: #adf0d4; + --colors-jade-a1: #00de4505; + --colors-jade-a2: #27fba60c; + --colors-jade-a3: #02f99920; + --colors-jade-a4: #00ffaa2d; + --colors-jade-a5: #11ffb63b; + --colors-jade-a6: #34ffc24b; + --colors-jade-a7: #45fdc75e; + --colors-jade-a8: #48ffcf75; + --colors-jade-a9: #38feca9d; + --colors-jade-a10: #31fec7ab; + --colors-jade-a11: #21fec0d6; + --colors-jade-a12: #b8ffe1ef; + --colors-jade-solid-bg: var(--colors-jade-9); + --colors-jade-solid-bg-hover: var(--colors-jade-10); + --colors-jade-solid-fg: white; + --colors-jade-subtle-bg: var(--colors-jade-a3); + --colors-jade-subtle-bg-hover: var(--colors-jade-a4); + --colors-jade-subtle-bg-active: var(--colors-jade-a5); + --colors-jade-subtle-fg: var(--colors-jade-a11); + --colors-jade-surface-bg: var(--colors-jade-a2); + --colors-jade-surface-bg-active: var(--colors-jade-a3); + --colors-jade-surface-border: var(--colors-jade-a6); + --colors-jade-surface-border-hover: var(--colors-jade-a7); + --colors-jade-surface-fg: var(--colors-jade-a11); + --colors-jade-outline-bg-hover: var(--colors-jade-a2); + --colors-jade-outline-bg-active: var(--colors-jade-a3); + --colors-jade-outline-border: var(--colors-jade-a7); + --colors-jade-outline-fg: var(--colors-jade-a11); + --colors-jade-plain-bg-hover: var(--colors-jade-a3); + --colors-jade-plain-bg-active: var(--colors-jade-a4); + --colors-jade-plain-fg: var(--colors-jade-a11); + --colors-lime-1: #11130c; + --colors-lime-2: #151a10; + --colors-lime-3: #1f2917; + --colors-lime-4: #29371d; + --colors-lime-5: #334423; + --colors-lime-6: #3d522a; + --colors-lime-7: #496231; + --colors-lime-8: #577538; + --colors-lime-9: #bdee63; + --colors-lime-10: #d4ff70; + --colors-lime-11: #bde56c; + --colors-lime-12: #e3f7ba; + --colors-lime-a1: #11bb0003; + --colors-lime-a2: #78f7000a; + --colors-lime-a3: #9bfd4c1a; + --colors-lime-a4: #a7fe5c29; + --colors-lime-a5: #affe6537; + --colors-lime-a6: #b2fe6d46; + --colors-lime-a7: #b6ff6f57; + --colors-lime-a8: #b6fd6d6c; + --colors-lime-a9: #caff69ed; + --colors-lime-a10: #d4ff70; + --colors-lime-a11: #d1fe77e4; + --colors-lime-a12: #e9febff7; + --colors-lime-solid-bg: var(--colors-lime-9); + --colors-lime-solid-bg-hover: var(--colors-lime-10); + --colors-lime-solid-fg: var(--colors-gray-1); + --colors-lime-subtle-bg: var(--colors-lime-a3); + --colors-lime-subtle-bg-hover: var(--colors-lime-a4); + --colors-lime-subtle-bg-active: var(--colors-lime-a5); + --colors-lime-subtle-fg: var(--colors-lime-a11); + --colors-lime-surface-bg: var(--colors-lime-a2); + --colors-lime-surface-bg-active: var(--colors-lime-a3); + --colors-lime-surface-border: var(--colors-lime-a6); + --colors-lime-surface-border-hover: var(--colors-lime-a7); + --colors-lime-surface-fg: var(--colors-lime-a11); + --colors-lime-outline-bg-hover: var(--colors-lime-a2); + --colors-lime-outline-bg-active: var(--colors-lime-a3); + --colors-lime-outline-border: var(--colors-lime-a7); + --colors-lime-outline-fg: var(--colors-lime-a11); + --colors-lime-plain-bg-hover: var(--colors-lime-a3); + --colors-lime-plain-bg-active: var(--colors-lime-a4); + --colors-lime-plain-fg: var(--colors-lime-a11); + --colors-mauve-1: #121113; + --colors-mauve-2: #1a191b; + --colors-mauve-3: #232225; + --colors-mauve-4: #2b292d; + --colors-mauve-5: #323035; + --colors-mauve-6: #3c393f; + --colors-mauve-7: #49474e; + --colors-mauve-8: #625f69; + --colors-mauve-9: #6f6d78; + --colors-mauve-10: #7c7a85; + --colors-mauve-11: #b5b2bc; + --colors-mauve-12: #eeeef0; + --colors-mauve-a1: #00000000; + --colors-mauve-a2: #f5f4f609; + --colors-mauve-a3: #ebeaf814; + --colors-mauve-a4: #eee5f81d; + --colors-mauve-a5: #efe6fe25; + --colors-mauve-a6: #f1e6fd30; + --colors-mauve-a7: #eee9ff40; + --colors-mauve-a8: #eee7ff5d; + --colors-mauve-a9: #eae6fd6e; + --colors-mauve-a10: #ece9fd7c; + --colors-mauve-a11: #f5f1ffb7; + --colors-mauve-a12: #fdfdffef; + --colors-mauve-solid-bg: var(--colors-white); + --colors-mauve-solid-bg-hover: var(--colors-gray-12); + --colors-mauve-solid-fg: var(--colors-black); + --colors-mauve-subtle-bg: var(--colors-gray-a3); + --colors-mauve-subtle-bg-hover: var(--colors-gray-a4); + --colors-mauve-subtle-bg-active: var(--colors-gray-a5); + --colors-mauve-subtle-fg: var(--colors-gray-12); + --colors-mauve-surface-bg: var(--colors-gray-1); + --colors-mauve-surface-bg-hover: var(--colors-gray-2); + --colors-mauve-surface-bg-active: var(--colors-gray-3); + --colors-mauve-surface-border: var(--colors-gray-6); + --colors-mauve-surface-border-hover: var(--colors-gray-7); + --colors-mauve-surface-fg: var(--colors-gray-12); + --colors-mauve-outline-bg-hover: var(--colors-gray-a2); + --colors-mauve-outline-bg-active: var(--colors-gray-a3); + --colors-mauve-outline-border: var(--colors-gray-6); + --colors-mauve-outline-fg: var(--colors-gray-12); + --colors-mauve-plain-bg-hover: var(--colors-gray-a3); + --colors-mauve-plain-bg-active: var(--colors-gray-a4); + --colors-mauve-plain-fg: var(--colors-gray-12); + --colors-mint-1: #0e1515; + --colors-mint-2: #0f1b1b; + --colors-mint-3: #092c2b; + --colors-mint-4: #003a38; + --colors-mint-5: #004744; + --colors-mint-6: #105650; + --colors-mint-7: #1e685f; + --colors-mint-8: #277f70; + --colors-mint-9: #86ead4; + --colors-mint-10: #a8f5e5; + --colors-mint-11: #58d5ba; + --colors-mint-12: #c4f5e1; + --colors-mint-a1: #00dede05; + --colors-mint-a2: #00f9f90b; + --colors-mint-a3: #00fff61d; + --colors-mint-a4: #00fff42c; + --colors-mint-a5: #00fff23a; + --colors-mint-a6: #0effeb4a; + --colors-mint-a7: #34fde55e; + --colors-mint-a8: #41ffdf76; + --colors-mint-a9: #92ffe7e9; + --colors-mint-a10: #aefeedf5; + --colors-mint-a11: #67ffded2; + --colors-mint-a12: #cbfee9f5; + --colors-mint-solid-bg: var(--colors-mint-9); + --colors-mint-solid-bg-hover: var(--colors-mint-10); + --colors-mint-solid-fg: var(--colors-gray-1); + --colors-mint-subtle-bg: var(--colors-mint-a3); + --colors-mint-subtle-bg-hover: var(--colors-mint-a4); + --colors-mint-subtle-bg-active: var(--colors-mint-a5); + --colors-mint-subtle-fg: var(--colors-mint-a11); + --colors-mint-surface-bg: var(--colors-mint-a2); + --colors-mint-surface-bg-active: var(--colors-mint-a3); + --colors-mint-surface-border: var(--colors-mint-a6); + --colors-mint-surface-border-hover: var(--colors-mint-a7); + --colors-mint-surface-fg: var(--colors-mint-a11); + --colors-mint-outline-bg-hover: var(--colors-mint-a2); + --colors-mint-outline-bg-active: var(--colors-mint-a3); + --colors-mint-outline-border: var(--colors-mint-a7); + --colors-mint-outline-fg: var(--colors-mint-a11); + --colors-mint-plain-bg-hover: var(--colors-mint-a3); + --colors-mint-plain-bg-active: var(--colors-mint-a4); + --colors-mint-plain-fg: var(--colors-mint-a11); + --colors-neutral-1: #111111; + --colors-neutral-2: #191919; + --colors-neutral-3: #222222; + --colors-neutral-4: #2a2a2a; + --colors-neutral-5: #313131; + --colors-neutral-6: #3a3a3a; + --colors-neutral-7: #484848; + --colors-neutral-8: #606060; + --colors-neutral-9: #6e6e6e; + --colors-neutral-10: #7b7b7b; + --colors-neutral-11: #b4b4b4; + --colors-neutral-12: #eeeeee; + --colors-neutral-a1: #00000000; + --colors-neutral-a2: #ffffff09; + --colors-neutral-a3: #ffffff12; + --colors-neutral-a4: #ffffff1b; + --colors-neutral-a5: #ffffff22; + --colors-neutral-a6: #ffffff2c; + --colors-neutral-a7: #ffffff3b; + --colors-neutral-a8: #ffffff55; + --colors-neutral-a9: #ffffff64; + --colors-neutral-a10: #ffffff72; + --colors-neutral-a11: #ffffffaf; + --colors-neutral-a12: #ffffffed; + --colors-neutral-solid-bg: var(--colors-white); + --colors-neutral-solid-bg-hover: var(--colors-gray-12); + --colors-neutral-solid-fg: var(--colors-black); + --colors-neutral-subtle-bg: var(--colors-gray-a3); + --colors-neutral-subtle-bg-hover: var(--colors-gray-a4); + --colors-neutral-subtle-bg-active: var(--colors-gray-a5); + --colors-neutral-subtle-fg: var(--colors-gray-12); + --colors-neutral-surface-bg: var(--colors-gray-1); + --colors-neutral-surface-bg-hover: var(--colors-gray-2); + --colors-neutral-surface-bg-active: var(--colors-gray-3); + --colors-neutral-surface-border: var(--colors-gray-6); + --colors-neutral-surface-border-hover: var(--colors-gray-7); + --colors-neutral-surface-fg: var(--colors-gray-12); + --colors-neutral-outline-bg-hover: var(--colors-gray-a2); + --colors-neutral-outline-bg-active: var(--colors-gray-a3); + --colors-neutral-outline-border: var(--colors-gray-6); + --colors-neutral-outline-fg: var(--colors-gray-12); + --colors-neutral-plain-bg-hover: var(--colors-gray-a3); + --colors-neutral-plain-bg-active: var(--colors-gray-a4); + --colors-neutral-plain-fg: var(--colors-gray-12); + --colors-olive-1: #111210; + --colors-olive-2: #181917; + --colors-olive-3: #212220; + --colors-olive-4: #282a27; + --colors-olive-5: #2f312e; + --colors-olive-6: #383a36; + --colors-olive-7: #454843; + --colors-olive-8: #5c625b; + --colors-olive-9: #687066; + --colors-olive-10: #767d74; + --colors-olive-11: #afb5ad; + --colors-olive-12: #eceeec; + --colors-olive-a1: #00000000; + --colors-olive-a2: #f1f2f008; + --colors-olive-a3: #f4f5f312; + --colors-olive-a4: #f3fef21a; + --colors-olive-a5: #f2fbf122; + --colors-olive-a6: #f4faed2c; + --colors-olive-a7: #f2fced3b; + --colors-olive-a8: #edfdeb57; + --colors-olive-a9: #ebfde766; + --colors-olive-a10: #f0fdec74; + --colors-olive-a11: #f6fef4b0; + --colors-olive-a12: #fdfffded; + --colors-olive-solid-bg: var(--colors-white); + --colors-olive-solid-bg-hover: var(--colors-gray-12); + --colors-olive-solid-fg: var(--colors-black); + --colors-olive-subtle-bg: var(--colors-gray-a3); + --colors-olive-subtle-bg-hover: var(--colors-gray-a4); + --colors-olive-subtle-bg-active: var(--colors-gray-a5); + --colors-olive-subtle-fg: var(--colors-gray-12); + --colors-olive-surface-bg: var(--colors-gray-1); + --colors-olive-surface-bg-hover: var(--colors-gray-2); + --colors-olive-surface-bg-active: var(--colors-gray-3); + --colors-olive-surface-border: var(--colors-gray-6); + --colors-olive-surface-border-hover: var(--colors-gray-7); + --colors-olive-surface-fg: var(--colors-gray-12); + --colors-olive-outline-bg-hover: var(--colors-gray-a2); + --colors-olive-outline-bg-active: var(--colors-gray-a3); + --colors-olive-outline-border: var(--colors-gray-6); + --colors-olive-outline-fg: var(--colors-gray-12); + --colors-olive-plain-bg-hover: var(--colors-gray-a3); + --colors-olive-plain-bg-active: var(--colors-gray-a4); + --colors-olive-plain-fg: var(--colors-gray-12); + --colors-orange-1: #17120e; + --colors-orange-2: #1e160f; + --colors-orange-3: #331e0b; + --colors-orange-4: #462100; + --colors-orange-5: #562800; + --colors-orange-6: #66350c; + --colors-orange-7: #7e451d; + --colors-orange-8: #a35829; + --colors-orange-9: #f76b15; + --colors-orange-10: #ff801f; + --colors-orange-11: #ffa057; + --colors-orange-12: #ffe0c2; + --colors-orange-a1: #ec360007; + --colors-orange-a2: #fe6d000e; + --colors-orange-a3: #fb6a0025; + --colors-orange-a4: #ff590039; + --colors-orange-a5: #ff61004a; + --colors-orange-a6: #fd75045c; + --colors-orange-a7: #ff832c75; + --colors-orange-a8: #fe84389d; + --colors-orange-a9: #fe6d15f7; + --colors-orange-a10: #ff801f; + --colors-orange-a11: #ffa057; + --colors-orange-a12: #ffe0c2; + --colors-orange-solid-bg: var(--colors-orange-9); + --colors-orange-solid-bg-hover: var(--colors-orange-10); + --colors-orange-solid-fg: white; + --colors-orange-subtle-bg: var(--colors-orange-a3); + --colors-orange-subtle-bg-hover: var(--colors-orange-a4); + --colors-orange-subtle-bg-active: var(--colors-orange-a5); + --colors-orange-subtle-fg: var(--colors-orange-a11); + --colors-orange-surface-bg: var(--colors-orange-a2); + --colors-orange-surface-bg-active: var(--colors-orange-a3); + --colors-orange-surface-border: var(--colors-orange-a6); + --colors-orange-surface-border-hover: var(--colors-orange-a7); + --colors-orange-surface-fg: var(--colors-orange-a11); + --colors-orange-outline-bg-hover: var(--colors-orange-a2); + --colors-orange-outline-bg-active: var(--colors-orange-a3); + --colors-orange-outline-border: var(--colors-orange-a7); + --colors-orange-outline-fg: var(--colors-orange-a11); + --colors-orange-plain-bg-hover: var(--colors-orange-a3); + --colors-orange-plain-bg-active: var(--colors-orange-a4); + --colors-orange-plain-fg: var(--colors-orange-a11); + --colors-pink-1: #191117; + --colors-pink-2: #21121d; + --colors-pink-3: #37172f; + --colors-pink-4: #4b143d; + --colors-pink-5: #591c47; + --colors-pink-6: #692955; + --colors-pink-7: #833869; + --colors-pink-8: #a84885; + --colors-pink-9: #d6409f; + --colors-pink-10: #de51a8; + --colors-pink-11: #ff8dcc; + --colors-pink-12: #fdd1ea; + --colors-pink-a1: #f412bc09; + --colors-pink-a2: #f420bb12; + --colors-pink-a3: #fe37cc29; + --colors-pink-a4: #fc1ec43f; + --colors-pink-a5: #fd35c24e; + --colors-pink-a6: #fd51c75f; + --colors-pink-a7: #fd62c87b; + --colors-pink-a8: #ff68c8a2; + --colors-pink-a9: #fe49bcd4; + --colors-pink-a10: #ff5cc0dc; + --colors-pink-a11: #ff8dcc; + --colors-pink-a12: #ffd3ecfd; + --colors-pink-solid-bg: var(--colors-pink-9); + --colors-pink-solid-bg-hover: var(--colors-pink-10); + --colors-pink-solid-fg: white; + --colors-pink-subtle-bg: var(--colors-pink-a3); + --colors-pink-subtle-bg-hover: var(--colors-pink-a4); + --colors-pink-subtle-bg-active: var(--colors-pink-a5); + --colors-pink-subtle-fg: var(--colors-pink-a11); + --colors-pink-surface-bg: var(--colors-pink-a2); + --colors-pink-surface-bg-active: var(--colors-pink-a3); + --colors-pink-surface-border: var(--colors-pink-a6); + --colors-pink-surface-border-hover: var(--colors-pink-a7); + --colors-pink-surface-fg: var(--colors-pink-a11); + --colors-pink-outline-bg-hover: var(--colors-pink-a2); + --colors-pink-outline-bg-active: var(--colors-pink-a3); + --colors-pink-outline-border: var(--colors-pink-a7); + --colors-pink-outline-fg: var(--colors-pink-a11); + --colors-pink-plain-bg-hover: var(--colors-pink-a3); + --colors-pink-plain-bg-active: var(--colors-pink-a4); + --colors-pink-plain-fg: var(--colors-pink-a11); + --colors-plum-1: #181118; + --colors-plum-2: #201320; + --colors-plum-3: #351a35; + --colors-plum-4: #451d47; + --colors-plum-5: #512454; + --colors-plum-6: #5e3061; + --colors-plum-7: #734079; + --colors-plum-8: #92549c; + --colors-plum-9: #ab4aba; + --colors-plum-10: #b658c4; + --colors-plum-11: #e796f3; + --colors-plum-12: #f4d4f4; + --colors-plum-a1: #f112f108; + --colors-plum-a2: #f22ff211; + --colors-plum-a3: #fd4cfd27; + --colors-plum-a4: #f646ff3a; + --colors-plum-a5: #f455ff48; + --colors-plum-a6: #f66dff56; + --colors-plum-a7: #f07cfd70; + --colors-plum-a8: #ee84ff95; + --colors-plum-a9: #e961feb6; + --colors-plum-a10: #ed70ffc0; + --colors-plum-a11: #f19cfef3; + --colors-plum-a12: #feddfef4; + --colors-plum-solid-bg: var(--colors-plum-9); + --colors-plum-solid-bg-hover: var(--colors-plum-10); + --colors-plum-solid-fg: white; + --colors-plum-subtle-bg: var(--colors-plum-a3); + --colors-plum-subtle-bg-hover: var(--colors-plum-a4); + --colors-plum-subtle-bg-active: var(--colors-plum-a5); + --colors-plum-subtle-fg: var(--colors-plum-a11); + --colors-plum-surface-bg: var(--colors-plum-a2); + --colors-plum-surface-bg-active: var(--colors-plum-a3); + --colors-plum-surface-border: var(--colors-plum-a6); + --colors-plum-surface-border-hover: var(--colors-plum-a7); + --colors-plum-surface-fg: var(--colors-plum-a11); + --colors-plum-outline-bg-hover: var(--colors-plum-a2); + --colors-plum-outline-bg-active: var(--colors-plum-a3); + --colors-plum-outline-border: var(--colors-plum-a7); + --colors-plum-outline-fg: var(--colors-plum-a11); + --colors-plum-plain-bg-hover: var(--colors-plum-a3); + --colors-plum-plain-bg-active: var(--colors-plum-a4); + --colors-plum-plain-fg: var(--colors-plum-a11); + --colors-purple-1: #18111b; + --colors-purple-2: #1e1523; + --colors-purple-3: #301c3b; + --colors-purple-4: #3d224e; + --colors-purple-5: #48295c; + --colors-purple-6: #54346b; + --colors-purple-7: #664282; + --colors-purple-8: #8457aa; + --colors-purple-9: #8e4ec6; + --colors-purple-10: #9a5cd0; + --colors-purple-11: #d19dff; + --colors-purple-12: #ecd9fa; + --colors-purple-a1: #b412f90b; + --colors-purple-a2: #b744f714; + --colors-purple-a3: #c150ff2d; + --colors-purple-a4: #bb53fd42; + --colors-purple-a5: #be5cfd51; + --colors-purple-a6: #c16dfd61; + --colors-purple-a7: #c378fd7a; + --colors-purple-a8: #c47effa4; + --colors-purple-a9: #b661ffc2; + --colors-purple-a10: #bc6fffcd; + --colors-purple-a11: #d19dff; + --colors-purple-a12: #f1ddfffa; + --colors-purple-solid-bg: var(--colors-purple-9); + --colors-purple-solid-bg-hover: var(--colors-purple-10); + --colors-purple-solid-fg: white; + --colors-purple-subtle-bg: var(--colors-purple-a3); + --colors-purple-subtle-bg-hover: var(--colors-purple-a4); + --colors-purple-subtle-bg-active: var(--colors-purple-a5); + --colors-purple-subtle-fg: var(--colors-purple-a11); + --colors-purple-surface-bg: var(--colors-purple-a2); + --colors-purple-surface-bg-active: var(--colors-purple-a3); + --colors-purple-surface-border: var(--colors-purple-a6); + --colors-purple-surface-border-hover: var(--colors-purple-a7); + --colors-purple-surface-fg: var(--colors-purple-a11); + --colors-purple-outline-bg-hover: var(--colors-purple-a2); + --colors-purple-outline-bg-active: var(--colors-purple-a3); + --colors-purple-outline-border: var(--colors-purple-a7); + --colors-purple-outline-fg: var(--colors-purple-a11); + --colors-purple-plain-bg-hover: var(--colors-purple-a3); + --colors-purple-plain-bg-active: var(--colors-purple-a4); + --colors-purple-plain-fg: var(--colors-purple-a11); + --colors-red-1: #191111; + --colors-red-2: #201314; + --colors-red-3: #3b1219; + --colors-red-4: #500f1c; + --colors-red-5: #611623; + --colors-red-6: #72232d; + --colors-red-7: #8c333a; + --colors-red-8: #b54548; + --colors-red-9: #e5484d; + --colors-red-10: #ec5d5e; + --colors-red-11: #ff9592; + --colors-red-12: #ffd1d9; + --colors-red-a1: #f4121209; + --colors-red-a2: #f22f3e11; + --colors-red-a3: #ff173f2d; + --colors-red-a4: #fe0a3b44; + --colors-red-a5: #ff204756; + --colors-red-a6: #ff3e5668; + --colors-red-a7: #ff536184; + --colors-red-a8: #ff5d61b0; + --colors-red-a9: #fe4e54e4; + --colors-red-a10: #ff6465eb; + --colors-red-a11: #ff9592; + --colors-red-a12: #ffd1d9; + --colors-red-solid-bg: var(--colors-red-9); + --colors-red-solid-bg-hover: var(--colors-red-10); + --colors-red-solid-fg: white; + --colors-red-subtle-bg: var(--colors-red-a3); + --colors-red-subtle-bg-hover: var(--colors-red-a4); + --colors-red-subtle-bg-active: var(--colors-red-a5); + --colors-red-subtle-fg: var(--colors-red-a11); + --colors-red-surface-bg: var(--colors-red-a2); + --colors-red-surface-bg-active: var(--colors-red-a3); + --colors-red-surface-border: var(--colors-red-a6); + --colors-red-surface-border-hover: var(--colors-red-a7); + --colors-red-surface-fg: var(--colors-red-a11); + --colors-red-outline-bg-hover: var(--colors-red-a2); + --colors-red-outline-bg-active: var(--colors-red-a3); + --colors-red-outline-border: var(--colors-red-a7); + --colors-red-outline-fg: var(--colors-red-a11); + --colors-red-plain-bg-hover: var(--colors-red-a3); + --colors-red-plain-bg-active: var(--colors-red-a4); + --colors-red-plain-fg: var(--colors-red-a11); + --colors-ruby-1: #191113; + --colors-ruby-2: #1e1517; + --colors-ruby-3: #3a141e; + --colors-ruby-4: #4e1325; + --colors-ruby-5: #5e1a2e; + --colors-ruby-6: #6f2539; + --colors-ruby-7: #883447; + --colors-ruby-8: #b3445a; + --colors-ruby-9: #e54666; + --colors-ruby-10: #ec5a72; + --colors-ruby-11: #ff949d; + --colors-ruby-12: #fed2e1; + --colors-ruby-a1: #f4124a09; + --colors-ruby-a2: #fe5a7f0e; + --colors-ruby-a3: #ff235d2c; + --colors-ruby-a4: #fd195e42; + --colors-ruby-a5: #fe2d6b53; + --colors-ruby-a6: #ff447665; + --colors-ruby-a7: #ff577d80; + --colors-ruby-a8: #ff5c7cae; + --colors-ruby-a9: #fe4c70e4; + --colors-ruby-a10: #ff617beb; + --colors-ruby-a11: #ff949d; + --colors-ruby-a12: #ffd3e2fe; + --colors-ruby-solid-bg: var(--colors-ruby-9); + --colors-ruby-solid-bg-hover: var(--colors-ruby-10); + --colors-ruby-solid-fg: white; + --colors-ruby-subtle-bg: var(--colors-ruby-a3); + --colors-ruby-subtle-bg-hover: var(--colors-ruby-a4); + --colors-ruby-subtle-bg-active: var(--colors-ruby-a5); + --colors-ruby-subtle-fg: var(--colors-ruby-a11); + --colors-ruby-surface-bg: var(--colors-ruby-a2); + --colors-ruby-surface-bg-active: var(--colors-ruby-a3); + --colors-ruby-surface-border: var(--colors-ruby-a6); + --colors-ruby-surface-border-hover: var(--colors-ruby-a7); + --colors-ruby-surface-fg: var(--colors-ruby-a11); + --colors-ruby-outline-bg-hover: var(--colors-ruby-a2); + --colors-ruby-outline-bg-active: var(--colors-ruby-a3); + --colors-ruby-outline-border: var(--colors-ruby-a7); + --colors-ruby-outline-fg: var(--colors-ruby-a11); + --colors-ruby-plain-bg-hover: var(--colors-ruby-a3); + --colors-ruby-plain-bg-active: var(--colors-ruby-a4); + --colors-ruby-plain-fg: var(--colors-ruby-a11); + --colors-sage-1: #101211; + --colors-sage-2: #171918; + --colors-sage-3: #202221; + --colors-sage-4: #272a29; + --colors-sage-5: #2e3130; + --colors-sage-6: #373b39; + --colors-sage-7: #444947; + --colors-sage-8: #5b625f; + --colors-sage-9: #63706b; + --colors-sage-10: #717d79; + --colors-sage-11: #adb5b2; + --colors-sage-12: #eceeed; + --colors-sage-a1: #00000000; + --colors-sage-a2: #f0f2f108; + --colors-sage-a3: #f3f5f412; + --colors-sage-a4: #f2fefd1a; + --colors-sage-a5: #f1fbfa22; + --colors-sage-a6: #edfbf42d; + --colors-sage-a7: #edfcf73c; + --colors-sage-a8: #ebfdf657; + --colors-sage-a9: #dffdf266; + --colors-sage-a10: #e5fdf674; + --colors-sage-a11: #f4fefbb0; + --colors-sage-a12: #fdfffeed; + --colors-sage-solid-bg: var(--colors-white); + --colors-sage-solid-bg-hover: var(--colors-gray-12); + --colors-sage-solid-fg: var(--colors-black); + --colors-sage-subtle-bg: var(--colors-gray-a3); + --colors-sage-subtle-bg-hover: var(--colors-gray-a4); + --colors-sage-subtle-bg-active: var(--colors-gray-a5); + --colors-sage-subtle-fg: var(--colors-gray-12); + --colors-sage-surface-bg: var(--colors-gray-1); + --colors-sage-surface-bg-hover: var(--colors-gray-2); + --colors-sage-surface-bg-active: var(--colors-gray-3); + --colors-sage-surface-border: var(--colors-gray-6); + --colors-sage-surface-border-hover: var(--colors-gray-7); + --colors-sage-surface-fg: var(--colors-gray-12); + --colors-sage-outline-bg-hover: var(--colors-gray-a2); + --colors-sage-outline-bg-active: var(--colors-gray-a3); + --colors-sage-outline-border: var(--colors-gray-6); + --colors-sage-outline-fg: var(--colors-gray-12); + --colors-sage-plain-bg-hover: var(--colors-gray-a3); + --colors-sage-plain-bg-active: var(--colors-gray-a4); + --colors-sage-plain-fg: var(--colors-gray-12); + --colors-sand-1: #111110; + --colors-sand-2: #191918; + --colors-sand-3: #222221; + --colors-sand-4: #2a2a28; + --colors-sand-5: #31312e; + --colors-sand-6: #3b3a37; + --colors-sand-7: #494844; + --colors-sand-8: #62605b; + --colors-sand-9: #6f6d66; + --colors-sand-10: #7c7b74; + --colors-sand-11: #b5b3ad; + --colors-sand-12: #eeeeec; + --colors-sand-a1: #00000000; + --colors-sand-a2: #f4f4f309; + --colors-sand-a3: #f6f6f513; + --colors-sand-a4: #fefef31b; + --colors-sand-a5: #fbfbeb23; + --colors-sand-a6: #fffaed2d; + --colors-sand-a7: #fffbed3c; + --colors-sand-a8: #fff9eb57; + --colors-sand-a9: #fffae965; + --colors-sand-a10: #fffdee73; + --colors-sand-a11: #fffcf4b0; + --colors-sand-a12: #fffffded; + --colors-sand-solid-bg: var(--colors-white); + --colors-sand-solid-bg-hover: var(--colors-gray-12); + --colors-sand-solid-fg: var(--colors-black); + --colors-sand-subtle-bg: var(--colors-gray-a3); + --colors-sand-subtle-bg-hover: var(--colors-gray-a4); + --colors-sand-subtle-bg-active: var(--colors-gray-a5); + --colors-sand-subtle-fg: var(--colors-gray-12); + --colors-sand-surface-bg: var(--colors-gray-1); + --colors-sand-surface-bg-hover: var(--colors-gray-2); + --colors-sand-surface-bg-active: var(--colors-gray-3); + --colors-sand-surface-border: var(--colors-gray-6); + --colors-sand-surface-border-hover: var(--colors-gray-7); + --colors-sand-surface-fg: var(--colors-gray-12); + --colors-sand-outline-bg-hover: var(--colors-gray-a2); + --colors-sand-outline-bg-active: var(--colors-gray-a3); + --colors-sand-outline-border: var(--colors-gray-6); + --colors-sand-outline-fg: var(--colors-gray-12); + --colors-sand-plain-bg-hover: var(--colors-gray-a3); + --colors-sand-plain-bg-active: var(--colors-gray-a4); + --colors-sand-plain-fg: var(--colors-gray-12); + --colors-sky-1: #0d141f; + --colors-sky-2: #111a27; + --colors-sky-3: #112840; + --colors-sky-4: #113555; + --colors-sky-5: #154467; + --colors-sky-6: #1b537b; + --colors-sky-7: #1f6692; + --colors-sky-8: #197cae; + --colors-sky-9: #7ce2fe; + --colors-sky-10: #a8eeff; + --colors-sky-11: #75c7f0; + --colors-sky-12: #c2f3ff; + --colors-sky-a1: #0044ff0f; + --colors-sky-a2: #1171fb18; + --colors-sky-a3: #1184fc33; + --colors-sky-a4: #128fff49; + --colors-sky-a5: #1c9dfd5d; + --colors-sky-a6: #28a5ff72; + --colors-sky-a7: #2badfe8b; + --colors-sky-a8: #1db2fea9; + --colors-sky-a9: #7ce3fffe; + --colors-sky-a10: #a8eeff; + --colors-sky-a11: #7cd3ffef; + --colors-sky-a12: #c2f3ff; + --colors-sky-solid-bg: var(--colors-sky-9); + --colors-sky-solid-bg-hover: var(--colors-sky-10); + --colors-sky-solid-fg: var(--colors-gray-1); + --colors-sky-subtle-bg: var(--colors-sky-a3); + --colors-sky-subtle-bg-hover: var(--colors-sky-a4); + --colors-sky-subtle-bg-active: var(--colors-sky-a5); + --colors-sky-subtle-fg: var(--colors-sky-a11); + --colors-sky-surface-bg: var(--colors-sky-a2); + --colors-sky-surface-bg-active: var(--colors-sky-a3); + --colors-sky-surface-border: var(--colors-sky-a6); + --colors-sky-surface-border-hover: var(--colors-sky-a7); + --colors-sky-surface-fg: var(--colors-sky-a11); + --colors-sky-outline-bg-hover: var(--colors-sky-a2); + --colors-sky-outline-bg-active: var(--colors-sky-a3); + --colors-sky-outline-border: var(--colors-sky-a7); + --colors-sky-outline-fg: var(--colors-sky-a11); + --colors-sky-plain-bg-hover: var(--colors-sky-a3); + --colors-sky-plain-bg-active: var(--colors-sky-a4); + --colors-sky-plain-fg: var(--colors-sky-a11); + --colors-slate-1: #111113; + --colors-slate-2: #18191b; + --colors-slate-3: #212225; + --colors-slate-4: #272a2d; + --colors-slate-5: #2e3135; + --colors-slate-6: #363a3f; + --colors-slate-7: #43484e; + --colors-slate-8: #5a6169; + --colors-slate-9: #696e77; + --colors-slate-10: #777b84; + --colors-slate-11: #b0b4ba; + --colors-slate-12: #edeef0; + --colors-slate-a1: #00000000; + --colors-slate-a2: #d8f4f609; + --colors-slate-a3: #ddeaf814; + --colors-slate-a4: #d3edf81d; + --colors-slate-a5: #d9edfe25; + --colors-slate-a6: #d6ebfd30; + --colors-slate-a7: #d9edff40; + --colors-slate-a8: #d9edff5d; + --colors-slate-a9: #dfebfd6d; + --colors-slate-a10: #e5edfd7b; + --colors-slate-a11: #f1f7feb5; + --colors-slate-a12: #fcfdffef; + --colors-slate-solid-bg: var(--colors-white); + --colors-slate-solid-bg-hover: var(--colors-gray-12); + --colors-slate-solid-fg: var(--colors-black); + --colors-slate-subtle-bg: var(--colors-gray-a3); + --colors-slate-subtle-bg-hover: var(--colors-gray-a4); + --colors-slate-subtle-bg-active: var(--colors-gray-a5); + --colors-slate-subtle-fg: var(--colors-gray-12); + --colors-slate-surface-bg: var(--colors-gray-1); + --colors-slate-surface-bg-hover: var(--colors-gray-2); + --colors-slate-surface-bg-active: var(--colors-gray-3); + --colors-slate-surface-border: var(--colors-gray-6); + --colors-slate-surface-border-hover: var(--colors-gray-7); + --colors-slate-surface-fg: var(--colors-gray-12); + --colors-slate-outline-bg-hover: var(--colors-gray-a2); + --colors-slate-outline-bg-active: var(--colors-gray-a3); + --colors-slate-outline-border: var(--colors-gray-6); + --colors-slate-outline-fg: var(--colors-gray-12); + --colors-slate-plain-bg-hover: var(--colors-gray-a3); + --colors-slate-plain-bg-active: var(--colors-gray-a4); + --colors-slate-plain-fg: var(--colors-gray-12); + --colors-teal-1: #0d1514; + --colors-teal-2: #111c1b; + --colors-teal-3: #0d2d2a; + --colors-teal-4: #023b37; + --colors-teal-5: #084843; + --colors-teal-6: #145750; + --colors-teal-7: #1c6961; + --colors-teal-8: #207e73; + --colors-teal-9: #12a594; + --colors-teal-10: #0eb39e; + --colors-teal-11: #0bd8b6; + --colors-teal-12: #adf0dd; + --colors-teal-a1: #00deab05; + --colors-teal-a2: #12fbe60c; + --colors-teal-a3: #00ffe61e; + --colors-teal-a4: #00ffe92d; + --colors-teal-a5: #00ffea3b; + --colors-teal-a6: #1cffe84b; + --colors-teal-a7: #2efde85f; + --colors-teal-a8: #32ffe775; + --colors-teal-a9: #13ffe49f; + --colors-teal-a10: #0dffe0ae; + --colors-teal-a11: #0afed5d6; + --colors-teal-a12: #b8ffebef; + --colors-teal-solid-bg: var(--colors-teal-9); + --colors-teal-solid-bg-hover: var(--colors-teal-10); + --colors-teal-solid-fg: white; + --colors-teal-subtle-bg: var(--colors-teal-a3); + --colors-teal-subtle-bg-hover: var(--colors-teal-a4); + --colors-teal-subtle-bg-active: var(--colors-teal-a5); + --colors-teal-subtle-fg: var(--colors-teal-a11); + --colors-teal-surface-bg: var(--colors-teal-a2); + --colors-teal-surface-bg-active: var(--colors-teal-a3); + --colors-teal-surface-border: var(--colors-teal-a6); + --colors-teal-surface-border-hover: var(--colors-teal-a7); + --colors-teal-surface-fg: var(--colors-teal-a11); + --colors-teal-outline-bg-hover: var(--colors-teal-a2); + --colors-teal-outline-bg-active: var(--colors-teal-a3); + --colors-teal-outline-border: var(--colors-teal-a7); + --colors-teal-outline-fg: var(--colors-teal-a11); + --colors-teal-plain-bg-hover: var(--colors-teal-a3); + --colors-teal-plain-bg-active: var(--colors-teal-a4); + --colors-teal-plain-fg: var(--colors-teal-a11); + --colors-tomato-1: #181111; + --colors-tomato-2: #1f1513; + --colors-tomato-3: #391714; + --colors-tomato-4: #4e1511; + --colors-tomato-5: #5e1c16; + --colors-tomato-6: #6e2920; + --colors-tomato-7: #853a2d; + --colors-tomato-8: #ac4d39; + --colors-tomato-9: #e54d2e; + --colors-tomato-10: #ec6142; + --colors-tomato-11: #ff977d; + --colors-tomato-12: #fbd3cb; + --colors-tomato-a1: #f1121208; + --colors-tomato-a2: #ff55330f; + --colors-tomato-a3: #ff35232b; + --colors-tomato-a4: #fd201142; + --colors-tomato-a5: #fe332153; + --colors-tomato-a6: #ff4f3864; + --colors-tomato-a7: #fd644a7d; + --colors-tomato-a8: #fe6d4ea7; + --colors-tomato-a9: #fe5431e4; + --colors-tomato-a10: #ff6847eb; + --colors-tomato-a11: #ff977d; + --colors-tomato-a12: #ffd6cefb; + --colors-tomato-solid-bg: var(--colors-tomato-9); + --colors-tomato-solid-bg-hover: var(--colors-tomato-10); + --colors-tomato-solid-fg: white; + --colors-tomato-subtle-bg: var(--colors-tomato-a3); + --colors-tomato-subtle-bg-hover: var(--colors-tomato-a4); + --colors-tomato-subtle-bg-active: var(--colors-tomato-a5); + --colors-tomato-subtle-fg: var(--colors-tomato-a11); + --colors-tomato-surface-bg: var(--colors-tomato-a2); + --colors-tomato-surface-bg-active: var(--colors-tomato-a3); + --colors-tomato-surface-border: var(--colors-tomato-a6); + --colors-tomato-surface-border-hover: var(--colors-tomato-a7); + --colors-tomato-surface-fg: var(--colors-tomato-a11); + --colors-tomato-outline-bg-hover: var(--colors-tomato-a2); + --colors-tomato-outline-bg-active: var(--colors-tomato-a3); + --colors-tomato-outline-border: var(--colors-tomato-a7); + --colors-tomato-outline-fg: var(--colors-tomato-a11); + --colors-tomato-plain-bg-hover: var(--colors-tomato-a3); + --colors-tomato-plain-bg-active: var(--colors-tomato-a4); + --colors-tomato-plain-fg: var(--colors-tomato-a11); + --colors-violet-1: #14121f; + --colors-violet-2: #1b1525; + --colors-violet-3: #291f43; + --colors-violet-4: #33255b; + --colors-violet-5: #3c2e69; + --colors-violet-6: #473876; + --colors-violet-7: #56468b; + --colors-violet-8: #6958ad; + --colors-violet-9: #6e56cf; + --colors-violet-10: #7d66d9; + --colors-violet-11: #baa7ff; + --colors-violet-12: #e2ddfe; + --colors-violet-a1: #4422ff0f; + --colors-violet-a2: #853ff916; + --colors-violet-a3: #8354fe36; + --colors-violet-a4: #7d51fd50; + --colors-violet-a5: #845ffd5f; + --colors-violet-a6: #8f6cfd6d; + --colors-violet-a7: #9879ff83; + --colors-violet-a8: #977dfea8; + --colors-violet-a9: #8668ffcc; + --colors-violet-a10: #9176fed7; + --colors-violet-a11: #baa7ff; + --colors-violet-a12: #e3defffe; + --colors-violet-solid-bg: var(--colors-violet-9); + --colors-violet-solid-bg-hover: var(--colors-violet-10); + --colors-violet-solid-fg: white; + --colors-violet-subtle-bg: var(--colors-violet-a3); + --colors-violet-subtle-bg-hover: var(--colors-violet-a4); + --colors-violet-subtle-bg-active: var(--colors-violet-a5); + --colors-violet-subtle-fg: var(--colors-violet-a11); + --colors-violet-surface-bg: var(--colors-violet-a2); + --colors-violet-surface-bg-active: var(--colors-violet-a3); + --colors-violet-surface-border: var(--colors-violet-a6); + --colors-violet-surface-border-hover: var(--colors-violet-a7); + --colors-violet-surface-fg: var(--colors-violet-a11); + --colors-violet-outline-bg-hover: var(--colors-violet-a2); + --colors-violet-outline-bg-active: var(--colors-violet-a3); + --colors-violet-outline-border: var(--colors-violet-a7); + --colors-violet-outline-fg: var(--colors-violet-a11); + --colors-violet-plain-bg-hover: var(--colors-violet-a3); + --colors-violet-plain-bg-active: var(--colors-violet-a4); + --colors-violet-plain-fg: var(--colors-violet-a11); + --colors-yellow-1: #14120b; + --colors-yellow-2: #1b180f; + --colors-yellow-3: #2d2305; + --colors-yellow-4: #362b00; + --colors-yellow-5: #433500; + --colors-yellow-6: #524202; + --colors-yellow-7: #665417; + --colors-yellow-8: #836a21; + --colors-yellow-9: #ffe629; + --colors-yellow-10: #ffff57; + --colors-yellow-11: #f5e147; + --colors-yellow-12: #f6eeb4; + --colors-yellow-a1: #d1510004; + --colors-yellow-a2: #f9b4000b; + --colors-yellow-a3: #ffaa001e; + --colors-yellow-a4: #fdb70028; + --colors-yellow-a5: #febb0036; + --colors-yellow-a6: #fec40046; + --colors-yellow-a7: #fdcb225c; + --colors-yellow-a8: #fdca327b; + --colors-yellow-a9: #ffe629; + --colors-yellow-a10: #ffff57; + --colors-yellow-a11: #fee949f5; + --colors-yellow-a12: #fef6baf6; + --colors-yellow-solid-bg: var(--colors-yellow-9); + --colors-yellow-solid-bg-hover: var(--colors-yellow-10); + --colors-yellow-solid-fg: var(--colors-gray-1); + --colors-yellow-subtle-bg: var(--colors-yellow-a3); + --colors-yellow-subtle-bg-hover: var(--colors-yellow-a4); + --colors-yellow-subtle-bg-active: var(--colors-yellow-a5); + --colors-yellow-subtle-fg: var(--colors-yellow-a11); + --colors-yellow-surface-bg: var(--colors-yellow-a2); + --colors-yellow-surface-bg-active: var(--colors-yellow-a3); + --colors-yellow-surface-border: var(--colors-yellow-a6); + --colors-yellow-surface-border-hover: var(--colors-yellow-a7); + --colors-yellow-surface-fg: var(--colors-yellow-a11); + --colors-yellow-outline-bg-hover: var(--colors-yellow-a2); + --colors-yellow-outline-bg-active: var(--colors-yellow-a3); + --colors-yellow-outline-border: var(--colors-yellow-a7); + --colors-yellow-outline-fg: var(--colors-yellow-a11); + --colors-yellow-plain-bg-hover: var(--colors-yellow-a3); + --colors-yellow-plain-bg-active: var(--colors-yellow-a4); + --colors-yellow-plain-fg: var(--colors-yellow-a11); + --colors-gray-1: #111111; + --colors-gray-2: #191919; + --colors-gray-3: #222222; + --colors-gray-4: #2a2a2a; + --colors-gray-5: #313131; + --colors-gray-6: #3a3a3a; + --colors-gray-7: #484848; + --colors-gray-8: #606060; + --colors-gray-9: #6e6e6e; + --colors-gray-10: #7b7b7b; + --colors-gray-11: #b4b4b4; + --colors-gray-12: #eeeeee; + --colors-gray-a1: #00000000; + --colors-gray-a2: #ffffff09; + --colors-gray-a3: #ffffff12; + --colors-gray-a4: #ffffff1b; + --colors-gray-a5: #ffffff22; + --colors-gray-a6: #ffffff2c; + --colors-gray-a7: #ffffff3b; + --colors-gray-a8: #ffffff55; + --colors-gray-a9: #ffffff64; + --colors-gray-a10: #ffffff72; + --colors-gray-a11: #ffffffaf; + --colors-gray-a12: #ffffffed; + --colors-gray-solid-bg: var(--colors-white); + --colors-gray-solid-bg-hover: var(--colors-gray-12); + --colors-gray-solid-fg: var(--colors-black); + --colors-gray-subtle-bg: var(--colors-gray-a3); + --colors-gray-subtle-bg-hover: var(--colors-gray-a4); + --colors-gray-subtle-bg-active: var(--colors-gray-a5); + --colors-gray-subtle-fg: var(--colors-gray-12); + --colors-gray-surface-bg: var(--colors-gray-1); + --colors-gray-surface-bg-hover: var(--colors-gray-2); + --colors-gray-surface-bg-active: var(--colors-gray-3); + --colors-gray-surface-border: var(--colors-gray-6); + --colors-gray-surface-border-hover: var(--colors-gray-7); + --colors-gray-surface-fg: var(--colors-gray-12); + --colors-gray-outline-bg-hover: var(--colors-gray-a2); + --colors-gray-outline-bg-active: var(--colors-gray-a3); + --colors-gray-outline-border: var(--colors-gray-6); + --colors-gray-outline-fg: var(--colors-gray-12); + --colors-gray-plain-bg-hover: var(--colors-gray-a3); + --colors-gray-plain-bg-active: var(--colors-gray-a4); + --colors-gray-plain-fg: var(--colors-gray-12); + --colors-fg-default: var(--colors-gray-12); + --colors-fg-muted: var(--colors-gray-11); + --colors-fg-subtle: var(--colors-gray-10); + --colors-canvas: var(--colors-gray-1); + --colors-border: var(--colors-gray-4); + --colors-error: var(--colors-red-9); + --colors-bg-subtle: var(--colors-gray-3); + --shadows-xs: 0px 1px 1px var(--colors-black-a8), 0px 0px 1px inset var(--colors-gray-a8); + --shadows-sm: 0px 2px 4px var(--colors-black-a8), 0px 0px 1px inset var(--colors-gray-a8); + --shadows-md: 0px 4px 8px var(--colors-black-a8), 0px 0px 1px inset var(--colors-gray-a8); + --shadows-lg: 0px 8px 16px var(--colors-black-a8), 0px 0px 1px inset var(--colors-gray-a8); + --shadows-xl: 0px 16px 24px var(--colors-black-a8), 0px 0px 1px inset var(--colors-gray-a8); + --shadows-2xl: 0px 24px 40px var(--colors-black-a8), 0px 0px 1px inset var(--colors-gray-a8); + --shadows-inset: inset 8px 0 12px -8px var(--colors-black-a6) +} + + @keyframes spin { + to { + transform: rotate(360deg); +} +} + + @keyframes ping { + 75%,100% { + transform: scale(2); + opacity: 0; +} +} + + @keyframes pulse { + 50% { + opacity: 0.5; +} +} + + @keyframes bounce { + 0%,100% { + transform: translateY(-25%); + animation-timing-function: cubic-bezier(0.8,0,1,1); +} + + 50% { + transform: none; + animation-timing-function: cubic-bezier(0,0,0.2,1); +} +} + + @keyframes expand-height { + from { + height: var(--sizes-0); +} + + to { + height: var(--height); +} +} + + @keyframes collapse-height { + from { + height: var(--height); +} + + to { + height: var(--sizes-0); +} +} + + @keyframes expand-width { + from { + width: var(--sizes-0); +} + + to { + width: var(--width); +} +} + + @keyframes collapse-width { + from { + width: var(--width); +} + + to { + width: var(--sizes-0); +} +} + + @keyframes fade-in { + from { + opacity: 0; +} + + to { + opacity: 1; +} +} + + @keyframes fade-out { + from { + opacity: 1; +} + + to { + opacity: 0; +} +} + + @keyframes slide-from-left-full { + from { + translate: -100% 0; +} + + to { + translate: 0 0; +} +} + + @keyframes slide-from-right-full { + from { + translate: 100% 0; +} + + to { + translate: 0 0; +} +} + + @keyframes slide-from-top-full { + from { + translate: 0 -100%; +} + + to { + translate: 0 0; +} +} + + @keyframes slide-from-bottom-full { + from { + translate: 0 100%; +} + + to { + translate: 0 0; +} +} + + @keyframes slide-to-left-full { + from { + translate: 0 0; +} + + to { + translate: -100% 0; +} +} + + @keyframes slide-to-right-full { + from { + translate: 0 0; +} + + to { + translate: 100% 0; +} +} + + @keyframes slide-to-top-full { + from { + translate: 0 0; +} + + to { + translate: 0 -100%; +} +} + + @keyframes slide-to-bottom-full { + from { + translate: 0 0; +} + + to { + translate: 0 100%; +} +} + + @keyframes slide-from-top { + 0% { + translate: 0 -0.5rem; +} + + to { + translate: 0; +} +} + + @keyframes slide-from-bottom { + 0% { + translate: 0 0.5rem; +} + + to { + translate: 0; +} +} + + @keyframes slide-from-left { + 0% { + translate: -0.5rem 0; +} + + to { + translate: 0; +} +} + + @keyframes slide-from-right { + 0% { + translate: 0.5rem 0; +} + + to { + translate: 0; +} +} + + @keyframes slide-to-top { + 0% { + translate: 0; +} + + to { + translate: 0 -0.5rem; +} +} + + @keyframes slide-to-bottom { + 0% { + translate: 0; +} + + to { + translate: 0 0.5rem; +} +} + + @keyframes slide-to-left { + 0% { + translate: 0; +} + + to { + translate: -0.5rem 0; +} +} + + @keyframes slide-to-right { + 0% { + translate: 0; +} + + to { + translate: 0.5rem 0; +} +} + + @keyframes scale-in { + from { + scale: 0.95; +} + + to { + scale: 1; +} +} + + @keyframes scale-out { + from { + scale: 1; +} + + to { + scale: 0.95; +} +} + + @keyframes bg-position { + from { + background-position: var(--animate-from, 1rem) 0; +} + + to { + background-position: var(--animate-to, 0) 0; +} +} + + @keyframes position { + from { + inset-inline-start: var(--animate-from-x); + inset-block-start: var(--animate-from-y); +} + + to { + inset-inline-start: var(--animate-to-x); + inset-block-start: var(--animate-to-y); +} +} +} \ No newline at end of file diff --git a/.storybook/styles-v2/utilities.css b/.storybook/styles-v2/utilities.css new file mode 100644 index 0000000000..13e2eb3c8d --- /dev/null +++ b/.storybook/styles-v2/utilities.css @@ -0,0 +1,1120 @@ +@layer utilities { + @layer compositions { + + .textStyle_sm { + font-size: var(--font-sizes-sm); + line-height: 1.25rem; +} + + .textStyle_3xl { + font-size: var(--font-sizes-3xl); + line-height: 2.375rem; +} + + .textStyle_label { + font-size: var(--font-sizes-sm); + line-height: 1.25rem; + font-weight: var(--font-weights-medium); +} + + .textStyle_xs { + font-size: var(--font-sizes-xs); + line-height: 1.125rem; +} + + .textStyle_md { + font-size: var(--font-sizes-md); + line-height: 1.5rem; +} + + .textStyle_lg { + font-size: var(--font-sizes-lg); + line-height: 1.75rem; +} + + .textStyle_xl { + font-size: var(--font-sizes-xl); + line-height: 1.875rem; +} + + .textStyle_2xl { + font-size: var(--font-sizes-2xl); + line-height: 2rem; +} + + .textStyle_4xl { + font-size: var(--font-sizes-4xl); + line-height: 2.75rem; + letter-spacing: -0.02em; +} + + .textStyle_5xl { + font-size: var(--font-sizes-5xl); + line-height: 3.75rem; + letter-spacing: -0.02em; +} + + .textStyle_6xl { + font-size: var(--font-sizes-6xl); + line-height: 4.5rem; + letter-spacing: -0.02em; +} + + .textStyle_7xl { + font-size: var(--font-sizes-7xl); + line-height: 5.75rem; + letter-spacing: -0.02em; +} +} + + .\--thickness_1px { + --thickness: 1px; +} + + .\--popover-bg_lightblue { + --popover-bg: lightblue; +} + + .\--start-color_colors\.pink\.5 { + --start-color: var(--colors-pink-5); +} + + .\--end-color_colors\.blue\.5 { + --end-color: var(--colors-blue-5); +} + + .\--spinner-track-color_colors\.gray\.subtle\.bg { + --spinner-track-color: var(--colors-gray-subtle-bg); +} + + .bg_gray\.surface\.bg { + background: var(--colors-gray-surface-bg); +} + + .p_4 { + padding: var(--spacing-4); +} + + .bg_colorPalette\.solid\.bg { + background: var(--colors-color-palette-solid-bg); +} + + .bg_colorPalette\.3 { + background: var(--colors-color-palette-3); +} + + .bg_gray\.subtle\.bg { + background: var(--colors-gray-subtle-bg); +} + + .bg_colorPalette\.subtle\.bg { + background: var(--colors-color-palette-subtle-bg); +} + + .p_0\.5 { + padding: var(--spacing-0\.5); +} + + .inset_0 { + inset: var(--spacing-0); +} + + .gap_0\.5 { + gap: var(--spacing-0\.5); +} + + .flex_1 { + flex: 1 1 0%; +} + + .px_0 { + padding-inline: var(--spacing-0); +} + + .py_0 { + padding-block: var(--spacing-0); +} + + .bd-w_0\.125em { + border-width: 0.125em; +} + + .gap_8px { + gap: 8px; +} + + .gap_3 { + gap: var(--spacing-3); +} + + .gap_1 { + gap: var(--spacing-1); +} + + .bdr_l2 { + border-radius: var(--radii-l2); +} + + .mx_auto { + margin-inline: auto; +} + + .px_4 { + padding-inline: var(--spacing-4); +} + + .gap_4 { + gap: var(--spacing-4); +} + + .flex_0_0_auto { + flex: 0 0 auto; +} + + .bdr_9999px { + border-radius: 9999px; +} + + .ring_0\.2em_solid { + outline: 0.2em solid; +} + + .gap_6 { + gap: var(--spacing-6); +} + + .gap_0 { + gap: var(--spacing-0); +} + + .bd-w_2px { + border-width: 2px; +} + + .bd-c_gray\.surface\.bg { + border-color: var(--colors-gray-surface-bg); +} + + .ring_2px_solid_token\(colors\.colorPalette\.solid\) { + outline: 2px solid colors\.colorPalette\.solid; +} + + .ov_hidden { + overflow: hidden; +} + + .bdr_l3 { + border-radius: var(--radii-l3); +} + + .bd-w_1px { + border-width: 1px; +} + + .bdr_full { + border-radius: var(--radii-full); +} + + .gap_1\.5 { + gap: var(--spacing-1\.5); +} + + .border-style_dashed { + border-style: dashed; +} + + .bdr_lg { + border-radius: var(--radii-lg); +} + + .msk_true { + mask: true; + -webkit-mask: true; +} + + .bd-w_4px { + border-width: 4px; +} + + .gap_8 { + gap: var(--spacing-8); +} + + .fill_none { + fill: none; +} + + .stk_currentColor { + stroke: currentColor; +} + + .stk-w_3px { + stroke-width: 3px; +} + + .stk-lc_round { + stroke-linecap: round; +} + + .stk-lj_round { + stroke-linejoin: round; +} + + .color-palette_gray { + --colors-color-palette-1: var(--colors-gray-1); + --colors-color-palette-2: var(--colors-gray-2); + --colors-color-palette-3: var(--colors-gray-3); + --colors-color-palette-4: var(--colors-gray-4); + --colors-color-palette-5: var(--colors-gray-5); + --colors-color-palette-6: var(--colors-gray-6); + --colors-color-palette-7: var(--colors-gray-7); + --colors-color-palette-8: var(--colors-gray-8); + --colors-color-palette-9: var(--colors-gray-9); + --colors-color-palette-10: var(--colors-gray-10); + --colors-color-palette-11: var(--colors-gray-11); + --colors-color-palette-12: var(--colors-gray-12); + --colors-color-palette-a1: var(--colors-gray-a1); + --colors-color-palette-a2: var(--colors-gray-a2); + --colors-color-palette-a3: var(--colors-gray-a3); + --colors-color-palette-a4: var(--colors-gray-a4); + --colors-color-palette-a5: var(--colors-gray-a5); + --colors-color-palette-a6: var(--colors-gray-a6); + --colors-color-palette-a7: var(--colors-gray-a7); + --colors-color-palette-a8: var(--colors-gray-a8); + --colors-color-palette-a9: var(--colors-gray-a9); + --colors-color-palette-a10: var(--colors-gray-a10); + --colors-color-palette-a11: var(--colors-gray-a11); + --colors-color-palette-a12: var(--colors-gray-a12); + --colors-color-palette-solid-bg: var(--colors-gray-solid-bg); + --colors-color-palette-solid-bg-hover: var(--colors-gray-solid-bg-hover); + --colors-color-palette-solid-fg: var(--colors-gray-solid-fg); + --colors-color-palette-subtle-bg: var(--colors-gray-subtle-bg); + --colors-color-palette-subtle-bg-hover: var(--colors-gray-subtle-bg-hover); + --colors-color-palette-subtle-bg-active: var(--colors-gray-subtle-bg-active); + --colors-color-palette-subtle-fg: var(--colors-gray-subtle-fg); + --colors-color-palette-surface-bg: var(--colors-gray-surface-bg); + --colors-color-palette-surface-bg-hover: var(--colors-gray-surface-bg-hover); + --colors-color-palette-surface-bg-active: var(--colors-gray-surface-bg-active); + --colors-color-palette-surface-border: var(--colors-gray-surface-border); + --colors-color-palette-surface-border-hover: var(--colors-gray-surface-border-hover); + --colors-color-palette-surface-fg: var(--colors-gray-surface-fg); + --colors-color-palette-outline-bg-hover: var(--colors-gray-outline-bg-hover); + --colors-color-palette-outline-bg-active: var(--colors-gray-outline-bg-active); + --colors-color-palette-outline-border: var(--colors-gray-outline-border); + --colors-color-palette-outline-fg: var(--colors-gray-outline-fg); + --colors-color-palette-plain-bg-hover: var(--colors-gray-plain-bg-hover); + --colors-color-palette-plain-bg-active: var(--colors-gray-plain-bg-active); + --colors-color-palette-plain-fg: var(--colors-gray-plain-fg); +} + + .d_flex { + display: flex; +} + + .flex-d_column { + flex-direction: column; +} + + .obj-f_cover { + object-fit: cover; +} + + .inset-s_0 { + inset-inline-start: var(--spacing-0); +} + + .inset-e_0 { + inset-inline-end: var(--spacing-0); +} + + .c_inherit { + color: inherit; +} + + .d_contents { + display: contents; +} + + .vis_hidden { + visibility: hidden; +} + + .d_inline-flex { + display: inline-flex; +} + + .c_colorPalette\.plain\.fg { + color: var(--colors-color-palette-plain-fg); +} + + .ai_start { + align-items: start; +} + + .pos_relative { + position: relative; +} + + .bx-sh_md { + box-shadow: var(--shadows-md); +} + + .inset-e_-2 { + inset-inline-end: calc(var(--spacing-2) * -1); +} + + .color-palette_blue { + --colors-color-palette-1: var(--colors-blue-1); + --colors-color-palette-2: var(--colors-blue-2); + --colors-color-palette-3: var(--colors-blue-3); + --colors-color-palette-4: var(--colors-blue-4); + --colors-color-palette-5: var(--colors-blue-5); + --colors-color-palette-6: var(--colors-blue-6); + --colors-color-palette-7: var(--colors-blue-7); + --colors-color-palette-8: var(--colors-blue-8); + --colors-color-palette-9: var(--colors-blue-9); + --colors-color-palette-10: var(--colors-blue-10); + --colors-color-palette-11: var(--colors-blue-11); + --colors-color-palette-12: var(--colors-blue-12); + --colors-color-palette-a1: var(--colors-blue-a1); + --colors-color-palette-a2: var(--colors-blue-a2); + --colors-color-palette-a3: var(--colors-blue-a3); + --colors-color-palette-a4: var(--colors-blue-a4); + --colors-color-palette-a5: var(--colors-blue-a5); + --colors-color-palette-a6: var(--colors-blue-a6); + --colors-color-palette-a7: var(--colors-blue-a7); + --colors-color-palette-a8: var(--colors-blue-a8); + --colors-color-palette-a9: var(--colors-blue-a9); + --colors-color-palette-a10: var(--colors-blue-a10); + --colors-color-palette-a11: var(--colors-blue-a11); + --colors-color-palette-a12: var(--colors-blue-a12); + --colors-color-palette-solid-bg: var(--colors-blue-solid-bg); + --colors-color-palette-solid-bg-hover: var(--colors-blue-solid-bg-hover); + --colors-color-palette-solid-fg: var(--colors-blue-solid-fg); + --colors-color-palette-subtle-bg: var(--colors-blue-subtle-bg); + --colors-color-palette-subtle-bg-hover: var(--colors-blue-subtle-bg-hover); + --colors-color-palette-subtle-bg-active: var(--colors-blue-subtle-bg-active); + --colors-color-palette-subtle-fg: var(--colors-blue-subtle-fg); + --colors-color-palette-surface-bg: var(--colors-blue-surface-bg); + --colors-color-palette-surface-bg-active: var(--colors-blue-surface-bg-active); + --colors-color-palette-surface-border: var(--colors-blue-surface-border); + --colors-color-palette-surface-border-hover: var(--colors-blue-surface-border-hover); + --colors-color-palette-surface-fg: var(--colors-blue-surface-fg); + --colors-color-palette-outline-bg-hover: var(--colors-blue-outline-bg-hover); + --colors-color-palette-outline-bg-active: var(--colors-blue-outline-bg-active); + --colors-color-palette-outline-border: var(--colors-blue-outline-border); + --colors-color-palette-outline-fg: var(--colors-blue-outline-fg); + --colors-color-palette-plain-bg-hover: var(--colors-blue-plain-bg-hover); + --colors-color-palette-plain-bg-active: var(--colors-blue-plain-bg-active); + --colors-color-palette-plain-fg: var(--colors-blue-plain-fg); +} + + .jc_center { + justify-content: center; +} + + .ai_center { + align-items: center; +} + + .pos_absolute { + position: absolute; +} + + .inset-bs_auto { + inset-block-start: auto; +} + + .inset-be_1 { + inset-block-end: var(--spacing-1); +} + + .inset-s_auto { + inset-inline-start: auto; +} + + .inset-e_1 { + inset-inline-end: var(--spacing-1); +} + + .translate_50\%_50\% { + translate: 50% 50%; +} + + .ring-c_canvas { + outline-color: var(--colors-canvas); +} + + .flex-wrap_wrap { + flex-wrap: wrap; +} + + .color-palette_orange { + --colors-color-palette-1: var(--colors-orange-1); + --colors-color-palette-2: var(--colors-orange-2); + --colors-color-palette-3: var(--colors-orange-3); + --colors-color-palette-4: var(--colors-orange-4); + --colors-color-palette-5: var(--colors-orange-5); + --colors-color-palette-6: var(--colors-orange-6); + --colors-color-palette-7: var(--colors-orange-7); + --colors-color-palette-8: var(--colors-orange-8); + --colors-color-palette-9: var(--colors-orange-9); + --colors-color-palette-10: var(--colors-orange-10); + --colors-color-palette-11: var(--colors-orange-11); + --colors-color-palette-12: var(--colors-orange-12); + --colors-color-palette-a1: var(--colors-orange-a1); + --colors-color-palette-a2: var(--colors-orange-a2); + --colors-color-palette-a3: var(--colors-orange-a3); + --colors-color-palette-a4: var(--colors-orange-a4); + --colors-color-palette-a5: var(--colors-orange-a5); + --colors-color-palette-a6: var(--colors-orange-a6); + --colors-color-palette-a7: var(--colors-orange-a7); + --colors-color-palette-a8: var(--colors-orange-a8); + --colors-color-palette-a9: var(--colors-orange-a9); + --colors-color-palette-a10: var(--colors-orange-a10); + --colors-color-palette-a11: var(--colors-orange-a11); + --colors-color-palette-a12: var(--colors-orange-a12); + --colors-color-palette-solid-bg: var(--colors-orange-solid-bg); + --colors-color-palette-solid-bg-hover: var(--colors-orange-solid-bg-hover); + --colors-color-palette-solid-fg: var(--colors-orange-solid-fg); + --colors-color-palette-subtle-bg: var(--colors-orange-subtle-bg); + --colors-color-palette-subtle-bg-hover: var(--colors-orange-subtle-bg-hover); + --colors-color-palette-subtle-bg-active: var(--colors-orange-subtle-bg-active); + --colors-color-palette-subtle-fg: var(--colors-orange-subtle-fg); + --colors-color-palette-surface-bg: var(--colors-orange-surface-bg); + --colors-color-palette-surface-bg-active: var(--colors-orange-surface-bg-active); + --colors-color-palette-surface-border: var(--colors-orange-surface-border); + --colors-color-palette-surface-border-hover: var(--colors-orange-surface-border-hover); + --colors-color-palette-surface-fg: var(--colors-orange-surface-fg); + --colors-color-palette-outline-bg-hover: var(--colors-orange-outline-bg-hover); + --colors-color-palette-outline-bg-active: var(--colors-orange-outline-bg-active); + --colors-color-palette-outline-border: var(--colors-orange-outline-border); + --colors-color-palette-outline-fg: var(--colors-orange-outline-fg); + --colors-color-palette-plain-bg-hover: var(--colors-orange-plain-bg-hover); + --colors-color-palette-plain-bg-active: var(--colors-orange-plain-bg-active); + --colors-color-palette-plain-fg: var(--colors-orange-plain-fg); +} + + .color-palette_red { + --colors-color-palette-1: var(--colors-red-1); + --colors-color-palette-2: var(--colors-red-2); + --colors-color-palette-3: var(--colors-red-3); + --colors-color-palette-4: var(--colors-red-4); + --colors-color-palette-5: var(--colors-red-5); + --colors-color-palette-6: var(--colors-red-6); + --colors-color-palette-7: var(--colors-red-7); + --colors-color-palette-8: var(--colors-red-8); + --colors-color-palette-9: var(--colors-red-9); + --colors-color-palette-10: var(--colors-red-10); + --colors-color-palette-11: var(--colors-red-11); + --colors-color-palette-12: var(--colors-red-12); + --colors-color-palette-a1: var(--colors-red-a1); + --colors-color-palette-a2: var(--colors-red-a2); + --colors-color-palette-a3: var(--colors-red-a3); + --colors-color-palette-a4: var(--colors-red-a4); + --colors-color-palette-a5: var(--colors-red-a5); + --colors-color-palette-a6: var(--colors-red-a6); + --colors-color-palette-a7: var(--colors-red-a7); + --colors-color-palette-a8: var(--colors-red-a8); + --colors-color-palette-a9: var(--colors-red-a9); + --colors-color-palette-a10: var(--colors-red-a10); + --colors-color-palette-a11: var(--colors-red-a11); + --colors-color-palette-a12: var(--colors-red-a12); + --colors-color-palette-solid-bg: var(--colors-red-solid-bg); + --colors-color-palette-solid-bg-hover: var(--colors-red-solid-bg-hover); + --colors-color-palette-solid-fg: var(--colors-red-solid-fg); + --colors-color-palette-subtle-bg: var(--colors-red-subtle-bg); + --colors-color-palette-subtle-bg-hover: var(--colors-red-subtle-bg-hover); + --colors-color-palette-subtle-bg-active: var(--colors-red-subtle-bg-active); + --colors-color-palette-subtle-fg: var(--colors-red-subtle-fg); + --colors-color-palette-surface-bg: var(--colors-red-surface-bg); + --colors-color-palette-surface-bg-active: var(--colors-red-surface-bg-active); + --colors-color-palette-surface-border: var(--colors-red-surface-border); + --colors-color-palette-surface-border-hover: var(--colors-red-surface-border-hover); + --colors-color-palette-surface-fg: var(--colors-red-surface-fg); + --colors-color-palette-outline-bg-hover: var(--colors-red-outline-bg-hover); + --colors-color-palette-outline-bg-active: var(--colors-red-outline-bg-active); + --colors-color-palette-outline-border: var(--colors-red-outline-border); + --colors-color-palette-outline-fg: var(--colors-red-outline-fg); + --colors-color-palette-plain-bg-hover: var(--colors-red-plain-bg-hover); + --colors-color-palette-plain-bg-active: var(--colors-red-plain-bg-active); + --colors-color-palette-plain-fg: var(--colors-red-plain-fg); +} + + .color-palette_green { + --colors-color-palette-1: var(--colors-green-1); + --colors-color-palette-2: var(--colors-green-2); + --colors-color-palette-3: var(--colors-green-3); + --colors-color-palette-4: var(--colors-green-4); + --colors-color-palette-5: var(--colors-green-5); + --colors-color-palette-6: var(--colors-green-6); + --colors-color-palette-7: var(--colors-green-7); + --colors-color-palette-8: var(--colors-green-8); + --colors-color-palette-9: var(--colors-green-9); + --colors-color-palette-10: var(--colors-green-10); + --colors-color-palette-11: var(--colors-green-11); + --colors-color-palette-12: var(--colors-green-12); + --colors-color-palette-a1: var(--colors-green-a1); + --colors-color-palette-a2: var(--colors-green-a2); + --colors-color-palette-a3: var(--colors-green-a3); + --colors-color-palette-a4: var(--colors-green-a4); + --colors-color-palette-a5: var(--colors-green-a5); + --colors-color-palette-a6: var(--colors-green-a6); + --colors-color-palette-a7: var(--colors-green-a7); + --colors-color-palette-a8: var(--colors-green-a8); + --colors-color-palette-a9: var(--colors-green-a9); + --colors-color-palette-a10: var(--colors-green-a10); + --colors-color-palette-a11: var(--colors-green-a11); + --colors-color-palette-a12: var(--colors-green-a12); + --colors-color-palette-solid-bg: var(--colors-green-solid-bg); + --colors-color-palette-solid-bg-hover: var(--colors-green-solid-bg-hover); + --colors-color-palette-solid-fg: var(--colors-green-solid-fg); + --colors-color-palette-subtle-bg: var(--colors-green-subtle-bg); + --colors-color-palette-subtle-bg-hover: var(--colors-green-subtle-bg-hover); + --colors-color-palette-subtle-bg-active: var(--colors-green-subtle-bg-active); + --colors-color-palette-subtle-fg: var(--colors-green-subtle-fg); + --colors-color-palette-surface-bg: var(--colors-green-surface-bg); + --colors-color-palette-surface-bg-active: var(--colors-green-surface-bg-active); + --colors-color-palette-surface-border: var(--colors-green-surface-border); + --colors-color-palette-surface-border-hover: var(--colors-green-surface-border-hover); + --colors-color-palette-surface-fg: var(--colors-green-surface-fg); + --colors-color-palette-outline-bg-hover: var(--colors-green-outline-bg-hover); + --colors-color-palette-outline-bg-active: var(--colors-green-outline-bg-active); + --colors-color-palette-outline-border: var(--colors-green-outline-border); + --colors-color-palette-outline-fg: var(--colors-green-outline-fg); + --colors-color-palette-plain-bg-hover: var(--colors-green-plain-bg-hover); + --colors-color-palette-plain-bg-active: var(--colors-green-plain-bg-active); + --colors-color-palette-plain-fg: var(--colors-green-plain-fg); +} + + .sx_-3 > :not([hidden]) ~ :not([hidden]) { + margin-inline-start: calc(var(--spacing-3) * -1); + margin-inline-end: 0px; +} + + .sx_1 > :not([hidden]) ~ :not([hidden]) { + margin-inline-start: var(--spacing-1); + margin-inline-end: 0px; +} + + .flex-d_row { + flex-direction: row; +} + + .fw_medium { + font-weight: var(--font-weights-medium); +} + + .c_fg\.muted { + color: var(--colors-fg-muted); +} + + .ring-o_0\.125em { + outline-offset: 0.125em; +} + + .color-palette_purple { + --colors-color-palette-1: var(--colors-purple-1); + --colors-color-palette-2: var(--colors-purple-2); + --colors-color-palette-3: var(--colors-purple-3); + --colors-color-palette-4: var(--colors-purple-4); + --colors-color-palette-5: var(--colors-purple-5); + --colors-color-palette-6: var(--colors-purple-6); + --colors-color-palette-7: var(--colors-purple-7); + --colors-color-palette-8: var(--colors-purple-8); + --colors-color-palette-9: var(--colors-purple-9); + --colors-color-palette-10: var(--colors-purple-10); + --colors-color-palette-11: var(--colors-purple-11); + --colors-color-palette-12: var(--colors-purple-12); + --colors-color-palette-a1: var(--colors-purple-a1); + --colors-color-palette-a2: var(--colors-purple-a2); + --colors-color-palette-a3: var(--colors-purple-a3); + --colors-color-palette-a4: var(--colors-purple-a4); + --colors-color-palette-a5: var(--colors-purple-a5); + --colors-color-palette-a6: var(--colors-purple-a6); + --colors-color-palette-a7: var(--colors-purple-a7); + --colors-color-palette-a8: var(--colors-purple-a8); + --colors-color-palette-a9: var(--colors-purple-a9); + --colors-color-palette-a10: var(--colors-purple-a10); + --colors-color-palette-a11: var(--colors-purple-a11); + --colors-color-palette-a12: var(--colors-purple-a12); + --colors-color-palette-solid-bg: var(--colors-purple-solid-bg); + --colors-color-palette-solid-bg-hover: var(--colors-purple-solid-bg-hover); + --colors-color-palette-solid-fg: var(--colors-purple-solid-fg); + --colors-color-palette-subtle-bg: var(--colors-purple-subtle-bg); + --colors-color-palette-subtle-bg-hover: var(--colors-purple-subtle-bg-hover); + --colors-color-palette-subtle-bg-active: var(--colors-purple-subtle-bg-active); + --colors-color-palette-subtle-fg: var(--colors-purple-subtle-fg); + --colors-color-palette-surface-bg: var(--colors-purple-surface-bg); + --colors-color-palette-surface-bg-active: var(--colors-purple-surface-bg-active); + --colors-color-palette-surface-border: var(--colors-purple-surface-border); + --colors-color-palette-surface-border-hover: var(--colors-purple-surface-border-hover); + --colors-color-palette-surface-fg: var(--colors-purple-surface-fg); + --colors-color-palette-outline-bg-hover: var(--colors-purple-outline-bg-hover); + --colors-color-palette-outline-bg-active: var(--colors-purple-outline-bg-active); + --colors-color-palette-outline-border: var(--colors-purple-outline-border); + --colors-color-palette-outline-fg: var(--colors-purple-outline-fg); + --colors-color-palette-plain-bg-hover: var(--colors-purple-plain-bg-hover); + --colors-color-palette-plain-bg-active: var(--colors-purple-plain-bg-active); + --colors-color-palette-plain-fg: var(--colors-purple-plain-fg); +} + + .color-palette_amber { + --colors-color-palette-1: var(--colors-amber-1); + --colors-color-palette-2: var(--colors-amber-2); + --colors-color-palette-3: var(--colors-amber-3); + --colors-color-palette-4: var(--colors-amber-4); + --colors-color-palette-5: var(--colors-amber-5); + --colors-color-palette-6: var(--colors-amber-6); + --colors-color-palette-7: var(--colors-amber-7); + --colors-color-palette-8: var(--colors-amber-8); + --colors-color-palette-9: var(--colors-amber-9); + --colors-color-palette-10: var(--colors-amber-10); + --colors-color-palette-11: var(--colors-amber-11); + --colors-color-palette-12: var(--colors-amber-12); + --colors-color-palette-a1: var(--colors-amber-a1); + --colors-color-palette-a2: var(--colors-amber-a2); + --colors-color-palette-a3: var(--colors-amber-a3); + --colors-color-palette-a4: var(--colors-amber-a4); + --colors-color-palette-a5: var(--colors-amber-a5); + --colors-color-palette-a6: var(--colors-amber-a6); + --colors-color-palette-a7: var(--colors-amber-a7); + --colors-color-palette-a8: var(--colors-amber-a8); + --colors-color-palette-a9: var(--colors-amber-a9); + --colors-color-palette-a10: var(--colors-amber-a10); + --colors-color-palette-a11: var(--colors-amber-a11); + --colors-color-palette-a12: var(--colors-amber-a12); + --colors-color-palette-solid-bg: var(--colors-amber-solid-bg); + --colors-color-palette-solid-bg-hover: var(--colors-amber-solid-bg-hover); + --colors-color-palette-solid-fg: var(--colors-amber-solid-fg); + --colors-color-palette-subtle-bg: var(--colors-amber-subtle-bg); + --colors-color-palette-subtle-bg-hover: var(--colors-amber-subtle-bg-hover); + --colors-color-palette-subtle-bg-active: var(--colors-amber-subtle-bg-active); + --colors-color-palette-subtle-fg: var(--colors-amber-subtle-fg); + --colors-color-palette-surface-bg: var(--colors-amber-surface-bg); + --colors-color-palette-surface-bg-active: var(--colors-amber-surface-bg-active); + --colors-color-palette-surface-border: var(--colors-amber-surface-border); + --colors-color-palette-surface-border-hover: var(--colors-amber-surface-border-hover); + --colors-color-palette-surface-fg: var(--colors-amber-surface-fg); + --colors-color-palette-outline-bg-hover: var(--colors-amber-outline-bg-hover); + --colors-color-palette-outline-bg-active: var(--colors-amber-outline-bg-active); + --colors-color-palette-outline-border: var(--colors-amber-outline-border); + --colors-color-palette-outline-fg: var(--colors-amber-outline-fg); + --colors-color-palette-plain-bg-hover: var(--colors-amber-plain-bg-hover); + --colors-color-palette-plain-bg-active: var(--colors-amber-plain-bg-active); + --colors-color-palette-plain-fg: var(--colors-amber-plain-fg); +} + + .fw_semibold { + font-weight: var(--font-weights-semibold); +} + + .bd-be-w_var\(--thickness\) { + border-block-end-width: var(--thickness); +} + + .c_fg\.subtle { + color: var(--colors-fg-subtle); +} + + .white-space_nowrap { + white-space: nowrap; +} + + .jc_start { + justify-content: start; +} + + .d_grid { + display: grid; +} + + .grid-tc_repeat\(auto-fit\,_minmax\(300px\,_1fr\)\) { + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); +} + + .c_colorPalette\.subtle\.fg { + color: var(--colors-color-palette-subtle-fg); +} + + .as_start { + align-self: start; +} + + .sr_true { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + + .ai_flex-start { + align-items: flex-start; +} + + .ms_6 { + margin-inline-start: var(--spacing-6); +} + + .me_-2 { + margin-inline-end: calc(var(--spacing-2) * -1); +} + + .pointer-events_none { + pointer-events: none; +} + + .fw_light { + font-weight: var(--font-weights-light); +} + + .fw_normal { + font-weight: var(--font-weights-normal); +} + + .fw_bold { + font-weight: var(--font-weights-bold); +} + + .c_colorPalette\.solid\.bg { + color: var(--colors-color-palette-solid-bg); +} + + .us_none { + -webkit-user-select: none; + user-select: none; +} + + .jc_space-between { + justify-content: space-between; +} + + .pointer-events_auto { + pointer-events: auto; +} + + .ai_stretch { + align-items: stretch; +} + + .sy_3 > :not([hidden]) ~ :not([hidden]) { + margin-top: var(--spacing-3); + margin-bottom: 0px; +} + + .size_12 { + width: var(--sizes-12); + height: var(--sizes-12); +} + + .size_10 { + width: var(--sizes-10); + height: var(--sizes-10); +} + + .c_colorPalette\.9 { + color: var(--colors-color-palette-9); +} + + .anim-dur_\.8s { + animation-duration: .8s; +} + + .c_red\.9 { + color: var(--colors-red-9); +} + + .c_blue\.9 { + color: var(--colors-blue-9); +} + + .content_This_is_a_tooltip { + content: This is a tooltip; +} + + .ta_right { + text-align: right; +} + + .ms_auto { + margin-inline-start: auto; +} + + .trunc_true { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + + .resize_none { + resize: none; +} + + .resize_vertical { + resize: vertical; +} + + .resize_horizontal { + resize: horizontal; +} + + .resize_both { + resize: both; +} + + .content_This_is_the_tooltip_content { + content: This is the tooltip content; +} + + .content_Christian_Busch_is_online { + content: Christian Busch is online; +} + + .top_0 { + top: var(--spacing-0); +} + + .w_full { + width: var(--sizes-full); +} + + .h_4 { + height: var(--sizes-4); +} + + .h_40 { + height: var(--sizes-40); +} + + .max-w_xl { + max-width: var(--sizes-xl); +} + + .top_-2 { + top: calc(var(--spacing-2) * -1); +} + + .w_2 { + width: var(--sizes-2); +} + + .h_2 { + height: var(--sizes-2); +} + + .h_1lh { + height: 1lh; +} + + .min-h_48 { + min-height: var(--sizes-48); +} + + .w_100\% { + width: 100%; +} + + .max-w_52 { + max-width: var(--sizes-52); +} + + .h_48 { + height: var(--sizes-48); +} + + .max-w_lg { + max-width: var(--sizes-lg); +} + + .h_80 { + height: var(--sizes-80); +} + + .h_full { + height: var(--sizes-full); +} + + .mt_0\.5 { + margin-top: var(--spacing-0\.5); +} + + .mt_3 { + margin-top: var(--spacing-3); +} + + .max-w_md { + max-width: var(--sizes-md); +} + + .mb_4 { + margin-bottom: var(--spacing-4); +} + + .w_fit-content { + width: fit-content; +} + + .right_-2 { + right: calc(var(--spacing-2) * -1); +} + + .lc_1 { + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; +} + + .min-w_50\% { + min-width: 50%; +} + + .w_auto { + width: auto; +} + + .max-w_sm { + max-width: var(--sizes-sm); +} + + .h_36 { + height: var(--sizes-36); +} + + .pb_1 { + padding-bottom: var(--spacing-1); +} + + .h_20 { + height: var(--sizes-20); +} + + .w_40 { + width: var(--sizes-40); +} + + .h_72 { + height: var(--sizes-72); +} + + .max-w_xs { + max-width: var(--sizes-xs); +} + + .h_5 { + height: var(--sizes-5); +} + + .w_80\% { + width: 80%; +} + + .h_200px { + height: 200px; +} + + .min-h_5 { + min-height: var(--sizes-5); +} + + .w_sm { + width: var(--sizes-sm); +} + + .min-h_64 { + min-height: var(--sizes-64); +} + + .min-w_xs { + min-width: var(--sizes-xs); +} + + .min-w_40 { + min-width: var(--sizes-40); +} + + .left_0 { + left: var(--spacing-0); +} + + .lc_2 { + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; +} + + .max-w_50\% { + max-width: 50%; +} + + .\[\&_\>_\*\:not\(\:first-child\)\:not\(\:last-child\)\]\:bdr_0 > *:not(:first-child):not(:last-child) { + border-radius: 0; +} + + .\[\&_\>_\*\:first-child\]\:bdr-e_0 > *:first-child { + border-start-end-radius: 0; + border-end-end-radius: 0; +} + + .\[\&_\>_\*\:first-child\]\:me_-1px > *:first-child { + margin-inline-end: -1px; +} + + .\[\&_\>_\*\:last-child\]\:bdr-s_0 > *:last-child { + border-start-start-radius: 0; + border-end-start-radius: 0; +} + + .\[\&_\>_\*\:not\(\:first-child\)\:not\(\:last-child\)\]\:me_-1px > *:not(:first-child):not(:last-child) { + margin-inline-end: -1px; +} + + .\[\&_\>_\*\:first-child\]\:bdr-b_0 > *:first-child { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + + .\[\&_\>_\*\:last-child\]\:bdr-t_0 > *:last-child { + border-top-left-radius: 0; + border-top-right-radius: 0; +} + + .\[\&_\>_\*\:first-child\]\:mb_-1px > *:first-child,.\[\&_\>_\*\:not\(\:first-child\)\:not\(\:last-child\)\]\:mb_-1px > *:not(:first-child):not(:last-child) { + margin-bottom: -1px; +} + + .last\:max-w_100\%:last-child { + max-width: 100%; +} + + .last\:max-w_80\%:last-child { + max-width: 80%; +} + + @media screen and (min-width: 48rem) { + .md\:px_6 { + padding-inline: var(--spacing-6); +} + .md\:w_50\% { + width: 50%; +} +} + + @media screen and (min-width: 64rem) { + .lg\:px_8 { + padding-inline: var(--spacing-8); +} +} + + @media screen and (max-width: 47.9975rem) { + .mdDown\:inset-x_4 { + inset-inline: var(--spacing-4); +} +} +} \ No newline at end of file From 1082be207d74155ff672cf06cbe320beb417d300 Mon Sep 17 00:00:00 2001 From: Christian Busch Date: Thu, 4 Dec 2025 14:37:17 +0100 Subject: [PATCH 3/3] chore: wip --- .storybook/polish.ts | 174 ++++++++++++++++++++++++ .storybook/styles-v2.css | 7 + .storybook/styles-v2/recipes.css | 3 +- .storybook/styles-v2/recipes/avatar.css | 102 ++------------ packages/react/.storybook/preview.ts | 2 +- 5 files changed, 191 insertions(+), 97 deletions(-) create mode 100644 .storybook/polish.ts create mode 100644 .storybook/styles-v2.css diff --git a/.storybook/polish.ts b/.storybook/polish.ts new file mode 100644 index 0000000000..d259604bb7 --- /dev/null +++ b/.storybook/polish.ts @@ -0,0 +1,174 @@ +import { readdir } from 'node:fs/promises' +import { join } from 'node:path' + +const defaultVariants: Record> = { + avatar: { + size: 'md', + shape: 'full', + variant: 'subtle', + }, + // Add more components here as needed +} + +const recipesDir = join(import.meta.dir, 'styles-v2/recipes') + +const files = await readdir(recipesDir) + +// Convert camelCase to kebab-case +function toKebabCase(str: string): string { + return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase() +} + +// Check if a selector is a base selector (no variant, like .avatar__root) +function isBaseSelector(selector: string): boolean { + // Matches .component__part but NOT .component__part--variant_value + return /\.[a-zA-Z][a-zA-Z0-9-]*__[a-zA-Z][a-zA-Z0-9-]*/.test(selector) && !selector.includes('--') +} + +// Transform base selector to data-scope/data-part format +function transformBaseSelector(selector: string): string { + return selector.replace(/\.([a-zA-Z][a-zA-Z0-9-]*)__([a-zA-Z][a-zA-Z0-9-]*)/g, (_match, component, part) => { + const kebabComponent = toKebabCase(component) + const kebabPart = toKebabCase(part) + return `[data-scope="${kebabComponent}"][data-part="${kebabPart}"]` + }) +} + +// Check if a selector matches a default variant +function isDefaultVariantSelector( + selector: string, + componentName: string, + defaults: Record, +): { isDefault: boolean; part: string } | null { + // Match pattern like .avatar__root--variant_subtle or .avatar__fallback--size_md + const variantMatch = selector.match(/\.([a-zA-Z][a-zA-Z0-9-]*)__([a-zA-Z][a-zA-Z0-9-]*)--([a-zA-Z]+)_([a-zA-Z0-9]+)/) + + if (!variantMatch) return null + + const [, component, part, variantType, variantValue] = variantMatch + const kebabComponent = toKebabCase(component) + + if (kebabComponent !== componentName) return null + + // Check if this matches a default variant + const defaultValue = defaults[variantType] + if (defaultValue && defaultValue === variantValue) { + return { isDefault: true, part: toKebabCase(part) } + } + + return { isDefault: false, part: toKebabCase(part) } +} + +// Check if selector is a variant selector (has --) +function isVariantSelector(selector: string): boolean { + return /\.[a-zA-Z][a-zA-Z0-9-]*__[a-zA-Z][a-zA-Z0-9-]*--/.test(selector) +} + +// Transform default variant selector to data-scope/data-part format +function transformVariantToDataSelector(selector: string): string { + // Handle pseudo-elements and pseudo-classes in the selector + // e.g., .avatar__fallback--size_md :where(svg) -> [data-scope="avatar"][data-part="fallback"] :where(svg) + return selector.replace( + /\.([a-zA-Z][a-zA-Z0-9-]*)__([a-zA-Z][a-zA-Z0-9-]*)--[a-zA-Z]+_[a-zA-Z0-9]+/g, + (_match, component, part) => { + const kebabComponent = toKebabCase(component) + const kebabPart = toKebabCase(part) + return `[data-scope="${kebabComponent}"][data-part="${kebabPart}"]` + }, + ) +} + +// Process a single CSS file +async function processFile(filePath: string, componentName: string) { + const content = await Bun.file(filePath).text() + const defaults = defaultVariants[componentName] + + if (!defaults) { + console.log(`Skipping ${componentName}: no default variants defined`) + return + } + + const lines = content.split('\n') + const result: string[] = [] + + let braceDepth = 0 + let skipUntilBraceDepth = -1 // -1 means not skipping + + for (let i = 0; i < lines.length; i++) { + const line = lines[i] + + // Count braces to track nesting depth + const openBraces = (line.match(/\{/g) || []).length + const closeBraces = (line.match(/\}/g) || []).length + + // Check if we're currently skipping a block + if (skipUntilBraceDepth >= 0) { + braceDepth += openBraces - closeBraces + if (braceDepth <= skipUntilBraceDepth) { + skipUntilBraceDepth = -1 // Stop skipping + } + continue // Skip this line + } + + // Check if this line starts a new rule block (has a selector followed by {) + const selectorMatch = line.match(/^\s*([^{}]+)\{/) + + if (selectorMatch && openBraces > 0) { + const selector = selectorMatch[1].trim() + + // Always keep @layer declarations + if (selector.startsWith('@layer')) { + result.push(line) + braceDepth += openBraces - closeBraces + continue + } + + // Check what kind of selector this is + if (isVariantSelector(selector)) { + // It's a variant selector - check if it matches default + const check = isDefaultVariantSelector(selector, componentName, defaults) + if (check?.isDefault) { + // Transform and keep default variant selectors + const transformedSelector = transformVariantToDataSelector(selector) + result.push(line.replace(selector, transformedSelector)) + braceDepth += openBraces - closeBraces + } else { + // Skip non-default variant selectors + skipUntilBraceDepth = braceDepth + braceDepth += openBraces - closeBraces + } + } else if (isBaseSelector(selector)) { + // Transform base selectors like .avatar__root to [data-scope][data-part] + const transformedSelector = transformBaseSelector(selector) + result.push(line.replace(selector, transformedSelector)) + braceDepth += openBraces - closeBraces + } else { + // Keep other selectors as-is + result.push(line) + braceDepth += openBraces - closeBraces + } + } else { + // Not a selector line, just keep it + result.push(line) + braceDepth += openBraces - closeBraces + } + } + + // Clean up multiple consecutive empty lines + const cleaned = result.join('\n').replace(/\n{3,}/g, '\n\n') + + await Bun.write(filePath, cleaned) + console.log(`Processed: ${componentName}.css`) +} + +// Main execution +for (const file of files) { + if (!file.endsWith('.css')) continue + + const componentName = file.replace('.css', '') + const filePath = join(recipesDir, file) + + await processFile(filePath, componentName) +} + +console.log(`\nDone! Processed ${files.filter((f) => f.endsWith('.css')).length} files.`) diff --git a/.storybook/styles-v2.css b/.storybook/styles-v2.css new file mode 100644 index 0000000000..6e45b3a10e --- /dev/null +++ b/.storybook/styles-v2.css @@ -0,0 +1,7 @@ +@layer reset, base, tokens, recipes, utilities; + +@import './styles-v2/reset.css'; +@import './styles-v2/global.css'; +@import './styles-v2/tokens.css'; +@import './styles-v2/utilities.css'; +@import './styles-v2/recipes.css'; \ No newline at end of file diff --git a/.storybook/styles-v2/recipes.css b/.storybook/styles-v2/recipes.css index 9ecf644548..5cb84121f1 100644 --- a/.storybook/styles-v2/recipes.css +++ b/.storybook/styles-v2/recipes.css @@ -39,5 +39,4 @@ @import './recipes/table.css'; @import './recipes/tabs.css'; @import './recipes/tags-input.css'; -@import './recipes/toggle-group.css'; -@import './recipes/form-label.css'; \ No newline at end of file +@import './recipes/toggle-group.css'; \ No newline at end of file diff --git a/.storybook/styles-v2/recipes/avatar.css b/.storybook/styles-v2/recipes/avatar.css index 5a8e2fe0cc..8206249025 100644 --- a/.storybook/styles-v2/recipes/avatar.css +++ b/.storybook/styles-v2/recipes/avatar.css @@ -1,6 +1,6 @@ @layer recipes.slots { @layer _base { - .avatar__root { + [data-scope="avatar"][data-part="root"] { display: inline-flex; align-items: center; justify-content: center; @@ -15,17 +15,17 @@ height: var(--avatar-size); } - .avatar__root,.avatar__image { + [data-scope="avatar"][data-part="root"],[data-scope="avatar"][data-part="image"] { border-radius: var(--avatar-radius); } - .avatar__image { + [data-scope="avatar"][data-part="image"] { object-fit: cover; width: 100%; height: 100%; } - .avatar__fallback { + [data-scope="avatar"][data-part="fallback"] { border-radius: var(--avatar-radius); line-height: 1; text-transform: uppercase; @@ -34,109 +34,23 @@ } } - .avatar__root--size_lg { - --avatar-font-size: var(--font-sizes-md); - --avatar-size: var(--sizes-11); -} - - .avatar__fallback--size_lg :where(svg) { - width: var(--sizes-5\.5); - height: var(--sizes-5\.5); -} - - .avatar__root--shape_full { + [data-scope="avatar"][data-part="root"] { --avatar-radius: var(--radii-full); } - .avatar__root--variant_subtle { + [data-scope="avatar"][data-part="root"] { background: var(--colors-color-palette-subtle-bg); color: var(--colors-color-palette-subtle-fg); } - .avatar__root--size_md { + [data-scope="avatar"][data-part="root"] { --avatar-font-size: var(--font-sizes-md); --avatar-size: var(--sizes-10); } - .avatar__fallback--size_md :where(svg) { + [data-scope="avatar"][data-part="fallback"] :where(svg) { width: var(--sizes-5); height: var(--sizes-5); } - .avatar__root--size_full { - --avatar-size: 100%; - --avatar-font-size: 100%; -} - - .avatar__root--size_2xs { - --avatar-font-size: var(--font-sizes-2xs); - --avatar-size: var(--sizes-6); -} - - .avatar__fallback--size_2xs :where(svg) { - width: var(--sizes-3); - height: var(--sizes-3); -} - - .avatar__root--size_xs { - --avatar-font-size: var(--font-sizes-xs); - --avatar-size: var(--sizes-8); -} - - .avatar__fallback--size_xs :where(svg) { - width: var(--sizes-4); - height: var(--sizes-4); -} - - .avatar__root--size_sm { - --avatar-font-size: var(--font-sizes-sm); - --avatar-size: var(--sizes-9); -} - - .avatar__fallback--size_sm :where(svg) { - width: var(--sizes-4\.5); - height: var(--sizes-4\.5); -} - - .avatar__root--size_xl { - --avatar-font-size: var(--font-sizes-lg); - --avatar-size: var(--sizes-12); -} - - .avatar__fallback--size_xl :where(svg) { - width: var(--sizes-6); - height: var(--sizes-6); -} - - .avatar__root--size_2xl { - --avatar-font-size: var(--font-sizes-xl); - --avatar-size: var(--sizes-16); -} - - .avatar__fallback--size_2xl :where(svg) { - width: var(--sizes-8); - height: var(--sizes-8); -} - - .avatar__root--variant_solid { - background: var(--colors-color-palette-solid-bg); - color: var(--colors-color-palette-solid-fg); -} - - .avatar__root--variant_surface { - background: var(--colors-color-palette-surface-bg); - border-width: 1px; - border-color: var(--colors-color-palette-surface-border); - color: var(--colors-color-palette-surface-fg); -} - - .avatar__root--variant_outline { - border-width: 1px; - border-color: var(--colors-color-palette-outline-border); - color: var(--colors-color-palette-outline-fg); -} - - .avatar__root--shape_rounded { - --avatar-radius: var(--radii-l3); -} } \ No newline at end of file diff --git a/packages/react/.storybook/preview.ts b/packages/react/.storybook/preview.ts index f832a6b25c..f11bf7f990 100644 --- a/packages/react/.storybook/preview.ts +++ b/packages/react/.storybook/preview.ts @@ -1,5 +1,5 @@ import type { Preview } from '@storybook/react-vite' -import '../../../.storybook/styles.css' +import '../../../.storybook/styles-v2.css' const preview: Preview = { parameters: {