@ilo-org/styles 1.15.1 → 1.16.0

package/scss/components/navigation/internal/mobile/_nav-mobile.scss

@@ -39,7 +39,7 @@
 
       &__label {
         @include typography("highlight-medium");
-        color: var(--ilo-color-blue-dark);
+        color: var(--ilo-color-light-text-brand);
       }
 
       &__icon {
@@ -48,7 +48,7 @@
         height: px-to-rem(24px);
         margin-top: -3px;
 
-        @include icon("search", var(--ilo-color-blue-dark));
+        @include icon("search", var(--ilo-color-light-action-default));
       }
     }
 
@@ -75,7 +75,7 @@
       width: 100%;
       display: block;
       text-decoration: none;
-      color: var(--ilo-color-blue-dark);
+      color: var(--ilo-color-light-text-brand);
     }
 
     &-language {
@@ -88,7 +88,7 @@
       justify-content: space-between;
 
       &__label {
-        color: var(--ilo-color-blue-dark);
+        color: var(--ilo-color-light-text-brand);
       }
 
       &__icon {
@@ -97,7 +97,7 @@
         height: px-to-rem(24px);
         margin-top: -3px;
 
-        @include icon("globe", var(--ilo-color-blue-dark));
+        @include icon("globe", var(--ilo-color-light-action-default));
       }
     }
   }
@@ -109,14 +109,14 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    color: var(--ilo-color-blue-dark);
+    color: var(--ilo-color-light-text-brand);
     border-bottom: 2px solid transparent;
     @include typography("highlight-medium");
 
     &:hover {
-      background-color: var(--ilo-color-blue-lighter);
-      color: var(--ilo-color-blue);
-      border-bottom-color: var(--ilo-color-blue);
+      background-color: var(--ilo-color-light-container-bg-subtle);
+      color: var(--ilo-color-light-action-hover);
+      border-bottom-color: var(--ilo-color-light-border-brand);
     }
 
     &__icon {
@@ -124,7 +124,7 @@
       width: px-to-rem(24px);
       height: px-to-rem(24px);
 
-      @include icon("chevron_right", var(--ilo-color-blue-dark));
+      @include icon("chevron_right", var(--ilo-color-light-action-default));
     }
   }
 
@@ -134,7 +134,7 @@
     }
 
     &__header {
-      --ilo-nav_compact-close_icon-color: var(--ilo-color-blue-dark);
+      --ilo-nav_compact-close_icon-color: var(--ilo-color-light-action-default);
       &__icon {
         display: block;
         width: px-to-rem(24px);
@@ -157,21 +157,21 @@
       display: flex;
       gap: spacing(2);
       align-items: center;
-      color: var(--ilo-color-blue-dark);
+      color: var(--ilo-color-light-text-brand);
       border-bottom: 2px solid transparent;
       @include typography("highlight-medium");
 
       &:hover {
-        --ilo-nav_compact-close_icon-color: var(--ilo-color-blue);
-        background-color: var(--ilo-color-blue-lighter);
-        color: var(--ilo-color-blue);
-        border-bottom-color: var(--ilo-color-blue);
+        --ilo-nav_compact-close_icon-color: var(--ilo-color-light-action-hover);
+        background-color: var(--ilo-color-light-container-bg-subtle);
+        color: var(--ilo-color-light-action-hover);
+        border-bottom-color: var(--ilo-color-light-border-brand);
       }
     }
 
     &__title {
       @include typography("heading-4", true);
-      color: var(--ilo-color-gray-charcoal);
+      color: var(--ilo-color-light-text-default);
     }
   }
 }

package/scss/components/photogallery/_expandable-caption.scss

@@ -15,7 +15,7 @@
     justify-content: space-between;
     gap: spacing(1);
     align-items: center;
-    color: var(--ilo-color-white);
+    color: var(--ilo-color-light-text-inverse);
     animation: slideDown 0.2s ease-out;
   }
 
