beathers 5.7.3 → 5.7.5

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.

Potentially problematic release.

This version of beathers might be problematic. Click here for more details.

Files changed (30) hide show
  1. package/.prettierrc.js +8 -8
  2. package/CHANGELOG +274 -267
  3. package/css/beathers.min.css +3 -3
  4. package/css/beathers.min.css.map +1 -1
  5. package/docs/colors.md +250 -250
  6. package/docs/grid-system.md +130 -130
  7. package/docs/shaping.md +272 -272
  8. package/docs/typography.md +124 -124
  9. package/package.json +105 -101
  10. package/readme.md +301 -301
  11. package/scripts/cli.js +0 -0
  12. package/scss/_variables.scss +106 -106
  13. package/scss/beathers.min.scss +15 -15
  14. package/scss/functions/_colors.scss +230 -230
  15. package/scss/functions/_mediaQueries.scss +136 -136
  16. package/scss/functions/_others.scss +79 -79
  17. package/scss/functions/_typographic.scss +129 -129
  18. package/scss/functions/_validations.scss +251 -251
  19. package/scss/settings/_configs.scss +270 -270
  20. package/scss/settings/_defaults.scss +214 -214
  21. package/scss/settings/_index.scss +90 -90
  22. package/scss/style/_button.scss +101 -101
  23. package/scss/style/_colors.scss +146 -146
  24. package/scss/style/_dialog.scss +146 -146
  25. package/scss/style/_glass.scss +80 -80
  26. package/scss/style/_grid.scss +95 -95
  27. package/scss/style/_loader.scss +62 -62
  28. package/scss/style/_resets.scss +168 -168
  29. package/scss/style/_shaping.scss +439 -432
  30. package/scss/style/_typographic.scss +345 -345
