@liner-fe/design-token 2.0.33 → 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 +41 -24
  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/global.css CHANGED
@@ -2,69 +2,134 @@
2
2
  :root {
3
3
  --lp-pri-achromatic-white: #ffffff;
4
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;
5
+ --lp-pri-gray-cool-980: #F9F9FA;
6
+ --lp-pri-gray-cool-970: #F6F6F7;
7
+ --lp-pri-gray-cool-950: #F7F8FF;
8
+ --lp-pri-gray-cool-940: #EDEEF0;
9
+ --lp-pri-gray-cool-920: #E9E9EB;
10
+ --lp-pri-gray-cool-900: #EEF0F7;
11
+ --lp-pri-gray-cool-850: #D7D7D9;
12
+ --lp-pri-gray-cool-800: #DFE3F3;
13
+ --lp-pri-gray-cool-700: #C7CFE9;
14
+ --lp-pri-gray-cool-600: #97A5D6;
15
+ --lp-pri-gray-cool-500: #7487C4;
16
+ --lp-pri-gray-cool-450: #6D6D70;
17
+ --lp-pri-gray-cool-400: #5B6BA4;
18
+ --lp-pri-gray-cool-350: #58595C;
19
+ --lp-pri-gray-cool-300: #4A5889;
20
+ --lp-pri-gray-cool-250: #3B3B3D;
21
+ --lp-pri-gray-cool-200: #39426A;
22
+ --lp-pri-gray-cool-100: #282C3E;
23
+ --lp-pri-gray-cool-50: #1F2131;
24
+ --lp-pri-brand-original-950: #F5F6FF;
25
+ --lp-pri-brand-original-900: #E9EBFF;
26
+ --lp-pri-brand-original-800: #D4D7FF;
27
+ --lp-pri-brand-original-700: #ADB3FF;
28
+ --lp-pri-brand-original-600: #8690FF;
29
+ --lp-pri-brand-original-500: #5F6CFF;
30
+ --lp-pri-brand-original-400: #3B49E3;
31
+ --lp-pri-brand-original-300: #303CB5;
32
+ --lp-pri-brand-original-200: #242F86;
33
+ --lp-pri-brand-original-100: #1B2366;
34
+ --lp-pri-brand-original-50: #151A4D;
35
+ --lp-pri-brand-variation-950: #F6F4FE;
36
+ --lp-pri-brand-variation-900: #EDE9FE;
37
+ --lp-pri-brand-variation-800: #DBD3FE;
38
+ --lp-pri-brand-variation-700: #B8A7FE;
39
+ --lp-pri-brand-variation-600: #947BFE;
40
+ --lp-pri-brand-variation-500: #704FFD;
41
+ --lp-pri-brand-variation-400: #593AFF;
42
+ --lp-pri-brand-variation-300: #422BCE;
43
+ --lp-pri-brand-variation-200: #321F9B;
44
+ --lp-pri-brand-variation-100: #24156E;
45
+ --lp-pri-brand-variation-50: #1A1052;
46
+ --lp-pri-red-900: #FFE9EB;
47
+ --lp-pri-red-800: #FFCDD1;
48
+ --lp-pri-red-700: #FF9AA2;
49
+ --lp-pri-red-600: #FF6773;
50
+ --lp-pri-red-500: #FF3445;
51
+ --lp-pri-red-400: #FA1D2F;
52
+ --lp-pri-red-300: #C2172C;
53
+ --lp-pri-red-200: #910B1D;
54
+ --lp-pri-red-100: #68081A;
55
+ --lp-pri-red-50: #4A0616;
56
+ --lp-pri-orange-900: #FFEEE6;
57
+ --lp-pri-orange-800: #FFD2B8;
58
+ --lp-pri-orange-700: #FFA970;
59
+ --lp-pri-orange-600: #FF8842;
60
+ --lp-pri-orange-500: #FF6215;
61
+ --lp-pri-orange-400: #F84B10;
62
+ --lp-pri-orange-300: #BD3512;
63
+ --lp-pri-orange-200: #8A220D;
64
+ --lp-pri-orange-100: #61170E;
65
+ --lp-pri-orange-50: #45110E;
66
+ --lp-pri-green-900: #E2F6E5;
67
+ --lp-pri-green-800: #BDEAC4;
68
+ --lp-pri-green-700: #83D88E;
69
+ --lp-pri-green-600: #51C760;
70
+ --lp-pri-green-500: #26AF3E;
71
+ --lp-pri-green-400: #1B9632;
64
72
  --lp-pri-green-300: #137728;
65
- --lp-pri-green-200: #0c5b1f;
73
+ --lp-pri-green-200: #0C5B1F;
66
74
  --lp-pri-green-100: #074218;
67
75
  --lp-pri-green-50: #053014;
76
+ --lp-pri-gray-cool-920-alpha-80: #CCE9E9EB;
77
+ --lp-pri-gray-cool-920-alpha-72: #B8E9E9EB;
78
+ --lp-pri-gray-cool-920-alpha-64: #A3E9E9EB;
79
+ --lp-pri-gray-cool-920-alpha-56: #8FE9E9EB;
80
+ --lp-pri-gray-cool-920-alpha-50: #7FE9E9EB;
81
+ --lp-pri-gray-cool-920-alpha-48: #7AE9E9EB;
82
+ --lp-pri-gray-cool-920-alpha-44: #70E9E9EB;
83
+ --lp-pri-gray-cool-920-alpha-40: #66E9E9EB;
84
+ --lp-pri-gray-cool-920-alpha-36: #5CE9E9EB;
85
+ --lp-pri-gray-cool-920-alpha-32: #52E9E9EB;
86
+ --lp-pri-gray-cool-920-alpha-28: #47E9E9EB;
87
+ --lp-pri-gray-cool-920-alpha-24: #3DE9E9EB;
88
+ --lp-pri-gray-cool-920-alpha-20: #33E9E9EB;
89
+ --lp-pri-gray-cool-920-alpha-16: #29E9E9EB;
90
+ --lp-pri-gray-cool-920-alpha-12: #1FE9E9EB;
91
+ --lp-pri-gray-cool-920-alpha-8: #14E9E9EB;
92
+ --lp-pri-gray-cool-920-alpha-4: #0AE9E9EB;
93
+ --lp-pri-gray-cool-920-alpha-1: #03E9E9EB;
94
+ --lp-pri-gray-cool-920-alpha-0: #00E9E9EB;
95
+ --lp-pri-gray-cool-450-alpha-80: #CC6D6D70;
96
+ --lp-pri-gray-cool-450-alpha-72: #B86D6D70;
97
+ --lp-pri-gray-cool-450-alpha-64: #A36D6D70;
98
+ --lp-pri-gray-cool-450-alpha-56: #8F6D6D70;
99
+ --lp-pri-gray-cool-450-alpha-50: #7F6D6D70;
100
+ --lp-pri-gray-cool-450-alpha-48: #7A6D6D70;
101
+ --lp-pri-gray-cool-450-alpha-44: #706D6D70;
102
+ --lp-pri-gray-cool-450-alpha-40: #666D6D70;
103
+ --lp-pri-gray-cool-450-alpha-36: #5C6D6D70;
104
+ --lp-pri-gray-cool-450-alpha-32: #526D6D70;
105
+ --lp-pri-gray-cool-450-alpha-28: #476D6D70;
106
+ --lp-pri-gray-cool-450-alpha-24: #3D6D6D70;
107
+ --lp-pri-gray-cool-450-alpha-20: #336D6D70;
108
+ --lp-pri-gray-cool-450-alpha-16: #296D6D70;
109
+ --lp-pri-gray-cool-450-alpha-12: #1F6D6D70;
110
+ --lp-pri-gray-cool-450-alpha-8: #146D6D70;
111
+ --lp-pri-gray-cool-450-alpha-4: #0A6D6D70;
112
+ --lp-pri-gray-cool-450-alpha-1: #036D6D70;
113
+ --lp-pri-gray-cool-450-alpha-0: #006D6D70;
114
+ --lp-pri-brand-original-50-alpha-80: #CC151A4D;
115
+ --lp-pri-brand-original-50-alpha-72: #B8151A4D;
116
+ --lp-pri-brand-original-50-alpha-64: #A3151A4D;
117
+ --lp-pri-brand-original-50-alpha-56: #8F151A4D;
118
+ --lp-pri-brand-original-50-alpha-50: #7F151A4D;
119
+ --lp-pri-brand-original-50-alpha-48: #7A151A4D;
120
+ --lp-pri-brand-original-50-alpha-44: #70151A4D;
121
+ --lp-pri-brand-original-50-alpha-40: #66151A4D;
122
+ --lp-pri-brand-original-50-alpha-36: #5C151A4D;
123
+ --lp-pri-brand-original-50-alpha-32: #52151A4D;
124
+ --lp-pri-brand-original-50-alpha-28: #47151A4D;
125
+ --lp-pri-brand-original-50-alpha-24: #3D151A4D;
126
+ --lp-pri-brand-original-50-alpha-20: #33151A4D;
127
+ --lp-pri-brand-original-50-alpha-16: #29151A4D;
128
+ --lp-pri-brand-original-50-alpha-12: #1F151A4D;
129
+ --lp-pri-brand-original-50-alpha-8: #14151A4D;
130
+ --lp-pri-brand-original-50-alpha-4: #0A151A4D;
131
+ --lp-pri-brand-original-50-alpha-1: #03151A4D;
132
+ --lp-pri-brand-original-50-alpha-0: #00151A4D;
68
133
  --lp-pri-font-size-8: 8px;
69
134
  --lp-pri-font-size-11: 11px;
70
135
  --lp-pri-font-size-12: 12px;
@@ -102,56 +167,90 @@
102
167
  line-height: var(--lp-pri-font-lineheight-120);
103
168
  }
