@ilo-org/styles 1.3.3 → 1.4.0

package/package.json

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

package/scss/_mixins.scss

@@ -395,65 +395,56 @@
 // and also lists in RichText.
 // ======================================
 
-@mixin invincible-list {
-  // Ordered list shows numbers
+@mixin invincible-list($bullet-color: var(--ilo-color-gray-base)) {
+  li {
+    position: relative;
+    margin-bottom: spacing(4);
+    display: table;
+    border-collapse: separate;
+    border-spacing: spacing(3) 0;
+    margin-left: calc(spacing(3) * -1);
+    margin-right: calc(spacing(3) * -1);
+
+    font-family: var(--ilo-fonts-copy);
+    font-weight: var(--ilo-font-weight-regular);
+    font-size: var(--ilo-font-size-md);
+    line-height: var(--ilo-line-height-2xlg);
+
+    @include breakpoint("md") {
+      font-size: var(--ilo-font-size-lg);
+    }
+  }
+
+  // Ordered list styles
   ol {
     counter-reset: item;
 
     li {
       counter-increment: item;
-      display: table;
-    }
 
-    li::before {
-      content: counter(item) ".";
-      display: table-cell;
-      text-align: right;
-      padding-inline-end: spacing(2);
+      &::before {
+        content: counter(item) ".";
+        display: table-cell;
+        text-align: right;
+        width: px-to-rem(26px);
+      }
     }
   }
 
-  // Unordered list shows triangles
+  // Unordered list styles
   ul {
     li {
-      position: relative;
-      padding-inline-start: spacing(8);
-
       &::before {
         content: "";
-        position: absolute;
-        height: px-to-rem(24px);
-        width: px-to-rem(24px);
-        top: spacing(1);
-        @include dataurlicon("caret_right", $color-base-neutrals-light);
-        background-repeat: no-repeat;
-
-        // Left takes precedence in LTR layouts
-        // Right takes precents in RTL layouts
-        left: 0;
-        right: 0;
-
-        // We have to rotate the bullet in RTL
+        display: table-cell;
+        width: px-to-rem(26px);
+        @include icon("caret_right", $bullet-color);
+
+        // Adjust for RTL
         [dir="rtl"] & {
           transform: rotate(180deg);
         }
       }
     }
   }
-
-  li {
-    @include font-styles("body-small");
-    font-family: var(--ilo-fonts-copy);
-    margin-bottom: spacing(4);
-
-    b,
-    strong {
-      font-weight: 700;
-      letter-spacing: $type-label-small-letter-spacing;
-    }
-
-    @include breakpoint("md") {
-      @include font-styles("base");
-    }
-  }
 }

package/scss/components/_blockquote.scss

@@ -1,110 +1,117 @@
 @use "../tokens" as *;
 @use "../functions" as *;
 @import "../mixins";
+@import "../config";
 
 /**
-This mixin is used in _richtext.scss component to style blockquotes.
-It could eventually be used for a standalone blockquote component.
+This mixin is also used in _richtext.scss component to style blockquotes.
 **/
 @mixin blockquote {
-  blockquote {
-    background-color: $color-ux-background-highlight;
-    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
+  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;
+  border-bottom: px-to-rem(3px) solid var(--ilo-color-gray-base);
+  @include cornercut(72px, 40px);
+
+  p {
+    color: var(--ilo-color-purple);
+    font-weight: 300;
+    padding: 0 spacing(12) 0 0;
     position: relative;
-    width: fit-content;
-    @include cornercut(72px, 40px);
+    @include font-styles("pull-quote-sm");
+
+    &:after {
+      bottom: 0;
+      content: "";
+      display: inline-block;
+      height: px-to-rem(20px);
+      position: absolute;
+      right: 0;
+      transform: scaleX(-1);
+      width: px-to-rem(26.5px);
+      @include icon("quote", var(--ilo-color-purple));
+    }
+  }
+
+  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;
+    font-style: normal;
+  }
+
+  &:before {
+    content: "";
+    display: inline-block;
+    height: px-to-rem(40px);
+    left: 0;
+    position: absolute;
+    width: px-to-rem(53px);
+    top: 0;
+    @include icon("quote", var(--ilo-color-purple));
+  }
+
+  @include breakpoint("md") {
+    background-size: px-to-rem(86px) px-to-rem(48px);
+    padding: spacing(16) 0 spacing(12) spacing(12);
+    @include cornercut(86px, 48px);
 
     p {
-      color: $color-font-blockquote;
-      font-weight: 300;
+      margin-bottom: spacing(6);
       padding: 0 spacing(12) 0 0;
       position: relative;
-      @include font-styles("pull-quote-sm");
+      @include font-styles("pull-quote-lg");
 
       &:after {
-        bottom: 0;
-        content: "";
-        display: inline-block;
-        height: px-to-rem(20px);
-        position: absolute;
-        right: 0;
-        transform: scaleX(-1);
-        width: px-to-rem(26.5px);
-        @include icon("quote", var(--ilo-color-purple));
+        height: px-to-rem(24px);
+        width: px-to-rem(32px);
       }
     }
 
-    cite {
-      color: $color-font-cite;
-      font-weight: 400;
-      @include font-styles("pull-quote-cite");
-    }
-
     &:before {
-      content: "";
-      display: inline-block;
-      height: px-to-rem(40px);
-      left: 0;
-      position: absolute;
-      width: px-to-rem(53px);
-      top: 0;
-      @include icon("quote", var(--ilo-color-purple));
-    }
-
-    @include breakpoint("md") {
-      background-size: px-to-rem(86px) px-to-rem(48px);
-      padding: spacing(16) 0 spacing(12) spacing(12);
-      @include cornercut(86px, 48px);
-
-      p {
-        margin-bottom: spacing(6);
-        padding: 0 spacing(12) 0 0;
-        position: relative;
-        @include font-styles("pull-quote-lg");
-
-        &:after {
-          height: px-to-rem(24px);
-          width: px-to-rem(32px);
-        }
-      }
-
-      &:before {
-        height: px-to-rem(48px);
-        width: px-to-rem(64px);
-      }
+      height: px-to-rem(48px);
+      width: px-to-rem(64px);
     }
+  }
 
-    [dir="rtl"] & {
-      background-position: -1px -1px;
-      padding: spacing(14) spacing(8) spacing(9) 0;
-      @include cornercut(72px, 40px, "left");
+  [dir="rtl"] & {
+    background-position: -1px -1px;
+    padding: spacing(14) spacing(8) spacing(9) 0;
+    @include cornercut(72px, 40px, "left");
 
-      p {
-        padding: 0 0 0 spacing(12);
+    p {
+      padding: 0 0 0 spacing(12);
 
-        &:after {
-          left: 0;
-          right: auto;
-          transform: scaleX(1);
-        }
+      &:after {
+        left: 0;
+        right: auto;
+        transform: scaleX(1);
       }
+    }
 
-      &:before {
-        left: auto;
-        right: 0;
-        transform: scaleX(-1);
-      }
+    &:before {
+      left: auto;
+      right: 0;
+      transform: scaleX(-1);
+    }
 
-      @include breakpoint("md") {
-        padding: spacing(15) spacing(12) spacing(12) 0;
+    @include breakpoint("md") {
+      padding: spacing(15) spacing(12) spacing(12) 0;
 
-        @include cornercut(86px, 48px, "left");
-      }
+      @include cornercut(86px, 48px, "left");
     }
   }
 }
+
+.ilo--blockquote {
+  @include blockquote;
+}

package/scss/components/_breadcrumb.scss

@@ -43,17 +43,15 @@
       position: absolute;
       background-repeat: no-repeat;
       @include dataurlicon("chevron_right", $color-link-text-default);
-      background-position: left;
       background-size: px-to-rem(24px);
       height: px-to-rem(24px);
       width: px-to-rem(24px);
-    }
 
-    [dir="rtl"] & {
-      background-position: right;
-      background-repeat: no-repeat;
-      background-size: px-to-rem(24px);
-      @include dataurlicon("chevron_left", $color-link-text-default);
+      [dir="rtl"] & {
+        left: auto;
+        right: 0;
+        @include dataurlicon("chevron_left", $color-link-text-default);
+      }
     }
   }
 

package/scss/components/_card.scss

@@ -8,12 +8,16 @@
   $transition-timing: 250ms;
   box-sizing: border-box;
   position: relative;
-  background-color: map-get($color, "base", "neutrals", "white");
+  background-color: var(--ilo-color-white);
 
   // Max width is set in the invididual card types unless fluid
   max-width: var(--max-width);
   flex: 1 1 var(--max-width);
 
+  * {
+    @include globaltransition("color, background-color, border-color, opacity");
+  }
+
   &__size__fluid {
     --max-width: 100% !important;
   }
@@ -21,50 +25,51 @@
   &__action:hover,
   &__action:focus,
   &__action:focus-within {
-    background: $brand-ilo-white;
+    // background: var(--ilo-color-white);
     outline: none;
     text-decoration: none;
 
-    &#{$self}__dark {
-      background: $brand-ilo-white;
-    }
+    // &#{$self}__dark {
+    //   background: var(--ilo-color-white);
+    // }
 
     #{$self}--eyebrow,
     #{$self}--title,
     #{$self}--intro,
     #{$self}--date,
     #{$self}--date-extra {
-      color: $brand-ilo-blue;
+      color: var(--ilo-color-blue);
     }
   }
 
   &__theme {
     &__light {
-      background: $brand-ilo-white;
+      background: var(--ilo-color-white);
     }
 
     &__dark {
-      background: $brand-ilo-dark-blue;
-      transition: background $transition-timing ease-out;
+      background: var(--ilo-color-blue-dark);
 
       #{$self}--eyebrow,
       #{$self}--title,
       #{$self}--intro,
       #{$self}--date,
       #{$self}--eventdate {
-        color: $brand-ilo-grey-light;
-        transition: color $transition-timing ease-out;
+        color: var(--ilo-color-gray-light);
       }
     }
