@ilo-org/styles 1.15.1 → 1.17.0

package/scss/components/_video.scss

@@ -15,23 +15,35 @@
   }
 
   $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);
+  background-color: var(--ilo-color-light-container-bg-inverse);
   width: $box;
   height: $box;
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-size: $width $height;
-  @include dataurlicon($name, $icon-color-default);
+  position: relative;
+
+  &::after {
+    @include icon(
+      $name,
+      var(--ilo-color-light-icon-disabled),
+      $width $height,
+      center center
+    );
+    content: "";
+    display: block;
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
 
   &:hover,
   &:focus {
-    background-color: var(--ilo-color-blue-light);
-    @include dataurlicon($name, $icon-color-hover);
+    background-color: var(--ilo-color-light-feedback-info-light);
+
+    &::after {
+      background-color: var(--ilo-color-light-action-hover);
+    }
   }
 }
 
@@ -121,12 +133,12 @@
         &:focus {
           .vjs-duration,
           .vjs-play-control {
-            background-color: var(--ilo-color-blue-light);
-            color: var(--ilo-color-blue);
+            background-color: var(--ilo-color-light-feedback-info-light);
+            color: var(--ilo-color-light-action-hover);
           }
 
-          .vjs-play-control {
-            @include dataurlicon("triangle_right", rgba(30, 45, 190, 1));
+          .vjs-play-control::after {
+            background-color: var(--ilo-color-light-action-hover);
           }
         }
 
@@ -146,8 +158,8 @@
           font-size: px-to-rem(14px);
           height: px-to-rem(40px);
           width: px-to-rem(80px);
-          background-color: var(--ilo-color-gray-charcoal);
-          color: var(--ilo-color-gray-light);
+          background-color: var(--ilo-color-light-container-bg-inverse);
+          color: var(--ilo-color-dark-text-subtle);
         }
 
         @include breakpoint("lg") {
@@ -238,12 +250,15 @@
       &.vjs-hover > .vjs-menu-button,
       &:hover > .vjs-menu-button,
       &:focus-within > .vjs-menu-button {
-        background-color: var(--ilo-color-blue-light);
-        @include dataurlicon("closed_captions", rgba(30, 45, 190, 1));
+        background-color: var(--ilo-color-light-feedback-info-light);
+
+        &::after {
+          background-color: var(--ilo-color-light-action-hover);
+        }
       }
 
       .vjs-menu {
-        background: var(--ilo-color-brand-100);
+        background: var(--ilo-color-light-container-bg-subtle);
         border: 0;
         bottom: calc(100% + #{px-to-rem(8px)});
         display: none;
@@ -268,7 +283,7 @@
         &:before {
           @include typography("highlight-medium-bold");
           content: var(--ilo-video-choose-subtitle-text, "Choose subtitles");
-          color: var(--ilo-color-gray-charcoal);
+          color: var(--ilo-color-light-text-default);
           display: block;
           margin-bottom: spacing(2);
           padding-left: px-to-rem(12px);
@@ -295,7 +310,7 @@
       .vjs-menu-item {
         @include typography("body-small");
         align-items: center;
-        color: var(--ilo-color-gray-charcoal);
+        color: var(--ilo-color-light-text-default);
         display: flex;
         gap: px-to-rem(8px);
         line-height: px-to-rem(20px);
@@ -305,7 +320,6 @@
         white-space: nowrap;
 
         &:hover {
-          background: var(--ilo-color-neutrals-200);
           cursor: pointer;
         }
 
@@ -314,7 +328,7 @@
         // :after is the inner 14px dot overlaid on top.
         &:before {
           content: "";
-          background-color: var(--ilo-color-gray-base);
+          background-color: var(--ilo-color-light-container-bg-inactive);
           border-radius: 50%;
           height: px-to-rem(20px);
           width: px-to-rem(20px);
@@ -324,8 +338,8 @@
 
         &:after {
           content: "";
-          background-color: var(--ilo-color-gray-base);
-          border: px-to-rem(4px) solid var(--ilo-color-gray-base);
+          background-color: var(--ilo-color-light-container-bg-inactive);
+          border: px-to-rem(4px) solid var(--ilo-color-light-border-default);
           border-radius: 50%;
           height: px-to-rem(14px);
           width: px-to-rem(14px);
@@ -339,20 +353,20 @@
         }
 
         &.vjs-selected {
-          color: var(--ilo-color-gray-charcoal);
+          color: var(--ilo-color-light-text-default);
 
           &:before {
-            background-color: var(--ilo-color-blue-dark);
+            background-color: var(--ilo-color-light-container-bg-brand);
           }
 
           &:after {
-            background-color: var(--ilo-color-blue-lighter);
-            border-color: var(--ilo-color-blue-dark);
+            background-color: var(--ilo-color-light-container-bg-subtle);
+            border-color: var(--ilo-color-light-border-brand-3);
           }
         }
 
         &:focus:before {
-          background-color: var(--ilo-color-yellow);
+          background-color: var(--ilo-color-light-feedback-warning-default);
         }
       }
 
@@ -376,7 +390,7 @@
     .vjs-progress-control {
       order: 2;
       margin-right: px-to-rem(2px);
-      background-color: var(--ilo-color-gray-charcoal);
+      background-color: var(--ilo-color-light-container-bg-inverse);
       flex-grow: 1;
 
       .vjs-mouse-display {
@@ -398,7 +412,7 @@
       }
 
       .vjs-play-progress {
-        background-color: var(--ilo-color-blue-light);
+        background-color: var(--ilo-color-light-feedback-info-light);
         z-index: 15;
 
         .vjs-time-tooltip {
@@ -407,7 +421,7 @@
       }
 
       .vjs-load-progress {
-        background-color: var(--ilo-color-gray-base);
+        background-color: var(--ilo-color-light-container-bg-inactive);
         z-index: 15;
       }
 
@@ -417,11 +431,11 @@
           position: relative;
 
           .vjs-time-tooltip {
-            color: var(--ilo-color-gray-light);
+            color: var(--ilo-color-dark-text-subtle);
             font-size: px-to-rem(14px);
             height: px-to-rem(32px);
             align-items: center;
-            background-color: var(--ilo-color-gray-charcoal);
+            background-color: var(--ilo-color-light-container-bg-inverse);
             display: flex;
             justify-content: center;
             right: 0;
@@ -431,10 +445,12 @@
             @include typography("body-xsmall");
 
             &:after {
-              background-position: top left;
-              background-repeat: no-repeat;
-              background-size: contain;
-              @include dataurlicon("caret_down", rgba(45, 45, 45, 1));
+              @include icon(
+                "caret_down",
+                var(--ilo-color-light-icon-default),
+                contain,
+                top left
+              );
               content: "";
               height: px-to-rem(12px);
               position: absolute;
@@ -476,8 +492,8 @@
 
       // Volume rocker
       .vjs-volume-control {
-        background: var(--ilo-color-blue-light);
-        border-left: px-to-rem(3px) solid var(--ilo-color-gray-base);
+        background: var(--ilo-color-light-feedback-info-light);
+        border-left: px-to-rem(3px) solid var(--ilo-color-light-border-default);
         display: none;
         height: px-to-rem(40px);
         position: absolute;
@@ -501,7 +517,7 @@
           height: px-to-rem(4px);
           position: absolute;
           width: 100%;
-          background-color: var(--ilo-color-gray-base);
+          background-color: var(--ilo-color-light-container-bg-inactive);
         }
 
         .vjs-volume-level {
@@ -509,11 +525,11 @@
           left: 0;
           top: 0;
           position: absolute;
-          background-color: var(--ilo-color-blue);
+          background-color: var(--ilo-color-light-action-selected);
 
           &:before {
             content: "";
-            background: var(--ilo-color-blue);
+            background: var(--ilo-color-light-action-selected);
             border-radius: 50%;
             height: px-to-rem(16px);
             width: px-to-rem(16px);

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

@@ -6,7 +6,7 @@
 .ilo--subsite-nav-compact {
   position: relative;
   height: px-to-rem(70px);
-  background-color: var(--ilo-color-blue);
+  background-color: var(--ilo-color-light-action-selected);
   overflow: hidden;
 
   &__container {
@@ -56,7 +56,7 @@
   }
 
   &__widget-bar {
-    background-color: var(--ilo-color-blue-lighter);
+    background-color: var(--ilo-color-light-container-bg-subtle);
     height: px-to-rem(48px);
     position: relative;
     display: flex;
@@ -72,7 +72,7 @@
       left: 100%;
       width: 100vw;
       height: 100%;
-      background-color: var(--ilo-color-blue-lighter);
+      background-color: var(--ilo-color-light-container-bg-subtle);
       z-index: 1;
 
       [dir="rtl"] & {
@@ -83,7 +83,7 @@
 
     &-corner {
       display: block;
-      background-color: var(--ilo-color-blue);
+      background-color: var(--ilo-color-light-action-selected);
       width: px-to-rem(48px);
       height: px-to-rem(48px);
       @include cornercut(spacing(10), 100%);
@@ -105,7 +105,7 @@
       @include typography("highlight-small-bold");
       height: 100%;
       text-decoration: none;
-      color: var(--ilo-color-blue-dark);
+      color: var(--ilo-color-light-text-brand);
       display: flex;
       align-items: center;
       text-wrap: nowrap;
@@ -113,8 +113,8 @@
 
       &:hover,
       &:focus {
-        background-color: var(--ilo-color-blue-dark);
-        color: var(--ilo-color-white);
+        background-color: var(--ilo-color-light-container-bg-brand);
+        color: var(--ilo-color-light-text-inverse);
       }
     }
 
@@ -130,7 +130,9 @@
     }
 
     &-search {
-      --ilo-subsite-nav-widget-bar-search-color: var(--ilo-color-blue-dark);
+      --ilo-subsite-nav-widget-bar-search-color: var(
+        --ilo-color-light-text-brand
+      );
       height: 100%;
       display: inline-flex;
       align-items: center;
@@ -152,8 +154,10 @@
 
       &:hover,
       &:focus {
-        --ilo-subsite-nav-widget-bar-search-color: var(--ilo-color-white);
-        background-color: var(--ilo-color-blue-dark);
+        --ilo-subsite-nav-widget-bar-search-color: var(
+          --ilo-color-light-text-inverse
+        );
+        background-color: var(--ilo-color-light-container-bg-brand);
       }
     }
   }
@@ -165,7 +169,7 @@
       display: flex;
     }
 
-    --ilo-subsite-nav-burger-icon: var(--ilo-color-white);
+    --ilo-subsite-nav-burger-icon: var(--ilo-color-light-icon-inverse);
     margin-block: px-to-rem(20px);
     align-items: center;
     border: none;
@@ -178,8 +182,8 @@
     }
 
     &:hover {
-      --ilo-subsite-nav-burger-icon: var(--ilo-color-blue);
-      background-color: var(--ilo-color-white);
+      --ilo-subsite-nav-burger-icon: var(--ilo-color-light-action-hover);
+      background-color: var(--ilo-color-light-container-bg-default);
     }
   }
 }

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

@@ -9,11 +9,11 @@
 
   &-bg {
     &--light {
-      background-color: var(--ilo-color-blue-lighter);
+      background-color: var(--ilo-color-light-container-bg-subtle);
     }
 
     &--dark {
-      background-color: var(--ilo-color-blue);
+      background-color: var(--ilo-color-light-action-selected);
     }
   }
 
@@ -25,19 +25,19 @@
     @include nav-widgets-bar-content;
 
     &-bar-corner {
-      @include nav-widgets-corner(var(--ilo-color-blue));
+      @include nav-widgets-corner(var(--ilo-color-light-action-selected));
     }
 
     &-bar {
-      @include nav-widgets-bar(var(--ilo-color-blue));
+      @include nav-widgets-bar(var(--ilo-color-light-action-selected));
 
       &__link {
-        @include nav-widgets-link(var(--ilo-color-blue-dark));
+        @include nav-widgets-link(var(--ilo-color-light-container-bg-brand));
       }
     }
 
     &::after {
-      background-color: var(--ilo-color-blue);
+      background-color: var(--ilo-color-light-action-selected);
     }
   }
 
@@ -66,7 +66,9 @@
 
     &-search {
       @include nav-search;
-      --ilo-subsite_nav_complex-search-color: var(--ilo-color-white);
+      --ilo-subsite_nav_complex-search-color: var(
+        --ilo-color-light-text-inverse
+      );
       text-decoration: none;
 
       &__icon {
@@ -75,22 +77,28 @@
 
       &:hover,
       &:focus {
-        --ilo-subsite_nav_complex-search-color: var(--ilo-color-white);
-        background-color: var(--ilo-color-blue-dark);
+        --ilo-subsite_nav_complex-search-color: var(
+          --ilo-color-light-text-inverse
+        );
+        background-color: var(--ilo-color-light-container-bg-brand);
       }
     }
 
     &-burger {
       @include nav-burger;
-      --ilo-subsite_nav_complex-burger-color: var(--ilo-color-white);
+      --ilo-subsite_nav_complex-burger-color: var(
+        --ilo-color-light-text-inverse
+      );
 
       &__icon {
         @include icon("burger", var(--ilo-subsite_nav_complex-burger-color));
       }
 
       &:hover {
-        --ilo-subsite_nav_complex-burger-color: var(--ilo-color-blue);
-        background-color: var(--ilo-color-white);
+        --ilo-subsite_nav_complex-burger-color: var(
+          --ilo-color-light-action-hover
+        );
+        background-color: var(--ilo-color-light-container-bg-default);
       }
     }
   }

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

@@ -9,14 +9,14 @@
 
   &-bg {
     &--dark {
-      background-color: var(--ilo-color-blue);
+      background-color: var(--ilo-color-light-action-selected);
     }
 
     &--darker {
-      background-color: var(--ilo-color-blue-dark);
+      background-color: var(--ilo-color-light-container-bg-brand);
 
       @include breakpoint("lg", true) {
-        background-color: var(--ilo-color-blue);
+        background-color: var(--ilo-color-light-action-selected);
       }
     }
   }
@@ -28,18 +28,18 @@
   &__widgets {
     @include nav-widgets-bar-content;
     &::after {
-      background-color: var(--ilo-color-blue-dark);
+      background-color: var(--ilo-color-light-container-bg-brand);
     }
 
     &-bar-corner {
-      @include nav-widgets-corner(var(--ilo-color-blue-dark));
+      @include nav-widgets-corner(var(--ilo-color-light-container-bg-brand));
     }
 
     &-bar {
-      @include nav-widgets-bar(var(--ilo-color-blue-dark));
+      @include nav-widgets-bar(var(--ilo-color-light-container-bg-brand));
 
       &__link {
-        @include nav-widgets-link(var(--ilo-color-blue-dark));
+        @include nav-widgets-link(var(--ilo-color-light-container-bg-brand));
       }
     }
   }
@@ -59,7 +59,7 @@
       }
 
       &__sub {
-        color: var(--ilo-color-blue-light);
+        color: var(--ilo-color-dark-text-brand);
       }
     }
   }
@@ -76,7 +76,9 @@
     }
 
     &-search {
-      --ilo-subsite_nav_complex-search-color: var(--ilo-color-white);
+      --ilo-subsite_nav_complex-search-color: var(
+        --ilo-color-light-text-inverse
+      );
       @include nav-search;
       border: none;
 
@@ -85,23 +87,27 @@
       }
 
       &:hover {
-        --ilo-subsite_nav_complex-search-color: var(--ilo-color-blue);
-        background-color: var(--ilo-color-white);
+        --ilo-subsite_nav_complex-search-color: var(
+          --ilo-color-light-action-hover
+        );
+        background-color: var(--ilo-color-light-container-bg-default);
       }
     }
 
     &-burger {
       @include nav-burger;
 
-      --ilo-subsite_nav_complex-burger-color: var(--ilo-color-white);
+      --ilo-subsite_nav_complex-burger-color: var(
+        --ilo-color-light-text-inverse
+      );
 
       &__icon {
         @include icon("burger", var(--ilo-subsite_nav_complex-burger-color));
       }
 
       &:hover {
-        --ilo-subsite-nav-burger-icon: var(--ilo-color-blue);
-        background-color: var(--ilo-color-white);
+        --ilo-subsite-nav-burger-icon: var(--ilo-color-light-action-hover);
+        background-color: var(--ilo-color-light-container-bg-default);
       }
     }
 

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

@@ -9,11 +9,11 @@
   visibility: hidden;
   opacity: 0;
   transform: translateY(-10px);
-  background-color: var(--ilo-color-white);
+  background-color: var(--ilo-color-light-container-bg-default);
   filter: drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08))
     drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.05))
     drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.03));
