energy-foundations 1.12.0 → 2.0.0-beta.0

package/README.md

@@ -20,48 +20,64 @@ npm i energy-foundations
 
 # Import and use
 
-**CSS**
-You may import the compiled CSS sheet. If you are going to use other energy libraries, this line must be above all the others.
-```
-<style lang="scss" src="./energy-foundations/dist/style.css"></style>
+**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';
 ```
 
-**SCSS**
-These different exports are generated for different use cases:
+**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';
 ```
-rds-reset.scss
-rds-variables.scss
-rds-foundations.scss
-global.scss (contains all the others)
+
+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:
 
-**Classes**
- To do this, the former should be imported only once, by adding a stylesheet that imports style.css in our project root, like this:
-```
-@import 'energy-foundations/dist/style.css';
-```
-and then load it in App.vue's style section as global styling:
-```
-<style lang="scss" src="./styles/main.scss"></style>
-```
+**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 and variables**
-We recommend creating another stylesheet named basic.scss in our project root where we then import the following:
-```
-@import 'energy-foundations/dist/rds-variables';
-```
-This in turn should be imported in our vite.config.ts file within the defineConfig function object parameter:
+**Mixins y variables**
+Recomendamos crear una hoja `basic.scss` en tu proyecto donde declares:
+
+```scss
+@use 'energy-foundations/dist/rds-variables' as *;
 ```
- css: {
-        preprocessorOptions: {
-            scss: {
-                additionalData: `@import "./src/styles/basic.scss";`
-            }
-        }
+
+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:
 ```

package/dist/foundations/_border.scss

@@ -1,3 +1,8 @@
+/*************************
+*** BORDER ***
+*************************/
+@use '../rds-variables' as *;
+
 .rds-radius-s {
   border-radius: $rds-radius-s;
 }

package/dist/foundations/_color.scss

