@blockbite/tailwind 3.4.14 → 3.4.15

package/dist/index.d.ts

@@ -1,9 +1,7 @@
-import { getAspectRatio } from './aspect-ratio.js';
 import { getColorObject, getColors } from './colors.js';
 import { getContainer } from './container.js';
 import { getScreens } from './screens.js';
 import { fluidSpacing, gridSpacing, nativeSpacing, percentSpacing, screenSpacing, spanSpacing } from './spacing.js';
-import { themeParser } from './theme-parser.js';
 declare const blockbiteTailwindPlugin: any;
 export default blockbiteTailwindPlugin;
-export { fluidSpacing, getAspectRatio, getColorObject, getColors, getContainer, getScreens, gridSpacing, nativeSpacing, percentSpacing, screenSpacing, spanSpacing, themeParser, };
+export { fluidSpacing, getColorObject, getColors, getContainer, getScreens, gridSpacing, nativeSpacing, percentSpacing, screenSpacing, spanSpacing, };

package/dist/index.js

@@ -1,11 +1,9 @@
 import plugin from 'tailwindcss/plugin';
 // Utilities and helpers
-import { getAspectRatio } from './aspect-ratio.js';
 import { getColorObject, getColors } from './colors.js';
 import { getContainer } from './container.js';
 import { getScreens } from './screens.js';
 import { fluidSpacing, gridSpacing, nativeSpacing, percentSpacing, screenSpacing, spanSpacing, } from './spacing.js';
-import { themeParser } from './theme-parser.js';
 // Components
 import anchorPosition from './components/anchor-position.js';
 import fluidContainer from './components/fluid-container.js';
@@ -13,6 +11,7 @@ import gridContainer from './components/grid-container.js';
 import interaction from './components/interaction.js';
 import swiper from './components/swiper.js';
 // Plugins
+import grid16x from './plugins/grid-16x.js';
 import viewportDimensions from './plugins/viewport-dimensions.js';
 // Gridarea utilities
 import gridAreaPlugin from './gridarea/index.js';
@@ -26,7 +25,8 @@ const blockbiteTailwindPlugin = plugin(function (api) {
     // Register all plugins/utilities
     viewportDimensions.handler(api);
     gridAreaPlugin.handler(api);
+    grid16x.handler(api);
 });
 export default blockbiteTailwindPlugin;
 // Export functions and constants
-export { fluidSpacing, getAspectRatio, getColorObject, getColors, getContainer, getScreens, gridSpacing, nativeSpacing, percentSpacing, screenSpacing, spanSpacing, themeParser, };
+export { fluidSpacing, getColorObject, getColors, getContainer, getScreens, gridSpacing, nativeSpacing, percentSpacing, screenSpacing, spanSpacing, };

package/dist/plugins/grid-16x.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("node_modules/tailwindcss/dist/types-B254mqw1.mjs").b;
+export default _default;

package/dist/plugins/grid-16x.js

@@ -0,0 +1,60 @@
+import plugin from 'tailwindcss/plugin';
+export default plugin(function ({ addBase, addUtilities }) {
+    const baseVar = '--b_grid-spacing';
+    const baseValue = '1rem'; // 16px grid
+    // Set the root spacing variable
+    addBase({
+        ':root': {
+            [baseVar]: baseValue,
+        },
+    });
+    // Define spacing values
+    const minimalValues = [0, 1, 2, 4, 6, 8, 10, 12, 14, 18, 20, 22, 24, 32];
+    const largeSteps = [];
+    for (let i = 1; i <= 1280 / 16; i++) {
+        largeSteps.push(i * 16); // 16, 32, 48, ..., 1280
+    }
+    const allValues = Array.from(new Set([...minimalValues, ...largeSteps])).sort((a, b) => a - b);
+    const utilities = {};
+    const properties = {
+        w: 'width',
+        h: 'height',
+        'min-w-b': 'minWidth',
+        'max-w-b': 'maxWidth',
+        'min-h-b': 'minHeight',
+        'max-h-b': 'maxHeight',
+        'p-b': 'padding',
+        'pt-b': 'paddingTop',
+        'pr-b': 'paddingRight',
+        'pb-b': 'paddingBottom',
+        'pl-b': 'paddingLeft',
+        'px-b': ['paddingLeft', 'paddingRight'],
+        'py-b': ['paddingTop', 'paddingBottom'],
+        'm-b': 'margin',
+        'mt-b': 'marginTop',
+        'mr-b': 'marginRight',
+        'mb-b': 'marginBottom',
+        'ml-b': 'marginLeft',
+        'mx-b': ['marginLeft', 'marginRight'],
+        'my-b': ['marginTop', 'marginBottom'],
+    };
+    for (const [prefix, cssProp] of Object.entries(properties)) {
+        for (const pxValue of allValues) {
+            const multiplier = pxValue / 16;
+            const className = `.${prefix}-b_${pxValue}`;
+            const cssValue = `calc(var(${baseVar}) * ${multiplier})`;
+            if (Array.isArray(cssProp)) {
+                utilities[className] = cssProp.reduce((acc, prop) => {
+                    acc[prop] = cssValue;
+                    return acc;
+                }, {});
+            }
+            else {
+                utilities[className] = {
+                    [cssProp]: cssValue,
+                };
+            }
+        }
+    }
+    addUtilities(utilities, { variants: ['responsive'] });
+});

