Repository: dso-toolkit/dso-toolkit
Pull request #3086: #3055 [Fixed] Button: Externe links in highlight box hebben herhalend icoon
Author: login: cvanderleij-ilionx
Created: 2025-03-28T14:44:38Z | Merged: 2025-04-12T11:04:15Z

- [x] PR voldoet aan scope van issue, afwijkingen worden toegelicht.
  - Bijvoorbeeld in PR of het issue.
- [x] PR bestaat uit logische commits.
- [x] PR is gekoppeld met het issue.
- [x] Succesvolle build:
  - Danger tevreden.
  - Indien de build faalt vanwege visuele regressie, onderbouwen waarom.
  - Als er een flaky test wordt uitgezet, onderbouwen in PR met verwijzing naar nieuw issue.
- [ ] De wijziging heeft een e2e test
- [ ] Etaleren/aanpassen van een nieuw component op de website
- [x] Eigen PR doorgenomen.
- [x] Getest op dso-toolkit.nl

In dit issue ook de volgende zaken gefixed: 

- Uitlijning van een icon only button
- Styling klopt niet van de primary button wanneer er gekozen werd voor een anchor element en mode extern aanstond. Zie [hier](https://storybook.dso-toolkit.nl/69.2.1/?path=/story/html-css-button--primary&args=element:anchor;variant:tertiary;mode:extern;truncate:!false;compact:!false)
- Extra etalering van buttons met mode in de highlight-box





Diff:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3820a9332c..25198d27f6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,9 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) a
 
 ## Next
 
