Lines and checkers pattern, negative offsets

README.md

@@ -16,8 +16,12 @@ See a [live demo](https://yet3.github.io/tailwindcss-bg-patterns/)
 - [Installation](#installation)
 - [Config](#config)
 - [Example usage](#grid)
+- [Pattern offsets](#pattern-offsets)
 - [Patterns](#patterns)
+  - [Horizontal lines](#horizontal-lines)
+  - [Vertical lines](#vertical-lines)
   - [Grid](#grid)
+  - [Checkers](#checkers)
   - [Hatching](#hatching)
   - [Cross-Hatching](#cross-hatching)
   - [Polka dot](#polka-dot)
@@ -77,9 +81,40 @@ this code will result in:
 
 <img src="./public/grid.png" alt="Grid pattern" height="200" />
 
+## Pattern offsets
+Each pattern can be offset using ``bg-pattern-offset-x`` and ``bg-pattern-offset-y``
+
+Offset also accept arbritary values ``bg-pattern-offset-x-[321px]`` as well as negative values ``-bg-pattern-offset-y-24``
+
 ## Patterns
 
+
+### Horizontal lines
+
+See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#x-lines)
+
+```html
+<div
+  class="bg-blue-500 bg-pattern-x-lines bg-pattern-line-0.5 bg-pattern-spacing-32"
+/>
+```
+
+<img src="./public/x-lines.png" alt="Horizontal lines" height="200" />
+
+### Vertical lines
+
+See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#y-lines)
+
+```html
+<div
+  class="bg-blue-500 bg-pattern-y-lines bg-pattern-line-0.5 bg-pattern-spacing-32"
+/>
+```
+
+<img src="./public/y-lines.png" alt="Vertical lines" height="200" />
+
 ### Grid
+
 See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#grid)
 
 ```html
@@ -90,7 +125,20 @@ See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#grid)
 
 <img src="./public/grid.png" alt="Grid pattern" height="200" />
 
+### Checkers
+
+See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#checkers)
+
+```html
+<div
+  class="bg-blue-500 bg-pattern-checkers bg-pattern-square-white bg-pattern-square-32"
+/>
+```
+
+<img src="./public/checkers.png" alt="Checkers pattern" height="200" />
+
 ### Hatching
+
 See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#hatching)
 
 ```html
@@ -102,6 +150,7 @@ See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#hatching)
 <img src="./public/hatching.png" alt="Hatching pattern" height="200" />
 
 ### Cross-Hatching
+
 See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#cross-hatching)
 
 ```html
@@ -113,6 +162,7 @@ See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#cross-hatching
 <img src="./public/cross-hatching.png" alt="Cross-Hatching pattern" height="200" />
 
 ### Polka dot
+
 See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#polka-dot)
 
 ```html
@@ -124,6 +174,7 @@ See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#polka-dot)
 <img src="./public/polka-dot.png" alt="Polka dot pattern" height="200" />
 
 ### Hexagonal polka dot
+
 See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#hexagonal-polka-dot)
 
 ```html
@@ -137,9 +188,6 @@ See it live [here](https://yet3.github.io/tailwindcss-bg-patterns#hexagonal-polk
 ## Todo
 
 - [ ] Add utility to adjust pattern opacity
-- [ ] Add pattern: horizontal-lines (x-lines?)
-- [ ] Add pattern: vertical-lines (y-lines?)
-- [ ] Add pattern: checkers
 - [ ] Add pattern: honeycomb
 - [ ] Add pattern: bricks
 

example/src/routes/+page.svelte

@@ -16,6 +16,23 @@
 		}
 	];
 
+	const OFFSETS_CONFIGS: IPatternConfig[] = [
+		{
+			name: 'bg-pattern-offset-x',
+			options: [
+				{ name: '-2', description: 'Offset x' },
+				{ name: '-[321px]', description: 'Custom offset x' }
+			]
+		},
+		{
+			name: 'bg-pattern-offset-y',
+			options: [
+				{ name: '-2', description: 'Offset x' },
+				{ name: '-[321px]', description: 'Custom offset x' }
+			]
+		}
+	];
+
 	const DOT_CONFIGS: IPatternConfig[] = [
 		{
 			name: 'bg-pattern-dot',
@@ -28,6 +45,18 @@
 		}
 	];
 
+	const SQUARE_CONFIGS: IPatternConfig[] = [
+		{
+			name: 'bg-pattern-square',
+			options: [
+				{ name: '-2', description: 'Squares width' },
+				{ name: '-[321]', description: 'Custom squares width (in px without unit)' },
+				{ name: '-red-500', description: 'Squares colors' },
+				{ name: '-[#a8a8a8]', description: 'Custom squares color' }
+			]
+		}
+	];
+
 	const SPACING_CONFIGS: IPatternConfig[] = [
 		{
 			name: 'bg-pattern-spacing',
@@ -49,36 +78,54 @@
 	];
 
 	const PATTERNS: IPattern[] = [
+		{
+			id: 'x-lines',
+			name: 'Horizontal lines',
+			configClasses: [...LINE_CONFIGS, ...SPACING_CONFIGS, ...OFFSETS_CONFIGS],
+			class: 'bg-blue-500 bg-pattern-x-lines bg-pattern-line-0.5 bg-pattern-spacing-20'
+		},
+		{
+			id: 'y-lines',
+			name: 'Vertical lines',
+			configClasses: [...LINE_CONFIGS, ...SPACING_CONFIGS, ...OFFSETS_CONFIGS],
+			class: 'bg-blue-500 bg-pattern-y-lines bg-pattern-line-0.5 bg-pattern-spacing-32'
+		},
 		{
 			id: 'grid',
 			name: 'Grid',
-			configClasses: [...LINE_CONFIGS, ...SPACING_CONFIGS],
+			configClasses: [...LINE_CONFIGS, ...SPACING_CONFIGS, ...OFFSETS_CONFIGS],
 			class: 'bg-blue-500 bg-pattern-grid bg-pattern-line-0.5 bg-pattern-spacing-32'
 		},
+		{
+			id: 'checkers',
+			name: 'Checkers',
+			configClasses: [...SQUARE_CONFIGS, ...OFFSETS_CONFIGS],
+			class: 'bg-blue-500 bg-pattern-checkers bg-pattern-square-white bg-pattern-square-32'
+		},
 		{
 			id: 'hatching',
 			name: 'Hatching',
-			configClasses: [...LINE_CONFIGS, ...SPACING_CONFIGS, ...HATCHING_DIRECTION_CONFIGS],
+			configClasses: [...LINE_CONFIGS, ...SPACING_CONFIGS, ...HATCHING_DIRECTION_CONFIGS, ...OFFSETS_CONFIGS],
 			class:
 				'bg-blue-500 bg-pattern-hatching bg-pattern-line-0.5 bg-pattern-spacing-16 bg-pattern-hatching-left-to-right'
 		},
 		{
 			id: 'cross-hatching',
 			name: 'Cross-Hatching',
-			configClasses: [...LINE_CONFIGS, ...SPACING_CONFIGS, ...HATCHING_DIRECTION_CONFIGS],
+			configClasses: [...LINE_CONFIGS, ...SPACING_CONFIGS, ...HATCHING_DIRECTION_CONFIGS, ...OFFSETS_CONFIGS],
 			class: 'bg-blue-500 bg-pattern-cross-hatching bg-pattern-line-0.5 bg-pattern-spacing-16'
 		},
 		{
 			id: 'polka-dot',
 			name: 'Polka dot',
-			configClasses: [...DOT_CONFIGS, ...SPACING_CONFIGS],
+			configClasses: [...DOT_CONFIGS, ...SPACING_CONFIGS, ...OFFSETS_CONFIGS],
 			class:
 				'bg-blue-500 bg-pattern-polka-dot bg-pattern-dot-white bg-pattern-dot-8 bg-pattern-spacing-32'
 		},
 		{
 			id: 'hexagonal-polka-dot',
 			name: 'Hexagonal polka dot',
-			configClasses: [...DOT_CONFIGS, ...SPACING_CONFIGS],
+			configClasses: [...DOT_CONFIGS, ...SPACING_CONFIGS, ...OFFSETS_CONFIGS],
 			class:
 				'bg-blue-500 bg-pattern-hex-polka-dot bg-pattern-dot-white bg-pattern-dot-8 bg-pattern-spacing-32'
 		}

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@yet3/tailwindcss-bg-patterns",
-	"version": "2.1.0",
+	"version": "2.2.0",
 	"author": "yet3",
 	"description": "TailwindCSS plugin that css background patterns",
 	"license": "MIT",

src/consts.ts

@@ -4,6 +4,7 @@ export const LINE_WIDTHS = [
 	0.5, 1, 2, 3, 4, 6, 7, 8, 9, 10, 11, 12, 14, 15, 16,
 ];
 export const DOT_SIZES: number[] = [...Array(96)].map((_, i) => i + 1);
+export const SQUARE_SIZES: number[] = [...Array(96)].map((_, i) => i + 1);
 export const SPACING: number[] = [...Array(128 + 1)].map((_, i) => i);
 export const OFFSETS: number[] = [...Array(128 + 17)].map((_, i) => i);
 

src/index.ts

@@ -1,6 +1,11 @@
 import plugin from "tailwindcss/plugin";
-import { DOT_SIZES, LINE_WIDTHS, OFFSETS, SPACING } from "./consts";
+import { DOT_SIZES, LINE_WIDTHS, OFFSETS, SPACING, SQUARE_SIZES } from "./consts";
 import { arrToTwConfig } from "./lib/arrToTwConfig";
+import {
+	generateDotColors,
+	generateDotSize,
+	matchDotSizeAndColors,
+} from "./lib/dot";
 import {
 	generateLineColors,
 	generateLineWidths,
@@ -9,14 +14,16 @@ import {
 import { generateOffsets, matchOffsets } from "./lib/offsets";
 import { resolveOptions } from "./lib/resolveOptions";
 import { generateSpacing, matchSpacing } from "./lib/spacing";
+import { generateCheckersClass } from "./patterns/checkers";
 import { generateGridClass } from "./patterns/grid";
 import {
 	generateHatchingClass,
 	genreateHatchingDirection,
 } from "./patterns/hatching";
+import { generateLinesClass } from "./patterns/lines";
 import { generatePolkaDotClass } from "./patterns/polkaDot";
 import type { IOptions } from "./types";
-import { generateDotColors, generateDotSize, matchDotSizeAndColors } from "./lib/dot";
+import { generateSquareColors, generateSuqareSize, matchSquareSizeAndColors } from "./lib/square";
 
 export default plugin.withOptions<IOptions | undefined>(
 	(options) => (api) => {
@@ -36,11 +43,22 @@ export default plugin.withOptions<IOptions | undefined>(
 				isHexagonal: true,
 			}),
 
+			generateLinesClass(e(`${opts.prefix}pattern-x-lines`), {
+				angle: 0,
+			}),
+			generateLinesClass(e(`${opts.prefix}pattern-y-lines`), {
+				angle: 90,
+			}),
+
+			generateCheckersClass(e(`${opts.prefix}pattern-checkers`)),
+
 			// Configs
 			generateLineWidths(api, opts),
 			generateLineColors(api, opts),
 			generateDotSize(api, opts),
 			generateDotColors(api, opts),
+			generateSuqareSize(api, opts),
+			generateSquareColors(api, opts),
 			generateSpacing(api, opts),
 			genreateHatchingDirection(api, opts),
 			generateOffsets(api, opts),
@@ -50,13 +68,15 @@ export default plugin.withOptions<IOptions | undefined>(
 			...matchSpacing(api, opts),
 			...matchLineWidthsAndColors(api, opts),
 			...matchDotSizeAndColors(api, opts),
+			...matchSquareSizeAndColors(api, opts),
 			...matchOffsets(api, opts),
 		});
 	},
 	() => ({
 		theme: {
 			bgPatternLineWidth: arrToTwConfig(LINE_WIDTHS),
 			bgPatternDotSize: arrToTwConfig(DOT_SIZES),
+			bgPatternSquareSize: arrToTwConfig(SQUARE_SIZES),
 			bgPatternSpacing: arrToTwConfig(SPACING),
 			bgPatternOffsets: arrToTwConfig(OFFSETS, "px"),
 		},

src/lib/offsets.ts

@@ -16,6 +16,13 @@ export const generateOffsets = (
 			styles[`.${api.e(`${opts.prefix}pattern-offset-y-${key}`)}`] = {
 				"--tw-offset-y": offset,
 			} as unknown as CSSRuleObject;
+
+			styles[`.${api.e(`-${opts.prefix}pattern-offset-x-${key}`)}`] = {
+				"--tw-offset-x": `-${offset}`,
+			} as unknown as CSSRuleObject;
+			styles[`.${api.e(`-${opts.prefix}pattern-offset-y-${key}`)}`] = {
+				"--tw-offset-y": `-${offset}`,
+			} as unknown as CSSRuleObject;
 		}
 	}
 	return styles as CSSRuleObject;

src/lib/square.ts

@@ -0,0 +1,62 @@
+import type { CSSRuleObject, PluginAPI } from "tailwindcss/types/config";
+import type { IOptions } from "../types";
+
+export const generateSquareColors = (
+	api: PluginAPI,
+	opts: IOptions,
+): CSSRuleObject => {
+	const colors = api.theme("backgroundColor");
+	const styles: Record<string, unknown> = {};
+
+	for (const colorKey in colors) {
+		const color = colors[colorKey] as string | Record<string, string>;
+
+		if (typeof color === "string") {
+			styles[`.${api.e(`${opts.prefix}pattern-square-${colorKey}`)}`] = {
+				"--tw-square-color": color,
+			} as unknown as CSSRuleObject;
+		} else {
+			for (const variant in color) {
+				styles[
+					`.${api.e(`${opts.prefix}pattern-square-${colorKey}-${variant}`)}`
+				] = {
+					"--tw-square-color": color[variant],
+				} as unknown as CSSRuleObject;
+			}
+		}
+	}
+
+	return styles as CSSRuleObject;
+};
+
+export const generateSuqareSize = (
+	api: PluginAPI,
+	opts: IOptions,
+): CSSRuleObject => {
+	const themeSquareSizes = api.theme("bgPatternSquareSize");
+	const styles: Record<string, unknown> = {};
+	if (themeSquareSizes) {
+		for (const key in themeSquareSizes) {
+			const width = themeSquareSizes[key] as number;
+			styles[`.${api.e(`${opts.prefix}pattern-square-${key}`)}`] = {
+				"--tw-square-size": `${width} /* px */`,
+			};
+		}
+	}
+	return styles as CSSRuleObject;
+};
+
+export const matchSquareSizeAndColors = (api: PluginAPI, opts: IOptions) => ({
+	[api.e(`${opts.prefix}pattern-square`)]: (value: string) => {
+		const parsed = Number(value);
+		if (!Number.isNaN(parsed)) {
+			return {
+				"--tw-square-size": `${value} /* px */`,
+			} as unknown as CSSRuleObject;
+		}
+
+		return {
+			"--tw-square-color": value,
+		} as unknown as CSSRuleObject;
+	},
+});