beathers 5.5.4 → 5.6.2
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 +52 -0
- package/css/beathers.min.css +2 -2
- package/css/beathers.min.css.map +1 -1
- package/package.json +2 -1
- package/readme.md +97 -70
- package/scripts/cli.js +1 -3
- package/scripts/commands/build.d.ts.map +1 -1
- package/scripts/commands/build.js +51 -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 -26
- package/scripts/commands/list.d.ts.map +1 -1
- package/scripts/commands/list.js +0 -1
- package/scripts/helpers/Merge.d.ts.map +1 -1
- package/scripts/helpers/Merge.js +2 -2
- package/scripts/helpers/ReadDefaultValues.d.ts.map +1 -1
- package/scripts/helpers/ReadDefaultValues.js +20 -3
- package/scripts/types.d.ts +3 -1
- package/scripts/types.d.ts.map +1 -1
- package/scss/_variables.scss +19 -3
- package/scss/beathers.min.scss +1 -1
- package/scss/functions/_mediaQueries.scss +10 -7
- package/scss/functions/_others.scss +0 -8
- package/scss/settings/_configs.scss +14 -39
- package/scss/settings/_index.scss +19 -5
- package/scss/style/_grid.scss +8 -5
- 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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "beathers",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.6.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Beather is a lightweight SCSS library that serves as a comprehensive design system for your projects. It offers a structured and consistent approach to manage colors, fonts, and other design related variables, making it easier to maintain a cohesive visual identity across your application.",
|
|
6
6
|
"main": "index.js",
|
|
@@ -81,6 +81,7 @@
|
|
|
81
81
|
"scss/**/*.scss",
|
|
82
82
|
"public/images/logo.png",
|
|
83
83
|
"public/fonts/*.{woff,woff2}",
|
|
84
|
+
"docs/*.{md}",
|
|
84
85
|
"CHANGELOG",
|
|
85
86
|
"readme.md"
|
|
86
87
|
],
|
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,68 +163,84 @@ 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
|
-
| **GLASS**
|
|
187
|
-
| `blur` <br /> Backdrop filter blur intensity
|
|
188
|
-
| `borderThickness` <br /> Glass border width
|
|
189
|
-
| `lightAngle` <br /> Angle for border lighting
|
|
190
|
-
| `glassColor` <br /> Base glass background color (as json)
|
|
191
|
-
| `border1Color` <br /> Primary border color (as json)
|
|
192
|
-
| `border2Color` <br /> Secondary border color (as json)
|
|
193
|
-
| **ROLES**
|
|
194
|
-
| `
|
|
195
|
-
| `
|
|
196
|
-
| `
|
|
197
|
-
| `
|
|
198
|
-
| `useFontShapes` <br /> Include font style utilities
|
|
199
|
-
| `
|
|
200
|
-
| `
|
|
201
|
-
| `
|
|
202
|
-
| `
|
|
203
|
-
| `
|
|
204
|
-
| `
|
|
205
|
-
| `
|
|
206
|
-
| `
|
|
207
|
-
| `
|
|
208
|
-
| `
|
|
209
|
-
| `
|
|
210
|
-
| `
|
|
211
|
-
| `
|
|
212
|
-
| `
|
|
213
|
-
| `
|
|
214
|
-
| `
|
|
215
|
-
| `
|
|
216
|
-
| `
|
|
217
|
-
| `
|
|
218
|
-
| `
|
|
219
|
-
| `
|
|
220
|
-
| `
|
|
221
|
-
| `
|
|
222
|
-
| `
|
|
223
|
-
| `
|
|
224
|
-
| `
|
|
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
|
+
| `useFontFamilies` <br /> Include font family utilities | `boolean` | `true` |
|
|
198
|
+
| `useFontFamiliesMediaQueries` <br /> Include responsive font family utilities | `boolean` | `false` |
|
|
199
|
+
| `useFontSizes` <br /> Include font size utilities | `boolean` | `true` |
|
|
200
|
+
| `useFontSizesMediaQueries` <br /> Include responsive font size utilities | `boolean` | `true` |
|
|
201
|
+
| `useFontShapes` <br /> Include font style utilities | `boolean` | `true` |
|
|
202
|
+
| `useFontShapesMediaQueries` <br /> Include responsive font style utilities | `boolean` | `false` |
|
|
203
|
+
| `useTextAligns` <br /> Include text alignment utilities | `boolean` | `true` |
|
|
204
|
+
| `useTextAlignsMediaQueries` <br /> Include responsive text alignment utilities | `boolean` | `true` |
|
|
205
|
+
| `useTextTruncate` <br /> Include text truncation utilities | `boolean` | `true` |
|
|
206
|
+
| `useTextTruncateMediaQueries` <br /> Include responsive text truncation utilities | `boolean` | `true` |
|
|
207
|
+
| `useColors` <br /> Include color utilities | `boolean` | `true` |
|
|
208
|
+
| `useColorsOpacities` <br /> Include color opacity utilities | `boolean` | `true` |
|
|
209
|
+
| `useColorsLightMode` <br /> Include light mode colors | `boolean` | `true` |
|
|
210
|
+
| `useColorsDarkMode` <br /> Include dark mode colors | `boolean` | `true` |
|
|
211
|
+
| `useCurrentColors` <br /> Include currentColor utilities | `boolean` | `true` |
|
|
212
|
+
| `useRootColors` <br /> Include CSS custom properties | `boolean` | `true` |
|
|
213
|
+
| `useGrid` <br /> Include grid system | `boolean` | `true` |
|
|
214
|
+
| `useFlex` <br /> Include flexbox utilities | `boolean` | `true` |
|
|
215
|
+
| `useGridMediaQueries` <br /> Include responsive grid utilities | `boolean` | `true` |
|
|
216
|
+
| `useWrappers` <br /> Include container utilities | `boolean` | `true` |
|
|
217
|
+
| `useShadows` <br /> Include shadow utilities | `boolean` | `true` |
|
|
218
|
+
| `useShadowsMediaQueries` <br /> Include responsive shadow utilities | `boolean` | `false` |
|
|
219
|
+
| `useDisplays` <br /> Include display utilities | `boolean` | `true` |
|
|
220
|
+
| `useDisplaysMediaQueries` <br /> Include responsive display utilities | `boolean` | `false` |
|
|
221
|
+
| `useOverflows` <br /> Include overflow utilities | `boolean` | `true` |
|
|
222
|
+
| `useOverflowsMediaQueries` <br /> Include responsive overflow utilities | `boolean` | `false` |
|
|
223
|
+
| `useOpacities` <br /> Include opacity utilities | `boolean` | `true` |
|
|
224
|
+
| `useOpacitiesMediaQueries` <br /> Include responsive opacity utilities | `boolean` | `false` |
|
|
225
|
+
| `useBlur` <br /> Include blur utilities | `boolean` | `true` |
|
|
226
|
+
| `useBlurMediaQueries` <br /> Include responsive blur utilities | `boolean` | `false` |
|
|
227
|
+
| `useObjectFits` <br /> Include object-fit utilities | `boolean` | `true` |
|
|
228
|
+
| `useObjectFitsMediaQueries` <br /> Include responsive object-fit utilities | `boolean` | `false` |
|
|
229
|
+
| `usePositions` <br /> Include positioning utilities | `boolean` | `true` |
|
|
230
|
+
| `usePositionsMediaQueries` <br /> Include responsive positioning utilities | `boolean` | `false` |
|
|
231
|
+
| `useInsets` <br /> Include inset utilities | `boolean` | `true` |
|
|
232
|
+
| `useInsetsMediaQueries` <br /> Include responsive inset utilities | `boolean` | `false` |
|
|
233
|
+
| `useSizes` <br /> Include sizing utilities | `boolean` | `true` |
|
|
234
|
+
| `useSizesMediaQueries` <br /> Include responsive sizing utilities | `boolean` | `true` |
|
|
235
|
+
| `useGutters` <br /> Include spacing utilities | `boolean` | `true` |
|
|
236
|
+
| `useGuttersMediaQueries` <br /> Include responsive spacing utilities | `boolean` | `true` |
|
|
237
|
+
| `useBorders` <br /> Include border utilities | `boolean` | `true` |
|
|
238
|
+
| `useBordersMediaQueries` <br /> Include responsive border utilities | `boolean` | `false` |
|
|
239
|
+
| `useTextBorders` <br /> Include text border utilities | `boolean` | `true` |
|
|
240
|
+
| `useTextBordersMediaQueries` <br /> Include responsive text border utilities | `boolean` | `false` |
|
|
241
|
+
| `useRadius` <br /> Include border radius utilities | `boolean` | `true` |
|
|
242
|
+
| `useRadiusMediaQueries` <br /> Include responsive border radius utilities | `boolean` | `false` |
|
|
243
|
+
| `useGlass` <br /> Include glassmorphism utilities | `boolean` | `true` |
|
|
225
244
|
|
|
226
245
|
### TypeScript Configuration Example
|
|
227
246
|
|
|
@@ -256,16 +275,24 @@ export default {
|
|
|
256
275
|
},
|
|
257
276
|
},
|
|
258
277
|
roles: {
|
|
259
|
-
useIcons: false,
|
|
260
278
|
useBlur: false,
|
|
261
279
|
},
|
|
262
280
|
} satisfies Theme
|
|
263
281
|
```
|
|
264
282
|
|
|
283
|
+
## Documentation
|
|
284
|
+
|
|
285
|
+
Comprehensive guides to help you master Beathers and build amazing designs with our utility-first CSS framework.
|
|
286
|
+
|
|
287
|
+
- **Colors & Theming** → [Colors Guide](https://www.npmjs.com/package/docs/colors.md)
|
|
288
|
+
- **Typography & Text** → [Typography Guide](https://www.npmjs.com/package/docs/typography.md)
|
|
289
|
+
- **Layout & Structure** → [Grid System Guide](https://www.npmjs.com/package/docs/grid-system.md)
|
|
290
|
+
- **Visual Effects** → [Shaping Guide](https://www.npmjs.com/package/docs/shaping.md)
|
|
291
|
+
|
|
292
|
+
---
|
|
293
|
+
|
|
265
294
|
## Contact & Support
|
|
266
295
|
|
|
267
296
|
[](https://bhoenixstudio.com/beathers)
|
|
268
297
|
|
|
269
|
-
[](https://bhoenixstudio.com/beathers)
|
|
270
|
-
|
|
271
298
|
[](mailto:contact@bhoenixstudio.com)
|
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":"AAiIA,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
|
}
|
|
@@ -28,13 +28,16 @@ async function defaultTheme() {
|
|
|
28
28
|
let values = null;
|
|
29
29
|
try {
|
|
30
30
|
values = await ReadDefaultValues([path.join(projectRoot, 'scss', 'settings', '_index.scss')], [
|
|
31
|
-
'useMediaQueries',
|
|
32
|
-
'useIcons',
|
|
33
31
|
'useFontFamilies',
|
|
32
|
+
'useFontFamiliesMediaQueries',
|
|
34
33
|
'useFontSizes',
|
|
34
|
+
'useFontSizesMediaQueries',
|
|
35
35
|
'useFontShapes',
|
|
36
|
+
'useFontShapesMediaQueries',
|
|
36
37
|
'useTextAligns',
|
|
38
|
+
'useTextAlignsMediaQueries',
|
|
37
39
|
'useTextTruncate',
|
|
40
|
+
'useTextTruncateMediaQueries',
|
|
38
41
|
'useColors',
|
|
39
42
|
'useColorsOpacities',
|
|
40
43
|
'useColorsLightMode',
|
|
@@ -43,21 +46,34 @@ async function defaultTheme() {
|
|
|
43
46
|
'useRootColors',
|
|
44
47
|
'useGrid',
|
|
45
48
|
'useFlex',
|
|
46
|
-
'
|
|
49
|
+
'useGridMediaQueries',
|
|
47
50
|
'useWrappers',
|
|
48
51
|
'useShadows',
|
|
52
|
+
'useShadowsMediaQueries',
|
|
49
53
|
'useDisplays',
|
|
54
|
+
'useDisplaysMediaQueries',
|
|
50
55
|
'useOverflows',
|
|
56
|
+
'useOverflowsMediaQueries',
|
|
51
57
|
'useOpacities',
|
|
58
|
+
'useOpacitiesMediaQueries',
|
|
52
59
|
'useBlur',
|
|
60
|
+
'useBlurMediaQueries',
|
|
53
61
|
'useObjectFits',
|
|
62
|
+
'useObjectFitsMediaQueries',
|
|
54
63
|
'usePositions',
|
|
64
|
+
'usePositionsMediaQueries',
|
|
55
65
|
'useInsets',
|
|
66
|
+
'useInsetsMediaQueries',
|
|
56
67
|
'useSizes',
|
|
68
|
+
'useSizesMediaQueries',
|
|
57
69
|
'useGutters',
|
|
70
|
+
'useGuttersMediaQueries',
|
|
58
71
|
'useBorders',
|
|
72
|
+
'useBordersMediaQueries',
|
|
59
73
|
'useTextBorders',
|
|
74
|
+
'useTextBordersMediaQueries',
|
|
60
75
|
'useRadius',
|
|
76
|
+
'useRadiusMediaQueries',
|
|
61
77
|
'useGlass',
|
|
62
78
|
]);
|
|
63
79
|
}
|
|
@@ -74,22 +90,15 @@ async function BuildTheme(customOutputPath) {
|
|
|
74
90
|
const userConfigs = await LoadUserConfigs();
|
|
75
91
|
console.log('🔄 Building theme variables...');
|
|
76
92
|
const theme = DeepMerge(defaults, userConfigs);
|
|
77
|
-
const variablesString = BuildScssVariables(theme,
|
|
93
|
+
const variablesString = BuildScssVariables(theme, true);
|
|
78
94
|
await fs.writeFile(variablesPath, variablesString, { flag: 'w' });
|
|
79
95
|
console.log(`✅ Theme variables generated`);
|
|
80
96
|
console.log('');
|
|
81
97
|
console.log('🔨 Compiling SCSS to CSS...');
|
|
82
98
|
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
|
-
}
|
|
99
|
+
const scssSourcePath = path.join(packageRoot, 'scss');
|
|
100
|
+
const outputPath = path.join(userProjectRoot, customOutputPath);
|
|
101
|
+
console.log(`📁 Output directory: \x1b[36m${outputPath}\x1b[0m`);
|
|
93
102
|
await fs.ensureDir(outputPath);
|
|
94
103
|
const buildCommand = `sass --style compressed --source-map --embed-sources --no-error-css "${scssSourcePath}":"${outputPath}"`;
|
|
95
104
|
const { stdout } = await execAsync(buildCommand);
|
|
@@ -105,19 +114,31 @@ async function BuildTheme(customOutputPath) {
|
|
|
105
114
|
export async function Build() {
|
|
106
115
|
try {
|
|
107
116
|
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);
|
|
117
|
+
const defaultOutputPath = 'public/css';
|
|
118
|
+
let outputPath = defaultOutputPath;
|
|
119
|
+
try {
|
|
120
|
+
// Try to load user config to get outputPath
|
|
121
|
+
const userConfigs = await LoadUserConfigs();
|
|
122
|
+
if (userConfigs?.outputPath) {
|
|
123
|
+
outputPath = userConfigs.outputPath;
|
|
124
|
+
console.log(`📁 Using output path from config: \x1b[36m${outputPath}\x1b[0m`);
|
|
118
125
|
}
|
|
126
|
+
else {
|
|
127
|
+
// No config file or no outputPath in config, ask user
|
|
128
|
+
console.log('🏠 Where would you like to save the compiled CSS files?');
|
|
129
|
+
console.log(`💡 Default: \x1b[36m${defaultOutputPath}\x1b[0m (press Enter to use default)`);
|
|
130
|
+
const customOutputPath = await promptInput('📁 Output path: ');
|
|
131
|
+
outputPath = customOutputPath.trim() || defaultOutputPath;
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
catch {
|
|
135
|
+
// No config file exists, ask user
|
|
136
|
+
console.log('🏠 Where would you like to save the compiled CSS files?');
|
|
137
|
+
console.log(`💡 Default: \x1b[36m${defaultOutputPath}\x1b[0m (press Enter to use default)`);
|
|
138
|
+
const customOutputPath = await promptInput('📁 Output path: ');
|
|
139
|
+
outputPath = customOutputPath.trim() || defaultOutputPath;
|
|
119
140
|
}
|
|
120
|
-
await BuildTheme(
|
|
141
|
+
await BuildTheme(outputPath);
|
|
121
142
|
}
|
|
122
143
|
catch (error) {
|
|
123
144
|
console.error('❌ Failed to build theme:', error);
|
|
@@ -125,23 +146,8 @@ export async function Build() {
|
|
|
125
146
|
}
|
|
126
147
|
}
|
|
127
148
|
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
|
-
});
|
|
149
|
+
Build().catch((error) => {
|
|
150
|
+
console.error('❌ Build failed:', error);
|
|
151
|
+
process.exit(1);
|
|
152
|
+
});
|
|
147
153
|
}
|
|
@@ -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":"AAgGA,wBAAsB,IAAI,kBA6DzB"}
|