energy-foundations 0.0.1-beta.2

package/dist/stories/colors/componentColor.mdx

@@ -0,0 +1,96 @@
+import { Meta, Unstyled } from '@storybook/blocks';
+import './../styles/index.scss';
+import './componentColors.scss';
+
+<Meta title="Foundations/Color/Component Colors" name="ComponentColors" />
+
+# Interactive
+
+<Unstyled>
+  {/* Content state */}
+  <table>
+    <tr>
+      <th>Content State</th>
+    </tr>
+    <tr>
+      <td class="width__one-third left">
+        <h2 class="rds-title-01 rds-doc__color-headline">Hover</h2>
+      </td>
+      <td>
+        <div class="rds-doc__color-circle rds-doc__component-colors__content-state--hover"></div>
+      </td>
+      <td class="width__one-third right">
+        ```$rds-color-interactive-content-hover```
+      </td>
+    </tr>
+    <tr>
+      <td class="width__one-third left">
+        <h2 class="rds-title-01 rds-doc__color-headline">Active</h2>
+      </td>
+      <td>
+        <div class="rds-doc__color-circle rds-doc__component-colors__content-state--active"></div>
+      </td>
+      <td class="width__one-third right">
+        ```$rds-color-interactive-content-active```
+      </td>
+    </tr>
+  </table>
+
+  {/* Interactive Surface */}
+  <table>
+    <tr>
+      <th>Interactive Surface</th>
+    </tr>
+    <tr>
+      <td class="width__one-third left">
+        <h2 class="rds-title-01 rds-doc__color-headline">Default</h2>
+      </td>
+      <td>
+        <div class="rds-doc__color-circle rds-doc__component-colors__interactive-surface--default"></div>
+      </td>
+      <td class="width__one-third right">
+        ```$rds-color-interactive-surface-default```
+      </td>
+    </tr>
+    <tr>
+      <td class="width__one-third left">
+        <h2 class="rds-title-01 rds-doc__color-headline">Alternative</h2>
+      </td>
+      <td>
+        <div class="rds-doc__color-circle rds-doc__component-colors__interactive-surface--alternative"></div>
+      </td>
+      <td class="width__one-third right">
+        ```$rds-color-interactive-surface-alternative```
+      </td>
+    </tr>
+  </table>
+
+  {/* Surface States */}
+  <table>
+    <tr>
+      <th>Surface States</th>
+    </tr>
+    <tr>
+      <td class="width__one-third left">
+        <h2 class="rds-title-01 rds-doc__color-headline">Hover</h2>
+      </td>
+      <td>
+        <div class="rds-doc__color-circle rds-doc__component-colors__surface-states--hover"></div>
+      </td>
+      <td class="width__one-third right">
+        ```$rds-color-interactive-surface-hover```
+      </td>
+    </tr>
+    <tr>
+      <td class="width__one-third left">
+        <h2 class="rds-title-01 rds-doc__color-headline">Active</h2>
+      </td>
+      <td>
+        <div class="rds-doc__color-circle component-colors__surface-states--active"></div>
+      </td>
+      <td class="width__one-third right">
+        ```$rds-color-interactive-surface-active```
+      </td>
+    </tr>
+  </table>
+</Unstyled>

package/dist/stories/colors/componentColors.scss

@@ -0,0 +1,2 @@
+@import '../../foundations/color';
+

package/dist/stories/colors/semanticColor.mdx

