@ilo-org/styles 1.3.4 → 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.4",
+  "version": "1.4.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/international-labour-organization/designsystem.git",
@@ -39,7 +39,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@ilo-org/themes": "0.9.1",
-    "@ilo-org/icons": "2.0.0",
+    "@ilo-org/icons": "2.1.0",
     "@ilo-org/fonts": "1.0.0"
   },
   "devDependencies": {

package/scss/_mixins.scss

@@ -395,11 +395,16 @@
 // and also lists in RichText.
 // ======================================
 
-@mixin invincible-list($bullet-color: rgba(184, 196, 204, 1)) {
+@mixin invincible-list($bullet-color: var(--ilo-color-gray-base)) {
   li {
     position: relative;
-    padding-inline-start: spacing(4);
     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);
@@ -416,13 +421,12 @@
 
     li {
       counter-increment: item;
-      display: table;
 
       &::before {
         content: counter(item) ".";
         display: table-cell;
         text-align: right;
-        padding-inline-end: spacing(2);
+        width: px-to-rem(26px);
       }
     }
   }
@@ -430,17 +434,11 @@
   // Unordered list styles
   ul {
     li {
-      display: table;
-
       &::before {
         content: "";
         display: table-cell;
-        text-align: right;
-        padding-inline-end: spacing(2);
-        height: px-to-rem(24px);
         width: px-to-rem(26px);
-        background-repeat: no-repeat;
-        @include dataurlicon("caret_right", $bullet-color);
+        @include icon("caret_right", $bullet-color);
 
         // Adjust for RTL
         [dir="rtl"] & {

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/_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/_featurecard.scss

@@ -10,40 +10,30 @@
     &__feature {
       --max-width: #{px-to-rem(412px)};
 
-      border-bottom: px-to-rem(3px) solid $brand-ilo-grey-ui;
+      border-bottom: px-to-rem(3px) solid var(--ilo-color-gray-base);
       display: flex;
       margin-top: 0;
       position: relative;
 
-      &#{$self}__theme__dark {
-        border-bottom: px-to-rem(3px) solid $color-base-red-medium;
-
+      &:hover,
+      &:focus,
+      &:focus-within {
         .ilo--link-list {
-          border-top: 2px solid rgba($brand-ilo-grey-light, 0.25);
-
-          &--link {
-            color: $brand-ilo-white;
-            @include dataurlicon("chevron_right", $brand-ilo-white);
+          &--label {
+            color: var(--ilo-color-blue) !important;
+          }
 
-            [dir="rtl"] & {
-              @include dataurlicon("chevron_left", $brand-ilo-white);
-            }
+          &--icon {
+            background-color: var(--ilo-color-blue);
           }
         }
+      }
 
-        &:hover,
-        &:focus,
-        &:focus-within {
-          .ilo--link-list {
-            &--link {
-              color: $brand-ilo-blue;
-              @include dataurlicon("chevron_right", $brand-ilo-blue);
-
-              [dir="rtl"] & {
-                @include dataurlicon("chevron_left", $brand-ilo-blue);
-              }
-            }
-          }
+      &#{$self}__theme__dark {
+        border-bottom: px-to-rem(3px) solid var(--ilo-color-red);
+
+        .ilo--link-list {
+          border-top: 2px solid var(--ilo-color-gray-light-semi-transparent);
         }
       }
 
@@ -54,8 +44,8 @@
       &:hover,
       &:focus,
       &:focus-within {
-        background-color: $brand-ilo-white;
-        border-bottom: px-to-rem(3px) solid $brand-ilo-blue;
+        background-color: var(--ilo-color-white);
+        border-bottom: px-to-rem(3px) solid var(--ilo-color-blue);
         @include card-drop-shadow;
 
         picture::before {
@@ -70,7 +60,7 @@
       }
 
       .ilo--link-list {
-        border-top: px-to-rem(2px) solid $brand-ilo-grey-light;
+        border-top: px-to-rem(2px) solid var(--ilo-color-gray-light);
         margin-left: px-to-rem(-24px);
         margin-right: px-to-rem(-24px);
         position: relative;
@@ -158,7 +148,7 @@
         position: relative;
 
         &::before {
-          background-color: $brand-ilo-blue;
+          background-color: var(--ilo-color-blue);
           content: "";
           display: block;
           height: 100%;

package/scss/components/_languagetoggle.scss

@@ -0,0 +1,77 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@import "../mixins";
+
+.ilo--language-toggle {
+  --ilo--language-toggle-color: var(--ilo-color-white);
+  --ilo--language-toggle-color-hover: var(--ilo-color-blue);
+  --ilo--language-toggle-bg: transparent;
+  --ilo--language-toggle-bg-hover: transparent;
+
+  &--dark {
+    --ilo--language-toggle-color: var(--ilo-color-blue-dark);
+    --ilo--language-toggle-color-hover: var(--ilo-color-white);
+  }
+
+  &:hover,
+  &--open {
+    --ilo--language-toggle-color: var(--ilo--language-toggle-color-hover);
+    --ilo--language-toggle-bg: var(--ilo--language-toggle-bg-hover);
+  }
+
+  &--container {
+    all: unset;
+    display: flex;
+    align-items: center;
+    gap: px-to-rem(4px);
+    cursor: pointer;
+    width: fit-content;
+    background-color: var(--ilo--language-toggle-bg);
+
+    &:hover {
+      background-color: var(--ilo--language-toggle-bg-hover);
+    }
+  }
+
+  &--icon {
+    display: block;
+    width: px-to-rem(24px);
+    height: px-to-rem(24px);
+    @include icon("globe", var(--ilo--language-toggle-color));
+  }
+
+  &--arrow {
+    display: block;
+    width: px-to-rem(24px);
+    height: px-to-rem(24px);
+    @include icon("chevron_down", var(--ilo--language-toggle-color));
+  }
+
+  &--action {
+    color: var(--ilo--language-toggle-color);
+
+    //move this when the new typography is ready ##896
+    font-weight: 700;
+    font-size: px-to-rem(14px);
+    line-height: 135%;
+    letter-spacing: -2%;
+  }
+
+  &--context-menu {
+    position: absolute;
+    margin-top: spacing(2);
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-10px);
+    transition:
+      opacity 0.3s ease,
+      visibility 0.3s ease,
+      transform 0.3s ease;
+
+    &__open {
+      opacity: 1;
+      visibility: visible;
+      transform: translateY(0);
+    }
+  }
+}

package/scss/components/_list.scss

@@ -24,7 +24,7 @@
 
     &__dark {
       color: var(--ilo-color-white);
-      @include invincible-list(rgba(255, 255, 255, 1));
+      @include invincible-list(var(--ilo-color-white));
     }
   }