@ilo-org/styles 1.7.0 → 1.7.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ilo-org/styles",
   "description": "Styles for products using ILO's Design System",
-  "version": "1.7.0",
+  "version": "1.7.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/themes": "0.9.1",
     "@ilo-org/fonts": "1.0.0",
-    "@ilo-org/icons": "2.1.0",
-    "@ilo-org/themes": "0.9.1"
+    "@ilo-org/icons": "2.1.0"
   },
   "devDependencies": {
     "cssnano": "^7.0.6",

package/scss/components/_card.scss

@@ -100,14 +100,14 @@ $link-hover-selectors: ".ilo--card--link:hover, .ilo--card--link:focus, .ilo--ca
   }
 
   &--title {
-    color: var(--ilo-color-dark-blue);
+    color: var(--ilo-color-blue-dark);
     @include typography("heading-4");
     margin-bottom: spacing(6);
   }
 
   &--intro {
     color: var(--ilo-color-gray-charcoal);
-    @include typography("body-large");
+    @include typography("body-medium");
   }
 
   &--date {

package/scss/components/_detailcard.scss

@@ -8,7 +8,9 @@
 
   &__type {
     &__detail {
-      --max-width: #{px-to-rem(343px)};
+      // Card will take up 100% of the width of the container
+      // in mobile view for all sizes
+      --max-width: 100%;
 
       border-bottom: px-to-rem(3px) solid var(--ilo-color-gray-light);
       padding: spacing(8) spacing(4);
@@ -39,13 +41,7 @@
       }
 
       #{$self}--title {
-        padding: 0 0 spacing(2) 0;
-        @include font-styles("headline-6");
-        @include breakpoint("lg") {
-          #{$self}__size__wide & {
-            @include font-styles("headline-6");
-          }
-        }
+        margin-bottom: spacing(2);
       }
 
       #{$self}--intro {
@@ -53,16 +49,12 @@
       }
 
       #{$self}--date {
-        font-size: var(--ilo-font-size-sm);
-        line-height: var(--ilo-line-height-xlg);
-        letter-spacing: var(--ilo-letter-spacing-md);
+        @include typography("body-small");
         color: var(--ilo-color-gray-accessible);
       }
 
       #{$self}--date-extra {
-        font-size: var(--ilo-font-size-md);
-        line-height: var(--ilo-line-height-2xlg);
-        letter-spacing: var(--ilo-letter-spacing-md);
+        @include typography("body-medium");
         color: var(--ilo-color-gray-charcoal);
         gap: spacing(2);
 
@@ -82,17 +74,24 @@
 
       &#{$self}__size {
         &__narrow {
-          --max-width: #{px-to-rem(343px)};
+          @include breakpoint("md") {
+            --max-width: #{px-to-rem(343px)};
+          }
+        }
+
+        &__wide {
+          @include breakpoint("md") {
+            --max-width: #{px-to-rem(745px)};
+          }
         }
 
         &__wide,
         &__fluid {
           @include breakpoint("md") {
-            --max-width: #{px-to-rem(745px)};
             padding: spacing(8) spacing(4) spacing(8) spacing(0);
 
             #{$self}--image--wrapper {
-              flex: 1 0 18%;
+              flex: 0 0 px-to-rem(100px);
               height: 100%;
               margin: 0;
             }
@@ -115,13 +114,11 @@
             }
 
             #{$self}--image--wrapper {
-              flex: 1 0 27%;
+              flex: 0 0 px-to-rem(196px);
             }
-          }
 
-          #{$self}--title {
-            @include breakpoint("lg") {
-              @include font-styles("headline-5");
+            #{$self}--title {
+              @include typography("heading-3");
             }
           }
         }

package/scss/components/_profile.scss

@@ -72,7 +72,7 @@
     $icon: "[class*='icon']";
 
     @include typography("highlight-medium");
