@ilo-org/styles 1.10.2 → 1.11.0

package/scss/components/_table.scss

@@ -1,15 +1,14 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @import "../mixins";
 
 .ilo--table {
-  background-color: $color-ux-table-background;
+  background-color: var(--ilo-color-blue-ramp);
   padding: spacing(20);
   position: relative;
 
   &--header {
-    background-color: $color-ux-table-content-background;
-    border-bottom: px-to-rem(2px) solid $color-base-neutrals-lighter;
+    background-color: var(--ilo-color-white);
+    border-bottom: px-to-rem(2px) solid var(--ilo-color-gray-light);
     padding: spacing(4) spacing(2) spacing(5) spacing(2);
   }
 
@@ -26,7 +25,7 @@
   }
 
   &--head {
-    background-color: $color-ux-table-content-background;
+    background-color: var(--ilo-color-white);
     box-shadow:
       0px 0.8px 1.6px rgba(30, 45, 190, 0.038),
       0px 4px 8px rgba(30, 45, 190, 0.054),
@@ -40,9 +39,9 @@
     z-index: 2;
 
     &--cell {
-      background-color: $color-ux-table-content-background;
-      border-left: px-to-rem(1px) solid $color-base-neutrals-lighter;
-      border-bottom: px-to-rem(2px) solid $color-base-neutrals-lighter;
+      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);
       font-family: var(--ilo-fonts-display);
       font-weight: 700;
       @include typography("body-small");
@@ -63,8 +62,8 @@
         position: relative;
 
         &:after {
-          background-color: $color-base-neutrals-lighter;
-          background-image: url("#{colortodataurlicon('chevron_down', $color-ux-labels-actionable)}");
+          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%;
@@ -79,14 +78,14 @@
         }
 
         &:hover {
-          background-color: $color-base-blue-light;
-          border-bottom: px-to-rem(2px) solid $color-base-blue-medium;
-          color: $color-base-blue-medium;
+          background-color: var(--ilo-color-blue-lighter);
+          border-bottom: px-to-rem(2px) solid var(--ilo-color-blue-medium);
+          color: var(--ilo-color-blue);
           cursor: pointer;
 
           &:after {
-            background-color: $color-base-blue-light;
-            background-image: url("#{colortodataurlicon('chevron_down', $color-base-blue-medium)}");
+            background-color: var(--ilo-color-blue-lighter);
+            background-image: url("#{colortodataurlicon('chevron_down', rgba(210, 213, 242, 1))}");
           }
         }
 
@@ -101,14 +100,14 @@
   }
 
   &--body {
-    background-color: $color-ux-table-cell-background;
+    background-color: var(--ilo-color-white);
 
     &--row.selected {
-      background-color: $color-ux-table-hover-background;
+      background-color: var(--ilo-color-background-hover);
     }
 
     &--cell {
-      border-bottom: px-to-rem(2px) solid $color-base-neutrals-lighter;
+      border-bottom: px-to-rem(2px) solid var(--ilo-color-gray-light);
       font-family: var(--ilo-fonts-copy);
       font-weight: 400;
       @include typography("body-small");
@@ -129,20 +128,20 @@
       }
 
       &:hover {
-        background-color: $color-ux-table-hover-background;
-        border-bottom: 2px solid $color-ux-labels-hover;
-        color: $color-ux-labels-hover;
+        background-color: var(--ilo-color-background-hover);
+        border-bottom: 2px solid var(--ilo-color-blue-medium);
+        color: var(--ilo-color-blue);
       }
 
       &.selected {
-        background-color: $color-ux-table-selected-background;
-        border-bottom: 2px solid $color-ux-labels-hover;
-        color: $color-ux-labels-hover;
+        background-color: var(--ilo-color-blue-ramp);
+        border-bottom: 2px solid var(--ilo-color-blue-medium);
+        color: var(--ilo-color-blue-medium);
         cursor: pointer;
       }
 
       &.column--selected {
-        background-color: $color-ux-table-hover-background;
+        background-color: var(--ilo-color-background-hover);
       }
 
       a {
@@ -165,7 +164,7 @@
   }
 
   &--description {
-    color: $color-base-neutrals-medium;
+    color: var(--ilo-color-gray-accessible);
     font-family: var(--ilo-fonts-copy);
     font-weight: 400;
     @include typography("body-xsmall");
@@ -177,28 +176,28 @@
 
   &--zebra {
     .ilo--table--body--row:nth-child(odd) {
-      background-color: $color-ux-table-zebra-background;
+      background-color: var(--ilo-color-background-highlight);
 
       &:hover,
       &:focus {
-        background-color: $color-ux-table-zebra-background;
+        background-color: var(--ilo-color-background-highlight);
       }
 
       .ilo--table--body--cell {
-        border-left: px-to-rem(1px) solid $color-base-neutrals-white;
+        border-left: px-to-rem(1px) solid var(--ilo-color-white);
 
         &:hover,
         &:focus {
-          background-color: $color-ux-table-selected-background;
+          background-color: var(--ilo-color-blue-ramp);
         }
       }
 
       &.selected {
         .ilo--table--body--cell {
-          background-color: $color-ux-table-hover-background;
+          background-color: var(--ilo-color-background-hover);
 
           &.selected {
-            background-color: $color-ux-table-selected-background;
+            background-color: var(--ilo-color-blue-ramp);
           }
         }
       }

package/scss/components/_tableofcontents.scss

@@ -1,10 +1,9 @@
-@use "../tokens" as *;
 @use "../animations" as *;
 @use "../functions" as *;
 @import "../mixins";
 
 .ilo--table-of-contents {
-  background-color: $color-ux-tableofcontents-items-default-background;
+  background-color: var(--ilo-color-gray-light);
   display: none;
   padding: 0;
 
@@ -25,7 +24,7 @@
   }
 
   &--headline {
-    border-bottom: px-to-rem(3px) solid $color-base-neutrals-lighter;
+    border-bottom: px-to-rem(3px) solid var(--ilo-color-gray-light);
     margin-bottom: spacing(6);
     margin-top: spacing(2);
     @include typography("heading-3");
@@ -119,38 +118,48 @@
     background-position: calc(100% - 16px) center;
     background-repeat: no-repeat;
     background-size: px-to-rem(24px) px-to-rem(24px);
-    border-bottom: $color-ux-tableofcontents-items-default-border px-to-rem(2px)
-      solid;
-    color: $color-ux-labels-actionable;
+    border-bottom: px-to-rem(2px) solid var(--ilo-color-white);
+    color: var(--ilo-color-blue-dark);
     display: block;
     font-family: var(--ilo-fonts-display);
     font-weight: 500;
     padding-block: spacing(4);
     padding-inline: spacing(4) spacing(12);
     text-decoration: none;
-    @include dataurlicon("arrow_down", $color-ux-labels-actionable);
     @include typography("highlight-medium");
     @include globaltransition("background-color, border, color");
+    position: relative;
+
+    &:after {
+      content: "";
+      display: block;
+      width: px-to-rem(24px);
+      height: px-to-rem(24px);
+      position: absolute;
+      right: spacing(4);
+      top: 50%;
+      transform: translateY(-50%);
+      @include icon("arrow_down", var(--ilo-color-blue-dark));
+    }
 
     &:hover,
     &:focus {
-      background-color: $color-ux-tableofcontents-items-hover-background;
-      border-bottom: $color-ux-tableofcontents-items-hover-border px-to-rem(2px)
-        solid;
-      color: $color-ux-labels-hover;
-      @include dataurlicon("arrow_down", $color-ux-labels-hover);
+      background-color: var(--ilo-color-blue-lighter);
+      border-bottom: px-to-rem(2px) solid var(--ilo-color-blue);
+      color: var(--ilo-color-blue);
+      &:after {
+        @include icon("arrow_down", var(--ilo-color-blue));
+      }
       @include globaltransition("background-color, border, color");
     }
 
     &:active {
-      background-color: $color-ux-tableofcontents-items-active-background;
-      border-bottom: $color-ux-tableofcontents-items-active-border
-        px-to-rem(2px) solid;
-      color: $color-ux-tableofcontents-items-active-color;
-      @include dataurlicon(
-        "arrow_down",
-        $color-ux-tableofcontents-items-active-icon
-      );
+      background-color: var(--ilo-color-white);
+      border-bottom: px-to-rem(2px) solid var(--ilo-color-blue-dark);
+      color: var(--ilo-color-blue-dark);
+      &:after {
+        @include icon("arrow_down", var(--ilo-color-blue-dark));
+      }
     }
   }
 

package/scss/components/_tabs.scss

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

package/scss/components/_tag.scss

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

package/scss/components/_textarea.scss

@@ -1,22 +1,13 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @import "../mixins";
 
 .ilo--textarea {
-  -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);
@@ -29,15 +20,11 @@
   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);
+    border-left: px-to-rem(3px) solid var(--ilo-color-blue-medium);
     padding-left: spacing(3);
+    outline: none;
   }
 
   &:disabled {
@@ -48,13 +35,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/_textcard.scss

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

package/scss/components/_textinput.scss

@@ -1,22 +1,13 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @import "../mixins";
 
 .ilo--text-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,9 @@
   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);
+    border-left: px-to-rem(3px) solid var(--ilo-color-blue);
     padding-left: spacing(3);
     outline: none;
   }
@@ -44,13 +30,8 @@
 
   &:invalid,
   &__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/_toggle.scss

@@ -1,4 +1,3 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @import "../animations";
 
@@ -37,13 +36,7 @@
 
   &__error {
     #{$c}--slider {
-      outline-color: map-get(
-        $color,
-        "formelements",
-        "toggle",
-        "error",
-        "border"
-      ) !important;
+      outline-color: var(--ilo-color-red) !important;
       outline-width: calc(var(--toggle-height) / 8);
       outline-style: solid;
     }
@@ -65,13 +58,7 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: map-get(
-      $color,
-      "formelements",
-      "toggle",
-      "unchecked",
-      "background"
-    );
+    background-color: var(--ilo-color-gray-base);
     border-radius: calc(var(--toggle-height) / 2);
     @include globaltransition("background");
 
@@ -82,50 +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: map-get(
-        $color,
-        "formelements",
-        "toggle",
-        "unchecked",
-        "slider",
-        "color"
-      );
+      background-color: var(--ilo-color-white);
       border-radius: 50%;
       @include globaltransition("transform, background");
     }
   }
 
   input[type="checkbox"]:checked + &--slider {
-    background-color: map-get(
-      $color,
-      "formelements",
-      "toggle",
-      "checked",
-      "background"
-    );
+    background-color: var(--ilo-color-blue-dark);
   }
 
   input[type="checkbox"]:focus + &--slider {
-    outline-color: map-get(
-      $color,
-      "formelements",
-      "toggle",
-      "active",
-      "border"
-    );
+    outline-color: var(--ilo-color-yellow);
     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: map-get(
-      $color,
-      "formelements",
-      "toggle",
-      "checked",
-      "slider",
-      "color"
-    );
+    background-color: var(--ilo-color-blue-lighter);
   }
 }

