@ilo-org/styles 0.11.3-next.3 → 0.13.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ilo-org/styles",
   "description": "Styles for products using ILO's Design System",
-  "version": "0.11.3-next.3",
+  "version": "0.13.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/international-labour-organization/designsystem.git",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@ilo-org/fonts": "0.1.2",
     "@ilo-org/icons": "0.2.1",
-    "@ilo-org/themes": "0.7.0-next.0"
+    "@ilo-org/themes": "0.7.0"
   },
   "devDependencies": {
     "cssnano": "^5.1.13",
@@ -32,7 +32,7 @@
     "gulp-rename": "^2.0.0",
     "gulp-sass": "^5.1.0",
     "gulp-sourcemaps": "^3.0.0",
-    "postcss": "^8.4.21",
+    "postcss": "^8.4.31",
     "postcss-cli": "^10.0.0",
     "sass": "^1.62.1"
   },

package/scss/_functions.scss

@@ -49,17 +49,17 @@
 }
 
 // =========================================
-// Vertical Spacing
+// Spacing Helper
 //
-// ensure that everything increments by 0.5
-// @param {Number} $size - number of times to multiply $padding-base
-// @return {*} - desired size, rounded to nearest 0.5, multiplied by $padding-base, in rems
+// spacing will be calculated by multiples of 4
+// @param {Number} $size - number of times to multiply $padding-root, check tokens/spacing/base.json
+// @return {*} - desired size, rounded to nearest integer, multiplied by $padding-base, in rems
 // =========================================
 
 @function spacing($size) {
-  $scaled: $size * $padding-base;
-  @if ($size % 0.5 != 0) {
-    $scaled: round($size) * $padding-base;
+  $scaled: $size * $spacing-root;
+  @if ($size % 1 != 0) {
+    $scaled: round($size) * $spacing-root;
   }
   @return px-to-rem($scaled);
 }

package/scss/_mixins.scss

@@ -357,10 +357,10 @@
 // ======================================
 
 @mixin card-drop-shadow {
-  filter: drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.038))
-    drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054))
+  filter: drop-shadow(0px -4px 16px rgba(30, 45, 190, 0.05))
     drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08))
-    drop-shadow(0px -4px 16px rgba(30, 45, 190, 0.054));
+    drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.05))
+    drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.04));
 }
 
 // ======================================
@@ -403,3 +403,11 @@
     }
   }
 }
+
+@mixin hero-grid-rows($min-height: $spacing-hero-image-min-height) {
+  grid-template-rows:
+    minmax($min-height, 1fr)
+    $spacing-hero-tooltip-height
+    $spacing-hero-card-corner-cut-height-sm
+    auto;
+}

package/scss/components/_accordion.scss

@@ -5,6 +5,7 @@
 .ilo--accordion {
   $transition-timing: 500ms;
   $scroll-max-height: 300px;
+  margin-right: spacing(1);
 
   &--button {
     display: flex;
@@ -14,8 +15,7 @@
 
     width: 100%;
     margin: 0;
-    padding: px-to-rem(calc($spacing-ui-padding-lg - 6px)) px-to-rem(36px)
-      px-to-rem(calc($spacing-ui-padding-lg - 6px)) 0;
+    padding: spacing(4) spacing(4) spacing(4) 0;
 
     background-color: $color-ux-background-default;
     background-position: calc(100% - px-to-rem(6px)) center;
@@ -36,8 +36,7 @@
 
     &--large {
       @include font-styles("headline-6");
-      padding: px-to-rem(calc($spacing-ui-padding-lg - 3px)) px-to-rem(36px)
-        px-to-rem(calc($spacing-ui-padding-lg - 3px)) 0;
+      padding: spacing(5) spacing(4) spacing(5) 0;
     }
 
     &:hover,
@@ -59,13 +58,11 @@
 
     @include breakpoint("medium") {
       @include font-styles("label-medium");
-      padding: px-to-rem(calc($spacing-ui-padding-xl - 14px)) px-to-rem(36px)
-        px-to-rem(calc($spacing-ui-padding-xl - 14px)) 0;
+      padding: spacing(4) spacing(4) spacing(4) 0;
 
       &--large {
         @include font-styles("headline-6");
-        padding: px-to-rem(calc($spacing-ui-padding-lg - 3px)) px-to-rem(36px)
-          px-to-rem(calc($spacing-ui-padding-lg - 3px)) 0;
+        padding: spacing(5) spacing(4) spacing(5) 0;
       }
     }
 
@@ -76,6 +73,10 @@
     &[aria-expanded="false"] {
       @include dataurlicon("add", $color-ux-labels-actionable);
     }
+
+    [dir="rtl"] & {
+      background-position: calc(0% + px-to-rem(6px)) center;
+    }
   }
 
   &--panel {
@@ -86,8 +87,8 @@
     overflow: hidden;
 
     .ilo--accordion--innerpanel {
-      padding-bottom: px-to-rem($spacing-ui-padding-sm);
-      padding-top: px-to-rem(8px);
+      padding-bottom: spacing(9);
+      padding-top: spacing(2);
     }
 
     &--open {
@@ -97,7 +98,7 @@
       &#{$panel}__scroll {
         max-height: $scroll-max-height;
         overflow-y: auto;
-        padding-right: px-to-rem($spacing-ui-padding-xl);
+        padding-right: spacing(8);
       }
     }
   }

