SGDS Border Color Utilities Skill

Helps developers apply theme-aware semantic border colors to components and containers.

Prerequisites

Required: Complete setup from sgds-utilities-setup skill first.

Theme files required: Border color utilities require both utility CSS and theme files (day.css and night.css) for theme-aware colors.

Related skills:

utilities-border-width — Border thickness and side selection (sgds:border, sgds:border-2, sgds:border-l-4, etc.)
utilities-border-radius — Rounded corners (sgds:rounded-lg, sgds:rounded-full, etc.)

All SGDS border color utilities use the sgds:border-{semantic}-{modifier} pattern with the sgds: prefix.

Border colors are theme-aware — they automatically adapt when toggling between day/night themes (unless using fixed variants).