beathers 5.5.4 → 5.6.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG +52 -0
- package/css/beathers.min.css +2 -2
- package/css/beathers.min.css.map +1 -1
- package/package.json +2 -1
- package/readme.md +97 -70
- package/scripts/cli.js +1 -3
- package/scripts/commands/build.d.ts.map +1 -1
- package/scripts/commands/build.js +51 -45
- package/scripts/commands/help.d.ts.map +1 -1
- package/scripts/commands/help.js +0 -4
- package/scripts/commands/init.d.ts.map +1 -1
- package/scripts/commands/init.js +30 -26
- package/scripts/commands/list.d.ts.map +1 -1
- package/scripts/commands/list.js +0 -1
- package/scripts/helpers/Merge.d.ts.map +1 -1
- package/scripts/helpers/Merge.js +2 -2
- package/scripts/helpers/ReadDefaultValues.d.ts.map +1 -1
- package/scripts/helpers/ReadDefaultValues.js +20 -3
- package/scripts/types.d.ts +3 -1
- package/scripts/types.d.ts.map +1 -1
- package/scss/_variables.scss +19 -3
- package/scss/beathers.min.scss +1 -1
- package/scss/functions/_mediaQueries.scss +10 -7
- package/scss/functions/_others.scss +0 -8
- package/scss/settings/_configs.scss +14 -39
- package/scss/settings/_index.scss +19 -5
- package/scss/style/_grid.scss +8 -5
- package/scss/style/_shaping.scss +76 -32
- package/scss/style/_typographic.scss +30 -5
- package/css/beathers-icons.min.css +0 -1
- package/css/beathers-icons.min.css.map +0 -1
- package/public/fonts/beathers.woff +0 -0
- package/scss/beathers-icons.min.scss +0 -265
package/scripts/commands/init.js
CHANGED
|
@@ -37,13 +37,16 @@ async function getDefaultValues() {
|
|
|
37
37
|
'glassBorder1Color',
|
|
38
38
|
'glassBorder2Color',
|
|
39
39
|
'glassLightAngle',
|
|
40
|
-
'useMediaQueries',
|
|
41
|
-
'useIcons',
|
|
42
40
|
'useFontFamilies',
|
|
41
|
+
'useFontFamiliesMediaQueries',
|
|
43
42
|
'useFontSizes',
|
|
43
|
+
'useFontSizesMediaQueries',
|
|
44
44
|
'useFontShapes',
|
|
45
|
+
'useFontShapesMediaQueries',
|
|
45
46
|
'useTextAligns',
|
|
47
|
+
'useTextAlignsMediaQueries',
|
|
46
48
|
'useTextTruncate',
|
|
49
|
+
'useTextTruncateMediaQueries',
|
|
47
50
|
'useColors',
|
|
48
51
|
'useColorsOpacities',
|
|
49
52
|
'useColorsLightMode',
|
|
@@ -52,21 +55,34 @@ async function getDefaultValues() {
|
|
|
52
55
|
'useRootColors',
|
|
53
56
|
'useGrid',
|
|
54
57
|
'useFlex',
|
|
55
|
-
'
|
|
58
|
+
'useGridMediaQueries',
|
|
56
59
|
'useWrappers',
|
|
57
60
|
'useShadows',
|
|
61
|
+
'useShadowsMediaQueries',
|
|
58
62
|
'useDisplays',
|
|
63
|
+
'useDisplaysMediaQueries',
|
|
59
64
|
'useOverflows',
|
|
65
|
+
'useOverflowsMediaQueries',
|
|
60
66
|
'useOpacities',
|
|
67
|
+
'useOpacitiesMediaQueries',
|
|
61
68
|
'useBlur',
|
|
69
|
+
'useBlurMediaQueries',
|
|
62
70
|
'useObjectFits',
|
|
71
|
+
'useObjectFitsMediaQueries',
|
|
63
72
|
'usePositions',
|
|
73
|
+
'usePositionsMediaQueries',
|
|
64
74
|
'useInsets',
|
|
75
|
+
'useInsetsMediaQueries',
|
|
65
76
|
'useSizes',
|
|
77
|
+
'useSizesMediaQueries',
|
|
66
78
|
'useGutters',
|
|
79
|
+
'useGuttersMediaQueries',
|
|
67
80
|
'useBorders',
|
|
81
|
+
'useBordersMediaQueries',
|
|
68
82
|
'useTextBorders',
|
|
83
|
+
'useTextBordersMediaQueries',
|
|
69
84
|
'useRadius',
|
|
85
|
+
'useRadiusMediaQueries',
|
|
70
86
|
'useGlass',
|
|
71
87
|
]));
|
|
72
88
|
}
|
|
@@ -75,6 +91,7 @@ export async function Init() {
|
|
|
75
91
|
const formatMap = { json: 'beathers.configs.json', js: 'beathers.configs.js', ts: 'beathers.configs.ts' };
|
|
76
92
|
const fileName = formatMap[format];
|
|
77
93
|
const filePath = path.join(process.cwd(), fileName);
|
|
94
|
+
const outputPath = 'public/css';
|
|
78
95
|
if (await fs.pathExists(filePath)) {
|
|
79
96
|
const shouldOverride = await promptUser(`\x1b[33m⚠️ ${fileName} already exists. Do you want to override it?\x1b[0m\n\x1b[32m[Y]\x1b[0m Yes \x1b[31m[N]\x1b[0m No: `);
|
|
80
97
|
if (!shouldOverride) {
|
|
@@ -83,6 +100,7 @@ export async function Init() {
|
|
|
83
100
|
}
|
|
84
101
|
}
|
|
85
102
|
const includeStarterValues = await promptUser('\x1b[36m📝 Would you like to include starter configuration values?\x1b[0m\n\x1b[32m[Y]\x1b[0m Yes \x1b[31m[N]\x1b[0m No: ');
|
|
103
|
+
const defaultValues = await getDefaultValues();
|
|
86
104
|
const emptyTemplate = {
|
|
87
105
|
colors: {},
|
|
88
106
|
typography: {
|
|
@@ -108,29 +126,15 @@ export async function Init() {
|
|
|
108
126
|
},
|
|
109
127
|
roles: {},
|
|
110
128
|
};
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
}
|
|
121
|
-
else
|
|
122
|
-
content = `export default ${JSON.stringify(emptyTemplate, null, 2)}`;
|
|
123
|
-
}
|
|
124
|
-
else if (format === 'ts') {
|
|
125
|
-
const importLine = "import type { Theme } from 'beathers'\n\n";
|
|
126
|
-
if (includeStarterValues) {
|
|
127
|
-
const defaultValues = await getDefaultValues();
|
|
128
|
-
content = `${importLine}export default ${JSON.stringify(defaultValues, null, 2)} satisfies Theme`;
|
|
129
|
-
}
|
|
130
|
-
else
|
|
131
|
-
content = `${importLine}export default ${JSON.stringify(emptyTemplate, null, 2)} satisfies Theme`;
|
|
132
|
-
}
|
|
133
|
-
await fs.writeFile(filePath, content);
|
|
129
|
+
const data = includeStarterValues ? defaultValues : emptyTemplate;
|
|
130
|
+
const finalData = { ...data, outputPath };
|
|
131
|
+
const content = JSON.stringify(finalData, null, 2);
|
|
132
|
+
let pageContent = content;
|
|
133
|
+
if (format === 'js')
|
|
134
|
+
pageContent = `export default ${content}`;
|
|
135
|
+
else if (format === 'ts')
|
|
136
|
+
pageContent = `import type { Theme } from 'beathers'\n\nexport default ${content} satisfies Theme`;
|
|
137
|
+
await fs.writeFile(filePath, pageContent);
|
|
134
138
|
const starterText = includeStarterValues ? ' with starter values' : '';
|
|
135
139
|
console.log(`✅ Successfully created \x1b[32m${fileName}\x1b[0m${starterText}`);
|
|
136
140
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../src/scripts/commands/list.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../src/scripts/commands/list.ts"],"names":[],"mappings":"AAgCA,wBAAgB,QAAQ,CAAC,IAAI,EAAE,GAAG,wBACC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,EAUtD;AAED,MAAM,MAAM,UAAU,GAClB,QAAQ,GACR,IAAI,GACJ,WAAW,GACX,MAAM,GACN,YAAY,GACZ,UAAU,GACV,aAAa,GACb,oBAAoB,GACpB,YAAY,GACZ,cAAc,GACd,mBAAmB,GACnB,cAAc,CAAA"}
|
package/scripts/commands/list.js
CHANGED
|
@@ -6,7 +6,6 @@ const commands = {
|
|
|
6
6
|
'--version': () => Version(),
|
|
7
7
|
init: async () => await Init(),
|
|
8
8
|
'build:pack': async () => await Build(),
|
|
9
|
-
'--local': async () => await Build(),
|
|
10
9
|
'add-font': async () => await AddFont(),
|
|
11
10
|
'remove-font': async () => await RemoveFont(),
|
|
12
11
|
'import-font-sample': async () => await ImportFont(),
|
|
@@ -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,CAwCzF"}
|
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, glass: tGlass } = defaults ?? {};
|
|
5
|
-
const { colors: sColors, roles: sRoles, settings: sSettings, typography: sTypography, glass: sGlass } = 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 = {
|
|
@@ -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,CA8HzG"}
|
|
@@ -116,6 +116,7 @@ export async function ReadDefaultValues(files, VariableNames) {
|
|
|
116
116
|
}
|
|
117
117
|
}
|
|
118
118
|
}
|
|
119
|
+
theme.outputPath = variables?.outputPath;
|
|
119
120
|
theme.colors = variables?.colors;
|
|
120
121
|
theme.typography = {
|
|
121
122
|
fontMainPath: variables?.fontMainPath,
|
|
@@ -139,13 +140,16 @@ export async function ReadDefaultValues(files, VariableNames) {
|
|
|
139
140
|
guttersValues: variables.guttersValues,
|
|
140
141
|
};
|
|
141
142
|
theme.roles = {
|
|
142
|
-
useMediaQueries: variables?.useMediaQueries,
|
|
143
|
-
useIcons: variables?.useIcons,
|
|
144
143
|
useFontFamilies: variables?.useFontFamilies,
|
|
144
|
+
useFontFamiliesMediaQueries: variables?.useFontFamiliesMediaQueries,
|
|
145
145
|
useFontSizes: variables?.useFontSizes,
|
|
146
|
+
useFontSizesMediaQueries: variables?.useFontSizesMediaQueries,
|
|
146
147
|
useFontShapes: variables?.useFontShapes,
|
|
148
|
+
useFontShapesMediaQueries: variables?.useFontShapesMediaQueries,
|
|
147
149
|
useTextAligns: variables?.useTextAligns,
|
|
150
|
+
useTextAlignsMediaQueries: variables?.useTextAlignsMediaQueries,
|
|
148
151
|
useTextTruncate: variables?.useTextTruncate,
|
|
152
|
+
useTextTruncateMediaQueries: variables?.useTextTruncateMediaQueries,
|
|
149
153
|
useColors: variables?.useColors,
|
|
150
154
|
useColorsOpacities: variables?.useColorsOpacities,
|
|
151
155
|
useColorsLightMode: variables?.useColorsLightMode,
|
|
@@ -154,21 +158,34 @@ export async function ReadDefaultValues(files, VariableNames) {
|
|
|
154
158
|
useRootColors: variables?.useRootColors,
|
|
155
159
|
useGrid: variables?.useGrid,
|
|
156
160
|
useFlex: variables?.useFlex,
|
|
157
|
-
|
|
161
|
+
useGridMediaQueries: variables?.useGridMediaQueries,
|
|
158
162
|
useWrappers: variables?.useWrappers,
|
|
159
163
|
useShadows: variables?.useShadows,
|
|
164
|
+
useShadowsMediaQueries: variables?.useShadowsMediaQueries,
|
|
160
165
|
useDisplays: variables?.useDisplays,
|
|
166
|
+
useDisplaysMediaQueries: variables?.useDisplaysMediaQueries,
|
|
161
167
|
useOverflows: variables?.useOverflows,
|
|
168
|
+
useOverflowsMediaQueries: variables?.useOverflowsMediaQueries,
|
|
162
169
|
useOpacities: variables?.useOpacities,
|
|
170
|
+
useOpacitiesMediaQueries: variables?.useOpacitiesMediaQueries,
|
|
163
171
|
useBlur: variables?.useBlur,
|
|
172
|
+
useBlurMediaQueries: variables?.useBlurMediaQueries,
|
|
164
173
|
useObjectFits: variables?.useObjectFits,
|
|
174
|
+
useObjectFitsMediaQueries: variables?.useObjectFitsMediaQueries,
|
|
165
175
|
usePositions: variables?.usePositions,
|
|
176
|
+
usePositionsMediaQueries: variables?.usePositionsMediaQueries,
|
|
166
177
|
useInsets: variables?.useInsets,
|
|
178
|
+
useInsetsMediaQueries: variables?.useInsetsMediaQueries,
|
|
167
179
|
useSizes: variables?.useSizes,
|
|
180
|
+
useSizesMediaQueries: variables?.useSizesMediaQueries,
|
|
168
181
|
useGutters: variables?.useGutters,
|
|
182
|
+
useGuttersMediaQueries: variables?.useGuttersMediaQueries,
|
|
169
183
|
useBorders: variables?.useBorders,
|
|
184
|
+
useBordersMediaQueries: variables?.useBordersMediaQueries,
|
|
170
185
|
useTextBorders: variables?.useTextBorders,
|
|
186
|
+
useTextBordersMediaQueries: variables?.useTextBordersMediaQueries,
|
|
171
187
|
useRadius: variables?.useRadius,
|
|
188
|
+
useRadiusMediaQueries: variables?.useRadiusMediaQueries,
|
|
172
189
|
useGlass: variables?.useGlass,
|
|
173
190
|
};
|
|
174
191
|
theme.glass = {
|
package/scripts/types.d.ts
CHANGED
|
@@ -89,11 +89,13 @@ interface Glass {
|
|
|
89
89
|
lightAngle?: `${number}deg`;
|
|
90
90
|
}
|
|
91
91
|
/** Available feature keys for enabling/disabling CSS utilities */
|
|
92
|
-
type RoleKeys = '
|
|
92
|
+
type RoleKeys = 'useFontFamilies' | 'useFontFamiliesMediaQueries' | 'useFontSizes' | 'useFontSizesMediaQueries' | 'useFontShapes' | 'useFontShapesMediaQueries' | 'useTextAligns' | 'useTextAlignsMediaQueries' | 'useTextTruncate' | 'useTextTruncateMediaQueries' | 'useColors' | 'useColorsOpacities' | 'useColorsLightMode' | 'useColorsDarkMode' | 'useCurrentColors' | 'useRootColors' | 'useGrid' | 'useFlex' | 'useGridMediaQueries' | 'useWrappers' | 'useShadows' | 'useShadowsMediaQueries' | 'useDisplays' | 'useDisplaysMediaQueries' | 'useOverflows' | 'useOverflowsMediaQueries' | 'useOpacities' | 'useOpacitiesMediaQueries' | 'useBlur' | 'useBlurMediaQueries' | 'useObjectFits' | 'useObjectFitsMediaQueries' | 'usePositions' | 'usePositionsMediaQueries' | 'useInsets' | 'useInsetsMediaQueries' | 'useSizes' | 'useSizesMediaQueries' | 'useGutters' | 'useGuttersMediaQueries' | 'useBorders' | 'useBordersMediaQueries' | 'useTextBorders' | 'useTextBordersMediaQueries' | 'useRadius' | 'useRadiusMediaQueries' | 'useGlass';
|
|
93
93
|
/** Feature toggles for enabling/disabling CSS utility generation. @default all true */
|
|
94
94
|
type Roles = Partial<Record<RoleKeys, boolean>>;
|
|
95
95
|
/** Main theme configuration object containing all design system settings */
|
|
96
96
|
interface Theme {
|
|
97
|
+
/** Output path for compiled CSS files. @default 'public/css' */
|
|
98
|
+
outputPath?: string;
|
|
97
99
|
/** Color palette definitions with light/dark theme support */
|
|
98
100
|
colors?: ColorType;
|
|
99
101
|
/** Typography settings including fonts, sizes, and weights */
|
package/scripts/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/scripts/types.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/scripts/types.ts"],"names":[],"mappings":"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"}
|
package/scss/_variables.scss
CHANGED
|
@@ -26,13 +26,16 @@ $wrappers: ();
|
|
|
26
26
|
$guttersValues: ();
|
|
27
27
|
|
|
28
28
|
// --- Roles ---
|
|
29
|
-
$useMediaQueries: false;
|
|
30
|
-
$useIcons: true;
|
|
31
29
|
$useFontFamilies: true;
|
|
30
|
+
$useFontFamiliesMediaQueries: false;
|
|
32
31
|
$useFontSizes: true;
|
|
32
|
+
$useFontSizesMediaQueries: true;
|
|
33
33
|
$useFontShapes: true;
|
|
34
|
+
$useFontShapesMediaQueries: false;
|
|
34
35
|
$useTextAligns: true;
|
|
36
|
+
$useTextAlignsMediaQueries: true;
|
|
35
37
|
$useTextTruncate: true;
|
|
38
|
+
$useTextTruncateMediaQueries: true;
|
|
36
39
|
$useColors: true;
|
|
37
40
|
$useColorsOpacities: true;
|
|
38
41
|
$useColorsLightMode: true;
|
|
@@ -41,21 +44,34 @@ $useCurrentColors: true;
|
|
|
41
44
|
$useRootColors: true;
|
|
42
45
|
$useGrid: true;
|
|
43
46
|
$useFlex: true;
|
|
44
|
-
$
|
|
47
|
+
$useGridMediaQueries: true;
|
|
45
48
|
$useWrappers: true;
|
|
46
49
|
$useShadows: true;
|
|
50
|
+
$useShadowsMediaQueries: false;
|
|
47
51
|
$useDisplays: true;
|
|
52
|
+
$useDisplaysMediaQueries: false;
|
|
48
53
|
$useOverflows: true;
|
|
54
|
+
$useOverflowsMediaQueries: false;
|
|
49
55
|
$useOpacities: true;
|
|
56
|
+
$useOpacitiesMediaQueries: false;
|
|
50
57
|
$useBlur: true;
|
|
58
|
+
$useBlurMediaQueries: false;
|
|
51
59
|
$useObjectFits: true;
|
|
60
|
+
$useObjectFitsMediaQueries: false;
|
|
52
61
|
$usePositions: true;
|
|
62
|
+
$usePositionsMediaQueries: false;
|
|
53
63
|
$useInsets: true;
|
|
64
|
+
$useInsetsMediaQueries: false;
|
|
54
65
|
$useSizes: true;
|
|
66
|
+
$useSizesMediaQueries: true;
|
|
55
67
|
$useGutters: true;
|
|
68
|
+
$useGuttersMediaQueries: true;
|
|
56
69
|
$useBorders: true;
|
|
70
|
+
$useBordersMediaQueries: false;
|
|
57
71
|
$useTextBorders: true;
|
|
72
|
+
$useTextBordersMediaQueries: false;
|
|
58
73
|
$useRadius: true;
|
|
74
|
+
$useRadiusMediaQueries: false;
|
|
59
75
|
$useGlass: true;
|
|
60
76
|
|
|
61
77
|
// --- Glass ---
|
package/scss/beathers.min.scss
CHANGED
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
@use '../variables' as vars;
|
|
4
4
|
@use '../settings/defaults' as defs;
|
|
5
5
|
@use '../settings/index' as settings;
|
|
6
|
+
@use '../functions/validations' as val;
|
|
6
7
|
|
|
7
8
|
// Definitions
|
|
8
9
|
$breakpoints: if(vars.$breakpoints != (), vars.$breakpoints, defs.$breakpoints);
|
|
9
|
-
$useMediaQueries: if(vars.$useMediaQueries != null, vars.$useMediaQueries, settings.$useMediaQueries);
|
|
10
10
|
|
|
11
11
|
// Breakpoint Mixin
|
|
12
12
|
// --------------------------------------
|
|
@@ -54,11 +54,12 @@ $useMediaQueries: if(vars.$useMediaQueries != null, vars.$useMediaQueries, setti
|
|
|
54
54
|
// }
|
|
55
55
|
// }
|
|
56
56
|
//
|
|
57
|
-
@mixin mQ($type, $key) {
|
|
57
|
+
@mixin mQ($type, $key, $condition: null) {
|
|
58
58
|
// Retrieve the size value from the breakpoints map using the provided key
|
|
59
59
|
$size: map.get($breakpoints, $key);
|
|
60
|
+
$checkedCondition: val.boolean($condition, 'mQ().condition');
|
|
60
61
|
|
|
61
|
-
@if $size and $size > 0 and $
|
|
62
|
+
@if $size and $size > 0 and $checkedCondition {
|
|
62
63
|
// Check if a valid size value exists
|
|
63
64
|
// Generate the media query using the provided type and size
|
|
64
65
|
@media (string.unquote("#{$type}-width"): $size) {
|
|
@@ -114,13 +115,15 @@ $useMediaQueries: if(vars.$useMediaQueries != null, vars.$useMediaQueries, setti
|
|
|
114
115
|
// text-align: center !important;
|
|
115
116
|
// }
|
|
116
117
|
// }
|
|
117
|
-
|
|
118
|
-
@mixin multiSizes() {
|
|
119
|
-
|
|
118
|
+
|
|
119
|
+
@mixin multiSizes($condition: null) {
|
|
120
|
+
$checkedCondition: val.boolean($condition, 'mQ().condition');
|
|
121
|
+
|
|
122
|
+
@if $checkedCondition {
|
|
120
123
|
@each $size, $value in $breakpoints {
|
|
121
124
|
$divider: if($size, #{\:}, '');
|
|
122
125
|
|
|
123
|
-
@include mQ(min, $size) {
|
|
126
|
+
@include mQ(min, $size, $checkedCondition) {
|
|
124
127
|
@content ($size, $divider);
|
|
125
128
|
}
|
|
126
129
|
}
|
|
@@ -6,14 +6,6 @@
|
|
|
6
6
|
// Definitions
|
|
7
7
|
$axisDivisions: if(vars.$axisDivisions != null, vars.$axisDivisions, defs.$axisDivisions);
|
|
8
8
|
|
|
9
|
-
// @function shadowValue
|
|
10
|
-
// @description Converts a unitless number to a pixel value for shadows, unless the value is 0.
|
|
11
|
-
// @param {Number} $value - The shadow value.
|
|
12
|
-
// @return {String} The shadow value with "px" appended, or 0.
|
|
13
|
-
@function shadowValue($value) {
|
|
14
|
-
@return if($value != 0, #{$value}#{'px'}, $value);
|
|
15
|
-
}
|
|
16
|
-
|
|
17
9
|
// @mixin gridDivision
|
|
18
10
|
// @description Generates CSS grid classes for creating grid layouts.
|
|
19
11
|
// @param {String} $axis - The grid axis ('column' or 'row').
|
|
@@ -97,55 +97,30 @@ $cursors: (
|
|
|
97
97
|
// Defines shadow presets.
|
|
98
98
|
$shadows: (
|
|
99
99
|
'light': (
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
spread: 0,
|
|
104
|
-
opacity: 0.15,
|
|
100
|
+
rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em,
|
|
101
|
+
rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em,
|
|
102
|
+
rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset,
|
|
105
103
|
),
|
|
106
104
|
'soft': (
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
blur: 12,
|
|
110
|
-
spread: 0,
|
|
111
|
-
opacity: 0.2,
|
|
105
|
+
rgba(0, 0, 0, 0.1) 0px 20px 25px -5px,
|
|
106
|
+
rgba(0, 0, 0, 0.04) 0px 10px 10px -5px,
|
|
112
107
|
),
|
|
113
108
|
'medium': (
|
|
114
|
-
|
|
115
|
-
y: 10,
|
|
116
|
-
blur: 20,
|
|
117
|
-
spread: 0,
|
|
118
|
-
opacity: 0.2,
|
|
109
|
+
rgba(0, 0, 0, 0.1) 0px 10px 50px,
|
|
119
110
|
),
|
|
120
111
|
'solid': (
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
spread: 0,
|
|
125
|
-
opacity: 0.3,
|
|
112
|
+
rgba(0, 0, 0, 0.2) 0px 12px 28px 0px,
|
|
113
|
+
rgba(0, 0, 0, 0.1) 0px 2px 4px 0px,
|
|
114
|
+
rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset,
|
|
126
115
|
),
|
|
127
|
-
'
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
blur: 40,
|
|
131
|
-
spread: 10,
|
|
132
|
-
opacity: 0.1,
|
|
116
|
+
'floating': (
|
|
117
|
+
rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
|
|
118
|
+
rgba(0, 0, 0, 0.3) 0px 8px 16px -8px,
|
|
133
119
|
),
|
|
134
120
|
'flat': (
|
|
135
|
-
|
|
136
|
-
y: 6,
|
|
137
|
-
blur: 6,
|
|
138
|
-
spread: 4,
|
|
139
|
-
opacity: 0.2,
|
|
140
|
-
),
|
|
141
|
-
'floating': (
|
|
142
|
-
x: 0,
|
|
143
|
-
y: 20,
|
|
144
|
-
blur: 40,
|
|
145
|
-
spread: 0,
|
|
146
|
-
opacity: 0.15,
|
|
121
|
+
rgba(0, 0, 0, 0.15) 0px 3px 3px 0px,
|
|
147
122
|
),
|
|
148
|
-
);
|
|
123
|
+
) !default;
|
|
149
124
|
|
|
150
125
|
// Defines utility classes for clearing properties.
|
|
151
126
|
$clearanceOptions: (
|
|
@@ -1,19 +1,21 @@
|
|
|
1
1
|
// Main settings ----- ----- ----- -----
|
|
2
|
-
// Enables or disables media queries.
|
|
3
|
-
$useMediaQueries: false !default;
|
|
4
|
-
$useIcons: true !default;
|
|
5
2
|
|
|
6
3
|
// Typographic settings ----- ----- ----- -----
|
|
7
4
|
// Enables or disables font family utilities.
|
|
8
5
|
$useFontFamilies: true !default;
|
|
6
|
+
$useFontFamiliesMediaQueries: false !default;
|
|
9
7
|
// Enables or disables font size utilities.
|
|
10
8
|
$useFontSizes: true !default;
|
|
9
|
+
$useFontSizesMediaQueries: true !default;
|
|
11
10
|
// Enables or disables font shape utilities (transform, decoration, styles).
|
|
12
11
|
$useFontShapes: true !default;
|
|
12
|
+
$useFontShapesMediaQueries: false !default;
|
|
13
13
|
// Enables or disables text alignment utilities.
|
|
14
14
|
$useTextAligns: true !default;
|
|
15
|
+
$useTextAlignsMediaQueries: true !default;
|
|
15
16
|
// Enables or disables text truncation utilities.
|
|
16
17
|
$useTextTruncate: true !default;
|
|
18
|
+
$useTextTruncateMediaQueries: true !default;
|
|
17
19
|
|
|
18
20
|
// Colors settings ----- ----- ----- -----
|
|
19
21
|
// Enables or disables color utilities.
|
|
@@ -30,41 +32,53 @@ $useCurrentColors: true !default;
|
|
|
30
32
|
$useRootColors: true !default;
|
|
31
33
|
|
|
32
34
|
// Grid settings ----- ----- ----- -----
|
|
35
|
+
$useGridMediaQueries: true !default;
|
|
33
36
|
// Enables or disables grid utilities.
|
|
34
37
|
$useGrid: true !default;
|
|
35
38
|
// Enables or disables flexbox utilities.
|
|
36
39
|
$useFlex: true !default;
|
|
37
40
|
|
|
38
41
|
// Shapes settings ----- ----- ----- -----
|
|
39
|
-
// Enables or disables transition utilities.
|
|
40
|
-
$useTransitions: true !default;
|
|
41
42
|
// Enables or disables wrapper utilities.
|
|
42
43
|
$useWrappers: true !default;
|
|
43
44
|
// Enables or disables shadow utilities.
|
|
44
45
|
$useShadows: true !default;
|
|
46
|
+
$useShadowsMediaQueries: false !default;
|
|
45
47
|
// Enables or disables display utilities.
|
|
46
48
|
$useDisplays: true !default;
|
|
49
|
+
$useDisplaysMediaQueries: false !default;
|
|
47
50
|
// Enables or disables overflow utilities.
|
|
48
51
|
$useOverflows: true !default;
|
|
52
|
+
$useOverflowsMediaQueries: false !default;
|
|
49
53
|
// Enables or disables opacity utilities.
|
|
50
54
|
$useOpacities: true !default;
|
|
55
|
+
$useOpacitiesMediaQueries: false !default;
|
|
51
56
|
// Enables or disables blur utilities.
|
|
52
57
|
$useBlur: true !default;
|
|
58
|
+
$useBlurMediaQueries: false !default;
|
|
53
59
|
// Enables or disables object-fit utilities.
|
|
54
60
|
$useObjectFits: true !default;
|
|
61
|
+
$useObjectFitsMediaQueries: false !default;
|
|
55
62
|
// Enables or disables position utilities.
|
|
56
63
|
$usePositions: true !default;
|
|
64
|
+
$usePositionsMediaQueries: false !default;
|
|
57
65
|
// Enables or disables inset utilities.
|
|
58
66
|
$useInsets: true !default;
|
|
67
|
+
$useInsetsMediaQueries: false !default;
|
|
59
68
|
// Enables or disables size utilities (width, height).
|
|
60
69
|
$useSizes: true !default;
|
|
70
|
+
$useSizesMediaQueries: true !default;
|
|
61
71
|
// Enables or disables gutter utilities (padding, margin, gap).
|
|
62
72
|
$useGutters: true !default;
|
|
73
|
+
$useGuttersMediaQueries: true !default;
|
|
63
74
|
// Enables or disables border utilities.
|
|
64
75
|
$useBorders: true !default;
|
|
76
|
+
$useBordersMediaQueries: false !default;
|
|
65
77
|
// Enables or disables text border utilities.
|
|
66
78
|
$useTextBorders: true !default;
|
|
79
|
+
$useTextBordersMediaQueries: false !default;
|
|
67
80
|
// Enables or disables border-radius utilities.
|
|
68
81
|
$useRadius: true !default;
|
|
82
|
+
$useRadiusMediaQueries: false !default;
|
|
69
83
|
// Enables or disables glass effect utilities.
|
|
70
84
|
$useGlass: true !default;
|
package/scss/style/_grid.scss
CHANGED
|
@@ -8,12 +8,13 @@
|
|
|
8
8
|
// Definitions
|
|
9
9
|
$useGrid: if(vars.$useGrid != null, vars.$useGrid, settings.$useGrid);
|
|
10
10
|
$useFlex: if(vars.$useFlex != null, vars.$useFlex, settings.$useFlex);
|
|
11
|
+
$useGridMediaQueries: if(vars.$useGridMediaQueries != null, vars.$useGridMediaQueries, settings.$useGridMediaQueries);
|
|
11
12
|
|
|
12
13
|
@if $useGrid {
|
|
13
14
|
.grid {
|
|
14
15
|
display: grid;
|
|
15
16
|
|
|
16
|
-
@include mQ.multiSizes() using ($size, $divider) {
|
|
17
|
+
@include mQ.multiSizes($useGridMediaQueries) using ($size, $divider) {
|
|
17
18
|
@include func.gridDivision(column, $size, $divider);
|
|
18
19
|
@include func.gridDivision(row, $size, $divider);
|
|
19
20
|
}
|
|
@@ -26,7 +27,7 @@ $useFlex: if(vars.$useFlex != null, vars.$useFlex, settings.$useFlex);
|
|
|
26
27
|
flex-direction: row;
|
|
27
28
|
flex-wrap: wrap;
|
|
28
29
|
|
|
29
|
-
@include mQ.multiSizes() using ($size, $divider) {
|
|
30
|
+
@include mQ.multiSizes($useGridMediaQueries) using ($size, $divider) {
|
|
30
31
|
@each $property, $values in configs.$flexProperties {
|
|
31
32
|
// Validate parameters
|
|
32
33
|
$checkedProperty: val.listItem((flex-wrap, flex-direction), $property, 'flex.properties');
|
|
@@ -47,7 +48,7 @@ $useFlex: if(vars.$useFlex != null, vars.$useFlex, settings.$useFlex);
|
|
|
47
48
|
}
|
|
48
49
|
}
|
|
49
50
|
|
|
50
|
-
&.wrapper {
|
|
51
|
+
&.flex-wrapper {
|
|
51
52
|
&.row,
|
|
52
53
|
&.row-reverse {
|
|
53
54
|
@include func.flexDivision(width, 'cols', $size, $divider);
|
|
@@ -65,7 +66,7 @@ $useFlex: if(vars.$useFlex != null, vars.$useFlex, settings.$useFlex);
|
|
|
65
66
|
}
|
|
66
67
|
|
|
67
68
|
@if $useFlex or $useGrid {
|
|
68
|
-
@include mQ.multiSizes() using ($size, $divider) {
|
|
69
|
+
@include mQ.multiSizes($useGridMediaQueries) using ($size, $divider) {
|
|
69
70
|
@each $way, $selections in configs.$justify {
|
|
70
71
|
@each $selection, $properties in $selections {
|
|
71
72
|
@each $property in $properties {
|
|
@@ -78,7 +79,9 @@ $useFlex: if(vars.$useFlex != null, vars.$useFlex, settings.$useFlex);
|
|
|
78
79
|
$flexValue: #{$flexPrefix}#{$value};
|
|
79
80
|
|
|
80
81
|
&#{$property} {
|
|
81
|
-
&.flex
|
|
82
|
+
&.flex,
|
|
83
|
+
&.d-flex,
|
|
84
|
+
&.d-inline-flex {
|
|
82
85
|
#{$way}-#{$selection}: if($size, $flexValue !important, $flexValue);
|
|
83
86
|
}
|
|
84
87
|
|