Styling

Library CSS files and style sheets.

Overview

The library provides CSS files containing the foundations, utility classes, and color palettes.

1. Tokens (required)

The required CSS foundations of the library. It includes a set of CSS variables to configure:

spaces scales
border radius
typography
global colors (background, overlay, etc…)

2. Normalize (optional)

Contains the modern-normalize.css library. A set of CSS rules for normalize browsers default styles.

3. Utilities (optional)

Tailwind-compatible utility classes for spacing, sizing, display, overflow, and layout child properties. No prefix — class names follow Tailwind conventions (pt-4, w-full, grow, etc.).

Import the full bundle or individual files for finer control:

// Full bundle
import 'svxui/styles/utilities.css';

// Opt-in individual files
import 'svxui/styles/utilities.space.css';      // margin, padding
import 'svxui/styles/utilities.size.css';       // width, height, min/max, size
import 'svxui/styles/utilities.display.css';    // block, inline, hidden...
import 'svxui/styles/utilities.overflow.css';   // overflow-hidden, overflow-auto...
import 'svxui/styles/utilities.flex-child.css'; // grow, shrink, flex-1...
import 'svxui/styles/utilities.grid-child.css'; // col-span-*, row-start-*...

Category	Examples
Padding	`p-4`, `px-2`, `pt-6`, `pb-0`
Margin	`m-4`, `mx-auto`, `mt-5`, `-mt-2`
Sizing	`w-full`, `h-screen`, `max-w-fit`, `min-h-0`
Square size	`size-4`, `size-full`
Display	`block`, `inline`, `inline-block`, `contents`, `hidden`
Overflow	`overflow-hidden`, `overflow-auto`, `overflow-y-scroll`
Flex child	`grow`, `shrink-0`, `flex-1`, `flex-none`, `self-center`
Grid child	`col-span-2`, `col-span-full`, `row-start-1`

The spacing scale uses tokens 0–9 mapped to --space-N CSS variables. full maps to 100%, auto to auto.

4. Color palettes

Default palettes and additional Radix color themes are covered in the Colors guide.

Usage

Import the CSS files at the root of your application.

<script>
    import 'svxui/styles/theme.default.css'; // Required
    import 'svxui/styles/tokens.css'; // Required
    import 'svxui/styles/normalize.css'; // Optional
    import 'svxui/styles/utilities.css'; // Optional

    // Additional color themes (pick one or more)
    import 'svxui/styles/colors/blue.css'; // Optional
    import 'svxui/styles/colors/green.css'; // Optional
</script>