Border Thickness (Width)

Control border width or thickness for styling.

Usage:

@border thick-*;
@border thick-top-*;
@border thick-right-*;
@border thick-bottom-*;
@border thick-left-*;
@border thick-x-*;
@border thick-y-*;
@border thick-bl-*;
@border thick-bls-*;
@border thick-ble-*;
@border thick-bi-*;
@border thick-bis-*;
@border thick-bie-*;

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: {
		border: {
			thick: {
				DEFAULT: {
					property: "border-width: <v><i>;",
					resolve: "spacing",
					themeKey: "thickness",
					values: {},
				},
				top: {
					property: "border-top-width: <v><i>;",
					resolve: "spacing",
					themeKey: "thickness",
					values: {},
				},
				right: {
					property: "border-right-width: <v><i>;",
					resolve: "spacing",
					themeKey: "thickness",
					values: {},
				},
				bottom: {
					property: "border-bottom-width: <v><i>;",
					resolve: "spacing",
					themeKey: "thickness",
					values: {},
				},
				left: {
					property: "border-left-width: <v><i>;",
					resolve: "spacing",
					themeKey: "thickness",
					values: {},
				},
				x: {
					property: `
						border-left-width: <v><i>;
						border-right-width: <v><i>;
					`,
					resolve: "spacing",
					themeKey: "thickness",
					values: {},
				},
				y: {
					property: `
						border-top-width: <v><i>;
						border-bottom-width: <v><i>;
					`,
					resolve: "spacing",
					themeKey: "thickness",
					values: {},
				},
				bl: {
					property: "border-block-width: <v><i>;",
					resolve: "spacing",
					themeKey: "thickness",
					values: {},
				},
				bls: {
					property: "border-block-start-width: <v><i>;",
					resolve: "spacing",
					themeKey: "thickness",
					values: {},
				},
				ble: {
					property: "border-block-end-width: <v><i>;",
					resolve: "spacing",
					themeKey: "thickness",
					values: {},
				},
				bi: {
					property: "border-inline-width: <v><i>;",
					resolve: "spacing",
					themeKey: "thickness",
					values: {},
				},
				bis: {
					property: "border-inline-start-width: <v><i>;",
					resolve: "spacing",
					themeKey: "thickness",
					values: {},
				},
				bie: {
					property: "border-inline-end-width: <v><i>;",
					resolve: "spacing",
					themeKey: "thickness",
					values: {},
				},
			},
		},
	},
};

export default shilpConfig;