@ilo-org/styles 1.8.5 → 1.10.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ilo-org/styles",
   "description": "Styles for products using ILO's Design System",
-  "version": "1.8.5",
+  "version": "1.10.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/international-labour-organization/designsystem.git",
@@ -38,8 +38,8 @@
   "author": "@justintemps, @johnpauldavis, @avrilpearl, @ghlost",
   "license": "Apache-2.0",
   "dependencies": {
-    "@ilo-org/fonts": "1.0.0",
-    "@ilo-org/icons": "2.1.0",
+    "@ilo-org/fonts": "2.0.0",
+    "@ilo-org/icons": "2.3.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,28 @@
     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;
+  }
+}

package/scss/_mixins.scss

@@ -3,20 +3,9 @@
 //*------------------------------------*/
 @use "tokens" as *;
 @use "functions" as *;
+@use "animations" as *;
 @use "theme/breakpoints" as *;
 
-// ======================================
-// Output font styles
-// ======================================
-/// Retrieve the usual font styles for a given type styling
-/// @param {String} $stylename - the name of the style to get
-/// @return {CSS} font size, line-height, and letter-spacing for this type style
-@mixin font-styles($stylename) {
-  font-size: map-get($type, $stylename, "size");
-  letter-spacing: map-get($type, $stylename, "letter-spacing");
-  line-height: map-get($type, $stylename, "line-height");
-}
-
 // ======================================
 // Visually Hidden
 //
@@ -285,7 +274,8 @@
 // ======================================
 
 @mixin caption-icon-wrapper($dir: "right", $width, $height) {
-  background: map-get($color, "tooltip", "dark", "background");
+  --ilo-caption-icon-wrapper-bg-color: var(--ilo-color-gray-charcoal);
+  background: var(--ilo-caption-icon-wrapper-bg-color);
   height: $height;
   width: $width;
   display: flex;
@@ -306,7 +296,7 @@
       border-right: none;
       border-left: calc(#{$height} - 4px)
         solid
-        map-get($color, "tooltip", "dark", "background");
+        var(--ilo-caption-icon-wrapper-bg-color);
     }
 
     @if ($dir == "left") {
@@ -315,7 +305,7 @@
       border-left: none;
       border-right: calc(#{$height} - 4px)
         solid
-        map-get($color, "tooltip", "dark", "background");
+        var(--ilo-caption-icon-wrapper-bg-color);
     }
   }
 }
