@liner-fe/design-token 2.0.29 → 2.0.32

package/README.md

@@ -1,5 +1,3 @@
 # @liner-fe/design-token
 
-# getting started
-
 `yarn add @liner-fe/design-token`

package/global.css

@@ -0,0 +1,159 @@
+/* global.css */
+:root {
+  --lp-pri-achromatic-white: #ffffff;
+  --lp-pri-achromatic-black: #000000;
+  --lp-pri-gray-cool-950: #f7f8ff;
+  --lp-pri-gray-cool-900: #eef0f7;
+  --lp-pri-gray-cool-800: #dfe3f3;
+  --lp-pri-gray-cool-700: #c7cfe9;
+  --lp-pri-gray-cool-600: #97a5d6;
+  --lp-pri-gray-cool-500: #7487c4;
+  --lp-pri-gray-cool-400: #5b6ba4;
+  --lp-pri-gray-cool-300: #4a5889;
+  --lp-pri-gray-cool-200: #39426a;
+  --lp-pri-gray-cool-100: #282c3e;
+  --lp-pri-gray-cool-50: #1f2131;
+  --lp-pri-brand-original-950: #f5f6ff;
+  --lp-pri-brand-original-900: #e9ebff;
+  --lp-pri-brand-original-800: #d4d7ff;
+  --lp-pri-brand-original-700: #adb3ff;
+  --lp-pri-brand-original-600: #8690ff;
+  --lp-pri-brand-original-500: #5f6cff;
+  --lp-pri-brand-original-400: #3b49e3;
+  --lp-pri-brand-original-300: #303cb5;
+  --lp-pri-brand-original-200: #242f86;
+  --lp-pri-brand-original-100: #1b2366;
+  --lp-pri-brand-original-50: #151a4d;
+  --lp-pri-brand-variation-950: #f6f4fe;
+  --lp-pri-brand-variation-900: #ede9fe;
+  --lp-pri-brand-variation-800: #dbd3fe;
+  --lp-pri-brand-variation-700: #b8a7fe;
+  --lp-pri-brand-variation-600: #947bfe;
+  --lp-pri-brand-variation-500: #704ffd;
+  --lp-pri-brand-variation-400: #593aff;
+  --lp-pri-brand-variation-300: #422bce;
+  --lp-pri-brand-variation-200: #321f9b;
+  --lp-pri-brand-variation-100: #24156e;
+  --lp-pri-brand-variation-50: #1a1052;
+  --lp-pri-red-900: #ffe9eb;
+  --lp-pri-red-800: #ffcdd1;
+  --lp-pri-red-700: #ff9aa2;
+  --lp-pri-red-600: #ff6773;
+  --lp-pri-red-500: #ff3445;
+  --lp-pri-red-400: #fa1d2f;
+  --lp-pri-red-300: #c2172c;
+  --lp-pri-red-200: #910b1d;
+  --lp-pri-red-100: #68081a;
+  --lp-pri-red-50: #4a0616;
+  --lp-pri-orange-900: #ffeee6;
+  --lp-pri-orange-800: #ffd2b8;
+  --lp-pri-orange-700: #ffa970;
+  --lp-pri-orange-600: #ff8842;
+  --lp-pri-orange-500: #ff6215;
+  --lp-pri-orange-400: #f84b10;
+  --lp-pri-orange-300: #bd3512;
+  --lp-pri-orange-200: #8a220d;
+  --lp-pri-orange-100: #61170e;
+  --lp-pri-orange-50: #45110e;
+  --lp-pri-green-900: #e2f6e5;
+  --lp-pri-green-800: #bdeac4;
+  --lp-pri-green-700: #83d88e;
+  --lp-pri-green-600: #51c760;
+  --lp-pri-green-500: #26af3e;
+  --lp-pri-green-400: #1b9632;
+  --lp-pri-green-300: #137728;
+  --lp-pri-green-200: #0c5b1f;
+  --lp-pri-green-100: #074218;
+  --lp-pri-green-50: #053014;
+  --lp-pri-font-size-8: 8px;
+  --lp-pri-font-size-11: 11px;
+  --lp-pri-font-size-12: 12px;
+  --lp-pri-font-size-13: 13px;
+  --lp-pri-font-size-14: 14px;
+  --lp-pri-font-size-15: 15px;
+  --lp-pri-font-size-16: 16px;
+  --lp-pri-font-size-17: 17px;
+  --lp-pri-font-size-20: 20px;
+  --lp-pri-font-size-24: 24px;
+  --lp-pri-font-size-28: 28px;
+  --lp-pri-font-size-32: 32px;
+  --lp-pri-font-size-40: 40px;
+  --lp-pri-font-size-64: 64px;
+  --lp-pri-font-size-72: 72px;
+  --lp-pri-font-lineheight-120: 120%;
+  --lp-pri-font-lineheight-130: 130%;
+  --lp-pri-font-lineheight-150: 150%;
+  --lp-pri-font-lineheight-180: 180%;
+  --lp-pri-font-weight-300: 300;
+  --lp-pri-font-weight-350: 350;
+  --lp-pri-font-weight-400: 400;
+  --lp-pri-font-weight-420: 420;
+  --lp-pri-font-weight-450: 450;
+  --lp-pri-font-weight-500: 500;
+  --lp-pri-font-weight-600: 600;
+  --lp-pri-font-weight-650: 650;
+  --lp-pri-font-weight-700: 700;
+  --lp-pri-font-weight-800: 800;
+}
+:root .lp-sys-typo-title1-normal-medium {
+  font-family: lp-pri-font-family-pretendard-jp;
+  font-size: var(--lp-pri-font-size-72);
+  font-weight: var(--lp-pri-font-weight-800);
+  line-height: var(--lp-pri-font-lineheight-120);
+}
+:root[color-theme=dark] {
+  --lp-neutral-primary: var(--lp-pri-gray-cool-950);
+  --lp-neutral-secondary: var(--lp-pri-gray-cool-900);
+  --lp-neutral-tertiary: var(--lp-pri-gray-cool-800);
+  --lp-inverse-neutral-primary: var(--lp-pri-achromatic-white);
+  --lp-neutral-container-primary: var(--lp-pri-gray-cool-700);
+  --lp-neutral-container-secondary: var(--lp-pri-gray-cool-600);
+  --lp-neutral-container-tertiary: var(--lp-pri-gray-cool-500);
+  --lp-neutral-border-primary: var(--lp-pri-gray-cool-400);
+  --lp-neutral-border-secondary: var(--lp-pri-gray-cool-300);
+  --lp-neutral-border-tertiary: var(--lp-pri-gray-cool-200);
+  --lp-neutral-placeholder: var(--lp-pri-gray-cool-100);
+  --lp-accent-primary: var(--lp-pri-brand-original-600);
+  --lp-accent-container-primary: var(--lp-pri-brand-original-500);
+  --lp-positive-primary: var(--lp-pri-green-600);
+  --lp-positive-container-primary: var(--lp-pri-green-500);
+  --lp-caution-primary: var(--lp-pri-orange-600);
+  --lp-caution-container-primary: var(--lp-pri-orange-500);
+  --lp-negative-primary: var(--lp-pri-red-600);
+  --lp-negative-container-primary: var(--lp-pri-red-500);
+  --lp-link-primary: var(--lp-pri-brand-original-700);
+  --lp-dim: var(--lp-pri-gray-cool-100);
+  --lp-status-neutral-primary: var(--lp-pri-gray-cool-950);
+  --lp-status-accent-primary: var(--lp-pri-brand-original-500);
+  --lp-status-disabled-primary: var(--lp-pri-gray-cool-300);
+}
+:root[color-theme=light] {
+  --lp-neutral-primary: var(--lp-pri-gray-cool-50);
+  --lp-neutral-secondary: var(--lp-pri-gray-cool-100);
+  --lp-neutral-tertiary: var(--lp-pri-gray-cool-200);
+  --lp-inverse-neutral-primary: var(--lp-pri-achromatic-black);
+  --lp-neutral-container-primary: var(--lp-pri-gray-cool-300);
+  --lp-neutral-container-secondary: var(--lp-pri-gray-cool-400);
+  --lp-neutral-container-tertiary: var(--lp-pri-gray-cool-500);
+  --lp-neutral-border-primary: var(--lp-pri-gray-cool-600);
+  --lp-neutral-border-secondary: var(--lp-pri-gray-cool-700);
+  --lp-neutral-border-tertiary: var(--lp-pri-gray-cool-800);
+  --lp-neutral-placeholder: var(--lp-pri-gray-cool-900);
+  --lp-accent-primary: var(--lp-pri-brand-original-400);
+  --lp-accent-container-primary: var(--lp-pri-brand-original-300);
+  --lp-positive-primary: var(--lp-pri-green-400);
+  --lp-positive-container-primary: var(--lp-pri-green-300);
+  --lp-caution-primary: var(--lp-pri-orange-400);
+  --lp-caution-container-primary: var(--lp-pri-orange-300);
+  --lp-negative-primary: var(--lp-pri-red-400);
+  --lp-negative-container-primary: var(--lp-pri-red-300);
+  --lp-link-primary: var(--lp-pri-brand-original-500);
+  --lp-dim: var(--lp-pri-gray-cool-50);
+  --lp-status-neutral-primary: var(--lp-pri-gray-cool-50);
+  --lp-status-accent-primary: var(--lp-pri-brand-original-400);
+  --lp-status-disabled-primary: var(--lp-pri-gray-cool-200);
+}
+:root[language=en] {
+}
+/*! For license information please see global.css.LEGAL.txt */
+/*# sourceMappingURL=global.css.map */

