# Introduction
This is css style library based on the foundations of Repsol's newest design system: Energy. It includes every basic element needed to style basic web products, such as colour tokens, sizes, spacing, etc.

It can be used on static websites, SPAs or even AEM products. It is the basic pillar supports energy-components.

# Getting Started
This library requires Vue.js v3.2 or higher.

**Yarn**

```bash
yarn add energy-foundations
```

**NPM**

```bash
npm i energy-foundations
```

# Import and use

**CSS (recomendado)**
Importa el CSS compilado una sola vez al inicio de tu aplicación. Cuando uses otras librerías Energy, esta línea debe ir por encima de los estilos de componentes.

```ts
// main.ts
import 'energy-foundations/dist/style.css';
```

**Sass (@use opcional)**
Entradas Sass disponibles para distintos casos:

- `rds-reset.scss`
- `rds-variables.scss`
- `rds-foundations.scss`
- `global.scss` (contiene los anteriores)
- `style.scss` (nuevo): entrada Sass "todo-en-uno" para emitir el CSS base de Foundations desde tu pipeline Sass.

Ejemplo de uso Sass global:

```scss
// src/styles/index.scss
@use 'energy-foundations/dist/style.scss';
```

Evita duplicar CSS: si usas `@use '.../style.scss'`, no importes también `energy-foundations/dist/style.css` en `main.ts`.

Tokens y mixins:

```scss
@use 'energy-foundations/dist/rds-variables' as *;
@use 'energy-foundations/dist/mixins/typography' as typography;
```
Nota: `style.scss` no incorpora `variables.css` (custom properties). Si necesitas CSS variables precompiladas, usa la importación recomendada de CSS en `main.ts`.

**Use**
To optimize load times in an SPA, we recommend separating files that contain classes from those that contain mixins and variables:

**Clases (CSS base)**
Mantén el CSS base importado una sola vez (vía `main.ts` recomendado, o `@use '.../style.scss'` opcional) y carga tus hojas globales como prefieras.

**Mixins y variables**
Recomendamos crear una hoja `basic.scss` en tu proyecto donde declares:

```scss
@use 'energy-foundations/dist/rds-variables' as *;
```

E inyectarla globalmente en Vite:

```ts
// vite.config.ts
css: {
  preprocessorOptions: {
    scss: {
      additionalData: "@use './src/styles/basic.scss' as *;"
    }
  }
}
```
One may also add the following code to the same vite.config.ts file to use styles from node_modules in their project:
```
server: {
  fs: {
    allow: [".."]
  }
}
```
