@ilo-org/styles 1.2.3 → 1.3.0

package/scss/components/_richtext.scss

@@ -1,68 +1,72 @@
 @use "../tokens" as *;
 @use "../functions" as *;
+@import "./blockquote";
 @import "../mixins";
 
 .ilo--richtext {
-  font-family: var(--ilo-fonts-copy);
-  font-weight: 400;
-  @include font-styles("base");
-
-  a {
-    @include linkstyles();
-    background: none;
+  & > * {
+    margin-top: spacing(4);
+    margin-bottom: spacing(4);
 
-    &:hover {
-      background: none;
+    &:first-child {
+      margin-top: 0;
     }
   }
 
-  img {
-    width: 100%;
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
+    font-weight: var(--ilo-font-weight-bold);
+    margin-top: spacing(14);
   }
 
-  p {
-    margin-bottom: spacing(6);
+  blockquote,
+  video,
+  audio,
+  figure,
+  hr,
+  article,
+  pre {
+    margin-top: spacing(14);
+    margin-bottom: spacing(14);
   }
 
-  p + figure,
-  p + img,
-  p + blockquote,
-  ul + img,
-  ol + img,
-  dl + img,
-  p + hr,
-  ul + hr,
-  ol + hr,
-  dl + hr,
-  blockquote + hr {
-    @include textmargin(
-      "margin-top",
-      map-get($spacing, "padding-7"),
-      "body-small",
-      "copy",
-      0,
-      0
-    );
+  h1 {
+    font-size: var(--ilo-font-size-4xlg);
+    line-height: var(--ilo-line-height-sm);
+    letter-spacing: var(--ilo-letter-spacing-xsm);
   }
 
-  iframe {
-    margin-block: spacing(8) spacing(14);
+  h2 {
+    font-size: var(--ilo-font-size-xlg);
+    line-height: var(--ilo-line-height-md);
+    letter-spacing: var(--ilo-letter-spacing-xsm);
   }
 
-  figure {
-    width: 100%;
-    margin-bottom: spacing(14);
+  h3 {
+    font-size: var(--ilo-font-size-lg);
+    line-height: var(--ilo-line-height-lg);
+    letter-spacing: var(--ilo-letter-spacing-sm);
   }
 
-  figcaption {
-    border-left: 3px solid #b8c4cc;
-    color: $color-font-caption;
-    font-weight: 400;
-    margin-top: spacing(4);
-    padding-left: spacing(2);
-    @include font-styles("image-caption");
+  h4,
+  h5,
+  h6 {
+    font-size: var(--ilo-font-size-md);
+    line-height: var(--ilo-line-height-xlg);
+    letter-spacing: var(--ilo-letter-spacing-sm);
+  }
+
+  p {
+    font-weight: var(--ilo-font-weight-regular);
+    font-size: var(--ilo-font-size-md);
+    line-height: var(--ilo-line-height-2xlg);
+    letter-spacing: var(--ilo-letter-spacing-md);
   }
 
+  // Italic and bold styles
   em,
   i {
     font-style: italic;
@@ -73,142 +77,76 @@
     font-weight: 700;
   }
 
-  hr {
-    background-color: $color-ux-horizontal-rule-default;
-    border: none;
-    height: px-to-rem(4px);
-    margin-bottom: spacing(14);
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5 {
-    font-family: var(--ilo-fonts-display);
-    font-weight: 700;
-    margin-top: spacing(14);
-  }
+  // Link styles
+  a {
+    @include linkstyles();
+    background: none;
 
-  h1 {
-    @include textmargin(
-      "margin-bottom",
-      map-get($spacing, "padding-4"),
-      "headline-2",
-      "display",
-      "body-small",
-      "copy"
-    );
-    @include font-styles("rich-text-heading-1-md");
+    &:hover {
+      background: none;
+    }
   }
 
-  h2 {
-    @include textmargin(
-      "margin-bottom",
-      map-get($spacing, "padding-4"),
-      "headline-3",
-      "display",
-      "body-small",
-      "copy"
-    );
-    @include font-styles("rich-text-heading-2-md");
+  // Image styles
+  img {
+    width: 100%;
   }
 
-  h3 {
-    @include textmargin(
-      "margin-bottom",
-      map-get($spacing, "padding-3"),
-      "headline-4",
-      "display",
-      "body-small",
-      "copy"
-    );
-    @include font-styles("rich-text-heading-3-md");
+  // Figure styles
+  figure {
+    width: 100%;
   }
 
-  h4 {
-    @include textmargin(
-      "margin-bottom",
-      map-get($spacing, "padding-3"),
-      "headline-5",
-      "display",
-      "body-small",
-      "copy"
-    );
-    @include font-styles("rich-text-heading-4-md");
+  // Figcaption styles
+  figcaption {
+    border-left: var(--ilo-border-lg) solid var(--ilo-color-borders-default);
+    color: var(--ilo-color-gray-accessible);
+    font-weight: var(--ilo-font-weight-regular);
+    margin-top: spacing(4);
+    padding-left: spacing(2);
+    @include font-styles("image-caption");
   }
 
-  h5 {
-    @include textmargin(
-      "margin-bottom",
-      map-get($spacing, "padding-3"),
-      "headline-6",
-      "display",
-      "body-small",
-      "copy"
-    );
-    @include font-styles("rich-text-heading-5-md");
+  // Horizontal rule (hr) styles
+  hr {
+    background-color: var(--ilo-color-borders-default);
+    border: none;
+    height: px-to-rem(4px);
   }
 
-  blockquote {
-    background-color: $color-ux-background-highlight;
-    background-position: right top;
-    background-repeat: no-repeat;
-    background-size: px-to-rem(72px) px-to-rem(40px);
-    display: block;
-    font-family: var(--ilo-fonts-display);
-    margin: spacing(6) 0 spacing(10) 0;
-    padding: spacing(19) 0 spacing(9) spacing(8); // check
+  .responsive-video-embed {
     position: relative;
-    width: fit-content;
-    @include cornercut(72px, 40px);
-
-    p {
-      color: $color-font-blockquote;
-      font-weight: 300;
-      margin-bottom: spacing(6);
-      padding: 0 spacing(12) 0 0;
-      position: relative;
-      @include font-styles("pull-quote-sm");
-
-      &:after {
-        background-repeat: no-repeat;
-        bottom: 0;
-        content: "";
-        display: inline-block;
-        height: px-to-rem(20px);
-        position: absolute;
-        right: 0;
-        transform: scaleX(-1);
-        width: px-to-rem(26.5px);
-        @include dataurlicon("quote", $color-font-blockquote);
-      }
-    }
-
-    cite {
-      color: $color-font-cite;
-      font-weight: 400;
-      @include font-styles("pull-quote-cite");
-    }
+    width: 100%;
+    padding-bottom: 56.25%;
+    height: 0;
+    overflow: hidden;
+  }
 
-    &:before {
-      background-repeat: no-repeat;
-      content: "";
-      display: inline-block;
-      height: px-to-rem(40px);
-      left: 0;
-      position: absolute;
-      width: px-to-rem(53px);
-      top: 0;
-      @include dataurlicon("quote", $color-font-blockquote);
-    }
+  .responsive-video-embed iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 0; /* Optional: to remove iframe border */
   }
 
-  // Repeat list styles from the list component
+  // Blockquote styles
+  @include blockquote;
+
+  // List styles (invincible list)
   @include invincible-list;
 
+  // Responsive styles for medium breakpoint
   @include breakpoint("md") {
-    @include font-styles("base");
+    & > * {
+      margin-top: spacing(6);
+      margin-bottom: spacing(6);
+
+      &:first-child {
+        margin-top: 0;
+      }
+    }
 
     h1,
     h2,
@@ -218,179 +156,56 @@
       margin-top: spacing(16);
     }
 
+    blockquote,
+    video,
+    audio,
+    figure,
+    article,
+    hr,
+    pre {
+      margin-top: spacing(16);
+      margin-bottom: spacing(16);
+    }
+
     h1 {
-      @include textmargin(
-        "margin-bottom",
-        map-get($spacing, "padding-5"),
-        "headline-1",
-        "display",
-        "body-large",
-        "copy"
-      );
-      @include font-styles("rich-text-heading-1");
+      font-size: var(--ilo-font-size-5xlg);
+      line-height: var(--ilo-line-height-xsm);
+      letter-spacing: var(--ilo-letter-spacing-xsm);
     }
 
     h2 {
-      @include textmargin(
-        "margin-bottom",
-        map-get($spacing, "padding-5"),
-        "headline-2",
-        "display",
-        "body-large",
-        "copy"
-      );
-      @include font-styles("rich-text-heading-2");
+      font-size: var(--ilo-font-size-3xlg);
     }
 
     h3 {
-      @include textmargin(
-        "margin-bottom",
-        map-get($spacing, "padding-4"),
-        "headline-3",
-        "display",
-        "body-large",
-        "copy"
-      );
-      @include font-styles("rich-text-heading-3");
-    }
-
-    h4 {
-      @include textmargin(
-        "margin-bottom",
-        map-get($spacing, "padding-4"),
-        "headline-4",
-        "display",
-        "body-large",
-        "copy"
-      );
-      @include font-styles("rich-text-heading-4");
+      font-size: var(--ilo-font-size-xlg);
+      line-height: var(--ilo-line-height-md);
+      letter-spacing: var(--ilo-letter-spacing-xsm);
     }
 
-    h5 {
-      @include textmargin(
-        "margin-bottom",
-        map-get($spacing, "padding-4"),
-        "headline-5",
-        "display",
-        "body-large",
-        "copy"
-      );
-      @include font-styles("rich-text-heading-5");
+    h4,
+    h5,
+    h6 {
+      font-size: var(--ilo-font-size-lg);
+      line-height: var(--ilo-line-height-lg);
     }
 
     p {
-      @include textmargin(
-        "margin-bottom",
-        map-get($spacing, "padding-3"),
-        "body-large",
-        "copy",
-        "body-large",
-        "copy"
-      );
-    }
-
-    p + figure,
-    p + img,
-    p + blockquote,
-    ul + img,
-    ol + img,
-    dl + img,
-    p + hr,
-    ul + hr,
-    ol + hr,
-    dl + hr,
-    blockquote + hr {
-      @include textmargin(
-        "margin-top",
-        map-get($spacing, "padding-8"),
-        "body-large",
-        "copy",
-        0,
-        0
-      );
-    }
-
-    hr {
-      margin-bottom: spacing(19);
-    }
-
-    iframe {
-      margin-block: calc(spacing(9) + px-to-rem(2)) spacing(14);
+      font-size: var(--ilo-font-size-lg);
     }
 
     figure {
       width: 100%;
-      @include textmargin(
-        "margin-bottom",
-        map-get($spacing, "padding-8"),
-        "body-large",
-        "copy",
-        0,
-        0
-      );
-    }
-
-    blockquote {
-      background-size: px-to-rem(86px) px-to-rem(48px);
-      margin: spacing(8) 0 spacing(19) 0;
-      padding: spacing(16) 0 spacing(12) spacing(12);
-      @include cornercut(86px, 48px);
-
-      p {
-        margin-bottom: spacing(6);
-        padding: 0 spacing(12) 0 0;
-        position: relative;
-        @include font-styles("pull-quote-lg");
-
-        &:after {
-          height: px-to-rem(24px);
-          width: px-to-rem(32px);
-        }
-      }
-
-      &:before {
-        height: px-to-rem(48px);
-        width: px-to-rem(64px);
-      }
     }
   }
 
+  // RTL (Right-to-left) support
   [dir="rtl"] & {
     figcaption {
       border-left: none;
-      border-right: 3px solid #b8c4cc;
+      border-right: var(--ilo-border-lg) solid var(--ilo-color-borders-default);
       padding-left: 0;
       padding-right: spacing(2);
     }
-
-    blockquote {
-      background-position: -1px -1px;
-      padding: spacing(14) spacing(8) spacing(9) 0;
-      @include cornercut(72px, 40px, "left");
-
-      p {
-        padding: 0 0 0 spacing(12);
-
-        &:after {
-          left: 0;
-          right: auto;
-          transform: scaleX(1);
-        }
-      }
-
-      &:before {
-        left: auto;
-        right: 0;
-        transform: scaleX(-1);
-      }
-
-      @include breakpoint("md") {
-        padding: spacing(15) spacing(12) spacing(12) 0;
-
-        blockquote {
-          @include cornercut(86px, 48px, "left");
-        }
-      }
-    }
   }
 }

package/scss/components/_socialmedia.scss

@@ -6,7 +6,6 @@
 .ilo--social-media {
   $c: &;
   $default-theme: "light";
-  $icon-size: $spacing-spacing-4;
 
   @mixin get-icon($icon, $theme: $default-theme) {
     @include dataurlicon(
@@ -49,7 +48,19 @@
   &--list {
     display: inline-flex;
     flex-flow: row wrap;
-    gap: spacing(4);
+    gap: spacing(5);
+    $list: &;
+
+    &__size {
+      &__large {
+        gap: spacing(6);
+
+        & #{$list}--item--icon {
+          height: px-to-rem(36px);
+          width: px-to-rem(36px);
+        }
+      }
+    }
 
     &--item {
       display: inline-block;
@@ -59,20 +70,14 @@
       &--icon {
         background-position: center;
         background-repeat: no-repeat;
-        background-size: auto #{$icon-size};
+
         text-indent: -999px;
         border-radius: 2px;
         display: inline-block;
-        height: px-to-rem($icon-size + 8px);
-        width: px-to-rem($icon-size + 8px);
+        height: px-to-rem(24px);
+        width: px-to-rem(24px);
         transition: all 0.1s ease-in-out;
 
-        &__large {
-          background-size: auto px-to-rem(24px);
-          height: px-to-rem(36px);
-          width: px-to-rem(36px);
-        }
-
         &:hover {
           background-color: map-get(
             $color,
@@ -94,58 +99,58 @@
         }
 
         &__facebook {
-          @include get-icon("facebook");
+          @include get-icon("social_facebook");
 
           #{$c}__theme__dark & {
-            @include get-icon("facebook", "dark");
+            @include get-icon("social_facebook", "dark");
           }
         }
 
         &__x {
-          @include get-icon("x");
+          @include get-icon("social_x");
 
           #{$c}__theme__dark & {
-            @include get-icon("x", "dark");
+            @include get-icon("social_x", "dark");
           }
         }
 
         &__instagram {
-          @include get-icon("instagram");
+          @include get-icon("social_instagram");
 
           #{$c}__theme__dark & {
-            @include get-icon("instagram", "dark");
+            @include get-icon("social_instagram", "dark");
           }
         }
 
         &__youtube {
-          @include get-icon("youtube");
+          @include get-icon("social_youtube");
 
           #{$c}__theme__dark & {
-            @include get-icon("youtube", "dark");
+            @include get-icon("social_youtube", "dark");
           }
         }
 
         &__linkedin {
-          @include get-icon("linkedin");
+          @include get-icon("social_linkedin");
 
           #{$c}__theme__dark & {
-            @include get-icon("linkedin", "dark");
+            @include get-icon("social_linkedin", "dark");
           }
         }
 
         &__flickr {
-          @include get-icon("flickr");
+          @include get-icon("social_flickr");
 
           #{$c}__theme__dark & {
-            @include get-icon("flickr", "dark");
+            @include get-icon("social_flickr", "dark");
           }
         }
 
         &__tiktok {
-          @include get-icon("tiktok");
+          @include get-icon("social_tiktok");
 
           #{$c}__theme__dark & {
-            @include get-icon("tiktok", "dark");
+            @include get-icon("social_tiktok", "dark");
           }
         }
       }

package/scss/components/_table.scss

@@ -65,7 +65,7 @@
 
         &:after {
           background-color: $color-base-neutrals-lighter;
-          background-image: url("#{colortodataurlicon("arrow", $color-ux-labels-actionable)}");
+          background-image: url("#{colortodataurlicon('chevron_down', $color-ux-labels-actionable)}");
           background-position: center center;
           background-repeat: no-repeat;
           background-size: 75%;
@@ -87,7 +87,7 @@
 
           &:after {
             background-color: $color-base-blue-light;
-            background-image: url("#{colortodataurlicon("arrow", $color-base-blue-medium)}");
+            background-image: url("#{colortodataurlicon('chevron_down', $color-base-blue-medium)}");
           }
         }
 

package/scss/components/_tableofcontents.scss

@@ -139,7 +139,7 @@
     position: relative;
     text-decoration: none;
     width: calc(100% - 16px);
-    @include dataurlicon("stemarrow", $color-ux-labels-actionable);
+    @include dataurlicon("arrow_down", $color-ux-labels-actionable);
     @include font-styles("label-medium");
     @include globaltransition("background-color, border, color");
 
@@ -155,7 +155,7 @@
       padding: spacing(4) spacing(4) spacing(4);
       padding-inline-end: spacing(12);
       width: 100%;
-      @include dataurlicon("stemarrow", $color-ux-labels-hover);
+      @include dataurlicon("arrow_down", $color-ux-labels-hover);
       @include globaltransition("background-color, border, color");
     }
 
@@ -172,7 +172,7 @@
       padding-inline-end: spacing(12);
       width: 100%;
       @include dataurlicon(
-        "stemarrow",
+        "arrow_down",
         $color-ux-tableofcontents-items-active-icon
       );
       z-index: 5;