@liner-fe/design-token 2.0.32 → 2.0.34

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 (12) hide show
  1. package/global.css +207 -108
  2. package/lib/design/color/index.d.ts +224 -2
  3. package/lib/design/color/vars.d.ts +42 -92
  4. package/lib/index.cjs +2 -124
  5. package/lib/index.cjs.map +2 -2
  6. package/lib/index.mjs +2 -124
  7. package/lib/index.mjs.map +2 -2
  8. package/package.json +1 -1
  9. package/src/design/color/index.ts +1 -125
  10. package/src/design/color/vars.ts +1 -1
  11. package/src/design/color/type.ts +0 -103
  12. package/src/global.css +0 -170
package/src/design/color/type.ts DELETED
@@ -1,103 +0,0 @@
1
- interface IPrimitive {
2
- 'lp-pri-achromatic-white': '#ffffff';
3
- 'lp-pri-achromatic-black': '#000000';
4
- 'lp-pri-gray-cool-950': '#F7F8FF';
5
- 'lp-pri-gray-cool-900': '#EEF0F7';
6
- 'lp-pri-gray-cool-800': '#DFE3F3';
7
- 'lp-pri-gray-cool-700': '#C7CFE9';
8
- 'lp-pri-gray-cool-600': '#97A5D6';
9
- 'lp-pri-gray-cool-500': '#7487C4';
10
- 'lp-pri-gray-cool-400': '#5B6BA4';
11
- 'lp-pri-gray-cool-300': '#4A5889';
12
- 'lp-pri-gray-cool-200': '#39426A';
13
- 'lp-pri-gray-cool-100': '#282C3E';
14
- 'lp-pri-gray-cool-50': '#1F2131';
15
- 'lp-pri-brand-original-950': '#F5F6FF';
16
- 'lp-pri-brand-original-900': '#E9EBFF';
17
- 'lp-pri-brand-original-800': '#D4D7FF';
18
- 'lp-pri-brand-original-700': '#ADB3FF';
19
- 'lp-pri-brand-original-600': '#8690FF';
20
- 'lp-pri-brand-original-500': '#5F6CFF';
21
- 'lp-pri-brand-original-400': '#3B49E3';
22
- 'lp-pri-brand-original-300': '#303CB5';
23
- 'lp-pri-brand-original-200': '#242F86';
24
- 'lp-pri-brand-original-100': '#1B2366';
25
- 'lp-pri-brand-original-50': '#151A4D';
26
- 'lp-pri-brand-variation-950': '#F6F4FE';
27
- 'lp-pri-brand-variation-900': '#EDE9FE';
28
- 'lp-pri-brand-variation-800': '#DBD3FE';
29
- 'lp-pri-brand-variation-700': '#B8A7FE';
30
- 'lp-pri-brand-variation-600': '#947BFE';
31
- 'lp-pri-brand-variation-500': '#704FFD';
32
- 'lp-pri-brand-variation-400': '#593AFF';
33
- 'lp-pri-brand-variation-300': '#422BCE';
34
- 'lp-pri-brand-variation-200': '#321F9B';
35
- 'lp-pri-brand-variation-100': '#24156E';
36
- 'lp-pri-brand-variation-50': '#1A1052';
37
- 'lp-pri-red-900': '#FFE9EB';
38
- 'lp-pri-red-800': '#FFCDD1';
39
- 'lp-pri-red-700': '#FF9AA2';
40
- 'lp-pri-red-600': '#FF6773';
41
- 'lp-pri-red-500': '#FF3445';
42
- 'lp-pri-red-400': '#FA1D2F';
43
- 'lp-pri-red-300': '#C2172C';
44
- 'lp-pri-red-200': '#910B1D';
45
- 'lp-pri-red-100': '#68081A';
46
- 'lp-pri-red-50': '#4A0616';
47
- 'lp-pri-orange-900': '#FFEEE6';
48
- 'lp-pri-orange-800': '#FFD2B8';
49
- 'lp-pri-orange-700': '#FFA970';
50
- 'lp-pri-orange-600': '#FF8842';
51
- 'lp-pri-orange-500': '#FF6215';
52
- 'lp-pri-orange-400': '#F84B10';
53
- 'lp-pri-orange-300': '#BD3512';
54
- 'lp-pri-orange-200': '#8A220D';
55
- 'lp-pri-orange-100': '#61170E';
56
- 'lp-pri-orange-50': '#45110E';
57
- 'lp-pri-green-900': '#E2F6E5';
58
- 'lp-pri-green-800': '#BDEAC4';
59
- 'lp-pri-green-700': '#83D88E';
60
- 'lp-pri-green-600': '#51C760';
61
- 'lp-pri-green-500': '#26AF3E';
62
- 'lp-pri-green-400': '#1B9632';
63
- 'lp-pri-green-300': '#137728';
64
- 'lp-pri-green-200': '#0C5B1F';
65
- 'lp-pri-green-100': '#074218';
66
- 'lp-pri-green-50': '#053014';
67
- }
68
-
69
- type ISystem = Record<
70
- | 'lp-inverse-neutral-primary'
71
- | 'lp-neutral-primary'
72
- | 'lp-neutral-secondary'
73
- | 'lp-neutral-tertiary'
74
- | 'lp-neutral-container-primary'
75
- | 'lp-neutral-container-secondary'
76
- | 'lp-neutral-container-tertiary'
77
- | 'lp-neutral-border-primary'
78
- | 'lp-neutral-border-secondary'
79
- | 'lp-neutral-border-tertiary'
80
- | 'lp-neutral-placeholder'
81
- | 'lp-accent-primary'
82
- | 'lp-accent-container-primary'
83
- | 'lp-positive-primary'
84
- | 'lp-positive-container-primary'
85
- | 'lp-caution-primary'
86
- | 'lp-caution-container-primary'
87
- | 'lp-negative-primary'
88
- | 'lp-negative-container-primary'
89
- | 'lp-link-primary'
90
- | 'lp-dim'
91
- | 'lp-status-neutral-primary'
92
- | 'lp-status-accent-primary'
93
- | 'lp-status-disabled-primary',
94
- keyof IPrimitive
95
- >;
96
-
97
- export interface IColor {
98
- primitive: IPrimitive;
99
- system: {
100
- dark: ISystem;
101
- light: ISystem;
102
- };
103
- }
package/src/global.css DELETED
@@ -1,170 +0,0 @@
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
- }