@upmo-ai /主题

Upmo的Mantine 9主题，完全由 @upmo-ai/tokens。没有颜色, 间距或半径字面值：每个值读取一个标记。

它输出三样东西：

• upmoTheme ——螳螂 createTheme 对象(原色，类型和 半径缩放，断点，组件默认为脆，锐，边框 看)。
• cssVariablesResolver -将Mantine的内部颜色变量映射到 Upmo令牌变量。控件上的内联变量 文档，样式表无法覆盖，因此需要此解析器 页面背景，文本，边框和主要填充跟随标记。
• tokenVariables -原始的名称到标记变量映射，用于测试和 用于文档预览管道。

使用

import '@mantine/core/styles.css';
import '@upmo-ai/tokens/tokens.css';
import { MantineProvider } from '@mantine/core';
import { upmoTheme, cssVariablesResolver } from '@upmo-ai/theme';

export function App({ children }) {
  return (
    <MantineProvider theme={upmoTheme} cssVariablesResolver={cssVariablesResolver}>
      {children}
    </MantineProvider>
  );
}

导入顺序很重要：首先是Mantine的CSS，然后是令牌CSS，然后是任何本地的 覆盖。

深色初级填充

深色原色按钮使用了比浅色更亮、饱和度更高的祖母绿 一个，所以它在黑暗的地面上保持生动。这有两种方法： Mantine的 primaryShade 是 { light: 7, dark: 5 }，解析器将 填充初级到 --primary-fill 令牌(在 @upmo-ai/tokens）. 盘旋的辉光(--glow-primary)只适用于夜间。

构建

pnpm --filter @upmo-ai/theme build   # tsup: ESM + d.ts