@ilo-org/styles 1.8.5 → 1.10.0

package/scss/components/_datacard.scss

@@ -18,6 +18,29 @@
       position: relative;
       width: 100%;
 
+      &#{$self}__loading {
+        --ilo-skeleton-element-background-color: var(--ilo-color-gray-base);
+        background-color: var(--ilo-color-gray-light);
+      }
+
+      #{$self}--skeleton--eyebrow {
+        @include skeleton-element(12px, 20%);
+      }
+
+      #{$self}--skeleton--image {
+        @include skeleton-element(279px, 200px);
+        margin-top: spacing(8);
+      }
+
+      #{$self}--skeleton--label {
+        @include skeleton-element(14px, 20%);
+      }
+
+      #{$self}--skeleton--copy {
+        @include skeleton-element(14px, 100%);
+        margin-top: spacing(2);
+      }
+
       &--content {
         &-links-list {
           display: flex;

package/scss/components/_detailcard.scss

@@ -16,6 +16,48 @@
       padding: spacing(8) spacing(4);
       position: relative;
 
+      #{$self}--skeleton--image {
+        @include skeleton-element(64px, 100%);
+      }
+
+      #{$self}--skeleton--eyebrow {
+        @include skeleton-element(12px, 20%);
+      }
+
+      #{$self}--skeleton--title-1 {
+        @include skeleton-element(14px, 90%);
+        margin-top: spacing(4);
+      }
+
+      #{$self}--skeleton--title-2 {
+        @include skeleton-element(14px, 100%);
+        margin-top: spacing(2);
+      }
+
+      #{$self}--skeleton--intro-1 {
+        @include skeleton-element(14px, 80%);
+        margin-top: spacing(4);
+      }
+      #{$self}--skeleton--intro-2 {
+        @include skeleton-element(14px, 85%);
+        margin-top: spacing(2);
+      }
+
+      #{$self}--skeleton--intro-3 {
+        @include skeleton-element(14px, 90%);
+        margin-top: spacing(2);
+      }
+
+      #{$self}--skeleton--intro-4 {
+        @include skeleton-element(14px, 75%);
+        margin-top: spacing(2);
+      }
+
+      #{$self}--skeleton--intro-5 {
+        @include skeleton-element(14px, 35%);
+        margin-top: spacing(2);
+      }
+
       #{$self}--wrap {
         display: flex;
         flex-flow: column;
@@ -64,13 +106,30 @@
         text-indent: px-to-rem(-24px);
 
         .ilo--icon {
-          display: inline-block;
           position: relative;
           vertical-align: sub;
           top: px-to-rem(1px);
         }
       }
 
