@liner-fe/design-token 2.1.7 → 2.1.9

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 (38) hide show
  1. package/global.css +27 -9
  2. package/lib/helpers/getTypoStyle.d.ts +2 -0
  3. package/lib/index.cjs +461 -0
  4. package/lib/index.cjs.map +4 -4
  5. package/lib/index.d.ts +1 -0
  6. package/lib/index.mjs +461 -0
  7. package/lib/index.mjs.map +4 -4
  8. package/lib/scripts/create-css/constants/typography/index.d.ts +13 -0
  9. package/lib/scripts/create-css/constants/typography/primitive.d.ts +37 -0
  10. package/lib/scripts/create-css/constants/typography/types.d.ts +17 -0
  11. package/package.json +2 -2
  12. package/src/components/Head.tsx +7 -0
  13. package/src/helpers/getTypoStyle.ts +35 -0
  14. package/src/index.ts +1 -0
  15. package/src/scripts/create-css/constants/PATH.ts +3 -0
  16. package/src/scripts/create-css/constants/color/index.ts +257 -0
  17. package/src/scripts/create-css/constants/color/types.ts +135 -0
  18. package/src/scripts/create-css/constants/gap/index.ts +19 -0
  19. package/src/scripts/create-css/constants/icon/index.ts +9 -0
  20. package/src/scripts/create-css/constants/opacity/index.ts +21 -0
  21. package/src/scripts/create-css/constants/padding/index.ts +24 -0
  22. package/src/scripts/create-css/constants/primitiveRoot.ts +100 -0
  23. package/src/scripts/create-css/constants/radius/index.ts +12 -0
  24. package/src/scripts/create-css/constants/radius/type.ts +10 -0
  25. package/src/scripts/create-css/constants/rootScheme.ts +94 -0
  26. package/src/scripts/create-css/constants/shadow/index.ts +16 -0
  27. package/src/scripts/create-css/constants/size/index.ts +33 -0
  28. package/src/scripts/create-css/constants/size/type.ts +31 -0
  29. package/src/scripts/create-css/constants/typography/index.ts +450 -0
  30. package/src/scripts/create-css/constants/typography/primitive.ts +39 -0
  31. package/src/scripts/create-css/constants/typography/types.ts +85 -0
  32. package/src/scripts/create-css/index.ts +57 -0
  33. package/src/scripts/create-css/utils/convertFontFamily.ts +13 -0
  34. package/src/scripts/create-css/utils/convertObjectToCSSVariables.ts +5 -0
  35. package/src/scripts/create-css/utils/createFile.ts +12 -0
  36. package/src/scripts/create-css/utils/hexToRGBA.ts +15 -0
  37. package/src/scripts/create-css/utils/makeDir.ts +7 -0
  38. package/src/scripts/create-css/utils/replaceValuesWithKeys.ts +15 -0
