1.2.1 • Published 4 months ago
@dreamview/dreamview-theme v1.2.1
@dreamview/dreamview-theme
1、dreamview-theme是什么
dreamview-theme是dreamview主题样式变量的全集,赋予每一个变量一种语义,在开发过程中避免直接使用css样式,以达到统一管理样式的目的
2、Usage
import {Provider as ThemeProvider, useMakeStyle} from '@dreamview/dreamview-theme';
function useStyle() {
const hoc = useMakeStyle((theme) => {
root: {
backgroundColor: theme.tokens.backgroundColor.main,
color: theme.tokens.font.color.main,
},
})
}
function ChildComponents() {
const {classes} = useStyle();
return (<div className={classes.root}>root</div>)
}
function App(){
return (
<ThemeProvider>
<ChildComponents />
</ThemeProvider>
)
}
3、自定义主题
通过替换tokens的变量的值达到替换主题的效果
import {Provider as ThemeProvider, useMakeStyle} from '@dreamview/dreamview-theme';
function useStyle() {
const hoc = useMakeStyle((theme) => {
root: {
backgroundColor: theme.tokens.backgroundColor.main,
color: theme.tokens.font.color.main,
},
})
}
function ChildComponents() {
const {classes} = useStyle();
return (<div className={classes.root}>root</div>)
}
function App(){
const customTheme = {
tokens: {
backgroundColor: {
main: 'blue'
}
}
}
return (
<ThemeProvider config={customTheme}>
<ChildComponents />
</ThemeProvider>
)
}
4、使用components,dremview-colors中提供了一部分定义好的样式的合集,包含了组件样式和部分功能样式,正在完善中,我们称为components
import {Provider as ThemeProvider, useMakeStyle} from '@dreamview/dreamview-theme';
// 这里以button组件样式为例
function useStyle() {
const hoc = useMakeStyle((theme) => {
root: theme.components.button.primary,
})
}
function ChildComponents() {
const {classes} = useStyle();
return (<button className={classes.root}>root</button>)
}
function App(){
return (
<ThemeProvider>
<ChildComponents />
</ThemeProvider>
)
}
5、开发
├── README.md
├── createStyles.tsx // 创建provider和context
├── main.ts // 入口文件
├── scripts
│ └── generateType.js // 生成类型定义的脚本
├── tokens // 变量合集
│ ├── baseToken // 基础变量
│ │ ├── allColors.js // 主题色的全集
│ │ ├── colors.ts // 把每个主题色衍生出10个与之颜色相近的颜色
│ │ ├── index.ts // 基础变量
│ │ └── type.ts //
│ └── components // components
│ ├── button.ts // button组件的样式
│ └── index.ts
- 增加主题色 1. 在allColors.js中增加主题色 2. 运行命令生成类型文件yarn lerna run generate:types --scope=@dreamview/dreamview-theme
- 修改/增加/删除基础变量 1. 修改tokens/baseToke/index.ts文件即可
- 增加一组样式的合集 1. 在tokens/components下创建文件夹编写自己的样式合集 2. 在tokens/components/index.ts中导出你创建的文件