@blockbite/tailwind 3.4.2

package/lib/spacing.js

@@ -0,0 +1,215 @@
+function createFluidSpacing(prefix) {
+  const fluid = [
+    {
+      size: "0px",
+      slug: "0",
+      name: "0",
+    },
+    {
+      size: "clamp(16px, 1vw, 32px)",
+      slug: "1",
+      name: "1",
+    },
+    {
+      size: "clamp(32px, 1vw, 48px)",
+      slug: "2",
+      name: "2",
+    },
+    {
+      size: "clamp(40px, 1vw, 50px)",
+      slug: "3",
+      name: "3",
+    },
+    {
+      size: "clamp(64px, 1vw, 80px)",
+      slug: "4",
+      name: "4",
+    },
+    {
+      size: "clamp(128px, 1vw, 144px)",
+      slug: "5",
+      name: "5",
+    },
+    {
+      size: "clamp(144px, 1vw, 164px)",
+      slug: "6",
+      name: "6",
+    },
+    {
+      slug: "8",
+      size: "clamp(16px, 1vw, 32px)",
+      name: "8",
+    },
+    {
+      slug: "9",
+      size: "clamp(16px, 1vw, 32px)",
+      name: "9",
+    },
+    {
+      slug: "10",
+      size: "clamp(16px, 1vw, 32px)",
+      name: "10",
+    },
+    // can be used to push contain inside grid-container
+    {
+      slug: "1fr",
+      size: "var(--b_fr-size, 1rem)",
+      name: "1FR",
+    },
+  ];
+
+  const FluidSizes = {};
+  // add clamp spacing for gaps
+  fluid.forEach((size) => {
+    // add to spacing
+    FluidSizes[prefix + "fluid-" + size.slug] = size.size;
+  });
+
+  return FluidSizes;
+}
+
+function createPercentSpacing(prefix) {
+  const percentUnits = [
+    "1/2",
+    "1/3",
+    "2/3",
+    "1/4",
+    "2/4",
+    "3/4",
+    "1/5",
+    "2/5",
+    "3/5",
+    "4/5",
+    "1/6",
+    "2/6",
+    "3/6",
+    "4/6",
+    "5/6",
+    "1/12",
+    "2/12",
+    "3/12",
+    "4/12",
+    "5/12",
+    "6/12",
+    "7/12",
+    "8/12",
+    "9/12",
+    "10/12",
+    "11/12",
+    "full",
+  ];
+  return percentUnits;
+}
+function createScreenSpacing() {
+  const screenSpacing = [
+    "b_screen-10",
+    "b_screen-20",
+    "b_screen-30",
+    "b_screen-40",
+    "b_screen-50",
+    "b_screen-60",
+    "b_screen-70",
+    "b_screen-80",
+    "b_screen-90",
+    "b_screen-100",
+  ];
+
+  const screenSpacingValues = {};
+  screenSpacing.forEach((size) => {
+    screenSpacingValues[size] = size;
+  });
+  return screenSpacingValues;
+}
+
+function createGridSpacing(prefix) {
+  // create grid based on 16px
+  const gridSpacing = {};
+
+  const minimalValues = [0, 1, 2, 4, 6, 8, 10, 12, 14, 18, 20, 22, 24, 32];
+  for (let i = 0; i < minimalValues.length; i++) {
+    let minimalValue = minimalValues[i];
+    gridSpacing[`${prefix}${minimalValue}`] = minimalValue / 16 + "rem";
+  }
+  for (let i = 1; i < 1280 / 16; i++) {
+    const gridsize = i * 16;
+    gridSpacing[`${prefix}${gridsize}`] = i + "rem";
+  }
+  return gridSpacing;
+}
+
+function createNativeSpacing() {
+  const nativeSpacing = [
+    0,
+    "px",
+    0.5,
+    1,
+    1.5,
+    2,
+    2.5,
+    3,
+    3.5,
+    4,
+    5,
+    6,
+    7,
+    8,
+    9,
+    10,
+    11,
+    12,
+    14,
+    16,
+    20,
+    24,
+    28,
+    32,
+    36,
+    40,
+    44,
+    48,
+    52,
+    56,
+    60,
+    64,
+    72,
+    80,
+    96,
+  ];
+  return nativeSpacing;
+}
+
+function createSpanSpacing() {
+  const colSpanValues = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];
+  return colSpanValues;
+}
+
+export const gridSpacing = (prefix = "") => {
+  // create grid based on 16px
+  const spacingRem = createGridSpacing(prefix);
+  return spacingRem;
+};
+
+export const fluidSpacing = (prefix = "") => {
+  const spacingFluid = createFluidSpacing(prefix);
+  return spacingFluid;
+};
+
+export const percentSpacing = () => {
+  const spacingPercent = createPercentSpacing();
+  return spacingPercent;
+};
+
+export const screenSpacing = () => {
+  const spacingScreen = createScreenSpacing();
+  return spacingScreen;
+};
+
+export const nativeSpacing = () => {
+  const spacingNative = createNativeSpacing();
+  return spacingNative;
+};
+
+export const spanSpacing = () => {
+  const spacingSpan = createSpanSpacing();
+  return spacingSpan;
+};

