{"_id":"@alicloud/xconsole-less","_rev":"12-3089ab96a022f3a6a0a386cf5ea9c49f","name":"@alicloud/xconsole-less","dist-tags":{"latest":"2.0.0-alpha.6","alpha":"2.0.0-alpha.8","next":"2.0.0-next.0"},"versions":{"1.0.0-beta.1":{"name":"@alicloud/xconsole-less","version":"1.0.0-beta.1","description":"阿里云控制台通用 LESS 常量及方法","main":"index.less","license":"MIT","homepage":"https://github.com/aliyun/alibabacloud-console-design","repository":{"type":"git","url":"http://gitlab.alibaba-inc.com/xconsole/xconsole.git"},"bugs":{"url":"https://github.com/aliyun/alibabacloud-console-design/issues"},"author":"","publishConfig":{"registry":"http://registry.npm.alibaba-inc.com"},"peerDependencies":{"less":"^3.x","prop-types":"^15.x","react":"^16.x","react-dom":"^16.x"},"devDependencies":{"@ali/builder-abc":"^0.1.14","classnames":"^2.2.6","less":"^3.9.0","prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6"},"scripts":{"start":"abc dev"},"_id":"@alicloud/xconsole-less@1.0.0-beta.1","_nodeVersion":"12.16.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-QxhdyFpyIcj4xHxN2WTcpS2SrFj+8MZbby6FmlGqfKb1Qe4QUGlGYElpPgki8wZeIXo15gx7AZWE8fk1dZtvqg==","shasum":"55d367c443c72ff68ab64846ba50b68de1daf433","tarball":"https://registry.npmjs.org/@alicloud/xconsole-less/-/xconsole-less-1.0.0-beta.1.tgz","fileCount":19,"unpackedSize":31894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelB2BCRA9TVsSAnZWagAAYqsP/3DNBuKBlMPAlsfL3mrL\nA/1AmP8x2gBuGkbgu7fifp1KEZipwd8N9kLrlVpXNK6uO6CHEX0vpuCqpxUm\noKnlHhl79194BXPkw30eU/afxafWuARLCeXaR6kYircBS5cKWeFrR+U0ubj+\nzCgD4TSb9lDek3lHYhCypO+5lOasgJb4VDbEviTEfjSNK3LTgNzZcEM6wRFG\nPo/D1CXtY7iGSYvk8MCx1Jaz/TWCYiBzBfWD/VvSFp+SIrjrk3OUw+PfaAT1\nT4EtT0Z037wStbO0n7X4VACrMVGOzNaw9aIJF72d27jjDWbh6iJOCtd4l+sz\n7PkEfGyhy4EKLavdTH+EYEKTBeSURegoHPimaO72L1/Rl6TQfboNTisP+9VB\npz0xbodd+b03jnBNske61CDubXm+rKaMUjkhSZTTPXR2TYqqekdRgNfbsqGA\ncAb0B4Zrcbgy06fFJGp1EmSilPxCR7ptc+6O0VqJn+VMmO3PanLlyMOd2B0K\nHRVvYNipYfORqCjlDAyV179d9WCPh82xYCnBZAkvkCwxws0pgxsQLFAJdb3b\nX+mDWUk1bMZ6ROSCKxK0wQH9YSFqh9MUrJLDMiAmIDbhj2njdJroEfYHbsiU\ncro9a+bQMMytlQLeR7P8f7mnvMcYl1NJwg+HcD4rpGD8uAF5dQmzyORQgW9H\nruuG\r\n=wkiR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID4OK1MFmkmWtC9/ldzfjkvGDwzx29pjRAl0QSl/a8NIAiAoI0Z7gV1shF57aNXdNP8OEITOMEzKBV8qWRcIKWNWcQ=="}]},"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"}],"_npmUser":{"name":"console-fe","email":"console-fe@alibabacloud.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/xconsole-less_1.0.0-beta.1_1586765185127_0.24644455491038553"},"_hasShrinkwrap":false},"2.0.0-alpha.0":{"name":"@alicloud/xconsole-less","version":"2.0.0-alpha.0","description":"阿里云控制台通用 LESS 常量及方法","main":"index.less","license":"MIT","homepage":"https://github.com/aliyun/alibabacloud-console-design","repository":{"type":"git","url":"https://github.com/aliyun/alibabacloud-console-design.git"},"bugs":{"url":"https://github.com/aliyun/alibabacloud-console-design/issues"},"author":{},"peerDependencies":{"less":"^3.x","prop-types":"^15.x","react":"^16.x","react-dom":"^16.x"},"devDependencies":{"classnames":"^2.2.6","less":"^3.9.0","prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6"},"scripts":{"start":"abc dev"},"_id":"@alicloud/xconsole-less@2.0.0-alpha.0","dist":{"shasum":"7388f8dbd4bf1c043db7ef4fb692694d27daae56","integrity":"sha512-4qsmj+1yWFM5/ql4yJd8Pj13c7r4Bz6PcoaaOZ0ll+/36fjKCMF4zhLGgqNU0Aqs4sjYSASTUTg3o1YsTlEKYw==","tarball":"https://registry.npmjs.org/@alicloud/xconsole-less/-/xconsole-less-2.0.0-alpha.0.tgz","fileCount":23,"unpackedSize":31783,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKSKsCRA9TVsSAnZWagAAf5gQAIQN8SgmUNrX3a1JHDHb\nZPXxu1dYZEwwfRilisabKgyY93Kgkz2kKFnTkdumpA4PGeJIYFHX/DUNrJ5t\nGATHsy2knYYR60O8oSlut3/u7/jiyCdOF47vX5W0QAPrHbrmK5XVg6IRDKrC\nOI70rl7pbYaBsgFqDuegC4GaLj8ATO7R++p6fi7xl642rPFxWWoSUw/ymgjx\nQBeVTPHgQ/kNeIZErTuXp8SYSRJWXwZdt2fb1f/WllrKqtu9DNNNsQLhChtB\nn7wZmUiLJfJu3iWn+pBgsfIlXkTF6hKqQGv7N8BIFYJsipSbhcYNr1b7ysBn\n5iE1DVExtMnhXtdwaHR/2QZcZ7fKdIQaEDvXGIkIl7PVnVrX3qf4hi60ei5t\nYfB1wj2Ef540p4i5yvk4zzBdj0unwypcRZ8+P6bKxZdp6LlA+Cqp6B+Kk8Os\nuyxWuuG1aJ7vUTHk9dzVKcP3Zy8c9hpjKjDA0dvzW8rCa4CzbdZD7twjsn3H\nK2V+8F1CDn3V+ydNmBTa8qb2rHvik5mxba76GN4Ej9Wym9snwnhDuriVFc2z\noxFF9V10hxwzyLXxaB/9adm19tZnUAD7fsXKtha6LM42lvGu7ytohfsr7b4Q\nxDo/FkH5HVutOuzq2B6yGnpG95KjMai6d5JK8cFRpHrnFLTZaylwu61E0CNQ\npy8C\r\n=3iub\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHhS7+o1C5QgfCLoFwf/2s1kUw2asDKpBoCPlXMPMB1VAiEAu4GAWsxw5wS98q9RF5OrFgISmcc42YBQfYnUOrlnMM0="}]},"maintainers":[{"name":"aliyunsdkteam","email":"sdk-team@alibabacloud.com"},{"name":"console-fe","email":"console-fe@alibabacloud.com"},{"name":"fengmk2","email":"fengmk2@gmail.com"},{"name":"jacksontian","email":"shyvo1987@gmail.com"},{"name":"pagecao","email":"cpj1106@gmail.com"}],"_npmUser":{"name":"console-fe","email":"console-fe@alibabacloud.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/xconsole-less_2.0.0-alpha.0_1596531372356_0.08327244158093827"},"_hasShrinkwrap":false},"2.0.0-alpha.1":{"name":"@alicloud/xconsole-less","version":"2.0.0-alpha.1","description":"阿里云控制台通用 LESS 常量及方法","main":"index.less","license":"MIT","homepage":"https://github.com/aliyun/alibabacloud-console-design","repository":{"type":"git","url":"https://github.com/aliyun/alibabacloud-console-design.git"},"bugs":{"url":"https://github.com/aliyun/alibabacloud-console-design/issues"},"author":{},"peerDependencies":{"less":"^3.x","prop-types":"^15.x","react":"^16.x","react-dom":"^16.x"},"devDependencies":{"classnames":"^2.2.6","less":"^3.9.0","prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6"},"scripts":{"start":"abc dev"},"readmeFilename":"README.md","readme":"ABOUT\n=====\n\n> 阿里云控制台通用 LESS 常量及方法\n\n参考规范 \n\n# HOW TO USE\n\n安装：\n\n```\ntnpm install @ali/wind-less-mixin --save\n```\n\n在 LESS 文件中引入和使用：\n\n```less\n@import '~@ali/wind-less-mixin'; // 如果 webpack 报找不到，可以尝试加上 `/index`\n\n// 使用值（只有以 @G_ 打头的是允许使用的）\n.selector {\n color: @G_color_text_emphasis;\n}\n// 使用 mixin 方法\n.some-error {\n #color.error(true); // 只能通过 namespace 来引用\n}\n```\n\n# 代码规范说明\n\nmixin 包含两部分，值和方法。\n\n## 变量\n\n全局可用的[变量](http://lesscss.org/features/#variables-feature)（其实叫「常量」可能更为妥当）。\n\n由 `src/_var.less` 聚合位于 `src/var/` 目录下的文件，一个文件定义一组相关的变量，如 `color.less` 定义颜色，`size.less` 定义宽高大小。\n\n命名规范：\n\n* 公有变量以 `@G_` 打头，其余单词全小写，单词间以下划线 `_` 链接\n* 私有变量以 `@_` 打头，其余跟公有的一样\n\n关于「私有」：\n\nless 没有「私有」的概念，所以事实上可以引用所有的变量，以 `@_` 只是表明「你不要用，我不保证它不会变」。\n\n## 方法\n\n全局可用的 [无输出 mixin 方法](http://lesscss.org/features/#mixins-feature-not-outputting-the-mixin)。\n\n由 `src/_fn.less` 聚合位于 `src/fn/` 目录下的文件，一个文件定义一个 [namespace](http://lesscss.org/features/#mixins-feature-namespaces)，所有\n的方法都包裹在 `namespace` 中。\n\n命名规范：\n\n* `namespace` 全小写，单词之间用中划线 `-` 链接（尽可能只用一个单词）\n* 方法名跟 `namespace` 的命名方式一样\n* 方法参数遵循变量的命名规范\n* 方法参数之间以 `;` 分隔\n\n关于「私有」：\n\n跟变量一样，没有私有，但以 `_` 打头的方法，切记不要随便引用。\n\n# API\n\n> 由于维护的疏漏，这里有可能跟代码不同步，请查看源码\n\n## 变量\n\n### color\n\n#### 文字颜色\n\ncode | 值 | 预览 | 说明\n:-- | :-- | :--: | :--\n`@G_color_text_error` | `#f15533` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xf15533) |最高级别：报错\n`@G_color_text_warn` | `#f15533` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xf15533) | 最高级别：警告\n`@G_color_text_emphasis` | `#ff8a00` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xff8a00) | 第二级别：突出说明，如「金额」、「最重要链接」等\n`@G_color_text_info` | `#00c1de` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x00c1de) | 第二级别：重要提示、重要连接\n`@G_color_text_positive` | `#35b34a` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x35b34a) | 第三级别：积极和正面引导的文本，如「验证通过」、「已支付」等\n`@G_color_text_heading` | `#373d41` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x373d41) | 第四级别：标题\n`@G_color_text_body` | `#73777a` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x73777a) | 第五级别：正文\n`@G_color_text_help` | `#9b9ea0` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x9b9ea0) | 第六级别：最不重要的信息、最低级别的帮助信息\n`@G_color_text_hint` | `#c3c5c6` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xc3c5c6) | 第七级别：水印、输入框中的提示文字\n`@G_color_link` | `#00c1de` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x00c1de) | 第二级别：重要链接\n`@G_color_link_gray` | `#73777a` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x73777a) | 第三级别：次重要链接、列表型链接，如「公告」\n\n#### 背景色（浅色）\n\ncode | 值 | 预览 | 说明\n:-- | :-- | :--: | :--\n`@G_color_bg_error` | `#feeeeb` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xfeeeeb) | 最高级别：错误提示的底色\n`@G_color_bg_warn` | `#feeeeb` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xfeeeeb) | 最高级别：警告提示的底色\n`@G_color_bg_emphasis` | `#fff3e6` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xfff3e6) | 第二级别：突出说明的底色\n`@G_color_bg_info` | `#e6f9fc` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xe6f9fc) | 第二级别：重要说明的底色\n`@G_color_bg_positive` | `#ebf7ed` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xebf7ed) | 第三级别：积极和正面引导的文本，如「验证通过」、「已支付」等\n`@G_color_bg_dark` | `#d7d8d9` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xd7d8d9) | 强调需要严格强调模块之间差异的场景\n`@G_color_bg_heading` | `#ebecec` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xebecec) | 不可点按钮的底色，模块间的区分或模块中信息的层次区分，如「表头」、「卡片标题区」等\n`@G_color_bg_light` | `#f5f5f6` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xf5f5f6) | 不可点输入框的底色，页面中用于区分不同区块时的背景底色，以及斑马条表单的底色\n\n#### 线条色（边框）\n\ncode | 值 | 预览 | 说明\n:-- | :-- | :--: | :--\n`@G_color_line_error` | `#f15533` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xf15533) | 最高级别：报错\n`@G_color_line_warn` | `#f15533` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xf15533) | 最高级别：警告\n`@G_color_line_emphasis` | `#ff8a00` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xff8a00) | 第二级别：突出说明，如「金额」、「最重要链接」等\n`@G_color_line_info` | `#00c1de` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x00c1de) | 第二级别：重要提示、重要连接\n`@G_color_line_positive` | `#35b34a` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x35b34a) | 第三级别：积极和正面引导的文本，如「验证通过」、「已支付」等\n`@G_color_line_dark` | `#373d41` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x373d41) | 重线，强展示，突出可操作的组件的线 / 边框，如按钮\n`@G_color_line_heading` | `#c3c5c6` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xc3c5c6) | 深线，次强展示，可操作的组件的线 / 边框，如「输入框」\n`@G_color_line_regular` | `#d7d8d9` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xd7d8d9) | 常规线，常规展示的组件的线 / 边框，如「卡片」\n`@G_color_line_light` | `#ebecec` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xebecec) | 浅线，弱展示，区分段落或不可操作内容的线 / 边框\n\n### 组件相关\n\ncode | 值 | 说明\n:-- | :-- | :--\n`@G_height_top_bar` | `50px` | 控制台通用顶栏高度（如果有顶栏的话，body 上会有个 `hasTopbar` 的 class，可以用它来判断有没有顶栏）\n`@G_width_app_menu` | `180px` | 应用侧栏菜单的宽度\n`@G_height_app_menu_title` | `50px` | 应用侧栏菜单的标题高度\n`@G_height_app_menu_item` | `40px` | 应用侧栏菜单项的一般高度\n`@G_height_app_menu_item_s` | `32px` | 应用侧栏菜单项的稍小高度（用于实例列表）\n`@G_padding_app_menu` | `20px` | 应用侧栏菜单的左右边距\n`@G_z_index_popover` | `1001` | 布局（顶栏 + 侧栏）的 z-index 是 999，next-menu 的 z-index 偏偏是 1001，所以用 next-menu 的作为 popover 的\n\n## 方法\n\n### `#color` namespace\n\n有些颜色需要组合使用，这里主要封装了颜色组合使用的情形。\n\n> 其中的 `@hoveActive` 设为 `true` 表示需要 `:hover` 和 `:active` 状态。\n\n方法 | 说明\n:-- | :--\n`.error(@hoveActive)` | 错误文本色\n`.error-bg(@hoveActive)` | 错误深色背景（白色文字）\n`.error-bg-light()` | 错误浅色背景 + 错误文本色\n`.warn(@hoveActive)` | 警告文本色\n`.warn-bg(@hoveActive)` | 警告深色背景（白色文字）\n`.warn-bg-light()` | 警告浅色背景 + 警告文本色\n`.info(@hoveActive)` | 提示文本色\n`.info-bg(@hoveActive)` | 提示深色背景（白色文字）\n`.info-bg-light()` | 提示浅色背景 + 提示文本色\n`.success(@hoveActive)` | 成功文本色\n`.success-bg(@hoveActive)` | 成功深色背景（白色文字）\n`.success-bg-light()` | 成功浅色背景 + 成功文本色\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\n.your-selector {\n .error-text {\n #color.error();\n }\n .error-text-with-ha {\n #color.error(true);\n }\n .error-bg {\n #color.error-bg();\n }\n .error-bg-with-ha {\n #color.error-bg(true);\n }\n .error-bg-light {\n #color.error-bg-light(); // 无 :hover :active 设置\n }\n}\n```\n\n### `#glyph` namespace\n\niconfont 工厂方法，默认生成以 `glyph-` 打头的 iconfont 样式。\n\n方法 | 说明\n:-- | :--\n`.base(@fontFamily)` | 设置 glyph 的基础样式（但是 `@fontFamily` 要使用者自己写 `@font-face`），包括几个旋转用的帮助类\n`.type(@type; @code; @prefix: glyph)` | 定义一个字体，默认用 `glyph` 为 `className` 前缀，即传入 `@type` 为 `hello` 的话，`className` 则为 `glyph-hello`\n\n例子：\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\n// 你需要手动引入自己的 font-face\n@font-face {\n font-family: '________'; // 字体名称\n // 这里写相关的 src\n // src: ...;\n}\n\n.your-selector {\n #glyph.base(________); // 对应上方的字体名称\n \n #glyph.type(xx; '\\e600');\n #glyph.type(yy; '\\e601'; 'another-prefix'); // 如果不想用默认的前缀\n // ...\n}\n```\n\n在你的代码中使用形如 `your-selector glyph-xx` 的复合 `className` 即可。\n\n### `#triangle` namespace\n\n八个方向的三角形生成器。\n\n```\n up\n ▲\n ◤ tl - tr ◥\nleft ︎◀ | | ▶ right\n ◣ bl - br ◢\n ︎▼\n down\n```\n\n方法 | 说明\n:-- | :--\n`.base()` | 三角形基础，一般不允许在三角形中添加内容，所以它的宽高都是 0\n`.up(@b; @h; @c)` | 向上 ▲\n`.down(@b; @h; @c)` | 向下 ▼\n`.right(@b; @h; @c)` | 向右 ▶\n`.left(@b; @h; @c)` | 向左 ◀\n`.tl(@b; @h; @c)` | 左上角 ◤\n`.tr(@b; @h; @c)` | 右上角 ◥\n`.bl(@b; @h; @c)` | 左下角 ◣\n`.br(@b; @h; @c)` | 右下角 ◢\n\n例子：\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\n.your-selector {\n #triangle.base();\n #triangle.top(30px; 20px; #f00);\n}\n```\n\n### `#responsive` namespace\n\n简单的响应式封装方法。\n\n方法 | 说明\n:-- | :--\n`.retina(@rules)` | 适配视网膜屏\n`.above(@min; @rules)` | 在某个宽度之上（包含这个宽度）\n`.below(@max; @rules)` | 在某个宽度之下（包含这个宽度）\n`.between(@min; @max; @rules)` | 在某个宽度范围之内（包含边界）\n\n例子：\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\n.your-selector {\n #responsive.retina { // retina 屏幕\n // ...\n }\n #responsive.above(1024px; { // 超过 1024px 宽度\n // ...\n });\n #responsive.between(800px; 1023px; { // 在 [800px, 1023px] 宽度之间\n // ...\n });\n #responsive.below(799px; { // 小于 799px 宽度\n // ...\n });\n}\n```\n\n### `#typo` namespace\n\n文字和排版。\n\n方法 | 说明\n:-- | :--\n`.link(@level: 0)` | 链接，`@level=0` 表示一般的重要连接（一般为蓝色），`@level=1` 表示最重要的连接（一般为橙色），`@level=-1` 表示不重要的链接（一般为深灰色）\n`.ellipsis()` | 文字截断\n\n例子：\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\n.your-selector {\n .some-text {\n #typo.ellipsis();\n }\n a.very-important {\n #typo.link(1);\n }\n}\n```\n\n### `#util` namespace\n\n杂项工具。\n\n方法 | 说明\n:-- | :--\n`.clearfix()` | 修复因内部元素 `float` 造成的容器无高度的问题\n\n例子：\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\nul.your-selector {\n #util.clearfix();\n \n li {\n float: left;\n // ...\n }\n}\n```\n","_id":"@alicloud/xconsole-less@2.0.0-alpha.1","dist":{"shasum":"f82d374c630d63a013a333ed9f6ea1b6dbc767b3","integrity":"sha512-iF1oz7JKiba81Qj5ovjfsFlXu3Hh9jKor1SbUvB8ESJoxtU1HbOT8Eno2azyXfMlRPB4LHzqXl2zrBur3LlZCQ==","tarball":"https://registry.npmjs.org/@alicloud/xconsole-less/-/xconsole-less-2.0.0-alpha.1.tgz","fileCount":23,"unpackedSize":31783,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKSTQCRA9TVsSAnZWagAA+awP/0yoB/RTc1AU2ABI9cPk\ngDaRSTph+ErDtbqOM6fCOhoUBhopi/+2MZz6NBSluMfLOl1ezqfPdEoMVP4o\no+fRTeVggXB58/stVc7ZD7UzxZn2sfgf9IB0/38B9aCPe/loCdSxmoakFP8L\nF0GCUQkhjA92h+ycx78n2ZRyjcHxoHL3wm2F6IhjWtnGFgeL2cPelOTZolzC\nzFDN3MhnGuvHpHLplScnvTKtfhn+04bu+zWCe/m6PILlhXJP7sH85tUOvGwb\nE1x4jxvTwCKetjctnelCnDA5He97cLNSS5Hfdz3CyaNvB3ov6lX2hCzuzJv5\nZ97OOVjjDMQH6z/jBU9NJFgnn5zAVnnUZoEC2CzIH4v7yC3KgbLtL0qpeIF+\nNbpFYJtjXQaPQpJd2JJKaoBeCVVb/jo3pjFHA9TXzGzQxilo8QYgOAhhXtIC\n1oUkm5TtmDA8PY2Wajw02t05uPmziZfLRzPNUbIjKq+ffOoMkguiRalPExaS\nOfZRcW/xg5VE01xAcHj7pfRCSQP7Vv7tKqJ7V3OIGrFS3Ci/3McVVUwUro4o\nhMWTiRwlhJ0zCX9LAfNSiGStzATUeHMBHdI1ChGvZ/ZktogN5xD6WRD+PJKO\n13LIbfK8GM4lJwcfsvBTkbpp3ZWPGCpJvEiW3oczaETyZ3j8HLS2SeHBmksp\nBIgW\r\n=qi3i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtILZOZt0WyVRrcMDd/UsJeh/8bi4a+r11gDCWxSeQPAIgG16k641c8+u+KMD/K8cqyJ6Mj6tR/mKmreEwo8ls0RE="}]},"maintainers":[{"name":"aliyunsdkteam","email":"sdk-team@alibabacloud.com"},{"name":"console-fe","email":"console-fe@alibabacloud.com"},{"name":"fengmk2","email":"fengmk2@gmail.com"},{"name":"jacksontian","email":"shyvo1987@gmail.com"},{"name":"pagecao","email":"cpj1106@gmail.com"}],"_npmUser":{"name":"console-fe","email":"console-fe@alibabacloud.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/xconsole-less_2.0.0-alpha.1_1596531920322_0.8467764411326621"},"_hasShrinkwrap":false},"2.0.0-alpha.2":{"name":"@alicloud/xconsole-less","version":"2.0.0-alpha.2","description":"阿里云控制台通用 LESS 常量及方法","main":"index.less","license":"MIT","homepage":"https://github.com/aliyun/alibabacloud-console-design","repository":{"type":"git","url":"https://github.com/aliyun/alibabacloud-console-design.git"},"bugs":{"url":"https://github.com/aliyun/alibabacloud-console-design/issues"},"author":{},"peerDependencies":{"less":"^3.x","prop-types":"^15.x","react":"^16.x","react-dom":"^16.x"},"devDependencies":{"classnames":"^2.2.6","less":"^3.9.0","prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6"},"scripts":{"start":"abc dev"},"readmeFilename":"README.md","readme":"ABOUT\n=====\n\n> 阿里云控制台通用 LESS 常量及方法\n\n参考规范 \n\n# HOW TO USE\n\n安装：\n\n```\ntnpm install @ali/wind-less-mixin --save\n```\n\n在 LESS 文件中引入和使用：\n\n```less\n@import '~@ali/wind-less-mixin'; // 如果 webpack 报找不到，可以尝试加上 `/index`\n\n// 使用值（只有以 @G_ 打头的是允许使用的）\n.selector {\n color: @G_color_text_emphasis;\n}\n// 使用 mixin 方法\n.some-error {\n #color.error(true); // 只能通过 namespace 来引用\n}\n```\n\n# 代码规范说明\n\nmixin 包含两部分，值和方法。\n\n## 变量\n\n全局可用的[变量](http://lesscss.org/features/#variables-feature)（其实叫「常量」可能更为妥当）。\n\n由 `src/_var.less` 聚合位于 `src/var/` 目录下的文件，一个文件定义一组相关的变量，如 `color.less` 定义颜色，`size.less` 定义宽高大小。\n\n命名规范：\n\n* 公有变量以 `@G_` 打头，其余单词全小写，单词间以下划线 `_` 链接\n* 私有变量以 `@_` 打头，其余跟公有的一样\n\n关于「私有」：\n\nless 没有「私有」的概念，所以事实上可以引用所有的变量，以 `@_` 只是表明「你不要用，我不保证它不会变」。\n\n## 方法\n\n全局可用的 [无输出 mixin 方法](http://lesscss.org/features/#mixins-feature-not-outputting-the-mixin)。\n\n由 `src/_fn.less` 聚合位于 `src/fn/` 目录下的文件，一个文件定义一个 [namespace](http://lesscss.org/features/#mixins-feature-namespaces)，所有\n的方法都包裹在 `namespace` 中。\n\n命名规范：\n\n* `namespace` 全小写，单词之间用中划线 `-` 链接（尽可能只用一个单词）\n* 方法名跟 `namespace` 的命名方式一样\n* 方法参数遵循变量的命名规范\n* 方法参数之间以 `;` 分隔\n\n关于「私有」：\n\n跟变量一样，没有私有，但以 `_` 打头的方法，切记不要随便引用。\n\n# API\n\n> 由于维护的疏漏，这里有可能跟代码不同步，请查看源码\n\n## 变量\n\n### color\n\n#### 文字颜色\n\ncode | 值 | 预览 | 说明\n:-- | :-- | :--: | :--\n`@G_color_text_error` | `#f15533` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xf15533) |最高级别：报错\n`@G_color_text_warn` | `#f15533` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xf15533) | 最高级别：警告\n`@G_color_text_emphasis` | `#ff8a00` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xff8a00) | 第二级别：突出说明，如「金额」、「最重要链接」等\n`@G_color_text_info` | `#00c1de` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x00c1de) | 第二级别：重要提示、重要连接\n`@G_color_text_positive` | `#35b34a` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x35b34a) | 第三级别：积极和正面引导的文本，如「验证通过」、「已支付」等\n`@G_color_text_heading` | `#373d41` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x373d41) | 第四级别：标题\n`@G_color_text_body` | `#73777a` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x73777a) | 第五级别：正文\n`@G_color_text_help` | `#9b9ea0` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x9b9ea0) | 第六级别：最不重要的信息、最低级别的帮助信息\n`@G_color_text_hint` | `#c3c5c6` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xc3c5c6) | 第七级别：水印、输入框中的提示文字\n`@G_color_link` | `#00c1de` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x00c1de) | 第二级别：重要链接\n`@G_color_link_gray` | `#73777a` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x73777a) | 第三级别：次重要链接、列表型链接，如「公告」\n\n#### 背景色（浅色）\n\ncode | 值 | 预览 | 说明\n:-- | :-- | :--: | :--\n`@G_color_bg_error` | `#feeeeb` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xfeeeeb) | 最高级别：错误提示的底色\n`@G_color_bg_warn` | `#feeeeb` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xfeeeeb) | 最高级别：警告提示的底色\n`@G_color_bg_emphasis` | `#fff3e6` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xfff3e6) | 第二级别：突出说明的底色\n`@G_color_bg_info` | `#e6f9fc` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xe6f9fc) | 第二级别：重要说明的底色\n`@G_color_bg_positive` | `#ebf7ed` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xebf7ed) | 第三级别：积极和正面引导的文本，如「验证通过」、「已支付」等\n`@G_color_bg_dark` | `#d7d8d9` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xd7d8d9) | 强调需要严格强调模块之间差异的场景\n`@G_color_bg_heading` | `#ebecec` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xebecec) | 不可点按钮的底色，模块间的区分或模块中信息的层次区分，如「表头」、「卡片标题区」等\n`@G_color_bg_light` | `#f5f5f6` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xf5f5f6) | 不可点输入框的底色，页面中用于区分不同区块时的背景底色，以及斑马条表单的底色\n\n#### 线条色（边框）\n\ncode | 值 | 预览 | 说明\n:-- | :-- | :--: | :--\n`@G_color_line_error` | `#f15533` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xf15533) | 最高级别：报错\n`@G_color_line_warn` | `#f15533` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xf15533) | 最高级别：警告\n`@G_color_line_emphasis` | `#ff8a00` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xff8a00) | 第二级别：突出说明，如「金额」、「最重要链接」等\n`@G_color_line_info` | `#00c1de` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x00c1de) | 第二级别：重要提示、重要连接\n`@G_color_line_positive` | `#35b34a` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x35b34a) | 第三级别：积极和正面引导的文本，如「验证通过」、「已支付」等\n`@G_color_line_dark` | `#373d41` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x373d41) | 重线，强展示，突出可操作的组件的线 / 边框，如按钮\n`@G_color_line_heading` | `#c3c5c6` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xc3c5c6) | 深线，次强展示，可操作的组件的线 / 边框，如「输入框」\n`@G_color_line_regular` | `#d7d8d9` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xd7d8d9) | 常规线，常规展示的组件的线 / 边框，如「卡片」\n`@G_color_line_light` | `#ebecec` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xebecec) | 浅线，弱展示，区分段落或不可操作内容的线 / 边框\n\n### 组件相关\n\ncode | 值 | 说明\n:-- | :-- | :--\n`@G_height_top_bar` | `50px` | 控制台通用顶栏高度（如果有顶栏的话，body 上会有个 `hasTopbar` 的 class，可以用它来判断有没有顶栏）\n`@G_width_app_menu` | `180px` | 应用侧栏菜单的宽度\n`@G_height_app_menu_title` | `50px` | 应用侧栏菜单的标题高度\n`@G_height_app_menu_item` | `40px` | 应用侧栏菜单项的一般高度\n`@G_height_app_menu_item_s` | `32px` | 应用侧栏菜单项的稍小高度（用于实例列表）\n`@G_padding_app_menu` | `20px` | 应用侧栏菜单的左右边距\n`@G_z_index_popover` | `1001` | 布局（顶栏 + 侧栏）的 z-index 是 999，next-menu 的 z-index 偏偏是 1001，所以用 next-menu 的作为 popover 的\n\n## 方法\n\n### `#color` namespace\n\n有些颜色需要组合使用，这里主要封装了颜色组合使用的情形。\n\n> 其中的 `@hoveActive` 设为 `true` 表示需要 `:hover` 和 `:active` 状态。\n\n方法 | 说明\n:-- | :--\n`.error(@hoveActive)` | 错误文本色\n`.error-bg(@hoveActive)` | 错误深色背景（白色文字）\n`.error-bg-light()` | 错误浅色背景 + 错误文本色\n`.warn(@hoveActive)` | 警告文本色\n`.warn-bg(@hoveActive)` | 警告深色背景（白色文字）\n`.warn-bg-light()` | 警告浅色背景 + 警告文本色\n`.info(@hoveActive)` | 提示文本色\n`.info-bg(@hoveActive)` | 提示深色背景（白色文字）\n`.info-bg-light()` | 提示浅色背景 + 提示文本色\n`.success(@hoveActive)` | 成功文本色\n`.success-bg(@hoveActive)` | 成功深色背景（白色文字）\n`.success-bg-light()` | 成功浅色背景 + 成功文本色\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\n.your-selector {\n .error-text {\n #color.error();\n }\n .error-text-with-ha {\n #color.error(true);\n }\n .error-bg {\n #color.error-bg();\n }\n .error-bg-with-ha {\n #color.error-bg(true);\n }\n .error-bg-light {\n #color.error-bg-light(); // 无 :hover :active 设置\n }\n}\n```\n\n### `#glyph` namespace\n\niconfont 工厂方法，默认生成以 `glyph-` 打头的 iconfont 样式。\n\n方法 | 说明\n:-- | :--\n`.base(@fontFamily)` | 设置 glyph 的基础样式（但是 `@fontFamily` 要使用者自己写 `@font-face`），包括几个旋转用的帮助类\n`.type(@type; @code; @prefix: glyph)` | 定义一个字体，默认用 `glyph` 为 `className` 前缀，即传入 `@type` 为 `hello` 的话，`className` 则为 `glyph-hello`\n\n例子：\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\n// 你需要手动引入自己的 font-face\n@font-face {\n font-family: '________'; // 字体名称\n // 这里写相关的 src\n // src: ...;\n}\n\n.your-selector {\n #glyph.base(________); // 对应上方的字体名称\n \n #glyph.type(xx; '\\e600');\n #glyph.type(yy; '\\e601'; 'another-prefix'); // 如果不想用默认的前缀\n // ...\n}\n```\n\n在你的代码中使用形如 `your-selector glyph-xx` 的复合 `className` 即可。\n\n### `#triangle` namespace\n\n八个方向的三角形生成器。\n\n```\n up\n ▲\n ◤ tl - tr ◥\nleft ︎◀ | | ▶ right\n ◣ bl - br ◢\n ︎▼\n down\n```\n\n方法 | 说明\n:-- | :--\n`.base()` | 三角形基础，一般不允许在三角形中添加内容，所以它的宽高都是 0\n`.up(@b; @h; @c)` | 向上 ▲\n`.down(@b; @h; @c)` | 向下 ▼\n`.right(@b; @h; @c)` | 向右 ▶\n`.left(@b; @h; @c)` | 向左 ◀\n`.tl(@b; @h; @c)` | 左上角 ◤\n`.tr(@b; @h; @c)` | 右上角 ◥\n`.bl(@b; @h; @c)` | 左下角 ◣\n`.br(@b; @h; @c)` | 右下角 ◢\n\n例子：\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\n.your-selector {\n #triangle.base();\n #triangle.top(30px; 20px; #f00);\n}\n```\n\n### `#responsive` namespace\n\n简单的响应式封装方法。\n\n方法 | 说明\n:-- | :--\n`.retina(@rules)` | 适配视网膜屏\n`.above(@min; @rules)` | 在某个宽度之上（包含这个宽度）\n`.below(@max; @rules)` | 在某个宽度之下（包含这个宽度）\n`.between(@min; @max; @rules)` | 在某个宽度范围之内（包含边界）\n\n例子：\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\n.your-selector {\n #responsive.retina { // retina 屏幕\n // ...\n }\n #responsive.above(1024px; { // 超过 1024px 宽度\n // ...\n });\n #responsive.between(800px; 1023px; { // 在 [800px, 1023px] 宽度之间\n // ...\n });\n #responsive.below(799px; { // 小于 799px 宽度\n // ...\n });\n}\n```\n\n### `#typo` namespace\n\n文字和排版。\n\n方法 | 说明\n:-- | :--\n`.link(@level: 0)` | 链接，`@level=0` 表示一般的重要连接（一般为蓝色），`@level=1` 表示最重要的连接（一般为橙色），`@level=-1` 表示不重要的链接（一般为深灰色）\n`.ellipsis()` | 文字截断\n\n例子：\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\n.your-selector {\n .some-text {\n #typo.ellipsis();\n }\n a.very-important {\n #typo.link(1);\n }\n}\n```\n\n### `#util` namespace\n\n杂项工具。\n\n方法 | 说明\n:-- | :--\n`.clearfix()` | 修复因内部元素 `float` 造成的容器无高度的问题\n\n例子：\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\nul.your-selector {\n #util.clearfix();\n \n li {\n float: left;\n // ...\n }\n}\n```\n","_id":"@alicloud/xconsole-less@2.0.0-alpha.2","dist":{"shasum":"e9ddc907ec06c16a8edcc7d954029759970fb2df","integrity":"sha512-6eCdMQutzTm29SKZD6sD0GE6AzSEAXmk8gf6RzK6nXbBqV0eyQM3GzgXb4TPnCN8nTSIHLNDXc6ol8xTtI8fUg==","tarball":"https://registry.npmjs.org/@alicloud/xconsole-less/-/xconsole-less-2.0.0-alpha.2.tgz","fileCount":23,"unpackedSize":31783,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKSdmCRA9TVsSAnZWagAAe4IQAKPLmr0a6m3TcJnvs8H9\njzA4eLu4nqJ+IuE0PpeNDAdvhcudA92+0/+qrwv7VyfgXXrn5R6IdBEN/e7C\nF8yXTI5lwH7JSG3j6keHH3z/IuYOR6CTaPMt4ersEDBTcRuGQJXvjDzb4B3x\n1Jt+WChzS9HZjQrrnJX+OslSEX8QFgPiK2Lobtf8Obd5B2Wo3JJmubFjznyB\nKp6xVTiIV5WogOZCC0+IgNp6d6cyMFn2obVB9rgPiMc5cezXcmiFSi1E+JRR\nJL77ePbjd4wsXKz6mVP1d/VWCIlvRStWKzWxZu53buwJrjVFU7tx9XMwFRZt\np+bQDO0GFcewhHjCEJzP3rB1FMSwCRcXphjTy+56W7TavB1aW8NR0dEb8PhZ\npZlzDXV+Eks5mQDX6rP/YWHlTzzLMfQsfQJvSMEnjs3dJdEU67E6bV2wvdFX\nPB5peVYHPtLp0Y5koO1T7c29K39N+oHb6tpQ/VPTX5RFv5AIVP7ZryWoVfCJ\n1b3ohxgqRXKBddUrHd0hFfx43R8pMc50I1W3AVyJqhRCxFoxuLnxKlqiHdeP\nUR0/q1mhFpsIQEE10/THB8zmq4+N4PH1pNoSW3YV5a87T1xTdHH36kSRgbIZ\nBZufLKoXMglUw57699WUYhedya2zAk/0+v/3D0DvuzT7ydQNyNmEpP75DJXA\nvM/x\r\n=BK6q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCyRODOv2GcVsQLAkRD2EMeg39GdHZovxNA7ke0TnkNUwIgavmB1vcjpqyoJODsi0xZsdb10RhVAeU2trgthSIiK9k="}]},"maintainers":[{"name":"aliyunsdkteam","email":"sdk-team@alibabacloud.com"},{"name":"console-fe","email":"console-fe@alibabacloud.com"},{"name":"fengmk2","email":"fengmk2@gmail.com"},{"name":"jacksontian","email":"shyvo1987@gmail.com"},{"name":"pagecao","email":"cpj1106@gmail.com"}],"_npmUser":{"name":"console-fe","email":"console-fe@alibabacloud.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/xconsole-less_2.0.0-alpha.2_1596532581993_0.04201665826031764"},"_hasShrinkwrap":false},"2.0.0-alpha.3":{"name":"@alicloud/xconsole-less","version":"2.0.0-alpha.3","description":"阿里云控制台通用 LESS 常量及方法","main":"index.less","license":"MIT","homepage":"https://github.com/aliyun/alibabacloud-console-design","repository":{"type":"git","url":"https://github.com/aliyun/alibabacloud-console-design.git"},"bugs":{"url":"https://github.com/aliyun/alibabacloud-console-design/issues"},"author":{},"peerDependencies":{"less":"^3.x","prop-types":"^15.x","react":"^16.x","react-dom":"^16.x"},"devDependencies":{"classnames":"^2.2.6","less":"^3.9.0","prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6"},"scripts":{"start":"abc dev"},"readmeFilename":"README.md","readme":"ABOUT\n=====\n\n> 阿里云控制台通用 LESS 常量及方法\n\n参考规范 \n\n# HOW TO USE\n\n安装：\n\n```\ntnpm install @ali/wind-less-mixin --save\n```\n\n在 LESS 文件中引入和使用：\n\n```less\n@import '~@ali/wind-less-mixin'; // 如果 webpack 报找不到，可以尝试加上 `/index`\n\n// 使用值（只有以 @G_ 打头的是允许使用的）\n.selector {\n color: @G_color_text_emphasis;\n}\n// 使用 mixin 方法\n.some-error {\n #color.error(true); // 只能通过 namespace 来引用\n}\n```\n\n# 代码规范说明\n\nmixin 包含两部分，值和方法。\n\n## 变量\n\n全局可用的[变量](http://lesscss.org/features/#variables-feature)（其实叫「常量」可能更为妥当）。\n\n由 `src/_var.less` 聚合位于 `src/var/` 目录下的文件，一个文件定义一组相关的变量，如 `color.less` 定义颜色，`size.less` 定义宽高大小。\n\n命名规范：\n\n* 公有变量以 `@G_` 打头，其余单词全小写，单词间以下划线 `_` 链接\n* 私有变量以 `@_` 打头，其余跟公有的一样\n\n关于「私有」：\n\nless 没有「私有」的概念，所以事实上可以引用所有的变量，以 `@_` 只是表明「你不要用，我不保证它不会变」。\n\n## 方法\n\n全局可用的 [无输出 mixin 方法](http://lesscss.org/features/#mixins-feature-not-outputting-the-mixin)。\n\n由 `src/_fn.less` 聚合位于 `src/fn/` 目录下的文件，一个文件定义一个 [namespace](http://lesscss.org/features/#mixins-feature-namespaces)，所有\n的方法都包裹在 `namespace` 中。\n\n命名规范：\n\n* `namespace` 全小写，单词之间用中划线 `-` 链接（尽可能只用一个单词）\n* 方法名跟 `namespace` 的命名方式一样\n* 方法参数遵循变量的命名规范\n* 方法参数之间以 `;` 分隔\n\n关于「私有」：\n\n跟变量一样，没有私有，但以 `_` 打头的方法，切记不要随便引用。\n\n# API\n\n> 由于维护的疏漏，这里有可能跟代码不同步，请查看源码\n\n## 变量\n\n### color\n\n#### 文字颜色\n\ncode | 值 | 预览 | 说明\n:-- | :-- | :--: | :--\n`@G_color_text_error` | `#f15533` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xf15533) |最高级别：报错\n`@G_color_text_warn` | `#f15533` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xf15533) | 最高级别：警告\n`@G_color_text_emphasis` | `#ff8a00` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xff8a00) | 第二级别：突出说明，如「金额」、「最重要链接」等\n`@G_color_text_info` | `#00c1de` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x00c1de) | 第二级别：重要提示、重要连接\n`@G_color_text_positive` | `#35b34a` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x35b34a) | 第三级别：积极和正面引导的文本，如「验证通过」、「已支付」等\n`@G_color_text_heading` | `#373d41` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x373d41) | 第四级别：标题\n`@G_color_text_body` | `#73777a` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x73777a) | 第五级别：正文\n`@G_color_text_help` | `#9b9ea0` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x9b9ea0) | 第六级别：最不重要的信息、最低级别的帮助信息\n`@G_color_text_hint` | `#c3c5c6` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xc3c5c6) | 第七级别：水印、输入框中的提示文字\n`@G_color_link` | `#00c1de` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x00c1de) | 第二级别：重要链接\n`@G_color_link_gray` | `#73777a` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x73777a) | 第三级别：次重要链接、列表型链接，如「公告」\n\n#### 背景色（浅色）\n\ncode | 值 | 预览 | 说明\n:-- | :-- | :--: | :--\n`@G_color_bg_error` | `#feeeeb` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xfeeeeb) | 最高级别：错误提示的底色\n`@G_color_bg_warn` | `#feeeeb` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xfeeeeb) | 最高级别：警告提示的底色\n`@G_color_bg_emphasis` | `#fff3e6` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xfff3e6) | 第二级别：突出说明的底色\n`@G_color_bg_info` | `#e6f9fc` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xe6f9fc) | 第二级别：重要说明的底色\n`@G_color_bg_positive` | `#ebf7ed` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xebf7ed) | 第三级别：积极和正面引导的文本，如「验证通过」、「已支付」等\n`@G_color_bg_dark` | `#d7d8d9` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xd7d8d9) | 强调需要严格强调模块之间差异的场景\n`@G_color_bg_heading` | `#ebecec` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xebecec) | 不可点按钮的底色，模块间的区分或模块中信息的层次区分，如「表头」、「卡片标题区」等\n`@G_color_bg_light` | `#f5f5f6` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xf5f5f6) | 不可点输入框的底色，页面中用于区分不同区块时的背景底色，以及斑马条表单的底色\n\n#### 线条色（边框）\n\ncode | 值 | 预览 | 说明\n:-- | :-- | :--: | :--\n`@G_color_line_error` | `#f15533` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xf15533) | 最高级别：报错\n`@G_color_line_warn` | `#f15533` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xf15533) | 最高级别：警告\n`@G_color_line_emphasis` | `#ff8a00` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xff8a00) | 第二级别：突出说明，如「金额」、「最重要链接」等\n`@G_color_line_info` | `#00c1de` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x00c1de) | 第二级别：重要提示、重要连接\n`@G_color_line_positive` | `#35b34a` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x35b34a) | 第三级别：积极和正面引导的文本，如「验证通过」、「已支付」等\n`@G_color_line_dark` | `#373d41` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x373d41) | 重线，强展示，突出可操作的组件的线 / 边框，如按钮\n`@G_color_line_heading` | `#c3c5c6` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xc3c5c6) | 深线，次强展示，可操作的组件的线 / 边框，如「输入框」\n`@G_color_line_regular` | `#d7d8d9` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xd7d8d9) | 常规线，常规展示的组件的线 / 边框，如「卡片」\n`@G_color_line_light` | `#ebecec` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xebecec) | 浅线，弱展示，区分段落或不可操作内容的线 / 边框\n\n### 组件相关\n\ncode | 值 | 说明\n:-- | :-- | :--\n`@G_height_top_bar` | `50px` | 控制台通用顶栏高度（如果有顶栏的话，body 上会有个 `hasTopbar` 的 class，可以用它来判断有没有顶栏）\n`@G_width_app_menu` | `180px` | 应用侧栏菜单的宽度\n`@G_height_app_menu_title` | `50px` | 应用侧栏菜单的标题高度\n`@G_height_app_menu_item` | `40px` | 应用侧栏菜单项的一般高度\n`@G_height_app_menu_item_s` | `32px` | 应用侧栏菜单项的稍小高度（用于实例列表）\n`@G_padding_app_menu` | `20px` | 应用侧栏菜单的左右边距\n`@G_z_index_popover` | `1001` | 布局（顶栏 + 侧栏）的 z-index 是 999，next-menu 的 z-index 偏偏是 1001，所以用 next-menu 的作为 popover 的\n\n## 方法\n\n### `#color` namespace\n\n有些颜色需要组合使用，这里主要封装了颜色组合使用的情形。\n\n> 其中的 `@hoveActive` 设为 `true` 表示需要 `:hover` 和 `:active` 状态。\n\n方法 | 说明\n:-- | :--\n`.error(@hoveActive)` | 错误文本色\n`.error-bg(@hoveActive)` | 错误深色背景（白色文字）\n`.error-bg-light()` | 错误浅色背景 + 错误文本色\n`.warn(@hoveActive)` | 警告文本色\n`.warn-bg(@hoveActive)` | 警告深色背景（白色文字）\n`.warn-bg-light()` | 警告浅色背景 + 警告文本色\n`.info(@hoveActive)` | 提示文本色\n`.info-bg(@hoveActive)` | 提示深色背景（白色文字）\n`.info-bg-light()` | 提示浅色背景 + 提示文本色\n`.success(@hoveActive)` | 成功文本色\n`.success-bg(@hoveActive)` | 成功深色背景（白色文字）\n`.success-bg-light()` | 成功浅色背景 + 成功文本色\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\n.your-selector {\n .error-text {\n #color.error();\n }\n .error-text-with-ha {\n #color.error(true);\n }\n .error-bg {\n #color.error-bg();\n }\n .error-bg-with-ha {\n #color.error-bg(true);\n }\n .error-bg-light {\n #color.error-bg-light(); // 无 :hover :active 设置\n }\n}\n```\n\n### `#glyph` namespace\n\niconfont 工厂方法，默认生成以 `glyph-` 打头的 iconfont 样式。\n\n方法 | 说明\n:-- | :--\n`.base(@fontFamily)` | 设置 glyph 的基础样式（但是 `@fontFamily` 要使用者自己写 `@font-face`），包括几个旋转用的帮助类\n`.type(@type; @code; @prefix: glyph)` | 定义一个字体，默认用 `glyph` 为 `className` 前缀，即传入 `@type` 为 `hello` 的话，`className` 则为 `glyph-hello`\n\n例子：\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\n// 你需要手动引入自己的 font-face\n@font-face {\n font-family: '________'; // 字体名称\n // 这里写相关的 src\n // src: ...;\n}\n\n.your-selector {\n #glyph.base(________); // 对应上方的字体名称\n \n #glyph.type(xx; '\\e600');\n #glyph.type(yy; '\\e601'; 'another-prefix'); // 如果不想用默认的前缀\n // ...\n}\n```\n\n在你的代码中使用形如 `your-selector glyph-xx` 的复合 `className` 即可。\n\n### `#triangle` namespace\n\n八个方向的三角形生成器。\n\n```\n up\n ▲\n ◤ tl - tr ◥\nleft ︎◀ | | ▶ right\n ◣ bl - br ◢\n ︎▼\n down\n```\n\n方法 | 说明\n:-- | :--\n`.base()` | 三角形基础，一般不允许在三角形中添加内容，所以它的宽高都是 0\n`.up(@b; @h; @c)` | 向上 ▲\n`.down(@b; @h; @c)` | 向下 ▼\n`.right(@b; @h; @c)` | 向右 ▶\n`.left(@b; @h; @c)` | 向左 ◀\n`.tl(@b; @h; @c)` | 左上角 ◤\n`.tr(@b; @h; @c)` | 右上角 ◥\n`.bl(@b; @h; @c)` | 左下角 ◣\n`.br(@b; @h; @c)` | 右下角 ◢\n\n例子：\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\n.your-selector {\n #triangle.base();\n #triangle.top(30px; 20px; #f00);\n}\n```\n\n### `#responsive` namespace\n\n简单的响应式封装方法。\n\n方法 | 说明\n:-- | :--\n`.retina(@rules)` | 适配视网膜屏\n`.above(@min; @rules)` | 在某个宽度之上（包含这个宽度）\n`.below(@max; @rules)` | 在某个宽度之下（包含这个宽度）\n`.between(@min; @max; @rules)` | 在某个宽度范围之内（包含边界）\n\n例子：\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\n.your-selector {\n #responsive.retina { // retina 屏幕\n // ...\n }\n #responsive.above(1024px; { // 超过 1024px 宽度\n // ...\n });\n #responsive.between(800px; 1023px; { // 在 [800px, 1023px] 宽度之间\n // ...\n });\n #responsive.below(799px; { // 小于 799px 宽度\n // ...\n });\n}\n```\n\n### `#typo` namespace\n\n文字和排版。\n\n方法 | 说明\n:-- | :--\n`.link(@level: 0)` | 链接，`@level=0` 表示一般的重要连接（一般为蓝色），`@level=1` 表示最重要的连接（一般为橙色），`@level=-1` 表示不重要的链接（一般为深灰色）\n`.ellipsis()` | 文字截断\n\n例子：\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\n.your-selector {\n .some-text {\n #typo.ellipsis();\n }\n a.very-important {\n #typo.link(1);\n }\n}\n```\n\n### `#util` namespace\n\n杂项工具。\n\n方法 | 说明\n:-- | :--\n`.clearfix()` | 修复因内部元素 `float` 造成的容器无高度的问题\n\n例子：\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\nul.your-selector {\n #util.clearfix();\n \n li {\n float: left;\n // ...\n }\n}\n```\n","_id":"@alicloud/xconsole-less@2.0.0-alpha.3","dist":{"shasum":"5b59637f154f7c5ff201f2e040e70b60d58c44e4","integrity":"sha512-IjAaIcWmNeIrIzBkVPGnC93T42kC+oRSgLZlzpEoWs+Mm14whvodXIUlOCfMEJp8V2YPfCZXw5WQ8ABkKMFxaw==","tarball":"https://registry.npmjs.org/@alicloud/xconsole-less/-/xconsole-less-2.0.0-alpha.3.tgz","fileCount":23,"unpackedSize":31783,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKSqkCRA9TVsSAnZWagAA8t4P/3OeG0Hx3whS0YNF1Rgy\nnRIrJdwyh3/987kAZHPjt3SWPNwYlrLjZng24ixc86b4WOG0OSDF8cC6LZoX\nGft1bvEAAJMkw1q1qklLpyYK8U8uAEP/RIFoh+R0Z2DUBwvNPXQwi4N+FuQq\npjJGum4TkPKcxcuEP3sP6vM4A1H459hVDmjeWotGGgUR6PW30t9/KSZaSTLP\nCAxL+LwctJ32OLOkENDYBnarP9/Co+DbUSBYNeb+9L8ymCpnJFMlwPbEUV+K\nVaHCTm2aZsc+/TYmsZT+6IDG79emHvepb6vr8J5N9Bd4wGXnOhFdSQDfC41h\n8e2nRIk8GOcFO5VIMY95bZxa2hUIM7cdC2UPxgDi/xjT+pEmi46suOBUykTg\n6fEvJzsb+EHB+vS6k80wJ0Psd3Cz5W4K7NXx8TRiJrEYceCzZNIBPUq2eZsA\ngnIZKa3LSGoYIc7sVyV1k3RiJBzRYZSCg4O9nKafn+73PuMaYuvkbEdfUZzp\n7ySkq//g6qp957R52bQEdPI0N0xlJGubatQmrrEWpEgtpapeXpacDnlxSN+m\neprwNaO3k0mF59lAySYx7k9eYb3iCRzZlYuT3mECsJJ764akHN+rgvIN/Y5d\n5FIsgDe/jC7j5Zy3oFsUojUMb2NViDwjT2/BJcKtcpYto/6nYK6GVcHyCj4y\n7Fme\r\n=aUD+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGlqYKH1+5XbD/dSm3g9Jqh2Vl69acGmvlbMfG9dFOsPAiEAu2L8ZGkjBeXSogvv8EUyJ5ha5V/hb3Ms7iAouqaE1XU="}]},"maintainers":[{"name":"aliyunsdkteam","email":"sdk-team@alibabacloud.com"},{"name":"console-fe","email":"console-fe@alibabacloud.com"},{"name":"fengmk2","email":"fengmk2@gmail.com"},{"name":"jacksontian","email":"shyvo1987@gmail.com"},{"name":"pagecao","email":"cpj1106@gmail.com"}],"_npmUser":{"name":"console-fe","email":"console-fe@alibabacloud.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/xconsole-less_2.0.0-alpha.3_1596533411606_0.6186102593484515"},"_hasShrinkwrap":false},"2.0.0-alpha.4":{"name":"@alicloud/xconsole-less","version":"2.0.0-alpha.4","description":"阿里云控制台通用 LESS 常量及方法","main":"index.less","license":"MIT","homepage":"https://github.com/aliyun/alibabacloud-console-design","repository":{"type":"git","url":"https://github.com/aliyun/alibabacloud-console-design.git"},"bugs":{"url":"https://github.com/aliyun/alibabacloud-console-design/issues"},"author":{},"peerDependencies":{"less":"^3.x","prop-types":"^15.x","react":"^16.x","react-dom":"^16.x"},"devDependencies":{"classnames":"^2.2.6","less":"^3.9.0","prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6"},"scripts":{"start":"abc dev"},"readmeFilename":"README.md","readme":"ABOUT\n=====\n\n> 阿里云控制台通用 LESS 常量及方法\n\n参考规范 \n\n# HOW TO USE\n\n安装：\n\n```\ntnpm install @ali/wind-less-mixin --save\n```\n\n在 LESS 文件中引入和使用：\n\n```less\n@import '~@ali/wind-less-mixin'; // 如果 webpack 报找不到，可以尝试加上 `/index`\n\n// 使用值（只有以 @G_ 打头的是允许使用的）\n.selector {\n color: @G_color_text_emphasis;\n}\n// 使用 mixin 方法\n.some-error {\n #color.error(true); // 只能通过 namespace 来引用\n}\n```\n\n# 代码规范说明\n\nmixin 包含两部分，值和方法。\n\n## 变量\n\n全局可用的[变量](http://lesscss.org/features/#variables-feature)（其实叫「常量」可能更为妥当）。\n\n由 `src/_var.less` 聚合位于 `src/var/` 目录下的文件，一个文件定义一组相关的变量，如 `color.less` 定义颜色，`size.less` 定义宽高大小。\n\n命名规范：\n\n* 公有变量以 `@G_` 打头，其余单词全小写，单词间以下划线 `_` 链接\n* 私有变量以 `@_` 打头，其余跟公有的一样\n\n关于「私有」：\n\nless 没有「私有」的概念，所以事实上可以引用所有的变量，以 `@_` 只是表明「你不要用，我不保证它不会变」。\n\n## 方法\n\n全局可用的 [无输出 mixin 方法](http://lesscss.org/features/#mixins-feature-not-outputting-the-mixin)。\n\n由 `src/_fn.less` 聚合位于 `src/fn/` 目录下的文件，一个文件定义一个 [namespace](http://lesscss.org/features/#mixins-feature-namespaces)，所有\n的方法都包裹在 `namespace` 中。\n\n命名规范：\n\n* `namespace` 全小写，单词之间用中划线 `-` 链接（尽可能只用一个单词）\n* 方法名跟 `namespace` 的命名方式一样\n* 方法参数遵循变量的命名规范\n* 方法参数之间以 `;` 分隔\n\n关于「私有」：\n\n跟变量一样，没有私有，但以 `_` 打头的方法，切记不要随便引用。\n\n# API\n\n> 由于维护的疏漏，这里有可能跟代码不同步，请查看源码\n\n## 变量\n\n### color\n\n#### 文字颜色\n\ncode | 值 | 预览 | 说明\n:-- | :-- | :--: | :--\n`@G_color_text_error` | `#f15533` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xf15533) |最高级别：报错\n`@G_color_text_warn` | `#f15533` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xf15533) | 最高级别：警告\n`@G_color_text_emphasis` | `#ff8a00` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xff8a00) | 第二级别：突出说明，如「金额」、「最重要链接」等\n`@G_color_text_info` | `#00c1de` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x00c1de) | 第二级别：重要提示、重要连接\n`@G_color_text_positive` | `#35b34a` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x35b34a) | 第三级别：积极和正面引导的文本，如「验证通过」、「已支付」等\n`@G_color_text_heading` | `#373d41` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x373d41) | 第四级别：标题\n`@G_color_text_body` | `#73777a` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x73777a) | 第五级别：正文\n`@G_color_text_help` | `#9b9ea0` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x9b9ea0) | 第六级别：最不重要的信息、最低级别的帮助信息\n`@G_color_text_hint` | `#c3c5c6` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xc3c5c6) | 第七级别：水印、输入框中的提示文字\n`@G_color_link` | `#00c1de` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x00c1de) | 第二级别：重要链接\n`@G_color_link_gray` | `#73777a` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x73777a) | 第三级别：次重要链接、列表型链接，如「公告」\n\n#### 背景色（浅色）\n\ncode | 值 | 预览 | 说明\n:-- | :-- | :--: | :--\n`@G_color_bg_error` | `#feeeeb` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xfeeeeb) | 最高级别：错误提示的底色\n`@G_color_bg_warn` | `#feeeeb` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xfeeeeb) | 最高级别：警告提示的底色\n`@G_color_bg_emphasis` | `#fff3e6` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xfff3e6) | 第二级别：突出说明的底色\n`@G_color_bg_info` | `#e6f9fc` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xe6f9fc) | 第二级别：重要说明的底色\n`@G_color_bg_positive` | `#ebf7ed` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xebf7ed) | 第三级别：积极和正面引导的文本，如「验证通过」、「已支付」等\n`@G_color_bg_dark` | `#d7d8d9` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xd7d8d9) | 强调需要严格强调模块之间差异的场景\n`@G_color_bg_heading` | `#ebecec` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xebecec) | 不可点按钮的底色，模块间的区分或模块中信息的层次区分，如「表头」、「卡片标题区」等\n`@G_color_bg_light` | `#f5f5f6` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xf5f5f6) | 不可点输入框的底色，页面中用于区分不同区块时的背景底色，以及斑马条表单的底色\n\n#### 线条色（边框）\n\ncode | 值 | 预览 | 说明\n:-- | :-- | :--: | :--\n`@G_color_line_error` | `#f15533` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xf15533) | 最高级别：报错\n`@G_color_line_warn` | `#f15533` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xf15533) | 最高级别：警告\n`@G_color_line_emphasis` | `#ff8a00` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xff8a00) | 第二级别：突出说明，如「金额」、「最重要链接」等\n`@G_color_line_info` | `#00c1de` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x00c1de) | 第二级别：重要提示、重要连接\n`@G_color_line_positive` | `#35b34a` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x35b34a) | 第三级别：积极和正面引导的文本，如「验证通过」、「已支付」等\n`@G_color_line_dark` | `#373d41` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x373d41) | 重线，强展示，突出可操作的组件的线 / 边框，如按钮\n`@G_color_line_heading` | `#c3c5c6` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xc3c5c6) | 深线，次强展示，可操作的组件的线 / 边框，如「输入框」\n`@G_color_line_regular` | `#d7d8d9` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xd7d8d9) | 常规线，常规展示的组件的线 / 边框，如「卡片」\n`@G_color_line_light` | `#ebecec` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xebecec) | 浅线，弱展示，区分段落或不可操作内容的线 / 边框\n\n### 组件相关\n\ncode | 值 | 说明\n:-- | :-- | :--\n`@G_height_top_bar` | `50px` | 控制台通用顶栏高度（如果有顶栏的话，body 上会有个 `hasTopbar` 的 class，可以用它来判断有没有顶栏）\n`@G_width_app_menu` | `180px` | 应用侧栏菜单的宽度\n`@G_height_app_menu_title` | `50px` | 应用侧栏菜单的标题高度\n`@G_height_app_menu_item` | `40px` | 应用侧栏菜单项的一般高度\n`@G_height_app_menu_item_s` | `32px` | 应用侧栏菜单项的稍小高度（用于实例列表）\n`@G_padding_app_menu` | `20px` | 应用侧栏菜单的左右边距\n`@G_z_index_popover` | `1001` | 布局（顶栏 + 侧栏）的 z-index 是 999，next-menu 的 z-index 偏偏是 1001，所以用 next-menu 的作为 popover 的\n\n## 方法\n\n### `#color` namespace\n\n有些颜色需要组合使用，这里主要封装了颜色组合使用的情形。\n\n> 其中的 `@hoveActive` 设为 `true` 表示需要 `:hover` 和 `:active` 状态。\n\n方法 | 说明\n:-- | :--\n`.error(@hoveActive)` | 错误文本色\n`.error-bg(@hoveActive)` | 错误深色背景（白色文字）\n`.error-bg-light()` | 错误浅色背景 + 错误文本色\n`.warn(@hoveActive)` | 警告文本色\n`.warn-bg(@hoveActive)` | 警告深色背景（白色文字）\n`.warn-bg-light()` | 警告浅色背景 + 警告文本色\n`.info(@hoveActive)` | 提示文本色\n`.info-bg(@hoveActive)` | 提示深色背景（白色文字）\n`.info-bg-light()` | 提示浅色背景 + 提示文本色\n`.success(@hoveActive)` | 成功文本色\n`.success-bg(@hoveActive)` | 成功深色背景（白色文字）\n`.success-bg-light()` | 成功浅色背景 + 成功文本色\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\n.your-selector {\n .error-text {\n #color.error();\n }\n .error-text-with-ha {\n #color.error(true);\n }\n .error-bg {\n #color.error-bg();\n }\n .error-bg-with-ha {\n #color.error-bg(true);\n }\n .error-bg-light {\n #color.error-bg-light(); // 无 :hover :active 设置\n }\n}\n```\n\n### `#glyph` namespace\n\niconfont 工厂方法，默认生成以 `glyph-` 打头的 iconfont 样式。\n\n方法 | 说明\n:-- | :--\n`.base(@fontFamily)` | 设置 glyph 的基础样式（但是 `@fontFamily` 要使用者自己写 `@font-face`），包括几个旋转用的帮助类\n`.type(@type; @code; @prefix: glyph)` | 定义一个字体，默认用 `glyph` 为 `className` 前缀，即传入 `@type` 为 `hello` 的话，`className` 则为 `glyph-hello`\n\n例子：\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\n// 你需要手动引入自己的 font-face\n@font-face {\n font-family: '________'; // 字体名称\n // 这里写相关的 src\n // src: ...;\n}\n\n.your-selector {\n #glyph.base(________); // 对应上方的字体名称\n \n #glyph.type(xx; '\\e600');\n #glyph.type(yy; '\\e601'; 'another-prefix'); // 如果不想用默认的前缀\n // ...\n}\n```\n\n在你的代码中使用形如 `your-selector glyph-xx` 的复合 `className` 即可。\n\n### `#triangle` namespace\n\n八个方向的三角形生成器。\n\n```\n up\n ▲\n ◤ tl - tr ◥\nleft ︎◀ | | ▶ right\n ◣ bl - br ◢\n ︎▼\n down\n```\n\n方法 | 说明\n:-- | :--\n`.base()` | 三角形基础，一般不允许在三角形中添加内容，所以它的宽高都是 0\n`.up(@b; @h; @c)` | 向上 ▲\n`.down(@b; @h; @c)` | 向下 ▼\n`.right(@b; @h; @c)` | 向右 ▶\n`.left(@b; @h; @c)` | 向左 ◀\n`.tl(@b; @h; @c)` | 左上角 ◤\n`.tr(@b; @h; @c)` | 右上角 ◥\n`.bl(@b; @h; @c)` | 左下角 ◣\n`.br(@b; @h; @c)` | 右下角 ◢\n\n例子：\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\n.your-selector {\n #triangle.base();\n #triangle.top(30px; 20px; #f00);\n}\n```\n\n### `#responsive` namespace\n\n简单的响应式封装方法。\n\n方法 | 说明\n:-- | :--\n`.retina(@rules)` | 适配视网膜屏\n`.above(@min; @rules)` | 在某个宽度之上（包含这个宽度）\n`.below(@max; @rules)` | 在某个宽度之下（包含这个宽度）\n`.between(@min; @max; @rules)` | 在某个宽度范围之内（包含边界）\n\n例子：\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\n.your-selector {\n #responsive.retina { // retina 屏幕\n // ...\n }\n #responsive.above(1024px; { // 超过 1024px 宽度\n // ...\n });\n #responsive.between(800px; 1023px; { // 在 [800px, 1023px] 宽度之间\n // ...\n });\n #responsive.below(799px; { // 小于 799px 宽度\n // ...\n });\n}\n```\n\n### `#typo` namespace\n\n文字和排版。\n\n方法 | 说明\n:-- | :--\n`.link(@level: 0)` | 链接，`@level=0` 表示一般的重要连接（一般为蓝色），`@level=1` 表示最重要的连接（一般为橙色），`@level=-1` 表示不重要的链接（一般为深灰色）\n`.ellipsis()` | 文字截断\n\n例子：\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\n.your-selector {\n .some-text {\n #typo.ellipsis();\n }\n a.very-important {\n #typo.link(1);\n }\n}\n```\n\n### `#util` namespace\n\n杂项工具。\n\n方法 | 说明\n:-- | :--\n`.clearfix()` | 修复因内部元素 `float` 造成的容器无高度的问题\n\n例子：\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\nul.your-selector {\n #util.clearfix();\n \n li {\n float: left;\n // ...\n }\n}\n```\n","_id":"@alicloud/xconsole-less@2.0.0-alpha.4","dist":{"shasum":"754e1415280b889503df9e50b20a5068e77fa663","integrity":"sha512-i73mBRGkuRsNdyudI2usNP9CIvxMzrrwLSujE/978pIMTCHneVBcObkx2Qej4NSBVfEPfGcw+gqtUI8vTVivrA==","tarball":"https://registry.npmjs.org/@alicloud/xconsole-less/-/xconsole-less-2.0.0-alpha.4.tgz","fileCount":23,"unpackedSize":31783,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKiJTCRA9TVsSAnZWagAAuvIP/R7zJnDBcyXZS6ow6537\nKlfEFTv/yH1Bd+eQ2UIIyhB+C4NDHMsvmds77r209wGoXmCWsg/apsy9lABS\nxlIBQAD1xGdAvl34osFLGzqtif284Xfu+107iQ1oYLyxj50C213FxFWOmsXI\nrrZwsOkYvKd+ylyutdG4wZeGFVyRr86kiLCnJ5a75iq5OdPO3L9M5Lb1vi3e\nan9+uIEN6oR4gdEKsJ90bXkOldlstin9JLR3bow7swZ5a7Rl9/+wfeLcxq8M\n5EZaXvmxd50wwcuDWDgo6VlwY1o/mlua6qTObkiqlSFvsFXQ0ZJ5mq8NuzId\nNoa6kuJJQd9+y/gbfgPagb7fW9qgW8MXy1HPuUOwTKGuAmU2Uy6qXD5k2lvK\nQBem+RxFvdZNfvZ29SnEs/Ymr0R1JC3/8nuA9UEyw5AeO+ftq5C37QSybZ5+\nm6YItJLJT4yxsfqjOS6YQjY+K5Etb6YD2EQxgYO9diXE1CBpP7vkisDW9Jdb\nlKW1VPrjNpcXddQ8WYEUfny8r3qpTonkdLZ6gS0KcVB/LclGM3K/bCEsm4Qy\nLJIIbPeEt9gTENIOdC453RWHEixq6bMvMKN9wpVwAU/n6rz+FfDkDNe6/EvN\ncr0Dag0S9LtObNrzZ03SRGk6VuSwj59IfNA9+GQLbgJIsef1soTIT44soLxZ\nadVw\r\n=AOuA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEgnSlPsb9CKnAGTUFjzLn/qJheB/xrTraRM62y1JMohAiAP680T7bYCqT21TJpdTRfmhtjnui/yPwSBE4h82i67bA=="}]},"maintainers":[{"name":"aliyunsdkteam","email":"sdk-team@alibabacloud.com"},{"name":"console-fe","email":"console-fe@alibabacloud.com"},{"name":"fengmk2","email":"fengmk2@gmail.com"},{"name":"jacksontian","email":"shyvo1987@gmail.com"},{"name":"pagecao","email":"cpj1106@gmail.com"}],"_npmUser":{"name":"console-fe","email":"console-fe@alibabacloud.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/xconsole-less_2.0.0-alpha.4_1596596819058_0.322702738936657"},"_hasShrinkwrap":false},"2.0.0-alpha.5":{"name":"@alicloud/xconsole-less","version":"2.0.0-alpha.5","description":"阿里云控制台通用 LESS 常量及方法","main":"index.less","license":"MIT","homepage":"https://github.com/aliyun/alibabacloud-console-design","repository":{"type":"git","url":"https://github.com/aliyun/alibabacloud-console-design.git"},"bugs":{"url":"https://github.com/aliyun/alibabacloud-console-design/issues"},"author":{},"peerDependencies":{"less":"^3.x","prop-types":"^15.x","react":"^16.x","react-dom":"^16.x"},"devDependencies":{"classnames":"^2.2.6","less":"^3.9.0","prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6"},"scripts":{"start":"abc dev"},"readmeFilename":"README.md","readme":"ABOUT\n=====\n\n> 阿里云控制台通用 LESS 常量及方法\n\n参考规范 \n\n# HOW TO USE\n\n安装：\n\n```\ntnpm install @ali/wind-less-mixin --save\n```\n\n在 LESS 文件中引入和使用：\n\n```less\n@import '~@ali/wind-less-mixin'; // 如果 webpack 报找不到，可以尝试加上 `/index`\n\n// 使用值（只有以 @G_ 打头的是允许使用的）\n.selector {\n color: @G_color_text_emphasis;\n}\n// 使用 mixin 方法\n.some-error {\n #color.error(true); // 只能通过 namespace 来引用\n}\n```\n\n# 代码规范说明\n\nmixin 包含两部分，值和方法。\n\n## 变量\n\n全局可用的[变量](http://lesscss.org/features/#variables-feature)（其实叫「常量」可能更为妥当）。\n\n由 `src/_var.less` 聚合位于 `src/var/` 目录下的文件，一个文件定义一组相关的变量，如 `color.less` 定义颜色，`size.less` 定义宽高大小。\n\n命名规范：\n\n* 公有变量以 `@G_` 打头，其余单词全小写，单词间以下划线 `_` 链接\n* 私有变量以 `@_` 打头，其余跟公有的一样\n\n关于「私有」：\n\nless 没有「私有」的概念，所以事实上可以引用所有的变量，以 `@_` 只是表明「你不要用，我不保证它不会变」。\n\n## 方法\n\n全局可用的 [无输出 mixin 方法](http://lesscss.org/features/#mixins-feature-not-outputting-the-mixin)。\n\n由 `src/_fn.less` 聚合位于 `src/fn/` 目录下的文件，一个文件定义一个 [namespace](http://lesscss.org/features/#mixins-feature-namespaces)，所有\n的方法都包裹在 `namespace` 中。\n\n命名规范：\n\n* `namespace` 全小写，单词之间用中划线 `-` 链接（尽可能只用一个单词）\n* 方法名跟 `namespace` 的命名方式一样\n* 方法参数遵循变量的命名规范\n* 方法参数之间以 `;` 分隔\n\n关于「私有」：\n\n跟变量一样，没有私有，但以 `_` 打头的方法，切记不要随便引用。\n\n# API\n\n> 由于维护的疏漏，这里有可能跟代码不同步，请查看源码\n\n## 变量\n\n### color\n\n#### 文字颜色\n\ncode | 值 | 预览 | 说明\n:-- | :-- | :--: | :--\n`@G_color_text_error` | `#f15533` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xf15533) |最高级别：报错\n`@G_color_text_warn` | `#f15533` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xf15533) | 最高级别：警告\n`@G_color_text_emphasis` | `#ff8a00` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xff8a00) | 第二级别：突出说明，如「金额」、「最重要链接」等\n`@G_color_text_info` | `#00c1de` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x00c1de) | 第二级别：重要提示、重要连接\n`@G_color_text_positive` | `#35b34a` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x35b34a) | 第三级别：积极和正面引导的文本，如「验证通过」、「已支付」等\n`@G_color_text_heading` | `#373d41` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x373d41) | 第四级别：标题\n`@G_color_text_body` | `#73777a` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x73777a) | 第五级别：正文\n`@G_color_text_help` | `#9b9ea0` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x9b9ea0) | 第六级别：最不重要的信息、最低级别的帮助信息\n`@G_color_text_hint` | `#c3c5c6` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xc3c5c6) | 第七级别：水印、输入框中的提示文字\n`@G_color_link` | `#00c1de` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x00c1de) | 第二级别：重要链接\n`@G_color_link_gray` | `#73777a` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x73777a) | 第三级别：次重要链接、列表型链接，如「公告」\n\n#### 背景色（浅色）\n\ncode | 值 | 预览 | 说明\n:-- | :-- | :--: | :--\n`@G_color_bg_error` | `#feeeeb` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xfeeeeb) | 最高级别：错误提示的底色\n`@G_color_bg_warn` | `#feeeeb` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xfeeeeb) | 最高级别：警告提示的底色\n`@G_color_bg_emphasis` | `#fff3e6` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xfff3e6) | 第二级别：突出说明的底色\n`@G_color_bg_info` | `#e6f9fc` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xe6f9fc) | 第二级别：重要说明的底色\n`@G_color_bg_positive` | `#ebf7ed` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xebf7ed) | 第三级别：积极和正面引导的文本，如「验证通过」、「已支付」等\n`@G_color_bg_dark` | `#d7d8d9` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xd7d8d9) | 强调需要严格强调模块之间差异的场景\n`@G_color_bg_heading` | `#ebecec` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xebecec) | 不可点按钮的底色，模块间的区分或模块中信息的层次区分，如「表头」、「卡片标题区」等\n`@G_color_bg_light` | `#f5f5f6` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xf5f5f6) | 不可点输入框的底色，页面中用于区分不同区块时的背景底色，以及斑马条表单的底色\n\n#### 线条色（边框）\n\ncode | 值 | 预览 | 说明\n:-- | :-- | :--: | :--\n`@G_color_line_error` | `#f15533` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xf15533) | 最高级别：报错\n`@G_color_line_warn` | `#f15533` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xf15533) | 最高级别：警告\n`@G_color_line_emphasis` | `#ff8a00` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xff8a00) | 第二级别：突出说明，如「金额」、「最重要链接」等\n`@G_color_line_info` | `#00c1de` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x00c1de) | 第二级别：重要提示、重要连接\n`@G_color_line_positive` | `#35b34a` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x35b34a) | 第三级别：积极和正面引导的文本，如「验证通过」、「已支付」等\n`@G_color_line_dark` | `#373d41` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x373d41) | 重线，强展示，突出可操作的组件的线 / 边框，如按钮\n`@G_color_line_heading` | `#c3c5c6` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xc3c5c6) | 深线，次强展示，可操作的组件的线 / 边框，如「输入框」\n`@G_color_line_regular` | `#d7d8d9` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xd7d8d9) | 常规线，常规展示的组件的线 / 边框，如「卡片」\n`@G_color_line_light` | `#ebecec` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xebecec) | 浅线，弱展示，区分段落或不可操作内容的线 / 边框\n\n### 组件相关\n\ncode | 值 | 说明\n:-- | :-- | :--\n`@G_height_top_bar` | `50px` | 控制台通用顶栏高度（如果有顶栏的话，body 上会有个 `hasTopbar` 的 class，可以用它来判断有没有顶栏）\n`@G_width_app_menu` | `180px` | 应用侧栏菜单的宽度\n`@G_height_app_menu_title` | `50px` | 应用侧栏菜单的标题高度\n`@G_height_app_menu_item` | `40px` | 应用侧栏菜单项的一般高度\n`@G_height_app_menu_item_s` | `32px` | 应用侧栏菜单项的稍小高度（用于实例列表）\n`@G_padding_app_menu` | `20px` | 应用侧栏菜单的左右边距\n`@G_z_index_popover` | `1001` | 布局（顶栏 + 侧栏）的 z-index 是 999，next-menu 的 z-index 偏偏是 1001，所以用 next-menu 的作为 popover 的\n\n## 方法\n\n### `#color` namespace\n\n有些颜色需要组合使用，这里主要封装了颜色组合使用的情形。\n\n> 其中的 `@hoveActive` 设为 `true` 表示需要 `:hover` 和 `:active` 状态。\n\n方法 | 说明\n:-- | :--\n`.error(@hoveActive)` | 错误文本色\n`.error-bg(@hoveActive)` | 错误深色背景（白色文字）\n`.error-bg-light()` | 错误浅色背景 + 错误文本色\n`.warn(@hoveActive)` | 警告文本色\n`.warn-bg(@hoveActive)` | 警告深色背景（白色文字）\n`.warn-bg-light()` | 警告浅色背景 + 警告文本色\n`.info(@hoveActive)` | 提示文本色\n`.info-bg(@hoveActive)` | 提示深色背景（白色文字）\n`.info-bg-light()` | 提示浅色背景 + 提示文本色\n`.success(@hoveActive)` | 成功文本色\n`.success-bg(@hoveActive)` | 成功深色背景（白色文字）\n`.success-bg-light()` | 成功浅色背景 + 成功文本色\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\n.your-selector {\n .error-text {\n #color.error();\n }\n .error-text-with-ha {\n #color.error(true);\n }\n .error-bg {\n #color.error-bg();\n }\n .error-bg-with-ha {\n #color.error-bg(true);\n }\n .error-bg-light {\n #color.error-bg-light(); // 无 :hover :active 设置\n }\n}\n```\n\n### `#glyph` namespace\n\niconfont 工厂方法，默认生成以 `glyph-` 打头的 iconfont 样式。\n\n方法 | 说明\n:-- | :--\n`.base(@fontFamily)` | 设置 glyph 的基础样式（但是 `@fontFamily` 要使用者自己写 `@font-face`），包括几个旋转用的帮助类\n`.type(@type; @code; @prefix: glyph)` | 定义一个字体，默认用 `glyph` 为 `className` 前缀，即传入 `@type` 为 `hello` 的话，`className` 则为 `glyph-hello`\n\n例子：\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\n// 你需要手动引入自己的 font-face\n@font-face {\n font-family: '________'; // 字体名称\n // 这里写相关的 src\n // src: ...;\n}\n\n.your-selector {\n #glyph.base(________); // 对应上方的字体名称\n \n #glyph.type(xx; '\\e600');\n #glyph.type(yy; '\\e601'; 'another-prefix'); // 如果不想用默认的前缀\n // ...\n}\n```\n\n在你的代码中使用形如 `your-selector glyph-xx` 的复合 `className` 即可。\n\n### `#triangle` namespace\n\n八个方向的三角形生成器。\n\n```\n up\n ▲\n ◤ tl - tr ◥\nleft ︎◀ | | ▶ right\n ◣ bl - br ◢\n ︎▼\n down\n```\n\n方法 | 说明\n:-- | :--\n`.base()` | 三角形基础，一般不允许在三角形中添加内容，所以它的宽高都是 0\n`.up(@b; @h; @c)` | 向上 ▲\n`.down(@b; @h; @c)` | 向下 ▼\n`.right(@b; @h; @c)` | 向右 ▶\n`.left(@b; @h; @c)` | 向左 ◀\n`.tl(@b; @h; @c)` | 左上角 ◤\n`.tr(@b; @h; @c)` | 右上角 ◥\n`.bl(@b; @h; @c)` | 左下角 ◣\n`.br(@b; @h; @c)` | 右下角 ◢\n\n例子：\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\n.your-selector {\n #triangle.base();\n #triangle.top(30px; 20px; #f00);\n}\n```\n\n### `#responsive` namespace\n\n简单的响应式封装方法。\n\n方法 | 说明\n:-- | :--\n`.retina(@rules)` | 适配视网膜屏\n`.above(@min; @rules)` | 在某个宽度之上（包含这个宽度）\n`.below(@max; @rules)` | 在某个宽度之下（包含这个宽度）\n`.between(@min; @max; @rules)` | 在某个宽度范围之内（包含边界）\n\n例子：\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\n.your-selector {\n #responsive.retina { // retina 屏幕\n // ...\n }\n #responsive.above(1024px; { // 超过 1024px 宽度\n // ...\n });\n #responsive.between(800px; 1023px; { // 在 [800px, 1023px] 宽度之间\n // ...\n });\n #responsive.below(799px; { // 小于 799px 宽度\n // ...\n });\n}\n```\n\n### `#typo` namespace\n\n文字和排版。\n\n方法 | 说明\n:-- | :--\n`.link(@level: 0)` | 链接，`@level=0` 表示一般的重要连接（一般为蓝色），`@level=1` 表示最重要的连接（一般为橙色），`@level=-1` 表示不重要的链接（一般为深灰色）\n`.ellipsis()` | 文字截断\n\n例子：\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\n.your-selector {\n .some-text {\n #typo.ellipsis();\n }\n a.very-important {\n #typo.link(1);\n }\n}\n```\n\n### `#util` namespace\n\n杂项工具。\n\n方法 | 说明\n:-- | :--\n`.clearfix()` | 修复因内部元素 `float` 造成的容器无高度的问题\n\n例子：\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\nul.your-selector {\n #util.clearfix();\n \n li {\n float: left;\n // ...\n }\n}\n```\n","_id":"@alicloud/xconsole-less@2.0.0-alpha.5","dist":{"shasum":"76a916384f322669bc60e6af1f127611942a011a","integrity":"sha512-iNl+w6cxZ5OMYngb9E7ZKYw9/H73irYmELlmFy7+YN275mYN6KL8dCo7/XEburLpUyF+WHHocdDj+54vwfzVsQ==","tarball":"https://registry.npmjs.org/@alicloud/xconsole-less/-/xconsole-less-2.0.0-alpha.5.tgz","fileCount":23,"unpackedSize":31783,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKivOCRA9TVsSAnZWagAAvd8QAKAqC+Vmb9+ilC+zMYpn\n7EgdQuXQ9exFnh2uaCNZuHGilFNnr+kh/49EYIDHN3soithm5zp/jV9u5SyV\nMD3PQXAM8zUp0GIIkjAwBM/Ij0ZRb8CCmNcrT+hG13VxQXCmY5UCHYSOdZLQ\njvWDHFrqq9QcUAe+/BDLp828IjniPel4CKFa3ugfFCAcRXb6xUkXu0QJQ3Wz\nignAPDXP86bCBh/cmZ+ea0n9i+ek5CGj0qj+pWQsuFwwEeJiy7nbsDUL5Rwv\nrAkPUXByw7sQHWbErkaLckxsj3LP/wPbog264u6XN6AWEFZyslIBYOkZX4/1\nLN4jznRDd0bJKjuTz9HCJhgXMsLq1JcXykHqOSi+TyCFOAWSG5X2ZDYUHnqv\nIWgZQ3JODkiR8otU7bkoONJ7GFswirammGtXFGF1WLwcQkSEpjNb1ojnNliX\nt2DO+0c16jT/BJbIIZ+m5CBQlC/Ymp0NVdKrD14gc27wkjEU5J2yIPghu4hL\n2JJCsePsy721X3y1jvajxP1yO7uqCeH1ZzwS7lVr4U6ZMxmU6miUCS7hezpH\noeORwhGkTNUQ4TvLBkI962cSCiTMKe5nzOM9LXOSjM5XSA3QQRmRpP6EfWiW\n+788QSLV6HzjPyYvqo4Ret46439M6cobQVdnTzaqH1//cspZdRsu23SD94l/\nky8L\r\n=7Xrg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBS3H2qbtotgWhfXS2nAhYqmugEeAHnvZTKL4IoXeye5AiEA/3YmBJfX/L4PXs8yMNHPB4AOU2uOMraw4tIql3UcFdI="}]},"maintainers":[{"name":"aliyunsdkteam","email":"sdk-team@alibabacloud.com"},{"name":"console-fe","email":"console-fe@alibabacloud.com"},{"name":"fengmk2","email":"fengmk2@gmail.com"},{"name":"jacksontian","email":"shyvo1987@gmail.com"},{"name":"pagecao","email":"cpj1106@gmail.com"}],"_npmUser":{"name":"console-fe","email":"console-fe@alibabacloud.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/xconsole-less_2.0.0-alpha.5_1596599246315_0.9895487382298711"},"_hasShrinkwrap":false},"2.0.0-y.0":{"name":"@alicloud/xconsole-less","version":"2.0.0-y.0","description":"阿里云控制台通用 LESS 常量及方法","main":"index.less","license":"MIT","homepage":"https://github.com/aliyun/alibabacloud-console-design","repository":{"type":"git","url":"https://github.com/aliyun/alibabacloud-console-design.git"},"bugs":{"url":"https://github.com/aliyun/alibabacloud-console-design/issues"},"author":{},"peerDependencies":{"less":"^3.x","prop-types":"^15.x","react":"^16.x","react-dom":"^16.x"},"devDependencies":{"classnames":"^2.2.6","less":"^3.9.0","prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6"},"scripts":{"start":"abc dev"},"_id":"@alicloud/xconsole-less@2.0.0-y.0","dist":{"shasum":"9d05ea712a072d46af0ff02878859b482a2522c5","integrity":"sha512-j36dMB87OOvR1CtDmXFjfx8JcE2En7fZl40vbTmUNb50O81WPH9IXpLtQsNzKNo0ILC2BzaEtW19nMcAOw+NGA==","tarball":"https://registry.npmjs.org/@alicloud/xconsole-less/-/xconsole-less-2.0.0-y.0.tgz","fileCount":23,"unpackedSize":31779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMohDCRA9TVsSAnZWagAATdUQAKAoZ3k3q80456ahKSCr\nzIlAVSwVEXJtdX6AYn5SpXLtIzQD27Fn8PT5lu33j0Eafr3yruXmlX0jddUl\nijWt7S2JWvwT47VLu7m3/xS3m+TyHs9wec+n5SV+QKuVMey/rUvhVCCLeuMF\neB5YbTnZncpAs8sNlDs0SwAN4zgVm+BrIzmdkpJrjd5IjVzUntU3LBb4eiEG\nwmRtPmNkIOx6jwePV7qC+Uuo979iP+77h/qID/D7rVdH6Sn6rMZB8/2cKLRS\nldGDjZkghaj69sWYUuPbafiwi6uFgDMF/0XBGCoHBiiEOxxal5lvVvqSvex3\nWDhGqxSSPDE3CxO0OP7b+e97NnlQdSS4JzTTH5UTTc32yDImACER5HQuG6ss\nWGNNzRG6NFPTq7kyCj5npOAWv+Fu66QGEp1uWOSIazBpqHlQs6Wr60KWRzzR\nvgNuOe5Sx0iLqcTbiUO0WREE2FhfT9hNau7xvMPm8SKW/ntiv/qpMkedG4cE\nHZItFvFcocI3QB/7szOpOfI+LzVXKihxDbJbwXsb18TFG96+yosySDuF7RHq\nscakeMX6E92sEFZ6ohreTHj28oI/2nvcsnXecYrsFz+dznJStM+XJ7V5wxfh\nLbmctoxm1xOmnDZYCEhvhgdOw7cGwfkmhKaAsgl8EfAU8VYys4jQhillWAAE\n1lqR\r\n=uFwo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHjUOEl7agSylR2Df5evKPeDmnOCU0tRjB0lL8gTnJm9AiAE4q7Cs3x86GPHjad5DS9ud4x0WKCROOz/udVP7ZUzDA=="}]},"maintainers":[{"name":"aliyunsdkteam","email":"sdk-team@alibabacloud.com"},{"name":"console-fe","email":"console-fe@alibabacloud.com"},{"name":"fengmk2","email":"fengmk2@gmail.com"},{"name":"jacksontian","email":"shyvo1987@gmail.com"},{"name":"pagecao","email":"cpj1106@gmail.com"}],"_npmUser":{"name":"console-fe","email":"console-fe@alibabacloud.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/xconsole-less_2.0.0-y.0_1597147202331_0.4522018301573463"},"_hasShrinkwrap":false},"2.0.0-alpha.6":{"name":"@alicloud/xconsole-less","version":"2.0.0-alpha.6","description":"阿里云控制台通用 LESS 常量及方法","main":"index.less","license":"MIT","homepage":"https://github.com/aliyun/alibabacloud-console-design","repository":{"type":"git","url":"https://github.com/aliyun/alibabacloud-console-design.git"},"bugs":{"url":"https://github.com/aliyun/alibabacloud-console-design/issues"},"author":{},"peerDependencies":{"less":"^3.x","prop-types":"^15.x","react":"^16.x","react-dom":"^16.x"},"devDependencies":{"classnames":"^2.2.6","less":"^3.9.0","prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6"},"scripts":{"start":"abc dev"},"_id":"@alicloud/xconsole-less@2.0.0-alpha.6","dist":{"shasum":"4679248e22da0d5d19b6ee70dcfd58503f9c255f","integrity":"sha512-DLe7KOqaPOVmQaoOFp3wTBHh2k/6bhUbIHpHKQLJRcK8PPkDlucT3GfWLTk/WcWb0TTMD34kmkxxj10xYHNjCw==","tarball":"https://registry.npmjs.org/@alicloud/xconsole-less/-/xconsole-less-2.0.0-alpha.6.tgz","fileCount":23,"unpackedSize":31783,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfM4BcCRA9TVsSAnZWagAAUmgP/Ah3v2E+LuCJxsNHu/Ti\nsh38GPfFK4alAWh++KnOLbVyOyn7jlvPo+I0wDLQx1LT84K7YYjJ7vupyGk1\nmfJjjjrf4u5c5/WuOZjxm9Z9t9/v7IzSdN216uo2T7x5Jx4xwlSTo8F6jF2E\nb3UPWaJOQkBoik+2yvayNA1HQxoX9dbgyfF3ZCa7/lxMnxTtW+xqZFeVdWlW\nJ/7/2AFldYGyp29u4T2Vvq1++2t+3pi28qmqg9dxb9/itqF6zL0L4y76QBgX\nllBLZQ0SQkDpMuhcqmFiXod5kbe2z/z25J5BNcMXFpXLVUOhOopvtBeiS9n5\ncUoakZ2Q+06x4++bDs+SFC0YCk5YXx/V3Yah6H5KxOjCRpQFSPX7xPMDmZta\nD1byRxbZo2cUpzsAvvdr2mFFoyNJmWkDHWWDsrar5gyCpTv8ozBSDPF6IVRe\ngNRUCLuKdyUzitgxNpSVKqfW2vD2StpT2Mbec4kUkkGIQ58WGU9uKc/2G7UG\nA7TKH9K4pDgtFW13iOLxSCkCyk4nVm3lcyK8Jjkc88v1oaJjTx3Om6XrorVt\nZFhB+8AEN8gaKwi93ADxnqas13Fsd/hvtHfnuvKgpXd8LEpIhQh8TmZeyuyR\npF3oWaWafqrDwiIlkfn/4k95wp0ZCyGGPdDcLvLs/RJHwsJQtD9a3pmr79KA\n3RbB\r\n=4eQc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCfnzLr60Wd3tfXWd1E1cwjbi7p8pLypqtUaWVO6abwHgIgaEhf72skETYbOMmwvUUZgocntw+d7VFBm8s5hM9mVFU="}]},"maintainers":[{"name":"aliyunsdkteam","email":"sdk-team@alibabacloud.com"},{"name":"console-fe","email":"console-fe@alibabacloud.com"},{"name":"fengmk2","email":"fengmk2@gmail.com"},{"name":"jacksontian","email":"shyvo1987@gmail.com"},{"name":"pagecao","email":"cpj1106@gmail.com"}],"_npmUser":{"name":"console-fe","email":"console-fe@alibabacloud.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/xconsole-less_2.0.0-alpha.6_1597210715765_0.4825542223257133"},"_hasShrinkwrap":false},"2.0.0-alpha.7":{"name":"@alicloud/xconsole-less","version":"2.0.0-alpha.7","description":"阿里云控制台通用 LESS 常量及方法","main":"index.less","license":"MIT","homepage":"https://github.com/aliyun/alibabacloud-console-design","repository":{"type":"git","url":"https://github.com/aliyun/alibabacloud-console-design.git"},"bugs":{"url":"https://github.com/aliyun/alibabacloud-console-design/issues"},"author":{},"peerDependencies":{"less":"^3.x","prop-types":"^15.x","react":"^16.x","react-dom":"^16.x"},"devDependencies":{"classnames":"^2.2.6","less":"^3.9.0","prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6"},"scripts":{"start":"abc dev"},"readmeFilename":"README.md","readme":"ABOUT\n=====\n\n> 阿里云控制台通用 LESS 常量及方法\n\n参考规范 \n\n# HOW TO USE\n\n安装：\n\n```\ntnpm install @ali/wind-less-mixin --save\n```\n\n在 LESS 文件中引入和使用：\n\n```less\n@import '~@ali/wind-less-mixin'; // 如果 webpack 报找不到，可以尝试加上 `/index`\n\n// 使用值（只有以 @G_ 打头的是允许使用的）\n.selector {\n color: @G_color_text_emphasis;\n}\n// 使用 mixin 方法\n.some-error {\n #color.error(true); // 只能通过 namespace 来引用\n}\n```\n\n# 代码规范说明\n\nmixin 包含两部分，值和方法。\n\n## 变量\n\n全局可用的[变量](http://lesscss.org/features/#variables-feature)（其实叫「常量」可能更为妥当）。\n\n由 `src/_var.less` 聚合位于 `src/var/` 目录下的文件，一个文件定义一组相关的变量，如 `color.less` 定义颜色，`size.less` 定义宽高大小。\n\n命名规范：\n\n* 公有变量以 `@G_` 打头，其余单词全小写，单词间以下划线 `_` 链接\n* 私有变量以 `@_` 打头，其余跟公有的一样\n\n关于「私有」：\n\nless 没有「私有」的概念，所以事实上可以引用所有的变量，以 `@_` 只是表明「你不要用，我不保证它不会变」。\n\n## 方法\n\n全局可用的 [无输出 mixin 方法](http://lesscss.org/features/#mixins-feature-not-outputting-the-mixin)。\n\n由 `src/_fn.less` 聚合位于 `src/fn/` 目录下的文件，一个文件定义一个 [namespace](http://lesscss.org/features/#mixins-feature-namespaces)，所有\n的方法都包裹在 `namespace` 中。\n\n命名规范：\n\n* `namespace` 全小写，单词之间用中划线 `-` 链接（尽可能只用一个单词）\n* 方法名跟 `namespace` 的命名方式一样\n* 方法参数遵循变量的命名规范\n* 方法参数之间以 `;` 分隔\n\n关于「私有」：\n\n跟变量一样，没有私有，但以 `_` 打头的方法，切记不要随便引用。\n\n# API\n\n> 由于维护的疏漏，这里有可能跟代码不同步，请查看源码\n\n## 变量\n\n### color\n\n#### 文字颜色\n\ncode | 值 | 预览 | 说明\n:-- | :-- | :--: | :--\n`@G_color_text_error` | `#f15533` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xf15533) |最高级别：报错\n`@G_color_text_warn` | `#f15533` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xf15533) | 最高级别：警告\n`@G_color_text_emphasis` | `#ff8a00` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xff8a00) | 第二级别：突出说明，如「金额」、「最重要链接」等\n`@G_color_text_info` | `#00c1de` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x00c1de) | 第二级别：重要提示、重要连接\n`@G_color_text_positive` | `#35b34a` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x35b34a) | 第三级别：积极和正面引导的文本，如「验证通过」、「已支付」等\n`@G_color_text_heading` | `#373d41` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x373d41) | 第四级别：标题\n`@G_color_text_body` | `#73777a` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x73777a) | 第五级别：正文\n`@G_color_text_help` | `#9b9ea0` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x9b9ea0) | 第六级别：最不重要的信息、最低级别的帮助信息\n`@G_color_text_hint` | `#c3c5c6` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xc3c5c6) | 第七级别：水印、输入框中的提示文字\n`@G_color_link` | `#00c1de` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x00c1de) | 第二级别：重要链接\n`@G_color_link_gray` | `#73777a` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x73777a) | 第三级别：次重要链接、列表型链接，如「公告」\n\n#### 背景色（浅色）\n\ncode | 值 | 预览 | 说明\n:-- | :-- | :--: | :--\n`@G_color_bg_error` | `#feeeeb` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xfeeeeb) | 最高级别：错误提示的底色\n`@G_color_bg_warn` | `#feeeeb` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xfeeeeb) | 最高级别：警告提示的底色\n`@G_color_bg_emphasis` | `#fff3e6` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xfff3e6) | 第二级别：突出说明的底色\n`@G_color_bg_info` | `#e6f9fc` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xe6f9fc) | 第二级别：重要说明的底色\n`@G_color_bg_positive` | `#ebf7ed` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xebf7ed) | 第三级别：积极和正面引导的文本，如「验证通过」、「已支付」等\n`@G_color_bg_dark` | `#d7d8d9` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xd7d8d9) | 强调需要严格强调模块之间差异的场景\n`@G_color_bg_heading` | `#ebecec` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xebecec) | 不可点按钮的底色，模块间的区分或模块中信息的层次区分，如「表头」、「卡片标题区」等\n`@G_color_bg_light` | `#f5f5f6` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xf5f5f6) | 不可点输入框的底色，页面中用于区分不同区块时的背景底色，以及斑马条表单的底色\n\n#### 线条色（边框）\n\ncode | 值 | 预览 | 说明\n:-- | :-- | :--: | :--\n`@G_color_line_error` | `#f15533` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xf15533) | 最高级别：报错\n`@G_color_line_warn` | `#f15533` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xf15533) | 最高级别：警告\n`@G_color_line_emphasis` | `#ff8a00` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xff8a00) | 第二级别：突出说明，如「金额」、「最重要链接」等\n`@G_color_line_info` | `#00c1de` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x00c1de) | 第二级别：重要提示、重要连接\n`@G_color_line_positive` | `#35b34a` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x35b34a) | 第三级别：积极和正面引导的文本，如「验证通过」、「已支付」等\n`@G_color_line_dark` | `#373d41` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x373d41) | 重线，强展示，突出可操作的组件的线 / 边框，如按钮\n`@G_color_line_heading` | `#c3c5c6` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xc3c5c6) | 深线，次强展示，可操作的组件的线 / 边框，如「输入框」\n`@G_color_line_regular` | `#d7d8d9` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xd7d8d9) | 常规线，常规展示的组件的线 / 边框，如「卡片」\n`@G_color_line_light` | `#ebecec` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xebecec) | 浅线，弱展示，区分段落或不可操作内容的线 / 边框\n\n### 组件相关\n\ncode | 值 | 说明\n:-- | :-- | :--\n`@G_height_top_bar` | `50px` | 控制台通用顶栏高度（如果有顶栏的话，body 上会有个 `hasTopbar` 的 class，可以用它来判断有没有顶栏）\n`@G_width_app_menu` | `180px` | 应用侧栏菜单的宽度\n`@G_height_app_menu_title` | `50px` | 应用侧栏菜单的标题高度\n`@G_height_app_menu_item` | `40px` | 应用侧栏菜单项的一般高度\n`@G_height_app_menu_item_s` | `32px` | 应用侧栏菜单项的稍小高度（用于实例列表）\n`@G_padding_app_menu` | `20px` | 应用侧栏菜单的左右边距\n`@G_z_index_popover` | `1001` | 布局（顶栏 + 侧栏）的 z-index 是 999，next-menu 的 z-index 偏偏是 1001，所以用 next-menu 的作为 popover 的\n\n## 方法\n\n### `#color` namespace\n\n有些颜色需要组合使用，这里主要封装了颜色组合使用的情形。\n\n> 其中的 `@hoveActive` 设为 `true` 表示需要 `:hover` 和 `:active` 状态。\n\n方法 | 说明\n:-- | :--\n`.error(@hoveActive)` | 错误文本色\n`.error-bg(@hoveActive)` | 错误深色背景（白色文字）\n`.error-bg-light()` | 错误浅色背景 + 错误文本色\n`.warn(@hoveActive)` | 警告文本色\n`.warn-bg(@hoveActive)` | 警告深色背景（白色文字）\n`.warn-bg-light()` | 警告浅色背景 + 警告文本色\n`.info(@hoveActive)` | 提示文本色\n`.info-bg(@hoveActive)` | 提示深色背景（白色文字）\n`.info-bg-light()` | 提示浅色背景 + 提示文本色\n`.success(@hoveActive)` | 成功文本色\n`.success-bg(@hoveActive)` | 成功深色背景（白色文字）\n`.success-bg-light()` | 成功浅色背景 + 成功文本色\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\n.your-selector {\n .error-text {\n #color.error();\n }\n .error-text-with-ha {\n #color.error(true);\n }\n .error-bg {\n #color.error-bg();\n }\n .error-bg-with-ha {\n #color.error-bg(true);\n }\n .error-bg-light {\n #color.error-bg-light(); // 无 :hover :active 设置\n }\n}\n```\n\n### `#glyph` namespace\n\niconfont 工厂方法，默认生成以 `glyph-` 打头的 iconfont 样式。\n\n方法 | 说明\n:-- | :--\n`.base(@fontFamily)` | 设置 glyph 的基础样式（但是 `@fontFamily` 要使用者自己写 `@font-face`），包括几个旋转用的帮助类\n`.type(@type; @code; @prefix: glyph)` | 定义一个字体，默认用 `glyph` 为 `className` 前缀，即传入 `@type` 为 `hello` 的话，`className` 则为 `glyph-hello`\n\n例子：\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\n// 你需要手动引入自己的 font-face\n@font-face {\n font-family: '________'; // 字体名称\n // 这里写相关的 src\n // src: ...;\n}\n\n.your-selector {\n #glyph.base(________); // 对应上方的字体名称\n \n #glyph.type(xx; '\\e600');\n #glyph.type(yy; '\\e601'; 'another-prefix'); // 如果不想用默认的前缀\n // ...\n}\n```\n\n在你的代码中使用形如 `your-selector glyph-xx` 的复合 `className` 即可。\n\n### `#triangle` namespace\n\n八个方向的三角形生成器。\n\n```\n up\n ▲\n ◤ tl - tr ◥\nleft ︎◀ | | ▶ right\n ◣ bl - br ◢\n ︎▼\n down\n```\n\n方法 | 说明\n:-- | :--\n`.base()` | 三角形基础，一般不允许在三角形中添加内容，所以它的宽高都是 0\n`.up(@b; @h; @c)` | 向上 ▲\n`.down(@b; @h; @c)` | 向下 ▼\n`.right(@b; @h; @c)` | 向右 ▶\n`.left(@b; @h; @c)` | 向左 ◀\n`.tl(@b; @h; @c)` | 左上角 ◤\n`.tr(@b; @h; @c)` | 右上角 ◥\n`.bl(@b; @h; @c)` | 左下角 ◣\n`.br(@b; @h; @c)` | 右下角 ◢\n\n例子：\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\n.your-selector {\n #triangle.base();\n #triangle.top(30px; 20px; #f00);\n}\n```\n\n### `#responsive` namespace\n\n简单的响应式封装方法。\n\n方法 | 说明\n:-- | :--\n`.retina(@rules)` | 适配视网膜屏\n`.above(@min; @rules)` | 在某个宽度之上（包含这个宽度）\n`.below(@max; @rules)` | 在某个宽度之下（包含这个宽度）\n`.between(@min; @max; @rules)` | 在某个宽度范围之内（包含边界）\n\n例子：\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\n.your-selector {\n #responsive.retina { // retina 屏幕\n // ...\n }\n #responsive.above(1024px; { // 超过 1024px 宽度\n // ...\n });\n #responsive.between(800px; 1023px; { // 在 [800px, 1023px] 宽度之间\n // ...\n });\n #responsive.below(799px; { // 小于 799px 宽度\n // ...\n });\n}\n```\n\n### `#typo` namespace\n\n文字和排版。\n\n方法 | 说明\n:-- | :--\n`.link(@level: 0)` | 链接，`@level=0` 表示一般的重要连接（一般为蓝色），`@level=1` 表示最重要的连接（一般为橙色），`@level=-1` 表示不重要的链接（一般为深灰色）\n`.ellipsis()` | 文字截断\n\n例子：\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\n.your-selector {\n .some-text {\n #typo.ellipsis();\n }\n a.very-important {\n #typo.link(1);\n }\n}\n```\n\n### `#util` namespace\n\n杂项工具。\n\n方法 | 说明\n:-- | :--\n`.clearfix()` | 修复因内部元素 `float` 造成的容器无高度的问题\n\n例子：\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\nul.your-selector {\n #util.clearfix();\n \n li {\n float: left;\n // ...\n }\n}\n```\n","_id":"@alicloud/xconsole-less@2.0.0-alpha.7","dist":{"shasum":"9ad14b7a0389e2c558556d8744989906433d8a0d","integrity":"sha512-jrJmZ3GVw/bkGfV+aZ1WMy9yo2DvERy3UnmJc+ad6G9aKV5ilhAP5XlmHyipsfyMJ/L8So1KlOTvbj4aFAwN6Q==","tarball":"https://registry.npmjs.org/@alicloud/xconsole-less/-/xconsole-less-2.0.0-alpha.7.tgz","fileCount":23,"unpackedSize":31783,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNS3fCRA9TVsSAnZWagAAD4oP/2NIjtF1onu7FjCwCris\nPd4eDI1crO0yCr+PQzDyaAZNjWuIXd5YPt++zcSGLO5bmOYX0Yv65BnqSPCg\ndaAIkvB5aFBU3LymlzWimC66mQffHsQBjaTa3oYDu/NMMGSoTfZMTTJUtf1z\nJ6s/HD/VB+4TH1+zBSUboG31HpoMf7ECedWIMVjXrumSxEZVS6wZTfCxUbHD\n7DE9Zd9I8sYHndb9qSyGJtyQRUWiZR+63Gvmz3c40m2PKIFt3h1ZdVUXQen+\n4voXUE+XUGdv4mL+l3NiPK+EcGFY1pqBlmG2mA9GYEq/sIpl/RGUFUGruGtK\ncMScEqybs+EOW1ltevH1gBXK186kVjPf2yXhJ7yLeoskQjPOk9CSYPfdjZny\ntoln873AEq1G9yxTb0ba740S4Ijr4aLL1MJ0DnVH1lRyEThlXqPe/swdYwdL\n50te/Q07mAVLyRKds34xIEzWLjWJbi/pQRtXfRz0sW+Dy0JvzdZMXr7CgnlM\n8tFJK3EZZSQCARrnvX9XGaPDRHY6mtzYnR7Y/rFrhE1AtGpTns9+I4gsqluV\ndFdDo66Sd+tA62apj6tE9XPgFzGPjxVrd0AA/O3GatjzS6C4AWVsZybr0O5r\nq8MyoaV2pyFy0gopgcSifwWyLlkRR02fjcW7UwUHCiVWKzCZTvt5Jia835S/\nUNvT\r\n=UGNf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDF46CGxe8p5PZAISFYEb9nG/427nuy/os6NGi/NCMq/AIhANNyaDSS7f6MR437V6zPHW47L2WbC5amW4Gi/vdrI7wN"}]},"maintainers":[{"name":"aliyunsdkteam","email":"sdk-team@alibabacloud.com"},{"name":"console-fe","email":"console-fe@alibabacloud.com"},{"name":"fengmk2","email":"fengmk2@gmail.com"},{"name":"jacksontian","email":"shyvo1987@gmail.com"},{"name":"pagecao","email":"cpj1106@gmail.com"}],"_npmUser":{"name":"console-fe","email":"console-fe@alibabacloud.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/xconsole-less_2.0.0-alpha.7_1597320670235_0.006736582217663045"},"_hasShrinkwrap":false},"2.0.0-alpha.8":{"name":"@alicloud/xconsole-less","version":"2.0.0-alpha.8","description":"阿里云控制台通用 LESS 常量及方法","main":"index.less","license":"MIT","homepage":"https://github.com/aliyun/alibabacloud-console-design","repository":{"type":"git","url":"git+https://github.com/aliyun/alibabacloud-console-design.git"},"bugs":{"url":"https://github.com/aliyun/alibabacloud-console-design/issues"},"author":"","peerDependencies":{"less":"^3.x","prop-types":"^15.x","react":"^16.x","react-dom":"^16.x"},"devDependencies":{"classnames":"^2.2.6","less":"^3.9.0","prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6"},"scripts":{"start":"abc dev"},"gitHead":"5e3c50ce0c857a9e1c7fbb2a671e45fba05a20af","readme":"ABOUT\n=====\n\n> 阿里云控制台通用 LESS 常量及方法\n\n参考规范 \n\n# HOW TO USE\n\n安装：\n\n```\ntnpm install @ali/wind-less-mixin --save\n```\n\n在 LESS 文件中引入和使用：\n\n```less\n@import '~@ali/wind-less-mixin'; // 如果 webpack 报找不到，可以尝试加上 `/index`\n\n// 使用值（只有以 @G_ 打头的是允许使用的）\n.selector {\n color: @G_color_text_emphasis;\n}\n// 使用 mixin 方法\n.some-error {\n #color.error(true); // 只能通过 namespace 来引用\n}\n```\n\n# 代码规范说明\n\nmixin 包含两部分，值和方法。\n\n## 变量\n\n全局可用的[变量](http://lesscss.org/features/#variables-feature)（其实叫「常量」可能更为妥当）。\n\n由 `src/_var.less` 聚合位于 `src/var/` 目录下的文件，一个文件定义一组相关的变量，如 `color.less` 定义颜色，`size.less` 定义宽高大小。\n\n命名规范：\n\n* 公有变量以 `@G_` 打头，其余单词全小写，单词间以下划线 `_` 链接\n* 私有变量以 `@_` 打头，其余跟公有的一样\n\n关于「私有」：\n\nless 没有「私有」的概念，所以事实上可以引用所有的变量，以 `@_` 只是表明「你不要用，我不保证它不会变」。\n\n## 方法\n\n全局可用的 [无输出 mixin 方法](http://lesscss.org/features/#mixins-feature-not-outputting-the-mixin)。\n\n由 `src/_fn.less` 聚合位于 `src/fn/` 目录下的文件，一个文件定义一个 [namespace](http://lesscss.org/features/#mixins-feature-namespaces)，所有\n的方法都包裹在 `namespace` 中。\n\n命名规范：\n\n* `namespace` 全小写，单词之间用中划线 `-` 链接（尽可能只用一个单词）\n* 方法名跟 `namespace` 的命名方式一样\n* 方法参数遵循变量的命名规范\n* 方法参数之间以 `;` 分隔\n\n关于「私有」：\n\n跟变量一样，没有私有，但以 `_` 打头的方法，切记不要随便引用。\n\n# API\n\n> 由于维护的疏漏，这里有可能跟代码不同步，请查看源码\n\n## 变量\n\n### color\n\n#### 文字颜色\n\ncode | 值 | 预览 | 说明\n:-- | :-- | :--: | :--\n`@G_color_text_error` | `#f15533` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xf15533) |最高级别：报错\n`@G_color_text_warn` | `#f15533` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xf15533) | 最高级别：警告\n`@G_color_text_emphasis` | `#ff8a00` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xff8a00) | 第二级别：突出说明，如「金额」、「最重要链接」等\n`@G_color_text_info` | `#00c1de` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x00c1de) | 第二级别：重要提示、重要连接\n`@G_color_text_positive` | `#35b34a` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x35b34a) | 第三级别：积极和正面引导的文本，如「验证通过」、「已支付」等\n`@G_color_text_heading` | `#373d41` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x373d41) | 第四级别：标题\n`@G_color_text_body` | `#73777a` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x73777a) | 第五级别：正文\n`@G_color_text_help` | `#9b9ea0` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x9b9ea0) | 第六级别：最不重要的信息、最低级别的帮助信息\n`@G_color_text_hint` | `#c3c5c6` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xc3c5c6) | 第七级别：水印、输入框中的提示文字\n`@G_color_link` | `#00c1de` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x00c1de) | 第二级别：重要链接\n`@G_color_link_gray` | `#73777a` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x73777a) | 第三级别：次重要链接、列表型链接，如「公告」\n\n#### 背景色（浅色）\n\ncode | 值 | 预览 | 说明\n:-- | :-- | :--: | :--\n`@G_color_bg_error` | `#feeeeb` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xfeeeeb) | 最高级别：错误提示的底色\n`@G_color_bg_warn` | `#feeeeb` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xfeeeeb) | 最高级别：警告提示的底色\n`@G_color_bg_emphasis` | `#fff3e6` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xfff3e6) | 第二级别：突出说明的底色\n`@G_color_bg_info` | `#e6f9fc` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xe6f9fc) | 第二级别：重要说明的底色\n`@G_color_bg_positive` | `#ebf7ed` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xebf7ed) | 第三级别：积极和正面引导的文本，如「验证通过」、「已支付」等\n`@G_color_bg_dark` | `#d7d8d9` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xd7d8d9) | 强调需要严格强调模块之间差异的场景\n`@G_color_bg_heading` | `#ebecec` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xebecec) | 不可点按钮的底色，模块间的区分或模块中信息的层次区分，如「表头」、「卡片标题区」等\n`@G_color_bg_light` | `#f5f5f6` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xf5f5f6) | 不可点输入框的底色，页面中用于区分不同区块时的背景底色，以及斑马条表单的底色\n\n#### 线条色（边框）\n\ncode | 值 | 预览 | 说明\n:-- | :-- | :--: | :--\n`@G_color_line_error` | `#f15533` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xf15533) | 最高级别：报错\n`@G_color_line_warn` | `#f15533` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xf15533) | 最高级别：警告\n`@G_color_line_emphasis` | `#ff8a00` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xff8a00) | 第二级别：突出说明，如「金额」、「最重要链接」等\n`@G_color_line_info` | `#00c1de` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x00c1de) | 第二级别：重要提示、重要连接\n`@G_color_line_positive` | `#35b34a` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x35b34a) | 第三级别：积极和正面引导的文本，如「验证通过」、「已支付」等\n`@G_color_line_dark` | `#373d41` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x373d41) | 重线，强展示，突出可操作的组件的线 / 边框，如按钮\n`@G_color_line_heading` | `#c3c5c6` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xc3c5c6) | 深线，次强展示，可操作的组件的线 / 边框，如「输入框」\n`@G_color_line_regular` | `#d7d8d9` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xd7d8d9) | 常规线，常规展示的组件的线 / 边框，如「卡片」\n`@G_color_line_light` | `#ebecec` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xebecec) | 浅线，弱展示，区分段落或不可操作内容的线 / 边框\n\n### 组件相关\n\ncode | 值 | 说明\n:-- | :-- | :--\n`@G_height_top_bar` | `50px` | 控制台通用顶栏高度（如果有顶栏的话，body 上会有个 `hasTopbar` 的 class，可以用它来判断有没有顶栏）\n`@G_width_app_menu` | `180px` | 应用侧栏菜单的宽度\n`@G_height_app_menu_title` | `50px` | 应用侧栏菜单的标题高度\n`@G_height_app_menu_item` | `40px` | 应用侧栏菜单项的一般高度\n`@G_height_app_menu_item_s` | `32px` | 应用侧栏菜单项的稍小高度（用于实例列表）\n`@G_padding_app_menu` | `20px` | 应用侧栏菜单的左右边距\n`@G_z_index_popover` | `1001` | 布局（顶栏 + 侧栏）的 z-index 是 999，next-menu 的 z-index 偏偏是 1001，所以用 next-menu 的作为 popover 的\n\n## 方法\n\n### `#color` namespace\n\n有些颜色需要组合使用，这里主要封装了颜色组合使用的情形。\n\n> 其中的 `@hoveActive` 设为 `true` 表示需要 `:hover` 和 `:active` 状态。\n\n方法 | 说明\n:-- | :--\n`.error(@hoveActive)` | 错误文本色\n`.error-bg(@hoveActive)` | 错误深色背景（白色文字）\n`.error-bg-light()` | 错误浅色背景 + 错误文本色\n`.warn(@hoveActive)` | 警告文本色\n`.warn-bg(@hoveActive)` | 警告深色背景（白色文字）\n`.warn-bg-light()` | 警告浅色背景 + 警告文本色\n`.info(@hoveActive)` | 提示文本色\n`.info-bg(@hoveActive)` | 提示深色背景（白色文字）\n`.info-bg-light()` | 提示浅色背景 + 提示文本色\n`.success(@hoveActive)` | 成功文本色\n`.success-bg(@hoveActive)` | 成功深色背景（白色文字）\n`.success-bg-light()` | 成功浅色背景 + 成功文本色\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\n.your-selector {\n .error-text {\n #color.error();\n }\n .error-text-with-ha {\n #color.error(true);\n }\n .error-bg {\n #color.error-bg();\n }\n .error-bg-with-ha {\n #color.error-bg(true);\n }\n .error-bg-light {\n #color.error-bg-light(); // 无 :hover :active 设置\n }\n}\n```\n\n### `#glyph` namespace\n\niconfont 工厂方法，默认生成以 `glyph-` 打头的 iconfont 样式。\n\n方法 | 说明\n:-- | :--\n`.base(@fontFamily)` | 设置 glyph 的基础样式（但是 `@fontFamily` 要使用者自己写 `@font-face`），包括几个旋转用的帮助类\n`.type(@type; @code; @prefix: glyph)` | 定义一个字体，默认用 `glyph` 为 `className` 前缀，即传入 `@type` 为 `hello` 的话，`className` 则为 `glyph-hello`\n\n例子：\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\n// 你需要手动引入自己的 font-face\n@font-face {\n font-family: '________'; // 字体名称\n // 这里写相关的 src\n // src: ...;\n}\n\n.your-selector {\n #glyph.base(________); // 对应上方的字体名称\n \n #glyph.type(xx; '\\e600');\n #glyph.type(yy; '\\e601'; 'another-prefix'); // 如果不想用默认的前缀\n // ...\n}\n```\n\n在你的代码中使用形如 `your-selector glyph-xx` 的复合 `className` 即可。\n\n### `#triangle` namespace\n\n八个方向的三角形生成器。\n\n```\n up\n ▲\n ◤ tl - tr ◥\nleft ︎◀ | | ▶ right\n ◣ bl - br ◢\n ︎▼\n down\n```\n\n方法 | 说明\n:-- | :--\n`.base()` | 三角形基础，一般不允许在三角形中添加内容，所以它的宽高都是 0\n`.up(@b; @h; @c)` | 向上 ▲\n`.down(@b; @h; @c)` | 向下 ▼\n`.right(@b; @h; @c)` | 向右 ▶\n`.left(@b; @h; @c)` | 向左 ◀\n`.tl(@b; @h; @c)` | 左上角 ◤\n`.tr(@b; @h; @c)` | 右上角 ◥\n`.bl(@b; @h; @c)` | 左下角 ◣\n`.br(@b; @h; @c)` | 右下角 ◢\n\n例子：\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\n.your-selector {\n #triangle.base();\n #triangle.top(30px; 20px; #f00);\n}\n```\n\n### `#responsive` namespace\n\n简单的响应式封装方法。\n\n方法 | 说明\n:-- | :--\n`.retina(@rules)` | 适配视网膜屏\n`.above(@min; @rules)` | 在某个宽度之上（包含这个宽度）\n`.below(@max; @rules)` | 在某个宽度之下（包含这个宽度）\n`.between(@min; @max; @rules)` | 在某个宽度范围之内（包含边界）\n\n例子：\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\n.your-selector {\n #responsive.retina { // retina 屏幕\n // ...\n }\n #responsive.above(1024px; { // 超过 1024px 宽度\n // ...\n });\n #responsive.between(800px; 1023px; { // 在 [800px, 1023px] 宽度之间\n // ...\n });\n #responsive.below(799px; { // 小于 799px 宽度\n // ...\n });\n}\n```\n\n### `#typo` namespace\n\n文字和排版。\n\n方法 | 说明\n:-- | :--\n`.link(@level: 0)` | 链接，`@level=0` 表示一般的重要连接（一般为蓝色），`@level=1` 表示最重要的连接（一般为橙色），`@level=-1` 表示不重要的链接（一般为深灰色）\n`.ellipsis()` | 文字截断\n\n例子：\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\n.your-selector {\n .some-text {\n #typo.ellipsis();\n }\n a.very-important {\n #typo.link(1);\n }\n}\n```\n\n### `#util` namespace\n\n杂项工具。\n\n方法 | 说明\n:-- | :--\n`.clearfix()` | 修复因内部元素 `float` 造成的容器无高度的问题\n\n例子：\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\nul.your-selector {\n #util.clearfix();\n \n li {\n float: left;\n // ...\n }\n}\n```\n","readmeFilename":"README.md","_id":"@alicloud/xconsole-less@2.0.0-alpha.8","_nodeVersion":"14.7.0","_npmVersion":"lerna/3.22.1/node@v14.7.0+x64 (darwin)","dist":{"integrity":"sha512-z14ztCrGr/E1ggU9xLdGwcgtwJK6k+zWh6VIkczb9T9O5qUHGfIbKw9yx/LzJ/HfHpcNYKhs8F3BsmulcalcNw==","shasum":"c0ea0feb087209a199447a7e09c73001b10b360f","tarball":"https://registry.npmjs.org/@alicloud/xconsole-less/-/xconsole-less-2.0.0-alpha.8.tgz","fileCount":20,"unpackedSize":32910,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfO5FrCRA9TVsSAnZWagAA1dIP+wa3xdsVN8Cb32WZ5xUw\nT/CRZBUgI06tXeQK9W5WxbkU4DVCef95etOgNXHVTIX5zojkJmEQlZcVvHk7\nV7oLo9KvJdla1CiIJLbVQLTKzd+ephbwF9kt784dGoIGvJ6/shHTCYbxL6r+\n0DCcXu6rJkpKnbgJrbGcTZm5GMrPG+rxHF0olRVEljttPH+o700T31eZEWx7\nx6IXobHSyeAZeclHQVqwBZzKCOvSJEYffdz7uZr3VCAVeQ/3dOZx+FiX/c7Q\nFTirDFWFsfK4USIPZ6psJsY4GD2NcabgkL0hQIgnvEplR01PpgbuKopHhDkJ\nRqlJGj2SVbKhPL6VWgh+cH/N4FzfP85N13pOH/Pkt0TjstcRwhbtzqCvrpmn\nmFhWHbMLNbG9B+0977xZIkR9T7FQjvqsndfNTwCfXiRGrDq8X1zgnQZrtXfz\nOM0Vy6f/1is7jyT3UMUO588Sdu3Yw+ITQn/LupgNdCCfWpVbzKFDBS+YqYvm\nYGDzH27UhVi3XNSUeJxhGs1+m8xZZE+aYB3l5t4fcJj5dyKk1BAUgJITw4aO\n/FvwcdtYHBf3apsGGS9gplDRJHq5IyI417gRw/5N60pkvezcxCzVM+oAwe8A\nt5FDq0/7KScu0riiCl6XERNgdkR/YDAPlgFUYismzgTjGIRgbcoEga54Omc3\naBJd\r\n=IfFg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHf4wdj+NV67VkwFIYDg+BTTwgu3P7fKVZvRaqZPKwYJAiEAgbZEbCJezUIWOEdSyv3vsNj+jL+Dj5FvvzaC+4K7ELs="}]},"maintainers":[{"name":"aliyunsdkteam","email":"sdk-team@alibabacloud.com"},{"name":"console-fe","email":"console-fe@alibabacloud.com"},{"name":"fengmk2","email":"fengmk2@gmail.com"},{"name":"jacksontian","email":"shyvo1987@gmail.com"},{"name":"pagecao","email":"cpj1106@gmail.com"}],"_npmUser":{"name":"console-fe","email":"console-fe@alibabacloud.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/xconsole-less_2.0.0-alpha.8_1597739370967_0.9151233309464981"},"_hasShrinkwrap":false},"2.0.0-next.0":{"name":"@alicloud/xconsole-less","version":"2.0.0-next.0","description":"阿里云控制台通用 LESS 常量及方法","main":"index.less","license":"MIT","homepage":"https://github.com/aliyun/alibabacloud-console-design","repository":{"type":"git","url":"git+https://github.com/aliyun/alibabacloud-console-design.git"},"bugs":{"url":"https://github.com/aliyun/alibabacloud-console-design/issues"},"author":"","peerDependencies":{"less":"^3.x","prop-types":"^15.x","react":"^16.x","react-dom":"^16.x"},"devDependencies":{"classnames":"^2.2.6","less":"^3.9.0","prop-types":"^15.7.2","react":"^16.8.6","react-dom":"^16.8.6"},"scripts":{"start":"abc dev"},"gitHead":"a4fa53aa90b996e0a144c4fa010590763436de34","readme":"ABOUT\n=====\n\n> 阿里云控制台通用 LESS 常量及方法\n\n参考规范 \n\n# HOW TO USE\n\n安装：\n\n```\ntnpm install @ali/wind-less-mixin --save\n```\n\n在 LESS 文件中引入和使用：\n\n```less\n@import '~@ali/wind-less-mixin'; // 如果 webpack 报找不到，可以尝试加上 `/index`\n\n// 使用值（只有以 @G_ 打头的是允许使用的）\n.selector {\n color: @G_color_text_emphasis;\n}\n// 使用 mixin 方法\n.some-error {\n #color.error(true); // 只能通过 namespace 来引用\n}\n```\n\n# 代码规范说明\n\nmixin 包含两部分，值和方法。\n\n## 变量\n\n全局可用的[变量](http://lesscss.org/features/#variables-feature)（其实叫「常量」可能更为妥当）。\n\n由 `src/_var.less` 聚合位于 `src/var/` 目录下的文件，一个文件定义一组相关的变量，如 `color.less` 定义颜色，`size.less` 定义宽高大小。\n\n命名规范：\n\n* 公有变量以 `@G_` 打头，其余单词全小写，单词间以下划线 `_` 链接\n* 私有变量以 `@_` 打头，其余跟公有的一样\n\n关于「私有」：\n\nless 没有「私有」的概念，所以事实上可以引用所有的变量，以 `@_` 只是表明「你不要用，我不保证它不会变」。\n\n## 方法\n\n全局可用的 [无输出 mixin 方法](http://lesscss.org/features/#mixins-feature-not-outputting-the-mixin)。\n\n由 `src/_fn.less` 聚合位于 `src/fn/` 目录下的文件，一个文件定义一个 [namespace](http://lesscss.org/features/#mixins-feature-namespaces)，所有\n的方法都包裹在 `namespace` 中。\n\n命名规范：\n\n* `namespace` 全小写，单词之间用中划线 `-` 链接（尽可能只用一个单词）\n* 方法名跟 `namespace` 的命名方式一样\n* 方法参数遵循变量的命名规范\n* 方法参数之间以 `;` 分隔\n\n关于「私有」：\n\n跟变量一样，没有私有，但以 `_` 打头的方法，切记不要随便引用。\n\n# API\n\n> 由于维护的疏漏，这里有可能跟代码不同步，请查看源码\n\n## 变量\n\n### color\n\n#### 文字颜色\n\ncode | 值 | 预览 | 说明\n:-- | :-- | :--: | :--\n`@G_color_text_error` | `#f15533` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xf15533) |最高级别：报错\n`@G_color_text_warn` | `#f15533` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xf15533) | 最高级别：警告\n`@G_color_text_emphasis` | `#ff8a00` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xff8a00) | 第二级别：突出说明，如「金额」、「最重要链接」等\n`@G_color_text_info` | `#00c1de` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x00c1de) | 第二级别：重要提示、重要连接\n`@G_color_text_positive` | `#35b34a` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x35b34a) | 第三级别：积极和正面引导的文本，如「验证通过」、「已支付」等\n`@G_color_text_heading` | `#373d41` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x373d41) | 第四级别：标题\n`@G_color_text_body` | `#73777a` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x73777a) | 第五级别：正文\n`@G_color_text_help` | `#9b9ea0` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x9b9ea0) | 第六级别：最不重要的信息、最低级别的帮助信息\n`@G_color_text_hint` | `#c3c5c6` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xc3c5c6) | 第七级别：水印、输入框中的提示文字\n`@G_color_link` | `#00c1de` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x00c1de) | 第二级别：重要链接\n`@G_color_link_gray` | `#73777a` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x73777a) | 第三级别：次重要链接、列表型链接，如「公告」\n\n#### 背景色（浅色）\n\ncode | 值 | 预览 | 说明\n:-- | :-- | :--: | :--\n`@G_color_bg_error` | `#feeeeb` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xfeeeeb) | 最高级别：错误提示的底色\n`@G_color_bg_warn` | `#feeeeb` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xfeeeeb) | 最高级别：警告提示的底色\n`@G_color_bg_emphasis` | `#fff3e6` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xfff3e6) | 第二级别：突出说明的底色\n`@G_color_bg_info` | `#e6f9fc` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xe6f9fc) | 第二级别：重要说明的底色\n`@G_color_bg_positive` | `#ebf7ed` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xebf7ed) | 第三级别：积极和正面引导的文本，如「验证通过」、「已支付」等\n`@G_color_bg_dark` | `#d7d8d9` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xd7d8d9) | 强调需要严格强调模块之间差异的场景\n`@G_color_bg_heading` | `#ebecec` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xebecec) | 不可点按钮的底色，模块间的区分或模块中信息的层次区分，如「表头」、「卡片标题区」等\n`@G_color_bg_light` | `#f5f5f6` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xf5f5f6) | 不可点输入框的底色，页面中用于区分不同区块时的背景底色，以及斑马条表单的底色\n\n#### 线条色（边框）\n\ncode | 值 | 预览 | 说明\n:-- | :-- | :--: | :--\n`@G_color_line_error` | `#f15533` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xf15533) | 最高级别：报错\n`@G_color_line_warn` | `#f15533` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xf15533) | 最高级别：警告\n`@G_color_line_emphasis` | `#ff8a00` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xff8a00) | 第二级别：突出说明，如「金额」、「最重要链接」等\n`@G_color_line_info` | `#00c1de` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x00c1de) | 第二级别：重要提示、重要连接\n`@G_color_line_positive` | `#35b34a` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x35b34a) | 第三级别：积极和正面引导的文本，如「验证通过」、「已支付」等\n`@G_color_line_dark` | `#373d41` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0x373d41) | 重线，强展示，突出可操作的组件的线 / 边框，如按钮\n`@G_color_line_heading` | `#c3c5c6` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xc3c5c6) | 深线，次强展示，可操作的组件的线 / 边框，如「输入框」\n`@G_color_line_regular` | `#d7d8d9` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xd7d8d9) | 常规线，常规展示的组件的线 / 边框，如「卡片」\n`@G_color_line_light` | `#ebecec` | ![](https://tps.alibaba-inc.com/app/ph/32x32?fontSize=0&bgColor=0xebecec) | 浅线，弱展示，区分段落或不可操作内容的线 / 边框\n\n### 组件相关\n\ncode | 值 | 说明\n:-- | :-- | :--\n`@G_height_top_bar` | `50px` | 控制台通用顶栏高度（如果有顶栏的话，body 上会有个 `hasTopbar` 的 class，可以用它来判断有没有顶栏）\n`@G_width_app_menu` | `180px` | 应用侧栏菜单的宽度\n`@G_height_app_menu_title` | `50px` | 应用侧栏菜单的标题高度\n`@G_height_app_menu_item` | `40px` | 应用侧栏菜单项的一般高度\n`@G_height_app_menu_item_s` | `32px` | 应用侧栏菜单项的稍小高度（用于实例列表）\n`@G_padding_app_menu` | `20px` | 应用侧栏菜单的左右边距\n`@G_z_index_popover` | `1001` | 布局（顶栏 + 侧栏）的 z-index 是 999，next-menu 的 z-index 偏偏是 1001，所以用 next-menu 的作为 popover 的\n\n## 方法\n\n### `#color` namespace\n\n有些颜色需要组合使用，这里主要封装了颜色组合使用的情形。\n\n> 其中的 `@hoveActive` 设为 `true` 表示需要 `:hover` 和 `:active` 状态。\n\n方法 | 说明\n:-- | :--\n`.error(@hoveActive)` | 错误文本色\n`.error-bg(@hoveActive)` | 错误深色背景（白色文字）\n`.error-bg-light()` | 错误浅色背景 + 错误文本色\n`.warn(@hoveActive)` | 警告文本色\n`.warn-bg(@hoveActive)` | 警告深色背景（白色文字）\n`.warn-bg-light()` | 警告浅色背景 + 警告文本色\n`.info(@hoveActive)` | 提示文本色\n`.info-bg(@hoveActive)` | 提示深色背景（白色文字）\n`.info-bg-light()` | 提示浅色背景 + 提示文本色\n`.success(@hoveActive)` | 成功文本色\n`.success-bg(@hoveActive)` | 成功深色背景（白色文字）\n`.success-bg-light()` | 成功浅色背景 + 成功文本色\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\n.your-selector {\n .error-text {\n #color.error();\n }\n .error-text-with-ha {\n #color.error(true);\n }\n .error-bg {\n #color.error-bg();\n }\n .error-bg-with-ha {\n #color.error-bg(true);\n }\n .error-bg-light {\n #color.error-bg-light(); // 无 :hover :active 设置\n }\n}\n```\n\n### `#glyph` namespace\n\niconfont 工厂方法，默认生成以 `glyph-` 打头的 iconfont 样式。\n\n方法 | 说明\n:-- | :--\n`.base(@fontFamily)` | 设置 glyph 的基础样式（但是 `@fontFamily` 要使用者自己写 `@font-face`），包括几个旋转用的帮助类\n`.type(@type; @code; @prefix: glyph)` | 定义一个字体，默认用 `glyph` 为 `className` 前缀，即传入 `@type` 为 `hello` 的话，`className` 则为 `glyph-hello`\n\n例子：\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\n// 你需要手动引入自己的 font-face\n@font-face {\n font-family: '________'; // 字体名称\n // 这里写相关的 src\n // src: ...;\n}\n\n.your-selector {\n #glyph.base(________); // 对应上方的字体名称\n \n #glyph.type(xx; '\\e600');\n #glyph.type(yy; '\\e601'; 'another-prefix'); // 如果不想用默认的前缀\n // ...\n}\n```\n\n在你的代码中使用形如 `your-selector glyph-xx` 的复合 `className` 即可。\n\n### `#triangle` namespace\n\n八个方向的三角形生成器。\n\n```\n up\n ▲\n ◤ tl - tr ◥\nleft ︎◀ | | ▶ right\n ◣ bl - br ◢\n ︎▼\n down\n```\n\n方法 | 说明\n:-- | :--\n`.base()` | 三角形基础，一般不允许在三角形中添加内容，所以它的宽高都是 0\n`.up(@b; @h; @c)` | 向上 ▲\n`.down(@b; @h; @c)` | 向下 ▼\n`.right(@b; @h; @c)` | 向右 ▶\n`.left(@b; @h; @c)` | 向左 ◀\n`.tl(@b; @h; @c)` | 左上角 ◤\n`.tr(@b; @h; @c)` | 右上角 ◥\n`.bl(@b; @h; @c)` | 左下角 ◣\n`.br(@b; @h; @c)` | 右下角 ◢\n\n例子：\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\n.your-selector {\n #triangle.base();\n #triangle.top(30px; 20px; #f00);\n}\n```\n\n### `#responsive` namespace\n\n简单的响应式封装方法。\n\n方法 | 说明\n:-- | :--\n`.retina(@rules)` | 适配视网膜屏\n`.above(@min; @rules)` | 在某个宽度之上（包含这个宽度）\n`.below(@max; @rules)` | 在某个宽度之下（包含这个宽度）\n`.between(@min; @max; @rules)` | 在某个宽度范围之内（包含边界）\n\n例子：\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\n.your-selector {\n #responsive.retina { // retina 屏幕\n // ...\n }\n #responsive.above(1024px; { // 超过 1024px 宽度\n // ...\n });\n #responsive.between(800px; 1023px; { // 在 [800px, 1023px] 宽度之间\n // ...\n });\n #responsive.below(799px; { // 小于 799px 宽度\n // ...\n });\n}\n```\n\n### `#typo` namespace\n\n文字和排版。\n\n方法 | 说明\n:-- | :--\n`.link(@level: 0)` | 链接，`@level=0` 表示一般的重要连接（一般为蓝色），`@level=1` 表示最重要的连接（一般为橙色），`@level=-1` 表示不重要的链接（一般为深灰色）\n`.ellipsis()` | 文字截断\n\n例子：\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\n.your-selector {\n .some-text {\n #typo.ellipsis();\n }\n a.very-important {\n #typo.link(1);\n }\n}\n```\n\n### `#util` namespace\n\n杂项工具。\n\n方法 | 说明\n:-- | :--\n`.clearfix()` | 修复因内部元素 `float` 造成的容器无高度的问题\n\n例子：\n\n```less\n@import '~@ali/wind-less-mixin/index';\n\nul.your-selector {\n #util.clearfix();\n \n li {\n float: left;\n // ...\n }\n}\n```\n","readmeFilename":"README.md","_id":"@alicloud/xconsole-less@2.0.0-next.0","_nodeVersion":"12.16.0","_npmVersion":"lerna/3.22.1/node@v12.16.0+x64 (darwin)","dist":{"integrity":"sha512-0xNBW41D/ctybqcsMRR18DPA7ud2QlK7+rvLjzx0LRKcDDDPDkaArQB1KlP5KKv0aaHGAItvEvOfP70v5iqv7g==","shasum":"f3d2ded266032190c4b6d65e7f2bcb8fd6201f18","tarball":"https://registry.npmjs.org/@alicloud/xconsole-less/-/xconsole-less-2.0.0-next.0.tgz","fileCount":20,"unpackedSize":32909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUd1aCRA9TVsSAnZWagAAkTIP/AnPIcEnDiI8hRGlGc4C\ncOVCSxcJn//eb8AyCJYhW7OqmBnzfqh6V+ppONtdaSQCK0ZZJ0tRhdpzfT8L\nOSq/pwV64d8ebvZ9JFLA04x6S3o09skFwKlB4C7XHl7BHM+GzP/p6RRSGclj\nLcUA68ajsz95w/Cf1eBSghq9pHOqReuNnK72sXXgqQgKOPVjaGLIZa67VHPO\nskrb+riQ8vC0oH7uXGr7RPY+klwnqw8X8di624P81BC/3ggCwyegKZ46PY2I\nUY37WJuXLu24pI/p15AWVTRXEvYN56F29EQRqEf3JIMEE5c0pbaZ7QnqVi/6\nYu2p/1lZzEPVG5lB99Hu18t6b8ml8v40VafT0h+9WP4SrR9fcjJ+ntCfc4V4\nk90HO4z/OcDW3sllvze3KcSVdOvsu0p+M44WlvRGE5kQLBha8VCeP8LCVyWc\nF5KXQNNIEMzVbIFRnXJ4/T3RMHbSHwIiZaTpTHjNo5mmMZsKBoYhyrZOFlBj\nUZEW6Eei7drOTk3ou8EuF2yIpXSORNEGO9PUPMeXilrgdi2oG/z/tKyyEghz\nxl4ZKMHnbyhpbd3NTkgIfILzNKET4NGSCpuUbqzBUH5s/SW3CPKzGbk8wCNA\nSNUd4lfzTaYPlmyZisfh5f2XlYNUAKpSfLNWukux9uhsLiNMH5YsoaOnF+ML\nnWg7\r\n=W0y6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUFlLpwx9OZY/XS6W7sYUlwLIvWRe21GBJZH7zfbiVRAIgDDX55TjwrFfop3Z49Ski1ZAcFbnRXKwsM+dDkJ3RDtw="}]},"maintainers":[{"name":"aliyunsdkteam","email":"sdk-team@alibabacloud.com"},{"name":"console-fe","email":"console-fe@alibabacloud.com"},{"name":"fengmk2","email":"fengmk2@gmail.com"},{"name":"jacksontian","email":"shyvo1987@gmail.com"},{"name":"pagecao","email":"cpj1106@gmail.com"}],"_npmUser":{"name":"console-fe","email":"console-fe@alibabacloud.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/xconsole-less_2.0.0-next.0_1599200602357_0.6644328690091188"},"_hasShrinkwrap":false}},"time":{"created":"2020-04-13T08:06:24.881Z","1.0.0-beta.1":"2020-04-13T08:06:25.291Z","modified":"2022-04-04T12:58:55.247Z","2.0.0-alpha.0":"2020-08-04T08:56:12.465Z","2.0.0-alpha.1":"2020-08-04T09:05:20.461Z","2.0.0-alpha.2":"2020-08-04T09:16:22.096Z","2.0.0-alpha.3":"2020-08-04T09:30:11.700Z","2.0.0-alpha.4":"2020-08-05T03:06:59.178Z","2.0.0-alpha.5":"2020-08-05T03:47:26.439Z","2.0.0-y.0":"2020-08-11T12:00:02.659Z","2.0.0-alpha.6":"2020-08-12T05:38:35.917Z","2.0.0-alpha.7":"2020-08-13T12:11:10.609Z","2.0.0-alpha.8":"2020-08-18T08:29:31.086Z","2.0.0-next.0":"2020-09-04T06:23:22.478Z"},"maintainers":[{"name":"aliyunsdkteam","email":"sdk-team@alibabacloud.com"},{"name":"console-fe","email":"console-fe@alibabacloud.com"},{"name":"fengmk2","email":"fengmk2@gmail.com"},{"name":"jacksontian","email":"shyvo1987@gmail.com"},{"name":"pagecao","email":"cpj1106@gmail.com"}],"description":"阿里云控制台通用 LESS 常量及方法","homepage":"https://github.com/aliyun/alibabacloud-console-design","repository":{"type":"git","url":"https://github.com/aliyun/alibabacloud-console-design.git"},"bugs":{"url":"https://github.com/aliyun/alibabacloud-console-design/issues"},"license":"MIT","readme":"","readmeFilename":"","author":{}}