TPower Design

Appearance

Return to top
On this page

背景颜色

Class
属性Properties
bg-color-primary 默认		background-color: #2468F2
bg-color-primary-hover		background-color: #528EFF
bg-color-primary-active		background-color: #144BCC
bg-color-primary-background		background-color: #E6F0FF
bg-color-primary-1		background-color: #E6F0FF
bg-color-primary-2		background-color: #D4E5FF
bg-color-primary-3		background-color: #A8CAFF
bg-color-primary-4		background-color: #7DADFF
bg-color-primary-5		background-color: #528EFF
bg-color-primary-6		background-color: #2468F2
bg-color-primary-7		background-color: #144BCC
bg-color-primary-8		background-color: #0832A6
bg-color-primary-9		background-color: #001E80
bg-color-primary-10		background-color: #001259
bg-color-success 默认		background-color: #30BF13
bg-color-success-hover		background-color: #54CC39
bg-color-success-active		background-color: #1B9908
bg-color-success-background		background-color: #ECFFE6
bg-color-success-1		background-color: #ECFFE6
bg-color-success-2		background-color: #D1F2C7
bg-color-success-3		background-color: #A5E693
bg-color-success-4		background-color: #7BD964
bg-color-success-5		background-color: #54CC39
bg-color-success-6		background-color: #30BF13
bg-color-success-7		background-color: #1B9908
bg-color-success-8		background-color: #0B7300
bg-color-success-9		background-color: #054D00
bg-color-success-10		background-color: #012600
bg-color-error 默认		background-color: #F33E3E
bg-color-error-hover		background-color: #FF6966
bg-color-error-active		background-color: #CC292E
bg-color-error-background		background-color: #FFE8E6
bg-color-error-1		background-color: #FFE8E6
bg-color-error-2		background-color: #FFDBD9
bg-color-error-3		background-color: #FFB6B3
bg-color-error-4		background-color: #FF908C
bg-color-error-5		background-color: #FF6966
bg-color-error-6		background-color: #F33E3E
bg-color-error-7		background-color: #CC292E
bg-color-error-8		background-color: #A61922
bg-color-error-9		background-color: #800D18
bg-color-error-10		background-color: #590410
bg-color-warning 默认		background-color: #FF9326
bg-color-warning-hover		background-color: #FFAB52
bg-color-warning-active		background-color: #D97116
bg-color-warning-background		background-color: #FFF4E6
bg-color-warning-1		background-color: #FFF4E6
bg-color-warning-2		background-color: #FFECD4
bg-color-warning-3		background-color: #FFD8A8
bg-color-warning-4		background-color: #FFC27D
bg-color-warning-5		background-color: #FFAB52
bg-color-warning-6		background-color: #FF9326
bg-color-warning-7		background-color: #D97116
bg-color-warning-8		background-color: #B35209
bg-color-warning-9		background-color: #8C3800
bg-color-warning-10		background-color: #662500
bg-color-gray-1		background-color: #070B14
bg-color-gray-2 默认		background-color: #141A26
bg-color-gray-3		background-color: #2E3440
bg-color-gray-4		background-color: #5A5E66
bg-color-gray-5		background-color: #7F848C
bg-color-gray-6		background-color: #B4B7BF
bg-color-gray-7		background-color: #CED2D9
bg-color-gray-8		background-color: #E4E5EB
bg-color-gray-9		background-color: #F2F4F9
bg-color-gray-10		background-color: #F7F7F9
bg-color-gray-11		background-color: #FFFFFF
bg-color-body-bg		background-color: #F7F7F9
bg-color-card-bg		background-color: #FFFFFF
bg-color-mask-active		background: rgba(7, 10, 12, 0.5)

基本使用

用于控制元素背景颜色的实用程序。使用 bg-* 类来设置元素的背景颜色。

bg-color-primary
bg-color-primary-hover
bg-color-primary-active
html
<button class="bg-color-primary">Button A</button>
<button class="bg-color-primary-hover">Button B</button>
<button class="bg-color-primary-active">Button C</button>

文本颜色

