Border Dataset

Location

Resolved locations:

• shilpConfig.values.border.borderRadius
• shilpConfig.values.border.borderStyle
• shilpConfig.values.border.borderThickness

Theme locations:

• shilpConfig.theme.radius
• shilpConfig.theme.style
• shilpConfig.theme.thickness

Usage

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

Dataset Structure

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

It includes following groups:

• radius → border radius values
• style → border style values
• thickness → border thickness values

See: Border Dataset Reference

Customizing the Dataset

You can extend or override this dataset in your config.

Customize border datasetcopy to clipboard
const shilpConfig = {
	source: "react",

	extend: {
		values: {
			border: {
				//
				radius: {
					// for --radius: 4px;
					"2xl": "calc(var(--radius) * 4)", // 16px
					"3xl": "calc(var(--radius) * 5)", // 20px
					"4xl": "calc(var(--radius) * 6)", // 24px
					"5xl": "calc(var(--radius) * 7)", // 28px
				},
				//
				thickness: {
					8: "8px",
				},
			},
		},
	},
};

export default shilpConfig;

This will make additional border related tokens available through the theme system.

Border Dataset Reference

Border Datasetcopy to clipboard
const border = {
	// --radius: 4px
	// NOTE: unit of `--radius` wiil be inferred, px --> px, rem --> rem
	radius: {
		0: 0,
		// NOTE: small radius can be added manually
		DEFAULT: "var(--radius)", // 4px
		md: "calc(var(--radius) * 1.5)", // 6px
		lg: "calc(var(--radius) * 2)", // 8px
		xl: "calc(var(--radius) * 3)", // 12px
		// NOTE: always fully rounded untill explicitely set to 0
		full: "calc(infinity * 1px)",
	},

	style: {
		none: "none",
		hidden: "hidden",
		dashed: "dashed",
		dotted: "dotted",
		solid: "solid",
		double: "double",
		groove: "groove",
		ridge: "ridge",
		inset: "inset",
		outset: "outset",
	},

	thickness: {
		0: 0,
		DEFAULT: "1px",
		px: "1px",
		2: "2px",
		3: "3px",
		4: "4px",
	},
};

export default border;