@ilo-org/styles 0.10.0 → 0.10.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ilo-org/styles",
   "description": "Styles for products using ILO's Design System",
-  "version": "0.10.0",
+  "version": "0.10.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/international-labour-organization/designsystem.git",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@ilo-org/fonts": "0.1.0",
     "@ilo-org/icons": "0.2.1",
-    "@ilo-org/themes": "0.5.0"
+    "@ilo-org/themes": "0.6.0"
   },
   "devDependencies": {
     "cssnano": "^5.1.13",

package/scss/components/_file-upload.scss

@@ -78,10 +78,14 @@
 
   &--list {
     order: 4;
+    display: flex;
+    flex-flow: column;
+    padding-top: px-to-rem($spacing-padding-1);
+    gap: px-to-rem($spacing-padding-1);
   }
 
   &--list-item {
-    display: inline-block;
+    display: block;
     background-color: $color-formelements-uploadedfile-default-background;
     @include bordervalues("uploadedfile", "formelements", "default");
     box-sizing: border-box;
@@ -91,7 +95,6 @@
     height: px-to-rem(
       map-get($spacing, "formelements", "uploadedfile", "default", "height")
     );
-    @include spacingvalues("margin", "uploadedfile", "formelements");
     outline: none;
     @include spacingvalues("padding", "uploadedfile", "formelements");
   }

package/scss/components/_formcontrol.scss

@@ -16,7 +16,7 @@
     // Label is to the flex start of form element
     &__start {
       // Label
-      :first-child {
+      #{$c}--label {
         grid-area: 1 / 1 / 2 / 2;
       }
 
@@ -26,12 +26,12 @@
       }
 
       // Helper
-      :nth-child(3) {
+      #{$c}--helper {
         grid-area: 2 / 2 / 3 / 3;
       }
 
       // Upload
-      :nth-child(4) {
+      [class*="file-upload--list"] {
         grid-area: 3 / 1 / 4 / 3;
       }
     }
@@ -39,7 +39,7 @@
     // Label is at the end of the form element
     &__end {
       // Label
-      :first-child {
+      #{$c}--label {
         grid-area: 1 / 2 / 2 / 3;
       }
 
@@ -49,20 +49,20 @@
       }
 
       // Helper
-      :nth-child(3) {
+      #{$c}--helper {
         grid-area: 2 / 1 / 3 / 3;
       }
 
       // Upload
-      :nth-child(4) {
-        grid-area: 3 / 1 / 4 / 3;
+      [class*="file-upload--list"] {
+        grid-area: 3 / 1 / 4 / 4;
       }
     }
 
     // Label is above form element
     &__top {
       // Label
-      :first-child {
+      #{$c}--label {
         grid-area: 1 / 1 / 2 / 2;
       }
 
@@ -72,12 +72,12 @@
       }
 
       // Helper
-      :nth-child(3) {
+      #{$c}--helper {
         grid-area: 3 / 1 / 4 / 2;
       }
 
       // Upload
-      :nth-child(4) {
+      [class*="file-upload--list"] {
         grid-area: 4 / 1 / 5 / 2;
       }
     }
@@ -85,7 +85,7 @@
     // Label is below form element
     &__bottom {
       // Label
-      :first-child {
+      #{$c}--label {
         grid-area: 3 / 1 / 4 / 2;
       }
 
@@ -95,12 +95,12 @@
       }
 
       // Helper
-      :nth-child(3) {
+      #{$c}--helper {
         grid-area: 1 / 1 / 2 / 2;
       }
 
       // Upload
-      :nth-child(4) {
+      [class*="file-upload--list"] {
         grid-area: 4 / 1 / 5 / 2;
       }
     }

package/scss/components/_hero.scss

@@ -2,29 +2,28 @@
 @use "../functions" as *;
 @import "../mixins";
 
-// @TODO: The grid layout is fairly clean until you get to the placement of the caption which breaks out of it
-// and uses a lot of absolute positioning. This should be cleaned up to use the grid layout more effectively.
-
 .hero {
   $c: &;
 
-  // SASS vars are all constants
-  $tooltip-width: 30px;
-  $tooltip-height: 27px;
-  $image-max-height: 216px;
-  $corner-cut-sm: 39px;
-  $corner-cut-lg: 64px;
+  // Offset from the edge of the window to keep content in the main content area
+  $base-offset: calc((100vw - #{$layout-max-width}) / 2);
+
+  // Card offset from the edge of the window minus the card's padding
+  $card-offset: calc(#{$base-offset} - #{$spacing-hero-card-padding-x-lg});
+
+  // Added offset for justified offset
+  $card-offset-justified: minmax(108px, #{$card-offset});
 
-  // CSS vars can be changed
-  --corner-cut-height: #{$corner-cut-sm};
+  // The height of the corner cut
+  --corner-cut-height: #{$spacing-hero-card-corner-cut-height-sm};
 
   width: 100%;
   display: grid;
   position: relative;
   grid-template-rows:
-    minmax($image-max-height, 1fr)
-    $tooltip-height
-    $corner-cut-sm
+    minmax($spacing-hero-image-max-height, 1fr)
+    $spacing-hero-tooltip-height
+    $spacing-hero-card-corner-cut-height-sm
     auto;
   grid-template-columns: 1fr;
 
@@ -53,27 +52,30 @@
     grid-area: 2 / 1 / 3 / 2;
 
     &--wrapper {
-      @include caption-icon-wrapper("right", $tooltip-width, $tooltip-height);
+      @include caption-icon-wrapper(
+        "right",
+        $spacing-hero-tooltip-width,
+        $spacing-hero-tooltip-height
+      );
     }
   }
 
   @include breakpoint("large") {
-    --card-width: minmax(200px, 625px);
-    --corner-cut-height: #{$corner-cut-lg};
+    --card-width: 625px;
+    --corner-cut-height: #{$spacing-hero-card-corner-cut-height-lg};
     --breadcrumbs-height: 48px;
-    --card-offset: 109px;
     --image-gap: 240px;
 
     // Defaults to baseline
     --row-1-lg: var(--breadcrumbs-height);
     --row-2-lg: calc(var(--image-gap) - var(--breadcrumbs-height));
     --row-3-lg: auto;
-    --row-4-lg: #{$tooltip-height};
+    --row-4-lg: #{$spacing-hero-tooltip-height};
     --row-5-lg: 72px;
 
     --col-1-lg: 0;
     --col-2-lg: var(--card-width);
-    --col-3-lg: #{$tooltip-width};
+    --col-3-lg: #{$spacing-hero-tooltip-width};
     --col-4-lg: 1fr;
 
     grid-template-rows:
@@ -109,45 +111,47 @@
 
     &__card-size {
       &__small {
-        --card-width: minmax(200px, 625px);
+        --card-width: 625px;
       }
 
       &__medium {
-        --card-width: minmax(200px, 721px);
+        --card-width: 721px;
       }
 
       &__large {
-        --card-width: minmax(200px, 856px);
+        --card-width: 856px;
       }
 
       &__xlarge {
-        --card-width: minmax(200px, 920px);
+        --card-width: 920px;
       }
 
       &__xxlarge {
-        --card-width: minmax(200px, 998px);
+        --card-width: 998px;
       }
     }
 
     &__card-justify {
       &__start {
-        --col-1-lg: 0;
+        --col-1-lg: #{$card-offset};
       }
 
       &__offset {
-        --col-1-lg: var(--card-offset);
+        --col-1-lg: #{$card-offset-justified};
       }
 
       &__center {
-        --col-1-lg: 1fr;
-        --col-4-lg: 1fr;
+        --col-1-lg: calc((100% - var(--card-width)) / 2);
+        --col-4-lg: calc(
+          ((100% - var(--card-width)) / 2) - #{$spacing-hero-tooltip-width}
+        );
       }
     }
 
     &__card-align {
       &__center {
-        --row-4-lg: calc(72px - #{$tooltip-height});
-        --row-5-lg: #{$tooltip-height};
+        --row-4-lg: calc(72px - #{$spacing-hero-tooltip-height});
+        --row-5-lg: #{$spacing-hero-tooltip-height};
       }
 
       &__bottom {
@@ -157,6 +161,46 @@
       }
     }
 
+    &__card-background {
+      &__transparent {
+        #{$c}--card-offset {
+          background-color: transparent !important;
+        }
+      }
+    }
+
+    &__card-theme {
+      &__dark {
+        #{$c}--card-offset {
+          background-color: map-get($color, "base", "blue", "dark");
+        }
+
+        &[class*="semi-transparent"] {
+          #{$c}--card-offset {
+            background: rgba(
+              map-get($color, "hero", "card", "dark", "background"),
+              $opacity-semi-transparent
+            );
+          }
+        }
+      }
+
+      &__light {
+        #{$c}--card-offset {
+          background: map-get($color, "hero", "card", "light", "background");
+        }
+
+        &[class*="semi-transparent"] {
+          #{$c}--card-offset {
+            background: rgba(
+              map-get($color, "hero", "card", "light", "background"),
+              $opacity-semi-transparent
+            );
+          }
+        }
+      }
+    }
+
     &--breadcrumbs {
       grid-area: 1 / 1 / 2 / 5;
       z-index: 1;
@@ -164,7 +208,15 @@
       flex-flow: row nowrap;
 
       &--wrapper {
-        max-width: 500px;
+        width: 100%;
+      }
+
+      &:before {
+        content: "";
+        background-color: $color-base-neutrals-white;
+        position: relative;
+        height: 100%;
+        width: max($spacing-hero-card-padding-x-lg, $base-offset);
       }
     }
 
@@ -180,6 +232,25 @@
       }
     }
 
+    &--card-offset {
+      grid-area: 3 / 1 / 6 / 2;
+      z-index: 0;
+      background-color: transparent;
+
+      #{$c}__card-justify__offset &,
+      #{$c}__card-justify__center & {
+        background-color: transparent;
+      }
+
+      #{$c}__card-align__center & {
+        grid-area: 3 / 1 / 4 / 2;
+      }
+
+      #{$c}__card-align__bottom & {
+        grid-area: 4 / 1 / 6 / 2;
+      }
+    }
+
     &--card {
       grid-area: 3 / 2 / 6 / 3;
 
@@ -219,8 +290,8 @@
         #{$c}--caption--wrapper {
           @include caption-icon-wrapper(
             "right",
-            $tooltip-width,
-            $tooltip-height
+            $spacing-hero-tooltip-width,
+            $spacing-hero-tooltip-height
           );
 
           position: absolute;
@@ -240,7 +311,11 @@
   .right-to-left & {
     &--caption {
       &--wrapper {
-        @include caption-icon-wrapper("left", $tooltip-width, $tooltip-height);
+        @include caption-icon-wrapper(
+          "left",
+          $spacing-hero-tooltip-width,
+          $spacing-hero-tooltip-height
+        );
         position: absolute;
         right: 0;
       }
@@ -250,23 +325,25 @@
       &__card-justify {
         &__start {
           --col-1-lg: 1fr;
-          --col-2-lg: #{$tooltip-width};
+          --col-2-lg: #{$spacing-hero-tooltip-width};
           --col-3-lg: var(--card-width);
-          --col-4-lg: 0;
+          --col-4-lg: #{$card-offset};
         }
 
         &__offset {
           --col-1-lg: 1fr;
-          --col-2-lg: #{$tooltip-width};
+          --col-2-lg: #{$spacing-hero-tooltip-width};
           --col-3-lg: var(--card-width);
-          --col-4-lg: var(--card-offset);
+          --col-4-lg: #{$card-offset-justified};
         }
 
         &__center {
-          --col-1-lg: 1fr;
-          --col-2-lg: #{$tooltip-width};
+          --col-1-lg: calc(
+            ((100% - var(--card-width)) / 2) - #{$spacing-hero-tooltip-width}
+          );
+          --col-2-lg: #{$spacing-hero-tooltip-width};
           --col-3-lg: var(--card-width);
-          --col-4-lg: 1fr;
+          --col-4-lg: calc((100% - var(--card-width)) / 2);
         }
       }
 
@@ -307,8 +384,8 @@
             &--wrapper {
               @include caption-icon-wrapper(
                 "left",
-                $tooltip-width,
-                $tooltip-height
+                $spacing-hero-tooltip-width,
+                $spacing-hero-tooltip-height
               );
 
               position: absolute;
@@ -319,6 +396,10 @@
         }
       }
 
+      &--card-offset {
+        grid-area: 3 / 4 / 6 / 5;
+      }
+
       &--card {
         grid-area: 3 / 3 / 6 / 4;
       }
@@ -336,8 +417,8 @@
 
           @include caption-icon-wrapper(
             "left",
-            $tooltip-width,
-            $tooltip-height
+            $spacing-hero-tooltip-width,
+            $spacing-hero-tooltip-height
           );
         }
       }

