@ilo-org/styles 1.10.2 → 1.11.0

package/scss/components/_notification.scss

@@ -1,25 +1,43 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @import "../mixins";
 @import "../animations";
 
+$notification-types: (
+  "error": (
+    background: var(--ilo-color-notification-type-error),
+    icon: "notification_error",
+  ),
+  "info": (
+    background: var(--ilo-color-notification-type-info),
+    icon: "notification_info",
+  ),
+  "success": (
+    background: var(--ilo-color-notification-type-success),
+    icon: "notification_success",
+  ),
+  "warning": (
+    background: var(--ilo-color-notification-type-warning),
+    icon: "notification_warning",
+  ),
+);
+
 .ilo--notification {
-  background-color: $color-ux-notification-background;
+  background-color: var(--ilo-color-white);
   box-shadow:
     0px 0.8px 1.6px rgba(30, 45, 190, 0.038),
     0px 4px 8px rgba(30, 45, 190, 0.054),
     0px 10px 20px rgba(30, 45, 190, 0.08),
     0px -4px 16px rgba(30, 45, 190, 0.054);
-  border-radius: 2px;
-  color: $color-ux-notification-text;
+  border-radius: px-to-rem(2px);
+  color: var(--ilo-color-gray-charcoal);
   position: relative;
 
   &--dialog {
-    max-width: 340px;
+    max-width: px-to-rem(340px);
     width: 100%;
 
     @include breakpoint("md") {
-      max-width: 490px;
+      max-width: px-to-rem(490px);
     }
 
     .ilo--notification--content {
@@ -28,7 +46,7 @@
   }
 
   &--inline {
-    max-width: 340px;
+    max-width: px-to-rem(340px);
 
     .ilo--notification--content {
       padding: spacing(6);
@@ -41,8 +59,35 @@
         max-width: 100%;
         display: flex;
         justify-content: space-evenly;
-        align-items: center;
+        align-items: baseline;
         padding: spacing(4) spacing(16) spacing(4) spacing(6);
+
+        &:after {
+          top: px-to-rem(18px);
+        }
+      }
+
+      .ilo--notification--headline {
+        margin-bottom: 0;
+      }
+
+      .ilo--notification--copy {
+        margin-inline-start: spacing(6);
+        margin-bottom: 0;
+
+        &:not(:last-child) {
+          flex-grow: 1;
+        }
+      }
+
+      .ilo--notification--date {
+        padding-inline: spacing(6);
+        margin: 0;
+      }
+
+      .ilo--notification--cta {
+        margin-left: spacing(6);
+        bottom: px-to-rem(1px);
       }
     }
   }
@@ -50,50 +95,36 @@
   &--content {
     margin-left: spacing(10);
     position: relative;
-    width: calc(100% - 40px);
+    width: calc(100% - px-to-rem(40px));
 
     &:before {
-      background-position: center px-to-rem(22px);
-      background-repeat: no-repeat;
-      background-size: px-to-rem(24px);
       content: "";
       display: block;
       height: 100%;
-      left: -40px;
+      left: px-to-rem(-40px);
       position: absolute;
       width: px-to-rem(40px);
       top: 0;
+    }
 
-      @include breakpoint("md") {
-        .ilo--notification--inline & {
-          background-position: center;
-        }
-      }
-
-      .icon--error & {
-        background-color: $color-ux-notification-type-error;
-        @include dataurlicon("notification_error", $color-ux-notification-icon);
-      }
-
-      .icon--info & {
-        background-color: $color-ux-notification-type-info;
-        @include dataurlicon("notification_info", $color-ux-notification-icon);
-      }
+    &:after {
+      content: "";
+      position: absolute;
+      top: px-to-rem(22px);
+      left: px-to-rem(-32px);
+      width: px-to-rem(24px);
+      height: px-to-rem(24px);
+    }
 
-      .icon--success & {
-        background-color: $color-ux-notification-type-success;
-        @include dataurlicon(
-          "notification_success",
-          $color-ux-notification-icon
-        );
-      }
+    @each $type, $config in $notification-types {
+      .icon--#{$type} & {
+        &:before {
+          background-color: map-get($config, background);
+        }
 
-      .icon--warning & {
-        background-color: $color-ux-notification-type-warning;
-        @include dataurlicon(
-          "notification_warning",
-          $color-ux-notification-icon
-        );
+        &:after {
+          @include icon(map-get($config, icon), var(--ilo-color-white));
+        }
       }
     }
   }
@@ -103,86 +134,34 @@
     @include typography("highlight-medium-bold");
 
     margin-bottom: spacing(3);
-
-    @include breakpoint("md") {
-      .ilo--notification--inline & {
-        margin-bottom: 0;
-      }
-    }
   }
 
   &--copy {
     font-weight: 400;
     @include typography("body-small");
-
-    @include breakpoint("md") {
-      .ilo--notification--inline & {
-        margin-left: spacing(6);
-      }
-    }
-
-    &:not(:last-child) {
-      @include breakpoint("md") {
-        .ilo--notification--inline & {
-          flex-grow: 1;
-        }
-      }
-    }
+    margin-bottom: spacing(4);
   }
 
   &--date {
-    color: $color-base-neutrals-medium;
+    color: var(--ilo-color-gray-accessible);
     display: block;
     font-weight: 400;
     @include typography("body-small");
 
-    @include breakpoint("md") {
-      .ilo--notification--inline & {
-        margin-left: spacing(4);
-      }
-    }
-
     &:not(:last-child) {
-      margin-bottom: spacing(5);
-    }
-
-    @include breakpoint("md") {
-      .ilo--notification--inline & {
-        margin-bottom: 0;
-      }
+      margin-bottom: spacing(4);
     }
   }
 
   &--cta {
-    @include breakpoint("md") {
-      .ilo--notification--inline & {
-        margin-left: spacing(6);
-      }
-    }
+    position: relative;
   }
 
   &--close {
-    background-color: $color-ux-background-highlight;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: px-to-rem(24px);
+    background-color: var(--ilo-color-background-highlight);
     border: none;
-    height: px-to-rem(40px);
     position: absolute;
     right: 0;
     top: 0;
-    width: px-to-rem(40px);
-    @include dataurlicon("close", $color-ux-labels-actionable);
-
-    &:hover,
-    &:focus {
-      background-color: $color-ux-background-hover;
-      cursor: pointer;
-      @include dataurlicon("close", $color-ux-labels-hover);
-    }
-
-    span {
-      @include isVisuallyHidden();
-    }
   }
 }

