# @alveole/theme 中文文档

规范地址：https://npmcn.com/package/%40alveole/theme/

版本：2\.0\.0-alpha\.25
npm 元数据更新时间：2026-11-05T19:22:32.733Z
中文译文更新时间：2026-11-06T07:47:34.805Z
软件包许可：未声明

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40alveole/theme
原文对照：https://npmcn.com/package/%40alveole/theme/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：203 kB，150 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：react \*，expo-font \*，react-native \*，@tamagui/core ^3\.0\.0，expo-system-ui \*
- 首次发布：2026-02-06T16:39:13.298Z
- 最新版本发布：2026-11-05T09:49:26.341Z
- 近 30 天下载量：4079（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：178（近 12 个月 178 个）

## 中文简介

共享主题标志和公用事业.

## 安装

```sh
npm install @alveole/theme
```

也可以使用：`pnpm add @alveole/theme`、`yarn add @alveole/theme`、`bun add @alveole/theme`

## README

# @alveole/主题

Thème partagé (脚本,打字机,帮助者) pour les apps React Introduct/ web.

## 安装

```bash
npm i @alveole/theme
```

平面装饰 : `react`, (中文(简体) ), `react-native`, (中文(简体) ), `expo-font`, (中文(简体) ), `expo-system-ui`, (中文(简体) ), `@tamagui/core`。 。 。 .

## 迅速利用

```tsx
import { ThemeProvider, useTheme, makeStyles } from '@alveole/theme';

export default function App() {
  return (
    <ThemeProvider>
      <Screen />
    </ThemeProvider>
  );
}

function Screen() {
  const { spacing } = useTheme();
  return <Box style={{ margin: spacing('2W') }}>Contenu</Box>;
}
```

## 风格问题

```tsx
// Exemple.styles.tsx
import { makeStyles } from '@alveole/theme';

export const useStyles = makeStyles(({ spacing, text, color }) => ({
  container: { padding: spacing('3W') },
  title: text.Titres['H3 - MD'],
  label: { color: color.Neutre[700] },
}));
```

```tsx
// Exemple.tsx
import { useStyles } from './Exemple.styles';

function Exemple() {
  const styles = useStyles();
  return <Box style={styles.container} />;
}
```

## 间距

间隔自定义 `V` (纵向,多倍分为2px)等 `W` (平方位,多为8px):

| 克莱 | ưμ㼯a |
| --- | --- |
| `0V` | 0 个 |
| `0,5V` | 2个 |
| `1V` | 页:1 |
| `1,5V` | 6个 |
| `1W` | 第8条 |
| `3V` | 第12条 |
| `2W` | 16个 |
| `3W` | 24个 |
| `4W` | 第32条 |
| `5W` | 第40条 |
| `6W` | 第48条 |
| `8W` | 64国道 |
| `12W` | 96 (韩语) |
| `15W` | 120国 |

```tsx
const { spacing, externalPadding } = useTheme();

spacing('3W'); // 24
externalPadding(); // 16 sur mobile, 24 sur desktop
```

## 类型

写作时

```tsx
const { text } = useTheme();

// Titres alternatifs (Geist SemiBold)
text['Titres alternatifs'].XS; // 48px
text['Titres alternatifs'].XL; // 80px

// Titres (Geist SemiBold — tailles adaptées mobile/desktop)
text.Titres['H1 - XL']; // Geist SemiBold, 40px desktop / 32px mobile
text.Titres['H3 - MD']; // 28px desktop / 24px mobile
text.Titres['H6 - XXS']; // 20px desktop / 18px mobile

// Corps de texte
text['Corps de texte'].SM.Regular; // Geist Regular, 14px
text['Corps de texte'].MD.SemiBold; // Geist SemiBold, 16px
text['Corps de texte'].LG.Medium; // Geist Medium, 18px
```

## 字体

自动字体 `ThemeProvider`使用: **盖斯** (titres et community de texte.) (法语).