Class
属性Properties
text-color-text 默认文 本 color: #151B26
text-color-text-secondary文 本 color: #5C5F66
text-color-text-tertiary文 本 color: #84868C
text-color-gray-1文 本 color: #070B14
text-color-gray-2文 本 color: #141A26
text-color-gray-3文 本 color: #2E3440
text-color-gray-4文 本 color: #5A5E66
text-color-gray-5文 本 color: #7F848C
text-color-gray-6文 本 color: #B4B7BF
text-color-gray-7文 本 color: #CED2D9
text-color-gray-8文 本 color: #E4E5EB
text-color-gray-9文 本 color: #F2F4F9
text-color-gray-10文 本 color: #F7F7F9
text-color-gray-11文 本 color: #FFFFFF
text-color-primary文 本 color: #2468F2
text-color-primary-hover文 本 color: #528EFF
text-color-primary-active文 本 color: #144BCC
text-color-primary-1文 本 color: #E6F0FF
text-color-primary-2文 本 color: #D4E5FF
text-color-primary-3文 本 color: #A8CAFF
text-color-primary-4文 本 color: #7DADFF
text-color-primary-5文 本 color: #528EFF
text-color-primary-6文 本 color: #2468F2
text-color-primary-7文 本 color: #144BCC
text-color-primary-8文 本 color: #0832A6
text-color-primary-9文 本 color: #001E80
text-color-primary-10文 本 color: #001259
text-color-success文 本 color: #30BF13
text-color-success-hover文 本 color: #54CC39
text-color-success-active文 本 color: #1B9908
text-color-success-1文 本 color: #ECFFE6
text-color-success-2文 本 color: #D1F2C7
text-color-success-3文 本 color: #A5E693
text-color-success-4文 本 color: #7BD964
text-color-success-5文 本 color: #54CC39
text-color-success-6文 本 color: #30BF13
text-color-success-7文 本 color: #1B9908
text-color-success-8文 本 color: #0B7300
text-color-success-9文 本 color: #054D00
text-color-success-10文 本 color: #012600
text-color-warning文 本 color: #FF9326
text-color-warning-hover文 本 color: #FFAB52
text-color-warning-active文 本 color: #D97116
text-color-warning-1文 本 color: #FFF4E6
text-color-warning-2文 本 color: #FFECD4
text-color-warning-3文 本 color: #FFD8A8
text-color-warning-4文 本 color: #FFC27D
text-color-warning-5文 本 color: #FFAB52
text-color-warning-6文 本 color: #FF9326
text-color-warning-7文 本 color: #D97116
text-color-warning-8文 本 color: #B35209
text-color-warning-9文 本 color: #8C3800
text-color-warning-10文 本 color: #662500
text-color-error文 本 color: #F33E3E
text-color-error-hover文 本 color: #FF6966
text-color-error-active文 本 color: #CC292E
text-color-error-1文 本 color: #FFE8E6
text-color-error-2文 本 color: #FFDBD9
text-color-error-3文 本 color: #FFB6B3
text-color-error-4文 本 color: #FF908C
text-color-error-5文 本 color: #FF6966
text-color-error-6文 本 color: #F33E3E
text-color-error-7文 本 color: #CC292E
text-color-error-8文 本 color: #A61922
text-color-error-9文 本 color: #800D18
text-color-error-10文 本 color: #590410
text-color-text-disabled文 本 color: #B8BABF
text-color-link文 本 color: #2468F2
text-color-link-hover文 本 color: #528EFF
text-color-link-active文 本 color: #144BCC

基本使用

用于控制元素文本颜色的实用程序。使用 text-* 类来设置元素的文本颜色。

text-color-text

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-color-text-secondary

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-color-text-tertiary

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

html
<p class="text-color-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="text-color-text-secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="text-color-text-tertiary">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

文本装饰色

