@ilo-org/styles 1.2.2 → 1.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ilo-org/styles",
   "description": "Styles for products using ILO's Design System",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/international-labour-organization/designsystem.git",
@@ -39,14 +39,14 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@ilo-org/fonts": "1.0.0",
-    "@ilo-org/icons": "1.1.0",
+    "@ilo-org/icons": "2.0.0",
     "@ilo-org/themes": "0.9.1"
   },
   "devDependencies": {
+    "cssnano": "^7.0.6",
     "del": "^7.0.0",
     "gulp": "^4.0.2",
     "gulp-clean-css": "^4.3.0",
-    "gulp-cssnano": "^2.1.3",
     "gulp-postcss": "^9.0.1",
     "gulp-rename": "^2.0.0",
     "gulp-sass": "^5.1.0",
@@ -59,7 +59,7 @@
     "build:docs": "pnpm build",
     "format": "prettier --check . --ignore-path ../../.prettierignore",
     "format:fix": "prettier --write . --ignore-path ../../.prettierignore",
-    "lint": "eslint --ext .js,.ts,.tsx",
-    "lint:fix": "eslint --ext .js,.ts,.tsx --fix"
+    "lint": "eslint",
+    "lint:fix": "eslint --fix"
   }
 }

package/scss/_mixins.scss

@@ -146,13 +146,14 @@
 
 @mixin dataurlicon($name, $color: $color-base-neutrals-black) {
   background-image: url("#{colortodataurlicon($name, $color)}");
+  background-repeat: no-repeat;
 }
 
 // ======================================
 // Video Button
 // ======================================
 @mixin videobutton($name, $size: "standard") {
-  $height: if($size == "big", 48px, 24px);
+  $height: if($size == "big", 72px, 32px);
   $box: if($size == "big", 80px, 40px);
   $width: $height;
   $color: $color-ux-video-controls-default-icon;
@@ -397,15 +398,15 @@
   ul {
     li {
       position: relative;
-      padding-inline-start: spacing(6);
+      padding-inline-start: spacing(8);
 
       &::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);
+        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
@@ -417,10 +418,6 @@
         [dir="rtl"] & {
           transform: rotate(180deg);
         }
-
-        @include breakpoint("md") {
-          top: px-to-rem(7px);
-        }
       }
     }
   }

package/scss/_normalize.scss

@@ -1,3 +1,8 @@
+/**
+* In order to have consistent reset first we normalize the styles for all browsers using normalize.css
+* This allows us to have a consistent base to build upon
+**/
+
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 
 /* Sections

package/scss/_reset.scss

@@ -1,3 +1,9 @@
+/**
+* This file is an opinionated reset that is based on https://nicolas-cusan.github.io/destyle.css/
+* it aims to provide a clean layer for styling, the reset should be used with normalize.css in order to create
+* a normalized base
+**/
+
 *,
 ::before,
 ::after {

package/scss/_typography.scss

@@ -37,32 +37,3 @@ html[lang*="ja"] {
   --ilo-fonts-display: var(--ilo-fonts-display-jp);
   --ilo-fonts-copy: var(--ilo-fonts-copy-jp);
 }
-
-/// Suggested font weights to be used in product
-/// @type Map
-/// @access public
-/// @group @carbon/type
-$font-weights: (
-  "light": 300,
-  "regular": 400,
-  "semibold": 600,
-  "bold": 700,
-  "extrabold": 800,
-) !default;
-
-/// Retrieve the font-weight value for a given name
-/// @param {String} $weight
-/// @return {Number}
-/// @access public
-/// @group @carbon/type
-@function font-weight($weight) {
-  @return map-get($font-weights, $weight);
-}
-
-/// Set the `font-weight` property with the value for a given name
-/// @param {String} $weight
-/// @access public
-/// @group @carbon/type
-@mixin font-weight($weight) {
-  font-weight: font-weight($weight);
-}

package/scss/_typographymonorepo.scss

@@ -38,32 +38,3 @@ html[lang*="ja"] {
   --ilo-fonts-display: var(--ilo-fonts-display-jp);
   --ilo-fonts-copy: var(--ilo-fonts-copy-jp);
 }
-
-/// Suggested font weights to be used in product
-/// @type Map
-/// @access public
-/// @group @carbon/type
-$font-weights: (
-  "light": 300,
-  "regular": 400,
-  "semibold": 600,
-  "bold": 700,
-  "extrabold": 800,
-) !default;
-
-/// Retrieve the font-weight value for a given name
-/// @param {String} $weight
-/// @return {Number}
-/// @access public
-/// @group @carbon/type
-@function font-weight($weight) {
-  @return map-get($font-weights, $weight);
-}
-
-/// Set the `font-weight` property with the value for a given name
-/// @param {String} $weight
-/// @access public
-/// @group @carbon/type
-@mixin font-weight($weight) {
-  font-weight: font-weight($weight);
-}

package/scss/components/_accordion.scss

@@ -34,7 +34,7 @@
     font-weight: $type-weights-section;
     transition: all $transition-timing ease-in-out;
     @include font-styles("label-medium");
-    @include dataurlicon("add", $color-ux-labels-actionable);
+    @include dataurlicon("plus", $color-ux-labels-actionable);
 
     &__large {
       @include font-styles("headline-6");
@@ -55,7 +55,7 @@
       }
 
       &[aria-expanded="false"] {
-        @include dataurlicon("add", $color-ux-labels-hover);
+        @include dataurlicon("plus", $color-ux-labels-hover);
       }
     }
 