package/lib/design/color/index.d.ts

@@ -0,0 +1,2 @@
+import { IColor } from './type';
+export declare const color: IColor;

package/lib/design/color/type.d.ts

@@ -0,0 +1,76 @@
+interface IPrimitive {
+    'lp-pri-achromatic-white': '#ffffff';
+    'lp-pri-achromatic-black': '#000000';
+    'lp-pri-gray-cool-950': '#F7F8FF';
+    'lp-pri-gray-cool-900': '#EEF0F7';
+    'lp-pri-gray-cool-800': '#DFE3F3';
+    'lp-pri-gray-cool-700': '#C7CFE9';
+    'lp-pri-gray-cool-600': '#97A5D6';
+    'lp-pri-gray-cool-500': '#7487C4';
+    'lp-pri-gray-cool-400': '#5B6BA4';
+    'lp-pri-gray-cool-300': '#4A5889';
+    'lp-pri-gray-cool-200': '#39426A';
+    'lp-pri-gray-cool-100': '#282C3E';
+    'lp-pri-gray-cool-50': '#1F2131';
+    'lp-pri-brand-original-950': '#F5F6FF';
+    'lp-pri-brand-original-900': '#E9EBFF';
+    'lp-pri-brand-original-800': '#D4D7FF';
+    'lp-pri-brand-original-700': '#ADB3FF';
+    'lp-pri-brand-original-600': '#8690FF';
+    'lp-pri-brand-original-500': '#5F6CFF';
+    'lp-pri-brand-original-400': '#3B49E3';
+    'lp-pri-brand-original-300': '#303CB5';
+    'lp-pri-brand-original-200': '#242F86';
+    'lp-pri-brand-original-100': '#1B2366';
+    'lp-pri-brand-original-50': '#151A4D';
+    'lp-pri-brand-variation-950': '#F6F4FE';
+    'lp-pri-brand-variation-900': '#EDE9FE';
+    'lp-pri-brand-variation-800': '#DBD3FE';
+    'lp-pri-brand-variation-700': '#B8A7FE';
+    'lp-pri-brand-variation-600': '#947BFE';
+    'lp-pri-brand-variation-500': '#704FFD';
+    'lp-pri-brand-variation-400': '#593AFF';
+    'lp-pri-brand-variation-300': '#422BCE';
+    'lp-pri-brand-variation-200': '#321F9B';
+    'lp-pri-brand-variation-100': '#24156E';
+    'lp-pri-brand-variation-50': '#1A1052';
+    'lp-pri-red-900': '#FFE9EB';
+    'lp-pri-red-800': '#FFCDD1';
+    'lp-pri-red-700': '#FF9AA2';
+    'lp-pri-red-600': '#FF6773';
+    'lp-pri-red-500': '#FF3445';
+    'lp-pri-red-400': '#FA1D2F';
+    'lp-pri-red-300': '#C2172C';
+    'lp-pri-red-200': '#910B1D';
+    'lp-pri-red-100': '#68081A';
+    'lp-pri-red-50': '#4A0616';
+    'lp-pri-orange-900': '#FFEEE6';
+    'lp-pri-orange-800': '#FFD2B8';
+    'lp-pri-orange-700': '#FFA970';
+    'lp-pri-orange-600': '#FF8842';
+    'lp-pri-orange-500': '#FF6215';
+    'lp-pri-orange-400': '#F84B10';
+    'lp-pri-orange-300': '#BD3512';
+    'lp-pri-orange-200': '#8A220D';
+    'lp-pri-orange-100': '#61170E';
+    'lp-pri-orange-50': '#45110E';
+    'lp-pri-green-900': '#E2F6E5';
+    'lp-pri-green-800': '#BDEAC4';
+    'lp-pri-green-700': '#83D88E';
+    'lp-pri-green-600': '#51C760';
+    'lp-pri-green-500': '#26AF3E';
+    'lp-pri-green-400': '#1B9632';
+    'lp-pri-green-300': '#137728';
+    'lp-pri-green-200': '#0C5B1F';
+    'lp-pri-green-100': '#074218';
+    'lp-pri-green-50': '#053014';
+}
+type ISystem = Record<'lp-inverse-neutral-primary' | 'lp-neutral-primary' | 'lp-neutral-secondary' | 'lp-neutral-tertiary' | 'lp-neutral-container-primary' | 'lp-neutral-container-secondary' | 'lp-neutral-container-tertiary' | 'lp-neutral-border-primary' | 'lp-neutral-border-secondary' | 'lp-neutral-border-tertiary' | 'lp-neutral-placeholder' | 'lp-accent-primary' | 'lp-accent-container-primary' | 'lp-positive-primary' | 'lp-positive-container-primary' | 'lp-caution-primary' | 'lp-caution-container-primary' | 'lp-negative-primary' | 'lp-negative-container-primary' | 'lp-link-primary' | 'lp-dim' | 'lp-status-neutral-primary' | 'lp-status-accent-primary' | 'lp-status-disabled-primary', keyof IPrimitive>;
+export interface IColor {
+    primitive: IPrimitive;
+    system: {
+        dark: ISystem;
+        light: ISystem;
+    };
+}
+export {};

