Quasar

Usage

import { quasar } from '@stareezy-ui/tokens'

// Access token values
quasar.plasmaOrange.value      // "#ff6a1a"
quasar.voidBlack.value         // "#020205"
quasar.accretionCrimson.value  // "#dc143c"
quasar.starWhite.value         // "#f8f0e8"
quasar.stellarTeal.value       // "#22c55e"

// Use in createUi themes
const ui = createUi({
  themes: { quasar: themes['quasar'] }
})

Token Reference

Dark / Light Variants

The quasarVariants export provides both dark (deep space) and light (ember glow on ivory) variants via getVariant.

import { quasarVariants, getVariant } from '@stareezy-ui/tokens'

const darkTokens  = getVariant(quasarVariants, 'dark')
const lightTokens = getVariant(quasarVariants, 'light')

darkTokens.voidBlack.value    // "#020205"
lightTokens.voidBlack.value   // "#fdf6f0"

darkTokens.plasmaOrange.value  // "#ff6a1a"
lightTokens.plasmaOrange.value // "#c94a00"

Semantic mapping

When you use themes['quasar'] in createUi, the semantic slots map as follows: