@ilo-org/styles 1.16.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.16.0",
+  "version": "1.17.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/international-labour-organization/designsystem.git",
@@ -37,25 +37,28 @@
   },
   "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",
-    "sass": "^1.62.1"
+    "postcss": "^8.5.6",
+    "sass": "^1.62.1",
+    "vitest": "^2.0.5"
   },
   "scripts": {
     "build:lib": "gulp",
     "format": "prettier --check . --ignore-path ../../.prettierignore",
     "format:fix": "prettier --write . --ignore-path ../../.prettierignore",
     "lint": "eslint",
+    "test": "vitest",
     "lint:fix": "eslint --fix"
   }
 }

package/scss/_animation-mixins.scss

@@ -0,0 +1,22 @@
+//*------------------------------------*\
+//    $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: string.unquote($properties);
+  transition-duration: 150ms;
+  transition-timing-function: ease-out;
+}
+
+/// Animation for loading skeletons
+@mixin pulse-animation() {
+  animation-name: pulse;
+  animation-delay: 0.5s;
+  animation-duration: 2s;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+}

package/scss/_animations.scss

@@ -1,14 +1,6 @@
-// ======================================
-// Global transition
-// ======================================
-/// 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-duration: 150ms;
-  transition-timing-function: ease-out;
-}
+// Animation mixins live in their own module so that consumers can use them
+// without pulling in the keyframes below. Re-forwarded here for back-compat.
+@forward "animation-mixins";
 
 // ======================================
 // Animation of empty gradient
@@ -37,14 +29,6 @@
 // ======================================
 // Animation for loading skeletons
 // ======================================
-@mixin pulse-animation() {
-  animation-name: pulse;
-  animation-delay: 0.5s;
-  animation-duration: 2s;
-  animation-timing-function: ease-in-out;
-  animation-iteration-count: infinite;
-}
-
 @keyframes pulse {
   0% {
     opacity: 1;

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;
@@ -72,9 +76,11 @@
 // Encode color strings
 //
 // Useful for using color variables with inline CSS SVGs
+// @deprecated - will be removed in future versions
 // =========================================
 @function colortodataurlicon($name, $color) {
-  $icon: map-get($icons, $name);
+  @warn "The function colortodataurlicon is deprecated and will be removed in future versions.";
+  $icon: map.get($icons, $name);
   $fill: "currentColor";
   $output: str-replace($icon, $fill, $color);
   @return $output;

package/scss/_helpers.scss

@@ -0,0 +1,12 @@
+//*------------------------------------*\
+//    $HELPERS — public Sass API
+//    Functions and mixins only.
+//    Guaranteed to emit no CSS.
+//    Consumers reach this file as `@use "@ilo-org/styles/scss/helpers"` or,
+//    because @ilo-org/react & @ilo-org/twig republishes scss/ under styles/scss/, as
+//    `@use "@ilo-org/<package>/styles/scss/helpers"`.
+//*------------------------------------*/
+
+@forward "functions";
+
+@forward "mixins" hide dataurlicon;

package/scss/_mixins.scss

@@ -1,9 +1,11 @@
 //*------------------------------------*\
 //    $MIXINS
 //*------------------------------------*/
+@use "sass:string";
+@use "sass:map";
 @use "icons" as *;
 @use "functions" as *;
-@use "animations" as *;
+@use "animation-mixins" as *;
 @use "theme/breakpoints" 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;
       }
     }
@@ -47,10 +49,11 @@
 
 // ======================================
 // Data URL Icon
-// @TODO: Deprecate all usage of dataurlicon and replace with icon mixin
+// @deprecated - will be removed in future versions
 // ======================================
 
 @mixin dataurlicon($name, $color: $color-base-neutrals-black) {
+  @warn "ILO Design System: the dataurlicon mixin is deprecated and will be removed in future versions. Use the icon mixin instead";
   background-image: url("#{colortodataurlicon($name, $color)}");
   background-repeat: no-repeat;
 }
@@ -59,13 +62,23 @@
 // Icon
 // ======================================
 
-@mixin icon($name, $color: black) {
-  $icon: map-get($icons, $name);
+@mixin icon($name, $color: black, $size: null, $position: null) {
+  $icon: map.get($icons, $name);
   mask-image: url("#{$icon}");
   mask-repeat: no-repeat;
   -webkit-mask-image: url("#{$icon}");
   -webkit-mask-repeat: no-repeat;
   background-color: $color;
+
+  @if $size {
+    mask-size: $size;
+    -webkit-mask-size: $size;
+  }
+
+  @if $position {
+    mask-position: $position;
+    -webkit-mask-position: $position;
+  }
 }
 
 // ======================================
@@ -288,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: &;