@@ -411,11 +401,11 @@
   @if $variant == "heading-1" {
     font-size: var(--ilo-font-size-5xlg);
     font-weight: var(--ilo-font-weight-bold);
-    line-height: var(--ilo-line-height-xsm);
+    line-height: var(--ilo-line-height-md);
     letter-spacing: var(--ilo-letter-spacing-xsm);
     @if $mobile {
       font-size: var(--ilo-font-size-4xlg);
-      line-height: var(--ilo-line-height-sm);
+      line-height: var(--ilo-line-height-md);
     }
   } @else if $variant == "heading-2" {
     font-size: var(--ilo-font-size-3xlg);
@@ -446,7 +436,7 @@
   } @else if $variant == "blockquote" {
     font-size: var(--ilo-font-size-4xlg);
     font-weight: var(--ilo-font-weight-light);
-    line-height: var(--ilo-line-height-sm);
+    line-height: var(--ilo-line-height-md);
     letter-spacing: var(--ilo-letter-spacing-xsm);
     @if $mobile {
       font-size: var(--ilo-font-size-2xlg);
@@ -555,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/_typography.scss

@@ -7,6 +7,34 @@
 // Load the theme vars and fonts
 @use "@ilo-org/themes/build/scss/tokens" as *;
 
+// Set Arabic fonts
+:root[lang*="ar"],
+[lang*="ar"] {
+  --ilo-fonts-display: var(--ilo-fonts-display-ar);
+  --ilo-fonts-copy: var(--ilo-fonts-copy-ar);
+
+  // Letter spacing overrides for Arabic. Different letter spacing values cause incorrect
+  // glpyhs to be rendered. See https://github.com/international-labour-organization/designsystem/issues/1547
+  --ilo-letter-spacing-xsm: 0;
+  --ilo-letter-spacing-sm: 0;
+  --ilo-letter-spacing-md: 0;
+  --ilo-letter-spacing-lg: 0;
+}
+
+// Set Chinese system fonts
+:root[lang*="zh"],
+[lang*="zh"] {
+  --ilo-fonts-display: var(--ilo-fonts-display-zh);
+  --ilo-fonts-copy: var(--ilo-fonts-copy-zh);
+}
+
+// Set Japanese system fonts
+:root[lang*="ja"],
+[lang*="ja"] {
+  --ilo-fonts-display: var(--ilo-fonts-display-jp);
+  --ilo-fonts-copy: var(--ilo-fonts-copy-jp);
+}
+
 html,
 body {
   color: $color-font-base;
@@ -25,15 +53,3 @@ h5,
 h5 {
   font-family: var(--ilo-fonts-display);
 }
-
-// Set Chinese system fonts
-html[lang*="zh"] {
-  --ilo-fonts-display: var(--ilo-fonts-display-zh);
-  --ilo-fonts-copy: var(--ilo-fonts-copy-zh);
-}
-
-// Set Japanese system fonts
-html[lang*="ja"] {
-  --ilo-fonts-display: var(--ilo-fonts-display-jp);
-  --ilo-fonts-copy: var(--ilo-fonts-copy-jp);
-}

package/scss/components/_accordion.scss

@@ -3,95 +3,127 @@
 @import "../mixins";
 @import "../config";
 
+// =============================================================================
+// ACCORDION COMPONENT
+// =============================================================================
+
 .#{$prefix}--accordion {
+  // CSS Custom Properties
+  // ---------------------------------------------------------------------------
   --ilo-accordion-color-icon: var(--ilo-color-blue-dark);
+  --ilo-accordion-transition-timing: 500ms; // Slower timing for smooth height transitions
+  --ilo-accordion-scroll-max-height: 300px;
 
-  // This provides a reference to the outerclass within nested declarations
   $accordion: &;
 
-  // Accordion contents can add lots of height so the transition timing can't
-  // be too fast which is why we're using a custom value here.
-  $transition-timing: 500ms;
-
-  // If the accordion item is scrollable, then this is its max-height
-  $scroll-max-height: 300px;
-
+  // Icon Styles
+  // ---------------------------------------------------------------------------
   &--icon {
     width: 24px;
     height: 24px;
   }
 
+  // Label Styles
+  // ---------------------------------------------------------------------------
+  &--label {
+    flex: 1;
+    padding-right: 10px;
+  }
+
+  // Button Styles
+  // ---------------------------------------------------------------------------
   &--button {
+    // Layout
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     width: 100%;
     margin: 0;
+
+    // Spacing
     padding-block: spacing(4);
     padding-inline-end: spacing(1);
-    background-color: $color-ux-background-default;
+
+    // Visual
+    background-color: var(--ilo-color-white);
     border: none;
-    border-top: 2px solid $color-base-neutrals-lighter;
-    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");
+    border-top: 2px solid var(--ilo-color-gray-light);
+    color: var(--ilo-color-blue-dark);
 
+    // Animation
+    transition: all var(--ilo-accordion-transition-timing) ease-in-out;
+
+    // Typography
+    @include typography("highlight-medium");
+
+    // Large variant
     &__large {
-      @include font-styles("headline-6");
+      @include typography("highlight-large");
       padding-block: spacing(5);
     }
 
+    // Expanded state
     &[aria-expanded="true"] {
-      background-color: $color-base-blue-light;
+      background-color: var(--ilo-color-blue-lighter);
+
       #{$accordion}--icon {
         @include icon("minus", var(--ilo-color-blue));
       }
     }
 
+    // Collapsed state
     &[aria-expanded="false"] {
       #{$accordion}--icon {
         @include icon("plus", var(--ilo-color-blue-dark));
       }
     }
 
+    // Interactive states
     &:hover,
     &:focus {
       --ilo-accordion-color-icon: var(--ilo-color-blue);
-      border-top-color: $color-ux-borders-hover;
-      color: $color-ux-labels-hover;
+      border-top-color: var(--ilo-color-blue);
+      color: var(--ilo-color-blue);
       cursor: pointer;
     }
 
+    // Responsive adjustments
     @include breakpoint("md") {
-      @include font-styles("label-medium");
+      @include typography("highlight-medium");
+
       &__large {
-        @include font-styles("headline-6");
+        @include typography("highlight-large");
         padding: spacing(5) 0;
       }
     }
   }
 
+  // Panel Styles
+  // ---------------------------------------------------------------------------
   &--panel {
     $panel: &;
 
+    // Collapsed state
     max-height: 0;
-    transition: all $transition-timing cubic-bezier(0, 1, 0, 1);
     overflow: hidden;
+    transition: all var(--ilo-accordion-transition-timing)
+      cubic-bezier(0, 1, 0, 1);
 
+    // Inner panel content
     #{$accordion}--innerpanel {
-      padding-bottom: spacing(9);
       padding-top: spacing(2);
+      padding-bottom: spacing(9);
       padding-inline-end: spacing(8);
     }
 
+    // Open state
     &__open {
       max-height: 100vh;
-      transition: all $transition-timing ease-in-out;
+      transition: all var(--ilo-accordion-transition-timing) ease-in-out;
 
+      // Scrollable variant
       &#{$panel}__scroll {
-        max-height: $scroll-max-height;
+        max-height: var(--ilo-accordion-scroll-max-height);
         overflow-y: auto;
       }
     }

