Padding

Apply spacing inside elements (padding).

Usage:

@space p-*;
@space pt-*;
@space pb-*;
@space pl-*;
@space pr-*;
@space px-*;
@space py-*;
@space pbl-*;
@space pbls-*;
@space pble-*;
@space pi-*;
@space pis-*;
@space pie-*;

info

This page contains only the property configuration reference. Complete documentation and usage examples will be added progressively in future updates.

Reference

shilp.config.js
const shilpConfig = {
	source: "react",

	properties: {
		space: {
			p: {
				property: "padding: <n><v><i>;",
				resolve: "spacing",
				themeKey: "spacingPixels",
				values: {},
			},
			pt: {
				property: "padding-top: <n><v><i>;",
				resolve: "spacing",
				themeKey: "spacingPixels",
				values: {},
			},
			pr: {
				property: "padding-right: <n><v><i>;",
				resolve: "spacing",
				themeKey: "spacingPixels",
				values: {},
			},
			pb: {
				property: "padding-bottom: <n><v><i>;",
				resolve: "spacing",
				themeKey: "spacingPixels",
				values: {},
			},
			pl: {
				property: "padding-left: <n><v><i>;",
				resolve: "spacing",
				themeKey: "spacingPixels",
				values: {},
			},
			px: {
				property: `
					padding-left: <n><v><i>;
          padding-right: <n><v><i>;
        `,
				resolve: "spacing",
				themeKey: "spacingPixels",
				values: {},
			},
			py: {
				property: `
					padding-top: <n><v><i>;
          padding-bottom: <n><v><i>;
        `,
				resolve: "spacing",
				themeKey: "spacingPixels",
				values: {},
			},
			pbl: {
				property: "padding-block: <n><v><i>",
				resolve: "spacing",
				themeKey: "spacingPixels",
				values: {},
			},
			pbls: {
				property: "padding-block-start: <n><v><i>;",
				resolve: "spacing",
				themeKey: "spacingPixels",
				values: {},
			},
			pble: {
				property: "padding-block-end: <n><v><i>;",
				resolve: "spacing",
				themeKey: "spacingPixels",
				values: {},
			},
			pi: {
				property: "padding-inline: <n><v><i>",
				resolve: "spacing",
				themeKey: "spacingPixels",
				values: {},
			},
			pis: {
				property: "padding-inline-start: <n><v><i>;",
				resolve: "spacing",
				themeKey: "spacingPixels",
				values: {},
			},
			pie: {
				property: "padding-inline-end: <n><v><i>;",
				resolve: "spacing",
				themeKey: "spacingPixels",
				values: {},
			},
		},
	},
};

export default shilpConfig;