{"_id":"@alicloud/css-var-utils","_rev":"2-225c21824ab0495e6681b027efd25567","name":"@alicloud/css-var-utils","dist-tags":{"latest":"0.1.0"},"versions":{"0.0.1":{"name":"@alicloud/css-var-utils","version":"0.0.1","main":"lib/index.js","module":"esm/index.js","license":"MIT","scripts":{"clean":"rm -rf ./lib ./esm","prepare":"npm run clean && tsc && tsc --module commonjs --outDir lib","watch":"npm run clean && tsc -w"},"devDependencies":{"typescript":"^4.0.5"},"publishConfig":{"access":"public"},"description":"Define your theme with CSS custom properties (CSS variables). Describe your theme variables in js.","_id":"@alicloud/css-var-utils@0.0.1","_nodeVersion":"12.16.2","_npmVersion":"6.14.7","dist":{"integrity":"sha512-wOpBXXrOrUY/xGLYqNJQnHK+8ZA97Ilifr31wtRWqFgknSkKgqx0POFtIamjILZnrAmH5Y4aZ01XBIzW/WPWsw==","shasum":"a7b0189ff45bd63ec445c4b7d9d7f50f6b997e4e","tarball":"https://registry.npmjs.org/@alicloud/css-var-utils/-/css-var-utils-0.0.1.tgz","fileCount":42,"unpackedSize":38470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfu5NOCRA9TVsSAnZWagAAXzoQAKSbYhHzAppb4qgWROVl\nyHitPYUojIY2ValhUeViugluK1GTskOkc3ctV598G15V/8o/QFI5RyS0B2If\nlLaWb95Yg2EJ/l8NLPIslDSpHK56TMzXla4CsLq9cfP8W3e/bEQCLHufAYZo\n5k4If+hh7cu1rsPiFy6hWXc4HXk7Y/8wf4Ttyb3TEA2fhsiGNhhyBIp9RW2i\nvENq+rLO2d3f6C2z7rMe0aSJ3A2aJER/mkPy4razey8Og37hmuONJu2QeQJV\nqwjVFL0v1mo1QhpWnl58lWTEhDa9zZ+Voxn5Gy3iuL0xxNei1eoRJS9/+odi\nB8wedR5RvajybBlvlW8ywMbW1nN5nWXnpFQkDrDSZv6mQFgsI6TyaCGQ2K0z\nrruNPyhoppsSoL/yAees2DIoZK+1OejX2/2F9yYbhviZjlIFQr6ki3r1myGi\nS6esx1t36XZnA7iI2q/jqtva6DEmTE9pybB7OxK5L3jvjvCQMqAwWfabNPdU\n/8gYHLZ+/vlEF7hj/hzfgjgMLaFzYiFF+MpvCCrw5eDM2Sb2jzof7GgjC3Cw\nm0DahMEqJI3L+uG4XfhpqF0Z541cYEOmW1XnGleer3HMNMKIILUWTp4KPheW\nMkIT4J1vzEcxBD4xcqNfEx4zz5OYWTt7V7Dw1EaTF6goKPIzur08S2buD9gL\nuqRs\r\n=E4ng\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICvQw6W3O7+kwvO1NT/lhdApFVRJOTlf+y7DC2mTchSJAiEAkTlWCKgpUlIAJR2UNqdr4MSxxcPfTodOKYaT5DbDnw8="}]},"_npmUser":{"name":"console-fe","email":"console-fe@alibabacloud.com"},"directories":{},"maintainers":[{"name":"console-fe","email":"console-fe@alibabacloud.com"},{"name":"aliyunsdkteam","email":"sdk-team@alibabacloud.com"},{"name":"pagecao","email":"cpj1106@gmail.com"},{"name":"fengmk2","email":"fengmk2@gmail.com"},{"name":"jacksontian","email":"shyvo1987@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/css-var-utils_0.0.1_1606128461841_0.26383182153241536"},"_hasShrinkwrap":false},"0.1.0":{"name":"@alicloud/css-var-utils","version":"0.1.0","main":"lib/index.js","module":"esm/index.js","license":"MIT","scripts":{"clean":"rm -rf ./lib ./esm","prepare":"npm run clean && tsc && tsc --module commonjs --outDir lib","watch":"npm run clean && tsc -w"},"devDependencies":{"typescript":"^4.0.5"},"publishConfig":{"access":"public"},"description":"css-var-utils 帮助你管理 css-var 的 fallback value，生成的代码类似于`background-color: var(--btn-bg-color, #ccc)`。因此组件使用者可以通过定义`--btn-bg-color`来覆盖这个颜色。","_id":"@alicloud/css-var-utils@0.1.0","_nodeVersion":"12.16.2","_npmVersion":"6.14.7","dist":{"integrity":"sha512-aNENF0HrlQcywKvl6VDLWFc05Zw7ljAkOdeEbocbikcsYpz2luUXi7aHxzzZhOdOwG4s/NgpMaArOGHv+LPHUg==","shasum":"fd46820fe0fc9ed306c7ff8e053b1eb433698657","tarball":"https://registry.npmjs.org/@alicloud/css-var-utils/-/css-var-utils-0.1.0.tgz","fileCount":41,"unpackedSize":50312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUIf3CRA9TVsSAnZWagAACcAP/R4qntYcBk5yn5VIX+qk\n9TW7BTP70zIv6hiwky3DyJAb+BIEa41bVcoMMs0q6rmaFzYIkK4jruk0VM6O\negBaWF5Cj3AWY/C8XbIGs9hRWzXqNAkENe7p6mRdJtnmNrzDU8lsxTMX4OCg\nuI3px7ZsUpB/NvNmDkoCC++xlrBRN5D7iIJlRiM7Aa4KDPeHZcWsYGF56y3g\nzjUuVGUwkakSinvTFMekuTIeU4Qv8omBGBDSFEpDXtwHUxjWYkwIo/no4zAp\no8PV2eRA/JYTq+C8iEIVPW1Ys6VkVO8P/VdhnAQY+yswJjHnvjWhz/8UVTI6\nDYJJth0mbGJCqVs7jMcv1JDIqYUvKpDUuBKwd1bvqByVKvmAWW8+xHVWqVGO\nm5yHBxNofBRqd+dCHM7t/xJDIkaezxFOiH342lXXVHCyzXntxWvCVtcZN8kZ\nt76kvIrbbfVmM5Z76G7WarB0VQKFTzi0hAmEgun91/2hQN6Ee6vuN4St/zXl\nfxiAbCG/rJqrrAbVRV0lxxviBuZdBr7VAA02fqB37IL2nrFFXiJRbh7n2HM1\nmLFmnFVNlWjuAkrKVRzR1YtNbseRfB2P1qLYaIkiWSKTn9l/vHJzV482Ynl5\nFjiZU/GNVSNGYesPcdvthwwflZ8gpLxDXJSuYPrY1K+r/mo2KEdwco4ulq7v\nNaoQ\r\n=eyD3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA5aXZQ43bWZKtOxOXbprH116gF/tmugaTbb1igrciELAiBIMBg8E2OrBzpnKBBjOF+1CuqZBS+hojEjGpsQx0wxFQ=="}]},"_npmUser":{"name":"console-fe","email":"console-fe@alibabacloud.com"},"directories":{},"maintainers":[{"name":"jacksontian","email":"shyvo1987@gmail.com"},{"name":"fengmk2","email":"fengmk2@gmail.com"},{"name":"pagecao","email":"cpj1106@gmail.com"},{"name":"aliyunsdkteam","email":"sdk-team@alibabacloud.com"},{"name":"console-fe","email":"console-fe@alibabacloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/css-var-utils_0.1.0_1615890423520_0.12586196624786283"},"_hasShrinkwrap":false}},"time":{"created":"2020-11-23T10:47:41.581Z","0.0.1":"2020-11-23T10:47:41.980Z","modified":"2022-04-04T12:56:16.655Z","0.1.0":"2021-03-16T10:27:03.669Z"},"maintainers":[{"name":"jacksontian","email":"shyvo1987@gmail.com"},{"name":"fengmk2","email":"fengmk2@gmail.com"},{"name":"pagecao","email":"cpj1106@gmail.com"},{"name":"aliyunsdkteam","email":"sdk-team@alibabacloud.com"},{"name":"console-fe","email":"console-fe@alibabacloud.com"}],"description":"css-var-utils 帮助你管理 css-var 的 fallback value，生成的代码类似于`background-color: var(--btn-bg-color, #ccc)`。因此组件使用者可以通过定义`--btn-bg-color`来覆盖这个颜色。","license":"MIT","readme":"# @alicloud/css-var-utils\n\ncss-var-utils 帮助你管理 css-var 的 fallback value，生成的代码类似于`background-color: var(--btn-bg-color, #ccc)`。因此组件使用者可以通过定义`--btn-bg-color`来覆盖这个颜色。\n\ncss-var-utils 帮助你使用 Typescript 来定义、扩展、使用 Css Variables 主题：\n\n- **定义**一套【css-var 主题】，其中包含 css-var 的名称、默认值、描述\n- **覆盖**【css-var 主题】中的默认值，得到一套新的主题\n  - 比如原本的 【css-var 主题】是一套亮色主题，你可以通过覆盖其中的默认值，扩展出一套暗色主题的变量定义\n- 在 js（如styled-components） 中 **使用**【css-var 主题】中的变量\n- 多主题 UI 组件的开发：\n  - 组件提供者可以定义多套主题变量，给消费者选择\n  - 组件消费者可以选择自己需要的主题\n  - 最终的变量生效顺序是：运行时主题变量的实际值`--primary-color` > 组件消费者选择的主题中的变量默认值 > 组件提供者选择的主题中的变量默认值\n- 最终为变量使用所生成的代码类似于`color: var(--primary-color, <<default value from theme>>)`。因此这个变量依然可以感知到环境的 css-var，环境可以通过`--primary-color`来动态改变这个颜色（发挥 css-var 的动态性）\n  - 我们也会允许变量使用者关闭 css-var 的动态性\n\n好处：\n\n- 规范地定义、维护样式变量\n  - 提高代码可维护性，并且有优秀的 Typescript 支持，下面会介绍\n  - 有了规范，未来就可以通过可视化的方式配置主题中的各种变量，轻松定制主题\n- 只需要在一个地方维护 css-var 的默认值，而不需要在每次使用 css-var 的时候都编写默认值\n  - 过去，如果你在多个地方都使用了`var(--primary-color, #005AA5)`这个变量，你需要在每次使用的时候都带上后面的默认值`#005AA5`\n  - 使用 css-var-utils 以后，这个默认值只维护在主题定义的地方，在使用变量的时候会自动帮你加上默认值\n- css-var-utils 能够充分受益于 Typescript 类型检查：\n  - 你在对主题变量进行覆盖、使用的时候，能享受到 **css-var 名称补全和检查**\n    - css-var 的名称一般很长，容易写错。因此名称补全和检查能够提高开发效率、减少 bug\n  - Typescript 能够汇总对同一个 css-var 的所有引用，因此支持：\n    - 跳转到定义\n    - Find All References: 找到某个 css-var 在哪里被定义、覆盖、使用，并且快速跳转到对应代码\n    - 一键重命名 css-var\n\n使用场景：\n让你的 UI 组件支持多种主题（比如亮/暗色）。提高主题变量的维护效率。\n\nTODO:\n\n- 通过脚本，将 fusion 的 css-var 转化成形式化的定义，从而我们在使用 fusion 的 css var 的时候，能够获得上述好处\n","readmeFilename":"README.md"}