beathers 5.5.0 → 5.6.1
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/CHANGELOG +50 -0
- package/css/beathers.min.css +2 -2
- package/css/beathers.min.css.map +1 -1
- package/package.json +3 -2
- package/readme.md +87 -60
- package/scripts/cli.js +1 -3
- package/scripts/commands/build.d.ts.map +1 -1
- package/scripts/commands/build.js +52 -45
- package/scripts/commands/help.d.ts.map +1 -1
- package/scripts/commands/help.js +0 -4
- package/scripts/commands/init.d.ts.map +1 -1
- package/scripts/commands/init.js +30 -25
- package/scripts/commands/list.d.ts.map +1 -1
- package/scripts/commands/list.js +0 -1
- package/scripts/helpers/BuildScssVariables.d.ts.map +1 -1
- package/scripts/helpers/BuildScssVariables.js +21 -18
- package/scripts/helpers/Merge.d.ts.map +1 -1
- package/scripts/helpers/Merge.js +4 -3
- package/scripts/helpers/ReadDefaultValues.d.ts.map +1 -1
- package/scripts/helpers/ReadDefaultValues.js +20 -2
- package/scripts/types.d.ts +3 -1
- package/scripts/types.d.ts.map +1 -1
- package/scss/_variables.scss +39 -10
- package/scss/beathers.min.scss +2 -1
- package/scss/functions/_mediaQueries.scss +3 -3
- package/scss/functions/_others.scss +0 -8
- package/scss/settings/_configs.scss +14 -39
- package/scss/settings/_index.scss +19 -3
- package/scss/style/_glass.scss +21 -25
- package/scss/style/_grid.scss +19 -13
- package/scss/style/_resets.scss +71 -3
- package/scss/style/_shaping.scss +76 -32
- package/scss/style/_typographic.scss +30 -5
- package/css/beathers-icons.min.css +0 -1
- package/css/beathers-icons.min.css.map +0 -1
- package/public/fonts/beathers.woff +0 -0
- package/scss/beathers-icons.min.scss +0 -265
package/readme.md
CHANGED
|
@@ -13,7 +13,9 @@
|
|
|
13
13
|
**Beathers** is a flexible utility library built for developers who want **full control** over their **design system**.
|
|
14
14
|
It compiles only what you need, based on a **configuration file** (`.js`, `.ts`, or `.json`) where you define your own colors (with `light`/`dark` variants), `fonts`, `breakpoints`, and more.
|
|
15
15
|
You can _enable_ or _disable_ entire sections like typography or layout helpers to keep your CSS output minimal and tailored.
|
|
16
|
-
|
|
16
|
+
|
|
17
|
+
Beathers features an **enhanced CLI experience** with professional, user-friendly console output including meaningful emojis, color coding, and clear formatting for all interactions. The CLI tools simplify config creation and support `importing fonts and color` packs with ease.
|
|
18
|
+
|
|
17
19
|
The library works with both `SCSS` and plain `CSS`, making it compatible with any modern **frontend** project, no matter your stack.
|
|
18
20
|
|
|
19
21
|
## Get Started
|
|
@@ -52,13 +54,13 @@ npx beathers
|
|
|
52
54
|
|
|
53
55
|
### CLI Commands
|
|
54
56
|
|
|
55
|
-
Beathers provides a comprehensive set of CLI commands to manage your design system:
|
|
57
|
+
Beathers provides a comprehensive set of CLI commands to manage your design system with an enhanced, user-friendly interface:
|
|
56
58
|
|
|
57
59
|
#### Configuration
|
|
58
60
|
|
|
59
|
-
- `npx beathers init` - Initialize a new configuration file
|
|
60
|
-
- `npx beathers` - Build theme from configuration
|
|
61
|
-
- `npx beathers
|
|
61
|
+
- `npx beathers init` - Initialize a new configuration file with interactive prompts
|
|
62
|
+
- `npx beathers` - Build theme from configuration with visual progress indicators
|
|
63
|
+
- `npx beathers` - Build with custom output path
|
|
62
64
|
|
|
63
65
|
#### Font Management
|
|
64
66
|
|
|
@@ -77,6 +79,7 @@ Beathers provides a comprehensive set of CLI commands to manage your design syst
|
|
|
77
79
|
|
|
78
80
|
- `npx beathers --help` - Show all available commands
|
|
79
81
|
- `npx beathers --version` - Show current version
|
|
82
|
+
-
|
|
80
83
|
|
|
81
84
|
### Import in Your Project
|
|
82
85
|
|
|
@@ -160,60 +163,85 @@ You can create one of these files in your project root:
|
|
|
160
163
|
|
|
161
164
|
### Common Configuration Properties
|
|
162
165
|
|
|
163
|
-
| Property
|
|
164
|
-
|
|
|
165
|
-
| **COLORS**
|
|
166
|
-
| `color` <br /> Color variants (as json)
|
|
167
|
-
| **TYPOGRAPHY**
|
|
168
|
-
| `defaultFontFamilies` <br /> Fallback fonts (as array)
|
|
169
|
-
| `fontMainPath` <br /> Your fonts path
|
|
170
|
-
| `fontFormat` <br /> Your fonts format
|
|
171
|
-
| `fontWeights` <br /> Your fonts weights (as array)
|
|
172
|
-
| `fontStyles` <br /> Your fonts styles (as array)
|
|
173
|
-
| `fontSizes` <br /> Your fonts sizes (as json)
|
|
174
|
-
| `textTruncate` <br /> Text truncation
|
|
175
|
-
| `fonts` <br /> Custom font definitions <br /> (Local/External) (as json)
|
|
176
|
-
| **SETTINGS**
|
|
177
|
-
| `axisDivisions` <br /> Grid system divisions
|
|
178
|
-
| `opacities` <br /> Available opacity values <br /> min: 0 - max: 100 (as array)
|
|
179
|
-
| `blurValues` <br /> Blur effect values (as array)
|
|
180
|
-
| `insetValues` <br /> Inset values (as array)
|
|
181
|
-
| `bordersValue` <br /> Default border width (as array)
|
|
182
|
-
| `radiuses` <br /> Border radius values (as array)
|
|
183
|
-
| `breakpoints` <br /> Responsive breakpoints (as json)
|
|
184
|
-
| `wrappers` <br /> Container widths (as json)
|
|
185
|
-
| `guttersValues` <br /> Spacing values (as json)
|
|
186
|
-
| **
|
|
187
|
-
| `
|
|
188
|
-
| `
|
|
189
|
-
| `
|
|
190
|
-
| `
|
|
191
|
-
| `
|
|
192
|
-
| `
|
|
193
|
-
|
|
|
194
|
-
| `
|
|
195
|
-
| `
|
|
196
|
-
| `
|
|
197
|
-
| `
|
|
198
|
-
| `
|
|
199
|
-
| `
|
|
200
|
-
| `
|
|
201
|
-
| `
|
|
202
|
-
| `
|
|
203
|
-
| `
|
|
204
|
-
| `
|
|
205
|
-
| `
|
|
206
|
-
| `
|
|
207
|
-
| `
|
|
208
|
-
| `
|
|
209
|
-
| `
|
|
210
|
-
| `
|
|
211
|
-
| `
|
|
212
|
-
| `
|
|
213
|
-
| `
|
|
214
|
-
| `
|
|
215
|
-
| `
|
|
216
|
-
| `
|
|
166
|
+
| Property | Type | Example |
|
|
167
|
+
| --------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
168
|
+
| **COLORS** |
|
|
169
|
+
| `color` <br /> Color variants (as json) | "color": { light: `#${string}$`, dark: `#${string}$` } | "primary": {"light": "#007bff", "dark": "#0056b3"} |
|
|
170
|
+
| **TYPOGRAPHY** |
|
|
171
|
+
| `defaultFontFamilies` <br /> Fallback fonts (as array) | `string[]` | ["system-ui", "sans-serif"] |
|
|
172
|
+
| `fontMainPath` <br /> Your fonts path | `string` | "/fonts/" |
|
|
173
|
+
| `fontFormat` <br /> Your fonts format | `string` | "woff2" |
|
|
174
|
+
| `fontWeights` <br /> Your fonts weights (as array) | `thin` \| `extra-light` \| `light` \| `regular` \| `medium` \| `semibold` \| `bold` \| `extra-bold` \| `black` | ["regular", "medium", "bold"] |
|
|
175
|
+
| `fontStyles` <br /> Your fonts styles (as array) | `normal`\|`italic`,`oblique` | ["normal"] |
|
|
176
|
+
| `fontSizes` <br /> Your fonts sizes (as json) | Record<`string`, `${number}px` \| `${number}rem` \| `${number}em`> | subtitle1: "16px" <br /> (Azvailable: h1, h2, h3, h4, h5, h6, subtitle1, subtitle2, button, body1, body2, caption, overline) <br /> (Note: You can add/remove) |
|
|
177
|
+
| `textTruncate` <br /> Text truncation | `number` | 3 |
|
|
178
|
+
| `fonts` <br /> Custom font definitions <br /> (Local/External) (as json) | {weights: same as `weights`, styles: same as `styles`, <br /> variants: {"fontName" :{title: `string`, unicode?: `string`, format?: `woff`, isLocal?: `boolean`, url?: `https://${string}`, `http://${string}`}}} | {variants: {"font1" :{title: "roboto"}}} |
|
|
179
|
+
| **SETTINGS** |
|
|
180
|
+
| `axisDivisions` <br /> Grid system divisions | `number` | 12 |
|
|
181
|
+
| `opacities` <br /> Available opacity values <br /> min: 0 - max: 100 (as array) | `number[]` | [10, 20] |
|
|
182
|
+
| `blurValues` <br /> Blur effect values (as array) | `number[]` | [2, 4, 8, 16, 32] |
|
|
183
|
+
| `insetValues` <br /> Inset values (as array) | `number[]` | [0, 5] |
|
|
184
|
+
| `bordersValue` <br /> Default border width (as array) | `number[]` | [1, 2] |
|
|
185
|
+
| `radiuses` <br /> Border radius values (as array) | `number[]` | [5,10,15] |
|
|
186
|
+
| `breakpoints` <br /> Responsive breakpoints (as json) | Record<`sm` \| `md` \| `lg` \| `xl` \| `xxl`, `${number}px` \| `${number}rem` \| `${number}em`> | {"sm": "640px", "md": "768px"} |
|
|
187
|
+
| `wrappers` <br /> Container widths (as json) | Record<`sm` \| `md` \| `lg` \| `xl` \| `xxl`, { width: `${number}px` \| `${number}rem` \| `${number}em`; padding?: `${number}px` `${number}rem` `${number}em`}> | {"sm": {"width": "540px", "padding":"15px"}} |
|
|
188
|
+
| `guttersValues` <br /> Spacing values (as json) | Record<`auto` \| `number`, `${number}px` \| `${number}rem` \| `${number}em`> | {"auto": "1rem", 1: "0.25rem"} |
|
|
189
|
+
| **GLASS** |
|
|
190
|
+
| `blur` <br /> Backdrop filter blur intensity | `0` \| `${number}px` | 8px |
|
|
191
|
+
| `borderThickness` <br /> Glass border width | `${number}px` \| `${number}rem` \| `${number}em` | 1px |
|
|
192
|
+
| `lightAngle` <br /> Angle for border lighting | `${number}deg` | 45deg |
|
|
193
|
+
| `glassColor` <br /> Base glass background color (as json) | `{ light?: "#${string}"; dark?: "#${string}" }` | {light: #ffffff, dark: #000000} |
|
|
194
|
+
| `border1Color` <br /> Primary border color (as json) | `{ light?: "#${string}"; dark?: "#${string}" }` | {light: #e6e6e6, dark: #303030} |
|
|
195
|
+
| `border2Color` <br /> Secondary border color (as json) | `{ light?: "#${string}"; dark?: "#${string}" }` | {light: #e6e6e6, dark: #303030} |
|
|
196
|
+
| **ROLES** |
|
|
197
|
+
| `useMediaQueries` <br /> Enable responsive utilities | `boolean` | `true` |
|
|
198
|
+
| `useFontFamilies` <br /> Include font family utilities | `boolean` | `true` |
|
|
199
|
+
| `useFontFamiliesMediaQueries` <br /> Include responsive font family utilities | `boolean` | `false` |
|
|
200
|
+
| `useFontSizes` <br /> Include font size utilities | `boolean` | `true` |
|
|
201
|
+
| `useFontSizesMediaQueries` <br /> Include responsive font size utilities | `boolean` | `true` |
|
|
202
|
+
| `useFontShapes` <br /> Include font style utilities | `boolean` | `true` |
|
|
203
|
+
| `useFontShapesMediaQueries` <br /> Include responsive font style utilities | `boolean` | `false` |
|
|
204
|
+
| `useTextAligns` <br /> Include text alignment utilities | `boolean` | `true` |
|
|
205
|
+
| `useTextAlignsMediaQueries` <br /> Include responsive text alignment utilities | `boolean` | `true` |
|
|
206
|
+
| `useTextTruncate` <br /> Include text truncation utilities | `boolean` | `true` |
|
|
207
|
+
| `useTextTruncateMediaQueries` <br /> Include responsive text truncation utilities | `boolean` | `true` |
|
|
208
|
+
| `useColors` <br /> Include color utilities | `boolean` | `true` |
|
|
209
|
+
| `useColorsOpacities` <br /> Include color opacity utilities | `boolean` | `true` |
|
|
210
|
+
| `useColorsLightMode` <br /> Include light mode colors | `boolean` | `true` |
|
|
211
|
+
| `useColorsDarkMode` <br /> Include dark mode colors | `boolean` | `true` |
|
|
212
|
+
| `useCurrentColors` <br /> Include currentColor utilities | `boolean` | `true` |
|
|
213
|
+
| `useRootColors` <br /> Include CSS custom properties | `boolean` | `true` |
|
|
214
|
+
| `useGrid` <br /> Include grid system | `boolean` | `true` |
|
|
215
|
+
| `useFlex` <br /> Include flexbox utilities | `boolean` | `true` |
|
|
216
|
+
| `useGridMediaQueries` <br /> Include responsive grid utilities | `boolean` | `true` |
|
|
217
|
+
| `useWrappers` <br /> Include container utilities | `boolean` | `true` |
|
|
218
|
+
| `useShadows` <br /> Include shadow utilities | `boolean` | `true` |
|
|
219
|
+
| `useShadowsMediaQueries` <br /> Include responsive shadow utilities | `boolean` | `false` |
|
|
220
|
+
| `useDisplays` <br /> Include display utilities | `boolean` | `true` |
|
|
221
|
+
| `useDisplaysMediaQueries` <br /> Include responsive display utilities | `boolean` | `false` |
|
|
222
|
+
| `useOverflows` <br /> Include overflow utilities | `boolean` | `true` |
|
|
223
|
+
| `useOverflowsMediaQueries` <br /> Include responsive overflow utilities | `boolean` | `false` |
|
|
224
|
+
| `useOpacities` <br /> Include opacity utilities | `boolean` | `true` |
|
|
225
|
+
| `useOpacitiesMediaQueries` <br /> Include responsive opacity utilities | `boolean` | `false` |
|
|
226
|
+
| `useBlur` <br /> Include blur utilities | `boolean` | `true` |
|
|
227
|
+
| `useBlurMediaQueries` <br /> Include responsive blur utilities | `boolean` | `false` |
|
|
228
|
+
| `useObjectFits` <br /> Include object-fit utilities | `boolean` | `true` |
|
|
229
|
+
| `useObjectFitsMediaQueries` <br /> Include responsive object-fit utilities | `boolean` | `false` |
|
|
230
|
+
| `usePositions` <br /> Include positioning utilities | `boolean` | `true` |
|
|
231
|
+
| `usePositionsMediaQueries` <br /> Include responsive positioning utilities | `boolean` | `false` |
|
|
232
|
+
| `useInsets` <br /> Include inset utilities | `boolean` | `true` |
|
|
233
|
+
| `useInsetsMediaQueries` <br /> Include responsive inset utilities | `boolean` | `false` |
|
|
234
|
+
| `useSizes` <br /> Include sizing utilities | `boolean` | `true` |
|
|
235
|
+
| `useSizesMediaQueries` <br /> Include responsive sizing utilities | `boolean` | `true` |
|
|
236
|
+
| `useGutters` <br /> Include spacing utilities | `boolean` | `true` |
|
|
237
|
+
| `useGuttersMediaQueries` <br /> Include responsive spacing utilities | `boolean` | `true` |
|
|
238
|
+
| `useBorders` <br /> Include border utilities | `boolean` | `true` |
|
|
239
|
+
| `useBordersMediaQueries` <br /> Include responsive border utilities | `boolean` | `false` |
|
|
240
|
+
| `useTextBorders` <br /> Include text border utilities | `boolean` | `true` |
|
|
241
|
+
| `useTextBordersMediaQueries` <br /> Include responsive text border utilities | `boolean` | `false` |
|
|
242
|
+
| `useRadius` <br /> Include border radius utilities | `boolean` | `true` |
|
|
243
|
+
| `useRadiusMediaQueries` <br /> Include responsive border radius utilities | `boolean` | `false` |
|
|
244
|
+
| `useGlass` <br /> Include glassmorphism utilities | `boolean` | `true` |
|
|
217
245
|
|
|
218
246
|
### TypeScript Configuration Example
|
|
219
247
|
|
|
@@ -248,7 +276,6 @@ export default {
|
|
|
248
276
|
},
|
|
249
277
|
},
|
|
250
278
|
roles: {
|
|
251
|
-
useIcons: false,
|
|
252
279
|
useBlur: false,
|
|
253
280
|
},
|
|
254
281
|
} satisfies Theme
|
package/scripts/cli.js
CHANGED
|
@@ -2,9 +2,7 @@
|
|
|
2
2
|
import { Commands } from '../scripts/commands/list.js';
|
|
3
3
|
async function main() {
|
|
4
4
|
const args = process.argv.slice(2);
|
|
5
|
-
|
|
6
|
-
if (command.startsWith('--local'))
|
|
7
|
-
command = 'build:pack';
|
|
5
|
+
const command = args[0] ?? 'build:pack';
|
|
8
6
|
const commands = Commands(args);
|
|
9
7
|
const action = commands[command] ?? commands.default;
|
|
10
8
|
await action();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"build.d.ts","sourceRoot":"","sources":["../../src/scripts/commands/build.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"build.d.ts","sourceRoot":"","sources":["../../src/scripts/commands/build.ts"],"names":[],"mappings":"AAkIA,wBAAsB,KAAK,kBAmC1B"}
|
|
@@ -20,7 +20,7 @@ if (isInstalledPackage) {
|
|
|
20
20
|
variablesPath = path.join(packageRoot, 'scss', '_variables.scss');
|
|
21
21
|
}
|
|
22
22
|
else {
|
|
23
|
-
packageRoot =
|
|
23
|
+
packageRoot = projectRoot;
|
|
24
24
|
// Write variables to src location for development builds
|
|
25
25
|
variablesPath = path.join(projectRoot, 'scss', '_variables.scss');
|
|
26
26
|
}
|
|
@@ -29,12 +29,16 @@ async function defaultTheme() {
|
|
|
29
29
|
try {
|
|
30
30
|
values = await ReadDefaultValues([path.join(projectRoot, 'scss', 'settings', '_index.scss')], [
|
|
31
31
|
'useMediaQueries',
|
|
32
|
-
'useIcons',
|
|
33
32
|
'useFontFamilies',
|
|
33
|
+
'useFontFamiliesMediaQueries',
|
|
34
34
|
'useFontSizes',
|
|
35
|
+
'useFontSizesMediaQueries',
|
|
35
36
|
'useFontShapes',
|
|
37
|
+
'useFontShapesMediaQueries',
|
|
36
38
|
'useTextAligns',
|
|
39
|
+
'useTextAlignsMediaQueries',
|
|
37
40
|
'useTextTruncate',
|
|
41
|
+
'useTextTruncateMediaQueries',
|
|
38
42
|
'useColors',
|
|
39
43
|
'useColorsOpacities',
|
|
40
44
|
'useColorsLightMode',
|
|
@@ -43,21 +47,34 @@ async function defaultTheme() {
|
|
|
43
47
|
'useRootColors',
|
|
44
48
|
'useGrid',
|
|
45
49
|
'useFlex',
|
|
46
|
-
'
|
|
50
|
+
'useGridMediaQueries',
|
|
47
51
|
'useWrappers',
|
|
48
52
|
'useShadows',
|
|
53
|
+
'useShadowsMediaQueries',
|
|
49
54
|
'useDisplays',
|
|
55
|
+
'useDisplaysMediaQueries',
|
|
50
56
|
'useOverflows',
|
|
57
|
+
'useOverflowsMediaQueries',
|
|
51
58
|
'useOpacities',
|
|
59
|
+
'useOpacitiesMediaQueries',
|
|
52
60
|
'useBlur',
|
|
61
|
+
'useBlurMediaQueries',
|
|
53
62
|
'useObjectFits',
|
|
63
|
+
'useObjectFitsMediaQueries',
|
|
54
64
|
'usePositions',
|
|
65
|
+
'usePositionsMediaQueries',
|
|
55
66
|
'useInsets',
|
|
67
|
+
'useInsetsMediaQueries',
|
|
56
68
|
'useSizes',
|
|
69
|
+
'useSizesMediaQueries',
|
|
57
70
|
'useGutters',
|
|
71
|
+
'useGuttersMediaQueries',
|
|
58
72
|
'useBorders',
|
|
73
|
+
'useBordersMediaQueries',
|
|
59
74
|
'useTextBorders',
|
|
75
|
+
'useTextBordersMediaQueries',
|
|
60
76
|
'useRadius',
|
|
77
|
+
'useRadiusMediaQueries',
|
|
61
78
|
'useGlass',
|
|
62
79
|
]);
|
|
63
80
|
}
|
|
@@ -74,22 +91,15 @@ async function BuildTheme(customOutputPath) {
|
|
|
74
91
|
const userConfigs = await LoadUserConfigs();
|
|
75
92
|
console.log('🔄 Building theme variables...');
|
|
76
93
|
const theme = DeepMerge(defaults, userConfigs);
|
|
77
|
-
const variablesString = BuildScssVariables(theme,
|
|
94
|
+
const variablesString = BuildScssVariables(theme, true);
|
|
78
95
|
await fs.writeFile(variablesPath, variablesString, { flag: 'w' });
|
|
79
|
-
console.log(`✅ Theme variables generated
|
|
96
|
+
console.log(`✅ Theme variables generated`);
|
|
80
97
|
console.log('');
|
|
81
98
|
console.log('🔨 Compiling SCSS to CSS...');
|
|
82
99
|
const userProjectRoot = process.cwd();
|
|
83
|
-
const scssSourcePath =
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
outputPath = path.join(userProjectRoot, customOutputPath);
|
|
87
|
-
console.log(`📁 Custom output directory: ${outputPath}`);
|
|
88
|
-
}
|
|
89
|
-
else {
|
|
90
|
-
outputPath = isInstalledPackage ? path.join(packageRoot, 'css') : path.join(projectRoot, '../css');
|
|
91
|
-
console.log(`📁 Default output directory: ${outputPath}`);
|
|
92
|
-
}
|
|
100
|
+
const scssSourcePath = path.join(packageRoot, 'scss');
|
|
101
|
+
const outputPath = path.join(userProjectRoot, customOutputPath);
|
|
102
|
+
console.log(`📁 Output directory: \x1b[36m${outputPath}\x1b[0m`);
|
|
93
103
|
await fs.ensureDir(outputPath);
|
|
94
104
|
const buildCommand = `sass --style compressed --source-map --embed-sources --no-error-css "${scssSourcePath}":"${outputPath}"`;
|
|
95
105
|
const { stdout } = await execAsync(buildCommand);
|
|
@@ -105,19 +115,31 @@ async function BuildTheme(customOutputPath) {
|
|
|
105
115
|
export async function Build() {
|
|
106
116
|
try {
|
|
107
117
|
console.log('🎨 Building \x1b[36mBeathers\x1b[0m theme...');
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
console.error('❌ Please provide an output path when using \x1b[33m--local\x1b[0m flag.');
|
|
117
|
-
process.exit(1);
|
|
118
|
+
const defaultOutputPath = 'public/css';
|
|
119
|
+
let outputPath = defaultOutputPath;
|
|
120
|
+
try {
|
|
121
|
+
// Try to load user config to get outputPath
|
|
122
|
+
const userConfigs = await LoadUserConfigs();
|
|
123
|
+
if (userConfigs?.outputPath) {
|
|
124
|
+
outputPath = userConfigs.outputPath;
|
|
125
|
+
console.log(`📁 Using output path from config: \x1b[36m${outputPath}\x1b[0m`);
|
|
118
126
|
}
|
|
127
|
+
else {
|
|
128
|
+
// No config file or no outputPath in config, ask user
|
|
129
|
+
console.log('🏠 Where would you like to save the compiled CSS files?');
|
|
130
|
+
console.log(`💡 Default: \x1b[36m${defaultOutputPath}\x1b[0m (press Enter to use default)`);
|
|
131
|
+
const customOutputPath = await promptInput('📁 Output path: ');
|
|
132
|
+
outputPath = customOutputPath.trim() || defaultOutputPath;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
catch {
|
|
136
|
+
// No config file exists, ask user
|
|
137
|
+
console.log('🏠 Where would you like to save the compiled CSS files?');
|
|
138
|
+
console.log(`💡 Default: \x1b[36m${defaultOutputPath}\x1b[0m (press Enter to use default)`);
|
|
139
|
+
const customOutputPath = await promptInput('📁 Output path: ');
|
|
140
|
+
outputPath = customOutputPath.trim() || defaultOutputPath;
|
|
119
141
|
}
|
|
120
|
-
await BuildTheme(
|
|
142
|
+
await BuildTheme(outputPath);
|
|
121
143
|
}
|
|
122
144
|
catch (error) {
|
|
123
145
|
console.error('❌ Failed to build theme:', error);
|
|
@@ -125,23 +147,8 @@ export async function Build() {
|
|
|
125
147
|
}
|
|
126
148
|
}
|
|
127
149
|
if (import.meta.url === `file://${process.argv[1]}`) {
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
const customOutputPath = await promptInput('📁 Output path (e.g., public/css): ');
|
|
133
|
-
if (!customOutputPath) {
|
|
134
|
-
console.error('❌ Please provide an output path when using \x1b[33m--local\x1b[0m flag.');
|
|
135
|
-
process.exit(1);
|
|
136
|
-
}
|
|
137
|
-
BuildTheme(customOutputPath).catch((error) => {
|
|
138
|
-
console.error('❌ Build failed:', error);
|
|
139
|
-
process.exit(1);
|
|
140
|
-
});
|
|
141
|
-
}
|
|
142
|
-
else
|
|
143
|
-
BuildTheme().catch((error) => {
|
|
144
|
-
console.error('❌ Build failed:', error);
|
|
145
|
-
process.exit(1);
|
|
146
|
-
});
|
|
150
|
+
Build().catch((error) => {
|
|
151
|
+
console.error('❌ Build failed:', error);
|
|
152
|
+
process.exit(1);
|
|
153
|
+
});
|
|
147
154
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"help.d.ts","sourceRoot":"","sources":["../../src/scripts/commands/help.ts"],"names":[],"mappings":"AAqBA,wBAAgB,IAAI,
|
|
1
|
+
{"version":3,"file":"help.d.ts","sourceRoot":"","sources":["../../src/scripts/commands/help.ts"],"names":[],"mappings":"AAqBA,wBAAgB,IAAI,SAqBnB"}
|
package/scripts/commands/help.js
CHANGED
|
@@ -35,8 +35,4 @@ export function Help() {
|
|
|
35
35
|
const formattedRow = row.map((cell, colIndex) => cell.padEnd(maxLengths[colIndex])).join(' ');
|
|
36
36
|
console.log(formattedRow);
|
|
37
37
|
});
|
|
38
|
-
console.log('\nFlags:');
|
|
39
|
-
console.log(" --local Build with user's custom output path (use with build command)");
|
|
40
|
-
console.log(' Example: npx beathers build:pack --local');
|
|
41
|
-
console.log();
|
|
42
38
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"init.d.ts","sourceRoot":"","sources":["../../src/scripts/commands/init.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"init.d.ts","sourceRoot":"","sources":["../../src/scripts/commands/init.ts"],"names":[],"mappings":"AAiGA,wBAAsB,IAAI,kBA6DzB"}
|
package/scripts/commands/init.js
CHANGED
|
@@ -38,12 +38,16 @@ async function getDefaultValues() {
|
|
|
38
38
|
'glassBorder2Color',
|
|
39
39
|
'glassLightAngle',
|
|
40
40
|
'useMediaQueries',
|
|
41
|
-
'useIcons',
|
|
42
41
|
'useFontFamilies',
|
|
42
|
+
'useFontFamiliesMediaQueries',
|
|
43
43
|
'useFontSizes',
|
|
44
|
+
'useFontSizesMediaQueries',
|
|
44
45
|
'useFontShapes',
|
|
46
|
+
'useFontShapesMediaQueries',
|
|
45
47
|
'useTextAligns',
|
|
48
|
+
'useTextAlignsMediaQueries',
|
|
46
49
|
'useTextTruncate',
|
|
50
|
+
'useTextTruncateMediaQueries',
|
|
47
51
|
'useColors',
|
|
48
52
|
'useColorsOpacities',
|
|
49
53
|
'useColorsLightMode',
|
|
@@ -52,21 +56,34 @@ async function getDefaultValues() {
|
|
|
52
56
|
'useRootColors',
|
|
53
57
|
'useGrid',
|
|
54
58
|
'useFlex',
|
|
55
|
-
'
|
|
59
|
+
'useGridMediaQueries',
|
|
56
60
|
'useWrappers',
|
|
57
61
|
'useShadows',
|
|
62
|
+
'useShadowsMediaQueries',
|
|
58
63
|
'useDisplays',
|
|
64
|
+
'useDisplaysMediaQueries',
|
|
59
65
|
'useOverflows',
|
|
66
|
+
'useOverflowsMediaQueries',
|
|
60
67
|
'useOpacities',
|
|
68
|
+
'useOpacitiesMediaQueries',
|
|
61
69
|
'useBlur',
|
|
70
|
+
'useBlurMediaQueries',
|
|
62
71
|
'useObjectFits',
|
|
72
|
+
'useObjectFitsMediaQueries',
|
|
63
73
|
'usePositions',
|
|
74
|
+
'usePositionsMediaQueries',
|
|
64
75
|
'useInsets',
|
|
76
|
+
'useInsetsMediaQueries',
|
|
65
77
|
'useSizes',
|
|
78
|
+
'useSizesMediaQueries',
|
|
66
79
|
'useGutters',
|
|
80
|
+
'useGuttersMediaQueries',
|
|
67
81
|
'useBorders',
|
|
82
|
+
'useBordersMediaQueries',
|
|
68
83
|
'useTextBorders',
|
|
84
|
+
'useTextBordersMediaQueries',
|
|
69
85
|
'useRadius',
|
|
86
|
+
'useRadiusMediaQueries',
|
|
70
87
|
'useGlass',
|
|
71
88
|
]));
|
|
72
89
|
}
|
|
@@ -75,6 +92,7 @@ export async function Init() {
|
|
|
75
92
|
const formatMap = { json: 'beathers.configs.json', js: 'beathers.configs.js', ts: 'beathers.configs.ts' };
|
|
76
93
|
const fileName = formatMap[format];
|
|
77
94
|
const filePath = path.join(process.cwd(), fileName);
|
|
95
|
+
const outputPath = 'public/css';
|
|
78
96
|
if (await fs.pathExists(filePath)) {
|
|
79
97
|
const shouldOverride = await promptUser(`\x1b[33m⚠️ ${fileName} already exists. Do you want to override it?\x1b[0m\n\x1b[32m[Y]\x1b[0m Yes \x1b[31m[N]\x1b[0m No: `);
|
|
80
98
|
if (!shouldOverride) {
|
|
@@ -83,6 +101,7 @@ export async function Init() {
|
|
|
83
101
|
}
|
|
84
102
|
}
|
|
85
103
|
const includeStarterValues = await promptUser('\x1b[36m📝 Would you like to include starter configuration values?\x1b[0m\n\x1b[32m[Y]\x1b[0m Yes \x1b[31m[N]\x1b[0m No: ');
|
|
104
|
+
const defaultValues = await getDefaultValues();
|
|
86
105
|
const emptyTemplate = {
|
|
87
106
|
colors: {},
|
|
88
107
|
typography: {
|
|
@@ -108,29 +127,15 @@ export async function Init() {
|
|
|
108
127
|
},
|
|
109
128
|
roles: {},
|
|
110
129
|
};
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
}
|
|
121
|
-
else
|
|
122
|
-
content = `export default ${JSON.stringify(emptyTemplate, null, 2)}`;
|
|
123
|
-
}
|
|
124
|
-
else if (format === 'ts') {
|
|
125
|
-
const importLine = "import type { Theme } from 'beathers'\n\n";
|
|
126
|
-
if (includeStarterValues) {
|
|
127
|
-
const defaultValues = await getDefaultValues();
|
|
128
|
-
content = `${importLine}export default ${JSON.stringify(defaultValues, null, 2)} satisfies Theme`;
|
|
129
|
-
}
|
|
130
|
-
else
|
|
131
|
-
content = `${importLine}export default ${JSON.stringify(emptyTemplate, null, 2)} satisfies Theme`;
|
|
132
|
-
}
|
|
133
|
-
await fs.writeFile(filePath, content);
|
|
130
|
+
const data = includeStarterValues ? defaultValues : emptyTemplate;
|
|
131
|
+
const finalData = { ...data, outputPath };
|
|
132
|
+
const content = JSON.stringify(finalData, null, 2);
|
|
133
|
+
let pageContent = content;
|
|
134
|
+
if (format === 'js')
|
|
135
|
+
pageContent = `export default ${content}`;
|
|
136
|
+
else if (format === 'ts')
|
|
137
|
+
pageContent = `import type { Theme } from 'beathers'\n\nexport default ${content} satisfies Theme`;
|
|
138
|
+
await fs.writeFile(filePath, pageContent);
|
|
134
139
|
const starterText = includeStarterValues ? ' with starter values' : '';
|
|
135
140
|
console.log(`✅ Successfully created \x1b[32m${fileName}\x1b[0m${starterText}`);
|
|
136
141
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../src/scripts/commands/list.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../src/scripts/commands/list.ts"],"names":[],"mappings":"AAgCA,wBAAgB,QAAQ,CAAC,IAAI,EAAE,GAAG,wBACC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,EAUtD;AAED,MAAM,MAAM,UAAU,GAClB,QAAQ,GACR,IAAI,GACJ,WAAW,GACX,MAAM,GACN,YAAY,GACZ,UAAU,GACV,aAAa,GACb,oBAAoB,GACpB,YAAY,GACZ,cAAc,GACd,mBAAmB,GACnB,cAAc,CAAA"}
|
package/scripts/commands/list.js
CHANGED
|
@@ -6,7 +6,6 @@ const commands = {
|
|
|
6
6
|
'--version': () => Version(),
|
|
7
7
|
init: async () => await Init(),
|
|
8
8
|
'build:pack': async () => await Build(),
|
|
9
|
-
'--local': async () => await Build(),
|
|
10
9
|
'add-font': async () => await AddFont(),
|
|
11
10
|
'remove-font': async () => await RemoveFont(),
|
|
12
11
|
'import-font-sample': async () => await ImportFont(),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BuildScssVariables.d.ts","sourceRoot":"","sources":["../../src/scripts/helpers/BuildScssVariables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;
|
|
1
|
+
{"version":3,"file":"BuildScssVariables.d.ts","sourceRoot":"","sources":["../../src/scripts/helpers/BuildScssVariables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAgLnC,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,KAAK,EAAE,YAAY,GAAE,OAAe,GAAG,MAAM,CAWtF"}
|