Advanced CSS — Web Component Theming

55+ CSS custom properties on <alap-link> give full DOM parity. Every visual property you can set in regular CSS has a --alap-* equivalent.

Default (no overrides)

Out-of-the-box styling: coffee shops and bridges.

White background, subtle shadow, 6px radius, blue hover. This is the baseline that all browsers render identically.

All CSS Custom Properties

Properties marked (unset) are off by default — set them to activate. Properties with fallback chains inherit from their base when unset.

Menu Container

Property	Default	What it controls
`--alap-bg`	`#ffffff`	Menu background
`--alap-border`	`#e5e7eb`	Border color
`--alap-border-width`	`1px`	Border width (0 for borderless)
`--alap-radius`	`6px`	Border radius
`--alap-corner-shape`	`round`	Corner geometry (1–4 values)
`--alap-shadow`	`0 4px 12px ...`	Box shadow
`--alap-drop-shadow`	(unset)	filter: drop-shadow() — respects corner shapes
`--alap-menu-hover-shadow`	(→ shadow)	Box shadow on menu hover
`--alap-menu-hover-drop-shadow`	(→ drop-shadow)	Drop shadow on menu hover
`--alap-opacity`	`1`	Menu opacity
`--alap-backdrop`	(unset)	backdrop-filter (blur, saturate)
`--alap-menu-transition`	(unset)	Transition for menu properties
`--alap-menu-padding`	`0.25rem 0`	List padding inside menu
`--alap-min-width`	`200px`	Minimum width
`--alap-max-width`	`none`	Maximum width
`--alap-z-index`	`10`	Stacking order
`--alap-gap`	`0.5rem`	Trigger-to-menu spacing
`--alap-font`	`inherit`	Font family

Per-Corner Shape (via `::part(menu)`)

Per-corner longhands can't be exposed as custom properties (CSS longhands override shorthands in the same block). Use ::part(menu) for per-corner control:

alap-link::part(menu) {
  corner-top-right-shape: bevel;       /* physical */
  corner-start-end-shape: bevel;       /* logical */
  corner-right-shape: bevel;           /* side shorthand */
}

Items

Property	Default	What it controls
`--alap-item-border`	(unset)	Border on each li
`--alap-item-border-radius`	(unset)	Border radius on each li
`--alap-item-gap`	`0`	Vertical spacing between items

Link Text

Property	Default	What it controls
`--alap-text`	`#1a1a1a`	Text color
`--alap-font-size`	`0.9rem`	Font size
`--alap-font-weight`	(inherits)	Font weight
`--alap-letter-spacing`	(unset)	Letter spacing
`--alap-line-height`	(inherits)	Line height
`--alap-text-decoration`	`none`	Text decoration
`--alap-text-transform`	(unset)	Text transform
`--alap-text-align`	(unset)	Text alignment
`--alap-text-shadow`	(unset)	Text shadow
`--alap-text-overflow`	(unset)	Text overflow (needs overflow + white-space)
`--alap-overflow`	(unset)	Overflow (companion to text-overflow)
`--alap-white-space`	(unset)	White-space (companion to text-overflow)
`--alap-padding`	`0.5rem 1rem`	Link padding
`--alap-cursor`	`pointer`	Cursor style
`--alap-transition`	(unset)	Transition for hover/focus effects

Hover State

Property	Default	What it controls
`--alap-hover-bg`	`#eff6ff`	Background
`--alap-hover-text`	`#2563eb`	Text color
`--alap-hover-shadow`	(unset)	Box shadow
`--alap-hover-text-shadow`	(→ text-shadow)	Text shadow
`--alap-hover-text-decoration`	(→ text-decoration)	Text decoration
`--alap-hover-font-weight`	(→ font-weight)	Font weight
`--alap-hover-opacity`	(unset)	Opacity
`--alap-hover-transform`	(unset)	Transform (translateX, scale, etc.)
`--alap-hover-border`	(unset)	Border

Focus State

Property	Default	What it controls
`--alap-focus-ring`	`#2563eb`	Focus outline color
`--alap-focus-bg`	(→ hover-bg)	Background
`--alap-focus-text`	(→ hover-text)	Text color
`--alap-focus-shadow`	(unset)	Box shadow
`--alap-focus-text-shadow`	(→ text-shadow)	Text shadow
`--alap-focus-border`	(unset)	Border

Images

Property	Default	What it controls
`--alap-img-max-height`	`4rem`	Max image height
`--alap-img-radius`	`3px`	Image border radius

All properties use standard CSS — supported everywhere. corner-shape properties use CSS Borders Level 4 (Chrome/Edge 134+) with graceful border-radius fallback.

Feature Detection

Use @supports to conditionally enhance:

/* Base — works everywhere */
alap-link {
  --alap-radius: 12px;
}

/* Enhanced — only in browsers with corner-shape */
@supports (corner-shape: squircle) {
  alap-link {
    --alap-corner-shape: squircle;
    --alap-radius: 20px;
  }
}

// JavaScript detection
if (CSS.supports('corner-shape', 'squircle')) {
  document.documentElement.classList.add('has-corner-shape');
}