@ilo-org/styles 1.8.0 → 1.8.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ilo-org/styles",
   "description": "Styles for products using ILO's Design System",
-  "version": "1.8.0",
+  "version": "1.8.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/international-labour-organization/designsystem.git",
@@ -38,9 +38,9 @@
   "author": "@justintemps, @johnpauldavis, @avrilpearl, @ghlost",
   "license": "Apache-2.0",
   "dependencies": {
+    "@ilo-org/fonts": "1.0.0",
     "@ilo-org/icons": "2.1.0",
-    "@ilo-org/themes": "0.9.1",
-    "@ilo-org/fonts": "1.0.0"
+    "@ilo-org/themes": "0.9.1"
   },
   "devDependencies": {
     "cssnano": "^7.0.6",

package/scss/_mixins.scss

@@ -189,106 +189,57 @@
 // Link styles
 // ======================================
 
-@mixin linkstyles() {
-  background: map-get($color, "link", "background", "default");
-  color: map-get($color, "link", "text", "default");
+@mixin linkstyles($theme: "light") {
+  $color-default: var(--ilo-link-color-default-light);
+  $color-visited: var(--ilo-link-color-visited-light);
+  $color-hover: var(--ilo-link-color-hover-light);
+  $color-active: var(--ilo-link-color-active-light);
+  $color-focus: var(--ilo-link-color-focus-light);
+  $background-default: var(--ilo-link-background-default-light);
+  $background-hover: var(--ilo-link-background-hover-light);
+  $background-focus: var(--ilo-link-background-focus-light);
+
+  @if ($theme == "dark") {
+    $color-default: var(--ilo-link-color-default-dark);
+    $color-visited: var(--ilo-link-color-visited-dark);
+    $color-hover: var(--ilo-link-color-hover-dark);
+    $background-default: var(--ilo-link-background-default-dark);
+    $background-hover: var(--ilo-link-background-hover-dark);
+    $background-focus: var(--ilo-link-background-focus-dark);
+  }
+
+  // Default styles
   font-size: inherit;
   font-weight: inherit;
   line-height: inherit;
   text-decoration: underline;
-  text-underline-offset: px-to-rem(6px);
-  text-decoration-thickness: px-to-rem(1.5px);
-  text-decoration-color: var(--ilo-color-blue);
-  padding-bottom: spacing(1);
+  background: transparent;
+  text-decoration-thickness: #{px-to-rem(1px)};
+  text-underline-offset: #{px-to-rem(6px)};
+  padding-bottom: #{spacing(1)};
+
+  color: $color-default;
+  text-decoration-color: $color-default;
 
   &:visited {
-    background: map-get($color, "link", "background", "visited");
-    color: map-get($color, "link", "text", "visited");
-    text-decoration-color: var(--ilo-color-purple);
+    color: $color-visited;
+    text-decoration-color: $color-visited;
   }
 
   &:hover {
-    background: map-get($color, "link", "background", "hover");
-    color: map-get($color, "link", "text", "hover");
-    text-decoration-thickness: 3px;
-    text-decoration-color: var(--ilo-color-blue);
-  }
-
-  &:active {
-    background: map-get($color, "link", "background", "active");
-    color: map-get($color, "link", "text", "active");
-    text-decoration-thickness: 3px;
-    text-decoration-color: var(--ilo-color-blue-dark);
+    color: $color-hover;
+    background-color: $background-hover;
+    text-decoration-color: $color-hover;
+    text-decoration-thickness: #{px-to-rem(3px)};
   }
 
+  &:active,
   &:focus {
-    background: map-get($color, "link", "background", "focus");
-    color: map-get($color, "link", "text", "focus");
-    text-decoration-thickness: 3px;
-    text-decoration-color: var(--ilo-color-blue-dark);
-  }
-
-  &--dark {
-    background: map-get($color, "link", "background-dark", "default");
-    color: map-get($color, "link", "text-dark", "default");
-    text-decoration-color: var(--ilo-color-gray-light);
-
-    &:visited {
-      background: map-get($color, "link", "background-dark", "visited");
-      color: map-get($color, "link", "text-dark", "visited");
-      text-decoration-color: var(--ilo-color-gray-base);
-    }
-
-    &:hover {
-      background: map-get($color, "link", "background-dark", "hover");
-      color: map-get($color, "link", "text-dark", "hover");
-      text-decoration-thickness: 3px;
-      text-decoration-color: var(--ilo-color-blue);
-    }
-
-    &:active {
-      background: map-get($color, "link", "background-dark", "active");
-      color: map-get($color, "link", "text-dark", "active");
-      text-decoration-thickness: 3px;
-      text-decoration-color: var(--ilo-color-blue-dark);
-    }
-
-    &:focus {
-      background: map-get($color, "link", "background-dark", "focus");
-      color: map-get($color, "link", "text-dark", "focus");
-      text-decoration-thickness: 3px;
-      text-decoration-color: var(--ilo-color-blue-dark);
-    }
-  }
-
-  &--footer {
-    @include font-styles("body-xxs");
-
-    background: map-get($color, "link", "background-footer", "default");
-    color: map-get($color, "link", "text-footer", "default");
-
-    &:visited {
-      background: map-get($color, "link", "background-footer", "visited");
-      color: map-get($color, "link", "text-footer", "visited");
-    }
-
-    &:hover {
-      background: map-get($color, "link", "background-footer", "hover");
-      color: map-get($color, "link", "text-footer", "hover");
-      text-decoration-thickness: 3px;
-    }
-
-    &:active {
-      background: map-get($color, "link", "background-footer", "active");
-      color: map-get($color, "link", "text-footer", "active");
-      text-decoration-thickness: 3px;
-    }
-
-    &:focus {
-      background: map-get($color, "link", "background-footer", "focus");
-      color: map-get($color, "link", "text-footer", "focus");
-      text-decoration-thickness: 3px;
-    }
+    color: $color-focus;
+    text-decoration-color: $color-focus;
+    text-decoration-thickness: #{px-to-rem(3px)};
+    background-color: $background-focus;
+    outline: none;
   }
 }
 

package/scss/components/_breadcrumb.scss

@@ -7,16 +7,28 @@
 .#{$prefix}--breadcrumb {
   $breadcrumb: &;
 
+  --ilo-breadcrumb-background-color: var(--ilo-color-white);
+  --ilo-breadcrumb-link-color: var(--ilo-color-blue-dark);
+  --ilo-breadcrumb-link-hover-color: var(--ilo-color-blue);
+
   position: relative;
   z-index: 10;
 
+  &__theme {
+    &__dark {
+      --ilo-breadcrumb-background-color: var(--ilo-color-blue-dark);
+      --ilo-breadcrumb-link-color: var(--ilo-color-white);
+      --ilo-breadcrumb-link-hover-color: var(--ilo-color-white);
+    }
+  }
+
   &--inner {
     display: inline-flex;
     // Local variable set in the Hero for alignment
     padding-inline-start: var(--breadcrumb-padding);
     padding-inline-end: spacing(12);
     padding-block: spacing(4);
-    background-color: var(--ilo-color-white);
+    background-color: var(--ilo-breadcrumb-background-color);
     @include cornercut(spacing(12), 100%, "right", "bottom");
 
     [dir="rtl"] & {
@@ -42,7 +54,7 @@
       left: 0;
       position: absolute;
       background-repeat: no-repeat;
-      @include dataurlicon("chevron_right", $color-link-text-default);
+      @include icon("chevron_right", var(--ilo-breadcrumb-link-color));
       background-size: px-to-rem(24px);
       height: px-to-rem(24px);
       width: px-to-rem(24px);
@@ -50,7 +62,7 @@
       [dir="rtl"] & {
         left: auto;
         right: 0;
-        @include dataurlicon("chevron_left", $color-link-text-default);
+        @include icon("chevron_left", var(--ilo-breadcrumb-link-color));
       }
     }
   }
@@ -70,11 +82,11 @@
       width: px-to-rem(24px);
       height: px-to-rem(24px);
       background-size: px-to-rem(24px);
-      @include dataurlicon("dot_menu", $color-link-text-default);
+      @include icon("dot_menu", var(--ilo-breadcrumb-link-color));
 
       &:hover {
         cursor: pointer;
-        @include dataurlicon("dot_menu", $color-base-blue-medium);
+        @include icon("dot_menu", var(--ilo-breadcrumb-link-hover-color));
       }
     }
 
@@ -115,39 +127,30 @@
       width: px-to-rem(24px);
       height: px-to-rem(24px);
 
-      // No chevron befor the home icon
+      // No chevron before the home icon
       &:before {
         content: none;
       }
 
-      &:hover,
-      &:focus {
-        #{$breadcrumb}--link {
+      #{$breadcrumb}--link {
+        height: 24px;
+        width: 24px;
+        position: relative;
+
+        &:hover,
+        &:focus {
           &:after {
-            @include dataurlicon("home", $color-link-text-hover);
-            width: px-to-rem(24px);
-            height: px-to-rem(24px);
+            @include icon("home", var(--ilo-breadcrumb-link-hover-color));
           }
         }
-      }
-
-      #{$breadcrumb}--link {
-        background: none;
-        width: px-to-rem(16px);
-        height: px-to-rem(16px);
-        position: relative;
 
         &:after {
-          background-position: center center;
-          background-repeat: no-repeat;
           content: "";
           display: block;
-          left: 0;
-          top: 0;
-          height: px-to-rem(24px);
-          width: px-to-rem(24px);
-          background-size: px-to-rem(24px);
-          @include dataurlicon("home", $color-link-text-default);
+          height: 24px;
+          width: 24px;
+          position: relative;
+          @include icon("home", var(--ilo-breadcrumb-link-color));
         }
       }
     }