@@ -75,7 +75,7 @@
     }
 
     &[aria-expanded="false"] {
-      @include dataurlicon("add", $color-ux-labels-actionable);
+      @include dataurlicon("plus", $color-ux-labels-actionable);
     }
 
     [dir="rtl"] & {

package/scss/components/_blockquote.scss

@@ -0,0 +1,112 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@import "../mixins";
+
+/**
+This mixin is used in _richtext.scss component to style blockquotes.
+It could eventually be used for a standalone blockquote component.
+**/
+@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
+    position: relative;
+    width: fit-content;
+    @include cornercut(72px, 40px);
+
+    p {
+      color: $color-font-blockquote;
+      font-weight: 300;
+      padding: 0 spacing(12) 0 0;
+      position: relative;
+      @include font-styles("pull-quote-sm");
+
+      &:after {
+        background-repeat: no-repeat;
+        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 dataurlicon("quote", $color-font-blockquote);
+      }
+    }
+
+    cite {
+      color: $color-font-cite;
+      font-weight: 400;
+      @include font-styles("pull-quote-cite");
+    }
+
+    &:before {
+      background-repeat: no-repeat;
+      content: "";
+      display: inline-block;
+      height: px-to-rem(40px);
+      left: 0;
+      position: absolute;
+      width: px-to-rem(53px);
+      top: 0;
+      @include dataurlicon("quote", $color-font-blockquote);
+    }
+
+    @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);
+      }
+    }
+
+    [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);
+
+        &:after {
+          left: 0;
+          right: auto;
+          transform: scaleX(1);
+        }
+      }
+
+      &:before {
+        left: auto;
+        right: 0;
+        transform: scaleX(-1);
+      }
+
+      @include breakpoint("md") {
+        padding: spacing(15) spacing(12) spacing(12) 0;
+
+        @include cornercut(86px, 48px, "left");
+      }
+    }
+  }
+}

package/scss/components/_breadcrumb.scss

@@ -16,7 +16,7 @@
     padding-inline-start: var(--breadcrumb-padding);
     padding-inline-end: spacing(12);
     padding-block: spacing(4);
-    background-color: $color-base-neutrals-white;
+    background-color: var(--ilo-color-white);
     @include cornercut(spacing(12), 100%, "right", "bottom");
 
     [dir="rtl"] & {
@@ -34,15 +34,26 @@
 
   &--item,
   &--context__collapse {
-    background-repeat: no-repeat;
-    @include dataurlicon("breadcrumbdivider", $color-link-text-default);
-    background-position: left;
-    padding-inline: spacing(6) spacing(4);
+    padding-inline: spacing(7) spacing(1);
+    position: relative;
+
+    &:before {
+      content: "";
+      left: 0;
+      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;
-      @include dataurlicon("breadcrumbdividerrtl", $color-link-text-default);
+      background-size: px-to-rem(24px);
+      @include dataurlicon("chevron_left", $color-link-text-default);
     }
   }
 
@@ -57,15 +68,15 @@
       border: none;
       background-position: center center;
       background-repeat: no-repeat;
-      background-size: 16px 4px;
       position: relative;
-      width: px-to-rem(42px);
-      height: px-to-rem(16px);
-      @include dataurlicon("elipsis", $color-link-text-default);
+      width: px-to-rem(24px);
+      height: px-to-rem(24px);
+      background-size: px-to-rem(24px);
+      @include dataurlicon("dot_menu", $color-link-text-default);
 
       &:hover {
         cursor: pointer;
-        @include dataurlicon("elipsis", $color-base-blue-medium);
+        @include dataurlicon("dot_menu", $color-base-blue-medium);
       }
     }
 