package/lib/design/color/vars.d.ts

@@ -0,0 +1,95 @@
+export declare const vars: {
+    primitive: {
+        "lp-pri-achromatic-white": string;
+        "lp-pri-achromatic-black": string;
+        "lp-pri-gray-cool-950": string;
+        "lp-pri-gray-cool-900": string;
+        "lp-pri-gray-cool-800": string;
+        "lp-pri-gray-cool-700": string;
+        "lp-pri-gray-cool-600": string;
+        "lp-pri-gray-cool-500": string;
+        "lp-pri-gray-cool-400": string;
+        "lp-pri-gray-cool-300": string;
+        "lp-pri-gray-cool-200": string;
+        "lp-pri-gray-cool-100": string;
+        "lp-pri-gray-cool-50": string;
+        "lp-pri-brand-original-950": string;
+        "lp-pri-brand-original-900": string;
+        "lp-pri-brand-original-800": string;
+        "lp-pri-brand-original-700": string;
+        "lp-pri-brand-original-600": string;
+        "lp-pri-brand-original-500": string;
+        "lp-pri-brand-original-400": string;
+        "lp-pri-brand-original-300": string;
+        "lp-pri-brand-original-200": string;
+        "lp-pri-brand-original-100": string;
+        "lp-pri-brand-original-50": string;
+        "lp-pri-brand-variation-950": string;
+        "lp-pri-brand-variation-900": string;
+        "lp-pri-brand-variation-800": string;
+        "lp-pri-brand-variation-700": string;
+        "lp-pri-brand-variation-600": string;
+        "lp-pri-brand-variation-500": string;
+        "lp-pri-brand-variation-400": string;
+        "lp-pri-brand-variation-300": string;
+        "lp-pri-brand-variation-200": string;
+        "lp-pri-brand-variation-100": string;
+        "lp-pri-brand-variation-50": string;
+        "lp-pri-red-900": string;
+        "lp-pri-red-800": string;
+        "lp-pri-red-700": string;
+        "lp-pri-red-600": string;
+        "lp-pri-red-500": string;
+        "lp-pri-red-400": string;
+        "lp-pri-red-300": string;
+        "lp-pri-red-200": string;
+        "lp-pri-red-100": string;
+        "lp-pri-red-50": string;
+        "lp-pri-orange-900": string;
+        "lp-pri-orange-800": string;
+        "lp-pri-orange-700": string;
+        "lp-pri-orange-600": string;
+        "lp-pri-orange-500": string;
+        "lp-pri-orange-400": string;
+        "lp-pri-orange-300": string;
+        "lp-pri-orange-200": string;
+        "lp-pri-orange-100": string;
+        "lp-pri-orange-50": string;
+        "lp-pri-green-900": string;
+        "lp-pri-green-800": string;
+        "lp-pri-green-700": string;
+        "lp-pri-green-600": string;
+        "lp-pri-green-500": string;
+        "lp-pri-green-400": string;
+        "lp-pri-green-300": string;
+        "lp-pri-green-200": string;
+        "lp-pri-green-100": string;
+        "lp-pri-green-50": string;
+    };
+    system: {
+        "lp-neutral-primary": string;
+        "lp-neutral-secondary": string;
+        "lp-neutral-tertiary": string;
+        "lp-inverse-neutral-primary": string;
+        "lp-neutral-container-primary": string;
+        "lp-neutral-container-secondary": string;
+        "lp-neutral-container-tertiary": string;
+        "lp-neutral-border-primary": string;
+        "lp-neutral-border-secondary": string;
+        "lp-neutral-border-tertiary": string;
+        "lp-neutral-placeholder": string;
+        "lp-accent-primary": string;
+        "lp-accent-container-primary": string;
+        "lp-positive-primary": string;
+        "lp-positive-container-primary": string;
+        "lp-caution-primary": string;
+        "lp-caution-container-primary": string;
+        "lp-negative-primary": string;
+        "lp-negative-container-primary": string;
+        "lp-link-primary": string;
+        "lp-dim": string;
+        "lp-status-neutral-primary": string;
+        "lp-status-accent-primary": string;
+        "lp-status-disabled-primary": string;
+    };
+};

