@ilo-org/styles 1.15.1 → 1.16.0

package/scss/components/_card.scss

@@ -25,7 +25,7 @@ $link-hover-selectors: ".ilo--card--link:hover, .ilo--card--link:focus, .ilo--ca
 
   box-sizing: border-box;
   position: relative;
-  background-color: var(--ilo-color-white);
+  background-color: var(--ilo-color-light-container-bg-default);
   max-width: var(--max-width);
   flex: 1 1 var(--max-width);
   @include globaltransition("border-bottom, filter");
@@ -65,7 +65,7 @@ $link-hover-selectors: ".ilo--card--link:hover, .ilo--card--link:focus, .ilo--ca
     &::before {
       content: "";
       position: absolute;
-      background-color: var(--ilo-color-blue);
+      background-color: var(--ilo-color-light-action-selected);
       height: 100%;
       width: 100%;
       z-index: 1;
@@ -93,19 +93,19 @@ $link-hover-selectors: ".ilo--card--link:hover, .ilo--card--link:focus, .ilo--ca
   }
 
   &--eyebrow {
-    color: var(--ilo-color-purple);
+    color: var(--ilo-color-light-text-accent);
     @include typography("body-small");
     margin-bottom: spacing(4);
   }
 
   &--title {
-    color: var(--ilo-color-blue-dark);
+    color: var(--ilo-color-light-text-brand);
     @include typography("heading-4");
     margin-bottom: spacing(6);
   }
 
   &--intro {
-    color: var(--ilo-color-gray-charcoal);
+    color: var(--ilo-color-light-text-default);
     @include typography("body-medium");
   }
 
@@ -130,23 +130,25 @@ $link-hover-selectors: ".ilo--card--link:hover, .ilo--card--link:focus, .ilo--ca
 
   &__theme {
     &__light {
-      background: var(--ilo-color-white);
-      border-bottom: px-to-rem(3px) solid var(--ilo-color-gray-base);
-      --ilo-skeleton-element-background-color: var(--ilo-color-gray-light);
+      background: var(--ilo-color-light-container-bg-default);
+      border-bottom: px-to-rem(3px) solid var(--ilo-color-light-border-default);
+      --ilo-skeleton-element-background-color: var(
+        --ilo-color-light-container-bg-disabled
+      );
     }
 
     &__soft {
-      background: var(--ilo-color-blue-lighter);
+      background: var(--ilo-color-light-container-bg-subtle);
     }
 
     &__light,
     &__soft {
       #{$self}--date-extra {
-        color: var(--ilo-color-gray-charcoal);
+        color: var(--ilo-color-light-text-default);
       }
 
       @include card-link-hover {
-        border-bottom: px-to-rem(3px) solid var(--ilo-color-blue);
+        border-bottom: px-to-rem(3px) solid var(--ilo-color-light-border-brand);
 
         #{$self}--eyebrow,
         #{$self}--title,
@@ -155,25 +157,27 @@ $link-hover-selectors: ".ilo--card--link:hover, .ilo--card--link:focus, .ilo--ca
         #{$self}--date-extra,
         #{$self}--content--item,
         .ilo--profile {
-          color: var(--ilo-color-blue);
+          color: var(--ilo-color-light-action-hover);
 
           .ilo--icon {
-            fill: var(--ilo-color-blue);
+            fill: var(--ilo-color-light-action-hover);
           }
         }
       }
     }
 
     &__dark {
-      background: var(--ilo-color-blue-dark);
-      border-bottom: px-to-rem(3px) solid var(--ilo-color-red);
+      background: var(--ilo-color-light-container-bg-brand);
+      border-bottom: px-to-rem(3px) solid
+        var(--ilo-color-light-feedback-error-default);
 
       @include card-link-hover {
-        border-bottom: px-to-rem(3px) solid var(--ilo-color-white);
+        border-bottom: px-to-rem(3px) solid
+          var(--ilo-color-light-border-inverse);
       }
 
       #{$self}--title {
-        color: var(--ilo-color-white);
+        color: var(--ilo-color-light-text-inverse);
       }
 
       #{$self}--eyebrow,