+      #{$self}--icon-left {
+        display: none;
+      }
+
+      #{$self}--icon-right {
+        display: inline-block;
+      }
+
+      [dir="rtl"] & {
+        #{$self}--icon-left {
+          display: inline-block;
+        }
+
+        #{$self}--icon-right {
+          display: none;
+        }
+      }
+
       &#{$self}__size {
         &__narrow {
           @include breakpoint("md") {
@@ -86,6 +145,41 @@
 
         &__wide,
         &__fluid {
+          #{$self}--content {
+            flex: 1;
+          }
+
+          #{$self}--skeleton--image {
+            @include skeleton-element(130px, 100%);
+          }
+
+          #{$self}--skeleton--title-1 {
+            @include skeleton-element(14px, 80%);
+          }
+
+          #{$self}--skeleton--title-2 {
+            display: none;
+          }
+
+          #{$self}--skeleton--intro-1 {
+            @include skeleton-element(14px, 90%);
+          }
+          #{$self}--skeleton--intro-2 {
+            @include skeleton-element(14px, 85%);
+          }
+
+          #{$self}--skeleton--intro-3 {
+            @include skeleton-element(14px, 86%);
+          }
+
+          #{$self}--skeleton--intro-4 {
+            @include skeleton-element(14px, 50%);
+          }
+
+          #{$self}--skeleton--intro-5 {
+            display: none;
+          }
+
           @include breakpoint("md") {
             padding: spacing(8) spacing(4) spacing(8) spacing(0);
 

package/scss/components/_dropdown.scss

@@ -1,154 +1,82 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @import "../mixins";
+@import "../animations";
 
 .ilo--dropdown {
-  -webkit-appearance: none;
-  -moz-appearance: none;
+  &--wrapper {
+    --ilo-dropdown-background-color: var(--ilo-color-white);
+    --ilo-dropdown-background-color-active: var(--ilo-color-blue-lighter);
+    --ilo-dropdown-color: var(--ilo-color-gray-accessible);
+    --ilo-dropdown-height: #{px-to-rem(48px)};
+    --ilo-dropdown-border-color: var(--ilo-color-gray-base);
+    --ilo-dropdown-button-background-color: var(--ilo-color-gray-light);
+    --ilo-dropdown-button-icon-color: var(--ilo-color-blue-dark);
+    --ilo-dropdown-button-icon-size: calc(var(--ilo-dropdown-height) / 2);
+    --ilo-dropdown-button-icon-offset: calc(
+      var(--ilo-dropdown-button-icon-size) / 2
+    );
+
+    display: inline-block;
+    position: relative;
+
+    &:before {
+      content: "";
+      pointer-events: none;
+      position: absolute;
+      border: 2px solid var(--ilo-dropdown-border-color);
+      background-color: var(--ilo-dropdown-button-background-color);
+      height: var(--ilo-dropdown-height);
+      width: var(--ilo-dropdown-height);
+      right: 0;
+      @include globaltransition("background-color");
+    }
+
+    &:has(select:hover):before {
+      background-color: var(--ilo-dropdown-background-color-active);
+    }
+
+    &:after {
+      content: "";
+      pointer-events: none;
+      position: absolute;
+      height: var(--ilo-dropdown-button-icon-size);
+      width: var(--ilo-dropdown-button-icon-size);
+      right: var(--ilo-dropdown-button-icon-offset);
+      top: var(--ilo-dropdown-button-icon-offset);
+      @include icon("chevron_down", var(--ilo-dropdown-button-icon-color));
+    }
+  }
+
   appearance: none;
-  background-color: map-get(
-    $color,
-    "formelements",
-    "input",
-    "default",
-    "background"
-  );
-  @include bordervalues("input", "formelements");
-  border-radius: 0;
-  box-sizing: content-box;
-  font-family: var(--ilo-fonts-copy);
-  font-weight: map-get($type, "weights", "section");
-  @include font-styles("label-medium");
-  height: px-to-rem(45px);
+  box-sizing: border-box;
+  background-color: var(--ilo-dropdown-background-color);
+  height: var(--ilo-dropdown-height);
+  color: var(--ilo-dropdown-color);
+  width: 100%;
   margin: spacing(0);
-  outline: none;
-  overflow: hidden;
   padding: 0 spacing(14) 0 spacing(4);
   text-overflow: ellipsis;
   white-space: nowrap;
-  width: calc(100% - 78px);
+  outline: none;
+  overflow: hidden;
+  cursor: pointer;
+  border: 2px solid var(--ilo-dropdown-border-color);
+  @include typography("body-medium");
+  @include globaltransition("background-color, border-color, color");
 
-  background-position:
-    calc(100% - 14px) center,
-    100% center;
-  background-repeat: no-repeat;
-  background-size:
-    24px 24px,
-    102px 100%;
-  background-image: url("#{colortodataurlicon('chevron_down', $color-ux-labels-actionable)}"),
-    linear-gradient(
-      to right,
-      transparent 0%,
-      transparent calc(50% - 0.81px),
-      $color-formelements-input-default-border-left calc(50% - 0.8px),
-      $color-formelements-input-default-border-left calc(50% + 0.8px),
-      rgba(237, 240, 242, 1) calc(50% + 0.81px),
-      rgba(237, 240, 242, 1) 100%
-    );
+  &:hover,
+  &:focus,
+  &:active {
+    border-left-color: var(--ilo-color-blue);
+    border-left-width: px-to-rem(3px);
+    padding-left: calc(#{spacing(4)} - #{px-to-rem(1px)});
+    background-color: var(--ilo-dropdown-background-color-active);
+    --ilo-dropdown-color: var(--ilo-color-gray-charcoal);
+  }
 
   option {
-    width: calc(100% - 48px);
+    width: 100%;
     text-overflow: ellipsis;
     overflow: hidden;
   }
-
-  &:hover {
-    background-color: map-get(
-      $color,
-      "formelements",
-      "input",
-      "hover",
-      "background"
-    );
-    @include bordervalues("input", "formelements", "hover");
-    border-left-width: 2px;
-    background-image: url("#{colortodataurlicon('chevron_down', $color-ux-labels-hover)}"),
-      linear-gradient(
-        to right,
-        transparent 0%,
-        transparent calc(50% - 0.81px),
-        $color-formelements-input-default-border-left calc(50% - 0.8px),
-        $color-formelements-input-default-border-left calc(50% + 0.8px),
-        transparent calc(50% + 0.81px),
-        transparent 100%
-      );
-    cursor: pointer;
-  }
-
-  &:focus {
-    background-color: map-get(
-      $color,
-      "formelements",
-      "input",
-      "focus",
-      "background"
-    );
-    @include bordervalues("input", "formelements", "focus");
-    border-left-width: 2px;
-    background-image: url("#{colortodataurlicon('chevron_down', $color-ux-labels-hover)}"),
-      linear-gradient(
-        to right,
-        transparent 0%,
-        transparent calc(50% - 0.81px),
-        $color-formelements-input-default-border-left calc(50% - 0.8px),
-        $color-formelements-input-default-border-left calc(50% + 0.8px),
-        transparent calc(50% + 0.81px),
-        transparent 100%
-      );
-  }
-
-  &:active {
-    background-position:
-      calc(100% - 14px) center,
-      100% center;
-    background-repeat: no-repeat;
-    background-size:
-      24px 24px,
-      102px 100%;
-    background-image: url("#{colortodataurlicon('chevron_down', $color-ux-labels-actionable)}"),
-      linear-gradient(
-        to right,
-        transparent 0%,
-        transparent calc(50% - 0.81px),
-        $color-formelements-input-default-border-left calc(50% - 0.8px),
-        $color-formelements-input-default-border-left calc(50% + 0.8px),
-        rgba(237, 240, 242, 1) calc(50% + 0.81px),
-        rgba(237, 240, 242, 1) 100%
-      );
-    @include bordervalues("input", "formelements");
-  }
-
-  &:disabled {
-    opacity: 0.45;
-    pointer-events: none;
-  }
-
-  &:invalid,
-  &.error,
-  .error & {
-    background-color: map-get(
-      $color,
-      "formelements",
-      "input",
-      "error",
-      "background"
-    );
-    @include bordervalues("input", "formelements", "error");
-  }
-  [dir="rtl"] & {
-    padding: 0 spacing(4) 0 spacing(14);
-    background-position:
-      calc(0% + 14px) center,
-      0% center;
-    background-image: url("#{colortodataurlicon('chevron_down', $color-ux-labels-actionable)}"),
-      linear-gradient(
-        to left,
-        transparent 0%,
-        transparent calc(50% - 0.81px),
-        $color-formelements-input-default-border-right calc(50% - 0.8px),
-        $color-formelements-input-default-border-right calc(50% + 0.8px),
-        rgba(237, 240, 242, 1) calc(50% + 0.81px),
-        rgba(237, 240, 242, 1) 100%
-      );
-  }
 }

package/scss/components/_factlistcard.scss

@@ -56,6 +56,16 @@
         }
       }
 