@@ -156,7 +159,7 @@
   &--link {
     display: inline-flex;
     align-items: center;
-    color: $color-link-text-default;
+    color: var(--ilo-breadcrumb-link-color);
     height: px-to-rem(16px);
     padding-block: 0;
     text-decoration: none;
@@ -172,7 +175,7 @@
 
       &:hover,
       &:focus {
-        color: $color-link-text-hover;
+        color: var(--ilo-breadcrumb-link-hover-color);
         text-decoration: underline;
         text-underline-offset: px-to-rem(4px);
         text-decoration-thickness: px-to-rem(2px);

package/scss/components/_card.scss

@@ -141,6 +141,10 @@ $link-hover-selectors: ".ilo--card--link:hover, .ilo--card--link:focus, .ilo--ca
 
     &__light,
     &__soft {
+      #{$self}--date-extra {
+        color: var(--ilo-color-gray-charcoal);
+      }
+
       @include card-link-hover {
         border-bottom: px-to-rem(3px) solid var(--ilo-color-blue);
 
@@ -175,6 +179,7 @@ $link-hover-selectors: ".ilo--card--link:hover, .ilo--card--link:focus, .ilo--ca
       #{$self}--eyebrow,
       #{$self}--intro,
       #{$self}--date,
+      #{$self}--date-extra,
       #{$self}--content--item {
         color: var(--ilo-color-gray-light);
       }

package/scss/components/_datacard.scss

@@ -12,8 +12,8 @@
 
       --max-width: #{px-to-rem(600px)};
 
-      background: $brand-ilo-light-blue;
-      border-bottom: px-to-rem(3px) solid $brand-ilo-ramp-blue;
+      background: var(--ilo-color-blue-lighter);
+      border-bottom: px-to-rem(3px) solid var(--ilo-color-blue-light);
       padding: spacing(12) spacing(10) spacing(14);
       position: relative;
       width: 100%;
@@ -137,16 +137,9 @@
       }
 
       &--content-label {
-        @include font-styles("body-xs");
-        @include textmargin(
-          "margin-bottom",
-          13px,
-          "body-xs",
-          "copy",
-          "headline-5",
-          "display"
-        );
-        color: $brand-ilo-grey-accessible;
+        @include typography("body-small");
+        margin-block-end: spacing(2);
+        color: var(--ilo-color-gray-accessible);
       }
 
       #{$self}--eyebrow {
@@ -154,14 +147,19 @@
       }
 
       &--content-copy {
-        @include font-styles("headline-5");
-        color: $brand-ilo-black;
-        font-family: var(--ilo-fonts-display);
-        font-weight: 500;
+        @include typography("body-large");
+        color: var(--ilo-color-gray-charcoal);
+
+        @include breakpoint("md") {
+          #{$self}__size__wide &,
+          #{$self}__size__fluid & {
+            @include typography("body-xlarge");
+          }
+        }
       }
 
       [class*="ilo--link"] {
-        @include font-styles("headline-6");
+        @include typography("body-large");
         line-height: 1.8;
         margin-inline-end: px-to-rem(12px);
         margin-bottom: px-to-rem(12px);

package/scss/components/_detailcard.scss

@@ -55,7 +55,6 @@
 
       #{$self}--date-extra {
         @include typography("body-medium");
-        color: var(--ilo-color-gray-charcoal);
         gap: spacing(2);
 
         // this makes sure the para will be indented

package/scss/components/_featurecard.scss

@@ -26,8 +26,10 @@
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
-          height: auto;
+          height: 100%;
           width: 100%;
+          object-fit: cover;
+          object-position: center;
         }
       }
 

