@ilo-org/styles 1.12.0 → 1.13.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ilo-org/styles",
   "description": "Styles for products using ILO's Design System",
-  "version": "1.12.0",
+  "version": "1.13.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/international-labour-organization/designsystem.git",

package/scss/components/_button.scss

@@ -125,13 +125,6 @@
       color: var(--ilo-button-labels-hover-color);
     }
 
-    &:focus {
-      background-color: var(--ilo-color-background-focus);
-      border: var(--ilo-border-md) var(--ilo-color-borders-focus) solid;
-      color: var(--ilo-button-labels-focus-color);
-      outline: none;
-    }
-
     &:active {
       background-color: var(--ilo-color-background-active);
       border: var(--ilo-border-md) var(--ilo-color-borders-active) solid;
@@ -141,13 +134,16 @@
   }
 
   &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
     background-color: var(--ilo-color-background-focus);
     border: var(--ilo-border-md) var(--ilo-color-borders-focus) solid;
     box-shadow:
       4px 4px 0 1px var(--ilo-color-borders-focus) inset,
       -4px -4px 0 1px var(--ilo-color-borders-focus) inset;
     color: var(--ilo-button-labels-focus-color);
-    outline: none;
     @include globaltransition("color, background-color, border-color");
 
     &.#{$prefix}--small {

package/scss/components/_dropdown.scss

@@ -19,6 +19,10 @@
     display: inline-block;
     position: relative;
 
+    &__size__small {
+      --ilo-dropdown-height: #{px-to-rem(32px)};
+    }
+
     &:before {
       content: "";
       pointer-events: none;
@@ -67,16 +71,26 @@
   &:hover,
   &:focus,
   &:active {
-    border-left-color: var(--ilo-color-blue);
-    border-left-width: px-to-rem(3px);
-    padding-left: calc(#{spacing(4)} - #{px-to-rem(1px)});
+    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-dropdown-background-color-active);
     --ilo-dropdown-color: var(--ilo-color-gray-charcoal);
   }
 
+  [dir="rtl"] &:hover,
+  [dir="rtl"] &:focus,
+  [dir="rtl"] &:active {
+    box-shadow: inset px-to-rem(-1px) 0 0 0 var(--ilo-color-blue);
+  }
+
   option {
     width: 100%;
     text-overflow: ellipsis;
     overflow: hidden;
   }
+
+  &__size__small {
+    padding: 0 spacing(11) 0 spacing(3);
+    @include typography("body-xsmall");
+  }
 }

package/scss/components/_formcontrol.scss

@@ -15,6 +15,10 @@
   grid-template-columns: auto;
   gap: spacing(2);
 
+  &:has(#{$c}--label__size__small) {
+    gap: spacing(1);
+  }
+
   &__theme {
     &__light {
       --ilo-form-control-label-color: var(--ilo-color-gray-charcoal);
@@ -146,7 +150,7 @@
 
     &__size {
       &__small {
-        @include typography("highlight-small-bold");
+        @include typography("body-xsmall");
       }
 
       &__medium {

package/scss/components/_input.scss

@@ -1,37 +1,55 @@
 @use "../functions" as *;
 @import "../mixins";
 
+// Base styles for the .ilo--input class, applied by TextInput, NumberPicker,
+// DatePicker, and SearchField (and extended in _datepicker.scss). This is the
+// shared form-input base — keep it even though there is no standalone Input
+// component.
 .ilo--input {
   appearance: none;
   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: var(--ilo-font-weight-medium);
-  @include typography("highlight-medium");
   height: px-to-rem(48px);
   margin: spacing(0);
   outline: none;
-  padding: spacing(4) spacing(3) spacing(4) spacing(3);
+  padding: spacing(4) spacing(3);
   width: 100%;
+  @include typography("highlight-medium");
+
+  &__size__small {
+    height: px-to-rem(32px);
+    padding: spacing(2) spacing(3);
+    @include typography("body-xsmall");
+  }
 
   &:focus {
     background-color: var(--ilo-color-blue-lighter);
     border: var(--ilo-border-md) solid var(--ilo-color-gray-base);
-    padding-left: spacing(3);
+    border-inline-start-color: var(--ilo-color-blue);
+    box-shadow: inset px-to-rem(1px) 0 0 0 var(--ilo-color-blue);
     outline: none;
   }
 
+  [dir="rtl"] &:focus {
+    box-shadow: inset px-to-rem(-1px) 0 0 0 var(--ilo-color-blue);
+  }
+
   &:disabled {
     opacity: 0.45;
     pointer-events: none;
   }
 
   &:invalid,
-  &.error,
-  .error & {
+  &__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);
+    border-inline-start-color: var(--ilo-color-red-dark);
+    box-shadow: inset px-to-rem(1px) 0 0 0 var(--ilo-color-red-dark);
+  }
+
+  [dir="rtl"] &:invalid,
+  [dir="rtl"] &__error {
+    box-shadow: inset px-to-rem(-1px) 0 0 0 var(--ilo-color-red-dark);
   }
 }

package/scss/components/_searchfield.scss

@@ -10,7 +10,7 @@
   }
 
   .ilo--input {
-    padding-inline-end: spacing(14);
+    padding-inline-end: spacing(9);
   }
 
   &--button {
@@ -70,6 +70,34 @@
     }
   }
 
+  &__size__small {
+    .ilo--input {
+      padding-inline-end: spacing(4);
+    }
+
+    .ilo--searchfield--button {
+      width: px-to-rem(32px);
+
+      &:after {
+        height: px-to-rem(16px);
+        width: px-to-rem(16px);
+      }
+    }
+
+    .ilo--searchfield--clear-button {
+      svg {
+        display: block;
+        width: px-to-rem(16px);
+        height: px-to-rem(16px);
+      }
+
+      &.show {
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+  }
+
   // Remove the default clear button in search
   [type="search"]::-webkit-search-cancel-button {
     -webkit-appearance: none;

package/scss/components/_textarea.scss

@@ -22,11 +22,15 @@
   &: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);
+    border-inline-start-color: var(--ilo-color-blue-medium);
+    box-shadow: inset px-to-rem(1px) 0 0 0 var(--ilo-color-blue-medium);
     outline: none;
   }
 
+  [dir="rtl"] &:focus {
+    box-shadow: inset px-to-rem(-1px) 0 0 0 var(--ilo-color-blue-medium);
+  }
+
   &:disabled {
     opacity: 0.45;
     pointer-events: none;
@@ -37,6 +41,13 @@
   &__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);
+    border-inline-start-color: var(--ilo-color-red-dark);
+    box-shadow: inset px-to-rem(1px) 0 0 0 var(--ilo-color-red-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);
   }
 }