-    color: var(--ilo-color-dark-blue);
+    color: var(--ilo-color-blue-dark);
     grid-column: 1 / -1;
 
     a {

package/scss/components/_promocard.scss

@@ -7,14 +7,12 @@
   $self: &;
 
   &--wrapper__type__promo {
-    --max-width: #{px-to-rem(634px)};
+    --max-width: 100%;
 
     &__size {
       &__narrow {
-        --max-width: #{px-to-rem(343px)};
-
-        @include breakpoint("md", true) {
-          --max-width: 100%;
+        @include breakpoint("md") {
+          --max-width: #{px-to-rem(343px)};
         }
       }
 
@@ -34,92 +32,72 @@
 
   &__type {
     &__promo {
-      // --max-width: #{px-to-rem(343px)};
-
       padding: spacing(10) spacing(6);
       width: 100%;
 
-      @include breakpoint("md") {
-        padding: spacing(12);
+      #{$self}--title {
+        @include typography("heading-3");
+        margin-bottom: spacing(2);
       }
 
-      @include breakpoint("lg") {
-        padding: spacing(16) spacing(18);
+      #{$self}--intro {
+        @include typography("body-medium");
+        margin-bottom: spacing(8);
       }
 
-      #{$self}--title {
-        margin-bottom: spacing(3);
+      &#{$self}__cornercut {
+        @include cornercut(72px, 40px);
+
+        [dir="rtl"] & {
+          @include cornercut(72px, 40px left);
+        }
       }
 
       &#{$self}__size {
-        &__standard {
-          padding: spacing(12);
-
-          &#{$self}__cornercut {
-            @include cornercut(87px, 48px);
-
-            [dir="rtl"] & {
-              @include cornercut(87px, 48px, left);
+        @include breakpoint("md") {
+          &__standard,
+          &__wide,
+          &__fluid {
+            padding: spacing(12);
+
+            #{$self}--title {
+              @include typography("heading-2");
+              margin-bottom: spacing(3);
             }
-          }
-        }
 
-        &__wide,
-        &__fluid {
-          padding: spacing(16) spacing(18);
+            #{$self}--intro {
+              @include typography("body-large");
+            }
 
-          &#{$self}__cornercut {
-            @include cornercut(116px, 64px);
+            &#{$self}__cornercut {
+              @include cornercut(87px, 48px);
 
-            [dir="rtl"] & {
-              @include cornercut(116px, 64px, left);
+              [dir="rtl"] & {
+                @include cornercut(87px, 48px, left);
+              }
             }
           }
         }
 
-        &__narrow {
-          padding: spacing(10) spacing(6);
+        @include breakpoint("lg") {
+          &__wide,
+          &__fluid {
+            padding: spacing(16) spacing(18);
+            &#{$self}__cornercut {
+              @include cornercut(116px, 64px);
 
-          &#{$self}__cornercut {
-            @include cornercut(72px, 40px);
-
-            [dir="rtl"] & {
-              @include cornercut(72px, 40px left);
+              [dir="rtl"] & {
+                @include cornercut(116px, 64px, left);
+              }
             }
           }
-
-          #{$self}--title {
-            @include font-styles("headline-5");
-            margin-bottom: spacing(2);
-          }
-
-          #{$self}--intro {
-            @include font-styles("body-small");
-          }
         }
       }
 
       &#{$self}__theme__light:not(:hover) #{$self}--title {
-        color: $brand-ilo-black;
+        color: var(--ilo-color-gray-charcoal);
         @include globaltransition("color");
       }
-
-      #{$self}--title {
-        @include font-styles("headline-4");
-
-        @include breakpoint("md") {
-          @include font-styles("headline-2");
-        }
-      }
-
-      #{$self}--intro {
-        @include font-styles("body-small");
-        margin-bottom: spacing(8);
-
-        @include breakpoint("md") {
-          @include font-styles("base");
-        }
-      }
     }
   }
 }

package/scss/components/_scorecard.scss

@@ -54,10 +54,9 @@
       }
 
       #{$self}--title {
-        @include font-styles("headline-5");
-        font-family: var(--ilo-fonts-display);
-        font-weight: 700;
+        @include typography("heading-3");
         margin-bottom: spacing(6);
+        color: var(--ilo-color-blue-dark);
       }
 
       #{$self}--area {
@@ -152,9 +151,7 @@
 
             #{$self}--title {
               grid-area: title;
-              font-size: var(--ilo-font-size-lg);
-              line-height: var(--ilo-line-height-lg);
-              letter-spacing: var(--ilo-letter-spacing-sm);
+              @include typography("heading-4");
             }
 
             #{$self}--area--content {

package/scss/components/_tag.scss

@@ -20,12 +20,7 @@
   padding: spacing(2) spacing(3);
   width: fit-content;
 
-  // Font styles
-  font-family: var(--ilo-fonts-display);
-  font-size: var(--ilo-font-size-sm);
-  font-weight: var(--ilo-font-weight-medium);
-  line-height: var(--ilo-line-height-xlg);
-  letter-spacing: var(--ilo-letter-spacing-sm);
+  @include typography("highlight-small");
 
   // Colors and border
   color: var(--ilo-color-blue-dark);
@@ -62,6 +57,7 @@
     }
 
     &__button,
+    &__reset,
     &__anchor {
       &:hover,
       &:focus {
@@ -85,7 +81,7 @@
   }
 
   .ilo--icon {
-    bottom: px-to-rem(2px);
+    bottom: px-to-rem(1px);
     fill: inherit;
     position: relative;
     margin-inline-start: px-to-rem(2px);