组件库设计

一、目录结构

组件库设计_第1张图片

二、样式解决方案

组件库设计_第2张图片

三、创建组件库的色彩体系

  • 系统色板 = 基础色板 + 中性色板(黑白灰)
  • 产品色板 = 主色板 + 功能色板

中性色板:

组件库设计_第3张图片

基础色板:

组件库设计_第4张图片

产品色板:

组件库设计_第5张图片

四、组件库的样式变量分类

  • 基础色系统
  • 字体系统
  • 表单
  • 按钮
  • 边框和阴影
  • 可配置开关

你可能感兴趣的:(react.js)