@ilo-org/styles 1.15.1 → 1.17.0

package/scss/components/_table.scss

@@ -2,13 +2,12 @@
 @import "../mixins";
 
 .ilo--table {
-  background-color: var(--ilo-color-blue-ramp);
   padding: spacing(20);
   position: relative;
 
   &--header {
-    background-color: var(--ilo-color-white);
-    border-bottom: px-to-rem(2px) solid var(--ilo-color-gray-light);
+    background-color: var(--ilo-color-light-container-bg-default);
+    border-bottom: px-to-rem(2px) solid var(--ilo-color-light-border-subtle);
     padding: spacing(4) spacing(2) spacing(5) spacing(2);
   }
 
@@ -25,7 +24,7 @@
   }
 
   &--head {
-    background-color: var(--ilo-color-white);
+    background-color: var(--ilo-color-light-container-bg-default);
     box-shadow:
       0px 0.8px 1.6px rgba(30, 45, 190, 0.038),
       0px 4px 8px rgba(30, 45, 190, 0.054),
@@ -39,9 +38,9 @@
     z-index: 2;
 
     &--cell {
-      background-color: var(--ilo-color-white);
-      border-left: px-to-rem(1px) solid var(--ilo-color-gray-light);
-      border-bottom: px-to-rem(2px) solid var(--ilo-color-gray-light);
+      background-color: var(--ilo-color-light-container-bg-default);
+      border-left: px-to-rem(1px) solid var(--ilo-color-light-border-subtle);
+      border-bottom: px-to-rem(2px) solid var(--ilo-color-light-border-subtle);
       font-family: var(--ilo-fonts-display);
       font-weight: 700;
       @include typography("body-small");
@@ -61,12 +60,8 @@
         pointer-events: auto;
         position: relative;
 
+        &:before,
         &:after {
-          background-color: var(--ilo-color-gray-light);
-          background-image: url("#{colortodataurlicon('chevron_down', rgba(35, 0, 80, 1))}");
-          background-position: center center;
-          background-repeat: no-repeat;
-          background-size: 75%;
           content: "";
           display: block;
           height: px-to-rem(24px);
@@ -77,15 +72,37 @@
           transform: translateY(-50%);
         }
 
+        &:before {
+          background-color: var(--ilo-color-light-container-bg-disabled);
+        }
+
+        &:after {
+          @include icon(
+            "chevron_down",
+            var(--ilo-color-light-icon-brand),
+            75%,
+            center center
+          );
+        }
+
         &:hover {
-          background-color: var(--ilo-color-blue-lighter);
-          border-bottom: px-to-rem(2px) solid var(--ilo-color-blue-medium);
-          color: var(--ilo-color-blue);
+          background-color: var(--ilo-color-light-container-bg-subtle);
+          border-bottom: px-to-rem(2px) solid
+            var(--ilo-color-light-border-brand-2);
+          color: var(--ilo-color-light-action-hover);
           cursor: pointer;
 
+          &:before {
+            background-color: var(--ilo-color-light-container-bg-subtle);
+          }
+
           &:after {
-            background-color: var(--ilo-color-blue-lighter);
-            background-image: url("#{colortodataurlicon('chevron_down', rgba(210, 213, 242, 1))}");
+            @include icon(
+              "chevron_down",
+              var(--ilo-color-dark-icon-brand),
+              75%,
+              center center
+            );
           }
         }
 
@@ -100,14 +117,14 @@
   }
 
   &--body {
-    background-color: var(--ilo-color-white);
+    background-color: var(--ilo-color-light-container-bg-default);
 
     &--row.selected {
-      background-color: var(--ilo-color-background-hover);
+      background-color: var(--ilo-color-light-container-bg-subtle);
     }
 
     &--cell {
-      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);
       font-family: var(--ilo-fonts-copy);
       font-weight: 400;
       @include typography("body-small");
@@ -128,20 +145,20 @@
       }
 
       &:hover {
-        background-color: var(--ilo-color-background-hover);
-        border-bottom: 2px solid var(--ilo-color-blue-medium);
-        color: var(--ilo-color-blue);
+        background-color: var(--ilo-color-light-container-bg-subtle);
+        border-bottom: 2px solid var(--ilo-color-light-border-brand-2);
+        color: var(--ilo-color-light-action-hover);
       }
 
       &.selected {
-        background-color: var(--ilo-color-blue-ramp);
-        border-bottom: 2px solid var(--ilo-color-blue-medium);
-        color: var(--ilo-color-blue-medium);
+        background-color: var(--ilo-color-light-action-selected);
+        border-bottom: 2px solid var(--ilo-color-dark-border-brand);
+        color: var(--ilo-color-dark-text-brand);
         cursor: pointer;
       }
 
       &.column--selected {
-        background-color: var(--ilo-color-background-hover);
+        background-color: var(--ilo-color-light-container-bg-subtle);
       }
 
       a {
@@ -164,7 +181,7 @@
   }
 
   &--description {
-    color: var(--ilo-color-gray-accessible);
+    color: var(--ilo-color-light-text-subtle);
     font-family: var(--ilo-fonts-copy);
     font-weight: 400;
     @include typography("body-xsmall");
@@ -176,28 +193,28 @@
 
   &--zebra {
     .ilo--table--body--row:nth-child(odd) {
-      background-color: var(--ilo-color-background-highlight);
+      background-color: var(--ilo-color-light-container-bg-disabled);
 
       &:hover,
       &:focus {
-        background-color: var(--ilo-color-background-highlight);
+        background-color: var(--ilo-color-light-container-bg-disabled);
       }
 
       .ilo--table--body--cell {
-        border-left: px-to-rem(1px) solid var(--ilo-color-white);
+        border-left: px-to-rem(1px) solid var(--ilo-color-light-border-inverse);
 
         &:hover,
         &:focus {
-          background-color: var(--ilo-color-blue-ramp);
+          background-color: var(--ilo-color-light-action-selected);
         }
       }
 
       &.selected {
         .ilo--table--body--cell {
-          background-color: var(--ilo-color-background-hover);
+          background-color: var(--ilo-color-light-container-bg-subtle);
 
           &.selected {
-            background-color: var(--ilo-color-blue-ramp);
+            background-color: var(--ilo-color-light-action-selected);
           }
         }
       }

package/scss/components/_tableofcontents.scss

@@ -3,7 +3,7 @@
 @import "../mixins";
 
 .ilo--table-of-contents {
-  background-color: var(--ilo-color-gray-light);
+  background-color: var(--ilo-color-light-container-bg-disabled);
   display: none;
   padding: 0;
 
@@ -24,7 +24,7 @@
   }
 
   &--headline {
-    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);
     margin-bottom: spacing(6);
     margin-top: spacing(2);
     @include typography("heading-3");
@@ -118,8 +118,8 @@
     background-position: calc(100% - 16px) center;
     background-repeat: no-repeat;
     background-size: px-to-rem(24px) px-to-rem(24px);
-    border-bottom: px-to-rem(2px) solid var(--ilo-color-white);
-    color: var(--ilo-color-blue-dark);
+    border-bottom: px-to-rem(2px) solid var(--ilo-color-light-border-inverse);
+    color: var(--ilo-color-light-text-brand);
     display: block;
     font-family: var(--ilo-fonts-display);
     font-weight: 500;
@@ -139,26 +139,26 @@
       right: spacing(4);
       top: 50%;
       transform: translateY(-50%);
-      @include icon("arrow_down", var(--ilo-color-blue-dark));
+      @include icon("arrow_down", var(--ilo-color-light-action-default));
     }
 
     &:hover,
     &:focus {
-      background-color: var(--ilo-color-blue-lighter);
-      border-bottom: px-to-rem(2px) solid var(--ilo-color-blue);
-      color: var(--ilo-color-blue);
+      background-color: 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("arrow_down", var(--ilo-color-blue));
+        @include icon("arrow_down", var(--ilo-color-light-action-hover));
       }
       @include globaltransition("background-color, border, color");
     }
 
     &:active {
-      background-color: var(--ilo-color-white);
-      border-bottom: px-to-rem(2px) solid var(--ilo-color-blue-dark);
-      color: var(--ilo-color-blue-dark);
+      background-color: var(--ilo-color-light-container-bg-default);
+      border-bottom: px-to-rem(2px) solid var(--ilo-color-light-border-brand-3);
+      color: var(--ilo-color-light-text-brand);
       &:after {
-        @include icon("arrow_down", var(--ilo-color-blue-dark));
+        @include icon("arrow_down", var(--ilo-color-light-action-default));
       }
     }
   }

package/scss/components/_tabs.scss

@@ -4,26 +4,28 @@
 
 .ilo--tabs {
   &__theme__light {
-    --ilo-tabs-selection-bg-color: var(--ilo-color-white);
-    --ilo-tabs-btn-bg-color: var(--ilo-color-gray-light);
-    --ilo-tabs-btn-bg-color-hover: var(--ilo-color-blue-lighter);
-    --ilo-tabs-btn-bg-color-selected: var(--ilo-color-white);
-    --ilo-tabs-btn-border-top-hover: var(--ilo-color-blue);
-    --ilo-tabs-btn-border-top-selected: var(--ilo-color-blue-dark);
-    --ilo-tabs-btn-color: var(--ilo-color-blue-dark);
-    --ilo-tabs-btn-color-hover: var(--ilo-color-blue);
-    --ilo-tabs-content-bg-color: var(--ilo-color-white);
+    --ilo-tabs-selection-bg-color: var(--ilo-color-light-container-bg-default);
+    --ilo-tabs-btn-bg-color: var(--ilo-color-light-container-bg-disabled);
+    --ilo-tabs-btn-bg-color-hover: var(--ilo-color-light-container-bg-subtle);
+    --ilo-tabs-btn-bg-color-selected: var(
+      --ilo-color-light-container-bg-default
+    );
+    --ilo-tabs-btn-border-top-hover: var(--ilo-color-light-border-brand);
+    --ilo-tabs-btn-border-top-selected: var(--ilo-color-light-border-brand-3);
+    --ilo-tabs-btn-color: var(--ilo-color-light-text-brand);
+    --ilo-tabs-btn-color-hover: var(--ilo-color-light-action-hover);
+    --ilo-tabs-content-bg-color: var(--ilo-color-light-container-bg-default);
   }
 
   &__theme__dark {
-    --ilo-tabs-selection-bg-color: var(--ilo-color-blue-dark);
-    --ilo-tabs-btn-bg-color: var(--ilo-color-blue-ramp);
-    --ilo-tabs-btn-bg-color-hover: var(--ilo-color-blue-dark);
-    --ilo-tabs-btn-bg-color-selected: var(--ilo-color-blue-dark);
-    --ilo-tabs-btn-border-top-selected: var(--ilo-color-white);
-    --ilo-tabs-btn-color: var(--ilo-color-white);
-    --ilo-tabs-btn-color-hover: var(--ilo-color-white);
-    --ilo-tabs-content-bg-color: var(--ilo-color-blue-dark);
+    --ilo-tabs-selection-bg-color: var(--ilo-color-light-container-bg-brand);
+    --ilo-tabs-btn-bg-color: var(--ilo-color-dark-action-selected);
+    --ilo-tabs-btn-bg-color-hover: var(--ilo-color-light-container-bg-brand);
+    --ilo-tabs-btn-bg-color-selected: var(--ilo-color-light-container-bg-brand);
+    --ilo-tabs-btn-border-top-selected: var(--ilo-color-light-border-inverse);
+    --ilo-tabs-btn-color: var(--ilo-color-light-text-inverse);
+    --ilo-tabs-btn-color-hover: var(--ilo-color-light-text-inverse);
+    --ilo-tabs-content-bg-color: var(--ilo-color-light-container-bg-brand);
   }
 
   * {

package/scss/components/_tag.scss

@@ -22,18 +22,18 @@
   @include typography("highlight-small");
 
   // Colors and border
-  color: var(--ilo-color-blue-dark);
-  fill: var(--ilo-color-blue-dark);
-  background-color: var(--ilo-color-gray-light);
-  border-color: var(--ilo-color-gray-light);
+  color: var(--ilo-color-light-text-brand);
+  fill: var(--ilo-color-light-action-default);
+  background-color: var(--ilo-color-light-container-bg-disabled);
+  border-color: var(--ilo-color-light-border-subtle);
   border-width: px-to-rem(1.5px);
   border-style: solid;
   border-radius: px-to-rem(2px);
   @include globaltransition("color background-color border-color fill");
 
   &__disabled {
-    color: var(--ilo-color-gray-accessible);
-    fill: var(--ilo-color-gray-accessible);
+    color: var(--ilo-color-light-text-subtle);
+    fill: var(--ilo-color-dark-icon-subtle);
     pointer-events: none;
   }
 
@@ -51,7 +51,7 @@
       }
 
       &:focus-visible {
-        outline: 1px solid var(--ilo-color-blue);
+        outline: 1px solid var(--ilo-color-light-border-brand);
       }
     }
 
@@ -60,10 +60,10 @@
     &__anchor {
       &:hover,
       &:focus {
-        background-color: var(--ilo-color-blue-lighter);
-        border-color: var(--ilo-color-blue-lighter);
-        color: var(--ilo-color-blue);
-        fill: var(--ilo-color-blue);
+        background-color: var(--ilo-color-light-container-bg-subtle);
+        border-color: var(--ilo-color-dark-border-brand-3);
+        color: var(--ilo-color-light-action-hover);
+        fill: var(--ilo-color-light-action-hover);
       }
     }
 
@@ -72,10 +72,10 @@
     }
 
     &__reset {
-      background-color: var(--ilo-color-white);
-      border-color: var(--ilo-color-gray-base);
-      color: var(--ilo-color-blue-dark);
-      fill: var(--ilo-color-blue-dark);
+      background-color: var(--ilo-color-light-container-bg-default);
+      border-color: var(--ilo-color-light-border-default);
+      color: var(--ilo-color-light-text-brand);
+      fill: var(--ilo-color-light-action-default);
     }
   }
 

