色彩 Color
警告⚠️
虽然作者给出对应色值，但是在 aui.css 中并未直接定义可以单独使用的文字或者背景色。
作者在CSS文件中定义了12个颜色变量，在开发者自定义CSS样式时可以调用变量或者覆盖变量（CSS变量介绍 ）。具体定义如下：
:root
{
--aui-w: 100%;
--aui-h: 100%;
--aui-bg: #197DE0; /*主题背景色*/
--aui-color: #197DE0; /*主题文字色*/
--aui-border-bg: #fff;
--aui-blue: #197DE0;
--aui-black: #000;
--aui-white: #FFFFFF;
--aui-red: #f00;
--aui-red-f5: #FF5555;
--aui-btn-color: #197DE0;
--aui-btn-bg: #FFF;
--aui-btn-border-bg: #197DE0;
--aui-jianbian: linear-gradient(to right, #197DE0, #73B9EC);
}示例代码
<div class="aui-content">
<div class="content-top">
Color-颜色提供多种常用色彩，可点击页面对应色块复制色值。
</div>
<ul class="aui-card">
<div class="aui-card-title">
<span class="aui-card-title-line"></span>主色调
</div>
<li class="aui-card-main">
<div class="list" style="background: rgb(41, 121, 255);">
<p style="color: rgb(255, 255, 255);">Primary</p>
<p style="color: rgb(255, 255, 255);">#2979ff</p>
</div>
<div class="list" style="background: rgb(43, 133, 228);">
<p style="color: rgb(255, 255, 255);">Dark</p>
<p style="color: rgb(255, 255, 255);">#2b85e4</p>
</div>
<div class="list" style="background: rgb(160, 207, 255);">
<p style="color: rgb(255, 255, 255);">Disabled</p>
<p style="color: rgb(255, 255, 255);">#a0cfff</p>
</div>
<div class="list" style="background: rgb(236, 245, 255);">
<p style="color: rgb(170, 170, 170);">Light</p>
<p style="color: rgb(170, 170, 170);">#ecf5ff</p>
</div>
</li>
</ul>
<ul class="aui-card">
<div class="aui-card-title">
<span class="aui-card-title-line"></span>Error
</div>
<li class="aui-card-main">
<div class="list" style="background: rgb(250, 53, 52);">
<p style="color: rgb(255, 255, 255);">Error</p>
<p style="color: rgb(255, 255, 255);">#fa3534</p>
</div>
<div class="list" style="background: rgb(221, 97, 97);">
<p style="color: rgb(255, 255, 255);">Dark</p>
<p style="color: rgb(255, 255, 255);">#dd6161</p>
</div>
<div class="list" style="background: rgb(250, 182, 182);">
<p style="color: rgb(255, 255, 255);">Disabled</p>
<p style="color: rgb(255, 255, 255);">#fab6b6</p>
</div>
<div class="list" style="background: rgb(254, 240, 240);">
<p style="color: rgb(170, 170, 170);">Light</p>
<p style="color: rgb(170, 170, 170);">#fef0f0</p>
</div>
</li>
</ul>
<ul class="aui-card">
<div class="aui-card-title">
<span class="aui-card-title-line"></span>Waring
</div>
<li class="aui-card-main">
<div class="list" style="background: rgb(255, 153, 0);">
<p style="color: rgb(255, 255, 255);">Waring</p>
<p style="color: rgb(255, 255, 255);">#ff9900</p>
</div>
<div class="list" style="background: rgb(242, 145, 0);">
<p style="color: rgb(255, 255, 255);">Dark</p>
<p style="color: rgb(255, 255, 255);">#f29100</p>
</div>
<div class="list" style="background: rgb(252, 189, 113);">
<p style="color: rgb(255, 255, 255);">Disabled</p>
<p style="color: rgb(255, 255, 255);">#fcbd71</p>
</div>
<div class="list" style="background: rgb(253, 246, 236);">
<p style="color: rgb(170, 170, 170);">Light</p>
<p style="color: rgb(170, 170, 170);">#fdf6ec</p>
</div>
</li>
</ul>
<ul class="aui-card">
<div class="aui-card-title">
<span class="aui-card-title-line"></span>Info
</div>
<li class="aui-card-main">
<div class="list" style="background: rgb(144, 147, 153);">
<p style="color: rgb(255, 255, 255);">Info</p>
<p style="color: rgb(255, 255, 255);">#909399</p>
</div>
<div class="list" style="background: rgb(130, 132, 138);">
<p style="color: rgb(255, 255, 255);">Dark</p>
<p style="color: rgb(255, 255, 255);">#82848a</p>
</div>
<div class="list" style="background: rgb(200, 201, 204);">
<p style="color: rgb(255, 255, 255);">Disabled</p>
<p style="color: rgb(255, 255, 255);">#c8c9cc</p>
</div>
<div class="list" style="background: rgb(244, 244, 245);">
<p style="color: rgb(170, 170, 170);">Light</p>
<p style="color: rgb(170, 170, 170);">#f4f4f5</p>
</div>
</li>
</ul>
<ul class="aui-card">
<div class="aui-card-title">
<span class="aui-card-title-line"></span>Success
</div>
<li class="aui-card-main">
<div class="list" style="background: rgb(25, 190, 107);">
<p style="color: rgb(255, 255, 255);">Success</p>
<p style="color: rgb(255, 255, 255);">#19be6b</p>
</div>
<div class="list" style="background: rgb(24, 181, 102);">
<p style="color: rgb(255, 255, 255);">Dark</p>
<p style="color: rgb(255, 255, 255);">#18b566</p>
</div>
<div class="list" style="background: rgb(113, 213, 161);">
<p style="color: rgb(255, 255, 255);">Disabled</p>
<p style="color: rgb(255, 255, 255);">#71d5a1</p>
</div>
<div class="list" style="background: rgb(219, 241, 225);">
<p style="color: rgb(170, 170, 170);">Light</p>
<p style="color: rgb(170, 170, 170);">#dbf1e1</p>
</div>
</li>
</ul>
<ul class="aui-card">
<div class="aui-card-title">
<span class="aui-card-title-line"></span>文字颜色
</div>
<li class="aui-card-main">
<div class="list" style="background: rgb(48, 49, 51);">
<p style="color: rgb(255, 255, 255);">主要文字</p>
<p style="color: rgb(255, 255, 255);">#303133</p>
</div>
<div class="list" style="background: rgb(96, 98, 102);">
<p style="color: rgb(255, 255, 255);">常规文字</p>
<p style="color: rgb(255, 255, 255);">#606266</p>
</div>
<div class="list" style="background: rgb(144, 147, 153);">
<p style="color: rgb(255, 255, 255);">次要文字</p>
<p style="color: rgb(255, 255, 255);">#909399</p>
</div>
<div class="list" style="background: rgb(192, 196, 204);">
<p style="color: rgb(170, 170, 170);">占位文字</p>
<p style="color: rgb(170, 170, 170);">#c0c4cc</p>
</div>
</li>
</ul>
<ul class="aui-card">
<div class="aui-card-title">
<span class="aui-card-title-line"></span>边框颜色
</div>
<li class="aui-card-main">
<div class="list" style="background: rgb(220, 223, 230);">
<p style="color: rgb(170, 170, 170);">一级边框</p>
<p style="color: rgb(170, 170, 170);">#dcdfe6</p>
</div>
<div class="list" style="background: rgb(228, 231, 237);">
<p style="color: rgb(170, 170, 170);">二级边框</p>
<p style="color: rgb(170, 170, 170);">#e4e7ed</p>
</div>
<div class="list" style="background: rgb(235, 238, 245);">
<p style="color: rgb(170, 170, 170);">三级边框</p>
<p style="color: rgb(170, 170, 170);">#ebeef5</p>
</div>
<div class="list" style="background: rgb(242, 246, 252);">
<p style="color: rgb(170, 170, 170);">四级边框</p>
<p style="color: rgb(170, 170, 170);">#f2f6fc</p>
</div>
</li>
</ul>
<ul class="aui-card">
<div class="aui-card-title">
<span class="aui-card-title-line"></span>背景颜色
</div>
<li class="aui-card-main">
<div class="list" style="background: rgb(243, 244, 246);">
<p style="color: rgb(170, 170, 170);">背景颜色</p>
<p style="color: rgb(170, 170, 170);">#f3f4f6</p>
</div>
</li>
</ul>
</div>