+
+    &__soft {
+      background: var(--ilo-color-blue-lighter);
+    }
   }
 
   &__isvideo {
     #{$self}--image--wrapper {
       position: relative;
 
-      &::before {
-        @include dataurlicon("play", $brand-ilo-grey-light);
-        background-color: $brand-ilo-black;
+      &::before,
+      &::after {
         background-position: center;
         background-size: 18px 20px;
         background-repeat: no-repeat;
@@ -77,6 +82,14 @@
         width: 40px;
         z-index: 1;
       }
+
+      &::before {
+        background-color: var(--ilo-color-gray-charcoal);
+      }
+
+      &::after {
+        @include icon("caret_right", var(--ilo-color-gray-light));
+      }
     }
   }
 
@@ -105,35 +118,31 @@
     top: 0;
     width: 100%;
     z-index: 2;
-    @include globaltransition("color, background-color, border-color, opacity");
 
     &:hover,
     &:focus,
     &:focus-within {
       outline: none;
-      @include globaltransition(
-        "color, background-color, border-color, opacity"
-      );
 
       + #{$self}--wrap {
         #{$self}--eyebrow {
-          color: $brand-ilo-blue;
+          color: var(--ilo-color-blue);
         }
 
         #{$self}--title {
-          color: $brand-ilo-blue;
+          color: var(--ilo-color-blue);
         }
 
         #{$self}--intro {
