dso-toolkit 79.1.0 → 80.0.0

package/src/components/alert/alert.scss

@@ -11,7 +11,7 @@
   .dso-close {
     @include button.element();
 
-    $inset-unit: calc(units.$u1 / 2);
+    $inset-unit: units.$u1 * 0.5 - alert.$border-size;
 
     position: absolute;
     inset-block-start: $inset-unit;
@@ -45,57 +45,25 @@
     content: "";
   }
 
-  &.dso-compact {
-    @include alert.compact();
-
-    // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
-    & {
-      min-block-size: alert.$inline-padding;
-    }
-  }
-
   &.alert-success {
-    @include alert.status-success();
-
-    &.dso-compact::before {
-      background-color: alert.$success-compact-accent-bg;
-    }
-
     &:not(.dso-compact)::before {
       @include di.base("status-success", alert.$icon-size);
     }
   }
 
   &.alert-error {
-    @include alert.status-error();
-
-    &.dso-compact::before {
-      background-color: alert.$danger-compact-accent-bg;
-    }
-
     &:not(.dso-compact)::before {
       @include di.base("status-error", alert.$icon-size);
     }
   }
 
   &.alert-warning {
-    @include alert.status-warning();
-
-    &.dso-compact::before {
-      background-color: alert.$warning-compact-accent-bg;
-    }
-
     &:not(.dso-compact)::before {
       @include di.base("status-warning", alert.$icon-size);
     }
   }
 
   &.alert-info {
-    @include alert.status-info();
-
-    &.dso-compact::before {
-      background-color: alert.$info-compact-accent-bg;
-    }
     &:not(.dso-compact)::before {
       @include di.base("status-info", alert.$icon-size);
     }
@@ -105,50 +73,4 @@
 // Web Component
 dso-alert {
   @include alert.children();
-
-  &[status="success"] {
-    @include alert.status-success();
-  }
-
-  &[status="error"] {
-    @include alert.status-error();
-  }
-
-  &[status="warning"] {
-    @include alert.status-warning();
-  }
-
-  &[status="info"] {
-    @include alert.status-info();
-  }
-
-  &[compact]:not([compact="false"]) {
-    @include alert.compact();
-
-    position: relative;
-  }
-
-  &[status="success"][compact]:not([compact="false"]) {
-    &::before {
-      background-color: alert.$success-compact-accent-bg;
-    }
-  }
-
-  &[status="error"][compact]:not([compact="false"]) {
-    &::before {
-      background-color: alert.$danger-compact-accent-bg;
-    }
-  }
-
-  &[status="warning"][compact]:not([compact="false"]) {
-    &::before {
-      background-color: alert.$warning-compact-accent-bg;
-    }
-  }
-
-  &[status="info"][compact]:not([compact="false"]) {
-    &::before {
-      background-color: alert.$info-compact-accent-bg;
-    }
-  }
 }

package/src/components/alert/alert.variables.scss

@@ -1,6 +1,7 @@
 @use "../../variables/units";
 @use "../../variables/states";
 
+$border-size: 1px;
 $icon-size: units.$u3;
 $inline-padding: units.$u2;
 $block-padding: units.$u2;

package/src/components/badge/badge.mixins.scss

@@ -5,7 +5,8 @@
 @use "badge.variables" as badge-variables;
 
 @mixin root() {
-  border: 1px solid;
+  border-width: 1px;
+  border-style: solid;
   border-radius: 1em;
   display: inline-block;
   font-size: 0.875em;
@@ -16,34 +17,42 @@
   text-align: center;
 
   & {
-    @include set-colors.apply(badge-variables.$default-bg-color, $icons: false, $links: false);
+    @include _variant(badge-variables.$default-bg-color);
   }
 
   &.badge-info {
-    @include set-colors.apply(badge-variables.$info-bg-color, $icons: false, $links: false);
+    @include _variant(badge-variables.$info-bg-color);
   }
 
   &.badge-primary {
-    @include set-colors.apply(badge-variables.$primary-bg-color, $icons: false, $links: false);
+    @include _variant(badge-variables.$primary-bg-color);
   }
 
   &.badge-success {
-    @include set-colors.apply(badge-variables.$success-bg-color, $icons: false, $links: false);
+    @include _variant(badge-variables.$success-bg-color);
   }
 
   &.badge-warning {
-    @include set-colors.apply(badge-variables.$warning-bg-color, $icons: false, $links: false);
+    @include _variant(badge-variables.$warning-bg-color);
   }
 
   &.badge-error {
-    @include set-colors.apply(badge-variables.$error-bg-color, $icons: false, $links: false);
+    @include _variant(badge-variables.$error-bg-color);
   }
 
   &.badge-outline {
-    @include set-colors.apply(colors.$wit, colors.$grijs-90, $icons: false, $links: false);
+    @include _variant(colors.$wit, colors.$grijs-90);
   }
 
   &.badge-attention {
-    @include set-colors.apply(badge-variables.$attention-bg-color, $icons: false, $links: false);
+    @include _variant(badge-variables.$attention-bg-color);
+  }
+}
+
+@mixin _variant($background-color, $border-color: $background-color) {
+  @include set-colors.apply($background-color, "badge");
+
+  & {
+    border-color: $border-color;
   }
 }

package/src/components/banner/banner.mixins.scss

@@ -79,19 +79,35 @@
 }
 
 @mixin success() {
-  @include set-colors.apply(banner-variables.$success-bg, banner-variables.$success-border);
+  @include set-colors.apply(banner-variables.$success-bg, "banner");
+
+  & {
+    border-color: banner-variables.$success-border;
+  }
 }
 
 @mixin error() {
-  @include set-colors.apply(banner-variables.$error-bg, banner-variables.$error-border);
+  @include set-colors.apply(banner-variables.$error-bg, "banner");
+
+  & {
+    border-color: banner-variables.$error-border;
+  }
 }
 
 @mixin info() {
-  @include set-colors.apply(banner-variables.$info-bg, banner-variables.$info-border);
+  @include set-colors.apply(banner-variables.$info-bg, "banner");
+
+  & {
+    border-color: banner-variables.$info-border;
+  }
 }
 
 @mixin warning() {
-  @include set-colors.apply(banner-variables.$warning-bg, banner-variables.$warning-border);
+  @include set-colors.apply(banner-variables.$warning-bg, "banner");
+
+  & {
+    border-color: banner-variables.$warning-border;
+  }
 }
 
 @mixin root() {

package/src/components/delete/delete.mixins.scss

@@ -4,7 +4,7 @@
 /// The root mixin to apply the correct color and strikethrough for a delete visualisation.
 /// @param {Boolean} $strikethrough - Whether to apply a strikethrough or not. Default is true. If false, only background color will be applied. Consumers are responsible for setting strikethrough styles. For example with the `delete.strikethrough()` mixin.
 @mixin root($strikethrough: true) {
-  @include set-colors.apply(colors.$rood-20);
+  @include set-colors.apply(colors.$rood-20, "delete");
 
   @if ($strikethrough) {
     & {

package/src/components/document-header/document-header.scss

@@ -12,7 +12,7 @@
 @use "document-header.variables" as document-header-variables;
 
 .dso-document-header {
-  @include set-colors.apply(colors.$grijs-5);
+  @include set-colors.apply(colors.$grijs-5, "document-header");
 
   // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
   & {
@@ -50,7 +50,7 @@
 
   &.dso-variant-ontwerp {
     .dso-document-header-status {
-      @include set-colors.apply(colors.$geel);
+      @include set-colors.apply(colors.$geel, "document-header");
 
       // To do: remove in #2542
       dso-icon[icon="pencil"] {
@@ -61,7 +61,7 @@
 
   &.dso-variant-besluitversie {
     .dso-document-header-status {
-      @include set-colors.apply(colors.$bosgroen);
+      @include set-colors.apply(colors.$bosgroen, "document-header");
 
       // To do: remove in #2542
       dso-icon[icon="hammer"] {

package/src/components/footer/footer.scss

@@ -12,7 +12,7 @@
 footer {
   @include css-grid.full-width-row();
 
-  @include set-colors.apply(colors.$grijs-5);
+  @include set-colors.apply(colors.$grijs-5, "footer");
 
   // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
   & {

package/src/components/highlight-box/highlight-box.mixins.scss

@@ -35,19 +35,19 @@
   $step-counter-selector
 ) {
   &:not(#{$white-selector}, #{$yellow-selector}, #{$border-selector}) {
-    @include set-colors.apply(colors.$grijs-5);
+    @include set-colors.apply(colors.$grijs-5, "highlight-box");
   }
 
   &#{$grey-selector} {
-    @include set-colors.apply(colors.$grijs-5);
+    @include set-colors.apply(colors.$grijs-5, "highlight-box");
   }
 
   &#{$white-selector} {
-    @include set-colors.apply(colors.$wit);
+    @include set-colors.apply(colors.$wit, "highlight-box");
   }
 
   &#{$yellow-selector} {
-    @include set-colors.apply(colors.$geel-20);
+    @include set-colors.apply(colors.$geel-20, "highlight-box");
   }
 
   &#{$drop-shadow-selector} {
@@ -60,7 +60,11 @@
   }
 
   &#{$border-selector}:not(#{$grey-selector}, #{$yellow-selector}) {
-    @include set-colors.apply(colors.$wit, $border-color: colors.$grijs-20);
+    @include set-colors.apply(colors.$wit, "highlight-box");
+
+    & {
+      border-color: colors.$grijs-20;
+    }
   }
 
   &#{$has-counter-selector} {

package/src/components/info/info.mixins.scss

@@ -8,7 +8,7 @@
   padding-inline: units.$u2 units.$u4;
   position: relative;
 
-  @include set-colors.apply(colors.$grijs-5);
+  @include set-colors.apply(colors.$grijs-5, "info");
 }
 
 @mixin richContent() {
@@ -58,5 +58,5 @@
     @include richContent();
   }
 
-  @include set-colors.apply(colors.$grijs-5);
+  @include set-colors.apply(colors.$grijs-5, "info");
 }

package/src/components/insert/insert.mixins.scss

@@ -8,7 +8,7 @@
 }
 
 @mixin root() {
-  @include set-colors.apply(colors.$lime-20);
+  @include set-colors.apply(colors.$lime-20, "insert");
 
   & {
     box-shadow: insert-variables.$box-shadow;

package/src/components/label/label.mixins.scss

@@ -20,31 +20,31 @@
   }
 
   & {
-    @include set-colors.apply(label-variables.$default-bg-color, $icons: false, $links: false);
+    @include set-colors.apply(label-variables.$default-bg-color, "label");
   }
 
   &.dso-label-info {
-    @include set-colors.apply(label-variables.$info-bg-color, $icons: false, $links: false);
+    @include set-colors.apply(label-variables.$info-bg-color, "label");
   }
 
   &.dso-label-primary {
-    @include set-colors.apply(label-variables.$primary-bg-color, $icons: false, $links: false);
+    @include set-colors.apply(label-variables.$primary-bg-color, "label");
   }
 
   &.dso-label-success {
-    @include set-colors.apply(label-variables.$success-bg-color, $icons: false, $links: false);
+    @include set-colors.apply(label-variables.$success-bg-color, "label");
   }
 
   &.dso-label-warning {
-    @include set-colors.apply(label-variables.$warning-bg-color, $icons: false, $links: false);
+    @include set-colors.apply(label-variables.$warning-bg-color, "label");
   }
 
   &.dso-label-error {
-    @include set-colors.apply(label-variables.$error-bg-color, $icons: false, $links: false);
+    @include set-colors.apply(label-variables.$error-bg-color, "label");
   }
 
   &.dso-label-bright {
-    @include set-colors.apply(label-variables.$bright-bg-color, $icons: false, $links: false);
+    @include set-colors.apply(label-variables.$bright-bg-color, "label");
 
     // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
     & {
@@ -54,11 +54,11 @@
   }
 
   &.dso-label-attention {
-    @include set-colors.apply(label-variables.$attention-bg-color, $icons: false, $links: false);
+    @include set-colors.apply(label-variables.$attention-bg-color, "label");
   }
 
   &.dso-label-filter {
-    @include set-colors.apply(label-variables.$filter-bg-color, $icons: false, $links: false);
+    @include set-colors.apply(label-variables.$filter-bg-color, "label");
 
     // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
     & {

package/src/components/shopping-cart/shopping-cart.scss

@@ -10,7 +10,7 @@
 
 .dso-shopping-cart {
   .dso-status {
-    @include set-colors.apply(colors.$grijs-5);
+    @include set-colors.apply(colors.$grijs-5, "shopping-cart");
 
     // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
     & {
@@ -58,7 +58,7 @@
   }
 
   .dso-contents {
-    @include set-colors.apply(colors.$grijs-5);
+    @include set-colors.apply(colors.$grijs-5, "shopping-cart");
 
     // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
     & {
@@ -87,7 +87,7 @@
   ol {
     @include list.unstyled();
 
-    @include set-colors.apply(colors.$grijs-5, $icons: false);
+    @include set-colors.apply(colors.$grijs-5, "shopping-cart");
 
     // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
     & {

package/src/global/functions/contrast-color.functions.scss

@@ -46,3 +46,12 @@
 
   @return null;
 }
+
+// Returns `true` if the given color is pure white.
+// Checks the lightness channel in HSL color space.
+
+// @param {Color} $color - The color to evaluate.
+// @return {Boolean} Whether the color is pure white.
+@function is-white($color) {
+  @return color.channel($color, "lightness", $space: hsl) == 100%;
+}

package/src/global/mixins/set-colors.mixin.scss

@@ -2,76 +2,81 @@
 @use "sass:color";
 
 @use "../../variables/colors";
+@use "../../variables/states";
 @use "../../components/link/link.variables" as link-variables;
 @use "../../components/button/button.variables" as button-variables;
 @use "../../di";
 
-@use "../functions/contrast-color.functions" as contrast-color;
+@use "../functions/contrast-color.functions" as contrast-color-functions;
 
-// SET COLORS
-// ==========
-// USAGE: @include setColors($bgcolor, $bordercolor: transparent, $links: true);
-// $background-color: background color of the element (required)
-// $border-color: border color of the element (optional)
-// $icons: boolean to set link icon colors according to background color (optional). set to false if you don't want to change the link icon colors.
-// $links: boolean to set link colors according to background color (optional). set to false if you don't want to change the link colors.
-// $reverse: in case the combination chosen by this mixin & contrast-color function still does not meet WCAG requirements, set $reverse to true. If this combination does not comply either, find another background-color.
+// Automatically applies accessible (WCAG-compliant) text and UI colors based on a given background color.
 
-@mixin apply($background-color, $border-color: null, $icons: true, $links: true, $reverse: false) {
-  $icon-color: null;
+// This mixin determines an appropriate contrast color for text (`light` or `dark`)
+// and dynamically adjusts related colors for links, icons, alerts, and buttons
+// to ensure consistent readability and sufficient contrast across different backgrounds.
+// Automatically applies accessible (WCAG-compliant) text and UI colors
+// based on a provided background color. Adjusts related UI elements via custom css props to ensure consistent
+// readability.
+
+// @param {Color} $background-color
+//   The background color used to compute contrast colors.
+
+// @param {String} $self
+//   The context of the component using this mixin (e.g., "alert", "link", "button").
+//   Determines which sections of styles should be skipped to avoid overriding component-specific rules.
+
+@mixin apply($background-color, $self) {
   & {
     // run contrast-color function to determine WCAG-compliant text color
-    $contrast-color: contrast-color.apply($background-color);
+    $contrast-color: contrast-color-functions.apply($background-color);
+
+    @if $self != "alert" {
+      @if contrast-color-functions.is-white($background-color) {
+        --_dso-alert-success-border-color: initial;
+        --_dso-alert-error-border-color: initial;
+        --_dso-alert-info-border-color: initial;
+        --_dso-alert-warning-border-color: initial;
+      } @else {
+        --_dso-alert-success-border-color: #{states.$success-compact-accent-color};
+        --_dso-alert-error-border-color: #{states.$danger-compact-accent-color};
+        --_dso-alert-info-border-color: #{states.$info-compact-accent-color};
+        --_dso-alert-warning-border-color: #{states.$warning-compact-accent-color};
+      }
+    }
 
-    // set link and icon color according to text color
-    @if color.channel($background-color, "lightness", $space: hsl) < 100% {
-      @if $links == true {
+    @if $self != "link" {
+      @if not contrast-color-functions.is-white($background-color) {
         --link-color: currentColor;
         --link-hover-color: currentColor;
         --link-visited-color: currentColor;
-      }
 
-      @if $contrast-color == colors.$contrast-dark {
-        --_dso-icon-button-tertiary-color: #{colors.$grijs-90};
-        --_dso-icon-button-tertiary-hover-color: #{colors.$grijs-70};
-        --_dso-icon-button-tertiary-active-color: #{colors.$bosgroen-140};
-        --_dso-icon-button-tertiary-disabled-color: #{colors.$grijs-40};
-      } @else if $contrast-color == colors.$contrast-light {
-        --_dso-icon-button-tertiary-color: #{colors.$wit};
-      }
+        // set according to contrast color determined by contrast-color function
+        $icon-color: if($contrast-color == colors.$contrast-dark, "zwart", "wit");
 
-      // set according to contrast color determined by contrast-color function
-      @if $contrast-color == colors.$contrast-dark {
-        $icon-color: "zwart";
-      } @else if $contrast-color == colors.$contrast-light {
-        $icon-color: "wit";
+        @include _linkIconColors($icon-color);
       }
+    }
 
-      // if contrast-color function gets it wrong, and therefore $reverse is set to true
-      @if $contrast-color == colors.$contrast-dark and $reverse == true {
-        $icon-color: "wit";
-        $contrast-color: colors.$contrast-light;
-      } @else if $contrast-color == colors.$contrast-light and $reverse == true {
-        $icon-color: "zwart";
-        $contrast-color: colors.$contrast-dark;
+    @if $self != "icon-button" {
+      @if not contrast-color-functions.is-white($background-color) {
+        @if $contrast-color == colors.$contrast-dark {
+          --_dso-icon-button-tertiary-color: #{colors.$grijs-90};
+          --_dso-icon-button-tertiary-hover-color: #{colors.$grijs-70};
+          --_dso-icon-button-tertiary-active-color: #{colors.$bosgroen-140};
+          --_dso-icon-button-tertiary-disabled-color: #{colors.$grijs-40};
+        } @else if $contrast-color == colors.$contrast-light {
+          --_dso-icon-button-tertiary-color: #{colors.$wit};
+        }
       }
     }
 
     // set css properties
     background-color: $background-color;
-    border-color: if($border-color, $border-color, $background-color);
     color: $contrast-color;
-
-    // implement icon color according to background color
-    @if $icon-color and $icons == true {
-      @include _anchorIconColors($icon-color);
-    }
   }
 }
 
-// ANCHOR ICON COLORS
-// ==================
-@mixin _anchorIconColors($icon-color) {
+@mixin _linkIconColors($icon-color) {
   // loop through map to set icon mode
   @each $mode, $value in link-variables.$linkIcons {
     $selector: map.get($value, "selector");