@alveole/主题
Thème partagé (脚本,打字机,帮助者) pour les apps React Introduct/ web.
安装
npm i @alveole/theme
平面装饰 : react, (中文(简体) ), react-native, (中文(简体) ), expo-font, (中文(简体) ), expo-system-ui, (中文(简体) ), @tamagui/core。 。 。 .
迅速利用
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>;
}
风格问题
// 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] },
}));
// 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国 |
const { spacing, externalPadding } = useTheme();
spacing('3W'); // 24
externalPadding(); // 16 sur mobile, 24 sur desktop
类型
写作时
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.
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)
import { fontStyle } from '@alveole/theme';
const style = {
...fontStyle('Geist-Bold'), // { fontFamily: 'Geist', fontWeight: '600' } sur web
fontSize: 16, // { fontFamily: 'Geist-Bold' } sur native
};
半径
const { radius } = useTheme();
radius('sm'); // 4
radius('md'); // 6
radius('lg'); // 10
radius('full'); // 99999
断点变体( V)
const { variant, isVariant } = useTheme();
variant; // 'mobile' | 'tablet' | 'desktop'
isVariant('mobile'); // boolean
| 备选案文e | 大点 |
|---|---|
mobile | < 768px (英语) |
tablet | 768px — 991px (英语) |
desktop | • 992px (单位:千美元) |
库勒斯
const { color } = useTheme();
color.Neutre[700];
color.Watusi[50];
color.alpha(color.Neutre[900], 0.5); // 'rgba(55, 58, 63, 0.5)'
调色板人物
<ThemeProvider
color={{
Neutre: { 100: '#F7F7F7' },
Watusi: { 50: '#FEF5F2' },
}}
>
<App />
</ThemeProvider>
(重指挥) 乌斯·普韦斯·德菲尼尔
alveole.config.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 通用语言、空间和字体:
/* 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