Skip to content

Latest commit

 

History

History
270 lines (196 loc) · 6.18 KB

CHANGELOG.md

File metadata and controls

270 lines (196 loc) · 6.18 KB

版本变更说明

v1.0.0-beta.8 2020.3.18

  • fix(typography): 修复 button 字体字号不正确的 bug

v1.0.0-beta.7 2020.3.5

  • fix(typography): 修复字体样式对象的类型声明不兼容 styled-components 的缺陷
  • fix(shadows): 修复海拔为 2 和 3 的阴影样式不正确的错误

v1.0.0-beta.5 2020.2.28

  • fix: 修复 DefaultTheme 类型错误

v1.0.0-beta.3 2020.2.25

  • fix: 修复打包失败的缺陷

v1.0.0-beta.1 2020.2.24

  • feat(typography): 采用新的 Material Design 标准设置文字排版分类
  • feat(typography): 简化自定义文字排版的方式
  • feat(typography): typography 新增 pxToRem 函数，用来转换 px 到 rem
  • feat(typography): 可以定制文字排版分类样式
  • feat: 新增 ThemeStyle 组件，用来定义全局 css 样式
  • chore(colors): 拆分 colors.ts 为一个颜色一个 ts 文件

破坏性变更

创建主题的方式

之前的方式是：

import {
  createTheme,
  createPalette,
  createTypography,
  colors,
} from '@sinoui/theme';

const theme = createTheme({
  typography: createTypography({
    fontSize: 12,
  }),
  palette: createPalette({
    primary: colors.red,
  }),
});

为了简化创建主题，提供了新的方式是：

import { createTheme } from '@sinoui/theme';
import red from '@sinoui/theme/colors/red';

const theme = createTheme({
  typography: {
    fontSize: 12,
  },
  palette: {
    primary: colors.red,
  },
});

虽然仍然支持旧的方式，但是不再推荐使用。

文字排版

文字排版分类发生变化，之前的分类是：

  • dispay4
  • display3
  • display2
  • display1
  • subheading
  • title
  • headline
  • body2
  • body1
  • caption
  • button

新的文字排版分类：

  • h1
  • h2
  • h3
  • h4
  • h5
  • h6
  • subtitle1
  • subtitle2
  • body1
  • body2
  • caption
  • button

颜色模块 colors module

  1. colors 模块剔除了非标准的颜色，包括：

    • transparent
    • fullBlack
    • darkBlack
    • lightBlack
    • minBlack
    • faintBlack
    • fullWhite
    • darkWhite
    • lightWhite

  2. colors 模块将 white 和 black 迁移到 colors/common 中

    之前的方式：

    import { colors } from '@sinoui/theme';

console.log(colors.white, colors.black);

    新的方式：

    import common from '@sinoui/theme/colors';

console.log(common.white, common.black);

  3. colors 模块去掉自定义颜色系列

    • colorBlack
    • colorDeepGray
    • colorBrown
    • colorGray
    • colorKelly
    • colorLigntYellow

  4. colors 模块去掉颜色系列中的 w1, w2, w3

调色板

调色板发生了重大变化，去掉了很多可以通过计算轻而易举得到的颜色值。新版本的调色板，推荐大家在日常开发中多使用polished来扩展颜色。

新的调色板使用方式：

  • 调色板不为单独的组件定义颜色，组件内部颜色在组件内部定义或者生成
  • 调色板提供了 palette.grey，组件可以使用此灰色集合来定义内部颜色
  • 使用 polished 提供的方法扩展颜色

去掉的颜色值：

  • 去掉了整个 danger 颜色分类，使用 warnning 代替

  • 去掉了整个 input

    • helperText, labelText --> palette.text.secondary
    • disabled --> palette.text.disabled
    • inputText --> palette.text.primary
    • bottomLine --> 在组件中直接定义即可，没必要放在主题定制中

  • 去掉部分 text 中的属性：

    • icon --> sinoui-components 未使用
    • divider --> palette.divider
    • lightDivider --> sinoui-components 未使用
    • snackbar --> palette.getContrastText(snackbar 组件的背景色)

  • 去掉了大部分 background 中的属性，只保留 default 和 paper：

    • appBar --> palette.grey[100]
    • contentFrame --> palette.grey[200]
    • divider --> palette.divider（见后面的说明）
    • chips --> palette.grey[300]
    • chipsImg --> palette.grey[400]
    • chipsBut --> palette.grey[400]
    • chipsButHover --> palette.grey[500]
    • tooltip --> grey[600]
    • transparent --> 直接使用 transparent 关键字
    • sendcondaryTransparent --> palette.text.primary
    • snackbar --> palette.common.black

    对于 sinoui-components 中使用的 divider，表示的是选中后的背景色，推荐使用 palette.action.selected 代替。如果觉得颜色不合适，也可以使用灰色：palette.grey[200]。

  • palette.black, palette.white 分别变更为 palette.common.black，palette.common.white

  • 去掉了整个 shades

    sinoui-components 使用 shades 来取文本颜色：palette.shades.dark.text.primary。替换成新的获取文本颜色方式：palette.getContrastText(背景色)。

另一个重大变更：不再提供颜色分类的集合，替换成包含 main, dark, light, contrastText 的对象。这些颜色分类包括：primary, secondary, error, success, info, success。

旧的颜色分类集合：

{
  primary: {
    50: '#xxx',
    100: '#xxx',
    200: '#xxx',
    //...
  },
  secondary: {
    // ...
  },
  //...
}

新的颜色对象：

{
  primary: {
    main: '#xxx',
    light: '#xxx',
    dark: '#xxx',
    contrastText: '#xxx',
  },
  secondary: {
    // ...
  },
  // ...
}

primary.main 对应此颜色集合的主颜色，primary.light 是颜色集合的浅色变体，primary.dark 是颜色集合的深色变体，primary.contrastText 是在主颜色背景上的文字颜色。

如果需要获取更深或者更浅的颜色，可以使用 polished 的 darken 和 lighten 方法来获取，如：

import { darken, lighten } from 'polished';

const light = lighten(0.2, palette.primary.main);
const dark = darken(0.2, palette.primary.main);

zIndex

去掉了组件库中不使用的 z-index：

  • drawerOverlay - 遮罩层
  • navDrawer - 导航区域
  • dialogOverlay - 对话框遮罩层
  • layer - 新的应用层
  • menu - 菜单
  • mobileStepper

v0.3.4 - 2019.12.19

  • fix: 修复在 IE 中无法使用的缺陷

v0.3.3 - 2019.10.22

  • chore: 升级 polished@3.4.1

v0.3.2 - 2019.10.22

  • chore: polished 降版本到 1.9.2

v0.3.1 - 2019.10.22

  • chore: 补充缺失的导出方法

v0.3.0 - 2019.10.22

  • feat: 断点 ( #2 )