package/dist/spacing.js

@@ -176,8 +176,8 @@ function createSpanSpacing() {
 }
 export const gridSpacing = (prefix = '') => {
     // create grid based on 16px
-    const spacingRem = createGridSpacing(prefix);
-    return spacingRem;
+    const spacingGrid = createGridSpacing(prefix);
+    return spacingGrid;
 };
 export const fluidSpacing = (prefix = '') => {
     const spacingFluid = createFluidSpacing(prefix);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockbite/tailwind",
-  "version": "3.4.14",
+  "version": "3.4.15",
   "description": "helper for blockbite plugin and blockbite theme",
   "type": "module",
   "main": "dist/index.js",

package/dist/aspect-ratio.d.ts

@@ -1 +0,0 @@
-export declare const getAspectRatio: (prefix?: string) => {};

package/dist/aspect-ratio.js

@@ -1,6 +0,0 @@
-export const getAspectRatio = (prefix = 'b_') => {
-    const ratios = {};
-    ratios[prefix + 'portrait'] = '3 / 4';
-    ratios[prefix + 'landscape'] = '4 / 3';
-    return ratios;
-};

package/dist/theme-parser.d.ts

@@ -1,21 +0,0 @@
-export declare function themeParser(theme: any, prefixObject?: {
-    prefixScreens: string;
-    prefixAspectRatio: string;
-    prefixSpacing: string;
-}, gridFluidSpacing?: boolean): {
-    fonts: {};
-    fontWeights: {};
-    colors: {};
-    spacing: {};
-    fontSizes: {};
-    screens: {};
-    aspectRatio: {};
-    container: {
-        center: boolean;
-        padding: {
-            DEFAULT: string;
-            sm: string;
-            lg: string;
-        };
-    };
-};

package/dist/theme-parser.js

@@ -1,68 +0,0 @@
-/*
- * This file is used to parse the theme.json file from the theme to generate the tailwind config
- */
-import { getAspectRatio } from './aspect-ratio.js';
-import { getContainer } from './container.js';
-import { getScreens } from './screens.js';
-import { fluidSpacing, gridSpacing } from './spacing.js';
-export function themeParser(theme, prefixObject = {
-    prefixScreens: 'b_',
-    prefixAspectRatio: 'b_',
-    prefixSpacing: 'b_',
-}, gridFluidSpacing = true) {
-    // get prefixes
-    const { prefixScreens, prefixAspectRatio, prefixSpacing } = prefixObject;
-    // import 16-grid and clamp spacing
-    let spacing = {};
-    if (gridFluidSpacing) {
-        spacing = Object.assign({}, fluidSpacing(prefixSpacing), gridSpacing(prefixSpacing));
-    }
-    // add colors
-    const colors = {};
-    if (theme.settings.color && theme.settings.color.palette !== undefined) {
-        theme.settings.color.palette.forEach((color) => {
-            colors[color.slug] = color.color;
-        });
-    }
-    // add fonts and fontWeights
-    const fonts = {};
-    const fontWeights = {};
-    if (theme.settings.typography &&
-        theme.settings.typography.fontFamilies !== undefined) {
-        theme.settings.typography.fontFamilies.forEach((fam) => {
-            fonts[fam.slug] = fam.fontFamily.split(',');
-            if (fam.fontFace) {
-                // generate fontWeights
-                fam.fontFace.forEach((face) => {
-                    fontWeights[face.fontWeight] = face.fontWeight;
-                });
-            }
-        });
-    }
-    // fontsizes
-    const fontSizes = {};
-    if (theme.settings.typography &&
-        theme.settings.typography.fontSizes !== undefined) {
-        theme.settings.typography.fontSizes.forEach((size) => {
-            // add font variables
-            fontSizes[size.slug] = `var(--wp--preset--font-size--${size.slug})`;
-        });
-    }
-    // responsive
-    const screens = getScreens(prefixScreens);
-    // aspect ratio
-    const aspectRatio = getAspectRatio(prefixAspectRatio);
-    // container
-    const container = getContainer();
-    // export object
-    return {
-        fonts,
-        fontWeights,
-        colors,
-        spacing,
-        fontSizes,
-        screens,
-        aspectRatio,
-        container,
-    };
-}