dso-toolkit 79.0.1 → 80.0.0

package/src/components/alert/alert.scss

@@ -1,4 +1,5 @@
 @use "../alert";
+@use "../button";
 @use "../../di";
 @use "../../variables/units";
 
@@ -8,6 +9,24 @@
   @include alert.children();
 
   .dso-close {
+    @include button.element();
+
+    $inset-unit: units.$u1 * 0.5 - alert.$border-size;
+
+    position: absolute;
+    inset-block-start: $inset-unit;
+    inset-inline-end: $inset-unit;
+
+    block-size: units.$u4;
+    inline-size: units.$u4;
+
+    padding: 0;
+
+    background-color: transparent;
+
+    border: 0;
+    text-align: center;
+
     &::before {
       @include di.base("times-zwart");
 
@@ -26,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);
     }
@@ -86,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/button/button.mixins.scss

@@ -59,6 +59,14 @@
     @include small();
   }
 
+  &.dso-extra-small {
+    @include small();
+    // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724
+    & {
+      padding-block: 9px;
+    }
+  }
+
   @if ($icon-only) {
     > span {
       @include utilities.sr-only();

package/src/components/button/button.variables.scss

@@ -24,6 +24,7 @@ $tertiary-padding-inline: $block-padding;
 $tertiary-color: colors.$grasgroen;
 $tertiary-hover-color: colors.$bosgroen;
 $tertiary-active-color: colors.$bosgroen-140;
+$tertiary-disabled-color: colors.$grasgroen-40;
 
 $map-size: units.$u5;
 

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,16 +8,7 @@
   padding-inline: units.$u2 units.$u4;
   position: relative;
 
-  @include set-colors.apply(colors.$grijs-5);
-
-  > button {
-    background-color: transparent;
-    border-style: none;
-    padding: 0;
-    position: absolute;
-    inset-inline-end: units.$u1;
-    inset-block-start: units.$u1;
-  }
+  @include set-colors.apply(colors.$grijs-5, "info");
 }
 
 @mixin richContent() {
@@ -67,5 +58,5 @@
     @include richContent();
   }
 
-  @include set-colors.apply(colors.$grijs-5);
+  @include set-colors.apply(colors.$grijs-5, "info");
 }

package/src/components/info/info.scss

@@ -1,3 +1,5 @@
+@use "../../variables/units";
+
 @use "../info";
 
 @use "../../di";
@@ -8,6 +10,13 @@
   @include info.children();
 
   > button {
+    background-color: transparent;
+    border-style: none;
+    padding: 0;
+    position: absolute;
+    inset-inline-end: units.$u1;
+    inset-block-start: units.$u1;
+
     &::before {
       @include di.base("times-zwart");
 

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

@@ -19,55 +19,32 @@
     text-decoration: line-through;
   }
 
-  button {
-    background: none;
-    border: 0;
-    border-radius: 0 #{units.$u1 * 0.5} #{units.$u1 * 0.5} 0;
-    color: inherit;
-    float: inline-end;
-    font-size: typography.$root-font-size-base;
-    margin-block-end: units.$u1 * -0.5;
-    margin-inline-start: units.$u1;
-    margin-inline-end: units.$u1 * -0.5;
-    margin-block-start: 0;
-    padding: 0;
-
-    &:hover {
-      cursor: pointer;
-    }
-
-    > dso-icon,
-    > svg.di {
-      display: block;
-    }
-  }
-
   & {
-    @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
     & {
@@ -77,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/label/label.scss

@@ -1,6 +1,8 @@
 @use "../label";
 @use "label.variables" as label-variables;
 @use "../../global/mixins/symbol.mixins" as symbol-mixins;
+@use "../../variables/units";
+@use "../../variables/typography";
 
 // HTML/CSS
 .dso-label {
@@ -17,6 +19,31 @@
       @include symbol-mixins.symbol();
     }
   }
+
+  button {
+    line-height: 0;
+    background: none;
+    border: 0;
+    border-radius: 0 #{units.$u1 * 0.5} #{units.$u1 * 0.5} 0;
+    color: inherit;
+    float: inline-end;
+
+    font-size: typography.$root-font-size-base;
+    margin-block-end: units.$u1 * -0.5;
+    margin-inline-start: units.$u1;
+    margin-inline-end: units.$u1 * -0.5;
+    margin-block-start: 0;
+    padding: 0;
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    > dso-icon,
+    > svg.di {
+      display: block;
+    }
+  }
 }
 
 // Web Component

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/components/table/table.scss

@@ -41,7 +41,8 @@ table.table,
   max-inline-size: 100%;
   inline-size: 100%;
 
-  .dso-tertiary {
+  .dso-tertiary,
+  dso-icon-button {
     position: relative;
     inset-block-start: -2px;
     white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- These actions are always accomponied by icons, we always want the icon next to the text
@@ -331,3 +332,7 @@ dso-table.dso-is-responsive {
     }
   }
 }
+
+dso-icon-button + dso-icon-button {
+  margin-inline-start: units.$u2;
+}

package/src/dso.scss

@@ -56,7 +56,6 @@
 @use "components/justify-form-groups/justify-form-groups";
 @use "components/label/label";
 @use "components/label-group/label-group";
-@use "components/legend-item/legend-item";
 @use "components/link/link";
 @use "components/link-list/link-list";
 @use "components/list/list";

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

@@ -31,7 +31,6 @@
   @return re-gamma(0.2126 * $rlin + 0.7152 * $glin + 0.0722 * $blin) * 100;
 }
 
-// Compares contrast of a given color to the light/dark arguments and returns whichever is most "contrasty"
 @function apply($color, $dark: colors.$contrast-dark, $light: colors.$contrast-light) {
   @if $color {
     $color-brightness: brightness($color);
@@ -47,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%;
+}