energy-foundations 0.0.1-beta.2

package/dist/stories/spacing/spacing-story.scss

@@ -0,0 +1,94 @@
+@import './../../global';
+@import './../styles/overwrite';
+
+.spacing-table {
+  .spacing-example {
+    align-items: center;
+    background-color: $rds-color-gradient-ivory-base;
+    display: flex;
+    justify-content: center;
+    margin: auto;
+    width: 128px;
+
+    &--xxs {
+      height: $rds-spacing-layout-xxs;
+    }
+
+    &--xs {
+      height: $rds-spacing-layout-xs;
+    }
+
+    &--s {
+      height: $rds-spacing-layout-s;
+    }
+
+    &--m {
+      height: $rds-spacing-layout-m;
+    }
+
+    &--l {
+      height: $rds-spacing-layout-l;
+    }
+
+    &--xl {
+      height: $rds-spacing-layout-xl;
+    }
+
+    &--2xl {
+      height: $rds-spacing-layout-2xl;
+    }
+
+    &--3xl {
+      height: $rds-spacing-layout-3xl;
+    }
+
+    &--4xl {
+      height: $rds-spacing-layout-4xl;
+    }
+
+    &--5xl {
+      height: $rds-spacing-layout-5xl;
+    }
+
+    &--6xl {
+      height: $rds-spacing-layout-6xl;
+    }
+
+    &--7xl {
+      height: $rds-spacing-layout-7xl;
+    }
+  }
+}
+
+.spacing-playground {
+  &.container {
+    align-content: center;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    height: auto;
+    justify-content: space-around;
+
+    .grid-container {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      width: auto;
+    }
+
+    .grid-item {
+      align-items: center;
+      background-color: $rds-color-gradient-ivory-base;
+      color: $rds-content-high;
+      display: flex;
+      height: 100px;
+      justify-content: center;
+      transition: margin 250 ease, padding 250 ease;
+      width: 100px;
+    }
+
+    .stripped-background {
+      background-image: linear-gradient(45deg, #e04343 2.38%, #ffffff 2.38%, #ffffff 50%, #e04343 50%, #e04343 52.38%, #ffffff 52.38%, #ffffff 100%);
+      background-size: 29.70px 29.70px;
+    }
+  }
+}

package/dist/stories/styles/index.scss

@@ -0,0 +1,373 @@
+@import './../../global';
+@import './overwrite';
+// some colores
+$titles: #808080;
+$color-dark-sand: #EBC1AD;
+$color-light-sand: #F5E0D6;
+$color-lightest-sand: #FBF3EF;
+
+.mt-0 {
+  margin-top: 20px !important;
+}
+
+.mt-1 {
+  margin-top: 50px !important;
+}
+
+.mt-2 {
+  margin-top: 80px !important;
+}
+
+table {
+  border-collapse: collapse;
+  margin-bottom: 60px;
+  margin-top: 40px;
+  width: 100%;
+}
+
+td {
+  border-bottom: 1px solid #ddd;
+  padding: 8px;
+
+  &.width {
+    &__one-third {
+      width: 33.33%;
+    }
+  }
+
+  &__two-third {
+    width: 66.66%;
+  }
+
+  &__half {
+    width: 50%;
+  }
+
+  &__full {
+    width: 100%;
+  }
+}
+
+td.full-col {
+  width: 100%;
+}
+
+td.right {
+  text-align: right;
+}
+
+td.left {
+  min-width: 200px;
+}
+
+td.center {
+  text-align: center;
+}
+
+th {
+  color: $titles;
+  height: 50px;
+  text-align: left;
+}
+// colors
+.rds-doc {
+  &__color-headline {
+    margin-bottom: 10px;
+  }
+
+  &__color {
+    align-items: center;
+    background-color: $rds-color-gradient-ivory-base;
+    display: flex;
+    height: 48px;
+    justify-content: center;
+    margin: auto;
+    width: 128px;
+
+    &--radius-s {
+      border-radius: $rds-radius-s;
+    }
+    
+    &--radius-m {
+      border-radius: $rds-radius-m;
+    }
+
+    &--radius-l {
+      border-radius: $rds-radius-l;
+    }
+
+    &--radius-round {
+      border-radius: $rds-radius-round;
+    }
+  }
+
+  &__color-circle {
+    align-items: center;
+    background-color: $rds-color-gradient-ivory-base;
+    border-radius: 50%;
+    display: flex;
+    height: 48px;
+    justify-content: center;
+    margin: auto;
+    width: 48px;
+
+    &--dark {
+      background-color: $rds-color-navy-80;
+    }
+
+    &--navy-80 {
+      color: $rds-content-high;
+    }
+
+    &--navy-60 {
+      color: $rds-content-medium;
+    }
+
+    &--navy-60-op-03 {
+      color: $rds-content-state-disabled;
+    }
+
+    &--basic-white {
+      color: $rds-content-high-inverse;
+    }
+
+    &--basic-white-op-03 {
+      color: $rds-content-state-disabled-inverse;
+    }
+
+    &--basic-white-op-07 {
+      color: $rds-content-medium-inverse;
+    }
+
+    &--bg-default {
+      background-color: $rds-background-default;
+      border: 1px solid $rds-border-high;
+    }
+
+    &--bg-alternative {
+      background-color: $rds-background-alternative;
+    }
+
+    &--bg-sand {
+      background-color: $rds-surface-sand;
+    }
+
+    &--ivory-gradient {
+      background-image: $rds-highlightedSurface-ivoryGradient;
+    }
+
+    &--orange-gradient {
+      background-image: $rds-highlightedSurface-orangeGradient;
+    }
+
+    &--blue-gradient {
+      background-image: $rds-highlightedSurface-blueGradient;
+    }
+
+    &--border-low {
+      background-color: $rds-background-default;
+      border: 1px solid $rds-border-low;
+    }
+
+    &--border-orange-gradient {
+      background-image: $rds-highlightedSurface-orangeGradient;
+
+      &::after {
+        background-color: $rds-background-default;
+        border-radius: 50%;
+        content: '';
+        height: 44px;
+        width: 44px;
+      }
+    }
+
+    &--border-high-inverse,
+    &--border-low-inverse {
+      background-color: $rds-color-navy-80;
+
+      &::after {
+        border-radius: 50%;
+        content: '';
+        height: 30px;
+        width: 30px;
+      }
+    }
+
+    &--border-high-inverse {
+      &::after {
+        box-shadow: inset 0px 0px 0px 1px $rds-border-high-inverse;
+      }
+    }
+
+    &--border-low-inverse {
+      &::after {
+        box-shadow: inset 0px 0px 0px 1px $rds-border-low-inverse;
+      }
+    }
+
+    &--sf-success {
+      background-color: $rds-semantic-background-success;
+    }
+
+    &--sf-error {
+      background-color: $rds-semantic-background-error;
+    }
+
+    &--sf-warning {
+      background-color: $rds-semantic-background-warning;
+    }
+
+    &--sf-information {
+      background-color: $rds-semantic-background-information;
+    }
+
+    &--promo {
+      background-color: $rds-extended-surface-promo;
+    }
+  }
+
+  &__color-text {
+    margin: auto;
+
+    &--success {
+      color: $rds-semantic-content-success;
+    }
+
+    &--error {
+      color: $rds-semantic-content-error;
+    }
+
+    &--warning {
+      color: $rds-semantic-content-warning;
+    }
+
+    &--information {
+      color: $rds-semantic-content-information;
+    }
+
+    &--promo {
+      color: $rds-extended-content-promo;
+    }
+  }
+
+  &-elevation {
+    align-items: center;
+    display: flex;
+    height: 128px;
+    justify-content: center;
+    margin: auto;
+    width: 250px;
+
+    &__overlay {
+      @include rds-style-effect-overlay;
+    }
+
+    &__glass {
+      @include rds-style-effect-glass;
+    }
+
+    &__background-image {
+      background-image: url('./assets/logo-repsol.png');
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: contain;
+    }
+
+    &__background-color {
+      background-color: $rds-background-default;
+    }
+  }
+  
+  // layout
+  &__layout {
+    &-cell {
+      &--label {
+        width: 40%;
+      }
+
+      &--graph {
+        text-align: center;
+        width: 40%;
+      }
+
+      &--right {
+        text-align: right;
+        width: 20%;
+      }
+    }
+
+    &-graph {
+      color: #43637D;
+      height: 100%;
+      padding: 0 10px;
+      text-align: center;
+      width: 100%;
+    }
+  }
+
+  &-icon {
+    &__container {
+      display: flex;
+      flex-wrap: wrap;
+      width: 100%;
+    }
+
+    &__item {
+      align-items: center;
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      justify-content: end;
+      padding: 24px 0;
+      width: 200px;
+
+      &--copied {
+        background-color: $rds-surface-sand;
+        border-radius: $rds-radius-m;
+        transition: all 0.3s ease;
+      }
+
+      // & > span:not(.caption) {
+      //   font-size: 24px;
+      // }
+
+      span.caption {
+        margin-top: 8px;
+      }
+    }
+  }
+
+  &__component-colors {
+    &__content-state {
+      &--hover {
+        background-color: $rds-color-interactive-content-hover;
+      }
+  
+      &--active {
+        background-color: $rds-color-interactive-content-active;
+      }
+    }
+  
+    &__interactive-surface {
+      &--default {
+        background-color: $rds-color-interactive-surface-default;
+        border: 1px solid $rds-color-turquoise-50;
+      }
+      
+      &--alternative {
+        background-color: $rds-color-interactive-surface-alternative;
+      }
+    }
+  
+    &__surface-states {
+      &--hover {
+        background-color: $rds-color-interactive-surface-hover;
+      }
+  
+      &--active {
+        background-color: $rds-color-interactive-surface-active;
+      }
+    }
+  }
+}
+

package/dist/stories/styles/overwrite.scss

@@ -0,0 +1,197 @@
+* {
+  font-family: $rds-typography-f-text !important;
+}
+
+p, li {
+  font: $rds-typography-w-medium pxToRem(16) / pxToRem(24) $rds-typography-f-text !important;
+}
+
+.sb-container {
+  margin-bottom: 48px;
+}
+
+.sb-section {
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+  width: 100%;
+}
+
+img {
+  object-fit: cover;
+}
+
+// code blocks
+
+.css-12u9f4 {
+  border: unset !important;
+  box-shadow: unset !important;
+}
+
+
+.css-12u9f4 pre.prismjs {
+  background-color: $rds-surface-sand !important;
+}
+ 
+.css-1fdphfk {
+  border: unset !important;
+}
+
+
+.css-qa4clq :where(pre:not(.sb-anchor, .sb-unstyled, .sb-unstyled pre)) pre, .css-qa4clq :where(pre:not(.sb-anchor, .sb-unstyled, .sb-unstyled pre)).prismjs {
+  font: $rds-typography-w-medium pxToRem(16) / pxToRem(24) $rds-typography-f-text !important;
+}
+
+.css-qa4clq :where(p:not(.sb-anchor, .sb-unstyled, .sb-unstyled p)) code {
+  font-size: 14px !important;
+  padding: 5px 10px !important;
+}
+
+.sb-section-title {
+  margin-bottom: 32px;
+}
+
+.sb-section a:not(h1 a, h2 a, h3 a) {
+  font-size: 14px;
+}
+
+.sb-section-item > img {
+  height: 120px;
+}
+
+.sb-section-item, .sb-grid-item {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+
+.sb-section-item-heading {
+  margin: 0 !important;
+  padding-bottom: 5px !important;
+  padding-top: 20px !important;
+}
+
+.sb-section-item-paragraph {
+  margin: 0;
+  min-height: 80px;
+  padding-bottom: 10px;
+}
+
+.sb-chevron {
+  margin-left: 5px;
+}
+
+.sb-features-grid {
+  display: grid;
+  grid-gap: 32px 20px;
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.sb-socials {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.sb-socials p {
+  margin-bottom: 10px;
+}
+
+.sb-explore-image {
+  align-self: flex-start;
+  max-height: 32px;
+}
+
+.sb-addon {
+  align-items: center;
+  background: #EEF3F8;
+  background-color: #EEF3F8;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  border-radius: 5px;
+  display: flex;
+  height: 180px;
+  margin-bottom: 48px;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+}
+
+.sb-addon-text {
+  max-width: 240px;
+  padding-left: 48px;
+}
+
+.sb-addon-text h4 {
+  padding-top: 0px;
+}
+
+.sb-addon-img {
+  height: 100%;
+  left: 345px;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  width: 200%;
+}
+
+.sb-addon-img img {
+  backface-visibility: hidden;
+  box-shadow: 0 0 1px rgba(255, 255, 255, 0);
+  margin-left: 40px;
+  margin-top: -72px;
+  transform: rotate(-15deg);
+  width: 650px;
+}
+
+.css-202uf2 :where(div:not(.sb-anchor, .sb-unstyled, .sb-unstyled div)) {
+  margin: unset !important;
+}
+
+@media screen and (max-width: 800px) {
+  .sb-addon-img {
+    left: 300px;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .sb-section {
+    flex-direction: column;
+  }
+
+  .sb-features-grid {
+    grid-template-columns: repeat(1, 1fr);
+  }
+
+  .sb-socials {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .sb-addon {
+    align-items: flex-start;
+    height: 280px;
+    overflow: hidden;
+    padding-top: 32px;
+  }
+
+  .sb-addon-text {
+    padding-left: 24px;
+  }
+
+  .sb-addon-img {
+    bottom: 0;
+    height: auto;
+    left: 0;
+    overflow: hidden;
+    right: 0;
+    top: 130px;
+    width: 124%;
+  }
+
+  .sb-addon-img img {
+    margin-bottom: -40px;
+    margin-left: 0;
+    margin-left: -24px;
+    margin-top: 48px;
+    transform: rotate(-12deg);
+    width: 1200px;
+  }
+}