@ilo-org/styles 1.8.5 → 1.10.0

package/scss/components/_richtext.scss

@@ -1,18 +1,17 @@
 @use "../tokens" as *;
 @use "../functions" as *;
 @import "./blockquote";
+@import "./image";
 @import "../mixins";
 
 .ilo--richtext {
   --ilo-richtext-color: var(--ilo-color-blue-dark);
-  --ilo-richtext-figcaption-color: var(--ilo-color-gray-accessible);
   --ilo-richtext-hr-color: var(--ilo-color-gray-light);
   --ilo-richtext-link-color: var(--ilo-color-purple);
   --ilo-richtext-link-visited-color: var(--ilo-color-purple);
 
   &__theme__light {
     --ilo-richtext-color: var(--ilo-color-blue-dark);
-    --ilo-richtext-figcaption-color: var(--ilo-color-gray-accessible);
     --ilo-richtext-hr-color: var(--ilo-color-gray-light);
     --ilo-richtext-link-color: var(--ilo-color-purple);
     --ilo-richtext-link-visited-color: var(--ilo-color-purple);
@@ -24,7 +23,6 @@
 
   &__theme__dark {
     --ilo-richtext-color: var(--ilo-color-white);
-    --ilo-richtext-figcaption-color: var(--ilo-color-gray-light);
     --ilo-richtext-hr-color: var(--ilo-color-gray-light);
     --ilo-richtext-link-color: var(--ilo-color-blue-medium);
     --ilo-richtext-link-visited-color: var(--ilo-color-blue-medium);
@@ -32,6 +30,8 @@
     a {
       @include linkstyles("dark");
     }
+
+    @include image-caption-dark-styles;
   }
 
   color: var(--ilo-richtext-color);
@@ -50,7 +50,6 @@
   h3,
   h4,
   h5 {
-    font-weight: var(--ilo-font-weight-bold);
     margin-top: spacing(14);
   }
 
@@ -66,36 +65,25 @@
   }
 
   h1 {
-    font-size: var(--ilo-font-size-4xlg);
-    line-height: var(--ilo-line-height-sm);
-    letter-spacing: var(--ilo-letter-spacing-xsm);
+    @include typography("heading-1", true);
   }
 
   h2 {
-    font-size: var(--ilo-font-size-xlg);
-    line-height: var(--ilo-line-height-md);
-    letter-spacing: var(--ilo-letter-spacing-xsm);
+    @include typography("heading-2", true);
   }
 
   h3 {
-    font-size: var(--ilo-font-size-lg);
-    line-height: var(--ilo-line-height-lg);
-    letter-spacing: var(--ilo-letter-spacing-sm);
+    @include typography("heading-3", true);
   }
 
   h4,
   h5,
   h6 {
-    font-size: var(--ilo-font-size-md);
-    line-height: var(--ilo-line-height-xlg);
-    letter-spacing: var(--ilo-letter-spacing-sm);
+    @include typography("heading-4", true);
   }
 
   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);
+    @include typography("body-large", true);
   }
 
   // Italic and bold styles
@@ -109,25 +97,8 @@
     font-weight: 700;
   }
 