package/scss/components/_fieldset.scss

@@ -4,6 +4,25 @@
 @import "../mixins";
 
 .ilo--fieldset {
+  --ilo-fieldset-legend-color: var(--ilo-color-gray-charcoal);
+  --ilo-fieldset-helper-color: var(--ilo-color-gray-accessible);
+  --ilo-fieldset-error-color: var(--ilo-color-red-dark);
+
+  &__theme {
+    &__light {
+      --ilo-fieldset-legend-color: var(--ilo-color-gray-charcoal);
+      --ilo-fieldset-helper-color: var(--ilo-color-gray-accessible);
+      --ilo-fieldset-error-color: var(--ilo-color-red-dark);
+    }
+    &__dark {
+      --ilo-fieldset-legend-color: var(--ilo-color-yellow);
+      --ilo-fieldset-helper-color: var(--ilo-color-white);
+      --ilo-fieldset-error-color: var(--ilo-color-red-dark);
+    }
+  }
+
+  appearance: none;
+  $c: &;
   $gap: 24px;
   box-sizing: border-box;
 
@@ -15,9 +34,6 @@
     @include textmargin("gap", $gap, "label-medium", "display", 0, 0);
   }
 
-  appearance: none;
-  $c: &;
-
   &--legend-wrapper {
     @include textmargin("margin-bottom", $gap, "label-medium", "display", 0, 0);
 
@@ -33,6 +49,7 @@
     flex-flow: row nowrap;
     align-items: center;
     @include font-styles("label-medium");
+    color: var(--ilo-fieldset-legend-color);
     line-height: px-to-rem(20px);
   }
 
