Stepin Template

Appearance

On this page

CSS 变量对照表 ​

stepin 提供了 css、tailwindcss 和 less 变量。

主色和功能色 ​

css 变量tailwindcssless
--color-primary-1primary-50@primary-1
--color-primary-2primary-100@primary-2
.........
--color-primary-10primary-900@primary-10
--color-primary-bgprimary-bg@primary-bg
--color-primary-bg-hoverprimary-bg-hover@primary-bg-hover
--color-primary-borderprimary-border@primary-border
--color-primary-border-hoverprimary-border-hover@primary-border-hover
--color-primary-hoverprimary-hover@primary-hover
--color-primary-activeprimary-active@primary-active
--color-primary-textprimary-text@primary-text
--color-primary-text-hoverprimary-text-hover@primary-text-hover
--color-primary-text-activeprimary-text-active@primary-active
------
--color-info-1info-50@info-1
.........
--color-info-10info-900@info-10
--color-info-bginfo-bg@info-bg
.........
--color-info-text-activeinfo-text-active@info-active
------
--color-success-1success-50@success-1
.........
--color-success-10success-900@success-10
--color-success-bgsuccess-bg@success-bg
.........
--color-success-text-activesuccess-text-active@success-active
------
--color-warning-1warning-50@warning-1
.........
--color-warning-10warning-900@warning-10
--color-warning-bgwarning-bg@warning-bg
.........
--color-warning-text-activewarning-text-active@warning-active
------
--color-error-1error-50@error-1
.........
--color-error-10error-900@error-10
--color-error-bgerror-bg@error-bg
.........
--color-error-text-activeerror-text-active@error-active

用法示例

  • css
css
.link {
  color: var(--color-primary-text);
  background: var(--color-primary-bg);
  border: 1px solid var(--color-primary-border);
}
.link:hover {
  color: var(--color-primary-text-hover);
  background: var(--color-primary-bg-hover);
  border-color: var(--color-primary-border-hover);
}
  • tailwindcss
html
<div class="text-primary-text bg-primary-bg hover:text-primary-text-hover hover:bg-primary-bg-hover border border-solid border-primary-border hover:border-primary-border-hover"></div>
  • less
less
.link {
  color: @primary-text;
  background: @primary-bg;
  border: 1px solid @primary-border;
  &:hover {
    color: @primary-text-hover;
    background: @primary-bg-hover;
    border-color: @primary-border-hover;
  }
}

文本色及衍生色 ​

css 变量tailwindcssless
--color-text-1text-1@color-text-1
--color-text-2text-2@color-text-2
--color-text-3text-3@color-text-3
--color-text-4text-4@color-text-4
--color-subtextsubtext@color-subtext
--color-text-inversetext-inverse@color-text-inverse
--color-border-1border-1@color-border-1
--color-border-2border-2@color-border-2
--color-borderborder@color-border
--color-fill-1fill-1@color-fill-1
--color-fill-2fill-2@color-fill-2
--color-fill-3fill-3@color-fill-3
--color-fill-4fill-4@color-fill-4
--color-disableddisabled@color-disabled
--color-shadowshadow@color-shadow
--color-shadow-lightshadow-light@color-shadow-light

用法示例

  • css
css
.title {
  color: var(--color-text);
}
.subtitle {
  color: var(--color-subtext);
}
.box {
  background: var(--color-fill-1);
  border: 1px solid var(--color-border);
}
.box.disabled {
  background: var(--color-bg-disabled);
  border-color: var(--color-border-disabled);
}
  • tailwindcss
html
<h1 class="text-text"></h1>
<h2 class="text-subtext"></h2>
<div class="bg-fill-1 border border-solid border-border disabled:border-border-disabled disabled:bg-disabled"></div>
  • less
less
.title {
  color: @color-text;
}
.subtitle {
  color: @color-subtext;
}
.box {
  background: @color-fill-1;
  border: 1px solid @color-border;
  &:disabled {
    background: @color-bg-disabled;
    border-color: @color-border-disabled;
  }
}

背景色及衍生色 ​

css 变量tailwindcssless
--color-bg-layoutbg-layout@bg-layout
--color-bg-containerbg-container@bg-container
--color-bg-container-lightbg-container-light@bg-container-light
--color-bg-popoverbg-popover@bg-popover
--color-bg-spotlightbg-spotlight@bg-spotlight
--color-bg-maskbg-mask@bg-mask
--color-bg-hoverbg-hover@bg-hover
--color-bg-activebg-active@bg-active
--color-bg-disabledbg-disabled@bg-disabled
--color-bg-sidebg-side@bg-side
--color-bg-headerbg-header@bg-header
--color-bg-menubg-menu@bg-menu
--color-bg-submenubg-submenu@bg-submenu

用法示例

  • css
css
.container {
  background: var(--color-bg-container);
}
.container:disabled {
  background: var(--color-bg-disabled);
}
  • tailwindcss
html
<div class="bg-container disabled:bg-container"></div>
  • less
less
.container {
  background: @bg-container;
  &:disabled {
    background: @bg-disabled;
  }
}

字体和行高 ​

css 变量tailwindcssless
--font-sizetext-base@font-base
--font-size-xstext-xs@font-xs
--font-size-smtext-sm@font-sm
--font-size-mdtext-md@font-md
--font-size-lgtext-lg@font-lg
--font-size-xltext-xl@font-xl
--font-size-xxltext-xxl@font-xxl
--font-size-xxxltext-xxxl@font-xxxl
--leadingleading@leading
--leading-smleading-sm@leading-sm
--leading-lgleading-lg@leading-lg
--leading-head-1leading-head-1@leading-head-1
--leading-head-2leading-head-2@leading-head-2
--leading-head-3leading-head-3@leading-head-3
--leading-head-4leading-head-4@leading-head-4
--leading-head-5leading-head-5@leading-head-5

外间距 ​

css 变量tailwindcssless
--marginm-base@margin
--margin-xxsm-xxs@margin-xxs
--margin-xsm-xs@margin-xs
--margin-smm-sm@margin-sm
--margin-mdm-md@margin-md
--margin-lgm-lg@margin-lg
--margin-xlm-xl@margin-xl

内间距 ​

css 变量tailwindcssless
--paddingp-base@padding
--padding-xxsp-xxs@padding-xxs
--padding-xsp-xs@padding-xs
--padding-smp-sm@padding-sm
--padding-mdp-md@padding-md
--padding-lgp-lg@padding-lg
--padding-xlp-xl@padding-xl

其它 ​

css 变量tailwindcssless
--width-sidew-side@width-side
--width-side-collapsedw-side-collapsed@width-side-collapsed
--height-headerh-header@height-header
--height-footerh-footer@height-footer