package/scss/components/_textarea.scss

@@ -3,8 +3,8 @@
 
 .ilo--textarea {
   appearance: none;
-  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;
   font-family: var(--ilo-fonts-copy);
   font-weight: var(--ilo-font-weight-medium);
@@ -20,15 +20,16 @@
   width: 100%;
 
   &: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-medium);
-    box-shadow: inset px-to-rem(1px) 0 0 0 var(--ilo-color-blue-medium);
+    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-2);
+    box-shadow: inset px-to-rem(1px) 0 0 0 var(--ilo-color-light-border-brand-2);
     outline: none;
   }
 
   [dir="rtl"] &:focus {
-    box-shadow: inset px-to-rem(-1px) 0 0 0 var(--ilo-color-blue-medium);
+    box-shadow: inset px-to-rem(-1px) 0 0 0
+      var(--ilo-color-light-border-brand-2);
   }
 
   &:disabled {
@@ -39,15 +40,17 @@
   &:invalid,
   &__error,
   &__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,
   [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/_textcard.scss

@@ -9,7 +9,6 @@
     &__text {
       --max-width: #{px-to-rem(301px)};
 
-      // border-bottom: px-to-rem(3px) solid var(--ilo-color-gray-accessible);
       padding: spacing(10) spacing(6) spacing(8);
 
       @include cornercut(72px, 40px);
@@ -46,7 +45,8 @@
       }
 
       &#{$self}__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);
       }
 
       #{$self}--skeleton--eyebrow {

package/scss/components/_toggle.scss

@@ -36,7 +36,7 @@
 
   &__error {
     #{$c}--slider {
-      outline-color: var(--ilo-color-red) !important;
+      outline-color: var(--ilo-color-light-feedback-error-default) !important;
       outline-width: calc(var(--toggle-height) / 8);
       outline-style: solid;
     }
@@ -58,7 +58,7 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: var(--ilo-color-gray-base);
+    background-color: var(--ilo-color-light-container-bg-inactive);
     border-radius: calc(var(--toggle-height) / 2);
     @include globaltransition("background");
 
@@ -69,24 +69,24 @@
       width: calc(var(--toggle-height) - var(--toggle-height) / 3);
       left: calc(var(--toggle-height) / 6);
       bottom: calc(var(--toggle-height) / 6);
-      background-color: var(--ilo-color-white);
+      background-color: var(--ilo-color-light-container-bg-default);
       border-radius: 50%;
       @include globaltransition("transform, background");
     }
   }
 
   input[type="checkbox"]:checked + &--slider {
-    background-color: var(--ilo-color-blue-dark);
+    background-color: var(--ilo-color-light-container-bg-brand);
   }
 
   input[type="checkbox"]:focus + &--slider {
-    outline-color: var(--ilo-color-yellow);
+    outline-color: var(--ilo-color-light-border-focus);
     outline-width: calc(var(--toggle-height) / 8);
     outline-style: solid;
   }
 
   input:checked + &--slider:before {
     transform: translateX(calc(var(--toggle-width) - var(--toggle-height)));
-    background-color: var(--ilo-color-blue-lighter);
+    background-color: var(--ilo-color-light-container-bg-subtle);
   }
 }

