@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.
Files changed (146) hide show
  1. package/README.md +0 -2
  2. package/global.css +159 -0
  3. package/lib/design/color/index.d.ts +2 -0
  4. package/lib/design/color/type.d.ts +76 -0
  5. package/lib/design/color/vars.d.ts +95 -0
  6. package/lib/design/opacity/index.d.ts +14 -0
  7. package/lib/design/radius/index.d.ts +2 -0
  8. package/lib/design/radius/type.d.ts +10 -0
  9. package/lib/design/size/index.d.ts +2 -0
  10. package/lib/design/size/type.d.ts +28 -0
  11. package/lib/design/typography/font.d.ts +36 -0
  12. package/lib/design/typography/index.d.ts +3 -0
  13. package/lib/design/typography/primitive.d.ts +37 -0
  14. package/lib/design/typography/semantic.d.ts +12 -0
  15. package/lib/design/typography/types.d.ts +8 -0
  16. package/lib/design/typography/usage/Display.d.ts +7 -0
  17. package/lib/design/typography/usage/Heading.d.ts +4 -0
  18. package/lib/design/typography/usage/index.d.ts +1 -0
  19. package/lib/design/typography/usage/types.d.ts +24 -0
  20. package/lib/global.css +372 -0
  21. package/lib/hooks/useDarkTheme.d.ts +4 -0
  22. package/lib/hooks/useLanguage.d.ts +1 -0
  23. package/lib/index.cjs +287 -1026
  24. package/lib/index.cjs.map +4 -4
  25. package/lib/index.d.ts +8 -3
  26. package/lib/index.mjs +287 -1026
  27. package/lib/index.mjs.map +4 -4
  28. package/package.json +8 -4
  29. package/src/design/color/index.ts +125 -0
  30. package/src/design/color/type.ts +103 -0
  31. package/src/design/color/vars.ts +1 -0
  32. package/src/design/opacity/index.ts +14 -0
  33. package/src/design/opacity/type.ts +14 -0
  34. package/src/design/radius/index.ts +12 -0
  35. package/src/design/radius/type.ts +11 -0
  36. package/src/design/size/index.ts +30 -0
  37. package/src/design/size/type.ts +28 -0
  38. package/src/design/typography/index.ts +3 -0
  39. package/src/design/typography/primitive.ts +39 -0
  40. package/src/design/typography/semantic.ts +33 -0
  41. package/src/design/typography/types.ts +32 -0
  42. package/src/design/typography/usage/Caption.tsx +0 -0
  43. package/src/design/typography/usage/Display.tsx +0 -0
  44. package/src/design/typography/usage/Heading.tsx +19 -0
  45. package/src/design/typography/usage/Paragraph.tsx +44 -0
  46. package/src/design/typography/usage/Title.tsx +23 -0
  47. package/src/design/typography/usage/index.ts +1 -0
  48. package/src/design/typography/usage/types.ts +29 -0
  49. package/src/global.css +170 -0
  50. package/src/hooks/useDarkTheme.ts +42 -0
  51. package/src/hooks/useLanguage.ts +1 -0
  52. package/src/index.ts +9 -3
  53. package/lib/assets/ic-bold-16-android.d.ts +0 -6
  54. package/lib/assets/ic-bold-16-apple.d.ts +0 -6
  55. package/lib/assets/ic-bold-16-chrome.d.ts +0 -6
  56. package/lib/assets/ic-bold-16-quote-up.d.ts +0 -6
  57. package/lib/assets/ic-bold-24-caution.d.ts +0 -6
  58. package/lib/assets/ic-bold-24-check.d.ts +0 -6
  59. package/lib/assets/ic-bold-24-file.d.ts +0 -6
  60. package/lib/assets/ic-bold-24-globe.d.ts +0 -6
  61. package/lib/assets/ic-bold-24-image.d.ts +0 -6
  62. package/lib/assets/ic-bold-24-info.d.ts +0 -6
  63. package/lib/assets/ic-color-24-academic.d.ts +0 -2
  64. package/lib/assets/ic-color-24-excel.d.ts +0 -2
  65. package/lib/assets/ic-color-24-html.d.ts +0 -2
  66. package/lib/assets/ic-color-24-image.d.ts +0 -2
  67. package/lib/assets/ic-color-24-math.d.ts +0 -2
  68. package/lib/assets/ic-color-24-news.d.ts +0 -2
  69. package/lib/assets/ic-color-24-pdf.d.ts +0 -2
  70. package/lib/assets/ic-color-24-ppt.d.ts +0 -2
  71. package/lib/assets/ic-color-24-text.d.ts +0 -2
  72. package/lib/assets/ic-color-24-typing.d.ts +0 -2
  73. package/lib/assets/ic-color-24-upload.d.ts +0 -2
  74. package/lib/assets/ic-color-24-word.d.ts +0 -2
  75. package/lib/assets/ic-color-24-workspace.d.ts +0 -2
  76. package/lib/assets/ic-color-24-writer.d.ts +0 -2
  77. package/lib/assets/ic-color-24-youtube.d.ts +0 -2
  78. package/lib/assets/ic-line-16-arrow-down.d.ts +0 -6
  79. package/lib/assets/ic-line-16-arrow-up.d.ts +0 -6
  80. package/lib/assets/ic-line-16-check.d.ts +0 -6
  81. package/lib/assets/ic-line-16-copy.d.ts +0 -6
  82. package/lib/assets/ic-line-16-mobile.d.ts +0 -6
  83. package/lib/assets/ic-line-16-search.d.ts +0 -6
  84. package/lib/assets/ic-line-16-source.d.ts +0 -6
  85. package/lib/assets/ic-line-24-add.d.ts +0 -6
  86. package/lib/assets/ic-line-24-arrow-left.d.ts +0 -6
  87. package/lib/assets/ic-line-24-close.d.ts +0 -6
  88. package/lib/assets/ic-line-24-copy.d.ts +0 -6
  89. package/lib/assets/ic-line-24-globe.d.ts +0 -6
  90. package/lib/assets/ic-line-24-menu.d.ts +0 -6
  91. package/lib/assets/ic-line-24-message-edit.d.ts +0 -6
  92. package/lib/assets/ic-line-24-select-text.d.ts +0 -6
  93. package/lib/assets/ic-line-24-source-rebuilding.d.ts +0 -6
  94. package/lib/assets/ic-tone-36-3thread.d.ts +0 -6
  95. package/lib/assets/ic-tone-36-invite.d.ts +0 -6
  96. package/lib/assets/index.d.ts +0 -43
  97. package/lib/color.d.ts +0 -21
  98. package/lib/typography.d.ts +0 -26
  99. package/src/assets/ic-bold-16-android.tsx +0 -21
  100. package/src/assets/ic-bold-16-apple.tsx +0 -22
  101. package/src/assets/ic-bold-16-chrome.tsx +0 -26
  102. package/src/assets/ic-bold-16-quote-up.tsx +0 -18
  103. package/src/assets/ic-bold-24-caution.tsx +0 -14
  104. package/src/assets/ic-bold-24-chat.tsx +0 -18
  105. package/src/assets/ic-bold-24-check.tsx +0 -14
  106. package/src/assets/ic-bold-24-file.tsx +0 -18
  107. package/src/assets/ic-bold-24-globe.tsx +0 -46
  108. package/src/assets/ic-bold-24-image.tsx +0 -22
  109. package/src/assets/ic-bold-24-info.tsx +0 -14
  110. package/src/assets/ic-color-24-academic.tsx +0 -23
  111. package/src/assets/ic-color-24-excel.tsx +0 -11
  112. package/src/assets/ic-color-24-html.tsx +0 -25
  113. package/src/assets/ic-color-24-image.tsx +0 -19
  114. package/src/assets/ic-color-24-math.tsx +0 -39
  115. package/src/assets/ic-color-24-news.tsx +0 -23
  116. package/src/assets/ic-color-24-pdf.tsx +0 -16
  117. package/src/assets/ic-color-24-ppt.tsx +0 -11
  118. package/src/assets/ic-color-24-text.tsx +0 -25
  119. package/src/assets/ic-color-24-typing.tsx +0 -19
  120. package/src/assets/ic-color-24-upload.tsx +0 -39
  121. package/src/assets/ic-color-24-word.tsx +0 -13
  122. package/src/assets/ic-color-24-workspace.tsx +0 -21
  123. package/src/assets/ic-color-24-writer.tsx +0 -19
  124. package/src/assets/ic-color-24-youtube.tsx +0 -26
  125. package/src/assets/ic-line-16-arrow-down.tsx +0 -18
  126. package/src/assets/ic-line-16-arrow-up.tsx +0 -18
  127. package/src/assets/ic-line-16-check.tsx +0 -14
  128. package/src/assets/ic-line-16-copy.tsx +0 -24
  129. package/src/assets/ic-line-16-mobile.tsx +0 -25
  130. package/src/assets/ic-line-16-search.tsx +0 -24
  131. package/src/assets/ic-line-16-source.tsx +0 -25
  132. package/src/assets/ic-line-24-add.tsx +0 -12
  133. package/src/assets/ic-line-24-arrow-left.tsx +0 -16
  134. package/src/assets/ic-line-24-close.tsx +0 -16
  135. package/src/assets/ic-line-24-copy.tsx +0 -24
  136. package/src/assets/ic-line-24-globe.tsx +0 -16
  137. package/src/assets/ic-line-24-menu.tsx +0 -28
  138. package/src/assets/ic-line-24-message-edit.tsx +0 -33
  139. package/src/assets/ic-line-24-select-text.tsx +0 -25
  140. package/src/assets/ic-line-24-source-rebuilding.tsx +0 -54
  141. package/src/assets/ic-tone-36-3thread.tsx +0 -18
  142. package/src/assets/ic-tone-36-invite.tsx +0 -26
  143. package/src/assets/index.ts +0 -43
  144. package/src/color.ts +0 -21
  145. package/src/typography.ts +0 -50
  146. /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,3 @@
