@ilo-org/styles 1.17.0 → 1.17.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ilo-org/styles",
   "description": "Styles for products using ILO's Design System",
-  "version": "1.17.0",
+  "version": "1.17.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/international-labour-organization/designsystem.git",
@@ -37,18 +37,19 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@ilo-org/icons": "2.4.2",
-    "@ilo-org/fonts": "2.0.1"
+    "@ilo-org/fonts": "2.0.1",
+    "@ilo-org/icons": "2.4.2"
   },
   "devDependencies": {
     "cssnano": "^7.0.6",
-    "del": "^7.0.0",
-    "gulp": "^4.0.2",
+    "del": "^8.0.1",
+    "gulp": "^5.0.1",
     "gulp-clean-css": "^4.3.0",
-    "gulp-postcss": "^9.0.1",
-    "gulp-rename": "^2.0.0",
-    "gulp-sass": "^5.1.0",
+    "gulp-postcss": "^10.0.0",
+    "gulp-rename": "^2.1.0",
+    "gulp-sass": "^6.0.1",
     "gulp-sourcemaps": "^3.0.0",
+    "postcss": "^8.5.6",
     "sass": "^1.62.1",
     "vitest": "^2.0.5"
   },

package/scss/_animation-mixins.scss

@@ -1,12 +1,13 @@
 //*------------------------------------*\
 //    $ANIMATION MIXINS
 //*------------------------------------*/
+@use "sass:string";
 
 /// Applies the global transition to any transitionable property
 /// @param {String} $properties - the name of the property on which to transition
 /// @return {CSS} transition for the given properties
 @mixin globaltransition($properties) {
-  transition-property: unquote($properties);
+  transition-property: string.unquote($properties);
   transition-duration: 150ms;
   transition-timing-function: ease-out;
 }

package/scss/_functions.scss

@@ -1,3 +1,7 @@
+@use "sass:map";
+@use "sass:meta";
+@use "sass:string";
+@use "sass:list";
 @use "./config" as *;
 
 //*------------------------------------*\