Class
属性Properties
decoration-color-primary 默认text-decoration-color: #2468F2
decoration-color-primary-1text-decoration-color: #E6F0FF
decoration-color-primary-2text-decoration-color: #D4E5FF
decoration-color-primary-3text-decoration-color: #A8CAFF
decoration-color-primary-4text-decoration-color: #7DADFF
decoration-color-primary-5text-decoration-color: #528EFF
decoration-color-primary-6text-decoration-color: #2468F2
decoration-color-primary-7text-decoration-color: #144BCC
decoration-color-primary-8text-decoration-color: #0832A6
decoration-color-primary-9text-decoration-color: #001E80
decoration-color-primary-10text-decoration-color: #001259
decoration-color-successtext-decoration-color: #30BF13
decoration-color-success-1text-decoration-color: #ECFFE6
decoration-color-success-2text-decoration-color: #D1F2C7
decoration-color-success-3text-decoration-color: #A5E693
decoration-color-success-4text-decoration-color: #7BD964
decoration-color-success-5text-decoration-color: #54CC39
decoration-color-success-6text-decoration-color: #30BF13
decoration-color-success-7text-decoration-color: #1B9908
decoration-color-success-8text-decoration-color: #0B7300
decoration-color-success-9text-decoration-color: #054D00
decoration-color-success-10text-decoration-color: #012600
decoration-color-warningtext-decoration-color: #FF9326
decoration-color-warning-1text-decoration-color: #FFF4E6
decoration-color-warning-2text-decoration-color: #FFECD4
decoration-color-warning-3text-decoration-color: #FFD8A8
decoration-color-warning-4text-decoration-color: #FFC27D
decoration-color-warning-5text-decoration-color: #FFAB52
decoration-color-warning-6text-decoration-color: #FF9326
decoration-color-warning-7text-decoration-color: #D97116
decoration-color-warning-8text-decoration-color: #B35209
decoration-color-warning-9text-decoration-color: #8C3800
decoration-color-warning-10text-decoration-color: #662500
decoration-color-errortext-decoration-color: #F33E3E
decoration-color-error-1text-decoration-color: #FFE8E6
decoration-color-error-2text-decoration-color: #FFDBD9
decoration-color-error-3text-decoration-color: #FFB6B3
decoration-color-error-4text-decoration-color: #FF908C
decoration-color-error-5text-decoration-color: #FF6966
decoration-color-error-6text-decoration-color: #F33E3E
decoration-color-error-7text-decoration-color: #CC292E
decoration-color-error-8text-decoration-color: #A61922
decoration-color-error-9text-decoration-color: #800D18
decoration-color-error-10text-decoration-color: #590410
decoration-color-gray-1text-decoration-color: #070B14
decoration-color-gray-2text-decoration-color: #141A26
decoration-color-gray-3text-decoration-color: #2E3440
decoration-color-gray-4text-decoration-color: #5A5E66
decoration-color-gray-5text-decoration-color: #7F848C
decoration-color-gray-6text-decoration-color: #B4B7BF
decoration-color-gray-7text-decoration-color: #CED2D9
decoration-color-gray-8text-decoration-color: #E4E5EB
decoration-color-gray-9text-decoration-color: #F2F4F9
decoration-color-gray-10text-decoration-color: #F7F7F9
decoration-color-gray-11text-decoration-color: #FFFFFF

基本使用

用于控制元素文本装饰色的实用程序。使用 decoration-* 类来设置元素的文本装饰色。

I'm Derek, an astro-engineer based in Tattooine. I like to build X-Wings at My Company, Inc.. Outside of work, I like to watch pod-racing and have light-saber battles.

html
<p>
  I'm Derek, an astro-engineer based in Tattooine. I like to build X-Wings at
  <a class="underline decoration-color-primary">My Company, Inc.</a>.
  Outside of work, I like to <a class="underline decoration-color-error">watch pod-racing</a> and have <a>light-saber battles</a>.
</p>

边框颜色