-  // Image styles
-  img {
-    width: 100%;
-  }
-
-  // Figure styles
-  figure {
-    width: 100%;
-  }
-
-  // Figcaption styles
-  figcaption {
-    border-left: var(--ilo-border-lg) solid var(--ilo-color-borders-default);
-    color: var(--ilo-richtext-figcaption-color);
-    font-weight: var(--ilo-font-weight-regular);
-    margin-top: spacing(4);
-    padding-left: spacing(2);
-    @include font-styles("image-caption");
-  }
+  @include image-styles;
+  @include image-caption-styles;
 
   // Horizontal rule (hr) styles
   hr {
@@ -192,44 +163,25 @@
     }
 
     h1 {
-      font-size: var(--ilo-font-size-5xlg);
-      line-height: var(--ilo-line-height-xsm);
-      letter-spacing: var(--ilo-letter-spacing-xsm);
+      @include typography("heading-1");
     }
 
     h2 {
-      font-size: var(--ilo-font-size-3xlg);
+      @include typography("heading-2");
     }
 
     h3 {
-      font-size: var(--ilo-font-size-xlg);
-      line-height: var(--ilo-line-height-md);
-      letter-spacing: var(--ilo-letter-spacing-xsm);
+      @include typography("heading-3");
     }
 
     h4,
     h5,
     h6 {
-      font-size: var(--ilo-font-size-lg);
-      line-height: var(--ilo-line-height-lg);
+      @include typography("heading-4");
     }
 
     p {
-      font-size: var(--ilo-font-size-lg);
-    }
-
-    figure {
-      width: 100%;
-    }
-  }
-
-  // RTL (Right-to-left) support
-  [dir="rtl"] & {
-    figcaption {
-      border-left: none;
-      border-right: var(--ilo-border-lg) solid var(--ilo-color-borders-default);
-      padding-left: 0;
-      padding-right: spacing(2);
+      @include typography("body-large");
     }
   }
 }

package/scss/components/_scorecard.scss

@@ -29,6 +29,25 @@
         width: 100%;
       }
 
+      #{$self}--skeleton--image {
+        @include skeleton-element(232px, 100%);
+      }
+
+      #{$self}--skeleton--eyebrow {
+        @include skeleton-element(12px, 20%);
+      }
+
+      #{$self}--skeleton--title {
+        @include skeleton-element(24px, 80%);
+        margin-top: spacing(4);
+      }
+
+      #{$self}--skeleton--date {
+        @include skeleton-element(24px, 60%);
+        margin-top: spacing(4);
+        margin-bottom: spacing(8);
+      }
+
       #{$self}--image--wrapper {
         height: 0;
         overflow: hidden;
@@ -108,6 +127,10 @@
               flex-direction: row;
             }
 
+            #{$self}--skeleton--image {
+              width: 50%;
+            }
+
             #{$self}--content {
               width: 50%;
             }

package/scss/components/_socialmedia.scss

@@ -1,4 +1,3 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @import "../animations";
 @import "../mixins";
@@ -8,16 +7,16 @@
   $default-theme: "light";
 
   @mixin get-icon($icon, $theme: $default-theme) {
-    @include dataurlicon(
-      $icon,
-      map-get($color, "socialmedia", $theme, "icon", "color")
-    );
+    @if $theme == "dark" {
+      @include icon($icon, var(--ilo-color-white));
+    }
+
+    @if $theme == "light" {
+      @include icon($icon, var(--ilo-color-gray-accessible));
+    }
 
     &:hover {
-      @include dataurlicon(
-        $icon,
-        map-get($color, "socialmedia", $theme, "iconhover", "color")
-      );
+      @include icon($icon, var(--ilo-color-blue));
     }
   }
 
@@ -34,14 +33,12 @@
   }
 
   &--headline {
-    color: map-get($color, "socialmedia", $default-theme, "headline", "color");
-    font-family: var(--ilo-fonts-display);
-    font-weight: map-get($type, "weights", "label");
-    @include font-styles("body-small");
-    @include textmargin("margin-bottom", 28px, "body-small", "display", 0, 0);
+    color: var(--ilo-color-blue-dark);
+    @include typography("highlight-medium-bold");
+    margin-bottom: spacing(7);
 
     #{$c}__theme__dark & {
-      color: map-get($color, "socialmedia", "dark", "headline", "color");
+      color: var(--ilo-color-white);
     }
   }
 
@@ -67,10 +64,17 @@
       overflow: hidden;
       position: relative;
 
