beathers 5.4.0 → 5.4.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/readme.md CHANGED
@@ -1,256 +1,263 @@
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
- [![License](https://img.shields.io/badge/license-MIT-black.svg)](https://opensource.org/licenses/MIT)
8
- [![Changelog](https://img.shields.io/badge/Changelog-View-blue?style=flat)](https://www.npmjs.com/package/beathers?activeTab=code)
9
-
10
- Beathers is a lightweight, powerful SCSS library designed to accelerate your web development workflow.**Everything is fully customizable** through a simple configuration file, allowing you to tailor every aspect to match your brand and requirements. It offers a comprehensive suite of SCSS mixins, variables, and utility classes, enabling you to build responsive, visually appealing web applications with complete design control.
11
-
12
- ## Get Started
13
-
14
- ### Installation
15
-
16
- ```bash
17
- npm install beathers
18
- # or
19
- yarn add beathers
20
- # or
21
- pnpm add beathers
22
- ```
23
-
24
- ### Create Configuration File
25
-
26
- Use the interactive CLI to create your theme configuration:
27
-
28
- ```bash
29
- npx beathers init
30
- ```
31
-
32
- This will prompt you to:
33
-
34
- - Choose your configuration file format (JSON, JS, or TypeScript)
35
- - Set up initial theme values like colors and typography
36
- - Configure which features to enable/disable
37
-
38
- ### Build Your Theme
39
-
40
- Generate your custom CSS from the configuration:
41
-
42
- ```bash
43
- npx beathers
44
- ```
45
-
46
- ### CLI Commands
47
-
48
- Beathers provides a comprehensive set of CLI commands to manage your design system:
49
-
50
- #### Configuration
51
-
52
- - `npx beathers init` - Initialize a new configuration file
53
- - `npx beathers` - Build theme from configuration
54
- - `npx beathers --local` - Build with custom output path
55
-
56
- #### Font Management
57
-
58
- - `npx beathers add-font` - Add a new font to your configuration
59
- - `npx beathers remove-font` - Remove a font from your configuration
60
- - `npx beathers import-font-sample` - Import a sample font configuration
61
-
62
- #### Color Management
63
-
64
- - `npx beathers add-colors` - Add new colors to your configuration
65
- - `npx beathers remove-color` - Remove a color from your configuration
66
- - `npx beathers import-color-pack` - Import a complete color pack from available packs
67
- - `npx beathers import-color` - Import a specific color from available packs
68
-
69
- #### Help & Information
70
-
71
- - `npx beathers --help` - Show all available commands
72
- - `npx beathers --version` - Show current version
73
-
74
- ### Import in Your Project
75
-
76
- **CSS Import (Recommended):**
77
-
78
- ```css
79
- /* Import the compiled CSS */
80
- @import 'node_modules/beathers/css/beathers.min.css';
81
- ```
82
-
83
- **SCSS Import:**
84
-
85
- ```scss
86
- // Import the entire library
87
- @import 'node_modules/beathers/scss/beathers.min.scss';
88
-
89
- // Or import specific modules
90
- @import 'node_modules/beathers/scss/functions/colors';
91
- @import 'node_modules/beathers/scss/style/grid';
92
-
93
- // Or import using @use with changing variables
94
- @use 'node_modules/beathers/scss/beathers.min.scss' with (
95
- $colors: (
96
- 1: (
97
- 'light': '#000000',
98
- 'dark': '$ffffff',
99
- ),
100
- )
101
- );
102
- ```
103
-
104
- **JavaScript/Framework Import:**
105
-
106
- ```javascript
107
- // Next.js, React, Vue, Angular
108
- import 'beathers/css/beathers.min.css'
109
- ```
110
-
111
- ### Example Configuration
112
-
113
- ```json
114
- {
115
- "colors": {
116
- "primary": { "light": "#007bff", "dark": "#0056b3" },
117
- "success": { "light": "#28a745", "dark": "#20c997" }
118
- },
119
- "typography": {
120
- "defaultFontFamilies": ["Inter", "system-ui", "sans-serif"]
121
- },
122
- "settings": {
123
- "axisDivisions": 12,
124
- "breakpoints": {
125
- "sm": "640px",
126
- "md": "768px",
127
- "lg": "1024px"
128
- }
129
- }
130
- }
131
- ```
132
-
133
- ## Configuration
134
-
135
- Beathers uses a configuration file to customize your theme. All options are optional and have sensible defaults.
136
-
137
- ### Configuration File Options
138
-
139
- You can create one of these files in your project root:
140
-
141
- - `beathers.configs.json` - JSON format
142
- - `beathers.configs.js` - JavaScript format
143
- - `beathers.configs.ts` - TypeScript format (with type safety)
144
-
145
- ### Key Configuration Sections
146
-
147
- | Section | Description | Purpose |
148
- | -------------- | -------------------------------------------------- | --------------------------------------------------- |
149
- | **colors** | Define your color palette with light/dark variants | Brand colors, state colors (success, warning, etc.) |
150
- | **typography** | Configure fonts, sizes, and text settings | Font families, weights, sizes, and formatting |
151
- | **settings** | Layout and spacing configuration | Grid system, breakpoints, spacing values |
152
- | **roles** | Enable/disable specific features | Control which utilities are generated |
153
-
154
- ### Common Configuration Properties
155
-
156
- | Property | Type | Example |
157
- | ------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
158
- | **COLORS** |
159
- | `color` <br /> Color variants (as json) | "color": { light: `#${string}$`, dark: `#${string}$` } | "primary": {"light": "#007bff", "dark": "#0056b3"} |
160
- | **TYPOGRAPHY** |
161
- | `defaultFontFamilies` <br /> Fallback fonts (as array) | `string[]` | ["system-ui", "sans-serif"] |
162
- | `fontMainPath` <br /> Your fonts path | `string` | "/fonts/" |
163
- | `fontFormat` <br /> Your fonts format | `string` | "woff2" |
164
- | `fontWeights` <br /> Your fonts weights (as array) | `thin`,`extra-light`,`light`,`regular`,<br />`medium`,`semibold`,`bold`,`extra-bold`,`black` | ["regular", "medium", "bold"] |
165
- | `fontStyles` <br /> Your fonts styles (as array) | `normal`,`italic`,`oblique` | ["normal"] |
166
- | `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) |
167
- | `textTruncate` <br /> Text truncation | `number` | 3 |
168
- | `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"}}} |
169
- | **SETTINGS** |
170
- | `axisDivisions` <br /> Grid system divisions | `number` | 12 |
171
- | `opacities` <br /> Available opacity values <br /> min: 0 - max: 100 (as array) | `number[]` | [10, 20] |
172
- | `blurValues` <br /> Blur effect values (as array) | `number[]` | [2, 4, 8, 16, 32] |
173
- | `insetValues` <br /> Inset values (as array) | `number[]` | [0, 5] |
174
- | `bordersValue` <br /> Default border width (as array) | `number[]` | [1, 2] |
175
- | `radiuses` <br /> Border radius values (as array) | `number[]` | [5,10,15] |
176
- | `breakpoints` <br /> Responsive breakpoints (as json) | Record<(`sm` , `md` , `lg` , `xl` , `xxl`), `${number}px` `${number}rem` `${number}em`> | {"sm": "640px", "md": "768px"} |
177
- | `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"}} |
178
- | `guttersValues` <br /> Spacing values (as json) | Record<(`auto`, `number`), `${number}px` `${number}rem` `${number}em`> | {"auto": "1rem", 1: "0.25rem"} |
179
- | **ROLES** |
180
- | `useMediaQueries` <br /> Enable responsive utilities | `boolean` | `true` |
181
- | `useIcons` <br /> Include icon styles | `boolean` | `true` |
182
- | `useFontFamilies` <br /> Include font family utilities | `boolean` | `true` |
183
- | `useFontSizes` <br /> Include font size utilities | `boolean` | `true` |
184
- | `useFontShapes` <br /> Include font style utilities | `boolean` | `true` |
185
- | `useTextAligns` <br /> Include text alignment utilities | `boolean` | `true` |
186
- | `useTextTruncate` <br /> Include text truncation utilities | `boolean` | `true` |
187
- | `useColors` <br /> Include color utilities | `boolean` | `true` |
188
- | `useColorsOpacities` <br /> Include color opacity utilities | `boolean` | `true` |
189
- | `useColorsLightMode` <br /> Include light mode colors | `boolean` | `true` |
190
- | `useColorsDarkMode` <br /> Include dark mode colors | `boolean` | `true` |
191
- | `useCurrentColors` <br /> Include currentColor utilities | `boolean` | `true` |
192
- | `useRootColors` <br /> Include CSS custom properties | `boolean` | `true` |
193
- | `useGrid` <br /> Include grid system | `boolean` | `true` |
194
- | `useFlex` <br /> Include flexbox utilities | `boolean` | `true` |
195
- | `useTransitions` <br /> Include transition utilities | `boolean` | `true` |
196
- | `useWrappers` <br /> Include container utilities | `boolean` | `true` |
197
- | `useShadows` <br /> Include shadow utilities | `boolean` | `true` |
198
- | `useDisplays` <br /> Include display utilities | `boolean` | `true` |
199
- | `useOverflows` <br /> Include overflow utilities | `boolean` | `true` |
200
- | `useOpacities` <br /> Include opacity utilities | `boolean` | `true` |
201
- | `useBlur` <br /> Include blur utilities | `boolean` | `true` |
202
- | `useObjectFits` <br /> Include object-fit utilities | `boolean` | `true` |
203
- | `usePositions` <br /> Include positioning utilities | `boolean` | `true` |
204
- | `useInsets` <br /> Include inset utilities | `boolean` | `true` |
205
- | `useSizes` <br /> Include sizing utilities | `boolean` | `true` |
206
- | `useGutters` <br /> Include spacing utilities | `boolean` | `true` |
207
- | `useBorders` <br /> Include border utilities | `boolean` | `true` |
208
- | `useTextBorders` <br /> Include text border utilities | `boolean` | `true` |
209
- | `useRadius` <br /> Include border radius utilities | `boolean` | `true` |
210
-
211
- ### TypeScript Configuration Example
212
-
213
- ```typescript
214
- // beathers.configs.ts
215
- import { Theme } from 'beathers'
216
-
217
- export default {
218
- colors: {
219
- primary: { light: '#007bff', dark: '#0056b3' },
220
- secondary: { light: '#6c757d', dark: '#495057' },
221
- success: { light: '#28a745', dark: '#20c997' },
222
- },
223
- typography: {
224
- defaultFontFamilies: ['Inter', 'system-ui', 'sans-serif'],
225
- fontSizes: {
226
- xs: '12px',
227
- sm: '14px',
228
- base: '16px',
229
- lg: '18px',
230
- xl: '20px',
231
- },
232
- },
233
- settings: {
234
- axisDivisions: 12,
235
- breakpoints: {
236
- sm: '640px',
237
- md: '768px',
238
- lg: '1024px',
239
- xl: '1280px',
240
- xxl: '1536px',
241
- },
242
- },
243
- roles: {
244
- useIcons: false,
245
- useBlur: false,
246
- },
247
- } satisfies Theme
248
- ```
249
-
250
- ## Contact & Support
251
-
252
- [![Website](https://img.shields.io/badge/Website-bhoenixstudio.com/beathers-blue?style=for-the-badge&logo=globe)](https://bhoenixstudio.com/beathers)
253
-
254
- [![Documentation](https://img.shields.io/badge/Documentation-Full%20Docs-green?style=for-the-badge&logo=book)](https://bhoenixstudio.com/beathers)
255
-
256
- [![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
+ Beathers also includes `CLI tools` that simplify config creation and support `importing fonts and color` packs with ease.
17
+ The library works with both `SCSS` and plain `CSS`, making it compatible with any modern **frontend** project, no matter your stack.
18
+
19
+ ## Get Started
20
+
21
+ ### Installation
22
+
23
+ ```bash
24
+ npm install beathers
25
+ # or
26
+ yarn add beathers
27
+ # or
28
+ pnpm add beathers
29
+ ```
30
+
31
+ ### Create Configuration File
32
+
33
+ Use the interactive CLI to create your theme configuration:
34
+
35
+ ```bash
36
+ npx beathers init
37
+ ```
38
+
39
+ This will prompt you to:
40
+
41
+ - Choose your configuration file format (JSON, JS, or TypeScript)
42
+ - Set up initial theme values like colors and typography
43
+ - Configure which features to enable/disable
44
+
45
+ ### Build Your Theme
46
+
47
+ Generate your custom CSS from the configuration:
48
+
49
+ ```bash
50
+ npx beathers
51
+ ```
52
+
53
+ ### CLI Commands
54
+
55
+ Beathers provides a comprehensive set of CLI commands to manage your design system:
56
+
57
+ #### Configuration
58
+
59
+ - `npx beathers init` - Initialize a new configuration file
60
+ - `npx beathers` - Build theme from configuration
61
+ - `npx beathers --local` - Build with custom output path
62
+
63
+ #### Font Management
64
+
65
+ - `npx beathers add-font` - Add a new font to your configuration
66
+ - `npx beathers remove-font` - Remove a font from your configuration
67
+ - `npx beathers import-font-sample` - Import a sample font configuration
68
+
69
+ #### Color Management
70
+
71
+ - `npx beathers add-colors` - Add new colors to your configuration
72
+ - `npx beathers remove-color` - Remove a color from your configuration
73
+ - `npx beathers import-color-pack` - Import a complete color pack from available packs
74
+ - `npx beathers import-color` - Import a specific color from available packs
75
+
76
+ #### Help & Information
77
+
78
+ - `npx beathers --help` - Show all available commands
79
+ - `npx beathers --version` - Show current version
80
+
81
+ ### Import in Your Project
82
+
83
+ **CSS Import (Recommended):**
84
+
85
+ ```css
86
+ /* Import the compiled CSS */
87
+ @import 'node_modules/beathers/css/beathers.min.css';
88
+ ```
89
+
90
+ **SCSS Import:**
91
+
92
+ ```scss
93
+ // Import the entire library
94
+ @import 'node_modules/beathers/scss/beathers.min.scss';
95
+
96
+ // Or import specific modules
97
+ @import 'node_modules/beathers/scss/functions/colors';
98
+ @import 'node_modules/beathers/scss/style/grid';
99
+
100
+ // Or import using @use with changing variables
101
+ @use 'node_modules/beathers/scss/beathers.min.scss' with (
102
+ $colors: (
103
+ 1: (
104
+ 'light': '#000000',
105
+ 'dark': '$ffffff',
106
+ ),
107
+ )
108
+ );
109
+ ```
110
+
111
+ **JavaScript/Framework Import:**
112
+
113
+ ```javascript
114
+ // Next.js, React, Vue, Angular
115
+ import 'beathers/css/beathers.min.css'
116
+ ```
117
+
118
+ ### Example Configuration
119
+
120
+ ```json
121
+ {
122
+ "colors": {
123
+ "primary": { "light": "#007bff", "dark": "#0056b3" },
124
+ "success": { "light": "#28a745", "dark": "#20c997" }
125
+ },
126
+ "typography": {
127
+ "defaultFontFamilies": ["Inter", "system-ui", "sans-serif"]
128
+ },
129
+ "settings": {
130
+ "axisDivisions": 12,
131
+ "breakpoints": {
132
+ "sm": "640px",
133
+ "md": "768px",
134
+ "lg": "1024px"
135
+ }
136
+ }
137
+ }
138
+ ```
139
+
140
+ ## Configuration
141
+
142
+ Beathers uses a configuration file to customize your theme. All options are optional and have sensible defaults.
143
+
144
+ ### Configuration File Options
145
+
146
+ You can create one of these files in your project root:
147
+
148
+ - `beathers.configs.json` - JSON format
149
+ - `beathers.configs.js` - JavaScript format
150
+ - `beathers.configs.ts` - TypeScript format (with type safety)
151
+
152
+ ### Key Configuration Sections
153
+
154
+ | Section | Description | Purpose |
155
+ | -------------- | -------------------------------------------------- | --------------------------------------------------- |
156
+ | **colors** | Define your color palette with light/dark variants | Brand colors, state colors (success, warning, etc.) |
157
+ | **typography** | Configure fonts, sizes, and text settings | Font families, weights, sizes, and formatting |
158
+ | **settings** | Layout and spacing configuration | Grid system, breakpoints, spacing values |
159
+ | **roles** | Enable/disable specific features | Control which utilities are generated |
160
+
161
+ ### Common Configuration Properties
162
+
163
+ | Property | Type | Example |
164
+ | ------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
165
+ | **COLORS** |
166
+ | `color` <br /> Color variants (as json) | "color": { light: `#${string}$`, dark: `#${string}$` } | "primary": {"light": "#007bff", "dark": "#0056b3"} |
167
+ | **TYPOGRAPHY** |
168
+ | `defaultFontFamilies` <br /> Fallback fonts (as array) | `string[]` | ["system-ui", "sans-serif"] |
169
+ | `fontMainPath` <br /> Your fonts path | `string` | "/fonts/" |
170
+ | `fontFormat` <br /> Your fonts format | `string` | "woff2" |
171
+ | `fontWeights` <br /> Your fonts weights (as array) | `thin`,`extra-light`,`light`,`regular`,<br />`medium`,`semibold`,`bold`,`extra-bold`,`black` | ["regular", "medium", "bold"] |
172
+ | `fontStyles` <br /> Your fonts styles (as array) | `normal`,`italic`,`oblique` | ["normal"] |
173
+ | `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) |
174
+ | `textTruncate` <br /> Text truncation | `number` | 3 |
175
+ | `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"}}} |
176
+ | **SETTINGS** |
177
+ | `axisDivisions` <br /> Grid system divisions | `number` | 12 |
178
+ | `opacities` <br /> Available opacity values <br /> min: 0 - max: 100 (as array) | `number[]` | [10, 20] |
179
+ | `blurValues` <br /> Blur effect values (as array) | `number[]` | [2, 4, 8, 16, 32] |
180
+ | `insetValues` <br /> Inset values (as array) | `number[]` | [0, 5] |
181
+ | `bordersValue` <br /> Default border width (as array) | `number[]` | [1, 2] |
182
+ | `radiuses` <br /> Border radius values (as array) | `number[]` | [5,10,15] |
183
+ | `breakpoints` <br /> Responsive breakpoints (as json) | Record<(`sm` , `md` , `lg` , `xl` , `xxl`), `${number}px` `${number}rem` `${number}em`> | {"sm": "640px", "md": "768px"} |
184
+ | `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"}} |
185
+ | `guttersValues` <br /> Spacing values (as json) | Record<(`auto`, `number`), `${number}px` `${number}rem` `${number}em`> | {"auto": "1rem", 1: "0.25rem"} |
186
+ | **ROLES** |
187
+ | `useMediaQueries` <br /> Enable responsive utilities | `boolean` | `true` |
188
+ | `useIcons` <br /> Include icon styles | `boolean` | `true` |
189
+ | `useFontFamilies` <br /> Include font family utilities | `boolean` | `true` |
190
+ | `useFontSizes` <br /> Include font size utilities | `boolean` | `true` |
191
+ | `useFontShapes` <br /> Include font style utilities | `boolean` | `true` |
192
+ | `useTextAligns` <br /> Include text alignment utilities | `boolean` | `true` |
193
+ | `useTextTruncate` <br /> Include text truncation utilities | `boolean` | `true` |
194
+ | `useColors` <br /> Include color utilities | `boolean` | `true` |
195
+ | `useColorsOpacities` <br /> Include color opacity utilities | `boolean` | `true` |
196
+ | `useColorsLightMode` <br /> Include light mode colors | `boolean` | `true` |
197
+ | `useColorsDarkMode` <br /> Include dark mode colors | `boolean` | `true` |
198
+ | `useCurrentColors` <br /> Include currentColor utilities | `boolean` | `true` |
199
+ | `useRootColors` <br /> Include CSS custom properties | `boolean` | `true` |
200
+ | `useGrid` <br /> Include grid system | `boolean` | `true` |
201
+ | `useFlex` <br /> Include flexbox utilities | `boolean` | `true` |
202
+ | `useTransitions` <br /> Include transition utilities | `boolean` | `true` |
203
+ | `useWrappers` <br /> Include container utilities | `boolean` | `true` |
204
+ | `useShadows` <br /> Include shadow utilities | `boolean` | `true` |
205
+ | `useDisplays` <br /> Include display utilities | `boolean` | `true` |
206
+ | `useOverflows` <br /> Include overflow utilities | `boolean` | `true` |
207
+ | `useOpacities` <br /> Include opacity utilities | `boolean` | `true` |
208
+ | `useBlur` <br /> Include blur utilities | `boolean` | `true` |
209
+ | `useObjectFits` <br /> Include object-fit utilities | `boolean` | `true` |
210
+ | `usePositions` <br /> Include positioning utilities | `boolean` | `true` |
211
+ | `useInsets` <br /> Include inset utilities | `boolean` | `true` |
212
+ | `useSizes` <br /> Include sizing utilities | `boolean` | `true` |
213
+ | `useGutters` <br /> Include spacing utilities | `boolean` | `true` |
214
+ | `useBorders` <br /> Include border utilities | `boolean` | `true` |
215
+ | `useTextBorders` <br /> Include text border utilities | `boolean` | `true` |
216
+ | `useRadius` <br /> Include border radius utilities | `boolean` | `true` |
217
+
218
+ ### TypeScript Configuration Example
219
+
220
+ ```typescript
221
+ // beathers.configs.ts
222
+ import { Theme } from 'beathers'
223
+
224
+ export default {
225
+ colors: {
226
+ primary: { light: '#007bff', dark: '#0056b3' },
227
+ secondary: { light: '#6c757d', dark: '#495057' },
228
+ success: { light: '#28a745', dark: '#20c997' },
229
+ },
230
+ typography: {
231
+ defaultFontFamilies: ['Inter', 'system-ui', 'sans-serif'],
232
+ fontSizes: {
233
+ xs: '12px',
234
+ sm: '14px',
235
+ base: '16px',
236
+ lg: '18px',
237
+ xl: '20px',
238
+ },
239
+ },
240
+ settings: {
241
+ axisDivisions: 12,
242
+ breakpoints: {
243
+ sm: '640px',
244
+ md: '768px',
245
+ lg: '1024px',
246
+ xl: '1280px',
247
+ xxl: '1536px',
248
+ },
249
+ },
250
+ roles: {
251
+ useIcons: false,
252
+ useBlur: false,
253
+ },
254
+ } satisfies Theme
255
+ ```
256
+
257
+ ## Contact & Support
258
+
259
+ [![Website](https://img.shields.io/badge/Website-bhoenixstudio.com/beathers-blue?style=for-the-badge&logo=globe)](https://bhoenixstudio.com/beathers)
260
+
261
+ [![Documentation](https://img.shields.io/badge/Documentation-Full%20Docs-green?style=for-the-badge&logo=book)](https://bhoenixstudio.com/beathers)
262
+
263
+ [![Email](https://img.shields.io/badge/Email-contact@bhoenixstudio.com-red?style=for-the-badge&logo=gmail)](mailto:contact@bhoenixstudio.com)
package/scripts/cli.js CHANGED
File without changes