@ilo-org/styles 1.8.4 → 1.9.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/_featurecard.scss

@@ -129,7 +129,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

@@ -50,7 +50,7 @@
     color: $color-base-neutrals-white;
     font-family: var(--ilo-fonts-display);
     font-weight: map-get($type, "weights", "label");
-    @include font-styles("body-small");
+    @include typography("highlight-medium-bold");
     line-height: px-to-rem(21.6px);
     @include textmargin(
       "margin-bottom",
@@ -68,7 +68,7 @@
     font-family: var(--ilo-fonts-display);
     font-weight: map-get($type, "weights", "section");
     margin-top: spacing(1);
-    @include font-styles("body-xxs");
+    @include typography("body-xsmall");
     line-height: px-to-rem(18.56px);
     margin-bottom: spacing(12);
   }
@@ -79,7 +79,7 @@
 
   .address--line {
     color: $color-base-neutrals-white;
-    @include font-styles("body-xxs");
+    @include typography("body-xsmall");
     @include textmargin(
       "margin-bottom",
       8px,
@@ -103,7 +103,7 @@
     color: $color-base-neutrals-medium;
     display: inline;
     font-family: var(--ilo-fonts-copy);
-    @include font-styles("body-xxs");
+    @include typography("body-xsmall");
   }
 
   .secondarylinks--list,
@@ -152,7 +152,7 @@
     flex-flow: row nowrap;
     color: $color-ux-labels-actionable;
     font-family: var(--ilo-fonts-display);
-    @include font-styles("label-medium");
+    @include typography("highlight-medium");
     position: relative;
     text-decoration: none;
     width: max-content;

package/scss/components/_formcontrol.scss

@@ -147,40 +147,21 @@
 
     &__size {
       &__small {
-        font-family: var(--ilo-fonts-copy);
-        font-size: px-to-rem(map-get($type, "label-small", "size"));
-        letter-spacing: px-to-rem(
-          map-get($type, "label-small", "letter-spacing")
-        );
-        line-height: px-to-rem(map-get($type, "label-small", "line-height"));
-        font-weight: 400;
+        @include typography("highlight-small-bold");
       }
 
       &__medium {
-        font-family: var(--ilo-fonts-display);
-        font-size: px-to-rem(map-get($type, "label-medium", "size"));
-        letter-spacing: px-to-rem(
-          map-get($type, "label-medium", "letter-spacing")
-        );
-        line-height: px-to-rem(map-get($type, "label-medium", "line-height"));
-        font-weight: 700;
+        @include typography("highlight-medium-bold");
       }
 
       &__large {
-        font-family: var(--ilo-fonts-display);
-        font-size: px-to-rem(map-get($type, "label-large", "size"));
-        letter-spacing: px-to-rem(
-          map-get($type, "label-large", "letter-spacing")
-        );
-        line-height: px-to-rem(map-get($type, "label-large", "line-height"));
-        font-weight: 700;
+        @include typography("highlight-large");
       }
     }
 
     label {
       font-family: inherit;
       font-size: inherit;
-      letter-spacing: inherit;
       line-height: inherit;
       font-weight: inherit;
     }
@@ -198,7 +179,7 @@
     grid-area: helper;
     color: var(--ilo-form-control-helper-color);
     font-family: var(--ilo-fonts-copy);
-    @include font-styles("body-xxs");
+    @include typography("body-xsmall");
   }
 
   .ilo--tooltip--wrapper {

package/scss/components/_hero.scss

@@ -355,10 +355,6 @@
           bottom: 0;
         }
       }
-
-      &--wrapper {
-        left: 2px;
-      }
     }
   }
 

package/scss/components/_herocard.scss

@@ -99,7 +99,7 @@
   }
 
   &--datecopy {
-    @include font-styles("body-small");
+    @include typography("body-medium");
     margin-bottom: px-to-rem(28px);
     color: map-get($color, "hero", "card", "light", "datecopy", "color");
 
@@ -118,8 +118,8 @@
   }
 
   &--eyebrow {
-    @include font-styles("body-small");
-    margin-bottom: px-to-rem(16px);
+    @include typography("body-medium");
+    margin-bottom: spacing(4);
     color: map-get($color, "hero", "card", "light", "eyebrow", "color");
 
     #{$c}__theme__dark & {
@@ -136,30 +136,20 @@
   }
 
   &--intro {
-    @include font-styles("body-small");
-    margin-bottom: px-to-rem(28px);
+    @include typography("body-large", true);
 
     @include breakpoint("lg") {
-      @include font-styles("base");
+      @include typography("body-large");
     }
+    margin-bottom: spacing(7);
   }
 
   &--title {
-    @include font-styles("headline-3");
-    @include textmargin(
-      "margin-bottom",
-      40px,
-      "headline-2",
-      "display",
-      "base",
-      "copy"
-    );
-
-    font-family: var(--ilo-fonts-display);
-    font-weight: 700;
+    @include typography("heading-1", true);
+    margin-bottom: spacing(4);
 
     @include breakpoint("lg") {
-      @include font-styles("headline-2");
+      @include typography("heading-1");
     }
   }
 }

package/scss/components/_image.scss

@@ -2,7 +2,40 @@
 @use "../functions" as *;
 @import "../mixins";
 