package/lib/design/opacity/index.d.ts

@@ -0,0 +1,14 @@
+export declare const opacity: {
+    'lp-pri-90': string;
+    'lp-pri-80': string;
+    'lp-pri-70': string;
+    'lp-pri-60': string;
+    'lp-pri-50': string;
+    'lp-pri-40': string;
+    'lp-pri-30': string;
+    'lp-pri-20': string;
+    'lp-pri-12': string;
+    'lp-pri-8': string;
+    'lp-pri-5': string;
+    'lp-pri-0': string;
+};

package/lib/design/radius/index.d.ts

@@ -0,0 +1,2 @@
+import { IRadius } from './type';
+export declare const radius: IRadius;

package/lib/design/radius/type.d.ts

@@ -0,0 +1,10 @@
+import { ISize } from '../size/type';
+export interface IRadius {
+    'lp-sys-xxs': ISize.lp_pri_2;
+    'lp-sys-xs': ISize.lp_pri_4;
+    'lp-sys-s': ISize.lp_pri_6;
+    'lp-sys-m': ISize.lp_pri_8;
+    'lp-sys-l': ISize.lp_pri_10;
+    'lp-sys-xl': ISize.lp_pri_12;
+    'lp-sys-xxl': ISize.lp_pri_200;
+}

package/lib/design/size/index.d.ts

