beathers 5.0.0 → 5.1.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/dist/css/beathers.min.css +1 -1
- package/dist/css/beathers.min.css.map +1 -1
- package/dist/scripts/BuildTheme.js +5 -74
- package/dist/scripts/cli.js +212 -1
- package/dist/scripts/types.d.ts +2 -4
- package/package.json +35 -39
- package/public/images/logo.png +0 -0
- package/readme.md +217 -235
- package/src/scss/_variables.scss +305 -305
- package/src/scss/beathers.min.scss +8 -8
- package/src/scss/functions/_colors.scss +232 -232
- package/src/scss/functions/_mediaQueries.scss +128 -128
- package/src/scss/functions/_others.scss +83 -83
- package/src/scss/functions/_typographic.scss +125 -125
- package/src/scss/functions/_validations.scss +256 -256
- package/src/scss/settings/_defaults.scss +251 -251
- package/src/scss/settings/_index.scss +68 -68
- package/src/scss/settings/_resets.scss +103 -103
- package/src/scss/style/_colors.scss +139 -139
- package/src/scss/style/_grid.scss +92 -92
- package/src/scss/style/_shaping.scss +372 -372
- package/src/scss/style/_typographic.scss +304 -304
package/readme.md
CHANGED
|
@@ -1,235 +1,217 @@
|
|
|
1
|
-
<div align="center">
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
```
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
Configure
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
|
118
|
-
|
|
|
119
|
-
|
|
|
120
|
-
| `
|
|
121
|
-
|
|
|
122
|
-
| `
|
|
123
|
-
| `
|
|
124
|
-
| `
|
|
125
|
-
| `
|
|
126
|
-
|
|
|
127
|
-
| `
|
|
128
|
-
| `
|
|
129
|
-
| `
|
|
130
|
-
|
|
|
131
|
-
| `
|
|
132
|
-
| `
|
|
133
|
-
| `
|
|
134
|
-
| `
|
|
135
|
-
| `
|
|
136
|
-
|
|
|
137
|
-
| `
|
|
138
|
-
| `
|
|
139
|
-
| `
|
|
140
|
-
|
|
|
141
|
-
| `
|
|
142
|
-
| `
|
|
143
|
-
| `
|
|
144
|
-
| `
|
|
145
|
-
| `
|
|
146
|
-
| `
|
|
147
|
-
| `
|
|
148
|
-
| `
|
|
149
|
-
| `
|
|
150
|
-
| `
|
|
151
|
-
| `
|
|
152
|
-
|
|
|
153
|
-
| `
|
|
154
|
-
| `
|
|
155
|
-
| `
|
|
156
|
-
| `
|
|
157
|
-
| `
|
|
158
|
-
| `
|
|
159
|
-
| `
|
|
160
|
-
| `
|
|
161
|
-
| `
|
|
162
|
-
| `
|
|
163
|
-
| `
|
|
164
|
-
| `
|
|
165
|
-
| `
|
|
166
|
-
| `
|
|
167
|
-
| `
|
|
168
|
-
| `
|
|
169
|
-
| `
|
|
170
|
-
| `
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
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
|
-
|
|
217
|
-
|
|
218
|
-
useIcons: false,
|
|
219
|
-
useBlur: false,
|
|
220
|
-
},
|
|
221
|
-
} satisfies Theme
|
|
222
|
-
```
|
|
223
|
-
|
|
224
|
-
## License
|
|
225
|
-
|
|
226
|
-
The Beathers Library is licensed under the MIT License. See the [LICENSE](LICENSE) file for more information.
|
|
227
|
-
|
|
228
|
-
## Contact
|
|
229
|
-
|
|
230
|
-
For any inquiries or feedback regarding the Beathers Library:
|
|
231
|
-
|
|
232
|
-
- 📧 Email: contact@bhoenixstudio.com
|
|
233
|
-
- 🌐 Website: [beathers.bhoenixstudio.com](https://beathers.bhoenixstudio.com)
|
|
234
|
-
- 💬 GitHub Issues: [Report bugs or request features](https://github.com/BhoenixStudio/Beathers/issues)
|
|
235
|
-
- 📚 Documentation: [Full documentation](https://beathers.bhoenixstudio.com)
|
|
1
|
+
<div align="center">
|
|
2
|
+
<img src="https://raw.githubusercontent.com/BhoenixStudio/Beathers/main/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
|
+
[](https://www.npmjs.com/package/beathers)
|
|
7
|
+
[](https://opensource.org/licenses/MIT)
|
|
8
|
+
|
|
9
|
+
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.
|
|
10
|
+
|
|
11
|
+
## Get Started
|
|
12
|
+
|
|
13
|
+
### Installation
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install beathers
|
|
17
|
+
# or
|
|
18
|
+
yarn add beathers
|
|
19
|
+
# or
|
|
20
|
+
pnpm add beathers
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
### Create Configuration File
|
|
24
|
+
|
|
25
|
+
Use the interactive CLI to create your theme configuration:
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
npx beathers init
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
This will prompt you to:
|
|
32
|
+
|
|
33
|
+
- Choose your configuration file format (JSON, JS, or TypeScript)
|
|
34
|
+
- Set up initial theme values like colors and typography
|
|
35
|
+
- Configure which features to enable/disable
|
|
36
|
+
|
|
37
|
+
### Build Your Theme
|
|
38
|
+
|
|
39
|
+
Generate your custom CSS from the configuration:
|
|
40
|
+
|
|
41
|
+
```bash
|
|
42
|
+
npx beathers build
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
### Import in Your Project
|
|
46
|
+
|
|
47
|
+
**CSS Import (Recommended):**
|
|
48
|
+
|
|
49
|
+
```css
|
|
50
|
+
/* Import the compiled CSS */
|
|
51
|
+
@import 'node_modules/beathers/dist/css/beathers.min.css';
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
**SCSS Import:**
|
|
55
|
+
|
|
56
|
+
```scss
|
|
57
|
+
// Import the entire library
|
|
58
|
+
@import 'node_modules/beathers/src/scss/beathers.min.scss';
|
|
59
|
+
|
|
60
|
+
// Or import specific modules
|
|
61
|
+
@import 'node_modules/beathers/src/scss/functions/colors';
|
|
62
|
+
@import 'node_modules/beathers/src/scss/style/grid';
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
**JavaScript/Framework Import:**
|
|
66
|
+
|
|
67
|
+
```javascript
|
|
68
|
+
// Next.js, React, Vue, Angular
|
|
69
|
+
import 'beathers/dist/css/beathers.min.css'
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
### Example Configuration
|
|
73
|
+
|
|
74
|
+
```json
|
|
75
|
+
{
|
|
76
|
+
"colors": {
|
|
77
|
+
"primary": { "light": "#007bff", "dark": "#0056b3" },
|
|
78
|
+
"success": { "light": "#28a745", "dark": "#20c997" }
|
|
79
|
+
},
|
|
80
|
+
"typography": {
|
|
81
|
+
"defaultFontFamilies": ["Inter", "system-ui", "sans-serif"]
|
|
82
|
+
},
|
|
83
|
+
"settings": {
|
|
84
|
+
"axisDivisions": 12,
|
|
85
|
+
"breakpoints": {
|
|
86
|
+
"sm": "640px",
|
|
87
|
+
"md": "768px",
|
|
88
|
+
"lg": "1024px"
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
## Configuration
|
|
95
|
+
|
|
96
|
+
Beathers uses a configuration file to customize your theme. All options are optional and have sensible defaults.
|
|
97
|
+
|
|
98
|
+
### Configuration File Options
|
|
99
|
+
|
|
100
|
+
You can create one of these files in your project root:
|
|
101
|
+
|
|
102
|
+
- `beathers.configs.json` - JSON format
|
|
103
|
+
- `beathers.configs.js` - JavaScript format
|
|
104
|
+
- `beathers.configs.ts` - TypeScript format (with type safety)
|
|
105
|
+
|
|
106
|
+
### Key Configuration Sections
|
|
107
|
+
|
|
108
|
+
| Section | Description | Purpose |
|
|
109
|
+
| -------------- | -------------------------------------------------- | --------------------------------------------------- |
|
|
110
|
+
| **colors** | Define your color palette with light/dark variants | Brand colors, state colors (success, warning, etc.) |
|
|
111
|
+
| **typography** | Configure fonts, sizes, and text settings | Font families, weights, sizes, and formatting |
|
|
112
|
+
| **settings** | Layout and spacing configuration | Grid system, breakpoints, spacing values |
|
|
113
|
+
| **roles** | Enable/disable specific features | Control which utilities are generated |
|
|
114
|
+
|
|
115
|
+
### Common Configuration Properties
|
|
116
|
+
|
|
117
|
+
| Property | Type | Example |
|
|
118
|
+
| ------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
119
|
+
| **COLORS** |
|
|
120
|
+
| `color` <br /> Color variants (as json) | "color": { light: `#${string}$`, dark: `#${string}$` } | "primary": {"light": "#007bff", "dark": "#0056b3"} |
|
|
121
|
+
| **TYPOGRAPHY** |
|
|
122
|
+
| `defaultFontFamilies` <br /> Fallback fonts (as array) | `string[]` | ["system-ui", "sans-serif"] |
|
|
123
|
+
| `fontMainPath` <br /> Your fonts path | `string` | "/fonts/" |
|
|
124
|
+
| `fontFormat` <br /> Your fonts format | `string` | "woff2" |
|
|
125
|
+
| `fontWeights` <br /> Your fonts weights (as array) | `thin`,`extra-light`,`light`,`regular`,<br />`medium`,`semibold`,`bold`,`extra-bold`,`black` | ["regular", "medium", "bold"] |
|
|
126
|
+
| `fontStyles` <br /> Your fonts styles (as array) | `normal`,`italic`,`oblique` | ["normal"] |
|
|
127
|
+
| `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) |
|
|
128
|
+
| `textTruncate` <br /> Text truncation | `number` | 3 |
|
|
129
|
+
| `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"}}} |
|
|
130
|
+
| **SETTINGS** |
|
|
131
|
+
| `axisDivisions` <br /> Grid system divisions | `number` | 12 |
|
|
132
|
+
| `opacities` <br /> Available opacity values <br /> min: 0 - max: 100 (as array) | `number[]` | [10, 20] |
|
|
133
|
+
| `blurValues` <br /> Blur effect values (as array) | `number[]` | [2, 4, 8, 16, 32] |
|
|
134
|
+
| `insetValues` <br /> Inset values (as array) | `number[]` | [0, 5] |
|
|
135
|
+
| `bordersValue` <br /> Default border width (as array) | `number[]` | [1, 2] |
|
|
136
|
+
| `radiuses` <br /> Border radius values (as array) | `number[]` | [5,10,15] |
|
|
137
|
+
| `breakpoints` <br /> Responsive breakpoints (as json) | Record<(`sm` , `md` , `lg` , `xl` , `xxl`), `${number}px` `${number}rem` `${number}em`> | {"sm": "640px", "md": "768px"} |
|
|
138
|
+
| `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"}} |
|
|
139
|
+
| `guttersValues` <br /> Spacing values (as json) | Record<(`auto`, `number`), `${number}px` `${number}rem` `${number}em`> | {"auto": "1rem", 1: "0.25rem"} |
|
|
140
|
+
| **ROLES** |
|
|
141
|
+
| `useMediaQueries` <br /> Enable responsive utilities | `boolean` | `true` |
|
|
142
|
+
| `useIcons` <br /> Include icon styles | `boolean` | `true` |
|
|
143
|
+
| `useFontFamilies` <br /> Include font family utilities | `boolean` | `true` |
|
|
144
|
+
| `useFontSizes` <br /> Include font size utilities | `boolean` | `true` |
|
|
145
|
+
| `useFontShapes` <br /> Include font style utilities | `boolean` | `true` |
|
|
146
|
+
| `useTextAligns` <br /> Include text alignment utilities | `boolean` | `true` |
|
|
147
|
+
| `useTextTruncate` <br /> Include text truncation utilities | `boolean` | `true` |
|
|
148
|
+
| `useColors` <br /> Include color utilities | `boolean` | `true` |
|
|
149
|
+
| `useColorsOpacities` <br /> Include color opacity utilities | `boolean` | `true` |
|
|
150
|
+
| `useColorsLightMode` <br /> Include light mode colors | `boolean` | `true` |
|
|
151
|
+
| `useColorsDarkMode` <br /> Include dark mode colors | `boolean` | `true` |
|
|
152
|
+
| `useCurrentColors` <br /> Include currentColor utilities | `boolean` | `true` |
|
|
153
|
+
| `useRootColors` <br /> Include CSS custom properties | `boolean` | `true` |
|
|
154
|
+
| `useGrid` <br /> Include grid system | `boolean` | `true` |
|
|
155
|
+
| `useFlex` <br /> Include flexbox utilities | `boolean` | `true` |
|
|
156
|
+
| `useTransitions` <br /> Include transition utilities | `boolean` | `true` |
|
|
157
|
+
| `useWrappers` <br /> Include container utilities | `boolean` | `true` |
|
|
158
|
+
| `useShadows` <br /> Include shadow utilities | `boolean` | `true` |
|
|
159
|
+
| `useDisplays` <br /> Include display utilities | `boolean` | `true` |
|
|
160
|
+
| `useOverflows` <br /> Include overflow utilities | `boolean` | `true` |
|
|
161
|
+
| `useOpacities` <br /> Include opacity utilities | `boolean` | `true` |
|
|
162
|
+
| `useBlur` <br /> Include blur utilities | `boolean` | `true` |
|
|
163
|
+
| `useObjectFits` <br /> Include object-fit utilities | `boolean` | `true` |
|
|
164
|
+
| `usePositions` <br /> Include positioning utilities | `boolean` | `true` |
|
|
165
|
+
| `useInsets` <br /> Include inset utilities | `boolean` | `true` |
|
|
166
|
+
| `useSizes` <br /> Include sizing utilities | `boolean` | `true` |
|
|
167
|
+
| `useGutters` <br /> Include spacing utilities | `boolean` | `true` |
|
|
168
|
+
| `useBorders` <br /> Include border utilities | `boolean` | `true` |
|
|
169
|
+
| `useTextBorders` <br /> Include text border utilities | `boolean` | `true` |
|
|
170
|
+
| `useRadius` <br /> Include border radius utilities | `boolean` | `true` |
|
|
171
|
+
|
|
172
|
+
### TypeScript Configuration Example
|
|
173
|
+
|
|
174
|
+
```typescript
|
|
175
|
+
// beathers.configs.ts
|
|
176
|
+
import { Theme } from 'beathers'
|
|
177
|
+
|
|
178
|
+
export default {
|
|
179
|
+
colors: {
|
|
180
|
+
primary: { light: '#007bff', dark: '#0056b3' },
|
|
181
|
+
secondary: { light: '#6c757d', dark: '#495057' },
|
|
182
|
+
success: { light: '#28a745', dark: '#20c997' },
|
|
183
|
+
},
|
|
184
|
+
typography: {
|
|
185
|
+
defaultFontFamilies: ['Inter', 'system-ui', 'sans-serif'],
|
|
186
|
+
fontSizes: {
|
|
187
|
+
xs: '12px',
|
|
188
|
+
sm: '14px',
|
|
189
|
+
base: '16px',
|
|
190
|
+
lg: '18px',
|
|
191
|
+
xl: '20px',
|
|
192
|
+
},
|
|
193
|
+
},
|
|
194
|
+
settings: {
|
|
195
|
+
axisDivisions: 12,
|
|
196
|
+
breakpoints: {
|
|
197
|
+
sm: '640px',
|
|
198
|
+
md: '768px',
|
|
199
|
+
lg: '1024px',
|
|
200
|
+
xl: '1280px',
|
|
201
|
+
xxl: '1536px',
|
|
202
|
+
},
|
|
203
|
+
},
|
|
204
|
+
roles: {
|
|
205
|
+
useIcons: false,
|
|
206
|
+
useBlur: false,
|
|
207
|
+
},
|
|
208
|
+
} satisfies Theme
|
|
209
|
+
```
|
|
210
|
+
|
|
211
|
+
## Contact & Support
|
|
212
|
+
|
|
213
|
+
[](https://bhoenixstudio.com/beathers)
|
|
214
|
+
|
|
215
|
+
[](https://bhoenixstudio.com/beathers)
|
|
216
|
+
|
|
217
|
+
[](mailto:contact@bhoenixstudio.com)
|