@@ -81,7 +92,7 @@
     }
 
     &__collapse {
-      padding-inline: spacing(3) spacing(1);
+      padding-inline: spacing(6) 0;
 
       #{$breadcrumb}--items {
         display: none;
@@ -101,16 +112,23 @@
       align-items: center;
       display: flex;
       position: relative;
-      // Make sure arrow doesn't appear before house even in RTL
-      background: none !important;
       // Make sure the outline is visible when focused
       padding-inline-start: 2px;
+      width: px-to-rem(24px);
+      height: px-to-rem(24px);
+
+      // No chevron befor the home icon
+      &:before {
+        content: none;
+      }
 
       &:hover,
       &:focus {
         #{$breadcrumb}--link {
           &:after {
             @include dataurlicon("home", $color-link-text-hover);
+            width: px-to-rem(24px);
+            height: px-to-rem(24px);
           }
         }
       }
@@ -126,11 +144,11 @@
           background-repeat: no-repeat;
           content: "";
           display: block;
-          height: px-to-rem(16px);
           left: 0;
-          position: absolute;
           top: 0;
-          width: px-to-rem(16px);
+          height: px-to-rem(24px);
+          width: px-to-rem(24px);
+          background-size: px-to-rem(24px);
           @include dataurlicon("home", $color-link-text-default);
         }
       }

package/scss/components/_button.scss

@@ -236,14 +236,16 @@
   &:focus {
     background-color: var(--ilo-color-background-focus);
     border: var(--ilo-border-md) var(--ilo-color-borders-focus) solid;
-    box-shadow: 4px 4px 0 1px var(--ilo-color-borders-focus) inset,
+    box-shadow:
+      4px 4px 0 1px var(--ilo-color-borders-focus) inset,
       -4px -4px 0 1px var(--ilo-color-borders-focus) inset;
     color: var(--ilo-button-labels-focus-color);
     outline: none;
     @include globaltransition("color, background-color, border-color");
 
     &.#{$prefix}--small {
-      box-shadow: 3px 3px 0 1px var(--ilo-color-borders-focus) inset,
+      box-shadow:
+        3px 3px 0 1px var(--ilo-color-borders-focus) inset,
         -3px -3px 0 1px var(--ilo-color-borders-focus) inset;
     }
   }

package/scss/components/_callout.scss

@@ -69,7 +69,7 @@
     position: relative;
 
     &__icon {
-      @include dataurlicon("arrow", $brand-ilo-dark-blue);
+      @include dataurlicon("chevron_down", $brand-ilo-dark-blue);
 
       background-position: right;
       background-repeat: no-repeat;
@@ -92,27 +92,27 @@
     background-repeat: no-repeat;
     background-size: contain;
     display: block;
-    height: 16px;
-    width: 16px;
+    height: px-to-rem(24px);
+    width: px-to-rem(24px);
 
     &__error {
       background-color: var(--ilo-color-notification-type-error);
-      @include dataurlicon("error", "white");
+      @include dataurlicon("notification_error", "white");
     }
 
     &__info {
       background-color: var(--ilo-color-notification-type-info);
-      @include dataurlicon("info", "white");
+      @include dataurlicon("notification_info", "white");
     }
 
     &__success {
       background-color: var(--ilo-color-notification-type-success);
-      @include dataurlicon("success", "white");
+      @include dataurlicon("notification_success", "white");
     }
 
     &__warning {
       background-color: var(--ilo-color-notification-type-warning);
-      @include dataurlicon("warning", "white");
+      @include dataurlicon("notification_warning", "white");
     }
   }
 

package/scss/components/_checkbox.scss

@@ -45,7 +45,8 @@
       background-repeat: no-repeat;
       background-size: contain;
       background-position: center center;