-  border-bottom: 3px solid var(--ilo-color-gray-base);
+  border-bottom: 3px solid var(--ilo-color-light-border-default);
   padding: spacing(8) spacing(18);
   z-index: 4;
 

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

@@ -18,14 +18,14 @@
     padding: spacing(4) spacing(2);
     text-decoration: none;
     text-overflow: ellipsis;
-    color: var(--ilo-color-blue-dark);
+    color: var(--ilo-color-light-text-brand);
     transition:
       color 0.3s ease,
       background-color 0.3s ease;
 
     &:hover {
-      color: var(--ilo-color-blue);
-      background-color: var(--ilo-color-blue-lighter);
+      color: var(--ilo-color-light-action-hover);
+      background-color: var(--ilo-color-light-container-bg-subtle);
     }
   }
 }

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

@@ -27,7 +27,7 @@
 
   &__link {
     @include typography("highlight-medium");
-    color: var(--ilo-color-white);
+    color: var(--ilo-color-light-text-inverse);
     text-decoration: none;
     position: relative;
     padding-bottom: 2px;
@@ -42,7 +42,7 @@
     &:hover,
     &:focus,
     &:active {
-      background-color: var(--ilo-color-blue-dark);
+      background-color: var(--ilo-color-light-container-bg-brand);
       outline: none;
     }
   }
