@ilo-org/styles 1.3.3 → 1.3.4

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.3.4",
   "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.0.0",
+    "@ilo-org/fonts": "1.0.0"
   },
   "devDependencies": {
     "cssnano": "^7.0.6",

package/scss/_mixins.scss

@@ -395,65 +395,58 @@
 // and also lists in RichText.
 // ======================================
 
-@mixin invincible-list {
-  // Ordered list shows numbers
+@mixin invincible-list($bullet-color: rgba(184, 196, 204, 1)) {
+  li {
+    position: relative;
+    padding-inline-start: spacing(4);
+    margin-bottom: spacing(4);
+    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;
+        padding-inline-end: spacing(2);
+      }
     }
   }
 
-  // Unordered list shows triangles
+  // Unordered list styles
   ul {
     li {
-      position: relative;
-      padding-inline-start: spacing(8);
+      display: table;
 
       &::before {
         content: "";
-        position: absolute;
+        display: table-cell;
+        text-align: right;
+        padding-inline-end: spacing(2);
         height: px-to-rem(24px);
-        width: px-to-rem(24px);
-        top: spacing(1);
-        @include dataurlicon("caret_right", $color-base-neutrals-light);
+        width: px-to-rem(26px);
         background-repeat: no-repeat;
+        @include dataurlicon("caret_right", $bullet-color);
 
-        // Left takes precedence in LTR layouts
-        // Right takes precents in RTL layouts
-        left: 0;
-        right: 0;
-
-        // We have to rotate the bullet in RTL
+        // 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/_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/_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);
         }
       }
     }

package/scss/components/_list.scss

@@ -3,16 +3,28 @@
 @import "../mixins";
 
 .ilo--list {
-  @include invincible-list;
-
   &--title {
-    @include font-styles("headline-6");
-    margin-bottom: spacing(6);
-    font-family: var(--ilo-fonts-display);
-    font-weight: 700;
+    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("lg") {
+      font-size: var(--ilo-font-size-3xlg);
+      margin-bottom: spacing(6);
+    }
+  }
+
+  &__theme {
+    &__light {
+      color: var(--ilo-color-gray-charcoal);
+      @include invincible-list;
+    }
 
-    @include breakpoint("md") {
-      @include font-styles("headline-5");
+    &__dark {
+      color: var(--ilo-color-white);
+      @include invincible-list(rgba(255, 255, 255, 1));
     }
   }