@@ -0,0 +1,458 @@
+import { Meta, Unstyled } from '@storybook/blocks';
+import './../styles/index.scss';
+
+<Meta title="Foundations/Color/Semantic Color" name="Colorsystem" />
+
+# Semantic color
+
+<Unstyled>
+  <table>
+    <tr>
+      <th>Content</th>
+    </tr>
+    <tr>
+      <td class="width__one-third left">
+        <h2 class="rds-title-01 rds-doc__color-headline">High</h2>
+        <span class="rds-body-02"> Navy 80</span>
+      </td>
+      <td>
+        <div class="rds-doc__color-circle rds-doc__color-circle--navy-80">Aa</div>
+      </td>
+      <td class="width__one-third right">
+        ```$rds-content-high```
+      </td>
+    </tr>
+
+    <tr>
+      <td class="width__one-third left">
+        <h2 class="rds-title-01 rds-doc__color-headline">Medium</h2>
+        <span class="rds-body-02"> Navy 60</span>
+      </td>
+      <td>
+        <div class="rds-doc__color-circle rds-doc__color-circle--navy-60">Aa</div>
+      </td>
+      <td class="width__one-third right">
+        ```$rds-content-medium```
+      </td>
+    </tr>
+
+    <tr>
+      <td class="width__one-third left">
+        <h2 class="rds-title-01 rds-doc__color-headline">High Inverse</h2>
+        <span class="rds-body-02"> Basic White</span>
+      </td>
+      <td>
+        <div class="rds-doc__color-circle rds-doc__color-circle--dark rds-doc__color-circle--basic-white">Aa</div>
+      </td>
+      <td class="width__one-third right">
+        ```$rds-content-high-inverse```
+      </td>
+    </tr>
+
+    <tr>
+      <td class="width__one-third left">
+        <h2 class="rds-title-01 rds-doc__color-headline">Medium  Inverse </h2>
+        <span class="rds-body-02"> Basic White 70% opacity</span>
+      </td>
+      <td>
+        <div class="rds-doc__color-circle rds-doc__color-circle--dark rds-doc__color-circle--basic-white-op-07">Aa</div>
+      </td>
+      <td class="width__one-third right">
+        ```$rds-content-medium-inverse```
+      </td>
+    </tr>
+  </table>
+
+  <table>
+    <tr>
+      <th>Content State</th>
+    </tr>
+    <tr>
+      <td class="width__one-third left">
+        <h2 class="rds-title-01 rds-doc__color-headline">Disabled</h2>
+        <span class="rds-body-02"> Navy 60 30% Opacity</span>
+      </td>
+      <td>
+        <div class="rds-doc__color-circle rds-doc__color-circle--navy-60-op-03">Aa</div>
+      </td>
+      <td class="width__one-third right">
+        ```$rds-content-state-disabled```
+      </td>
+    </tr>
+
+    <tr>
+      <td class="width__one-third left">
+        <h2 class="rds-title-01 rds-doc__color-headline">Disabled Inverse</h2>
+        <span class="rds-body-02"> Basic White 30% opacity</span>
+      </td>
+      <td>
+        <div class="rds-doc__color-circle rds-doc__color-circle--dark rds-doc__color-circle--basic-white-op-03">Aa</div>
+      </td>
+      <td class="width__one-third right">
+        ```$rds-content-state-disabled-inverse```
+      </td>
+    </tr>
+  </table>
+</Unstyled>
+
+<Unstyled>
+  <table>
+    <tr>
+      <th>Backgrounds</th>
+    </tr>
+    <tr>
+      <td class="width__one-third left">
+        <h2 class="rds-title-01 rds-doc__color-headline">Default</h2>
+        <span class="rds-body-02"> Basic White</span>
+      </td>
+      <td>
+        <div class="rds-doc__color-circle rds-doc__color-circle--bg-default"></div>
+      </td>
+      <td class="width__one-third right">
+        ```$rds-background-default```
+        ```.rds-backround__default```
+      </td>
+    </tr>
+  </table>
+</Unstyled>
+
+<Unstyled>
+  <table>
+    <tr>
+      <th>Surfaces</th>
+    </tr>
+    <tr>
+      <td class="width__one-third left">
+        <h2 class="rds-title-01 rds-doc__color-headline">White</h2>
+        <span class="rds-body-02"> White</span>
+      </td>
+      <td>
+        <div class="rds-doc__color-circle rds-doc__color-circle--bg-default"></div>
+      </td>
+      <td class="width__one-third right">
+        ```$rds-surface-white```
+        ```.rds-backround__surface-white```
+      </td>
+    </tr>
+
+    <tr>
+      <td class="width__one-third left">
+        <h2 class="rds-title-01 rds-doc__color-headline">Grey</h2>
+        <span class="rds-body-02"> Grey</span>
+      </td>
+      <td>
+        <div class="rds-doc__color-circle rds-doc__color-circle--bg-alternative"></div>
+      </td>
+      <td class="width__one-third right">
+        ```$rds-surface-grey```
+        ```.rds-backround__surface-grey```
+      </td>
+    </tr>
+
+    <tr>
+      <td class="width__one-third left">
+        <h2 class="rds-title-01 rds-doc__color-headline">Navy</h2>
+        <span class="rds-body-02"> Navy 80</span>
+      </td>
+      <td>
+        <div class="rds-doc__color-circle rds-doc__color-circle--dark"></div>
+      </td>
+      <td class="width__one-third right">
+        ```$rds-surface-navy```
+        ```.rds-backround__surface-navy```
+      </td>
+    </tr>
+
+    <tr>
+      <td class="width__one-third left">
+        <h2 class="rds-title-01 rds-doc__color-headline">Sand</h2>
+        <span class="rds-body-02"> Orange 0</span>
+      </td>
+      <td>
+        <div class="rds-doc__color-circle rds-doc__color-circle--bg-sand"></div>
+      </td>
+      <td class="width__one-third right">
+        ```$rds-surface-sand```
+        ```.rds-backround__surface-sand```
+      </td>
+    </tr>
+  </table>
+
+  <table>
+    <tr>
+      <th>Highlighted surfaces</th>
+    </tr>
+    <tr>
+      <td class="width__one-third left">
+        <h2 class="rds-title-01 rds-doc__color-headline"> Ivory Gradient</h2>
+        <span class="rds-body-02"> Gradient ivory</span>
+      </td>
+      <td>
+        <div class="rds-doc__color-circle rds-doc__color-circle--ivory-gradient"></div>
+      </td>
+      <td class="width__one-third right">
+        ```$rds-highlightedSurface-ivoryGradient```
+        ```.rds-backround__highlighted-surface-ivoryGradient```
+      </td>
+    </tr>
+
+    <tr>
+      <td class="width__one-third left">
+        <h2 class="rds-title-01 rds-doc__color-headline">Orange Gradient</h2>
+        <span class="rds-body-02"> Gradient orange</span>
+      </td>
+      <td>
+        <div class="rds-doc__color-circle rds-doc__color-circle--orange-gradient"></div>
+      </td>
+      <td class="width__one-third right">
+        ```$rds-highlightedSurface-orangeGradient```
+        ```.rds-backround__highlighted-surface-orangeGradient```
+      </td>
+    </tr>
+
+    <tr>
+      <td class="width__one-third left">
+        <h2 class="rds-title-01 rds-doc__color-headline">Blue Gradient</h2>
+        <span class="rds-body-02"> Gradient blue</span>
+      </td>
+      <td>
+        <div class="rds-doc__color-circle rds-doc__color-circle--blue-gradient"></div>
+      </td>
+      <td class="width__one-third right">
+        ```$rds-highlightedSurface-blueGradient```
+        ```.rds-backround__highlighted-surface-blueGradient```
+      </td>
+    </tr>
+  </table>
+</Unstyled>
+
+<Unstyled>
+  <table>
+    <tr>
+      <th>Border</th>
+    </tr>
+    <tr>
+      <td class="width__one-third left">
+        <h2 class="rds-title-01 rds-doc__color-headline">High</h2>
+        <span class="rds-body-02"> Navy 30</span>
+      </td>
+      <td>
+        <div class="rds-doc__color-circle rds-doc__color-circle--bg-default"></div>
+      </td>
+      <td class="width__one-third right">
+        ```$rds-border-high```
+      </td>
+    </tr>
+
+    <tr>
+      <td class="width__one-third left">
+        <h2 class="rds-title-01 rds-doc__color-headline">Low</h2>
+        <span class="rds-body-02"> Navy 05</span>
+      </td>
+      <td>
+        <div class="rds-doc__color-circle rds-doc__color-circle--border-low"></div>
+      </td>
+      <td class="width__one-third right">
+        ```$rds-border-low```
+      </td>
+    </tr>
+
+    <tr>
+      <td class="width__one-third left">
+        <h2 class="rds-title-01 rds-doc__color-headline">High Inverse</h2>
+        <span class="rds-body-02"> Basic white  50% opacity</span>
+      </td>
+      <td>
+        <div class="rds-doc__color-circle rds-doc__color-circle--border-high-inverse"></div>
+      </td>
+      <td class="width__one-third right">
+        ```$rds-border-high-inverse```
+      </td>
+    </tr>
+
+    <tr>
+      <td class="width__one-third left">
+        <h2 class="rds-title-01 rds-doc__color-headline">Low Inverse</h2>
+        <span class="rds-body-02"> Basic white  25% opacity</span>
+      </td>
+      <td>
+        <div class="rds-doc__color-circle rds-doc__color-circle--border-low-inverse"></div>
+      </td>
+      <td class="width__one-third right">
+        ```$rds-border-low-inverse```
+      </td>
+    </tr>
+  </table>
+
+  <table>
+    <tr>
+      <th>Highlighted border</th>
+    </tr>
+    <tr>
+      <td class="width__one-third left">
+        <h2 class="rds-title-01 rds-doc__color-headline">Orange Gradient</h2>
+        <span class="rds-body-02"> Gradient orange</span>
+      </td>
+      <td>
+        <div class="rds-doc__color-circle rds-doc__color-circle--border-orange-gradient"></div>
+      </td>
+      <td class="width__one-third right">
+        ```$rds-highlightedBorder-orangeGradient```
+      </td>
+    </tr>
+  </table>
+</Unstyled>
+
+<Unstyled>
+  <table>
+    <tr>
+      <th>Semantic content</th>
+    </tr>
+    <tr>
+      <td class="width__one-third left">
+        <h2 class="rds-title-01 rds-doc__color-headline">Success</h2>
+        <span class="rds-body-02"> Green 50</span>
+      </td>
+      <td class="center">
+        <div class="rds-doc__color-text rds-doc__color-text--success rds-title-01">Aa</div>
+      </td>
+      <td class="width__one-third right">
+        ```$rds-semantic-content-success```
+      </td>
+    </tr>
+
+    <tr>
+      <td class="width__one-third left">
+        <h2 class="rds-title-01 rds-doc__color-headline">Error</h2>
+        <span class="rds-body-02"> Red 60</span>
+      </td>
+      <td class="center">
+        <div class="rds-doc__color-text rds-doc__color-text--error rds-title-01">Aa</div>
+      </td>
+      <td class="width__one-third right">
+        ```$rds-semantic-content-error```
+      </td>
+    </tr>
+
+    <tr>
+      <td class="width__one-third left">
+        <h2 class="rds-title-01 rds-doc__color-headline">Warning</h2>
+        <span class="rds-body-02"> Yellow 60</span>
+      </td>
+      <td class="center">
+        <div class="rds-doc__color-text rds-doc__color-text--warning rds-title-01">Aa</div>
+      </td>
+      <td class="width__one-third right">
+        ```$rds-semantic-content-warning```
+      </td>
+    </tr>
+
+    <tr>
+      <td class="width__one-third left">
+        <h2 class="rds-title-01 rds-doc__color-headline">Information</h2>
+        <span class="rds-body-02"> Turquoise 50</span>
+      </td>
+      <td class="center">
+        <div class="rds-doc__color-text rds-doc__color-text--information rds-title-01">Aa</div>
+      </td>
+      <td class="width__one-third right">
+        ```$rds-semantic-content-information```
+      </td>
+    </tr>
+  </table>
+
+  <table>
+    <tr>
+      <th>Semantic Surface</th>
+    </tr>
+    <tr>
+      <td class="width__one-third left">
+        <h2 class="rds-title-01 rds-doc__color-headline">Success</h2>
+        <span class="rds-body-02"> Green 50</span>
+      </td>
+      <td>
+        <div class="rds-doc__color-circle rds-doc__color-circle--sf-success"></div>
+      </td>
+      <td class="width__one-third right">
+        ```$rds-semantic-background-success```
+      </td>
+    </tr>
+
+    <tr>
+      <td class="width__one-third left">
+        <h2 class="rds-title-01 rds-doc__color-headline">Error</h2>
+        <span class="rds-body-02"> Red 05</span>
+      </td>
+      <td>
+        <div class="rds-doc__color-circle rds-doc__color-circle--sf-error"></div>
+      </td>
+      <td class="width__one-third right">
+        ```$rds-semantic-background-error```
+      </td>
+    </tr>
+
+    <tr>
+      <td class="width__one-third left">
+        <h2 class="rds-title-01 rds-doc__color-headline">Warning</h2>
+        <span class="rds-body-02"> Yellow 10</span>
+      </td>
+      <td>
+        <div class="rds-doc__color-circle rds-doc__color-circle--sf-warning"></div>
+      </td>
+      <td class="width__one-third right">
+        ```$rds-semantic-background-warning```
+      </td>
+    </tr>
+
+    <tr>
+      <td class="width__one-third left">
+        <h2 class="rds-title-01 rds-doc__color-headline">Information</h2>
+        <span class="rds-body-02"> Turquoise 05</span>
+      </td>
+      <td>
+        <div class="rds-doc__color-circle rds-doc__color-circle--sf-information"></div>
+      </td>
+      <td class="width__one-third right">
+        ```$rds-semantic-background-information```
+      </td>
+    </tr>
+  </table>
+</Unstyled>
+
+<Unstyled>
+  <table>
+    <tr>
+      <th>Extended content</th>
+    </tr>
+    <tr>
+      <td class="width__one-third left">
+        <h2 class="rds-title-01 rds-doc__color-headline">Promo</h2>
+        <span class="rds-body-02"> Red 50</span>
+      </td>
+      <td class="center">
+        <div class="rds-doc__color-text rds-doc__color-text--promo rds-title-01">Aa</div>
+      </td>
+      <td class="width__one-third right">
+        ```$rds-extended-content-promo```
+      </td>
+    </tr>
+  </table>
+
+  <table>
+    <tr>
+      <th>Extended surface</th>
+    </tr>
+    <tr>
+      <td class="width__one-third left">
+        <h2 class="rds-title-01 rds-doc__color-headline">Promo</h2>
+        <span class="rds-body-02"> Red 50</span>
+      </td>
+      <td>
+        <div class="rds-doc__color-circle rds-doc__color-circle--promo"></div>
+      </td>
+      <td class="width__one-third right">
+        ```$rds-extended-surface-promo```
+      </td>
+    </tr>
+  </table>
+</Unstyled>

