dso-toolkit 84.1.0 → 86.0.0

package/src/components/link/link.mixins.scss

@@ -99,16 +99,29 @@
     background-position: bottom 0 right 0;
   }
 
-  $icon: if(
-    map.has-key($link-map, "icon-color"),
-    map.get($link-map, "icon") + "-" + map.get($link-map, "icon-color"),
-    map.get($link-map, "icon")
-  );
-  $icon-hover: if(
-    map.has-key($link-map, "icon-hover-color"),
-    map.get($link-map, "icon") + "-" + map.get($link-map, "icon-hover-color"),
-    map.get($link-map, "icon")
-  );
+  $icon: map.get($link-map, "icon");
+
+  @if map.has-key($link-map, "icon-color") {
+    $icon: $icon + "-" + map.get($link-map, "icon-color");
+  }
+
+  $icon-hover: map.get($link-map, "icon");
+
+  @if map.has-key($link-map, "icon-hover-color") {
+    $icon-hover: $icon-hover + "-" + map.get($link-map, "icon-hover-color");
+  }
+
+  $icon: map.get($link-map, "icon");
+
+  @if map.has-key($link-map, "icon-color") {
+    $icon: $icon + "-" + map.get($link-map, "icon-color");
+  }
+
+  $icon-hover: map.get($link-map, "icon");
+
+  @if map.has-key($link-map, "icon-hover-color") {
+    $icon-hover: $icon-hover + "-" + map.get($link-map, "icon-hover-color");
+  }
 
   @include di.variant($icon);
 

package/src/components/link-list/link-list.mixins.scss