@@ -44,7 +44,7 @@
       transform: translateY(-50%);
       width: px-to-rem(3px);
       height: 100%;
-      background-color: var(--ilo-color-gray-light);
+      background-color: var(--ilo-color-light-container-bg-disabled);
 
       [dir="rtl"] & {
         left: auto;
@@ -59,7 +59,7 @@
     width: px-to-rem(24px);
     height: px-to-rem(24px);
     background: transparent;
-    color: var(--ilo-color-white);
+    color: var(--ilo-color-light-text-inverse);
     cursor: pointer;
     flex-shrink: 0;
 
@@ -78,7 +78,7 @@
       left: 0;
       right: 0;
       background: rgba(0, 0, 0, 0.8);
-      color: var(--ilo-color-white);
+      color: var(--ilo-color-light-text-inverse);
       animation: slideUp 0.2s ease-out;
       align-items: flex-start;
     }

package/scss/components/photogallery/_lightbox.scss

@@ -14,7 +14,7 @@
   opacity: 0;
   align-items: center;
   justify-content: center;
-  background-color: var(--ilo-color-gray-charcoal);
+  background-color: var(--ilo-color-light-container-bg-inverse);
 
   &--open {
     display: flex;
@@ -27,7 +27,7 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: var(--ilo-color-gray-charcoal);
+    background-color: var(--ilo-color-light-container-bg-inverse);
   }
 
   &__container {
@@ -47,23 +47,23 @@
     top: 0;
     right: 0;
     z-index: 10000;
-    background: var(--ilo-color-white);
+    background: var(--ilo-color-light-container-bg-default);
     border: none;
     width: px-to-rem(40px);
     height: px-to-rem(40px);
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--ilo-color-gray-charcoal);
+    color: var(--ilo-color-light-text-default);
     cursor: pointer;
 
     &:hover {
-      background: var(--ilo-color-blue-lighter);
-      color: var(--ilo-color-blue);
+      background: var(--ilo-color-light-container-bg-subtle);
+      color: var(--ilo-color-light-action-hover);
     }
 
     &:focus {
-      outline: 2px solid var(--ilo-color-blue);
+      outline: 2px solid var(--ilo-color-light-border-brand);
       outline-offset: 2px;
     }
   }

package/scss/components/photogallery/_lightboxgallery.scss

@@ -58,7 +58,7 @@
         position: absolute;
         bottom: 0;
         left: 0;
-        color: var(--ilo-color-white);
+        color: var(--ilo-color-light-text-inverse);
         height: 25px;
         display: flex;
         @include typography("body-xsmall");
@@ -73,14 +73,14 @@
           padding: spacing(1) spacing(3);
           display: flex;
           align-items: center;
-          background-color: var(--ilo-color-gray-charcoal);
+          background-color: var(--ilo-color-light-container-bg-inverse);
         }
 
         &-corner {
           display: block;
           width: px-to-rem(25px);
           height: px-to-rem(25px);
-          background-color: var(--ilo-color-gray-charcoal);
+          background-color: var(--ilo-color-light-container-bg-inverse);
           clip-path: polygon(0 0, 0% 100%, 100% 100%);
           margin-left: px-to-rem(-0.5px);
 
@@ -149,7 +149,7 @@
     }
 
     &-text {
-      color: var(--ilo-color-white);
+      color: var(--ilo-color-light-text-inverse);
       @include typography("body-small");
       position: relative;
       padding-left: spacing(4);
@@ -170,7 +170,7 @@
         transform: translateY(-50%);
         width: px-to-rem(3px);
         height: 100%;
-        background-color: var(--ilo-color-gray-light);
+        background-color: var(--ilo-color-light-container-bg-disabled);
 
         [dir="rtl"] & {
           left: auto;
@@ -200,14 +200,14 @@
       width: px-to-rem(90px);
       border: none;
       outline: none;
-      background-color: var(--ilo-color-gray-light);
+      background-color: var(--ilo-color-light-container-bg-disabled);
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
 
       &:focus {
-        outline: px-to-rem(2px) solid var(--ilo-color-blue);
+        outline: px-to-rem(2px) solid var(--ilo-color-light-border-brand);
         outline-offset: px-to-rem(2px);
       }
 
@@ -237,7 +237,7 @@
             rgba(30, 45, 190, 0.4) 100%
           );
           pointer-events: none;
-          border-bottom: px-to-rem(4) solid var(--ilo-color-blue);
+          border-bottom: px-to-rem(4) solid var(--ilo-color-light-border-brand);
         }
       }
     }

