README
Clair Styles
Common styles for ClairDesign.
使用指南
直接引入
import '@clair/dist/index.css'
如果希望启用一系列 focus-visible 的样式，需要使用 focus-visible polyfill。
自定义主题
// 可以参照 `src/_variable.scss` 文件覆盖变量
$--primary-color: #f0f;
@import '~@clair/scss/index';
如果希望启用一系列 focus-visible 的样式，请自行引入 polyfill。，并使用 PostCSS 插件 进行处理。
相关链接
- https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
- https://css-tricks.com/keyboard-only-focus-styles/
- https://github.com/WICG/focus-visible
- https://nelo.is/writing/styling-better-focus-states/
开发指南
1. 启动
开发新组件时，请在 html/ 目录下新建一个 HTML 文件，如 html/component.html，内容复制 html/_template.html 即可。
然后执行命令：
# 注意替换文件名
npx parcel ./html/component.html
# OR
yarn dev component
2. 构建
采用 dart-sass 编译，因为安装快。（PS: parcel 现在也是使用 dart-sass 哟）
使用下面的命令可完成构建：
npm run build
# OR
./scripts/build.sh