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.
Files changed (181) hide show
  1. package/bin/configuration.js +303 -0
  2. package/bin/helper.js +0 -38
  3. package/bin/index.js +33 -0
  4. package/bin/presets.js +26 -0
  5. package/bin/prompts.js +67 -0
  6. package/dist/actions/accordion.svelte.d.ts +9 -0
  7. package/dist/actions/index.d.ts +2 -1
  8. package/dist/actions/index.js +2 -1
  9. package/dist/actions/use-theme.d.ts +1 -0
  10. package/dist/actions/use-theme.js +18 -0
  11. package/dist/components/accordion/accordion.css +0 -77
  12. package/dist/components/accordion/accordion.svelte +5 -3
  13. package/dist/components/accordion/modules/accordion-item.css +68 -0
  14. package/dist/components/accordion/modules/accordion-item.svelte +4 -4
  15. package/dist/components/accordion/types.d.ts +1 -1
  16. package/dist/components/alert/alert.css +11 -18
  17. package/dist/components/alert/alert.svelte +4 -4
  18. package/dist/components/alert/types.d.ts +1 -1
  19. package/dist/components/app/app.css +1 -2
  20. package/dist/components/app/app.svelte +39 -21
  21. package/dist/components/app/app.svelte.d.ts +2 -0
  22. package/dist/components/appbar/appbar.css +8 -18
  23. package/dist/components/appbar/appbar.svelte +4 -4
  24. package/dist/components/appbar/types.d.ts +1 -1
  25. package/dist/components/aspect-ratio/aspect-ratio.svelte +0 -22
  26. package/dist/components/aspect-ratio/types.d.ts +1 -1
  27. package/dist/components/avatar/avatar.css +7 -14
  28. package/dist/components/avatar/avatar.svelte +4 -4
  29. package/dist/components/avatar/types.d.ts +1 -1
  30. package/dist/components/button/button.css +29 -36
  31. package/dist/components/button/button.svelte +5 -5
  32. package/dist/components/button/types.d.ts +1 -1
  33. package/dist/components/card/card.css +10 -20
  34. package/dist/components/card/card.svelte +9 -5
  35. package/dist/components/card/types.d.ts +3 -1
  36. package/dist/components/chip/chip.css +30 -37
  37. package/dist/components/chip/chip.svelte +10 -8
  38. package/dist/components/chip/types.d.ts +2 -1
  39. package/dist/components/dialog/dialog.css +15 -20
  40. package/dist/components/dialog/dialog.svelte +5 -5
  41. package/dist/components/dialog/types.d.ts +1 -1
  42. package/dist/components/dropdown/dropdown.css +3 -12
  43. package/dist/components/dropdown/dropdown.svelte +6 -7
  44. package/dist/components/dropdown/types.d.ts +1 -1
  45. package/dist/components/icon/icon.css +11 -12
  46. package/dist/components/icon/icon.svelte +2 -2
  47. package/dist/components/icon/types.d.ts +1 -1
  48. package/dist/components/list/list.css +19 -91
  49. package/dist/components/list/list.svelte +4 -4
  50. package/dist/components/list/modules/list-item.css +67 -0
  51. package/dist/components/list/modules/list-item.svelte +5 -5
  52. package/dist/components/list/types.d.ts +1 -1
  53. package/dist/components/modal/modal.css +22 -29
  54. package/dist/components/modal/modal.svelte +4 -5
  55. package/dist/components/modal/types.d.ts +1 -1
  56. package/dist/components/popover/popover.css +3 -12
  57. package/dist/components/popover/popover.svelte +6 -6
  58. package/dist/components/popover/types.d.ts +1 -1
  59. package/dist/components/separator/separator.css +4 -8
  60. package/dist/components/separator/separator.svelte +5 -5
  61. package/dist/components/separator/types.d.ts +1 -1
  62. package/dist/components/spacer/types.d.ts +1 -1
  63. package/dist/components/textfield/textfield.css +16 -23
  64. package/dist/components/textfield/textfield.svelte +4 -4
  65. package/dist/components/textfield/types.d.ts +1 -1
  66. package/dist/components/toolbar/toolbar.css +11 -34
  67. package/dist/components/toolbar/toolbar.svelte +4 -4
  68. package/dist/components/toolbar/types.d.ts +1 -1
  69. package/dist/components/tooltip/tooltip.css +5 -13
  70. package/dist/components/tooltip/tooltip.svelte +5 -5
  71. package/dist/components/tooltip/types.d.ts +1 -1
  72. package/dist/index.d.ts +3 -1
  73. package/dist/index.js +23 -3
  74. package/dist/internal/config/presets.d.ts +149 -0
  75. package/dist/internal/config/presets.js +169 -0
  76. package/dist/internal/config/variables.d.ts +3 -0
  77. package/dist/internal/config/variables.js +3 -0
  78. package/dist/internal/{assets.svelte.js → core/actions/assets.svelte.js} +4 -4
  79. package/dist/internal/core/actions/dropdown.svelte.d.ts +7 -0
  80. package/dist/internal/core/actions/popover.svelte.d.ts +7 -0
  81. package/dist/internal/core/actions/tooltip.svelte.d.ts +7 -0
  82. package/dist/internal/{ripple.js → core/animations/ripple.js} +3 -3
  83. package/dist/internal/core/css.d.ts +1 -0
  84. package/dist/internal/core/css.js +16 -0
  85. package/dist/internal/core/formatter/component.d.ts +5 -0
  86. package/dist/internal/core/formatter/component.js +60 -0
  87. package/dist/internal/core/formatter/device.d.ts +5 -0
  88. package/dist/internal/core/formatter/device.js +66 -0
  89. package/dist/internal/core/formatter/index.d.ts +7 -0
  90. package/dist/internal/core/formatter/index.js +35 -0
  91. package/dist/internal/core/formatter/style.d.ts +4 -0
  92. package/dist/internal/core/formatter/style.js +15 -0
  93. package/dist/internal/core/formatter/theme.d.ts +5 -0
  94. package/dist/internal/core/formatter/theme.js +44 -0
  95. package/dist/internal/core/formatter/typography.d.ts +5 -0
  96. package/dist/internal/core/formatter/typography.js +12 -0
  97. package/dist/internal/core/standard-colors.d.ts +75 -0
  98. package/dist/internal/core/standard-colors.js +75 -0
  99. package/dist/internal/helpers/colors.d.ts +1 -0
  100. package/dist/internal/{colors.js → helpers/colors.js} +2 -2
  101. package/dist/internal/helpers/convert.d.ts +1 -0
  102. package/dist/internal/helpers/convert.js +17 -0
  103. package/dist/internal/helpers/deep-merge.d.ts +44 -0
  104. package/dist/internal/helpers/deep-merge.js +80 -0
  105. package/dist/internal/helpers/parser.d.ts +10 -0
  106. package/dist/internal/helpers/parser.js +93 -0
  107. package/dist/internal/plugins/vite.d.ts +8 -0
  108. package/dist/internal/plugins/vite.js +33 -0
  109. package/dist/internal/types/components.d.ts +14 -0
  110. package/dist/internal/types/configuration.d.ts +63 -0
  111. package/dist/internal/types/configuration.js +1 -0
  112. package/dist/internal/types/index.d.ts +2 -0
  113. package/dist/internal/types/index.js +2 -0
  114. package/dist/stores/breakpoints.d.ts +6 -0
  115. package/dist/stores/breakpoints.js +14 -0
  116. package/dist/stores/components.d.ts +8 -0
  117. package/dist/stores/components.js +26 -0
  118. package/dist/stores/devices.d.ts +6 -0
  119. package/dist/stores/devices.js +9 -0
  120. package/dist/stores/index.d.ts +5 -10
  121. package/dist/stores/index.js +5 -47
  122. package/dist/stores/themes.d.ts +2 -0
  123. package/dist/stores/themes.js +4 -0
  124. package/dist/stores/viewport.d.ts +7 -0
  125. package/dist/stores/viewport.js +7 -0
  126. package/dist/styles/animation.css +33 -0
  127. package/dist/styles/keyframes.css +30 -0
  128. package/dist/{style/normalize.css → styles/reset.css} +15 -7
  129. package/dist/themes.css +0 -0
  130. package/package.json +12 -5
  131. package/bin/lapikit.js +0 -79
  132. package/bin/modules/adapter.js +0 -52
  133. package/bin/modules/plugin.js +0 -66
  134. package/bin/modules/preset.js +0 -11
  135. package/dist/internal/colors.d.ts +0 -1
  136. package/dist/internal/index.d.ts +0 -4
  137. package/dist/internal/index.js +0 -4
  138. package/dist/internal/types.d.ts +0 -57
  139. package/dist/internal/unit.d.ts +0 -1
  140. package/dist/internal/unit.js +0 -11
  141. package/dist/plugin/modules/config.d.ts +0 -2
  142. package/dist/plugin/modules/config.js +0 -54
  143. package/dist/plugin/modules/importer.d.ts +0 -1
  144. package/dist/plugin/modules/importer.js +0 -15
  145. package/dist/plugin/vitejs.d.ts +0 -6
  146. package/dist/plugin/vitejs.js +0 -26
  147. package/dist/preset.d.ts +0 -2
  148. package/dist/preset.js +0 -92
  149. package/dist/style/animation.css +0 -62
  150. package/dist/style/css.d.ts +0 -2
  151. package/dist/style/css.js +0 -34
  152. package/dist/style/parser/color.d.ts +0 -5
  153. package/dist/style/parser/color.js +0 -88
  154. package/dist/style/parser/component.d.ts +0 -2
  155. package/dist/style/parser/component.js +0 -115
  156. package/dist/style/parser/device.d.ts +0 -2
  157. package/dist/style/parser/device.js +0 -40
  158. package/dist/style/parser/index.d.ts +0 -4
  159. package/dist/style/parser/index.js +0 -4
  160. package/dist/style/parser/variable.d.ts +0 -2
  161. package/dist/style/parser/variable.js +0 -25
  162. package/dist/style/variable.css +0 -12
  163. /package/dist/{components/accordion → actions}/accordion.svelte.js +0 -0
  164. /package/dist/internal/{assets.svelte.d.ts → core/actions/assets.svelte.d.ts} +0 -0
  165. /package/dist/{components/dropdown → internal/core/actions}/dropdown.svelte.js +0 -0
  166. /package/dist/{components/popover → internal/core/actions}/popover.svelte.js +0 -0
  167. /package/dist/{components/tooltip → internal/core/actions}/tooltip.svelte.js +0 -0
  168. /package/dist/internal/{ripple.d.ts → core/animations/ripple.d.ts} +0 -0
  169. /package/dist/internal/{ansi.d.ts → core/bin/ansi.d.ts} +0 -0
  170. /package/dist/internal/{ansi.js → core/bin/ansi.js} +0 -0
  171. /package/dist/internal/{terminal.d.ts → core/bin/terminal.d.ts} +0 -0
  172. /package/dist/internal/{terminal.js → core/bin/terminal.js} +0 -0
  173. /package/dist/internal/{minify.d.ts → core/minify.d.ts} +0 -0
  174. /package/dist/internal/{minify.js → core/minify.js} +0 -0
  175. /package/dist/{utils/x11.d.ts → internal/core/x11-colors.d.ts} +0 -0
  176. /package/dist/{utils/x11.js → internal/core/x11-colors.js} +0 -0
  177. /package/dist/internal/{clickOutside.d.ts → helpers/outside.d.ts} +0 -0
  178. /package/dist/internal/{clickOutside.js → helpers/outside.js} +0 -0
  179. /package/dist/internal/{scroll.d.ts → helpers/scroll.d.ts} +0 -0
  180. /package/dist/internal/{scroll.js → helpers/scroll.js} +0 -0
  181. /package/dist/internal/{types.js → types/components.js} +0 -0
