Skip to content

Latest commit

 

History

History
78 lines (57 loc) · 1.44 KB

README.md

File metadata and controls

78 lines (57 loc) · 1.44 KB

coral-system

coral

一个轻量级的样式系统和 React 布局原子组件库。

文档地址:https://wwsun.github.io/coral-system/

Features

  • 原子化 css 生成
  • 支持 css in js
  • 支持 css variables
  • 支持 prefix 自定义
  • 提供标准化的 Design Token 支持
  • css 传入自定义属性 css={css}
  • css 逻辑的动态表达 css=[css1, css2]
  • Coral Factory: coral('input', css``, { prefix: '' });
  • 提供 FusionDesign 主题的导入支持
  • 提供 Antd 主题的导入支持
  • 响应式支持
  • 常用伪类支持 _hover...

Usage

import { Box, SystemProvider } from 'coral-system';

function App() {
  return (
    <SystemProvider prefix="--coral" theme={YOUR_THEME}>
      <Box>hello</Box>
    </SystemProvider>
  );
}

Factory

使用 coral 方法可以创建具备 style props 的组件。

import { coral, css } from 'coral-system';

const Section = coral('section', css`
  /* your initial style */
`);

function App() {
  return <Section bg="brand">hello</Section>;
}

prefix 优先级

props prefix > theme context prefix > option prefix

Development

# install
$ yarn

# start
$ yarn start

Release

# publish
$ yarn release

# deploy to github pages
$ yarn story:deploy