104
169
  :root[color-theme=dark] {
105
- --lp-neutral-primary: var(--lp-pri-gray-cool-950);
106
- --lp-neutral-secondary: var(--lp-pri-gray-cool-900);
107
- --lp-neutral-tertiary: var(--lp-pri-gray-cool-800);
108
- --lp-inverse-neutral-primary: var(--lp-pri-achromatic-white);
109
- --lp-neutral-container-primary: var(--lp-pri-gray-cool-700);
110
- --lp-neutral-container-secondary: var(--lp-pri-gray-cool-600);
111
- --lp-neutral-container-tertiary: var(--lp-pri-gray-cool-500);
112
- --lp-neutral-border-primary: var(--lp-pri-gray-cool-400);
113
- --lp-neutral-border-secondary: var(--lp-pri-gray-cool-300);
114
- --lp-neutral-border-tertiary: var(--lp-pri-gray-cool-200);
115
- --lp-neutral-placeholder: var(--lp-pri-gray-cool-100);
116
- --lp-accent-primary: var(--lp-pri-brand-original-600);
117
- --lp-accent-container-primary: var(--lp-pri-brand-original-500);
118
- --lp-positive-primary: var(--lp-pri-green-600);
119
- --lp-positive-container-primary: var(--lp-pri-green-500);
120
- --lp-caution-primary: var(--lp-pri-orange-600);
121
- --lp-caution-container-primary: var(--lp-pri-orange-500);
122
- --lp-negative-primary: var(--lp-pri-red-600);
123
- --lp-negative-container-primary: var(--lp-pri-red-500);
124
- --lp-link-primary: var(--lp-pri-brand-original-700);
125
- --lp-dim: var(--lp-pri-gray-cool-100);
126
- --lp-status-neutral-primary: var(--lp-pri-gray-cool-950);
127
- --lp-status-accent-primary: var(--lp-pri-brand-original-500);
128
- --lp-status-disabled-primary: var(--lp-pri-gray-cool-300);
170
+ --lp-neutral-container-lowest: var(--lp-pri-achromatic-white);
171
+ --lp-neutral-container-low: var(--lp-pri-gray-cool-980);
172
+ --lp-neutral-container-mid: var(--lp-pri-gray-cool-970);
173
+ --lp-neutral-container-high: var(--lp-pri-gray-cool-940);
174
+ --lp-neutral-container-highest: var(--lp-pri-gray-cool-920);
175
+ --lp-neutral-fill-lowest: var(--lp-pri-gray-cool-450-alpha-4);
176
+ --lp-neutral-fill-low: var(--lp-pri-gray-cool-450-alpha-12);
177
+ --lp-neutral-fill-mid: var(--lp-pri-gray-cool-450-alpha-20);
178
+ --lp-neutral-label-primary: var(--lp-pri-gray-cool-100);
179
+ --lp-neutral-label-secondary: var(--lp-pri-gray-cool-450-alpha-80);
180
+ --lp-neutral-label-tertiary: var(--lp-pri-gray-cool-450-alpha-44);
181
+ --lp-neutral-label-quaternary: var(--lp-pri-gray-cool-450-alpha-24);
182
+ --lp-neutral-border-overlay-normal: var(--lp-pri-gray-cool-450-alpha-24);
183
+ --lp-neutral-border-overlay-subtle: var(--lp-pri-gray-cool-450-alpha-16);
184
+ --lp-neutral-border-opaque-strong: var(--lp-pri-gray-cool-100);
185
+ --lp-neutral-border-opaque-normal: var(--lp-pri-gray-cool-850);
186
+ --lp-neutral-border-opaque-subtle: var(--lp-pri-achromatic-black);
187
+ --lp-inverse-container-lowest: var(--lp-pri-achromatic-black);
188
+ --lp-inverse-container-low: var(--lp-pri-achromatic-black);
189
+ --lp-inverse-container-mid: var(--lp-pri-achromatic-black);
190
+ --lp-inverse-container-high: var(--lp-pri-achromatic-black);
191
+ --lp-inverse-container-highest: var(--lp-pri-achromatic-black);
192
+ --lp-inverse-fill-lowest: var(--lp-pri-achromatic-black);
193
+ --lp-inverse-fill-low: var(--lp-pri-achromatic-black);
194
+ --lp-inverse-fill-mid: var(--lp-pri-achromatic-black);
195
+ --lp-inverse-label-primary: var(--lp-pri-achromatic-black);
196
+ --lp-inverse-label-static-primary: var(--lp-pri-achromatic-black);
197
+ --lp-inverse-label-secondary: var(--lp-pri-achromatic-black);
198
+ --lp-inverse-label-tertiary: var(--lp-pri-achromatic-black);
199
+ --lp-inverse-label-quaternary: var(--lp-pri-achromatic-black);
200
+ --lp-inverse-border-overlay-normal: var(--lp-pri-achromatic-black);
201
+ --lp-inverse-border-overlay-subtle: var(--lp-pri-achromatic-black);
202
+ --lp-inverse-border-opaque-strong: var(--lp-pri-achromatic-black);
203
+ --lp-inverse-border-opaque-normal: var(--lp-pri-achromatic-black);
204
+ --lp-inverse-border-opaque-subtle: var(--lp-pri-achromatic-black);
205
+ --lp-brand-container-mid: var(--lp-pri-achromatic-black);
206
+ --lp-brand-container-high: var(--lp-pri-achromatic-black);
207
+ --lp-brand-label-primary: var(--lp-pri-achromatic-black);
208
+ --lp-brand-label-secondary: var(--lp-pri-achromatic-black);
209
+ --lp-brand-border-overlay-normal: var(--lp-pri-achromatic-black);
210
+ --lp-brand-border-opaque-normal: var(--lp-pri-achromatic-black);
129
211
  }
