@solvlab/ui

SolvUI

应用类库

• redix-ui

  https://www.radix-ui.com/docs/primitives/overview/introduction

• redix-ui-colors

  https://www.radix-ui.com/docs/colors/getting-started/installation

• tailwindcss

  https://tailwindcss.com/docs/installation

• react

开发/设计规范

目录结构

• src

  • assets

    存放公共静态文件，eg: css | svg

  • components

    UI 组件， 组件名采用驼峰命名法（首字母大写），eg: Button

    • common>styles.tsx

      公共 tailwindcss class

  • hooks

    公共处理 hook

  • stories

    test: 生成 UI 组件 doc

  • theme

    主题文件配置

  • index.ts

    组件库入口

主题 Color 命名与使用规范

序号	代表
1	App background	App 背景色
2	Subtle background	微差异 背景色
3	UI element background	UI 元素 背景色
4	Hovered UI element background	悬停的 UI 元素 背景色
5	Active / Selected UI element background	活动/选定的 UI 元素 背景色
6	Subtle borders and separators	边界/分隔符 颜色
7	UI element border and focus rings	UI 元素 边框色
8	Hovered UI element border	悬停的 UI 元素 边框色
9	Solid backgrounds	纯色背景
10	Hovered solid backgrounds	悬停的纯色背景
11	Low-contrast text	低对比度文本
12	High-contrast text	高对比度文本

Dev

• dev | test

pnpm sb

• build

pnpm build

Use

Install

yarn add @solvprotocol/ui

pnpm i @solvprotocol/ui

npm i @solvprotocol/ui

• Import css

import 'solvprotocol/ui/dist/index.css'
import 'solvprotocol/ui/dist/theme/index.css'

• Import components

import { Button } from '@solvprotocol/ui'

Custom theme

• Use css variable

@import '@solvlab/ui/dist/index.css';
@import '@solvlab/ui/dist/theme/index.css';

/* value = hsl */
:root {
  --solv-purple3: 240, 100%, 50%;
}
/* dark theme */
.dark-theme {
  --solv-purple3: 240, 100%, 20%;
}

• Use tailwindcss.config.js

module.exports = {
  content: ['node_modules/@solvlab/ui/dist/**/*.js'],
  theme: {
    extend: {
      colors: {
        sui: {
          theme3: 'color value',
        },
      },
      spacing: {
        // eg
        'sui-4': '14px',
      },
      fontSize: {
        // eg
        'sui-base': '14px',
      },
    },
  },
}