-          color: $brand-ilo-blue;
+          color: var(--ilo-color-blue);
         }
 
         #{$self}--date {
-          color: $brand-ilo-blue;
+          color: var(--ilo-color-blue);
         }
 
         #{$self}--eventdate {
-          color: $brand-ilo-blue;
+          color: var(--ilo-color-blue);
         }
       }
     }
@@ -147,18 +156,16 @@
     color: $brand-ilo-purple;
     @include font-styles("body-small");
     margin-bottom: spacing(3);
-    @include globaltransition("color");
 
     #{$self}--link:hover &,
     #{$self}--link:focus &,
     #{$self}--link:focus-within & {
-      color: $brand-ilo-blue;
-      @include globaltransition("color");
+      color: var(--ilo-color-blue);
     }
   }
 
   &--title {
-    color: $brand-ilo-dark-blue;
+    color: var(--ilo-color-blue-dark);
     font-family: var(--ilo-fonts-display);
     font-weight: 700;
     @include font-styles("headline-5");
@@ -170,27 +177,23 @@
       "body-small",
       "copy"
     );
-    @include globaltransition("color");
 
     #{$self}--link:hover &,
     #{$self}--link:focus &,
     #{$self}--link:focus-within & {
-      color: $brand-ilo-blue;
-      @include globaltransition("color");
+      color: var(--ilo-color-blue);
     }
   }
 
   &--intro {
-    color: $brand-ilo-black;
+    color: var(--ilo-color-gray-charcoal);
     @include font-styles("body-small");
-    @include globaltransition("color");
     margin-bottom: spacing(8);
 
     #{$self}--link:hover &,
     #{$self}--link:focus &,
     #{$self}--link:focus-within & {
-      color: $brand-ilo-blue;
-      @include globaltransition("color");
+      color: var(--ilo-color-blue);
     }
   }
 