@@ -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
- }
@@ -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
- }
@@ -1,11 +0,0 @@
1
- export const preset = `
2
- /** @type {import('lapikit').Config} */
3
- export default {
4
- theme: {
5
- colorScheme: 'light',
6
- colors: {
7
- svelte: '#ff3e00'
8
- }
9
- }
10
- };
11
- `;
@@ -1 +0,0 @@
1
- export declare const parseColor: (input: string) => string;
@@ -1,4 +0,0 @@
1
- export * from './terminal.js';
2
- export * from './ansi.js';
3
- export * from './assets.svelte.js';
4
- export * from './scroll.js';
@@ -1,4 +0,0 @@
1
- export * from './terminal.js';
2
- export * from './ansi.js';
3
- export * from './assets.svelte.js';
4
- export * from './scroll.js';
@@ -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 {};
@@ -1 +0,0 @@
1
- export declare const setUnit: (value: string | number) => string;
@@ -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,2 +0,0 @@
1
- import type { LapikitConfig } from '../../internal/types.js';
2
- export declare const parseConfig: (props?: LapikitConfig) => import("../../internal/types.js").Lapikit;
@@ -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
- };
@@ -1,6 +0,0 @@
1
- import type { ViteDevServer } from 'vite';
2
- export declare function lapikit(): Promise<{
3
- name: string;
4
- configResolved(): Promise<void>;
5
- configureServer(server: ViteDevServer): Promise<void>;
6
- }>;
@@ -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
@@ -1,2 +0,0 @@
1
- import type { Lapikit } from './internal/types.js';
2
- export declare const config: Lapikit;
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
- };
@@ -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
- }
@@ -1,2 +0,0 @@
1
- import type { Lapikit } from '../internal/types.js';
2
- export declare const processCSS: (config: Lapikit) => Promise<void>;
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,5 +0,0 @@
1
- import type { Lapikit } from '../../internal/types.js';
2
- export declare const colors: (config: Lapikit) => {
3
- root: string;
4
- className: string;
5
- };
@@ -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,2 +0,0 @@
1
- import type { Lapikit } from '../../internal/types.js';
2
- export declare const component: (config: Lapikit) => string;