lapikit 0.0.0-insiders.f8b6426 → 0.0.0-insiders.fb12c48
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/bin/configuration.js +303 -0
- package/bin/helper.js +0 -38
- package/bin/index.js +33 -0
- package/bin/presets.js +26 -0
- package/bin/prompts.js +67 -0
- package/dist/actions/accordion.svelte.d.ts +9 -0
- package/dist/actions/index.d.ts +2 -1
- package/dist/actions/index.js +2 -1
- package/dist/actions/use-theme.d.ts +1 -0
- package/dist/actions/use-theme.js +18 -0
- package/dist/components/accordion/accordion.css +0 -77
- package/dist/components/accordion/accordion.svelte +5 -3
- package/dist/components/accordion/modules/accordion-item.css +68 -0
- package/dist/components/accordion/modules/accordion-item.svelte +4 -4
- package/dist/components/accordion/types.d.ts +1 -1
- package/dist/components/alert/alert.css +11 -18
- package/dist/components/alert/alert.svelte +4 -4
- package/dist/components/alert/types.d.ts +1 -1
- package/dist/components/app/app.css +1 -2
- package/dist/components/app/app.svelte +39 -21
- package/dist/components/app/app.svelte.d.ts +2 -0
- package/dist/components/appbar/appbar.css +8 -18
- package/dist/components/appbar/appbar.svelte +4 -4
- package/dist/components/appbar/types.d.ts +1 -1
- package/dist/components/aspect-ratio/aspect-ratio.svelte +0 -22
- package/dist/components/aspect-ratio/types.d.ts +1 -1
- package/dist/components/avatar/avatar.css +7 -14
- package/dist/components/avatar/avatar.svelte +4 -4
- package/dist/components/avatar/types.d.ts +1 -1
- package/dist/components/button/button.css +29 -36
- package/dist/components/button/button.svelte +5 -5
- package/dist/components/button/types.d.ts +1 -1
- package/dist/components/card/card.css +10 -20
- package/dist/components/card/card.svelte +9 -5
- package/dist/components/card/types.d.ts +3 -1
- package/dist/components/chip/chip.css +30 -37
- package/dist/components/chip/chip.svelte +10 -8
- package/dist/components/chip/types.d.ts +2 -1
- package/dist/components/dialog/dialog.css +15 -20
- package/dist/components/dialog/dialog.svelte +5 -5
- package/dist/components/dialog/types.d.ts +1 -1
- package/dist/components/dropdown/dropdown.css +3 -12
- package/dist/components/dropdown/dropdown.svelte +6 -7
- package/dist/components/dropdown/types.d.ts +1 -1
- package/dist/components/icon/icon.css +11 -12
- package/dist/components/icon/icon.svelte +2 -2
- package/dist/components/icon/types.d.ts +1 -1
- package/dist/components/list/list.css +19 -91
- package/dist/components/list/list.svelte +4 -4
- package/dist/components/list/modules/list-item.css +67 -0
- package/dist/components/list/modules/list-item.svelte +5 -5
- package/dist/components/list/types.d.ts +1 -1
- package/dist/components/modal/modal.css +22 -29
- package/dist/components/modal/modal.svelte +4 -5
- package/dist/components/modal/types.d.ts +1 -1
- package/dist/components/popover/popover.css +3 -12
- package/dist/components/popover/popover.svelte +6 -6
- package/dist/components/popover/types.d.ts +1 -1
- package/dist/components/separator/separator.css +4 -8
- package/dist/components/separator/separator.svelte +5 -5
- package/dist/components/separator/types.d.ts +1 -1
- package/dist/components/spacer/types.d.ts +1 -1
- package/dist/components/textfield/textfield.css +16 -23
- package/dist/components/textfield/textfield.svelte +4 -4
- package/dist/components/textfield/types.d.ts +1 -1
- package/dist/components/toolbar/toolbar.css +11 -34
- package/dist/components/toolbar/toolbar.svelte +4 -4
- package/dist/components/toolbar/types.d.ts +1 -1
- package/dist/components/tooltip/tooltip.css +5 -13
- package/dist/components/tooltip/tooltip.svelte +5 -5
- package/dist/components/tooltip/types.d.ts +1 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +23 -3
- package/dist/internal/config/presets.d.ts +149 -0
- package/dist/internal/config/presets.js +169 -0
- package/dist/internal/config/variables.d.ts +3 -0
- package/dist/internal/config/variables.js +3 -0
- package/dist/internal/{assets.svelte.js → core/actions/assets.svelte.js} +4 -4
- package/dist/internal/core/actions/dropdown.svelte.d.ts +7 -0
- package/dist/internal/core/actions/popover.svelte.d.ts +7 -0
- package/dist/internal/core/actions/tooltip.svelte.d.ts +7 -0
- package/dist/internal/{ripple.js → core/animations/ripple.js} +3 -3
- package/dist/internal/core/css.d.ts +1 -0
- package/dist/internal/core/css.js +16 -0
- package/dist/internal/core/formatter/component.d.ts +5 -0
- package/dist/internal/core/formatter/component.js +60 -0
- package/dist/internal/core/formatter/device.d.ts +5 -0
- package/dist/internal/core/formatter/device.js +66 -0
- package/dist/internal/core/formatter/index.d.ts +7 -0
- package/dist/internal/core/formatter/index.js +35 -0
- package/dist/internal/core/formatter/style.d.ts +4 -0
- package/dist/internal/core/formatter/style.js +15 -0
- package/dist/internal/core/formatter/theme.d.ts +5 -0
- package/dist/internal/core/formatter/theme.js +44 -0
- package/dist/internal/core/formatter/typography.d.ts +5 -0
- package/dist/internal/core/formatter/typography.js +12 -0
- package/dist/internal/core/standard-colors.d.ts +75 -0
- package/dist/internal/core/standard-colors.js +75 -0
- package/dist/internal/helpers/colors.d.ts +1 -0
- package/dist/internal/{colors.js → helpers/colors.js} +2 -2
- package/dist/internal/helpers/convert.d.ts +1 -0
- package/dist/internal/helpers/convert.js +17 -0
- package/dist/internal/helpers/deep-merge.d.ts +44 -0
- package/dist/internal/helpers/deep-merge.js +80 -0
- package/dist/internal/helpers/parser.d.ts +10 -0
- package/dist/internal/helpers/parser.js +93 -0
- package/dist/internal/plugins/vite.d.ts +8 -0
- package/dist/internal/plugins/vite.js +33 -0
- package/dist/internal/types/components.d.ts +14 -0
- package/dist/internal/types/configuration.d.ts +63 -0
- package/dist/internal/types/configuration.js +1 -0
- package/dist/internal/types/index.d.ts +2 -0
- package/dist/internal/types/index.js +2 -0
- package/dist/stores/breakpoints.d.ts +6 -0
- package/dist/stores/breakpoints.js +14 -0
- package/dist/stores/components.d.ts +8 -0
- package/dist/stores/components.js +26 -0
- package/dist/stores/devices.d.ts +6 -0
- package/dist/stores/devices.js +9 -0
- package/dist/stores/index.d.ts +5 -10
- package/dist/stores/index.js +5 -47
- package/dist/stores/themes.d.ts +2 -0
- package/dist/stores/themes.js +4 -0
- package/dist/stores/viewport.d.ts +7 -0
- package/dist/stores/viewport.js +7 -0
- package/dist/styles/animation.css +33 -0
- package/dist/styles/keyframes.css +30 -0
- package/dist/{style/normalize.css → styles/reset.css} +15 -7
- package/dist/themes.css +0 -0
- package/package.json +12 -5
- package/bin/lapikit.js +0 -79
- package/bin/modules/adapter.js +0 -52
- package/bin/modules/plugin.js +0 -66
- package/bin/modules/preset.js +0 -11
- package/dist/internal/colors.d.ts +0 -1
- package/dist/internal/index.d.ts +0 -4
- package/dist/internal/index.js +0 -4
- package/dist/internal/types.d.ts +0 -57
- package/dist/internal/unit.d.ts +0 -1
- package/dist/internal/unit.js +0 -11
- package/dist/plugin/modules/config.d.ts +0 -2
- package/dist/plugin/modules/config.js +0 -54
- package/dist/plugin/modules/importer.d.ts +0 -1
- package/dist/plugin/modules/importer.js +0 -15
- package/dist/plugin/vitejs.d.ts +0 -6
- package/dist/plugin/vitejs.js +0 -26
- package/dist/preset.d.ts +0 -2
- package/dist/preset.js +0 -92
- package/dist/style/animation.css +0 -62
- package/dist/style/css.d.ts +0 -2
- package/dist/style/css.js +0 -34
- package/dist/style/parser/color.d.ts +0 -5
- package/dist/style/parser/color.js +0 -88
- package/dist/style/parser/component.d.ts +0 -2
- package/dist/style/parser/component.js +0 -115
- package/dist/style/parser/device.d.ts +0 -2
- package/dist/style/parser/device.js +0 -40
- package/dist/style/parser/index.d.ts +0 -4
- package/dist/style/parser/index.js +0 -4
- package/dist/style/parser/variable.d.ts +0 -2
- package/dist/style/parser/variable.js +0 -25
- package/dist/style/variable.css +0 -12
- /package/dist/{components/accordion → actions}/accordion.svelte.js +0 -0
- /package/dist/internal/{assets.svelte.d.ts → core/actions/assets.svelte.d.ts} +0 -0
- /package/dist/{components/dropdown → internal/core/actions}/dropdown.svelte.js +0 -0
- /package/dist/{components/popover → internal/core/actions}/popover.svelte.js +0 -0
- /package/dist/{components/tooltip → internal/core/actions}/tooltip.svelte.js +0 -0
- /package/dist/internal/{ripple.d.ts → core/animations/ripple.d.ts} +0 -0
- /package/dist/internal/{ansi.d.ts → core/bin/ansi.d.ts} +0 -0
- /package/dist/internal/{ansi.js → core/bin/ansi.js} +0 -0
- /package/dist/internal/{terminal.d.ts → core/bin/terminal.d.ts} +0 -0
- /package/dist/internal/{terminal.js → core/bin/terminal.js} +0 -0
- /package/dist/internal/{minify.d.ts → core/minify.d.ts} +0 -0
- /package/dist/internal/{minify.js → core/minify.js} +0 -0
- /package/dist/{utils/x11.d.ts → internal/core/x11-colors.d.ts} +0 -0
- /package/dist/{utils/x11.js → internal/core/x11-colors.js} +0 -0
- /package/dist/internal/{clickOutside.d.ts → helpers/outside.d.ts} +0 -0
- /package/dist/internal/{clickOutside.js → helpers/outside.js} +0 -0
- /package/dist/internal/{scroll.d.ts → helpers/scroll.d.ts} +0 -0
- /package/dist/internal/{scroll.js → helpers/scroll.js} +0 -0
- /package/dist/internal/{types.js → types/components.js} +0 -0
package/bin/modules/adapter.js
DELETED
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import { promises as fs } from 'fs';
|
|
2
|
-
import path from 'path';
|
|
3
|
-
import { getCssPathFromArgs, terminal } from '../helper.js';
|
|
4
|
-
|
|
5
|
-
const importLapikitVite = `import { lapikit } from 'lapikit/vite';`;
|
|
6
|
-
const importLapikitCss = `@import 'lapikit/css';`;
|
|
7
|
-
|
|
8
|
-
export async function adapterViteConfig(typescript) {
|
|
9
|
-
const viteConfigPath = path.resolve(process.cwd(), `vite.config.${typescript ? 'ts' : 'js'}`);
|
|
10
|
-
try {
|
|
11
|
-
let viteConfig = await fs.readFile(viteConfigPath, 'utf8');
|
|
12
|
-
|
|
13
|
-
if (!viteConfig.includes(`${importLapikitVite}`))
|
|
14
|
-
viteConfig = `${importLapikitVite}\n` + viteConfig;
|
|
15
|
-
|
|
16
|
-
const pluginsRegex = /plugins:\s*\[([^\]]*)\]/;
|
|
17
|
-
const match = viteConfig.match(pluginsRegex);
|
|
18
|
-
|
|
19
|
-
if (match && !match[1].includes('lapikit()')) {
|
|
20
|
-
const updatedPlugins = match[1].trim() ? `${match[1].trim()}, lapikit()` : `lapikit()`;
|
|
21
|
-
|
|
22
|
-
viteConfig = viteConfig.replace(pluginsRegex, `plugins: [${updatedPlugins}]`);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
await fs.writeFile(viteConfigPath, viteConfig, 'utf8');
|
|
26
|
-
|
|
27
|
-
terminal('success', 'lapikit() has added on vite.config.(js|ts) successfully');
|
|
28
|
-
} catch (error) {
|
|
29
|
-
terminal(
|
|
30
|
-
'error',
|
|
31
|
-
`lapikit() encountered a problem while editing vite.config.(js|ts):\n ${error}.\n\n`
|
|
32
|
-
);
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
export async function adapterCSSConfig() {
|
|
37
|
-
const cssPath = getCssPathFromArgs();
|
|
38
|
-
const resolvedPath = path.resolve(process.cwd(), cssPath);
|
|
39
|
-
try {
|
|
40
|
-
await fs.access(resolvedPath);
|
|
41
|
-
let appCssContent = await fs.readFile(resolvedPath, 'utf8');
|
|
42
|
-
appCssContent = `${importLapikitCss}\n\n` + appCssContent;
|
|
43
|
-
await fs.writeFile(resolvedPath, appCssContent, 'utf8');
|
|
44
|
-
|
|
45
|
-
terminal('success', `lapikit/css has added on ${cssPath}.`);
|
|
46
|
-
} catch (error) {
|
|
47
|
-
terminal(
|
|
48
|
-
'error',
|
|
49
|
-
`lapikit/css encountered a problem while editing ${cssPath}:\n ${error.message}.\n\n`
|
|
50
|
-
);
|
|
51
|
-
}
|
|
52
|
-
}
|
package/bin/modules/plugin.js
DELETED
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
import { promises as fs } from 'fs';
|
|
2
|
-
import path from 'path';
|
|
3
|
-
import { terminal } from '../helper.js';
|
|
4
|
-
|
|
5
|
-
const lapikitTsTemplate = `import type { Config } from 'lapikit';
|
|
6
|
-
|
|
7
|
-
/**
|
|
8
|
-
* Custom configuration for Lapikit
|
|
9
|
-
* @see https://lapikit.dev/docs/customize
|
|
10
|
-
*/
|
|
11
|
-
const config: Config = {
|
|
12
|
-
theme: {
|
|
13
|
-
colorScheme: 'light',
|
|
14
|
-
colors: {
|
|
15
|
-
primary: '#3b82f6',
|
|
16
|
-
secondary: '#6b7280'
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
export default config;
|
|
22
|
-
`;
|
|
23
|
-
|
|
24
|
-
const lapikitJsTemplate = `/**
|
|
25
|
-
* Custom configuration for Lapikit
|
|
26
|
-
* @see https://lapikit.dev/docs/customize
|
|
27
|
-
* @type {import('lapikit').Config}
|
|
28
|
-
*/
|
|
29
|
-
const config = {
|
|
30
|
-
theme: {
|
|
31
|
-
colorScheme: 'light',
|
|
32
|
-
colors: {
|
|
33
|
-
primary: '#3b82f6',
|
|
34
|
-
secondary: '#6b7280'
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
export default config;
|
|
40
|
-
`;
|
|
41
|
-
|
|
42
|
-
export async function createPluginStructure(pluginPath, isTypescript) {
|
|
43
|
-
const resolvedPluginPath = path.resolve(process.cwd(), pluginPath);
|
|
44
|
-
const lapikitFileName = isTypescript ? 'lapikit.ts' : 'lapikit.js';
|
|
45
|
-
const lapikitFilePath = path.join(resolvedPluginPath, lapikitFileName);
|
|
46
|
-
|
|
47
|
-
try {
|
|
48
|
-
// Verify plugin directory
|
|
49
|
-
try {
|
|
50
|
-
await fs.access(resolvedPluginPath);
|
|
51
|
-
terminal('info', `Le dossier ${pluginPath} existe déjà.`);
|
|
52
|
-
} catch {
|
|
53
|
-
await fs.mkdir(resolvedPluginPath, { recursive: true });
|
|
54
|
-
terminal('success', `Dossier ${pluginPath} créé avec succès.`);
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
// Create lapikit.ts or lapikit.js
|
|
58
|
-
const template = isTypescript ? lapikitTsTemplate : lapikitJsTemplate;
|
|
59
|
-
await fs.writeFile(lapikitFilePath, template.trim() + '\n', 'utf8');
|
|
60
|
-
|
|
61
|
-
terminal('success', `File ${lapikitFileName} created in ${pluginPath}.`);
|
|
62
|
-
} catch (error) {
|
|
63
|
-
terminal('error', `Error creating plugin structure: ${error.message}`);
|
|
64
|
-
throw error;
|
|
65
|
-
}
|
|
66
|
-
}
|
package/bin/modules/preset.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const parseColor: (input: string) => string;
|
package/dist/internal/index.d.ts
DELETED
package/dist/internal/index.js
DELETED
package/dist/internal/types.d.ts
DELETED
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
import type { Snippet } from 'svelte';
|
|
2
|
-
type IdElementType = string | undefined;
|
|
3
|
-
type ClassNameType = string | string[] | undefined;
|
|
4
|
-
type StylePropertiesType = string | undefined;
|
|
5
|
-
export interface Base {
|
|
6
|
-
id?: IdElementType;
|
|
7
|
-
class?: ClassNameType;
|
|
8
|
-
style?: StylePropertiesType;
|
|
9
|
-
[key: string]: any;
|
|
10
|
-
}
|
|
11
|
-
export interface Component extends Base {
|
|
12
|
-
children?: Snippet;
|
|
13
|
-
}
|
|
14
|
-
export type FontFamily = {
|
|
15
|
-
[key: string]: string | string[];
|
|
16
|
-
};
|
|
17
|
-
export type Colors = {
|
|
18
|
-
[key: string]: {
|
|
19
|
-
light: string;
|
|
20
|
-
dark: string;
|
|
21
|
-
} | string;
|
|
22
|
-
};
|
|
23
|
-
export type Thresholds = {
|
|
24
|
-
[key: string]: number | string;
|
|
25
|
-
};
|
|
26
|
-
export type Radius = {
|
|
27
|
-
[key: string]: number | string;
|
|
28
|
-
};
|
|
29
|
-
export interface Lapikit {
|
|
30
|
-
options: {
|
|
31
|
-
normalize: boolean;
|
|
32
|
-
minify: boolean;
|
|
33
|
-
};
|
|
34
|
-
theme: {
|
|
35
|
-
colorScheme: string;
|
|
36
|
-
colors: Colors;
|
|
37
|
-
};
|
|
38
|
-
breakpoints: {
|
|
39
|
-
mobileBreakpoint: string;
|
|
40
|
-
tabletBreakpoint: string;
|
|
41
|
-
laptopBreakpoint: string;
|
|
42
|
-
thresholds: Thresholds;
|
|
43
|
-
};
|
|
44
|
-
styles: {
|
|
45
|
-
spacing: string;
|
|
46
|
-
corner: {
|
|
47
|
-
active: boolean;
|
|
48
|
-
radius: Radius;
|
|
49
|
-
};
|
|
50
|
-
font: FontFamily;
|
|
51
|
-
};
|
|
52
|
-
}
|
|
53
|
-
type DeepOptional<T> = {
|
|
54
|
-
[P in keyof T]?: T[P] extends (infer U)[] ? DeepOptional<U>[] : T[P] extends object ? DeepOptional<T[P]> : T[P];
|
|
55
|
-
};
|
|
56
|
-
export type LapikitConfig = DeepOptional<Lapikit>;
|
|
57
|
-
export {};
|
package/dist/internal/unit.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const setUnit: (value: string | number) => string;
|
package/dist/internal/unit.js
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
export const setUnit = (value) => {
|
|
2
|
-
if (typeof value === 'number')
|
|
3
|
-
return `${value}px`;
|
|
4
|
-
if (typeof value === 'string') {
|
|
5
|
-
const cleaned = value.trim();
|
|
6
|
-
const isOnlyNumericLike = /^[\d.,]+$/.test(cleaned);
|
|
7
|
-
if (isOnlyNumericLike)
|
|
8
|
-
return `${value}px`;
|
|
9
|
-
}
|
|
10
|
-
return value;
|
|
11
|
-
};
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
import { config } from '../../preset.js';
|
|
2
|
-
export const parseConfig = (props) => {
|
|
3
|
-
if (!props)
|
|
4
|
-
return config;
|
|
5
|
-
const newConfig = { ...config };
|
|
6
|
-
if (props?.options) {
|
|
7
|
-
if (props.options.normalize !== undefined)
|
|
8
|
-
newConfig.options.normalize = props.options.normalize;
|
|
9
|
-
if (props.options.minify !== undefined)
|
|
10
|
-
newConfig.options.minify = props.options.minify;
|
|
11
|
-
}
|
|
12
|
-
if (props?.theme) {
|
|
13
|
-
if (props.theme.colorScheme !== undefined)
|
|
14
|
-
newConfig.theme.colorScheme = props.theme.colorScheme;
|
|
15
|
-
if (props.theme.colors) {
|
|
16
|
-
newConfig.theme.colors = {
|
|
17
|
-
...newConfig.theme.colors,
|
|
18
|
-
...props.theme.colors
|
|
19
|
-
};
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
if (props?.breakpoints) {
|
|
23
|
-
if (props.breakpoints.mobileBreakpoint !== undefined)
|
|
24
|
-
newConfig.breakpoints.mobileBreakpoint = props.breakpoints.mobileBreakpoint;
|
|
25
|
-
if (props.breakpoints.tabletBreakpoint !== undefined)
|
|
26
|
-
newConfig.breakpoints.tabletBreakpoint = props.breakpoints.tabletBreakpoint;
|
|
27
|
-
if (props.breakpoints.laptopBreakpoint !== undefined)
|
|
28
|
-
newConfig.breakpoints.laptopBreakpoint = props.breakpoints.laptopBreakpoint;
|
|
29
|
-
if (props.breakpoints.thresholds)
|
|
30
|
-
newConfig.breakpoints.thresholds = {
|
|
31
|
-
...newConfig.breakpoints.thresholds,
|
|
32
|
-
...props.breakpoints.thresholds
|
|
33
|
-
};
|
|
34
|
-
}
|
|
35
|
-
if (props?.styles) {
|
|
36
|
-
if (props.styles.spacing !== undefined)
|
|
37
|
-
newConfig.styles.spacing = props.styles.spacing;
|
|
38
|
-
if (props.styles.corner !== undefined) {
|
|
39
|
-
if (props.styles.corner.active !== undefined)
|
|
40
|
-
newConfig.styles.corner.active = props.styles.corner.active;
|
|
41
|
-
if (props.styles.corner.radius)
|
|
42
|
-
newConfig.styles.corner.radius = {
|
|
43
|
-
...newConfig.styles.corner.radius,
|
|
44
|
-
...props.styles.corner.radius
|
|
45
|
-
};
|
|
46
|
-
}
|
|
47
|
-
if (props.styles.font)
|
|
48
|
-
newConfig.styles.font = {
|
|
49
|
-
...newConfig.styles.font,
|
|
50
|
-
...props.styles.font
|
|
51
|
-
};
|
|
52
|
-
}
|
|
53
|
-
return newConfig;
|
|
54
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const importer: () => Promise<any>;
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import path from 'path';
|
|
2
|
-
import fs from 'fs';
|
|
3
|
-
import { terminal, ansi } from '../../internal/index.js';
|
|
4
|
-
const app = process.cwd();
|
|
5
|
-
const pathConfig = path.resolve(app, 'lapikit.config.js');
|
|
6
|
-
export const importer = async () => {
|
|
7
|
-
if (!fs.existsSync(pathConfig)) {
|
|
8
|
-
terminal('error', `config file not found\n ${ansi.color.yellow('Could not find lapikit.config.js. See https://localhost/docs/kit/vite to learn more about the configuration file.')}\n\n${ansi.color.blue('for initializing a new lapikit config, run:')}\n ${ansi.variant.bold('npx lapikit init')} ${ansi.bold.yellow('(preview)')}\n\n`);
|
|
9
|
-
process.exit(1);
|
|
10
|
-
}
|
|
11
|
-
const timestamp = Date.now();
|
|
12
|
-
const fileUrl = `file://${pathConfig}?t=${timestamp}`;
|
|
13
|
-
const content = await import(fileUrl);
|
|
14
|
-
return content.default;
|
|
15
|
-
};
|
package/dist/plugin/vitejs.d.ts
DELETED
package/dist/plugin/vitejs.js
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { importer } from './modules/importer.js';
|
|
2
|
-
import { processCSS } from '../style/css.js';
|
|
3
|
-
import { parseConfig } from './modules/config.js';
|
|
4
|
-
import { terminal } from '../internal/terminal.js';
|
|
5
|
-
export async function lapikit() {
|
|
6
|
-
return {
|
|
7
|
-
name: 'lapikit/vite.js',
|
|
8
|
-
async configResolved() {
|
|
9
|
-
const config = await importer();
|
|
10
|
-
const result = await parseConfig(config);
|
|
11
|
-
await processCSS(result);
|
|
12
|
-
terminal('info', 'lapikit is up!');
|
|
13
|
-
},
|
|
14
|
-
async configureServer(server) {
|
|
15
|
-
server.watcher.add('./lapikit.config.js');
|
|
16
|
-
server.watcher.on('change', async (filePath) => {
|
|
17
|
-
if (String(filePath).includes('lapikit.config.js')) {
|
|
18
|
-
const config = await importer();
|
|
19
|
-
const result = await parseConfig(config);
|
|
20
|
-
await processCSS(result);
|
|
21
|
-
terminal('info', 'lapikit config reloaded');
|
|
22
|
-
}
|
|
23
|
-
});
|
|
24
|
-
}
|
|
25
|
-
};
|
|
26
|
-
}
|
package/dist/preset.d.ts
DELETED
package/dist/preset.js
DELETED
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
export const config = {
|
|
2
|
-
options: {
|
|
3
|
-
normalize: true, // true | false
|
|
4
|
-
minify: false // true | false
|
|
5
|
-
},
|
|
6
|
-
theme: {
|
|
7
|
-
colorScheme: 'system', // 'light' | 'dark' | 'system'
|
|
8
|
-
colors: {
|
|
9
|
-
primary: { light: 'oklch(45% 0.24 277.023)', dark: 'oklch(45% 0.24 277.023)' },
|
|
10
|
-
'on-primary': { light: 'oklch(14% 0.005 285.823)', dark: 'oklch(14% 0.005 285.823)' },
|
|
11
|
-
secondary: { light: 'oklch(65% 0.241 354.308)', dark: 'oklch(65% 0.241 354.308)' },
|
|
12
|
-
'on-secondary': { light: 'oklch(14% 0.005 285.823)', dark: 'oklch(14% 0.005 285.823)' },
|
|
13
|
-
tertiary: { light: 'oklch(77% 0.152 181.912)', dark: 'oklch(77% 0.152 181.912)' },
|
|
14
|
-
'on-tertiary': { light: 'oklch(14% 0.005 285.823)', dark: 'oklch(14% 0.005 285.823)' },
|
|
15
|
-
neutral: { light: 'oklch(14% 0.005 285.823)', dark: 'oklch(14% 0.005 285.823)' },
|
|
16
|
-
'on-neutral': { light: 'oklch(100% 0 0)', dark: 'oklch(100% 0 0)' },
|
|
17
|
-
info: { light: 'oklch(74% 0.16 232.661)', dark: 'oklch(74% 0.16 232.661)' },
|
|
18
|
-
'on-info': { light: 'oklch(14% 0.005 285.823)', dark: 'oklch(14% 0.005 285.823)' },
|
|
19
|
-
success: { light: 'oklch(76% 0.177 163.223)', dark: 'oklch(76% 0.177 163.223)' },
|
|
20
|
-
'on-success': { light: 'oklch(14% 0.005 285.823)', dark: 'oklch(14% 0.005 285.823)' },
|
|
21
|
-
warning: { light: 'oklch(82% 0.189 84.429)', dark: 'oklch(82% 0.189 84.429)' },
|
|
22
|
-
'on-warning': { light: 'oklch(14% 0.005 285.823)', dark: 'oklch(14% 0.005 285.823)' },
|
|
23
|
-
error: { light: 'oklch(71% 0.194 13.428)', dark: 'oklch(71% 0.194 13.428)' },
|
|
24
|
-
'on-error': { light: 'oklch(14% 0.005 285.823)', dark: 'oklch(14% 0.005 285.823)' },
|
|
25
|
-
base: { light: 'oklch(100% 0 0)', dark: 'oklch(25.33% 0.016 252.42)' },
|
|
26
|
-
'on-base': { light: 'oklch(14% 0.005 285.823)', dark: 'oklch(100% 0 0)' },
|
|
27
|
-
surface: { light: 'oklch(98% 0 0)', dark: 'oklch(23.26% 0.014 253.1)' },
|
|
28
|
-
'on-surface': { light: 'oklch(14% 0.005 285.823)', dark: 'oklch(100% 0 0)' },
|
|
29
|
-
container: { light: 'oklch(95% 0 0)', dark: 'oklch(21.15% 0.012 254.09)' },
|
|
30
|
-
'on-container': { light: 'oklch(14% 0.005 285.823)', dark: 'oklch(100% 0 0)' },
|
|
31
|
-
shadow: 'black',
|
|
32
|
-
scrim: 'oklch(0.00% 0.000 0)'
|
|
33
|
-
}
|
|
34
|
-
},
|
|
35
|
-
breakpoints: {
|
|
36
|
-
mobileBreakpoint: 'sm',
|
|
37
|
-
tabletBreakpoint: 'md',
|
|
38
|
-
laptopBreakpoint: 'lg',
|
|
39
|
-
thresholds: {
|
|
40
|
-
_default: 0, // 0px
|
|
41
|
-
xs: '28rem', //448px
|
|
42
|
-
sm: '40rem', //640px
|
|
43
|
-
md: '48rem', //768px
|
|
44
|
-
lg: '64rem', //1024px
|
|
45
|
-
xl: '80rem', //1280px
|
|
46
|
-
'2xl': '96rem', //1536px
|
|
47
|
-
'3xl': '112rem' //1792px
|
|
48
|
-
}
|
|
49
|
-
},
|
|
50
|
-
styles: {
|
|
51
|
-
spacing: '0.125rem', // 2px
|
|
52
|
-
corner: {
|
|
53
|
-
active: true, // true | false
|
|
54
|
-
radius: {
|
|
55
|
-
sm: '0.125rem', // 2px
|
|
56
|
-
md: '0.25rem', // 4px
|
|
57
|
-
lg: '0.5rem', // 8px
|
|
58
|
-
xl: '0.75rem', // 12px
|
|
59
|
-
'2xl': '1rem', // 16px
|
|
60
|
-
'3xl': '1.5rem', // 24px
|
|
61
|
-
full: '9999px' // 9999px
|
|
62
|
-
}
|
|
63
|
-
},
|
|
64
|
-
font: {
|
|
65
|
-
sans: [
|
|
66
|
-
'system-ui',
|
|
67
|
-
'-apple-system',
|
|
68
|
-
'BlinkMacSystemFont',
|
|
69
|
-
'Segoe UI',
|
|
70
|
-
'Roboto',
|
|
71
|
-
'Helvetica Neue',
|
|
72
|
-
'Arial',
|
|
73
|
-
'sans-serif',
|
|
74
|
-
'Apple Color Emoji',
|
|
75
|
-
'Segoe UI Emoji',
|
|
76
|
-
'Segoe UI Symbol'
|
|
77
|
-
],
|
|
78
|
-
mono: [
|
|
79
|
-
'SFMono-Regular',
|
|
80
|
-
'ui-monospace',
|
|
81
|
-
'SF Mono',
|
|
82
|
-
'Menlo',
|
|
83
|
-
'Monaco',
|
|
84
|
-
'Consolas',
|
|
85
|
-
'Liberation Mono',
|
|
86
|
-
'Courier New',
|
|
87
|
-
'monospace'
|
|
88
|
-
],
|
|
89
|
-
serif: ['Merriweather', 'Georgia', 'Cambria', 'Times New Roman', 'Times', 'serif']
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
};
|
package/dist/style/animation.css
DELETED
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
@keyframes button-click {
|
|
2
|
-
0% {
|
|
3
|
-
transform: scale(0.98);
|
|
4
|
-
}
|
|
5
|
-
40% {
|
|
6
|
-
transform: scale(1.02);
|
|
7
|
-
}
|
|
8
|
-
100% {
|
|
9
|
-
transform: scale(1);
|
|
10
|
-
}
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
@keyframes icon-rotate {
|
|
14
|
-
0% {
|
|
15
|
-
transform: rotate(10deg);
|
|
16
|
-
}
|
|
17
|
-
100% {
|
|
18
|
-
transform: rotate(380deg);
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.kit-ripple {
|
|
23
|
-
background-color: currentColor;
|
|
24
|
-
opacity: 0.1;
|
|
25
|
-
position: absolute;
|
|
26
|
-
border-radius: 50%;
|
|
27
|
-
pointer-events: none;
|
|
28
|
-
-webkit-transition: 0.6s;
|
|
29
|
-
transition: 0.6s;
|
|
30
|
-
-webkit-animation: lapikit-ripple var(--ripple-duration, 0.4s) cubic-bezier(0.4, 0, 0.2, 1);
|
|
31
|
-
animation: lapikit-ripple var(--ripple-duration, 0.4s) cubic-bezier(0.4, 0, 0.2, 1);
|
|
32
|
-
border-radius: var(--ripple-radius);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.kit-ripple--center {
|
|
36
|
-
top: 50% !important;
|
|
37
|
-
left: 50% !important;
|
|
38
|
-
translate: -50% -50% !important;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
.kit-ripple--effect {
|
|
42
|
-
position: absolute;
|
|
43
|
-
left: 0;
|
|
44
|
-
right: 0;
|
|
45
|
-
top: 0;
|
|
46
|
-
bottom: 0;
|
|
47
|
-
overflow: hidden;
|
|
48
|
-
background: none;
|
|
49
|
-
pointer-events: none;
|
|
50
|
-
z-index: 999;
|
|
51
|
-
border-radius: var(--ripple-radius);
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
@keyframes lapikit-ripple {
|
|
55
|
-
from {
|
|
56
|
-
scale: 0;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
to {
|
|
60
|
-
scale: 1;
|
|
61
|
-
}
|
|
62
|
-
}
|
package/dist/style/css.d.ts
DELETED
package/dist/style/css.js
DELETED
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import { fileURLToPath } from 'url';
|
|
2
|
-
import { dirname } from 'path';
|
|
3
|
-
import fs from 'fs';
|
|
4
|
-
import fsPromises from 'fs/promises';
|
|
5
|
-
import path from 'path';
|
|
6
|
-
import { minify } from '../internal/minify.js';
|
|
7
|
-
import { colors, component, devices, variables } from './parser/index.js';
|
|
8
|
-
import { terminal } from '../internal/terminal.js';
|
|
9
|
-
const __filename = fileURLToPath(import.meta.url);
|
|
10
|
-
const __dirname = dirname(__filename);
|
|
11
|
-
export const processCSS = async (config) => {
|
|
12
|
-
const _normalize = fs.readFileSync(path.resolve(__dirname, './normalize.css'), 'utf-8');
|
|
13
|
-
const _animation = fs.readFileSync(path.resolve(__dirname, './animation.css'), 'utf-8');
|
|
14
|
-
const _variables = fs.readFileSync(path.resolve(__dirname, './variable.css'), 'utf-8');
|
|
15
|
-
let styles = ``;
|
|
16
|
-
if (config.options.normalize)
|
|
17
|
-
styles += `${_normalize}\n`;
|
|
18
|
-
const colorScheme = colors(config);
|
|
19
|
-
const deviceDisplay = devices(config);
|
|
20
|
-
const variablesStyles = variables(config);
|
|
21
|
-
styles += `${colorScheme.root}\n`;
|
|
22
|
-
styles += `${variablesStyles}\n`;
|
|
23
|
-
styles += `${variablesStyles}\n`;
|
|
24
|
-
styles += `${_variables}\n`;
|
|
25
|
-
styles += `${colorScheme.className}\n`;
|
|
26
|
-
styles += `${deviceDisplay}\n`;
|
|
27
|
-
styles += component(config);
|
|
28
|
-
styles += `${_animation}\n`;
|
|
29
|
-
if (config.options.minify) {
|
|
30
|
-
styles = minify(styles);
|
|
31
|
-
terminal('success', 'css minified');
|
|
32
|
-
}
|
|
33
|
-
fsPromises.writeFile(path.resolve(__dirname, '../styles.css'), styles);
|
|
34
|
-
};
|
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
import { parseColor } from '../../internal/colors.js';
|
|
2
|
-
export const colors = (config) => {
|
|
3
|
-
const schemes = {
|
|
4
|
-
light: {},
|
|
5
|
-
dark: {}
|
|
6
|
-
};
|
|
7
|
-
for (const [property, values] of Object.entries(config.theme.colors)) {
|
|
8
|
-
if (typeof values === 'string') {
|
|
9
|
-
// for all color scheme
|
|
10
|
-
const _refColor = parseColor(values);
|
|
11
|
-
schemes['light'][property] = _refColor;
|
|
12
|
-
schemes['dark'][property] = _refColor;
|
|
13
|
-
}
|
|
14
|
-
else {
|
|
15
|
-
// with specification
|
|
16
|
-
if ('light' in values && 'dark' in values) {
|
|
17
|
-
schemes['light'][property] = parseColor(values.light);
|
|
18
|
-
schemes['dark'][property] = parseColor(values.dark);
|
|
19
|
-
}
|
|
20
|
-
else {
|
|
21
|
-
const _refColor = 'dark' in values ? parseColor(values['dark']) : parseColor(values['light']);
|
|
22
|
-
schemes['light'][property] = _refColor;
|
|
23
|
-
schemes['dark'][property] = _refColor;
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
// css variables
|
|
28
|
-
let cssVariables = '';
|
|
29
|
-
if (config.theme.colorScheme === 'auto') {
|
|
30
|
-
for (const [themeName, colors] of Object.entries(schemes)) {
|
|
31
|
-
const used = themeName;
|
|
32
|
-
const inversed = used === 'light' ? 'dark' : 'light';
|
|
33
|
-
cssVariables += `@media (prefers-color-scheme: ${used}) {\n`;
|
|
34
|
-
cssVariables += `:root, .${used} {\n`;
|
|
35
|
-
cssVariables += `color-scheme: ${used};\n`;
|
|
36
|
-
for (const [colorName, colorValue] of Object.entries(colors)) {
|
|
37
|
-
cssVariables += `--kit-${colorName}: ${colorValue};\n`;
|
|
38
|
-
}
|
|
39
|
-
cssVariables += `}\n`;
|
|
40
|
-
cssVariables += `.${inversed} {\n`;
|
|
41
|
-
cssVariables += `color-scheme: ${inversed};\n`;
|
|
42
|
-
for (const [colorName, colorValue] of Object.entries(schemes[inversed])) {
|
|
43
|
-
cssVariables += `--kit-${colorName}: ${colorValue};\n`;
|
|
44
|
-
}
|
|
45
|
-
cssVariables += `}\n`;
|
|
46
|
-
cssVariables += `}\n`;
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
else {
|
|
50
|
-
const used = config.theme.colorScheme;
|
|
51
|
-
const inversed = config.theme.colorScheme === 'light' ? 'dark' : 'light';
|
|
52
|
-
cssVariables += `:root, .${used} {\n`;
|
|
53
|
-
cssVariables += `color-scheme: ${used};\n`;
|
|
54
|
-
for (const [colorName, colorValue] of Object.entries(schemes[used])) {
|
|
55
|
-
cssVariables += `--kit-${colorName}: ${colorValue};\n`;
|
|
56
|
-
}
|
|
57
|
-
cssVariables += `}\n`;
|
|
58
|
-
cssVariables += `.${inversed} {\n`;
|
|
59
|
-
cssVariables += `color-scheme: ${inversed};\n`;
|
|
60
|
-
for (const [colorName, colorValue] of Object.entries(schemes[inversed])) {
|
|
61
|
-
cssVariables += `--kit-${colorName}: ${colorValue};\n`;
|
|
62
|
-
}
|
|
63
|
-
cssVariables += `}\n`;
|
|
64
|
-
}
|
|
65
|
-
// class
|
|
66
|
-
let classStyles = '';
|
|
67
|
-
for (const [property] of Object.entries(schemes.light)) {
|
|
68
|
-
// classStyles += `.${property}:not([class*='--variant-']) {\n`;
|
|
69
|
-
// classStyles += `--background-color: var(--kit-${property});\n`;
|
|
70
|
-
// classStyles += `--color: var(--kit-on-${property}, var(--kit-${property}));\n`;
|
|
71
|
-
// classStyles += `}\n`;
|
|
72
|
-
// classStyles += `.${property}[class*='--variant-'] {\n`;
|
|
73
|
-
// classStyles += `--color: var(--kit-${property});\n`;
|
|
74
|
-
// classStyles += `}\n`;
|
|
75
|
-
classStyles += `.${property} {\n`;
|
|
76
|
-
classStyles += `--base: var(--kit-${property});\n`;
|
|
77
|
-
classStyles += `--on: var(--kit-on-${property}, var(--kit-${property}));\n`;
|
|
78
|
-
classStyles += `}\n`;
|
|
79
|
-
// classStyles += `.${property}:not([class*='kit-']) {\n`;
|
|
80
|
-
// classStyles += `background-color: var(--kit-${property});\n`;
|
|
81
|
-
// classStyles += `color: var(--kit-on-${property}, var(--kit-${property}));\n`;
|
|
82
|
-
// classStyles += `}\n`;
|
|
83
|
-
}
|
|
84
|
-
return {
|
|
85
|
-
root: cssVariables,
|
|
86
|
-
className: classStyles
|
|
87
|
-
};
|
|
88
|
-
};
|