@ilo-org/styles 1.1.0 → 1.2.0

package/scss/components/_callout.scss

@@ -1,11 +1,12 @@
 @use "../tokens" as *;
 @use "../functions" as *;
 @import "../mixins";
+@import "../config";
 
-.ilo--callout {
+.#{$prefix}--callout {
   display: flex;
   transition: max-height 225ms ease-out;
-  $self: &;
+  $callout: &;
 
   &--collapse:not(.ilo--callout--open) {
     max-height: 64px;
@@ -16,55 +17,58 @@
     max-height: 300px;
     overflow: hidden;
 
-    #{$self}--toggle--icon {
+    #{$callout}--toggle--icon {
       transform: translateY(-50%) rotate(180deg);
     }
   }
 
-  &--sidebar {
+  &__sidebar {
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: spacing(5) spacing(2);
     width: px-to-rem(40px);
 
-    #{$self}--icon {
+    #{$callout}__icon {
       margin: spacing(1);
     }
   }
 
-  &--content {
+  &__content {
     padding: spacing(6);
     width: 100%;
-    font-size: px-to-rem(14.93px);
+    font-size: px-to-rem(14px);
   }
 
-  &--header {
+  &__header {
     display: flex;
     justify-content: space-between;
-    padding-bottom: spacing(3);
+    padding-block-end: spacing(3);
   }
 
-  &--title {
+  &__title {
     @include font-styles("nav-bold-b");
-
-    font-family: $fonts-display;
+    font-family: var(--ilo-fonts-display);
     font-weight: 700;
   }
 
+  &__description {
+    font-weight: 400;
+  }
+
   &--toggle {
     @include font-styles("nav-bold-b");
 
     background: none;
     border: none;
-    color: $brand-ilo-dark-blue;
+    color: var(--ilo-color-blue-dark);
     cursor: pointer;
-    font-family: $fonts-display;
+    font-family: var(--ilo-fonts-display);
     font-weight: 500;
-    padding-right: spacing(8);
+    padding-inline-end: spacing(8);
     position: relative;
 
-    &--icon {
+    &__icon {
       @include dataurlicon("arrow", $brand-ilo-dark-blue);
 
       background-position: right;
@@ -80,8 +84,8 @@
     }
   }
 
-  &--footer {
-    padding-top: spacing(5);
+  &__footer {
+    padding-block-start: spacing(5);
   }
 
   .icon {
@@ -91,60 +95,56 @@
     height: 16px;
     width: 16px;
 
-    &--error {
-      background-color: $color-ux-notification-type-error;
-
-      @include dataurlicon("error", $color-ux-notification-icon);
+    &__error {
+      background-color: var(--ilo-color-notification-type-error);
+      @include dataurlicon("error", "white");
     }
 
-    &--info {
-      background-color: $color-ux-notification-type-info;
-
-      @include dataurlicon("info", $color-ux-notification-icon);
+    &__info {
+      background-color: var(--ilo-color-notification-type-info);
+      @include dataurlicon("info", "white");
     }
 
-    &--success {
-      background-color: $color-ux-notification-type-success;
-
-      @include dataurlicon("success", $color-ux-notification-icon);
+    &__success {
+      background-color: var(--ilo-color-notification-type-success);
+      @include dataurlicon("success", "white");
     }
 
-    &--warning {
-      background-color: $color-ux-notification-type-warning;
-
-      @include dataurlicon("warning", $color-ux-notification-icon);
+    &__warning {
+      background-color: var(--ilo-color-notification-type-warning);
+      @include dataurlicon("warning", "white");
     }
   }
 
-  &--error {
-    background: $brand-ilo-ramp-red;
+  &__error {
+    background: var(--ilo-color-red-ramp);
 
-    #{$self}--sidebar {
-      background: $brand-ilo-red;
+    #{$callout}__sidebar {
+      background: var(--ilo-color-red);
     }
   }
 
-  &--info {
-    background: $brand-ilo-ramp-blue;
+  &__info {
+    background: var(--ilo-color-blue-ramp);
 
-    #{$self}--sidebar {
-      background: $brand-ilo-blue;
+    #{$callout}__sidebar {
+      background: var(--ilo-color-blue);
     }
   }
 
-  &--success {
-    background: $brand-ilo-ramp-green;
+  &__success {
+    background: var(--ilo-ramp-green);
 
-    #{$self}--sidebar {
-      background: $brand-ilo-green;
+    #{$callout}__sidebar {
+      background: var(--ilo-color-green);
     }
   }
 
-  &--warning {
-    background: $brand-ilo-ramp-yellow;
+  &__warning {
+    background: var(--ilo-color-yellow-ramp);
 
-    #{$self}--sidebar {
-      background: $brand-ilo-yellow;
+    #{$callout}__sidebar {
+      background: var(--ilo-color-yellow);
     }
   }
 }

package/scss/components/_card.scss

@@ -159,7 +159,7 @@
 
   &--title {
     color: $brand-ilo-dark-blue;
-    font-family: $fonts-display;
+    font-family: var(--ilo-fonts-display);
     font-weight: 700;
     @include font-styles("headline-5");
     @include textmargin(

package/scss/components/_contextmenu.scss

@@ -59,7 +59,7 @@
     border-bottom: px-to-rem($borders-base) solid $color-base-neutrals-white;
     color: map-get($color, "link", "text", "default");
     display: inline-block;
-    font-family: $fonts-copy;
+    font-family: var(--ilo-fonts-copy);
     font-weight: map-get($type, "weights", "section");
     padding: spacing(4) spacing(2);
     text-decoration: none;

package/scss/components/_datacard.scss

@@ -140,7 +140,7 @@
       &--content-copy {
         @include font-styles("headline-5");
         color: $brand-ilo-black;
-        font-family: $fonts-display;
+        font-family: var(--ilo-fonts-display);
         font-weight: 500;
       }
 

package/scss/components/_dropdown.scss

@@ -16,7 +16,7 @@
   @include bordervalues("input", "formelements");
   border-radius: 0;
   box-sizing: content-box;
-  font-family: $fonts-copy;
+  font-family: var(--ilo-fonts-copy);
   font-weight: map-get($type, "weights", "section");
   @include font-styles("label-medium");
   height: px-to-rem(45px);

package/scss/components/_featurecard.scss

@@ -192,7 +192,7 @@
       #{$self}--title {
         @include font-styles("headline-5");
         margin-bottom: spacing(6);
-        font-family: $fonts-display;
+        font-family: var(--ilo-fonts-display);
         font-weight: 700;
         flex: 1;
       }

package/scss/components/_fieldset.scss

@@ -27,7 +27,7 @@
   }
 
   &--legend {
-    font-family: $fonts-display;
+    font-family: var(--ilo-fonts-display);
     font-weight: map-get($type, "weights", "label");
     @include font-styles("label-medium");
   }
@@ -82,7 +82,7 @@
 
   &--helper,
   &__error {
-    font-family: $fonts-copy;
+    font-family: var(--ilo-fonts-copy);
     @include font-styles("body-xxs");
     @include textmargin(
       "margin-top",

package/scss/components/_file-upload.scss

@@ -18,7 +18,7 @@
     color: map-get($color, "ux", "labels", "actionable");
     content: attr(data-label);
     display: inline-block;
-    font-family: $fonts-display;
+    font-family: var(--ilo-fonts-display);
     font-weight: map-get($type, "weights", "label");
     @include borderradius("button");
     @include boxpadding("button", "medium");
@@ -88,7 +88,7 @@
     background-color: $color-formelements-uploadedfile-default-background;
     @include bordervalues("uploadedfile", "formelements", "default");
     box-sizing: border-box;
-    font-family: $fonts-display;
+    font-family: var(--ilo-fonts-display);
     font-weight: map-get($type, "weights", "section");
     @include font-styles("label-medium");
     height: px-to-rem(48px);

package/scss/components/_footer.scss

@@ -106,7 +106,7 @@
 
   &--headline {
     color: $color-base-neutrals-white;
-    font-family: $fonts-display;
+    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);
@@ -123,7 +123,7 @@
 
   &--subhead {
     color: #bedcfa;
-    font-family: $fonts-display;
+    font-family: var(--ilo-fonts-display);
     font-weight: map-get($type, "weights", "section");
     margin-top: spacing(1);
     @include font-styles("body-xxs");
@@ -160,7 +160,7 @@
   .secondarylinks {
     color: $color-base-neutrals-medium;
     display: inline;
-    font-family: $fonts-copy;
+    font-family: var(--ilo-fonts-copy);
     @include font-styles("body-xxs");
   }
 
@@ -209,7 +209,7 @@
     display: flex;
     flex-flow: row nowrap;
     color: $color-ux-labels-actionable;
-    font-family: $fonts-display;
+    font-family: var(--ilo-fonts-display);
     @include font-styles("label-medium");
     position: relative;
     text-decoration: none;

package/scss/components/_formcontrol.scss

@@ -130,7 +130,7 @@
 
     &__size {
       &__small {
-        font-family: $fonts-copy;
+        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")
@@ -140,7 +140,7 @@
       }
 
       &__medium {
-        font-family: $fonts-display;
+        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")
@@ -150,7 +150,7 @@
       }
 
       &__large {
-        font-family: $fonts-display;
+        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")
@@ -180,7 +180,7 @@
   &--helper {
     grid-area: helper;
     color: $color-base-neutrals-medium;
-    font-family: $fonts-copy;
+    font-family: var(--ilo-fonts-copy);
     @include font-styles("body-xxs");
   }
 

package/scss/components/_heading.scss

@@ -9,7 +9,7 @@
 .ilo--h5,
 .ilo--h6 {
   color: inherit;
-  font-family: $fonts-display;
+  font-family: var(--ilo-fonts-display);
   font-weight: 700;
 
   &--default {

package/scss/components/_herocard.scss

@@ -155,7 +155,7 @@
       "copy"
     );
 
-    font-family: $fonts-display;
+    font-family: var(--ilo-fonts-display);
     font-weight: 700;
 
     @include breakpoint("lg") {

package/scss/components/_input.scss

@@ -15,7 +15,7 @@
   );
   @include bordervalues("input", "formelements");
   box-sizing: border-box;
-  font-family: $fonts-copy;
+  font-family: var(--ilo-fonts-copy);
   font-weight: map-get($type, "weights", "section");
   @include font-styles("label-medium");
   height: px-to-rem(48px);

package/scss/components/_linklist.scss

@@ -5,7 +5,7 @@
 
 .ilo--link-list {
   &--headline {
-    font-family: $fonts-display;
+    font-family: var(--ilo-fonts-display);
     font-weight: map-get($type, "weights", "label");
     @include font-styles("headline-5");
     @include textmargin("margin-bottom", 30px, "headline-5", "display", 0, 0);
@@ -13,7 +13,7 @@
 
   &--links {
     &--headline {
-      font-family: $fonts-display;
+      font-family: var(--ilo-fonts-display);
       font-weight: map-get($type, "weights", "label");
       @include font-styles("headline-6");
       @include textmargin("margin-bottom", 27px, "headline-6", "display", 0, 0);
@@ -84,7 +84,7 @@
     border-bottom: px-to-rem($borders-base) solid $color-base-neutrals-lighter;
     color: map-get($color, "link", "text", "default");
     display: block;
-    font-family: $fonts-display;
+    font-family: var(--ilo-fonts-display);
     font-weight: map-get($type, "weights", "section");
     @include font-styles("body-small");
     padding-top: spacing(4);

package/scss/components/_list.scss

@@ -8,7 +8,7 @@
   &--title {
     @include font-styles("headline-6");
     margin-bottom: spacing(6);
-    font-family: $fonts-display;
+    font-family: var(--ilo-fonts-display);
     font-weight: 700;
 
     @include breakpoint("md") {

package/scss/components/_loading.scss

@@ -45,7 +45,7 @@
   &--small {
     .ilo--loading--copy {
       color: $color-ux-labels-default;
-      font-family: $fonts-copy;
+      font-family: var(--ilo-fonts-copy);
       font-weight: 400;
       @include font-styles("label-small");
     }

package/scss/components/_logo.scss

@@ -37,7 +37,7 @@
     color: var(--logo-theme-color);
     font-size: var(--logo-font-size);
     line-height: var(--logo-font-size);
-    font-family: $fonts-display;
+    font-family: var(--ilo-fonts-display);
     font-weight: 700;
     display: inline-flex;
     justify-content: flex-start;

package/scss/components/_navigation.scss

@@ -141,7 +141,7 @@
           border: none;
           color: $brand-ilo-white;
           cursor: pointer;
-          font-family: $fonts-display;
+          font-family: var(--ilo-fonts-display);
           font-weight: 500;
           padding: spacing(4) spacing(4) spacing(4) spacing(9);
           text-decoration: none;
@@ -253,7 +253,7 @@
     @include font-styles("headline-6");
     color: $brand-ilo-white;
     display: none;
-    font-family: $fonts-display;
+    font-family: var(--ilo-fonts-display);
     font-weight: 700;
     padding: spacing(4) 0;
     text-align: right;
@@ -299,7 +299,7 @@
 
   &--items {
     @include font-styles("nav-md");
-    font-family: $fonts-display;
+    font-family: var(--ilo-fonts-display);
     font-weight: 500;
 
     @include breakpoint("lg") {
@@ -355,7 +355,7 @@
     color: $brand-ilo-dark-blue;
     cursor: pointer;
     display: block;
-    font-family: $fonts-display;
+    font-family: var(--ilo-fonts-display);
     font-weight: 500;
     padding: spacing(4) spacing(9) spacing(4) spacing(2);
     line-height: 24px;
@@ -475,7 +475,7 @@
     &--item {
       @include font-styles("nav-md");
       color: $brand-ilo-white;
-      font-family: $fonts-display;
+      font-family: var(--ilo-fonts-display);
       font-weight: 500;
     }
 
@@ -542,7 +542,7 @@
     color: $brand-ilo-dark-blue;
     cursor: pointer;
     display: block;
-    font-family: $fonts-display;
+    font-family: var(--ilo-fonts-display);
     font-weight: 500;
     padding: spacing(4) spacing(9) spacing(4) spacing(2);
     line-height: 16px;
@@ -633,7 +633,7 @@
     color: $brand-ilo-white;
     cursor: pointer;
     display: block;
-    font-family: $fonts-display;
+    font-family: var(--ilo-fonts-display);
     font-weight: 500;
     padding: spacing(2) 30px spacing(2) spacing(10);
     transition: all 150ms ease-out;
@@ -740,7 +740,7 @@
     background: $brand-ilo-white;
     color: $brand-ilo-dark-blue;
     display: flex;
-    font-family: $fonts-display;
+    font-family: var(--ilo-fonts-display);
     font-weight: 500;
     padding: 18px spacing(2);
     text-decoration: none;
@@ -773,7 +773,7 @@
     border: none;
     color: $brand-ilo-dark-blue;
     cursor: pointer;
-    font-family: $fonts-display;
+    font-family: var(--ilo-fonts-display);
     font-weight: 500;
     padding: spacing(5) spacing(4) spacing(4) spacing(8);
     position: relative;
@@ -838,7 +838,7 @@
     @include font-styles("headline-6");
     border-bottom: 3px solid $brand-ilo-grey-light;
     color: $brand-ilo-black;
-    font-family: $fonts-display;
+    font-family: var(--ilo-fonts-display);
     font-weight: 700;
     margin-bottom: spacing(4);
     padding: spacing(5) spacing(2);

package/scss/components/_pagination.scss

@@ -15,7 +15,7 @@
     border-radius: 2px;
     color: map-get($color, "ux", "pagination", "default", "icon");
     display: inline-block;
-    font-family: $fonts-display;
+    font-family: var(--ilo-fonts-display);
     height: px-to-rem(40px);
     overflow: hidden;
     position: relative;
@@ -227,7 +227,7 @@
     gap: spacing(1);
     @include font-styles("nav-md-sm");
     margin-inline-end: spacing(2);
-    font-family: $fonts-copy;
+    font-family: var(--ilo-fonts-copy);
     font-weight: 400;
     line-height: 45px;
 

package/scss/components/_profile.scss

@@ -49,15 +49,15 @@ $avatar-size-lg: $row-1-lg;
   }
 
   &--name {
-    font-family: $fonts-display;
+    font-family: var(--ilo-fonts-display);
   }
 
   &--role {
-    font-family: $fonts-copy;
+    font-family: var(--ilo-fonts-copy);
   }
 
   &--description {
-    font-family: $fonts-copy;
+    font-family: var(--ilo-fonts-copy);
     grid-row: 2;
     grid-column: 1 / -1;
   }
@@ -65,7 +65,7 @@ $avatar-size-lg: $row-1-lg;
   &--link {
     $link: &;
 
-    font-family: $fonts-display;
+    font-family: var(--ilo-fonts-display);
     grid-column: 1 / -1;
 
     a {

package/scss/components/_readmore.scss

@@ -9,7 +9,7 @@
     border: none;
     border-top: solid $borders-base $color-base-blue-light;
     color: $color-ux-labels-actionable;
-    font-family: $fonts-display;
+    font-family: var(--ilo-fonts-display);
     height: px-to-rem(56px);
     margin-top: spacing(8);
     padding: spacing(4) spacing(7) spacing(4) spacing(0);

package/scss/components/_richtext.scss

@@ -3,7 +3,7 @@
 @import "../mixins";
 
 .ilo--richtext {
-  font-family: $fonts-copy;
+  font-family: var(--ilo-fonts-copy);
   font-weight: 400;
   @include font-styles("base");
 
@@ -85,7 +85,7 @@
   h3,
   h4,
   h5 {
-    font-family: $fonts-display;
+    font-family: var(--ilo-fonts-display);
     font-weight: 700;
     margin-top: spacing(14);
   }
@@ -156,7 +156,7 @@
     background-repeat: no-repeat;
     background-size: px-to-rem(72px) px-to-rem(40px);
     display: block;
-    font-family: $fonts-display;
+    font-family: var(--ilo-fonts-display);
     margin: spacing(6) 0 spacing(10) 0;
     padding: spacing(19) 0 spacing(9) spacing(8); // check
     position: relative;

package/scss/components/_socialmedia.scss

@@ -36,7 +36,7 @@
 
   &--headline {
     color: map-get($color, "socialmedia", $default-theme, "headline", "color");
-    font-family: $fonts-display;
+    font-family: var(--ilo-fonts-display);
     font-weight: map-get($type, "weights", "label");
     @include font-styles("body-small");
     @include textmargin("margin-bottom", 28px, "body-small", "display", 0, 0);

package/scss/components/_statcard.scss

@@ -67,7 +67,7 @@
 
       #{$self}--intro {
         color: $brand-ilo-dark-blue;
-        font-family: $fonts-display;
+        font-family: var(--ilo-fonts-display);
         @include font-styles("base");
         @include textmargin("margin-bottom", 35px, "nav-md-sm", "copy", 0, 0);
         width: 100%;

package/scss/components/_table.scss

@@ -42,7 +42,7 @@
       background-color: $color-ux-table-content-background;
       border-left: px-to-rem(1px) solid $color-base-neutrals-lighter;
       border-bottom: px-to-rem(2px) solid $color-base-neutrals-lighter;
-      font-family: $fonts-display;
+      font-family: var(--ilo-fonts-display);
       font-weight: 700;
       @include font-styles("body-xs");
       letter-spacing: -0.02em;
@@ -109,7 +109,7 @@
 
     &--cell {
       border-bottom: px-to-rem(2px) solid $color-base-neutrals-lighter;
-      font-family: $fonts-copy;
+      font-family: var(--ilo-fonts-copy);
       font-weight: 400;
       @include font-styles("body-xs");
       outline: 0;
@@ -154,7 +154,7 @@
   &--headline {
     align-items: center;
     display: flex;
-    font-family: $fonts-display;
+    font-family: var(--ilo-fonts-display);
     font-weight: 700;
     margin-bottom: spacing(2);
     @include font-styles("headline-6");
@@ -166,7 +166,7 @@
 
   &--description {
     color: $color-base-neutrals-medium;
-    font-family: $fonts-copy;
+    font-family: var(--ilo-fonts-copy);
     font-weight: 400;
     @include font-styles("body-xxs");