package/dist/stories/docs/init.mdx

@@ -0,0 +1,129 @@
+import { Meta } from "@storybook/blocks";
+import './../styles/index.scss';
+
+import Github from "./../assets/github.svg";
+import Discord from "./../assets/discord.svg";
+import Youtube from "./../assets/youtube.svg";
+import Tutorials from "./../assets/tutorials.svg";
+import Styling from "./../assets/styling.png";
+import Context from "./../assets/context.png";
+import Assets from "./../assets/assets.png";
+import Docs from "./../assets/docs.png";
+import Share from "./../assets/share.png";
+import FigmaPlugin from "./../assets/figma-plugin.png";
+import Testing from "./../assets/testing.png";
+import Accessibility from "./../assets/accessibility.png";
+import Theming from "./../assets/theming.png";
+import AddonLibrary from "./../assets/addon-library.png";
+import Figma from "./../assets/figma.png";
+import NPM from "./../assets/npm.png";
+import Portal from "./../assets/portal.png";
+import VarNaming from "./../assets/variables.png";
+
+export const RightArrow = () => <svg 
+    viewBox="0 0 14 14" 
+    width="8px" 
+    height="14px" 
+    style={{ 
+      marginLeft: '4px',
+      display: 'inline-block',
+      shapeRendering: 'inherit',
+      verticalAlign: 'middle',
+      fill: 'currentColor',
+      'path fill': 'currentColor'
+    }}
+>
+  <path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
+</svg>
+
+<Meta title="Inicio" />
+
+<div className="sb-container">
+  <div className='sb-section-title'>
+    # Energy-foundations
+
+    Esta es la librería CSS del sistema de diseño de Repsol Energy. En ella podrás encontrar todos los recursos necesarios
+    para construir el UI de nuestras aplicaciones corporativas: clases,tokens de color, tamaños, espaciado, elevación, topografía , etc.
+
+    Está pensada para ser integrada directamente en aplicaciones SPA, web estáticas o portales de AEM. Además es el pilar básico para construir otras librerías como energy-components. 
+
+  </div>
+  <div className="mt-2 sb-section">
+
+    <div className="sb-section-item">
+      <img
+        src={Figma}
+      />
+      <h4 className="sb-section-item-heading">Diseño en figma</h4>
+      <p className="sb-section-item-paragraph">Accede a nuestro diseño de foundations en figma</p>
+      <a
+        href="https://storybook.js.org/docs/vue3/configure/styling-and-css"
+        target="_blank"
+      >acceder<RightArrow /></a>
+    </div>
+    <div className="sb-section-item">
+      <img
+        src={NPM}
+      />
+      <h4 className="sb-section-item-heading">Repositorio NPM</h4>
+      <p className="sb-section-item-paragraph">Nuestra librería se encunetra disponible en un repositorio NPM. Accede</p>
+      <a
+        href="https://storybook.js.org/docs/vue3/writing-stories/decorators#context-for-mocking"
+        target="_blank"
+      >acceder<RightArrow /></a>
+    </div>
+    <div className="sb-section-item">
+      <img src={Portal} />
+      <div>
+        <h4 className="sb-section-item-heading">Portal oficial Energy</h4>
+        <p className="sb-section-item-paragraph">En nuestro portal oficial nuestro equipo de diseño te explica cada uno de los elementos de Energy</p>
+        <a
+          href="https://storybook.js.org/docs/vue3/configure/images-and-assets"
+          target="_blank"
+        >acceder<RightArrow /></a>
+      </div>
+    </div>
+  </div>
+</div>
+<div className="mt-2 sb-container">
+  <div className='sb-section-title'>
+    # Más acerca de Energy-foundations
+
+    
+  </div>
+
+  <div class="mt-1">
+      ### BEM: utilizamos esta metodología para escribir código CSS
+
+    <iframe class="mt-1" width="100%" height="615" src="https://getbem.com/" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+    <div class="mt-1">
+        #### Ejemplos
+
+        - **margin**: ```.rds-mt-01```
+        - **Clase padre de un elemento**: ```.rds-element```
+        - **Clase de un elemento hijo de ese padre**: ```.rds-element__content```
+        - **Clase modificadora de ese hijo**: ```.rds-element__content--dark```
+      </div>
+  </div>
+
+  <div class="mt-1">
+      ### Naming variables
+
+      En Energy-foundations utilizamos una nomenclatura específica para nombrar nuestras variables. 
+      Optamos por seguir la filosofía clean code. Preferimos nombres largos y descriptivos antes que nombres cortos y crípticos.
+      A continuación te mostramos un ejemplo de cómo nombramos nuestras variables.
+
+      <img src={VarNaming}/>
+
+      <div class="mt-1">
+        #### Ejemplos
+
+        - **Color**: ```$rds-color-primary```
+        - **Typography**: ```$rds-typography-numbers-02```
+      </div>
+
+  </div>
+
+</div>
+