properties
changelog

Spacing Dataset

The Spacing dataset defines values used for spacing-related styles such as margins, padding, gaps, etc.

It contains spacing tokens expressed as pixel values and percentage values.

Location

Resolved locations:

  • shilpConfig.values.spacing.percentages
  • shilpConfig.values.spacing.pixels

Theme locations:

  • shilpConfig.theme.spacing (pixel values & percentage values)
  • shilpConfig.theme.spacingPercentages
  • shilpConfig.theme.spacingPixels

Usage

IntentTheme KeyDescription
@adjust move-*;"spacing"Transform translate
@animate slide-*;"spacing"Slide in/out animation
@bg size-*;"spacing"Background size
@flex base-*;"spacing"Flex base size
@mask size-*;"spacing"Mask size
@size *;"spacing"Element's dimentions
@space gap-*;"spacing"Row & Column gap
@position *; (almost)"spacing"Spacing around element
@adjust distance-origin-*;"spacingPixels"Transform perspective origin
@adjust origin-*;"spacingPixels"Transform origin
@table gap-*;"spacingPixels"Table border spacing
@text move-*;"spacingPixels"Text indent
@scroll m*;"spacingPixels"Scroll Margin
@scroll p*;"spacingPixels"Scroll Padding
@space m*;"spacingPixels"Margin
@space p*;"spacingPixels"Padding

These utilities read values from the theme, which is built from this dataset.

Dataset Structure

The dataset is a nested key–value map of spacing tokens to CSS values.

It includes following groups:

  1. pixels → fixed spacing values defined in pixels
  2. percentages → relative spacing values in percentages
    • "x/y": "n%", where x < y andy in range of 1-12

See: Spacing Dataset Reference

Customizing the Dataset

You can extend or override this dataset in your config.

Customizing spacing dataset
const shilpConfig = {
	source: "react",

	extend: {
		values: {
			spacing: {
				//
				percentages: {
					"1/13": "7.69%",
					"2/13": "15.38%",
					"3/13": "23.08%",
					"4/13": "30.77%",
					"5/13": "38.46%",
					"6/13": "46.15%",
					"7/13": "53.85%",
					"8/13": "61.54%",
					"9/13": "69.23%",
					"10/13": "76.92%",
					"11/13": "84.62%",
					"12/13": "92.31%",
				},
				//
				pixels: {
					112: "448px",
					120: "480px",
					144: "576px",
					160: "640px",
				},
			},
		},
	},
};

export default shilpConfig;

This will make additional spacing tokens available through the theme system.

Spacing Dataset Reference

Spacing Dataset
// https://v3.tailwindcss.com/docs/customizing-spacing#default-spacing-scale
// https://v3.tailwindcss.com/docs/width#percentage-widths

const spacing = {
	percentages: {
		half: "50%",
		full: "100%",
		// `"x/y": "n%"`, where `x < y` and `y` in range of `1-12`

		// `for` loop defined below, will inject the data
	},

	pixels: {
		auto: "auto",
		0: 0,
		px: "1px",
		0.5: "2px",
		0.75: "3px",
		1: "4px",
		1.5: "6px",
		2: "8px",
		2.5: "10px",
		3: "12px",
		3.5: "14px",
		4: "16px",
		4.5: "18px",
		5: "20px",
		5.5: "22px",
		6: "24px",
		6.6: "26px",
		7: "28px",
		7.5: "30px",
		8: "32px",
		9: "36px",
		10: "40px",
		11: "44px",
		12: "48px",
		14: "56px",
		15: "60px",
		16: "64px",
		18: "72px",
		20: "80px",
		24: "96px",
		28: "112px",
		32: "128px",
		36: "144px",
		40: "160px",
		44: "176px",
		48: "192px",
		52: "208px",
		56: "224px",
		60: "240px",
		64: "256px",
		72: "288px",
		80: "320px",
		96: "384px",
		100: "400px",
	},
};

/* ============================================================================================= */

// `"x/y": "n%"`, where `x < y` and `y` in range of `1-12`
for (let i = 2; i <= 12; i++) {
	for (let j = 1; j < i; j++) {
		Object.assign(spacing.percentages, {
			[`${j}/${i}`]: `${((j / i) * 100).toFixed(2)}%`.replace(".00", ""),
		});
	}
}

/* ============================================================================================= */

export default spacing;
numberstime