@ilo-org/styles 1.7.2 → 1.8.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ilo-org/styles",
   "description": "Styles for products using ILO's Design System",
-  "version": "1.7.2",
+  "version": "1.8.0",
   "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/icons": "2.1.0",
     "@ilo-org/themes": "0.9.1",
-    "@ilo-org/fonts": "1.0.0",
-    "@ilo-org/icons": "2.1.0"
+    "@ilo-org/fonts": "1.0.0"
   },
   "devDependencies": {
     "cssnano": "^7.0.6",

package/scss/components/_callout.scss

@@ -8,13 +8,13 @@
   transition: max-height 225ms ease-out;
   $callout: &;
 
-  &--collapse:not(.ilo--callout--open) {
-    max-height: 64px;
+  &__collapse {
+    max-height: px-to-rem(64px);
     overflow: hidden;
   }
 
-  &--open {
-    max-height: 300px;
+  &__open {
+    max-height: px-to-rem(300px);
     overflow: hidden;
 
     #{$callout}--toggle--icon {
@@ -22,7 +22,39 @@
     }
   }
 
-  &__sidebar {
+  &__error {
+    background: var(--ilo-color-red-ramp);
+
+    #{$callout}--sidebar {
+      background: var(--ilo-color-red);
+    }
+  }
+
+  &__info {
+    background: var(--ilo-color-blue-light);
+
+    #{$callout}--sidebar {
+      background: var(--ilo-color-blue);
+    }
+  }
+
+  &__success {
+    background: var(--ilo-color-green-ramp);
+
+    #{$callout}--sidebar {
+      background: var(--ilo-color-green);
+    }
+  }
+
+  &__warning {
+    background: var(--ilo-color-yellow-ramp);
+
+    #{$callout}--sidebar {
+      background: var(--ilo-color-yellow);
+    }
+  }
+
+  &--sidebar {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -34,43 +66,40 @@
     }
   }
 
