@ilo-org/styles 1.2.2 → 1.3.0

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

@@ -27,7 +27,8 @@
 
   &--head {
     background-color: $color-ux-table-content-background;
-    box-shadow: 0px 0.8px 1.6px rgba(30, 45, 190, 0.038),
+    box-shadow:
+      0px 0.8px 1.6px rgba(30, 45, 190, 0.038),
       0px 4px 8px rgba(30, 45, 190, 0.054),
       0px 10px 20px rgba(30, 45, 190, 0.08),
       0px -4px 16px rgba(30, 45, 190, 0.054);
@@ -64,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%;
@@ -86,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;

package/scss/components/_tooltip.scss

@@ -82,12 +82,18 @@
     &__icon {
       background-repeat: no-repeat;
       background-size: cover;
-      height: spacing(4);
-      min-width: spacing(4);
-      @include dataurlicon("info", $color-ux-labels-actionable);
+      height: px-to-rem(20px);
+      min-width: px-to-rem(20px);
+      @include dataurlicon(
+        "notification_info_outlined",
+        $color-ux-labels-actionable
+      );
 
       &#{&}__theme__dark {
-        @include dataurlicon("info", $color-tooltip-dark-icon);
+        @include dataurlicon(
+          "notification_info_outlined",
+          $color-tooltip-dark-icon
+        );
       }
     }
   }

package/scss/components/_video.scss

@@ -95,12 +95,15 @@
           }
 
           .vjs-play-control {
-            @include dataurlicon("play", $color-ux-video-controls-hover-icon);
+            @include dataurlicon(
+              "triangle_right",
+              $color-ux-video-controls-hover-icon
+            );
           }
         }
 
         .vjs-play-control {
-          @include videobutton("play");
+          @include videobutton("triangle_right");
         }
 
         .vjs-duration {
@@ -121,7 +124,7 @@
           height: px-to-rem(124px);
           gap: px-to-rem(4px);
           .vjs-play-control {
-            @include videobutton("play", "big");
+            @include videobutton("triangle_right", "big");
           }
         }
       }
@@ -163,11 +166,11 @@
 
     // Play Button
     .vjs-play-control {
-      @include videobutton("play");
+      @include videobutton("triangle_right");
       margin-right: px-to-rem(2px);
       &.vjs-paused,
       &.vjs-ended {
-        @include videobutton("play");
+        @include videobutton("triangle_right");
       }
 
       &.vjs-playing {
@@ -243,10 +246,7 @@
               background-position: top left;
               background-repeat: no-repeat;
               background-size: contain;
-              @include dataurlicon(
-                "equilateraltriangle",
-                $color-base-neutrals-dark
-              );
+              @include dataurlicon("caret_down", $color-base-neutrals-dark);
               content: "";
               height: px-to-rem(12px);
               position: absolute;
@@ -271,11 +271,11 @@
 
       // Mute Button
       .vjs-mute-control {
-        @include videobutton("volume");
+        @include videobutton("videosoundon");
         height: px-to-rem(40px);
 
         &[title="Unmute"] {
-          @include videobutton("muted");
+          @include videobutton("videosoundoff");
         }
       }
 

package/scss/theme/_foundation.scss

@@ -30,7 +30,6 @@
     * Colors
     */
   --ilo-color-white: rgba(255, 255, 255, 1);
-
   --ilo-color-blue: rgba(30, 45, 190, 1);
   --ilo-color-blue-lighter: rgba(235, 245, 253, 1);
   --ilo-color-blue-light: rgba(190, 220, 250, 1);
@@ -38,27 +37,21 @@
   --ilo-color-blue-medium: rgba(210, 213, 242, 1);
   --ilo-color-blue-ramp: rgba(30, 45, 190, 0.4);
   --ilo-color-blue-dark-ramp: rgba(35, 0, 80, 0.5);
-
   --ilo-color-gray-charcoal: rgba(45, 45, 45, 1);
   --ilo-color-gray-accessible: rgba(109, 109, 109, 1);
   --ilo-color-gray-light: rgba(237, 240, 242, 1);
   --ilo-color-gray-base: rgba(184, 196, 204, 1);
-
   --ilo-color-red: rgba(250, 60, 75, 1);
   --ilo-color-red-light: rgba(254, 216, 219, 1);
   --ilo-color-red-dark: rgba(200, 48, 60, 1);
   --ilo-color-red-ramp: rgba(250, 60, 75, 0.2);
-
   --ilo-color-yellow: rgba(255, 205, 45, 1);
   --ilo-color-yellow-light: rgba(255, 245, 200, 1);
   --ilo-color-yellow-ramp: rgba(255, 205, 45, 0.2);
-
   --ilo-color-green: rgba(140, 225, 100, 1);
   --ilo-color-green-light: rgba(232, 249, 224, 1);
   --ilo-color-green-ramp: rgba(140, 225, 100, 0.2);
-
   --ilo-color-turquoise: rgba(5, 210, 210, 1);
-
   --ilo-color-purple: rgba(150, 10, 85, 1);
 
   --ilo-color-notification-type-error: var(--ilo-color-red);
@@ -87,6 +80,46 @@
   --ilo-breakpoint-xxl: #{map-get($breakpoints-foundation, "xxl")};
   --ilo-border-radius: calc(#{px-to-rem(2)} * var(--ilo-scale));
 
+  /**
+    * Font-size
+    */
+
+  --ilo-font-size-2xsm: calc(#{px-to-rem(10)} * var(--ilo-scale));
+  --ilo-font-size-xsm: calc(#{px-to-rem(12)} * var(--ilo-scale));
+  --ilo-font-size-sm: calc(#{px-to-rem(14)} * var(--ilo-scale));
+  --ilo-font-size-md: calc(#{px-to-rem(16)} * var(--ilo-scale));
+  --ilo-font-size-lg: calc(#{px-to-rem(18)} * var(--ilo-scale));
+  --ilo-font-size-xlg: calc(#{px-to-rem(24)} * var(--ilo-scale));
+  --ilo-font-size-2xlg: calc(#{px-to-rem(28)} * var(--ilo-scale));
+  --ilo-font-size-3xlg: calc(#{px-to-rem(32)} * var(--ilo-scale));
+  --ilo-font-size-4xlg: calc(#{px-to-rem(36)} * var(--ilo-scale));
+  --ilo-font-size-5xlg: calc(#{px-to-rem(44)} * var(--ilo-scale));
+
+  /**
+    * Font-weight
+    */
+  --ilo-font-weight-regular: 400;
+  --ilo-font-weight-bold: 700;
+
+  /**
+    * Line Height
+    */
+  --ilo-line-height-xsm: 115%;
+  --ilo-line-height-sm: 120%;
+  --ilo-line-height-md: 125%;
+  --ilo-line-height-lg: 130%;
+  --ilo-line-height-xlg: 135%;
+  --ilo-line-height-2xlg: 145%;
+  --ilo-line-height-3xlg: 150%;
+
+  /**
+    * Letter spacing
+    */
+  --ilo-letter-spacing-xsm: -3.5%;
+  --ilo-letter-spacing-sm: -2%;
+  --ilo-letter-spacing-md: 0;
+  --ilo-letter-spacing-lg: 2%;
+
   /**
     * Spacing
     */