@@ -0,0 +1,2 @@
+import { ISize } from './type';
+export declare const size: Record<keyof typeof ISize, ISize>;

package/lib/design/size/type.d.ts

@@ -0,0 +1,28 @@
+export declare enum ISize {
+    'lp_pri_0' = 0,
+    'lp_pri_1' = 1,
+    'lp_pri_2' = 2,
+    'lp_pri_3' = 3,
+    'lp_pri_4' = 4,
+    'lp_pri_6' = 6,
+    'lp_pri_8' = 8,
+    'lp_pri_10' = 10,
+    'lp_pri_12' = 12,
+    'lp_pri_14' = 14,
+    'lp_pri_16' = 16,
+    'lp_pri_18' = 18,
+    'lp_pri_20' = 20,
+    'lp_pri_24' = 24,
+    'lp_pri_32' = 32,
+    'lp_pri_40' = 40,
+    'lp_pri_48' = 48,
+    'lp_pri_56' = 56,
+    'lp_pri_64' = 64,
+    'lp_pri_80' = 80,
+    'lp_pri_100' = 100,
+    'lp_pri_120' = 120,
+    'lp_pri_140' = 140,
+    'lp_pri_160' = 160,
+    'lp_pri_180' = 180,
+    'lp_pri_200' = 200
+}

