@ilo-org/styles 0.15.0 → 0.16.1

package/package.json

@@ -1,25 +1,46 @@
 {
   "name": "@ilo-org/styles",
   "description": "Styles for products using ILO's Design System",
-  "version": "0.15.0",
+  "version": "0.16.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/international-labour-organization/designsystem.git",
     "directory": "packages/styles"
   },
+  "files": [
+    "css/**/*",
+    "scss/**/*"
+  ],
+  "contributors": [
+    {
+      "name": "Justin Smith",
+      "email": "smithj@ilo.org",
+      "url": "https://github.com/justintemps"
+    },
+    {
+      "name": "Prabashwara Seneviratne",
+      "url": "https://www.bash.lk"
+    },
+    {
+      "name": "Shashika Boteju",
+      "email": "Shashikaboteju3@gmail.com",
+      "url": "https://github.com/Shashika6"
+    },
+    {
+      "name": "Giorgi Kapanadze",
+      "email": "doublegkapanadze@gmail.com",
+      "url": "https://github.com/ggkapanadze"
+    }
+  ],
   "publishConfig": {
     "access": "public"
   },
   "author": "@justintemps, @johnpauldavis, @avrilpearl, @ghlost",
   "license": "Apache-2.0",
-  "files": [
-    "scss",
-    "css"
-  ],
   "dependencies": {
-    "@ilo-org/fonts": "0.1.2",
-    "@ilo-org/icons": "0.2.1",
-    "@ilo-org/themes": "0.7.2"
+    "@ilo-org/fonts": "0.2.1",
+    "@ilo-org/icons": "0.3.1",
+    "@ilo-org/themes": "0.8.1"
   },
   "devDependencies": {
     "del": "^7.0.0",

package/scss/_mixins.scss

@@ -412,3 +412,77 @@
     $spacing-hero-card-corner-cut-height-sm
     auto;
 }
+
+// ======================================
+// List with markers that don't get chopped
+// off by containers with overflow: hidden;
+// Applies list styles to the List component
+// and also lists in RichText.
+// ======================================
+
+@mixin invincible-list {
+  // Ordered list shows numbers
+  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);
+    }
+  }
+
+  // Unordered list shows triangles
+  ul {
+    li {
+      position: relative;
+      padding-inline-start: spacing(6);
+
+      &::before {
+        content: "";
+        position: absolute;
+        height: px-to-rem(14px);
+        width: px-to-rem(12px);
+        top: px-to-rem(6px);
+        @include dataurlicon("listarrow", $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
+        [dir="rtl"] & {
+          transform: rotate(180deg);
+        }
+
+        @include breakpoint("medium") {
+          top: px-to-rem(7px);
+        }
+      }
+    }
+  }
+
+  li {
+    @include font-styles("body-small");
+    font-family: $fonts-copy;
+    margin-bottom: spacing(4);
+
+    b,
+    strong {
+      font-weight: 700;
+      letter-spacing: $type-label-small-letter-spacing;
+    }
+
+    @include breakpoint("medium") {
+      @include font-styles("base");
+    }
+  }
+}

package/scss/components/_list.scss

@@ -3,63 +3,9 @@
 @import "../mixins";
 
 .ilo--list {
-  &--ordered {
-    list-style: decimal;
-  }
-
-  &--unordered {
-    list-style: initial;
-    list-style-type: none;
-
-    li {
-      &::before {
-        content: "";
-        display: inline-block;
-        height: px-to-rem(14px);
-        left: px-to-rem(-12px);
-        position: absolute;
-        top: 6px;
-        width: px-to-rem(12px);
-        @include dataurlicon("listarrow", $color-base-neutrals-light);
-      }
-      margin-left: spacing(3);
-      padding-left: spacing(2);
-      position: relative;
-    }
-  }
+  @include invincible-list;
 
-  &--unstyled {
-    list-style: none;
-
-    .ilo--list__item {
-      margin-left: 0;
-      padding-left: 0;
-    }
-  }
-
-  &--horizontal {
-    li {
-      &::before {
-        content: none;
-      }
-    }
-    display: flex;
-    list-style: none;
-
-    .ilo--list__title {
-      margin-bottom: spacing(2);
-      margin-right: spacing(9);
-    }
-
-    .ilo--list__item {
-      margin-bottom: spacing(2);
-      margin-left: 0;
-      margin-right: spacing(10);
-      padding-left: 0;
-    }
-  }
-
-  &__title {
+  &--title {
     @include font-styles("headline-6");
     margin-bottom: spacing(6);
     font-family: $fonts-display;
@@ -70,22 +16,35 @@
     }
   }
 
-  &__item {
-    @include font-styles("body-small");
+  &__unstyled {
+    ol,
+    ul {
+      list-style: none;
 
-    font-family: $fonts-copy;
-    margin-bottom: spacing(4);
-    margin-left: spacing(5);
-    padding-left: spacing(1);
-
-    b,
-    strong {
-      font-weight: 700;
-      letter-spacing: $type-label-small-letter-spacing;
+      li {
+        padding-inline-start: 0;
+        &::before {
+          content: none;
+        }
+      }
     }
+  }
 
-    @include breakpoint("medium") {
-      @include font-styles("base");
+  &__horizontal {
+    &,
+    ul,
+    ol {
+      display: flex;
+      flex-flow: row;
+      list-style: none;
+      gap: spacing(10);
+
+      li {
+        padding: 0;
+        &::before {
+          content: none;
+        }
+      }
     }
   }
 }

package/scss/components/_richtext.scss

@@ -41,6 +41,10 @@
     );
   }
 
+  article {
+    margin-bottom: spacing(14);
+  }
+
   iframe {
     margin-bottom: spacing(14);
   }
@@ -95,7 +99,7 @@
       "body-small",
       "copy"
     );