-  &__content {
+  &--content {
+    color: var(--ilo-color-gray-charcoal);
     padding: spacing(6);
     width: 100%;
     font-size: px-to-rem(14px);
   }
 
-  &__header {
+  &--header {
     display: flex;
     justify-content: space-between;
     padding-block-end: spacing(3);
   }
 
-  &__title {
-    @include font-styles("nav-bold-b");
-    font-family: var(--ilo-fonts-display);
+  &--title {
+    @include typography("highlight-medium");
     font-weight: 700;
   }
 
-  &__description {
+  &--description {
     font-weight: 400;
   }
 
   &--toggle {
-    @include font-styles("nav-bold-b");
-
+    @include typography("highlight-medium-bold");
     background: none;
     border: none;
     color: var(--ilo-color-blue-dark);
     cursor: pointer;
-    font-family: var(--ilo-fonts-display);
     font-weight: 500;
     padding-inline-end: spacing(8);
     position: relative;
 
-    &__icon {
+    &--icon {
       @include icon("chevron_down", var(--ilo-color-blue-dark));
-
       background-position: right;
       background-repeat: no-repeat;
       display: inline-block;
@@ -84,63 +113,33 @@
     }
   }
 
-  &__footer {
+  &--footer {
     padding-block-start: spacing(5);
   }
 
-  .icon {
+  &--icon {
     background-repeat: no-repeat;
     background-size: contain;
     display: block;
     height: px-to-rem(24px);
     width: px-to-rem(24px);
 
-    &__error {
-      @include icon("notification_error", var(--ilo-color-white));
-    }
+    &__alert {
+      &__error {
+        @include icon("notification_error", var(--ilo-color-white));
+      }
 
-    &__info {
-      @include icon("notification_info", var(--ilo-color-white));
-    }
-
-    &__success {
-      @include icon("notification_success", var(--ilo-color-white));
-    }
-
-    &__warning {
-      @include icon("notification_warning", var(--ilo-color-white));
-    }
-  }
-
-  &__error {
-    background: var(--ilo-color-red-ramp);
-
-    #{$callout}__sidebar {
-      background: var(--ilo-color-red);
-    }
-  }
-
-  &__info {
-    background: var(--ilo-color-blue-ramp);
-
-    #{$callout}__sidebar {
-      background: var(--ilo-color-blue);
-    }
-  }
-
-  &__success {
-    background: var(--ilo-ramp-green);
+      &__info {
+        @include icon("notification_info", var(--ilo-color-white));
+      }
 
-    #{$callout}__sidebar {
-      background: var(--ilo-color-green);
-    }
-  }
+      &__success {
+        @include icon("notification_success", var(--ilo-color-white));
+      }
 
-  &__warning {
-    background: var(--ilo-color-yellow-ramp);
-
-    #{$callout}__sidebar {
-      background: var(--ilo-color-yellow);
+      &__warning {
+        @include icon("notification_warning", var(--ilo-color-white));
+      }
     }
   }
 }

package/scss/components/_languagetoggle.scss

@@ -1,12 +1,13 @@
 @use "../tokens" as *;
 @use "../functions" as *;
 @import "../mixins";
+@import "../animations";
 
 .ilo--language-toggle {
   --ilo--language-toggle-color: var(--ilo-color-white);
-  --ilo--language-toggle-color-hover: var(--ilo-color-blue);
+  --ilo--language-toggle-color-hover: var(--ilo-color-white);
   --ilo--language-toggle-bg: transparent;
-  --ilo--language-toggle-bg-hover: transparent;
+  --ilo--language-toggle-bg-hover: var(--ilo-color-blue-dark);
 
   &__theme {
     &__dark {
@@ -15,16 +16,13 @@
     }
   }
 
-  &:hover,
-  &__open {
-    --ilo--language-toggle-color: var(--ilo--language-toggle-color-hover);
-    --ilo--language-toggle-bg: var(--ilo--language-toggle-bg-hover);
-  }
-
   display: inline-block;
+  height: 100%;
 
   &--container {
-    // Button unsets to perserve accessibility
+    @include globaltransition("background-color, color");
+
+    height: 100%;
     background: none;
     border: none;
     padding: 0;
@@ -35,16 +33,19 @@
     box-shadow: none;
     appearance: none;
     cursor: pointer;
-
     display: flex;
     align-items: center;
     gap: px-to-rem(4px);
     cursor: pointer;
     width: fit-content;
     background-color: var(--ilo--language-toggle-bg);
+    color: var(--ilo--language-toggle-color);
 
-    &:hover {
-      background-color: var(--ilo--language-toggle-bg-hover);
+    &:hover,
+    &:focus,
+    &__open {
+      --ilo--language-toggle-color: var(--ilo--language-toggle-color-hover);
+      --ilo--language-toggle-bg: var(--ilo--language-toggle-bg-hover);
     }
   }
 
@@ -66,8 +67,6 @@
 
   &--action {
     color: var(--ilo--language-toggle-color);
-
-    //move this when the new typography is ready ##896
     font-family: var(--ilo-fonts-display);
     font-weight: 700;
     font-size: px-to-rem(14px);
@@ -94,5 +93,9 @@
       visibility: visible;
       transform: translateY(0);
     }
+
+    &:focus {
+      outline: none;
+    }
   }
 }

package/scss/components/_scorecard.scss

@@ -40,8 +40,9 @@
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
-          height: auto;
+          height: 100%;
           width: 100%;
+          object-fit: cover;
         }
       }
 
@@ -56,7 +57,14 @@
       #{$self}--title {
         @include typography("heading-3");
         margin-bottom: spacing(6);
-        color: var(--ilo-color-blue-dark);
+
+        #{$self}__theme__dark & {
+          color: var(--ilo-color-blue-dark);
+        }
+
+        #{$self}__theme__light & {
+          color: var(--ilo-color-white);
+        }
       }
 
       #{$self}--area {
