diff --git a/.changeset/yellow-games-tan.md b/.changeset/yellow-games-tan.md new file mode 100644 index 00000000..7242a35b --- /dev/null +++ b/.changeset/yellow-games-tan.md @@ -0,0 +1,5 @@ +--- +'@crossed/theme': patch +--- + +Add new typographie diff --git a/packages/theme/src/font.ts b/packages/theme/src/font.ts index 4340adc3..cc49b7be 100644 --- a/packages/theme/src/font.ts +++ b/packages/theme/src/font.ts @@ -5,49 +5,13 @@ * LICENSE file in the root of this projects source tree. */ -import type { Font } from './types/font'; +import { headLineFontSize } from './typographie/headline'; +import { textFontSize } from './typographie/text'; +import { fontFamily } from './typographie/family'; +import { Font } from './types/font'; export const font = { - lineHeight: { - xs: 14, - sm: 17, - md: 20, - lg: 23, - xl: 30, - h6: 36, - h5: 40, - h4: 46, - h3: 50, - h2: 56, - h1: 60, - }, - fontSize: { - xs: 11, - sm: 14, - md: 16, - lg: 18, - xl: 24, - h6: 28, - h5: 32, - h4: 36, - h3: 40, - h2: 44, - h1: 48, - }, - fontWeight: { - xs: '400', - sm: '400', - md: '400', - lg: '600', - xl: '700', - h6: '700', - h5: '700', - h4: '700', - h3: '700', - h2: '700', - h1: '700', - }, - color: 'black', - family: 'Overpass', - extraStyles: { marginTop: 3 }, + headline: headLineFontSize, + text: textFontSize, + family: fontFamily, } as const satisfies Font; diff --git a/packages/theme/src/index.ts b/packages/theme/src/index.ts index c52a5501..e6e10f0b 100644 --- a/packages/theme/src/index.ts +++ b/packages/theme/src/index.ts @@ -19,3 +19,5 @@ export * from './types/components'; export * from './types/font'; export * from './types/space'; export * from './types/theme'; +export * from './typographie/text'; +export * from './typographie/display'; diff --git a/packages/theme/src/types/font.ts b/packages/theme/src/types/font.ts index 2c2c4df2..59378212 100644 --- a/packages/theme/src/types/font.ts +++ b/packages/theme/src/types/font.ts @@ -5,40 +5,25 @@ * LICENSE file in the root of this projects source tree. */ -import type { CrossedstyleValues } from '@crossed/styled'; +export type HeadlineNames = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'; +export type FontSizeAttributes = 'lineHeight' | 'fontSize'; +export type TextNames = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; +export type FamilyName = 'regular' | 'medium' | 'semibold' | 'bold'; -export type FontStyle = Required< - Pick +export type HeadLineFontSize = Record< + HeadlineNames, + Record >; -//////////////////////// -// heading -//////////////////////// -export type HeadingName = 'md' | 'lg' | 'xl'; -export type Headings = Record; +export type TextFontSize = Record< + TextNames, + Record +>; -//////////////////////// -// text -//////////////////////// -export type TextName = - | 'xs' - | 'sm' - | 'md' - | 'lg' - | 'xl' - | 'h6' - | 'h5' - | 'h4' - | 'h3' - | 'h2' - | 'h1'; -export type Texts = Record; +export type FontFamily = Record>; export type Font = { - lineHeight: Record; - fontSize: Record; - fontWeight: Record; - color: string; - family: string; - extraStyles?: CrossedstyleValues; + headline: HeadLineFontSize; + text: TextFontSize; + family: FontFamily; }; diff --git a/packages/theme/src/typographie/family.ts b/packages/theme/src/typographie/family.ts new file mode 100644 index 00000000..9095e2d7 --- /dev/null +++ b/packages/theme/src/typographie/family.ts @@ -0,0 +1,15 @@ +/** + * Copyright (c) Paymium. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root of this projects source tree. + */ + +import { FontFamily } from '../types/font'; + +export const fontFamily = { + 'regular': { fontFamily: 'Inter-Regular' }, + 'medium': { fontFamily: 'Inter-Medium' }, + 'semibold': { fontFamily: 'Inter-Semibold' }, + 'bold': { fontFamily: 'Inter-Bold' }, +} as const satisfies FontFamily; diff --git a/packages/theme/src/typographie/headline.ts b/packages/theme/src/typographie/headline.ts new file mode 100644 index 00000000..7d1edbe4 --- /dev/null +++ b/packages/theme/src/typographie/headline.ts @@ -0,0 +1,17 @@ +/** + * Copyright (c) Paymium. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root of this projects source tree. + */ + +import { HeadLineFontSize } from '../types/font'; + +export const headLineFontSize = { + 'xs': { lineHeight: 32, fontSize: 24 }, + 'sm': { lineHeight: 38, fontSize: 30 }, + 'md': { lineHeight: 44, fontSize: 36 }, + 'lg': { lineHeight: 60, fontSize: 48 }, + 'xl': { lineHeight: 72, fontSize: 60 }, + '2xl': { lineHeight: 90, fontSize: 72 }, +} as const satisfies HeadLineFontSize; diff --git a/packages/theme/src/typographie/text.ts b/packages/theme/src/typographie/text.ts new file mode 100644 index 00000000..f7fd605c --- /dev/null +++ b/packages/theme/src/typographie/text.ts @@ -0,0 +1,16 @@ +/** + * Copyright (c) Paymium. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root of this projects source tree. + */ + +import { TextFontSize } from '../types/font'; + +export const textFontSize = { + 'xs': { lineHeight: 18, fontSize: 12 }, + 'sm': { lineHeight: 20, fontSize: 14 }, + 'md': { lineHeight: 24, fontSize: 16 }, + 'lg': { lineHeight: 28, fontSize: 18 }, + 'xl': { lineHeight: 30, fontSize: 20 }, +} as const satisfies TextFontSize;