Bailu UI

Appearance

Return to top
On this page

Design Attributes

The Design Attributes is a set of visual design attributes that can view the design attributes and default values of the component here.

Primary

NameValueCss VarDescription
var-primary-A
rgba(var(--lu-primary-A))--lu-primary-ALight / White Background
var-primary-B
rgba(var(--lu-primary-B))--lu-primary-BSpacial scene
var-primary-C
rgba(var(--lu-primary-C))--lu-primary-CText Disabled
var-primary-D
rgba(var(--lu-primary-D))--lu-primary-DDisabled
var-primary-E
rgba(var(--lu-primary-E))--lu-primary-EHover
var-primary-F
rgba(var(--lu-primary-F))--lu-primary-FNormal
var-primary-G
rgba(var(--lu-primary-G))--lu-primary-GClick / Active

Success

NameValueCss VarDescription
var-success-A
rgba(var(--lu-success-A))--lu-success-ALight / White Background
var-success-B
rgba(var(--lu-success-B))--lu-success-BSpacial scene
var-success-C
rgba(var(--lu-success-C))--lu-success-CText Disabled
var-success-D
rgba(var(--lu-success-D))--lu-success-DDisabled
var-success-E
rgba(var(--lu-success-E))--lu-success-EHover
var-success-F
rgba(var(--lu-success-F))--lu-success-FNormal
var-success-G
rgba(var(--lu-success-G))--lu-success-GClick / Active

Warning

NameValueCss VarDescription
var-warning-A
rgba(var(--lu-warning-A))--lu-warning-ALight / White Background
var-warning-B
rgba(var(--lu-warning-B))--lu-warning-BSpacial scene
var-warning-C
rgba(var(--lu-warning-C))--lu-warning-CText Disabled
var-warning-D
rgba(var(--lu-warning-D))--lu-warning-DDisabled
var-warning-E
rgba(var(--lu-warning-E))--lu-warning-EHover
var-warning-F
rgba(var(--lu-warning-F))--lu-warning-FNormal
var-warning-G
rgba(var(--lu-warning-G))--lu-warning-GClick / Active

Danger

NameValueCss VarDescription
var-danger-A
rgba(var(--lu-danger-A))--lu-danger-ALight / White Background
var-danger-B
rgba(var(--lu-danger-B))--lu-danger-BSpacial scene
var-danger-C
rgba(var(--lu-danger-C))--lu-danger-CText Disabled
var-danger-D
rgba(var(--lu-danger-D))--lu-danger-DDisabled
var-danger-E
rgba(var(--lu-danger-E))--lu-danger-EHover
var-danger-F
rgba(var(--lu-danger-F))--lu-danger-FNormal
var-danger-G
rgba(var(--lu-danger-G))--lu-danger-GClick / Active

Text

NameValueCss VarDescription
var-text-A
rgba(var(--lu-text-A))--lu-text-ALight / White Background
var-text-B
rgba(var(--lu-text-B))--lu-text-BSpacial scene
var-text-C
rgba(var(--lu-text-C))--lu-text-CText Disabled
var-text-D
rgba(var(--lu-text-D))--lu-text-DDisabled
var-text-E
rgba(var(--lu-text-E))--lu-text-EHover
var-text-F
rgba(var(--lu-text-F))--lu-text-FNormal
var-text-G
rgba(var(--lu-text-G))--lu-text-GClick / Active

Border Color

NameValueCss VarDescription
var-color-border-A
rgba(var(--lu-color-border-A))--lu-color-border-ALight Color
var-color-border-B
rgba(var(--lu-color-border-B))--lu-color-border-BNormal
var-color-border-C
rgba(var(--lu-color-border-C))--lu-color-border-CHover
var-color-border-D
rgba(var(--lu-color-border-D))--lu-color-border-DHeavy
var-color-border-E
rgba(var(--lu-color-border-E))--lu-color-border-EDisabled
var-color-border-F
rgba(var(--lu-color-border-F))--lu-color-border-FDeep
var-color-border-G
rgba(var(--lu-color-border-G))--lu-color-border-GDeepest