Class
属性Properties
border-color-border 默认
border-color: #E8E9EB
border-color-gray-1
border-color: #070B14
border-color-gray-2
border-color: #141A26
border-color-gray-3
border-color: #2E3440
border-color-gray-4
border-color: #5A5E66
border-color-gray-5
border-color: #7F848C
border-color-gray-6
border-color: #B4B7BF
border-color-gray-7
border-color: #CED2D9
border-color-gray-8
border-color: #E4E5EB
border-color-gray-9
border-color: #F2F4F9
border-color-gray-10
border-color: #F7F7F9
border-color-gray-11
border-color: #FFFFFF
border-color-primary
border-color: #2468F2
border-color-primary-1
border-color: #E6F0FF
border-color-primary-2
border-color: #D4E5FF
border-color-primary-3
border-color: #A8CAFF
border-color-primary-4
border-color: #7DADFF
border-color-primary-5
border-color: #528EFF
border-color-primary-6
border-color: #2468F2
border-color-primary-7
border-color: #144BCC
border-color-primary-8
border-color: #0832A6
border-color-primary-9
border-color: #001E80
border-color-primary-10
border-color: #001259
border-color-success
border-color: #30BF13
border-color-success-1
border-color: #ECFFE6
border-color-success-2
border-color: #D1F2C7
border-color-success-3
border-color: #A5E693
border-color-success-4
border-color: #7BD964
border-color-success-5
border-color: #54CC39
border-color-success-6
border-color: #30BF13
border-color-success-7
border-color: #1B9908
border-color-success-8
border-color: #0B7300
border-color-success-9
border-color: #054D00
border-color-success-10
border-color: #012600
border-color-warning
border-color: #FF9326
border-color-warning-1
border-color: #FFF4E6
border-color-warning-2
border-color: #FFECD4
border-color-warning-3
border-color: #FFD8A8
border-color-warning-4
border-color: #FFC27D
border-color-warning-5
border-color: #FFAB52
border-color-warning-6
border-color: #FF9326
border-color-warning-7
border-color: #D97116
border-color-warning-8
border-color: #B35209
border-color-warning-9
border-color: #8C3800
border-color-warning-10
border-color: #662500
border-color-error
border-color: #F33E3E
border-color-error-1
border-color: #FFE8E6
border-color-error-2
border-color: #FFDBD9
border-color-error-3
border-color: #FFB6B3
border-color-error-4
border-color: #FF908C
border-color-error-5
border-color: #FF6966
border-color-error-6
border-color: #F33E3E
border-color-error-7
border-color: #CC292E
border-color-error-8
border-color: #A61922
border-color-error-9
border-color: #800D18
border-color-error-10
border-color: #590410

基本使用

用于控制元素边框颜色的实用程序。使用 border-* 类来设置元素的边框颜色。

html
<input class="border-2 border-color-error"/>

<div class="border-5 border-color-primary" />

轮廓颜色

Class
属性Properties
outline-color-primary 默认outline-color: #2468F2
outline-color-primary-1outline-color: #E6F0FF
outline-color-primary-2outline-color: #D4E5FF
outline-color-primary-3outline-color: #A8CAFF
outline-color-primary-4outline-color: #7DADFF
outline-color-primary-5outline-color: #528EFF
outline-color-primary-6outline-color: #2468F2
outline-color-primary-7outline-color: #144BCC
outline-color-primary-8outline-color: #0832A6
outline-color-primary-9outline-color: #001E80
outline-color-primary-10outline-color: #001259
outline-color-successoutline-color: #30BF13
outline-color-success-1outline-color: #ECFFE6
outline-color-success-2outline-color: #D1F2C7
outline-color-success-3outline-color: #A5E693
outline-color-success-4outline-color: #7BD964
outline-color-success-5outline-color: #54CC39
outline-color-success-6outline-color: #30BF13
outline-color-success-7outline-color: #1B9908
outline-color-success-8outline-color: #0B7300
outline-color-success-9outline-color: #054D00
outline-color-success-10outline-color: #012600
outline-color-warningoutline-color: #FF9326
outline-color-warning-1outline-color: #FFF4E6
outline-color-warning-2outline-color: #FFECD4
outline-color-warning-3outline-color: #FFD8A8
outline-color-warning-4outline-color: #FFC27D
outline-color-warning-5outline-color: #FFAB52
outline-color-warning-6outline-color: #FF9326
outline-color-warning-7outline-color: #D97116
outline-color-warning-8outline-color: #B35209
outline-color-warning-9outline-color: #8C3800
outline-color-warning-10outline-color: #662500
outline-color-erroroutline-color: #F33E3E
outline-color-error-1outline-color: #FFE8E6
outline-color-error-2outline-color: #FFDBD9
outline-color-error-3outline-color: #FFB6B3
outline-color-error-4outline-color: #FF908C
outline-color-error-5outline-color: #FF6966
outline-color-error-6outline-color: #F33E3E
outline-color-error-7outline-color: #CC292E
outline-color-error-8outline-color: #A61922
outline-color-error-9outline-color: #800D18
outline-color-error-10outline-color: #590410
outline-color-gray-1outline-color: #070B14
outline-color-gray-2outline-color: #141A26
outline-color-gray-3outline-color: #2E3440
outline-color-gray-4outline-color: #5A5E66
outline-color-gray-5outline-color: #7F848C
outline-color-gray-6outline-color: #B4B7BF
outline-color-gray-7outline-color: #CED2D9
outline-color-gray-8outline-color: #E4E5EB
outline-color-gray-9outline-color: #F2F4F9
outline-color-gray-10outline-color: #F7F7F9
outline-color-gray-11outline-color: #FFFFFF