@@ -181,12 +185,12 @@ $link-hover-selectors: ".ilo--card--link:hover, .ilo--card--link:focus, .ilo--ca
       #{$self}--date,
       #{$self}--date-extra,
       #{$self}--content--item {
-        color: var(--ilo-color-gray-light);
+        color: var(--ilo-color-dark-text-subtle);
       }
 
       #{$self}--content--item {
         .ilo--icon {
-          fill: var(--ilo-color-gray-light);
+          fill: var(--ilo-color-light-icon-disabled);
         }
       }
     }
@@ -217,10 +221,10 @@ $link-hover-selectors: ".ilo--card--link:hover, .ilo--card--link:focus, .ilo--ca
         background-repeat: no-repeat;
       }
       &::before {
-        background-color: var(--ilo-color-gray-charcoal);
+        background-color: var(--ilo-color-light-container-bg-inverse);
       }
       &::after {
-        @include icon("caret_right", var(--ilo-color-gray-light));
+        @include icon("caret_right", var(--ilo-color-light-icon-disabled));
       }
     }
   }

package/scss/components/_checkbox.scss

@@ -44,7 +44,7 @@
     height: px-to-rem(16px);
 
     // Visual
-    background-color: var(--ilo-color-gray-base);
+    background-color: var(--ilo-color-light-container-bg-inactive);
   }
 
   // Outer border/background (::after pseudo-element)
@@ -63,8 +63,8 @@
     height: px-to-rem(24px);
 
     // Visual
-    background-color: var(--ilo-color-gray-base);
-    border: px-to-rem(4px) solid var(--ilo-color-gray-base);
+    background-color: var(--ilo-color-light-container-bg-inactive);
+    border: px-to-rem(4px) solid var(--ilo-color-light-border-default);
   }
 
   // Checked state
@@ -72,19 +72,19 @@
   &:checked {
     &:before {
       // Visual
-      background-color: var(--ilo-color-blue-dark);
+      background-color: var(--ilo-color-light-container-bg-brand);
       background-repeat: no-repeat;
       background-position: center center;
       background-size: px-to-rem(24px);
 
       // Icon
-      @include icon("check", var(--ilo-color-gray-light));
+      @include icon("check", var(--ilo-color-light-icon-disabled));
     }
 
     &:after {
       // Visual
-      background-color: var(--ilo-color-blue-dark);
-      border-color: var(--ilo-color-dark-blue);
+      background-color: var(--ilo-color-light-container-bg-brand);
+      border-color: var(--ilo-color-light-border-brand-3);
     }
   }
 
@@ -94,12 +94,12 @@
     outline: none;
 
     &:after {
-      border-color: var(--ilo-color-yellow);
+      border-color: var(--ilo-color-light-border-focus);
     }
 
     &:checked {
       &:after {
-        border-color: var(--ilo-color-yellow);
+        border-color: var(--ilo-color-light-border-focus);
       }
     }
   }
@@ -117,12 +117,12 @@
   &__error,
   &__error & {
     &:after {
-      border-color: var(--ilo-color-red);
+      border-color: var(--ilo-color-light-feedback-error-default);
     }
 
     &:checked {
       &:after {
-        border-color: var(--ilo-color-dark-blue);
+        border-color: var(--ilo-color-light-border-brand-3);
       }
     }
   }

package/scss/components/_contextmenu.scss

