@ilo-org/styles 1.13.0 → 1.14.0

package/package.json

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

package/scss/components/_button.scss

@@ -125,13 +125,6 @@
       color: var(--ilo-button-labels-hover-color);
     }
 
-    &:focus {
-      background-color: var(--ilo-color-background-focus);
-      border: var(--ilo-border-md) var(--ilo-color-borders-focus) solid;
-      color: var(--ilo-button-labels-focus-color);
-      outline: none;
-    }
-
     &:active {
       background-color: var(--ilo-color-background-active);
       border: var(--ilo-border-md) var(--ilo-color-borders-active) solid;
@@ -141,13 +134,16 @@
   }
 
   &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
     background-color: var(--ilo-color-background-focus);
     border: var(--ilo-border-md) var(--ilo-color-borders-focus) solid;
     box-shadow:
       4px 4px 0 1px var(--ilo-color-borders-focus) inset,
       -4px -4px 0 1px var(--ilo-color-borders-focus) inset;
     color: var(--ilo-button-labels-focus-color);
-    outline: none;
     @include globaltransition("color, background-color, border-color");
 
     &.#{$prefix}--small {

package/scss/components/_dropdown.scss

@@ -35,7 +35,7 @@
       @include globaltransition("background-color");
     }
 
-    &:has(select:hover):before {
+    &:has(select:enabled:hover):before {
       background-color: var(--ilo-dropdown-background-color-active);
     }
 
@@ -49,6 +49,28 @@
       top: var(--ilo-dropdown-button-icon-offset);
       @include icon("chevron_down", var(--ilo-dropdown-button-icon-color));
     }
+
+    &:has(select:disabled) {
+      --ilo-dropdown-button-icon-color: var(--ilo-dropdown-color);
+
+      &:after {
+        opacity: 0.45;
+      }
+
+      // manually adjusted the left border color to be slightly darker
+      &:before {
+        border-color: color-mix(
+          in srgb,
+          var(--ilo-dropdown-border-color) 45%,
+          transparent
+        );
+        border-inline-start-color: color-mix(
+          in srgb,
+          var(--ilo-dropdown-border-color) 60%,
+          transparent
+        );
+      }
+    }
   }
 
   appearance: none;
@@ -58,6 +80,7 @@
   color: var(--ilo-dropdown-color);
   width: 100%;
   margin: spacing(0);
+
   padding: 0 spacing(14) 0 spacing(4);
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -68,15 +91,18 @@
   @include typography("body-medium");
   @include globaltransition("background-color, border-color, color");
 
-  &:hover,
-  &:focus,
-  &:active {
+  &:enabled:is(:hover, :focus, :active) {
     border-inline-start-color: var(--ilo-color-blue);
     box-shadow: inset px-to-rem(1px) 0 0 0 var(--ilo-color-blue);
     background-color: var(--ilo-dropdown-background-color-active);
     --ilo-dropdown-color: var(--ilo-color-gray-charcoal);
   }
 
+  &:disabled {
+    pointer-events: none;
+    opacity: 0.45;
+  }
+
   [dir="rtl"] &:hover,
   [dir="rtl"] &:focus,
   [dir="rtl"] &:active {

package/scss/components/_hero.scss

@@ -242,7 +242,10 @@
         &[class*="semi-transparent"] {
           #{$c}--card-offset {
             background: rgba(35, 0, 80, 0.6);
-            box-shadow: 0.3px 0 0 0 rgba(35, 0, 80, 0.6);
+            // No seam-bridging box-shadow here: with a translucent fill the
+            // shadow composites over the card's own semi-transparent layer,
+            // producing a darker hairline at the offset/card boundary.
+            box-shadow: none;
           }
         }
       }
@@ -256,7 +259,9 @@
         &[class*="semi-transparent"] {
           #{$c}--card-offset {
             background: rgba(255, 255, 255, 0.6);
-            box-shadow: 0.3px 0 0 0 rgba(255, 255, 255, 0.6);
+            // See dark variant above: no box-shadow for translucent fills,
+            // otherwise the shadow doubles up into a darker seam line.
+            box-shadow: none;
           }
         }
       }

package/scss/components/_video.scss

@@ -167,6 +167,10 @@
       .vjs-volume-panel {
         display: none;
       }
+
+      .vjs-subs-caps-button {
+        display: none;
+      }
     }
   }
 
@@ -210,6 +214,126 @@
       @include videobutton("fullscreen");
     }
 