@@ -198,13 +201,11 @@
     color: $brand-ilo-grey-accessible;
     @include font-styles("body-small");
     @include textmargin("margin-bottom", 30px, "body-small", "copy", 0, 0);
-    @include globaltransition("color");
 
     #{$self}--link:hover &,
     #{$self}--link:focus &,
     #{$self}--link:focus-within & {
-      color: $brand-ilo-blue;
-      @include globaltransition("color");
+      color: var(--ilo-color-blue);
     }
   }
 

package/scss/components/_datacard.scss

@@ -18,6 +18,17 @@
       position: relative;
       width: 100%;
 
+      &--content {
+        &-links-list {
+          display: flex;
+          flex-wrap: wrap;
+        }
+
+        &-link.ilo--link {
+          margin-bottom: 0px !important;
+        }
+      }
+
       #{$self}--content {
         display: grid;
         grid-template-columns: 1fr;

package/scss/components/_factlistcard.scss

@@ -10,7 +10,7 @@
     &__factlist {
       --max-width: #{px-to-rem(375px)};
 
-      border-bottom: px-to-rem(3px) solid $brand-ilo-grey-ui;
+      border-bottom: px-to-rem(3px) solid var(--ilo-color-gray-base);
       padding: spacing(10) spacing(6) spacing(12);
 
       @include cornercut(72px, 40px);
@@ -40,56 +40,33 @@
 
       &#{$self}__theme {
         &__dark {
-          border-bottom: px-to-rem(3px) solid $color-base-red-medium;
-
-          #{$self}--title {
-            color: $brand-ilo-white;
-          }
-
-          .ilo--list__item {
-            color: $brand-ilo-white;
+          border-bottom: px-to-rem(3px) solid var(--ilo-color-red);
 
+          .ilo--list--item {
             &:last-of-type {
               margin-bottom: 0;
             }
           }
 
-          &:hover,
-          &:focus,
-          &:focus-within {
-            #{$self}--title {
-              color: $brand-ilo-white;
-            }
+          color: var(--ilo-color-white);
 
-            .ilo--list__item {
-              color: $brand-ilo-white;
-            }
+          #{$self}--title {
+            color: var(--ilo-color-white);
           }
         }
       }
 
       #{$self}--title {
         color: $brand-ilo-black;
-        @include font-styles("headline-5");
-        @include textmargin(
-          "margin-bottom",
-          32px,
-          "headline-5",
-          "display",
-          "body-small",
-          "copy"
-        );
-
-        @include breakpoint("lg") {
-          @include font-styles("headline-4");
-          @include textmargin(
-            "margin-bottom",
-            40px,
-            "headline-4",
-            "display",
-            "base",
-            "copy"
-          );
+        font-size: var(--ilo-font-size-xlg);
+        line-height: var(--ilo-line-height-md);
+        letter-spacing: var(--ilo-letter-spacing-xsm);
+        font-weight: var(--ilo-font-weight-bold);
+        margin-bottom: spacing(4);
+
+        @include breakpoint("md") {
+          font-size: var(--ilo-font-size-3xlg);
+          margin-bottom: spacing(6);
         }
       }
     }