mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-08-09 00:42:46 +08:00
119dc668d5
* feat: add SLDS applying and auditing quality skills Two new skills for SLDS v2 compliance: - applying-slds: guides artifact selection, styling hooks, utilities, icons - auditing-slds-quality: scored quality audit with linter + static analysis Made-with: Cursor * refactor: rename auditing-slds-quality skill to validating-slds Renames the skill directory and updates all references in applying-slds/SKILL.md and applying-slds/checklists.md. Made-with: Cursor * fix: improve accuracy and add manual review gate across SLDS skills Correct hook families, badge modifiers, and severity levels; add a manual review gate to validating-slds so automated grades alone cannot declare production readiness; make analyze-quality.cjs portable with explicit --hooks-index flag; remove dead parseYaml code; add version field to all three skill frontmatters. Made-with: Cursor * chore: retrigger CI Made-with: Cursor * fix: quote YAML descriptions and improve color hook disambiguation - Quote description frontmatter in all three skills for valid YAML (inner double quotes now escaped) - Strengthen Step 4 directive: MUST read color-hooks guide before choosing a hook — linter suggestions are unranked - Add surface vs surface-container disambiguation table - Add accent hook context table and state progression - Add standalone-component exception for surface classification - Add modal background example to examples.md - Remove redundant brand-button example (covered by new context table) Made-with: Cursor
132 lines
4.0 KiB
Markdown
132 lines
4.0 KiB
Markdown
---
|
|
id: slds.guidance.utilities.borders
|
|
title: Borders Utilities
|
|
description: SLDS directional border utility classes
|
|
summary: "Utilities for applying borders to specific edges of elements."
|
|
|
|
artifact_type: reference
|
|
domain: utilities
|
|
topic: borders
|
|
|
|
content_format: structured
|
|
complexity: intermediate
|
|
audience: [implementer]
|
|
|
|
tasks: [implement]
|
|
|
|
refs:
|
|
- slds.guidance.utilities
|
|
- slds.guidance.overview.utilities
|
|
- slds.guidance.utilities.box
|
|
- slds.guidance.utilities.margin
|
|
- slds.guidance.utilities.padding
|
|
- slds.guidance.hooks.borders
|
|
|
|
tags: [utilities, borders]
|
|
keywords: [slds-border_top, slds-border_bottom, slds-border_left, slds-border_right]
|
|
---
|
|
|
|
# Borders - Directional Border Utilities
|
|
|
|
Utilities for applying 1px solid borders to specific edges of elements.
|
|
|
|
## Core Classes
|
|
|
|
| Class | Purpose |
|
|
|-------|---------|
|
|
| `slds-border_top` | Adds a 1px solid border to the top edge |
|
|
| `slds-border_bottom` | Adds a 1px solid border to the bottom edge |
|
|
| `slds-border_left` | Adds a 1px solid border to the left edge |
|
|
| `slds-border_right` | Adds a 1px solid border to the right edge |
|
|
|
|
**Properties**: All borders use `var(--slds-g-sizing-border-1)` (1px) width and `var(--slds-g-color-border-1)` color.
|
|
|
|
## Common Patterns
|
|
|
|
### Section Divider
|
|
```html
|
|
<!-- Divider between content sections -->
|
|
<section class="slds-border_bottom slds-p-vertical_medium">
|
|
<h2>Section Title</h2>
|
|
<p>Section content here</p>
|
|
</section>
|
|
```
|
|
|
|
### Accent Bar Card
|
|
```html
|
|
<!-- Card with colored left accent border -->
|
|
<div class="slds-card slds-border_left" style="border-left-width: 4px; border-left-color: var(--slds-g-color-brand-base-60);">
|
|
<div class="slds-card__body">
|
|
<h3>Featured Content</h3>
|
|
<p>Card content with brand accent</p>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
### Status Message with Border Accent
|
|
```html
|
|
<!-- Success message with green left border -->
|
|
<div class="slds-p-around_medium slds-border_left" style="border-left-width: 4px; border-left-color: var(--slds-g-color-success-base-50);">
|
|
<strong>Success:</strong> Record saved successfully.
|
|
</div>
|
|
```
|
|
|
|
### Top Border for Card Header
|
|
```html
|
|
<!-- Card with top border separator -->
|
|
<div class="slds-card">
|
|
<div class="slds-card__header slds-border_top">
|
|
<h2 class="slds-card__header-title">Card Title</h2>
|
|
</div>
|
|
<div class="slds-card__body slds-card__body_inner">
|
|
Card content
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
### Bottom Border for List Items
|
|
```html
|
|
<!-- List with bottom borders -->
|
|
<ul class="slds-has-dividers_bottom-space">
|
|
<li class="slds-item slds-border_bottom slds-p-vertical_small">
|
|
List item one
|
|
</li>
|
|
<li class="slds-item slds-border_bottom slds-p-vertical_small">
|
|
List item two
|
|
</li>
|
|
<li class="slds-item slds-p-vertical_small">
|
|
List item three (no border)
|
|
</li>
|
|
</ul>
|
|
```
|
|
|
|
## Best Practices
|
|
|
|
✅ Use `slds-border_bottom` for section dividers
|
|
✅ Use `slds-border_left` with 4px width for accent bars on cards and messages
|
|
✅ Combine border utilities with spacing utilities for layout control
|
|
✅ Use inline styles with design tokens for custom border colors
|
|
✅ Use `slds-border_top` for visual separation in card headers
|
|
|
|
❌ Never apply multiple directional border classes to the same element
|
|
❌ Never use arbitrary color values instead of design tokens
|
|
❌ Never override the default 1px width without specific design requirements
|
|
❌ Never use border utilities when a component has built-in border styling
|
|
|
|
## Token Reference
|
|
|
|
### Border Tokens
|
|
- **Width**: `var(--slds-g-sizing-border-1)` (1px)
|
|
- **Color**: `var(--slds-g-color-border-1)` (default gray)
|
|
|
|
### Common Color Overrides
|
|
- **Brand**: `var(--slds-g-color-brand-base-60)`
|
|
- **Success**: `var(--slds-g-color-success-base-50)`
|
|
- **Warning**: `var(--slds-g-color-warning-base-60)`
|
|
- **Error**: `var(--slds-g-color-error-base-50)`
|
|
|
|
## Related Utilities
|
|
|
|
- **Box Utilities** - For containers with borders and padding, see [Box Utilities](ref:slds.guidance.utilities.box)
|
|
- **Spacing Utilities** - For padding and margins, see [Margin](ref:slds.guidance.utilities.margin) and [Padding](ref:slds.guidance.utilities.padding) utilities
|