@ilo-org/styles 1.2.3 → 1.3.0

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
     */