package/scss/components/_tooltip.scss

@@ -9,7 +9,7 @@
   @include typography("body-small");
   font-family: var(--ilo-fonts-copy);
   font-weight: 400;
-  background: var(--ilo-color-white);
+  background: var(--ilo-color-light-container-bg-default);
   border: none;
   border-radius: px-to-rem(2px);
   display: inline-block;
@@ -17,7 +17,7 @@
     drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054))
     drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08))
     drop-shadow(0px -4px 16px rgba(30, 45, 190, 0.054));
-  color: var(--ilo-color-gray-charcoal);
+  color: var(--ilo-color-light-text-default);
   opacity: 0;
   padding: spacing(2) spacing(4) spacing(3);
   position: absolute;
@@ -90,14 +90,17 @@
         display: block;
         width: 100%;
         height: 100%;
-        @include icon("notification_info_outlined", var(--ilo-color-blue-dark));
+        @include icon(
+          "notification_info_outlined",
+          var(--ilo-color-light-action-default)
+        );
       }
 
       &#{&}__theme__dark {
         &:after {
           @include icon(
             "notification_info_outlined",
-            var(--ilo-color-gray-light)
+            var(--ilo-color-light-icon-disabled)
           );
         }
       }
@@ -105,23 +108,23 @@
   }
 
   &--dark {
-    background: var(--ilo-color-gray-charcoal);
-    color: var(--ilo-color-gray-light);
+    background: var(--ilo-color-light-container-bg-inverse);
+    color: var(--ilo-color-dark-text-subtle);
 
     &.ilo--tooltip--arrow {
-      border-bottom-color: var(--ilo-color-gray-charcoal);
+      border-bottom-color: var(--ilo-color-light-container-bg-inverse);
     }
 
     &.ilo--tooltip--arrow {
-      border-top-color: var(--ilo-color-gray-charcoal);
+      border-top-color: var(--ilo-color-light-container-bg-inverse);
     }
 
     &.ilo--tooltip--arrow {
-      border-left-color: var(--ilo-color-gray-charcoal);
+      border-left-color: var(--ilo-color-light-container-bg-inverse);
     }
 
     &.ilo--tooltip--arrow {
-      border-right-color: var(--ilo-color-gray-charcoal);
+      border-right-color: var(--ilo-color-light-container-bg-inverse);
     }
   }
 }