beathers 5.4.1 → 5.5.4
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 +28 -0
- package/css/beathers-icons.min.css +1 -1
- package/css/beathers-icons.min.css.map +1 -1
- package/css/beathers.min.css +2 -2
- package/css/beathers.min.css.map +1 -1
- package/data/colors.d.ts +2 -0
- package/data/colors.d.ts.map +1 -1
- package/data/colors.js +6 -0
- package/package.json +4 -2
- package/public/fonts/beathers.woff +0 -0
- package/readme.md +14 -6
- package/scripts/commands/build.d.ts.map +1 -1
- package/scripts/commands/build.js +3 -2
- package/scripts/commands/fonts.d.ts.map +1 -1
- package/scripts/commands/init.d.ts.map +1 -1
- package/scripts/commands/init.js +7 -0
- package/scripts/helpers/BuildScssVariables.d.ts +1 -1
- package/scripts/helpers/BuildScssVariables.d.ts.map +1 -1
- package/scripts/helpers/BuildScssVariables.js +29 -3
- package/scripts/helpers/Merge.d.ts.map +1 -1
- package/scripts/helpers/Merge.js +4 -3
- package/scripts/helpers/ReadDefaultValues.d.ts.map +1 -1
- package/scripts/helpers/ReadDefaultValues.js +11 -0
- package/scripts/types.d.ts +22 -3
- package/scripts/types.d.ts.map +1 -1
- package/scss/_variables.scss +21 -8
- package/scss/beathers-icons.min.scss +1 -1
- package/scss/beathers.min.scss +2 -1
- package/scss/functions/_typographic.scss +2 -2
- package/scss/settings/_defaults.scss +23 -1
- package/scss/settings/_index.scss +2 -0
- package/scss/style/_glass.scss +80 -0
- package/scss/style/_grid.scss +12 -9
- package/scss/style/_resets.scss +76 -6
- package/scss/style/_shaping.scss +1 -1
- package/scss/style/_typographic.scss +3 -2
package/readme.md
CHANGED
|
@@ -168,9 +168,9 @@ You can create one of these files in your project root:
|
|
|
168
168
|
| `defaultFontFamilies` <br /> Fallback fonts (as array) | `string[]` | ["system-ui", "sans-serif"] |
|
|
169
169
|
| `fontMainPath` <br /> Your fonts path | `string` | "/fonts/" |
|
|
170
170
|
| `fontFormat` <br /> Your fonts format | `string` | "woff2" |
|
|
171
|
-
| `fontWeights` <br /> Your fonts weights (as array) | `thin
|
|
172
|
-
| `fontStyles` <br /> Your fonts styles (as array) | `normal
|
|
173
|
-
| `fontSizes` <br /> Your fonts sizes (as json) | Record<`string`, `${number}px` `${number}rem` `${number}em`>
|
|
171
|
+
| `fontWeights` <br /> Your fonts weights (as array) | `thin` \| `extra-light` \| `light` \| `regular` \| `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
174
|
| `textTruncate` <br /> Text truncation | `number` | 3 |
|
|
175
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
176
|
| **SETTINGS** |
|
|
@@ -180,9 +180,16 @@ You can create one of these files in your project root:
|
|
|
180
180
|
| `insetValues` <br /> Inset values (as array) | `number[]` | [0, 5] |
|
|
181
181
|
| `bordersValue` <br /> Default border width (as array) | `number[]` | [1, 2] |
|
|
182
182
|
| `radiuses` <br /> Border radius values (as array) | `number[]` | [5,10,15] |
|
|
183
|
-
| `breakpoints` <br /> Responsive breakpoints (as json) | Record
|
|
184
|
-
| `wrappers` <br /> Container widths (as json) | Record
|
|
185
|
-
| `guttersValues` <br /> Spacing values (as json) | Record
|
|
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
|
+
| **GLASS** |
|
|
187
|
+
| `blur` <br /> Backdrop filter blur intensity | `0` \| `${number}px` | 8px |
|
|
188
|
+
| `borderThickness` <br /> Glass border width | `${number}px` \| `${number}rem` \| `${number}em` | 1px |
|
|
189
|
+
| `lightAngle` <br /> Angle for border lighting | `${number}deg` | 45deg |
|
|
190
|
+
| `glassColor` <br /> Base glass background color (as json) | `{ light?: "#${string}"; dark?: "#${string}" }` | {light: #ffffff, dark: #000000} |
|
|
191
|
+
| `border1Color` <br /> Primary border color (as json) | `{ light?: "#${string}"; dark?: "#${string}" }` | {light: #e6e6e6, dark: #303030} |
|
|
192
|
+
| `border2Color` <br /> Secondary border color (as json) | `{ light?: "#${string}"; dark?: "#${string}" }` | {light: #e6e6e6, dark: #303030} |
|
|
186
193
|
| **ROLES** |
|
|
187
194
|
| `useMediaQueries` <br /> Enable responsive utilities | `boolean` | `true` |
|
|
188
195
|
| `useIcons` <br /> Include icon styles | `boolean` | `true` |
|
|
@@ -214,6 +221,7 @@ You can create one of these files in your project root:
|
|
|
214
221
|
| `useBorders` <br /> Include border utilities | `boolean` | `true` |
|
|
215
222
|
| `useTextBorders` <br /> Include text border utilities | `boolean` | `true` |
|
|
216
223
|
| `useRadius` <br /> Include border radius utilities | `boolean` | `true` |
|
|
224
|
+
| `useGlass` <br /> Include glassmorphism utilities | `boolean` | `true` |
|
|
217
225
|
|
|
218
226
|
### TypeScript Configuration Example
|
|
219
227
|
|
|
@@ -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":"AAwHA,wBAAsB,KAAK,kBAyB1B"}
|
|
@@ -58,6 +58,7 @@ async function defaultTheme() {
|
|
|
58
58
|
'useBorders',
|
|
59
59
|
'useTextBorders',
|
|
60
60
|
'useRadius',
|
|
61
|
+
'useGlass',
|
|
61
62
|
]);
|
|
62
63
|
}
|
|
63
64
|
catch (error) {
|
|
@@ -73,9 +74,9 @@ async function BuildTheme(customOutputPath) {
|
|
|
73
74
|
const userConfigs = await LoadUserConfigs();
|
|
74
75
|
console.log('🔄 Building theme variables...');
|
|
75
76
|
const theme = DeepMerge(defaults, userConfigs);
|
|
76
|
-
const variablesString = BuildScssVariables(theme);
|
|
77
|
+
const variablesString = BuildScssVariables(theme, !!customOutputPath);
|
|
77
78
|
await fs.writeFile(variablesPath, variablesString, { flag: 'w' });
|
|
78
|
-
console.log(`✅ Theme variables generated
|
|
79
|
+
console.log(`✅ Theme variables generated`);
|
|
79
80
|
console.log('');
|
|
80
81
|
console.log('🔨 Compiling SCSS to CSS...');
|
|
81
82
|
const userProjectRoot = process.cwd();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../src/scripts/commands/fonts.ts"],"names":[],"mappings":"AAMA,wBAAsB,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC,CA0F7C;AAED,wBAAsB,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC,CA4BhD;AAED,wBAAsB,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC,
|
|
1
|
+
{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../src/scripts/commands/fonts.ts"],"names":[],"mappings":"AAMA,wBAAsB,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC,CA0F7C;AAED,wBAAsB,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC,CA4BhD;AAED,wBAAsB,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC,CA4BhD"}
|
|
@@ -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":"AAgFA,wBAAsB,IAAI,kBAqEzB"}
|
package/scripts/commands/init.js
CHANGED
|
@@ -31,6 +31,12 @@ async function getDefaultValues() {
|
|
|
31
31
|
'guttersValues',
|
|
32
32
|
'bordersValue',
|
|
33
33
|
'radiuses',
|
|
34
|
+
'glassBlur',
|
|
35
|
+
'glassColor',
|
|
36
|
+
'glassBorderThickness',
|
|
37
|
+
'glassBorder1Color',
|
|
38
|
+
'glassBorder2Color',
|
|
39
|
+
'glassLightAngle',
|
|
34
40
|
'useMediaQueries',
|
|
35
41
|
'useIcons',
|
|
36
42
|
'useFontFamilies',
|
|
@@ -61,6 +67,7 @@ async function getDefaultValues() {
|
|
|
61
67
|
'useBorders',
|
|
62
68
|
'useTextBorders',
|
|
63
69
|
'useRadius',
|
|
70
|
+
'useGlass',
|
|
64
71
|
]));
|
|
65
72
|
}
|
|
66
73
|
export async function Init() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BuildScssVariables.d.ts","sourceRoot":"","sources":["../../src/scripts/helpers/BuildScssVariables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;
|
|
1
|
+
{"version":3,"file":"BuildScssVariables.d.ts","sourceRoot":"","sources":["../../src/scripts/helpers/BuildScssVariables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAgLnC,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,KAAK,EAAE,YAAY,GAAE,OAAe,GAAG,MAAM,CAWtF"}
|
|
@@ -20,7 +20,10 @@ function BuildTypography(typography) {
|
|
|
20
20
|
scss += '$defaultFontFamilies:';
|
|
21
21
|
scss += typography?.defaultFontFamilies?.length ? typography.defaultFontFamilies.join(', ').replace(/"/g, '') : 'null';
|
|
22
22
|
scss += ';\n';
|
|
23
|
-
|
|
23
|
+
let fontPath = typography?.fontMainPath;
|
|
24
|
+
if (!fontPath?.startsWith('/'))
|
|
25
|
+
fontPath = `/${fontPath}`;
|
|
26
|
+
scss += `$fontMainPath: ${fontPath ? `"${fontPath}"` : 'null'};\n`;
|
|
24
27
|
scss += `$fontFormat: ${typography?.fontFormat ? `"${typography.fontFormat}"` : 'null'};\n`;
|
|
25
28
|
scss += '$fontWeights: (';
|
|
26
29
|
scss += typography?.fontWeights?.length ? typography.fontWeights.map((fW) => `"${fW}"`).join(', ') : '';
|
|
@@ -127,12 +130,35 @@ function BuildRoles(roles) {
|
|
|
127
130
|
}
|
|
128
131
|
return scss;
|
|
129
132
|
}
|
|
130
|
-
|
|
131
|
-
|
|
133
|
+
function BuildGlass(glass) {
|
|
134
|
+
if (!glass)
|
|
135
|
+
return '';
|
|
136
|
+
let scss = '\n\n// --- Glass ---\n';
|
|
137
|
+
scss += `$glassBlur: ${glass.blur ?? 'null'};\n`;
|
|
138
|
+
scss += `$glassBorderThickness: ${glass.borderThickness ?? 'null'};\n`;
|
|
139
|
+
scss += `$glassLightAngle: ${glass.lightAngle ?? 'null'};\n`;
|
|
140
|
+
scss += '$glassColor: (\n';
|
|
141
|
+
scss += ` 'light': ${glass?.glassColor?.light ?? '#ffffff'},\n`;
|
|
142
|
+
scss += ` 'dark': ${glass?.glassColor?.dark ?? '#000000'},\n`;
|
|
143
|
+
scss += ');\n';
|
|
144
|
+
scss += '$glassBorder1Color: (\n';
|
|
145
|
+
scss += ` 'light': ${glass?.border1Color?.light ?? '#e6e6e6'},\n`;
|
|
146
|
+
scss += ` 'dark': ${glass?.border1Color?.dark ?? '#303030'},\n`;
|
|
147
|
+
scss += ');\n';
|
|
148
|
+
scss += '$glassBorder2Color: (\n';
|
|
149
|
+
scss += ` 'light': ${glass?.border2Color?.light ?? '#e6e6e6'},\n`;
|
|
150
|
+
scss += ` 'dark': ${glass?.border2Color?.dark ?? '#303030'},\n`;
|
|
151
|
+
scss += ');\n';
|
|
152
|
+
return scss;
|
|
153
|
+
}
|
|
154
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
155
|
+
export function BuildScssVariables(theme, isLocalBuild = false) {
|
|
156
|
+
const { colors, roles, settings, typography, glass } = theme;
|
|
132
157
|
let scss = '// Generated by Beathers builder\n // Do not edit this file directly\n\n';
|
|
133
158
|
scss += BuildColors(colors);
|
|
134
159
|
scss += BuildTypography(typography);
|
|
135
160
|
scss += BuildSettings(settings);
|
|
136
161
|
scss += BuildRoles(roles);
|
|
162
|
+
scss += BuildGlass(glass);
|
|
137
163
|
return scss;
|
|
138
164
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Merge.d.ts","sourceRoot":"","sources":["../../src/scripts/helpers/Merge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAEnC,wBAAgB,SAAS,CAAC,QAAQ,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC,GAAG,IAAI,GAAG,KAAK,
|
|
1
|
+
{"version":3,"file":"Merge.d.ts","sourceRoot":"","sources":["../../src/scripts/helpers/Merge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAEnC,wBAAgB,SAAS,CAAC,QAAQ,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC,GAAG,IAAI,GAAG,KAAK,CA4BzF"}
|
package/scripts/helpers/Merge.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
export function DeepMerge(defaults, configs) {
|
|
2
2
|
if (!configs)
|
|
3
3
|
return defaults;
|
|
4
|
-
const { colors: tColors, roles: tRoles, settings: tSettings, typography: tTypography } = defaults ?? {};
|
|
5
|
-
const { colors: sColors, roles: sRoles, settings: sSettings, typography: sTypography } = configs ?? {};
|
|
4
|
+
const { colors: tColors, roles: tRoles, settings: tSettings, typography: tTypography, glass: tGlass } = defaults ?? {};
|
|
5
|
+
const { colors: sColors, roles: sRoles, settings: sSettings, typography: sTypography, glass: sGlass } = configs ?? {};
|
|
6
6
|
const colors = { ...tColors, ...sColors };
|
|
7
7
|
const roles = { ...tRoles, ...sRoles };
|
|
8
8
|
const settings = {
|
|
@@ -22,5 +22,6 @@ export function DeepMerge(defaults, configs) {
|
|
|
22
22
|
(sTypography?.fontSizes && { fontSizes: { ...tTypography?.fontSizes, ...sTypography?.fontSizes } })),
|
|
23
23
|
...(tTypography?.fonts || (sTypography?.fonts && { fonts: { ...tTypography?.fonts, ...sTypography?.fonts } })),
|
|
24
24
|
};
|
|
25
|
-
|
|
25
|
+
const glass = { ...tGlass, ...sGlass };
|
|
26
|
+
return { colors, roles, settings, typography, glass };
|
|
26
27
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ReadDefaultValues.d.ts","sourceRoot":"","sources":["../../src/scripts/helpers/ReadDefaultValues.ts"],"names":[],"mappings":"AAGA,OAAO,EAA2C,KAAK,EAAE,MAAM,aAAa,CAAA;AAmF5E,wBAAsB,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"ReadDefaultValues.d.ts","sourceRoot":"","sources":["../../src/scripts/helpers/ReadDefaultValues.ts"],"names":[],"mappings":"AAGA,OAAO,EAA2C,KAAK,EAAE,MAAM,aAAa,CAAA;AAmF5E,wBAAsB,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CA8GzG"}
|
|
@@ -108,6 +108,8 @@ export async function ReadDefaultValues(files, VariableNames) {
|
|
|
108
108
|
result = buildArray(value);
|
|
109
109
|
else if (['axisDivisions'].includes(name))
|
|
110
110
|
result = cleanNumber(value);
|
|
111
|
+
else if (['glassColor', 'glassBorder1Color', 'glassBorder2Color'].includes(name))
|
|
112
|
+
result = buildColors(value);
|
|
111
113
|
else
|
|
112
114
|
result = cleanString(value);
|
|
113
115
|
variables[name] = result;
|
|
@@ -167,6 +169,15 @@ export async function ReadDefaultValues(files, VariableNames) {
|
|
|
167
169
|
useBorders: variables?.useBorders,
|
|
168
170
|
useTextBorders: variables?.useTextBorders,
|
|
169
171
|
useRadius: variables?.useRadius,
|
|
172
|
+
useGlass: variables?.useGlass,
|
|
173
|
+
};
|
|
174
|
+
theme.glass = {
|
|
175
|
+
blur: variables?.glassBlur,
|
|
176
|
+
glassColor: variables?.glassColor,
|
|
177
|
+
borderThickness: variables?.glassBorderThickness,
|
|
178
|
+
border1Color: variables?.glassBorder1Color,
|
|
179
|
+
border2Color: variables?.glassBorder2Color,
|
|
180
|
+
lightAngle: variables?.glassLightAngle,
|
|
170
181
|
};
|
|
171
182
|
return theme;
|
|
172
183
|
}
|
package/scripts/types.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/** CSS size unit values supporting px, rem, em, viewport units, and percentages */
|
|
2
|
-
type SizeUnit = `${number}px` | `${number}rem` | `${number}em` | `${number}vw` | `${number}vh` | `${number}%`;
|
|
2
|
+
type SizeUnit = 0 | `${number}px` | `${number}rem` | `${number}em` | `${number}vw` | `${number}vh` | `${number}%`;
|
|
3
3
|
/** Color configuration object with optional light and dark theme hex values */
|
|
4
4
|
type ColorType = Record<string, {
|
|
5
5
|
light?: `#${string}`;
|
|
@@ -71,8 +71,25 @@ interface Settings {
|
|
|
71
71
|
/** Gutter values for spacing utilities */
|
|
72
72
|
guttersValues?: Record<'auto' | number, 'auto' | SizeUnit>;
|
|
73
73
|
}
|
|
74
|
+
interface Glass {
|
|
75
|
+
blur?: 0 | `${number}px`;
|
|
76
|
+
glassColor?: {
|
|
77
|
+
light?: `#${string}`;
|
|
78
|
+
dark?: `#${string}`;
|
|
79
|
+
};
|
|
80
|
+
borderThickness?: SizeUnit;
|
|
81
|
+
border1Color?: {
|
|
82
|
+
light?: `#${string}`;
|
|
83
|
+
dark?: `#${string}`;
|
|
84
|
+
};
|
|
85
|
+
border2Color?: {
|
|
86
|
+
light?: `#${string}`;
|
|
87
|
+
dark?: `#${string}`;
|
|
88
|
+
};
|
|
89
|
+
lightAngle?: `${number}deg`;
|
|
90
|
+
}
|
|
74
91
|
/** Available feature keys for enabling/disabling CSS utilities */
|
|
75
|
-
type RoleKeys = 'useMediaQueries' | 'useIcons' | 'useFontFamilies' | 'useFontSizes' | 'useFontShapes' | 'useTextAligns' | 'useTextTruncate' | 'useColors' | 'useColorsOpacities' | 'useColorsLightMode' | 'useColorsDarkMode' | 'useCurrentColors' | 'useRootColors' | 'useGrid' | 'useFlex' | 'useTransitions' | 'useWrappers' | 'useShadows' | 'useDisplays' | 'useOverflows' | 'useOpacities' | 'useBlur' | 'useObjectFits' | 'usePositions' | 'useInsets' | 'useSizes' | 'useGutters' | 'useBorders' | 'useTextBorders' | 'useRadius';
|
|
92
|
+
type RoleKeys = 'useMediaQueries' | 'useIcons' | 'useFontFamilies' | 'useFontSizes' | 'useFontShapes' | 'useTextAligns' | 'useTextTruncate' | 'useColors' | 'useColorsOpacities' | 'useColorsLightMode' | 'useColorsDarkMode' | 'useCurrentColors' | 'useRootColors' | 'useGrid' | 'useFlex' | 'useTransitions' | 'useWrappers' | 'useShadows' | 'useDisplays' | 'useOverflows' | 'useOpacities' | 'useBlur' | 'useObjectFits' | 'usePositions' | 'useInsets' | 'useSizes' | 'useGutters' | 'useBorders' | 'useTextBorders' | 'useRadius' | 'useGlass';
|
|
76
93
|
/** Feature toggles for enabling/disabling CSS utility generation. @default all true */
|
|
77
94
|
type Roles = Partial<Record<RoleKeys, boolean>>;
|
|
78
95
|
/** Main theme configuration object containing all design system settings */
|
|
@@ -85,6 +102,8 @@ interface Theme {
|
|
|
85
102
|
settings?: Settings;
|
|
86
103
|
/** Feature flags for controlling which CSS utilities are generated */
|
|
87
104
|
roles?: Roles;
|
|
105
|
+
/** Optional glassmorphism settings for frosted glass effects */
|
|
106
|
+
glass?: Glass;
|
|
88
107
|
}
|
|
89
|
-
export type { SizeUnit, ColorType, FontWeight, FontStyle, FontVariant, FontType, Typography, Settings, RoleKeys, Roles, Theme, };
|
|
108
|
+
export type { SizeUnit, ColorType, FontWeight, FontStyle, FontVariant, FontType, Typography, Settings, RoleKeys, Glass, Roles, Theme, };
|
|
90
109
|
//# sourceMappingURL=types.d.ts.map
|
package/scripts/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/scripts/types.ts"],"names":[],"mappings":"AAEA,mFAAmF;AACnF,KAAK,QAAQ,GAAG,GAAG,MAAM,IAAI,GAAG,GAAG,MAAM,KAAK,GAAG,GAAG,MAAM,IAAI,GAAG,GAAG,MAAM,IAAI,GAAG,GAAG,MAAM,IAAI,GAAG,GAAG,MAAM,GAAG,CAAA;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/scripts/types.ts"],"names":[],"mappings":"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"}
|
package/scss/_variables.scss
CHANGED
|
@@ -1,15 +1,12 @@
|
|
|
1
1
|
// Generated by Beathers builder
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
// Do not edit this file directly
|
|
5
3
|
|
|
6
4
|
// --- Colors ---
|
|
7
5
|
$colors: ();
|
|
8
6
|
|
|
9
|
-
|
|
10
7
|
// --- Typography ---
|
|
11
|
-
$defaultFontFamilies:null;
|
|
12
|
-
$fontMainPath:
|
|
8
|
+
$defaultFontFamilies: null;
|
|
9
|
+
$fontMainPath: '/undefined';
|
|
13
10
|
$fontFormat: null;
|
|
14
11
|
$fontWeights: ();
|
|
15
12
|
$fontStyles: ();
|
|
@@ -17,7 +14,6 @@ $fontSizes: ();
|
|
|
17
14
|
$textTruncate: ();
|
|
18
15
|
$fonts: ();
|
|
19
16
|
|
|
20
|
-
|
|
21
17
|
// --- Settings ---
|
|
22
18
|
$axisDivisions: null;
|
|
23
19
|
$opacities: ();
|
|
@@ -29,7 +25,6 @@ $breakpoints: ();
|
|
|
29
25
|
$wrappers: ();
|
|
30
26
|
$guttersValues: ();
|
|
31
27
|
|
|
32
|
-
|
|
33
28
|
// --- Roles ---
|
|
34
29
|
$useMediaQueries: false;
|
|
35
30
|
$useIcons: true;
|
|
@@ -61,3 +56,21 @@ $useGutters: true;
|
|
|
61
56
|
$useBorders: true;
|
|
62
57
|
$useTextBorders: true;
|
|
63
58
|
$useRadius: true;
|
|
59
|
+
$useGlass: true;
|
|
60
|
+
|
|
61
|
+
// --- Glass ---
|
|
62
|
+
$glassBlur: null;
|
|
63
|
+
$glassColor: (
|
|
64
|
+
'light': #ffffff,
|
|
65
|
+
'dark': #000000,
|
|
66
|
+
);
|
|
67
|
+
$glassBorderThickness: null;
|
|
68
|
+
$glassBorder1Color: (
|
|
69
|
+
'light': #e6e6e6,
|
|
70
|
+
'dark': #303030,
|
|
71
|
+
);
|
|
72
|
+
$glassBorder2Color: (
|
|
73
|
+
'light': #e6e6e6,
|
|
74
|
+
'dark': #303030,
|
|
75
|
+
);
|
|
76
|
+
$glassLightAngle: null;
|
package/scss/beathers.min.scss
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* Beathers v5.4
|
|
2
|
+
* Beathers v5.5.4 (https://bhoenixstudio.com/beathers)
|
|
3
3
|
* Copyright 2020-2025 Bhoenix Studio
|
|
4
4
|
*/
|
|
5
5
|
|
|
@@ -9,3 +9,4 @@
|
|
|
9
9
|
@use './style/typographic';
|
|
10
10
|
@use './style/grid';
|
|
11
11
|
@use './style/shaping';
|
|
12
|
+
@use './style/glass';
|
|
@@ -44,7 +44,7 @@ $fontMainPath: if(vars.$fontMainPath != null, vars.$fontMainPath, defs.$fontMain
|
|
|
44
44
|
// // unicode-range: U+000-5FF;
|
|
45
45
|
// // }
|
|
46
46
|
//
|
|
47
|
-
@mixin font($title, $weight, $format, $style, $index: 0, $unicode: null, $isLocal: true, $externalUrl: '') {
|
|
47
|
+
@mixin font($key, $title, $weight, $format, $style, $index: 0, $unicode: null, $isLocal: true, $externalUrl: '') {
|
|
48
48
|
// Validate parameters
|
|
49
49
|
$checkedIsLocal: val.boolean($isLocal, '#{$title}.font().local');
|
|
50
50
|
$checkedTitle: val.string($title, '#{$title}.font().title');
|
|
@@ -62,7 +62,7 @@ $fontMainPath: if(vars.$fontMainPath != null, vars.$fontMainPath, defs.$fontMain
|
|
|
62
62
|
$checkedExternalUrl: val.string($externalUrl, 'Typographic.fontFace.externalUrl');
|
|
63
63
|
}
|
|
64
64
|
|
|
65
|
-
$name: if($index == 0, $title, '#{$
|
|
65
|
+
$name: if($index == 0, $title, '#{$key}\:#{$title}');
|
|
66
66
|
$weightValue: map.get(configs.$fontWeightsValues, $weight);
|
|
67
67
|
|
|
68
68
|
@font-face {
|
|
@@ -68,7 +68,7 @@ $colors: (
|
|
|
68
68
|
'info': (
|
|
69
69
|
'light': #0c8181,
|
|
70
70
|
'dark': #49d1d1,
|
|
71
|
-
)
|
|
71
|
+
),
|
|
72
72
|
) !default;
|
|
73
73
|
|
|
74
74
|
// Typography
|
|
@@ -176,3 +176,25 @@ $bordersValue: (1, 2, 3) !default;
|
|
|
176
176
|
|
|
177
177
|
// Defines available border-radius values.
|
|
178
178
|
$radiuses: (5, 10) !default;
|
|
179
|
+
|
|
180
|
+
// Glassmorphism settings
|
|
181
|
+
$glassBlur: 8px !default;
|
|
182
|
+
// Glassmorphism color settings for light and dark modes
|
|
183
|
+
$glassColor: (
|
|
184
|
+
'light': #ffffff,
|
|
185
|
+
'dark': #000000,
|
|
186
|
+
) !default;
|
|
187
|
+
// Glassmorphism border thickness
|
|
188
|
+
$glassBorderThickness: 1px !default;
|
|
189
|
+
// Glassmorphism border 1 settings for light and dark modes
|
|
190
|
+
$glassBorder1Color: (
|
|
191
|
+
'light': #e6e6e6,
|
|
192
|
+
'dark': #303030,
|
|
193
|
+
) !default;
|
|
194
|
+
// Glassmorphism border 2 settings for light and dark modes
|
|
195
|
+
$glassBorder2Color: (
|
|
196
|
+
'light': #e6e6e6,
|
|
197
|
+
'dark': #303030,
|
|
198
|
+
) !default;
|
|
199
|
+
// Glassmorphism light angle
|
|
200
|
+
$glassLightAngle: 45deg !default;
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
@use 'sass:map';
|
|
2
|
+
@use '../functions/colors' as colors;
|
|
3
|
+
@use '../settings/index' as settings;
|
|
4
|
+
@use '../settings/defaults' as defs;
|
|
5
|
+
@use '../variables' as vars;
|
|
6
|
+
|
|
7
|
+
// Definitions
|
|
8
|
+
$useGlass: if(vars.$useGlass != null, vars.$useGlass, settings.$useGlass);
|
|
9
|
+
$useColorsLightMode: if(vars.$useColorsLightMode != null, vars.$useColorsLightMode, settings.$useColorsLightMode);
|
|
10
|
+
$useColorsDarkMode: if(vars.$useColorsDarkMode != null, vars.$useColorsDarkMode, settings.$useColorsDarkMode);
|
|
11
|
+
$glassBlur: if(vars.$glassBlur != null, vars.$glassBlur, defs.$glassBlur);
|
|
12
|
+
$glassColor: if(vars.$glassColor != null, vars.$glassColor, defs.$glassColor);
|
|
13
|
+
$glassBorderThickness: if(vars.$glassBorderThickness != null, vars.$glassBorderThickness, defs.$glassBorderThickness);
|
|
14
|
+
$glassBorder1Color: if(vars.$glassBorder1Color != null, vars.$glassBorder1Color, defs.$glassBorder1Color);
|
|
15
|
+
$glassBorder2Color: if(vars.$glassBorder2Color != null, vars.$glassBorder2Color, defs.$glassBorder2Color);
|
|
16
|
+
$glassLightAngle: if(vars.$glassLightAngle != null, vars.$glassLightAngle, defs.$glassLightAngle);
|
|
17
|
+
|
|
18
|
+
@if $useGlass {
|
|
19
|
+
$glassColorLight: colors.hexToRgba(map.get($glassColor, 'light'), 0.15, 'Glass.light');
|
|
20
|
+
$glassColorDark: colors.hexToRgba(map.get($glassColor, 'dark'), 0.15, 'Glass.dark');
|
|
21
|
+
$glassBorder1ColorLight: colors.hexToRgba(map.get($glassBorder1Color, 'light'), 0.4, 'Glass.light');
|
|
22
|
+
$glassBorder1ColorDark: colors.hexToRgba(map.get($glassBorder1Color, 'dark'), 0.4, 'Glass.dark');
|
|
23
|
+
$glassBorder2ColorLight: colors.hexToRgba(map.get($glassBorder2Color, 'light'), 0.4, 'Glass.light');
|
|
24
|
+
$glassBorder2ColorDark: colors.hexToRgba(map.get($glassBorder2Color, 'dark'), 0.4, 'Glass.dark');
|
|
25
|
+
|
|
26
|
+
.bg\:glass {
|
|
27
|
+
position: relative;
|
|
28
|
+
isolation: isolate;
|
|
29
|
+
backdrop-filter: blur(var(--glass-blur, $glassBlur));
|
|
30
|
+
|
|
31
|
+
&::before {
|
|
32
|
+
content: '';
|
|
33
|
+
position: absolute;
|
|
34
|
+
inset: 0;
|
|
35
|
+
border-radius: inherit;
|
|
36
|
+
border: var(--glass-border-thickness, $glassBorderThickness) solid transparent;
|
|
37
|
+
mask:
|
|
38
|
+
linear-gradient(black, black) border-box,
|
|
39
|
+
linear-gradient(black, black) padding-box;
|
|
40
|
+
mask-composite: subtract;
|
|
41
|
+
z-index: -1;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
@if ($useColorsLightMode) {
|
|
45
|
+
.light &,
|
|
46
|
+
.light\:#{&},
|
|
47
|
+
&.light {
|
|
48
|
+
background: var(--glass-color-light, $glassColorLight);
|
|
49
|
+
|
|
50
|
+
&::before {
|
|
51
|
+
background: linear-gradient(
|
|
52
|
+
var(--glass-light-angle, $glassLightAngle),
|
|
53
|
+
var(--glass-border-2-color-light, $glassBorder2ColorLight),
|
|
54
|
+
var(--glass-border-1-color-light, $glassBorder1ColorLight),
|
|
55
|
+
var(--glass-border-2-color-light, $glassBorder2ColorLight)
|
|
56
|
+
)
|
|
57
|
+
border-box;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
@if ($useColorsDarkMode) {
|
|
63
|
+
.dark &,
|
|
64
|
+
.dark\:#{&},
|
|
65
|
+
&.dark {
|
|
66
|
+
background: var(--glass-color-dark, $glassColorDark);
|
|
67
|
+
|
|
68
|
+
&::before {
|
|
69
|
+
background: linear-gradient(
|
|
70
|
+
var(--glass-light-angle, $glassLightAngle),
|
|
71
|
+
var(--glass-border-2-color-dark, $glassBorder2ColorDark),
|
|
72
|
+
var(--glass-border-1-color-dark, $glassBorder1ColorDark),
|
|
73
|
+
var(--glass-border-2-color-dark, $glassBorder2ColorDark)
|
|
74
|
+
)
|
|
75
|
+
border-box;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
package/scss/style/_grid.scss
CHANGED
|
@@ -47,15 +47,18 @@ $useFlex: if(vars.$useFlex != null, vars.$useFlex, settings.$useFlex);
|
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
49
|
|
|
50
|
-
&.
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
50
|
+
&.wrapper {
|
|
51
|
+
&.row,
|
|
52
|
+
&.row-reverse {
|
|
53
|
+
@include func.flexDivision(width, 'cols', $size, $divider);
|
|
54
|
+
@include func.flexDivision(width, 'col', $size, $divider);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
&.column,
|
|
58
|
+
&.column-reverse {
|
|
59
|
+
@include func.flexDivision(height, 'rows', $size, $divider);
|
|
60
|
+
@include func.flexDivision(height, 'row', $size, $divider);
|
|
61
|
+
}
|
|
59
62
|
}
|
|
60
63
|
}
|
|
61
64
|
}
|