package/readme.md CHANGED
@@ -1,301 +1,301 @@
1
- <div align="center">
2
- <img src="https://unpkg.com/beathers@latest/public/images/logo.png" alt="Beathers logo" width="700" height="312">
3
- <p align="center">The Perfect Fusion of Strength and Featherlight Agility</p>
4
- </div>
5
-
6
- [![Version](https://img.shields.io/npm/v/beathers.svg?color=orange)](https://www.npmjs.com/package/beathers)
7
- [![Downloads](https://img.shields.io/npm/dt/beathers?color=blue)](https://www.npmjs.com/package/beathers)
8
- [![Changelog](https://img.shields.io/badge/Changelog-View-blue?style=flat)](https://www.npmjs.com/package/beathers?activeTab=code)
9
- ![NPM Type](https://img.shields.io/badge/bundle-NPM%20Library-informational?style=flat)
10
- ![TypeScript](https://img.shields.io/badge/TypeScript-Supported-3178C6?logo=typescript&logoColor=white&style=flat)
11
- [![License](https://img.shields.io/badge/license-MIT-black.svg)](https://opensource.org/licenses/MIT)
12
-
13
- **Beathers** is a flexible utility library built for developers who want **full control** over their **design system**.
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
- You can _enable_ or _disable_ entire sections like typography or layout helpers to keep your CSS output minimal and tailored.
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
-
19
- The library works with both `SCSS` and plain `CSS`, making it compatible with any modern **frontend** project, no matter your stack.
20
-
21
- ## Get Started
22
-
23
- ### Installation
24
-
25
- ```bash
26
- npm install beathers
27
- # or
28
- yarn add beathers
29
- # or
30
- pnpm add beathers
31
- ```
32
-
33
- ### Create Configuration File
34
-
35
- Use the interactive CLI to create your theme configuration:
36
-
37
- ```bash
38
- npx beathers init
39
- ```
40
-
41
- This will prompt you to:
42
-
43
- - Choose your configuration file format (JSON, JS, or TypeScript)
44
- - Set up initial theme values like colors and typography
45
- - Configure which features to enable/disable
46
-
47
- ### Build Your Theme
48
-
49
- Generate your custom CSS from the configuration:
50
-
51
- ```bash
52
- npx beathers
53
- ```
54
-
55
- ### CLI Commands
56
-
57
- Beathers provides a comprehensive set of CLI commands to manage your design system with an enhanced, user-friendly interface:
58
-
59
- #### Configuration
60
-
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
64
-
65
- #### Font Management
66
-
67
- - `npx beathers add-font` - Add a new font to your configuration
68
- - `npx beathers remove-font` - Remove a font from your configuration
69
- - `npx beathers import-font-sample` - Import a sample font configuration
70
-
71
- #### Color Management
72
-
73
- - `npx beathers add-colors` - Add new colors to your configuration
74
- - `npx beathers remove-color` - Remove a color from your configuration
75
- - `npx beathers import-color-pack` - Import a complete color pack from available packs
76
- - `npx beathers import-color` - Import a specific color from available packs
77
-
78
- #### Help & Information
79
-
80
- - `npx beathers --help` - Show all available commands
81
- - `npx beathers --version` - Show current version
82
- -
83
-
84
- ### Import in Your Project
85
-
86
- **CSS Import (Recommended):**
87
-
88
- ```css
89
- /* Import the compiled CSS */
90
- @import 'node_modules/beathers/css/beathers.min.css';
91
- ```
92
-
93
- **SCSS Import:**
94
-
95
- ```scss
96
- // Import the entire library
97
- @import 'node_modules/beathers/scss/beathers.min.scss';
98
-
99
- // Or import specific modules
100
- @import 'node_modules/beathers/scss/functions/colors';
101
- @import 'node_modules/beathers/scss/style/grid';
102
-
103
- // Or import using @use with changing variables
104
- @use 'node_modules/beathers/scss/beathers.min.scss' with (
105
- $colors: (
106
- 1: (
107
- 'light': '#000000',
108
- 'dark': '$ffffff',
109
- ),
110
- )
111
- );
112
- ```
113
-
114
- **JavaScript/Framework Import:**
115
-
116
- ```javascript
117
- // Next.js, React, Vue, Angular
118
- import 'beathers/css/beathers.min.css'
119
- ```
120
-
121
- ### Example Configuration
122
-
123
- ```json
124
- {
125
- "colors": {
126
- "primary": { "light": "#007bff", "dark": "#0056b3" },
127
- "success": { "light": "#28a745", "dark": "#20c997" }
128
- },
129
- "typography": {
130
- "defaultFontFamilies": ["Inter", "system-ui", "sans-serif"]
131
- },
132
- "settings": {
133
- "axisDivisions": 12,
134
- "breakpoints": {
135
- "sm": "640px",
136
- "md": "768px",
137
- "lg": "1024px"
138
- }
139
- }
140
- }
141
- ```
142
-
143
- ## Configuration
144
-
145
- Beathers uses a configuration file to customize your theme. All options are optional and have sensible defaults.
146
-
147
- ### Configuration File Options
148
-
149
- You can create one of these files in your project root:
150
-
151
- - `beathers.configs.json` - JSON format
152
- - `beathers.configs.js` - JavaScript format
153
- - `beathers.configs.ts` - TypeScript format (with type safety)
154
-
155
- ### Key Configuration Sections
156
-
157
- | Section | Description | Purpose |
158
- | -------------- | -------------------------------------------------- | --------------------------------------------------- |
159
- | **colors** | Define your color palette with light/dark variants | Brand colors, state colors (success, warning, etc.) |
160
- | **typography** | Configure fonts, sizes, and text settings | Font families, weights, sizes, and formatting |
161
- | **settings** | Layout and spacing configuration | Grid system, breakpoints, spacing values |
162
- | **roles** | Enable/disable specific features | Control which utilities are generated |
163
-
164
- ### Common Configuration Properties
165
-
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` | `false` |
244
- | `useLoader` <br /> Include loader utilities | `boolean` | `false` |
245
- | `useDialog` <br /> Include dialog utilities | `boolean` | `false` |
246
- | `useButton` <br /> Include button utilities | `boolean` | `false` |
247
-
248
- ### TypeScript Configuration Example
249
-
250
- ```typescript
251
- // beathers.configs.ts
252
- import { Theme } from 'beathers'
253
-
254
- export default {
255
- colors: {
256
- primary: { light: '#007bff', dark: '#0056b3' },
257
- secondary: { light: '#6c757d', dark: '#495057' },
258
- success: { light: '#28a745', dark: '#20c997' },
259
- },
260
- typography: {
261
- defaultFontFamilies: ['Inter', 'system-ui', 'sans-serif'],
262
- fontSizes: {
263
- xs: '12px',
264
- sm: '14px',
265
- base: '16px',
266
- lg: '18px',
267
- xl: '20px',
268
- },
269
- },
270
- settings: {
271
- axisDivisions: 12,
272
- breakpoints: {
273
- sm: '640px',
274
- md: '768px',
275
- lg: '1024px',
276
- xl: '1280px',
277
- xxl: '1536px',
278
- },
279
- },
280
- roles: {
281
- useBlur: false,
282
- },
283
- } satisfies Theme
284
- ```
285
-
286
- ## Documentation
287
-
288
- Comprehensive guides to help you master Beathers and build amazing designs with our utility-first CSS framework.
289
-
290
- - **Colors & Theming** → [Colors Guide](https://www.npmjs.com/package/docs/colors.md)
291
- - **Typography & Text** → [Typography Guide](https://www.npmjs.com/package/docs/typography.md)
292
- - **Layout & Structure** → [Grid System Guide](https://www.npmjs.com/package/docs/grid-system.md)
293
- - **Visual Effects** → [Shaping Guide](https://www.npmjs.com/package/docs/shaping.md)
294
-
295
- ---
296
-
297
- ## Contact & Support
298
-
299
- [![Website](https://img.shields.io/badge/Website-bhoenixstudio.com/beathers-blue?style=for-the-badge&logo=globe)](https://bhoenixstudio.com/beathers)
300
-
301
- [![Email](https://img.shields.io/badge/Email-contact@bhoenixstudio.com-red?style=for-the-badge&logo=gmail)](mailto:contact@bhoenixstudio.com)
1
+ <div align="center">
2
+ <img src="https://unpkg.com/beathers@latest/public/images/logo.png" alt="Beathers logo" width="700" height="312">
3
+ <p align="center">The Perfect Fusion of Strength and Featherlight Agility</p>
4
+ </div>
5
+
6
+ [![Version](https://img.shields.io/npm/v/beathers.svg?color=orange)](https://www.npmjs.com/package/beathers)
7
+ [![Downloads](https://img.shields.io/npm/dt/beathers?color=blue)](https://www.npmjs.com/package/beathers)
8
+ [![Changelog](https://img.shields.io/badge/Changelog-View-blue?style=flat)](https://www.npmjs.com/package/beathers?activeTab=code)
9
+ ![NPM Type](https://img.shields.io/badge/bundle-NPM%20Library-informational?style=flat)
10
+ ![TypeScript](https://img.shields.io/badge/TypeScript-Supported-3178C6?logo=typescript&logoColor=white&style=flat)
11
+ [![License](https://img.shields.io/badge/license-MIT-black.svg)](https://opensource.org/licenses/MIT)
12
+
13
+ **Beathers** is a flexible utility library built for developers who want **full control** over their **design system**.
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
+ You can _enable_ or _disable_ entire sections like typography or layout helpers to keep your CSS output minimal and tailored.
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
+
19
+ The library works with both `SCSS` and plain `CSS`, making it compatible with any modern **frontend** project, no matter your stack.
20
+
21
+ ## Get Started
22
+
23
+ ### Installation
24
+
25
+ ```bash
26
+ npm install beathers
27
+ # or
28
+ yarn add beathers
29
+ # or
30
+ pnpm add beathers
31
+ ```
32
+
33
+ ### Create Configuration File
34
+
35
+ Use the interactive CLI to create your theme configuration:
36
+
37
+ ```bash
38
+ npx beathers init
39
+ ```
40
+
41
+ This will prompt you to:
42
+
43
+ - Choose your configuration file format (JSON, JS, or TypeScript)
44
+ - Set up initial theme values like colors and typography
45
+ - Configure which features to enable/disable
46
+
47
+ ### Build Your Theme
48
+
49
+ Generate your custom CSS from the configuration:
50
+
51
+ ```bash
52
+ npx beathers
53
+ ```
54
+
55
+ ### CLI Commands
56
+
57
+ Beathers provides a comprehensive set of CLI commands to manage your design system with an enhanced, user-friendly interface:
58
+
59
+ #### Configuration
60
+
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
64
+
65
+ #### Font Management
66
+
67
+ - `npx beathers add-font` - Add a new font to your configuration
68
+ - `npx beathers remove-font` - Remove a font from your configuration
69
+ - `npx beathers import-font-sample` - Import a sample font configuration
70
+
71
+ #### Color Management
72
+
73
+ - `npx beathers add-colors` - Add new colors to your configuration
74
+ - `npx beathers remove-color` - Remove a color from your configuration
75
+ - `npx beathers import-color-pack` - Import a complete color pack from available packs
76
+ - `npx beathers import-color` - Import a specific color from available packs
77
+
78
+ #### Help & Information
79
+
80
+ - `npx beathers --help` - Show all available commands
81
+ - `npx beathers --version` - Show current version
82
+ -
83
+
84
+ ### Import in Your Project
85
+
86
+ **CSS Import (Recommended):**
87
+
88
+ ```css
89
+ /* Import the compiled CSS */
90
+ @import 'node_modules/beathers/css/beathers.min.css';
91
+ ```
92
+
93
+ **SCSS Import:**
94
+
95
+ ```scss
96
+ // Import the entire library
97
+ @import 'node_modules/beathers/scss/beathers.min.scss';
98
+
99
+ // Or import specific modules
100
+ @import 'node_modules/beathers/scss/functions/colors';
101
+ @import 'node_modules/beathers/scss/style/grid';
102
+
103
+ // Or import using @use with changing variables
104
+ @use 'node_modules/beathers/scss/beathers.min.scss' with (
105
+ $colors: (
106
+ 1: (
107
+ 'light': '#000000',
108
+ 'dark': '$ffffff',
109
+ ),
110
+ )
111
+ );
112
+ ```
113
+
114
+ **JavaScript/Framework Import:**
115
+
116
+ ```javascript
117
+ // Next.js, React, Vue, Angular
118
+ import 'beathers/css/beathers.min.css'
119
+ ```
120
+
121
+ ### Example Configuration
122
+
123
+ ```json
124
+ {
125
+ "colors": {
126
+ "primary": { "light": "#007bff", "dark": "#0056b3" },
127
+ "success": { "light": "#28a745", "dark": "#20c997" }
128
+ },
129
+ "typography": {
130
+ "defaultFontFamilies": ["Inter", "system-ui", "sans-serif"]
131
+ },
132
+ "settings": {
133
+ "axisDivisions": 12,
134
+ "breakpoints": {
135
+ "sm": "640px",
136
+ "md": "768px",
137
+ "lg": "1024px"
138
+ }
139
+ }
140
+ }
141
+ ```
142
+
143
+ ## Configuration
144
+
145
+ Beathers uses a configuration file to customize your theme. All options are optional and have sensible defaults.
146
+
147
+ ### Configuration File Options
148
+
149
+ You can create one of these files in your project root:
150
+
151
+ - `beathers.configs.json` - JSON format
152
+ - `beathers.configs.js` - JavaScript format
153
+ - `beathers.configs.ts` - TypeScript format (with type safety)
154
+
155
+ ### Key Configuration Sections
156
+
157
+ | Section | Description | Purpose |
158
+ | -------------- | -------------------------------------------------- | --------------------------------------------------- |
159
+ | **colors** | Define your color palette with light/dark variants | Brand colors, state colors (success, warning, etc.) |
160
+ | **typography** | Configure fonts, sizes, and text settings | Font families, weights, sizes, and formatting |
161
+ | **settings** | Layout and spacing configuration | Grid system, breakpoints, spacing values |
162
+ | **roles** | Enable/disable specific features | Control which utilities are generated |
163
+
164
+ ### Common Configuration Properties
165
+
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` | `false` |
244
+ | `useLoader` <br /> Include loader utilities | `boolean` | `false` |
245
+ | `useDialog` <br /> Include dialog utilities | `boolean` | `false` |
246
+ | `useButton` <br /> Include button utilities | `boolean` | `false` |
247
+
248
+ ### TypeScript Configuration Example
249
+
250
+ ```typescript
251
+ // beathers.configs.ts
252
+ import { Theme } from 'beathers'
253
+
254
+ export default {
255
+ colors: {
256
+ primary: { light: '#007bff', dark: '#0056b3' },
257
+ secondary: { light: '#6c757d', dark: '#495057' },
258
+ success: { light: '#28a745', dark: '#20c997' },
259
+ },
260
+ typography: {
261
+ defaultFontFamilies: ['Inter', 'system-ui', 'sans-serif'],
262
+ fontSizes: {
263
+ xs: '12px',
264
+ sm: '14px',
265
+ base: '16px',
266
+ lg: '18px',
267
+ xl: '20px',
268
+ },
269
+ },
270
+ settings: {
271
+ axisDivisions: 12,
272
+ breakpoints: {
273
+ sm: '640px',
274
+ md: '768px',
275
+ lg: '1024px',
276
+ xl: '1280px',
277
+ xxl: '1536px',
278
+ },
279
+ },
280
+ roles: {
281
+ useBlur: false,
282
+ },
283
+ } satisfies Theme
284
+ ```
285
+
286
+ ## Documentation
287
+
288
+ Comprehensive guides to help you master Beathers and build amazing designs with our utility-first CSS framework.
289
+
290
+ - **Colors & Theming** → [Colors Guide](https://www.npmjs.com/package/docs/colors.md)
291
+ - **Typography & Text** → [Typography Guide](https://www.npmjs.com/package/docs/typography.md)
292
+ - **Layout & Structure** → [Grid System Guide](https://www.npmjs.com/package/docs/grid-system.md)
293
+ - **Visual Effects** → [Shaping Guide](https://www.npmjs.com/package/docs/shaping.md)
294
+
295
+ ---
296
+
297
+ ## Contact & Support
298
+
299
+ [![Website](https://img.shields.io/badge/Website-bhoenixstudio.com/beathers-blue?style=for-the-badge&logo=globe)](https://bhoenixstudio.com/beathers)
300
+
301
+ [![Email](https://img.shields.io/badge/Email-contact@bhoenixstudio.com-red?style=for-the-badge&logo=gmail)](mailto:contact@bhoenixstudio.com)