@@ -99,11 +116,11 @@
   }
 
   &--helper {
-    color: $color-base-neutrals-medium;
+    color: var(--ilo-fieldset-helper-color);
   }
 
   &__error {
-    color: $color-base-red-dark;
+    color: var(--ilo-fieldset-error-color);
   }
 
   &__disabled {

package/scss/components/_form.scss

@@ -5,6 +5,16 @@
 .ilo--form {
   $gap: spacing(8);
   $c: &;
+  --ilo-form-legend-color: var(--ilo-color-blue-dark);
+
+  &__theme {
+    &__light {
+      --ilo-form-legend-color: var(--ilo-color-blue-dark);
+    }
+    &__dark {
+      --ilo-form-legend-color: var(--ilo-color-white);
+    }
+  }
 
   box-sizing: border-box;
   display: flex;
@@ -13,34 +23,15 @@
   flex-direction: column;
   appearance: none;
   gap: $gap;
-  color: $color-base-neutrals-black;
-
-  &__theme {
-    &__light {
-      color: $color-base-neutrals-black;
-
-      label,
-      p {
-        color: $color-base-neutrals-black;
-      }
-    }
-
-    &__dark {
-      color: $color-base-neutrals-lighter;
-
-      label,
-      p {
-        color: $color-base-neutrals-lighter;
-      }
-
-      legend {
-        color: $color-base-yellow;
-      }
-    }
-  }
+  color: var(--ilo-color-gray-charcoal);
 
   &__disabled {
     opacity: 0.5;
     pointer-events: none;
   }
+
+  // Twig uses h2 for the form headline but React doesn't have one
+  h2 {
+    color: var(--ilo-form-legend-color);
+  }
 }

package/scss/components/_formcontrol.scss

@@ -6,12 +6,29 @@
 .ilo--form-control {
   $c: &;
 
+  --ilo-form-control-label-color: var(--ilo-color-gray-charcoal);
+  --ilo-form-control-helper-color: var(--ilo-color-gray-accessible);
+  --ilo-form-control-error-color: var(--ilo-color-red-dark);
+
   grid-area: input;
   display: inline-grid;
   grid-template-rows: auto;
   grid-template-columns: auto;
   gap: spacing(2);
 
+  &__theme {
+    &__light {
+      --ilo-form-control-label-color: var(--ilo-color-gray-charcoal);
+      --ilo-form-control-helper-color: var(--ilo-color-gray-accessible);
+      --ilo-form-control-error-color: var(--ilo-color-red-dark);
+    }
+    &__dark {
+      --ilo-form-control-label-color: var(--ilo-color-white);
+      --ilo-form-control-helper-color: var(--ilo-color-white);
+      --ilo-form-control-error-color: var(--ilo-color-red-dark);
+    }
+  }
+
   &__label-placement {
     // Label is to the flex start of form element
     &__start {
@@ -116,12 +133,12 @@
 
   &__error {
     #{$c}--helper {
-      color: $color-base-red-dark;
+      color: var(--ilo-form-control-error-color);
     }
   }
 
   &--label {
-    color: $color-base-neutrals-black;
+    color: var(--ilo-form-control-label-color);
     grid-area: label;
     display: flex;
     flex-flow: row nowrap;
@@ -179,7 +196,7 @@
 
   &--helper {
     grid-area: helper;
-    color: $color-base-neutrals-medium;
+    color: var(--ilo-form-control-helper-color);
     font-family: var(--ilo-fonts-copy);
     @include font-styles("body-xxs");
   }

package/scss/components/_link.scss

@@ -2,5 +2,11 @@
 @use "../mixins" as *;
 
 .ilo--link {
-  @include linkstyles();
+  &__theme__light {
+    @include linkstyles("light");
+  }
+
+  &__theme__dark {
+    @include linkstyles("dark");
+  }
 }

package/scss/components/_multilinkcard.scss

@@ -41,8 +41,10 @@
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
-          height: auto;
+          height: 100%;
           width: 100%;
+          object-fit: cover;
+          object-position: center;
         }
       }
 

package/scss/components/_pagination.scss

@@ -3,6 +3,18 @@
 @import "../mixins";
 
 .ilo--pagination {
+  --ilo-pagination-page-color: var(--ilo-color-blue-dark);
+
+  &__theme {
+    &__dark {
+      --ilo-pagination-page-color: var(--ilo-color-white);
+    }
+
+    &__light {
+      --ilo-pagination-page-color: var(--ilo-color-blue-dark);
+    }
+  }
+
   display: flex;
   justify-content: space-between;
   margin-bottom: spacing(10);
@@ -160,9 +172,10 @@
   &--page {
     display: flex;
     gap: spacing(1);
-    @include font-styles("nav-md-sm");
+    @include typography("highlight-small");
     margin-inline-end: spacing(2);
     font-family: var(--ilo-fonts-copy);
+    color: var(--ilo-pagination-page-color);
     font-weight: 400;
     line-height: 45px;