package/scss/components/_pagination.scss

@@ -1,4 +1,3 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @import "../mixins";
 

package/scss/components/_profile.scss

@@ -1,4 +1,3 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @import "../animations";
 @import "../mixins";

package/scss/components/_promocard.scss

@@ -1,4 +1,3 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @use "../animations" as *;
 @import "../mixins";

package/scss/components/_radio.scss

@@ -1,4 +1,3 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @import "../mixins";
 
@@ -22,8 +21,8 @@
 
   &--control:before {
     content: "";
-    background-color: $color-base-neutrals-light;
-    border: px-to-rem(4px) solid $color-base-neutrals-light;
+    background-color: var(--ilo-color-gray-base);
+    border: px-to-rem(4px) solid var(--ilo-color-gray-base);
     border-radius: 50%;
     height: px-to-rem(18px);
     left: px-to-rem(3px);
@@ -36,7 +35,7 @@
 
   &--control:after {
     content: "";
-    background-color: $color-base-neutrals-light;
+    background-color: var(--ilo-color-gray-base);
     border-radius: 50%;
     height: px-to-rem(24px);
     left: 0;
@@ -48,16 +47,16 @@
   }
 
   input:checked + &--control:before {
-    background-color: $color-base-blue-light;
-    border-color: $color-base-blue-dark;
+    background-color: var(--ilo-color-blue-lighter);
+    border-color: var(--ilo-color-blue-dark);
   }
 
   input:checked + &--control:after {
-    background-color: $color-base-blue-dark;
+    background-color: var(--ilo-color-blue-dark);
   }
 
   input:focus + &--control:after {
-    background-color: $color-base-yellow;
+    background-color: var(--ilo-color-yellow);
   }
 
   input:disabled + &--control:after,
@@ -67,6 +66,6 @@
 
   input:invalid + &--control:after,
   &__error &--control:after {
-    background-color: $color-base-red-medium;
+    background-color: var(--ilo-color-red);
   }
 }

package/scss/components/_readmore.scss

