@ilo-org/styles 1.9.0 → 1.10.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ilo-org/styles",
   "description": "Styles for products using ILO's Design System",
-  "version": "1.9.0",
+  "version": "1.10.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/international-labour-organization/designsystem.git",
@@ -39,7 +39,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@ilo-org/fonts": "2.0.0",
-    "@ilo-org/icons": "2.2.0",
+    "@ilo-org/icons": "2.4.0",
     "@ilo-org/themes": "0.9.1"
   },
   "devDependencies": {

package/scss/_animations.scss

@@ -2,7 +2,6 @@
 //    $ANIMATIONS
 //*------------------------------------*/
 @use "tokens" as *;
-@import "mixins";
 
 // ======================================
 // Global transition
@@ -39,3 +38,50 @@
     transform: rotate(360deg);
   }
 }
+
+// ======================================
+// Animation for loading skeletons
+// ======================================
+@mixin pulse-animation() {
+  animation-name: pulse;
+  animation-delay: 0.5s;
+  animation-duration: 2s;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.4;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/scss/_mixins.scss

@@ -3,6 +3,7 @@
 //*------------------------------------*/
 @use "tokens" as *;
 @use "functions" as *;
+@use "animations" as *;
 @use "theme/breakpoints" as *;
 
 // ======================================
@@ -544,3 +545,11 @@
     @error "Typography variant '#{$variant}' not recognized";
   }
 }
+
+@mixin skeleton-element($height, $width) {
+  height: px-to-rem($height);
+  width: $width;
+  background: var(--ilo-skeleton-element-background-color);
+
+  @include pulse-animation();
+}

package/scss/components/_audioplayer.scss

@@ -0,0 +1,206 @@
+@use "../functions" as *;
+@import "../mixins";
+
+.ilo--audio-player {
+  &--progress-bar {
+    height: px-to-rem(8px);
+    background-color: var(--ilo-color-gray-accessible);
+    position: relative;
+    cursor: pointer;
+  }
+  &--progress-complete {
+    --progress: 0%;
+    width: var(--progress);
+    height: 100%;
+    background-color: var(--ilo-color-yellow-500);
+    position: absolute;
+    top: 0;
+    left: 0;
+    transition: width 0.5s;
+  }
+  &--body {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto auto;
+    grid-template-areas:
+      "left left"
+      "center right";
+    align-items: center;
+    color: var(--ilo-color-white);
+    background-color: var(--ilo-color-gray-charcoal);
+    padding: spacing(3) 0;
+    row-gap: spacing(3);
+  }
+  &--left {
+    grid-area: left;
+    border-bottom: 1px solid var(--ilo-color-gray-accessible);
+    padding-inline: spacing(3);
+    padding-block-end: spacing(3);
+  }
+  &--track-name {
+    font-size: var(--ilo-font-size-sm);
+    font-weight: var(--ilo-font-weight-medium);
+    line-height: var(--ilo-line-height-lg);
+  }
+  &--track-details {
+    display: flex;
+    font-size: var(--ilo-font-size-xsm);
+    line-height: var(--ilo-line-height-xlg);
+    color: var(--ilo-color-gray-light);
+  }
+  &--track-creator::before {
+    content: "•";
+    margin-right: spacing(2);
+  }
+  &--track-programme {
+    text-wrap: nowrap;
+  }
+  &--track-creator {
+    margin-left: spacing(2);
+    text-wrap: nowrap;
+  }
+  &--center {
+    grid-area: center;
+    display: flex;
+    align-items: center;
+    gap: spacing(1);
+    padding-inline-start: spacing(3);
+  }
+  &--skip-button {
+    border: none;
+    display: flex;
+    cursor: pointer;
+    padding: spacing(2);
+  }
+  &--skip-button:hover {
+    background-color: var(--ilo-color-brand-100);
+    color: var(--ilo-color-brand-600);
+  }
+  &--play-button {
+    display: flex;
+    align-items: center;
+    background-color: var(--ilo-color-yellow-500);
+    color: var(--ilo-color-brand-800);
+    border-radius: 50%;
+    cursor: pointer;
+    padding: spacing(1);
+    border: none;
+  }
+  &--play-button:hover {
+    background-color: var(--ilo-color-brand-100);
+  }
+  [aria-label="Play"] &--play-icon {
+    display: block;
+  }
+  [aria-label="Play"] &--pause-icon {
+    display: none;
+  }
+  [aria-label="Pause"] &--play-icon {
+    display: none;
+  }
+  [aria-label="Pause"] &--pause-icon {
+    display: block;
+  }
+  &--right {
+    grid-area: right;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding-inline-end: spacing(3);
+  }
+  &--duration {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+  }
+  &--duration-played {
+    font-size: var(--ilo-font-size-sm);
+    font-weight: var(--ilo-font-weight-bold);
+    line-height: var(--ilo-line-height-lg);
+  }
+  &--duration-total {
+    color: var(--ilo-color-gray-light);
+    font-size: var(--ilo-font-size-2xsm);
+    line-height: var(--ilo-line-height-2xlg);
+  }
+  &--separator {
+    height: 32px;
+    border-left: 1px solid var(--ilo-color-gray-accessible);
+    margin: spacing(1) spacing(3);
+  }
+  &--volume-icon {
+    border: none;
+    background: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+  }
+  [aria-label="Mute"] &--sound-on-icon {
+    display: block;
+  }
+  [aria-label="Mute"] &--sound-off-icon {
+    display: none;
+  }
+  [aria-label="Unmute"] &--sound-on-icon {
+    display: none;
+  }
+  [aria-label="Unmute"] &--sound-off-icon {
+    display: block;
+  }
+  &--volume-slider {
+    --progress: 100%;
+    margin-left: spacing(1);
+    background: var(--ilo-color-yellow-500);
+    border-radius: 4px;
+    height: 4px;
+    width: 50%;
+    background: linear-gradient(
+      to right,
+      var(--ilo-color-yellow-500) 0%,
+      var(--ilo-color-yellow-500) var(--progress, 50%),
+      var(--ilo-color-gray-accessible) var(--progress, 50%),
+      var(--ilo-color-gray-accessible) 100%
+    );
+    [dir="rtl"] & {
+      background: linear-gradient(
+        to left,
+        var(--ilo-color-yellow-500) 0%,
+        var(--ilo-color-yellow-500) var(--progress, 50%),
+        var(--ilo-color-gray-accessible) var(--progress, 50%),
+        var(--ilo-color-gray-accessible) 100%
+      );
+    }
+  }
+  &--volume-slider::-webkit-slider-thumb {
+    // Reset default styles
+    border: none;
+    -webkit-appearance: none;
+
+    width: 16px;
+    height: 16px;
+    background: var(--ilo-color-gray-light);
+    border-radius: 50%;
+    cursor: pointer;
+    margin-top: -2px; // Center thumb on track
+  }
+
+  @include breakpoint("md") {
+    &--body {
+      grid-template-columns: 1fr 1fr 1fr;
+      grid-template-rows: auto;
+      grid-template-areas: "left center right";
+    }
+    &--left {
+      border-bottom: none;
+      padding-inline: spacing(3) 0;
+      padding-block: 0;
+    }
+    &--center {
+      justify-content: center;
+      padding: 0;
+    }
+    &--volume-slider {
+      width: 40%;
+    }
+  }
+}

