@ilo-org/styles 1.15.1 → 1.17.0

package/scss/components/_navigation.scss

@@ -21,16 +21,12 @@
   }
 
   &--nav {
-    background: var(--ilo-color-blue-dark);
+    background: var(--ilo-color-light-container-bg-brand);
   }
 
   &--menu {
-    @include dataurlicon("burger", rgba(255, 255, 255, 1));
     align-self: center;
     background-color: transparent;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: 32px;
     border: none;
     cursor: pointer;
     height: 32px;
@@ -40,13 +36,26 @@
     transition: all 150ms ease-out;
     width: 32px;
 
+    &::before {
+      @include icon(
+        "burger",
+        var(--ilo-color-light-icon-inverse),
+        32px,
+        center
+      );
+      content: "";
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+    }
+
     &:hover,
     &:focus {
-      @include dataurlicon("burger", rgba(30, 45, 190, 1));
-      background-color: var(--ilo-color-blue-lighter);
-      background-position: center;
-      background-repeat: no-repeat;
-      background-size: 32px;
+      background-color: var(--ilo-color-light-container-bg-subtle);
+
+      &::before {
+        background-color: var(--ilo-color-light-action-hover);
+      }
     }
 
     @include breakpoint("lg") {
@@ -54,11 +63,7 @@
     }
 
     &--close {
-      @include dataurlicon("close", rgba(35, 0, 80, 1));
-      background-color: var(--ilo-color-gray-light);
-      background-position: center;
-      background-repeat: no-repeat;
-      background-size: 32px;
+      background-color: var(--ilo-color-light-container-bg-disabled);
       border: none;
       cursor: pointer;
       height: 32px;
@@ -68,13 +73,21 @@
       transition: all 150ms ease-out;
       width: 32px;
 
+      &::before {
+        @include icon("close", var(--ilo-color-light-icon-brand), 32px, center);
+        content: "";
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+      }
+
       &:hover,
       &:focus {
-        @include dataurlicon("close", rgba(30, 45, 190, 1));
-        background-color: var(--ilo-color-blue-lighter);
-        background-position: center;
-        background-repeat: no-repeat;
-        background-size: 32px;
+        background-color: var(--ilo-color-light-container-bg-subtle);
+
+        &::before {
+          background-color: var(--ilo-color-light-action-hover);
+        }
       }
 
       @include breakpoint("lg") {
@@ -103,7 +116,7 @@
   }
 
   &--logo-bar {
-    background: var(--ilo-color-blue);
+    background: var(--ilo-color-light-action-selected);
     display: flex;
     width: 100%;
 
@@ -113,7 +126,7 @@
     }
 
     @include breakpoint("lg") {
-      background: var(--ilo-color-blue);
+      background: var(--ilo-color-light-action-selected);
     }
   }
 
@@ -121,7 +134,7 @@
     display: none;
     min-height: px-to-rem(24px);
     &--local {
-      background: var(--ilo-color-blue);
+      background: var(--ilo-color-light-action-selected);
       display: flex;
       justify-content: space-between;
       padding: 0 spacing(5);
@@ -130,15 +143,11 @@
         display: none;
 
         &--link {
-          @include dataurlicon("chevron_left", rgba(255, 255, 255, 1));
           @include typography("body-small");
           appearance: none;
           background-color: inherit;
-          background-position: px-to-rem(12px) 50%;
-          background-repeat: no-repeat;
-          background-size: px-to-rem(24px);
           border: none;
-          color: var(--ilo-color-white);
+          color: var(--ilo-color-light-text-inverse);
           cursor: pointer;
           padding: spacing(4) spacing(4) spacing(4) spacing(9);
           text-decoration: none;
@@ -148,24 +157,51 @@
           display: flex;
           justify-content: center;
           align-items: center;
+          position: relative;
+
+          &::before {
+            @include icon(
+              "chevron_left",
+              var(--ilo-color-light-icon-inverse),
+              px-to-rem(24px),
+              px-to-rem(12px) 50%
+            );
+            content: "";
+            position: absolute;
+            inset: 0;
+            pointer-events: none;
+          }
 
           &:focus,
           &:hover {
-            @include dataurlicon("chevron_left", rgba(30, 45, 190, 1));
-            background-color: var(--ilo-color-blue-lighter);
-            color: var(--ilo-color-blue);
+            background-color: var(--ilo-color-light-container-bg-subtle);
+            color: var(--ilo-color-light-action-hover);
+
+            &::before {
+              background-color: var(--ilo-color-light-action-hover);
+            }
           }
 
           [dir="rtl"] {
-            @include dataurlicon("chevron_right", rgba(255, 255, 255, 1));
-            background-position: calc(100% - 16px) 50%;
             padding: 16px 36px 16px 16px;
 
+            &::before {
+              @include icon(
+                "chevron_right",
+                var(--ilo-color-light-icon-inverse),
+                px-to-rem(24px),
+                calc(100% - 16px) 50%
+              );
+            }
+
             &:focus,
             &:hover {
-              @include dataurlicon("chevron_right", rgba(30, 45, 190, 1));
-              background-color: var(--ilo-color-blue-lighter);
-              color: var(--ilo-color-blue);
+              background-color: var(--ilo-color-light-container-bg-subtle);
+              color: var(--ilo-color-light-action-hover);
+
+              &::before {
+                background-color: var(--ilo-color-light-action-hover);
+              }
             }
           }
 
@@ -186,7 +222,7 @@
     }
 
     @include breakpoint("lg") {
-      background: var(--ilo-color-blue);
+      background: var(--ilo-color-light-action-selected);
       display: flex;
       justify-content: flex-end;
       width: 100%;
@@ -214,7 +250,7 @@
   }
 
   &--navigation {
-    background: var(--ilo-color-white);
+    background: var(--ilo-color-light-container-bg-default);
     height: 100%;
     left: 0;
     overflow-x: hidden;
@@ -240,7 +276,7 @@
     }
 
     @include breakpoint("lg") {
-      background: var(--ilo-color-blue-dark);
+      background: var(--ilo-color-light-container-bg-brand);
       overflow: visible;
       position: static;
       transform: none;
@@ -250,7 +286,7 @@
 
   &--logo-tagline {
     @include typography("highlight-large");
-    color: var(--ilo-color-white);
+    color: var(--ilo-color-light-text-inverse);
     display: none;
     font-family: var(--ilo-fonts-display);
     font-weight: 700;
@@ -263,7 +299,7 @@
 
     &--small {
       @include typography("body-xsmall");
-      color: var(--ilo-color-blue-light);
+      color: var(--ilo-color-dark-text-brand);
       display: block;
     }
   }
@@ -309,7 +345,7 @@
   }
 
   &--link {
-    color: var(--ilo-color-blue-dark);
+    color: var(--ilo-color-light-text-brand);
     display: block;
     padding: spacing(4) spacing(9) spacing(4) spacing(2);
     text-decoration: none;
@@ -319,38 +355,33 @@
 
     &:hover,
     &:focus {
-      background: var(--ilo-color-blue-lighter);
-      color: var(--ilo-color-blue);
+      background: var(--ilo-color-light-container-bg-subtle);
+      color: var(--ilo-color-light-action-hover);
       text-decoration: none;
     }
 
     @include breakpoint("lg") {
-      background: var(--ilo-color-blue-dark);
-      color: var(--ilo-color-white);
+      background: var(--ilo-color-light-container-bg-brand);
+      color: var(--ilo-color-light-text-inverse);
       display: inline-block;
       padding: 21.5px spacing(6) 20.5px;
 
       &:hover,
       &:focus {
-        background: var(--ilo-color-blue-lighter);
-        color: var(--ilo-color-blue);
+        background: var(--ilo-color-light-container-bg-subtle);
+        color: var(--ilo-color-light-action-hover);
         text-decoration: none;
       }
     }
   }
 
   &--trigger {
-    @include dataurlicon("chevron_right", rgba(35, 0, 80, 1));
     @include typography("highlight-medium");
 
     appearance: none;
-    background-color: var(--ilo-color-white);
-    background-position: calc(100% - 16px) 55%;
-    background-repeat: no-repeat;
-    background-size: 24px;
-    background-position-y: center;
+    background-color: var(--ilo-color-light-container-bg-default);
     border: none;
-    color: var(--ilo-color-blue-dark);
+    color: var(--ilo-color-light-text-brand);
     cursor: pointer;
     display: block;
     padding: spacing(4) spacing(9) spacing(4) spacing(2);
@@ -358,41 +389,62 @@
     text-align: left;
     transition: all 150ms ease-out;
     width: 100%;
+    position: relative;
+
+    &::before {
+      @include icon(
+        "chevron_right",
+        var(--ilo-color-light-icon-brand),
+        24px,
+        calc(100% - 16px) center
+      );
+      content: "";
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+    }
 
     &:focus,
     &:hover {
-      @include dataurlicon("chevron_right", rgba(30, 45, 190, 1));
-      background-color: var(--ilo-color-blue-lighter);
-      color: var(--ilo-color-blue);
+      background-color: var(--ilo-color-light-container-bg-subtle);
+      color: var(--ilo-color-light-action-hover);
+
+      &::before {
+        background-color: var(--ilo-color-light-action-hover);
+      }
     }
 
     [dir="rtl"] & {
-      @include dataurlicon("chevron_left", rgba(35, 0, 80, 1));
-      background-color: var(--ilo-color-white);
-      background-position: 16px 55%;
-      background-repeat: no-repeat;
-      background-size: 24px;
+      background-color: var(--ilo-color-light-container-bg-default);
       text-align: right;
 
+      &::before {
+        @include icon(
+          "chevron_left",
+          var(--ilo-color-light-icon-brand),
+          24px,
+          16px 55%
+        );
+      }
+
       &:focus,
       &:hover {
-        @include dataurlicon("chevron_left", rgba(30, 45, 190, 1));
-        background-color: var(--ilo-color-blue-lighter);
-        color: var(--ilo-color-blue);
+        background-color: var(--ilo-color-light-container-bg-subtle);
+        color: var(--ilo-color-light-action-hover);
+
+        &::before {
+          background-color: var(--ilo-color-light-action-hover);
+        }
       }
     }
 
     @include breakpoint("lg") {
-      @include dataurlicon("plus", rgba(255, 255, 255, 1));
       @include typography("highlight-medium-bold");
 
-      background-color: var(--ilo-color-blue-dark);
-      background-position: 90% 55%;
-      background-repeat: no-repeat;
-      background-size: 20px;
+      background-color: var(--ilo-color-light-container-bg-brand);
       border: 1.5px solid rgba(184, 196, 204, 0.5);
       border-radius: 2px;
-      color: var(--ilo-color-white);
+      color: var(--ilo-color-light-text-inverse);
       cursor: pointer;
       display: inline-block;
       margin-left: spacing(5);
@@ -401,27 +453,47 @@
       transition: all 150ms ease-out;
       width: auto;
 
+      &::before {
+        @include icon(
+          "plus",
+          var(--ilo-color-light-icon-inverse),
+          20px,
+          90% 55%
+        );
+      }
+
       &:focus,
       &:hover {
-        @include dataurlicon("plus", rgba(30, 45, 190, 1));
-        background-color: var(--ilo-color-white);
-        border-color: var(--ilo-color-white);
-        color: var(--ilo-color-blue);
+        background-color: var(--ilo-color-light-container-bg-default);
+        border-color: var(--ilo-color-light-border-inverse);
+        color: var(--ilo-color-light-action-hover);
+
+        &::before {
+          background-color: var(--ilo-color-light-action-hover);
+        }
       }
 
       [dir="rtl"] & {
-        @include dataurlicon("plus", rgba(255, 255, 255, 1));
-        background-color: var(--ilo-color-blue-dark);
-        background-repeat: no-repeat;
-        background-size: 20px;
-        background-position: 10% 55%;
+        background-color: var(--ilo-color-light-container-bg-brand);
         padding: 7px 15px 5px spacing(8);
 
+        &::before {
+          @include icon(
+            "plus",
+            var(--ilo-color-light-icon-inverse),
+            20px,
+            10% 55%
+          );
+        }
+
         &:focus,
         &:hover {
-          @include dataurlicon("plus", rgba(30, 45, 190, 1));
-          background-color: var(--ilo-color-white);
-          color: var(--ilo-color-blue);
+          background-color: var(--ilo-color-light-container-bg-default);
+          color: var(--ilo-color-light-action-hover);
+
+          &::before {
+            background-color: var(--ilo-color-light-action-hover);
+          }
         }
       }
     }
@@ -469,12 +541,12 @@
 
     &--item {
       @include typography("highlight-medium");
-      color: var(--ilo-color-white);
+      color: var(--ilo-color-light-text-inverse);
     }
 
     &--link {
       background: inherit;
-      color: var(--ilo-color-white);
+      color: var(--ilo-color-light-text-inverse);
       padding: 0 spacing(6);
       height: 100%;
       text-decoration: none;
@@ -487,15 +559,15 @@
 
       &:hover,
       &:focus {
-        background: var(--ilo-color-blue-lighter);
-        color: var(--ilo-color-blue);
+        background: var(--ilo-color-light-container-bg-subtle);
+        color: var(--ilo-color-light-action-hover);
       }
     }
   }
 }
 
 .ilo--mobile--nav {
-  border-bottom: 3px solid var(--ilo-color-gray-light);
+  border-bottom: 3px solid var(--ilo-color-light-border-subtle);
   margin-bottom: spacing(4);
   padding-bottom: spacing(4);
 
@@ -506,7 +578,7 @@
   }
 
   &--language--select {
-    background: var(--ilo-color-white);
+    background: var(--ilo-color-light-container-bg-default);
     left: 0;
     height: 100%;
     padding: 0 0 spacing(8);
@@ -522,17 +594,12 @@
   }
 
   &--language--switcher--button {
-    @include dataurlicon("globe", rgba(35, 0, 80, 1));
     @include typography("highlight-medium");
 
     appearance: none;
-    background-color: var(--ilo-color-white);
-    background-position: calc(100% - 16px) 55%;
-    background-repeat: no-repeat;
-    background-size: 24px;
-    background-position-y: center;
+    background-color: var(--ilo-color-light-container-bg-default);
     border: none;
-    color: var(--ilo-color-blue-dark);
+    color: var(--ilo-color-light-text-brand);
     cursor: pointer;
     display: block;
     font-family: var(--ilo-fonts-display);
@@ -541,17 +608,38 @@
     text-align: left;
     transition: all 150ms ease-out;
     width: 100%;
+    position: relative;
+
+    &::before {
+      @include icon(
+        "globe",
+        var(--ilo-color-light-icon-brand),
+        24px,
+        calc(100% - 16px) center
+      );
+      content: "";
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+    }
 
     &:focus,
     &:hover {
-      @include dataurlicon("globe", rgba(30, 45, 190, 1));
-      background-color: var(--ilo-color-blue-lighter);
-      color: var(--ilo-color-blue);
+      background-color: var(--ilo-color-light-container-bg-subtle);
+      color: var(--ilo-color-light-action-hover);
+
+      &::before {
+        background-color: var(--ilo-color-light-action-hover);
+      }
     }
 
     [dir="rtl"] & {
-      background-position: 16px 55%;
       text-align: right;
+
+      &::before {
+        mask-position: 16px 55%;
+        -webkit-mask-position: 16px 55%;
+      }
     }
   }
 
@@ -576,7 +664,7 @@
 }
 
 .ilo--language-switcher {
-  background: var(--ilo-color-blue-dark);
+  background: var(--ilo-color-light-container-bg-brand);
   display: flex;
   padding: 0 max((100% - #{px-to-rem(1300px)}) / 2, #{px-to-rem(20px)}) 0 0;
   position: relative;
@@ -586,7 +674,7 @@
   }
 
   &::before {
-    background: var(--ilo-color-blue-dark);
+    background: var(--ilo-color-light-container-bg-brand);
     clip-path: polygon(0 0, 100% 0, 97% 100%);
     content: "";
     display: block;
@@ -615,31 +703,48 @@
 
   &--button {
     @include typography("body-xsmall");
-    @include dataurlicon("globe", rgba(255, 255, 255, 1));
     appearance: none;
-    background-color: var(--ilo-color-blue-dark);
-    background-repeat: no-repeat;
-    background-position: px-to-rem(12px) center;
-    background-size: px-to-rem(24px);
+    background-color: var(--ilo-color-light-container-bg-brand);
     border: none;
-    color: var(--ilo-color-white);
+    color: var(--ilo-color-light-text-inverse);
     cursor: pointer;
     display: block;
     font-family: var(--ilo-fonts-display);
     font-weight: 500;
     padding: spacing(2) 30px spacing(2) spacing(10);
     transition: all 150ms ease-out;
+    position: relative;
+
+    &::before {
+      @include icon(
+        "globe",
+        var(--ilo-color-light-icon-inverse),
+        px-to-rem(24px),
+        px-to-rem(12px) center
+      );
+      content: "";
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+    }
 
     &:hover,
     &:focus {
-      @include dataurlicon("globe", rgba(30, 45, 190, 1));
-      background-color: var(--ilo-color-blue-lighter);
-      color: var(--ilo-color-blue);
+      background-color: var(--ilo-color-light-container-bg-subtle);
+      color: var(--ilo-color-light-action-hover);
+
+      &::before {
+        background-color: var(--ilo-color-light-action-hover);
+      }
     }
 
     [dir="rtl"] & {
       padding: spacing(2) spacing(10) spacing(2) 30px;
-      background-position: calc(100% - px-to-rem(12px)) center;
+
+      &::before {
+        mask-position: calc(100% - #{px-to-rem(12px)}) center;
+        -webkit-mask-position: calc(100% - #{px-to-rem(12px)}) center;
+      }
     }
   }
 
@@ -671,7 +776,7 @@
 .ilo--subnav {
   display: none;
   visibility: hidden;
-  background: var(--ilo-color-white);
+  background: var(--ilo-color-light-container-bg-default);
   height: 100%;
   left: 0;
   padding: 0 0 spacing(8);
@@ -696,7 +801,7 @@
     z-index: -1;
 
     .ilo--header.ilo--subnav--open & {
-      border-bottom: px-to-rem(3px) solid var(--ilo-color-gray-base);
+      border-bottom: px-to-rem(3px) solid var(--ilo-color-light-border-default);
       filter: drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.038))
         drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054))
         drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08));
@@ -729,8 +834,8 @@
 
   &--link {
     @include typography("highlight-medium");
-    background: var(--ilo-color-white);
-    color: var(--ilo-color-blue-dark);
+    background: var(--ilo-color-light-container-bg-default);
+    color: var(--ilo-color-light-text-brand);
     display: flex;
     padding: 18px spacing(2);
     text-decoration: none;
@@ -738,8 +843,8 @@
 
     &:hover,
     &:focus {
-      background: var(--ilo-color-blue-lighter);
-      color: var(--ilo-color-blue);
+      background: var(--ilo-color-light-container-bg-subtle);
+      color: var(--ilo-color-light-action-hover);
       text-decoration: none;
     }
   }
@@ -759,19 +864,21 @@
 
   &--back {
     @include typography("highlight-medium");
-    background-color: var(--ilo-color-white);
+    background-color: var(--ilo-color-light-container-bg-default);
     border: none;
-    color: var(--ilo-color-blue-dark);
+    color: var(--ilo-color-light-text-brand);
     cursor: pointer;
     padding: spacing(5) spacing(4) spacing(4) spacing(8);
     position: relative;
     transition: all 150ms ease-out;
 
     &::before {
-      @include dataurlicon("chevron_left", rgba(35, 0, 80, 1));
-      background-position: 10% center;
-      background-repeat: no-repeat;
-      background-size: 24px;
+      @include icon(
+        "chevron_left",
+        var(--ilo-color-light-icon-brand),
+        24px,
+        10% center
+      );
       content: "";
       display: block;
       height: 24px;
@@ -786,10 +893,12 @@
       padding: spacing(5) spacing(8) spacing(4) spacing(4);
 
       &::before {
-        @include dataurlicon("chevron_right", rgba(35, 0, 80, 1));
-        background-position: 10% center;
-        background-repeat: no-repeat;
-        background-size: 24px;
+        @include icon(
+          "chevron_right",
+          var(--ilo-color-light-icon-brand),
+          24px,
+          10% center
+        );
         left: auto;
         right: 0;
       }
@@ -797,22 +906,16 @@
 
     &:hover,
     &:focus {
-      background-color: var(--ilo-color-blue-lighter);
-      color: var(--ilo-color-blue);
+      background-color: var(--ilo-color-light-container-bg-subtle);
+      color: var(--ilo-color-light-action-hover);
 
       &::before {
-        @include dataurlicon("chevron_left", rgba(30, 45, 190, 1));
-        background-position: 10% center;
-        background-repeat: no-repeat;
-        background-size: 24px;
+        background-color: var(--ilo-color-light-action-hover);
       }
 
       [dir="rtl"] & {
         &::before {
-          @include dataurlicon("chevron_right", rgba(30, 45, 190, 1));
-          background-position: 10% center;
-          background-repeat: no-repeat;
-          background-size: 24px;
+          background-color: var(--ilo-color-light-action-hover);
         }
       }
     }
@@ -824,8 +927,8 @@
 
   &--label {
     @include typography("highlight-large");
-    border-bottom: 3px solid var(--ilo-color-gray-light);
-    color: var(--ilo-color-gray-charcoal);
+    border-bottom: 3px solid var(--ilo-color-light-border-subtle);
+    color: var(--ilo-color-light-text-default);
     font-family: var(--ilo-fonts-display);
     font-weight: 700;
     margin-bottom: spacing(4);
@@ -837,7 +940,7 @@
 .ilo--search-box {
   display: none;
   visibility: hidden;
-  background: var(--ilo-color-white);
+  background: var(--ilo-color-light-container-bg-default);
   left: 0;
   position: absolute;
   top: 0;
@@ -897,12 +1000,8 @@
   }
 
   &--button {
-    @include dataurlicon("search", rgba(255, 255, 255, 1));
     appearance: none;
     background-color: transparent;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: 32px 32px;
     border: none;
     border-radius: 0;
     cursor: pointer;
@@ -911,23 +1010,47 @@
     text-indent: -999%;
     transition: all 150ms ease-out;
 
+    &::before {
+      @include icon(
+        "search",
+        var(--ilo-color-light-icon-inverse),
+        32px 32px,
+        center
+      );
+      content: "";
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+    }
+
     &:hover,
     &:focus {
-      @include dataurlicon("search", rgba(30, 45, 190, 1));
-      background-color: var(--ilo-color-blue-lighter);
+      background-color: var(--ilo-color-light-container-bg-subtle);
+
+      &::before {
+        background-color: var(--ilo-color-light-action-hover);
+      }
     }
 
     .ilo--search--open & {
-      @include dataurlicon("close", rgba(35, 0, 80, 1));
-      background-color: var(--ilo-color-white);
-      background-position: center;
-      background-repeat: no-repeat;
-      background-size: 32px 32px;
+      background-color: var(--ilo-color-light-container-bg-default);
+
+      &::before {
+        @include icon(
+          "close",
+          var(--ilo-color-light-icon-brand),
+          32px 32px,
+          center
+        );
+      }
 
       &:hover,
       &:focus {
-        @include dataurlicon("close", rgba(30, 45, 190, 1));
-        background-color: var(--ilo-color-blue-lighter);
+        background-color: var(--ilo-color-light-container-bg-subtle);
+
+        &::before {
+          background-color: var(--ilo-color-light-action-hover);
+        }
       }
     }
   }