Skip to content

Commit 09128ea

Browse files
author
Simon Milfred
committed
fix: some minor cleanup
1 parent 73f74c0 commit 09128ea

File tree

3 files changed

+43
-39
lines changed

3 files changed

+43
-39
lines changed

‎.playground/assets/js/theme-configuration.default.js‎

Lines changed: 33 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
coming from backend or solution-specific files (handled in the
55
ThemeConfiguration.vue component).
66
7-
Only the keys in this default file will be the grounds for tailwind
7+
Only the keys in this default file will be the grounds for unocss
88
rules - overwriting configurations should never introduce new keys,
99
unless they are added to this file too. Only the values of the keys
1010
are overwritten.
@@ -19,19 +19,47 @@ export default {
1919
smViewport: 375, // Lowest value clamp
2020
mdViewport: 1440, // Midpoint (used for both low-clamp and high-clamp)
2121
lgViewport: 1920, // Highest value clamp
22+
viewportWidth: undefined, // Default to 100dvw, what to base scalings on.
23+
24+
layout: {
25+
margin: {
26+
sm: 16,
27+
md: 96,
28+
lg: 124,
29+
},
30+
31+
gutter: {
32+
sm: 16,
33+
md: 24,
34+
lg: 32,
35+
},
36+
37+
// These rules will be turned into `X/Ycol` rules, which can then be used like `w-3/12col`.
38+
// There should always be at least one column, both on sm, md and lg.
39+
columns: {
40+
sm: 8,
41+
md: 12,
42+
lg: 12,
43+
},
44+
45+
// The max value that the design can be scaled to (single value, not sm-md-lg).
46+
// The max will impact columns max scaling as well.
47+
// undefined equals no max.
48+
max: undefined,
49+
},
2250

2351
// Rules
2452
colors: {
2553
/*
2654
CSS variables will be created and used for the colors,
27-
which will in turn be used in the Tailwind config. Keys
28-
will be directly transfered to the Tailwind config.
55+
which will in turn be used in the UnoCSS config. Keys
56+
will be directly transfered to the UnoCSS config.
2957
30-
"primary: '#000000'" will result in the Tailwind rule:
58+
"primary: '#000000'" will result in the UnoCSS rule:
3159
"primary: var(--theme-colors-primary, #000000)"
3260
3361
If configuring a color with three comma-separated numbers,
34-
the built-in Tailwind color opacities will be used in the
62+
the built-in UnoCSS color opacities will be used in the
3563
rules.
3664
*/
3765
text: '#000000',
@@ -103,33 +131,6 @@ export default {
103131
onDangerDanger: [254, 250, 250],
104132
},
105133

106-
layout: {
107-
margin: {
108-
sm: 16,
109-
md: 96,
110-
lg: 124,
111-
},
112-
113-
gutter: {
114-
sm: 16,
115-
md: 24,
116-
lg: 32,
117-
},
118-
119-
// These rules will be turned into `X/Ycol` rules, which can then be used like `w-3/12col`.
120-
// There should always be at least one column, both on sm, md and lg.
121-
columns: {
122-
sm: 8,
123-
md: 12,
124-
lg: 12,
125-
},
126-
127-
// The max value that the design can be scaled to (single value, not sm-md-lg).
128-
// The max will impact columns max scaling as well.
129-
// undefined equals no max.
130-
max: undefined,
131-
},
132-
133134
containers: {
134135
fish: '1000px',
135136
},

‎.playground/assets/js/theme-configuration.print.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
coming from backend or solution-specific files (handled in the
55
ThemeConfiguration.vue component).
66
7-
Only the keys in this default file will be the grounds for tailwind
7+
Only the keys in this default file will be the grounds for unocss
88
rules - overwriting configurations should never introduce new keys,
99
unless they are added to this file too. Only the values of the keys
1010
are overwritten.

‎components/ThemeConfiguration/ThemeConfiguration.vue‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -223,7 +223,8 @@ function extractLayoutRules(object) {
223223
}px;`;
224224
};
225225
const generateResponsiveRule = (columnCount) => {
226-
const widthCalculation = `(var(--visual-viewport-width, 100dvw) - var(--theme-layout-margin, var(--theme-layout-margin--sm)) * 2 - var(--theme-layout-gutter, var(--theme-layout-gutter--sm)) * ${
226+
const { viewportWidth = '100dvw' } = compConfig.value;
227+
const widthCalculation = `(var(--visual-viewport-width, ${viewportWidth}) - var(--theme-layout-margin, var(--theme-layout-margin--sm)) * 2 - var(--theme-layout-gutter, var(--theme-layout-gutter--sm)) * ${
227228
columnCount - 1
228229
}) / ${columnCount}`;
229230
@@ -249,8 +250,9 @@ function extractLayoutRules(object) {
249250
}
250251
251252
// Setup layout max
253+
const { viewportWidth = '100dvw' } = compConfig.value;
252254
if (typeof maxRuleValue === 'undefined') {
253-
rules.push('--theme-layout-max: var(--visual-viewport-width, 100dvw);');
255+
rules.push(`--theme-layout-max: var(--visual-viewport-width, ${viewportWidth});`);
254256
} else {
255257
rules.push(`--theme-layout-max: ${maxRuleValue}px;`);
256258
}
@@ -469,6 +471,7 @@ function extractRules(
469471
});
470472
const { smViewport, mdViewport, lgViewport } = compConfig.value;
471473
if (doScalingRule) {
474+
const { viewportWidth = '100dvw' } = compConfig.value;
472475
const { sm, md, lg } = subObject;
473476
474477
// This one is for smaller screens
@@ -495,8 +498,8 @@ function extractRules(
495498
)}${unit} + ${
496499
Math.round(
497500
((max - min) / (mdViewport - smViewport)) * 100000
498-
) / 1000
499-
}vw - ${unit === 'rem' ? mid : 0}px, ${transformation(
501+
) / 100000
502+
} * ${viewportWidth} - ${unit === 'rem' ? mid : 0}px, ${transformation(
500503
max + (unit === 'rem' ? mid : 0)
501504
)}${unit} - ${unit === 'rem' ? mid : 0}px);`
502505
.split(' - 0px')
@@ -535,8 +538,8 @@ function extractRules(
535538
Math.round(
536539
((max - min) / (lgViewport - mdViewport)) *
537540
100000
538-
) / 1000
539-
}vw - ${unit === 'rem' ? mid : 0}px, ${transformation(
541+
) / 100000
542+
} * ${viewportWidth} - ${unit === 'rem' ? mid : 0}px, ${transformation(
540543
max
541544
)}${unit});`
542545
.split(' - 0px')

0 commit comments

Comments
 (0)