Sur le web, 通过 des 注入的 les 字体 `@font-face` CSS 标准`font-family: Geist; font-weight: 500`) (中文(简体) ). 当地人,女孩们使用 le système expo -font.

```tsx
const { font } = useTheme();

font['Geist-Regular']; // 'Geist-Regular' (native) ou utilisé via font-weight (web)
font['Geist-Bold'];
```

### 字体样式助手

Pour Créer des styles tvés avec la bonne 字体 selon la platersforme : (原始内容存档于2018-09-29)

```tsx
import { fontStyle } from '@alveole/theme';

const style = {
  ...fontStyle('Geist-Bold'), // { fontFamily: 'Geist', fontWeight: '600' } sur web
  fontSize: 16, // { fontFamily: 'Geist-Bold' } sur native
};
```

## 半径

```tsx
const { radius } = useTheme();

radius('sm'); // 4
radius('md'); // 6
radius('lg'); // 10
radius('full'); // 99999
```

## 断点变体( V)

```tsx
const { variant, isVariant } = useTheme();

variant; // 'mobile' | 'tablet' | 'desktop'
isVariant('mobile'); // boolean
```

| 备选案文e | 大点 |
| --- | --- |
| `mobile` | < 768px (英语) |
| `tablet` | 768px — 991px (英语) |
| `desktop` | • 992px (单位:千美元) |

## 库勒斯

```tsx
const { color } = useTheme();

color.Neutre[700];
color.Watusi[50];
color.alpha(color.Neutre[900], 0.5); // 'rgba(55, 58, 63, 0.5)'
```

## 调色板人物

```tsx
<ThemeProvider
  color={{
    Neutre: { 100: '#F7F7F7' },
    Watusi: { 50: '#FEF5F2' },
  }}
>
  <App />
</ThemeProvider>
```

> (重指挥) 乌斯·普韦斯·德菲尼尔 `alveole.config.js` 附加费:

```js
const { Colors } = require('@alveole/theme');

/** @type {import('@alveole/theme').Palette} */
const palette = {
  primary: Colors.VertPrairie['sun-475'],

  background: {
    button: {
      primary: {
        default: Colors.VertPrairie['sun-475'],
        hover: Colors.VertPrairie['sun-475-hover'],
      },
    },
  },
};

module.exports = { palette };

// Utiliser dans le provider :
// import config from '@/alveole.config.js';
// <ThemeProvider color={config.palette}>
```

## 变量 CSS(网络)

网络上, `ThemeProvider` cSS 通用语言、空间和字体:

```css
/* Spacing */
var(--spacing-2W)
var(--spacing-3W)

/* Colors */
var(--color-Neutre-200)
var(--color-Watusi-50)
```

## 卢旺达

-   {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}Typage du Thème: {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}我.. `src/type/Theme.ts`
-   调色板 : `src/constants/Palette.ts`
-   类型 : `src/constants/Typography.ts`
-   间距 : `src/constants/Spacing.ts`
-   半径 : `src/constants/Radius.ts`
-   字体 : `src/constants/Font.ts`

## 常见问题

### @alveole/theme 是什么？

共享主题标志和公用事业\.

### 如何安装 @alveole/theme？

在项目目录运行 npm install @alveole/theme，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\*）、expo-font（\*）、react-native（\*）、@tamagui/core（^3\.0\.0）、expo-system-ui（\*）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @alveole/theme 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @alveole/theme 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @alveole/theme 可以商用吗？

@alveole/theme 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @alveole/theme 的下载量有多少？

根据 npm 官方下载统计，@alveole/theme 在 2026/10/06 – 2026/11/04 这 30 天内被下载 4,079 次，日均约 136 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @alveole/theme 还在维护吗？

最新版本 2\.0\.0-alpha\.25 发布于 2026/11/05（2 天前）；至今共发布 178 个版本，其中过去 12 个月发布了 178 个；首次发布于 2026/02/07。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。