@@ -78,8 +86,12 @@
         display: flex;
         flex-flow: row nowrap;
         justify-content: flex-start;
-        align-items: center;
+        align-items: flex-start;
         gap: spacing(2);
+
+        .ilo--icon {
+          flex: 0 0 20px;
+        }
       }
 
       &#{$self}__size {

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

@@ -35,35 +35,20 @@
     cursor: pointer;
 
     &-logo {
-      display: flex;
-      align-items: center;
       height: px-to-rem(38px);
-      padding-inline-end: spacing(4);
-      border-right: 1px solid var(--ilo-color-white);
-
-      [dir="rtl"] & {
-        padding-inline-start: spacing(4);
-        border-right: none;
-        border-left: 1px solid var(--ilo-color-white);
-      }
+      width: auto;
 
       img {
         height: 100%;
       }
     }
-
-    &-name {
-      padding-inline-start: spacing(4);
-      color: var(--ilo-color-white);
-      @include typography("heading-3");
-      font-size: px-to-rem(16px); //Designs have wrong config
-    }
   }
 
   &__menu {
     display: flex;
     align-items: center;
-    gap: px-to-rem(48px);
+    height: 100%;
+    // gap: px-to-rem(48px);
 
     @include breakpoint("lg", true) {
       display: none;
@@ -113,8 +98,6 @@
       height: inherit;
       width: 100%;
       display: flex;
-      gap: px-to-rem(12px);
-      padding-inline: spacing(3);
       align-items: center;
     }
 
@@ -126,34 +109,46 @@
       display: flex;
       align-items: center;
       text-wrap: nowrap;
+      padding-inline: spacing(3);
 
-      &:hover {
-        color: var(--ilo-color-blue);
+      &:hover,
+      &:focus {
+        background-color: var(--ilo-color-blue-dark);
+        color: var(--ilo-color-white);
       }
     }
 
     &-language {
-      .ilo--language-toggle__theme__dark {
-        --ilo--language-toggle-color-hover: var(--ilo-color-blue);
-      }
       position: relative;
       height: 100%;
       display: flex;
       align-items: center;
+
+      button {
+        padding-inline: spacing(3);
+      }
     }
 
     &-search {
       --ilo-subsite-nav-widget-bar-search-color: var(--ilo-color-blue-dark);
       height: 100%;
-      display: flex;
+      display: inline-flex;
       align-items: center;
-      width: px-to-rem(24px);
-      height: px-to-rem(24px);
+      padding-inline: spacing(3);
 
-      @include icon("search", var(--ilo-subsite-nav-widget-bar-search-color));
+      &:after {
+        content: "";
+        display: flex;
+        align-items: center;
+        width: px-to-rem(24px);
+        height: px-to-rem(24px);
+        @include icon("search", var(--ilo-subsite-nav-widget-bar-search-color));
+      }
 
-      &:hover {
-        --ilo-subsite-nav-widget-bar-search-color: var(--ilo-color-blue);
+      &:hover,
+      &:focus {
+        --ilo-subsite-nav-widget-bar-search-color: var(--ilo-color-white);
+        background-color: var(--ilo-color-blue-dark);
       }
     }
   }

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

@@ -83,18 +83,9 @@
         text-decoration: none;
         color: var(--ilo-color-white);
 
-        &:hover {
-          background-color: var(--ilo-color-blue-lighter);
-          color: var(--ilo-color-blue);
-        }
-      }
-
-      &__language {
-        &:hover {
-          height: 100%;
-          display: flex;
-          align-items: center;
-          background-color: var(--ilo-color-blue-lighter);
+        &:hover,
+        &:focus {
+          background-color: var(--ilo-color-blue-dark);
         }
       }
     }