基本使用

用于控制元素轮廓颜色的实用程序。使用 outline-* 类来设置元素的轮廓颜色。

html
<button class="outline outline-offset-2 outline-color-primary">Button A</button>
<button class="outline outline-offset-2 outline-color-warning-5">Button B</button>
<button class="outline outline-offset-2 outline-color-error-5">Button C</button>

阴影颜色

Class
属性Properties
shadow-shadow-color--shadow-shadow-color: #000000

基本使用

用于控制元素阴影颜色的实用程序。使用 shadow-* 类来设置元素的阴影颜色。

强调色

用于控制表单控件强调色的工具。

Class
属性Properties
accent-color-primary 默认accent-color: #2468F2
accent-color-primary-1accent-color: #E6F0FF
accent-color-primary-2accent-color: #D4E5FF
accent-color-primary-3accent-color: #A8CAFF
accent-color-primary-4accent-color: #7DADFF
accent-color-primary-5accent-color: #528EFF
accent-color-primary-6accent-color: #2468F2
accent-color-primary-7accent-color: #144BCC
accent-color-primary-8accent-color: #0832A6
accent-color-primary-9accent-color: #001E80
accent-color-primary-10accent-color: #001259
accent-color-successaccent-color: #30BF13
accent-color-success-1accent-color: #ECFFE6
accent-color-success-2accent-color: #D1F2C7
accent-color-success-3accent-color: #A5E693
accent-color-success-4accent-color: #7BD964
accent-color-success-5accent-color: #54CC39
accent-color-success-6accent-color: #30BF13
accent-color-success-7accent-color: #1B9908
accent-color-success-8accent-color: #0B7300
accent-color-success-9accent-color: #054D00
accent-color-success-10accent-color: #012600
accent-color-warningaccent-color: #FF9326
accent-color-warning-1accent-color: #FFF4E6
accent-color-warning-2accent-color: #FFECD4
accent-color-warning-3accent-color: #FFD8A8
accent-color-warning-4accent-color: #FFC27D
accent-color-warning-5accent-color: #FFAB52
accent-color-warning-6accent-color: #FF9326
accent-color-warning-7accent-color: #D97116
accent-color-warning-8accent-color: #B35209
accent-color-warning-9accent-color: #8C3800
accent-color-warning-10accent-color: #662500
accent-color-erroraccent-color: #F33E3E
accent-color-error-1accent-color: #FFE8E6
accent-color-error-2accent-color: #FFDBD9
accent-color-error-3accent-color: #FFB6B3
accent-color-error-4accent-color: #FF908C
accent-color-error-5accent-color: #FF6966
accent-color-error-6accent-color: #F33E3E
accent-color-error-7accent-color: #CC292E
accent-color-error-8accent-color: #A61922
accent-color-error-9accent-color: #800D18
accent-color-error-10accent-color: #590410
accent-color-gray-1accent-color: #070B14
accent-color-gray-2accent-color: #141A26
accent-color-gray-3accent-color: #2E3440
accent-color-gray-4accent-color: #5A5E66
accent-color-gray-5accent-color: #7F848C
accent-color-gray-6accent-color: #B4B7BF
accent-color-gray-7accent-color: #CED2D9
accent-color-gray-8accent-color: #E4E5EB
accent-color-gray-9accent-color: #F2F4F9
accent-color-gray-10accent-color: #F7F7F9
accent-color-gray-11accent-color: #FFFFFF

基本使用

使用实用程序更改元素的强调色。这有助于通过覆盖浏览器的默认颜色来设置复选框和单选组等元素的样式。accent-*

html
<label>
  <input type="checkbox" checked> Browser default
</label>
<label>
  <input type="checkbox" class="accent-color-success-7" checked> Customized
</label>

插入符颜色