@@ -3,7 +3,7 @@
 
 .ilo--context-menu {
   border-radius: px-to-rem(2px);
-  background-color: var(--ilo-color-gray-light);
+  background-color: var(--ilo-color-light-container-bg-disabled);
   display: inline-block;
   position: relative;
   width: auto;
@@ -18,7 +18,7 @@
     height: 0;
     border-left: px-to-rem(10px) solid transparent;
     border-right: px-to-rem(10px) solid transparent;
-    border-bottom: px-to-rem(12px) solid var(--ilo-color-gray-light);
+    border-bottom: px-to-rem(12px) solid var(--ilo-color-light-border-subtle);
   }
 
   &--item {
@@ -40,11 +40,11 @@
 
     &:hover,
     &:focus {
-      background-color: var(--ilo-color-blue-lighter);
+      background-color: var(--ilo-color-light-container-bg-subtle);
     }
 
     &.endsection {
-      border-bottom: px-to-rem(3px) solid var(--ilo-color-white);
+      border-bottom: px-to-rem(3px) solid var(--ilo-color-light-border-inverse);
 
       .ilo--context-menu--link {
         border-bottom: none;
@@ -53,8 +53,9 @@
   }
 
   &--link {
-    border-bottom: var(--ilo-border-md) solid var(--ilo-color-white);
-    color: var(--ilo-color-blue-dark);
+    border-bottom: var(--ilo-border-md) solid
+      var(--ilo-color-light-border-inverse);
+    color: var(--ilo-color-light-text-brand);
     display: inline-block;
     padding: spacing(4) spacing(2);
     text-decoration: none;
@@ -62,13 +63,13 @@
     @include typography("body-xsmall");
 
     &:active {
-      color: var(--ilo-color-blue);
+      color: var(--ilo-color-light-action-hover);
       outline: none;
     }
 
     &:hover,
     &:focus {
-      color: var(--ilo-color-blue);
+      color: var(--ilo-color-light-action-hover);
       outline: none;
       text-decoration: underline;
       text-decoration-thickness: var(--ilo-border-md);

package/scss/components/_datacard.scss

@@ -11,15 +11,17 @@
 
       --max-width: #{px-to-rem(600px)};
 
-      background: var(--ilo-color-blue-lighter);
-      border-bottom: px-to-rem(3px) solid var(--ilo-color-blue-light);
+      background: var(--ilo-color-light-container-bg-subtle);
+      border-bottom: px-to-rem(3px) solid var(--ilo-color-light-border-brand-2);
       padding: spacing(12) spacing(10) spacing(14);
       position: relative;
       width: 100%;
 
       &#{$self}__loading {
-        --ilo-skeleton-element-background-color: var(--ilo-color-gray-base);
-        background-color: var(--ilo-color-gray-light);
+        --ilo-skeleton-element-background-color: var(
+          --ilo-color-light-container-bg-inactive
+        );
+        background-color: var(--ilo-color-light-container-bg-disabled);
       }
 
       #{$self}--skeleton--eyebrow {
@@ -161,7 +163,7 @@
       &--content-label {
         @include typography("body-small");
         margin-block-end: spacing(2);
-        color: var(--ilo-color-gray-accessible);
+        color: var(--ilo-color-light-text-subtle);
       }
 
       #{$self}--eyebrow {
@@ -170,7 +172,7 @@
 
       &--content-copy {
         @include typography("body-large");
-        color: var(--ilo-color-gray-charcoal);
+        color: var(--ilo-color-light-text-default);
 
         @include breakpoint("md") {
           #{$self}__size__wide &,

package/scss/components/_detailcard.scss

@@ -11,7 +11,7 @@
       // in mobile view for all sizes
       --max-width: 100%;
 
-      border-bottom: px-to-rem(3px) solid var(--ilo-color-gray-light);
+      border-bottom: px-to-rem(3px) solid var(--ilo-color-light-border-subtle);
       padding: spacing(8) spacing(4);
       position: relative;
 
@@ -91,7 +91,7 @@
 
       #{$self}--date {
         @include typography("body-small");
-        color: var(--ilo-color-gray-accessible);
+        color: var(--ilo-color-light-text-subtle);
       }
 
       #{$self}--date-extra {

package/scss/components/_dropdown.scss

@@ -4,13 +4,19 @@
 
 .ilo--dropdown {
   &--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-background-color: var(
+      --ilo-color-light-container-bg-default
+    );
+    --ilo-dropdown-background-color-active: var(
+      --ilo-color-light-container-bg-subtle
+    );
+    --ilo-dropdown-color: var(--ilo-color-light-text-subtle);
     --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-border-color: var(--ilo-color-light-border-default);
+    --ilo-dropdown-button-background-color: var(
+      --ilo-color-light-container-bg-disabled
+    );
+    --ilo-dropdown-button-icon-color: var(--ilo-color-light-action-default);
     --ilo-dropdown-button-icon-size: calc(var(--ilo-dropdown-height) / 2);
     --ilo-dropdown-button-icon-offset: calc(
       var(--ilo-dropdown-button-icon-size) / 2
@@ -92,10 +98,10 @@
   @include globaltransition("background-color, border-color, color");
 
   &:enabled:is(:hover, :focus, :active) {
-    border-inline-start-color: var(--ilo-color-blue);
-    box-shadow: inset px-to-rem(1px) 0 0 0 var(--ilo-color-blue);
+    border-inline-start-color: var(--ilo-color-light-border-brand);
+    box-shadow: inset px-to-rem(1px) 0 0 0 var(--ilo-color-light-border-brand);
     background-color: var(--ilo-dropdown-background-color-active);
-    --ilo-dropdown-color: var(--ilo-color-gray-charcoal);
+    --ilo-dropdown-color: var(--ilo-color-light-text-default);
   }
 
   &:disabled {
@@ -106,7 +112,7 @@
   [dir="rtl"] &:hover,
   [dir="rtl"] &:focus,
   [dir="rtl"] &:active {
-    box-shadow: inset px-to-rem(-1px) 0 0 0 var(--ilo-color-blue);
+    box-shadow: inset px-to-rem(-1px) 0 0 0 var(--ilo-color-light-border-brand);
   }
 
   option {

package/scss/components/_factlistcard.scss

@@ -9,7 +9,7 @@
     &__factlist {
       --max-width: #{px-to-rem(375px)};
 
-      border-bottom: px-to-rem(3px) solid var(--ilo-color-gray-base);
+      border-bottom: px-to-rem(3px) solid var(--ilo-color-light-border-default);
       padding: spacing(10) spacing(6) spacing(12);
 
       @include cornercut(72px, 40px);
@@ -39,7 +39,8 @@
 
       &#{$self}__theme {
         &__dark {
-          border-bottom: px-to-rem(3px) solid var(--ilo-color-red);
+          border-bottom: px-to-rem(3px) solid
+            var(--ilo-color-light-feedback-error-default);
 
           .ilo--list--item {
             &:last-of-type {
@@ -47,10 +48,10 @@
             }
           }
 
-          color: var(--ilo-color-white);
+          color: var(--ilo-color-light-text-inverse);
 
           #{$self}--title {
-            color: var(--ilo-color-white);
+            color: var(--ilo-color-light-text-inverse);
           }
         }
       }
@@ -66,7 +67,7 @@
       }
 
       #{$self}--title {
-        color: var(--ilo-color-gray-charcoal);
+        color: var(--ilo-color-light-text-default);
         font-size: var(--ilo-font-size-xlg);
         line-height: var(--ilo-line-height-md);
         letter-spacing: var(--ilo-letter-spacing-xsm);

package/scss/components/_featurecard.scss

@@ -163,7 +163,7 @@
       }
 
       .ilo--link-list {
-        border-top: px-to-rem(2px) solid var(--ilo-color-gray-light);
+        border-top: px-to-rem(2px) solid var(--ilo-color-light-border-subtle);
 
         a {
           border-bottom: none;
@@ -181,7 +181,7 @@
 
       &#{$self}__theme__dark {
         .ilo--link-list {
-          border-top: 2px solid var(--ilo-color-gray-light-semi-transparent);
+          border-top: 2px solid var(--ilo-color-dark-border-subtle);
         }
       }
     }

package/scss/components/_fieldset.scss

@@ -3,20 +3,20 @@
 @import "../mixins";
 
 .ilo--fieldset {
-  --ilo-fieldset-legend-color: var(--ilo-color-gray-charcoal);
-  --ilo-fieldset-helper-color: var(--ilo-color-gray-accessible);
-  --ilo-fieldset-error-color: var(--ilo-color-red-dark);
+  --ilo-fieldset-legend-color: var(--ilo-color-light-text-default);
+  --ilo-fieldset-helper-color: var(--ilo-color-light-text-subtle);
+  --ilo-fieldset-error-color: var(--ilo-color-light-feedback-error-dark);
 
   &__theme {
     &__light {
-      --ilo-fieldset-legend-color: var(--ilo-color-gray-charcoal);
-      --ilo-fieldset-helper-color: var(--ilo-color-gray-accessible);
-      --ilo-fieldset-error-color: var(--ilo-color-red-dark);
+      --ilo-fieldset-legend-color: var(--ilo-color-light-text-default);
+      --ilo-fieldset-helper-color: var(--ilo-color-light-text-subtle);
+      --ilo-fieldset-error-color: var(--ilo-color-light-feedback-error-dark);
     }
     &__dark {
-      --ilo-fieldset-legend-color: var(--ilo-color-yellow);
-      --ilo-fieldset-helper-color: var(--ilo-color-white);
-      --ilo-fieldset-error-color: var(--ilo-color-red-dark);
+      --ilo-fieldset-legend-color: var(--ilo-color-dark-text-accent);
+      --ilo-fieldset-helper-color: var(--ilo-color-light-text-inverse);
+      --ilo-fieldset-error-color: var(--ilo-color-light-feedback-error-dark);
     }
   }
 

package/scss/components/_file-upload.scss

@@ -11,9 +11,9 @@
       width: 0;
     }
 
-    background-color: var(--ilo-color-white);
-    border: var(--ilo-border-sm) solid var(--ilo-color-gray-base);
-    color: var(--ilo-color-blue-dark);
+    background-color: var(--ilo-color-light-container-bg-default);
+    border: var(--ilo-border-sm) solid var(--ilo-color-light-border-default);
+    color: var(--ilo-color-light-text-brand);
     content: attr(data-label);
     display: inline-block;
     font-family: var(--ilo-fonts-display);
@@ -24,21 +24,21 @@
     @include typography("highlight-medium");
 
     .ilo--form__theme__dark & {
-      color: var(--ilo-color-blue-dark);
+      color: var(--ilo-color-light-text-brand);
     }
 
     &:hover {
-      background-color: var(--ilo-color-blue-lighter);
-      border: var(--ilo-border-sm) solid var(--ilo-color-blue);
+      background-color: var(--ilo-color-light-container-bg-subtle);
+      border: var(--ilo-border-sm) solid var(--ilo-color-light-border-brand);
       cursor: pointer;
-      color: var(--ilo-color-blue);
+      color: var(--ilo-color-light-action-hover);
       outline: none;
     }
 
     &:focus {
-      background-color: var(--ilo-color-white);
-      border: var(--ilo-border-sm) solid var(--ilo-color-blue);
-      color: var(--ilo-color-blue);
+      background-color: var(--ilo-color-light-container-bg-default);
+      border: var(--ilo-border-sm) solid var(--ilo-color-light-border-brand);
+      color: var(--ilo-color-light-action-hover);
       outline: none;
     }
 
@@ -47,9 +47,9 @@
     }
 
     &:active {
-      background-color: var(--ilo-color-blue);
-      border: var(--ilo-border-md) solid var(--ilo-color-blue-dark);
-      color: var(--ilo-color-white);
+      background-color: var(--ilo-color-light-action-selected);
+      border: var(--ilo-border-md) solid var(--ilo-color-light-border-brand-3);
+      color: var(--ilo-color-light-text-inverse);
     }
 
     &:disabled {
@@ -60,9 +60,10 @@
     &:invalid,
     &.error,
     .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);
+      background-color: var(--ilo-color-light-container-bg-default);
+      border: var(--ilo-border-md) solid var(--ilo-color-light-border-default);
+      border-left: px-to-rem(3px) solid
+        var(--ilo-color-light-feedback-error-dark);
     }
   }
 
@@ -76,9 +77,9 @@
 
   &--list-item {
     display: block;
-    background-color: var(--ilo-color-gray-light);
-    border: var(--ilo-border-md) solid var(--ilo-color-gray-light);
-    border-left: px-to-rem(3px) solid var(--ilo-color-blue-dark);
+    background-color: var(--ilo-color-light-container-bg-disabled);
+    border: var(--ilo-border-md) solid var(--ilo-color-light-border-subtle);
+    border-left: px-to-rem(3px) solid var(--ilo-color-light-border-brand-3);
     box-sizing: border-box;
     font-family: var(--ilo-fonts-display);
     font-weight: var(--ilo-font-weight-medium);

package/scss/components/_footer.scss

@@ -3,8 +3,8 @@
 @import "../mixins";
 
 .ilo--footer {
-  border-bottom: px-to-rem(3px) solid var(--ilo-color-gray-accessible);
-  background-color: var(--ilo-color-blue-dark);
+  border-bottom: px-to-rem(3px) solid var(--ilo-color-dark-border-subtle);
+  background-color: var(--ilo-color-light-container-bg-brand);
   position: relative;
   width: 100%;
   overflow: hidden;
@@ -15,7 +15,8 @@
 
     &:after {
       content: "";
-      border-bottom: px-to-rem(6px) solid var(--ilo-color-red);
+      border-bottom: px-to-rem(6px) solid
+        var(--ilo-color-light-feedback-error-default);
       width: 200vw;
       position: absolute;
       bottom: 0;
@@ -38,19 +39,19 @@
       padding: 0;
     }
 
-    background-color: var(--ilo-color-gray-light);
+    background-color: var(--ilo-color-light-container-bg-disabled);
     padding: spacing(8) spacing(4) 0;
     min-height: px-to-rem(56px);
   }
 
   &--headline {
-    color: var(--ilo-color-white);
+    color: var(--ilo-color-light-text-inverse);
     @include typography("highlight-medium-bold");
     margin-top: spacing(5);
   }
 
   &--subhead {
-    color: var(--ilo-color-blue-light);
+    color: var(--ilo-color-dark-text-brand);
     margin-top: spacing(1);
     margin-bottom: spacing(12);
     @include typography("body-xsmall");
@@ -61,7 +62,7 @@
   }
 
   .address--line {
-    color: var(--ilo-color-white);
+    color: var(--ilo-color-light-text-inverse);
     @include typography("body-xsmall");
   }
 
@@ -75,7 +76,7 @@
 
   .legal,
   .secondarylinks {
-    color: var(--ilo-color-gray-accessible);
+    color: var(--ilo-color-light-text-subtle);
     display: inline;
     @include typography("body-xsmall");
   }
@@ -94,24 +95,24 @@
   }
 
   .secondarylinks--list--item a {
-    color: var(--ilo-color-gray-accessible);
+    color: var(--ilo-color-light-text-subtle);
     @include globaltransition("color, border-color");
 
     &:visited {
-      color: var(--ilo-color-purple);
+      color: var(--ilo-color-light-text-accent);
     }
 
     &:hover {
-      color: var(--ilo-color-blue);
+      color: var(--ilo-color-light-action-hover);
     }
 
     &:active {
-      color: var(--ilo-color-blue-dark);
+      color: var(--ilo-color-light-text-brand);
       outline: none;
     }
 
     &:focus {
-      color: var(--ilo-color-blue-dark);
+      color: var(--ilo-color-light-text-brand);
       outline: none;
     }
   }
@@ -120,7 +121,7 @@
     // General Styles
     display: flex;
     flex-flow: row nowrap;
-    color: var(--ilo-color-blue-dark);
+    color: var(--ilo-color-light-text-brand);
     @include typography("highlight-medium");
     position: relative;
     text-decoration: none;
@@ -128,7 +129,7 @@
 
     // Mobile styles
     justify-content: center;
-    border-bottom: px-to-rem(2px) solid var(--ilo-color-gray-light);
+    border-bottom: px-to-rem(2px) solid var(--ilo-color-light-border-subtle);
     margin: spacing(3) auto 0 auto;
     padding: spacing(4);
 
@@ -142,16 +143,16 @@
       margin-left: spacing(2);
       bottom: px-to-rem(2px);
       width: px-to-rem(24px);
-      @include icon("chevron_up", var(--ilo-color-blue-dark));
+      @include icon("chevron_up", var(--ilo-color-light-action-default));
     }
 
     &:hover {
-      background: var(--ilo-color-blue-lighter);
-      border-bottom: px-to-rem(2px) solid var(--ilo-color-blue);
-      color: var(--ilo-color-blue);
+      background: var(--ilo-color-light-container-bg-subtle);
+      border-bottom: px-to-rem(2px) solid var(--ilo-color-light-border-brand);
+      color: var(--ilo-color-light-action-hover);
 
       &:after {
-        @include icon("chevron_up", var(--ilo-color-blue));
+        @include icon("chevron_up", var(--ilo-color-light-action-hover));
       }
     }
   }