package/scss/components/_card.scss

@@ -133,6 +133,7 @@ $link-hover-selectors: ".ilo--card--link:hover, .ilo--card--link:focus, .ilo--ca
     &__light {
       background: var(--ilo-color-white);
       border-bottom: px-to-rem(3px) solid var(--ilo-color-gray-base);
+      --ilo-skeleton-element-background-color: var(--ilo-color-gray-light);
     }
 
     &__soft {

package/scss/components/_datacard.scss

@@ -18,6 +18,29 @@
       position: relative;
       width: 100%;
 
+      &#{$self}__loading {
+        --ilo-skeleton-element-background-color: var(--ilo-color-gray-base);
+        background-color: var(--ilo-color-gray-light);
+      }
+
+      #{$self}--skeleton--eyebrow {
+        @include skeleton-element(12px, 20%);
+      }
+
+      #{$self}--skeleton--image {
+        @include skeleton-element(279px, 200px);
+        margin-top: spacing(8);
+      }
+
+      #{$self}--skeleton--label {
+        @include skeleton-element(14px, 20%);
+      }
+
+      #{$self}--skeleton--copy {
+        @include skeleton-element(14px, 100%);
+        margin-top: spacing(2);
+      }
+
       &--content {
         &-links-list {
           display: flex;

package/scss/components/_detailcard.scss

@@ -16,6 +16,48 @@
       padding: spacing(8) spacing(4);
       position: relative;
 
+      #{$self}--skeleton--image {
+        @include skeleton-element(64px, 100%);
+      }
+
+      #{$self}--skeleton--eyebrow {
+        @include skeleton-element(12px, 20%);
+      }
+
+      #{$self}--skeleton--title-1 {
+        @include skeleton-element(14px, 90%);
+        margin-top: spacing(4);
+      }
+
+      #{$self}--skeleton--title-2 {
+        @include skeleton-element(14px, 100%);
+        margin-top: spacing(2);
+      }
+
+      #{$self}--skeleton--intro-1 {
+        @include skeleton-element(14px, 80%);
+        margin-top: spacing(4);
+      }
+      #{$self}--skeleton--intro-2 {
+        @include skeleton-element(14px, 85%);
+        margin-top: spacing(2);
+      }
+
+      #{$self}--skeleton--intro-3 {
+        @include skeleton-element(14px, 90%);
+        margin-top: spacing(2);
+      }
+
+      #{$self}--skeleton--intro-4 {
+        @include skeleton-element(14px, 75%);
+        margin-top: spacing(2);
+      }
+
+      #{$self}--skeleton--intro-5 {
+        @include skeleton-element(14px, 35%);
+        margin-top: spacing(2);
+      }
+
       #{$self}--wrap {
         display: flex;
         flex-flow: column;
