@ capra/ 主题

概览

@capra/theme 提供消费者使用的 Capra 基线样式表、 符号助手和 DX 符号进入点, 并构建工具.

文档

人可读文件可在 https://capra.cribl.io (中文(简体) )。 。 。 .

可读 LLM 文档可在 https://capra.cribl.io/llms.txt。 。 。 .

安装

pnpm add @capra/theme

使用量

import '@capra/theme/base.css';
import { token } from '@capra/theme';

const gap = token('spacing.md');

图表和数据可视化主题可查阅: @capra/theme/visualizations。每个主题都包含具体值,如六分色和像素维度,因此它们与画布渲染器和其他无法解决CSS变量的环境一起工作。 同名导师住在Docs网站 可视化主题。 。 。 .

import { getChartTheme, getEchartsTheme } from '@capra/theme/visualizations';

const genericTheme = getChartTheme({
  palette: 'sequential.Viridis',
  mode: 'dark',
});

const echartsTheme = getEchartsTheme({
  palette: 'categorical.observable10',
  mode: 'light',
});

在初始化图表前登记ECharts主题 :

import * as echarts from 'echarts';
import { getEchartsTheme } from '@capra/theme/visualizations';

echarts.registerTheme(
  'capra',
  getEchartsTheme({
    palette: 'categorical.observable10',
    mode: 'dark',
  }),
);

const chart = echarts.init(element, 'capra');

使用 visualizationPaletteNames 财务报告和审定财务报表 visualizationThemeModes 来填充选择器或列出每个支持的排列.

可用的样式表条目点 :

• @capra/theme/base.css 是首选的基准样式表。 它包括了Capra设计符,字体面声明,以及最低限度的全球默认.
• @capra/theme/styles.css 是用于向后兼容的仅保留变量样式表.
• @capra/theme/fonts.css 发布独立的字体面声明.

说明: 不导入 @capra/theme/base.css 与 @capra/theme/fonts.css 或者说 @capra/theme/styles.css。 。 。 . base.css 已包含已曝光的符号样式 styles.css 和所声明的字体 fonts.css。 。 。 .

许可证

这个软件包是专有软件. 见 LICENSE.txt (英语)。 。 。 .