@ilo-org/styles 1.15.1 → 1.17.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ilo-org/styles",
   "description": "Styles for products using ILO's Design System",
-  "version": "1.15.1",
+  "version": "1.17.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/international-labour-organization/designsystem.git",
@@ -37,8 +37,8 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@ilo-org/fonts": "2.0.1",
-    "@ilo-org/icons": "2.4.2"
+    "@ilo-org/icons": "2.4.2",
+    "@ilo-org/fonts": "2.0.1"
   },
   "devDependencies": {
     "cssnano": "^7.0.6",
@@ -49,13 +49,15 @@
     "gulp-rename": "^2.0.0",
     "gulp-sass": "^5.1.0",
     "gulp-sourcemaps": "^3.0.0",
-    "sass": "^1.62.1"
+    "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,21 @@
+//*------------------------------------*\
+//    $ANIMATION MIXINS
+//*------------------------------------*/
+
+/// 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 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

@@ -72,8 +72,10 @@
 // Encode color strings
 //
 // Useful for using color variables with inline CSS SVGs
+// @deprecated - will be removed in future versions
 // =========================================
 @function colortodataurlicon($name, $color) {
+  @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);

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

@@ -3,7 +3,7 @@
 //*------------------------------------*/
 @use "icons" as *;
 @use "functions" as *;
-@use "animations" as *;
+@use "animation-mixins" as *;
 @use "theme/breakpoints" as *;
 
 // ======================================
@@ -47,10 +47,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 +60,23 @@
 // Icon
 // ======================================
 
-@mixin icon($name, $color: black) {
+@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;
+  }
 }
 
 // ======================================
