@ilo-org/styles 1.10.2 → 1.11.1

package/scss/components/_hero.scss

@@ -1,15 +1,27 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @import "../mixins";
 
 .hero {
   $c: &;
 
+  // Shared spacing values for Hero and HeroCard components
+  --hero-card-padding-y-sm: #{spacing(10)};
+  --hero-card-padding-y-lg: #{px-to-rem(56px)};
+  --hero-card-padding-x-sm: #{spacing(4)};
+  --hero-card-padding-x-lg: #{px-to-rem(71px)};
+  --hero-card-corner-cut-width-sm: #{px-to-rem(72px)};
+  --hero-card-corner-cut-width-lg: #{px-to-rem(116px)};
+  --hero-card-corner-cut-height-sm: #{px-to-rem(40px)};
+  --hero-card-corner-cut-height-lg: #{px-to-rem(64px)};
+  --hero-tooltip-width: #{px-to-rem(30px)};
+  --hero-tooltip-height: #{px-to-rem(27px)};
+  --hero-image-min-height: #{px-to-rem(216px)};
+
   // Additional offset to add for justify: offset
   --added-offset: 0px;
 
   // Total offset from the edge of the window
-  --base-offset: calc(((100vw - #{$layout-max-width}) / 2));
+  --base-offset: calc(((100vw - #{px-to-rem(1300px)}) / 2));
 
   // Breadcrumb offset. This is used directly by the breadcrumb component
   // Ensures the Breadcrumb aligns to the starting edge of a 1300px content
@@ -19,37 +31,34 @@
   // Card padding defaults to a fixed value. But it's a CSS variable
   // so that we can make it squeezy when the card is justified `start`
   // or `offset`
-  --card-padding-start: #{$spacing-hero-card-padding-x-lg};
+  --card-padding-start: var(--hero-card-padding-x-lg);
 
   // Squeezy padding makes it so we can have a flexible padding value
   // that will be somewhere between 16px and the card's fixed padding
   // depending on how far the card is from the edge of the screen
   $squeezy-padding-start: max(
-    16px,
-    min(
-      var(--base-offset) + var(--added-offset),
-      #{$spacing-hero-card-padding-x-lg}
-    )
+    #{spacing(4)},
+    min(var(--base-offset) + var(--added-offset), var(--hero-card-padding-x-lg))
   );
 
   // Card offset from the edge of the window minus the card's fixed padding
   $card-offset: calc(
-    var(--base-offset) - #{$spacing-hero-card-padding-x-lg} + var(--added-offset)
+    var(--base-offset) - var(--hero-card-padding-x-lg) + var(--added-offset)
   );
 
   // The height of the corner cut
-  --corner-cut-height: #{$spacing-hero-card-corner-cut-height-sm};
+  --corner-cut-height: var(--hero-card-corner-cut-height-sm);
 
   width: 100%;
   display: grid;
   position: relative;
   grid-template-columns: 1fr;
   overflow: hidden;
-  @include hero-grid-rows(1rem);
+  @include hero-grid-rows(var(--hero-image-min-height));
 
   &--image {
     display: grid;
-    @include hero-grid-rows();
+    @include hero-grid-rows(var(--hero-image-min-height));
   }
 
   &__gap {
@@ -58,21 +67,21 @@
     }
 
     &__white {
-      background-color: $brand-ilo-white;
+      background-color: var(--ilo-color-white);
     }
 
     &__light {
-      background-color: $brand-ilo-light-blue;
+      background-color: var(--ilo-color-blue-lighter);
     }
 
     &__dark {
-      background-color: $brand-ilo-dark-blue;
+      background-color: var(--ilo-color-blue-dark);
     }
   }
 
   &--background {
     display: grid;
-    background-color: map-get($color, "base", "blue", "light");
+    background-color: var(--ilo-color-blue-lighter);
     position: relative;
     grid-area: 1 / 1 / 4 / 2;
 
@@ -105,15 +114,15 @@
     &--wrapper {
       @include caption-icon-wrapper(
         "right",
-        $spacing-hero-tooltip-width,
-        $spacing-hero-tooltip-height
+        var(--hero-tooltip-width),
+        var(--hero-tooltip-height)
       );
     }
   }
 
   @include breakpoint("lg") {
     --card-width: 625px;
-    --corner-cut-height: #{$spacing-hero-card-corner-cut-height-lg};
+    --corner-cut-height: var(--hero-card-corner-cut-height-lg);
     --breadcrumbs-height: 48px;
     --image-gap: 240px;
 
@@ -121,12 +130,12 @@
     --row-1-lg: var(--breadcrumbs-height);
     --row-2-lg: calc(var(--image-gap) - var(--breadcrumbs-height));
     --row-3-lg: auto;
-    --row-4-lg: #{$spacing-hero-tooltip-height};
+    --row-4-lg: var(--hero-tooltip-height);
     --row-5-lg: 72px;
 
     --col-1-lg: 0;
     --col-2-lg: var(--card-width);
-    --col-3-lg: #{$spacing-hero-tooltip-width};
+    --col-3-lg: var(--hero-tooltip-width);
     --col-4-lg: 1fr;
 
     grid-template-rows:
@@ -195,15 +204,15 @@
       &__center {
         --col-1-lg: calc((100% - var(--card-width)) / 2);
         --col-4-lg: calc(
-          ((100% - var(--card-width)) / 2) - #{$spacing-hero-tooltip-width}
+          ((100% - var(--card-width)) / 2) - var(--hero-tooltip-width)
         );
       }
     }
 
     &__card-align {
       &__center {
-        --row-4-lg: calc(72px - #{$spacing-hero-tooltip-height});
-        --row-5-lg: #{$spacing-hero-tooltip-height};
+        --row-4-lg: calc(#{px-to-rem(72px)} - var(--hero-tooltip-height));
+        --row-5-lg: var(--hero-tooltip-height);
       }
 
       &__bottom {
@@ -225,44 +234,29 @@
     &__card-theme {
       &__dark {
         #{$c}--card-offset {
-          background-color: map-get($color, "base", "blue", "dark");
+          background-color: var(--ilo-color-blue-dark);
           position: relative;
-          box-shadow: 0.3px 0 0 0 map-get($color, "base", "blue", "dark");
+          box-shadow: 0.3px 0 0 0 var(--ilo-color-blue-dark);
         }
 
         &[class*="semi-transparent"] {
           #{$c}--card-offset {
-            background: rgba(
-              map-get($color, "hero", "card", "dark", "background"),
-              $opacity-semi-transparent
-            );
-            box-shadow: 0.3px 0 0 0
-              rgba(
-                map-get($color, "hero", "card", "dark", "background"),
-                $opacity-semi-transparent
-              );
+            background: rgba(35, 0, 80, 0.6);
+            box-shadow: 0.3px 0 0 0 rgba(35, 0, 80, 0.6);
           }
         }
       }
 
       &__light {
         #{$c}--card-offset {
-          background: map-get($color, "hero", "card", "light", "background");
-          box-shadow: 0.3px 0 0 0
-            map-get($color, "hero", "card", "light", "background");
+          background: var(--ilo-color-white);
+          box-shadow: 0.3px 0 0 0 var(--ilo-color-white);
         }
 
         &[class*="semi-transparent"] {
           #{$c}--card-offset {
-            background: rgba(
-              map-get($color, "hero", "card", "light", "background"),
-              $opacity-semi-transparent
-            );
-            box-shadow: 0.3px 0 0 0
-              rgba(
-                map-get($color, "hero", "card", "light", "background"),
-                $opacity-semi-transparent
-              );
+            background: rgba(255, 255, 255, 0.6);
+            box-shadow: 0.3px 0 0 0 rgba(255, 255, 255, 0.6);
           }
         }
       }
@@ -345,8 +339,8 @@
         #{$c}--caption--wrapper {
           @include caption-icon-wrapper(
             "right",
-            $spacing-hero-tooltip-width,
-            $spacing-hero-tooltip-height
+            var(--hero-tooltip-width),
+            var(--hero-tooltip-height)
           );
 
           position: absolute;
@@ -363,8 +357,8 @@
       &--wrapper {
         @include caption-icon-wrapper(
           "left",
-          $spacing-hero-tooltip-width,
-          $spacing-hero-tooltip-height
+          var(--hero-tooltip-width),
+          var(--hero-tooltip-height)
         );
         right: 0;
         position: absolute;
@@ -378,8 +372,8 @@
           #{$c}--caption--wrapper {
             @include caption-icon-wrapper(
               "left",
-              $spacing-hero-tooltip-width,
-              $spacing-hero-tooltip-height
+              var(--hero-tooltip-width),
+              var(--hero-tooltip-height)
             );
 
             position: absolute;

package/scss/components/_herocard.scss

@@ -1,17 +1,24 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @import "../mixins";
 
 .ilo--hero-card {
   $c: &;
+  --hero-card-padding-y-sm: 40px;
+  --hero-card-padding-x-sm: 16px;
+  --hero-card-padding-y-lg: 56px;
+  --hero-card-padding-x-lg: 32px;
+  --hero-card-corner-cut-width-sm: 72px;
+  --hero-card-corner-cut-height-sm: 40px;
+  --hero-card-corner-cut-width-lg: 116px;
+  --hero-card-corner-cut-height-lg: 64px;
 
   height: 100%;
   position: relative;
-  padding: $spacing-hero-card-padding-y-sm $spacing-hero-card-padding-x-sm;
+  padding: var(--hero-card-padding-y-sm) var(--hero-card-padding-x-sm);
 
   @include breakpoint("lg") {
-    padding-block: $spacing-hero-card-padding-y-lg;
-    padding-inline-end: $spacing-hero-card-padding-x-lg;
+    padding-block: var(--hero-card-padding-y-lg);
+    padding-inline-end: var(--hero-card-padding-x-lg);
     padding-inline-start: var(--card-padding-start);
   }
 
@@ -26,29 +33,23 @@
 
   &__theme {
     &__light {
-      color: map-get($color, "hero", "card", "light", "color");
-      background: map-get($color, "hero", "card", "light", "background");
+      color: var(--ilo-color-gray-charcoal);
+      background: var(--ilo-color-white);
 
       @include breakpoint("lg") {
         &.ilo--hero-card__background__semi-transparent {
-          background: rgba(
-            map-get($color, "hero", "card", "light", "background"),
-            $opacity-semi-transparent
-          );
+          background: rgba(255, 255, 255, 0.6);
         }
       }
     }
 
     &__dark {
-      background: map-get($color, "hero", "card", "dark", "background");
-      color: map-get($color, "hero", "card", "dark", "color");
+      background: var(--ilo-color-blue-dark);
+      color: var(--ilo-color-white);
 
       @include breakpoint("lg") {
         &.ilo--hero-card__background__semi-transparent {
-          background: rgba(
-            map-get($color, "hero", "card", "dark", "background"),
-            $opacity-semi-transparent
-          );
+          background: rgba(35, 0, 80, 0.6);
         }
       }
     }
@@ -56,13 +57,11 @@
     @include breakpoint("lg") {
       &__dark.ilo--hero-card__background__transparent,
       &__light.ilo--hero-card__background__transparent {
-        color: map-get($color, "hero", "card", "dark", "color");
+        color: var(--ilo-color-white);
         background: transparent;
 
         * {
-          filter: drop-shadow(
-            1px 1px 12px #{map-get($color, "base", "neutrals", "dark")}
-          );
+          filter: drop-shadow(1px 1px 12px var(--ilo-color-gray-charcoal));
         }
       }
     }
@@ -70,28 +69,28 @@
 
   &__cornercut {
     @include cornercut(
-      $spacing-hero-card-corner-cut-width-sm,
-      $spacing-hero-card-corner-cut-height-sm
+      var(--hero-card-corner-cut-width-sm),
+      var(--hero-card-corner-cut-height-sm)
     );
 
     [dir="rtl"] & {
       @include cornercut(
-        $spacing-hero-card-corner-cut-width-sm,
-        $spacing-hero-card-corner-cut-height-sm,
+        var(--hero-card-corner-cut-width-sm),
+        var(--hero-card-corner-cut-height-sm),
         "left"
       );
     }
 
     @include breakpoint("lg") {
       @include cornercut(
-        $spacing-hero-card-corner-cut-width-lg,
-        $spacing-hero-card-corner-cut-height-lg
+        var(--hero-card-corner-cut-width-lg),
+        var(--hero-card-corner-cut-height-lg)
       );
 
       [dir="rtl"] & {
         @include cornercut(
-          $spacing-hero-card-corner-cut-width-lg,
-          $spacing-hero-card-corner-cut-height-lg,
+          var(--hero-card-corner-cut-width-lg),
+          var(--hero-card-corner-cut-height-lg),
           "left"
         );
       }
@@ -101,37 +100,37 @@
   &--datecopy {
     @include typography("body-medium");
     margin-bottom: px-to-rem(28px);
-    color: map-get($color, "hero", "card", "light", "datecopy", "color");
+    color: var(--ilo-color-gray-accessible);
 
     #{$c}__theme__dark & {
-      color: map-get($color, "hero", "card", "dark", "datecopy", "color");
+      color: var(--ilo-color-white);
     }
 
     #{$c}__theme__light & {
-      color: map-get($color, "hero", "card", "light", "datecopy", "color");
+      color: var(--ilo-color-gray-accessible);
     }
 
     .ilo--hero-card__background__transparent &,
     .ilo--hero-card__background__semi-transparent & {
-      color: map-get($color, "hero", "card", "dark", "eyebrow", "color");
+      color: var(--ilo-color-white);
     }
   }
 
   &--eyebrow {
     @include typography("body-medium");
     margin-bottom: spacing(4);
-    color: map-get($color, "hero", "card", "light", "eyebrow", "color");
+    color: var(--ilo-color-purple);
 
     #{$c}__theme__dark & {
-      color: map-get($color, "hero", "card", "dark", "eyebrow", "color");
+      color: var(--ilo-color-white);
     }
 
     #{$c}__theme__light & {
-      color: map-get($color, "hero", "card", "light", "eyebrow", "color");
+      color: var(--ilo-color-purple);
     }
 
     .ilo--hero-card__background__transparent & {
-      color: map-get($color, "hero", "card", "dark", "eyebrow", "color");
+      color: var(--ilo-color-white);
     }
   }
 

package/scss/components/_image.scss

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

package/scss/components/_input.scss

@@ -1,22 +1,13 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @import "../mixins";
 
 .ilo--input {
-  -webkit-appearance: none;
-  -moz-appearance: none;
   appearance: none;
-  background-color: map-get(
-    $color,
-    "formelements",
-    "input",
-    "default",
-    "background"
-  );
-  @include bordervalues("input", "formelements");
+  background-color: var(--ilo-color-white);
+  border: var(--ilo-border-md) solid var(--ilo-color-gray-base);
   box-sizing: border-box;
   font-family: var(--ilo-fonts-copy);
-  font-weight: map-get($type, "weights", "section");
+  font-weight: var(--ilo-font-weight-medium);
   @include typography("highlight-medium");
   height: px-to-rem(48px);
   margin: spacing(0);
@@ -25,14 +16,8 @@
   width: 100%;
 
   &:focus {
-    background-color: map-get(
-      $color,
-      "formelements",
-      "input",
-      "focus",
-      "background"
-    );
-    @include bordervalues("input", "formelements", "focus");
+    background-color: var(--ilo-color-blue-lighter);
+    border: var(--ilo-border-md) solid var(--ilo-color-gray-base);
     padding-left: spacing(3);
     outline: none;
   }
@@ -45,13 +30,8 @@
   &:invalid,
   &.error,
   .error & {
-    background-color: map-get(
-      $color,
-      "formelements",
-      "input",
-      "error",
-      "background"
-    );
-    @include bordervalues("input", "formelements", "error");
+    background-color: var(--ilo-color-white);
+    border: var(--ilo-border-md) solid var(--ilo-color-gray-base);
+    border-left: px-to-rem(3px) solid var(--ilo-color-red-dark);
   }
 }

package/scss/components/_languagetoggle.scss

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

package/scss/components/_link.scss

@@ -1,4 +1,3 @@
-@use "../tokens" as *;
 @use "../mixins" as *;
 
 .ilo--link {

package/scss/components/_linklist.scss

@@ -1,4 +1,3 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @import "../animations";
 @import "../mixins";
@@ -9,25 +8,15 @@
 
   &--headline {
     font-family: var(--ilo-fonts-display);
-    font-weight: map-get($type, "weights", "label");
+    font-weight: var(--ilo-font-weight-bold);
     @include typography("heading-3");
-    @include textmargin("margin-bottom", 30px, "headline-5", "display", 0, 0);
+    margin-bottom: px-to-rem(30px);
   }
 
   &--links {
     &--headline {
-      font-family: var(--ilo-fonts-display);
-      font-weight: map-get($type, "weights", "label");
-      @include typography("heading-4");
-      @include textmargin("margin-bottom", 27px, "headline-6", "display", 0, 0);
-      @include textmargin(
-        "margin-top",
-        $spacing-spacing-12,
-        "headline-6",
-        "display",
-        0,
-        0
-      );
+      @include typography("highlight-large");
+      margin: spacing(10) 0 spacing(5);
     }
   }
 
@@ -86,10 +75,8 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border-bottom: px-to-rem($borders-base) solid $color-base-neutrals-lighter;
-    color: map-get($color, "link", "text", "default");
-    font-family: var(--ilo-fonts-display);
-    font-weight: map-get($type, "weights", "section");
+    border-bottom: var(--ilo-border-md) solid var(--ilo-color-gray-light);
+    color: var(--ilo-link-color-default-light);
     @include typography("highlight-medium");
     padding-top: spacing(4);
     padding-bottom: spacing(4);
@@ -97,12 +84,12 @@
     @include globaltransition("color, background-color, border-color");
 
     &:visited {
-      color: map-get($color, "link", "text", "default");
+      color: var(--ilo-link-color-default-light);
       @include globaltransition("color");
     }
 
     &:active {
-      color: map-get($color, "link", "text", "active");
+      color: var(--ilo-link-color-active-light);
       outline: none;
       @include globaltransition("color");
     }
@@ -110,10 +97,10 @@
     &:hover,
     &:focus {
       --ilo-link-list-color-icon: var(--ilo-color-blue);
-      border-bottom: px-to-rem($borders-base) solid
-        map-get($color, "link", "text", "hover");
-      background-color: $color-base-blue-light;
-      color: map-get($color, "link", "text", "hover");
+      border-bottom: var(--ilo-border-md) solid
+        var(--ilo-link-color-hover-light);
+      background-color: var(--ilo-color-blue-lighter);
+      color: var(--ilo-link-color-hover-light);
       outline: none;
       @include globaltransition("color, background-color, border-color");
     }
@@ -130,19 +117,19 @@
     --ilo-link-list-color-indent-icon: var(--ilo-color-white);
     .ilo--link-list--headline,
     .ilo--link-list--links--headline {
-      color: $color-base-neutrals-white;
+      color: var(--ilo-color-white);
     }
 
     .ilo--link-list--link {
-      border-bottom: px-to-rem($borders-base) solid rgba(237, 240, 242, 0.4);
+      border-bottom: var(--ilo-border-md) solid rgba(237, 240, 242, 0.4);
 
       .ilo--link-list--label {
-        color: $color-base-neutrals-white;
+        color: var(--ilo-color-white);
       }
 
       &:visited {
         .ilo--link-list--label {
-          color: $color-base-neutrals-white;
+          color: var(--ilo-color-white);
           @include globaltransition("color");
         }
       }
@@ -151,7 +138,7 @@
         outline: none;
 
         .ilo--link-list--label {
-          color: map-get($color, "link", "text", "active");
+          color: var(--ilo-link-color-active-light);
           @include globaltransition("color");
         }
       }
@@ -161,7 +148,7 @@
         outline: none;
 
         .ilo--link-list--label {
-          color: $color-base-blue-medium;
+          color: var(--ilo-color-blue);
           @include globaltransition("color");
         }
       }

package/scss/components/_list.scss

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

package/scss/components/_loading.scss

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

package/scss/components/_logo.scss

@@ -1,5 +1,3 @@
-@use "../tokens" as *;
-
 .ilo--logo {
   &--visibility--hidden {
     visibility: hidden;
@@ -12,11 +10,11 @@
 
   &--theme {
     &--light {
-      --logo-theme-color: #{$brand-ilo-blue};
+      --logo-theme-color: var(--ilo-color-blue);
     }
 
     &--dark {
-      --logo-theme-color: #{$brand-ilo-white};
+      --logo-theme-color: var(--ilo-color-white);
     }
   }
 

package/scss/components/_logogrid.scss

@@ -1,4 +1,3 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @import "../mixins";
 
@@ -31,7 +30,7 @@
     #{$c}__theme__light &,
     #{$c}__theme__dark & {
       &:hover {
-        background-color: map-get($color, "ux", "background", "hover");
+        background-color: var(--ilo-color-background-hover);
       }
     }
   }
@@ -46,11 +45,11 @@
     grid-column: span 1;
 
     #{$c}__theme__light & {
-      background-color: map-get($color, "ux", "background", "highlight");
+      background-color: var(--ilo-color-background-highlight);
     }
 
     #{$c}__theme__dark & {
-      background-color: map-get($color, "ux", "background", "default");
+      background-color: var(--ilo-color-background-default);
     }
 
     img {

package/scss/components/_modal.scss

@@ -1,4 +1,3 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @import "../mixins";
 @import "../animations";
@@ -45,7 +44,7 @@
   }
 
   &--contents {
-    background-color: $color-base-neutrals-white;
+    background-color: var(--ilo-color-white);
     left: 0;
     position: absolute;
     margin: 0 4.2%;

package/scss/components/_multilinkcard.scss

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