1
+ export * from './primitive';
2
+ export * from './semantic';
3
+ export * from './usage';
@@ -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 './assets';
3
- export * from './typography';
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';
@@ -1,6 +0,0 @@
1
- import React from 'react';
2
- interface IProps {
3
- fill?: string;
4
- }
5
- export declare const ICBold16Android: ({ fill }: IProps) => React.JSX.Element;
6
- export {};
@@ -1,6 +0,0 @@
1
- import React from 'react';
2
- interface IProps {
3
- fill?: string;
4
- }
5
- export declare const ICBold16Apple: ({ fill }: IProps) => React.JSX.Element;
6
- export {};
@@ -1,6 +0,0 @@
1
- import React from 'react';
2
- interface IProps {
3
- fill?: string;
4
- }
5
- export declare const ICBold16Chrome: ({ fill }: IProps) => React.JSX.Element;
6
- export {};
@@ -1,6 +0,0 @@
1
- import React from 'react';
2
- interface IProps {
3
- fill?: string;
4
- }
5
- export declare const ICBold16QuoteUp: ({ fill }: IProps) => React.JSX.Element;
6
- export {};
@@ -1,6 +0,0 @@
1
- import React from 'react';
2
- interface IProps {
3
- fill?: string;
4
- }
5
- export declare const ICBold24Caution: ({ fill }: IProps) => React.JSX.Element;
6
- export {};
@@ -1,6 +0,0 @@
1
- import React from 'react';
2
- interface IProps {
3
- fill?: string;
4
- }
5
- export declare const ICBold24Check: ({ fill }: IProps) => React.JSX.Element;
6
- export {};
@@ -1,6 +0,0 @@
1
- import React from 'react';
2
- interface IProps {
3
- fill?: string;
4
- }
5
- export declare const ICBold24File: ({ fill }: IProps) => React.JSX.Element;
6
- export {};
@@ -1,6 +0,0 @@
1
- import React from 'react';
2
- interface IProps {
3
- fill?: string;
4
- }
5
- export declare const ICBold24Globe: ({ fill }: IProps) => React.JSX.Element;
6
- export {};
@@ -1,6 +0,0 @@
1
- import React from 'react';
2
- interface IProps {
3
- fill?: string;
4
- }
5
- export declare const ICBold24Image: ({ fill }: IProps) => React.JSX.Element;
6
- export {};
@@ -1,6 +0,0 @@
1
- import React from 'react';
2
- interface IProps {
3
- fill?: string;
4
- }
5
- export declare const ICBold24Info: ({ fill }: IProps) => React.JSX.Element;
6
- export {};
@@ -1,2 +0,0 @@
1
- import React from 'react';
2
- export declare const ICColor24Academic: () => React.JSX.Element;
@@ -1,2 +0,0 @@
1
- import React from 'react';
2
- export declare const ICColor24Excel: () => React.JSX.Element;
@@ -1,2 +0,0 @@
1
- import React from 'react';
2
- export declare const ICColor24Html: () => React.JSX.Element;
@@ -1,2 +0,0 @@
1
- import React from 'react';
2
- export declare const ICColor24Image: () => React.JSX.Element;
@@ -1,2 +0,0 @@
1
- import React from 'react';
2
- export declare const ICColor24Math: () => React.JSX.Element;