@@ -168,7 +179,9 @@
 // ======================================
 
 @mixin caption-icon-wrapper($dir: "right", $width, $height) {
-  --ilo-caption-icon-wrapper-bg-color: var(--ilo-color-gray-charcoal);
+  --ilo-caption-icon-wrapper-bg-color: var(
+    --ilo-color-light-container-bg-inverse
+  );
   background: var(--ilo-caption-icon-wrapper-bg-color);
   height: $height;
   width: $width;
@@ -219,7 +232,7 @@
 // and also lists in RichText.
 // ======================================
 
-@mixin invincible-list($bullet-color: var(--ilo-color-gray-base)) {
+@mixin invincible-list($bullet-color: var(--ilo-color-light-icon-subtle)) {
   li {
     position: relative;
     margin-bottom: spacing(3);

package/scss/_typography.scss

@@ -28,7 +28,7 @@
 
 html,
 body {
-  color: var(--ilo-color-gray-charcoal);
+  color: var(--ilo-color-light-text-default);
   font-family: var(--ilo-fonts-copy);
   font-size: var(--ilo-font-size-base);
   line-height: var(--ilo-line-height-base);

package/scss/_typographymonorepo.scss

@@ -31,7 +31,7 @@
 
 html,
 body {
-  color: var(--ilo-color-gray-charcoal);
+  color: var(--ilo-color-light-text-default);
   font-family: var(--ilo-fonts-copy);
   font-size: var(--ilo-font-size-base);
   line-height: var(--ilo-line-height-base);

package/scss/components/_accordion.scss

@@ -9,7 +9,7 @@
 .#{$prefix}--accordion {
   // CSS Custom Properties
   // ---------------------------------------------------------------------------
-  --ilo-accordion-color-icon: var(--ilo-color-blue-dark);
+  --ilo-accordion-color-icon: var(--ilo-color-light-action-default);
   --ilo-accordion-transition-timing: 500ms; // Slower timing for smooth height transitions
   --ilo-accordion-scroll-max-height: 300px;
 
@@ -44,10 +44,10 @@
     padding-inline-end: spacing(1);
 
     // Visual
-    background-color: var(--ilo-color-white);
+    background-color: var(--ilo-color-light-container-bg-default);
     border: none;
-    border-top: 2px solid var(--ilo-color-gray-light);
-    color: var(--ilo-color-blue-dark);
+    border-top: 2px solid var(--ilo-color-light-border-subtle);
+    color: var(--ilo-color-light-text-brand);
 
     // Animation
     transition: all var(--ilo-accordion-transition-timing) ease-in-out;
@@ -63,26 +63,26 @@
 
     // Expanded state
     &[aria-expanded="true"] {
-      background-color: var(--ilo-color-blue-lighter);
+      background-color: var(--ilo-color-light-container-bg-subtle);
 
       #{$accordion}--icon {
-        @include icon("minus", var(--ilo-color-blue));
+        @include icon("minus", var(--ilo-color-light-action-hover));
       }
     }
 
     // Collapsed state
     &[aria-expanded="false"] {
       #{$accordion}--icon {
-        @include icon("plus", var(--ilo-color-blue-dark));
+        @include icon("plus", var(--ilo-color-light-action-default));
       }
     }
 
     // Interactive states
     &:hover,
     &:focus {
-      --ilo-accordion-color-icon: var(--ilo-color-blue);
-      border-top-color: var(--ilo-color-blue);
-      color: var(--ilo-color-blue);
+      --ilo-accordion-color-icon: var(--ilo-color-light-action-hover);
+      border-top-color: var(--ilo-color-light-border-brand);
+      color: var(--ilo-color-light-action-hover);
       cursor: pointer;
     }
 

package/scss/components/_audioplayer.scss

@@ -4,7 +4,7 @@
 .ilo--audio-player {
   &--progress-bar {
     height: px-to-rem(8px);
-    background-color: var(--ilo-color-gray-accessible);
+    background-color: var(--ilo-color-light-container-bg-inverse-subtle);
     position: relative;
     cursor: pointer;
   }
@@ -12,7 +12,7 @@
     --progress: 0%;
     width: var(--progress);
     height: 100%;
-    background-color: var(--ilo-color-yellow-500);
+    background-color: var(--ilo-color-light-container-bg-accent);
     position: absolute;
     top: 0;
     left: 0;
@@ -26,14 +26,14 @@
       "left left"
       "center right";
     align-items: center;
-    color: var(--ilo-color-white);
-    background-color: var(--ilo-color-gray-charcoal);
+    color: var(--ilo-color-light-text-inverse);
+    background-color: var(--ilo-color-light-container-bg-inverse);
     padding: spacing(3) 0;
     row-gap: spacing(3);
   }
   &--left {
     grid-area: left;
-    border-bottom: 1px solid var(--ilo-color-gray-accessible);
+    border-bottom: 1px solid var(--ilo-color-dark-border-subtle);
     padding-inline: spacing(3);
     padding-block-end: spacing(3);
   }
@@ -61,7 +61,7 @@
     white-space: nowrap;
     font-size: var(--ilo-font-size-xsm);
     line-height: var(--ilo-line-height-xlg);
-    color: var(--ilo-color-gray-light);
+    color: var(--ilo-color-dark-text-subtle);
   }
   &--track-creator::before {
     content: "•";
@@ -88,21 +88,21 @@
     padding: spacing(2);
   }
   &--skip-button:hover {
-    background-color: var(--ilo-color-brand-100);
-    color: var(--ilo-color-brand-600);
+    background-color: var(--ilo-color-light-container-bg-subtle);
+    color: var(--ilo-color-light-action-hover);
   }
   &--play-button {
     display: flex;
     align-items: center;
-    background-color: var(--ilo-color-yellow-500);
-    color: var(--ilo-color-brand-800);
+    background-color: var(--ilo-color-light-container-bg-accent);
+    color: var(--ilo-color-light-text-brand);
     border-radius: 50%;
     cursor: pointer;
     padding: spacing(1);
     border: none;
   }
   &--play-button:hover {
-    background-color: var(--ilo-color-brand-100);
+    background-color: var(--ilo-color-light-container-bg-subtle);
   }
   [aria-label="Play"] &--play-icon {
     display: block;
@@ -134,13 +134,13 @@
     line-height: var(--ilo-line-height-lg);
   }
   &--duration-total {
-    color: var(--ilo-color-gray-light);
+    color: var(--ilo-color-dark-text-subtle);
     font-size: var(--ilo-font-size-2xsm);
     line-height: var(--ilo-line-height-2xlg);
   }
   &--separator {
     height: 32px;
-    border-left: 1px solid var(--ilo-color-gray-accessible);
+    border-left: 1px solid var(--ilo-color-dark-border-subtle);
     margin: spacing(1) spacing(3);
   }
   &--volume-icon {
@@ -165,24 +165,24 @@
   &--volume-slider {
     --progress: 100%;
     margin-left: spacing(1);
-    background: var(--ilo-color-yellow-500);
+    background: var(--ilo-color-light-container-bg-accent);
     border-radius: 4px;
     height: 4px;
     width: 50%;
     background: linear-gradient(
       to right,
-      var(--ilo-color-yellow-500) 0%,
-      var(--ilo-color-yellow-500) var(--progress, 50%),
-      var(--ilo-color-gray-accessible) var(--progress, 50%),
-      var(--ilo-color-gray-accessible) 100%
+      var(--ilo-color-light-container-bg-accent) 0%,
+      var(--ilo-color-light-container-bg-accent) var(--progress, 50%),
+      var(--ilo-color-light-container-bg-inverse-subtle) var(--progress, 50%),
+      var(--ilo-color-light-container-bg-inverse-subtle) 100%
     );
     [dir="rtl"] & {
       background: linear-gradient(
         to left,
-        var(--ilo-color-yellow-500) 0%,
-        var(--ilo-color-yellow-500) var(--progress, 50%),
-        var(--ilo-color-gray-accessible) var(--progress, 50%),
-        var(--ilo-color-gray-accessible) 100%
+        var(--ilo-color-light-container-bg-accent) 0%,
+        var(--ilo-color-light-container-bg-accent) var(--progress, 50%),
+        var(--ilo-color-light-container-bg-inverse-subtle) var(--progress, 50%),
+        var(--ilo-color-light-container-bg-inverse-subtle) 100%
       );
     }
   }
@@ -193,7 +193,7 @@
 
     width: 16px;
     height: 16px;
-    background: var(--ilo-color-gray-light);
+    background: var(--ilo-color-light-container-bg-disabled);
     border-radius: 50%;
     cursor: pointer;
     margin-top: -2px; // Center thumb on track

package/scss/components/_blockquote.scss

@@ -7,14 +7,14 @@
  */
 @mixin blockquote {
   // Layout & background
-  background-color: var(--ilo-color-blue-lighter);
+  background-color: var(--ilo-color-light-container-bg-subtle);
   background-position: right top;
   background-repeat: no-repeat;
   background-size: px-to-rem(72px) px-to-rem(40px);
   display: block;
   width: fit-content;
   position: relative;
-  border-bottom: px-to-rem(3px) solid var(--ilo-color-gray-base);
+  border-bottom: px-to-rem(3px) solid var(--ilo-color-light-border-default);
   @include cornercut(72px, 40px);
 
   // Typography & spacing
@@ -23,7 +23,7 @@
 
   p {
     @include typography("blockquote", true);
-    color: var(--ilo-color-purple);
+    color: var(--ilo-color-light-text-accent);
     padding: 0 spacing(12) 0 0;
     margin-bottom: spacing(6);
     position: relative;
@@ -37,12 +37,12 @@
       width: px-to-rem(26.5px);
       height: px-to-rem(20px);
       transform: scaleX(-1);
-      @include icon("quote", var(--ilo-color-purple));
+      @include icon("quote", var(--ilo-color-light-icon-accent));
     }
   }
 
   cite {
-    color: var(--ilo-color-gray-accessible);
+    color: var(--ilo-color-light-text-subtle);
     font-weight: 400;
     font-size: var(--ilo-font-size-sm);
     line-height: 135%;
@@ -58,7 +58,7 @@
     left: 0;
     width: px-to-rem(53px);
     height: px-to-rem(40px);
-    @include icon("quote", var(--ilo-color-purple));
+    @include icon("quote", var(--ilo-color-light-icon-accent));
   }
 
   @include breakpoint("md") {

package/scss/components/_breadcrumb.scss

@@ -6,18 +6,22 @@
 .#{$prefix}--breadcrumb {
   $breadcrumb: &;
 
-  --ilo-breadcrumb-background-color: var(--ilo-color-white);
-  --ilo-breadcrumb-link-color: var(--ilo-color-blue-dark);
-  --ilo-breadcrumb-link-hover-color: var(--ilo-color-blue);
+  --ilo-breadcrumb-background-color: var(
+    --ilo-color-light-container-bg-default
+  );
+  --ilo-breadcrumb-link-color: var(--ilo-color-light-text-brand);
+  --ilo-breadcrumb-link-hover-color: var(--ilo-color-light-action-hover);
 
   position: relative;
   z-index: 10;
 
   &__theme {
     &__dark {
-      --ilo-breadcrumb-background-color: var(--ilo-color-blue-dark);
-      --ilo-breadcrumb-link-color: var(--ilo-color-white);
-      --ilo-breadcrumb-link-hover-color: var(--ilo-color-white);
+      --ilo-breadcrumb-background-color: var(
+        --ilo-color-light-container-bg-brand
+      );
+      --ilo-breadcrumb-link-color: var(--ilo-color-light-text-inverse);
+      --ilo-breadcrumb-link-hover-color: var(--ilo-color-light-text-inverse);
     }
   }
 

package/scss/components/_button.scss

@@ -5,10 +5,10 @@
 
 .#{$prefix}--button {
   --ilo-button-label-weight: 700;
-  --ilo-button-labels-actionable-color: var(--ilo-color-blue-dark);
-  --ilo-button-labels-active-color: var(--ilo-color-blue-light);
-  --ilo-button-labels-alert-color: var(--ilo-color-white);
-  --ilo-button-labels-hover-color: var(--ilo-color-blue);
+  --ilo-button-labels-actionable-color: var(--ilo-color-light-text-brand);
+  --ilo-button-labels-active-color: var(--ilo-color-dark-text-brand);
+  --ilo-button-labels-alert-color: var(--ilo-color-light-text-inverse);
+  --ilo-button-labels-hover-color: var(--ilo-color-light-action-hover);
 
   // This provides a reference to the outerclass within nested declarations
   $button: &;
@@ -85,49 +85,51 @@
   }
 
   &__primary {
-    background-color: var(--ilo-color-yellow);
-    border: var(--ilo-border-md) var(--ilo-color-yellow) solid;
+    background-color: var(--ilo-color-light-feedback-warning-default);
+    border: var(--ilo-border-md) var(--ilo-color-light-border-focus) solid;
     color: var(--ilo-button-labels-actionable-color);
   }
 
   &__secondary {
-    background-color: var(--ilo-color-background-default);
-    border: var(--ilo-border-md) var(--ilo-color-borders-default) solid;
+    background-color: var(--ilo-color-light-container-bg-default);
+    border: var(--ilo-border-md) var(--ilo-color-light-border-default) solid;
     color: var(--ilo-button-labels-actionable-color);
 
     &:hover {
-      background-color: var(--ilo-color-background-hover);
-      border: var(--ilo-border-md) var(--ilo-color-borders-hover) solid;
+      background-color: var(--ilo-color-light-container-bg-subtle);
+      border: var(--ilo-border-md) var(--ilo-color-light-border-brand) solid;
     }
 
     &:active {
-      background-color: var(--ilo-color-background-active);
-      border: var(--ilo-border-md) var(--ilo-color-borders-active) solid;
+      background-color: var(--ilo-color-light-action-selected);
+      border: var(--ilo-border-md) var(--ilo-color-light-border-brand) solid;
       box-shadow: none;
       color: var(--ilo-button-labels-active-color);
     }
   }
 
   &__tertiary {
-    background-color: var(--ilo-color-background-highlight);
-    border: var(--ilo-border-md) var(--ilo-color-background-highlight) solid;
+    background-color: var(--ilo-color-light-container-bg-disabled);
+    border: var(--ilo-border-md) var(--ilo-color-light-container-bg-disabled)
+      solid;
     color: var(--ilo-button-labels-actionable-color);
   }
 
   &__alert {
-    background-color: var(--ilo-color-red-dark);
-    border: var(--ilo-border-md) var(--ilo-color-red-dark) solid;
+    background-color: var(--ilo-color-light-feedback-error-dark);
+    border: var(--ilo-border-md) var(--ilo-color-light-feedback-error-dark)
+      solid;
     color: var(--ilo-button-labels-alert-color);
 
     &:hover {
-      background-color: var(--ilo-color-background-hover);
-      border: var(--ilo-border-md) var(--ilo-color-borders-hover) solid;
+      background-color: var(--ilo-color-light-container-bg-subtle);
+      border: var(--ilo-border-md) var(--ilo-color-light-border-brand) solid;
       color: var(--ilo-button-labels-hover-color);
     }
 
     &:active {
-      background-color: var(--ilo-color-background-active);
-      border: var(--ilo-border-md) var(--ilo-color-borders-active) solid;
+      background-color: var(--ilo-color-light-action-selected);
+      border: var(--ilo-border-md) var(--ilo-color-light-border-brand) solid;
       box-shadow: none;
       color: var(--ilo-button-labels-active-color);
     }
@@ -138,23 +140,23 @@
   }
 
   &:focus-visible {
-    background-color: var(--ilo-color-background-focus);
-    border: var(--ilo-border-md) var(--ilo-color-borders-focus) solid;
+    background-color: var(--ilo-color-light-container-bg-default);
+    border: var(--ilo-border-md) var(--ilo-color-light-border-focus) solid;
     box-shadow:
-      4px 4px 0 1px var(--ilo-color-borders-focus) inset,
-      -4px -4px 0 1px var(--ilo-color-borders-focus) inset;
+      4px 4px 0 1px var(--ilo-color-light-border-focus) inset,
+      -4px -4px 0 1px var(--ilo-color-light-border-focus) inset;
     @include globaltransition("color, background-color, border-color");
 
     &.#{$prefix}--small {
       box-shadow:
-        3px 3px 0 1px var(--ilo-color-borders-focus) inset,
-        -3px -3px 0 1px var(--ilo-color-borders-focus) inset;
+        3px 3px 0 1px var(--ilo-color-light-border-focus) inset,
+        -3px -3px 0 1px var(--ilo-color-light-border-focus) inset;
     }
   }
 
   &:hover {
-    background-color: var(--ilo-color-background-hover);
-    border: var(--ilo-border-md) var(--ilo-color-borders-hover) solid;
+    background-color: var(--ilo-color-light-container-bg-subtle);
+    border: var(--ilo-border-md) var(--ilo-color-light-border-brand) solid;
     box-shadow: none;
     color: var(--ilo-button-labels-hover-color);
     cursor: pointer;
@@ -162,8 +164,8 @@
   }
 
   &:active {
-    background-color: var(--ilo-color-background-active);
-    border: var(--ilo-border-md) var(--ilo-color-borders-active) solid;
+    background-color: var(--ilo-color-light-action-selected);
+    border: var(--ilo-border-md) var(--ilo-color-light-border-brand) solid;
     box-shadow: none;
     color: var(--ilo-button-labels-active-color);
     @include globaltransition("color, background-color, border-color");