-      @include dataurlicon("checkmark", $color-base-neutrals-lighter);
+      background-size: 24px;
+      @include dataurlicon("check", $color-base-neutrals-lighter);
     }
 
     &:after {

package/scss/components/_contextmenu.scss

@@ -4,37 +4,35 @@
 
 .ilo--context-menu {
   border-radius: px-to-rem(2px);
-  background-color: $color-ux-background-highlight;
+  background-color: var(--ilo-color-gray-light);
   display: inline-block;
   position: relative;
   width: auto;
   list-style: none;
 
   &:before {
-    background-position: top center;
-    background-repeat: no-repeat;
-    background-size: contain;
-    @include dataurlicon("halfsquaretriangle", $color-ux-background-highlight);
     content: "";
-    height: px-to-rem(12px);
     position: absolute;
-    left: 50%;
-    top: -#{px-to-rem(6px)};
-    transform: translateX(-50%) rotate(135deg);
-    width: px-to-rem(12px);
+    left: calc(50% - 5px);
+    top: px-to-rem(-5px);
+    width: 0;
+    height: 0;
+    border-left: px-to-rem(10px) solid transparent;
+    border-right: px-to-rem(10px) solid transparent;
+    border-bottom: px-to-rem(12px) solid var(--ilo-color-gray-light);
   }
 
   &--item {
     padding: 0 spacing(2);
 
     &:first-of-type {
-      border-top-left-radius: 2px;
-      border-top-right-radius: 2px;
+      border-top-left-radius: px-to-rem(2px);
+      border-top-right-radius: px-to-rem(2px);
     }
 
     &:last-of-type {
-      border-bottom-left-radius: 2px;
-      border-bottom-right-radius: 2px;
+      border-bottom-left-radius: px-to-rem(2px);
+      border-bottom-right-radius: px-to-rem(2px);
 
       a {
         border-bottom: none;
@@ -43,11 +41,11 @@
 
     &:hover,
     &:focus {
-      background-color: $color-base-blue-light;
+      background-color: var(--ilo-color-blue-lighter);
     }
 
     &.endsection {
-      border-bottom: px-to-rem(3px) solid $color-base-neutrals-white;
+      border-bottom: px-to-rem(3px) solid var(--ilo-color-white);
 
       .ilo--context-menu--link {
         border-bottom: none;
@@ -56,8 +54,8 @@
   }
 
   &--link {
-    border-bottom: px-to-rem($borders-base) solid $color-base-neutrals-white;
-    color: map-get($color, "link", "text", "default");
+    border-bottom: px-to-rem($borders-base) solid var(--ilo-color-white);
+    color: var(--ilo-color-blue-dark);
     display: inline-block;
     font-family: var(--ilo-fonts-copy);
     font-weight: map-get($type, "weights", "section");
@@ -67,18 +65,14 @@
     @include font-styles("body-xxs");
     letter-spacing: -0.1px;
 
-    &:visited {
-      color: map-get($color, "link", "text", "default");
-    }
-
     &:active {
-      color: map-get($color, "link", "text", "active");
+      color: var(--ilo-color-blue);
       outline: none;
     }
 
     &:hover,
     &:focus {
-      color: map-get($color, "link", "text", "hover");
+      color: var(--ilo-color-blue);
       outline: none;
       text-decoration: underline;
       text-decoration-thickness: px-to-rem($borders-base);

package/scss/components/_credit.scss

@@ -43,7 +43,7 @@
         background-position: top left;
         background-repeat: no-repeat;
         background-size: contain;
-        @include dataurlicon("equilateraltriangle", $color-base-neutrals-dark);
+        @include dataurlicon("caretdown", $color-base-neutrals-dark);
         content: "";
         height: px-to-rem(map-get($spacing, "padding-1-5"));
         position: absolute;
@@ -95,10 +95,7 @@
 
         &:after {
           background-position: top right;
-          @include dataurlicon(
-            "equilateraltriangle",
-            $color-base-neutrals-dark
-          );
+          @include dataurlicon("caretdown", $color-base-neutrals-dark);
           left: auto;
           right: calc(#{px-to-rem(map-get($spacing, "padding-1-5"))} / 2);
         }

package/scss/components/_datepicker.scss

@@ -11,5 +11,6 @@
 }
 
 .ilo--input.ilo--datepicker {
+  line-height: 1;
   padding: spacing(3) spacing(4) spacing(3);
 }

package/scss/components/_detailcard.scss

@@ -37,7 +37,11 @@
 
         #{$self}--date-extra {
           &::before {
-            @include dataurlicon("equilateraltriangle", $brand-ilo-blue);
+            @include dataurlicon("caret_right", $brand-ilo-blue);
+
+            [dir="rtl"] & {
+              @include dataurlicon("caret_left", $brand-ilo-blue);
+            }
           }
         }
       }
@@ -136,20 +140,24 @@
       #{$self}--date-extra {
         @include font-styles("body-small");
         margin-bottom: 0;
-        padding-left: spacing(6);
+        padding-inline-start: spacing(5);
         position: relative;
 
         &::before {
           background-repeat: no-repeat;
           content: "";
           display: inline-block;
-          height: px-to-rem(14px);
-          left: 0;
+          height: px-to-rem(24px);
+          left: -8px;
+          top: 0;
           position: absolute;
-          top: 50%;
-          transform: rotate(-90deg) translateX(50%);
-          width: px-to-rem(12px);
-          @include dataurlicon("equilateraltriangle", $brand-ilo-black);
+          width: px-to-rem(24px);
+          @include dataurlicon("caret_right", $brand-ilo-black);
+
+          [dir="rtl"] & {
+            @include dataurlicon("caret_left", $brand-ilo-black);
+            right: -8px;
+          }
         }
       }