package/scss/components/_blockquote.scss

@@ -4,37 +4,40 @@
 @import "../config";
 
 /**
-This mixin is also used in _richtext.scss component to style blockquotes.
-**/
+ * This mixin is also used in _richtext.scss component to style blockquotes.
+ */
 @mixin blockquote {
+  // Layout & background
   background-color: var(--ilo-color-blue-lighter);
   background-position: right top;
   background-repeat: no-repeat;
   background-size: px-to-rem(72px) px-to-rem(40px);
   display: block;
-  font-family: var(--ilo-fonts-display);
-  padding: spacing(19) 0 spacing(9) spacing(8); // check
-  position: relative;
   width: fit-content;
+  position: relative;
   border-bottom: px-to-rem(3px) solid var(--ilo-color-gray-base);
   @include cornercut(72px, 40px);
 
+  // Typography & spacing
+  font-family: var(--ilo-fonts-display);
+  padding: spacing(19) 0 spacing(9) spacing(8);
+
   p {
+    @include typography("blockquote", true);
     color: var(--ilo-color-purple);
-    font-weight: 300;
     padding: 0 spacing(12) 0 0;
+    margin-bottom: spacing(6);
     position: relative;
-    @include font-styles("pull-quote-sm");
 
     &:after {
-      bottom: 0;
       content: "";
       display: inline-block;
-      height: px-to-rem(20px);
       position: absolute;
+      bottom: 0;
       right: 0;
-      transform: scaleX(-1);
       width: px-to-rem(26.5px);
+      height: px-to-rem(20px);
+      transform: scaleX(-1);
       @include icon("quote", var(--ilo-color-purple));
     }
   }
@@ -42,21 +45,20 @@ This mixin is also used in _richtext.scss component to style blockquotes.
   cite {
     color: var(--ilo-color-gray-accessible);
     font-weight: 400;
-    // @include font-styles("pull-quote-cite");
     font-size: var(--ilo-font-size-sm);
     line-height: 135%;
-    letter-spacing: 0;
+    letter-spacing: var(--ilo-letter-spacing-md);
     font-style: normal;
   }
 
   &:before {
     content: "";
     display: inline-block;
-    height: px-to-rem(40px);
-    left: 0;
     position: absolute;
-    width: px-to-rem(53px);
     top: 0;
+    left: 0;
+    width: px-to-rem(53px);
+    height: px-to-rem(40px);
     @include icon("quote", var(--ilo-color-purple));
   }
 
@@ -66,20 +68,19 @@ This mixin is also used in _richtext.scss component to style blockquotes.
     @include cornercut(86px, 48px);
 
     p {
-      margin-bottom: spacing(6);
       padding: 0 spacing(12) 0 0;
       position: relative;
-      @include font-styles("pull-quote-lg");
+      @include typography("blockquote", false);
 
       &:after {
-        height: px-to-rem(24px);
         width: px-to-rem(32px);
+        height: px-to-rem(24px);
       }
     }
 
     &:before {
-      height: px-to-rem(48px);
       width: px-to-rem(64px);
+      height: px-to-rem(48px);
     }
   }
 
@@ -106,7 +107,6 @@ This mixin is also used in _richtext.scss component to style blockquotes.
 
     @include breakpoint("md") {
       padding: spacing(15) spacing(12) spacing(12) 0;
-
       @include cornercut(86px, 48px, "left");
     }
   }

package/scss/components/_breadcrumb.scss

@@ -171,7 +171,7 @@
       max-width: 30ch;
       font-family: var(--ilo-fonts-copy);
       font-weight: 400;
