lapikit 0.0.0-insiders.da3209a → 0.0.0-insiders.db90dea

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 (200) hide show
  1. package/README.md +117 -1
  2. package/bin/configuration.js +0 -1
  3. package/bin/helper.js +0 -38
  4. package/bin/index.js +1 -9
  5. package/bin/presets.js +1 -1
  6. package/bin/prompts.js +46 -79
  7. package/dist/actions/accordion.svelte.d.ts +9 -0
  8. package/dist/actions/index.d.ts +2 -1
  9. package/dist/actions/index.js +2 -1
  10. package/dist/actions/use-theme.d.ts +1 -0
  11. package/dist/actions/use-theme.js +18 -0
  12. package/dist/components/accordion/accordion.css +0 -77
  13. package/dist/components/accordion/accordion.svelte +5 -3
  14. package/dist/components/accordion/modules/accordion-item.css +68 -0
  15. package/dist/components/accordion/modules/accordion-item.svelte +4 -4
  16. package/dist/components/accordion/types.d.ts +1 -1
  17. package/dist/components/alert/alert.css +11 -18
  18. package/dist/components/alert/alert.svelte +4 -4
  19. package/dist/components/alert/types.d.ts +1 -1
  20. package/dist/components/app/app.css +12 -2
  21. package/dist/components/app/app.svelte +68 -37
  22. package/dist/components/app/app.svelte.d.ts +2 -5
  23. package/dist/components/app/types.d.ts +7 -1
  24. package/dist/components/appbar/appbar.css +8 -18
  25. package/dist/components/appbar/appbar.svelte +4 -4
  26. package/dist/components/appbar/types.d.ts +1 -1
  27. package/dist/components/aspect-ratio/aspect-ratio.svelte +0 -22
  28. package/dist/components/aspect-ratio/types.d.ts +1 -1
  29. package/dist/components/avatar/avatar.css +7 -14
  30. package/dist/components/avatar/avatar.svelte +4 -4
  31. package/dist/components/avatar/types.d.ts +1 -1
  32. package/dist/components/button/button.css +29 -36
  33. package/dist/components/button/button.svelte +5 -5
  34. package/dist/components/button/types.d.ts +1 -1
  35. package/dist/components/card/card.css +10 -20
  36. package/dist/components/card/card.svelte +9 -5
  37. package/dist/components/card/types.d.ts +3 -1
  38. package/dist/components/chip/chip.css +26 -33
  39. package/dist/components/chip/chip.svelte +5 -5
  40. package/dist/components/chip/types.d.ts +1 -1
  41. package/dist/components/dialog/dialog.css +13 -20
  42. package/dist/components/dialog/dialog.svelte +5 -5
  43. package/dist/components/dialog/types.d.ts +1 -1
  44. package/dist/components/dropdown/dropdown.css +3 -12
  45. package/dist/components/dropdown/dropdown.svelte +6 -7
  46. package/dist/components/dropdown/types.d.ts +1 -1
  47. package/dist/components/icon/icon.css +11 -12
  48. package/dist/components/icon/icon.svelte +2 -2
  49. package/dist/components/icon/types.d.ts +1 -1
  50. package/dist/components/list/list.css +19 -91
  51. package/dist/components/list/list.svelte +4 -4
  52. package/dist/components/list/modules/list-item.css +67 -0
  53. package/dist/components/list/modules/list-item.svelte +5 -5
  54. package/dist/components/list/types.d.ts +1 -1
  55. package/dist/components/modal/modal.css +15 -23
  56. package/dist/components/modal/modal.svelte +4 -5
  57. package/dist/components/modal/types.d.ts +1 -1
  58. package/dist/components/popover/popover.css +3 -12
  59. package/dist/components/popover/popover.svelte +6 -6
  60. package/dist/components/popover/types.d.ts +1 -1
  61. package/dist/components/separator/separator.css +19 -23
  62. package/dist/components/separator/separator.svelte +6 -6
  63. package/dist/components/separator/types.d.ts +6 -2
  64. package/dist/components/spacer/types.d.ts +1 -1
  65. package/dist/components/textfield/textfield.css +16 -23
  66. package/dist/components/textfield/textfield.svelte +4 -4
  67. package/dist/components/textfield/types.d.ts +1 -1
  68. package/dist/components/toolbar/toolbar.css +11 -34
  69. package/dist/components/toolbar/toolbar.svelte +4 -4
  70. package/dist/components/toolbar/types.d.ts +1 -1
  71. package/dist/components/tooltip/tooltip.css +5 -13
  72. package/dist/components/tooltip/tooltip.svelte +5 -5
  73. package/dist/components/tooltip/types.d.ts +1 -1
  74. package/dist/entry-bundler.d.ts +2 -0
  75. package/dist/entry-bundler.js +4 -0
  76. package/dist/index.d.ts +2 -26
  77. package/dist/index.js +2 -6
  78. package/dist/internal/config/presets.d.ts +88 -47
  79. package/dist/internal/config/presets.js +89 -41
  80. package/dist/internal/config/variables.d.ts +1 -4
  81. package/dist/internal/config/variables.js +1 -4
  82. package/dist/internal/{assets.svelte.js → core/actions/assets.svelte.js} +4 -4
  83. package/dist/internal/core/actions/dropdown.svelte.d.ts +7 -0
  84. package/dist/internal/core/actions/popover.svelte.d.ts +7 -0
  85. package/dist/internal/core/actions/tooltip.svelte.d.ts +7 -0
  86. package/dist/internal/{ripple.js → core/animations/ripple.js} +3 -3
  87. package/dist/internal/core/css.d.ts +1 -0
  88. package/dist/internal/core/css.js +16 -0
  89. package/dist/internal/core/formatter/component.d.ts +1 -1
  90. package/dist/internal/core/formatter/component.js +25 -21
  91. package/dist/internal/core/formatter/device.d.ts +5 -0
  92. package/dist/internal/core/formatter/device.js +66 -0
  93. package/dist/internal/core/formatter/index.d.ts +3 -1
  94. package/dist/internal/core/formatter/index.js +14 -6
  95. package/dist/internal/core/formatter/{styles.d.ts → style.d.ts} +1 -1
  96. package/dist/internal/core/formatter/{styles.js → style.js} +3 -3
  97. package/dist/internal/core/formatter/theme.d.ts +1 -1
  98. package/dist/internal/core/formatter/theme.js +30 -6
  99. package/dist/internal/core/formatter/typography.d.ts +1 -1
  100. package/dist/internal/core/formatter/typography.js +2 -2
  101. package/dist/internal/core/standard-colors.d.ts +75 -0
  102. package/dist/internal/core/standard-colors.js +75 -0
  103. package/dist/internal/helpers/colors.d.ts +1 -0
  104. package/dist/internal/{colors.js → helpers/colors.js} +2 -2
  105. package/dist/internal/helpers/parser.js +21 -21
  106. package/dist/internal/{scroll.js → helpers/scroll.js} +1 -2
  107. package/dist/internal/plugins/vite.d.ts +2 -2
  108. package/dist/internal/plugins/vite.js +15 -7
  109. package/dist/internal/types/components.d.ts +14 -0
  110. package/dist/internal/types/configuration.d.ts +24 -1
  111. package/dist/internal/types/index.d.ts +1 -0
  112. package/dist/internal/types/index.js +1 -0
  113. package/dist/stores/components.js +1 -1
  114. package/dist/stores/index.d.ts +1 -0
  115. package/dist/stores/index.js +1 -0
  116. package/dist/stores/themes.d.ts +0 -6
  117. package/dist/stores/themes.js +1 -31
  118. package/dist/stores/viewport.d.ts +7 -0
  119. package/dist/stores/viewport.js +7 -0
  120. package/dist/styles/animation.css +33 -0
  121. package/dist/styles/keyframes.css +30 -0
  122. package/dist/{style/normalize.css → styles/reset.css} +15 -7
  123. package/dist/styles.css.d.ts +4 -0
  124. package/dist/themes.css.d.ts +4 -0
  125. package/package.json +131 -103
  126. package/bin/lapikit.js +0 -86
  127. package/bin/legacy.js +0 -34
  128. package/bin/modules/adapter.js +0 -52
  129. package/bin/modules/plugin.js +0 -223
  130. package/bin/modules/preset.js +0 -11
  131. package/dist/app.d.ts +0 -13
  132. package/dist/app.html +0 -12
  133. package/dist/internal/colors.d.ts +0 -1
  134. package/dist/internal/index.d.ts +0 -4
  135. package/dist/internal/index.js +0 -4
  136. package/dist/internal/types.d.ts +0 -57
  137. package/dist/internal/unit.d.ts +0 -1
  138. package/dist/internal/unit.js +0 -11
  139. package/dist/labs/index.d.ts +0 -4
  140. package/dist/labs/index.js +0 -5
  141. package/dist/labs/my-component-style-global.svelte +0 -6
  142. package/dist/labs/my-component-style-global.svelte.d.ts +0 -18
  143. package/dist/labs/my-component-style-import.svelte +0 -15
  144. package/dist/labs/my-component-style-import.svelte.d.ts +0 -18
  145. package/dist/labs/my-component-style-mixed.svelte +0 -23
  146. package/dist/labs/my-component-style-mixed.svelte.d.ts +0 -18
  147. package/dist/labs/my-component.svelte +0 -16
  148. package/dist/labs/my-component.svelte.d.ts +0 -18
  149. package/dist/labs/style-mixed.css +0 -7
  150. package/dist/labs/style.css +0 -7
  151. package/dist/labs.css +0 -25
  152. package/dist/plugin/css.d.ts +0 -1
  153. package/dist/plugin/css.js +0 -73
  154. package/dist/plugin/modules/config.d.ts +0 -2
  155. package/dist/plugin/modules/config.js +0 -54
  156. package/dist/plugin/modules/importer.d.ts +0 -1
  157. package/dist/plugin/modules/importer.js +0 -15
  158. package/dist/plugin/preset-v2.d.ts +0 -108
  159. package/dist/plugin/preset-v2.js +0 -126
  160. package/dist/plugin/vitejs.d.ts +0 -10
  161. package/dist/plugin/vitejs.js +0 -55
  162. package/dist/preset.d.ts +0 -2
  163. package/dist/preset.js +0 -92
  164. package/dist/style/animation.css +0 -62
  165. package/dist/style/css.d.ts +0 -2
  166. package/dist/style/css.js +0 -34
  167. package/dist/style/parser/color.d.ts +0 -5
  168. package/dist/style/parser/color.js +0 -88
  169. package/dist/style/parser/component.d.ts +0 -2
  170. package/dist/style/parser/component.js +0 -115
  171. package/dist/style/parser/device.d.ts +0 -2
  172. package/dist/style/parser/device.js +0 -40
  173. package/dist/style/parser/index.d.ts +0 -4
  174. package/dist/style/parser/index.js +0 -4
  175. package/dist/style/parser/variable.d.ts +0 -2
  176. package/dist/style/parser/variable.js +0 -25
  177. package/dist/style/variable.css +0 -12
  178. /package/dist/{components/accordion → actions}/accordion.svelte.js +0 -0
  179. /package/dist/internal/{assets.svelte.d.ts → core/actions/assets.svelte.d.ts} +0 -0
  180. /package/dist/{components/dropdown → internal/core/actions}/dropdown.svelte.js +0 -0
  181. /package/dist/{components/popover → internal/core/actions}/popover.svelte.js +0 -0
  182. /package/dist/{components/tooltip → internal/core/actions}/tooltip.svelte.js +0 -0
  183. /package/dist/internal/{ripple.d.ts → core/animations/ripple.d.ts} +0 -0
  184. /package/dist/internal/{ansi.d.ts → core/bin/ansi.d.ts} +0 -0
  185. /package/dist/internal/{ansi.js → core/bin/ansi.js} +0 -0
  186. /package/dist/internal/{terminal.d.ts → core/bin/terminal.d.ts} +0 -0
  187. /package/dist/internal/{terminal.js → core/bin/terminal.js} +0 -0
  188. /package/dist/internal/{minify.d.ts → core/minify.d.ts} +0 -0
  189. /package/dist/internal/{minify.js → core/minify.js} +0 -0
  190. /package/dist/{utils/x11.d.ts → internal/core/x11-colors.d.ts} +0 -0
  191. /package/dist/{utils/x11.js → internal/core/x11-colors.js} +0 -0
  192. /package/dist/{utils → internal/helpers}/convert.d.ts +0 -0
  193. /package/dist/{utils → internal/helpers}/convert.js +0 -0
  194. /package/dist/internal/{deepMerge.d.ts → helpers/deep-merge.d.ts} +0 -0
  195. /package/dist/internal/{deepMerge.js → helpers/deep-merge.js} +0 -0
  196. /package/dist/internal/{clickOutside.d.ts → helpers/outside.d.ts} +0 -0
  197. /package/dist/internal/{clickOutside.js → helpers/outside.js} +0 -0
  198. /package/dist/internal/{scroll.d.ts → helpers/scroll.d.ts} +0 -0
  199. /package/dist/internal/{types.js → types/components.js} +0 -0
  200. /package/dist/{colors.css → themes.css} +0 -0
