@vsn-ux/gaia-styles
v0.5.14
Published
A collection of utilities for Gaia design system:
Readme
Gaia Styles and Utilities
A collection of utilities for Gaia design system:
🚀 Design Tokens in DTCG format.
🚀 CSS styles in BEM methodology.
🚀 Tailwindcss theme palette and components.
🚀 Follows Semantic Versioning.
Installation
npm i @vsn-ux/gaia-stylesUpon installation, choose what you need:
- Looking for regular CSS styles? Check out CSS Styles.
- A fan of Tailwindcss? Jump into Tailwindcss section.
- Searching for primitives like Design Tokens? See 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 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. - JS format, which can be imported from
@vsn-ux/gaia-styles/design-tokens. These are generated from the DTCG tokens using Terrazzo.
CSS Styles (all in one)
Reset + Design Tokens + Base Styles + Components
@import '@vsn-ux/gaia-styles/all.css';Note: This does not include the Inter font faces. Read Inter font section for more information.
Reset + Design Tokens + Base Styles + Components (10pt)
Based on 10px root font size, handy during migration from VUD.
@import '@vsn-ux/gaia-styles/all-10pt.css';Note: This does not include the Inter font faces. Read 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.
@import '@vsn-ux/gaia-styles/reset.css';Design Tokens
Must have for other styles to work.
@import '@vsn-ux/gaia-styles/design-tokens.css';Base styles
Just the base styles (default typography size, color, etc.).
/* design tokens are required for components to work */
@import '@vsn-ux/gaia-styles/base.css';Component styles
Just the component styles.
/* 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
@import '@vsn-ux/gaia-styles/all-no-reset.css';Note: This does not include the Inter font faces. Read Inter font section for more information.
Design Tokens + Base Styles + Components (10pt)
Based on 10px root font size, handy during migration from VUD.
@import '@vsn-ux/gaia-styles/all-no-reset-10pt.css';Note: This does not include the Inter font faces. Read 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 <head> section of your index.html. e.g.
<head>
<!-- ... -->
<link
rel="preload"
href="<path-to-your-assets-or-cdn>/InterVariable.woff2?v=4.1"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
<link
rel="preload"
href="<path-to-your-assets-or-cdn>/InterVariable-Italic.woff2?v=4.1"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
</head>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:
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('<path-to-your-assets-or-cdn>/InterVariable.woff2?v=4.1')
format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 400 700;
font-display: swap;
src: url('<path-to-your-assets-or-cdn>/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.
@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
@import '@vsn-ux/gaia-styles/tailwindcss';Importing selectively
Pick what you need in case you want to override some of the styles.
@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.