-      @include font-styles("body-xxs");
+      @include typography("body-xsmall");
 
       &:hover,
       &:focus {

package/scss/components/_button.scss

@@ -54,7 +54,7 @@
   &__large {
     padding: spacing(3) spacing(6);
     height: px-to-rem(52px);
-    @include font-styles("button-large");
+    @include typography("heading-4");
 
     &.#{$prefix}--button--icon--only {
       width: px-to-rem(52px);
@@ -64,7 +64,7 @@
   &__medium {
     padding: spacing(2) spacing(5);
     height: px-to-rem(44px);
-    @include font-styles("button-medium");
+    @include typography("highlight-medium-bold");
 
     &.#{$prefix}--button--icon--only {
       width: px-to-rem(44px);
@@ -74,7 +74,7 @@
   &__small {
     padding: spacing(1) spacing(4);
     height: px-to-rem(32px);
-    @include font-styles("button-small");
+    @include typography("highlight-small-bold");
 
     &.#{$prefix}--button--icon--only {
       width: px-to-rem(32px);

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/_checkbox.scss

@@ -1,90 +1,128 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @import "../mixins";
 
+// =============================================================================
+// CHECKBOX COMPONENT
+// =============================================================================
+
 .ilo--checkbox {
+  // Reset default appearance
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   border: none;
+
+  // Layout
   display: grid;
-  height: px-to-rem(24px);
-  margin: 0;
   position: relative;
   place-content: center;
+
+  // Dimensions
   width: px-to-rem(24px);
+  height: px-to-rem(24px);
+
+  // Spacing
+  margin: 0;
+
+  // Visual
   transform: none;
   cursor: pointer;
 
+  // Inner checkmark (::before pseudo-element)
+  // ---------------------------------------------------------------------------
   &:before {
     content: "";
-    background-color: $color-base-neutrals-light;
-    height: px-to-rem(16px);
-    left: px-to-rem(4px);
+
+    // Layout
     position: absolute;
+    left: px-to-rem(4px);
     top: px-to-rem(4px);
-    width: px-to-rem(16px);
     z-index: 1;
+
+    // Dimensions
+    width: px-to-rem(16px);
+    height: px-to-rem(16px);
+
+    // Visual
+    background-color: var(--ilo-color-gray-base);
   }
 
+  // Outer border/background (::after pseudo-element)
+  // ---------------------------------------------------------------------------
   &:after {
     content: "";
-    background-color: $color-base-neutrals-light;
-    border: px-to-rem(4px) solid $color-base-neutrals-light;
-    height: px-to-rem(24px);
-    left: 0;
+
+    // Layout
     position: absolute;
+    left: 0;
     top: 0;
-    width: px-to-rem(24px);
     z-index: 0;
+
+    // Dimensions
+    width: px-to-rem(24px);
+    height: px-to-rem(24px);
+
+    // Visual
+    background-color: var(--ilo-color-gray-base);
+    border: px-to-rem(4px) solid var(--ilo-color-gray-base);
   }
 
+  // Checked state
+  // ---------------------------------------------------------------------------
   &:checked {
     &:before {
-      background-color: $color-base-blue-dark;
+      // Visual
+      background-color: var(--ilo-color-blue-dark);
       background-repeat: no-repeat;
-      background-size: contain;
       background-position: center center;
-      background-size: 24px;
-      @include dataurlicon("check", $color-base-neutrals-lighter);
+      background-size: px-to-rem(24px);
+
+      // Icon
+      @include icon("check", var(--ilo-color-gray-light));
     }
 
     &:after {
-      background-color: $color-base-blue-dark;
-      border-color: $color-base-blue-dark;
+      // Visual
+      background-color: var(--ilo-color-blue-dark);
+      border-color: var(--ilo-color-dark-blue);
     }
   }
 
+  // Focus state
+  // ---------------------------------------------------------------------------
   &:focus {
+    outline: none;
+
     &:after {
-      background-color: $color-base-yellow;
-      border-color: $color-base-yellow;
+      border-color: var(--ilo-color-yellow);
     }
 
     &:checked {
       &:after {
-        border-color: $color-base-yellow;
+        border-color: var(--ilo-color-yellow);
       }
     }
-
-    outline: none;
   }
 
+  // Disabled state
+  // ---------------------------------------------------------------------------
   &:disabled {
     opacity: 0.45;
     pointer-events: none;
   }
 
+  // Error/Invalid state
+  // ---------------------------------------------------------------------------
   &:invalid,
   &__error,
   &__error & {
     &:after {
-      border-color: $color-base-red-medium;
+      border-color: var(--ilo-color-red);
     }
 
     &:checked {
       &:after {
-        border-color: $color-base-blue-dark;
+        border-color: var(--ilo-color-dark-blue);
       }
     }
   }

package/scss/components/_contextmenu.scss

@@ -57,13 +57,10 @@
     border-bottom: px-to-rem($borders-base) solid var(--ilo-color-white);
     color: var(--ilo-color-blue-dark);
     display: inline-block;
-    font-family: var(--ilo-fonts-copy);
-    font-weight: map-get($type, "weights", "section");
     padding: spacing(4) spacing(2);
     text-decoration: none;
     width: 100%;
-    @include font-styles("body-xxs");
-    letter-spacing: -0.1px;
+    @include typography("body-xsmall");
 
     &:active {
       color: var(--ilo-color-blue);