lapikit 0.2.2 → 0.2.4
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 +17 -12
- package/bin/helper.js +0 -38
- package/bin/index.js +1 -9
- package/bin/presets.js +2 -1
- package/bin/prompts.js +46 -79
- 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 +24 -23
- 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 +5 -5
- package/dist/components/card/types.d.ts +1 -1
- package/dist/components/chip/chip.css +26 -33
- package/dist/components/chip/chip.svelte +5 -5
- package/dist/components/chip/types.d.ts +1 -1
- package/dist/components/dialog/dialog.css +13 -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 +15 -23
- 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 +14 -26
- 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 +2 -4
- package/dist/index.js +21 -2
- 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 +4 -10
- package/dist/stores/index.js +4 -47
- package/dist/stores/themes.d.ts +2 -0
- package/dist/stores/themes.js +4 -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 +7 -3
- package/bin/lapikit.js +0 -86
- package/bin/legacy.js +0 -34
- package/bin/modules/adapter.js +0 -52
- package/bin/modules/plugin.js +0 -223
- 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/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
|
-
};
|
|
@@ -1,115 +0,0 @@
|
|
|
1
|
-
import { fileURLToPath } from 'url';
|
|
2
|
-
import { dirname } from 'path';
|
|
3
|
-
import fs from 'fs';
|
|
4
|
-
import path from 'path';
|
|
5
|
-
const __filename = fileURLToPath(import.meta.url);
|
|
6
|
-
const __dirname = dirname(__filename);
|
|
7
|
-
export const component = (config) => {
|
|
8
|
-
let css = ``;
|
|
9
|
-
const tresholds = {
|
|
10
|
-
_default: '',
|
|
11
|
-
static: '',
|
|
12
|
-
min: '',
|
|
13
|
-
max: '',
|
|
14
|
-
all: ''
|
|
15
|
-
};
|
|
16
|
-
function loadComponentCSS(directory) {
|
|
17
|
-
fs.readdirSync(directory).forEach((File) => {
|
|
18
|
-
const absolutePath = path.join(directory, File);
|
|
19
|
-
if (fs.statSync(absolutePath).isDirectory())
|
|
20
|
-
return loadComponentCSS(absolutePath);
|
|
21
|
-
else if (absolutePath.endsWith('.css') && !absolutePath.includes('/_')) {
|
|
22
|
-
const content = parser(fs.readFileSync(absolutePath, 'utf-8'));
|
|
23
|
-
tresholds._default += content.allExtracted
|
|
24
|
-
.replaceAll('[breakpoint|min]', '[breakpoint]')
|
|
25
|
-
.replaceAll('[breakpoint|max]', '[breakpoint]')
|
|
26
|
-
.replaceAll('[breakpoint|all]', '[breakpoint]');
|
|
27
|
-
tresholds.static += content.defaultExtracted;
|
|
28
|
-
tresholds.min += content.minExtracted.replaceAll('[breakpoint|min]', '[breakpoint]');
|
|
29
|
-
tresholds.max += content.maxExtracted.replaceAll('[breakpoint|max]', '[breakpoint]');
|
|
30
|
-
tresholds.all += content.allModifierExtracted.replaceAll('[breakpoint|all]', '[breakpoint]');
|
|
31
|
-
return (css += `${content.cleaned}\n`);
|
|
32
|
-
}
|
|
33
|
-
});
|
|
34
|
-
}
|
|
35
|
-
loadComponentCSS(path.resolve(__dirname, '../../components'));
|
|
36
|
-
for (const property in config.breakpoints.thresholds) {
|
|
37
|
-
if (property !== '_default') {
|
|
38
|
-
const name = `.${/^\d/.test(property) ? `\\3${property}` : property}\\:`;
|
|
39
|
-
const value = typeof config.breakpoints.thresholds[property] === 'number'
|
|
40
|
-
? `${config.breakpoints.thresholds[property]}px`
|
|
41
|
-
: config.breakpoints.thresholds[property];
|
|
42
|
-
if (tresholds.static !== '' || tresholds.all !== '' || tresholds.min !== '') {
|
|
43
|
-
css += `@media screen and (min-width: ${value}) {\n`;
|
|
44
|
-
if (tresholds.static !== '')
|
|
45
|
-
css += tresholds.static.replaceAll('[breakpoint]', name);
|
|
46
|
-
if (tresholds.all !== '')
|
|
47
|
-
css += tresholds.all.replaceAll('[breakpoint]', name);
|
|
48
|
-
if (tresholds.min !== '')
|
|
49
|
-
css += tresholds.min.replaceAll('[breakpoint]', name);
|
|
50
|
-
css += `}\n`;
|
|
51
|
-
}
|
|
52
|
-
if (tresholds.max !== '' || tresholds.all !== '') {
|
|
53
|
-
css += `@media screen and (max-width: ${value}) {\n`;
|
|
54
|
-
if (tresholds.max !== '')
|
|
55
|
-
css += tresholds.max.replaceAll('[breakpoint]', name);
|
|
56
|
-
if (tresholds.all !== '')
|
|
57
|
-
css += tresholds.all.replaceAll('[breakpoint]', name);
|
|
58
|
-
css += `}\n`;
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
else {
|
|
62
|
-
css += tresholds._default.replaceAll('[breakpoint]', '.');
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
return css;
|
|
66
|
-
};
|
|
67
|
-
const parser = (css) => {
|
|
68
|
-
const regex = /([^{]+)\{([^}]+)\}/g;
|
|
69
|
-
let match;
|
|
70
|
-
const matchesToRemove = [];
|
|
71
|
-
const extractedByType = {
|
|
72
|
-
allExtracted: [],
|
|
73
|
-
defaultExtracted: [],
|
|
74
|
-
minExtracted: [],
|
|
75
|
-
maxExtracted: [],
|
|
76
|
-
allModifierExtracted: []
|
|
77
|
-
};
|
|
78
|
-
while ((match = regex.exec(css)) !== null) {
|
|
79
|
-
const fullMatch = match[0];
|
|
80
|
-
const selectors = match[1].trim();
|
|
81
|
-
const body = match[2].trim();
|
|
82
|
-
const selectorsArray = selectors.split(',').map((sel) => sel.trim());
|
|
83
|
-
let matchedType = null;
|
|
84
|
-
if (selectorsArray.some((sel) => sel.includes('[breakpoint|min]'))) {
|
|
85
|
-
matchedType = 'minExtracted';
|
|
86
|
-
}
|
|
87
|
-
else if (selectorsArray.some((sel) => sel.includes('[breakpoint|max]'))) {
|
|
88
|
-
matchedType = 'maxExtracted';
|
|
89
|
-
}
|
|
90
|
-
else if (selectorsArray.some((sel) => sel.includes('[breakpoint|all]'))) {
|
|
91
|
-
matchedType = 'allModifierExtracted';
|
|
92
|
-
}
|
|
93
|
-
else if (selectorsArray.some((sel) => sel.includes('[breakpoint]'))) {
|
|
94
|
-
matchedType = 'defaultExtracted';
|
|
95
|
-
}
|
|
96
|
-
if (matchedType) {
|
|
97
|
-
const rule = `${selectors} {\n${body}\n}`;
|
|
98
|
-
extractedByType.allExtracted.push(rule);
|
|
99
|
-
extractedByType[matchedType].push(rule);
|
|
100
|
-
matchesToRemove.push(fullMatch);
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
let cleaned = css;
|
|
104
|
-
for (const rule of matchesToRemove) {
|
|
105
|
-
cleaned = cleaned.replace(rule, '').replace(/\n{2,}/g, '\n\n');
|
|
106
|
-
}
|
|
107
|
-
return {
|
|
108
|
-
allExtracted: extractedByType.allExtracted.join('\n\n').trim(),
|
|
109
|
-
defaultExtracted: extractedByType.defaultExtracted.join('\n\n').trim(),
|
|
110
|
-
minExtracted: extractedByType.minExtracted.join('\n\n').trim(),
|
|
111
|
-
maxExtracted: extractedByType.maxExtracted.join('\n\n').trim(),
|
|
112
|
-
allModifierExtracted: extractedByType.allModifierExtracted.join('\n\n').trim(),
|
|
113
|
-
cleaned: cleaned.trim()
|
|
114
|
-
};
|
|
115
|
-
};
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import { setUnit } from '../../internal/unit.js';
|
|
2
|
-
export const devices = (config) => {
|
|
3
|
-
let css = ``;
|
|
4
|
-
const list = {
|
|
5
|
-
mobile: config.breakpoints.mobileBreakpoint,
|
|
6
|
-
tablet: config.breakpoints.tabletBreakpoint,
|
|
7
|
-
laptop: config.breakpoints.laptopBreakpoint
|
|
8
|
-
};
|
|
9
|
-
css += `@media screen and (max-width: ${setUnit(config.breakpoints.thresholds[list.mobile])}) {\n`;
|
|
10
|
-
css += `.hidden-mobile {\n`;
|
|
11
|
-
css += `display: none !important;\n`;
|
|
12
|
-
css += `}\n`;
|
|
13
|
-
css += `}\n`;
|
|
14
|
-
css += `@media screen and (min-width: ${setUnit(config.breakpoints.thresholds[list.mobile])}) {\n`;
|
|
15
|
-
css += `.display-mobile {\n`;
|
|
16
|
-
css += `display: none !important;\n`;
|
|
17
|
-
css += `}\n`;
|
|
18
|
-
css += `}\n`;
|
|
19
|
-
css += `@media screen and (min-width: ${setUnit(config.breakpoints.thresholds[list.tablet])}) and (max-width: ${setUnit(config.breakpoints.thresholds[list.laptop])}) {\n`;
|
|
20
|
-
css += `.hidden-tablet {\n`;
|
|
21
|
-
css += `display: none !important;\n`;
|
|
22
|
-
css += `}\n`;
|
|
23
|
-
css += `}\n`;
|
|
24
|
-
css += `@media screen and (max-width: ${setUnit(config.breakpoints.thresholds[list.tablet])}) and (min-width: ${setUnit(config.breakpoints.thresholds[list.laptop])}){\n`;
|
|
25
|
-
css += `.display-tablet {\n`;
|
|
26
|
-
css += `display: none !important;\n`;
|
|
27
|
-
css += `}\n`;
|
|
28
|
-
css += `}\n`;
|
|
29
|
-
css += `@media screen and (min-width: ${setUnit(config.breakpoints.thresholds[list.laptop])}) {\n`;
|
|
30
|
-
css += `.hidden-laptop {\n`;
|
|
31
|
-
css += `display: none !important;\n`;
|
|
32
|
-
css += `}\n`;
|
|
33
|
-
css += `}\n`;
|
|
34
|
-
css += `@media screen and (max-width: ${setUnit(config.breakpoints.thresholds[list.laptop])}) {\n`;
|
|
35
|
-
css += `.display-laptop {\n`;
|
|
36
|
-
css += `display: none !important;\n`;
|
|
37
|
-
css += `}\n`;
|
|
38
|
-
css += `}\n`;
|
|
39
|
-
return css;
|
|
40
|
-
};
|