+@mixin image-caption-styles {
+  figcaption {
+    border-inline-start: var(--ilo-border-lg) solid
+      var(--ilo-color-borders-default);
+    color: var(--ilo-color-gray-accessible);
+    font-size: var(--ilo-font-size-sm);
+    line-height: var(--ilo-line-height-xlg);
+    font-weight: var(--ilo-font-weight-regular);
+    letter-spacing: var(--ilo-letter-spacing-md);
+    margin-top: spacing(4);
+    padding-inline-start: spacing(2);
+  }
+}
+
+@mixin image-caption-dark-styles {
+  figcaption {
+    color: var(--ilo-color-white);
+    border-inline-color: var(--ilo-color-gray-light-semi-transparent);
+  }
+}
+
+@mixin image-styles {
+  figure {
+    width: 100%;
+    line-height: 0;
+  }
+
+  img {
+    width: 100%;
+  }
+}
+
 .ilo--image {
+  $self: &;
   position: relative;
 
   &--wrapper {
@@ -11,45 +44,57 @@
     width: 100%;
   }
 
-  &--img {
-    line-height: 0;
-  }
+  @include image-styles;
+  @include image-caption-styles;
 
-  &--img,
-  img {
-    width: 100%;
+  &--credit {
+    @include caption-icon-wrapper("right", auto, 24px);
+    position: absolute;
+    bottom: 0;
+    left: 0;
   }
 
-  &--caption {
-    border-left: var(--ilo-border-lg) solid var(--ilo-color-borders-default);
-    color: var(--ilo-color-gray-accessible);
-    font-weight: var(--ilo-font-weight-regular);
-    margin-top: spacing(4);
+  &--tooltip {
     padding-left: spacing(2);
-    @include font-styles("image-caption");
+    padding-right: spacing(1);
   }
 
-  .ilo--credit {
-    bottom: 0;
-    left: 0;
-    position: absolute;
+  &--label {
+    display: none;
+    font-size: var(--ilo-font-size-xsm);
+    line-height: var(--ilo-line-height-xsm);
+    color: var(--ilo-color-gray-light);
+    padding-left: spacing(3);
+    padding-right: spacing(2);
+  }
 
-    @include breakpoint("lg") {
-      bottom: -#{px-to-rem(4px)};
+  [dir="rtl"] & {
+    &--credit {
+      @include caption-icon-wrapper("left", auto, 24px);
+      position: absolute;
+      left: auto;
+      right: 0;
     }
   }
 
-  [dir="rtl"] & {
-    .ilo--image--caption {
-      border-left: none;
-      border-right: var(--ilo-border-lg) solid var(--ilo-color-borders-default);
-      padding-left: 0;
-      padding-right: spacing(2);
+  @include breakpoint("lg") {
+    &--label {
+      display: block;
+    }
+    &--tooltip {
+      display: none;
+    }
+  }
+
+  &__theme__dark {
+    @include image-caption-dark-styles;
+
+    #{$self}--credit {
+      --ilo-caption-icon-wrapper-bg-color: var(--ilo-color-white);
     }
 
-    .ilo--credit {
-      left: auto;
-      right: 0;
+    #{$self}--label {
+      color: var(--ilo-color-gray-charcoal);
     }
   }
 }

package/scss/components/_input.scss

@@ -17,7 +17,7 @@
   box-sizing: border-box;
   font-family: var(--ilo-fonts-copy);
   font-weight: map-get($type, "weights", "section");
-  @include font-styles("label-medium");
+  @include typography("highlight-medium");
   height: px-to-rem(48px);
   margin: spacing(0);
   outline: none;

package/scss/components/_languagetoggle.scss

@@ -71,7 +71,7 @@
     font-weight: 700;
     font-size: px-to-rem(14px);
     line-height: 135%;
-    letter-spacing: -2%;
+    letter-spacing: var(--ilo-letter-spacing-sm);
   }
 
   &--context-menu {

package/scss/components/_linklist.scss

@@ -10,7 +10,7 @@
   &--headline {
     font-family: var(--ilo-fonts-display);
     font-weight: map-get($type, "weights", "label");
-    @include font-styles("headline-5");
+    @include typography("heading-3");
     @include textmargin("margin-bottom", 30px, "headline-5", "display", 0, 0);
   }
 
@@ -18,7 +18,7 @@
     &--headline {
       font-family: var(--ilo-fonts-display);
       font-weight: map-get($type, "weights", "label");
-      @include font-styles("headline-6");
+      @include typography("highlight-large");
       @include textmargin("margin-bottom", 27px, "headline-6", "display", 0, 0);
       @include textmargin(
         "margin-top",
@@ -90,7 +90,7 @@
     color: map-get($color, "link", "text", "default");
     font-family: var(--ilo-fonts-display);
     font-weight: map-get($type, "weights", "section");
-    @include font-styles("body-small");
+    @include typography("highlight-medium-bold");
     padding-top: spacing(4);
     padding-bottom: spacing(4);
     text-decoration: none;

package/scss/components/_multilinkcard.scss

@@ -55,22 +55,22 @@
       }
 
       #{$self}--title {
-        @include font-styles("headline-5");
+        @include typography("heading-2", true);
         margin-bottom: var(--standard-spacing);
         color: var(--ilo-color-gray-charcoal);
 
         @include breakpoint("md") {
-          @include font-styles("headline-4");
+          @include typography("heading-2");
         }
       }
 
       #{$self}--intro {
-        @include font-styles("body-small");
+        @include typography("body-large", true);
         margin-bottom: var(--standard-spacing);
         color: var(--ilo-color-gray-charcoal);
 
         @include breakpoint("md") {
-          @include font-styles("base");
+          @include typography("body-large");
         }
       }
 
@@ -97,14 +97,14 @@
 
           #{$self}--title {
             @include breakpoint("md") {
-              @include font-styles("headline-5");
+              @include typography("heading-3", true);
               margin-bottom: var(--narrow-spacing);
             }
           }
 
           #{$self}--intro {
             @include breakpoint("md") {
-              @include font-styles("body-small");
+              @include typography("body-medium", true);
               margin-bottom: var(--narrow-spacing);
             }
           }