Border Color

Apply border colors to element borders.

Usage:

@border color-*;
@border color-top-*;
@border color-right-*;
@border color-bottom-*;
@border color-left-*;
@border color-x-*;
@border color-y-*;
@border color-bl-*;
@border color-bls-*;
@border color-ble-*;
@border color-bi-*;
@border color-bis-*;
@border color-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: {
			color: {
				DEFAULT: {
					property: "border-color: <v><i>;",
					resolve: "color",
					themeKey: "colors",
					variant: true,
					values: {},
				},
				top: {
					property: "border-top-color: <v><i>;",
					resolve: "color",
					themeKey: "colors",
					variant: true,
					values: {},
				},
				right: {
					property: "border-right-color: <v><i>;",
					resolve: "color",
					themeKey: "colors",
					variant: true,
					values: {},
				},
				bottom: {
					property: "border-bottom-color: <v><i>;",
					resolve: "color",
					themeKey: "colors",
					variant: true,
					values: {},
				},
				left: {
					property: "border-left-color: <v><i>;",
					resolve: "color",
					themeKey: "colors",
					variant: true,
					values: {},
				},
				x: {
					property: `
						border-left-color: <v><i>;
						border-right-color: <v><i>;
					`,
					resolve: "color",
					themeKey: "colors",
					variant: true,
					values: {},
				},
				y: {
					property: `
						border-top-color: <v><i>;
						border-bottom-color: <v><i>;
					`,
					resolve: "color",
					themeKey: "colors",
					variant: true,
					values: {},
				},
				bl: {
					property: "border-block-color: <v><i>;",
					resolve: "color",
					themeKey: "colors",
					variant: true,
					values: {},
				},
				bls: {
					property: "border-block-start-color: <v><i>;",
					resolve: "color",
					themeKey: "colors",
					variant: true,
					values: {},
				},
				ble: {
					property: "border-block-end-color: <v><i>;",
					resolve: "color",
					themeKey: "colors",
					variant: true,
					values: {},
				},
				bi: {
					property: "border-inline-color: <v><i>;",
					resolve: "color",
					themeKey: "colors",
					variant: true,
					values: {},
				},
				bis: {
					property: "border-inline-start-color: <v><i>;",
					resolve: "color",
					themeKey: "colors",
					variant: true,
					values: {},
				},
				bie: {
					property: "border-inline-end-color: <v><i>;",
					resolve: "color",
					themeKey: "colors",
					variant: true,
					values: {},
				},
			},
		},
	},
};

export default shilpConfig;