Reference generated from the custom elements manifest — 5 properties, 1 slots, 0 events.
PLAYGROUND3 CONTROLS
PREVIEW / al-theme / SOUTHLEFT
Loading preview
Flat, minimal, type-first.Same components, one refined blue, shadows reserved for overlays.StableIn reviewRedesignDismissContinue
mode
density
contrast
CODE — HTML / REACT
Guidance
NOT YET AUTHORED · 20 COMPONENTS COVERED
NO USAGE GUIDANCE HAS BEEN WRITTEN FOR THIS COMPONENT YET. THE API BELOW IS GENERATED FROM THE MANIFEST AND IS COMPLETE; WHAT IS MISSING IS WHEN TO REACH FOR IT AND WHEN NOT TO.
FIGMA PARITYSOUTHLEFT DESIGN SYSTEM
NOT TRACKEDSouthleft Design System
Deliberately not represented in Figma.
DECIDED BY
NEVER SYNCED
FIGMA SIDE
NEVER OBSERVED
LAST CONFIRMED SYNC
NEVER
PUBLIC SURFACE
5 ATTR · 1 SLOT · 0 EVENT · 0 PART
The two sides have never been confirmed equal, so there is no baseline to compare against.
The theming HOST — sets brand/mode/density tokens on :host and owns no pixels of its own. Nothing for Figma to mirror.
ACCESSIBILITYAXE 4.12.1
CHECKEVIDENCEDETAILRESULT
Default stateAXEtheme--BrandsPASS
Advanced statesAXE2 further storiesPASS
Screen readerMANUALNo screen-reader pass has been recorded for this component.NOT RECORDED
Keyboard navigationINTERACTION TESTSNo interaction tests and no manual keyboard pass.NOT RECORDED
The CI gate disables color-contrast globally (libs/al-web-components/story-fixture/src/main.ts), so its result never reaches a test run. It is enabled for this measurement, and reported here whichever way it comes out.
NO CONTRAST VIOLATIONS ACROSS THIS COMPONENT’S 3 STORIES.
import '@southleft/al-web-components/components/theme';
import { ALTheme } from '@southleft/al-react';
API — 5 PROPS5 DOCUMENTED
PROPTYPEDEFAULT
mode'light' | 'dark'Color mode.
The VALUES no longer live in this component. They live in the design
system's own stylesheet (`@southleft/al-web-components/project/<id>.css`),
which carries `:root` for the default mode and `[data-al-mode='…']` for the
others — the same shape Figma uses, where one collection holds Light and
Dark as two modes of one system.
This property is mirrored onto the host as `data-al-mode` so that stylesheet
matches. A data attribute rather than reusing `[mode]` directly, for two
reasons: the versioned registry renames the TAG (`al-theme-1-2-3`), so a
tag-qualified selector would stop matching; and a bare `[mode='light']` in a
global stylesheet would match unrelated elements. `data-al-mode` also means
a page can set a mode on `<html>` or any subtree with no component at all.'light'
motion'full' | 'reduced' | 'expressive' | undefinedMotion axis. Falls back to `prefers-reduced-motion` when unset.
`expressive` lengthens durations and swaps in springier easing on the
`theme.animation.{duration,timing}.role.*` tokens; `reduced` still wins
under `prefers-reduced-motion` unless `full` is set (accessibility-first
— `expressive` is a decorative upgrade, not an override of the OS
preference).—
shape'default' | 'sharp' | 'pill' | undefinedShape axis. Repoints the `theme.border.radius.role.*` tokens
(action/control/surface/indicator) that components map their
border-radius usage to. `default` (unset) reproduces today's per-brand
radii exactly — the role tokens resolve through the existing
`--al-theme-border-radius{,-lg,-round}` chain, so a brand's own radius
identity still shows through until `sharp`/`pill` overrides it.—
SLOTS1
SLOTDESCRIPTION
(default)The content tree the theme applies to.
EVENTS0
THIS COMPONENT DECLARES NO EVENTS IN THE MANIFEST.