@@ -1,14 +1,13 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @import "../animations";
 @import "../mixins";
 
 .ilo--read-more {
   &--button {
-    background: map-get($color, "ux", "readmore", "default", "background");
+    background: transparent;
     border: none;
-    border-top: solid $borders-base $color-base-blue-light;
-    color: $color-ux-labels-actionable;
+    border-top: var(--ilo-border-md) solid var(--ilo-color-blue-lighter);
+    color: var(--ilo-color-blue-dark);
     font-family: var(--ilo-fonts-display);
     height: px-to-rem(56px);
     margin-top: spacing(8);
@@ -29,18 +28,18 @@
       transform: translateY(-50%);
       transform-origin: center center;
       width: px-to-rem(24px);
-      @include dataurlicon("chevron_down", $color-ux-labels-actionable);
+      @include icon("chevron_down", var(--ilo-color-blue-dark));
     }
 
     &:hover {
-      background: map-get($color, "ux", "readmore", "hover", "background");
-      border-top: solid $borders-base $color-base-blue-medium;
-      color: $color-ux-labels-hover;
+      background: var(--ilo-color-blue-lighter);
+      border-top: var(--ilo-border-md) solid var(--ilo-color-blue);
+      color: var(--ilo-color-blue);
       cursor: pointer;
       @include globaltransition("color, background-color, border-color");
 
       &:after {
-        @include dataurlicon("chevron_down", $color-ux-labels-hover);
+        @include icon("chevron_down", var(--ilo-color-blue));
       }
     }
 

package/scss/components/_richtext.scss

@@ -1,4 +1,3 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @import "./blockquote";
 @import "./image";

package/scss/components/_scorecard.scss

@@ -1,4 +1,3 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @use "../animations" as *;
 @import "../mixins";

package/scss/components/_searchfield.scss

@@ -1,4 +1,3 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @import "../mixins";
 
@@ -15,52 +14,37 @@
   }
 
   &--button {
-    background-color: map-get(
-      $color,
-      "formelements",
-      "inputbutton",
-      "default",
-      "background"
-    );
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: px-to-rem(24px) px-to-rem(24px);
-    @include bordervalues("inputbutton", "formelements");
-    height: px-to-rem(48px);
-    width: px-to-rem(46px);
-    text-indent: -9999px;
-    @include dataurlicon(
-      "search",
-      $color-formelements-inputbutton-default-color
-    );
+    border-right: var(--ilo-border-md) solid var(--ilo-color-gray-base);
+    border-top: var(--ilo-border-md) solid var(--ilo-color-gray-base);
+    border-bottom: var(--ilo-border-md) solid var(--ilo-color-gray-base);
+    background-color: var(--ilo-color-gray-light);
+    border-left: 0;
+    height: 100%;
+    width: px-to-rem(48px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
 
+    &:after {
+      content: "";
+      position: relative;
+      display: inline-block;
+      height: px-to-rem(24px);
+      width: px-to-rem(24px);
+      @include icon("search", var(--ilo-color-blue-dark));
+    }
+
+    &:hover,
     &:focus {
-      background-color: map-get(
-        $color,
-        "formelements",
-        "inputbutton",
-        "hover",
-        "background"
-      );
-      cursor: pointer;
-      @include dataurlicon(
-        "search",
-        $color-formelements-inputbutton-hover-color
-      );
+      background-color: var(--ilo-color-blue-lighter);
     }
 
     &:active {
-      background-color: map-get(
-        $color,
-        "formelements",
-        "inputbutton",
-        "active",
-        "background"
-      );
-      @include dataurlicon(
-        "search",
-        $color-formelements-inputbutton-active-color
-      );
+      background-color: var(--ilo-color-blue);
+      &:after {
+        @include icon("search", var(--ilo-color-white));
+      }
     }
 
     .haslabel & {
@@ -96,8 +80,7 @@
   [dir="rtl"] & {
     .ilo--searchfield {
       &--button {
-        border-left: px-to-rem(2px) solid
-          $color-formelements-inputbutton-default-border-left;
+        border-left: px-to-rem(2px) solid var(--ilo-color-gray-base);
         border-right: 0;
       }
       &--clear-button {

package/scss/components/_statcard.scss

@@ -1,4 +1,3 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @use "../animations" as *;
 @import "../mixins";
@@ -14,7 +13,7 @@
         --max-width: 100%;
       }
 
-      border-bottom: px-to-rem(3px) solid $brand-ilo-purple;
+      border-bottom: px-to-rem(3px) solid var(--ilo-color-purple);
       padding: spacing(10) spacing(6) spacing(8);
       position: relative;
       width: 100%;
@@ -27,19 +26,19 @@
 
       &#{$self}__color {
         &__blue {
-          background: $brand-ilo-light-blue;
+          background: var(--ilo-color-blue-lighter);
         }
 
         &__yellow {
-          background: $brand-ilo-yellow;
+          background: var(--ilo-color-yellow);
         }
 
         &__green {
-          background: $brand-ilo-green;
+          background: var(--ilo-color-green);
         }
 
         &__turquoise {
-          background: $brand-ilo-turquoise;
+          background: var(--ilo-color-turquoise);
         }
       }
 
@@ -76,24 +75,17 @@
       }
 
       #{$self}--title {
-        color: $brand-ilo-dark-blue;
+        color: var(--ilo-color-blue-dark);
         @include typography("heading-2");
-        @include textmargin(
-          "margin-bottom",
-          24px,
-          "headline-3",
-          "display",
-          0,
-          0
-        );
         width: 100%;
+        margin-bottom: spacing(3);
       }
 
       #{$self}--intro {
-        color: $brand-ilo-dark-blue;
+        color: var(--ilo-color-blue-dark);
         font-family: var(--ilo-fonts-display);
         @include typography("highlight-medium");
-        @include textmargin("margin-bottom", 35px, "nav-md-sm", "copy", 0, 0);
+        margin-bottom: spacing(8);
         width: 100%;
       }
 

package/scss/components/_status.scss

@@ -1,4 +1,3 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @use "../animations" as *;
 @import "../mixins";