package/scss/components/_tooltip.scss

@@ -1,4 +1,3 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @use "../animations" as *;
 @import "../mixins";
@@ -10,7 +9,7 @@
   @include typography("body-small");
   font-family: var(--ilo-fonts-copy);
   font-weight: 400;
-  background: map-get($color, "tooltip", "default", "background");
+  background: var(--ilo-color-white);
   border: none;
   border-radius: px-to-rem(2px);
   display: inline-block;
@@ -18,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: map-get($color, "tooltip", "default", "text");
+  color: var(--ilo-color-gray-charcoal);
   opacity: 0;
   padding: spacing(2) spacing(4) spacing(3);
   position: absolute;
@@ -84,38 +83,45 @@
       background-size: cover;
       height: px-to-rem(20px);
       min-width: px-to-rem(20px);
-      @include dataurlicon(
-        "notification_info_outlined",
-        $color-ux-labels-actionable
-      );
+      position: relative;
+
+      &:after {
+        content: "";
+        display: block;
+        width: 100%;
+        height: 100%;
+        @include icon("notification_info_outlined", var(--ilo-color-blue-dark));
+      }
 
       &#{&}__theme__dark {
-        @include dataurlicon(
-          "notification_info_outlined",
-          $color-tooltip-dark-icon
-        );
+        &:after {
+          @include icon(
+            "notification_info_outlined",
+            var(--ilo-color-gray-light)
+          );
+        }
       }
     }
   }
 
   &--dark {
-    background: map-get($color, "tooltip", "dark", "background");
-    color: map-get($color, "tooltip", "dark", "text");
+    background: var(--ilo-color-gray-charcoal);
+    color: var(--ilo-color-gray-light);
 
     &.ilo--tooltip--arrow {
-      border-bottom-color: map-get($color, "tooltip", "dark", "background");
+      border-bottom-color: var(--ilo-color-gray-charcoal);
     }
 
     &.ilo--tooltip--arrow {
-      border-top-color: map-get($color, "tooltip", "dark", "background");
+      border-top-color: var(--ilo-color-gray-charcoal);
     }
 
     &.ilo--tooltip--arrow {
-      border-left-color: map-get($color, "tooltip", "dark", "background");
+      border-left-color: var(--ilo-color-gray-charcoal);
     }
 
     &.ilo--tooltip--arrow {
-      border-right-color: map-get($color, "tooltip", "dark", "background");
+      border-right-color: var(--ilo-color-gray-charcoal);
     }
   }
 }