lapikit 0.0.0-insiders.4b1dc48 → 0.0.0-insiders.982bc5a
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/server/modules/config.d.ts +85 -0
- package/dist/server/modules/config.js +4 -0
- package/dist/server/modules/css.js +3 -0
- package/dist/server/modules/devices.d.ts +1 -0
- package/dist/server/modules/devices.js +43 -0
- package/dist/server/preset.d.ts +85 -0
- package/dist/server/preset.js +52 -0
- package/dist/server/vite.js +4 -2
- package/package.json +9 -4
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
export declare const parseConfig: () => {
|
|
2
|
+
options: {
|
|
3
|
+
normalize: boolean;
|
|
4
|
+
minify: boolean;
|
|
5
|
+
};
|
|
6
|
+
theme: {
|
|
7
|
+
colorScheme: string;
|
|
8
|
+
colors: {
|
|
9
|
+
primary: {
|
|
10
|
+
light: string;
|
|
11
|
+
dark: string;
|
|
12
|
+
};
|
|
13
|
+
secondary: {
|
|
14
|
+
light: string;
|
|
15
|
+
dark: string;
|
|
16
|
+
};
|
|
17
|
+
tertiary: {
|
|
18
|
+
light: string;
|
|
19
|
+
dark: string;
|
|
20
|
+
};
|
|
21
|
+
neutral: {
|
|
22
|
+
light: string;
|
|
23
|
+
dark: string;
|
|
24
|
+
};
|
|
25
|
+
info: {
|
|
26
|
+
light: string;
|
|
27
|
+
dark: string;
|
|
28
|
+
};
|
|
29
|
+
success: {
|
|
30
|
+
light: string;
|
|
31
|
+
dark: string;
|
|
32
|
+
};
|
|
33
|
+
warning: {
|
|
34
|
+
light: string;
|
|
35
|
+
dark: string;
|
|
36
|
+
};
|
|
37
|
+
error: {
|
|
38
|
+
light: string;
|
|
39
|
+
dark: string;
|
|
40
|
+
};
|
|
41
|
+
base: {
|
|
42
|
+
light: string;
|
|
43
|
+
dark: string;
|
|
44
|
+
};
|
|
45
|
+
surface: {
|
|
46
|
+
light: string;
|
|
47
|
+
dark: string;
|
|
48
|
+
};
|
|
49
|
+
container: {
|
|
50
|
+
light: string;
|
|
51
|
+
dark: string;
|
|
52
|
+
};
|
|
53
|
+
shadow: string;
|
|
54
|
+
};
|
|
55
|
+
};
|
|
56
|
+
breakpoints: {
|
|
57
|
+
mobileBreakpoint: string;
|
|
58
|
+
tabletBreakpoint: string;
|
|
59
|
+
laptopBreakpoint: string;
|
|
60
|
+
thresholds: {
|
|
61
|
+
none: number;
|
|
62
|
+
xs: string;
|
|
63
|
+
sm: string;
|
|
64
|
+
md: string;
|
|
65
|
+
lg: string;
|
|
66
|
+
xl: string;
|
|
67
|
+
'2xl': string;
|
|
68
|
+
'3xl': string;
|
|
69
|
+
};
|
|
70
|
+
};
|
|
71
|
+
styles: {
|
|
72
|
+
corner: {
|
|
73
|
+
active: boolean;
|
|
74
|
+
radius: {
|
|
75
|
+
sm: string;
|
|
76
|
+
md: string;
|
|
77
|
+
lg: string;
|
|
78
|
+
xl: string;
|
|
79
|
+
'2xl': string;
|
|
80
|
+
'3xl': string;
|
|
81
|
+
full: string;
|
|
82
|
+
};
|
|
83
|
+
};
|
|
84
|
+
};
|
|
85
|
+
};
|
|
@@ -6,6 +6,7 @@ import path from 'path';
|
|
|
6
6
|
import { ansi, sendConsole } from './ansi.js';
|
|
7
7
|
import { minify } from './minify.js';
|
|
8
8
|
import { colors } from './themes.js';
|
|
9
|
+
import { devices } from './devices.js';
|
|
9
10
|
const __filename = fileURLToPath(import.meta.url);
|
|
10
11
|
const __dirname = dirname(__filename);
|
|
11
12
|
const __components = path.resolve('src/components');
|
|
@@ -24,8 +25,10 @@ export const processCSS = async (minified, normalize) => {
|
|
|
24
25
|
if (normalize)
|
|
25
26
|
styles += `${_normalize}\n`;
|
|
26
27
|
const colorScheme = colors();
|
|
28
|
+
const deviceDisplay = devices();
|
|
27
29
|
styles += `${colorScheme.root}\n`;
|
|
28
30
|
styles += `${colorScheme.className}\n`;
|
|
31
|
+
styles += `${deviceDisplay}\n`;
|
|
29
32
|
if (fs.existsSync(__components) && fs.statSync(__components).isDirectory()) {
|
|
30
33
|
const tresholds = {
|
|
31
34
|
_default: '',
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const devices: () => string;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
const breakpoints = {
|
|
2
|
+
mobileBreakpoint: 'sm',
|
|
3
|
+
tabletBreakpoint: 'md',
|
|
4
|
+
laptopBreakpoint: 'xl',
|
|
5
|
+
thresholds: {
|
|
6
|
+
none: 0, // 0px
|
|
7
|
+
xs: '28rem', //448px
|
|
8
|
+
sm: '40rem', //640px
|
|
9
|
+
md: '48rem', //768px
|
|
10
|
+
lg: '64rem', //1024px
|
|
11
|
+
xl: '80rem', //1280px
|
|
12
|
+
'2xl': '96rem', //1536px
|
|
13
|
+
'3xl': '112rem' //1792px
|
|
14
|
+
}
|
|
15
|
+
};
|
|
16
|
+
export const devices = () => {
|
|
17
|
+
let css = ``;
|
|
18
|
+
const list = {
|
|
19
|
+
mobile: breakpoints.mobileBreakpoint,
|
|
20
|
+
tablet: breakpoints.tabletBreakpoint,
|
|
21
|
+
laptop: breakpoints.laptopBreakpoint
|
|
22
|
+
};
|
|
23
|
+
for (const [key, value] of Object.entries(list)) {
|
|
24
|
+
const breakpointValue = breakpoints.thresholds[value];
|
|
25
|
+
const breakpointValueMax = key !== 'laptop'
|
|
26
|
+
? breakpoints.thresholds[key === 'mobile' ? list.tablet : key == 'tablet' ? list.laptop : '']
|
|
27
|
+
: undefined;
|
|
28
|
+
css += `.device-${key}, .only-on-${key} {\n`;
|
|
29
|
+
css += `display: none;\n`;
|
|
30
|
+
css += `}\n`;
|
|
31
|
+
css += `@media screen and (min-width: ${typeof breakpointValue === 'number' ? breakpointValue + 'px' : breakpointValue}) {\n`;
|
|
32
|
+
css += `.device-${key} {\n`;
|
|
33
|
+
css += `display: inherit !important;\n`;
|
|
34
|
+
css += `}\n`;
|
|
35
|
+
css += `}\n`;
|
|
36
|
+
css += `@media screen and (min-width: ${typeof breakpointValue === 'number' ? breakpointValue + 'px' : breakpointValue}) ${breakpointValueMax ? `and (max-width: ${typeof breakpointValueMax === 'number' ? breakpointValueMax + 'px' : breakpointValueMax})` : ''}{\n`;
|
|
37
|
+
css += `.only-on-${key} {\n`;
|
|
38
|
+
css += `display: inherit !important;\n`;
|
|
39
|
+
css += `}\n`;
|
|
40
|
+
css += `}\n`;
|
|
41
|
+
}
|
|
42
|
+
return css;
|
|
43
|
+
};
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
export declare const config: {
|
|
2
|
+
options: {
|
|
3
|
+
normalize: boolean;
|
|
4
|
+
minify: boolean;
|
|
5
|
+
};
|
|
6
|
+
theme: {
|
|
7
|
+
colorScheme: string;
|
|
8
|
+
colors: {
|
|
9
|
+
primary: {
|
|
10
|
+
light: string;
|
|
11
|
+
dark: string;
|
|
12
|
+
};
|
|
13
|
+
secondary: {
|
|
14
|
+
light: string;
|
|
15
|
+
dark: string;
|
|
16
|
+
};
|
|
17
|
+
tertiary: {
|
|
18
|
+
light: string;
|
|
19
|
+
dark: string;
|
|
20
|
+
};
|
|
21
|
+
neutral: {
|
|
22
|
+
light: string;
|
|
23
|
+
dark: string;
|
|
24
|
+
};
|
|
25
|
+
info: {
|
|
26
|
+
light: string;
|
|
27
|
+
dark: string;
|
|
28
|
+
};
|
|
29
|
+
success: {
|
|
30
|
+
light: string;
|
|
31
|
+
dark: string;
|
|
32
|
+
};
|
|
33
|
+
warning: {
|
|
34
|
+
light: string;
|
|
35
|
+
dark: string;
|
|
36
|
+
};
|
|
37
|
+
error: {
|
|
38
|
+
light: string;
|
|
39
|
+
dark: string;
|
|
40
|
+
};
|
|
41
|
+
base: {
|
|
42
|
+
light: string;
|
|
43
|
+
dark: string;
|
|
44
|
+
};
|
|
45
|
+
surface: {
|
|
46
|
+
light: string;
|
|
47
|
+
dark: string;
|
|
48
|
+
};
|
|
49
|
+
container: {
|
|
50
|
+
light: string;
|
|
51
|
+
dark: string;
|
|
52
|
+
};
|
|
53
|
+
shadow: string;
|
|
54
|
+
};
|
|
55
|
+
};
|
|
56
|
+
breakpoints: {
|
|
57
|
+
mobileBreakpoint: string;
|
|
58
|
+
tabletBreakpoint: string;
|
|
59
|
+
laptopBreakpoint: string;
|
|
60
|
+
thresholds: {
|
|
61
|
+
none: number;
|
|
62
|
+
xs: string;
|
|
63
|
+
sm: string;
|
|
64
|
+
md: string;
|
|
65
|
+
lg: string;
|
|
66
|
+
xl: string;
|
|
67
|
+
'2xl': string;
|
|
68
|
+
'3xl': string;
|
|
69
|
+
};
|
|
70
|
+
};
|
|
71
|
+
styles: {
|
|
72
|
+
corner: {
|
|
73
|
+
active: boolean;
|
|
74
|
+
radius: {
|
|
75
|
+
sm: string;
|
|
76
|
+
md: string;
|
|
77
|
+
lg: string;
|
|
78
|
+
xl: string;
|
|
79
|
+
'2xl': string;
|
|
80
|
+
'3xl': string;
|
|
81
|
+
full: string;
|
|
82
|
+
};
|
|
83
|
+
};
|
|
84
|
+
};
|
|
85
|
+
};
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
export const config = {
|
|
2
|
+
options: {
|
|
3
|
+
normalize: true, // true | false
|
|
4
|
+
minify: true // true | false
|
|
5
|
+
},
|
|
6
|
+
theme: {
|
|
7
|
+
colorScheme: 'dark', // 'light' | 'dark' | 'auto'
|
|
8
|
+
colors: {
|
|
9
|
+
primary: { light: 'oklch(45% 0.24 277.023)', dark: 'oklch(45% 0.24 277.023)' },
|
|
10
|
+
secondary: { light: 'oklch(65% 0.241 354.308)', dark: 'oklch(65% 0.241 354.308)' },
|
|
11
|
+
tertiary: { light: 'oklch(77% 0.152 181.912)', dark: 'oklch(77% 0.152 181.912)' },
|
|
12
|
+
neutral: { light: 'oklch(14% 0.005 285.823)', dark: 'oklch(14% 0.005 285.823)' },
|
|
13
|
+
info: { light: 'oklch(74% 0.16 232.661)', dark: 'oklch(74% 0.16 232.661)' },
|
|
14
|
+
success: { light: 'oklch(76% 0.177 163.223)', dark: 'oklch(76% 0.177 163.223)' },
|
|
15
|
+
warning: { light: 'oklch(82% 0.189 84.429)', dark: 'oklch(82% 0.189 84.429)' },
|
|
16
|
+
error: { light: 'oklch(71% 0.194 13.428)', dark: 'oklch(71% 0.194 13.428)' },
|
|
17
|
+
base: { light: 'oklch(100% 0 0)', dark: 'oklch(25.33% 0.016 252.42)' },
|
|
18
|
+
surface: { light: 'oklch(98% 0 0)', dark: 'oklch(23.26% 0.014 253.1)' },
|
|
19
|
+
container: { light: 'oklch(95% 0 0)', dark: 'oklch(21.15% 0.012 254.09)' },
|
|
20
|
+
shadow: 'black'
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
breakpoints: {
|
|
24
|
+
mobileBreakpoint: 'sm',
|
|
25
|
+
tabletBreakpoint: 'md',
|
|
26
|
+
laptopBreakpoint: 'xl',
|
|
27
|
+
thresholds: {
|
|
28
|
+
none: 0, // 0px
|
|
29
|
+
xs: '28rem', //448px
|
|
30
|
+
sm: '40rem', //640px
|
|
31
|
+
md: '48rem', //768px
|
|
32
|
+
lg: '64rem', //1024px
|
|
33
|
+
xl: '80rem', //1280px
|
|
34
|
+
'2xl': '96rem', //1536px
|
|
35
|
+
'3xl': '112rem' //1792px
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
styles: {
|
|
39
|
+
corner: {
|
|
40
|
+
active: true, // true | false
|
|
41
|
+
radius: {
|
|
42
|
+
sm: '0.125rem', // 2px
|
|
43
|
+
md: '0.25rem', // 4px
|
|
44
|
+
lg: '0.5rem', // 8px
|
|
45
|
+
xl: '0.75rem', // 12px
|
|
46
|
+
'2xl': '1rem', // 16px
|
|
47
|
+
'3xl': '1.5rem', // 24px
|
|
48
|
+
full: '9999px' // 9999px
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
};
|
package/dist/server/vite.js
CHANGED
|
@@ -1,17 +1,19 @@
|
|
|
1
1
|
import { ansi } from './modules/ansi.js';
|
|
2
2
|
import { importer } from './modules/importer.js';
|
|
3
3
|
import { processCSS } from './modules/css.js';
|
|
4
|
+
import { parseConfig } from './modules/config.js';
|
|
4
5
|
export async function lapikit(options = {}) {
|
|
5
6
|
return {
|
|
6
7
|
name: 'lapikit/vite.js',
|
|
7
8
|
async configResolved() {
|
|
8
9
|
console.log(ansi.bold.blue('Vite plugin loaded'), options);
|
|
9
10
|
const config = await importer();
|
|
11
|
+
const result = await parseConfig();
|
|
10
12
|
await processCSS(options.minify, options.normalize);
|
|
11
|
-
|
|
13
|
+
console.log('config', config, result);
|
|
12
14
|
},
|
|
13
15
|
async configureServer(server) {
|
|
14
|
-
|
|
16
|
+
console.log(ansi.inverse.red('Vite server configured'), server);
|
|
15
17
|
}
|
|
16
18
|
};
|
|
17
19
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "lapikit",
|
|
3
|
-
"version": "0.0.0-insiders.
|
|
3
|
+
"version": "0.0.0-insiders.982bc5a",
|
|
4
|
+
"publishConfig": {
|
|
5
|
+
"access": "public"
|
|
6
|
+
},
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "git+https://github.com/Nycolaide/lapikit.git",
|
|
10
|
+
"directory": "packages/lapikit"
|
|
11
|
+
},
|
|
4
12
|
"scripts": {
|
|
5
13
|
"dev": "vite dev",
|
|
6
14
|
"build": "vite build && npm run prepack",
|
|
@@ -14,9 +22,6 @@
|
|
|
14
22
|
"test:unit": "vitest",
|
|
15
23
|
"test": "npm run test:unit -- --run"
|
|
16
24
|
},
|
|
17
|
-
"publishConfig": {
|
|
18
|
-
"access": "public"
|
|
19
|
-
},
|
|
20
25
|
"files": [
|
|
21
26
|
"dist",
|
|
22
27
|
"!dist/**/*.test.*",
|