package/scss/components/index.scss

@@ -49,7 +49,6 @@
 @use "tableofcontents";
 @use "textarea";
 @use "tag";
-@use "textinput";
 @use "toggle";
 @use "tooltip";
 @use "video";

package/scss/components/navigation/_nav-compact.scss

@@ -135,6 +135,11 @@
       display: inline-flex;
       align-items: center;
       padding-inline: spacing(3);
+      background: none;
+      border: 0;
+      cursor: pointer;
+      font: inherit;
+      color: inherit;
 
       &:after {
         content: "";

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

@@ -175,6 +175,12 @@
   display: flex;
   align-items: center;
   padding-inline: spacing(2);
+  background: none;
+  border: 0;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  text-decoration: none;
 
   @include breakpoint("lg", true) {
     display: none;

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

@@ -29,8 +29,13 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
+      width: 100%;
       text-decoration: none;
       cursor: pointer;
+      background: none;
+      border: 0;
+      font: inherit;
+      color: inherit;
 
       &__label {
         @include typography("highlight-medium");

package/css/components/textinput.css

@@ -1 +0,0 @@
-@keyframes emptygradient{0%{opacity:1}to{opacity:0}}@keyframes spin{to{-moz-transform:rotate(1turn);-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}.ilo--text-input{appearance:none;background-color:var(--ilo-color-white);box-sizing:border-box;font-family:var(--ilo-fonts-copy);font-family:var(--ilo-fonts-display);font-size:var(--ilo-font-size-md);font-weight:var(--ilo-font-weight-medium);height:2.5723472669rem;letter-spacing:var(--ilo-letter-spacing-sm);line-height:var(--ilo-line-height-xlg);margin:calc(var(--ilo-spacing-base)*0);padding:calc(var(--ilo-spacing-base)*4) calc(var(--ilo-spacing-base)*3);width:100%}.ilo--text-input,.ilo--text-input:focus{border:var(--ilo-border-md) solid var(--ilo-color-gray-base);outline:0}.ilo--text-input:focus{background-color:var(--ilo-color-blue-lighter);border-left:.1607717042rem solid var(--ilo-color-blue);padding-left:calc(var(--ilo-spacing-base)*3)}.ilo--text-input:disabled{opacity:.45;pointer-events:none}.ilo--text-input:invalid,.ilo--text-input__error{background-color:var(--ilo-color-white);border:var(--ilo-border-md) solid var(--ilo-color-gray-base);border-left:.1607717042rem solid var(--ilo-color-red-dark)}

package/scss/components/_textinput.scss

@@ -1,37 +0,0 @@
-@use "../functions" as *;
-@import "../mixins";
-
-.ilo--text-input {
-  appearance: none;
-  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: var(--ilo-font-weight-medium);
-  @include typography("highlight-medium");
-  height: px-to-rem(48px);
-  margin: spacing(0);
-  outline: none;
-  padding: spacing(4) spacing(3);
-  width: 100%;
-
-  &: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;
-  }
-
-  &:disabled {
-    opacity: 0.45;
-    pointer-events: none;
-  }
-
-  &:invalid,
-  &__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);
-  }
-}