@ilo-org/styles 1.15.0 → 1.16.0

package/scss/components/_form.scss

@@ -4,14 +4,14 @@
 .ilo--form {
   $gap: spacing(8);
   $c: &;
-  --ilo-form-legend-color: var(--ilo-color-blue-dark);
+  --ilo-form-legend-color: var(--ilo-color-light-text-brand);
 
   &__theme {
     &__light {
-      --ilo-form-legend-color: var(--ilo-color-blue-dark);
+      --ilo-form-legend-color: var(--ilo-color-light-text-brand);
     }
     &__dark {
-      --ilo-form-legend-color: var(--ilo-color-white);
+      --ilo-form-legend-color: var(--ilo-color-light-text-inverse);
     }
   }
 
@@ -22,7 +22,7 @@
   flex-direction: column;
   appearance: none;
   gap: $gap;
-  color: var(--ilo-color-gray-charcoal);
+  color: var(--ilo-color-light-text-default);
 
   &__disabled {
     opacity: 0.5;

package/scss/components/_formcontrol.scss

@@ -5,9 +5,9 @@
 .ilo--form-control {
   $c: &;
 
-  --ilo-form-control-label-color: var(--ilo-color-gray-charcoal);
-  --ilo-form-control-helper-color: var(--ilo-color-gray-accessible);
-  --ilo-form-control-error-color: var(--ilo-color-red-dark);
+  --ilo-form-control-label-color: var(--ilo-color-light-text-default);
+  --ilo-form-control-helper-color: var(--ilo-color-light-text-subtle);
+  --ilo-form-control-error-color: var(--ilo-color-light-feedback-error-dark);
 
   grid-area: input;
   display: inline-grid;
@@ -21,14 +21,18 @@
 
   &__theme {
     &__light {
-      --ilo-form-control-label-color: var(--ilo-color-gray-charcoal);
-      --ilo-form-control-helper-color: var(--ilo-color-gray-accessible);
-      --ilo-form-control-error-color: var(--ilo-color-red-dark);
+      --ilo-form-control-label-color: var(--ilo-color-light-text-default);
+      --ilo-form-control-helper-color: var(--ilo-color-light-text-subtle);
+      --ilo-form-control-error-color: var(
+        --ilo-color-light-feedback-error-dark
+      );
     }
     &__dark {
-      --ilo-form-control-label-color: var(--ilo-color-white);
-      --ilo-form-control-helper-color: var(--ilo-color-white);
-      --ilo-form-control-error-color: var(--ilo-color-red-dark);
+      --ilo-form-control-label-color: var(--ilo-color-light-text-inverse);
+      --ilo-form-control-helper-color: var(--ilo-color-light-text-inverse);
+      --ilo-form-control-error-color: var(
+        --ilo-color-light-feedback-error-dark
+      );
     }
   }
 
@@ -178,7 +182,7 @@
     }
 
     &--required {
-      color: var(--ilo-color-red-dark);
+      color: var(--ilo-color-light-feedback-error-dark);
     }
   }
 

package/scss/components/_hero.scss

@@ -67,21 +67,21 @@
     }
 
     &__white {
-      background-color: var(--ilo-color-white);
+      background-color: var(--ilo-color-light-container-bg-default);
     }
 
     &__light {
-      background-color: var(--ilo-color-blue-lighter);
+      background-color: var(--ilo-color-light-container-bg-subtle);
     }
 
     &__dark {
-      background-color: var(--ilo-color-blue-dark);
+      background-color: var(--ilo-color-light-container-bg-brand);
     }
   }
 
   &--background {
     display: grid;
-    background-color: var(--ilo-color-blue-lighter);
+    background-color: var(--ilo-color-light-container-bg-subtle);
     position: relative;
     grid-area: 1 / 1 / 4 / 2;
 
@@ -234,9 +234,9 @@
     &__card-theme {
       &__dark {
         #{$c}--card-offset {
-          background-color: var(--ilo-color-blue-dark);
+          background-color: var(--ilo-color-light-container-bg-brand);
           position: relative;
-          box-shadow: 0.3px 0 0 0 var(--ilo-color-blue-dark);
+          box-shadow: 0.3px 0 0 0 var(--ilo-color-light-border-brand-3);
         }
 
         &[class*="semi-transparent"] {
@@ -252,8 +252,8 @@
 
       &__light {
         #{$c}--card-offset {
-          background: var(--ilo-color-white);
-          box-shadow: 0.3px 0 0 0 var(--ilo-color-white);
+          background: var(--ilo-color-light-container-bg-default);
+          box-shadow: 0.3px 0 0 0 var(--ilo-color-light-border-inverse);
         }
 
         &[class*="semi-transparent"] {

package/scss/components/_herocard.scss

@@ -33,8 +33,8 @@
 
   &__theme {
     &__light {
-      color: var(--ilo-color-gray-charcoal);
-      background: var(--ilo-color-white);
+      color: var(--ilo-color-light-text-default);
+      background: var(--ilo-color-light-container-bg-default);
 
       @include breakpoint("lg") {
         &.ilo--hero-card__background__semi-transparent {
@@ -44,8 +44,8 @@
     }
 
     &__dark {
-      background: var(--ilo-color-blue-dark);
-      color: var(--ilo-color-white);
+      background: var(--ilo-color-light-container-bg-brand);
+      color: var(--ilo-color-light-text-inverse);
 
       @include breakpoint("lg") {
         &.ilo--hero-card__background__semi-transparent {
@@ -57,11 +57,11 @@
     @include breakpoint("lg") {
       &__dark.ilo--hero-card__background__transparent,
       &__light.ilo--hero-card__background__transparent {
-        color: var(--ilo-color-white);
+        color: var(--ilo-color-light-text-inverse);
         background: transparent;
 
         * {
-          filter: drop-shadow(1px 1px 12px var(--ilo-color-gray-charcoal));
+          filter: drop-shadow(1px 1px 12px var(--ilo-color-neutrals-black));
         }
       }
     }
@@ -100,37 +100,37 @@
   &--datecopy {
     @include typography("body-medium");
     margin-bottom: px-to-rem(28px);
-    color: var(--ilo-color-gray-accessible);
+    color: var(--ilo-color-light-text-subtle);
 
     #{$c}__theme__dark & {
-      color: var(--ilo-color-white);
+      color: var(--ilo-color-light-text-inverse);
     }
 
     #{$c}__theme__light & {
-      color: var(--ilo-color-gray-accessible);
+      color: var(--ilo-color-light-text-subtle);
     }
 
     .ilo--hero-card__background__transparent &,
     .ilo--hero-card__background__semi-transparent & {
-      color: var(--ilo-color-white);
+      color: var(--ilo-color-light-text-inverse);
     }
   }
 
   &--eyebrow {
     @include typography("body-medium");
     margin-bottom: spacing(4);
-    color: var(--ilo-color-purple);
+    color: var(--ilo-color-light-text-accent);
 
     #{$c}__theme__dark & {
-      color: var(--ilo-color-white);
+      color: var(--ilo-color-light-text-inverse);
     }
 
     #{$c}__theme__light & {
-      color: var(--ilo-color-purple);
+      color: var(--ilo-color-light-text-accent);
     }
 
     .ilo--hero-card__background__transparent & {
-      color: var(--ilo-color-white);
+      color: var(--ilo-color-light-text-inverse);
     }
   }
 

package/scss/components/_image.scss

@@ -4,8 +4,8 @@
 @mixin image-caption-styles {
   figcaption {
     border-inline-start: var(--ilo-border-lg) solid
-      var(--ilo-color-borders-default);
-    color: var(--ilo-color-gray-accessible);
+      var(--ilo-color-light-border-default);
+    color: var(--ilo-color-light-text-subtle);
     font-size: var(--ilo-font-size-sm);
     line-height: var(--ilo-line-height-xlg);
     font-weight: var(--ilo-font-weight-regular);
@@ -17,8 +17,8 @@
 
 @mixin image-caption-dark-styles {
   figcaption {
-    color: var(--ilo-color-white);
-    border-inline-color: var(--ilo-color-gray-light-semi-transparent);
+    color: var(--ilo-color-light-text-inverse);
+    border-inline-color: var(--ilo-color-dark-border-subtle);
   }
 }
 
@@ -62,7 +62,7 @@
     display: none;
     font-size: var(--ilo-font-size-xsm);
     line-height: var(--ilo-line-height-xsm);
-    color: var(--ilo-color-gray-light);
+    color: var(--ilo-color-dark-text-subtle);
     padding-left: spacing(3);
     padding-right: spacing(2);
   }
@@ -89,11 +89,13 @@
     @include image-caption-dark-styles;
 
     #{$self}--credit {
-      --ilo-caption-icon-wrapper-bg-color: var(--ilo-color-white);
+      --ilo-caption-icon-wrapper-bg-color: var(
+        --ilo-color-light-container-bg-default
+      );
     }
 
     #{$self}--label {
-      color: var(--ilo-color-gray-charcoal);
+      color: var(--ilo-color-light-text-default);
     }
   }
 }

package/scss/components/_input.scss

@@ -8,8 +8,8 @@
 .ilo--input {
   appearance: none;
   color: var(--ilo-color-light-text-default);
-  background-color: var(--ilo-color-white);
-  border: var(--ilo-border-md) solid var(--ilo-color-gray-base);
+  background-color: var(--ilo-color-light-container-bg-default);
+  border: var(--ilo-border-md) solid var(--ilo-color-light-border-default);
   box-sizing: border-box;
   height: px-to-rem(48px);
   margin: spacing(0);
@@ -25,15 +25,15 @@
   }
 
   &:focus {
-    background-color: var(--ilo-color-blue-lighter);
-    border: var(--ilo-border-md) solid var(--ilo-color-gray-base);
-    border-inline-start-color: var(--ilo-color-blue);
-    box-shadow: inset px-to-rem(1px) 0 0 0 var(--ilo-color-blue);
+    background-color: var(--ilo-color-light-container-bg-subtle);
+    border: var(--ilo-border-md) solid var(--ilo-color-light-border-default);
+    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);
     outline: none;
   }
 
   [dir="rtl"] &:focus {
-    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);
   }
 
   &:disabled {
@@ -43,14 +43,16 @@
 
   &:invalid,
   &__error {
-    background-color: var(--ilo-color-white);
-    border: var(--ilo-border-md) solid var(--ilo-color-gray-base);
-    border-inline-start-color: var(--ilo-color-red-dark);
-    box-shadow: inset px-to-rem(1px) 0 0 0 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-inline-start-color: var(--ilo-color-light-feedback-error-dark);
+    box-shadow: inset px-to-rem(1px) 0 0 0
+      var(--ilo-color-light-feedback-error-dark);
   }
 
   [dir="rtl"] &:invalid,
   [dir="rtl"] &__error {
-    box-shadow: inset px-to-rem(-1px) 0 0 0 var(--ilo-color-red-dark);
+    box-shadow: inset px-to-rem(-1px) 0 0 0
+      var(--ilo-color-light-feedback-error-dark);
   }
 }

package/scss/components/_languagetoggle.scss

@@ -3,21 +3,23 @@
 @import "../animations";
 
 .ilo--language-toggle {
-  --ilo--language-toggle-color: var(--ilo-color-white);
-  --ilo--language-toggle-color-hover: var(--ilo-color-white);
+  --ilo--language-toggle-color: var(--ilo-color-light-text-inverse);
+  --ilo--language-toggle-color-hover: var(--ilo-color-light-text-inverse);
   --ilo--language-toggle-bg: transparent;
-  --ilo--language-toggle-bg-hover: var(--ilo-color-blue-dark);
+  --ilo--language-toggle-bg-hover: var(--ilo-color-light-container-bg-brand);
 
   &__theme {
     &__dark {
-      --ilo--language-toggle-color: var(--ilo-color-blue-dark);
-      --ilo--language-toggle-color-hover: var(--ilo-color-white);
+      --ilo--language-toggle-color: var(--ilo-color-light-text-brand);
+      --ilo--language-toggle-color-hover: var(--ilo-color-light-text-inverse);
     }
 
     &__dark-blue {
-      --ilo--language-toggle-color: var(--ilo-color-white);
-      --ilo--language-toggle-color-hover: var(--ilo-color-blue);
-      --ilo--language-toggle-bg-hover: var(--ilo-color-white);
+      --ilo--language-toggle-color: var(--ilo-color-light-text-inverse);
+      --ilo--language-toggle-color-hover: var(--ilo-color-light-action-hover);
+      --ilo--language-toggle-bg-hover: var(
+        --ilo-color-light-container-bg-default
+      );
     }
   }
 

package/scss/components/_linklist.scss

@@ -3,8 +3,8 @@
 @import "../mixins";
 
 .ilo--link-list {
-  --ilo-link-list-color-icon: var(--ilo-color-blue-dark);
-  --ilo-link-list-color-indent-icon: var(--ilo-color-gray-base);
+  --ilo-link-list-color-icon: var(--ilo-color-light-action-default);
+  --ilo-link-list-color-indent-icon: var(--ilo-color-light-icon-subtle);
 
   &--headline {
     font-family: var(--ilo-fonts-display);
@@ -56,7 +56,7 @@
       & .ilo--link-list--link:focus,
       &:hover,
       &:focus {
-        --ilo-link-list-color-indent-icon: var(--ilo-color-blue);
+        --ilo-link-list-color-indent-icon: var(--ilo-color-light-action-hover);
       }
     }
   }
@@ -75,7 +75,8 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border-bottom: var(--ilo-border-md) solid var(--ilo-color-gray-light);
+    border-bottom: var(--ilo-border-md) solid
+      var(--ilo-color-light-border-subtle);
     color: var(--ilo-link-color-default-light);
     @include typography("highlight-medium");
     padding-top: spacing(4);
@@ -96,10 +97,10 @@
 
     &:hover,
     &:focus {
-      --ilo-link-list-color-icon: var(--ilo-color-blue);
+      --ilo-link-list-color-icon: var(--ilo-color-light-action-hover);
       border-bottom: var(--ilo-border-md) solid
         var(--ilo-link-color-hover-light);
-      background-color: var(--ilo-color-blue-lighter);
+      background-color: var(--ilo-color-light-container-bg-subtle);
       color: var(--ilo-link-color-hover-light);
       outline: none;
       @include globaltransition("color, background-color, border-color");
@@ -113,23 +114,23 @@
   }
 
   &--dark {
-    --ilo-link-list-color-icon: var(--ilo-color-white);
-    --ilo-link-list-color-indent-icon: var(--ilo-color-white);
+    --ilo-link-list-color-icon: var(--ilo-color-light-icon-inverse);
+    --ilo-link-list-color-indent-icon: var(--ilo-color-light-icon-inverse);
     .ilo--link-list--headline,
     .ilo--link-list--links--headline {
-      color: var(--ilo-color-white);
+      color: var(--ilo-color-light-text-inverse);
     }
 
     .ilo--link-list--link {
       border-bottom: var(--ilo-border-md) solid rgba(237, 240, 242, 0.4);
 
       .ilo--link-list--label {
-        color: var(--ilo-color-white);
+        color: var(--ilo-color-light-text-inverse);
       }
 
       &:visited {
         .ilo--link-list--label {
-          color: var(--ilo-color-white);
+          color: var(--ilo-color-light-text-inverse);
           @include globaltransition("color");
         }
       }
@@ -148,7 +149,7 @@
         outline: none;
 
         .ilo--link-list--label {
-          color: var(--ilo-color-blue);
+          color: var(--ilo-color-light-action-hover);
           @include globaltransition("color");
         }
       }

package/scss/components/_list.scss

@@ -14,13 +14,13 @@
 
   &__theme {
     &__light {
-      color: var(--ilo-color-gray-charcoal);
+      color: var(--ilo-color-light-text-default);
       @include invincible-list;
     }
 
     &__dark {
-      color: var(--ilo-color-white);
-      @include invincible-list(var(--ilo-color-white));
+      color: var(--ilo-color-light-text-inverse);
+      @include invincible-list(var(--ilo-color-light-icon-inverse));
     }
   }
 

package/scss/components/_loading.scss

@@ -4,24 +4,24 @@
 
 .ilo--loading {
   --ilo-loading-size: #{px-to-rem(60px)};
-  --ilo-loading-loading-circle: var(--ilo-color-gray-light);
-  --ilo-loading-loading-line: var(--ilo-color-gray-base);
-  --ilo-loading-loading-pointer: var(--ilo-color-blue);
-  --ilo-loading-loaded-circle: var(--ilo-color-gray-light);
-  --ilo-loading-loaded-cirlce-inner: var(--ilo-color-blue);
-  --ilo-loading-loaded-check: var(--ilo-color-white);
+  --ilo-loading-loading-circle: var(--ilo-color-light-icon-disabled);
+  --ilo-loading-loading-line: var(--ilo-color-light-icon-subtle);
+  --ilo-loading-loading-pointer: var(--ilo-color-light-action-hover);
+  --ilo-loading-loaded-circle: var(--ilo-color-light-icon-disabled);
+  --ilo-loading-loaded-cirlce-inner: var(--ilo-color-light-action-hover);
+  --ilo-loading-loaded-check: var(--ilo-color-light-icon-inverse);
 
   width: var(--ilo-loading-size);
   height: var(--ilo-loading-size);
 
   &__theme__dark {
-    --ilo-loading-loading-circle: var(--ilo-color-blue-dark);
-    --ilo-loading-loading-line: var(--ilo-color-yellow);
-    --ilo-loading-loading-pointer: var(--ilo-color-yellow);
+    --ilo-loading-loading-circle: var(--ilo-color-light-action-default);
+    --ilo-loading-loading-line: var(--ilo-color-dark-icon-accent);
+    --ilo-loading-loading-pointer: var(--ilo-color-dark-icon-accent);
 
-    --ilo-loading-loaded-circle: var(--ilo-color-blue-dark);
-    --ilo-loading-loaded-cirlce-inner: var(--ilo-color-yellow);
-    --ilo-loading-loaded-check: var(--ilo-color-blue-dark);
+    --ilo-loading-loaded-circle: var(--ilo-color-light-action-default);
+    --ilo-loading-loaded-cirlce-inner: var(--ilo-color-dark-icon-accent);
+    --ilo-loading-loaded-check: var(--ilo-color-light-action-default);
   }
 
   &__size__small {

package/scss/components/_logo.scss

@@ -12,11 +12,11 @@
 
   &--theme {
     &--light {
-      --logo-theme-color: var(--ilo-color-blue);
+      --logo-theme-color: var(--ilo-color-light-action-hover);
     }
 
     &--dark {
-      --logo-theme-color: var(--ilo-color-white);
+      --logo-theme-color: var(--ilo-color-light-text-inverse);
     }
   }
 

package/scss/components/_logogrid.scss

@@ -30,7 +30,7 @@
     #{$c}__theme__light &,
     #{$c}__theme__dark & {
       &:hover {
-        background-color: var(--ilo-color-background-hover);
+        background-color: var(--ilo-color-light-container-bg-subtle);
       }
     }
   }
@@ -45,11 +45,11 @@
     grid-column: span 1;
 
     #{$c}__theme__light & {
-      background-color: var(--ilo-color-background-highlight);
+      background-color: var(--ilo-color-light-container-bg-disabled);
     }
 
     #{$c}__theme__dark & {
-      background-color: var(--ilo-color-background-default);
+      background-color: var(--ilo-color-light-container-bg-default);
     }
 
     img {

package/scss/components/_modal.scss

@@ -44,7 +44,7 @@
   }
 
   &--contents {
-    background-color: var(--ilo-color-white);
+    background-color: var(--ilo-color-light-container-bg-default);
     left: 0;
     position: absolute;
     margin: 0 4.2%;

package/scss/components/_multilinkcard.scss

@@ -16,10 +16,10 @@
       // Unset properties we set in the card component
       border: unset;
       &:has(
-          .ilo--card--link:hover,
-          .ilo--card--link:focus,
-          .ilo--card--link:focus-within
-        ) {
+        .ilo--card--link:hover,
+        .ilo--card--link:focus,
+        .ilo--card--link:focus-within
+      ) {
         border: unset;
         filter: unset;
       }
@@ -64,7 +64,7 @@
 
       #{$self}--image--wrapper {
         display: none;
-        background-color: var(--ilo-color-blue-lighter);
+        background-color: var(--ilo-color-light-container-bg-subtle);
         height: 0;
         overflow: hidden;
         padding-top: 56.25%;
@@ -94,7 +94,7 @@
       #{$self}--title {
         @include typography("heading-2", true);
         margin-bottom: var(--standard-spacing);
-        color: var(--ilo-color-gray-charcoal);
+        color: var(--ilo-color-light-text-default);
 
         @include breakpoint("md") {
           @include typography("heading-2");
@@ -104,7 +104,7 @@
       #{$self}--intro {
         @include typography("body-large", true);
         margin-bottom: var(--standard-spacing);
-        color: var(--ilo-color-gray-charcoal);
+        color: var(--ilo-color-light-text-default);
 
         @include breakpoint("md") {
           @include typography("body-large");
@@ -236,7 +236,7 @@
     .ilo--link-list {
       a {
         &:hover {
-          background-color: var(--ilo-color-white);
+          background-color: var(--ilo-color-light-container-bg-default);
         }
       }
     }