@ilo-org/styles 1.8.4 → 1.9.0

package/scss/components/_navigation.scss

@@ -132,7 +132,7 @@
 
         &--link {
           @include dataurlicon("chevron_left", $brand-ilo-white);
-          @include font-styles("language-switcher");
+          @include typography("body-small");
           appearance: none;
           background-color: inherit;
           background-position: px-to-rem(12px) 50%;
@@ -141,8 +141,6 @@
           border: none;
           color: $brand-ilo-white;
           cursor: pointer;
-          font-family: var(--ilo-fonts-display);
-          font-weight: 500;
           padding: spacing(4) spacing(4) spacing(4) spacing(9);
           text-decoration: none;
           transition: all 150ms ease-out;
@@ -252,7 +250,7 @@
   }
 
   &--logo-tagline {
-    @include font-styles("headline-6");
+    @include typography("highlight-large");
     color: $brand-ilo-white;
     display: none;
     font-family: var(--ilo-fonts-display);
@@ -265,10 +263,9 @@
     }
 
     &--small {
-      @include font-styles("tagline");
+      @include typography("body-xsmall");
       color: $brand-ilo-ramp-blue;
       display: block;
-      font-weight: 500;
     }
   }
 }
@@ -300,9 +297,7 @@
   }
 
   &--items {
-    @include font-styles("nav-md");
-    font-family: var(--ilo-fonts-display);
-    font-weight: 500;
+    @include typography("highlight-medium");
 
     @include breakpoint("lg") {
       display: flex;
@@ -347,7 +342,7 @@
 
   &--trigger {
     @include dataurlicon("chevron_right", $brand-ilo-dark-blue);
-    @include font-styles("nav-md");
+    @include typography("highlight-medium");
 
     appearance: none;
     background-color: $brand-ilo-white;
@@ -359,8 +354,6 @@
     color: $brand-ilo-dark-blue;
     cursor: pointer;
     display: block;
-    font-family: var(--ilo-fonts-display);
-    font-weight: 500;
     padding: spacing(4) spacing(9) spacing(4) spacing(2);
     line-height: 24px;
     text-align: left;
@@ -392,7 +385,7 @@
 
     @include breakpoint("lg") {
       @include dataurlicon("plus", $brand-ilo-white);
-      @include font-styles("nav-bold-b-sm");
+      @include typography("highlight-medium-bold");
 
       background-color: $brand-ilo-dark-blue;
       background-position: 90% 55%;
@@ -403,7 +396,6 @@
       color: $brand-ilo-white;
       cursor: pointer;
       display: inline-block;
-      font-weight: 700;
       margin-left: spacing(5);
       padding: 7px spacing(8) 5px 15px;
       text-align: center;
@@ -477,10 +469,8 @@
     }
 
     &--item {
-      @include font-styles("nav-md");
+      @include typography("highlight-medium");
       color: $brand-ilo-white;
-      font-family: var(--ilo-fonts-display);
-      font-weight: 500;
     }
 
     &--link {
@@ -534,7 +524,7 @@
 
   &--language--switcher--button {
     @include dataurlicon("globe", $brand-ilo-dark-blue);
-    @include font-styles("nav-md");
+    @include typography("highlight-medium");
 
     appearance: none;
     background-color: $brand-ilo-white;
@@ -547,7 +537,6 @@
     cursor: pointer;
     display: block;
     font-family: var(--ilo-fonts-display);
-    font-weight: 500;
     padding: spacing(4) spacing(9) spacing(4) spacing(2);
     line-height: 16px;
     text-align: left;
@@ -626,7 +615,7 @@
   }
 
   &--button {
-    @include font-styles("image-credit");
+    @include typography("body-xsmall");
     @include dataurlicon("globe", $brand-ilo-white);
     appearance: none;
     background-color: $brand-ilo-dark-blue;
@@ -740,12 +729,10 @@
   }
 
   &--link {
-    @include font-styles("nav-md");
+    @include typography("highlight-medium");
     background: $brand-ilo-white;
     color: $brand-ilo-dark-blue;
     display: flex;
-    font-family: var(--ilo-fonts-display);
-    font-weight: 500;
     padding: 18px spacing(2);
     text-decoration: none;
     transition: all 150ms ease-out;
@@ -772,13 +759,11 @@
   }
 
   &--back {
-    @include font-styles("nav-md");
+    @include typography("highlight-medium");
     background-color: $brand-ilo-white;
     border: none;
     color: $brand-ilo-dark-blue;
     cursor: pointer;
-    font-family: var(--ilo-fonts-display);
-    font-weight: 500;
     padding: spacing(5) spacing(4) spacing(4) spacing(8);
     position: relative;
     transition: all 150ms ease-out;
@@ -839,7 +824,7 @@
   }
 
   &--label {
-    @include font-styles("headline-6");
+    @include typography("highlight-large");
     border-bottom: 3px solid $brand-ilo-grey-light;
     color: $brand-ilo-black;
     font-family: var(--ilo-fonts-display);

package/scss/components/_notification.scss

@@ -100,7 +100,7 @@
 
   &--headline {
     font-weight: 700;
-    @include font-styles("body-small");
+    @include typography("highlight-medium-bold");
 
     margin-bottom: spacing(3);
 
@@ -113,7 +113,7 @@
 
   &--copy {
     font-weight: 400;
-    @include font-styles("body-xs");
+    @include typography("body-small");
 
     @include breakpoint("md") {
       .ilo--notification--inline & {
@@ -134,7 +134,7 @@
     color: $color-base-neutrals-medium;
     display: block;
     font-weight: 400;
-    @include font-styles("body-xs");
+    @include typography("body-small");
 
     @include breakpoint("md") {
       .ilo--notification--inline & {

package/scss/components/_pagination.scss

@@ -33,7 +33,7 @@
     position: relative;
     text-indent: -999%;
     width: px-to-rem(40px);
-    @include font-styles("label-medium");
+    @include typography("highlight-medium");
 
     &::before {
       background-repeat: no-repeat;

package/scss/components/_readmore.scss

@@ -16,7 +16,7 @@
     position: relative;
     text-align: left;
     width: auto;
-    @include font-styles("label-medium");
+    @include typography("highlight-medium");
 
     &:after {
       background-repeat: no-repeat;

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

@@ -77,6 +77,8 @@
 
         &--cta {
           display: flex;
+          flex: 1 1 auto;
+          align-items: flex-end;
           flex-flow: row wrap;
           gap: spacing(2);
         }

package/scss/components/_socialmedia.scss

@@ -37,7 +37,7 @@
     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 typography("highlight-medium-bold");
     @include textmargin("margin-bottom", 28px, "body-small", "display", 0, 0);
 
     #{$c}__theme__dark & {

package/scss/components/_statcard.scss

@@ -53,7 +53,7 @@
 
       #{$self}--title {
         color: $brand-ilo-dark-blue;
-        @include font-styles("headline-3");
+        @include typography("heading-2");
         @include textmargin(
           "margin-bottom",
           24px,
@@ -68,7 +68,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 +82,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/_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";

package/scss/theme/_typography.scss

@@ -1,16 +1,14 @@
 :root {
   // Display Font Families
   --ilo-fonts-display: Overpass, Noto Sans, sans-serif;
-
-  // Chinese and Japanese system fonts
+  --ilo-fonts-display-ar: Vazirmatn, sans-serif;
   --ilo-fonts-display-zh: PingFang SC, Microsoft YaHei, 微软雅黑, sans-serif;
   --ilo-fonts-display-jp: Noto Sans CJK JP, Yu Gothic, Hiragino Sans,
     TakaoPGothic, sans-serif;
 
   // Copy font families
   --ilo-fonts-copy: Noto Sans, sans-serif;
-
-  // Chinese and Japanese system fonts
+  --ilo-fonts-copy-ar: Vazirmatn, sans-serif;
   --ilo-fonts-copy-zh: PingFang SC, Microsoft YaHei, 微软雅黑, sans-serif;
   --ilo-fonts-copy-jp: Noto Sans CJK JP, Yu Gothic, Hiragino Sans, TakaoPGothic,
     sans-serif;

package/css/components/credit.css

@@ -1 +0,0 @@
-@keyframes emptygradient{0%{opacity:1}to{opacity:0}}@keyframes spin{to{-moz-transform:rotate(1turn);-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.ilo--credit{color:#fff;display:inline-block;font-size:11.94px;height:1.2861736334rem;letter-spacing:-.02em;line-height:16.24px;padding:0;position:relative}.ilo--credit--label{background-color:#2d2d2d;padding:4px 8px 4px 12px}.ilo--credit:after{background-position:100% 0;background-repeat:no-repeat;background-size:contain;content:"";height:1.2861736334rem;left:100%;position:absolute;top:-.2143622722rem;width:1.2861736334rem}@media screen and (max-width:1023px){.ilo--credit{width:75%}.ilo--credit--label{bottom:calc(100% + 1px);display:none;left:0;margin-bottom:.6430868167rem;position:absolute}.ilo--credit--label:after{background-position:0 0;background-size:contain;bottom:-.6430868167rem;height:.6430868167rem;left:.32154rem;width:.6430868167rem}.ilo--credit--label:after,.ilo--credit:before{background-repeat:no-repeat;content:"";position:absolute}.ilo--credit:before{background-color:#2d2d2d;background-position:calc(100% - 4px);background-size:.6430868167rem .6430868167rem;height:1.2861736334rem;left:0;top:0;width:1.5541264737rem}.ilo--credit:after{left:1.5541264737rem;top:0}.ilo--credit:hover .ilo--credit--label{display:inline-block}}[dir=rtl] .ilo--credit:after{background-position:0 0;left:auto;right:100%;transform:scaleX(-1)}@media screen and (max-width:1023px){[dir=rtl] .ilo--credit--label{left:auto;right:0}[dir=rtl] .ilo--credit--label:after{background-position:100% 0;left:auto;right:.32154rem}[dir=rtl] .ilo--credit:before{background-position:4px;left:auto;right:0}[dir=rtl] .ilo--credit:after{left:auto;right:1.5541264737rem}}