@@ -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,108 +0,0 @@
1
- export declare const preset: {
2
- breakpoints: {
3
- devices: {
4
- desktop: number;
5
- tablet: number;
6
- mobile: number;
7
- };
8
- thresholds: {
9
- base: number;
10
- xs: number;
11
- sm: number;
12
- md: number;
13
- lg: number;
14
- xl: number;
15
- '2xl': number;
16
- '3xl': number;
17
- };
18
- };
19
- theme: {
20
- defaultTheme: string;
21
- themes: {
22
- light: {
23
- dark: boolean;
24
- colors: {
25
- blue: string;
26
- green: string;
27
- red: string;
28
- yellow: string;
29
- orange: string;
30
- purple: string;
31
- pink: string;
32
- indigo: string;
33
- cyan: string;
34
- gray: string;
35
- 'gray-2': string;
36
- 'gray-3': string;
37
- 'gray-4': string;
38
- 'gray-5': string;
39
- 'gray-6': string;
40
- background: string;
41
- 'secondary-background': string;
42
- 'tertiary-background': string;
43
- label: string;
44
- 'secondary-label': string;
45
- };
46
- variables: {
47
- info: string;
48
- success: string;
49
- error: string;
50
- warning: string;
51
- };
52
- };
53
- dark: {
54
- dark: boolean;
55
- colors: {
56
- blue: string;
57
- green: string;
58
- red: string;
59
- yellow: string;
60
- orange: string;
61
- purple: string;
62
- pink: string;
63
- indigo: string;
64
- cyan: string;
65
- gray: string;
66
- 'gray-2': string;
67
- 'gray-3': string;
68
- 'gray-4': string;
69
- 'gray-5': string;
70
- 'gray-6': string;
71
- background: string;
72
- 'secondary-background': string;
73
- 'tertiary-background': string;
74
- label: string;
75
- 'secondary-label': string;
76
- };
77
- variables: {
78
- info: string;
79
- success: string;
80
- error: string;
81
- warning: string;
82
- };
83
- };
84
- };
85
- };
86
- typography: {
87
- defaultTypography: string;
88
- fonts: {
89
- default: {
90
- sans: string[];
91
- mono: string[];
92
- serif: string[];
93
- };
94
- };
95
- };
96
- styles: {
97
- spacing: string;
98
- shape: {
99
- sm: string;
100
- md: string;
101
- lg: string;
102
- xl: string;
103
- '2xl': string;
104
- '3xl': string;
105
- full: string;
106
- };
107
- };
108
- };
@@ -1,126 +0,0 @@
1
- const variables = {
2
- info: 'var(--system-blue)',
3
- success: 'var(--system-green)',
4
- error: 'var(--system-red)',
5
- warning: 'var(--system-yellow)'
6
- };
7
- export const preset = {
8
- breakpoints: {
9
- devices: {
10
- desktop: 1024, //64rem (lg)
11
- tablet: 768, //48rem (md)
12
- mobile: 375 //28rem (sm)
13
- },
14
- thresholds: {
15
- base: 0, // 0px
16
- xs: 448, //28rem
17
- sm: 640, //40rem
18
- md: 768, //48rem
19
- lg: 1024, //64rem
20
- xl: 1280, //80rem
21
- '2xl': 1536, //96rem
22
- '3xl': 1792 //112rem
23
- }
24
- },
25
- theme: {
26
- defaultTheme: 'light',
27
- themes: {
28
- light: {
29
- dark: false,
30
- colors: {
31
- blue: '#007AFF',
32
- green: '#34C759',
33
- red: '#FF3B30',
34
- yellow: '#FFCC00',
35
- orange: '#FF9500',
36
- purple: '#AF52DE',
37
- pink: '#FF2D55',
38
- indigo: '#5856D6',
39
- cyan: '#5AC8FA',
40
- gray: '#8E8E93',
41
- 'gray-2': '#AEAEB2',
42
- 'gray-3': '#C7C7CC',
43
- 'gray-4': '#D1D1D6',
44
- 'gray-5': '#E5E5EA',
45
- 'gray-6': '#F2F2F7',
46
- background: '#FFFFFF',
47
- 'secondary-background': '#F2F2F7',
48
- 'tertiary-background': '#EFEFF4',
49
- label: '#000000',
50
- 'secondary-label': 'rgba(60,60,67,0.6)'
51
- },
52
- variables: variables
53
- },
54
- dark: {
55
- dark: true,
56
- colors: {
57
- blue: '#0A84FF',
58
- green: '#30D158',
59
- red: '#FF453A',
60
- yellow: '#FFD60A',
61
- orange: '#FF9F0A',
62
- purple: '#BF5AF2',
63
- pink: '#FF375F',
64
- indigo: '#5E5CE6',
65
- cyan: '#64D2FF',
66
- gray: '#8E8E93',
67
- 'gray-2': '#636366',
68
- 'gray-3': '#48484A',
69
- 'gray-4': '#3A3A3C',
70
- 'gray-5': '#2C2C2E',
71
- 'gray-6': '#1C1C1E',
72
- background: '#000000',
73
- 'secondary-background': '#1C1C1E',
74
- 'tertiary-background': '#2C2C2E',
75
- label: '#FFFFFF',
76
- 'secondary-label': 'rgba(235,235,245,0.6)'
77
- },
78
- variables: variables
79
- }
80
- }
81
- },
82
- typography: {
83
- defaultTypography: 'default',
84
- fonts: {
85
- default: {
86
- sans: [
87
- 'system-ui',
88
- '-apple-system',
89
- 'BlinkMacSystemFont',
90
- 'Segoe UI',
91
- 'Roboto',
92
- 'Helvetica Neue',
93
- 'Arial',
94
- 'sans-serif',
95
- 'Apple Color Emoji',
96
- 'Segoe UI Emoji',
97
- 'Segoe UI Symbol'
98
- ],
99
- mono: [
100
- 'SFMono-Regular',
101
- 'ui-monospace',
102
- 'SF Mono',
103
- 'Menlo',
104
- 'Monaco',
105
- 'Consolas',
106
- 'Liberation Mono',
107
- 'Courier New',
108
- 'monospace'
109
- ],
110
- serif: ['Merriweather', 'Georgia', 'Cambria', 'Times New Roman', 'Times', 'serif']
111
- }
112
- }
113
- },
114
- styles: {
115
- spacing: '0.125rem', // 2px
116
- shape: {
117
- sm: '0.125rem', // 2px
118
- md: '0.25rem', // 4px
119
- lg: '0.5rem', // 8px
120
- xl: '0.75rem', // 12px
121
- '2xl': '1rem', // 16px
122
- '3xl': '1.5rem', // 24px
123
- full: '9999px' // 9999px
124
- }
125
- }
126
- };
@@ -1,10 +0,0 @@
1
- import type { ViteDevServer } from 'vite';
2
- type Lapikit = {
3
- config?: string;
4
- };
5
- export declare function lapikit({ config }?: Lapikit): Promise<{
6
- name: string;
7
- configResolved(): Promise<void>;
8
- configureServer(server: ViteDevServer): Promise<void>;
9
- }>;
10
- export {};
@@ -1,55 +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
- import path from 'path';
6
- import fs from 'fs';
7
- import { css } from './css.js';
8
- const app = process.cwd();
9
- async function getLapikitConfig(filePath) {
10
- const pathConfig = path.resolve(app, filePath);
11
- if (!fs.existsSync(pathConfig))
12
- process.exit(1);
13
- const code = fs.readFileSync(pathConfig, 'utf-8');
14
- const match = code.match(/createLapikit\s*\(\s*({[\s\S]*?})\s*\)/);
15
- let options = {};
16
- if (match && match[1]) {
17
- try {
18
- options = new Function('return ' + match[1])();
19
- }
20
- catch (e) {
21
- console.error('Error parsing lapikit config:', e);
22
- }
23
- }
24
- else {
25
- console.error('Lapikit not found');
26
- }
27
- return options;
28
- }
29
- export async function lapikit({ config } = {}) {
30
- if (config) {
31
- const value = await getLapikitConfig(config);
32
- // console.log(value);
33
- await css(value);
34
- }
35
- return {
36
- name: 'lapikit/vite.js',
37
- async configResolved() {
38
- const importedConfig = await importer();
39
- const result = await parseConfig(importedConfig);
40
- await processCSS(result);
41
- terminal('info', 'lapikit is up!');
42
- },
43
- async configureServer(server) {
44
- server.watcher.add('./lapikit.config.js');
45
- server.watcher.on('change', async (filePath) => {
46
- if (String(filePath).includes('lapikit.config.js')) {
47
- const config = await importer();
48
- const result = await parseConfig(config);
49
- await processCSS(result);
50
- terminal('info', 'lapikit config reloaded');
51
- }
52
- });
53
- }
54
- };
55
- }
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;