+      #{$self}--skeleton--title {
+        @include skeleton-element(20px, 60%);
+        margin-bottom: spacing(4);
+      }
+
+      #{$self}--skeleton--list-item {
+        @include skeleton-element(16px, 95%);
+        display: table-cell;
+      }
+
       #{$self}--title {
         color: $brand-ilo-black;
         font-size: var(--ilo-font-size-xlg);

package/scss/components/_featurecard.scss

@@ -9,12 +9,30 @@
   &__type {
     &__feature {
       --max-width: #{px-to-rem(412px)};
-
       display: flex;
       flex-flow: column;
       margin-top: 0;
       position: relative;
 
+      #{$self}--skeleton--image {
+        @include skeleton-element(232px, 100%);
+      }
+
+      #{$self}--skeleton--eyebrow {
+        @include skeleton-element(12px, 20%);
+      }
+
+      #{$self}--skeleton--title {
+        @include skeleton-element(24px, 80%);
+        margin-top: spacing(4);
+      }
+
+      #{$self}--skeleton--date {
+        @include skeleton-element(24px, 60%);
+        margin-top: spacing(4);
+        margin-bottom: spacing(8);
+      }
+
       #{$self}--image--wrapper {
         height: 0;
         overflow: hidden;
@@ -82,6 +100,10 @@
               flex-direction: row;
             }
 
