@ilo-org/styles 1.3.1 → 1.3.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ilo-org/styles",
   "description": "Styles for products using ILO's Design System",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/international-labour-organization/designsystem.git",
@@ -38,9 +38,9 @@
   "author": "@justintemps, @johnpauldavis, @avrilpearl, @ghlost",
   "license": "Apache-2.0",
   "dependencies": {
+    "@ilo-org/themes": "0.9.1",
     "@ilo-org/fonts": "1.0.0",
-    "@ilo-org/icons": "2.0.0",
-    "@ilo-org/themes": "0.9.1"
+    "@ilo-org/icons": "2.0.0"
   },
   "devDependencies": {
     "cssnano": "^7.0.6",
@@ -54,9 +54,7 @@
     "sass": "^1.62.1"
   },
   "scripts": {
-    "build": "gulp",
-    "build:lib": "pnpm build",
-    "build:docs": "pnpm build",
+    "build:lib": "gulp",
     "format": "prettier --check . --ignore-path ../../.prettierignore",
     "format:fix": "prettier --write . --ignore-path ../../.prettierignore",
     "lint": "eslint",

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
 // ======================================
@@ -189,56 +198,66 @@
   text-decoration: underline;
   text-underline-offset: px-to-rem(6px);
   text-decoration-thickness: px-to-rem(1.5px);
+  text-decoration-color: var(--ilo-color-blue);
   padding-bottom: spacing(1);
 
   &:visited {
     background: map-get($color, "link", "background", "visited");
     color: map-get($color, "link", "text", "visited");
+    text-decoration-color: var(--ilo-color-purple);
   }
 
   &:hover {
     background: map-get($color, "link", "background", "hover");
     color: map-get($color, "link", "text", "hover");
     text-decoration-thickness: 3px;
+    text-decoration-color: var(--ilo-color-blue);
   }
 
   &:active {
     background: map-get($color, "link", "background", "active");
     color: map-get($color, "link", "text", "active");
     text-decoration-thickness: 3px;
+    text-decoration-color: var(--ilo-color-blue-dark);
   }
 
   &:focus {
     background: map-get($color, "link", "background", "focus");
     color: map-get($color, "link", "text", "focus");
     text-decoration-thickness: 3px;
+    text-decoration-color: var(--ilo-color-blue-dark);
   }
 
   &--dark {
     background: map-get($color, "link", "background-dark", "default");
     color: map-get($color, "link", "text-dark", "default");
+    text-decoration-color: var(--ilo-color-gray-light);
 
     &:visited {
       background: map-get($color, "link", "background-dark", "visited");
       color: map-get($color, "link", "text-dark", "visited");
+      text-decoration-color: var(--ilo-color-gray-base);
     }
 
     &:hover {
       background: map-get($color, "link", "background-dark", "hover");
       color: map-get($color, "link", "text-dark", "hover");
       text-decoration-thickness: 3px;
+      text-decoration-color: var(--ilo-color-blue);
     }
 
     &:active {
       background: map-get($color, "link", "background-dark", "active");
       color: map-get($color, "link", "text-dark", "active");
       text-decoration-thickness: 3px;
+      text-decoration-color: var(--ilo-color-blue-dark);
     }
 
     &:focus {
       background: map-get($color, "link", "background-dark", "focus");
       color: map-get($color, "link", "text-dark", "focus");
       text-decoration-thickness: 3px;
+      text-decoration-color: var(--ilo-color-blue-dark);
     }
   }
 

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

@@ -57,18 +57,12 @@
     &::before {
       transform: translate(-50%, -50%) rotate(180deg);
 
-      @include dataurlicon(
-        "double_chevron_right",
-        map-get($color, "ux", "pagination", "default", "icon")
-      );
+      @include icon("double_chevron_right", var(--ilo-color-blue-dark));
     }
 
     &:hover {
       &::before {
-        @include dataurlicon(
-          "double_chevron_right",
-          map-get($color, "ux", "pagination", "hover", "icon")
-        );
+        @include icon("double_chevron_right", var(--ilo-color-blue));
       }
     }
 
@@ -79,10 +73,7 @@
         background: var(--ilo-color-gray-light);
 
         &::before {
-          @include dataurlicon(
-            "double_chevron_right",
-            map-get($color, "ux", "pagination", "default", "icon")
-          );
+          @include icon("double_chevron_right", var(--ilo-color-blue-dark));
         }
       }
     }
@@ -93,18 +84,12 @@
       transform: translate(-50%, -50%) rotate(180deg);
       width: px-to-rem(20px);
 