package/lib/design/typography/font.d.ts

@@ -0,0 +1,36 @@
+export declare const font: {
+    weight: {
+        readonly 'lp-pri-350': 350;
+        readonly 'lp-pri-400': 400;
+        readonly 'lp-pri-420': 420;
+        readonly 'lp-pri-450': 450;
+        readonly 'lp-pri-500': 500;
+        readonly 'lp-pri-600': 600;
+        readonly 'lp-pri-650': 650;
+        readonly 'lp-pri-700': 700;
+        readonly 'lp-pri-800': 800;
+    };
+    lineHeight: {
+        readonly 'lp-pri-120': "120%";
+        readonly 'lp-pri-130': "130%";
+        readonly 'lp-pri-150': "150%";
+        readonly 'lp-pri-180': "180%";
+    };
+    size: {
+        readonly 'lp-pri-8': 8;
+        readonly 'lp-pri-11': 11;
+        readonly 'lp-pri-12': 12;
+        readonly 'lp-pri-13': 13;
+        readonly 'lp-pri-14': 14;
+        readonly 'lp-pri-15': 15;
+        readonly 'lp-pri-16': 16;
+        readonly 'lp-pri-17': 17;
+        readonly 'lp-pri-20': 20;
+        readonly 'lp-pri-24': 24;
+        readonly 'lp-pri-28': 28;
+        readonly 'lp-pri-32': 32;
+        readonly 'lp-pri-40': 40;
+        readonly 'lp-pri-64': 64;
+        readonly 'lp-pri-72': 72;
+    };
+};

package/lib/design/typography/index.d.ts

@@ -0,0 +1,3 @@
+export * from './primitive';
+export * from './semantic';
+export * from './usage';

package/lib/design/typography/primitive.d.ts

@@ -0,0 +1,37 @@
+export declare const font: {
+    weight: {
+        readonly 'lp-pri-font-weight-300': 300;
+        readonly 'lp-pri-font-weight-350': 350;
+        readonly 'lp-pri-font-weight-400': 400;
+        readonly 'lp-pri-font-weight-420': 420;
+        readonly 'lp-pri-font-weight-450': 450;
+        readonly 'lp-pri-font-weight-500': 500;
+        readonly 'lp-pri-font-weight-600': 600;
+        readonly 'lp-pri-font-weight-650': 650;
+        readonly 'lp-pri-font-weight-700': 700;
+        readonly 'lp-pri-font-weight-800': 800;
+    };
+    lineHeight: {
+        readonly 'lp-pri-font-lineheight-120': "120%";
+        readonly 'lp-pri-font-lineheight-130': "130%";
+        readonly 'lp-pri-font-lineheight-150': "150%";
+        readonly 'lp-pri-font-lineheight-180': "180%";
+    };
+    size: {
+        readonly 'lp-pri-font-size-8': 8;
+        readonly 'lp-pri-font-size-11': 11;
+        readonly 'lp-pri-font-size-12': 12;
+        readonly 'lp-pri-font-size-13': 13;
+        readonly 'lp-pri-font-size-14': 14;
+        readonly 'lp-pri-font-size-15': 15;
+        readonly 'lp-pri-font-size-16': 16;
+        readonly 'lp-pri-font-size-17': 17;
+        readonly 'lp-pri-font-size-20': 20;
+        readonly 'lp-pri-font-size-24': 24;
+        readonly 'lp-pri-font-size-28': 28;
+        readonly 'lp-pri-font-size-32': 32;
+        readonly 'lp-pri-font-size-40': 40;
+        readonly 'lp-pri-font-size-64': 64;
+        readonly 'lp-pri-font-size-72': 72;
+    };
+};