+            #{$self}--skeleton--image {
+              width: 50%;
+            }
+
             #{$self}--content {
               display: flex;
               flex-wrap: wrap;
@@ -129,7 +151,7 @@
       }
 
       #{$self}--title {
-        @include font-styles("headline-5");
+        @include typography("heading-3");
         font-family: var(--ilo-fonts-display);
         font-weight: 700;
       }

package/scss/components/_fieldset.scss

@@ -48,7 +48,7 @@
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
-    @include font-styles("label-medium");
+    @include typography("highlight-medium");
     color: var(--ilo-fieldset-legend-color);
     line-height: px-to-rem(20px);
   }
@@ -104,7 +104,7 @@
   &--helper,
   &__error {
     font-family: var(--ilo-fonts-copy);
-    @include font-styles("body-xxs");
+    @include typography("body-xsmall");
     @include textmargin(
       "margin-top",
       map-get($spacing, "padding-1-5"),

package/scss/components/_file-upload.scss

@@ -22,7 +22,7 @@
     font-weight: map-get($type, "weights", "label");
     @include borderradius("button");
     @include boxpadding("button", "medium");
-    @include font-styles("label-medium");
+    @include typography("highlight-medium");
 
     .ilo--form__theme__dark & {
       color: map-get($color, "ux", "labels", "actionable");
@@ -90,7 +90,7 @@
     box-sizing: border-box;
     font-family: var(--ilo-fonts-display);
     font-weight: map-get($type, "weights", "section");
-    @include font-styles("label-medium");
+    @include typography("highlight-medium");
     height: px-to-rem(48px);
     outline: none;
     padding: spacing(3) spacing(3) spacing(4);

package/scss/components/_footer.scss

@@ -1,13 +1,10 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @import "../animations";
 @import "../mixins";
 
 .ilo--footer {
-  $c: &;
-
-  border-bottom: px-to-rem(3px) solid $color-base-neutrals-light;
-  background-color: $color-base-blue-dark;
+  border-bottom: px-to-rem(3px) solid var(--ilo-color-gray-accessible);
+  background-color: var(--ilo-color-blue-dark);
   position: relative;
   width: 100%;
   overflow: hidden;
@@ -18,7 +15,7 @@
 
     &:after {
       content: "";
-      border-bottom: px-to-rem(6px) solid $color-base-red-medium;
+      border-bottom: px-to-rem(6px) solid var(--ilo-color-red);
       width: 200vw;
       position: absolute;
       bottom: 0;
@@ -41,36 +38,22 @@
       padding: 0;
     }
 
-    background-color: $color-base-neutrals-lighter;
+    background-color: var(--ilo-color-gray-light);
     padding: spacing(8) spacing(4) 0;
     min-height: px-to-rem(56px);
   }
 
   &--headline {
-    color: $color-base-neutrals-white;
-    font-family: var(--ilo-fonts-display);
-    font-weight: map-get($type, "weights", "label");
-    @include font-styles("body-small");
-    line-height: px-to-rem(21.6px);
-    @include textmargin(
-      "margin-bottom",
-      10px,
-      "body-small",
-      "display",
-      "body-xxs",
-      "display"
-    );
+    color: var(--ilo-color-white);
+    @include typography("highlight-medium-bold");
     margin-top: spacing(5);
   }
 
   &--subhead {
-    color: #bedcfa;
-    font-family: var(--ilo-fonts-display);
-    font-weight: map-get($type, "weights", "section");
+    color: var(--ilo-color-blue-light);
     margin-top: spacing(1);
-    @include font-styles("body-xxs");
-    line-height: px-to-rem(18.56px);
     margin-bottom: spacing(12);
+    @include typography("body-xsmall");
   }
 
   .address {
@@ -78,16 +61,8 @@
   }
 
   .address--line {
-    color: $color-base-neutrals-white;
-    @include font-styles("body-xxs");
-    @include textmargin(
-      "margin-bottom",
-      8px,
-      "body-xxs",
-      "display",
-      "body-xxs",
-      "display"
-    );
+    color: var(--ilo-color-white);
+    @include typography("body-xsmall");
   }
 
   .connect {
@@ -100,10 +75,9 @@
 
   .legal,
   .secondarylinks {
-    color: $color-base-neutrals-medium;
+    color: var(--ilo-color-gray-accessible);
     display: inline;
-    font-family: var(--ilo-fonts-copy);
-    @include font-styles("body-xxs");
+    @include typography("body-xsmall");
   }
 
   .secondarylinks--list,
@@ -120,29 +94,25 @@
   }
 
   .secondarylinks--list--item a {
-    color: $color-base-neutrals-medium;
+    color: var(--ilo-color-gray-accessible);
     @include globaltransition("color, border-color");
 
     &:visited {
-      color: map-get($color, "link", "text-footer", "visited");
-      @include globaltransition("color, border-color");
+      color: var(--ilo-color-purple);
     }
 
     &:hover {
-      color: map-get($color, "link", "text-footer", "hover");
-      @include globaltransition("color, border-color");
+      color: var(--ilo-color-blue);
     }
 
     &:active {
-      color: map-get($color, "link", "text-footer", "active");
+      color: var(--ilo-color-blue-dark);
       outline: none;
-      @include globaltransition("color, border-color");
     }
 
     &:focus {
-      color: map-get($color, "link", "text-footer", "focus");
+      color: var(--ilo-color-blue-dark);
       outline: none;
-      @include globaltransition("color, border-color");
     }
   }
 
@@ -150,41 +120,38 @@
     // General Styles
     display: flex;
     flex-flow: row nowrap;
-    color: $color-ux-labels-actionable;
-    font-family: var(--ilo-fonts-display);
-    @include font-styles("label-medium");
+    color: var(--ilo-color-blue-dark);
+    @include typography("highlight-medium");
     position: relative;
     text-decoration: none;
     width: max-content;
 
     // Mobile styles
     justify-content: center;
-    border-bottom: 0.1071811361rem solid $brand-ilo-grey-light;
+    border-bottom: px-to-rem(2px) solid var(--ilo-color-gray-light);
     margin: spacing(3) auto 0 auto;
     padding: spacing(4);
 
+    @include globaltransition("all");
+
     &:after {
       background-repeat: no-repeat;
       content: "";
       height: px-to-rem(24px);
       position: relative;
       margin-left: spacing(2);
-      bottom: px-to-rem(3px);
-      transform: rotateX(180deg);
-      transform-origin: center;
+      bottom: px-to-rem(2px);
       width: px-to-rem(24px);
-      @include dataurlicon("chevron_down", $color-ux-labels-actionable);
+      @include icon("chevron_up", var(--ilo-color-blue-dark));
     }
 
     &:hover {
-      background: map-get($color, "ux", "readmore", "hover", "background");
-      border-bottom: 0.1071811361rem solid $color-base-blue-medium;
-      color: $color-ux-labels-hover;
-      cursor: pointer;
-      @include globaltransition("color, background-color, border-color");
+      background: var(--ilo-color-blue-lighter);
+      border-bottom: px-to-rem(2px) solid var(--ilo-color-blue);
+      color: var(--ilo-color-blue);
 
       &:after {
-        @include dataurlicon("chevron_down", $color-ux-labels-hover);
+        @include icon("chevron_up", var(--ilo-color-blue));
       }
     }
   }
@@ -233,7 +200,7 @@
     }
 
     .anchorlink {
-      bottom: 0;
+      top: px-to-rem(3px);
     }
   }
 
@@ -266,7 +233,7 @@
       align-items: flex-start;
       justify-content: flex-start;
       flex-flow: column;
-      top: 8px;
+      top: spacing(2);
     }
 
     .ilo--button {
@@ -306,12 +273,7 @@
 
     .anchorlink {
       margin: 0;
-      border: none;
       padding: spacing(1);
-
-      &:hover {
-        margin-bottom: -0.1071811361rem;
-      }
     }
   }