@ilo-org/styles 1.3.0 → 1.3.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ilo-org/styles",
   "description": "Styles for products using ILO's Design System",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/international-labour-organization/designsystem.git",

package/scss/_mixins.scss

@@ -149,6 +149,15 @@
   background-repeat: no-repeat;
 }
 
+@mixin icon($name, $color: black) {
+  $icon: map-get($icons, $name);
+  mask-image: url("#{$icon}");
+  mask-repeat: no-repeat;
+  -webkit-mask-image: url("#{$icon}");
+  -webkit-mask-repeat: no-repeat;
+  background-color: $color;
+}
+
 // ======================================
 // Video Button
 // ======================================

package/scss/components/_accordion.scss

@@ -4,6 +4,8 @@
 @import "../config";
 
 .#{$prefix}--accordion {
+  --ilo-accordion-color-icon: var(--ilo-color-blue-dark);
+
   // This provides a reference to the outerclass within nested declarations
   $accordion: &;
 
@@ -14,6 +16,11 @@
   // If the accordion item is scrollable, then this is its max-height
   $scroll-max-height: 300px;
 
+  &--icon {
+    width: 24px;
+    height: 24px;
+  }
+
   &--button {
     display: flex;
     flex-direction: row;
@@ -21,42 +28,40 @@
     width: 100%;
     margin: 0;
     padding-block: spacing(4);
-    padding-inline-end: spacing(11);
+    padding-inline-end: spacing(1);
     background-color: $color-ux-background-default;
-    background-position: calc(100% - px-to-rem(6px)) center;
-    background-repeat: no-repeat;
-    background-size: px-to-rem(24px) px-to-rem(24px);
     border: none;
     border-top: 2px solid $color-base-neutrals-lighter;
-    fill: $color-ux-labels-actionable;
     font-family: var(--ilo-fonts-display);
     color: $color-ux-labels-actionable;
     font-weight: $type-weights-section;
     transition: all $transition-timing ease-in-out;
     @include font-styles("label-medium");
-    @include dataurlicon("plus", $color-ux-labels-actionable);
 
     &__large {
       @include font-styles("headline-6");
       padding-block: spacing(5);
-      padding-inline-end: spacing(11);
+    }
+
+    &[aria-expanded="true"] {
+      background-color: $color-base-blue-light;
+      #{$accordion}--icon {
+        @include icon("minus", var(--ilo-color-blue));
+      }
+    }
+
+    &[aria-expanded="false"] {
+      #{$accordion}--icon {
+        @include icon("plus", var(--ilo-color-blue-dark));
+      }
     }
 
     &:hover,
     &:focus {
+      --ilo-accordion-color-icon: var(--ilo-color-blue);
       border-top-color: $color-ux-borders-hover;
       color: $color-ux-labels-hover;
-      fill: $color-ux-labels-hover;
       cursor: pointer;
-
-      &[aria-expanded="true"] {
-        color: $brand-ilo-dark-blue;
-        @include dataurlicon("minus", $brand-ilo-dark-blue);
-      }
-
-      &[aria-expanded="false"] {
-        @include dataurlicon("plus", $color-ux-labels-hover);
-      }
     }
 
     @include breakpoint("md") {
@@ -64,23 +69,8 @@
       &__large {
         @include font-styles("headline-6");
         padding: spacing(5) 0;
-        padding-inline-end: spacing(11);
       }
     }
-
-    &[aria-expanded="true"] {
-      background-color: $color-base-blue-light;
-      color: $brand-ilo-blue;
-      @include dataurlicon("minus", $brand-ilo-blue);
-    }
-
-    &[aria-expanded="false"] {
-      @include dataurlicon("plus", $color-ux-labels-actionable);
-    }
-
-    [dir="rtl"] & {
-      background-position: calc(0% + px-to-rem(6px)) center;
-    }
   }
 
   &--panel {

package/scss/components/_blockquote.scss

@@ -27,7 +27,6 @@ It could eventually be used for a standalone blockquote component.
       @include font-styles("pull-quote-sm");
 
       &:after {
-        background-repeat: no-repeat;
         bottom: 0;
         content: "";
         display: inline-block;
@@ -36,7 +35,7 @@ It could eventually be used for a standalone blockquote component.
         right: 0;
         transform: scaleX(-1);
         width: px-to-rem(26.5px);
-        @include dataurlicon("quote", $color-font-blockquote);
+        @include icon("quote", var(--ilo-color-purple));
       }
     }
 
