hover:, dark:, /opacity, etc.) and works seamlessly and magically to create stunning and professional multi-theme websites.
Theme Backgrounds
These classes feature built-in auto contrast. When applied, they don’t just change the background color—they automatically calculate and apply the correct text color to ensure perfect legibility, regardless of what theme is currently active.bg: rgb(--sq-color-primary-rgb)
Primary background, auto-shifts text to match
--sq-color-primary-contrast.bg: rgb(--sq-color-secondary-rgb)
Secondary background, auto-shifts text to match
--sq-color-secondary-contrast.bg: rgb(--sq-color-accent-rgb)
Accent background, auto-shifts text to match
--sq-color-accent-contrast.Example
User
text-inherit to forces an element to inherit the parent contrast color established by the theme backgrounds above.Theme Colors
These utilities are essential for the framework’s multi-theme and auto light/dark schema engine. Because they map to CSS variables rather than hardcoded hex values, the entire site’s color palette can swap instantly based on user preferences or the active theme.rgb(var(--sq-color-*-rgb) / <alpha-value>)
Brand color palette. Supports opacity modifiers natively (e.g.
bg-primary/50).rgb(var(--sq-color-*-rgb) / <alpha-value>)
Structural semantic backgrounds and muted text panes.
rgb(var(--sq-color-*-rgb) / <alpha-value>)
Specific light/dark mode forced backgrounds.
Example
Text Sizes
Sizes: 8rem -> 3.5rem
Massive display header sizes. Pre-configured tightly with negative tracking (
letter-spacing) to ensure visual punch.Sizes: 3rem -> 1rem
Standard heading sizing scale. Sized responsively and pre-configured with tight tracking.
Example
Text Fonts
var(--sq-font-sans)
The primary sans-serif framework font defined in the styling dashboard.
var(--sq-font-serif)
The secondary serif framework font.
var(--sq-font-mono)
The active monospace framework font.
Example