+      &:hover {
+        background-color: var(--ilo-color-blue-lighter);
+      }
+
+      #{$c}__theme__dark &:hover {
+        background-color: var(--ilo-color-white);
+      }
+
       &--icon {
         background-position: center;
         background-repeat: no-repeat;
-
         text-indent: -999px;
         border-radius: 2px;
         display: inline-block;
@@ -78,26 +82,6 @@
         width: px-to-rem(24px);
         transition: all 0.1s ease-in-out;
 
-        &:hover {
-          background-color: map-get(
-            $color,
-            "socialmedia",
-            $default-theme,
-            "iconhover",
-            "background"
-          );
-        }
-
-        #{$c}__theme__dark &:hover {
-          background-color: map-get(
-            $color,
-            "socialmedia",
-            "dark",
-            "iconhover",
-            "background"
-          );
-        }
-
         &__facebook {
           @include get-icon("social_facebook");
 
@@ -122,6 +106,22 @@
           }
         }
 
+        &__apple_podcasts {
+          @include get-icon("social_apple_podcasts");
+
+          #{$c}__theme__dark & {
+            @include get-icon("social_apple_podcasts", "dark");
+          }
+        }
+
+        &__spotify {
+          @include get-icon("social_spotify");
+
+          #{$c}__theme__dark & {
+            @include get-icon("social_spotify", "dark");
+          }
+        }
+
         &__youtube {
           @include get-icon("social_youtube");
 
@@ -177,6 +177,14 @@
             @include get-icon("social_wechat", "dark");
           }
         }
+
+        &__rss {
+          @include get-icon("social_rss");
+
+          #{$c}__theme__dark & {
+            @include get-icon("social_rss", "dark");
+          }
+        }
       }
     }
   }

package/scss/components/_statcard.scss

@@ -43,6 +43,11 @@
         }
       }
 
+      &#{$self}__loading {
+        background-color: var(--ilo-color-gray-base);
+        border-bottom-color: var(--ilo-skeleton-element-background-color);
+      }
+
       #{$self}--content {
         display: flex;
         flex-flow: column;
@@ -51,9 +56,28 @@
         height: 100%;
       }
 
+      #{$self}--skeleton--title {
+        @include skeleton-element(32px, 70%);
+      }
+
+      #{$self}--skeleton--intro-1 {
+        @include skeleton-element(16px, 90%);
+        margin-top: spacing(4);
+      }
+
+      #{$self}--skeleton--intro-2 {
+        @include skeleton-element(16px, 80%);
+        margin-top: spacing(2);
+      }
+
+      #{$self}--skeleton--source {
+        @include skeleton-element(10px, 50%);
+        margin-top: spacing(8);
+      }
+
       #{$self}--title {
         color: $brand-ilo-dark-blue;
-        @include font-styles("headline-3");
+        @include typography("heading-2");
         @include textmargin(
           "margin-bottom",
           24px,
@@ -68,7 +92,7 @@
       #{$self}--intro {
         color: $brand-ilo-dark-blue;
         font-family: var(--ilo-fonts-display);
-        @include font-styles("base");
+        @include typography("highlight-medium");
         @include textmargin("margin-bottom", 35px, "nav-md-sm", "copy", 0, 0);
         width: 100%;
       }
@@ -82,7 +106,7 @@
       }
 
       .ilo--link {
-        @include font-styles("image-credit");
+        @include typography("body-xsmall");
         line-height: px-to-rem(24px);
       }
     }

package/scss/components/_table.scss

@@ -45,8 +45,7 @@
       border-bottom: px-to-rem(2px) solid $color-base-neutrals-lighter;
       font-family: var(--ilo-fonts-display);
       font-weight: 700;
-      @include font-styles("body-xs");
-      letter-spacing: -0.02em;
+      @include typography("body-small");
       padding: spacing(4) spacing(2);
       pointer-events: none;
       text-align: left;
@@ -112,7 +111,7 @@
       border-bottom: px-to-rem(2px) solid $color-base-neutrals-lighter;
       font-family: var(--ilo-fonts-copy);
       font-weight: 400;
-      @include font-styles("body-xs");
+      @include typography("body-small");
       outline: 0;
       padding: spacing(4) spacing(2) spacing(5);
       position: relative;
