@deeppaas/deeppaas-ui

deeppaas-ui

安装

$ npm i @deeppaas/deeppaas-ui
# or
$ yarn add @deeppaas/deeppaas-ui

颜色设置

样式优先级 ConfigProvider variables > document.body variables > 内置 variables

使用内置颜色

import { ConfigProvider } from '@deeppaas/deeppaas-ui'

...

return (
  <ConfigProvider
    variables={{
      'primary-color': '#2b0',
      'text-strong': '#000',
      'text-second': 'rgba(0, 0, 0, .75)',
    }}
  >
    {children}
  </ConfigProvider>
)

自定义颜色

body {
  --primary-color: #13c2c2;
  --primary-light-color: #e6fffb;
  --danger-color: #f5222d;
  --danger-light-color: #ffeaea;
  --warn-color: #fadb14;
  --warn-light-color: #fefbeb;
  --success-color: #52c41a;
  --success-light-color: #efffe8;
  --border-color: #d9d9d9;
  --background-color: #fafafa;
  --background-disabled: #f5f5f5;
  --text-strong: #000;
  --text-second: rgba(0, 0, 0, .75);
  --text-third: rgba(0, 0, 0, .5);

  --height-base: 32px;
  --height-lg: 40px;
  --height-sm: 24px;

  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-sm: 12px;

  --border-radius-base: 2px;
  --border-radius-lg: 2px;
  --border-radius-sm: 2px;

  --rate-star-color: #000;
  --rate-star-selected-color: #FCBF39;
}