@@ -53,8 +53,8 @@
       &:hover,
       &:focus,
       &:active {
-        color: var(--ilo-color-blue);
-        background-color: var(--ilo-color-white);
+        color: var(--ilo-color-light-action-hover);
+        background-color: var(--ilo-color-light-container-bg-default);
       }
     }
   }
@@ -66,8 +66,8 @@
       display: none;
     }
 
-    --ilo-nav_menu-icon-color: var(--ilo-color-white);
-    border: 1px solid var(--ilo-color-white);
+    --ilo-nav_menu-icon-color: var(--ilo-color-light-icon-inverse);
+    border: 1px solid var(--ilo-color-light-border-inverse);
     border-radius: var(--ilo-border-radius);
     cursor: pointer;
     display: flex;
@@ -76,7 +76,7 @@
     justify-content: center;
     align-items: center;
     padding: spacing(2) spacing(4) spacing(1);
-    color: var(--ilo-color-white);
+    color: var(--ilo-color-light-text-inverse);
     @include typography("highlight-medium-bold");
 
     &-icon {
@@ -90,8 +90,8 @@
     &:hover,
     &:active {
       outline: none;
-      border-color: var(--ilo-color-blue-dark);
-      background-color: var(--ilo-color-blue-dark);
+      border-color: var(--ilo-color-light-border-brand-3);
+      background-color: var(--ilo-color-light-container-bg-brand);
     }
   }
 