@@ -158,7 +157,7 @@
     font-family: var(--ilo-fonts-display);
     font-weight: 700;
     margin-bottom: spacing(2);
-    @include font-styles("headline-6");
+    @include typography("highlight-large");
 
     .ilo--tooltip--wrapper {
       margin-left: spacing(1);
@@ -169,7 +168,7 @@
     color: $color-base-neutrals-medium;
     font-family: var(--ilo-fonts-copy);
     font-weight: 400;
-    @include font-styles("body-xxs");
+    @include typography("body-xsmall");
 
     a {
       @include linkstyles();

package/scss/components/_tableofcontents.scss

@@ -6,7 +6,6 @@
 .ilo--table-of-contents {
   background-color: $color-ux-tableofcontents-items-default-background;
   display: none;
-  min-width: 343px;
   padding: 0;
 
   & > * {
@@ -29,9 +28,7 @@
     border-bottom: px-to-rem(3px) solid $color-base-neutrals-lighter;
     margin-bottom: spacing(6);
     margin-top: spacing(2);
-    @include font-styles("base");
-    font-family: var(--ilo-fonts-display);
-    font-weight: 700;
+    @include typography("heading-3");
     padding-bottom: spacing(4);
   }
 
@@ -117,14 +114,9 @@
     }
   }
 
-  &--list,
-  &--list--item {
-    width: 100%;
-  }
-
   &--link {
     background-color: transparent;
-    background-position: calc(100% - 11px) center;
+    background-position: calc(100% - 16px) center;
     background-repeat: no-repeat;
     background-size: px-to-rem(24px) px-to-rem(24px);
     border-bottom: $color-ux-tableofcontents-items-default-border px-to-rem(2px)
@@ -133,14 +125,10 @@
     display: block;
     font-family: var(--ilo-fonts-display);
     font-weight: 500;
-    margin: 0 spacing(2) 0 spacing(2);
-    padding: spacing(4) spacing(2) spacing(4);
-    padding-inline-end: spacing(12);
-    position: relative;
+    padding: spacing(4) spacing(4) spacing(4);
     text-decoration: none;
-    width: calc(100% - 16px);
     @include dataurlicon("arrow_down", $color-ux-labels-actionable);
-    @include font-styles("label-medium");
+    @include typography("highlight-medium");
     @include globaltransition("background-color, border, color");
 
     &:hover,
@@ -148,13 +136,7 @@
       background-color: $color-ux-tableofcontents-items-hover-background;
       border-bottom: $color-ux-tableofcontents-items-hover-border px-to-rem(2px)
         solid;
-      background-position: calc(100% - 19px) center;
       color: $color-ux-labels-hover;
-      margin: 0;
-      outline: none;
-      padding: spacing(4) spacing(4) spacing(4);
-      padding-inline-end: spacing(12);
-      width: 100%;
       @include dataurlicon("arrow_down", $color-ux-labels-hover);
       @include globaltransition("background-color, border, color");
     }
@@ -163,41 +145,17 @@
       background-color: $color-ux-tableofcontents-items-active-background;
       border-bottom: $color-ux-tableofcontents-items-active-border
         px-to-rem(2px) solid;
-      border-top: $color-ux-tableofcontents-items-default-border px-to-rem(2px)
-        solid;
       color: $color-ux-tableofcontents-items-active-color;
-      margin: -2px 0 0 0;
-      outline: none;
-      padding: spacing(4) spacing(4) spacing(4);
-      padding-inline-end: spacing(12);
-      width: 100%;
       @include dataurlicon(
         "arrow_down",
         $color-ux-tableofcontents-items-active-icon
       );
-      z-index: 5;
-    }
-  }
-
-  &--list--item:last-of-type {
-    .ilo--table-of-contents--link {
-      border-bottom: none;
-
-      &:hover {
-        border-bottom: $color-ux-tableofcontents-items-hover-border
-          px-to-rem(2px) solid;
-      }
     }
   }
 
   [dir="rtl"] & {
     .ilo--table-of-contents--link {
-      background-position: 11px center;
-
-      &:hover,
-      &:focus {
-        background-position: 19px center;
-      }
+      background-position: 16px center;
     }
 
     &--modal {

package/scss/components/_textarea.scss

@@ -17,7 +17,7 @@
   box-sizing: border-box;
   font-family: var(--ilo-fonts-copy);
   font-weight: map-get($type, "weights", "section");
-  @include font-styles("label-medium");
+  @include typography("highlight-medium");
   height: px-to-rem(48px);
   margin: spacing(0);
   max-width: 100%;

package/scss/components/_textcard.scss

@@ -50,6 +50,25 @@
         border-bottom: px-to-rem(3px) solid var(--ilo-color-red);
       }
 
+      #{$self}--skeleton--eyebrow {
+        @include skeleton-element(12px, 20%);
+      }
+
+      #{$self}--skeleton--title {
+        @include skeleton-element(14px, 90%);
+        margin-top: spacing(4);
+      }
+
+      #{$self}--skeleton--date {
+        @include skeleton-element(14px, 100%);
+        margin-top: spacing(2);
+      }
+
+      #{$self}--skeleton--profile {
+        @include skeleton-element(14px, 80%);
+        margin-top: spacing(2);
+      }
+
       #{$self}--title {
         @include typography("heading-4");
 