package/lib/theme-parser.js

@@ -0,0 +1,83 @@
+/*
+ * This file is used to parse the theme.json file from the theme to generate the tailwind config
+ */
+import { fluidSpacing, gridSpacing, nativeSpacing } from "./spacing";
+import { getScreens } from "./screens";
+import { getAspectRatio } from "./aspect-ratio";
+import { getContainer } from "./container";
+
+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 = [...fluidSpacing(prefixSpacing), ...gridSpacing(prefixSpacing)];
+  }
+
+  // add colors
+  let 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
+  let fonts = {};
+  let 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
+  let 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: fonts,
+    fontWeights: fontWeights,
+    colors: colors,
+    spacing: spacing,
+    fontSizes: fontSizes,
+    screens: screens,
+    aspectRatio: aspectRatio,
+    container: container,
+  };
+}

package/motion/index.js

@@ -0,0 +1,14 @@
+const plugin = require('tailwindcss/plugin');
+
+module.exports = plugin(api => {
+    require('./utilities/delay')(api);
+    require('./utilities/direction')(api);
+    require('./utilities/duration')(api);
+    require('./utilities/fillMode')(api);
+    require('./utilities/iterationCount')(api);
+    require('./utilities/playState')(api);
+    require('./utilities/timingFunction')(api);
+    require('./utilities/offset')(api);
+}, {
+    theme: require('./theme'),
+});

package/motion/theme.js

