import { createGlobalTheme, createVar, fallbackVar } from '@vanilla-extract/css';
export const space = {
_2xs: 2,
xs: 4,
sm: 8,
md: 12,
lg: 16,
xl: 20,
_2xl: 24,
_3xl: 28,
_4xl: 32,
_5xl: 40,
} as const;
export const lineHeight = {
none: 1,
snug: 1.3,
tight: 1.15,
} as const;
export const borderRadius = {
_2xs: 2,
xs: 4,
sm: 8,
md: 12,
lg: 16,
xl: 20,
full: 999,
} as const;
export const iconSize = {
_2xs: 8,
xs: 12,
sm: 16,
md: 18,
lg: 20,
xl: 24,
_2xl: 28,
_3xl: 32,
_4xl: 48,
_5xl: 64,
} as const;
export const fontWeight = {
normal: '400',
medium: '500',
semiBold: '600',
bold: '700',
} as const;
export const systemFontFamily = `system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"`;
export const themeFontFamily = `"Inter Variable", ${systemFontFamily}`;
export const emojiFontFamily = `"Twemoji Mozilla", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif`;
export const monoFontFamily = `ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace`;
export const fontFamilyVar = createVar();
export const fontFamily = fallbackVar(fontFamilyVar, themeFontFamily);
export const zIndex = {
base: 0,
raised: 10,
float: 20,
modal: 100,
popover: 110,
tooltip: 120,
toast: 130,
} as const;
export const fontScale = createVar();
const type = {
_2xs: { fontSize: 0.625, lineHeight: 1 },
xs: { fontSize: 0.6875, lineHeight: 1 },
sm: { fontSize: 0.75, lineHeight: 1 },
md_sub: { fontSize: 0.8125, lineHeight: 1.25 },
md: { fontSize: 0.875, lineHeight: 1.25 },
lg_sub: { fontSize: 0.9375, lineHeight: 1.5 },
lg: { fontSize: 1, lineHeight: 1.5 },
xl: { fontSize: 1.125, lineHeight: 1.75 },
_2xl: { fontSize: 1.25, lineHeight: 1.75 },
_3xl: { fontSize: 1.5, lineHeight: 2 },
_4xl: { fontSize: 1.875, lineHeight: 2.25 },
_5xl: { fontSize: 2.375, lineHeight: 2.5 },
} as const;
const scaled = (rem: number) => `calc(${rem}rem * ${fallbackVar(fontScale, '1')})`;
export const fontSize = createGlobalTheme(
':root',
// oxlint-disable-next-line typescript/no-unsafe-type-assertion -- every entry comes from `type`, so the key set is exactly its keys
Object.fromEntries(Object.entries(type).map(([key, { fontSize: size }]) => [key, scaled(size)])) as {
[K in keyof typeof type]: string;
},
);
// oxlint-disable-next-line typescript/no-unsafe-type-assertion -- every entry comes from `type`, so the key set is exactly its keys
export const fontLeading = Object.fromEntries(
Object.entries(type).map(([key, { fontSize: size, lineHeight: leading }]) => [key, leading / size]),
) as { [K in keyof typeof type]: number };