130
212
  :root[color-theme=light] {
131
- --lp-neutral-primary: var(--lp-pri-gray-cool-50);
132
- --lp-neutral-secondary: var(--lp-pri-gray-cool-100);
133
- --lp-neutral-tertiary: var(--lp-pri-gray-cool-200);
134
- --lp-inverse-neutral-primary: var(--lp-pri-achromatic-black);
135
- --lp-neutral-container-primary: var(--lp-pri-gray-cool-300);
136
- --lp-neutral-container-secondary: var(--lp-pri-gray-cool-400);
137
- --lp-neutral-container-tertiary: var(--lp-pri-gray-cool-500);
138
- --lp-neutral-border-primary: var(--lp-pri-gray-cool-600);
139
- --lp-neutral-border-secondary: var(--lp-pri-gray-cool-700);
140
- --lp-neutral-border-tertiary: var(--lp-pri-gray-cool-800);
141
- --lp-neutral-placeholder: var(--lp-pri-gray-cool-900);
142
- --lp-accent-primary: var(--lp-pri-brand-original-400);
143
- --lp-accent-container-primary: var(--lp-pri-brand-original-300);
144
- --lp-positive-primary: var(--lp-pri-green-400);
145
- --lp-positive-container-primary: var(--lp-pri-green-300);
146
- --lp-caution-primary: var(--lp-pri-orange-400);
147
- --lp-caution-container-primary: var(--lp-pri-orange-300);
148
- --lp-negative-primary: var(--lp-pri-red-400);
149
- --lp-negative-container-primary: var(--lp-pri-red-300);
150
- --lp-link-primary: var(--lp-pri-brand-original-500);
151
- --lp-dim: var(--lp-pri-gray-cool-50);
152
- --lp-status-neutral-primary: var(--lp-pri-gray-cool-50);
153
- --lp-status-accent-primary: var(--lp-pri-brand-original-400);
154
- --lp-status-disabled-primary: var(--lp-pri-gray-cool-200);
213
+ --lp-neutral-container-lowest: var(--lp-pri-gray-cool-100);
214
+ --lp-neutral-container-low: var(--lp-pri-gray-cool-200);
215
+ --lp-neutral-container-mid: var(--lp-pri-gray-cool-200);
216
+ --lp-neutral-container-high: var(--lp-pri-gray-cool-250);
217
+ --lp-neutral-container-highest: var(--lp-pri-gray-cool-300);
218
+ --lp-neutral-fill-lowest: var(--lp-pri-gray-cool-450-alpha-12);
219
+ --lp-neutral-fill-low: var(--lp-pri-gray-cool-450-alpha-24);
220
+ --lp-neutral-fill-mid: var(--lp-pri-gray-cool-450-alpha-32);
221
+ --lp-neutral-label-primary: var(--lp-pri-achromatic-black);
222
+ --lp-neutral-label-secondary: var(--lp-pri-achromatic-black);
223
+ --lp-neutral-label-tertiary: var(--lp-pri-gray-cool-920-alpha-32);
224
+ --lp-neutral-label-quaternary: var(--lp-pri-red-200-alpha-20);
225
+ --lp-neutral-border-overlay-normal: var(--lp-pri-gray-cool-920-alpha-28);
226
+ --lp-neutral-border-overlay-subtle: var(--lp-pri-gray-cool-920-alpha-20);
227
+ --lp-neutral-border-opaque-strong: var(--lp-pri-achromatic-white);
228
+ --lp-neutral-border-opaque-normal: var(--lp-pri-gray-cool-350);
229
+ --lp-neutral-border-opaque-subtle: var(--lp-pri-achromatic-black);
230
+ --lp-inverse-container-lowest: var(--lp-pri-achromatic-black);
231
+ --lp-inverse-container-low: var(--lp-pri-achromatic-black);
232
+ --lp-inverse-container-mid: var(--lp-pri-achromatic-black);
233
+ --lp-inverse-container-high: var(--lp-pri-achromatic-black);
234
+ --lp-inverse-container-highest: var(--lp-pri-achromatic-black);
235
+ --lp-inverse-fill-lowest: var(--lp-pri-achromatic-black);
236
+ --lp-inverse-fill-low: var(--lp-pri-achromatic-black);
237
+ --lp-inverse-fill-mid: var(--lp-pri-achromatic-black);
238
+ --lp-inverse-label-primary: var(--lp-pri-achromatic-black);
239
+ --lp-inverse-label-static-primary: var(--lp-pri-achromatic-black);
240
+ --lp-inverse-label-secondary: var(--lp-pri-achromatic-black);
241
+ --lp-inverse-label-tertiary: var(--lp-pri-achromatic-black);
242
+ --lp-inverse-label-quaternary: var(--lp-pri-achromatic-black);
243
+ --lp-inverse-border-overlay-normal: var(--lp-pri-achromatic-black);
244
+ --lp-inverse-border-overlay-subtle: var(--lp-pri-achromatic-black);
245
+ --lp-inverse-border-opaque-strong: var(--lp-pri-achromatic-black);
246
+ --lp-inverse-border-opaque-normal: var(--lp-pri-achromatic-black);
247
+ --lp-inverse-border-opaque-subtle: var(--lp-pri-achromatic-black);
248
+ --lp-brand-container-mid: var(--lp-pri-achromatic-black);
249
+ --lp-brand-container-high: var(--lp-pri-achromatic-black);
250
+ --lp-brand-label-primary: var(--lp-pri-achromatic-black);
251
+ --lp-brand-label-secondary: var(--lp-pri-achromatic-black);
252
+ --lp-brand-border-overlay-normal: var(--lp-pri-achromatic-black);
253
+ --lp-brand-border-opaque-normal: var(--lp-pri-achromatic-black);
155
254
  }