package/src/scripts/create-css/constants/color/index.ts ADDED
@@ -0,0 +1,257 @@
1
+ import { AlphasKey, IColor, IPrimitiveWithAlpha } from './types';
2
+ import { hexToRgba } from '../../utils/hexToRGBA';
3
+ import { SystemKeys } from '../../../../types/color';
4
+
5
+ const system: Record<SystemKeys, [keyof IPrimitiveWithAlpha, keyof IPrimitiveWithAlpha]> = {
6
+ 'neutral-container-lowest': ['lp-pri-achromatic-white', 'lp-pri-gray-cool-100'],
7
+ 'neutral-container-lowest-hover': ['lp-pri-gray-cool-970', 'lp-pri-gray-cool-200'],
8
+ 'neutral-container-low': ['lp-pri-gray-cool-980', 'lp-pri-gray-cool-200'],
9
+ 'neutral-container-low-hover': ['lp-pri-gray-cool-970', 'lp-pri-gray-cool-250'],
10
+ 'neutral-container-mid': ['lp-pri-gray-cool-970', 'lp-pri-gray-cool-200'],
11
+ 'neutral-container-mid-hover': ['lp-pri-gray-cool-940', 'lp-pri-gray-cool-300'],
12
+ 'neutral-container-high': ['lp-pri-gray-cool-940', 'lp-pri-gray-cool-250'],
13
+ 'neutral-container-high-hover': ['lp-pri-gray-cool-900', 'lp-pri-gray-cool-300'],
14
+ 'neutral-container-highest': ['lp-pri-gray-cool-920', 'lp-pri-gray-cool-300'],
15
+ 'neutral-container-static-lowest': ['lp-pri-achromatic-white', 'lp-pri-achromatic-white'],
16
+ 'neutral-container-static-lowest-hover': ['lp-pri-gray-cool-970', 'lp-pri-gray-cool-900'],
17
+ 'neutral-fill-lowest': ['lp-pri-gray-cool-dark-alpha-0', 'lp-pri-gray-cool-dark-alpha-0'],
18
+ 'neutral-fill-lowest-hover': ['lp-pri-gray-cool-dark-alpha-6', 'lp-pri-gray-cool-dark-alpha-12'],
19
+ 'neutral-fill-low': ['lp-pri-gray-cool-dark-alpha-8', 'lp-pri-gray-cool-dark-alpha-20'],
20
+ 'neutral-fill-low-hover': ['lp-pri-gray-cool-dark-alpha-4', 'lp-pri-gray-cool-dark-alpha-8'],
21
+ 'neutral-fill-mid': ['lp-pri-gray-cool-dark-alpha-8', 'lp-pri-gray-cool-dark-alpha-16'],
22
+ 'neutral-fill-mid-hover': ['lp-pri-gray-cool-dark-alpha-16', 'lp-pri-gray-cool-dark-alpha-32'],
23
+ 'neutral-fill-high': ['lp-pri-gray-cool-dark-alpha-20', 'lp-pri-gray-cool-dark-alpha-32'],
24
+ 'neutral-fill-high-hover': ['lp-pri-gray-cool-dark-alpha-28', 'lp-pri-gray-cool-dark-alpha-44'],
25
+ 'neutral-fill-highest': ['lp-pri-gray-cool-dark-alpha-72', 'lp-pri-gray-cool-dark-alpha-72'],
26
+ //
27
+ 'neutral-label-primary': ['lp-pri-gray-cool-100', 'lp-pri-achromatic-white'],
28
+ 'neutral-label-secondary': ['lp-pri-gray-cool-dark-alpha-80', 'lp-pri-gray-cool-light-alpha-64'],
29
+ 'neutral-label-tertiary': ['lp-pri-gray-cool-dark-alpha-48', 'lp-pri-gray-cool-light-alpha-32'],
30
+ 'neutral-label-quaternary': ['lp-pri-gray-cool-dark-alpha-24', 'lp-pri-gray-cool-light-alpha-20'],
31
+ 'neutral-label-static-primary': ['lp-pri-gray-cool-100', 'lp-pri-gray-cool-100'],
32
+ 'neutral-label-static-secondary': ['lp-pri-gray-cool-dark-alpha-80', 'lp-pri-gray-cool-dark-alpha-80'],
33
+ //
34
+ 'neutral-border-overlay-strong': ['lp-pri-gray-cool-dark-alpha-64', 'lp-pri-gray-cool-light-alpha-64'],
35
+ 'neutral-border-overlay-normal': ['lp-pri-gray-cool-dark-alpha-24', 'lp-pri-gray-cool-light-alpha-28'],
36
+ 'neutral-border-overlay-subtle': ['lp-pri-gray-cool-dark-alpha-16', 'lp-pri-gray-cool-light-alpha-20'],
37
+ 'neutral-border-opaque-strong': ['lp-pri-gray-cool-100', 'lp-pri-achromatic-white'],
38
+ 'neutral-border-opaque-normal': ['lp-pri-gray-cool-850', 'lp-pri-gray-cool-350'],
39
+ 'neutral-border-opaque-subtle': ['lp-pri-gray-cool-920', 'lp-pri-gray-cool-250'],
40
+
41
+ 'inverse-container-lowest': ['lp-pri-gray-cool-100', 'lp-pri-achromatic-white'],
42
+ 'inverse-container-lowest-hover': ['lp-pri-gray-cool-200', 'lp-pri-gray-cool-970'],
43
+ 'inverse-container-low': ['lp-pri-gray-cool-200', 'lp-pri-gray-cool-980'],
44
+ 'inverse-container-low-hover': ['lp-pri-gray-cool-250', 'lp-pri-gray-cool-970'],
45
+ 'inverse-container-mid': ['lp-pri-gray-cool-200', 'lp-pri-gray-cool-970'],
46
+ 'inverse-container-mid-hover': ['lp-pri-gray-cool-300', 'lp-pri-gray-cool-940'],
47
+ 'inverse-container-high': ['lp-pri-gray-cool-250', 'lp-pri-gray-cool-940'],
48
+ 'inverse-container-high-hover': ['lp-pri-gray-cool-300', 'lp-pri-gray-cool-900'],
49
+ 'inverse-container-static-high': ['lp-pri-gray-cool-250', 'lp-pri-gray-cool-250'],
50
+ 'inverse-container-static-high-hover': ['lp-pri-gray-cool-350', 'lp-pri-gray-cool-350'],
51
+ 'inverse-container-highest': ['lp-pri-gray-cool-300', 'lp-pri-gray-cool-920'],
52
+ //
53
+ 'inverse-fill-mid': ['lp-pri-achromatic-white', 'lp-pri-gray-cool-light-alpha-24'],
54
+ 'inverse-fill-mid-hover': ['lp-pri-gray-cool-970', 'lp-pri-gray-cool-light-alpha-0'],
55
+ //
56
+ 'inverse-label-primary': ['lp-pri-achromatic-white', 'lp-pri-gray-cool-100'],
57
+ 'inverse-label-secondary': ['lp-pri-gray-cool-light-alpha-64', 'lp-pri-gray-cool-dark-alpha-80'],
58
+ 'inverse-label-tertiary': ['lp-pri-gray-cool-light-alpha-32', 'lp-pri-gray-cool-dark-alpha-48'],
59
+ 'inverse-label-quaternary': ['lp-pri-gray-cool-light-alpha-20', 'lp-pri-gray-cool-dark-alpha-24'],
60
+ 'inverse-label-static-primary': ['lp-pri-achromatic-white', 'lp-pri-achromatic-white'],
61
+ 'inverse-label-static-secondary': ['lp-pri-gray-cool-light-alpha-64', 'lp-pri-gray-cool-light-alpha-64'],
62
+ //
63
+ 'inverse-border-overlay-strong': ['lp-pri-gray-cool-light-alpha-64', 'lp-pri-gray-cool-dark-alpha-64'],
64
+ 'inverse-border-overlay-normal': ['lp-pri-gray-cool-light-alpha-28', 'lp-pri-gray-cool-dark-alpha-24'],
65
+ 'inverse-border-overlay-subtle': ['lp-pri-gray-cool-light-alpha-20', 'lp-pri-gray-cool-dark-alpha-16'],
66
+ 'inverse-border-opaque-strong': ['lp-pri-achromatic-white', 'lp-pri-gray-cool-100'],
67
+ 'inverse-border-opaque-normal': ['lp-pri-gray-cool-350', 'lp-pri-gray-cool-850'],
68
+ 'inverse-border-opaque-subtle': ['lp-pri-gray-cool-250', 'lp-pri-gray-cool-920'],
69
+ //
70
+ 'brand-container-mid': ['lp-pri-brand-original-500', 'lp-pri-brand-original-500'],
71
+ 'brand-container-mid-hover': ['lp-pri-brand-original-400', 'lp-pri-brand-original-600'],
72
+ 'brand-container-high': ['lp-pri-brand-original-400', 'lp-pri-brand-original-400'],
73
+ //
74
+ 'brand-label-primary': ['lp-pri-brand-original-500', 'lp-pri-brand-variation-500'],
75
+ 'brand-label-secondary': ['lp-pri-brand-original-alpha-80', 'lp-pri-brand-original-alpha-80'],
76
+ //
77
+ 'brand-border-opaque-normal': ['lp-pri-brand-original-500', 'lp-pri-brand-original-500'],
78
+ 'brand-border-overlay-normal': ['lp-pri-brand-original-alpha-20', 'lp-pri-brand-original-alpha-20'],
79
+ //
80
+ 'accent-container-yellow': ['lp-pri-rainbow-yellow-500', 'lp-pri-rainbow-yellow-600'],
81
+ 'accent-mint': ['lp-pri-rainbow-mint-500', 'lp-pri-rainbow-mint-600'],
82
+ 'accent-cyan': ['lp-pri-rainbow-cyan-500', 'lp-pri-rainbow-cyan-600'],
83
+ 'accent-purple': ['lp-pri-rainbow-purple-500', 'lp-pri-rainbow-purple-600'],
84
+ 'accent-pink': ['lp-pri-rainbow-pink-500', 'lp-pri-rainbow-pink-600'],
85
+ //
86
+ 'function-container-positive': ['lp-pri-rainbow-green-500', 'lp-pri-rainbow-green-600'],
87
+ 'function-container-negative': ['lp-pri-rainbow-red-500', 'lp-pri-rainbow-red-500'],
88
+ 'function-container-negative-hover': ['lp-pri-rainbow-red-400', 'lp-pri-rainbow-red-600'],
89
+ 'function-container-caution': ['lp-pri-rainbow-orange-500', 'lp-pri-rainbow-orange-500'],
90
+ //
91
+ 'function-label-positive': ['lp-pri-rainbow-green-500', 'lp-pri-rainbow-green-600'],
92
+ 'function-label-negative': ['lp-pri-rainbow-red-500', 'lp-pri-rainbow-red-500'],
93
+ 'function-label-caution': ['lp-pri-rainbow-orange-500', 'lp-pri-rainbow-orange-500'],
94
+
95
+ 'cover-dim-page': ['lp-pri-achromatic-black-alpha-56', 'lp-pri-achromatic-black-alpha-56'],
96
+ };
97
+
98
+ export const color: IColor = {
99
+ primitive: {
100
+ 'lp-pri-achromatic-white': '#ffffff',
101
+ 'lp-pri-achromatic-black': '#000000',
102
+ 'lp-pri-gray-cool-980': '#F9F9FA',
103
+ 'lp-pri-gray-cool-970': '#F6F6F7',
104
+ 'lp-pri-gray-cool-940': '#EDEEF0',
105
+ 'lp-pri-gray-cool-920': '#E9E9EB',
106
+ 'lp-pri-gray-cool-900': '#E3E3E6',
107
+ 'lp-pri-gray-cool-850': '#D7D7D9',
108
+ 'lp-pri-gray-cool-750': '#BEBFC2',
109
+ 'lp-pri-gray-cool-600': '#939499',
110
+ 'lp-pri-gray-cool-450': '#6D6D70',
111
+ 'lp-pri-gray-cool-350': '#58595C',
112
+ 'lp-pri-gray-cool-300': '#4A4A4D',
113
+ 'lp-pri-gray-cool-250': '#3B3B3D',
114
+ 'lp-pri-gray-cool-200': '#313133',
115
+ 'lp-pri-gray-cool-100': '#1E1E1F',
116
+ 'lp-pri-brand-original-950': '#FAFBFF',
117
+ 'lp-pri-brand-original-900': '#F4F5FF',
118
+ 'lp-pri-brand-original-800': '#D9DEFF',
119
+ 'lp-pri-brand-original-700': '#B7C1FF',
120
+ 'lp-pri-brand-original-600': '#6B7FFF',
121
+ 'lp-pri-brand-original-500': '#4058FF',
122
+ 'lp-pri-brand-original-400': '#273FD9',
123
+ 'lp-pri-brand-original-200': '#152AB3',
124
+ 'lp-pri-brand-original-100': '#071780',
125
+ 'lp-pri-brand-original-50': '#041166',
126
+ 'lp-pri-brand-variation-950': '#FAFBFF',
127
+ 'lp-pri-brand-variation-900': '#F4F7FF',
128
+ 'lp-pri-brand-variation-800': '#D9E4FF',
129
+ 'lp-pri-brand-variation-700': '#B7CDFF',
130
+ 'lp-pri-brand-variation-600': '#759EFF',
131
+ 'lp-pri-brand-variation-500': '#5487FF',
132
+ 'lp-pri-brand-variation-400': '#4E70BF',
133
+ 'lp-pri-brand-variation-200': '#4A6299',
134
+ 'lp-pri-brand-variation-100': '#384666',
135
+ 'lp-pri-brand-variation-50': '#2C364D',
136
+ 'lp-pri-rainbow-red-950': '#FFF5F5',
137
+ 'lp-pri-rainbow-red-900': '#FFE7E7',
138
+ 'lp-pri-rainbow-red-800': '#FFC3C3',
139
+ 'lp-pri-rainbow-red-700': '#FF9090',
140
+ 'lp-pri-rainbow-red-600': '#FF6060',
141
+ 'lp-pri-rainbow-red-500': '#FF3333',
142
+ 'lp-pri-rainbow-red-400': '#DB2323',
143
+ 'lp-pri-rainbow-red-300': '#B81616',
144
+ 'lp-pri-rainbow-red-200': '#710808',
145
+ 'lp-pri-rainbow-red-100': '#410404',
146
+ 'lp-pri-rainbow-orange-950': '#FFFBF4',
147
+ 'lp-pri-rainbow-orange-900': '#FFF4E3',
148
+ 'lp-pri-rainbow-orange-800': '#FFE1B4',
149
+ 'lp-pri-rainbow-orange-700': '#FFC875',
150
+ 'lp-pri-rainbow-orange-600': '#FFB039',
151
+ 'lp-pri-rainbow-orange-500': '#FF9900',
152
+ 'lp-pri-rainbow-orange-400': '#DB8503',
153
+ 'lp-pri-rainbow-orange-300': '#B87005',
154
+ 'lp-pri-rainbow-orange-200': '#714605',
155
+ 'lp-pri-rainbow-orange-100': '#412803',
156
+ 'lp-pri-rainbow-yellow-950': '#FFFDF4',
157
+ 'lp-pri-rainbow-yellow-900': '#FFF9E3',
158
+ 'lp-pri-rainbow-yellow-800': '#FFF0B4',
159
+ 'lp-pri-rainbow-yellow-700': '#FFE375',
160
+ 'lp-pri-rainbow-yellow-600': '#FFD739',
161
+ 'lp-pri-rainbow-yellow-500': '#FFCC00',
162
+ 'lp-pri-rainbow-yellow-400': '#DBB003',
163
+ 'lp-pri-rainbow-yellow-300': '#B89405',
164
+ 'lp-pri-rainbow-yellow-200': '#715B05',
165
+ 'lp-pri-rainbow-yellow-100': '#413503',
166
+ 'lp-pri-rainbow-green-950': '#F5FEF7',
167
+ 'lp-pri-rainbow-green-900': '#E6FCEA',
168
+ 'lp-pri-rainbow-green-800': '#BFF5C8',
169
+ 'lp-pri-rainbow-green-700': '#8CEC9C',
170
+ 'lp-pri-rainbow-green-600': '#5DDF73',
171
+ 'lp-pri-rainbow-green-500': '#30BF48',
172
+ 'lp-pri-rainbow-green-400': '#20A536',
173
+ 'lp-pri-rainbow-green-300': '#148B28',
174
+ 'lp-pri-rainbow-green-200': '#075714',
175
+ 'lp-pri-rainbow-green-100': '#03350B',
176
+ 'lp-pri-rainbow-mint-950': '#F3FEFE',
177
+ 'lp-pri-rainbow-mint-900': '#AFF7F7',
178
+ 'lp-pri-rainbow-mint-800': '#6EF0F0',
179
+ 'lp-pri-rainbow-mint-700': '#33E6E6',
180
+ 'lp-pri-rainbow-mint-600': '#00CCCC',
181
+ 'lp-pri-rainbow-mint-500': '#02B0B0',
182
+ 'lp-pri-rainbow-mint-400': '#02B0B0',
183
+ 'lp-pri-rainbow-mint-300': '#049494',
184
+ 'lp-pri-rainbow-mint-200': '#045C5C',
185
+ 'lp-pri-rainbow-mint-100': '#033737',
186
+ 'lp-pri-rainbow-cyan-950': '#F6FBFF',
187
+ 'lp-pri-rainbow-cyan-900': '#E8F6FF',
188
+ 'lp-pri-rainbow-cyan-800': '#C6E8FF',
189
+ 'lp-pri-rainbow-cyan-700': '#97D5FF',
190
+ 'lp-pri-rainbow-cyan-600': '#6AC4FF',
191
+ 'lp-pri-rainbow-cyan-500': '#40B3FF',
192
+ 'lp-pri-rainbow-cyan-400': '#2B95DB',
193
+ 'lp-pri-rainbow-cyan-300': '#1A79B8',
194
+ 'lp-pri-rainbow-cyan-200': '#094771',
195
+ 'lp-pri-rainbow-cyan-100': '#042941',
196
+ 'lp-pri-rainbow-purple-950': '#FCF6FF',
197
+ 'lp-pri-rainbow-purple-900': '#F7EAFE',
198
+ 'lp-pri-rainbow-purple-800': '#EBCAFB',
199
+ 'lp-pri-rainbow-purple-700': '#DAA0F7',
200
+ 'lp-pri-rainbow-purple-600': '#C978F2',
201
+ 'lp-pri-rainbow-purple-500': '#B450E6',
202
+ 'lp-pri-rainbow-purple-400': '#9535C6',
203
+ 'lp-pri-rainbow-purple-300': '#7920A6',
204
+ 'lp-pri-rainbow-purple-200': '#480A67',
205
+ 'lp-pri-rainbow-purple-100': '#29043C',
206
+ 'lp-pri-rainbow-pink-950': '#FFF5F8',
207
+ 'lp-pri-rainbow-pink-900': '#FFE7EF',
208
+ 'lp-pri-rainbow-pink-800': '#FFC3D7',
209
+ 'lp-pri-rainbow-pink-700': '#FF90B5',
210
+ 'lp-pri-rainbow-pink-600': '#FF6095',
211
+ 'lp-pri-rainbow-pink-500': '#FF3377',
212
+ 'lp-pri-rainbow-pink-400': '#DB2360',
213
+ 'lp-pri-rainbow-pink-300': '#B8164C',
214
+ 'lp-pri-rainbow-pink-200': '#71082B',
215
+ 'lp-pri-rainbow-pink-100': '#120107',
216
+ },
217
+ system: {
218
+ dark: {},
219
+ light: {},
220
+ },
221
+ } as const;
222
+
223
+ export const alphas = [80, 72, 64, 56, 50, 48, 44, 40, 36, 32, 28, 24, 20, 16, 12, 8, 6, 4, 1, 0] as const;
224
+
225
+ export type alphaPrimitiveKeys =
226
+ | 'lp-pri-achromatic-white'
227
+ | 'lp-pri-gray-cool-dark'
228
+ | 'lp-pri-gray-cool-light'
229
+ | 'lp-pri-brand-original'
230
+ | 'lp-pri-achromatic-black';
231
+
232
+ export const alphaPrimitive: { name: alphaPrimitiveKeys; value: string }[] = [
233
+ { name: 'lp-pri-achromatic-white', value: '#FFFFFF' },
234
+ { name: 'lp-pri-gray-cool-dark', value: '#6D6D70' },
235
+ { name: 'lp-pri-gray-cool-light', value: '#E9E9EB' },
236
+ { name: 'lp-pri-brand-original', value: '#041166' },
237
+ { name: 'lp-pri-achromatic-black', value: '#000000' },
238
+ ] as const;
239
+
240
+ const generateAlpha = () => {
241
+ alphaPrimitive.forEach(({ name, value }) => {
242
+ alphas.forEach(alpha => {
243
+ const alphaKey = `${name}-alpha-${alpha}` as AlphasKey;
244
+
245
+ color.primitive[alphaKey] = hexToRgba(value.slice(1), alpha / 100);
246
+ });
247
+ });
248
+ };
249
+
250
+ generateAlpha();
251
+
252
+ Object.entries(system).map(([key, value]) => {
253
+ const systemKey = key as SystemKeys;
254
+
255
+ color.system.light[systemKey] = value[0];
256
+ color.system.dark[systemKey] = value[1];
257
+ });
package/src/scripts/create-css/constants/color/types.ts ADDED
@@ -0,0 +1,135 @@
1
+ import { alphas, alphaPrimitiveKeys } from '.';
2
+ import { SystemKeys } from '../../../../types/color';
3
+
4
+ export interface IPrimitive {
5
+ 'lp-pri-achromatic-white': '#ffffff';
6
+ 'lp-pri-achromatic-black': '#000000';
7
+ 'lp-pri-gray-cool-980': '#F9F9FA';
8
+ 'lp-pri-gray-cool-970': '#F6F6F7';
9
+ 'lp-pri-gray-cool-940': '#EDEEF0';
10
+ 'lp-pri-gray-cool-920': '#E9E9EB';
11
+ 'lp-pri-gray-cool-900': '#E3E3E6';
12
+ 'lp-pri-gray-cool-850': '#D7D7D9';
13
+ 'lp-pri-gray-cool-750': '#BEBFC2';
14
+ 'lp-pri-gray-cool-600': '#939499';
15
+ 'lp-pri-gray-cool-450': '#6D6D70';
16
+ 'lp-pri-gray-cool-350': '#58595C';
17
+ 'lp-pri-gray-cool-300': '#4A4A4D';
18
+ 'lp-pri-gray-cool-250': '#3B3B3D';
19
+ 'lp-pri-gray-cool-200': '#313133';
20
+ 'lp-pri-gray-cool-100': '#1E1E1F';
21
+ 'lp-pri-brand-original-950': '#FAFBFF';
22
+ 'lp-pri-brand-original-900': '#F4F5FF';
23
+ 'lp-pri-brand-original-800': '#D9DEFF';
24
+ 'lp-pri-brand-original-700': '#B7C1FF';
25
+ 'lp-pri-brand-original-600': '#6B7FFF';
26
+ 'lp-pri-brand-original-500': '#4058FF';
27
+ 'lp-pri-brand-original-400': '#273FD9';
28
+ 'lp-pri-brand-original-200': '#152AB3';
29
+ 'lp-pri-brand-original-100': '#071780';
30
+ 'lp-pri-brand-original-50': '#041166';
31
+ 'lp-pri-brand-variation-950': '#FAFBFF';
32
+ 'lp-pri-brand-variation-900': '#F4F7FF';
33
+ 'lp-pri-brand-variation-800': '#D9E4FF';
34
+ 'lp-pri-brand-variation-700': '#B7CDFF';
35
+ 'lp-pri-brand-variation-600': '#759EFF';
36
+ 'lp-pri-brand-variation-500': '#5487FF';
37
+ 'lp-pri-brand-variation-400': '#4E70BF';
38
+ 'lp-pri-brand-variation-200': '#4A6299';
39
+ 'lp-pri-brand-variation-100': '#384666';
40
+ 'lp-pri-brand-variation-50': '#2C364D';
41
+ 'lp-pri-rainbow-red-950': '#FFF5F5';
42
+ 'lp-pri-rainbow-red-900': '#FFE7E7';
43
+ 'lp-pri-rainbow-red-800': '#FFC3C3';
44
+ 'lp-pri-rainbow-red-700': '#FF9090';
45
+ 'lp-pri-rainbow-red-600': '#FF6060';
46
+ 'lp-pri-rainbow-red-500': '#FF3333';
47
+ 'lp-pri-rainbow-red-400': '#DB2323';
48
+ 'lp-pri-rainbow-red-300': '#B81616';
49
+ 'lp-pri-rainbow-red-200': '#710808';
50
+ 'lp-pri-rainbow-red-100': '#410404';
51
+ 'lp-pri-rainbow-orange-950': '#FFFBF4';
52
+ 'lp-pri-rainbow-orange-900': '#FFF4E3';
53
+ 'lp-pri-rainbow-orange-800': '#FFE1B4';
54
+ 'lp-pri-rainbow-orange-700': '#FFC875';
55
+ 'lp-pri-rainbow-orange-600': '#FFB039';
56
+ 'lp-pri-rainbow-orange-500': '#FF9900';
57
+ 'lp-pri-rainbow-orange-400': '#DB8503';
58
+ 'lp-pri-rainbow-orange-300': '#B87005';
59
+ 'lp-pri-rainbow-orange-200': '#714605';
60
+ 'lp-pri-rainbow-orange-100': '#412803';
61
+ 'lp-pri-rainbow-yellow-950': '#FFFDF4';
62
+ 'lp-pri-rainbow-yellow-900': '#FFF9E3';
63
+ 'lp-pri-rainbow-yellow-800': '#FFF0B4';
64
+ 'lp-pri-rainbow-yellow-700': '#FFE375';
65
+ 'lp-pri-rainbow-yellow-600': '#FFD739';
66
+ 'lp-pri-rainbow-yellow-500': '#FFCC00';
67
+ 'lp-pri-rainbow-yellow-400': '#DBB003';
68
+ 'lp-pri-rainbow-yellow-300': '#B89405';
69
+ 'lp-pri-rainbow-yellow-200': '#715B05';
70
+ 'lp-pri-rainbow-yellow-100': '#413503';
71
+ 'lp-pri-rainbow-green-950': '#F5FEF7';
72
+ 'lp-pri-rainbow-green-900': '#E6FCEA';
73
+ 'lp-pri-rainbow-green-800': '#BFF5C8';
74
+ 'lp-pri-rainbow-green-700': '#8CEC9C';
75
+ 'lp-pri-rainbow-green-600': '#5DDF73';
76
+ 'lp-pri-rainbow-green-500': '#30BF48';
77
+ 'lp-pri-rainbow-green-400': '#20A536';
78
+ 'lp-pri-rainbow-green-300': '#148B28';
79
+ 'lp-pri-rainbow-green-200': '#075714';
80
+ 'lp-pri-rainbow-green-100': '#03350B';
81
+ 'lp-pri-rainbow-mint-950': '#F3FEFE';
82
+ 'lp-pri-rainbow-mint-900': '#AFF7F7';
83
+ 'lp-pri-rainbow-mint-800': '#6EF0F0';
84
+ 'lp-pri-rainbow-mint-700': '#33E6E6';
85
+ 'lp-pri-rainbow-mint-600': '#00CCCC';
86
+ 'lp-pri-rainbow-mint-500': '#02B0B0';
87
+ 'lp-pri-rainbow-mint-400': '#02B0B0';
88
+ 'lp-pri-rainbow-mint-300': '#049494';
89
+ 'lp-pri-rainbow-mint-200': '#045C5C';
90
+ 'lp-pri-rainbow-mint-100': '#033737';
91
+ 'lp-pri-rainbow-cyan-950': '#F6FBFF';
92
+ 'lp-pri-rainbow-cyan-900': '#E8F6FF';
93
+ 'lp-pri-rainbow-cyan-800': '#C6E8FF';
94
+ 'lp-pri-rainbow-cyan-700': '#97D5FF';
95
+ 'lp-pri-rainbow-cyan-600': '#6AC4FF';
96
+ 'lp-pri-rainbow-cyan-500': '#40B3FF';
97
+ 'lp-pri-rainbow-cyan-400': '#2B95DB';
98
+ 'lp-pri-rainbow-cyan-300': '#1A79B8';
99
+ 'lp-pri-rainbow-cyan-200': '#094771';
100
+ 'lp-pri-rainbow-cyan-100': '#042941';
101
+ 'lp-pri-rainbow-purple-950': '#FCF6FF';
102
+ 'lp-pri-rainbow-purple-900': '#F7EAFE';
103
+ 'lp-pri-rainbow-purple-800': '#EBCAFB';
104
+ 'lp-pri-rainbow-purple-700': '#DAA0F7';
105
+ 'lp-pri-rainbow-purple-600': '#C978F2';
106
+ 'lp-pri-rainbow-purple-500': '#B450E6';
107
+ 'lp-pri-rainbow-purple-400': '#9535C6';
108
+ 'lp-pri-rainbow-purple-300': '#7920A6';
109
+ 'lp-pri-rainbow-purple-200': '#480A67';
110
+ 'lp-pri-rainbow-purple-100': '#29043C';
111
+ 'lp-pri-rainbow-pink-950': '#FFF5F8';
112
+ 'lp-pri-rainbow-pink-900': '#FFE7EF';
113
+ 'lp-pri-rainbow-pink-800': '#FFC3D7';
114
+ 'lp-pri-rainbow-pink-700': '#FF90B5';
115
+ 'lp-pri-rainbow-pink-600': '#FF6095';
116
+ 'lp-pri-rainbow-pink-500': '#FF3377';
117
+ 'lp-pri-rainbow-pink-400': '#DB2360';
118
+ 'lp-pri-rainbow-pink-300': '#B8164C';
119
+ 'lp-pri-rainbow-pink-200': '#71082B';
120
+ 'lp-pri-rainbow-pink-100': '#120107';
121
+ }
122
+
123
+ export interface IPrimitiveWithAlpha extends Partial<Record<AlphasKey, string>>, IPrimitive {}
124
+
125
+ type ISystem = Record<SystemKeys, keyof IPrimitiveWithAlpha>;
126
+
127
+ export interface IColor {
128
+ primitive: IPrimitiveWithAlpha;
129
+ system: {
130
+ dark: Partial<ISystem>;
131
+ light: Partial<ISystem>;
132
+ };
133
+ }
134
+
135
+ export type AlphasKey = `${alphaPrimitiveKeys}-alpha-${(typeof alphas)[number]}`;
package/src/scripts/create-css/constants/gap/index.ts ADDED
@@ -0,0 +1,19 @@
1
+ import { ISize } from '../size/type';
2
+
3
+ export const gap = {
4
+ 'lp-sys-gap-positive-50': ISize['lp-pri-size-2'],
5
+ 'lp-sys-gap-positive-100': ISize['lp-pri-size-4'],
6
+ 'lp-sys-gap-positive-150': ISize['lp-pri-size-6'],
7
+ 'lp-sys-gap-positive-200': ISize['lp-pri-size-8'],
8
+ 'lp-sys-gap-positive-300': ISize['lp-pri-size-12'],
9
+ 'lp-sys-gap-positive-400': ISize['lp-pri-size-16'],
10
+ 'lp-sys-gap-positive-500': ISize['lp-pri-size-20'],
11
+ 'lp-sys-gap-positive-600': ISize['lp-pri-size-24'],
12
+ 'lp-sys-gap-positive-700': ISize['lp-pri-size-32'],
13
+ 'lp-sys-gap-positive-800': ISize['lp-pri-size-40'],
14
+ 'lp-sys-gap-positive-900': ISize['lp-pri-size-48'],
15
+
16
+ 'lp-sys-gap-negative-700': ISize['lp-pri-size-minus2'],
17
+ 'lp-sys-gap-negative-800': ISize['lp-pri-size-minus4'],
18
+ 'lp-sys-gap-negative-900': ISize['lp-pri-size-minus6'],
19
+ } as const;
package/src/scripts/create-css/constants/icon/index.ts ADDED
@@ -0,0 +1,9 @@
1
+ import { ISize } from '../size/type';
2
+
3
+ export const iconSize = {
4
+ 'lp-sys-icon-size-xs': ISize['lp-pri-size-16'],
5
+ 'lp-sys-icon-size-s': ISize['lp-pri-size-20'],
6
+ 'lp-sys-icon-size-m': ISize['lp-pri-size-24'],
7
+ 'lp-sys-icon-size-l': ISize['lp-pri-size-32'],
8
+ 'lp-sys-icon-size-xl': ISize['lp-pri-size-40'],
9
+ } as const;
package/src/scripts/create-css/constants/opacity/index.ts ADDED
@@ -0,0 +1,21 @@
1
+ export const opacity = {
2
+ 'lp-pri-color-opacity-80': '80%',
3
+ 'lp-pri-color-opacity-72': '72%',
4
+ 'lp-pri-color-opacity-64': '64%',
5
+ 'lp-pri-color-opacity-56': '56%',
6
+ 'lp-pri-color-opacity-50': '50%',
7
+ 'lp-pri-color-opacity-48': '48%',
8
+ 'lp-pri-color-opacity-44': '44%',
9
+ 'lp-pri-color-opacity-40': '40%',
10
+ 'lp-pri-color-opacity-36': '36%',
11
+ 'lp-pri-color-opacity-32': '32%',
12
+ 'lp-pri-color-opacity-28': '28%',
13
+ 'lp-pri-color-opacity-24': '24%',
14
+ 'lp-pri-color-opacity-20': '20%',
15
+ 'lp-pri-color-opacity-16': '16%',
16
+ 'lp-pri-color-opacity-12': '12%',
17
+ 'lp-pri-color-opacity-8': '8%',
18
+ 'lp-pri-color-opacity-4': '4%',
19
+ 'lp-pri-color-opacity-1': '1%',
20
+ 'lp-pri-color-opacity-0': '0%',
21
+ } as const;
package/src/scripts/create-css/constants/padding/index.ts ADDED
@@ -0,0 +1,24 @@
1
+ import { ISize } from '../size/type';
2
+
3
+ export const padding = {
4
+ 'lp-sys-padding-component-100': ISize['lp-pri-size-4'],
5
+ 'lp-sys-padding-component-150': ISize['lp-pri-size-6'],
6
+ 'lp-sys-padding-component-200': ISize['lp-pri-size-8'],
7
+ 'lp-sys-padding-component-300': ISize['lp-pri-size-12'],
8
+ 'lp-sys-padding-component-400': ISize['lp-pri-size-16'],
9
+ 'lp-sys-padding-component-500': ISize['lp-pri-size-20'],
10
+ 'lp-sys-padding-component-600': ISize['lp-pri-size-24'],
11
+ 'lp-sys-padding-component-700': ISize['lp-pri-size-32'],
12
+ 'lp-sys-padding-component-800': ISize['lp-pri-size-40'],
13
+ 'lp-sys-padding-component-900': ISize['lp-pri-size-48'],
14
+
15
+ 'lp-sys-padding-section-100': ISize['lp-pri-size-24'],
16
+ 'lp-sys-padding-section-200': ISize['lp-pri-size-32'],
17
+ 'lp-sys-padding-section-300': ISize['lp-pri-size-40'],
18
+ 'lp-sys-padding-section-400': ISize['lp-pri-size-48'],
19
+ 'lp-sys-padding-section-500': ISize['lp-pri-size-56'],
20
+ 'lp-sys-padding-section-600': ISize['lp-pri-size-64'],
21
+ 'lp-sys-padding-section-700': ISize['lp-pri-size-80'],
22
+ 'lp-sys-padding-section-800': ISize['lp-pri-size-100'],
23
+ 'lp-sys-padding-section-900': ISize['lp-pri-size-120'],
24
+ } as const;
package/src/scripts/create-css/constants/primitiveRoot.ts ADDED
@@ -0,0 +1,100 @@
1
+ import { convertObjectToCSSVariables } from '../utils/convertObjectToCSSVariables';
2
+ import { color } from './color';
3
+ import { convertFontFamily } from '../utils/convertFontFamily';
4
+ import { typography } from './typography';
5
+ import { radius } from './radius';
6
+ import { size } from './size';
7
+ import { opacity } from './opacity';
8
+ import { padding } from './padding';
9
+ import { gap } from './gap';
10
+ import { font } from './typography/primitive';
11
+ import { iconSize } from './icon';
12
+
13
+ const primitiveColor: Record<string, any> = {};
14
+ Object.entries(color.primitive).map(([key, value]) => {
15
+ primitiveColor[`--${key}`] = value;
16
+ });
17
+
18
+ const radiusMap: Record<string, number> = {};
19
+ Object.entries(radius).map(([key, value]) => {
20
+ radiusMap[`--${key}`] = value;
21
+ });
22
+
23
+ const sizeMap: Record<string, string> = {};
24
+ Object.entries(size).map(([key, value]) => {
25
+ sizeMap[`--${key}`] = value;
26
+ });
27
+
28
+ const opacityMap: Record<string, string> = {};
29
+ Object.entries(opacity).map(([key, value]) => {
30
+ opacityMap[`--${key}`] = value;
31
+ });
32
+
33
+ const paddingMap: Record<string, string> = {};
34
+ Object.entries(padding).map(([key, value]) => {
35
+ paddingMap[`--${key}`] = value;
36
+ });
37
+
38
+ const gapMap: Record<string, string> = {};
39
+ Object.entries(gap).map(([key, value]) => {
40
+ gapMap[`--${key}`] = value;
41
+ });
42
+
43
+ const iconSizeMap: Record<string, string> = {};
44
+ Object.entries(iconSize).map(([key, value]) => {
45
+ iconSizeMap[`--${key}`] = value;
46
+ });
47
+
48
+ let fontSize: Record<string, any> = {};
49
+
50
+ Object.entries(font.size).map(([key, value]) => {
51
+ fontSize[`--${key}`] = `${value}px`;
52
+ });
53
+
54
+ let lineHeight: Record<string, any> = {};
55
+
56
+ Object.entries(font.lineHeight).map(([key, value]) => {
57
+ lineHeight[`--${key}`] = value;
58
+ });
59
+
60
+ let weight: Record<string, any> = {};
61
+
62
+ Object.entries(font.weight).map(([key, value]) => {
63
+ lineHeight[`--${key}`] = value;
64
+ });
65
+
66
+ let defaultLang = '';
67
+
68
+ Object.entries(typography).map(([key, value]) => {
69
+ defaultLang += `.${key} { font-family: ${convertFontFamily(value.family)};
70
+ font-size: var(--${value.size});
71
+ font-weight: var(--${value.weight});
72
+ line-height: var(--${value.lineHeight});}`;
73
+ });
74
+
75
+ export const primitiveRoot = `
76
+ :root{
77
+ ${convertObjectToCSSVariables(primitiveColor)}
78
+
79
+ ${convertObjectToCSSVariables(radiusMap)}
80
+
81
+ ${convertObjectToCSSVariables(sizeMap)}
82
+
83
+ ${convertObjectToCSSVariables(opacityMap)}
84
+
85
+ ${convertObjectToCSSVariables(paddingMap)}
86
+
87
+ ${convertObjectToCSSVariables(gapMap)}
88
+
89
+ ${convertObjectToCSSVariables(fontSize)}
90
+
91
+ ${convertObjectToCSSVariables(lineHeight)}
92
+
93
+ ${convertObjectToCSSVariables(weight)}
94
+
95
+ ${convertObjectToCSSVariables(iconSizeMap)}
96
+
97
+ ${defaultLang}
98
+ }
99
+
100
+ `;
package/src/scripts/create-css/constants/radius/index.ts ADDED
@@ -0,0 +1,12 @@
1
+ import { ISize } from '../size/type';
2
+ import { IRadius } from './type';
3
+
4
+ export const radius: IRadius = {
5
+ 'lp-sys-radius-xxs': ISize['lp-pri-size-2'],
6
+ 'lp-sys-radius-xs': ISize['lp-pri-size-4'],
7
+ 'lp-sys-radius-s': ISize['lp-pri-size-6'],
8
+ 'lp-sys-radius-m': ISize['lp-pri-size-8'],
9
+ 'lp-sys-radius-l': ISize['lp-pri-size-10'],
10
+ 'lp-sys-radius-xl': ISize['lp-pri-size-12'],
11
+ 'lp-sys-radius-xxl': ISize['lp-pri-size-200'],
12
+ } as const;
package/src/scripts/create-css/constants/radius/type.ts ADDED
@@ -0,0 +1,10 @@
1
+ import { ISize } from '../../create-css/constants/size/type';
2
+ export interface IRadius {
3
+ 'lp-sys-radius-xxs': (typeof ISize)['lp-pri-size-2'];
4
+ 'lp-sys-radius-xs': (typeof ISize)['lp-pri-size-4'];
5
+ 'lp-sys-radius-s': (typeof ISize)['lp-pri-size-6'];
6
+ 'lp-sys-radius-m': (typeof ISize)['lp-pri-size-8'];
7
+ 'lp-sys-radius-l': (typeof ISize)['lp-pri-size-10'];
8
+ 'lp-sys-radius-xl': (typeof ISize)['lp-pri-size-12'];
9
+ 'lp-sys-radius-xxl': (typeof ISize)['lp-pri-size-200'];
10
+ }