@@ -0,0 +1,174 @@
+module.exports = {
+    extend: {
+        keyframes: {
+            'wiggle': {
+                '0%, 100%': {
+                    transform: 'rotate(-3deg)',
+                },
+                '50%': {
+                    transform: 'rotate(3deg)',
+                },
+            },
+            'wiggle-more': {
+                '0%, 100%': {
+                    transform: 'rotate(-12deg)',
+                },
+                '50%': {
+                    transform: 'rotate(12deg)',
+                },
+            },
+            'rotate-y': {
+                '0%': {
+                    transform: 'rotateY(360deg)',
+                },
+                '100%': {
+                    transform: 'rotateY(0)',
+                },
+            },
+            'rotate-x': {
+                '0%': {
+                    transform: 'rotateX(360deg)',
+                },
+                '100%': {
+                    transform: 'rotateX(0)',
+                },
+            },
+            'jump': {
+                '0%, 100%': {
+                    transform: 'scale(100%)',
+                },
+                '10%': {
+                    transform: 'scale(80%)',
+                },
+                '50%': {
+                    transform: 'scale(120%)',
+                },
+            },
+            'jump-in': {
+                '0%': {
+                    transform: 'scale(0%)',
+                },
+                '80%': {
+                    transform: 'scale(120%)',
+                },
+                '100%': {
+                    transform: 'scale(100%)',
+                },
+            },
+            'jump-out': {
+                '0%': {
+                    transform: 'scale(100%)',
+                },
+                '20%': {
+                    transform: 'scale(120%)',
+                },
+                '100%': {
+                    transform: 'scale(0%)',
+                },
+            },
+            'shake': {
+                '0%': {
+                    transform: 'translateX(0rem)',
+                },
+                '25%': {
+                    transform: 'translateX(-1rem)',
+                },
+                '75%': {
+                    transform: 'translateX(1rem)',
+                },
+                '100%': {
+                    transform: 'translateX(0rem)',
+                },
+            },
+            'fade': {
+                '0%': {
+                    opacity: '0',
+                    transform: 'translate(var(--an-ani-x), var(--an-ani-y))',
+                },
+                '100%': {
+                    opacity: '1',
+                    transform: 'translateY(var(--tw-translate-y))',
+                },
+            },
+            'fade-left': {
+                '0%': {
+                    opacity: '0',
+                    transform: 'translateY(var(--an-translate-y))',
+                },
+                '100%': {
+                    opacity: '1',
+                    transform: 'translateY(var(--tw-translate-y))',
+                },
+            },
+            'fade-right': {
+                '0%': {
+                    opacity: '0',
+                    transform: 'translateY(var(--an-translate-y))',
+                },
+                '100%': {
+                    opacity: '1',
+                    transform: 'translateY(var(--tw-translate-y))',
+                },
+            },
+            'flip-up': {
+                '0%': {
+                    transform: 'rotateX(90deg)',
+                    transformOrigin: 'bottom',
+                },
+                '100%': {
+                    transform: 'rotateX(0)',
+                    transformOrigin: 'bottom',
+                },
+            },
+            'flip-down': {
+                '0%': {
+                    transform: 'rotateX(-90deg)',
+                    transformOrigin: 'top',
+                },
+                '100%': {
+                    transform: 'rotateX(0)',
+                    transformOrigin: 'top',
+                },
+            },
+        },
+        animation: {
+            'wiggle': 'wiggle 1s both',
+            'wiggle-more': 'wiggle-more 1s both',
+            'rotate-y': 'rotate-y 1s both',
+            'rotate-x': 'rotate-x 1s both',
+            'jump': 'jump .5s both',
+            'jump-in': 'jump-in .5s both',
+            'jump-out': 'jump-out .5s both',
+            'shake': 'shake .5s both',
+            'fade': 'fade 1s both',
+            'fade-down': 'fade-down 1s both',
+            'fade-up': 'fade-up 1s both',
+            'fade-left': 'fade-left 1s both',
+            'fade-right': 'fade-right 1s both',
+            'flip-up': 'flip-up 1s both',
+            'flip-down': 'flip-down 1s both',
+        },
+        animationDelay: {
+            none: '0ms',
+            0: '0ms',
+            75: '75ms',
+            100: '100ms',
+            150: '150ms',
+            200: '200ms',
+            300: '300ms',
+            500: '500ms',
+            700: '700ms',
+            1000: '1000ms',
+        },
+        animationDuration: {
+            75: '75ms',
+            100: '100ms',
+            150: '150ms',
+            200: '200ms',
+            300: '300ms',
+            500: '500ms',
+            700: '700ms',
+            1000: '1000ms',
+        },
+    },
+};

package/motion/utilities/delay.js

@@ -0,0 +1,7 @@
+module.exports = ({ matchUtilities, theme }) => matchUtilities({
+    'animate-delay': value => ({
+        'animation-delay': value,
+    }),
+}, {
+    values: theme('animationDelay'),
+});

package/motion/utilities/direction.js

@@ -0,0 +1,14 @@
+module.exports = ({ addUtilities }) => addUtilities({
+    '.animate-normal': {
+        'animation-direction': 'normal',
+    },
+    '.animate-reverse': {
+        'animation-direction': 'reverse',
+    },
+    '.animate-alternate': {
+        'animation-direction': 'alternate',
+    },
+    '.animate-alternate-reverse': {
+        'animation-direction': 'alternate-reverse',
+    },
+});

package/motion/utilities/duration.js

@@ -0,0 +1,7 @@
+module.exports = ({ matchUtilities, theme }) => matchUtilities({
+    'animate-duration': value => ({
+        'animation-duration': value,
+    }),
+}, {
+    values: theme('animationDuration'),
+});

package/motion/utilities/fillMode.js

@@ -0,0 +1,14 @@
+module.exports = ({ addUtilities }) => addUtilities({
+    '.animate-fill-none': {
+        'animation-fill-mode': 'normal',
+    },
+    '.animate-fill-forwards': {
+        'animation-fill-mode': 'forwards',
+    },
+    '.animate-fill-backwards': {
+        'animation-fill-mode': 'backwards',
+    },
+    '.animate-fill-both': {
+        'animation-fill-mode': 'both',
+    },
+});