@@ -10,12 +14,12 @@
 @use "sass:math";
 
 @function str-replace($string: "", $search, $replace: "") {
-  @if type-of($string) ==string {
-    $index: str-index($string, $search);
+  @if meta.type-of($string) ==string {
+    $index: string.index($string, $search);
     @if $index {
-      @return str-slice($string, 1, $index - 1) + $replace +
+      @return string.slice($string, 1, $index - 1) + $replace +
         str-replace(
-          str-slice($string, $index + str-length($search)),
+          string.slice($string, $index + string.length($search)),
           $search,
           $replace
         );
@@ -43,7 +47,7 @@
 // @return {*} - value in rems, with $font-size-default as base
 // ======================================
 @function px-to-rem($px) {
-  @if index($px, "%") {
+  @if list.index($px, "%") {
     @return $px;
   } @else {
     @return math.div(strip-units($px), strip-units($base-font-size)) * 1rem;
@@ -76,7 +80,7 @@
 // =========================================
 @function colortodataurlicon($name, $color) {
   @warn "The function colortodataurlicon is deprecated and will be removed in future versions.";
-  $icon: map-get($icons, $name);
+  $icon: map.get($icons, $name);
   $fill: "currentColor";
   $output: str-replace($icon, $fill, $color);
   @return $output;

package/scss/_mixins.scss

@@ -1,6 +1,8 @@
 //*------------------------------------*\
 //    $MIXINS
 //*------------------------------------*/
+@use "sass:string";
+@use "sass:map";
 @use "icons" as *;
 @use "functions" as *;
 @use "animation-mixins" as *;
@@ -30,15 +32,15 @@
 // ======================================
 
 @mixin breakpoint($breakpoint, $max: false) {
-  @if map-has-key($breakpoints-foundation, $breakpoint) {
+  @if map.has-key($breakpoints-foundation, $breakpoint) {
     @if not $max {
-      @media screen and (min-width: map-get($breakpoints-foundation, $breakpoint)) {
+      @media screen and (min-width: map.get($breakpoints-foundation, $breakpoint)) {
         @content;
       }
     }
 
     @if $max {
-      @media screen and (max-width: #{map-get($breakpoints-foundation, $breakpoint) - 1px}) {
+      @media screen and (max-width: #{map.get($breakpoints-foundation, $breakpoint) - 1px}) {
         @content;
       }
     }
@@ -61,7 +63,7 @@
 // ======================================
 
 @mixin icon($name, $color: black, $size: null, $position: null) {
-  $icon: map-get($icons, $name);
+  $icon: map.get($icons, $name);
   mask-image: url("#{$icon}");
   mask-repeat: no-repeat;
   -webkit-mask-image: url("#{$icon}");
@@ -299,7 +301,7 @@
     "heading-4" or
     $variant ==
     "blockquote" or
-    str-index($variant, "highlight") !=
+    string.index($variant, "highlight") !=
     null
   {
     font-family: var(--ilo-fonts-display);

package/scss/components/_accordion.scss

@@ -1,6 +1,6 @@
 @use "../functions" as *;
-@import "../mixins";
-@import "../config";
+@use "../mixins" as *;
+@use "../config" as *;
 
 // =============================================================================
 // ACCORDION COMPONENT

package/scss/components/_audioplayer.scss

@@ -1,5 +1,5 @@
 @use "../functions" as *;
-@import "../mixins";
+@use "../mixins" as *;
 
 .ilo--audio-player {
   &--progress-bar {

package/scss/components/_blockquote.scss

@@ -1,6 +1,6 @@
 @use "../functions" as *;
-@import "../mixins";
-@import "../config";
+@use "../mixins" as *;
+@use "../config" as *;
 
 /**
  * This mixin is also used in _richtext.scss component to style blockquotes.

package/scss/components/_breadcrumb.scss

@@ -1,7 +1,7 @@
 @use "../functions" as *;
 @use "../animations" as *;
-@import "../mixins";
-@import "../config";
+@use "../mixins" as *;
+@use "../config" as *;
 
 .#{$prefix}--breadcrumb {
   $breadcrumb: &;

package/scss/components/_button.scss

@@ -1,7 +1,7 @@
 @use "../functions" as *;
-@import "../animations";
-@import "../mixins";
-@import "../config";
+@use "../animations" as *;
+@use "../mixins" as *;
+@use "../config" as *;
 
 .#{$prefix}--button {
   --ilo-button-label-weight: 700;

package/scss/components/_callout.scss

@@ -1,6 +1,6 @@
 @use "../functions" as *;
-@import "../mixins";
-@import "../config";
+@use "../mixins" as *;
+@use "../config" as *;
 
 .#{$prefix}--callout {
   display: flex;

package/scss/components/_card.scss

@@ -1,6 +1,6 @@
 @use "../functions" as *;
 @use "../animations" as *;
-@import "../mixins";
+@use "../mixins" as *;
 
 @mixin card-drop-shadow {
   filter: drop-shadow(0px -4px 16px rgba(30, 45, 190, 0.05))

package/scss/components/_cardgroup.scss

@@ -1,5 +1,5 @@
 @use "../functions" as *;
-@import "../mixins";
+@use "../mixins" as *;
 
 .ilo--cardgroup {
   $c: &;

package/scss/components/_checkbox.scss

@@ -1,5 +1,5 @@
 @use "../functions" as *;
-@import "../mixins";
+@use "../mixins" as *;
 
 // =============================================================================
 // CHECKBOX COMPONENT

package/scss/components/_container.scss

@@ -1,6 +1,6 @@
 @use "../functions" as *;
-@import "../animations";
-@import "../mixins";
+@use "../animations" as *;
+@use "../mixins" as *;
 
 .ilo--container {
   margin-right: auto;

package/scss/components/_contextmenu.scss

@@ -1,5 +1,5 @@
 @use "../functions" as *;
-@import "../mixins";
+@use "../mixins" as *;
 
 .ilo--context-menu {
   border-radius: px-to-rem(2px);

package/scss/components/_datacard.scss

@@ -1,6 +1,6 @@
 @use "../functions" as *;
 @use "../animations" as *;
-@import "../mixins";
+@use "../mixins" as *;
 
 .ilo--card {
   $self: &;

package/scss/components/_datepicker.scss

@@ -1,7 +1,8 @@
 @use "../functions" as *;
-@import "../mixins";
+@use "../mixins" as *;
 
 .ilo--datepicker {
+  color-scheme: light;
   cursor: pointer;
 
   &::-webkit-calendar-picker-indicator {

package/scss/components/_detailcard.scss

@@ -1,6 +1,6 @@
 @use "../functions" as *;
 @use "../animations" as *;
-@import "../mixins";
+@use "../mixins" as *;
 
 .ilo--card {
   $self: &;

package/scss/components/_dropdown.scss

@@ -1,6 +1,6 @@
 @use "../functions" as *;
-@import "../mixins";
-@import "../animations";
+@use "../mixins" as *;
+@use "../animations" as *;
 
 .ilo--dropdown {
   &--wrapper {

package/scss/components/_empty.scss

@@ -1,5 +1,5 @@
-@import "../mixins";
-@import "../animations";
+@use "../mixins" as *;
+@use "../animations" as *;
 
 .ilo--empty {
   background: linear-gradient(108.07deg, #b8c4cc 0.17%, #ebf5fd 75.36%);

package/scss/components/_factlistcard.scss

@@ -1,6 +1,6 @@
 @use "../functions" as *;
 @use "../animations" as *;
-@import "../mixins";
+@use "../mixins" as *;
 
 .ilo--card {
   $self: &;

package/scss/components/_featurecard.scss

@@ -1,6 +1,6 @@
 @use "../functions" as *;
 @use "../animations" as *;
-@import "../mixins";
+@use "../mixins" as *;
 
 .ilo--card {
   $self: &;

package/scss/components/_fieldset.scss

@@ -1,6 +1,6 @@
 @use "../functions" as *;
 @use "sass:math";
-@import "../mixins";
+@use "../mixins" as *;
 
 .ilo--fieldset {
   --ilo-fieldset-legend-color: var(--ilo-color-light-text-default);

package/scss/components/_file-upload.scss

@@ -1,5 +1,5 @@
 @use "../functions" as *;
-@import "../mixins";
+@use "../mixins" as *;
 
 .ilo--file-upload {
   &--input {

package/scss/components/_footer.scss

@@ -1,6 +1,6 @@
 @use "../functions" as *;
-@import "../animations";
-@import "../mixins";
+@use "../animations" as *;
+@use "../mixins" as *;
 
 .ilo--footer {
   border-bottom: px-to-rem(3px) solid var(--ilo-color-dark-border-subtle);

package/scss/components/_form.scss

@@ -1,5 +1,5 @@
 @use "../functions" as *;
-@import "../mixins";
+@use "../mixins" as *;
 
 .ilo--form {
   $gap: spacing(8);

package/scss/components/_formcontrol.scss

@@ -1,6 +1,6 @@
 @use "../functions" as *;
 @use "sass:math";
-@import "../mixins";
+@use "../mixins" as *;
 
 .ilo--form-control {
   $c: &;

package/scss/components/_hero.scss

@@ -1,5 +1,5 @@
 @use "../functions" as *;
-@import "../mixins";
+@use "../mixins" as *;
 
 .hero {
   $c: &;

package/scss/components/_herocard.scss

@@ -1,5 +1,5 @@
 @use "../functions" as *;
-@import "../mixins";
+@use "../mixins" as *;
 
 .ilo--hero-card {
   $c: &;

package/scss/components/_image.scss

@@ -1,5 +1,5 @@
 @use "../functions" as *;
-@import "../mixins";
+@use "../mixins" as *;
 
 @mixin image-caption-styles {
   figcaption {

package/scss/components/_input.scss

@@ -1,5 +1,5 @@
 @use "../functions" as *;
-@import "../mixins";
+@use "../mixins" as *;
 
 // Base styles for the .ilo--input class, applied by TextInput, NumberPicker,
 // DatePicker, and SearchField (and extended in _datepicker.scss). This is the

package/scss/components/_languagetoggle.scss

@@ -1,6 +1,6 @@
 @use "../functions" as *;
-@import "../mixins";
-@import "../animations";
+@use "../mixins" as *;
+@use "../animations" as *;
 
 .ilo--language-toggle {
   --ilo--language-toggle-color: var(--ilo-color-light-text-inverse);

package/scss/components/_linklist.scss

@@ -1,6 +1,6 @@
 @use "../functions" as *;
-@import "../animations";
-@import "../mixins";
+@use "../animations" as *;
+@use "../mixins" as *;
 
 .ilo--link-list {
   --ilo-link-list-color-icon: var(--ilo-color-light-action-default);

package/scss/components/_list.scss

@@ -1,5 +1,5 @@
 @use "../functions" as *;
-@import "../mixins";
+@use "../mixins" as *;
 
 .ilo--list {
   &--title {

package/scss/components/_loading.scss

@@ -1,6 +1,6 @@
 @use "../functions" as *;
-@import "../mixins";
-@import "../animations";
+@use "../mixins" as *;
+@use "../animations" as *;
 
 .ilo--loading {
   --ilo-loading-size: #{px-to-rem(60px)};

package/scss/components/_logogrid.scss

@@ -1,5 +1,5 @@
 @use "../functions" as *;
-@import "../mixins";
+@use "../mixins" as *;
 
 .ilo--logo-grid {
   $c: &;

package/scss/components/_modal.scss

@@ -1,6 +1,6 @@
 @use "../functions" as *;
-@import "../mixins";
-@import "../animations";
+@use "../mixins" as *;
+@use "../animations" as *;
 
 .ilo--modal {
   &--wrapper {

package/scss/components/_multilinkcard.scss

@@ -1,6 +1,6 @@
 @use "../functions" as *;
 @use "../animations" as *;
-@import "../mixins";
+@use "../mixins" as *;
 
 .ilo--card {
   $self: &;

package/scss/components/_navigation.scss

@@ -1,5 +1,5 @@
 @use "../functions" as *;
-@import "../mixins";
+@use "../mixins" as *;
 
 .ilo--header {
   $self: &;

package/scss/components/_notification.scss

@@ -1,6 +1,7 @@
+@use "sass:map";
 @use "../functions" as *;
-@import "../mixins";
-@import "../animations";
+@use "../mixins" as *;
+@use "../animations" as *;
 
 $notification-types: (
   "error": (
@@ -119,12 +120,12 @@ $notification-types: (
     @each $type, $config in $notification-types {
       .icon--#{$type} & {
         &:before {
-          background-color: map-get($config, background);
+          background-color: map.get($config, background);
         }
 
         &:after {
           @include icon(
-            map-get($config, icon),
+            map.get($config, icon),
             var(--ilo-color-light-icon-inverse)
           );
         }

package/scss/components/_pagination.scss

@@ -1,5 +1,5 @@
 @use "../functions" as *;
-@import "../mixins";
+@use "../mixins" as *;
 
 .ilo--pagination {
   --ilo-pagination-page-color: var(--ilo-color-light-text-brand);

package/scss/components/_profile.scss

@@ -1,6 +1,6 @@
 @use "../functions" as *;
-@import "../animations";
-@import "../mixins";
+@use "../animations" as *;
+@use "../mixins" as *;
 
 .ilo--profile {
   $c: &;

package/scss/components/_promocard.scss

@@ -1,6 +1,6 @@
 @use "../functions" as *;
 @use "../animations" as *;
-@import "../mixins";
+@use "../mixins" as *;
 
 .ilo--card {
   $self: &;

package/scss/components/_radio.scss

@@ -1,5 +1,5 @@
 @use "../functions" as *;
-@import "../mixins";
+@use "../mixins" as *;
 
 .ilo--radio {
   border: none;

package/scss/components/_readmore.scss

@@ -1,6 +1,6 @@
 @use "../functions" as *;
-@import "../animations";
-@import "../mixins";
+@use "../animations" as *;
+@use "../mixins" as *;
 
 .ilo--read-more {
   &--button {

package/scss/components/_richtext.scss

@@ -1,7 +1,7 @@
 @use "../functions" as *;
-@import "./blockquote";
-@import "./image";
-@import "../mixins";
+@use "./blockquote" as *;
+@use "./image" as *;
+@use "../mixins" as *;
 
 .ilo--richtext {
   --ilo-richtext-color: var(--ilo-color-light-text-brand);

package/scss/components/_scorecard.scss

@@ -1,6 +1,6 @@
 @use "../functions" as *;
 @use "../animations" as *;
-@import "../mixins";
+@use "../mixins" as *;
 
 .ilo--card {
   $self: &;

package/scss/components/_searchfield.scss

@@ -1,5 +1,5 @@
 @use "../functions" as *;
-@import "../mixins";
+@use "../mixins" as *;
 
 .ilo--searchfield {
   display: flex;

package/scss/components/_socialmedia.scss

@@ -1,6 +1,6 @@
 @use "../functions" as *;
-@import "../animations";
-@import "../mixins";
+@use "../animations" as *;
+@use "../mixins" as *;
 
 .ilo--social-media {
   $c: &;

package/scss/components/_statcard.scss

@@ -1,6 +1,6 @@
 @use "../functions" as *;
 @use "../animations" as *;
-@import "../mixins";
+@use "../mixins" as *;
 
 .ilo--card {
   $self: &;

package/scss/components/_status.scss

@@ -1,6 +1,6 @@
 @use "../functions" as *;
 @use "../animations" as *;
-@import "../mixins";
+@use "../mixins" as *;
 
 .ilo--status {
   // Layout

package/scss/components/_table.scss

@@ -1,5 +1,5 @@
 @use "../functions" as *;
-@import "../mixins";
+@use "../mixins" as *;
 
 .ilo--table {
   padding: spacing(20);

package/scss/components/_tableofcontents.scss

@@ -1,6 +1,6 @@
 @use "../animations" as *;
 @use "../functions" as *;
-@import "../mixins";
+@use "../mixins" as *;
 
 .ilo--table-of-contents {
   background-color: var(--ilo-color-light-container-bg-disabled);

package/scss/components/_tabs.scss

@@ -1,6 +1,6 @@
 @use "../functions" as *;
 @use "../animations" as *;
-@import "../mixins";
+@use "../mixins" as *;
 
 .ilo--tabs {
   &__theme__light {

package/scss/components/_tag.scss

@@ -1,6 +1,6 @@
 @use "../functions" as *;
 @use "../animations" as *;
-@import "../mixins";
+@use "../mixins" as *;
 
 .ilo--tags {
   display: flex;

package/scss/components/_textarea.scss

@@ -1,5 +1,5 @@
 @use "../functions" as *;
-@import "../mixins";
+@use "../mixins" as *;
 
 .ilo--textarea {
   appearance: none;