@blockbite/tailwind 3.4.15 → 3.5.0
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/components/fluid-container.d.ts +1 -4
- package/dist/components/fluid-container.js +1 -29
- package/dist/components/mask.js +11 -0
- package/dist/components/text-mask.d.ts +3 -0
- package/dist/components/text-mask.js +11 -0
- package/dist/index.d.ts +2 -3
- package/dist/index.js +14 -20
- package/dist/{gridarea/index.d.ts → plugins/fluid-container.d.ts} +1 -1
- package/dist/plugins/fluid-container.js +40 -0
- package/dist/plugins/{grid-16x.d.ts → grid-area.d.ts} +1 -1
- package/dist/plugins/grid-area.js +44 -0
- package/dist/plugins/{viewport-dimensions.d.ts → mask.d.ts} +1 -1
- package/dist/plugins/mask.js +13 -0
- package/dist/spacing.d.ts +0 -4
- package/dist/spacing.js +0 -157
- package/dist/theme-parser.d.ts +1 -0
- package/dist/theme-parser.js +1 -0
- package/package.json +4 -3
- package/dist/___index copy.d.ts +0 -7
- package/dist/___index copy.js +0 -9
- package/dist/components/interaction.js +0 -35
- package/dist/gridarea/index.js +0 -7
- package/dist/gridarea/utilities/area-dimensions.d.ts +0 -3
- package/dist/gridarea/utilities/area-dimensions.js +0 -22
- package/dist/gridarea/utilities/grid-area.d.ts +0 -5
- package/dist/gridarea/utilities/grid-area.js +0 -46
- package/dist/plugins/grid-16x.js +0 -60
- package/dist/plugins/viewport-dimensions.js +0 -25
- package/dist/screens.d.ts +0 -5
- package/dist/screens.js +0 -10
- /package/dist/components/{interaction.d.ts → mask.d.ts} +0 -0
|
@@ -1,29 +1 @@
|
|
|
1
|
-
|
|
2
|
-
--b_container-fluid-xs: 98vw;
|
|
3
|
-
--b_container-fluid-xl: 95vw;
|
|
4
|
-
--b_padding: 1rem;
|
|
5
|
-
*/
|
|
6
|
-
export default function ({ addComponents, theme }) {
|
|
7
|
-
// Base style
|
|
8
|
-
addComponents({
|
|
9
|
-
[`.container-fluid`]: {
|
|
10
|
-
marginLeft: 'auto',
|
|
11
|
-
marginRight: 'auto',
|
|
12
|
-
paddingLeft: 'var(--b_padding, 4vw)',
|
|
13
|
-
paddingRight: 'var(--b_padding, 4vw)',
|
|
14
|
-
},
|
|
15
|
-
});
|
|
16
|
-
// Responsive style for 2xl (users must use 2xl:container-fluid)
|
|
17
|
-
const maxWidth2xl = theme('screens.2xl');
|
|
18
|
-
if (maxWidth2xl) {
|
|
19
|
-
addComponents({
|
|
20
|
-
[`.container-fluid-2xl`]: {
|
|
21
|
-
maxWidth: maxWidth2xl,
|
|
22
|
-
marginLeft: 'auto',
|
|
23
|
-
marginRight: 'auto',
|
|
24
|
-
paddingLeft: 'var(--b_padding, 1rem)',
|
|
25
|
-
paddingRight: 'var(--b_padding, 1rem)',
|
|
26
|
-
},
|
|
27
|
-
});
|
|
28
|
-
}
|
|
29
|
-
}
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export default function ({ addComponents }) {
|
|
2
|
+
const b_mask_text = {
|
|
3
|
+
'.b_mask-text': {
|
|
4
|
+
color: 'transparent',
|
|
5
|
+
'-webkit-text-fill-color': 'transparent',
|
|
6
|
+
'background-clip': 'text',
|
|
7
|
+
'-webkit-background-clip': 'text',
|
|
8
|
+
},
|
|
9
|
+
};
|
|
10
|
+
addComponents(b_mask_text);
|
|
11
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export default function ({ addComponents }) {
|
|
2
|
+
const b_text_mask = {
|
|
3
|
+
'.b_text-mask': {
|
|
4
|
+
color: 'transparent',
|
|
5
|
+
'-webkit-text-fill-color': 'transparent',
|
|
6
|
+
'background-clip': 'text',
|
|
7
|
+
'-webkit-background-clip': 'text',
|
|
8
|
+
},
|
|
9
|
+
};
|
|
10
|
+
addComponents(b_text_mask);
|
|
11
|
+
}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { getColorObject, getColors } from './colors.js';
|
|
2
2
|
import { getContainer } from './container.js';
|
|
3
|
-
import {
|
|
4
|
-
import { fluidSpacing, gridSpacing, nativeSpacing, percentSpacing, screenSpacing, spanSpacing } from './spacing.js';
|
|
3
|
+
import { percentSpacing, spanSpacing } from './spacing.js';
|
|
5
4
|
declare const blockbiteTailwindPlugin: any;
|
|
6
5
|
export default blockbiteTailwindPlugin;
|
|
7
|
-
export {
|
|
6
|
+
export { getColorObject, getColors, getContainer, percentSpacing, spanSpacing };
|
package/dist/index.js
CHANGED
|
@@ -2,31 +2,25 @@ import plugin from 'tailwindcss/plugin';
|
|
|
2
2
|
// Utilities and helpers
|
|
3
3
|
import { getColorObject, getColors } from './colors.js';
|
|
4
4
|
import { getContainer } from './container.js';
|
|
5
|
-
import {
|
|
6
|
-
import { fluidSpacing, gridSpacing, nativeSpacing, percentSpacing, screenSpacing, spanSpacing, } from './spacing.js';
|
|
5
|
+
import { percentSpacing, spanSpacing } from './spacing.js';
|
|
7
6
|
// Components
|
|
8
|
-
import anchorPosition from './components/anchor-position.js';
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import interaction from './components/interaction.js';
|
|
12
|
-
import swiper from './components/swiper.js';
|
|
7
|
+
// import anchorPosition from './components/anchor-position.js';
|
|
8
|
+
// import gridContainer from './components/grid-container.js';
|
|
9
|
+
// import swiper from './components/swiper.js';
|
|
13
10
|
// Plugins
|
|
14
|
-
import
|
|
15
|
-
import
|
|
16
|
-
|
|
17
|
-
import gridAreaPlugin from './gridarea/index.js';
|
|
11
|
+
import fluidContainer from './plugins/fluid-container.js';
|
|
12
|
+
import gridArea from './plugins/grid-area.js';
|
|
13
|
+
import mask from './plugins/mask.js';
|
|
18
14
|
const blockbiteTailwindPlugin = plugin(function (api) {
|
|
19
15
|
// Register all components
|
|
20
|
-
gridContainer(api);
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
interaction(api);
|
|
24
|
-
swiper(api);
|
|
16
|
+
// gridContainer(api);
|
|
17
|
+
// anchorPosition(api);
|
|
18
|
+
// swiper(api);
|
|
25
19
|
// Register all plugins/utilities
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
20
|
+
gridArea.handler(api);
|
|
21
|
+
fluidContainer.handler(api);
|
|
22
|
+
mask.handler(api);
|
|
29
23
|
});
|
|
30
24
|
export default blockbiteTailwindPlugin;
|
|
31
25
|
// Export functions and constants
|
|
32
|
-
export {
|
|
26
|
+
export { getColorObject, getColors, getContainer, percentSpacing, spanSpacing };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const _default: import("node_modules/tailwindcss/dist/types-
|
|
1
|
+
declare const _default: import("node_modules/tailwindcss/dist/types-WlZgYgM8.mjs").b;
|
|
2
2
|
export default _default;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import plugin from 'tailwindcss/plugin';
|
|
2
|
+
export default plugin(function ({ addBase, theme, addComponents }) {
|
|
3
|
+
const maxWidth2xl = theme('screens.2xl', '1536px');
|
|
4
|
+
addBase({
|
|
5
|
+
':root': {
|
|
6
|
+
'--b_padding': '4vw',
|
|
7
|
+
'--b_maxWidth': '100%',
|
|
8
|
+
[`@media (min-width: ${maxWidth2xl})`]: {
|
|
9
|
+
'--b_padding': '1rem',
|
|
10
|
+
'--b_maxWidth': maxWidth2xl,
|
|
11
|
+
},
|
|
12
|
+
},
|
|
13
|
+
});
|
|
14
|
+
const components = {
|
|
15
|
+
'.container-fluid': {
|
|
16
|
+
'box-sizing': 'border-box',
|
|
17
|
+
marginLeft: 'auto',
|
|
18
|
+
marginRight: 'auto',
|
|
19
|
+
paddingLeft: 'var(--b_padding, 4vw)',
|
|
20
|
+
paddingRight: 'var(--b_padding, 4vw)',
|
|
21
|
+
maxWidth: 'var(--b_maxWidth, 100%)',
|
|
22
|
+
},
|
|
23
|
+
'.container-inner': {
|
|
24
|
+
'box-sizing': 'border-box',
|
|
25
|
+
paddingLeft: 'calc( (100vw - var(--b_maxWidth, 100%)) / 2 + calc( var(--b_padding, 4vw) / 2 ) )',
|
|
26
|
+
paddingRight: 'calc( (100vw - var(--b_maxWidth, 100%)) / 2 + calc( var(--b_padding, 4vw) / 2 ) )',
|
|
27
|
+
},
|
|
28
|
+
'.container-inner-left': {
|
|
29
|
+
'box-sizing': 'border-box',
|
|
30
|
+
paddingLeft: 'calc( (100vw - var(--b_maxWidth, 100%)) / 2 + calc( var(--b_padding, 4vw) / 2 ) )',
|
|
31
|
+
paddingRight: 'var(--b_padding, 4vw)',
|
|
32
|
+
},
|
|
33
|
+
'.container-inner-right': {
|
|
34
|
+
'box-sizing': 'border-box',
|
|
35
|
+
paddingLeft: 'var(--b_padding, 4vw)',
|
|
36
|
+
paddingRight: 'calc( (100vw - var(--b_maxWidth, 100%)) / 2 + calc( var(--b_padding, 4vw) / 2 ) )',
|
|
37
|
+
},
|
|
38
|
+
};
|
|
39
|
+
addComponents(components, { variants: ['responsive'] });
|
|
40
|
+
});
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const _default: import("node_modules/tailwindcss/dist/types-
|
|
1
|
+
declare const _default: import("node_modules/tailwindcss/dist/types-WlZgYgM8.mjs").b;
|
|
2
2
|
export default _default;
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import plugin from 'tailwindcss/plugin';
|
|
2
|
+
export default plugin(function ({ matchUtilities }) {
|
|
3
|
+
// Arbitrary value utility that only sets --area
|
|
4
|
+
matchUtilities({
|
|
5
|
+
area: (value) => {
|
|
6
|
+
const parts = value.split(/[\/-]/).map((p) => p.trim());
|
|
7
|
+
if (parts.length === 4 && parts.every(Boolean)) {
|
|
8
|
+
return {
|
|
9
|
+
'--area': `${parts[0]} / ${parts[1]} / ${parts[2]} / ${parts[3]}`,
|
|
10
|
+
};
|
|
11
|
+
}
|
|
12
|
+
return {}; // ignore invalid values
|
|
13
|
+
},
|
|
14
|
+
}, { values: {} });
|
|
15
|
+
// Arbitrary grid container: grid-area-[cols/rows]
|
|
16
|
+
// - Sets grid templates with given track counts
|
|
17
|
+
// - Provides default 25% area via --b_area (half cols x half rows)
|
|
18
|
+
matchUtilities({
|
|
19
|
+
'grid-area': (value) => {
|
|
20
|
+
const str = String(value).trim();
|
|
21
|
+
const m = str.match(/^(\d+)\s*[\/ -]\s*(\d+)$/);
|
|
22
|
+
if (!m)
|
|
23
|
+
return {};
|
|
24
|
+
const cols = parseInt(m[1], 10);
|
|
25
|
+
const rows = parseInt(m[2], 10);
|
|
26
|
+
if (!Number.isFinite(cols) ||
|
|
27
|
+
!Number.isFinite(rows) ||
|
|
28
|
+
cols <= 0 ||
|
|
29
|
+
rows <= 0)
|
|
30
|
+
return {};
|
|
31
|
+
const halfCols = Math.ceil(cols / 2);
|
|
32
|
+
const halfRows = Math.ceil(rows / 2);
|
|
33
|
+
return {
|
|
34
|
+
display: 'grid',
|
|
35
|
+
gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
|
|
36
|
+
gridTemplateRows: `repeat(${rows}, minmax(0, 1fr))`,
|
|
37
|
+
'--b_area': `1 / 1 / ${halfRows} / ${halfCols}`,
|
|
38
|
+
'& > *': {
|
|
39
|
+
gridArea: 'var(--area, var(--b_area))',
|
|
40
|
+
},
|
|
41
|
+
};
|
|
42
|
+
},
|
|
43
|
+
}, { values: {} });
|
|
44
|
+
});
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const _default: import("node_modules/tailwindcss/dist/types-
|
|
1
|
+
declare const _default: import("node_modules/tailwindcss/dist/types-WlZgYgM8.mjs").b;
|
|
2
2
|
export default _default;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import plugin from 'tailwindcss/plugin';
|
|
2
|
+
// Utilities-based mask plugin so we can add variants and more masks later
|
|
3
|
+
export default plugin(function ({ addUtilities }) {
|
|
4
|
+
addUtilities({
|
|
5
|
+
// Text mask: make text transparent and clip background to text
|
|
6
|
+
'.b_mask-text': {
|
|
7
|
+
color: 'transparent',
|
|
8
|
+
'-webkit-text-fill-color': 'transparent',
|
|
9
|
+
'background-clip': 'text',
|
|
10
|
+
'-webkit-background-clip': 'text',
|
|
11
|
+
},
|
|
12
|
+
});
|
|
13
|
+
});
|
package/dist/spacing.d.ts
CHANGED
|
@@ -1,6 +1,2 @@
|
|
|
1
|
-
export declare const gridSpacing: (prefix?: string) => {};
|
|
2
|
-
export declare const fluidSpacing: (prefix?: string) => {};
|
|
3
1
|
export declare const percentSpacing: () => string[];
|
|
4
|
-
export declare const screenSpacing: () => {};
|
|
5
|
-
export declare const nativeSpacing: () => (string | number)[];
|
|
6
2
|
export declare const spanSpacing: () => number[];
|
package/dist/spacing.js
CHANGED
|
@@ -1,70 +1,3 @@
|
|
|
1
|
-
function createFluidSpacing(prefix) {
|
|
2
|
-
const fluid = [
|
|
3
|
-
{
|
|
4
|
-
size: '0px',
|
|
5
|
-
slug: '0',
|
|
6
|
-
name: '0',
|
|
7
|
-
},
|
|
8
|
-
{
|
|
9
|
-
size: 'clamp(16px, 1vw, 32px)',
|
|
10
|
-
slug: '1',
|
|
11
|
-
name: '1',
|
|
12
|
-
},
|
|
13
|
-
{
|
|
14
|
-
size: 'clamp(32px, 1vw, 48px)',
|
|
15
|
-
slug: '2',
|
|
16
|
-
name: '2',
|
|
17
|
-
},
|
|
18
|
-
{
|
|
19
|
-
size: 'clamp(40px, 1vw, 50px)',
|
|
20
|
-
slug: '3',
|
|
21
|
-
name: '3',
|
|
22
|
-
},
|
|
23
|
-
{
|
|
24
|
-
size: 'clamp(64px, 1vw, 80px)',
|
|
25
|
-
slug: '4',
|
|
26
|
-
name: '4',
|
|
27
|
-
},
|
|
28
|
-
{
|
|
29
|
-
size: 'clamp(128px, 1vw, 144px)',
|
|
30
|
-
slug: '5',
|
|
31
|
-
name: '5',
|
|
32
|
-
},
|
|
33
|
-
{
|
|
34
|
-
size: 'clamp(144px, 1vw, 164px)',
|
|
35
|
-
slug: '6',
|
|
36
|
-
name: '6',
|
|
37
|
-
},
|
|
38
|
-
{
|
|
39
|
-
slug: '8',
|
|
40
|
-
size: 'clamp(16px, 1vw, 32px)',
|
|
41
|
-
name: '8',
|
|
42
|
-
},
|
|
43
|
-
{
|
|
44
|
-
slug: '9',
|
|
45
|
-
size: 'clamp(16px, 1vw, 32px)',
|
|
46
|
-
name: '9',
|
|
47
|
-
},
|
|
48
|
-
{
|
|
49
|
-
slug: '10',
|
|
50
|
-
size: 'clamp(16px, 1vw, 32px)',
|
|
51
|
-
name: '10',
|
|
52
|
-
},
|
|
53
|
-
// can be used to push contain inside grid-container
|
|
54
|
-
{
|
|
55
|
-
slug: '1fr',
|
|
56
|
-
size: 'var(--b_fr-size, 1rem)',
|
|
57
|
-
name: '1FR',
|
|
58
|
-
},
|
|
59
|
-
];
|
|
60
|
-
const FluidSizes = {};
|
|
61
|
-
// add clamp spacing for gaps
|
|
62
|
-
fluid.forEach((size) => {
|
|
63
|
-
// add to spacing
|
|
64
|
-
FluidSizes[prefix + 'fluid-' + size.slug] = size.size;
|
|
65
|
-
});
|
|
66
|
-
return FluidSizes;
|
|
67
|
-
}
|
|
68
1
|
function createPercentSpacing() {
|
|
69
2
|
const percentUnits = [
|
|
70
3
|
'1/2',
|
|
@@ -97,104 +30,14 @@ function createPercentSpacing() {
|
|
|
97
30
|
];
|
|
98
31
|
return percentUnits;
|
|
99
32
|
}
|
|
100
|
-
function createScreenSpacing() {
|
|
101
|
-
const screenSpacing = [
|
|
102
|
-
'b_screen-10',
|
|
103
|
-
'b_screen-20',
|
|
104
|
-
'b_screen-30',
|
|
105
|
-
'b_screen-40',
|
|
106
|
-
'b_screen-50',
|
|
107
|
-
'b_screen-60',
|
|
108
|
-
'b_screen-70',
|
|
109
|
-
'b_screen-80',
|
|
110
|
-
'b_screen-90',
|
|
111
|
-
'b_screen-100',
|
|
112
|
-
];
|
|
113
|
-
const screenSpacingValues = {};
|
|
114
|
-
screenSpacing.forEach((size) => {
|
|
115
|
-
screenSpacingValues[size] = size;
|
|
116
|
-
});
|
|
117
|
-
return screenSpacingValues;
|
|
118
|
-
}
|
|
119
|
-
function createGridSpacing(prefix) {
|
|
120
|
-
// create grid based on 16px
|
|
121
|
-
const gridSpacing = {};
|
|
122
|
-
const minimalValues = [0, 1, 2, 4, 6, 8, 10, 12, 14, 18, 20, 22, 24, 32];
|
|
123
|
-
for (let i = 0; i < minimalValues.length; i++) {
|
|
124
|
-
const minimalValue = minimalValues[i];
|
|
125
|
-
gridSpacing[`${prefix}${minimalValue}`] = minimalValue / 16 + 'rem';
|
|
126
|
-
}
|
|
127
|
-
for (let i = 1; i < 1280 / 16; i++) {
|
|
128
|
-
const gridsize = i * 16;
|
|
129
|
-
gridSpacing[`${prefix}${gridsize}`] = i + 'rem';
|
|
130
|
-
}
|
|
131
|
-
return gridSpacing;
|
|
132
|
-
}
|
|
133
|
-
function createNativeSpacing() {
|
|
134
|
-
const nativeSpacing = [
|
|
135
|
-
0,
|
|
136
|
-
'px',
|
|
137
|
-
0.5,
|
|
138
|
-
1,
|
|
139
|
-
1.5,
|
|
140
|
-
2,
|
|
141
|
-
2.5,
|
|
142
|
-
3,
|
|
143
|
-
3.5,
|
|
144
|
-
4,
|
|
145
|
-
5,
|
|
146
|
-
6,
|
|
147
|
-
7,
|
|
148
|
-
8,
|
|
149
|
-
9,
|
|
150
|
-
10,
|
|
151
|
-
11,
|
|
152
|
-
12,
|
|
153
|
-
14,
|
|
154
|
-
16,
|
|
155
|
-
20,
|
|
156
|
-
24,
|
|
157
|
-
28,
|
|
158
|
-
32,
|
|
159
|
-
36,
|
|
160
|
-
40,
|
|
161
|
-
44,
|
|
162
|
-
48,
|
|
163
|
-
52,
|
|
164
|
-
56,
|
|
165
|
-
60,
|
|
166
|
-
64,
|
|
167
|
-
72,
|
|
168
|
-
80,
|
|
169
|
-
96,
|
|
170
|
-
];
|
|
171
|
-
return nativeSpacing;
|
|
172
|
-
}
|
|
173
33
|
function createSpanSpacing() {
|
|
174
34
|
const colSpanValues = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
|
|
175
35
|
return colSpanValues;
|
|
176
36
|
}
|
|
177
|
-
export const gridSpacing = (prefix = '') => {
|
|
178
|
-
// create grid based on 16px
|
|
179
|
-
const spacingGrid = createGridSpacing(prefix);
|
|
180
|
-
return spacingGrid;
|
|
181
|
-
};
|
|
182
|
-
export const fluidSpacing = (prefix = '') => {
|
|
183
|
-
const spacingFluid = createFluidSpacing(prefix);
|
|
184
|
-
return spacingFluid;
|
|
185
|
-
};
|
|
186
37
|
export const percentSpacing = () => {
|
|
187
38
|
const spacingPercent = createPercentSpacing();
|
|
188
39
|
return spacingPercent;
|
|
189
40
|
};
|
|
190
|
-
export const screenSpacing = () => {
|
|
191
|
-
const spacingScreen = createScreenSpacing();
|
|
192
|
-
return spacingScreen;
|
|
193
|
-
};
|
|
194
|
-
export const nativeSpacing = () => {
|
|
195
|
-
const spacingNative = createNativeSpacing();
|
|
196
|
-
return spacingNative;
|
|
197
|
-
};
|
|
198
41
|
export const spanSpacing = () => {
|
|
199
42
|
const spacingSpan = createSpanSpacing();
|
|
200
43
|
return spacingSpan;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blockbite/tailwind",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.5.0",
|
|
4
4
|
"description": "helper for blockbite plugin and blockbite theme",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -25,7 +25,8 @@
|
|
|
25
25
|
"i": "^0.3.7",
|
|
26
26
|
"npm": "^11.3.0",
|
|
27
27
|
"tailwind-scrollbar": "^4.0.2",
|
|
28
|
-
"user": "^0.0.0"
|
|
28
|
+
"user": "^0.0.0",
|
|
29
|
+
"@blockbite/libraries": "0.12.0"
|
|
29
30
|
},
|
|
30
31
|
"publishConfig": {
|
|
31
32
|
"access": "public"
|
|
@@ -42,6 +43,6 @@
|
|
|
42
43
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
43
44
|
"dev": "vite",
|
|
44
45
|
"build": "tsc --declaration --outDir dist",
|
|
45
|
-
"
|
|
46
|
+
"lint:ts": "tsc --noEmit"
|
|
46
47
|
}
|
|
47
48
|
}
|
package/dist/___index copy.d.ts
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { getAspectRatio } from './aspect-ratio.js';
|
|
2
|
-
import { getColorObject, getColors } from './colors.js';
|
|
3
|
-
import { getContainer } from './container.js';
|
|
4
|
-
import { getScreens } from './screens.js';
|
|
5
|
-
import { fluidSpacing, gridSpacing, nativeSpacing, percentSpacing, screenSpacing, spanSpacing } from './spacing.js';
|
|
6
|
-
import { themeParser } from './theme-parser.js';
|
|
7
|
-
export { fluidSpacing, getAspectRatio, getColorObject, getColors, getContainer, getScreens, gridSpacing, nativeSpacing, percentSpacing, screenSpacing, spanSpacing, themeParser, };
|
package/dist/___index copy.js
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
// Import functions and constants
|
|
2
|
-
import { getAspectRatio } from './aspect-ratio.js';
|
|
3
|
-
import { getColorObject, getColors } from './colors.js';
|
|
4
|
-
import { getContainer } from './container.js';
|
|
5
|
-
import { getScreens } from './screens.js';
|
|
6
|
-
import { fluidSpacing, gridSpacing, nativeSpacing, percentSpacing, screenSpacing, spanSpacing, } from './spacing.js';
|
|
7
|
-
import { themeParser } from './theme-parser.js';
|
|
8
|
-
// Export functions and constants
|
|
9
|
-
export { fluidSpacing, getAspectRatio, getColorObject, getColors, getContainer, getScreens, gridSpacing, nativeSpacing, percentSpacing, screenSpacing, spanSpacing, themeParser, };
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
export default function ({ addComponents }) {
|
|
2
|
-
const b_tileslide_in = {
|
|
3
|
-
'.tile-in-left': {
|
|
4
|
-
position: 'absolute!important',
|
|
5
|
-
top: 0,
|
|
6
|
-
left: 0,
|
|
7
|
-
right: 0,
|
|
8
|
-
bottom: 0,
|
|
9
|
-
zIndex: 10,
|
|
10
|
-
overflow: 'hidden',
|
|
11
|
-
transition: 'transform 0.5s',
|
|
12
|
-
transform: 'translateX(-100%)',
|
|
13
|
-
},
|
|
14
|
-
'.active .tile-in-left': {
|
|
15
|
-
transform: 'translateX(0%)',
|
|
16
|
-
},
|
|
17
|
-
};
|
|
18
|
-
const b_tilefade_in = {
|
|
19
|
-
'.tile-in-fade': {
|
|
20
|
-
opacity: 0,
|
|
21
|
-
transition: 'opacity 0.5s',
|
|
22
|
-
position: 'absolute!important',
|
|
23
|
-
top: 0,
|
|
24
|
-
left: 0,
|
|
25
|
-
right: 0,
|
|
26
|
-
bottom: 0,
|
|
27
|
-
zIndex: 10,
|
|
28
|
-
overflow: 'hidden',
|
|
29
|
-
},
|
|
30
|
-
'.active .tile-in-fade': {
|
|
31
|
-
opacity: 1,
|
|
32
|
-
},
|
|
33
|
-
};
|
|
34
|
-
addComponents([b_tileslide_in, b_tilefade_in]);
|
|
35
|
-
}
|
package/dist/gridarea/index.js
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
function escapeClassName(className) {
|
|
2
|
-
return className.replace(/([^a-zA-Z0-9-])/g, '\\$1');
|
|
3
|
-
}
|
|
4
|
-
export default function ({ addUtilities }) {
|
|
5
|
-
const newUtilities = {};
|
|
6
|
-
// 96 is max resolution
|
|
7
|
-
for (let i = 0; i <= 97; i++) {
|
|
8
|
-
newUtilities[`.${escapeClassName(`area-x-${i}`)}`] = {
|
|
9
|
-
'--b_area-x': `${i}`,
|
|
10
|
-
};
|
|
11
|
-
newUtilities[`.${escapeClassName(`area-y-${i}`)}`] = {
|
|
12
|
-
'--b_area-y': `${i}`,
|
|
13
|
-
};
|
|
14
|
-
newUtilities[`.${escapeClassName(`area-w-${i}`)}`] = {
|
|
15
|
-
'--b_area-w': `${i}`,
|
|
16
|
-
};
|
|
17
|
-
newUtilities[`.${escapeClassName(`area-h-${i}`)}`] = {
|
|
18
|
-
'--b_area-h': `${i}`,
|
|
19
|
-
};
|
|
20
|
-
}
|
|
21
|
-
addUtilities(newUtilities, ['responsive']);
|
|
22
|
-
}
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
export default function ({ addComponents, matchUtilities, config }) {
|
|
2
|
-
const important = config('important');
|
|
3
|
-
const prefix = typeof important === 'string' ? important : '';
|
|
4
|
-
// Predefined grid-area utilities
|
|
5
|
-
addComponents({
|
|
6
|
-
[`${prefix} .area`]: {
|
|
7
|
-
gridArea: 'var(--b_area-y) / var(--b_area-x) / calc(var(--b_area-y) + var(--b_area-h)) / calc(var(--b_area-x) + var(--b_area-w))',
|
|
8
|
-
},
|
|
9
|
-
[`${prefix} .b_grid-area-16`]: {
|
|
10
|
-
display: 'grid',
|
|
11
|
-
gridTemplateColumns: 'repeat(16, 1fr)',
|
|
12
|
-
gridTemplateRows: 'repeat(16, 1fr)',
|
|
13
|
-
'--init-area': '1 / 1 / 4 / 4',
|
|
14
|
-
},
|
|
15
|
-
[`${prefix} .b_grid-area-32`]: {
|
|
16
|
-
display: 'grid',
|
|
17
|
-
gridTemplateColumns: 'repeat(32, 1fr)',
|
|
18
|
-
gridTemplateRows: 'repeat(32, 1fr)',
|
|
19
|
-
'--init-area': '1 / 1 / 8 / 8',
|
|
20
|
-
},
|
|
21
|
-
[`${prefix} .b_grid-area-64`]: {
|
|
22
|
-
display: 'grid',
|
|
23
|
-
gridTemplateColumns: 'repeat(64, 1fr)',
|
|
24
|
-
gridTemplateRows: 'repeat(64, 1fr)',
|
|
25
|
-
'--init-area': '1 / 1 / 16 / 16',
|
|
26
|
-
},
|
|
27
|
-
[`${prefix} .b_grid-area-96`]: {
|
|
28
|
-
display: 'grid',
|
|
29
|
-
gridTemplateColumns: 'repeat(96, 1fr)',
|
|
30
|
-
gridTemplateRows: 'repeat(96, 1fr)',
|
|
31
|
-
'--init-area': '1 / 1 / 24 / 24',
|
|
32
|
-
},
|
|
33
|
-
});
|
|
34
|
-
matchUtilities({
|
|
35
|
-
area: (value) => {
|
|
36
|
-
// Remove the square brackets and split the value by "/"
|
|
37
|
-
const parts = value.split('-'); // slice to remove the square brackets
|
|
38
|
-
if (parts.length === 4) {
|
|
39
|
-
return {
|
|
40
|
-
'grid-area': `${parts[0]} / ${parts[1]} / ${parts[2]} / ${parts[3]}`,
|
|
41
|
-
};
|
|
42
|
-
}
|
|
43
|
-
},
|
|
44
|
-
}, { values: {} } // Allow arbitrary values like b_area[1/4/4/3]
|
|
45
|
-
);
|
|
46
|
-
}
|
package/dist/plugins/grid-16x.js
DELETED
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
import plugin from 'tailwindcss/plugin';
|
|
2
|
-
export default plugin(function ({ addBase, addUtilities }) {
|
|
3
|
-
const baseVar = '--b_grid-spacing';
|
|
4
|
-
const baseValue = '1rem'; // 16px grid
|
|
5
|
-
// Set the root spacing variable
|
|
6
|
-
addBase({
|
|
7
|
-
':root': {
|
|
8
|
-
[baseVar]: baseValue,
|
|
9
|
-
},
|
|
10
|
-
});
|
|
11
|
-
// Define spacing values
|
|
12
|
-
const minimalValues = [0, 1, 2, 4, 6, 8, 10, 12, 14, 18, 20, 22, 24, 32];
|
|
13
|
-
const largeSteps = [];
|
|
14
|
-
for (let i = 1; i <= 1280 / 16; i++) {
|
|
15
|
-
largeSteps.push(i * 16); // 16, 32, 48, ..., 1280
|
|
16
|
-
}
|
|
17
|
-
const allValues = Array.from(new Set([...minimalValues, ...largeSteps])).sort((a, b) => a - b);
|
|
18
|
-
const utilities = {};
|
|
19
|
-
const properties = {
|
|
20
|
-
w: 'width',
|
|
21
|
-
h: 'height',
|
|
22
|
-
'min-w-b': 'minWidth',
|
|
23
|
-
'max-w-b': 'maxWidth',
|
|
24
|
-
'min-h-b': 'minHeight',
|
|
25
|
-
'max-h-b': 'maxHeight',
|
|
26
|
-
'p-b': 'padding',
|
|
27
|
-
'pt-b': 'paddingTop',
|
|
28
|
-
'pr-b': 'paddingRight',
|
|
29
|
-
'pb-b': 'paddingBottom',
|
|
30
|
-
'pl-b': 'paddingLeft',
|
|
31
|
-
'px-b': ['paddingLeft', 'paddingRight'],
|
|
32
|
-
'py-b': ['paddingTop', 'paddingBottom'],
|
|
33
|
-
'm-b': 'margin',
|
|
34
|
-
'mt-b': 'marginTop',
|
|
35
|
-
'mr-b': 'marginRight',
|
|
36
|
-
'mb-b': 'marginBottom',
|
|
37
|
-
'ml-b': 'marginLeft',
|
|
38
|
-
'mx-b': ['marginLeft', 'marginRight'],
|
|
39
|
-
'my-b': ['marginTop', 'marginBottom'],
|
|
40
|
-
};
|
|
41
|
-
for (const [prefix, cssProp] of Object.entries(properties)) {
|
|
42
|
-
for (const pxValue of allValues) {
|
|
43
|
-
const multiplier = pxValue / 16;
|
|
44
|
-
const className = `.${prefix}-b_${pxValue}`;
|
|
45
|
-
const cssValue = `calc(var(${baseVar}) * ${multiplier})`;
|
|
46
|
-
if (Array.isArray(cssProp)) {
|
|
47
|
-
utilities[className] = cssProp.reduce((acc, prop) => {
|
|
48
|
-
acc[prop] = cssValue;
|
|
49
|
-
return acc;
|
|
50
|
-
}, {});
|
|
51
|
-
}
|
|
52
|
-
else {
|
|
53
|
-
utilities[className] = {
|
|
54
|
-
[cssProp]: cssValue,
|
|
55
|
-
};
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
addUtilities(utilities, { variants: ['responsive'] });
|
|
60
|
-
});
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import plugin from 'tailwindcss/plugin';
|
|
2
|
-
export default plugin(function ({ addUtilities }) {
|
|
3
|
-
const utilities = {};
|
|
4
|
-
for (let i = 10; i <= 100; i += 10) {
|
|
5
|
-
utilities[`.w-b_screen-${i}`] = {
|
|
6
|
-
width: `${i}vw`,
|
|
7
|
-
};
|
|
8
|
-
utilities[`.h-b_screen-${i}`] = {
|
|
9
|
-
height: `${i}vh`,
|
|
10
|
-
};
|
|
11
|
-
utilities[`.min-h-b_screen-${i}`] = {
|
|
12
|
-
minHeight: `${i}vh`,
|
|
13
|
-
};
|
|
14
|
-
utilities[`.max-h-b_screen-${i}`] = {
|
|
15
|
-
maxHeight: `${i}vh`,
|
|
16
|
-
};
|
|
17
|
-
utilities[`.min-w-b_screen-${i}`] = {
|
|
18
|
-
minWidth: `${i}vw`,
|
|
19
|
-
};
|
|
20
|
-
utilities[`.max-w-b_screen-${i}`] = {
|
|
21
|
-
maxWidth: `${i}vw`,
|
|
22
|
-
};
|
|
23
|
-
}
|
|
24
|
-
addUtilities(utilities);
|
|
25
|
-
});
|
package/dist/screens.d.ts
DELETED
package/dist/screens.js
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
export const getScreens = (prefix = '', minxmax = { min: '768px', max: '1100px', max2xl: '1440px' }) => {
|
|
2
|
-
// max 320px
|
|
3
|
-
const screens = {};
|
|
4
|
-
screens[prefix + 'xs'] = { max: minxmax.min };
|
|
5
|
-
screens[prefix + 'md'] = { min: minxmax.min, max: minxmax.max };
|
|
6
|
-
screens[prefix + 'xl'] = { min: minxmax.max };
|
|
7
|
-
screens[prefix + 'sm'] = { max: minxmax.max };
|
|
8
|
-
screens[prefix + '2xl'] = { min: minxmax.max2xl };
|
|
9
|
-
return screens;
|
|
10
|
-
};
|
|
File without changes
|