Global Style

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)

A set of utility CSS classes (margin, padding, size, gap, etc…).

4. Color themes (optional)

Import one or more color palettes from the Radix Colors set:

import 'svxui/styles/colors/blue.css';

See the Color documentation for the full list and how to create custom palettes.

Usage

Import the CSS files at the root of your application.

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

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