@@ -1,5 +1,7 @@
-@import '../variables/color';
-@import '../variables/color-system';
+/*************************
+*** COLOR ***
+*************************/
+@use '../rds-variables' as *;
 
 .rds-background {
   // Backgrounds

package/dist/foundations/_elevation.scss

@@ -1,4 +1,7 @@
-@import '../mixins/elevation';
+/*************************
+*** ELEVATION ***
+*************************/
+@use '../rds-variables' as *;
 
 .rds-style-effect-overlay {
   @include rds-style-effect-overlay;

package/dist/foundations/_fonts.scss

@@ -1,20 +1,8 @@
+/*************************
+*** FONTS ***
+*************************/
 $rds-font-path: './fonts' !default;
-
-// @font-face {
-//   font-display: block;
-//   font-family: 'SoleRepsolText';
-//   font-style: normal;
-//   font-weight: $rds-typography-w-regular;
-//   src: url('#{$rds-font-path}/SoleRepsolText_W_Bd.woff') format('woff')
-// }
-
-// @font-face {
-//   font-display: block;
-//   font-family: 'SoleRepsolText';
-//   font-style: normal;
-//   font-weight: $rds-typography-w-regular;
-//   src: url('#{$rds-font-path}/SoleRepsolText_W_Lt.woff') format('woff')
-// }
+@use '../rds-variables' as *;
 
 @font-face {
   font-display: block;
@@ -30,10 +18,6 @@ $rds-font-path: './fonts' !default;
   font-style: normal;
   src: url('#{$rds-font-path}/SoleRepsolDisplay_W_Rg.woff2') format('woff2'), 
     url('#{$rds-font-path}/SoleRepsolDisplay_W_Rg.woff') format('woff');
-  src: url('#{$rds-font-path}/SoleRepsolDisplay_W_Rg.woff2')
-    format('woff2'),
-    url('#{$rds-font-path}/SoleRepsolDisplay_W_Rg.woff')
-    format('woff');
 }
 
 @font-face {
@@ -42,10 +26,6 @@ $rds-font-path: './fonts' !default;
   font-style: bold;
   src: url('#{$rds-font-path}/SoleRepsolDisplay_W_Md.woff2') format('woff2'), 
     url('#{$rds-font-path}/SoleRepsolDisplay_W_Md.woff') format('woff');
-  src: url('#{$rds-font-path}/SoleRepsolDisplay_W_Md.woff2')
-    format('woff2'),
-    url('#{$rds-font-path}/SoleRepsolDisplay_W_Md.woff')
-    format('woff');
 }
 
 @font-face {
@@ -54,10 +34,6 @@ $rds-font-path: './fonts' !default;
   font-style: normal;
   src: url('#{$rds-font-path}/SoleRepsolText_W_Rg.woff2') format('woff2'), 
     url('#{$rds-font-path}/SoleRepsolText_W_Rg.woff') format('woff');
-  src: url('#{$rds-font-path}/SoleRepsolText_W_Rg.woff2')
-    format('woff2'),
-    url('#{$rds-font-path}/SoleRepsolText_W_Rg.woff')
-    format('woff');
 }
 
 @font-face {
@@ -66,10 +42,6 @@ $rds-font-path: './fonts' !default;
   font-style: bold;
   src: url('#{$rds-font-path}/SoleRepsolText_W_SBd.woff2') format('woff2'), 
     url('#{$rds-font-path}/SoleRepsolText_W_SBd.woff') format('woff');
-  src: url('#{$rds-font-path}/SoleRepsolText_W_SBd.woff2')
-    format('woff2'),
-    url('#{$rds-font-path}/SoleRepsolText_W_SBd.woff')
-    format('woff');
 }
 
 @font-face {
@@ -78,8 +50,6 @@ $rds-font-path: './fonts' !default;
   font-style: normal;
   src: url('#{$rds-font-path}/SourceCodePro-Regular.woff2') format('woff2'),
     url('#{$rds-font-path}/SourceCodePro-Regular.woff') format('woff');
-  src: url('#{$rds-font-path}/SourceCodePro-Regular.woff2') format('woff2'),
-    url('#{$rds-font-path}/SourceCodePro-Regular.woff') format('woff');
 }
 
 @font-face {
@@ -88,20 +58,8 @@ $rds-font-path: './fonts' !default;
   font-style: normal;
   src: url('#{$rds-font-path}/SourceCodePro-Bold.woff2') format('woff2'),
     url('#{$rds-font-path}/SourceCodePro-Bold.woff') format('woff');
-  src: url('#{$rds-font-path}/SourceCodePro-Bold.woff2') format('woff2'),
-    url('#{$rds-font-path}/SourceCodePro-Bold.woff') format('woff');
 }
 
-// @font-face {
-//   font-display: block;
-//   font-family: 'SoleRepsolText';
-//   font-style: normal;
-//   font-weight: $rds-typography-w-regular;
-//   src: url('#{$rds-font-path}/SoleRepsolText_W_Sbd.woff') format('woff')
-// }
-
-// Icons from icomoon
-
 @font-face {
   font-display: block;
   font-family: 'rds-e-icon-font';

package/dist/foundations/_grid.scss

@@ -1,4 +1,8 @@
+/*************************
+*** GRID ***
+*************************/
 @use 'sass:map';
+@use '../rds-variables' as *;
 
 .rds-e-layout-max,
 .rds-layout-max {

package/dist/foundations/_shadow.scss

@@ -1,5 +1,7 @@
-// Shadows
-@import '../mixins/shadow';
+/*************************
+*** SHADOW ***
+*************************/
+@use '../rds-variables' as *;
 
 .rds-style-shadow-s {
   @include rds-style-shadow-s;

package/dist/foundations/_spacing.scss

@@ -2,6 +2,7 @@
 *** SPACING ***
 *************************/
 @use 'sass:list';
+@use '../rds-variables' as *;
 
 @each $name, $value in $spacing-pairs {
   // margins

package/dist/foundations/_state.scss

@@ -1,4 +1,7 @@
-@import '../mixins/state';
+/*************************
+*** STATE ***
+*************************/
+@use '../rds-variables' as *;
 
 .rds-e-style-state-disabled {
   @include rds-style-state-disabled;

package/dist/foundations/_typography.scss

@@ -1,3 +1,8 @@
+/*************************
+*** TYPOGRAPHY ***
+*************************/
+@use '../rds-variables' as *;
+
 html {
 
   font-family: $rds-typography-f-text;

package/dist/generated/icon-layers.ts

@@ -0,0 +1,391 @@
+/** Auto-generated by generateIconLayers.js on 2025-11-26T12:05:02.828Z */
+export const iconLayers: Record<string, number> = {
+  'source_link': 1,
+  'wind_power_repeat': 1,
+  'list': 1,
+  'clock_6h': 1,
+  'clock_9h': 1,
+  'clock_12h': 1,
+  'gas_repeat': 1,
+  'numeric_list': 1,
+  'power_repeat': 1,
+  'type_regular': 1,
+  'type_bold': 1,
+  'type_italic': 1,
+  'type_underline': 1,
+  'document_edit': 1,
+  'dislike_filled': 1,
+  'like_filled': 1,
+  'loading': 1,
+  'reload': 1,
+  'code': 1,
+  'prompt': 1,
+  'repsol_icon': 1,
+  'sidebar': 1,
+  'slide': 1,
+  'table': 1,
+  'filter_active': 7,
+  'linkedin_02': 1,
+  'menu_02_active': 2,
+  'notification_active': 2,
+  'user_active': 3,
+  'advice-idea': 1,
+  'flag-spain': 1,
+  'replace_this_icon': 1,
+  'filter': 1,
+  'ac-aire-acondicionado': 1,
+  'accesibility': 1,
+  'add_file': 1,
+  'add': 1,
+  'adobe': 1,
+  'android': 1,
+  'apple': 1,
+  'appliance': 1,
+  'arrow_down': 1,
+  'arrow_left': 1,
+  'arrow_next': 1,
+  'arrow_previous': 1,
+  'arrow_right': 1,
+  'arrow_up': 1,
+  'atom': 1,
+  'audible': 1,
+  'autocharge': 1,
+  'baby': 1,
+  'back': 1,
+  'back-1': 1,
+  'bag': 1,
+  'bakery': 1,
+  'bar_terrace': 1,
+  'bar': 1,
+  'battery': 1,
+  'bike': 1,
+  'boat': 1,
+  'boiler': 1,
+  'boxes': 1,
+  'bread': 1,
+  'brightness': 1,
+  'building': 1,
+  'bulb': 1,
+  'burger': 1,
+  'calculator': 1,
+  'calendar': 1,
+  'call': 1,
+  'car-wash-01': 1,
+  'car-wash-02': 1,
+  'car_wash_pressure': 1,
+  'car': 1,
+  'caravan_water': 1,
+  'caravan': 1,
+  'cart_02': 1,
+  'cart_add': 1,
+  'cart_empty': 1,
+  'cart_filled': 3,
+  'cart': 1,
+  'cash_machine': 1,
+  'catering-01': 1,
+  'catering-02': 1,
+  'chart': 1,
+  'chat': 1,
+  'chatbot-alex': 1,
+  'check_02': 1,
+  'check_03': 1,
+  'check': 1,
+  'cheese': 1,
+  'chef': 1,
+  'chemicals': 1,
+  'city': 1,
+  'cliente_digital': 1,
+  'clock': 1,
+  'close_02': 1,
+  'close': 1,
+  'closed_place': 1,
+  'cloudy': 1,
+  'co2': 1,
+  'coffe': 1,
+  'collect': 1,
+  'comb': 1,
+  'contrast': 1,
+  'copy': 1,
+  'cortina_espuma': 1,
+  'coupon_01': 1,
+  'coupon_02': 1,
+  'cow': 1,
+  'crop': 1,
+  'cupcake': 1,
+  'danger': 1,
+  'data_bar': 1,
+  'data_bubble': 1,
+  'data_decrease': 1,
+  'data_increase': 1,
+  'data_line': 1,
+  'data': 1,
+  'day': 1,
+  'decrease': 1,
+  'delete': 1,
+  'delivery': 1,
+  'deporte': 1,
+  'dislike': 1,
+  'disney': 1,
+  'display': 1,
+  'document-approved': 1,
+  'document-final-content': 1,
+  'document-format-csv': 1,
+  'document-format-doc': 1,
+  'document-format-html': 1,
+  'document-format-json': 1,
+  'document-format-ppt': 1,
+  'document-format-xls': 1,
+  'document-format-xml': 1,
+  'document-pdf': 1,
+  'document_add': 1,
+  'document_basic': 1,
+  'document_card_pass': 1,
+  'document_remove': 1,
+  'document_request': 1,
+  'document_search': 1,
+  'download': 1,
+  'drag_and_drop': 1,
+  'drink': 1,
+  'drops': 1,
+  'edit': 1,
+  'ees-ccrr-combustibles-renovables': 1,
+  'ees_electric_charger': 1,
+  'ees_person': 1,
+  'ees_unattended': 1,
+  'ees': 1,
+  'electric-scooter': 1,
+  'elevator': 1,
+  'error': 1,
+  'espectaculo': 1,
+  'euro_01': 1,
+  'euro_02': 1,
+  'euro_03': 1,
+  'exit-old': 1,
+  'exit': 1,
+  'expand': 1,
+  'external-link': 1,
+  'eye_close': 1,
+  'eye_open': 1,
+  'facebook': 1,
+  'faq': 1,
+  'fiesta': 1,
+  'figma': 1,
+  'filter_default': 1,
+  'fingerprint': 1,
+  'fishing': 1,
+  'flag': 1,
+  'flickr': 1,
+  'flowers': 1,
+  'foam': 1,
+  'food-tray': 1,
+  'food-wrap': 1,
+  'fruit': 1,
+  'fuel_tank': 1,
+  'gallery': 1,
+  'gas-cylinder': 1,
+  'gas-cyliner-portugal': 1,
+  'gas': 1,
+  'gasoline_01': 1,
+  'gasoline_02': 1,
+  'geolocation': 1,
+  'gift': 1,
+  'global': 1,
+  'google': 1,
+  'grape': 1,
+  'group-users': 1,
+  'health': 1,
+  'heart_empty': 1,
+  'heart_filled': 1,
+  'history': 1,
+  'home': 1,
+  'hose-01': 1,
+  'hose_02': 1,
+  'hose_car': 1,
+  'hose_pet': 1,
+  'hose_truck': 1,
+  'hotel': 1,
+  'huawei_store': 1,
+  'huerto': 1,
+  'hydraulic-energy': 1,
+  'ice_cream': 1,
+  'ice': 1,
+  'image': 1,
+  'increase': 1,
+  'industry': 1,
+  'info': 1,
+  'infographic': 1,
+  'instagram': 1,
+  'itv_taller': 1,
+  'jogos-santa-casa': 1,
+  'klin': 2,
+  'label': 1,
+  'landmark': 1,
+  'last': 1,
+  'leaf_energia_y_futuro': 1,
+  'leisure': 1,
+  'less': 1,
+  'level-1': 1,
+  'level': 1,
+  'like': 1,
+  'linea_de_datos': 1,
+  'linkedin': 1,
+  'load_progress': 1,
+  'localidad': 1,
+  'location_add': 1,
+  'location_pin': 1,
+  'lock': 1,
+  'locker_school': 1,
+  'locker_shopping': 1,
+  'mail': 1,
+  'mantenimiento': 1,
+  'map': 1,
+  'mark_down': 1,
+  'mark_up-down': 1,
+  'mark_up': 1,
+  'me_movilidad_electrica': 1,
+  'meatball_menu': 1,
+  'medal': 1,
+  'menu_02': 1,
+  'microsoft-copilot': 1,
+  'microsoft-powerbi': 1,
+  'microsoft-teams': 1,
+  'minus': 1,
+  'mobile_01': 1,
+  'mobile_02': 1,
+  'monetary_dollar': 1,
+  'monetary_euro': 1,
+  'monetary_pound': 1,
+  'monument': 1,
+  'more_02': 1,
+  'more': 1,
+  'motorbike': 1,
+  'mute': 1,
+  'nature': 1,
+  'nespresso': 1,
+  'news': 1,
+  'next-1': 1,
+  'next': 1,
+  'night': 1,
+  'noria': 1,
+  'notification_default': 1,
+  'oil_barrel': 1,
+  'oil_extraction_tower': 1,
+  'oil_recycle': 1,
+  'oil_reserve': 1,
+  'once': 1,
+  'open': 1,
+  'options': 1,
+  'outlook': 1,
+  'parking_accesibility': 1,
+  'parking_barrier': 1,
+  'parking_car': 1,
+  'parking_secure': 1,
+  'parking_truck': 1,
+  'parking': 1,
+  'parkingplace_big': 1,
+  'parkingplace_small': 1,
+  'participate': 1,
+  'pause': 1,
+  'pay_card_add': 1,
+  'pay_card': 1,
+  'payment_parking': 1,
+  'payment_regulated_parking': 1,
+  'pedestrian': 1,
+  'pet': 1,
+  'phone': 1,
+  'pinterest': 1,
+  'plane': 1,
+  'play': 1,
+  'power-old': 1,
+  'power_01': 1,
+  'power_02': 1,
+  'power_03': 1,
+  'presion_inferior': 1,
+  'presion_superior': 1,
+  'press-release': 1,
+  'previous': 1,
+  'print': 1,
+  'qr': 1,
+  'recipe-cookbook': 1,
+  'recycle': 1,
+  'reduce': 1,
+  'renewable-energy': 1,
+  'repeat': 1,
+  'report_incidence': 1,
+  'report': 1,
+  'repsol-': 5,
+  'repsol-news': 1,
+  'reserve': 1,
+  'reunion': 1,
+  'rider': 1,
+  'route': 1,
+  'ruler': 1,
+  'save': 1,
+  'savings_piggy_bank': 1,
+  'sea': 1,
+  'search-people': 1,
+  'search': 1,
+  'security': 1,
+  'send-chat': 1,
+  'send': 1,
+  'setting': 1,
+  'settings-gear': 1,
+  'share-old': 1,
+  'share': 1,
+  'shirt': 1,
+  'shop': 1,
+  'should-know': 1,
+  'ski': 1,
+  'solar_communities': 1,
+  'solar-panel': 1,
+  'spotify': 1,
+  'star_empty': 1,
+  'star_filled': 1,
+  'starbucks': 1,
+  'stop': 1,
+  'storage': 1,
+  'storybook': 1,
+  'sunglasses': 1,
+  'sunset': 1,
+  'table1': 1,
+  'tanker-truck': 1,
+  'tik-tok': 1,
+  'time': 1,
+  'tool_electric': 1,
+  'tool': 1,
+  'train': 1,
+  'transcription': 1,
+  'transport': 1,
+  'truck': 1,
+  'turned_in_not': 1,
+  'turned_in': 1,
+  'twitter': 1,
+  'unlock': 1,
+  'unmute': 1,
+  'upload': 1,
+  'user-tools': 1,
+  'user_default': 1,
+  'user_scan': 1,
+  'vacuum-cleaner-01': 1,
+  'vacuum-cleaner-02': 1,
+  'value_increase': 1,
+  'view': 1,
+  'voice-cancel': 1,
+  'voice': 1,
+  'volume-up': 1,
+  'volume': 1,
+  'vtc_taxi': 1,
+  'wax': 1,
+  'waylet': 3,
+  'wc': 1,
+  'whatsapp': 1,
+  'wheel_air': 1,
+  'wheel_pressure': 1,
+  'wheel_repair': 1,
+  'wheel_wash': 1,
+  'wifi': 1,
+  'wind-power': 1,
+  'wind': 1,
+  'wine': 1,
+  'youtube': 1,
+}