package/scss/components/_textinput.scss

@@ -17,7 +17,7 @@
   box-sizing: border-box;
   font-family: var(--ilo-fonts-copy);
   font-weight: map-get($type, "weights", "section");
-  @include font-styles("label-medium");
+  @include typography("highlight-medium");
   height: px-to-rem(48px);
   margin: spacing(0);
   outline: none;

package/scss/components/_tooltip.scss

@@ -7,7 +7,7 @@
   $c: &;
   $arrow-width: calc(spacing(2) - px-to-rem(1));
 
-  @include font-styles("body-xs");
+  @include typography("body-small");
   font-family: var(--ilo-fonts-copy);
   font-weight: 400;
   background: map-get($color, "tooltip", "default", "background");

package/scss/components/_video.scss

@@ -1,5 +1,6 @@
 @use "../tokens" as *;
 @use "../functions" as *;
+@import "./image";
 @import "../mixins";
 
 .ilo--video {
@@ -17,15 +18,6 @@
     width: 100%;
   }
 
-  &--caption {
-    border-left: px-to-rem(3px) solid $color-ux-caption-border-left;
-    color: $color-font-caption;
-    font-weight: 400;
-    margin-top: spacing(4);
-    padding-left: spacing(2);
-    @include font-styles("image-caption");
-  }
-
   &--element {
     height: auto;
     object-fit: cover;
@@ -38,6 +30,8 @@
     overflow: hidden;
   }
 
+  @include image-caption-styles;
+
   // ? drupal style reset issue
   button {
     padding: 0;
@@ -240,7 +234,7 @@
             position: absolute;
             bottom: calc(300% + 12px);
             width: 70px;
-            @include font-styles("image-credit");
+            @include typography("body-xsmall");
 
             &:after {
               background-position: top left;
@@ -339,12 +333,3 @@
     }
   }
 }
-
-[dir="rtl"] {
-  .ilo--video--caption {
-    border-left: none;
-    border-right: 3px solid #b8c4cc;
-    padding-left: 0;
-    padding-right: spacing(2);
-  }
-}

package/scss/components/index.scss

@@ -16,7 +16,6 @@
 @use "cardgroup";
 @use "checkbox";
 @use "contextmenu";
-@use "credit";
 @use "datepicker";
 @use "dropdown";
 @use "empty";
@@ -25,7 +24,6 @@
 @use "form";
 @use "formcontrol";
 @use "footer";
-@use "heading";
 @use "hero";
 @use "herocard";
 @use "image";