package/motion/utilities/iterationCount.js

@@ -0,0 +1,14 @@
+module.exports = ({ addUtilities }) => addUtilities({
+    '.animate-infinite': {
+        'animation-iteration-count': 'infinite',
+    },
+    '.animate-once': {
+        'animation-iteration-count': '1',
+    },
+    '.animate-twice': {
+        'animation-iteration-count': '2',
+    },
+    '.animate-thrice': {
+        'animation-iteration-count': '3',
+    },
+});

package/motion/utilities/offset.js

@@ -0,0 +1,11 @@
+module.exports = function ({ addUtilities, theme, e }, gridSpacing) {
+  const spacing = theme("spacing");
+  const newUtilities = {};
+
+  Object.entries(spacing).map(([key, value]) => {
+    newUtilities[`.${e(`b_ani-x-${key}`)}`] = { "--an-ani-x": `${value}` };
+    newUtilities[`.${e(`b_ani-y-${key}`)}`] = { "--an-ani-y": `${value}` };
+  });
+
+  addUtilities(newUtilities, ["responsive"]);
+};

package/motion/utilities/playState.js

@@ -0,0 +1,14 @@
+module.exports = ({ addUtilities }) => addUtilities({
+    '.animate-run': {
+        'animation-play-state': 'running',
+    },
+    '.animate-play': {
+        'animation-play-state': 'running',
+    },
+    '.animate-stop': {
+        'animation-play-state': 'paused',
+    },
+    '.animate-pause': {
+        'animation-play-state': 'paused',
+    },
+});

package/motion/utilities/timingFunction.js

@@ -0,0 +1,14 @@
+module.exports = ({ addUtilities }) => addUtilities({
+    '.animate-ease-linear': {
+        'animation-timing-function': 'linear',
+    },
+    '.animate-ease-in': {
+        'animation-timing-function': 'cubic-bezier(0.4, 0, 1, 1)',
+    },
+    '.animate-ease-out': {
+        'animation-timing-function': 'cubic-bezier(0, 0, 0.2, 1)',
+    },
+    '.animate-ease-in-out': {
+        'animation-timing-function': 'cubic-bezier(0.4, 0, 0.2, 1)',
+    },
+});

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@blockbite/tailwind",
+  "version": "3.4.2",
+  "description": "helper for blockbite plugin and blockbite theme",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "author": "block-bite.com",
+  "license": "ISC",
+  "dependencies": {
+    "user": "^0.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3",
+    "vite": "^5.2.0"
+  }
+}

package/plugins/viewport-dimensions.js

@@ -0,0 +1,33 @@
+const plugin = require("tailwindcss/plugin");
+
+module.exports = plugin(function ({ addUtilities }) {
+  const utilities = {};
+
+  for (let i = 10; i <= 100; i += 10) {
+    utilities[`.w-b_screen-${i}`] = {
+      width: `${i}vw`,
+    };
+
+    utilities[`.h-b_screen-${i}`] = {
+      height: `${i}vh`,
+    };
+
+    utilities[`.min-h-b_screen-${i}`] = {
+      minHeight: `${i}vh`,
+    };
+
+    utilities[`.max-h-b_screen-${i}`] = {
+      maxHeight: `${i}vh`,
+    };
+
+    utilities[`.min-w-b_screen-${i}`] = {
+      minWidth: `${i}vw`,
+    };
+
+    utilities[`.max-w-b_screen-${i}`] = {
+      maxWidth: `${i}vw`,
+    };
+  }
+
+  addUtilities(utilities);
+});

package/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/tailwind.config.js

@@ -0,0 +1,18 @@
+/** @type {import('tailwindcss').Config} */
+
+import { getContainer } from "./lib/container.js";
+
+module.exports = {
+  content: ["./vite.html", "./vite.js"],
+  theme: {
+    extend: {
+      container: getContainer(),
+    },
+  },
+  plugins: [
+    require("./gridarea"),
+    require("./components/fluid-container.js"),
+    require("./components/grid-container.js"),
+    require("./themecolors"),
+  ],
+};