+    // Closed captions control
+    .vjs-subs-caps-button {
+      order: 3;
+      margin-right: px-to-rem(2px);
+      position: relative;
+      z-index: 30;
+
+      > .vjs-menu-button {
+        @include videobutton("closed_captions");
+      }
+
+      &.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));
+      }
+
+      .vjs-menu {
+        background: var(--ilo-color-brand-200);
+        border: 0;
+        bottom: calc(100% + #{px-to-rem(8px)});
+        display: none;
+        left: 50%;
+        min-width: px-to-rem(190px);
+        position: absolute;
+        right: auto;
+        transform: translateX(-50%);
+        z-index: 40;
+        padding-top: px-to-rem(28px);
+
+        // gap added to ensure vjs-hover persists when hovering to menu from captions button
+        &::after {
+          content: "";
+          height: px-to-rem(8px);
+          left: 0;
+          position: absolute;
+          right: 0;
+          top: 100%;
+        }
+
+        &:before {
+          @include typography("body-xsmall");
+          content: var(--ilo-video-choose-subtitle-text, "Choose subtitles");
+          color: var(--ilo-color-gray-charcoal);
+          font-weight: var(--ilo-font-weight-bold);
+          left: px-to-rem(12px);
+          position: absolute;
+          top: px-to-rem(8px);
+        }
+      }
+
+      .vjs-menu.vjs-lock-showing:not(.vjs-hidden),
+      &.vjs-hover .vjs-menu:not(.vjs-hidden),
+      &:hover .vjs-menu:not(.vjs-hidden),
+      &:focus-within .vjs-menu:not(.vjs-hidden) {
+        display: block;
+      }
+
+      .vjs-menu-content {
+        margin: 0;
+        max-height: px-to-rem(120px);
+        overflow-y: auto;
+        padding: 0 0 px-to-rem(4px);
+      }
+
+      .vjs-menu-item {
+        @include typography("body-xsmall");
+        align-items: center;
+        color: var(--ilo-color-gray-charcoal);
+        display: flex;
+        gap: px-to-rem(8px);
+        line-height: px-to-rem(20px);
+        padding: px-to-rem(2px) px-to-rem(12px);
+        position: relative;
+        text-shadow: none;
+        white-space: nowrap;
+
+        &:hover {
+          background: var(--ilo-color-neutrals-200);
+        }
+
+        &:before {
+          background: transparent;
+          border: 2px solid var(--ilo-color-neutrals-500);
+          border-radius: 50%;
+          content: "";
+          display: inline-block;
+          height: px-to-rem(10px);
+          width: px-to-rem(10px);
+          flex-shrink: 0;
+        }
+
+        &.vjs-selected {
+          color: var(--ilo-color-gray-charcoal);
+
+          &:before {
+            border-color: var(--ilo-color-neutrals-black);
+            box-shadow: inset 0 0 0 px-to-rem(2px) var(--ilo-color-neutrals-200);
+            background: var(--ilo-color-neutrals-black);
+          }
+        }
+      }
+
+      .vjs-menu-item[tabindex="-1"]:first-child .vjs-menu-item-text {
+        font-size: 0;
+
+        &:after {
+          @include typography("body-xsmall");
+          content: var(--ilo-video-none, "None");
+          font-size: px-to-rem(12px);
+          line-height: px-to-rem(20px);
+        }
+      }
+
+      .vjs-menu .vjs-icon-placeholder {
+        display: none;
+      }
+    }
+
     // Duration Bar
     .vjs-progress-control {
       order: 2;
@@ -287,7 +411,7 @@
 
     // Volume Control
     .vjs-volume-panel {
-      order: 3;
+      order: 4;
       border-bottom: 1px solid;
       bottom: 0;
       flex-direction: column;

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

@@ -135,6 +135,11 @@
       display: inline-flex;
       align-items: center;
       padding-inline: spacing(3);
+      background: none;
+      border: 0;
+      cursor: pointer;
+      font: inherit;
+      color: inherit;
 
       &:after {
         content: "";

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

@@ -175,6 +175,12 @@
   display: flex;
   align-items: center;
   padding-inline: spacing(2);
+  background: none;
+  border: 0;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  text-decoration: none;
 
   @include breakpoint("lg", true) {
     display: none;

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

@@ -29,8 +29,13 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
+      width: 100%;
       text-decoration: none;
       cursor: pointer;
+      background: none;
+      border: 0;
+      font: inherit;
+      color: inherit;
 
       &__label {
         @include typography("highlight-medium");