@ilo-org/styles 1.15.1 → 1.16.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.16.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",

package/scss/_mixins.scss

@@ -168,7 +168,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 +221,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");

package/scss/components/_callout.scss

@@ -22,34 +22,34 @@
   }
 
   &__error {
-    background: var(--ilo-color-red-ramp);
+    background: var(--ilo-color-light-feedback-error-light);
 
     #{$callout}--sidebar {
-      background: var(--ilo-color-red);
+      background: var(--ilo-color-light-feedback-error-default);
     }
   }
 
   &__info {
-    background: var(--ilo-color-blue-light);
+    background: var(--ilo-color-light-feedback-info-light);
 
     #{$callout}--sidebar {
-      background: var(--ilo-color-blue);
+      background: var(--ilo-color-light-action-selected);
     }
   }
 
   &__success {
-    background: var(--ilo-color-green-ramp);
+    background: var(--ilo-color-light-feedback-success-light);
 
     #{$callout}--sidebar {
-      background: var(--ilo-color-green);
+      background: var(--ilo-color-light-feedback-success-default);
     }
   }
 
   &__warning {
-    background: var(--ilo-color-yellow-ramp);
+    background: var(--ilo-color-light-feedback-warning-light);
 
     #{$callout}--sidebar {
-      background: var(--ilo-color-yellow);
+      background: var(--ilo-color-light-feedback-warning-default);
     }
   }
 
@@ -66,7 +66,7 @@
   }
 
   &--content {
-    color: var(--ilo-color-gray-charcoal);
+    color: var(--ilo-color-light-text-default);
     padding: spacing(6);
     width: 100%;
     font-size: px-to-rem(14px);
@@ -91,14 +91,14 @@
     @include typography("highlight-medium-bold");
     background: none;
     border: none;
-    color: var(--ilo-color-blue-dark);
+    color: var(--ilo-color-light-text-brand);
     cursor: pointer;
     font-weight: 500;
     padding-inline-end: spacing(8);
     position: relative;
 
     &--icon {
-      @include icon("chevron_down", var(--ilo-color-blue-dark));
+      @include icon("chevron_down", var(--ilo-color-light-action-default));
       background-position: right;
       background-repeat: no-repeat;
       display: inline-block;
@@ -125,19 +125,28 @@
 
     &__alert {
       &__error {
-        @include icon("notification_error", var(--ilo-color-white));
+        @include icon(
+          "notification_error",
+          var(--ilo-color-light-icon-inverse)
+        );
       }
 
       &__info {
-        @include icon("notification_info", var(--ilo-color-white));
+        @include icon("notification_info", var(--ilo-color-light-icon-inverse));
       }
 
       &__success {
-        @include icon("notification_success", var(--ilo-color-white));
+        @include icon(
+          "notification_success",
+          var(--ilo-color-light-icon-inverse)
+        );
       }
 
       &__warning {
-        @include icon("notification_warning", var(--ilo-color-white));
+        @include icon(
+          "notification_warning",
+          var(--ilo-color-light-icon-inverse)
+        );
       }
     }
   }