@ilo-org/styles 1.10.2 → 1.11.1

package/scss/components/_video.scss

@@ -1,8 +1,34 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @import "./image";
 @import "../mixins";
 
+// ======================================
+// Video Button
+// ======================================
+@mixin videobutton($name, $size: "standard") {
+  $height: if($size == "big", 72px, 32px);
+  $box: if($size == "big", 80px, 40px);
+  $width: $height;
+  $icon-color-default: rgba(237, 240, 242, 1);
+  $icon-color-hover: rgba(30, 45, 190, 1);
+
+  cursor: pointer;
+  border: none;
+  background-color: var(--ilo-color-gray-charcoal);
+  width: $box;
+  height: $box;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: $width $height;
+  @include dataurlicon($name, $icon-color-default);
+
+  &:hover,
+  &:focus {
+    background-color: var(--ilo-color-blue-light);
+    @include dataurlicon($name, $icon-color-hover);
+  }
+}
+
 .ilo--video {
   width: 100%;
 
@@ -60,8 +86,9 @@
     padding-bottom: 56.25%;
   }
 
-  // Initial state
-  &--element:not(.vjs-has-started) {
+  // Initial and ended state
+  &--element:not(.vjs-has-started),
+  &--element.vjs-ended {
     .vjs-poster {
       background-size: cover;
       object-fit: cover;
@@ -84,20 +111,21 @@
         &:focus {
           .vjs-duration,
           .vjs-play-control {
-            background-color: $color-ux-video-controls-hover-background;
-            color: $color-ux-video-controls-hover-icon;
+            background-color: var(--ilo-color-blue-light);
+            color: var(--ilo-color-blue);
           }
 
           .vjs-play-control {
-            @include dataurlicon(
-              "triangle_right",
-              $color-ux-video-controls-hover-icon
-            );
+            @include dataurlicon("triangle_right", rgba(30, 45, 190, 1));
           }
         }
 
         .vjs-play-control {
           @include videobutton("triangle_right");
+
+          &.vjs-paused {
+            @include videobutton("triangle_right");
+          }
         }
 
         .vjs-duration {
@@ -108,8 +136,8 @@
           font-size: px-to-rem(14px);
           height: px-to-rem(40px);
           width: px-to-rem(80px);
-          background-color: $color-ux-video-controls-default-background;
-          color: $color-ux-video-controls-default-icon;
+          background-color: var(--ilo-color-gray-charcoal);
+          color: var(--ilo-color-gray-light);
         }
 
         @include breakpoint("lg") {
@@ -119,6 +147,10 @@
           gap: px-to-rem(4px);
           .vjs-play-control {
             @include videobutton("triangle_right", "big");
+
+            &.vjs-paused {
+              @include videobutton("triangle_right", "big");
+            }
           }
         }
       }
@@ -182,7 +214,7 @@
     .vjs-progress-control {
       order: 2;
       margin-right: px-to-rem(2px);
-      background-color: $color-ux-video-controls-default-background;
+      background-color: var(--ilo-color-gray-charcoal);
       flex-grow: 1;
 
       .vjs-mouse-display {
@@ -204,7 +236,7 @@
       }
 
       .vjs-play-progress {
-        background-color: $color-ux-video-controls-hover-background;
+        background-color: var(--ilo-color-blue-light);
         z-index: 15;
 
         .vjs-time-tooltip {
@@ -213,7 +245,7 @@
       }
 
       .vjs-load-progress {
-        background-color: $color-base-neutrals-light;
+        background-color: var(--ilo-color-gray-base);
         z-index: 15;
       }
 
@@ -223,11 +255,11 @@
           position: relative;
 
           .vjs-time-tooltip {
-            color: $brand-ilo-grey-light;
+            color: var(--ilo-color-gray-light);
             font-size: px-to-rem(14px);
             height: px-to-rem(32px);
             align-items: center;
-            background-color: $color-ux-credit-background;
+            background-color: var(--ilo-color-gray-charcoal);
             display: flex;
             justify-content: center;
             right: 0;
@@ -240,7 +272,7 @@
               background-position: top left;
               background-repeat: no-repeat;
               background-size: contain;
-              @include dataurlicon("caret_down", $color-base-neutrals-dark);
+              @include dataurlicon("caret_down", rgba(45, 45, 45, 1));
               content: "";
               height: px-to-rem(12px);
               position: absolute;
@@ -282,8 +314,8 @@
 
       // Volume rocker
       .vjs-volume-control {
-        background: $color-ux-video-controls-hover-background;
-        border-left: px-to-rem(3px) solid rgb(184, 196, 204);
+        background: var(--ilo-color-blue-light);
+        border-left: px-to-rem(3px) solid var(--ilo-color-gray-base);
         display: none;
         height: px-to-rem(40px);
         position: absolute;
@@ -307,7 +339,7 @@
           height: px-to-rem(4px);
           position: absolute;
           width: 100%;
-          background-color: $color-base-neutrals-light;
+          background-color: var(--ilo-color-gray-base);
         }
 
         .vjs-volume-level {
@@ -315,11 +347,11 @@
           left: 0;
           top: 0;
           position: absolute;
-          background-color: $color-ux-video-controls-hover-icon;
+          background-color: var(--ilo-color-blue);
 
           &:before {
             content: "";
-            background: $color-ux-video-controls-hover-icon;
+            background: var(--ilo-color-blue);
             border-radius: 50%;
             height: px-to-rem(16px);
             width: px-to-rem(16px);

package/scss/components/navigation/_nav-compact.scss

@@ -1,4 +1,4 @@
-@use "../../tokens" as *;
+@use "../../icons" as *;
 @use "../../functions" as *;
 @import "../../mixins";
 @import "../../config";

package/scss/components/navigation/_nav-complex.scss

@@ -1,4 +1,4 @@
-@use "../../tokens" as *;
+@use "../../icons" as *;
 @use "../../functions" as *;
 @use "./internal/nav-shared" as *;
 @import "../../mixins";

package/scss/components/navigation/_nav-main.scss

@@ -1,4 +1,4 @@
-@use "../../tokens" as *;
+@use "../../icons" as *;
 @use "../../functions" as *;
 @use "./internal/nav-shared" as *;
 @import "../../mixins";

package/scss/components/navigation/internal/_nav-dropdown.scss

@@ -1,4 +1,4 @@
-@use "../../../tokens" as *;
+@use "../../../icons" as *;
 @use "../../../functions" as *;
 @import "../../../mixins";
 @import "../../../config";

package/scss/components/navigation/internal/_nav-grid.scss

@@ -1,4 +1,4 @@
-@use "../../../tokens" as *;
+@use "../../../icons" as *;
 @use "../../../functions" as *;
 @import "../../../mixins";
 @import "../../../config";

package/scss/components/navigation/internal/_nav-menu.scss

@@ -1,4 +1,4 @@
-@use "../../../tokens" as *;
+@use "../../../icons" as *;
 @use "../../../functions" as *;
 @import "../../../mixins";
 @import "../../../config";

package/scss/components/navigation/internal/_nav-shared.scss

@@ -1,4 +1,4 @@
-@use "../../../tokens" as *;
+@use "../../../icons" as *;
 @use "../../../functions" as *;
 @import "../../../mixins";
 @import "../../../config";

package/scss/components/navigation/internal/mobile/_nav-mobile-drawer.scss

@@ -1,4 +1,4 @@
-@use "../../../../tokens" as *;
+@use "../../../../icons" as *;
 @use "../../../../functions" as *;
 @import "../../../../mixins";
 @import "../../../../config";

package/scss/components/navigation/internal/mobile/_nav-mobile-menu.scss

@@ -1,4 +1,4 @@
-@use "../../../../tokens" as *;
+@use "../../../../icons" as *;
 @use "../../../../functions" as *;
 @import "../../../../mixins";
 @import "../../../../config";

package/scss/components/navigation/internal/mobile/_nav-mobile.scss

@@ -1,4 +1,4 @@
-@use "../../../../tokens" as *;
+@use "../../../../icons" as *;
 @use "../../../../functions" as *;
 @import "../../../../mixins";
 @import "../../../../config";

package/scss/components/photogallery/_expandable-caption.scss

@@ -1,4 +1,4 @@
-@use "../../tokens" as *;
+@use "../../icons" as *;
 @use "../../functions" as *;
 @import "../../mixins";
 @import "../../config";

package/scss/components/photogallery/_lightbox.scss

@@ -1,4 +1,4 @@
-@use "../../tokens" as *;
+@use "../../icons" as *;
 @use "../../functions" as *;
 @import "../../mixins";
 @import "../../config";

package/scss/components/photogallery/_lightboxgallery.scss

@@ -1,4 +1,4 @@
-@use "../../tokens" as *;
+@use "../../icons" as *;
 @use "../../functions" as *;
 @import "../../mixins";
 @import "../../config";

package/scss/components/photogallery/_photogallery-controls.scss

@@ -1,4 +1,4 @@
-@use "../../tokens" as *;
+@use "../../icons" as *;
 @use "../../functions" as *;
 @import "../../mixins";
 @import "../../config";

package/scss/components/photogallery/_photogallery-thumbnails.scss

@@ -1,4 +1,4 @@
-@use "../../tokens" as *;
+@use "../../icons" as *;
 @use "../../functions" as *;
 @import "../../mixins";
 @import "../../config";

package/scss/components/photogallery/_photogallery.scss

@@ -1,4 +1,4 @@
-@use "../../tokens" as *;
+@use "../../icons" as *;
 @use "../../functions" as *;
 @import "../../mixins";
 @import "../../config";

package/scss/theme/_foundation.scss

@@ -5,6 +5,12 @@
 :root {
   --ilo-scale: 1; // default scale for the design system
 
+  /**
+    * Layout
+  */
+  --ilo-layout-max-width: #{px-to-rem(1300px)};
+  --ilo-layout-padding: #{px-to-rem(20px)};
+
   /**
     * Colors
     */

package/scss/theme/_typography.scss

@@ -1,3 +1,5 @@
+@use "../config" as *;
+
 :root {
   // Display Font Families
   --ilo-fonts-display: Overpass, Noto Sans, sans-serif;
@@ -17,6 +19,7 @@
   --ilo-line-height: 1.46;
 
   // Font Sizes
+  --ilo-font-size-base: #{$base-font-size};
   --ilo-font-size-2xsm: px-to-rem(10px);
   --ilo-font-size-xsm: px-to-rem(12px);
   --ilo-font-size-sm: px-to-rem(14px);
@@ -35,6 +38,7 @@
   --ilo-font-weight-bold: 700;
 
   // Line Height
+  --ilo-line-height-base: 27.24px;
   --ilo-line-height-xsm: 1.15;
   --ilo-line-height-sm: 1.2;
   --ilo-line-height-md: 1.25;