@liner-fe/design-token 2.0.29 → 2.0.32
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +0 -2
- package/global.css +159 -0
- package/lib/design/color/index.d.ts +2 -0
- package/lib/design/color/type.d.ts +76 -0
- package/lib/design/color/vars.d.ts +95 -0
- package/lib/design/opacity/index.d.ts +14 -0
- package/lib/design/radius/index.d.ts +2 -0
- package/lib/design/radius/type.d.ts +10 -0
- package/lib/design/size/index.d.ts +2 -0
- package/lib/design/size/type.d.ts +28 -0
- package/lib/design/typography/font.d.ts +36 -0
- package/lib/design/typography/index.d.ts +3 -0
- package/lib/design/typography/primitive.d.ts +37 -0
- package/lib/design/typography/semantic.d.ts +12 -0
- package/lib/design/typography/types.d.ts +8 -0
- package/lib/design/typography/usage/Display.d.ts +7 -0
- package/lib/design/typography/usage/Heading.d.ts +4 -0
- package/lib/design/typography/usage/index.d.ts +1 -0
- package/lib/design/typography/usage/types.d.ts +24 -0
- package/lib/global.css +372 -0
- package/lib/hooks/useDarkTheme.d.ts +4 -0
- package/lib/hooks/useLanguage.d.ts +1 -0
- package/lib/index.cjs +287 -1026
- package/lib/index.cjs.map +4 -4
- package/lib/index.d.ts +8 -3
- package/lib/index.mjs +287 -1026
- package/lib/index.mjs.map +4 -4
- package/package.json +8 -4
- package/src/design/color/index.ts +125 -0
- package/src/design/color/type.ts +103 -0
- package/src/design/color/vars.ts +1 -0
- package/src/design/opacity/index.ts +14 -0
- package/src/design/opacity/type.ts +14 -0
- package/src/design/radius/index.ts +12 -0
- package/src/design/radius/type.ts +11 -0
- package/src/design/size/index.ts +30 -0
- package/src/design/size/type.ts +28 -0
- package/src/design/typography/index.ts +3 -0
- package/src/design/typography/primitive.ts +39 -0
- package/src/design/typography/semantic.ts +33 -0
- package/src/design/typography/types.ts +32 -0
- package/src/design/typography/usage/Caption.tsx +0 -0
- package/src/design/typography/usage/Display.tsx +0 -0
- package/src/design/typography/usage/Heading.tsx +19 -0
- package/src/design/typography/usage/Paragraph.tsx +44 -0
- package/src/design/typography/usage/Title.tsx +23 -0
- package/src/design/typography/usage/index.ts +1 -0
- package/src/design/typography/usage/types.ts +29 -0
- package/src/global.css +170 -0
- package/src/hooks/useDarkTheme.ts +42 -0
- package/src/hooks/useLanguage.ts +1 -0
- package/src/index.ts +9 -3
- package/lib/assets/ic-bold-16-android.d.ts +0 -6
- package/lib/assets/ic-bold-16-apple.d.ts +0 -6
- package/lib/assets/ic-bold-16-chrome.d.ts +0 -6
- package/lib/assets/ic-bold-16-quote-up.d.ts +0 -6
- package/lib/assets/ic-bold-24-caution.d.ts +0 -6
- package/lib/assets/ic-bold-24-check.d.ts +0 -6
- package/lib/assets/ic-bold-24-file.d.ts +0 -6
- package/lib/assets/ic-bold-24-globe.d.ts +0 -6
- package/lib/assets/ic-bold-24-image.d.ts +0 -6
- package/lib/assets/ic-bold-24-info.d.ts +0 -6
- package/lib/assets/ic-color-24-academic.d.ts +0 -2
- package/lib/assets/ic-color-24-excel.d.ts +0 -2
- package/lib/assets/ic-color-24-html.d.ts +0 -2
- package/lib/assets/ic-color-24-image.d.ts +0 -2
- package/lib/assets/ic-color-24-math.d.ts +0 -2
- package/lib/assets/ic-color-24-news.d.ts +0 -2
- package/lib/assets/ic-color-24-pdf.d.ts +0 -2
- package/lib/assets/ic-color-24-ppt.d.ts +0 -2
- package/lib/assets/ic-color-24-text.d.ts +0 -2
- package/lib/assets/ic-color-24-typing.d.ts +0 -2
- package/lib/assets/ic-color-24-upload.d.ts +0 -2
- package/lib/assets/ic-color-24-word.d.ts +0 -2
- package/lib/assets/ic-color-24-workspace.d.ts +0 -2
- package/lib/assets/ic-color-24-writer.d.ts +0 -2
- package/lib/assets/ic-color-24-youtube.d.ts +0 -2
- package/lib/assets/ic-line-16-arrow-down.d.ts +0 -6
- package/lib/assets/ic-line-16-arrow-up.d.ts +0 -6
- package/lib/assets/ic-line-16-check.d.ts +0 -6
- package/lib/assets/ic-line-16-copy.d.ts +0 -6
- package/lib/assets/ic-line-16-mobile.d.ts +0 -6
- package/lib/assets/ic-line-16-search.d.ts +0 -6
- package/lib/assets/ic-line-16-source.d.ts +0 -6
- package/lib/assets/ic-line-24-add.d.ts +0 -6
- package/lib/assets/ic-line-24-arrow-left.d.ts +0 -6
- package/lib/assets/ic-line-24-close.d.ts +0 -6
- package/lib/assets/ic-line-24-copy.d.ts +0 -6
- package/lib/assets/ic-line-24-globe.d.ts +0 -6
- package/lib/assets/ic-line-24-menu.d.ts +0 -6
- package/lib/assets/ic-line-24-message-edit.d.ts +0 -6
- package/lib/assets/ic-line-24-select-text.d.ts +0 -6
- package/lib/assets/ic-line-24-source-rebuilding.d.ts +0 -6
- package/lib/assets/ic-tone-36-3thread.d.ts +0 -6
- package/lib/assets/ic-tone-36-invite.d.ts +0 -6
- package/lib/assets/index.d.ts +0 -43
- package/lib/color.d.ts +0 -21
- package/lib/typography.d.ts +0 -26
- package/src/assets/ic-bold-16-android.tsx +0 -21
- package/src/assets/ic-bold-16-apple.tsx +0 -22
- package/src/assets/ic-bold-16-chrome.tsx +0 -26
- package/src/assets/ic-bold-16-quote-up.tsx +0 -18
- package/src/assets/ic-bold-24-caution.tsx +0 -14
- package/src/assets/ic-bold-24-chat.tsx +0 -18
- package/src/assets/ic-bold-24-check.tsx +0 -14
- package/src/assets/ic-bold-24-file.tsx +0 -18
- package/src/assets/ic-bold-24-globe.tsx +0 -46
- package/src/assets/ic-bold-24-image.tsx +0 -22
- package/src/assets/ic-bold-24-info.tsx +0 -14
- package/src/assets/ic-color-24-academic.tsx +0 -23
- package/src/assets/ic-color-24-excel.tsx +0 -11
- package/src/assets/ic-color-24-html.tsx +0 -25
- package/src/assets/ic-color-24-image.tsx +0 -19
- package/src/assets/ic-color-24-math.tsx +0 -39
- package/src/assets/ic-color-24-news.tsx +0 -23
- package/src/assets/ic-color-24-pdf.tsx +0 -16
- package/src/assets/ic-color-24-ppt.tsx +0 -11
- package/src/assets/ic-color-24-text.tsx +0 -25
- package/src/assets/ic-color-24-typing.tsx +0 -19
- package/src/assets/ic-color-24-upload.tsx +0 -39
- package/src/assets/ic-color-24-word.tsx +0 -13
- package/src/assets/ic-color-24-workspace.tsx +0 -21
- package/src/assets/ic-color-24-writer.tsx +0 -19
- package/src/assets/ic-color-24-youtube.tsx +0 -26
- package/src/assets/ic-line-16-arrow-down.tsx +0 -18
- package/src/assets/ic-line-16-arrow-up.tsx +0 -18
- package/src/assets/ic-line-16-check.tsx +0 -14
- package/src/assets/ic-line-16-copy.tsx +0 -24
- package/src/assets/ic-line-16-mobile.tsx +0 -25
- package/src/assets/ic-line-16-search.tsx +0 -24
- package/src/assets/ic-line-16-source.tsx +0 -25
- package/src/assets/ic-line-24-add.tsx +0 -12
- package/src/assets/ic-line-24-arrow-left.tsx +0 -16
- package/src/assets/ic-line-24-close.tsx +0 -16
- package/src/assets/ic-line-24-copy.tsx +0 -24
- package/src/assets/ic-line-24-globe.tsx +0 -16
- package/src/assets/ic-line-24-menu.tsx +0 -28
- package/src/assets/ic-line-24-message-edit.tsx +0 -33
- package/src/assets/ic-line-24-select-text.tsx +0 -25
- package/src/assets/ic-line-24-source-rebuilding.tsx +0 -54
- package/src/assets/ic-tone-36-3thread.tsx +0 -18
- package/src/assets/ic-tone-36-invite.tsx +0 -26
- package/src/assets/index.ts +0 -43
- package/src/color.ts +0 -21
- package/src/typography.ts +0 -50
- /package/src/{custom.d.ts → @types/custom.d.ts} +0 -0
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export interface IOpacity {
|
|
2
|
+
'lp-pri-90': '90%';
|
|
3
|
+
'lp-pri-80': '80%';
|
|
4
|
+
'lp-pri-70': '70%';
|
|
5
|
+
'lp-pri-60': '60%';
|
|
6
|
+
'lp-pri-50': '50%';
|
|
7
|
+
'lp-pri-40': '40%';
|
|
8
|
+
'lp-pri-30': '30%';
|
|
9
|
+
'lp-pri-20': '20%';
|
|
10
|
+
'lp-pri-12': '12%';
|
|
11
|
+
'lp-pri-8': '8%';
|
|
12
|
+
'lp-pri-5': '5%';
|
|
13
|
+
'lp-pri-0': '0%';
|
|
14
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { ISize } from '../size/type';
|
|
2
|
+
import { IRadius } from './type';
|
|
3
|
+
|
|
4
|
+
export const radius: IRadius = {
|
|
5
|
+
'lp-sys-xxs': ISize.lp_pri_2,
|
|
6
|
+
'lp-sys-xs': ISize.lp_pri_4,
|
|
7
|
+
'lp-sys-s': ISize.lp_pri_6,
|
|
8
|
+
'lp-sys-m': ISize.lp_pri_8,
|
|
9
|
+
'lp-sys-l': ISize.lp_pri_10,
|
|
10
|
+
'lp-sys-xl': ISize.lp_pri_12,
|
|
11
|
+
'lp-sys-xxl': ISize.lp_pri_200,
|
|
12
|
+
} as const;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ISize } from '../size/type';
|
|
2
|
+
|
|
3
|
+
export interface IRadius {
|
|
4
|
+
'lp-sys-xxs': ISize.lp_pri_2;
|
|
5
|
+
'lp-sys-xs': ISize.lp_pri_4;
|
|
6
|
+
'lp-sys-s': ISize.lp_pri_6;
|
|
7
|
+
'lp-sys-m': ISize.lp_pri_8;
|
|
8
|
+
'lp-sys-l': ISize.lp_pri_10;
|
|
9
|
+
'lp-sys-xl': ISize.lp_pri_12;
|
|
10
|
+
'lp-sys-xxl': ISize.lp_pri_200;
|
|
11
|
+
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { ISize } from './type';
|
|
2
|
+
|
|
3
|
+
export const size: Record<keyof typeof ISize, ISize> = {
|
|
4
|
+
lp_pri_0: ISize.lp_pri_0,
|
|
5
|
+
lp_pri_1: ISize.lp_pri_1,
|
|
6
|
+
lp_pri_2: ISize.lp_pri_2,
|
|
7
|
+
lp_pri_3: ISize.lp_pri_3,
|
|
8
|
+
lp_pri_4: ISize.lp_pri_4,
|
|
9
|
+
lp_pri_6: ISize.lp_pri_6,
|
|
10
|
+
lp_pri_8: ISize.lp_pri_8,
|
|
11
|
+
lp_pri_10: ISize.lp_pri_10,
|
|
12
|
+
lp_pri_12: ISize.lp_pri_12,
|
|
13
|
+
lp_pri_14: ISize.lp_pri_14,
|
|
14
|
+
lp_pri_16: ISize.lp_pri_16,
|
|
15
|
+
lp_pri_18: ISize.lp_pri_18,
|
|
16
|
+
lp_pri_20: ISize.lp_pri_20,
|
|
17
|
+
lp_pri_24: ISize.lp_pri_24,
|
|
18
|
+
lp_pri_32: ISize.lp_pri_32,
|
|
19
|
+
lp_pri_40: ISize.lp_pri_40,
|
|
20
|
+
lp_pri_48: ISize.lp_pri_48,
|
|
21
|
+
lp_pri_56: ISize.lp_pri_56,
|
|
22
|
+
lp_pri_64: ISize.lp_pri_64,
|
|
23
|
+
lp_pri_80: ISize.lp_pri_80,
|
|
24
|
+
lp_pri_100: ISize.lp_pri_100,
|
|
25
|
+
lp_pri_120: ISize.lp_pri_120,
|
|
26
|
+
lp_pri_140: ISize.lp_pri_140,
|
|
27
|
+
lp_pri_160: ISize.lp_pri_160,
|
|
28
|
+
lp_pri_180: ISize.lp_pri_180,
|
|
29
|
+
lp_pri_200: ISize.lp_pri_200,
|
|
30
|
+
};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
export enum ISize {
|
|
2
|
+
'lp_pri_0' = 0,
|
|
3
|
+
'lp_pri_1' = 1,
|
|
4
|
+
'lp_pri_2' = 2,
|
|
5
|
+
'lp_pri_3' = 3,
|
|
6
|
+
'lp_pri_4' = 4,
|
|
7
|
+
'lp_pri_6' = 6,
|
|
8
|
+
'lp_pri_8' = 8,
|
|
9
|
+
'lp_pri_10' = 10,
|
|
10
|
+
'lp_pri_12' = 12,
|
|
11
|
+
'lp_pri_14' = 14,
|
|
12
|
+
'lp_pri_16' = 16,
|
|
13
|
+
'lp_pri_18' = 18,
|
|
14
|
+
'lp_pri_20' = 20,
|
|
15
|
+
'lp_pri_24' = 24,
|
|
16
|
+
'lp_pri_32' = 32,
|
|
17
|
+
'lp_pri_40' = 40,
|
|
18
|
+
'lp_pri_48' = 48,
|
|
19
|
+
'lp_pri_56' = 56,
|
|
20
|
+
'lp_pri_64' = 64,
|
|
21
|
+
'lp_pri_80' = 80,
|
|
22
|
+
'lp_pri_100' = 100,
|
|
23
|
+
'lp_pri_120' = 120,
|
|
24
|
+
'lp_pri_140' = 140,
|
|
25
|
+
'lp_pri_160' = 160,
|
|
26
|
+
'lp_pri_180' = 180,
|
|
27
|
+
'lp_pri_200' = 200,
|
|
28
|
+
}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
const lineHeight = {
|
|
2
|
+
'lp-pri-font-lineheight-120': '120%',
|
|
3
|
+
'lp-pri-font-lineheight-130': '130%',
|
|
4
|
+
'lp-pri-font-lineheight-150': '150%',
|
|
5
|
+
'lp-pri-font-lineheight-180': '180%',
|
|
6
|
+
} as const;
|
|
7
|
+
|
|
8
|
+
const size = {
|
|
9
|
+
'lp-pri-font-size-8': 8,
|
|
10
|
+
'lp-pri-font-size-11': 11,
|
|
11
|
+
'lp-pri-font-size-12': 12,
|
|
12
|
+
'lp-pri-font-size-13': 13,
|
|
13
|
+
'lp-pri-font-size-14': 14,
|
|
14
|
+
'lp-pri-font-size-15': 15,
|
|
15
|
+
'lp-pri-font-size-16': 16,
|
|
16
|
+
'lp-pri-font-size-17': 17,
|
|
17
|
+
'lp-pri-font-size-20': 20,
|
|
18
|
+
'lp-pri-font-size-24': 24,
|
|
19
|
+
'lp-pri-font-size-28': 28,
|
|
20
|
+
'lp-pri-font-size-32': 32,
|
|
21
|
+
'lp-pri-font-size-40': 40,
|
|
22
|
+
'lp-pri-font-size-64': 64,
|
|
23
|
+
'lp-pri-font-size-72': 72,
|
|
24
|
+
} as const;
|
|
25
|
+
|
|
26
|
+
const weight = {
|
|
27
|
+
'lp-pri-font-weight-300': 300,
|
|
28
|
+
'lp-pri-font-weight-350': 350,
|
|
29
|
+
'lp-pri-font-weight-400': 400,
|
|
30
|
+
'lp-pri-font-weight-420': 420,
|
|
31
|
+
'lp-pri-font-weight-450': 450,
|
|
32
|
+
'lp-pri-font-weight-500': 500,
|
|
33
|
+
'lp-pri-font-weight-600': 600,
|
|
34
|
+
'lp-pri-font-weight-650': 650,
|
|
35
|
+
'lp-pri-font-weight-700': 700,
|
|
36
|
+
'lp-pri-font-weight-800': 800,
|
|
37
|
+
} as const;
|
|
38
|
+
|
|
39
|
+
export const font = { weight, lineHeight, size };
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { font } from './primitive';
|
|
2
|
+
import { TypographyKeys } from './types';
|
|
3
|
+
|
|
4
|
+
export type FontFamily =
|
|
5
|
+
| 'lp-pri-font-family-poppins'
|
|
6
|
+
| 'lp-pri-font-family-pretendard-jp'
|
|
7
|
+
| 'lp-pri-font-family-variables-pretendard'
|
|
8
|
+
| 'lp-pri-font-family-variables-pretendard-jp';
|
|
9
|
+
|
|
10
|
+
interface TypographyValues {
|
|
11
|
+
family: FontFamily;
|
|
12
|
+
weight: keyof typeof font.weight;
|
|
13
|
+
lineHeight: keyof typeof font.lineHeight;
|
|
14
|
+
size: keyof typeof font.size;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export const typographyEnglish: Partial<Record<TypographyKeys, TypographyValues>> = {
|
|
18
|
+
'lp-sys-typo-title1-normal-medium': {
|
|
19
|
+
family: 'lp-pri-font-family-poppins',
|
|
20
|
+
weight: 'lp-pri-font-weight-800',
|
|
21
|
+
lineHeight: 'lp-pri-font-lineheight-120',
|
|
22
|
+
size: 'lp-pri-font-size-72',
|
|
23
|
+
},
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
export const typography: Partial<Record<TypographyKeys, TypographyValues>> = {
|
|
27
|
+
'lp-sys-typo-title1-normal-medium': {
|
|
28
|
+
family: 'lp-pri-font-family-pretendard-jp',
|
|
29
|
+
weight: 'lp-pri-font-weight-800',
|
|
30
|
+
lineHeight: 'lp-pri-font-lineheight-120',
|
|
31
|
+
size: 'lp-pri-font-size-72',
|
|
32
|
+
},
|
|
33
|
+
};
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
export type TypographyPrefix = 'lp-sys-typo';
|
|
2
|
+
|
|
3
|
+
export type TypographyTitlePrefix = 'title';
|
|
4
|
+
export type TypographyTitle =
|
|
5
|
+
| '1-accent-bold'
|
|
6
|
+
| '2-accent-bold'
|
|
7
|
+
| '3-accent-bold'
|
|
8
|
+
| '4-accent-bold'
|
|
9
|
+
| '1-accent-medium'
|
|
10
|
+
| '2-accent-medium'
|
|
11
|
+
| '3-accent-medium'
|
|
12
|
+
| '4-accent-medium'
|
|
13
|
+
| '1-normal-bold'
|
|
14
|
+
| '2-normal-bold'
|
|
15
|
+
| '3-normal-bold'
|
|
16
|
+
| '4-normal-bold'
|
|
17
|
+
| '1-normal-medium'
|
|
18
|
+
| '2-normal-medium';
|
|
19
|
+
export type TypographyTitleType = `${TypographyTitlePrefix}${TypographyTitle}`;
|
|
20
|
+
|
|
21
|
+
export type TypographyDisplayPrefix = 'display';
|
|
22
|
+
export type TypographyDisplay =
|
|
23
|
+
| '1-accent-black'
|
|
24
|
+
| '2-accent-black'
|
|
25
|
+
| '3-accent-black'
|
|
26
|
+
| '1-normal-black'
|
|
27
|
+
| '2-normal-black'
|
|
28
|
+
| '3-normal-black';
|
|
29
|
+
|
|
30
|
+
export type TypographyDisplayType = `${TypographyDisplayPrefix}${TypographyDisplay}`;
|
|
31
|
+
|
|
32
|
+
export type TypographyKeys = `${TypographyPrefix}-${TypographyTitleType | TypographyDisplayType}`;
|
|
File without changes
|
|
File without changes
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { HTMLAttributes } from 'react';
|
|
3
|
+
import { IDisplayProps, IHeadingProps } from './types';
|
|
4
|
+
|
|
5
|
+
export const Heading1 = (props: IHeadingProps) => {
|
|
6
|
+
return (
|
|
7
|
+
<div {...props} className={`lp-sys-typo-body-black-72${props.className ? ` ${props.className}` : ''}`}>
|
|
8
|
+
{props.children}
|
|
9
|
+
</div>
|
|
10
|
+
);
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
export const Heading2 = (props: IHeadingProps) => {
|
|
14
|
+
return (
|
|
15
|
+
<div {...props} className={`lp-sys-typo-body-black-72${props.className ? ` ${props.className}` : ''}`}>
|
|
16
|
+
{props.children}
|
|
17
|
+
</div>
|
|
18
|
+
);
|
|
19
|
+
};
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { HTMLAttributes } from 'react';
|
|
3
|
+
import { TypographySubType, TypographySubWeight } from './types';
|
|
4
|
+
|
|
5
|
+
export type ParagraphType = IParagraphAnswer | IParagraphNormal;
|
|
6
|
+
|
|
7
|
+
export interface IParagraphNormal extends HTMLAttributes<HTMLDivElement> {
|
|
8
|
+
type: TypographySubType.normal;
|
|
9
|
+
weight: TypographySubWeight.bold | TypographySubWeight.medium | TypographySubWeight.regular;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export interface IParagraphAnswer extends HTMLAttributes<HTMLDivElement> {
|
|
13
|
+
type: TypographySubType.answer;
|
|
14
|
+
weight: TypographySubWeight.bold | TypographySubWeight.regular;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export interface IParagraphAccent extends HTMLAttributes<HTMLDivElement> {
|
|
18
|
+
type: TypographySubType.accent;
|
|
19
|
+
weight: TypographySubWeight.bold | TypographySubWeight.medium | TypographySubWeight.regular;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
export const Paragraph1 = (props: ParagraphType) => {
|
|
23
|
+
return (
|
|
24
|
+
<div {...props} className={`lp-sys-typo-body-black-72${props.className ? ` ${props.className}` : ''}`}>
|
|
25
|
+
{props.children}
|
|
26
|
+
</div>
|
|
27
|
+
);
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
export const Paragraph2 = (props: ParagraphType) => {
|
|
31
|
+
return (
|
|
32
|
+
<div {...props} className={`lp-sys-typo-body-black-72${props.className ? ` ${props.className}` : ''}`}>
|
|
33
|
+
{props.children}
|
|
34
|
+
</div>
|
|
35
|
+
);
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
export const Paragraph3 = (props: ParagraphType) => {
|
|
39
|
+
return (
|
|
40
|
+
<div {...props} className={`lp-sys-typo-body-black-72${props.className ? ` ${props.className}` : ''}`}>
|
|
41
|
+
{props.children}
|
|
42
|
+
</div>
|
|
43
|
+
);
|
|
44
|
+
};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { HTMLAttributes } from 'react';
|
|
3
|
+
import { TypographySubType, TypographySubWeight } from './types';
|
|
4
|
+
|
|
5
|
+
export type TitleType = ITitleAccent | ITitleNormal;
|
|
6
|
+
|
|
7
|
+
interface ITitleAccent extends HTMLAttributes<HTMLDivElement> {
|
|
8
|
+
type: TypographySubType.accent;
|
|
9
|
+
weight: TypographySubWeight.bold | TypographySubWeight.medium;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
interface ITitleNormal extends HTMLAttributes<HTMLDivElement> {
|
|
13
|
+
type: TypographySubType.normal;
|
|
14
|
+
weight: TypographySubWeight.bold | TypographySubWeight.medium;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export const Title1 = (props: TitleType) => {
|
|
18
|
+
return (
|
|
19
|
+
<div {...props} className={`lp-sys-typo-body-black-72${props.className ? ` ${props.className}` : ''}`}>
|
|
20
|
+
{props.children}
|
|
21
|
+
</div>
|
|
22
|
+
);
|
|
23
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Heading';
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'react';
|
|
2
|
+
|
|
3
|
+
export enum TypographySubType {
|
|
4
|
+
answer = 'answer',
|
|
5
|
+
accent = 'accent',
|
|
6
|
+
normal = 'normal',
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
export enum TypographySubWeight {
|
|
10
|
+
black = 'black',
|
|
11
|
+
bold = 'bold',
|
|
12
|
+
medium = 'medium',
|
|
13
|
+
regular = 'regular',
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export interface IDisplayProps extends HTMLAttributes<HTMLDivElement> {
|
|
17
|
+
type: TypographySubType.accent | TypographySubType.normal;
|
|
18
|
+
weight: TypographySubWeight.black;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export interface IHeadingProps extends HTMLAttributes<HTMLDivElement> {
|
|
22
|
+
type: TypographySubType.answer;
|
|
23
|
+
weight: TypographySubWeight.bold;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
export interface ICaptionProps extends HTMLAttributes<HTMLDivElement> {
|
|
27
|
+
type: TypographySubType.normal;
|
|
28
|
+
weight: TypographySubWeight.regular | TypographySubWeight.bold;
|
|
29
|
+
}
|
package/src/global.css
ADDED
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
|
|
2
|
+
:root{
|
|
3
|
+
--lp-pri-achromatic-white: #ffffff;
|
|
4
|
+
--lp-pri-achromatic-black: #000000;
|
|
5
|
+
--lp-pri-gray-cool-950: #F7F8FF;
|
|
6
|
+
--lp-pri-gray-cool-900: #EEF0F7;
|
|
7
|
+
--lp-pri-gray-cool-800: #DFE3F3;
|
|
8
|
+
--lp-pri-gray-cool-700: #C7CFE9;
|
|
9
|
+
--lp-pri-gray-cool-600: #97A5D6;
|
|
10
|
+
--lp-pri-gray-cool-500: #7487C4;
|
|
11
|
+
--lp-pri-gray-cool-400: #5B6BA4;
|
|
12
|
+
--lp-pri-gray-cool-300: #4A5889;
|
|
13
|
+
--lp-pri-gray-cool-200: #39426A;
|
|
14
|
+
--lp-pri-gray-cool-100: #282C3E;
|
|
15
|
+
--lp-pri-gray-cool-50: #1F2131;
|
|
16
|
+
--lp-pri-brand-original-950: #F5F6FF;
|
|
17
|
+
--lp-pri-brand-original-900: #E9EBFF;
|
|
18
|
+
--lp-pri-brand-original-800: #D4D7FF;
|
|
19
|
+
--lp-pri-brand-original-700: #ADB3FF;
|
|
20
|
+
--lp-pri-brand-original-600: #8690FF;
|
|
21
|
+
--lp-pri-brand-original-500: #5F6CFF;
|
|
22
|
+
--lp-pri-brand-original-400: #3B49E3;
|
|
23
|
+
--lp-pri-brand-original-300: #303CB5;
|
|
24
|
+
--lp-pri-brand-original-200: #242F86;
|
|
25
|
+
--lp-pri-brand-original-100: #1B2366;
|
|
26
|
+
--lp-pri-brand-original-50: #151A4D;
|
|
27
|
+
--lp-pri-brand-variation-950: #F6F4FE;
|
|
28
|
+
--lp-pri-brand-variation-900: #EDE9FE;
|
|
29
|
+
--lp-pri-brand-variation-800: #DBD3FE;
|
|
30
|
+
--lp-pri-brand-variation-700: #B8A7FE;
|
|
31
|
+
--lp-pri-brand-variation-600: #947BFE;
|
|
32
|
+
--lp-pri-brand-variation-500: #704FFD;
|
|
33
|
+
--lp-pri-brand-variation-400: #593AFF;
|
|
34
|
+
--lp-pri-brand-variation-300: #422BCE;
|
|
35
|
+
--lp-pri-brand-variation-200: #321F9B;
|
|
36
|
+
--lp-pri-brand-variation-100: #24156E;
|
|
37
|
+
--lp-pri-brand-variation-50: #1A1052;
|
|
38
|
+
--lp-pri-red-900: #FFE9EB;
|
|
39
|
+
--lp-pri-red-800: #FFCDD1;
|
|
40
|
+
--lp-pri-red-700: #FF9AA2;
|
|
41
|
+
--lp-pri-red-600: #FF6773;
|
|
42
|
+
--lp-pri-red-500: #FF3445;
|
|
43
|
+
--lp-pri-red-400: #FA1D2F;
|
|
44
|
+
--lp-pri-red-300: #C2172C;
|
|
45
|
+
--lp-pri-red-200: #910B1D;
|
|
46
|
+
--lp-pri-red-100: #68081A;
|
|
47
|
+
--lp-pri-red-50: #4A0616;
|
|
48
|
+
--lp-pri-orange-900: #FFEEE6;
|
|
49
|
+
--lp-pri-orange-800: #FFD2B8;
|
|
50
|
+
--lp-pri-orange-700: #FFA970;
|
|
51
|
+
--lp-pri-orange-600: #FF8842;
|
|
52
|
+
--lp-pri-orange-500: #FF6215;
|
|
53
|
+
--lp-pri-orange-400: #F84B10;
|
|
54
|
+
--lp-pri-orange-300: #BD3512;
|
|
55
|
+
--lp-pri-orange-200: #8A220D;
|
|
56
|
+
--lp-pri-orange-100: #61170E;
|
|
57
|
+
--lp-pri-orange-50: #45110E;
|
|
58
|
+
--lp-pri-green-900: #E2F6E5;
|
|
59
|
+
--lp-pri-green-800: #BDEAC4;
|
|
60
|
+
--lp-pri-green-700: #83D88E;
|
|
61
|
+
--lp-pri-green-600: #51C760;
|
|
62
|
+
--lp-pri-green-500: #26AF3E;
|
|
63
|
+
--lp-pri-green-400: #1B9632;
|
|
64
|
+
--lp-pri-green-300: #137728;
|
|
65
|
+
--lp-pri-green-200: #0C5B1F;
|
|
66
|
+
--lp-pri-green-100: #074218;
|
|
67
|
+
--lp-pri-green-50: #053014;
|
|
68
|
+
|
|
69
|
+
--lp-pri-font-size-8: 8px;
|
|
70
|
+
--lp-pri-font-size-11: 11px;
|
|
71
|
+
--lp-pri-font-size-12: 12px;
|
|
72
|
+
--lp-pri-font-size-13: 13px;
|
|
73
|
+
--lp-pri-font-size-14: 14px;
|
|
74
|
+
--lp-pri-font-size-15: 15px;
|
|
75
|
+
--lp-pri-font-size-16: 16px;
|
|
76
|
+
--lp-pri-font-size-17: 17px;
|
|
77
|
+
--lp-pri-font-size-20: 20px;
|
|
78
|
+
--lp-pri-font-size-24: 24px;
|
|
79
|
+
--lp-pri-font-size-28: 28px;
|
|
80
|
+
--lp-pri-font-size-32: 32px;
|
|
81
|
+
--lp-pri-font-size-40: 40px;
|
|
82
|
+
--lp-pri-font-size-64: 64px;
|
|
83
|
+
--lp-pri-font-size-72: 72px;
|
|
84
|
+
|
|
85
|
+
--lp-pri-font-lineheight-120: 120%;
|
|
86
|
+
--lp-pri-font-lineheight-130: 130%;
|
|
87
|
+
--lp-pri-font-lineheight-150: 150%;
|
|
88
|
+
--lp-pri-font-lineheight-180: 180%;
|
|
89
|
+
--lp-pri-font-weight-300: 300;
|
|
90
|
+
--lp-pri-font-weight-350: 350;
|
|
91
|
+
--lp-pri-font-weight-400: 400;
|
|
92
|
+
--lp-pri-font-weight-420: 420;
|
|
93
|
+
--lp-pri-font-weight-450: 450;
|
|
94
|
+
--lp-pri-font-weight-500: 500;
|
|
95
|
+
--lp-pri-font-weight-600: 600;
|
|
96
|
+
--lp-pri-font-weight-650: 650;
|
|
97
|
+
--lp-pri-font-weight-700: 700;
|
|
98
|
+
--lp-pri-font-weight-800: 800;
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
.lp-sys-typo-title1-normal-medium { font-family: lp-pri-font-family-pretendard-jp;
|
|
103
|
+
font-size: var(--lp-pri-font-size-72);
|
|
104
|
+
font-weight: var(--lp-pri-font-weight-800);
|
|
105
|
+
line-height: var(--lp-pri-font-lineheight-120);}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
:root[color-theme='dark'] {
|
|
111
|
+
--lp-neutral-primary: var(--lp-pri-gray-cool-950);
|
|
112
|
+
--lp-neutral-secondary: var(--lp-pri-gray-cool-900);
|
|
113
|
+
--lp-neutral-tertiary: var(--lp-pri-gray-cool-800);
|
|
114
|
+
--lp-inverse-neutral-primary: var(--lp-pri-achromatic-white);
|
|
115
|
+
--lp-neutral-container-primary: var(--lp-pri-gray-cool-700);
|
|
116
|
+
--lp-neutral-container-secondary: var(--lp-pri-gray-cool-600);
|
|
117
|
+
--lp-neutral-container-tertiary: var(--lp-pri-gray-cool-500);
|
|
118
|
+
--lp-neutral-border-primary: var(--lp-pri-gray-cool-400);
|
|
119
|
+
--lp-neutral-border-secondary: var(--lp-pri-gray-cool-300);
|
|
120
|
+
--lp-neutral-border-tertiary: var(--lp-pri-gray-cool-200);
|
|
121
|
+
--lp-neutral-placeholder: var(--lp-pri-gray-cool-100);
|
|
122
|
+
--lp-accent-primary: var(--lp-pri-brand-original-600);
|
|
123
|
+
--lp-accent-container-primary: var(--lp-pri-brand-original-500);
|
|
124
|
+
--lp-positive-primary: var(--lp-pri-green-600);
|
|
125
|
+
--lp-positive-container-primary: var(--lp-pri-green-500);
|
|
126
|
+
--lp-caution-primary: var(--lp-pri-orange-600);
|
|
127
|
+
--lp-caution-container-primary: var(--lp-pri-orange-500);
|
|
128
|
+
--lp-negative-primary: var(--lp-pri-red-600);
|
|
129
|
+
--lp-negative-container-primary: var(--lp-pri-red-500);
|
|
130
|
+
--lp-link-primary: var(--lp-pri-brand-original-700);
|
|
131
|
+
--lp-dim: var(--lp-pri-gray-cool-100);
|
|
132
|
+
--lp-status-neutral-primary: var(--lp-pri-gray-cool-950);
|
|
133
|
+
--lp-status-accent-primary: var(--lp-pri-brand-original-500);
|
|
134
|
+
--lp-status-disabled-primary: var(--lp-pri-gray-cool-300);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
|
|
138
|
+
|
|
139
|
+
|
|
140
|
+
:root[color-theme='light'] {
|
|
141
|
+
--lp-neutral-primary: var(--lp-pri-gray-cool-50);
|
|
142
|
+
--lp-neutral-secondary: var(--lp-pri-gray-cool-100);
|
|
143
|
+
--lp-neutral-tertiary: var(--lp-pri-gray-cool-200);
|
|
144
|
+
--lp-inverse-neutral-primary: var(--lp-pri-achromatic-black);
|
|
145
|
+
--lp-neutral-container-primary: var(--lp-pri-gray-cool-300);
|
|
146
|
+
--lp-neutral-container-secondary: var(--lp-pri-gray-cool-400);
|
|
147
|
+
--lp-neutral-container-tertiary: var(--lp-pri-gray-cool-500);
|
|
148
|
+
--lp-neutral-border-primary: var(--lp-pri-gray-cool-600);
|
|
149
|
+
--lp-neutral-border-secondary: var(--lp-pri-gray-cool-700);
|
|
150
|
+
--lp-neutral-border-tertiary: var(--lp-pri-gray-cool-800);
|
|
151
|
+
--lp-neutral-placeholder: var(--lp-pri-gray-cool-900);
|
|
152
|
+
--lp-accent-primary: var(--lp-pri-brand-original-400);
|
|
153
|
+
--lp-accent-container-primary: var(--lp-pri-brand-original-300);
|
|
154
|
+
--lp-positive-primary: var(--lp-pri-green-400);
|
|
155
|
+
--lp-positive-container-primary: var(--lp-pri-green-300);
|
|
156
|
+
--lp-caution-primary: var(--lp-pri-orange-400);
|
|
157
|
+
--lp-caution-container-primary: var(--lp-pri-orange-300);
|
|
158
|
+
--lp-negative-primary: var(--lp-pri-red-400);
|
|
159
|
+
--lp-negative-container-primary: var(--lp-pri-red-300);
|
|
160
|
+
--lp-link-primary: var(--lp-pri-brand-original-500);
|
|
161
|
+
--lp-dim: var(--lp-pri-gray-cool-50);
|
|
162
|
+
--lp-status-neutral-primary: var(--lp-pri-gray-cool-50);
|
|
163
|
+
--lp-status-accent-primary: var(--lp-pri-brand-original-400);
|
|
164
|
+
--lp-status-disabled-primary: var(--lp-pri-gray-cool-200);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
|
|
168
|
+
:root[language="en"] {
|
|
169
|
+
|
|
170
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { useLayoutEffect } from 'react';
|
|
2
|
+
|
|
3
|
+
const LOCAL_STORAGE_KEY = 'theme';
|
|
4
|
+
|
|
5
|
+
export const useDarkTheme = () => {
|
|
6
|
+
const isUserColorTheme = localStorage.getItem('color-theme');
|
|
7
|
+
|
|
8
|
+
const setDarkTheme = () => {
|
|
9
|
+
document.documentElement.setAttribute('color-theme', 'dark');
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
const setLightTheme = () => {
|
|
13
|
+
document.documentElement.setAttribute('color-theme', 'light');
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
const toggleTheme = () => {
|
|
17
|
+
const willChangeTheme = document.documentElement.getAttribute('color-theme') === 'light' ? 'dark' : 'light';
|
|
18
|
+
|
|
19
|
+
document.documentElement.setAttribute('color-theme', willChangeTheme);
|
|
20
|
+
localStorage.setItem(LOCAL_STORAGE_KEY, willChangeTheme);
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
useLayoutEffect(() => {
|
|
24
|
+
const prevTheme = localStorage.getItem(LOCAL_STORAGE_KEY);
|
|
25
|
+
if (prevTheme) {
|
|
26
|
+
if (prevTheme === 'dark') {
|
|
27
|
+
setDarkTheme();
|
|
28
|
+
} else {
|
|
29
|
+
setLightTheme();
|
|
30
|
+
}
|
|
31
|
+
} else {
|
|
32
|
+
const isOsColorThemeDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
33
|
+
|
|
34
|
+
document.documentElement.setAttribute('color-theme', isOsColorThemeDark ? 'dark' : 'light');
|
|
35
|
+
}
|
|
36
|
+
}, []);
|
|
37
|
+
|
|
38
|
+
return {
|
|
39
|
+
setDarkTheme,
|
|
40
|
+
toggleTheme,
|
|
41
|
+
};
|
|
42
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export const useLanguage = () => {};
|
package/src/index.ts
CHANGED
|
@@ -1,3 +1,9 @@
|
|
|
1
|
-
export * from './color';
|
|
2
|
-
export * from './
|
|
3
|
-
export * from './
|
|
1
|
+
export * from './design/color';
|
|
2
|
+
export * from './design/color/vars';
|
|
3
|
+
export * from './design/radius';
|
|
4
|
+
export * from './design/opacity';
|
|
5
|
+
export * from './design/size';
|
|
6
|
+
export * from './design/typography';
|
|
7
|
+
|
|
8
|
+
export * from './hooks/useDarkTheme';
|
|
9
|
+
export * from './hooks/useLanguage';
|