0.1.10 • Published 1 year ago
@solvlab/ui v0.1.10
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
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',
},
},
},
}