@@ -103,6 +145,41 @@
 
         &__wide,
         &__fluid {
+          #{$self}--content {
+            flex: 1;
+          }
+
+          #{$self}--skeleton--image {
+            @include skeleton-element(130px, 100%);
+          }
+
+          #{$self}--skeleton--title-1 {
+            @include skeleton-element(14px, 80%);
+          }
+
+          #{$self}--skeleton--title-2 {
+            display: none;
+          }
+
+          #{$self}--skeleton--intro-1 {
+            @include skeleton-element(14px, 90%);
+          }
+          #{$self}--skeleton--intro-2 {
+            @include skeleton-element(14px, 85%);
+          }
+
+          #{$self}--skeleton--intro-3 {
+            @include skeleton-element(14px, 86%);
+          }
+
+          #{$self}--skeleton--intro-4 {
+            @include skeleton-element(14px, 50%);
+          }
+
+          #{$self}--skeleton--intro-5 {
+            display: none;
+          }
+
           @include breakpoint("md") {
             padding: spacing(8) spacing(4) spacing(8) spacing(0);
 

package/scss/components/_factlistcard.scss

@@ -56,6 +56,16 @@
         }
       }
 
+      #{$self}--skeleton--title {
+        @include skeleton-element(20px, 60%);
+        margin-bottom: spacing(4);
+      }
+
+      #{$self}--skeleton--list-item {
+        @include skeleton-element(16px, 95%);
+        display: table-cell;
+      }
+
       #{$self}--title {
         color: $brand-ilo-black;
         font-size: var(--ilo-font-size-xlg);

package/scss/components/_featurecard.scss

@@ -9,12 +9,30 @@
   &__type {
     &__feature {
       --max-width: #{px-to-rem(412px)};
-
       display: flex;
       flex-flow: column;
       margin-top: 0;
       position: relative;
 
+      #{$self}--skeleton--image {
+        @include skeleton-element(232px, 100%);
+      }
+
+      #{$self}--skeleton--eyebrow {
+        @include skeleton-element(12px, 20%);
+      }
+
+      #{$self}--skeleton--title {
+        @include skeleton-element(24px, 80%);
+        margin-top: spacing(4);
+      }
+
+      #{$self}--skeleton--date {
+        @include skeleton-element(24px, 60%);
+        margin-top: spacing(4);
+        margin-bottom: spacing(8);
+      }
+
       #{$self}--image--wrapper {
         height: 0;
         overflow: hidden;
@@ -82,6 +100,10 @@
               flex-direction: row;
             }
 
+            #{$self}--skeleton--image {
+              width: 50%;
+            }
+
             #{$self}--content {
               display: flex;
               flex-wrap: wrap;

package/scss/components/_footer.scss