package/scss/components/_breadcrumb.scss

@@ -12,9 +12,9 @@
     background-color: $color-base-neutrals-white;
     display: inline-flex;
     justify-content: flex-start;
-    padding-block: px-to-rem(16px);
+    padding-block: spacing(4);
     padding-inline-end: 0;
-    padding-inline-start: var(--card-padding-start);
+    padding-inline-start: var(--breadcrumb-padding);
     position: relative;
     &.context--menu {
       padding: 0;
@@ -23,19 +23,20 @@
 
   &--link {
     align-items: center;
-    background-position: right 52%;
+    background-position: right;
     background-repeat: no-repeat;
     color: map-get($color, "link", "text", "default");
     display: inline-flex;
-    height: px-to-rem($spacing-padding-2);
-    padding: 0 px-to-rem($spacing-padding-3) 0 px-to-rem(10px);
+    height: px-to-rem(16px);
+    padding-block: 0;
+    padding-inline-start: spacing(4);
+    padding-inline-end: spacing(6);
     text-decoration: none;
     text-decoration-thickness: px-to-rem($borders-base);
     @include dataurlicon("breadcrumbdivider", $color-link-text-default);
 
-    .right-to-left & {
-      background-position: 0 52%;
-      padding: 0 px-to-rem(10px) 0 px-to-rem($spacing-padding-3);
+    [dir="rtl"] & {
+      background-position: left;
       @include dataurlicon("breadcrumbdividerrtl", $color-link-text-default);
     }
 
@@ -56,7 +57,7 @@
       text-decoration-thickness: px-to-rem($borders-base);
       @include dataurlicon("breadcrumbdivider", $color-link-text-hover);
 
-      .right-to-left & {
+      [dir="rtl"] & {
         @include dataurlicon("breadcrumbdividerrtl", $color-link-text-hover);
       }
     }
@@ -65,18 +66,14 @@
   &--item {
     align-items: center;
     display: flex;
-    height: px-to-rem($spacing-padding-2);
+    height: px-to-rem(16px);
 
     &.home {
       align-items: center;
       display: flex;
       position: relative;
-      width: 17px;
 
       .ilo--breadcrumb--link {
-        padding-left: 0;
-        width: px-to-rem(38px);
-
         &--label {
           @include isVisuallyHidden();
         }
@@ -86,13 +83,20 @@
           background-repeat: no-repeat;
           content: "";
           display: block;
-          height: px-to-rem($spacing-padding-2);
+          height: px-to-rem(16px);
           left: 0;
           position: absolute;
           top: 0;
-          width: px-to-rem($spacing-padding-2);
+          width: px-to-rem(16px);
           @include dataurlicon("home", $color-link-text-default);
         }
+
+        [dir="rtl"] & {
+          &:before {
+            left: initial;
+            right: 0;
+          }
+        }
       }
 
       &:hover,
@@ -115,7 +119,7 @@
   .ilo--breadcrumb--item--context {
     align-items: flex-start;
     display: flex;
-    height: px-to-rem($spacing-padding-2);
+    height: px-to-rem(16px);
   }
 
   &.contextmenu {
@@ -137,14 +141,14 @@
         background-repeat: no-repeat;
         content: "";
         display: block;
-        height: px-to-rem($spacing-padding-2);
+        height: px-to-rem(16px);
         right: -7px;
         position: absolute;
         top: 0;
-        width: px-to-rem($spacing-padding-2);
+        width: px-to-rem(16px);
         @include dataurlicon("breadcrumbdivider", $color-link-text-default);
 
-        .right-to-left & {
+        [dir="rtl"] & {
           right: auto;
           left: -7px;
           @include dataurlicon(
@@ -180,12 +184,12 @@
             $color-ux-background-highlight
           );
           content: "";
-          height: px-to-rem($spacing-padding-1-5);
+          height: px-to-rem(12px);
           position: absolute;
-          left: 50%;
+          // left: 50%;
           top: -#{px-to-rem(6px)};
           transform: translateX(-50%) rotate(135deg);
-          width: px-to-rem($spacing-padding-1-5);
+          width: px-to-rem(12px);
         }
 
         &:hover {
@@ -195,7 +199,7 @@
         .ilo--breadcrumb--item {
           display: inline-block;
           height: auto;
-          padding: 0 px-to-rem($spacing-padding-1);
+          padding: 0 spacing(2);
           position: relative;
           width: 100%;
 
@@ -233,7 +237,7 @@
           font-family: $fonts-copy;
           font-weight: map-get($type, "weights", "section");
           height: auto;
-          padding: px-to-rem($spacing-padding-2) 0;
+          padding: spacing(4) 0;
           text-decoration: none;
           width: 100%;
           @include font-styles("body-xxs");
@@ -254,50 +258,37 @@
             text-decoration: underline;
             text-decoration-thickness: px-to-rem($borders-base);
           }
-
-          .right-to-left & {
-            text-align: center;
-          }
         }
       }
     }
   }
 
-  @include breakpoint("medium") {
-    &--items {
-      &:after {
-        background: linear-gradient(
-          to bottom right,
-          white 50%,
-          transparent 50%
-        );
-        content: "";
-        display: inline-block;
-        height: 47px;
-        position: absolute;
-        right: -47px;
-        top: 0;
-        width: 47px;
-
-        .right-to-left & {
-          right: auto;
-          left: -47px;
-          transform: scaleX(-1);
-        }
+  &--items {
+    &:after {
+      background: linear-gradient(to bottom right, white 50%, transparent 50%);
+      content: "";
+      display: inline-block;
+      height: 47px;
+      position: absolute;
+      right: -47px;
+      top: 0;
+      width: 47px;
+
+      [dir="rtl"] & {
+        right: auto;
+        left: -47px;
+        transform: scaleX(-1);
       }
+    }
 
-      &.context--menu {
-        &:after {
-          content: none;
-        }
+    &.context--menu {
+      &:after {
+        content: none;
       }
     }
   }
 
-  .right-to-left & {
-    direction: rtl;
-  }
-
+  // @TODO: This shouldn't be here, we should handle this through Storybook configuation
   &.storybook {
     background-color: $brand-ilo-grey-ui;
     height: 100vh;

package/scss/components/_button.scss

@@ -20,8 +20,8 @@
 
     .ilo--icon {
       height: 100%;
-      max-height: calc($spacing-icons-icon-height-lg * 2);
-      max-width: calc($spacing-icons-icon-height-lg * 2);
+      max-height: px-to-rem(32px);
+      max-width: px-to-rem(32px);
       position: absolute;
       width: 100%;
     }
@@ -29,24 +29,24 @@
     &.icon__position--left {
       .link__label,
       .button__label {
-        padding-left: $spacing-boxpadding-button-icon-large-left;
+        padding-left: spacing(12);
       }
 
       .ilo--icon {
-        left: calc($spacing-icons-icon-padding-lg - 9px);
-        top: calc($spacing-boxpadding-button-icon-large-top - 3px);
+        left: px-to-rem(13px);
+        top: px-to-rem(7px);
       }
     }
 
     &.icon__position--right {
       .link__label,
       .button__label {
-        padding-right: $spacing-boxpadding-button-icon-large-right;
+        padding-right: spacing(12);
       }
 
       .ilo--icon {
-        right: calc($spacing-icons-icon-padding-lg - 9px);
-        top: calc($spacing-boxpadding-button-icon-large-top - 3px);
+        right: px-to-rem(13px);
+        top: px-to-rem(7px);
       }
     }
 
@@ -60,7 +60,7 @@
   &--large {
     .link__label,
     .button__label {
-      @include boxpadding("button", "large");
+      padding: spacing(3) spacing(6);
       @include font-styles("button-large");
     }
 
@@ -78,38 +78,38 @@
   &--medium {
     .link__label,
     .button__label {
-      @include boxpadding("button", "medium");
+      padding: spacing(2) spacing(5);
       @include font-styles("button-medium");
     }
 
     &.icon {
       .ilo--icon {
-        max-height: calc($spacing-icons-icon-height-m * 2);
-        max-width: calc($spacing-icons-icon-height-m * 2);
+        max-height: px-to-rem(30px);
+        max-width: px-to-rem(30px);
         position: absolute;
       }
 
       &.icon__position--left {
         .link__label,
         .button__label {
-          padding-left: $spacing-boxpadding-button-icon-medium-left;
+          padding-left: spacing(11);
         }
 
         .ilo--icon {
-          left: calc($spacing-icons-icon-padding-m - 9px);
-          top: calc($spacing-boxpadding-button-icon-medium-top - 6px);
+          left: px-to-rem(10px);
+          top: px-to-rem(3px);
         }
       }
 
       &.icon__position--right {
         .link__label,
         .button__label {
-          padding-right: $spacing-boxpadding-button-icon-medium-right;
+          padding-right: spacing(11);
         }
 
         .ilo--icon {
-          right: calc($spacing-icons-icon-padding-m - 9px);
-          top: calc($spacing-boxpadding-button-icon-medium-top - 6px);
+          right: px-to-rem(10px);
+          top: px-to-rem(3px);
         }
       }
     }
@@ -128,38 +128,38 @@
   &--small {
     .link__label,
     .button__label {
-      @include boxpadding("button", "small");
+      padding: spacing(1) spacing(4);
       @include font-styles("button-small");
     }
 
     &.icon {
       .ilo--icon {
-        max-height: calc($spacing-icons-icon-height-sm * 2);
-        max-width: calc($spacing-icons-icon-height-sm * 2);
+        max-height: px-to-rem(28px);
+        max-width: px-to-rem(28px);
         position: absolute;
       }
 
       &.icon__position--left {
         .link__label,
         .button__label {
-          padding-left: $spacing-boxpadding-button-icon-small-left;
+          padding-left: spacing(9);
         }
 
         .ilo--icon {
-          left: calc($spacing-icons-icon-padding-sm - 9px);
-          top: calc($spacing-boxpadding-button-icon-small-top - 4px);
+          left: px-to-rem(6px);
+          top: px-to-rem(1px);
         }
       }
 
       &.icon__position--right {
         .link__label,
         .button__label {
-          padding-right: $spacing-boxpadding-button-icon-small-right;
+          padding-right: spacing(9);
         }
 
         .ilo--icon {
-          right: calc($spacing-icons-icon-padding-sm - 9px);
-          top: calc($spacing-boxpadding-button-icon-small-top - 4px);
+          right: px-to-rem(6px);
+          top: px-to-rem(1px);
         }
       }
     }

package/scss/components/_callout.scss

@@ -8,7 +8,7 @@
   $self: &;
 
   &--collapse:not(.ilo--callout--open) {
-    max-height: 78px;
+    max-height: 64px;
     overflow: hidden;
   }
 
@@ -22,18 +22,19 @@
   }
 
   &--sidebar {
-    padding: px-to-rem($spacing-padding-3 + 2) px-to-rem(12px);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: spacing(5) spacing(2);
     width: px-to-rem(40px);
 
     #{$self}--icon {
-      position: relative;
-      top: px-to-rem(1.5px);
+      margin: spacing(1);
     }
   }
 
   &--content {
-    padding: px-to-rem($spacing-padding-3 + 2) px-to-rem($spacing-padding-3 - 2)
-      px-to-rem($spacing-padding-3);
+    padding: spacing(6);
     width: 100%;
     font-size: px-to-rem(14.93px);
   }
@@ -41,7 +42,7 @@
   &--header {
     display: flex;
     justify-content: space-between;
-    padding: 0 0 px-to-rem(24px);
+    padding-bottom: spacing(3);
   }
 
   &--title {
@@ -60,7 +61,7 @@
     cursor: pointer;
     font-family: $fonts-display;
     font-weight: 500;
-    padding-right: 32px;
+    padding-right: spacing(8);
     position: relative;
 
     &--icon {
@@ -80,7 +81,7 @@
   }
 
   &--footer {
-    padding: px-to-rem(24px) 0 0 0;
+    padding-top: spacing(5);
   }
 
   .icon {

package/scss/components/_card.scss

@@ -5,8 +5,7 @@
 
 .ilo--card {
   $self: &;
-  $transition-timing: 150ms;
-
+  $transition-timing: 250ms;
   box-sizing: border-box;
   position: relative;
   background-color: map-get($color, "base", "neutrals", "white");
@@ -19,10 +18,6 @@
     --max-width: 100% !important;
   }
 
-  .right-to-left & {
-    text-align: right;
-  }
-
   &__action:hover,
   &__action:focus,
   &__action:focus-within {
@@ -91,6 +86,7 @@
 
   &--wrapper {
     max-width: var(--max-width);
+    transition: filter $transition-timing ease-out;
 
     &:hover,
     &:focus,
@@ -150,14 +146,7 @@
   &--eyebrow {
     color: $brand-ilo-purple;
     @include font-styles("body-small");
-    @include textmargin(
-      "margin-bottom",
-      16px,
-      "headline-5",
-      "display",
-      "body-small",
-      "copy"
-    );
+    margin-bottom: spacing(3);
     @include globaltransition("color");
 
     #{$self}--link:hover &,
@@ -194,8 +183,8 @@
   &--intro {
     color: $brand-ilo-grey-charcoal;
     @include font-styles("body-small");
-    @include textmargin("margin-bottom", 30px, "body-small", "copy", 0, 0);
     @include globaltransition("color");
+    margin-bottom: spacing(8);
 
     #{$self}--link:hover &,
     #{$self}--link:focus &,

package/scss/components/_cardgroup.scss

@@ -48,10 +48,6 @@
     row-gap: $gap-size;
     margin: auto;
     width: 100%;
-
-    .right-to-left & {
-      flex-direction: row-reverse;
-    }
   }
 
   .ilo--card,

package/scss/components/_contextmenu.scss

@@ -15,16 +15,16 @@
     background-size: contain;
     @include dataurlicon("halfsquaretriangle", $color-ux-background-highlight);
     content: "";
-    height: px-to-rem($spacing-padding-1-5);
+    height: px-to-rem(12px);
     position: absolute;
     left: 50%;
     top: -#{px-to-rem(6px)};
     transform: translateX(-50%) rotate(135deg);
-    width: px-to-rem($spacing-padding-1-5);
+    width: px-to-rem(12px);
   }
 
   &--item {
-    padding: 0 px-to-rem($spacing-padding-1);
+    padding: 0 spacing(2);
 
     &:first-of-type {
       border-top-left-radius: 2px;
@@ -60,7 +60,7 @@
     display: inline-block;
     font-family: $fonts-copy;
     font-weight: map-get($type, "weights", "section");
-    padding: px-to-rem($spacing-padding-2) px-to-rem($spacing-padding-1);
+    padding: spacing(4) spacing(2);
     text-decoration: none;
     width: 100%;
     @include font-styles("body-xxs");

package/scss/components/_credit.scss

@@ -80,7 +80,7 @@
     }
   }
 
-  .right-to-left & {
+  [dir="rtl"] & {
     &:after {
       background-position: top left;
       left: auto;