156
255
  :root[language=en] {
157
256
  }
package/lib/design/color/index.d.ts CHANGED
@@ -1,2 +1,224 @@
1
- import { IColor } from './type';
2
- export declare const color: IColor;
1
+ export declare const color: {
2
+ color: {
3
+ primitive: {
4
+ "lp-pri-achromatic-white": string;
5
+ "lp-pri-achromatic-black": string;
6
+ "lp-pri-gray-cool-980": string;
7
+ "lp-pri-gray-cool-970": string;
8
+ "lp-pri-gray-cool-950": string;
9
+ "lp-pri-gray-cool-940": string;
10
+ "lp-pri-gray-cool-920": string;
11
+ "lp-pri-gray-cool-900": string;
12
+ "lp-pri-gray-cool-850": string;
13
+ "lp-pri-gray-cool-800": string;
14
+ "lp-pri-gray-cool-700": string;
15
+ "lp-pri-gray-cool-600": string;
16
+ "lp-pri-gray-cool-500": string;
17
+ "lp-pri-gray-cool-450": string;
18
+ "lp-pri-gray-cool-400": string;
19
+ "lp-pri-gray-cool-350": string;
20
+ "lp-pri-gray-cool-300": string;
21
+ "lp-pri-gray-cool-250": string;
22
+ "lp-pri-gray-cool-200": string;
23
+ "lp-pri-gray-cool-100": string;
24
+ "lp-pri-gray-cool-50": string;
25
+ "lp-pri-brand-original-950": string;
26
+ "lp-pri-brand-original-900": string;
27
+ "lp-pri-brand-original-800": string;
28
+ "lp-pri-brand-original-700": string;
29
+ "lp-pri-brand-original-600": string;
30
+ "lp-pri-brand-original-500": string;
31
+ "lp-pri-brand-original-400": string;
32
+ "lp-pri-brand-original-300": string;
33
+ "lp-pri-brand-original-200": string;
34
+ "lp-pri-brand-original-100": string;
35
+ "lp-pri-brand-original-50": string;
36
+ "lp-pri-brand-variation-950": string;
37
+ "lp-pri-brand-variation-900": string;
38
+ "lp-pri-brand-variation-800": string;
39
+ "lp-pri-brand-variation-700": string;
40
+ "lp-pri-brand-variation-600": string;
41
+ "lp-pri-brand-variation-500": string;
42
+ "lp-pri-brand-variation-400": string;
43
+ "lp-pri-brand-variation-300": string;
44
+ "lp-pri-brand-variation-200": string;
45
+ "lp-pri-brand-variation-100": string;
46
+ "lp-pri-brand-variation-50": string;
47
+ "lp-pri-red-900": string;
48
+ "lp-pri-red-800": string;
49
+ "lp-pri-red-700": string;
50
+ "lp-pri-red-600": string;
51
+ "lp-pri-red-500": string;
52
+ "lp-pri-red-400": string;
53
+ "lp-pri-red-300": string;
54
+ "lp-pri-red-200": string;
55
+ "lp-pri-red-100": string;
56
+ "lp-pri-red-50": string;
57
+ "lp-pri-orange-900": string;
58
+ "lp-pri-orange-800": string;
59
+ "lp-pri-orange-700": string;
60
+ "lp-pri-orange-600": string;
61
+ "lp-pri-orange-500": string;
62
+ "lp-pri-orange-400": string;
63
+ "lp-pri-orange-300": string;
64
+ "lp-pri-orange-200": string;
65
+ "lp-pri-orange-100": string;
66
+ "lp-pri-orange-50": string;
67
+ "lp-pri-green-900": string;
68
+ "lp-pri-green-800": string;
69
+ "lp-pri-green-700": string;
70
+ "lp-pri-green-600": string;
71
+ "lp-pri-green-500": string;
72
+ "lp-pri-green-400": string;
73
+ "lp-pri-green-300": string;
74
+ "lp-pri-green-200": string;
75
+ "lp-pri-green-100": string;
76
+ "lp-pri-green-50": string;
77
+ "lp-pri-gray-cool-920-alpha-80": string;
78
+ "lp-pri-gray-cool-920-alpha-72": string;
79
+ "lp-pri-gray-cool-920-alpha-64": string;
80
+ "lp-pri-gray-cool-920-alpha-56": string;
81
+ "lp-pri-gray-cool-920-alpha-50": string;
82
+ "lp-pri-gray-cool-920-alpha-48": string;
83
+ "lp-pri-gray-cool-920-alpha-44": string;
84
+ "lp-pri-gray-cool-920-alpha-40": string;
85
+ "lp-pri-gray-cool-920-alpha-36": string;
86
+ "lp-pri-gray-cool-920-alpha-32": string;
87
+ "lp-pri-gray-cool-920-alpha-28": string;
88
+ "lp-pri-gray-cool-920-alpha-24": string;
89
+ "lp-pri-gray-cool-920-alpha-20": string;
90
+ "lp-pri-gray-cool-920-alpha-16": string;
91
+ "lp-pri-gray-cool-920-alpha-12": string;
92
+ "lp-pri-gray-cool-920-alpha-8": string;
93
+ "lp-pri-gray-cool-920-alpha-4": string;
94
+ "lp-pri-gray-cool-920-alpha-1": string;
95
+ "lp-pri-gray-cool-920-alpha-0": string;
96
+ "lp-pri-gray-cool-450-alpha-80": string;
97
+ "lp-pri-gray-cool-450-alpha-72": string;
98
+ "lp-pri-gray-cool-450-alpha-64": string;
99
+ "lp-pri-gray-cool-450-alpha-56": string;
100
+ "lp-pri-gray-cool-450-alpha-50": string;
101
+ "lp-pri-gray-cool-450-alpha-48": string;
102
+ "lp-pri-gray-cool-450-alpha-44": string;
103
+ "lp-pri-gray-cool-450-alpha-40": string;
104
+ "lp-pri-gray-cool-450-alpha-36": string;
105
+ "lp-pri-gray-cool-450-alpha-32": string;
106
+ "lp-pri-gray-cool-450-alpha-28": string;
107
+ "lp-pri-gray-cool-450-alpha-24": string;
108
+ "lp-pri-gray-cool-450-alpha-20": string;
109
+ "lp-pri-gray-cool-450-alpha-16": string;
110
+ "lp-pri-gray-cool-450-alpha-12": string;
111
+ "lp-pri-gray-cool-450-alpha-8": string;
112
+ "lp-pri-gray-cool-450-alpha-4": string;
113
+ "lp-pri-gray-cool-450-alpha-1": string;
114
+ "lp-pri-gray-cool-450-alpha-0": string;
115
+ "lp-pri-brand-original-50-alpha-80": string;
116
+ "lp-pri-brand-original-50-alpha-72": string;
117
+ "lp-pri-brand-original-50-alpha-64": string;
118
+ "lp-pri-brand-original-50-alpha-56": string;
119
+ "lp-pri-brand-original-50-alpha-50": string;
120
+ "lp-pri-brand-original-50-alpha-48": string;
121
+ "lp-pri-brand-original-50-alpha-44": string;
122
+ "lp-pri-brand-original-50-alpha-40": string;
123
+ "lp-pri-brand-original-50-alpha-36": string;
124
+ "lp-pri-brand-original-50-alpha-32": string;
125
+ "lp-pri-brand-original-50-alpha-28": string;
126
+ "lp-pri-brand-original-50-alpha-24": string;
127
+ "lp-pri-brand-original-50-alpha-20": string;
128
+ "lp-pri-brand-original-50-alpha-16": string;
129
+ "lp-pri-brand-original-50-alpha-12": string;
130
+ "lp-pri-brand-original-50-alpha-8": string;
131
+ "lp-pri-brand-original-50-alpha-4": string;
132
+ "lp-pri-brand-original-50-alpha-1": string;
133
+ "lp-pri-brand-original-50-alpha-0": string;
134
+ };
135
+ system: {
136
+ dark: {
137
+ "lp-neutral-container-lowest": string;
138
+ "lp-neutral-container-low": string;
139
+ "lp-neutral-container-mid": string;
140
+ "lp-neutral-container-high": string;
141
+ "lp-neutral-container-highest": string;
142
+ "lp-neutral-fill-lowest": string;
143
+ "lp-neutral-fill-low": string;
144
+ "lp-neutral-fill-mid": string;
145
+ "lp-neutral-label-primary": string;
146
+ "lp-neutral-label-secondary": string;
147
+ "lp-neutral-label-tertiary": string;
148
+ "lp-neutral-label-quaternary": string;
149
+ "lp-neutral-border-overlay-normal": string;
150
+ "lp-neutral-border-overlay-subtle": string;
151
+ "lp-neutral-border-opaque-strong": string;
152
+ "lp-neutral-border-opaque-normal": string;
153
+ "lp-neutral-border-opaque-subtle": string;
154
+ "lp-inverse-container-lowest": string;
155
+ "lp-inverse-container-low": string;
156
+ "lp-inverse-container-mid": string;
157
+ "lp-inverse-container-high": string;
158
+ "lp-inverse-container-highest": string;
159
+ "lp-inverse-fill-lowest": string;
160
+ "lp-inverse-fill-low": string;
161
+ "lp-inverse-fill-mid": string;
162
+ "lp-inverse-label-primary": string;
163
+ "lp-inverse-label-static-primary": string;
164
+ "lp-inverse-label-secondary": string;
165
+ "lp-inverse-label-tertiary": string;
166
+ "lp-inverse-label-quaternary": string;
167
+ "lp-inverse-border-overlay-normal": string;
168
+ "lp-inverse-border-overlay-subtle": string;
169
+ "lp-inverse-border-opaque-strong": string;
170
+ "lp-inverse-border-opaque-normal": string;
171
+ "lp-inverse-border-opaque-subtle": string;
172
+ "lp-brand-container-mid": string;
173
+ "lp-brand-container-high": string;
174
+ "lp-brand-label-primary": string;
175
+ "lp-brand-label-secondary": string;
176
+ "lp-brand-border-overlay-normal": string;
177
+ "lp-brand-border-opaque-normal": string;
178
+ };
179
+ light: {
180
+ "lp-neutral-container-lowest": string;
181
+ "lp-neutral-container-low": string;
182
+ "lp-neutral-container-mid": string;
183
+ "lp-neutral-container-high": string;
184
+ "lp-neutral-container-highest": string;
185
+ "lp-neutral-fill-lowest": string;
186
+ "lp-neutral-fill-low": string;
187
+ "lp-neutral-fill-mid": string;
188
+ "lp-neutral-label-primary": string;
189
+ "lp-neutral-label-secondary": string;
190
+ "lp-neutral-label-tertiary": string;
191
+ "lp-neutral-label-quaternary": string;
192
+ "lp-neutral-border-overlay-normal": string;
193
+ "lp-neutral-border-overlay-subtle": string;
194
+ "lp-neutral-border-opaque-strong": string;
195
+ "lp-neutral-border-opaque-normal": string;
196
+ "lp-neutral-border-opaque-subtle": string;
197
+ "lp-inverse-container-lowest": string;
198
+ "lp-inverse-container-low": string;
199
+ "lp-inverse-container-mid": string;
200
+ "lp-inverse-container-high": string;
201
+ "lp-inverse-container-highest": string;
202
+ "lp-inverse-fill-lowest": string;
203
+ "lp-inverse-fill-low": string;
204
+ "lp-inverse-fill-mid": string;
205
+ "lp-inverse-label-primary": string;
206
+ "lp-inverse-label-static-primary": string;
207
+ "lp-inverse-label-secondary": string;
208
+ "lp-inverse-label-tertiary": string;
209
+ "lp-inverse-label-quaternary": string;
210
+ "lp-inverse-border-overlay-normal": string;
211
+ "lp-inverse-border-overlay-subtle": string;
212
+ "lp-inverse-border-opaque-strong": string;
213
+ "lp-inverse-border-opaque-normal": string;
214
+ "lp-inverse-border-opaque-subtle": string;
215
+ "lp-brand-container-mid": string;
216
+ "lp-brand-container-high": string;
217
+ "lp-brand-label-primary": string;
218
+ "lp-brand-label-secondary": string;
219
+ "lp-brand-border-overlay-normal": string;
220
+ "lp-brand-border-opaque-normal": string;
221
+ };
222
+ };
223
+ };
224
+ };
package/lib/design/color/vars.d.ts CHANGED
@@ -1,28 +1,45 @@
1
1
  export declare const vars: {
2
2
  color: {
3
- "lp-neutral-primary": string;
4
- "lp-neutral-secondary": string;
5
- "lp-neutral-tertiary": string;
6
- "lp-inverse-neutral-primary": string;
7
- "lp-neutral-container-primary": string;
8
- "lp-neutral-container-secondary": string;
9
- "lp-neutral-container-tertiary": string;
10
- "lp-neutral-border-primary": string;
11
- "lp-neutral-border-secondary": string;
12
- "lp-neutral-border-tertiary": string;
13
- "lp-neutral-placeholder": string;
14
- "lp-accent-primary": string;
15
- "lp-accent-container-primary": string;
16
- "lp-positive-primary": string;
17
- "lp-positive-container-primary": string;
18
- "lp-caution-primary": string;
19
- "lp-caution-container-primary": string;
20
- "lp-negative-primary": string;
21
- "lp-negative-container-primary": string;
22
- "lp-link-primary": string;
23
- "lp-dim": string;
24
- "lp-status-neutral-primary": string;
25
- "lp-status-accent-primary": string;
26
- "lp-status-disabled-primary": string;
3
+ "lp-neutral-container-lowest": string;
4
+ "lp-neutral-container-low": string;
5
+ "lp-neutral-container-mid": string;
6
+ "lp-neutral-container-high": string;
7
+ "lp-neutral-container-highest": string;
8
+ "lp-neutral-fill-lowest": string;
9
+ "lp-neutral-fill-low": string;
10
+ "lp-neutral-fill-mid": string;
11
+ "lp-neutral-label-primary": string;
12
+ "lp-neutral-label-secondary": string;
13
+ "lp-neutral-label-tertiary": string;
14
+ "lp-neutral-label-quaternary": string;
15
+ "lp-neutral-border-overlay-normal": string;
16
+ "lp-neutral-border-overlay-subtle": string;
17
+ "lp-neutral-border-opaque-strong": string;
18
+ "lp-neutral-border-opaque-normal": string;
19
+ "lp-neutral-border-opaque-subtle": string;
20
+ "lp-inverse-container-lowest": string;
21
+ "lp-inverse-container-low": string;
22
+ "lp-inverse-container-mid": string;
23
+ "lp-inverse-container-high": string;
24
+ "lp-inverse-container-highest": string;
25
+ "lp-inverse-fill-lowest": string;
26
+ "lp-inverse-fill-low": string;
27
+ "lp-inverse-fill-mid": string;
28
+ "lp-inverse-label-primary": string;
29
+ "lp-inverse-label-static-primary": string;
30
+ "lp-inverse-label-secondary": string;
31
+ "lp-inverse-label-tertiary": string;
32
+ "lp-inverse-label-quaternary": string;
33
+ "lp-inverse-border-overlay-normal": string;
34
+ "lp-inverse-border-overlay-subtle": string;
35
+ "lp-inverse-border-opaque-strong": string;
36
+ "lp-inverse-border-opaque-normal": string;
37
+ "lp-inverse-border-opaque-subtle": string;
38
+ "lp-brand-container-mid": string;
39
+ "lp-brand-container-high": string;
40
+ "lp-brand-label-primary": string;
41
+ "lp-brand-label-secondary": string;
42
+ "lp-brand-border-overlay-normal": string;
43
+ "lp-brand-border-opaque-normal": string;
27
44
  };
28
45
  };