@@ -1,13 +1,10 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @import "../animations";
 @import "../mixins";
 
 .ilo--footer {
-  $c: &;
-
-  border-bottom: px-to-rem(3px) solid $color-base-neutrals-light;
-  background-color: $color-base-blue-dark;
+  border-bottom: px-to-rem(3px) solid var(--ilo-color-gray-accessible);
+  background-color: var(--ilo-color-blue-dark);
   position: relative;
   width: 100%;
   overflow: hidden;
@@ -18,7 +15,7 @@
 
     &:after {
       content: "";
-      border-bottom: px-to-rem(6px) solid $color-base-red-medium;
+      border-bottom: px-to-rem(6px) solid var(--ilo-color-red);
       width: 200vw;
       position: absolute;
       bottom: 0;
@@ -41,36 +38,22 @@
       padding: 0;
     }
 
-    background-color: $color-base-neutrals-lighter;
+    background-color: var(--ilo-color-gray-light);
     padding: spacing(8) spacing(4) 0;
     min-height: px-to-rem(56px);
   }
 
   &--headline {
-    color: $color-base-neutrals-white;
-    font-family: var(--ilo-fonts-display);
-    font-weight: map-get($type, "weights", "label");
+    color: var(--ilo-color-white);
     @include typography("highlight-medium-bold");
-    line-height: px-to-rem(21.6px);
-    @include textmargin(
-      "margin-bottom",
-      10px,
-      "body-small",
-      "display",
-      "body-xxs",
-      "display"
-    );
     margin-top: spacing(5);
   }
 
   &--subhead {
-    color: #bedcfa;
-    font-family: var(--ilo-fonts-display);
-    font-weight: map-get($type, "weights", "section");
+    color: var(--ilo-color-blue-light);
     margin-top: spacing(1);
-    @include typography("body-xsmall");
-    line-height: px-to-rem(18.56px);
     margin-bottom: spacing(12);
+    @include typography("body-xsmall");
   }
 
   .address {
@@ -78,16 +61,8 @@
   }
 
   .address--line {
-    color: $color-base-neutrals-white;
+    color: var(--ilo-color-white);
     @include typography("body-xsmall");
-    @include textmargin(
-      "margin-bottom",
-      8px,
-      "body-xxs",
-      "display",
-      "body-xxs",
-      "display"
-    );
   }
 
   .connect {
@@ -100,9 +75,8 @@
 
   .legal,
   .secondarylinks {
-    color: $color-base-neutrals-medium;
+    color: var(--ilo-color-gray-accessible);
     display: inline;
-    font-family: var(--ilo-fonts-copy);
     @include typography("body-xsmall");
   }
 
@@ -120,29 +94,25 @@
   }
 
   .secondarylinks--list--item a {
-    color: $color-base-neutrals-medium;
+    color: var(--ilo-color-gray-accessible);
     @include globaltransition("color, border-color");
 
     &:visited {
-      color: map-get($color, "link", "text-footer", "visited");
-      @include globaltransition("color, border-color");
+      color: var(--ilo-color-purple);
     }
 
     &:hover {
-      color: map-get($color, "link", "text-footer", "hover");
-      @include globaltransition("color, border-color");
+      color: var(--ilo-color-blue);
     }
 
     &:active {
-      color: map-get($color, "link", "text-footer", "active");
+      color: var(--ilo-color-blue-dark);
       outline: none;
-      @include globaltransition("color, border-color");
     }
 
     &:focus {
-      color: map-get($color, "link", "text-footer", "focus");
+      color: var(--ilo-color-blue-dark);
       outline: none;
-      @include globaltransition("color, border-color");
     }
   }
 
@@ -150,8 +120,7 @@
     // General Styles
     display: flex;
     flex-flow: row nowrap;
-    color: $color-ux-labels-actionable;
-    font-family: var(--ilo-fonts-display);
+    color: var(--ilo-color-blue-dark);
     @include typography("highlight-medium");
     position: relative;
     text-decoration: none;
@@ -159,32 +128,30 @@
 
     // Mobile styles
     justify-content: center;
-    border-bottom: 0.1071811361rem solid $brand-ilo-grey-light;
+    border-bottom: px-to-rem(2px) solid var(--ilo-color-gray-light);
     margin: spacing(3) auto 0 auto;
     padding: spacing(4);
 
+    @include globaltransition("all");
+
     &:after {
       background-repeat: no-repeat;
       content: "";
       height: px-to-rem(24px);
       position: relative;
       margin-left: spacing(2);
-      bottom: px-to-rem(3px);
-      transform: rotateX(180deg);
-      transform-origin: center;
+      bottom: px-to-rem(2px);
       width: px-to-rem(24px);
-      @include dataurlicon("chevron_down", $color-ux-labels-actionable);
+      @include icon("chevron_up", var(--ilo-color-blue-dark));
     }
 
     &:hover {
-      background: map-get($color, "ux", "readmore", "hover", "background");
-      border-bottom: 0.1071811361rem solid $color-base-blue-medium;
-      color: $color-ux-labels-hover;
-      cursor: pointer;
-      @include globaltransition("color, background-color, border-color");
+      background: var(--ilo-color-blue-lighter);
+      border-bottom: px-to-rem(2px) solid var(--ilo-color-blue);
+      color: var(--ilo-color-blue);
 
       &:after {
-        @include dataurlicon("chevron_down", $color-ux-labels-hover);
+        @include icon("chevron_up", var(--ilo-color-blue));
       }
     }
   }
@@ -233,7 +200,7 @@
     }
 
     .anchorlink {
-      bottom: 0;
+      top: px-to-rem(3px);
     }
   }
 
@@ -266,7 +233,7 @@
       align-items: flex-start;
       justify-content: flex-start;
       flex-flow: column;
-      top: 8px;
+      top: spacing(2);
     }
 
     .ilo--button {
@@ -306,12 +273,7 @@
 
     .anchorlink {
       margin: 0;
-      border: none;
       padding: spacing(1);
-
-      &:hover {
-        margin-bottom: -0.1071811361rem;
-      }
     }
   }