1.0.0 Roadmap

[liujinxing]

1.0.0 Roadmap

@sinoui/theme 1.0.0 遵循最新版本的 Material Design。

设计文档

整理最新版本的 Material Design 设计部分文档：

• 基本概念
• 环境
• 颜色
• 文字排版
• 动效
• 布局
• 形状
• 导航
• 交互
• 交流
• dark 模式

实现部分

• 文字排版 typography
• 调色板/颜色 palette / color
• 动效
• 深度 z-index
• 形状
• 断点
• 阴影

开发指南文档

开发、定制、使用文档关注：

• 如何在日常项目中使用@sinoui/theme来开发与主题相符的组件。
• 如何为项目定制符合用户气质的主题。

文档包括：

• 文字排版
• 调色板/颜色
• 动效
• 深度
• 形状
• 断点
• 阴影
• 定制

全局样式

为了方便应用程序开发，提供全局样式，以 ThemeStyle 组件的形式提供，在入口文件中引入：

import { ThemeProvider } from 'styled-components';
import defaultTheme from '@sinoui/theme/defaultTheme';
import ThemeStyle from '@sinoui/theme/ThemeStyle';

function App() {
  return <ThemeProvider theme={defaultTheme}>
    <>
      <ThemeStyle />
    </>
  </ThemeProvider>
}

全局样式：

• 默认字体家族
• 默认字体大小
• 默认字体颜色
• 默认全局背景
• 文字排版样式
• 链接样式
• 文本选中颜色
• 重要重置样式
  • box-sizing: border
  • html, body 去掉默认的 margin，padding