Fill Color

NameValueCss VarDescription
var-color-fill-A
rgba(var(--lu-color-fill-A))--lu-color-fill-ALight Color
var-color-fill-B
rgba(var(--lu-color-fill-B))--lu-color-fill-BNormal
var-color-fill-C
rgba(var(--lu-color-fill-C))--lu-color-fill-CHover
var-color-fill-D
rgba(var(--lu-color-fill-D))--lu-color-fill-DHeavy
var-color-fill-E
rgba(var(--lu-color-fill-E))--lu-color-fill-EDisabled
var-color-fill-F
rgba(var(--lu-color-fill-F))--lu-color-fill-FDeep
var-color-fill-G
rgba(var(--lu-color-fill-G))--lu-color-fill-GDeepest

Border Size

NameValueCss VarDescription
var-border-none0px--lu-border-none-
var-border-A1px--lu-border-A-
var-border-B2px--lu-border-B-
var-border-C3px--lu-border-C-
var-border-D4px--lu-border-D-
var-border-E5px--lu-border-E-

Border Radius

NameValueCss VarDescription
var-border-radius-none0px--lu-border-radius-none-
var-border-radius-small2px--lu-border-radius-small-
var-border-radius-medium4px--lu-border-radius-medium-
var-border-radius-large8px--lu-border-radius-large-
var-border-radius-round15px--lu-border-radius-round-
var-border-radius-circle50%--lu-border-radius-circle-

Border Style

NameValueCss VarDescription
var-border-style-solidsolid--lu-border-style-solid-
var-border-style-dasheddashed--lu-border-style-dashed-
var-border-style-dotteddotted--lu-border-style-dotted-

Size

NameValueCss VarDescription
var-size-none0px--lu-size-none-
var-size-14px--lu-size-1-
var-size-28px--lu-size-2-
var-size-312px--lu-size-3-
var-size-N(4*N)px--lu-size-N-
var-size-50200px--lu-size-50-

Shadow

NameValueCss VarDescription
var-shadow-nonenone--lu-shadow-none-
var-shadow-A0 0 1px rgba(0, 0, 0, 0.3)--lu-shadow-A-
var-shadow-B0 8px 24px -2px rgb(0 0 0 / 5%)--lu-shadow-B-
var-shadow-C0 0 5px rgba(0, 0, 0, 0.1)--lu-shadow-C-
var-shadow-D0 2px 5px rgba(0, 0, 0, 0.1)--lu-shadow-D-
var-shadow-center0 0 5px rgba(0, 0, 0, 0.1)--lu-shadow-center-
var-shadow-up0 -2px 5px rgba(0, 0, 0, 0.1)--lu-shadow-up-
var-shadow-down0 2px 5px rgba(0, 0, 0, 0.1)--lu-shadow-down-
var-shadow-left-2px 0 5px rgba(0, 0, 0, 0.1)--lu-shadow-left-
var-shadow-right2px 0 5px rgba(0, 0, 0, 0.1)--lu-shadow-right-
var-shadow-left-up-2px -2px 5px rgba(0, 0, 0, 0.1)--lu-shadow-left-up-
var-shadow-left-down-2px 2px 5px rgba(0, 0, 0, 0.1)--lu-shadow-left-down-
var-shadow-right-up2px -2px 5px rgba(0, 0, 0, 0.1)--lu-shadow-right-up-
var-shadow-right-down2px 2px 5px rgba(0, 0, 0, 0.1)--lu-shadow-right-down-

Opacity

NameValueCss VarDescription
var-opacity-none0--lu-opacity-none-
var-opacity-110%--lu-opacity-1-
var-opacity-220%--lu-opacity-2-
var-opacity-330%--lu-opacity-3-
var-opacity-440%--lu-opacity-4-
var-opacity-550%--lu-opacity-5-
var-opacity-660%--lu-opacity-6-
var-opacity-770%--lu-opacity-7-
var-opacity-880%--lu-opacity-8-
var-opacity-990%--lu-opacity-9-
var-opacity-10100%--lu-opacity-10-

© 2023 ziyiLike