Lightpack CSS Variables
This file documents every single CSS variable available in Lightpack CSS for theming, design tokens, layout, typography, and more. All variables are defined in /src/css/_variables.css.
Color Variables
--red,--red-light,--red-lighter,--red-dark--pink,--pink-light,--pink-lighter,--pink-dark--orange,--orange-light,--orange-lighter,--orange-dark--yellow,--yellow-light,--yellow-lighter,--yellow-dark--green,--green-light,--green-lighter,--green-dark--teal,--teal-light,--teal-lighter,--teal-dark--blue,--blue-light,--blue-lighter,--blue-dark--indigo,--indigo-light,--indigo-lighter,--indigo-dark--purple,--purple-light,--purple-lighter,--purple-dark--brown,--brown-light,--brown-lighter,--brown-dark--gray,--gray-light,--gray-lighter,--gray-dark--black,--black-light,--black-dark--white-light,--white--muted
Semantic Color Palette
--color-primary-lighter,--color-primary-light,--color-primary,--color-primary-dark--color-secondary-lighter,--color-secondary-light,--color-secondary,--color-secondary-dark--color-success-lighter,--color-success-light,--color-success,--color-success-dark--color-warning-lighter,--color-warning-light,--color-warning,--color-warning-dark--color-danger-lighter,--color-danger-light,--color-danger,--color-danger-dark--color-info-lighter,--color-info-light,--color-info,--color-info-dark--color-accent-lighter,--color-accent-light,--color-accent,--color-accent-dark--color-background,--color-surface,--color-surface-dark,--color-surface-alt,--color-border,--color-border-dark,--color-muted,--color-text,--color-text-muted,--color-text-inverse
Typography Variables
--font-family--fs-xs,--fs-sm,--fs-base,--fs-lg,--fs-xl,--fs-2xl,--fs-3xl--fw-100,--fw-200,--fw-300,--fw-400,--fw-500,--fw-600,--fw-700--line-height-base
Spacing (Gap) Variables
--g-1,--g-2,--g-3,--g-4,--g-5,--g-6,--g-7,--g-8,--g-9
Border Radius
--radius-sm,--radius-md,--radius-lg
Z-Index Scale
--z-0,--z-10,--z-20,--z-30,--z-40,--z-50
Transition & Easing
--transition-fast,--transition-base,--transition-slow,--easing-base
Shadows
--shadow-sm,--shadow-md,--shadow-lg
Opacity
--opacity-disabled,--opacity-overlay
Container Widths
--container-xs,--container-sm,--container-md,--container-lg,--container-xl
Breakpoints
--breakpoint-sm,--breakpoint-md,--breakpoint-lg,--breakpoint-xl
Dark Theme Overrides
All semantic color variables are overridden in .theme-dark on <body>.
See /src/css/_variables.css for exact values and usage.