Overview & Philosophy
Infrastructure CSS classes that stay directly in HTML markup (e.g., .hidden, .sr-only, .container). Visual styling in Ashlar is authored via SCSS @include mixins on semantic elements rather than utilitarian classes.
Infrastructure
| Class | Purpose |
|---|---|
.hidden | display: none — JS toggle target (used by ln-table, ln-tabs, etc.) |
.sr-only | Visually hidden, accessible to screen readers |
.container | Centered max-width wrapper with responsive horizontal padding |
.container-sm | Narrow variant (56rem max-width) |
Semantic Color Overrides
Apply to any parent element to thread --color-primary through the status color family. All child components (buttons, badges, progress bars) automatically adapt.
| Class | Threads | Example |
|---|---|---|
.success | --color-success-* | |
.warning | --color-warning-* | |
.error | --color-error-* | |
.info | --color-info-* | |
.secondary | --color-secondary-* | |
.neutral | --fg-subtle |
Button Style Variants
Modern SaaS button variants built via SCSS mixins and exported as utility classes.
| Variant | Default | Success | Error | Warning |
|---|---|---|---|---|
Solid Primary (.btn) |
||||
Soft Tint (.btn-soft) |
||||
Outline (.btn-outline) |
||||
Ghost (.btn-ghost) |
||||
Link (.btn-link) |
Dual-Layer Shadow Elevation Scale
Layered shadows (ambient light + key light) for natural depth without dark visual clutter.
--shadow-xs
--shadow-sm
--shadow-md
--shadow-lg
--shadow-xl
--shadow-2xl
Skeleton Loading Shimmer
Animated placeholder blocks via .skeleton utility class for smooth content loading states.