@@ -100,10 +100,10 @@
       &--open,
       &:hover,
       &:active {
-        --ilo-nav_menu-icon-color: var(--ilo-color-blue);
-        color: var(--ilo-color-blue);
-        border-color: var(--ilo-color-white);
-        background-color: var(--ilo-color-white);
+        --ilo-nav_menu-icon-color: var(--ilo-color-light-action-hover);
+        color: var(--ilo-color-light-action-hover);
+        border-color: var(--ilo-color-light-border-inverse);
+        background-color: var(--ilo-color-light-container-bg-default);
       }
     }
   }

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

@@ -82,7 +82,7 @@
   align-items: center;
   padding-inline: spacing(2);
   text-decoration: none;
-  color: var(--ilo-color-white);
+  color: var(--ilo-color-light-text-inverse);
 
   &:hover,
   &:focus {

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

@@ -9,7 +9,7 @@
   right: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--ilo-color-white);
+  background-color: var(--ilo-color-light-container-bg-default);
   transform: translateX(100%);
   transition: transform 225ms ease-in-out;
   z-index: 2;
@@ -23,7 +23,7 @@
     justify-content: space-between;
     align-items: center;
     padding: spacing(4);
-    color: var(--ilo-color-white);
+    color: var(--ilo-color-light-text-inverse);
 
     &-main {
       display: flex;
@@ -34,7 +34,7 @@
 
     &-close {
       border: none;
-      background-color: var(--ilo-color-gray-light);
+      background-color: var(--ilo-color-light-container-bg-disabled);
       width: px-to-rem(32px);
       height: px-to-rem(32px);
       margin-top: -3px;
@@ -43,7 +43,7 @@
         display: block;
         width: px-to-rem(32px);
         height: px-to-rem(32px);
-        @include icon("close", var(--ilo-color-blue-dark));
+        @include icon("close", var(--ilo-color-light-action-default));
       }
     }
   }
@@ -54,7 +54,7 @@
   &__widgets {
     padding-bottom: spacing(4);
     margin-bottom: spacing(4);
-    border-bottom: 4px solid var(--ilo-color-gray-light);
+    border-bottom: 4px solid var(--ilo-color-light-border-subtle);
     overflow-y: auto;
   }
 }