@ilo-org/styles 0.11.3-next.2 → 0.12.0

package/scss/components/_tableofcontents.scss

@@ -27,12 +27,12 @@
 
   &--headline {
     border-bottom: px-to-rem(3px) solid $color-base-neutrals-lighter;
-    margin-bottom: px-to-rem($spacing-padding-3);
-    margin-top: px-to-rem(9px);
+    margin-bottom: spacing(6);
+    margin-top: spacing(2);
     @include font-styles("base");
     font-family: $fonts-display;
     font-weight: 700;
-    padding-bottom: px-to-rem($spacing-padding-2);
+    padding-bottom: spacing(4);
   }
 
   &--wrapper {
@@ -40,7 +40,7 @@
       display: block;
       height: 100vh;
       left: 0;
-      padding: px-to-rem(26px);
+      padding: spacing(6);
       position: fixed;
       top: 0;
       width: 100vw;
@@ -56,7 +56,7 @@
     align-items: center;
     display: flex;
     justify-content: center;
-    margin: px-to-rem($spacing-padding-3) auto;
+    margin: spacing(6) auto;
 
     &.hide {
       display: none;
@@ -127,24 +127,17 @@
     background-position: calc(100% - 11px) center;
     background-repeat: no-repeat;
     background-size: px-to-rem(24px) px-to-rem(24px);
-    border-bottom: $color-ux-tableofcontents-items-default-border
-      $spacing-ux-tableofcontents-items-border-bottom solid;
+    border-bottom: $color-ux-tableofcontents-items-default-border px-to-rem(2px)
+      solid;
     color: $color-ux-labels-actionable;
     display: block;
     font-family: $fonts-display;
     font-weight: 500;
-    margin: 0 $spacing-ux-tableofcontents-padding-right 0
-      $spacing-ux-tableofcontents-padding-left;
-    padding: $spacing-ux-tableofcontents-items-padding-top
-      $spacing-ux-tableofcontents-items-padding-right
-      $spacing-ux-tableofcontents-items-padding-bottom
-      $spacing-ux-tableofcontents-items-padding-left;
+    margin: 0 spacing(2) 0 spacing(2);
+    padding: spacing(4) spacing(2) spacing(4);
     position: relative;
     text-decoration: none;
-    width: calc(
-      100% - $spacing-ux-tableofcontents-padding-right -
-        $spacing-ux-tableofcontents-padding-left
-    );
+    width: calc(100% - 16px);
     @include dataurlicon("stemarrow", $color-ux-labels-actionable);
     @include font-styles("label-medium");
     @include globaltransition("background-color, border, color");
@@ -152,22 +145,13 @@
     &:hover,
     &:focus {
       background-color: $color-ux-tableofcontents-items-hover-background;
-      border-bottom: $color-ux-tableofcontents-items-hover-border
-        $spacing-ux-tableofcontents-items-border-bottom solid;
+      border-bottom: $color-ux-tableofcontents-items-hover-border px-to-rem(2px)
+        solid;
       background-position: calc(100% - 19px) center;
       color: $color-ux-labels-hover;
       margin: 0;
       outline: none;
-      padding: $spacing-ux-tableofcontents-items-padding-top
-        calc(
-          $spacing-ux-tableofcontents-items-padding-right +
-            $spacing-ux-tableofcontents-padding-right
-        )
-        $spacing-ux-tableofcontents-items-padding-bottom
-        calc(
-          $spacing-ux-tableofcontents-items-padding-left +
-            $spacing-ux-tableofcontents-padding-left
-        );
+      padding: spacing(4) spacing(4) spacing(4);
       width: 100%;
       @include dataurlicon("stemarrow", $color-ux-labels-hover);
       @include globaltransition("background-color, border, color");
@@ -176,22 +160,13 @@
     &:active {
       background-color: $color-ux-tableofcontents-items-active-background;
       border-bottom: $color-ux-tableofcontents-items-active-border
-        $spacing-ux-tableofcontents-items-border-bottom solid;
-      border-top: $color-ux-tableofcontents-items-default-border
-        $spacing-ux-tableofcontents-items-border-bottom solid;
+        px-to-rem(2px) solid;
+      border-top: $color-ux-tableofcontents-items-default-border px-to-rem(2px)
+        solid;
       color: $color-ux-tableofcontents-items-active-color;
       margin: -2px 0 0 0;
       outline: none;
-      padding: $spacing-ux-tableofcontents-items-padding-top
-        calc(
-          $spacing-ux-tableofcontents-items-padding-right +
-            $spacing-ux-tableofcontents-padding-right
-        )
-        $spacing-ux-tableofcontents-items-padding-bottom
-        calc(
-          $spacing-ux-tableofcontents-items-padding-left +
-            $spacing-ux-tableofcontents-padding-left
-        );
+      padding: spacing(4) spacing(4) spacing(4);
       width: 100%;
       @include dataurlicon(
         "stemarrow",
@@ -207,14 +182,12 @@
 
       &:hover {
         border-bottom: $color-ux-tableofcontents-items-hover-border
-          $spacing-ux-tableofcontents-items-border-bottom solid;
+          px-to-rem(2px) solid;
       }
     }
   }
 
-  .right-to-left & {
-    direction: rtl;
-
+  [dir="rtl"] & {
     .ilo--table-of-contents--link {
       background-position: 11px center;
 
@@ -224,10 +197,6 @@
       }
     }
 
-    &--wrapper {
-      direction: rtl;
-    }
-
     &--modal {
       .toc--modal--close {
         left: 0;

package/scss/components/_tabs.scss

@@ -10,7 +10,7 @@
 
   &:not(.tabs--js) {
     .ilo--tabs--selection {
-      margin-bottom: px-to-rem(24px);
+      margin-bottom: spacing(6);
 
       &--button {
         background: map-get($color, "link", "background", "default");
@@ -73,8 +73,8 @@
         display: flex;
         height: px-to-rem(60px);
         justify-content: flex-start;
-        padding-left: $spacing-padding-1;
-        padding-right: $spacing-padding-3;
+        padding-left: spacing(2);
+        padding-right: spacing(6);
         text-decoration: none;
         @include font-styles("label-medium");
         @include globaltransition("color, background-color, border-color");
@@ -87,10 +87,10 @@
 
         &.icon {
           .ilo--icon {
-            height: px-to-rem($spacing-padding-2);
+            height: px-to-rem(16px);
             margin-right: px-to-rem(5px);
             order: 1;
-            width: px-to-rem($spacing-padding-2);
+            width: px-to-rem(16px);
           }
 
           .ilo--tabs--selection--label {
@@ -136,8 +136,7 @@
 
     .ilo--tabs--content {
       background-color: $color-base-neutrals-white;
-      padding: px-to-rem($spacing-padding-5) px-to-rem($spacing-padding-3)
-        px-to-rem($spacing-padding-7) px-to-rem($spacing-padding-3);
+      padding: spacing(10) spacing(6) spacing(14) spacing(6);
 
       [aria-expanded="false"] {
         display: none;
@@ -150,8 +149,7 @@
 
     @include breakpoint("medium") {
       .ilo--tabs--content {
-        padding: px-to-rem($spacing-padding-5) px-to-rem($spacing-padding-8)
-          px-to-rem($spacing-padding-8) px-to-rem($spacing-padding-8);
+        padding: spacing(10) spacing(16) spacing(16) spacing(16);
       }
 
       .ilo--tabs--selection {
@@ -179,8 +177,4 @@
       }
     }
   }
-
-  .right-to-left & {
-    direction: rtl;
-  }
 }

package/scss/components/_tag.scss

@@ -6,13 +6,9 @@
 .ilo--tag-set {
   list-style: none;
 
-  .right-to-left & {
-    direction: rtl;
-  }
-
   &__item {
     display: inline-block;
-    margin: map-get($spacing, "horizontal-rule");
+    margin: spacing(1);
   }
 }
 
@@ -25,8 +21,7 @@
   display: inline-block;
   font-family: map-get($fonts, "display");
   font-weight: 500;
-  padding: px-to-rem(7px) px-to-rem(map-get($spacing, "ui-padding-sm"))
-    px-to-rem(5px) px-to-rem(map-get($spacing, "ui-padding-sm"));
+  padding: spacing(2) spacing(3);
   text-decoration: none;
   $self: &;
   @include globaltransition("color, background-color, border-color");
@@ -77,7 +72,7 @@
     cursor: pointer;
     display: none;
     opacity: 0;
-    padding-right: 36px;
+    padding-right: spacing(9);
     position: relative;
     visibility: hidden;
 

package/scss/components/_textarea.scss

@@ -18,17 +18,15 @@
   font-family: $fonts-copy;
   font-weight: map-get($type, "weights", "section");
   @include font-styles("label-medium");
-  height: px-to-rem(
-    map-get($spacing, "formelements", "input", "default", "height")
-  );
-  @include spacingvalues("margin", "input", "formelements");
-  max-width: map-get($spacing, "formelements", "input", "default", "width");
-  min-height: px-to-rem($spacing-padding-15);
-  min-width: map-get($spacing, "formelements", "input", "default", "width");
+  height: px-to-rem(48px);
+  margin: spacing(0);
+  max-width: 100%;
+  min-height: px-to-rem(120px);
+  min-width: 100%;
   outline: none;
   position: relative;
-  @include spacingvalues("padding", "input", "formelements");
-  width: map-get($spacing, "formelements", "input", "default", "width");
+  padding: spacing(4) spacing(3);
+  width: 100%;
 
   &:focus {
     background-color: map-get(
@@ -39,7 +37,7 @@
       "background"
     );
     @include bordervalues("input", "formelements", "focus");
-    padding-left: calc($spacing-formelements-input-default-padding-left - 1px);
+    padding-left: spacing(3);
   }
 
   &:disabled {
@@ -59,8 +57,4 @@
     );
     @include bordervalues("input", "formelements", "error");
   }
-
-  .right-to-left & {
-    direction: rtl;
-  }
 }

package/scss/components/_textcard.scss

@@ -11,9 +11,13 @@
       --max-width: #{px-to-rem(301px)};
 
       border-bottom: px-to-rem(3px) solid $brand-ilo-grey-ui;
-      padding: px-to-rem(24px) px-to-rem(40px);
+      padding: spacing(10) spacing(6) spacing(8);
 
-      @include cornercut(73px, 40px);
+      @include cornercut(72px, 40px);
+
+      [dir="rtl"] & {
+        @include cornercut(72px, 40px, left);
+      }
 
       [class$="profile--contents--light"] * {
         color: $color-base-neutrals-dark;
@@ -27,6 +31,9 @@
       &:focus,
       &:focus-within {
         @include card-drop-shadow;
+        @include globaltransition(border-color);
+
+        border-color: $brand-ilo-blue;
 
         [class*="profile--contents"] * {
           color: $color-base-blue-medium;
@@ -35,7 +42,6 @@
 
       @include breakpoint("medium", true) {
         --max-width: 100%;
-        padding: px-to-rem(32px) px-to-rem(40px);
       }
 
       &#{$self}__size {
@@ -43,21 +49,16 @@
         &__fluid {
           --max-width: #{px-to-rem(523px)};
 
-          padding: px-to-rem(32px) px-to-rem(40px);
-
-          @include breakpoint("medium") {
-            padding: px-to-rem(32px) px-to-rem(40px);
-          }
+          padding: spacing(10) spacing(8) spacing(8);
         }
 
         &__narrow {
           --max-width: #{px-to-rem(301px)};
 
-          padding: px-to-rem(24px) px-to-rem(40px);
+          padding: spacing(10) spacing(6) spacing(8);
 
           @include breakpoint("medium", true) {
             --max-width: 100%;
-            padding: px-to-rem(24px) px-to-rem(40px);
           }
 
           #{$self}--title {

package/scss/components/_textinput.scss

@@ -18,13 +18,11 @@
   font-family: $fonts-copy;
   font-weight: map-get($type, "weights", "section");
   @include font-styles("label-medium");
-  height: px-to-rem(
-    map-get($spacing, "formelements", "input", "default", "height")
-  );
-  @include spacingvalues("margin", "input", "formelements");
+  height: px-to-rem(48px);
+  margin: spacing(0);
   outline: none;
-  @include spacingvalues("padding", "input", "formelements");
-  width: map-get($spacing, "formelements", "input", "default", "width");
+  padding: spacing(4) spacing(3);
+  width: 100%;
 
   &:focus {
     background-color: map-get(
@@ -35,7 +33,7 @@
       "background"
     );
     @include bordervalues("input", "formelements", "focus");
-    padding-left: calc($spacing-formelements-input-default-padding-left - 1px);
+    padding-left: spacing(3);
     outline: none;
   }
 
@@ -53,13 +51,6 @@
       "error",
       "background"
     );
-  }
-
-  &:invalid {
-    @include bordervalues("input", "formelements", "invalid");
-  }
-
-  &__error {
     @include bordervalues("input", "formelements", "error");
   }
 }

package/scss/components/_toggle.scss

@@ -11,13 +11,9 @@
   width: var(--toggle-width);
   height: var(--toggle-height);
 
-  --base-toggle-width: #{px-to-rem(
-      map-get($spacing, "formelements", "toggle", "base", "width")
-    )};
+  --base-toggle-width: #{px-to-rem(46px)};
 
-  --base-toggle-height: #{px-to-rem(
-      map-get($spacing, "formelements", "toggle", "base", "height")
-    )};
+  --base-toggle-height: #{px-to-rem(24px)};
 
   &__size__small {
     --toggle-width: var(--base-toggle-width);

package/scss/components/_tooltip.scss

@@ -5,6 +5,7 @@
 
 .ilo--tooltip {
   $c: &;
+  $arrow-width: calc(spacing(2) - px-to-rem(1));
 
   @include font-styles("body-xs");
   background: map-get($color, "tooltip", "default", "background");
@@ -17,7 +18,7 @@
     drop-shadow(0px -4px 16px rgba(30, 45, 190, 0.054));
   color: map-get($color, "tooltip", "default", "text");
   opacity: 0;
-  padding: px-to-rem($spacing-padding-1) px-to-rem($spacing-padding-1-5);
+  padding: spacing(2) spacing(4) spacing(3);
   position: absolute;
   visibility: hidden;
   width: auto;
@@ -42,8 +43,8 @@
     &__icon {
       background-repeat: no-repeat;
       background-size: cover;
-      height: px-to-rem($spacing-padding-2);
-      min-width: px-to-rem($spacing-padding-2);
+      height: spacing(4);
+      min-width: spacing(4);
       @include dataurlicon("info", $color-ux-labels-actionable);
 
       &#{&}__theme__dark {
@@ -58,23 +59,21 @@
     border-style: solid;
     border-width: 0;
     height: 0;
-    margin-top: -#{map-get($spacing, "tooltip", "tooltip-arrow-width")};
+    margin-top: -#{$arrow-width};
     position: absolute;
     width: 0;
   }
 
   &--alignment-top {
     left: 0;
-    top: calc(-100% + map-get($spacing, "tooltip", "tooltip-arrow-height"));
+    top: calc(-100% + 12px);
 
     .ilo--tooltip--arrow {
       border-top-color: map-get($color, "tooltip", "default", "background");
-      border-width: map-get($spacing, "tooltip", "tooltip-arrow-height")
-        map-get($spacing, "tooltip", "tooltip-arrow-width") 0
-        map-get($spacing, "tooltip", "tooltip-arrow-width");
-      bottom: -#{map-get($spacing, "tooltip", "tooltip-arrow-height")};
+      border-width: spacing(3) $arrow-width 0 $arrow-width;
+      bottom: -#{spacing(3)};
       left: 50%;
-      margin-left: -#{map-get($spacing, "tooltip", "tooltip-arrow-width")};
+      margin-left: -#{$arrow-width};
       top: auto;
 
       &--placement-negative {
@@ -93,16 +92,14 @@
   }
 
   &--alignment-right {
-    left: calc(100% + map-get($spacing, "padding-4"));
-    top: calc(50% - map-get($spacing, "tooltip", "tooltip-arrow-width"));
+    left: calc(100% + 32px);
+    top: calc(50% - $arrow-width);
 
     .ilo--tooltip--arrow {
       border-right-color: map-get($color, "tooltip", "default", "background");
-      border-width: map-get($spacing, "tooltip", "tooltip-arrow-width")
-        map-get($spacing, "tooltip", "tooltip-arrow-height")
-        map-get($spacing, "tooltip", "tooltip-arrow-width") 0;
+      border-width: $arrow-width spacing(3) $arrow-width 0;
       left: 0;
-      margin-left: -#{map-get($spacing, "tooltip", "tooltip-arrow-height")};
+      margin-left: -#{spacing(3)};
       top: 50%;
 
       &--placement-negative {
@@ -122,17 +119,15 @@
   }
 
   &--alignment-left {
-    right: calc(100% + map-get($spacing, "padding-4"));
-    top: calc(50% - map-get($spacing, "tooltip", "tooltip-arrow-width"));
+    right: calc(100% + 32px);
+    top: calc(50% - $arrow-width);
 
     .ilo--tooltip--arrow {
       border-left-color: map-get($color, "tooltip", "default", "background");
-      border-width: map-get($spacing, "tooltip", "tooltip-arrow-width") 0
-        map-get($spacing, "tooltip", "tooltip-arrow-width")
-        map-get($spacing, "tooltip", "tooltip-arrow-height");
+      border-width: $arrow-width 0 $arrow-width spacing(3);
       left: auto;
-      margin-top: -#{map-get($spacing, "tooltip", "tooltip-arrow-width")};
-      right: -#{map-get($spacing, "tooltip", "tooltip-arrow-height")};
+      margin-top: -#{$arrow-width};
+      right: -#{spacing(3)};
       top: 50%;
 
       &--placement-negative {
@@ -153,15 +148,13 @@
 
   &--alignment-bottom {
     left: 0;
-    top: calc(100% + map-get($spacing, "tooltip", "tooltip-arrow-height"));
+    top: calc(100% + spacing(3));
 
     .ilo--tooltip--arrow {
-      border-width: 0 map-get($spacing, "tooltip", "tooltip-arrow-width")
-        map-get($spacing, "tooltip", "tooltip-arrow-height")
-        map-get($spacing, "tooltip", "tooltip-arrow-width");
+      border-width: 0 $arrow-width spacing(3) $arrow-width;
       left: 50%;
-      margin-left: -#{map-get($spacing, "tooltip", "tooltip-arrow-width")};
-      margin-top: -#{map-get($spacing, "tooltip", "tooltip-arrow-height")};
+      margin-left: -#{$arrow-width};
+      margin-top: -#{spacing(3)};
       top: 0;
       border-bottom-color: map-get($color, "tooltip", "default", "background");