add typographie design V2

.changeset/yellow-games-tan.md

@@ -0,0 +1,5 @@
+---
+'@crossed/theme': patch
+---
+
+Add new typographie

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;

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';

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<CrossedstyleValues, 'fontWeight' | 'fontSize' | 'lineHeight'>
+export type HeadLineFontSize = Record<
+  HeadlineNames,
+  Record<FontSizeAttributes, number>
 >;
 
-////////////////////////
-// heading
-////////////////////////
-export type HeadingName = 'md' | 'lg' | 'xl';
-export type Headings = Record<HeadingName, FontStyle>;
+export type TextFontSize = Record<
+  TextNames,
+  Record<FontSizeAttributes, number>
+>;
 
-////////////////////////
-// text
-////////////////////////
-export type TextName =
-  | 'xs'
-  | 'sm'
-  | 'md'
-  | 'lg'
-  | 'xl'
-  | 'h6'
-  | 'h5'
-  | 'h4'
-  | 'h3'
-  | 'h2'
-  | 'h1';
-export type Texts = Record<TextName, FontStyle>;
+export type FontFamily = Record<FamilyName, Record<'fontFamily', string>>;
 
 export type Font = {
-  lineHeight: Record<TextName, CrossedstyleValues['lineHeight']>;
-  fontSize: Record<TextName, CrossedstyleValues['fontSize']>;
-  fontWeight: Record<TextName, CrossedstyleValues['fontWeight']>;
-  color: string;
-  family: string;
-  extraStyles?: CrossedstyleValues;
+  headline: HeadLineFontSize;
+  text: TextFontSize;
+  family: FontFamily;
 };

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;

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;

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;