-    @include font-styles("rich-text-heading-1");
+    @include font-styles("rich-text-heading-1-md");
   }
 
   h2 {
@@ -107,7 +111,7 @@
       "body-small",
       "copy"
     );
-    @include font-styles("rich-text-heading-2");
+    @include font-styles("rich-text-heading-2-md");
   }
 
   h3 {
@@ -119,7 +123,7 @@
       "body-small",
       "copy"
     );
-    @include font-styles("rich-text-heading-3");
+    @include font-styles("rich-text-heading-3-md");
   }
 
   h4 {
@@ -131,7 +135,7 @@
       "body-small",
       "copy"
     );
-    @include font-styles("rich-text-heading-4");
+    @include font-styles("rich-text-heading-4-md");
   }
 
   h5 {
@@ -143,36 +147,7 @@
       "body-small",
       "copy"
     );
-    @include font-styles("rich-text-heading-5");
-  }
-
-  ul,
-  ol {
-    li {
-      margin-bottom: spacing(8);
-      margin-left: spacing(5);
-      padding-left: spacing(3);
-      position: relative;
-    }
-
-    margin-bottom: spacing(8);
-  }
-
-  ul {
-    li {
-      margin-left: spacing(3);
-
-      &::before {
-        content: "";
-        display: inline-block;
-        height: px-to-rem(14px);
-        left: px-to-rem(-12px);
-        position: absolute;
-        top: 6px;
-        width: px-to-rem(12px);
-        @include dataurlicon("listarrow", $color-base-neutrals-light);
-      }
-    }
+    @include font-styles("rich-text-heading-5-md");
   }
 
   blockquote {
@@ -186,7 +161,7 @@
     padding: spacing(19) 0 spacing(9) spacing(8); // check
     position: relative;
     width: fit-content;
-    @include dataurlicon("triangle", $color-ux-background-default);
+    @include cornercut(72px, 40px);
 
     p {
       color: $color-font-blockquote;
@@ -229,6 +204,9 @@
     }
   }
 
+  // Repeat list styles from the list component
+  @include invincible-list;
+
   @include breakpoint("medium") {
     @include font-styles("base");
 
@@ -249,7 +227,7 @@
         "body-large",
         "copy"
       );
-      @include font-styles("rich-text-heading-1-md");
+      @include font-styles("rich-text-heading-1");
     }
 
     h2 {
@@ -261,7 +239,7 @@
         "body-large",
         "copy"
       );
-      @include font-styles("rich-text-heading-2-md");
+      @include font-styles("rich-text-heading-2");
     }
 
     h3 {
@@ -273,7 +251,7 @@
         "body-large",
         "copy"
       );
-      @include font-styles("rich-text-heading-3-md");
+      @include font-styles("rich-text-heading-3");
     }
 
     h4 {
@@ -285,7 +263,7 @@
         "body-large",
         "copy"
       );
-      @include font-styles("rich-text-heading-4-md");
+      @include font-styles("rich-text-heading-4");
     }
 
     h5 {
@@ -297,7 +275,7 @@
         "body-large",
         "copy"
       );
-      @include font-styles("rich-text-heading-5-md");
+      @include font-styles("rich-text-heading-5");
     }
 
     p {
@@ -353,6 +331,7 @@
       background-size: px-to-rem(86px) px-to-rem(48px);
       margin: spacing(8) 0 spacing(19) 0;
       padding: spacing(16) 0 spacing(12) spacing(12);
+      @include cornercut(86px, 48px);
 
       p {
         margin-bottom: spacing(6);
@@ -381,32 +360,10 @@
       padding-right: spacing(2);
     }
 
-    ul,
-    ol {
-      li {
-        margin-left: 0;
-        margin-right: spacing(5);
-        padding-left: 0;
-        padding-right: spacing(3);
-      }
-    }
-
-    ul {
-      li {
-        margin-right: spacing(3);
-
-        &::before {
-          left: auto;
-          right: px-to-rem(-12px);
-          @include dataurlicon("listarrowreverse");
-        }
-      }
-    }
-
     blockquote {
       background-position: -1px -1px;
       padding: spacing(14) spacing(8) spacing(9) 0;
-      @include dataurlicon("trianglereverse", $color-ux-background-default);
+      @include cornercut(72px, 40px, "left");
 
       p {
         padding: 0 0 0 spacing(12);
@@ -426,6 +383,10 @@
 
       @include breakpoint("medium") {
         padding: spacing(15) spacing(12) spacing(12) 0;
+
+        blockquote {
+          @include cornercut(86px, 48px, "left");
+        }
       }
     }
   }

package/scss/components/_textcard.scss

@@ -19,11 +19,11 @@
         @include cornercut(72px, 40px, left);
       }
 
-      [class$="profile--contents--light"] * {
+      [class$="profile__theme__light"] * {
         color: $color-base-neutrals-dark;
       }
 
-      [class$="profile--contents--dark"] * {
+      [class$="profile__theme__dark"] * {
         color: $color-base-neutrals-white;
       }
 
@@ -35,7 +35,7 @@
 
         border-color: $brand-ilo-blue;
 
-        [class*="profile--contents"] * {
+        [class*="profile__theme"] * {
           color: $color-base-blue-medium;
         }
       }