package/scss/components/_herocard.scss

@@ -4,16 +4,13 @@
 
 .ilo--hero-card {
   $c: &;
-  $semi-transparent: 0.6;
-  $padding-lg: $spacing-padding-8;
-  $padding-sm: $spacing-padding-5;
 
   height: 100%;
   position: relative;
-  padding: $padding-sm 16px;
+  padding: $spacing-hero-card-padding-y-sm $spacing-hero-card-padding-x-sm;
 
   @include breakpoint("large") {
-    padding: $padding-lg;
+    padding: $spacing-hero-card-padding-y-lg $spacing-hero-card-padding-x-lg;
   }
 
   .right-to-left & {
@@ -38,7 +35,7 @@
         &.ilo--hero-card__background__semi-transparent {
           background: rgba(
             map-get($color, "hero", "card", "light", "background"),
-            $semi-transparent
+            $opacity-semi-transparent
           );
         }
       }
@@ -52,7 +49,7 @@
         &.ilo--hero-card__background__semi-transparent {
           background: rgba(
             map-get($color, "hero", "card", "dark", "background"),
-            $semi-transparent
+            $opacity-semi-transparent
           );
         }
       }
@@ -74,17 +71,31 @@
   }
 
   &__cornercut {
-    @include cornercut(72px, 40px);
+    @include cornercut(
+      $spacing-hero-card-corner-cut-width-sm,
+      $spacing-hero-card-corner-cut-height-sm
+    );
 
     .right-to-left & {
-      @include cornercut(72px, 40px, "left");
+      @include cornercut(
+        $spacing-hero-card-corner-cut-width-sm,
+        $spacing-hero-card-corner-cut-height-sm,
+        "left"
+      );
     }
 
     @include breakpoint("large") {
-      @include cornercut(116px, 64px);
+      @include cornercut(
+        $spacing-hero-card-corner-cut-width-lg,
+        $spacing-hero-card-corner-cut-height-lg
+      );
 
       .right-to-left & {
-        @include cornercut(116px, 64px, "left");
+        @include cornercut(
+          $spacing-hero-card-corner-cut-width-lg,
+          $spacing-hero-card-corner-cut-height-lg,
+          "left"
+        );
       }
     }
   }

