@ilo-org/styles 0.14.2 → 0.16.0

package/scss/_reset.scss

@@ -1,104 +1,40 @@
-//
-// Copyright IBM Corp. 2018, 2018
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
 
-/// http://meyerweb.com/eric/tools/css/reset/
-/// v2.0 | 20110126
-/// License: none (public domain)
-/// Start vendor reset
-html,
 body,
-div,
-span,
-applet,
-object,
-iframe,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
 p,
+table,
 blockquote,
-pre,
-a,
-abbr,
-acronym,
 address,
-big,
-cite,
-code,
-del,
-dfn,
-em,
-img,
-ins,
-kbd,
-q,
-s,
-samp,
-small,
-strike,
-strong,
-sub,
-sup,
-tt,
-var,
-b,
-u,
-i,
-center,
+pre,
+iframe,
+form,
+figure,
 dl,
-dt,
-dd,
-ol,
 ul,
-li,
+ol,
 fieldset,
-form,
-label,
-legend,
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td,
-article,
-aside,
-canvas,
-details,
-embed,
-figure,
-figcaption,
-footer,
-header,
-hgroup,
-menu,
-nav,
-output,
-ruby,
-section,
-summary,
-time,
-mark,
-audio,
-video {
+option,
+legend {
+  margin: 0;
   padding: 0;
   border: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   margin: 0;
-  font: inherit;
-  font-size: 100%;
-  vertical-align: baseline;
+  font-size: inherit;
+  font-weight: inherit;
 }
 
-/* HTML5 display-role reset for older browsers */
 article,
 aside,
 details,
@@ -121,45 +57,58 @@ ul {
   list-style: none;
 }
 
-blockquote,
-q {
-  quotes: none;
-}
-
-blockquote::before,
-blockquote::after,
-q::before,
-q::after {
-  content: "";
-  // stylelint-disable-next-line declaration-block-no-duplicate-properties
-  content: none;
-}
-
 table {
+  border-color: inherit;
   border-collapse: collapse;
   border-spacing: 0;
 }
-/// End vendor reset
 
-html {
-  box-sizing: border-box;
+td,
+th {
+  vertical-align: top;
+  padding: 0;
 }
 
-select {
-  -webkit-appearance: none;
-  -moz-appearance: none;
+th {
+  text-align: left;
+  font-weight: bold;
 }
 
-// Reset border-radius on iOS Safari
+button,
 input,
+optgroup,
+select,
 textarea {
+  -webkit-appearance: none;
+  appearance: none;
+  vertical-align: middle;
+  color: inherit;
+  font: inherit;
+  background: transparent;
+  padding: 0;
+  margin: 0;
   border-radius: 0;
+  text-align: inherit;
+  text-transform: inherit;
 }
 
-*,
-*::before,
-*::after {
-  box-sizing: inherit;
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+  border-top-width: 1px;
+  margin: 0;
+  clear: both;
+  color: inherit;
+}
+
+textarea {
+  overflow: auto;
+}
+
+select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
 }
 
 /// Makes SVGs accessible in high contrast mode

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

@@ -19,7 +19,6 @@
     height: px-to-rem(40px);
     overflow: hidden;
     position: relative;
-    text-align: left;
     text-indent: -999%;
     width: px-to-rem(40px);
     @include font-styles("label-medium");
@@ -224,11 +223,18 @@
   }
 
   &--page {
+    display: flex;
+    gap: spacing(1);
     @include font-styles("nav-md-sm");
     margin-inline-end: spacing(2);
     font-family: $fonts-copy;
     font-weight: 400;
     line-height: 45px;
+
+    [dir="rtl"] & {
+      margin-inline-end: 0;
+      margin-inline-start: spacing(2);
+    }
   }
 
   &--previous-set,

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;
         }
       }

package/scss/index.scss

@@ -1,6 +1,9 @@
 // Set prefix on default styles
 @use "config";
 
+// Import our normalize styles
+@use "normalize";
+
 // Load the css resets
 @use "reset";