-      @include dataurlicon(
-        "chevron_right",
-        map-get($color, "ux", "pagination", "default", "icon")
-      );
+      @include icon("chevron_right", var(--ilo-color-blue-dark));
     }
 
     &:hover {
       &::before {
-        @include dataurlicon(
-          "chevron_right",
-          map-get($color, "ux", "pagination", "hover", "icon")
-        );
+        @include icon("chevron_right", var(--ilo-color-blue));
       }
     }
 
@@ -115,10 +100,7 @@
         background: var(--ilo-color-gray-light);
 
         &::before {
-          @include dataurlicon(
-            "chevron_right",
-            map-get($color, "ux", "pagination", "default", "icon")
-          );
+          @include icon("chevron_right", var(--ilo-color-blue-dark));
         }
       }
     }
@@ -129,18 +111,12 @@
       transform: translate(-50%, -50%) rotate(0);
       width: px-to-rem(20px);
 
-      @include dataurlicon(
-        "chevron_right",
-        map-get($color, "ux", "pagination", "default", "icon")
-      );
+      @include icon("chevron_right", var(--ilo-color-blue-dark));
     }
 
     &:hover {
       &::before {
-        @include dataurlicon(
-          "chevron_right",
-          map-get($color, "ux", "pagination", "hover", "icon")
-        );
+        @include icon("chevron_right", var(--ilo-color-blue));
       }
     }
 
@@ -151,10 +127,7 @@
         background: var(--ilo-color-gray-light);
 
         &::before {
-          @include dataurlicon(
-            "chevron_right",
-            map-get($color, "ux", "pagination", "default", "icon")
-          );
+          @include icon("chevron_right", var(--ilo-color-blue-dark));
         }
       }
     }
@@ -162,18 +135,12 @@
 
   &--last-page {
     &::before {
-      @include dataurlicon(
-        "double_chevron_right",
-        map-get($color, "ux", "pagination", "default", "icon")
-      );
+      @include icon("double_chevron_right", var(--ilo-color-blue-dark));
     }
 
     &:hover {
       &::before {
-        @include dataurlicon(
-          "double_chevron_right",
-          map-get($color, "ux", "pagination", "hover", "icon")
-        );
+        @include icon("double_chevron_right", var(--ilo-color-blue));
       }
     }
 
@@ -184,10 +151,7 @@
         background: var(--ilo-color-gray-light);
 
         &::before {
-          @include dataurlicon(
-            "chevron_right",
-            map-get($color, "ux", "pagination", "default", "icon")
-          );
+          @include icon("chevron_right", var(--ilo-color-blue-dark));
         }
       }
     }

package/scss/components/_promocard.scss

@@ -89,12 +89,8 @@
           }
 
           #{$self}--title {
-            @include font-styles("headline-4");
+            @include font-styles("headline-5");
             margin-bottom: spacing(2);
-
-            @include breakpoint("md") {
-              @include font-styles("headline-2");
-            }
           }
 
           #{$self}--intro {

package/scss/components/_richtext.scss

@@ -109,9 +109,9 @@
 
   // Horizontal rule (hr) styles
   hr {
-    background-color: var(--ilo-color-borders-default);
+    background-color: var(--ilo-color-gray-light);
     border: none;
-    height: px-to-rem(4px);
+    height: px-to-rem(3px);
   }
 
   .responsive-video-embed {

package/scss/components/_tabs.scss

@@ -83,9 +83,14 @@
         &[aria-selected="true"] {
           background-color: $color-base-neutrals-white;
           border-top: px-to-rem(3px) solid $color-ux-labels-actionable;
+          pointer-events: none;
           @include globaltransition("color, background-color, border-color");
         }
 
+        &[aria-selected="false"]:not(:hover) {
+          border-top: px-to-rem(3px) solid transparent;
+        }
+
         &.icon {
           .ilo--icon {
             height: px-to-rem(16px);
@@ -106,12 +111,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);
-            }
-          }
         }
       }
 
@@ -180,3 +179,37 @@
     }
   }
 }
+
+// This was proposed by base theme but isn't implemented in the design system yet
+.ilo--tabs--secondary {
+  display: flex;
+  flex-wrap: wrap;
+  margin-block: 2rem;
+  gap: 10px;
+
+  .ilo--tabs--selection--button {
+    display: block;
+    padding: 0.2em 1em;
+    font-size: 16px;
+    font-weight: 600;
+    color: #230050;
+    text-decoration: none;
+
+    &[aria-selected="false"] {
+      border-bottom: 2px solid transparent;
+      background-color: var(--ilo-color-background-highlight);
+
+      &:hover {
+        color: var(--ilo-color-blue);
+        border-bottom-color: var(--ilo-color-blue);
+        background-color: var(--ilo-color-background-hover);
+      }
+    }
+
+    &[aria-selected="true"] {
+      color: var(--ilo-color-blue-dark);
+      border-bottom: 2px solid var(--ilo-color-blue-dark);
+      pointer-events: none;
+    }
+  }
+}