+### Fixed
+* Button: Externe links in Highlight-box hebben herhalend icoon ([#3055](https://github.com/dso-toolkit/dso-toolkit/issues/3055))
+
 ### Docs
 * Voorbeeldpagina: Highlight-box Banner aspect-ratio demo pagina missen iconen in buttons ([#3050](https://github.com/dso-toolkit/dso-toolkit/issues/3050))
 
diff --git a/angular-workspace/components/highlight-box/highlight-box.content.ts b/angular-workspace/components/highlight-box/highlight-box.content.ts
index 6b5a2b2954..9d5436fe1f 100644
--- a/angular-workspace/components/highlight-box/highlight-box.content.ts
+++ b/angular-workspace/components/highlight-box/highlight-box.content.ts
@@ -36,6 +36,15 @@ export function content(): StoryFnAngularReturnType {
             <span>Tertiaire button</span>
             <dso-icon icon="chevron-down"></dso-icon>
           </a>
+          <a href="#" class="dso-primary extern">
+            <span>Externe primary button</span>
+          </a>
+          <a href="#" class="dso-secondary download">
+            <span>Download secondary button</span>
+          </a>
+          <a href="#" class="dso-tertiary extern">
+            <span>Externe tertiary button</span>
+          </a>
         </div>
       </div>
     `,
diff --git a/packages/dso-toolkit/src/components/button/button.mixins.scss b/packages/dso-toolkit/src/components/button/button.mixins.scss
index f1f0287384..0e31acd60d 100644
--- a/packages/dso-toolkit/src/components/button/button.mixins.scss
+++ b/packages/dso-toolkit/src/components/button/button.mixins.scss
@@ -64,17 +64,21 @@
       @include utilities.sr-only();
     }
   } @else {
-    dso-icon,
-    svg.di {
+    dso-icon:has(+ span:not(.sr-only)),
+    svg.di:has(+ span:not(.sr-only)) {
       margin-inline-start: units.$u1 * -1;
-      margin-inline-end: units.$u1;
     }
 
-    span + dso-icon,
-    span + svg.di {
+    span:not(.sr-only) + dso-icon,
+    span:not(.sr-only) + svg.di {
       margin-inline-start: units.$u1;
       margin-inline-end: units.$u1 * -1;
     }
+
+    dso-icon + span:not(.sr-only),
+    svg.di + span:not(.sr-only) {
+      margin-inline-start: units.$u1;
+    }
   }
 }
 
diff --git a/packages/dso-toolkit/src/components/button/button.scss b/packages/dso-toolkit/src/components/button/button.scss
index def2045d0f..f0f9065892 100644
--- a/packages/dso-toolkit/src/components/button/button.scss
+++ b/packages/dso-toolkit/src/components/button/button.scss
@@ -114,11 +114,11 @@ label {
     }
 
     &.download {
-      @include tertiary-icon("download", "download-grasgroen-40", "download-scampi");
+      @include tertiary-icon("download", "download-grasgroen-40", "download-bosgroen");
     }
 
     &.extern {
-      @include tertiary-icon("external-link", "external-link-grasgroen-40", "external-link-scampi");
+      @include tertiary-icon("external-link", "external-link-grasgroen-40", "external-link-bosgroen");
     }
   }
 }
diff --git a/packages/dso-toolkit/src/components/highlight-box/highlight-box.mixins.scss b/packages/dso-toolkit/src/components/highlight-box/highlight-box.mixins.scss
index 7ada6bcada..c8bf89eb4b 100644
--- a/packages/dso-toolkit/src/components/highlight-box/highlight-box.mixins.scss
+++ b/packages/dso-toolkit/src/components/highlight-box/highlight-box.mixins.scss
@@ -111,6 +111,16 @@
       }
     }
   }
+
+  &:not(#{$border-selector}):not(#{$white-selector}) .dso-button-row .dso-tertiary {
+    &.extern::after {
+      @include di.variant("external-link-zwart");
+    }
+
+    &.download::after {
+      @include di.variant("download-zwart");
+    }
+  }
 }
 
 @mixin exoticChildren() {
diff --git a/packages/dso-toolkit/src/global/mixins/set-colors.mixin.scss b/packages/dso-toolkit/src/global/mixins/set-colors.mixin.scss
index b23a8e8ed2..6ffda13841 100644
--- a/packages/dso-toolkit/src/global/mixins/set-colors.mixin.scss
+++ b/packages/dso-toolkit/src/global/mixins/set-colors.mixin.scss
@@ -3,6 +3,7 @@
 
 @use "../../variables/colors";
 @use "../../components/anchor/anchor.variables" as anchor-variables;
+@use "../../components/button/button.variables" as button-variables;
 @use "../../di";
 
 @use "../functions/contrast-color.functions" as contrast-color;
@@ -67,7 +68,7 @@
     $selector: map.get($value, "selector");
     $icon: map.get($value, "icon") + "-" + $icon-color;
 
-    a:is(#{$selector}, #{$selector}:hover, #{$selector}:focus-visible) {
+    a:not(#{button-variables.$buttons}):is(#{$selector}, #{$selector}:hover, #{$selector}:focus-visible) {
       // set icon color
       @include di.variant($icon);
     }
diff --git a/packages/dso-toolkit/src/icons/external-link.scss b/packages/dso-toolkit/src/icons/external-link.scss
index 2851a535a1..8303d05771 100644
--- a/packages/dso-toolkit/src/icons/external-link.scss
+++ b/packages/dso-toolkit/src/icons/external-link.scss
@@ -16,6 +16,10 @@ external-link:grasgroen-40 {
   color: colors.$grasgroen-40;
 }
 
+external-link:bosgroen {
+  color: colors.$bosgroen;
+}
+
 external-link:grijs90 {
   color: colors.$grijs-90;
 }
diff --git a/packages/react/src/components/highlight-box/highlight-box.stories.tsx b/packages/react/src/components/highlight-box/highlight-box.stories.tsx
index 884b37bd38..999f4c997e 100644
--- a/packages/react/src/components/highlight-box/highlight-box.stories.tsx
+++ b/packages/react/src/components/highlight-box/highlight-box.stories.tsx
@@ -59,6 +59,15 @@ const { Default, Yellow, WhiteWithDropshadow, WithBorder, WithIcon, WithBannerIm
               <span>Tertiaire button</span>
               {iconTemplate({ icon: "chevron-down" })}
             </a>
+            <a href="#" className="dso-primary extern">
+              <span>Primary extern anchor</span>
+            </a>
+            <a href="#" className="dso-secondary download">
+              <span>Secondary download anchor</span>
+            </a>
+            <a href="#" className="dso-tertiary extern">
+              <span>Tertiary extern anchor</span>
+            </a>
           </div>
         </>
       ),
diff --git a/storybook/src/components/button/button.css-template.ts b/storybook/src/components/button/button.css-template.ts
index db1d62e378..0ed844ffb1 100644
--- a/storybook/src/components/button/button.css-template.ts
+++ b/storybook/src/components/button/button.css-template.ts
@@ -8,7 +8,7 @@ export const cssButton: ComponentImplementation<Button | ButtonAnchor> = {
   component: "button",
   implementation: "html-css",
   template: ({ iconTemplate, tooltipTemplate }) => {
-    function getClassName(variant: "primary" | "secondary" | "tertiary" | null, modifier?: string, mode?: string) {
+    function getClassNames(variant: "primary" | "secondary" | "tertiary" | null, modifier?: string, mode?: string) {
       const classNames = [];
 
       if (variant) {
@@ -27,12 +27,12 @@ export const cssButton: ComponentImplementation<Button | ButtonAnchor> = {
     }
 
     function anchorElement({ variant, url, label, modifier, mode, id, icon, iconMode, slot, autofocus }: ButtonAnchor) {
-      const className = getClassName(variant, modifier, mode);
+      const classNames = getClassNames(variant, modifier, mode);
 
       return html`
         <a
           href=${url}
-          class=${ifDefined(className)}
+          class=${ifDefined(classNames.filter((c) => !!c).join(" "))}
           id=${ifDefined(id)}
           slot=${ifDefined(slot)}
           ?autofocus=${autofocus}
@@ -71,7 +71,7 @@ export const cssButton: ComponentImplementation<Button | ButtonAnchor> = {
       mode,
     }: Button) {
       type ??= "button";
-      const classNames = getClassName(variant, modifier, mode);
+      const classNames = getClassNames(variant, modifier, mode);
 
       if (compact) {
         classNames.push("dso-small");
diff --git a/storybook/src/components/highlight-box/highlight-box.core-stories.ts b/storybook/src/components/highlight-box/highlight-box.core-stories.ts
index a6e23fc0ce..9b6821cbf7 100644
--- a/storybook/src/components/highlight-box/highlight-box.core-stories.ts
+++ b/storybook/src/components/highlight-box/highlight-box.core-stories.ts
@@ -56,6 +56,24 @@ const { Default, Yellow, Grey, GreyWithBorder, WhiteWithDropshadow, WithBorder,
                 iconMode: "after",
                 url: "#",
               })}
+              ${buttonTemplate({
+                variant: "primary",
+                label: "Primary extern anchor",
+                mode: "extern",
+                url: "#",
+              })}
+              ${buttonTemplate({
+                variant: "secondary",
+                label: "Secondary download anchor",
+                mode: "download",
+                url: "#",
+              })}
+              ${buttonTemplate({
+                variant: "tertiary",
+                label: "Tertiary extern anchor",
+                mode: "extern",
+                url: "#",
+              })}
             </div>
           `,
         }),
diff --git a/storybook/src/components/highlight-box/highlight-box.css-stories.ts b/storybook/src/components/highlight-box/highlight-box.css-stories.ts
index ed82310d18..9532e0d588 100644
--- a/storybook/src/components/highlight-box/highlight-box.css-stories.ts
+++ b/storybook/src/components/highlight-box/highlight-box.css-stories.ts
@@ -56,6 +56,24 @@ const { Default, Yellow, Grey, GreyWithBorder, WhiteWithDropshadow, WithBorder,
                 iconMode: "after",
                 url: "#",
               })}
+              ${buttonTemplate({
+                variant: "primary",
+                label: "Primary extern anchor",
+                mode: "extern",
+                url: "#",
+              })}
+              ${buttonTemplate({
+                variant: "secondary",
+                label: "Secondary download anchor",
+                mode: "download",
+                url: "#",
+              })}
+              ${buttonTemplate({
+                variant: "tertiary",
+                label: "Tertiary extern anchor",
+                mode: "extern",
+                url: "#",
+              })}
             </div>
           `,
         }),


Reviews:
user: login: iterox
body: Heb je de screenshot diffs goed bestudeerd?

1. Op een aantal core-highlight-box diffs is de kleur van het extern icon van de tertiary extern anchor groen, maar is de link zelf zwart oid.
2. En er is regressie op de info-button active en inactive: die zijn "verdwenen", "uit beeld" of "doorzichtig" of zo 🤷 
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-04T09:37:03Z
user: login: iterox
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-07T07:51:15Z
user: login: tfrijsewijk
body: Moeilijke stof he, die set-colors mixin is geen makkelijke...
state: CHANGES_REQUESTED
author_association: MEMBER
submitted_at: 2025-04-11T10:59:23Z
user: login: cvanderleij-ilionx
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-11T12:23:20Z
user: login: cvanderleij-ilionx
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-11T12:23:24Z
user: login: cvanderleij-ilionx
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-11T12:23:27Z
user: login: cvanderleij-ilionx
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-11T12:23:42Z
user: login: cvanderleij-ilionx
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-11T12:23:49Z
user: login: cvanderleij-ilionx
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-11T12:23:55Z
user: login: cvanderleij-ilionx
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-11T12:24:07Z
user: login: cvanderleij-ilionx
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-11T12:24:12Z
user: login: cvanderleij-ilionx
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-11T12:24:22Z
user: login: tfrijsewijk
body: Whoo! 🎉 
state: DISMISSED
author_association: MEMBER
submitted_at: 2025-04-11T12:30:47Z
user: login: tfrijsewijk
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-04-11T12:31:56Z

Review comments:
diff_hunk: @@ -171,6 +175,7 @@
   text-align: start;
   user-select: none;
   vertical-align: middle;
+  background-image: none !important;
path: packages/dso-toolkit/src/components/button/button.mixins.scss
user: login: iterox
body: Dit veroorzaakt de regressie op de Info Button.
created_at: 2025-04-07T07:51:03Z
author_association: CONTRIBUTOR
diff_hunk: @@ -5,6 +5,9 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) a
 
 ## Next
 
+### Fixed
+* Button: Externe links in highlight box hebben herhalend icoon ([#3055](https://github.com/dso-toolkit/dso-toolkit/issues/3055))
path: CHANGELOG.md
user: login: tfrijsewijk
body: "Highlight Box". Ook in lopende tekst bij verwijzingen naar componenten de juiste casing gebruiken.
created_at: 2025-04-11T09:17:19Z
author_association: MEMBER
diff_hunk: @@ -56,6 +56,24 @@ const { Default, Yellow, Grey, GreyWithBorder, WhiteWithDropshadow, WithBorder,
                 iconMode: "after",
                 url: "#",
               })}
+              ${buttonTemplate({
+                variant: "primary",
+                label: "primary extern anchor",
path: storybook/src/components/highlight-box/highlight-box.core-stories.ts
user: login: tfrijsewijk
body: Labels van de nieuwe knoppen graag met een hoofdletter laten beginnen
created_at: 2025-04-11T09:18:38Z
author_association: MEMBER
diff_hunk: @@ -56,6 +56,24 @@ const { Default, Yellow, Grey, GreyWithBorder, WhiteWithDropshadow, WithBorder,
                 iconMode: "after",
                 url: "#",
               })}
+              ${buttonTemplate({
+                variant: "primary",
+                label: "primary extern anchor",
+                mode: "extern",
+                url: "#",
+              })}
+              ${buttonTemplate({
+                variant: "secondary",
+                label: "secondary extern anchor",
+                mode: "download",
path: storybook/src/components/highlight-box/highlight-box.core-stories.ts
user: login: tfrijsewijk
body: Het label zegt "extern" maar mode zegt "download"
created_at: 2025-04-11T09:21:25Z
author_association: MEMBER
diff_hunk: @@ -8,7 +8,7 @@ export const cssButton: ComponentImplementation<Button | ButtonAnchor> = {
   component: "button",
   implementation: "html-css",
   template: ({ iconTemplate, tooltipTemplate }) => {
-    function getClassName(variant: "primary" | "secondary" | "tertiary" | null, modifier?: string, mode?: string) {
+    function getClassNames(variant: "primary" | "secondary" | "tertiary" | null, modifier?: string, mode?: string) {
path: storybook/src/components/button/button.css-template.ts
user: login: tfrijsewijk
body: :+1:
created_at: 2025-04-11T09:21:59Z
author_association: MEMBER
diff_hunk: @@ -59,6 +59,15 @@ const { Default, Yellow, WhiteWithDropshadow, WithBorder, WithIcon, WithBannerIm
               <span>Tertiaire button</span>
               {iconTemplate({ icon: "chevron-down" })}
             </a>
+            <a href="#" className="dso-primary extern">
+              <span>Externe primary button</span>
+            </a>
+            <a href="#" className="dso-secondary download">
+              <span>Download secondary button</span>
+            </a>
+            <a href="#" className="dso-tertiary extern">
+              <span>Externe tertiary button</span>
+            </a>
path: packages/react/src/components/highlight-box/highlight-box.stories.tsx
user: login: tfrijsewijk
body: De labels tussen de verschillende implementaties (Core/HTML+CSS/React) graag uniform houden.
created_at: 2025-04-11T09:22:32Z
author_association: MEMBER
diff_hunk: @@ -67,7 +67,11 @@
     $selector: map.get($value, "selector");
     $icon: map.get($value, "icon") + "-" + $icon-color;
 
-    a:is(#{$selector}, #{$selector}:hover, #{$selector}:focus-visible) {
+    a:not(#{anchor-variables.$excludedAnchorIconColorsClasses}):is(
path: packages/dso-toolkit/src/global/mixins/set-colors.mixin.scss
user: login: tfrijsewijk
body: Ten grondslag aan de bevinding is dat de selector `a` niet genoeg is om het Anchor component (binnenkort heet dit component "Link") mee te selecteren.

De selector die je maakt is inderdaad de richting.

In `packages/dso-toolkit/src/components/anchor/anchor.scss:7` maken we hetzelfde lijstje. Anchor en Button hebben op dit moment weet van elkaar, ik ben niet helemaal kapot daarvan maar ik denk dat we nu niet anders kunnen.

Het lijstje aan classes zegt iets over het Button component. In `packages/dso-toolkit/src/components/button/button.variables.scss:28` staat al zo'n lijstje. Verderop staan andere opstellingen van hetzelfde lijstje, maar ik weet niet hoe blij we daar nou mee moeten zijn. Maar dat terzijde.

Eigenlijk is `a:not(.dso-primary, .dso-secondary, .dso-tertiary)` de enige juiste selector om het Anchor component te selecteren.
created_at: 2025-04-11T10:27:36Z
author_association: MEMBER
diff_hunk: @@ -111,6 +111,16 @@
       }
     }
   }
+
+  &:not(.dso-border, [border]):not(.dso-white, [white]) .dso-button-row .dso-tertiary {
path: packages/dso-toolkit/src/components/highlight-box/highlight-box.mixins.scss
user: login: tfrijsewijk
body: Deze file weet niets van de implementatie. `.dso-border`, `[border]`, etc zijn allemaal selectors die horen bij de HTML/CSS of Web Component implementatie.

Daarom dat deze mixin ook barst van de parameters waar de in de implementatie invulling aan wordt gegeven.
created_at: 2025-04-11T10:28:48Z
author_association: MEMBER
diff_hunk: @@ -114,11 +114,11 @@ label {
     }
 
     &.download {
-      @include tertiary-icon("download", "download-grasgroen-40", "download-scampi");
+      @include tertiary-icon("download", "download-grasgroen-40", "download-bosgroen");
     }
 
     &.extern {
-      @include tertiary-icon("external-link", "external-link-grasgroen-40", "external-link-scampi");
+      @include tertiary-icon("external-link", "external-link-grasgroen-40", "external-link-bosgroen");
path: packages/dso-toolkit/src/components/button/button.scss
user: login: tfrijsewijk
body: Goed gevonden! Dit zorgt ervoor dat de hover state op download en extern de juiste kleur krijgt:

❌
![image](https://github.com/user-attachments/assets/62d6c82f-2e79-49c7-a3ef-fce2dc3d8732)

created_at: 2025-04-11T10:40:16Z
author_association: MEMBER
diff_hunk: @@ -35,3 +35,5 @@ $anchorIcons: (
     "icon-placement": "before",
   ),
 );
+
+$excludedAnchorIconColorsClasses: ".dso-primary, .dso-secondary, .dso-tertiary";
path: packages/dso-toolkit/src/components/anchor/anchor.variables.scss
user: login: tfrijsewijk
body: Zie opmerking over het lijstje met classes bij Button
created_at: 2025-04-11T10:41:17Z
author_association: MEMBER
diff_hunk: @@ -114,11 +114,11 @@ label {
     }
 
     &.download {
-      @include tertiary-icon("download", "download-grasgroen-40", "download-scampi");
+      @include tertiary-icon("download", "download-grasgroen-40", "download-bosgroen");
     }
 
     &.extern {
-      @include tertiary-icon("external-link", "external-link-grasgroen-40", "external-link-scampi");
+      @include tertiary-icon("external-link", "external-link-grasgroen-40", "external-link-bosgroen");
path: packages/dso-toolkit/src/components/button/button.scss
user: login: tfrijsewijk
body: Heb je gekeken of de oude classes iconen worden gebruikt? Mogelijk kunnen deze uit de icon variant stylesheet worden gehaald waarmee ze niet meer in de spritesheet terechtkomen
created_at: 2025-04-11T10:44:51Z
author_association: MEMBER
diff_hunk: @@ -64,17 +64,21 @@
       @include utilities.sr-only();
     }
   } @else {
-    dso-icon,
-    svg.di {
+    dso-icon:has(+ span),
+    svg.di:has(+ span) {
       margin-inline-start: units.$u1 * -1;
-      margin-inline-end: units.$u1;
     }
 
-    span + dso-icon,
-    span + svg.di {
+    span:not(.sr-only) + dso-icon,
+    span:not(.sr-only) + svg.di {
       margin-inline-start: units.$u1;
       margin-inline-end: units.$u1 * -1;
     }
+
+    dso-icon + span:not(.sr-only),
+    svg.di + span:not(.sr-only) {
+      margin-inline-start: units.$u1;
+    }
path: packages/dso-toolkit/src/components/button/button.mixins.scss
user: login: tfrijsewijk
body: Ik begrijp deze change niet. Waar is dit voor?

Waarom hebben de selectors op regel 67 en 68 geen uitzondering op `.sr-only` nodig zoals de andere selectors dat wel allemaal hebben?


created_at: 2025-04-11T10:58:57Z
author_association: MEMBER
diff_hunk: @@ -5,6 +5,9 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) a
 
 ## Next
 
+### Fixed
+* Button: Externe links in highlight box hebben herhalend icoon ([#3055](https://github.com/dso-toolkit/dso-toolkit/issues/3055))
path: CHANGELOG.md
user: login: cvanderleij-ilionx
body: Done
created_at: 2025-04-11T12:23:19Z
author_association: CONTRIBUTOR
diff_hunk: @@ -56,6 +56,24 @@ const { Default, Yellow, Grey, GreyWithBorder, WhiteWithDropshadow, WithBorder,
                 iconMode: "after",
                 url: "#",
               })}
+              ${buttonTemplate({
+                variant: "primary",
+                label: "primary extern anchor",
path: storybook/src/components/highlight-box/highlight-box.core-stories.ts
user: login: cvanderleij-ilionx
body: Done
created_at: 2025-04-11T12:23:23Z
author_association: CONTRIBUTOR
diff_hunk: @@ -56,6 +56,24 @@ const { Default, Yellow, Grey, GreyWithBorder, WhiteWithDropshadow, WithBorder,
                 iconMode: "after",
                 url: "#",
               })}
+              ${buttonTemplate({
+                variant: "primary",
+                label: "primary extern anchor",
+                mode: "extern",
+                url: "#",
+              })}
+              ${buttonTemplate({
+                variant: "secondary",
+                label: "secondary extern anchor",
+                mode: "download",
path: storybook/src/components/highlight-box/highlight-box.core-stories.ts
user: login: cvanderleij-ilionx
body: Done
created_at: 2025-04-11T12:23:27Z
author_association: CONTRIBUTOR
diff_hunk: @@ -59,6 +59,15 @@ const { Default, Yellow, WhiteWithDropshadow, WithBorder, WithIcon, WithBannerIm
               <span>Tertiaire button</span>
               {iconTemplate({ icon: "chevron-down" })}
             </a>
+            <a href="#" className="dso-primary extern">
+              <span>Externe primary button</span>
+            </a>
+            <a href="#" className="dso-secondary download">
+              <span>Download secondary button</span>
+            </a>
+            <a href="#" className="dso-tertiary extern">
+              <span>Externe tertiary button</span>
+            </a>
path: packages/react/src/components/highlight-box/highlight-box.stories.tsx
user: login: cvanderleij-ilionx
body: Done
created_at: 2025-04-11T12:23:42Z
author_association: CONTRIBUTOR
diff_hunk: @@ -67,7 +67,11 @@
     $selector: map.get($value, "selector");
     $icon: map.get($value, "icon") + "-" + $icon-color;
 
-    a:is(#{$selector}, #{$selector}:hover, #{$selector}:focus-visible) {
+    a:not(#{anchor-variables.$excludedAnchorIconColorsClasses}):is(
path: packages/dso-toolkit/src/global/mixins/set-colors.mixin.scss
user: login: cvanderleij-ilionx
body: Done
created_at: 2025-04-11T12:23:49Z
author_association: CONTRIBUTOR
diff_hunk: @@ -111,6 +111,16 @@
       }
     }
   }
+
+  &:not(.dso-border, [border]):not(.dso-white, [white]) .dso-button-row .dso-tertiary {
path: packages/dso-toolkit/src/components/highlight-box/highlight-box.mixins.scss
user: login: cvanderleij-ilionx
body: Done
created_at: 2025-04-11T12:23:55Z
author_association: CONTRIBUTOR
diff_hunk: @@ -114,11 +114,11 @@ label {
     }
 
     &.download {
-      @include tertiary-icon("download", "download-grasgroen-40", "download-scampi");
+      @include tertiary-icon("download", "download-grasgroen-40", "download-bosgroen");
     }
 
     &.extern {
-      @include tertiary-icon("external-link", "external-link-grasgroen-40", "external-link-scampi");
+      @include tertiary-icon("external-link", "external-link-grasgroen-40", "external-link-bosgroen");
path: packages/dso-toolkit/src/components/button/button.scss
user: login: cvanderleij-ilionx
body: Yes, beide verwijderd uit de iconen stylesheets
created_at: 2025-04-11T12:24:07Z
author_association: CONTRIBUTOR
diff_hunk: @@ -35,3 +35,5 @@ $anchorIcons: (
     "icon-placement": "before",
   ),
 );
+
+$excludedAnchorIconColorsClasses: ".dso-primary, .dso-secondary, .dso-tertiary";
path: packages/dso-toolkit/src/components/anchor/anchor.variables.scss
user: login: cvanderleij-ilionx
body: Done
created_at: 2025-04-11T12:24:12Z
author_association: CONTRIBUTOR
diff_hunk: @@ -64,17 +64,21 @@
       @include utilities.sr-only();
     }
   } @else {
-    dso-icon,
-    svg.di {
+    dso-icon:has(+ span),
+    svg.di:has(+ span) {
       margin-inline-start: units.$u1 * -1;
-      margin-inline-end: units.$u1;
     }
 
-    span + dso-icon,
-    span + svg.di {
+    span:not(.sr-only) + dso-icon,
+    span:not(.sr-only) + svg.di {
       margin-inline-start: units.$u1;
       margin-inline-end: units.$u1 * -1;
     }
+
+    dso-icon + span:not(.sr-only),
+    svg.di + span:not(.sr-only) {
+      margin-inline-start: units.$u1;
+    }
path: packages/dso-toolkit/src/components/button/button.mixins.scss
user: login: cvanderleij-ilionx
body: Toegevoegd!
created_at: 2025-04-11T12:24:22Z
author_association: CONTRIBUTOR
diff_hunk: @@ -171,6 +175,7 @@
   text-align: start;
   user-select: none;
   vertical-align: middle;
+  background-image: none !important;
path: packages/dso-toolkit/src/components/button/button.mixins.scss
user: login: tfrijsewijk
body: Change is teruggedraaid, ik ben zo vrij om deze te resolven @iterox 
created_at: 2025-04-11T12:31:56Z
author_association: MEMBER

PR comments:
user: login: cvanderleij-ilionx
created_at: 2025-04-04T11:49:57Z
body: > Heb je de screenshot diffs goed bestudeerd?
> 
> 1. Op een aantal core-highlight-box diffs is de kleur van het extern icon van de tertiary extern anchor groen, maar is de link zelf zwart oid.
> 2. En er is regressie op de info-button active en inactive: die zijn "verdwenen", "uit beeld" of "doorzichtig" of zo 🤷

1. Gefixed, ik heb de icoon extern en download nu ook zwart gemaakt waar de link zwart is.
2. Die info-button active en inactive zijn vreemd. Lijkt wel flaky te zijn maar beide werken goed in storybook. Even zien wat een nieuwe build doet
author_association: CONTRIBUTOR
user: login: iterox
created_at: 2025-04-04T13:10:29Z
body: > 2\. Die info-button active en inactive zijn vreemd. Lijkt wel flaky te zijn maar beide werken goed in storybook. Even zien wat een nieuwe build doet

Ik zie echt geen info-button: https://storybook.dso-toolkit.nl/_3055-button--externe-links-in-highlight-box-hebben-herhalend-icoon/?path=/story/html-css-info-button--active
author_association: CONTRIBUTOR
user: login: iterox
created_at: 2025-04-11T13:33:22Z
body: Denk dat deze hover state nog niet goed is.

![Screenshot 2025-04-11 at 15 27 29](https://github.com/user-attachments/assets/aa926eed-58c6-470b-b7c0-bb3228b3b19e)

Bij anchor zelf verdwijnt het icon bij hover:
![Screenshot 2025-04-11 at 15 29 52](https://github.com/user-attachments/assets/c0a811f7-19cb-458d-a50a-5712bf132bcf)
![Screenshot 2025-04-11 at 15 29 39](https://github.com/user-attachments/assets/96a2d8c0-644e-41fc-90ea-811fb349f98b)

Wat een struggle is dit. Pfoe. 😓 

author_association: CONTRIBUTOR
user: login: cvanderleij-ilionx
created_at: 2025-04-11T14:58:07Z
body: > Denk dat deze hover state nog niet goed is.
> 
> Wat een struggle is dit. Pfoe. 😓

Ah daar worden ze toch gebruikt. Heb ze terug gezet in de icon css files
author_association: CONTRIBUTOR