@vsn-ux/gaia-styles 1.0.0-alpha.2

package/README.md

@@ -0,0 +1,125 @@
+# 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).
+- 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
+
+### Everything: Reset + Design Tokens + Base Styles + Components
+
+Ideal for fresh projects or once fully migrated.
+
+> \*Reset is a stylesheet designed to reduce browser inconsistencies. [Read more](https://tailwindcss.com/docs/preflight).
+
+```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.
+
+### Design Tokens + Base Styles + Components
+
+Ideal for migrating existing projects. Based on default 16px root font size.
+
+```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 + Global Styles + Components (based on 10px font size)
+
+Based on default 10px root font size, handy if coming 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.
+
+### Component styles
+
+Want to import just the components without reset and base styles?
+
+```css
+/* design tokens are required for components to work */
+@import '@vsn-ux/gaia-styles/design-tokens.css';
+
+/* 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';
+/* ... */
+```
+
+### Base styles
+
+Want to import just the components without reset and base styles?
+
+```css
+/* design tokens are required for base styles to work */
+@import '@vsn-ux/gaia-styles/design-tokens.css';
+
+@import '@vsn-ux/gaia-styles/base.css';
+/* ... */
+```
+
+### Inter font
+
+The package includes the Inter font faces. In case you want to load them by other means, look at [rsms.me/inter](https://rsms.me/inter/).
+
+```css
+@import '@vsn-ux/gaia-styles/font/inter.css';
+```
+
+## Tailwindcss
+
+❗ This is for the latest version **v4** and above.
+
+Instead of importing `@import "tailwindcss";`, import the following:
+
+```css
+@import '@vsn-ux/gaia-styles/tailwindcss';
+```
+
+In case you want to customize something, use this:
+
+```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);
+```
+
+> The following example is the exact content of `@vsn-ux/gaia-styles/tailwindcss`.