Class
属性Properties
caret-color-primary 默认caret-color: #2468F2
caret-color-primary-1caret-color: #E6F0FF
caret-color-primary-2caret-color: #D4E5FF
caret-color-primary-3caret-color: #A8CAFF
caret-color-primary-4caret-color: #7DADFF
caret-color-primary-5caret-color: #528EFF
caret-color-primary-6caret-color: #2468F2
caret-color-primary-7caret-color: #144BCC
caret-color-primary-8caret-color: #0832A6
caret-color-primary-9caret-color: #001E80
caret-color-primary-10caret-color: #001259
caret-color-successcaret-color: #30BF13
caret-color-success-1caret-color: #ECFFE6
caret-color-success-2caret-color: #D1F2C7
caret-color-success-3caret-color: #A5E693
caret-color-success-4caret-color: #7BD964
caret-color-success-5caret-color: #54CC39
caret-color-success-6caret-color: #30BF13
caret-color-success-7caret-color: #1B9908
caret-color-success-8caret-color: #0B7300
caret-color-success-9caret-color: #054D00
caret-color-success-10caret-color: #012600
caret-color-warningcaret-color: #FF9326
caret-color-warning-1caret-color: #FFF4E6
caret-color-warning-2caret-color: #FFECD4
caret-color-warning-3caret-color: #FFD8A8
caret-color-warning-4caret-color: #FFC27D
caret-color-warning-5caret-color: #FFAB52
caret-color-warning-6caret-color: #FF9326
caret-color-warning-7caret-color: #D97116
caret-color-warning-8caret-color: #B35209
caret-color-warning-9caret-color: #8C3800
caret-color-warning-10caret-color: #662500
caret-color-errorcaret-color: #F33E3E
caret-color-error-1caret-color: #FFE8E6
caret-color-error-2caret-color: #FFDBD9
caret-color-error-3caret-color: #FFB6B3
caret-color-error-4caret-color: #FF908C
caret-color-error-5caret-color: #FF6966
caret-color-error-6caret-color: #F33E3E
caret-color-error-7caret-color: #CC292E
caret-color-error-8caret-color: #A61922
caret-color-error-9caret-color: #800D18
caret-color-error-10caret-color: #590410
caret-color-gray-1caret-color: #070B14
caret-color-gray-2caret-color: #141A26
caret-color-gray-3caret-color: #2E3440
caret-color-gray-4caret-color: #5A5E66
caret-color-gray-5caret-color: #7F848C
caret-color-gray-6caret-color: #B4B7BF
caret-color-gray-7caret-color: #CED2D9
caret-color-gray-8caret-color: #E4E5EB
caret-color-gray-9caret-color: #F2F4F9
caret-color-gray-10caret-color: #F7F7F9
caret-color-gray-11caret-color: #FFFFFF

基本使用

用于控制元素插入符颜色的实用程序。使用 caret-* 类来设置元素的插入符颜色。

TIP

☝️ 聚焦文本区域以查看新的插入符号颜色 ☝️

html
  <textarea type="text" class="caret-color-primary" />

SVG填充颜色

Class
属性Properties
fill-color-primary 默认fill: #2468F2
fill-color-primary-1fill: #E6F0FF
fill-color-primary-2fill: #D4E5FF
fill-color-primary-3fill: #A8CAFF
fill-color-primary-4fill: #7DADFF
fill-color-primary-5fill: #528EFF
fill-color-primary-6fill: #2468F2
fill-color-primary-7fill: #144BCC
fill-color-primary-8fill: #0832A6
fill-color-primary-9fill: #001E80
fill-color-primary-10fill: #001259
fill-color-successfill: #30BF13
fill-color-success-1fill: #ECFFE6
fill-color-success-2fill: #D1F2C7
fill-color-success-3fill: #A5E693
fill-color-success-4fill: #7BD964
fill-color-success-5fill: #54CC39
fill-color-success-6fill: #30BF13
fill-color-success-7fill: #1B9908
fill-color-success-8fill: #0B7300
fill-color-success-9fill: #054D00
fill-color-success-10fill: #012600
fill-color-warningfill: #FF9326
fill-color-warning-1fill: #FFF4E6
fill-color-warning-2fill: #FFECD4
fill-color-warning-3fill: #FFD8A8
fill-color-warning-4fill: #FFC27D
fill-color-warning-5fill: #FFAB52
fill-color-warning-6fill: #FF9326
fill-color-warning-7fill: #D97116
fill-color-warning-8fill: #B35209
fill-color-warning-9fill: #8C3800
fill-color-warning-10fill: #662500
fill-color-errorfill: #F33E3E
fill-color-error-1fill: #FFE8E6
fill-color-error-2fill: #FFDBD9
fill-color-error-3fill: #FFB6B3
fill-color-error-4fill: #FF908C
fill-color-error-5fill: #FF6966
fill-color-error-6fill: #F33E3E
fill-color-error-7fill: #CC292E
fill-color-error-8fill: #A61922
fill-color-error-9fill: #800D18
fill-color-error-10fill: #590410
fill-color-gray-1fill: #070B14
fill-color-gray-2fill: #141A26
fill-color-gray-3fill: #2E3440
fill-color-gray-4fill: #5A5E66
fill-color-gray-5fill: #7F848C
fill-color-gray-6fill: #B4B7BF
fill-color-gray-7fill: #CED2D9
fill-color-gray-8fill: #E4E5EB
fill-color-gray-9fill: #F2F4F9
fill-color-gray-10fill: #F7F7F9
fill-color-gray-11fill: #FFFFFF