@@ -47,7 +46,6 @@ It could eventually be used for a standalone blockquote component.
     }
 
     &:before {
-      background-repeat: no-repeat;
       content: "";
       display: inline-block;
       height: px-to-rem(40px);
@@ -55,7 +53,7 @@ It could eventually be used for a standalone blockquote component.
       position: absolute;
       width: px-to-rem(53px);
       top: 0;
-      @include dataurlicon("quote", $color-font-blockquote);
+      @include icon("quote", var(--ilo-color-purple));
     }
 
     @include breakpoint("md") {

package/scss/components/_callout.scss

@@ -69,7 +69,7 @@
     position: relative;
 
     &__icon {
-      @include dataurlicon("chevron_down", $brand-ilo-dark-blue);
+      @include icon("chevron_down", var(--ilo-color-blue-dark));
 
       background-position: right;
       background-repeat: no-repeat;
@@ -96,23 +96,19 @@
     width: px-to-rem(24px);
 
     &__error {
-      background-color: var(--ilo-color-notification-type-error);
-      @include dataurlicon("notification_error", "white");
+      @include icon("notification_error", var(--ilo-color-white));
     }
 
     &__info {
-      background-color: var(--ilo-color-notification-type-info);
-      @include dataurlicon("notification_info", "white");
+      @include icon("notification_info", var(--ilo-color-white));
     }
 
     &__success {
-      background-color: var(--ilo-color-notification-type-success);
-      @include dataurlicon("notification_success", "white");
+      @include icon("notification_success", var(--ilo-color-white));
     }
 
     &__warning {
-      background-color: var(--ilo-color-notification-type-warning);
-      @include dataurlicon("notification_warning", "white");
+      @include icon("notification_warning", var(--ilo-color-white));
     }
   }
 

package/scss/components/_linklist.scss

@@ -4,6 +4,9 @@
 @import "../mixins";
 
 .ilo--link-list {
+  --ilo-link-list-color-icon: var(--ilo-color-blue-dark);
+  --ilo-link-list-color-indent-icon: var(--ilo-color-gray-base);
+
   &--headline {
     font-family: var(--ilo-fonts-display);
     font-weight: map-get($type, "weights", "label");
@@ -33,14 +36,10 @@
       padding-left: spacing(8);
 
       .ilo--link-list--label {
-        display: block;
         padding-left: spacing(8);
         position: relative;
 
         &:before {
-          background-position: left center;
-          background-repeat: no-repeat;
-          background-size: contain;
           content: "";
           display: block;
           height: px-to-rem(24px);
@@ -48,15 +47,16 @@
           left: 0;
           position: absolute;
           top: 50%;
-          transform: translateY(-50%) rotate(-90deg);
+          transform: translateY(-50%);
           transform-origin: center;
-          @include dataurlicon("chevrondown", $color-base-neutrals-light);
+          @include icon("caret_right", var(--ilo-link-list-color-indent-icon));
         }
 
         [dir="rtl"] & {
           padding-right: spacing(6);
           &:before {
-            transform: translateY(-50%) rotate(90deg);
+            @include icon("caret_left", var(--ilo-link-list-color-indent-icon));
+            transform: translateY(-50%);
             left: unset;
             right: 0;
           }
@@ -67,28 +67,29 @@
       & .ilo--link-list--link:focus,
       &:hover,
       &:focus {
-        .ilo--link-list--label:before {
-          @include dataurlicon("chevrondown", $color-link-text-hover);
-        }
+        --ilo-link-list-color-indent-icon: var(--ilo-color-blue);
       }
     }
   }
 
+  .ilo--link-list--icon {
+    @include icon("chevron_right", var(--ilo-link-list-color-icon));
+    width: px-to-rem(24px);
+    height: px-to-rem(24px);
+  }
+
   &--link {
-    background-position: calc(100% - 4px) center;
-    background-repeat: no-repeat;
-    background-size: px-to-rem(24px) px-to-rem(24px);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     border-bottom: px-to-rem($borders-base) solid $color-base-neutrals-lighter;
     color: map-get($color, "link", "text", "default");
-    display: block;
     font-family: var(--ilo-fonts-display);
     font-weight: map-get($type, "weights", "section");
     @include font-styles("body-small");
     padding-top: spacing(4);
     padding-bottom: spacing(4);
-    padding-inline-end: spacing(8);
     text-decoration: none;
-    @include dataurlicon("chevron_right", $color-link-text-default);
     @include globaltransition("color, background-color, border-color");
 
     &:visited {
@@ -104,41 +105,32 @@
 
     &:hover,
     &:focus {
+      --ilo-link-list-color-icon: var(--ilo-color-blue);
       border-bottom: px-to-rem($borders-base) solid
         map-get($color, "link", "text", "hover");
       background-color: $color-base-blue-light;
       color: map-get($color, "link", "text", "hover");
       outline: none;
-      @include dataurlicon("chevron_right", $color-link-text-hover);
       @include globaltransition("color, background-color, border-color");
     }
 
     [dir="rtl"] & {
-      background-position: px-to-rem(4px) center;
-      @include dataurlicon("arrowleft", $color-link-text-default);
-
-      &:hover,
-      &:focus {
-        @include dataurlicon("arrowleft", $color-link-text-hover);
+      .ilo--link-list--icon {
+        @include icon("chevron_left", var(--ilo-link-list-color-icon));
       }
     }
   }
 
   &--dark {
+    --ilo-link-list-color-icon: var(--ilo-color-white);
+    --ilo-link-list-color-indent-icon: var(--ilo-color-white);
     .ilo--link-list--headline,
     .ilo--link-list--links--headline {
       color: $color-base-neutrals-white;
     }
 
-    .ilo--link-list--label {
-      &:before {
-        @include dataurlicon("chevrondown", $color-base-neutrals-white);
-      }
-    }
-
     .ilo--link-list--link {
       border-bottom: px-to-rem($borders-base) solid rgba(237, 240, 242, 0.4);
-      @include dataurlicon("chevron_right", $color-base-neutrals-white);
 
       .ilo--link-list--label {
         color: $color-base-neutrals-white;
@@ -163,27 +155,12 @@
       &:hover,
       &:focus {
         outline: none;
-        @include dataurlicon("chevron_right", $color-base-blue-medium);
 
         .ilo--link-list--label {
           color: $color-base-blue-medium;
           @include globaltransition("color");
         }
       }
-
-      [dir="rtl"] & {
-        background-position: px-to-rem(4px) center;
-        @include dataurlicon("arrowleft", $color-base-neutrals-white);
-
-        &:hover,
-        &:focus {
-          @include dataurlicon("arrowleft", $color-base-blue-medium);
-        }
-      }
     }
   }
 }
-
-.wingsuit-body .ilo--link-list--dark {
-  background-color: $color-base-blue-dark;
-}

package/scss/components/_pagination.scss

@@ -10,10 +10,10 @@
   $self: &;
 
   &--link {
-    background: map-get($color, "ux", "pagination", "default", "background");
+    background: var(--ilo-color-gray-light);
     border: none;
     border-radius: 2px;
-    color: map-get($color, "ux", "pagination", "default", "icon");
+    color: var(--ilo-color-blue-dark);
     display: inline-block;
     font-family: var(--ilo-fonts-display);
     height: px-to-rem(40px);
@@ -28,31 +28,26 @@
       content: "";
       display: inline-block;
       left: 50%;
-      height: px-to-rem(16px);
+      height: px-to-rem(20px);
       position: absolute;
       top: 50%;
       transform: translate(-50%, -50%);
       transform-origin: center center;
-      width: px-to-rem(16px);
+      width: px-to-rem(20px);
     }
 
     &:hover {
-      background: map-get($color, "ux", "pagination", "hover", "background");
-      color: map-get($color, "ux", "pagination", "hover", "icon");
+      background: var(--ilo-color-blue-lighter);
+      color: var(--ilo-color-blue);
     }
 
     &.ilo--pagination--disable {
       opacity: 0.45;
       cursor: unset;
+      pointer-events: none;
 
       &:hover {
-        background: map-get(
-          $color,
-          "ux",
-          "pagination",
-          "default",
-          "background"
-        );
+        background: var(--ilo-color-gray-light);
       }
     }
   }
@@ -62,18 +57,12 @@
     &::before {
       transform: translate(-50%, -50%) rotate(180deg);
 
-      @include dataurlicon(
-        "arrowgotoright",
-        map-get($color, "ux", "pagination", "default", "icon")
-      );
+      @include icon("double_chevron_right", var(--ilo-color-blue-dark));
     }
 
     &:hover {
       &::before {
-        @include dataurlicon(
-          "arrowgotoright",
-          map-get($color, "ux", "pagination", "hover", "icon")
-        );
+        @include icon("double_chevron_right", var(--ilo-color-blue));
       }
     }
 
@@ -81,19 +70,10 @@
       opacity: 0.45;
 
       &:hover {
-        background: map-get(
-          $color,
-          "ux",
-          "pagination",
-          "default",
-          "background"
-        );
+        background: var(--ilo-color-gray-light);
 
         &::before {
-          @include dataurlicon(
-            "arrowgotoright",
-            map-get($color, "ux", "pagination", "default", "icon")
-          );
+          @include icon("double_chevron_right", var(--ilo-color-blue-dark));
         }
       }
     }
@@ -102,20 +82,14 @@
   &--prev-page {
     &::before {
       transform: translate(-50%, -50%) rotate(180deg);
-      width: px-to-rem(10px);
+      width: px-to-rem(20px);
 
-      @include dataurlicon(
-        "caret_right",
-        map-get($color, "ux", "pagination", "default", "icon")
-      );
+      @include icon("chevron_right", var(--ilo-color-blue-dark));
     }
 
     &:hover {
       &::before {
-        @include dataurlicon(
-          "caret_right",
-          map-get($color, "ux", "pagination", "hover", "icon")
-        );
+        @include icon("chevron_right", var(--ilo-color-blue));
       }
     }
 
@@ -123,19 +97,10 @@
       opacity: 0.45;
 
       &:hover {
-        background: map-get(
-          $color,
-          "ux",
-          "pagination",
-          "default",
-          "background"
-        );
+        background: var(--ilo-color-gray-light);
 
         &::before {
-          @include dataurlicon(
-            "caret_right",
-            map-get($color, "ux", "pagination", "default", "icon")
-          );
+          @include icon("chevron_right", var(--ilo-color-blue-dark));
         }
       }
     }
@@ -144,20 +109,14 @@
   &--next-page {
     &::before {
       transform: translate(-50%, -50%) rotate(0);
-      width: px-to-rem(10px);
+      width: px-to-rem(20px);
 
-      @include dataurlicon(
-        "caret_right",
-        map-get($color, "ux", "pagination", "default", "icon")
-      );
+      @include icon("chevron_right", var(--ilo-color-blue-dark));
     }
 
     &:hover {
       &::before {
-        @include dataurlicon(
-          "caret_right",
-          map-get($color, "ux", "pagination", "hover", "icon")
-        );
+        @include icon("chevron_right", var(--ilo-color-blue));
       }
     }
 
@@ -165,19 +124,10 @@
       opacity: 0.45;
 
       &:hover {
-        background: map-get(
-          $color,
-          "ux",
-          "pagination",
-          "default",
-          "background"
-        );
+        background: var(--ilo-color-gray-light);
 
         &::before {
-          @include dataurlicon(
-            "caret_right",
-            map-get($color, "ux", "pagination", "default", "icon")
-          );
+          @include icon("chevron_right", var(--ilo-color-blue-dark));
         }
       }
     }
@@ -185,18 +135,12 @@
 
   &--last-page {
     &::before {
-      @include dataurlicon(
-        "arrowgotoright",
-        map-get($color, "ux", "pagination", "default", "icon")
-      );
+      @include icon("double_chevron_right", var(--ilo-color-blue-dark));
     }
 
     &:hover {
       &::before {
-        @include dataurlicon(
-          "arrowgotoright",
-          map-get($color, "ux", "pagination", "hover", "icon")
-        );
+        @include icon("double_chevron_right", var(--ilo-color-blue));
       }
     }
 
@@ -204,19 +148,10 @@
       opacity: 0.45;
 
       &:hover {
-        background: map-get(
-          $color,
-          "ux",
-          "pagination",
-          "default",
-          "background"
-        );
+        background: var(--ilo-color-gray-light);
 
         &::before {
-          @include dataurlicon(
-            "caret_right",
-            map-get($color, "ux", "pagination", "default", "icon")
-          );
+          @include icon("chevron_right", var(--ilo-color-blue-dark));
         }
       }
     }

package/scss/components/_tabs.scss

@@ -106,12 +106,6 @@
           outline: none;
           border-top: px-to-rem(3px) solid $color-base-blue-medium;
           @include globaltransition("color, background-color, border-color");
-
-          &.has--tooltip {
-            .ilo--tooltip--wrapper {
-              @include dataurlicon("info", $color-base-blue-medium);
-            }
-          }
         }
       }
 

package/scss/components/_tag.scss

@@ -88,7 +88,7 @@
 
     &.icon__position--right {
       .ilo--icon {
-        @include dataurlicon("close", map-get($color, "tag", "text", "active"));
+        @include icon("close", var(--ilo-color-blue-dark));
         background-position: center;
         background-repeat: no-repeat;
         background-size: contain;
@@ -111,10 +111,7 @@
 
       &.icon__position--right {
         .ilo--icon {
-          @include dataurlicon(
-            "close",
-            map-get($color, "tag", "text", "hover")
-          );
+          @include icon("close", var(--ilo-color-blue));
         }
       }
     }
@@ -148,7 +145,7 @@
 
     &.icon__position--right {
       .ilo--icon {
-        @include dataurlicon("close", map-get($color, "tag", "text", "active"));
+        @include icon("close", var(--ilo-color-blue-dark));
 
         height: 100%;
         max-height: 28px;
@@ -169,10 +166,7 @@
 
       &.icon__position--right {
         .ilo--icon {
-          @include dataurlicon(
-            "close",
-            map-get($color, "tag", "text", "hover")
-          );
+          @include icon("close", var(--ilo-color-blue));
         }
       }
     }