@@ -36,10 +36,7 @@
   a {
     @include link.reverse();
 
-    // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
-    & {
-      color: colors.$zwart;
-    }
+    color: colors.$zwart;
 
     &:active {
       color: colors.$zwart;

package/src/components/link-list/link-list.scss

@@ -10,12 +10,9 @@
     &::before {
       @include di.base("chevron-right");
 
-      // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
-      & {
-        content: "";
-        display: inline-block;
-        margin-inline-start: units.$u1 * -1;
-      }
+      content: "";
+      display: inline-block;
+      margin-inline-start: units.$u1 * -1;
     }
 
     &:active,

package/src/components/modal/modal.mixins.scss

@@ -83,15 +83,12 @@
 
     @include rich-content.children();
 
-    // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
-    & {
-      block-size: calc(100% - #{modal-variables.$body-padding * 2 + units.$u4} - 1.5rem);
-      max-block-size: calc(#{modal-variables.$max-block-size} - #{$dso-body-unavailable-height + units.$u4} - 1.5em);
-      min-block-size: 1.5rem;
-      overflow-x: auto;
+    block-size: calc(100% - #{modal-variables.$body-padding * 2 + units.$u4} - 1.5rem);
+    max-block-size: calc(#{modal-variables.$max-block-size} - #{$dso-body-unavailable-height + units.$u4} - 1.5em);
+    min-block-size: 1.5rem;
+    overflow-x: auto;
 
-      padding: modal-variables.$body-padding;
-    }
+    padding: modal-variables.$body-padding;
   }
 
   > .dso-dialog > dso-scrollable {
@@ -106,10 +103,7 @@
     .dso-body {
       @include rich-content.children();
 
-      // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
-      & {
-        padding: modal-variables.$body-padding;
-      }
+      padding: modal-variables.$body-padding;
     }
   }
 
@@ -122,15 +116,12 @@
   .dso-footer {
     @include modal-wide-buttons();
 
-    // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
-    & {
-      min-block-size: modal-variables.$footer-button-block-size + modal-variables.$footer-padding;
+    min-block-size: modal-variables.$footer-button-block-size + modal-variables.$footer-padding;
 
-      padding-block: calc(modal-variables.$footer-padding / 2);
-      padding-inline: modal-variables.$footer-padding;
+    padding-block: calc(modal-variables.$footer-padding / 2);
+    padding-inline: modal-variables.$footer-padding;
 
-      text-align: end;
-    }
+    text-align: end;
   }
 
   @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {

package/src/components/modal/modal.scss

@@ -1,6 +1,7 @@
 @use "../../variables/media-query-breakpoints";
 @use "../../variables/zindex";
 @use "../button";
+@use "../icon";
 @use "../rich-content";
 @use "../modal";
 
@@ -21,14 +22,10 @@ body:has(dso-modal.hydrated) {
 
   .dso-close {
     &::before {
-      @include di.base("times");
+      @include di.base("times", icon.$size, middle);
 
-      // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
-      & {
-        content: "";
-        display: inline-block;
-        vertical-align: middle;
-      }
+      content: "";
+      display: inline-block;
     }
   }
 

package/src/components/navbar/navbar.mixins.scss

@@ -80,14 +80,11 @@
         > button {
           @include link.reverse();
 
-          // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
-          & {
-            font-size: 1.25em;
-            line-height: 1;
-            margin-block-start: units.$u1;
-            padding-block: units.$u1 #{units.$u1 - 1px};
-            padding-inline: units.$u2;
-          }
+          font-size: 1.25em;
+          line-height: 1;
+          margin-block-start: units.$u1;
+          padding-block: units.$u1 #{units.$u1 - 1px};
+          padding-inline: units.$u2;
         }
       }
     }
@@ -100,13 +97,10 @@
         > button {
           @include link.reverse();
 
-          // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
-          & {
-            font-size: typography.$root-font-size-base;
-            margin-block-start: (units.$u1 * 0.5);
-            padding-block: (units.$u1 * 0.5) #{units.$u1 * 0.5 - 1px};
-            padding-inline: units.$u1;
-          }
+          font-size: typography.$root-font-size-base;
+          margin-block-start: (units.$u1 * 0.5);
+          padding-block: (units.$u1 * 0.5) #{units.$u1 * 0.5 - 1px};
+          padding-inline: units.$u1;
         }
       }
     }

package/src/components/search-bar/search-bar.scss

@@ -33,12 +33,9 @@
       &::before {
         @include di.base("search");
 
-        // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
-        & {
-          content: "";
-          display: inline-block;
-          font-size: 1rem;
-        }
+        content: "";
+        display: inline-block;
+        font-size: 1rem;
       }
 
       + input,
@@ -50,25 +47,21 @@
     input {
       @include utilities.placeholder(colors.$input-color-placeholder);
 
-      // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
-      & {
-        background-color: colors.$wit;
-        background-image: none;
-        border: 1px solid form-control.$focus-border-color;
-        border-radius: 4px;
-        border-width: 1px;
-        box-shadow: none;
-        display: block;
-        font-size: typography.$root-font-size-base;
-        block-size: css-search-bar-variables.$block-size;
-        line-height: css-search-bar-variables.$block-size;
-        padding-block: 6px;
-        padding-inline: units.$u1 css-search-bar-variables.$block-size;
-        transition:
-          border-color ease-in-out 0.15s,
-          box-shadow ease-in-out 0.15s;
-        inline-size: 100%;
-      }
+      background-color: colors.$wit;
+      background-image: none;
+      border: 1px solid form-control.$focus-border-color;
+      border-radius: 4px;
+      box-shadow: none;
+      display: block;
+      font-size: typography.$root-font-size-base;
+      block-size: css-search-bar-variables.$block-size;
+      line-height: css-search-bar-variables.$block-size;
+      padding-block: 6px;
+      padding-inline: units.$u1 css-search-bar-variables.$block-size;
+      transition:
+        border-color ease-in-out 0.15s,
+        box-shadow ease-in-out 0.15s;
+      inline-size: 100%;
 
       &:focus {
         border-color: form-control.$focus-border-color;
@@ -98,12 +91,9 @@
       &::before {
         @include di.base("times");
 
-        // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
-        & {
-          content: "";
-          display: inline-block;
-          font-size: typography.$root-font-size-base;
-        }
+        content: "";
+        display: inline-block;
+        font-size: typography.$root-font-size-base;
       }
     }
 

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

@@ -12,18 +12,15 @@
   .dso-status {
     @include set-colors.apply(colors.$grijs-5, "shopping-cart");
 
-    // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
-    & {
-      border: 0;
-      border-radius: css-shopping-cart-variables.$radius;
-      box-shadow: none;
-      display: block;
-      font-weight: 600;
-      padding-block: units.$u2;
-      padding-inline: units.$u6;
-      position: relative;
-      text-align: start;
-    }
+    border: 0;
+    border-radius: css-shopping-cart-variables.$radius;
+    box-shadow: none;
+    display: block;
+    font-weight: 600;
+    padding-block: units.$u2;
+    padding-inline: units.$u6;
+    position: relative;
+    text-align: start;
 
     dso-icon {
       @include utilities.transition(transform);
@@ -58,13 +55,9 @@
   .dso-contents {
     @include set-colors.apply(colors.$grijs-5, "shopping-cart");
 
-    // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
-    & {
-      border: 0;
-      border-radius: css-shopping-cart-variables.$radius;
-      color: colors.$zwart;
-      position: relative;
-    }
+    border: 0;
+    border-radius: css-shopping-cart-variables.$radius;
+    position: relative;
 
     > .dso-delete {
       position: absolute;
@@ -87,12 +80,9 @@
 
     @include set-colors.apply(colors.$grijs-5, "shopping-cart");
 
-    // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
-    & {
-      border-radius: css-shopping-cart-variables.$radius;
-      margin-block-end: 0;
-      margin-block-start: 0;
-    }
+    border-radius: css-shopping-cart-variables.$radius;
+    margin-block-end: 0;
+    margin-block-start: 0;
 
     li {
       border-block-start: 1px solid css-shopping-cart-variables.$border-color;

package/src/components/viewer-grid/viewer-grid.scss

@@ -25,9 +25,6 @@ dso-viewer-grid {
   .dso-toggle-main-button {
     @include button.tertiary($modifiers: false);
 
-    // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
-    & {
-      padding-block: units.$u2;
-    }
+    padding-block: units.$u2;
   }
 }

package/src/di.scss

@@ -3,17 +3,13 @@
 @use "config";
 
 @mixin base($icon, $size: icon.$size, $vertical-align: icon.$vertical-align) {
-  & {
-    background: url("#{config.$icons-path}di.svg##{$icon}") no-repeat center;
-    background-size: cover;
-    block-size: $size;
-    vertical-align: $vertical-align;
-    inline-size: $size;
-  }
+  background: url("#{config.$icons-path}di.svg##{$icon}") no-repeat center;
+  background-size: cover;
+  block-size: $size;
+  vertical-align: $vertical-align;
+  inline-size: $size;
 }
 
 @mixin variant($icon) {
-  & {
-    background-image: var(--_dso-di-background-image, url("#{config.$icons-path}di.svg##{$icon}"));
-  }
+  background-image: var(--_dso-di-background-image, url("#{config.$icons-path}di.svg##{$icon}"));
 }

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

@@ -32,19 +32,22 @@
 }
 
 @function apply($color, $dark: colors.$contrast-dark, $light: colors.$contrast-light) {
-  @if $color {
-    $color-brightness: brightness($color);
-    $light-text-brightness: brightness($light);
-    $dark-text-brightness: brightness($dark);
-
-    @return if(
-      math.abs($color-brightness - $light-text-brightness) > math.abs($color-brightness - $dark-text-brightness),
-      $light,
-      $dark
-    );
+  @if not $color {
+    @return null;
   }
 
-  @return null;
+  $color-brightness: brightness($color);
+  $light-text-brightness: brightness($light);
+  $dark-text-brightness: brightness($dark);
+
+  $light-diff: math.abs($color-brightness - $light-text-brightness);
+  $dark-diff: math.abs($color-brightness - $dark-text-brightness);
+
+  @if $light-diff > $dark-diff {
+    @return $light;
+  }
+
+  @return $dark;
 }
 
 // Returns `true` if the given color is pure white.

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

@@ -26,54 +26,54 @@
 //   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-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};
-      }
+  // run contrast-color function to determine WCAG-compliant text color
+  $contrast-color: contrast-color-functions.apply($background-color);
+  $is-white-bg: contrast-color-functions.is-white($background-color);
+  $is-dark-contrast: $contrast-color == colors.$contrast-dark;
+
+  @if $self != "alert" {
+    @if $is-white-bg {
+      --_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};
     }
+  }
 
-    @if $self != "link" {
-      @if not contrast-color-functions.is-white($background-color) {
-        --link-color: currentColor;
-        --link-hover-color: currentColor;
-        --link-visited-color: currentColor;
+  @if $self != "link" and not $is-white-bg {
+    --link-color: currentColor;
+    --link-hover-color: currentColor;
+    --link-visited-color: currentColor;
 
-        // 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
+    $icon-color: "wit";
 
-        @include _linkIconColors($icon-color);
-      }
+    @if $contrast-color == colors.$contrast-dark {
+      $icon-color: "zwart";
     }
 
-    @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};
-        }
-      }
-    }
+    @include _linkIconColors($icon-color);
+  }
 
-    // set css properties
-    background-color: $background-color;
-    color: $contrast-color;
+  @if $self != "icon-button" and not $is-white-bg {
+    @if $is-dark-contrast {
+      --_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;
+  color: $contrast-color;
 }
 
 @mixin _linkIconColors($icon-color) {