Modifiers

Modifiers are classes you can add to any Luminary component to adjust its visual properties. They work on both semantic elements and .glass-* classes.

Material Weight

.thin

Reduces the glass opacity and blur for a lighter, more transparent look.

<button class="thin">Thin Button</button>
<div class="glass-card thin">Thin card</div>

.thick

Increases opacity and blur for a heavier, more frosted appearance.

<button class="thick">Thick Button</button>
<div class="glass-card thick">Thick card</div>

Color & Tint

.vibrant

Tints the element with the accent color (--glass-accent, blue by default). Includes hover state changes.

<button class="vibrant">Vibrant (Accent)</button>
<button class="vibrant success">Success</button>
<button class="vibrant warning">Warning</button>
<button class="vibrant error">Error</button>

The .vibrant modifier supports semantic sub-modifiers:

• .success — green (--glass-success)
• .warning — orange (--glass-warning)
• .error — red (--glass-error)

.glow

Adds an outer glow ring using the accent color. Also supports semantic sub-modifiers.

<button class="glow">Glow</button>
<button class="glow success">Success Glow</button>
<button class="glow warning">Warning Glow</button>
<button class="glow error">Error Glow</button>

Interactivity

.interactive

Makes any element hoverable with a lift effect and pressable with a scale-down. Useful for making cards or containers clickable.

<div class="glass-card interactive">
  <h4>Hover me</h4>
  <p>This card lifts on hover and scales on press.</p>
</div>

State	Effect
Hover	translateY(-2px) scale(1.01) + deeper shadow
Active	translateY(0) scale(0.98)

Typography Modifiers

.vibrant-text

Colors text with the accent color.

<p class="vibrant-text">This text is accent-colored.</p>
<!-- or -->
<span class="vibrant">Also works on spans.</span>

.muted

Colors text with the muted color (--glass-text-muted).

<p class="muted">This text is muted.</p>
<label class="muted">Muted label</label>

Size Constraints

The .size-* modifiers constrain the max-width of any element. They follow the same scale as Tailwind’s max-w-* utilities and work on any semantic element or .glass-* class.

<section class="size-sm">Small section (max 384px)</section>
<div class="glass-card size-lg">Large card (max 512px)</div>
<form class="size-md">Constrained form (max 448px)</form>

Full Scale

Class	Max Width
.size-xs	320px (20rem)
.size-sm	384px (24rem)
.size-md	448px (28rem)
.size-lg	512px (32rem)
.size-xl	576px (36rem)
.size-2xl	672px (42rem)
.size-3xl	768px (48rem)
.size-4xl	896px (56rem)
.size-5xl	1024px (64rem)
.size-6xl	1152px (72rem)
.size-7xl	1280px (80rem)

All size modifiers also set width: 100% so they remain responsive — the element fills its container up to the max-width cap.

Compatibility Matrix

Modifiers work on these elements:

Modifier	Buttons	Cards	Nav	Badge	Stat	Accordion	Alert	Tab Bar	Skeleton	Dropdown
.thin	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓
.thick	✓	✓	✓	—	✓	✓	✓	✓	✓	✓
.vibrant	✓	—	—	✓	✓	✓	✓	✓	✓	✓
.glow	✓	—	—	✓	✓	✓	✓	✓	✓	✓
.interactive	—	✓	—	—	✓	—	—	—	—	—
.size-*	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