显著的 UI

显著的 UI 是一个由美丽的分析组件组成的库——图表、控制器、表格和更多的——设计,通过 颗粒式 CSS 变量。 。 。 .

🎨型系统

可标注的UI组件的每个方面都可以使用颗粒CSS变量进行定制.

CSS 变量结构

还有 三层 我们系统中的变量:

1. 核心变量

   • 原始原始 CSS (颜色、 间距、 类型尺度)

   • 不覆盖 - 他们作为基金会.

2. 语义变量

   • 从核心变量(例如:. --em-sem-background, (中文(简体) ), --em-sem-chart-color--1, (中文(简体) ), --em-sem-text(中文(简体) )

   • 控制系统 全球 外观和感觉:调色板,品牌颜色,默认打字.

3. 构成部分变量

   • 特定成分的符号(例如:. --em-card-border-radius, (中文(简体) ), --em-card-subtitle-color(中文(简体) )

   • 微调单个组件而不影响全球语义.

安装和使用

安装

npm install @embeddable.com/remarkable-ui

CSS 设置

库中包含所有 CSS 变量的倒置值,所以除非您想要自定义主题,您不需要覆盖任何东西.

要覆盖样式, 请定义您想要的 CSS 文件的变量 :

:root {
    ...
    --em-card-background: "grey",
    ...
}

然后导入您的 CSS 文件到您的项目根 :

import 'your-file-here.css';

导入组件

import { Button, Card } from '@embeddable.com/remarkable-ui';

项目结构

scripts/         # Automation scripts
src/
  components/    # Chart, editor and shared components
  hooks/         # Reusable hooks used by the components
  styles/        # Global css and types for the exising css variables
  types/         # Shared TypeScript types
  utils.ts/      # Utility functions

捐款

我们欢迎反馈和贡献!

1. 叉子存储器
2. 创建特性分支
3. 提交更改
4. 打开拉动请求

请遵循我们的代码风格 并包含测试任何新的特性.

许可证

麻省理工学院——见 LICENSE 详细文件.