@ilo-org/styles 1.0.8 → 1.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ilo-org/styles",
   "description": "Styles for products using ILO's Design System",
-  "version": "1.0.8",
+  "version": "1.1.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/international-labour-organization/designsystem.git",
@@ -39,8 +39,8 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@ilo-org/fonts": "0.2.2",
-    "@ilo-org/themes": "0.9.0",
-    "@ilo-org/icons": "0.4.0"
+    "@ilo-org/icons": "0.4.0",
+    "@ilo-org/themes": "0.9.0"
   },
   "devDependencies": {
     "del": "^7.0.0",

package/scss/_functions.scss

@@ -57,11 +57,13 @@
 // =========================================
 
 @function spacing($size) {
-  $scaled: $size * $spacing-root;
+  $scaled: calc(#{$size} * var(--ilo-spacing-base));
+
   @if ($size % 1 != 0) {
-    $scaled: round($size) * $spacing-root;
+    $scaled: calc(#{round($size)} * var(--ilo-spacing-base));
   }
-  @return px-to-rem($scaled);
+
+  @return $scaled;
 }
 
 // =========================================

package/scss/_mixins.scss

@@ -3,6 +3,7 @@
 //*------------------------------------*/
 @use "tokens" as *;
 @use "functions" as *;
+@use "theme/breakpoints" as *;
 
 // ======================================
 // Output font styles
@@ -40,15 +41,15 @@
 // ======================================
 
 @mixin breakpoint($breakpoint, $max: false) {
-  @if map-has-key($breakpoints, $breakpoint) {
+  @if map-has-key($breakpoints-foundation, $breakpoint) {
     @if not $max {
-      @media screen and (min-width: map-get($breakpoints, $breakpoint)) {
+      @media screen and (min-width: map-get($breakpoints-foundation, $breakpoint)) {
         @content;
       }
     }
 
     @if $max {
-      @media screen and (max-width: #{map-get($breakpoints, $breakpoint) - 1px}) {
+      @media screen and (max-width: #{map-get($breakpoints-foundation, $breakpoint) - 1px}) {
         @content;
       }
     }
@@ -417,7 +418,7 @@
           transform: rotate(180deg);
         }
 
-        @include breakpoint("medium") {
+        @include breakpoint("md") {
           top: px-to-rem(7px);
         }
       }
@@ -435,7 +436,7 @@
       letter-spacing: $type-label-small-letter-spacing;
     }
 
-    @include breakpoint("medium") {
+    @include breakpoint("md") {
       @include font-styles("base");
     }
   }

package/scss/components/_accordion.scss

@@ -59,7 +59,7 @@
       }
     }
 
-    @include breakpoint("medium") {
+    @include breakpoint("md") {
       @include font-styles("label-medium");
       &__large {
         @include font-styles("headline-6");

package/scss/components/_cardgroup.scss

@@ -13,7 +13,7 @@
   }
 
   &__count {
-    @include breakpoint("large") {
+    @include breakpoint("lg") {
       &__one {
         #{$c}--inner {
           grid-template-columns: 1fr;

package/scss/components/_credit.scss

@@ -29,7 +29,7 @@
     width: px-to-rem($spacing-ux-credit-height);
   }
 
-  @include breakpoint("large", true) {
+  @include breakpoint("lg", true) {
     width: 75%;
 
     &--label {
@@ -88,7 +88,7 @@
       transform: scaleX(-1);
     }
 
-    @include breakpoint("large", true) {
+    @include breakpoint("lg", true) {
       &--label {
         left: auto;
         right: 0;

package/scss/components/_datacard.scss

@@ -25,7 +25,7 @@
         row-gap: px-to-rem(26px);
       }
 
-      @include breakpoint("medium") {
+      @include breakpoint("md") {
         padding: spacing(12);
 
         &__columns {
@@ -92,7 +92,7 @@
           @include cornercut(72px, 40px);
           padding: spacing(10) spacing(6) spacing(14);
 
-          @include breakpoint("medium", true) {
+          @include breakpoint("md", true) {
             --max-width: 100%;
           }
         }

package/scss/components/_detailcard.scss

@@ -16,11 +16,11 @@
 
       @include globaltransition(border);
 
-      @include breakpoint("large") {
+      @include breakpoint("lg") {
         padding: spacing(8) 0;
       }
 
-      @include breakpoint("medium", true) {
+      @include breakpoint("md", true) {
         --max-width: 100%;
       }
 
@@ -49,7 +49,7 @@
       #{$self}--title {
         padding: 0 0 spacing(2) 0;
         @include font-styles("headline-6");
-        @include breakpoint("large") {
+        @include breakpoint("lg") {
           #{$self}__size__wide & {
             @include font-styles("headline-5");
           }
@@ -66,19 +66,19 @@
           --max-width: #{px-to-rem(745px)};
 
           #{$self}--title {
-            @include breakpoint("large") {
+            @include breakpoint("lg") {
               @include font-styles("headline-5");
             }
           }
 
           #{$self}--image--wrapper {
-            @include breakpoint("large") {
+            @include breakpoint("lg") {
               flex: 0 0 px-to-rem(196px);
             }
           }
 
           #{$self}--picture {
-            @include breakpoint("large") {
+            @include breakpoint("lg") {
               width: px-to-rem(196px);
             }
           }
@@ -87,7 +87,7 @@
         &__narrow {
           --max-width: #{px-to-rem(343px)};
 
-          @include breakpoint("medium", true) {
+          @include breakpoint("md", true) {
             --max-width: 100%;
           }
         }

package/scss/components/_factlistcard.scss

@@ -15,7 +15,7 @@
 
       @include cornercut(72px, 40px);
 
-      @include breakpoint("large") {
+      @include breakpoint("lg") {
         padding: spacing(12) spacing(10) spacing(14);
       }
 
@@ -25,7 +25,7 @@
 
           padding: spacing(12) spacing(10) spacing(14);
 
-          @include breakpoint("medium") {
+          @include breakpoint("md") {
             @include cornercut(87px, 48px);
           }
         }
@@ -80,7 +80,7 @@
           "copy"
         );
 
-        @include breakpoint("large") {
+        @include breakpoint("lg") {
           @include font-styles("headline-4");
           @include textmargin(
             "margin-bottom",

package/scss/components/_featurecard.scss

@@ -104,7 +104,7 @@
         &__fluid {
           --max-width: #{px-to-rem(754px)};
 
-          @include breakpoint("medium") {
+          @include breakpoint("md") {
             #{$self}--wrap {
               flex-direction: row;
             }

package/scss/components/_fieldset.scss

@@ -22,7 +22,7 @@
     @include textmargin("margin-bottom", $gap, "label-medium", "display", 0, 0);
 
     .ilo--tooltip--wrapper {
-      top: math.div(spacing(1), 2);
+      top: calc(#{spacing(1)} / 2);
     }
   }
 

package/scss/components/_footer.scss

@@ -247,7 +247,7 @@
     }
   }
 
-  @include breakpoint("medium") {
+  @include breakpoint("md") {
     &--main {
       display: grid;
       grid-template-columns: minmax(0, 50%) minmax(0, 50%);
@@ -295,7 +295,7 @@
     }
   }
 
-  @include breakpoint("large") {
+  @include breakpoint("lg") {
     @include footer-triangle(top-right);
 
     &--main {
@@ -392,7 +392,7 @@
       }
     }
 
-    @include breakpoint("medium") {
+    @include breakpoint("md") {
       &--main {
         grid-template-areas:
           "address site-info"
@@ -402,7 +402,7 @@
       }
     }
 
-    @include breakpoint("large") {
+    @include breakpoint("lg") {
       @include footer-triangle(top-left);
 
       &--main {

package/scss/components/_formcontrol.scss

@@ -185,6 +185,6 @@
   }
 
   .ilo--tooltip--wrapper {
-    bottom: math.div(spacing(1), 2);
+    bottom: calc(#{spacing(1)}, 2);
   }
 }

package/scss/components/_heading.scss

@@ -28,7 +28,7 @@
 .ilo--h1 {
   @include font-styles("headline-2");
 
-  @include breakpoint("medium") {
+  @include breakpoint("md") {
     @include font-styles("headline-1");
   }
 }
@@ -36,7 +36,7 @@
 .ilo--h2 {
   @include font-styles("headline-3");
 
-  @include breakpoint("medium") {
+  @include breakpoint("md") {
     @include font-styles("headline-2");
   }
 }
@@ -44,7 +44,7 @@
 .ilo--h3 {
   @include font-styles("headline-4");
 
-  @include breakpoint("medium") {
+  @include breakpoint("md") {
     @include font-styles("headline-3");
   }
 }
@@ -52,7 +52,7 @@
 .ilo--h4 {
   @include font-styles("headline-5");
 
-  @include breakpoint("medium") {
+  @include breakpoint("md") {
     @include font-styles("headline-4");
   }
 }
@@ -60,7 +60,7 @@
 .ilo--h5 {
   @include font-styles("headline-6");
 
-  @include breakpoint("medium") {
+  @include breakpoint("md") {
     @include font-styles("headline-5");
   }
 }
@@ -68,7 +68,7 @@
 .ilo--h6 {
   @include font-styles("headline-6");
 
-  @include breakpoint("medium") {
+  @include breakpoint("md") {
     @include font-styles("headline-6");
   }
 }

package/scss/components/_hero.scss

@@ -111,7 +111,7 @@
     }
   }
 
-  @include breakpoint("large") {
+  @include breakpoint("lg") {
     --card-width: 625px;
     --corner-cut-height: #{$spacing-hero-card-corner-cut-height-lg};
     --breadcrumbs-height: 48px;
@@ -375,7 +375,7 @@
       }
     }
 
-    @include breakpoint("large") {
+    @include breakpoint("lg") {
       &__card-align__bottom {
         &#{$c}__card-justify__start,
         &#{$c}__card-justify__offset {

package/scss/components/_herocard.scss

@@ -9,7 +9,7 @@
   position: relative;
   padding: $spacing-hero-card-padding-y-sm $spacing-hero-card-padding-x-sm;
 
-  @include breakpoint("large") {
+  @include breakpoint("lg") {
     padding-block: $spacing-hero-card-padding-y-lg;
     padding-inline-end: $spacing-hero-card-padding-x-lg;
     padding-inline-start: var(--card-padding-start);
@@ -29,7 +29,7 @@
       color: map-get($color, "hero", "card", "light", "color");
       background: map-get($color, "hero", "card", "light", "background");
 
-      @include breakpoint("large") {
+      @include breakpoint("lg") {
         &.ilo--hero-card__background__semi-transparent {
           background: rgba(
             map-get($color, "hero", "card", "light", "background"),
@@ -43,7 +43,7 @@
       background: map-get($color, "hero", "card", "dark", "background");
       color: map-get($color, "hero", "card", "dark", "color");
 
-      @include breakpoint("large") {
+      @include breakpoint("lg") {
         &.ilo--hero-card__background__semi-transparent {
           background: rgba(
             map-get($color, "hero", "card", "dark", "background"),
@@ -53,7 +53,7 @@
       }
     }
 
-    @include breakpoint("large") {
+    @include breakpoint("lg") {
       &__dark.ilo--hero-card__background__transparent,
       &__light.ilo--hero-card__background__transparent {
         color: map-get($color, "hero", "card", "dark", "color");
@@ -82,7 +82,7 @@
       );
     }
 
-    @include breakpoint("large") {
+    @include breakpoint("lg") {
       @include cornercut(
         $spacing-hero-card-corner-cut-width-lg,
         $spacing-hero-card-corner-cut-height-lg
@@ -139,7 +139,7 @@
     @include font-styles("body-small");
     margin-bottom: px-to-rem(28px);
 
-    @include breakpoint("large") {
+    @include breakpoint("lg") {
       @include font-styles("base");
     }
   }
@@ -158,7 +158,7 @@
     font-family: $fonts-display;
     font-weight: 700;
 
-    @include breakpoint("large") {
+    @include breakpoint("lg") {
       @include font-styles("headline-2");
     }
   }

package/scss/components/_image.scss

@@ -34,7 +34,7 @@
     left: 0;
     position: absolute;
 
-    @include breakpoint("large") {
+    @include breakpoint("lg") {
       bottom: -#{px-to-rem(4px)};
     }
   }

package/scss/components/_list.scss

@@ -11,7 +11,7 @@
     font-family: $fonts-display;
     font-weight: 700;
 
-    @include breakpoint("medium") {
+    @include breakpoint("md") {
       @include font-styles("headline-5");
     }
   }

package/scss/components/_modal.scss

@@ -71,14 +71,14 @@
     }
   }
 
-  @include breakpoint("medium") {
+  @include breakpoint("md") {
     &--contents {
       margin: 0 23.2%;
       width: 53.58%;
     }
   }
 
-  @include breakpoint("large") {
+  @include breakpoint("lg") {
     &--contents {
       margin: 0 18.05%;
       width: 63.888%;

package/scss/components/_multilinkcard.scss

@@ -24,11 +24,11 @@
         }
       }
 
-      @include breakpoint("medium") {
+      @include breakpoint("md") {
         padding: spacing(10);
       }
 
-      @include breakpoint("large") {
+      @include breakpoint("lg") {
         padding: spacing(14) spacing(12);
       }
 
@@ -37,7 +37,7 @@
         margin-bottom: spacing(8);
         color: $brand-ilo-black;
 
-        @include breakpoint("medium") {
+        @include breakpoint("md") {
           @include font-styles("headline-4");
         }
       }
@@ -47,7 +47,7 @@
         margin-bottom: spacing(8);
         color: $brand-ilo-black;
 
-        @include breakpoint("medium") {
+        @include breakpoint("md") {
           @include font-styles("base");
         }
       }
@@ -75,14 +75,14 @@
           }
 
           #{$self}--title {
-            @include breakpoint("medium") {
+            @include breakpoint("md") {
               @include font-styles("headline-5");
               margin-bottom: spacing(6);
             }
           }
 
           #{$self}--intro {
-            @include breakpoint("medium") {
+            @include breakpoint("md") {
               @include font-styles("body-small");
               margin-bottom: spacing(6);
             }
@@ -99,7 +99,7 @@
             margin-bottom: spacing(3);
           }
 
-          @include breakpoint("medium") {
+          @include breakpoint("md") {
             padding: spacing(14) spacing(12);
 
             &#{$self}__align__right {