# Gaia Styles and Utilities
A collection of utilities for Gaia design system:
🚀 Design Tokens in [DTCG](https://tr.designtokens.org/format/) format.\
🚀 CSS styles in [BEM](https://getbem.com/) methodology.\
🚀 [Tailwindcss](https://tailwindcss.com/) theme palette and components.\
🚀 Follows [Semantic Versioning](https://semver.org/).
## Installation
```bash
npm i @vsn-ux/gaia-styles
```
Upon installation, choose what you need:
- Looking for regular CSS styles? Check out [CSS Styles](#css-styles-all-in-one).
- A fan of Tailwindcss? Jump into [Tailwindcss](#tailwindcss) section.
- Searching for primitives like Design Tokens? See [Design Tokens](#design-tokens).
## Design Tokens
Low-level primitives that are useful for building themes and style systems.\
This library provides design tokens in three formats:
- Official [DTCG](https://tr.designtokens.org/format/) format in JSON, which can be imported from `@vsn-ux/gaia-styles/design-tokens.json`. Use this format if you want to compile the tokens into other formats.
- As CSS variables, which can be imported from `@vsn-ux/gaia-styles/design-tokens.css`. These are generated from the DTCG tokens using [Terrazzo](https://terrazzo.app/).
- JS format, which can be imported from `@vsn-ux/gaia-styles/design-tokens`. These are generated from the DTCG tokens using [Terrazzo](https://terrazzo.app/).
## CSS Styles (all in one)
### Reset + Design Tokens + Base Styles + Components
```css
@import '@vsn-ux/gaia-styles/all.css';
```
> Note: This does not include the Inter font faces. Read [Inter font](#inter-font) section for more information.
### Reset + Design Tokens + Base Styles + Components (10pt)
Based on 10px root font size, handy during migration from [VUD](https://vud.visma.com).
```css
@import '@vsn-ux/gaia-styles/all-10pt.css';
```
> Note: This does not include the Inter font faces. Read [Inter font](#inter-font) section for more information.
## CSS Styles (granual import)
Useful if you only need specific parts or want full control over import order.
### Reset styles
An opinionated set of base styles to make sure the design system looks the same across all browsers.
```css
@import '@vsn-ux/gaia-styles/reset.css';
```
### Design Tokens
Must have for other styles to work.
```css
@import '@vsn-ux/gaia-styles/design-tokens.css';
```
### Base styles
Just the base styles (default typography size, color, etc.).
```css
/* design tokens are required for components to work */
@import '@vsn-ux/gaia-styles/base.css';
```
### Component styles
Just the component styles.
```css
/* design tokens are required for components to work */
/* import all components at once */
@import '@vsn-ux/gaia-styles/components.css';
/* or pick the ones you need */
@import '@vsn-ux/gaia-styles/components/button.css';
@import '@vsn-ux/gaia-styles/components/checkbox.css';
/* ... */
```
### Bundles
#### Design Tokens + Base Styles + Components
```css
@import '@vsn-ux/gaia-styles/all-no-reset.css';
```
> Note: This does not include the Inter font faces. Read [Inter font](#inter-font) section for more information.
#### Design Tokens + Base Styles + Components (10pt)
Based on 10px root font size, handy during migration from [VUD](https://vud.visma.com).
```css
@import '@vsn-ux/gaia-styles/all-no-reset-10pt.css';
```
> Note: This does not include the Inter font faces. Read [Inter font](#inter-font) section for more information.
## Inter font
It is highly recommended to preload the font files in your HTML to avoid FOUT (Flash of Unstyled Text).\
This should be implemented according to your framework specifics, typically in the `` section of your `index.html`. e.g.
```html
```
Since the deployed path to the font files may vary depending on your project's structure or hosting setup, you will need to handle the font loading and declaration yourself:
```css
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('/InterVariable.woff2?v=4.1')
format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 400 700;
font-display: swap;
src: url('/InterVariable-Italic.woff2?v=4.1')
format('woff2');
}
```
Available font files in the package to copy to your assets folder or CDN:
- **Variable font files (recommended):**
- `@vsn-ux/gaia-styles/font/InterVariable.woff2`
- `@vsn-ux/gaia-styles/font/InterVariable-Italic.woff2`
- **Static font files:**
- `@vsn-ux/gaia-styles/font/Inter-Bold.woff2`
- `@vsn-ux/gaia-styles/font/Inter-BoldItalic.woff2`
- `@vsn-ux/gaia-styles/font/Inter-Italic.woff2`
- `@vsn-ux/gaia-styles/font/Inter-Medium.woff2`
- `@vsn-ux/gaia-styles/font/Inter-MediumItalic.woff2`
- `@vsn-ux/gaia-styles/font/Inter-Regular.woff2`
- `@vsn-ux/gaia-styles/font/Inter-SemiBold.woff2`
- `@vsn-ux/gaia-styles/font/Inter-SemiBoldItalic.woff2`
### Quick setup
> Note: This quick setup is recommended only if your application is not sensitive to Flash of Unstyled Text (FOUT), such as when your initial load already takes some time or FOUT is not a concern for your users.
The package also provides CSS file with `@font-face` declarations for the variable font files that handles everything for you.
```css
@import '@vsn-ux/gaia-styles/font/inter.css';
```
## Tailwindcss
> Note: This is for the latest version **v4** and above.
### Importing everything: theme, base and component styles
```css
@import '@vsn-ux/gaia-styles/tailwindcss';
```
### Importing selectively
Pick what you need in case you want to override some of the styles.
```css
@import '@vsn-ux/gaia-styles/design-tokens.css';
@layer theme, base, components, utilities;
@import 'tailwindcss/preflight.css' layer(base);
@import 'tailwindcss/utilities.css' layer(utilities);
@import '@vsn-ux/gaia-styles/tailwindcss/theme.css' layer(theme);
@import '@vsn-ux/gaia-styles/tailwindcss/base.css' layer(base);
@import '@vsn-ux/gaia-styles/tailwindcss/components.css' layer(components);
```
> Note: The following example is the exact content of `@vsn-ux/gaia-styles/tailwindcss`.