package/lib/design/typography/semantic.d.ts

@@ -0,0 +1,12 @@
+import { font } from './primitive';
+import { TypographyKeys } from './types';
+export type FontFamily = 'lp-pri-font-family-poppins' | 'lp-pri-font-family-pretendard-jp' | 'lp-pri-font-family-variables-pretendard' | 'lp-pri-font-family-variables-pretendard-jp';
+interface TypographyValues {
+    family: FontFamily;
+    weight: keyof typeof font.weight;
+    lineHeight: keyof typeof font.lineHeight;
+    size: keyof typeof font.size;
+}
+export declare const typographyEnglish: Partial<Record<TypographyKeys, TypographyValues>>;
+export declare const typography: Partial<Record<TypographyKeys, TypographyValues>>;
+export {};

package/lib/design/typography/types.d.ts

@@ -0,0 +1,8 @@
+export type TypographyPrefix = 'lp-sys-typo';
+export type TypographyTitlePrefix = 'title';
+export type TypographyTitle = '1-accent-bold' | '2-accent-bold' | '3-accent-bold' | '4-accent-bold' | '1-accent-medium' | '2-accent-medium' | '3-accent-medium' | '4-accent-medium' | '1-normal-bold' | '2-normal-bold' | '3-normal-bold' | '4-normal-bold' | '1-normal-medium' | '2-normal-medium';
+export type TypographyTitleType = `${TypographyTitlePrefix}${TypographyTitle}`;
+export type TypographyDisplayPrefix = 'display';
+export type TypographyDisplay = '1-accent-black' | '2-accent-black' | '3-accent-black' | '1-normal-black' | '2-normal-black' | '3-normal-black';
+export type TypographyDisplayType = `${TypographyDisplayPrefix}${TypographyDisplay}`;
+export type TypographyKeys = `${TypographyPrefix}-${TypographyTitleType | TypographyDisplayType}`;

package/lib/design/typography/usage/Display.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { HTMLAttributes } from 'react';
+interface IProps extends HTMLAttributes<HTMLDivElement> {
+    type: 'accent' | 'normal' | 'answer';
+}
+export declare const Display: (props: IProps) => React.JSX.Element;
+export {};

package/lib/design/typography/usage/Heading.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IHeadingProps } from './types';
+export declare const Heading1: (props: IHeadingProps) => React.JSX.Element;
+export declare const Heading2: (props: IHeadingProps) => React.JSX.Element;

package/lib/design/typography/usage/index.d.ts

@@ -0,0 +1 @@
+export * from './Heading';

package/lib/design/typography/usage/types.d.ts

@@ -0,0 +1,24 @@
+import { HTMLAttributes } from 'react';
+export declare enum TypographySubType {
+    answer = "answer",
+    accent = "accent",
+    normal = "normal"
+}
+export declare enum TypographySubWeight {
+    black = "black",
+    bold = "bold",
+    medium = "medium",
+    regular = "regular"
+}
+export interface IDisplayProps extends HTMLAttributes<HTMLDivElement> {
+    type: TypographySubType.accent | TypographySubType.normal;
+    weight: TypographySubWeight.black;
+}
+export interface IHeadingProps extends HTMLAttributes<HTMLDivElement> {
+    type: TypographySubType.answer;
+    weight: TypographySubWeight.bold;
+}
+export interface ICaptionProps extends HTMLAttributes<HTMLDivElement> {
+    type: TypographySubType.normal;
+    weight: TypographySubWeight.regular | TypographySubWeight.bold;
+}