package/scss/components/_pagination.scss

@@ -5,6 +5,9 @@
 .ilo--pagination {
   display: flex;
   justify-content: space-between;
+  margin-bottom: px-to-rem(
+    map-get($spacing, "ux", "pagination", "padding", "top")
+  );
   margin-top: px-to-rem(
     map-get($spacing, "ux", "pagination", "padding", "top")
   );

package/scss/components/_radio.scss

@@ -12,7 +12,15 @@
   width: px-to-rem(24px);
   cursor: pointer;
 
-  &:before {
+  input {
+    appearance: none;
+    width: px-to-rem(24px);
+    height: px-to-rem(24px);
+    border-radius: 50%;
+    cursor: pointer;
+  }
+
+  &--control:before {
     content: "";
     background-color: $color-base-neutrals-light;
     border: px-to-rem(4px) solid $color-base-neutrals-light;
@@ -26,7 +34,7 @@
     pointer-events: none;
   }
 
-  &:after {
+  &--control:after {
     content: "";
     background-color: $color-base-neutrals-light;
     border-radius: 50%;
@@ -39,39 +47,26 @@
     pointer-events: none;
   }
 
-  &:checked {
-    &:before {
-      background-color: $color-base-blue-light;
-      border-color: $color-base-blue-dark;
-    }
+  input:checked + &--control:before {
+    background-color: $color-base-blue-light;
+    border-color: $color-base-blue-dark;
+  }
 
-    &:after {
-      background-color: $color-base-blue-dark;
-    }
+  input:checked + &--control:after {
+    background-color: $color-base-blue-dark;
   }
 
-  &:focus {
-    &:after {
-      background-color: $color-base-yellow;
-    }
-    outline: none;
+  input:focus + &--control:after {
+    background-color: $color-base-yellow;
   }
 
-  &:disabled {
+  input:disabled + &--control:after,
+  input:disabled + &--control:before {
     opacity: 45%;
-    pointer-events: none;
   }
 
-  &:invalid,
-  &__error {
-    &:after {
-      background-color: $color-base-red-medium;
-    }
-
-    &:checked {
-      &:before {
-        border-color: $color-base-blue-dark;
-      }
-    }
+  input:invalid + &--control:after,
+  &__error &--control:after {
+    background-color: $color-base-red-medium;
   }
 }

package/scss/components/_tooltip.scss

@@ -39,16 +39,14 @@
     position: relative;
     cursor: pointer;
 
-    &.has-icon {
+    &__icon {
       background-repeat: no-repeat;
       background-size: cover;
       height: px-to-rem($spacing-padding-2);
       min-width: px-to-rem($spacing-padding-2);
       @include dataurlicon("info", $color-ux-labels-actionable);
-    }
 
-    &--dark {
-      &.has-icon {
+      &#{&}__theme__dark {
         @include dataurlicon("info", $color-tooltip-dark-icon);
       }
     }