package/scss/components/photogallery/_photogallery-controls.scss

@@ -14,7 +14,7 @@
     gap: spacing(1);
     @include typography("highlight-small");
     font-family: var(--ilo-fonts-copy);
-    color: var(--ilo-color-white);
+    color: var(--ilo-color-light-text-inverse);
 
     [dir="rtl"] & {
       flex-direction: row-reverse;
@@ -28,10 +28,10 @@
   }
 
   &__item {
-    background: var(--ilo-color-gray-light);
+    background: var(--ilo-color-light-container-bg-disabled);
     border: none;
     border-radius: 2px;
-    color: var(--ilo-color-blue-dark);
+    color: var(--ilo-color-light-text-brand);
     height: px-to-rem(40px);
     width: px-to-rem(40px);
     position: relative;
@@ -50,19 +50,25 @@
     }
 
     &:hover {
-      background: var(--ilo-color-blue-lighter);
-      color: var(--ilo-color-blue);
+      background: var(--ilo-color-light-container-bg-subtle);
+      color: var(--ilo-color-light-action-hover);
     }
   }
 
   &__first {
     &::before {
       transform: translate(-50%, -50%) rotate(180deg);
-      @include icon("double_chevron_right", var(--ilo-color-blue-dark));
+      @include icon(
+        "double_chevron_right",
+        var(--ilo-color-light-action-default)
+      );
     }
 
     &:hover::before {
-      @include icon("double_chevron_right", var(--ilo-color-blue));
+      @include icon(
+        "double_chevron_right",
+        var(--ilo-color-light-action-hover)
+      );
     }
 
     [dir="rtl"] & {
@@ -74,12 +80,12 @@
 
   &__prev {
     &::before {
-      @include icon("chevron_right", var(--ilo-color-blue-dark));
+      @include icon("chevron_right", var(--ilo-color-light-action-default));
       transform: translate(-50%, -50%) rotate(180deg);
     }
 
     &:hover::before {
-      @include icon("chevron_right", var(--ilo-color-blue));
+      @include icon("chevron_right", var(--ilo-color-light-action-hover));
     }
 
     [dir="rtl"] & {
@@ -91,12 +97,12 @@
 
   &__next {
     &::before {
-      @include icon("chevron_right", var(--ilo-color-blue-dark));
+      @include icon("chevron_right", var(--ilo-color-light-action-default));
       transform: translate(-50%, -50%);
     }
 
     &:hover::before {
-      @include icon("chevron_right", var(--ilo-color-blue));
+      @include icon("chevron_right", var(--ilo-color-light-action-hover));
     }
 
     [dir="rtl"] & {
@@ -108,12 +114,18 @@
 
   &__last {
     &::before {
-      @include icon("double_chevron_right", var(--ilo-color-blue-dark));
+      @include icon(
+        "double_chevron_right",
+        var(--ilo-color-light-action-default)
+      );
       transform: translate(-50%, -50%);
     }
 
     &:hover::before {
-      @include icon("double_chevron_right", var(--ilo-color-blue));
+      @include icon(
+        "double_chevron_right",
+        var(--ilo-color-light-action-hover)
+      );
     }
 
     [dir="rtl"] & {

package/scss/components/photogallery/_photogallery-thumbnails.scss

@@ -35,7 +35,7 @@
     position: relative;
     border: none;
     cursor: pointer;
-    background-color: var(--ilo-color-gray-light);
+    background-color: var(--ilo-color-light-container-bg-disabled);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -54,7 +54,7 @@
           rgba(30, 45, 190, 0.4) 100%
         );
         pointer-events: none;
-        border-bottom: px-to-rem(4) solid var(--ilo-color-blue);
+        border-bottom: px-to-rem(4) solid var(--ilo-color-light-border-brand);
       }
     }
   }
@@ -69,7 +69,7 @@
     flex-shrink: 0;
     width: var(--ilo-photo_gallery-thumbnails-width);
     aspect-ratio: 16 / 9;
-    background-color: var(--ilo-color-blue-dark);
+    background-color: var(--ilo-color-light-container-bg-brand);
     border: none;
     outline: none;
     display: flex;
@@ -79,22 +79,22 @@
 
     &-label {
       @include typography("highlight-small-bold");
-      color: var(--ilo-color-blue-dark);
+      color: var(--ilo-color-light-text-brand);
       text-align: center;
-      background-color: var(--ilo-color-gray-light);
+      background-color: var(--ilo-color-light-container-bg-disabled);
       padding: spacing(2) spacing(4) spacing(1) spacing(4);
       border-radius: var(--ilo-border-radius);
     }
 
     &:hover,
     &:focus {
-      background-color: var(--ilo-color-blue-ramp);
+      background-color: var(--ilo-color-light-action-selected);
     }
 
     &:hover &-label,
     &:focus &-label {
-      background-color: var(--ilo-color-blue-lighter);
-      color: var(--ilo-color-blue);
+      background-color: var(--ilo-color-light-container-bg-subtle);
+      color: var(--ilo-color-light-action-hover);
     }
   }
 }

package/scss/components/photogallery/_photogallery.scss

@@ -5,7 +5,7 @@
 
 .ilo--photo-gallery {
   --ilo-photo_gallery-target-height: 210px;
-  background-color: var(--ilo-color-white);
+  background-color: var(--ilo-color-light-container-bg-default);
   display: flex;
   flex-direction: column;
   gap: spacing(4);
@@ -66,7 +66,7 @@
         width: 100%;
         object-fit: contain;
         height: inherit;
-        background-color: var(--ilo-color-gray-light);
+        background-color: var(--ilo-color-light-container-bg-disabled);
         height: var(--ilo-photo_gallery-target-height);
         position: relative;
       }
@@ -122,24 +122,24 @@
       top: 0;
       right: 0;
       z-index: 2;
-      background: var(--ilo-color-gray-light);
+      background: var(--ilo-color-light-container-bg-disabled);
       border: none;
       width: px-to-rem(40px);
       height: px-to-rem(40px);
       display: flex;
       align-items: center;
       justify-content: center;
-      color: var(--ilo-color-blue-dark);
+      color: var(--ilo-color-light-text-brand);
       cursor: pointer;
       border-radius: var(--ilo-border-radius);
 
       &:hover {
-        background: var(--ilo-color-blue-lighter);
-        color: var(--ilo-color-blue);
+        background: var(--ilo-color-light-container-bg-subtle);
+        color: var(--ilo-color-light-action-hover);
       }
 
       &:focus {
-        outline: 2px solid var(--ilo-color-blue);
+        outline: 2px solid var(--ilo-color-light-border-brand);
         outline-offset: 2px;
       }
     }
@@ -147,7 +147,7 @@
 
   &__caption {
     @include typography("body-small");
-    color: var(--ilo-color-gray-accessible);
+    color: var(--ilo-color-light-text-subtle);
     padding-left: spacing(4);
     position: relative;
     overflow: hidden;
@@ -168,7 +168,7 @@
       transform: translateY(-50%);
       width: px-to-rem(3px);
       height: 100%;
-      background-color: var(--ilo-color-gray-base);
+      background-color: var(--ilo-color-light-container-bg-inactive);
 
       [dir="rtl"] & {
         left: auto;

package/scss/theme/_foundation.scss

@@ -13,6 +13,14 @@
 
   /**
     * Legacy Colors (aliases pointing to new global colors)
+    *
+    * @deprecated Use the Light/Dark Semantic Colors below — they name the role a
+    * colour plays (Text, Action, Icon, Border, Container Background, Page
+    * Background, Supportive Feedback, Generic) rather than the colour itself.
+    * These aliases are kept for backwards compatibility with downstream consumers
+    * only. Nothing inside this repo references them any more — not the component
+    * styles, not the Twig templates, not the React components, not Storybook — so
+    * the whole block can be deleted in the next major of @ilo-org/styles.
     */
   --ilo-color-white: var(--ilo-color-neutrals-white);
   --ilo-color-blue: var(--ilo-color-brand-600);
@@ -136,6 +144,8 @@
   // Icon
   --ilo-color-light-icon-default: var(--ilo-color-neutrals-black);
   --ilo-color-light-icon-subtle: var(--ilo-color-neutrals-500);
+  --ilo-color-light-icon-brand: var(--ilo-color-brand-800);
+  --ilo-color-light-icon-disabled: var(--ilo-color-neutrals-200);
   --ilo-color-light-icon-accent: var(--ilo-color-purple-600);
   --ilo-color-light-icon-inverse: var(--ilo-color-neutrals-white);
 
@@ -154,6 +164,10 @@
   --ilo-color-light-container-bg-subtle: var(--ilo-color-brand-100);
   --ilo-color-light-container-bg-brand: var(--ilo-color-brand-800);
   --ilo-color-light-container-bg-disabled: var(--ilo-color-neutrals-200);
+  --ilo-color-light-container-bg-inactive: var(--ilo-color-neutrals-500);
+  --ilo-color-light-container-bg-inverse-subtle: var(--ilo-color-neutrals-700);
+  --ilo-color-light-container-bg-inverse: var(--ilo-color-neutrals-black);
+  --ilo-color-light-container-bg-accent: var(--ilo-color-yellow-400);
 
   // Page Background
   --ilo-color-light-page-bg-default: var(--ilo-color-neutrals-white);
@@ -191,12 +205,14 @@
   // Action
   --ilo-color-dark-action-default: var(--ilo-color-brand-100);
   --ilo-color-dark-action-hover: var(--ilo-color-brand-200);
-  --ilo-color-dark-action-selected: var(--ilo-color-brand-200);
+  --ilo-color-dark-action-selected: var(--ilo-color-brand-600);
   --ilo-color-dark-action-inverse: var(--ilo-color-brand-800);
 
   // Icon
   --ilo-color-dark-icon-default: var(--ilo-color-neutrals-white);
   --ilo-color-dark-icon-subtle: var(--ilo-color-neutrals-700);
+  --ilo-color-dark-icon-brand: var(--ilo-color-brand-200);
+  --ilo-color-dark-icon-disabled: var(--ilo-color-neutrals-700);
   --ilo-color-dark-icon-accent: var(--ilo-color-yellow-400);
   --ilo-color-dark-icon-inverse: var(--ilo-color-brand-800);
 
@@ -215,6 +231,9 @@
   --ilo-color-dark-container-bg-subtle: var(--ilo-color-brand-600);
   --ilo-color-dark-container-bg-brand: var(--ilo-color-brand-100);
   --ilo-color-dark-container-bg-disabled: var(--ilo-color-neutrals-black);
+  --ilo-color-dark-container-bg-inactive: var(--ilo-color-neutrals-700);
+  --ilo-color-dark-container-bg-inverse-subtle: var(--ilo-color-neutrals-200);
+  --ilo-color-dark-container-bg-inverse: var(--ilo-color-neutrals-white);
 
   // Page Background
   --ilo-color-dark-page-bg-default: var(--ilo-color-brand-800);