基本使用

用于控制SVG填充颜色的实用程序。使用 fill-* 类来设置SVG填充颜色。

html
<svg class="fill-color-primary ...">
  <!-- ... -->
</svg>

SVG描边颜色

Class
属性Properties
stroke-color-primary 默认stroke: #2468F2
stroke-color-primary-1stroke: #E6F0FF
stroke-color-primary-2stroke: #D4E5FF
stroke-color-primary-3stroke: #A8CAFF
stroke-color-primary-4stroke: #7DADFF
stroke-color-primary-5stroke: #528EFF
stroke-color-primary-6stroke: #2468F2
stroke-color-primary-7stroke: #144BCC
stroke-color-primary-8stroke: #0832A6
stroke-color-primary-9stroke: #001E80
stroke-color-primary-10stroke: #001259
stroke-color-successstroke: #30BF13
stroke-color-success-1stroke: #ECFFE6
stroke-color-success-2stroke: #D1F2C7
stroke-color-success-3stroke: #A5E693
stroke-color-success-4stroke: #7BD964
stroke-color-success-5stroke: #54CC39
stroke-color-success-6stroke: #30BF13
stroke-color-success-7stroke: #1B9908
stroke-color-success-8stroke: #0B7300
stroke-color-success-9stroke: #054D00
stroke-color-success-10stroke: #012600
stroke-color-warningstroke: #FF9326
stroke-color-warning-1stroke: #FFF4E6
stroke-color-warning-2stroke: #FFECD4
stroke-color-warning-3stroke: #FFD8A8
stroke-color-warning-4stroke: #FFC27D
stroke-color-warning-5stroke: #FFAB52
stroke-color-warning-6stroke: #FF9326
stroke-color-warning-7stroke: #D97116
stroke-color-warning-8stroke: #B35209
stroke-color-warning-9stroke: #8C3800
stroke-color-warning-10stroke: #662500
stroke-color-errorstroke: #F33E3E
stroke-color-error-1stroke: #FFE8E6
stroke-color-error-2stroke: #FFDBD9
stroke-color-error-3stroke: #FFB6B3
stroke-color-error-4stroke: #FF908C
stroke-color-error-5stroke: #FF6966
stroke-color-error-6stroke: #F33E3E
stroke-color-error-7stroke: #CC292E
stroke-color-error-8stroke: #A61922
stroke-color-error-9stroke: #800D18
stroke-color-error-10stroke: #590410
stroke-color-gray-1stroke: #070B14
stroke-color-gray-2stroke: #141A26
stroke-color-gray-3stroke: #2E3440
stroke-color-gray-4stroke: #5A5E66
stroke-color-gray-5stroke: #7F848C
stroke-color-gray-6stroke: #B4B7BF
stroke-color-gray-7stroke: #CED2D9
stroke-color-gray-8stroke: #E4E5EB
stroke-color-gray-9stroke: #F2F4F9
stroke-color-gray-10stroke: #F7F7F9
stroke-color-gray-11stroke: #FFFFFF

基本使用

用于控制SVG描边颜色的实用程序。使用 stroke-* 类来设置SVG描边颜色。

html
<svg class="stroke-color-gray-6 ...">
  <!--... -->
</svg>