@@ -133,8 +124,8 @@
 
       &__logo img {
         height: 100%;
-        padding-inline-end: spacing(4);
-        border-inline-end: 1px solid var(--ilo-color-blue-dark);
+        height: px-to-rem(72px);
+        width: auto;
       }
 
       &__name {
@@ -169,6 +160,7 @@
     }
 
     &-menu {
+      height: 100%;
       @include breakpoint("lg", true) {
         display: none;
       }
@@ -185,20 +177,13 @@
 
       &__logo {
         padding-inline-end: spacing(4);
-        border-inline-end: 1px solid var(--ilo-color-white);
         height: px-to-rem(38px);
 
         img {
           height: 100%;
+          width: auto;
         }
       }
-
-      &__name {
-        padding-inline-start: spacing(4);
-        color: var(--ilo-color-white);
-        @include typography("heading-3");
-        font-size: px-to-rem(16px); //Designs have wrong config
-      }
     }
 
     &-search {
@@ -222,9 +207,10 @@
         cursor: pointer;
       }
 
-      &:hover {
-        --ilo-subsite_nav_complex-search-color: var(--ilo-color-blue);
-        background-color: var(--ilo-color-blue-lighter);
+      &:hover,
+      &:focus {
+        --ilo-subsite_nav_complex-search-color: var(--ilo-color-white);
+        background-color: var(--ilo-color-blue-dark);
       }
     }
 

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

@@ -2,6 +2,7 @@
 @use "../../functions" as *;
 @import "../../mixins";
 @import "../../config";
+@import "../../animations";
 
 .ilo--nav-menu {
   display: flex;
@@ -14,16 +15,13 @@
 
   &__list {
     display: flex;
-    gap: spacing(12);
     align-items: center;
-
-    @include breakpoint("xl", true) {
-      gap: spacing(6);
-    }
+    height: 100%;
   }
 
   &__item {
     display: flex;
+    height: 100%;
   }
 
   &__link {
@@ -33,29 +31,24 @@
     position: relative;
     padding-bottom: 2px;
     text-wrap: nowrap;
-
-    &::after {
-      content: "";
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 0;
-      height: 2px;
-      background-color: var(--ilo-color-white);
-      transition: width 0.3s ease;
-    }
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    @include globaltransition("background-color");
+    padding-inline: spacing(6);
 
     &--active,
     &:hover,
     &:focus,
     &:active {
-      &::after {
-        width: 100%;
-      }
+      background-color: var(--ilo-color-blue-dark);
+      outline: none;
     }
   }
 
   &__more {
+    @include globaltransition("background-color, border-color");
+
     @include breakpoint("lg", true) {
       display: none;
     }
@@ -82,10 +75,11 @@
 
     &--open,
     &:hover,
+    &:focus,
     &:active {
-      --ilo-nav_menu-icon-color: var(--ilo-color-blue);
-      background-color: var(--ilo-color-blue-lighter);
-      color: var(--ilo-color-blue);
+      outline: none;
+      border-color: var(--ilo-color-blue-dark);
+      background-color: var(--ilo-color-blue-dark);
     }
   }
 }

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

@@ -7,34 +7,18 @@
   &__branding {
     display: flex;
     align-items: center;
-    height: px-to-rem(38px);
   }
 
   &__logo {
     display: flex;
     align-items: center;
-    padding-inline-end: spacing(4);
-    border-right: 1px solid var(--ilo-color-blue-dark);
-
-    [dir="rtl"] & {
-      padding-inline-start: spacing(4);
-      border-right: none;
-      border-left: 1px solid var(--ilo-color-blue-dark);
-    }
+    height: px-to-rem(38px);
 
     img {
       height: 100%;
     }
   }
 
-  &__name {
-    padding-inline-start: spacing(4);
-    font-weight: 700;
-    font-size: px-to-rem(13);
-    line-height: 125%;
-    color: var(--ilo-color-blue-dark);
-  }
-
   &__widgets {
     &-search {
       padding: spacing(4) 0;