dso-toolkit 88.1.1 → 90.0.0

package/src/components/link/link.variables.scss

@@ -31,7 +31,7 @@ $linkIcons: (
   ),
   "mail": (
     "selector": "[href^='mailto:']",
-    "icon": "email",
+    "icon": "mail-outline",
     "icon-color": "grasgroen",
     "icon-hover-color": "scampi",
     "icon-placement": "before",

package/src/components/modal/modal.scss

@@ -22,7 +22,7 @@ body:has(dso-modal.hydrated) {
 
   .dso-close {
     &::before {
-      @include di.base("times", icon.$size, middle);
+      @include di.base("cross", icon.$size, middle);
 
       content: "";
       display: inline-block;

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

@@ -89,7 +89,7 @@
       inline-size: css-search-bar-variables.$block-size;
 
       &::before {
-        @include di.base("times");
+        @include di.base("cross");
 
         content: "";
         display: inline-block;

package/src/dso.scss

@@ -51,7 +51,6 @@
 @use "components/input/input";
 @use "components/insert/insert";
 @use "components/justify-form-groups/justify-form-groups";
-@use "components/label/label";
 @use "components/label-group/label-group";
 @use "components/link/link";
 @use "components/link-list/link-list";

package/src/components/label/_index.scss

@@ -1,2 +0,0 @@
-@forward "label.mixins";
-@forward "label.variables";

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

@@ -1,73 +0,0 @@
-@use "../../variables/units";
-@use "../../variables/colors";
-@use "../../variables/typography";
-@use "label.variables" as label-variables;
-@use "../../global/mixins/set-colors.mixin" as set-colors;
-@use "../delete";
-@use "../insert";
-
-@mixin root() {
-  border-radius: 4px;
-  display: inline-block;
-  line-height: 1.5;
-  max-inline-size: 100%;
-  padding-block: #{units.$u1 * 0.5};
-  padding-inline: units.$u1;
-
-  &:focus-within,
-  &.dso-hover {
-    text-decoration: line-through;
-  }
-
-  @include set-colors.apply(label-variables.$default-bg-color, "label");
-
-  &.dso-label-info {
-    @include set-colors.apply(label-variables.$info-bg-color, "label");
-  }
-
-  &.dso-label-primary {
-    @include set-colors.apply(label-variables.$primary-bg-color, "label");
-  }
-
-  &.dso-label-success {
-    @include set-colors.apply(label-variables.$success-bg-color, "label");
-  }
-
-  &.dso-label-warning {
-    @include set-colors.apply(label-variables.$warning-bg-color, "label");
-  }
-
-  &.dso-label-error {
-    @include set-colors.apply(label-variables.$error-bg-color, "label");
-  }
-
-  &.dso-label-bright {
-    @include set-colors.apply(label-variables.$bright-bg-color, "label");
-
-    outline: 1px solid label-variables.$bright-border-color;
-    outline-offset: -1px;
-  }
-
-  &.dso-label-attention {
-    @include set-colors.apply(label-variables.$attention-bg-color, "label");
-  }
-
-  &.dso-label-filter {
-    @include set-colors.apply(label-variables.$filter-bg-color, "label");
-
-    border-inline-start: 5px solid label-variables.$filter-border-color;
-  }
-
-  &.dso-label-toegevoegd {
-    @include insert.root();
-  }
-
-  &.dso-label-verwijderd {
-    @include delete.root();
-  }
-
-  &.dso-compact {
-    padding-block: 0;
-    padding-inline: units.$u1;
-  }
-}

package/src/components/label/label.scss

@@ -1,61 +0,0 @@
-@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 {
-  @include label.root();
-
-  .dso-label-symbol {
-    @include symbol-mixins.symbolContainer(
-      label-variables.$symbol-block-size,
-      label-variables.$symbol-block-size * label-variables.$symbol-aspect-ratio,
-      2px
-    );
-
-    > span {
-      @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 {
-      display: block;
-    }
-  }
-}
-
-// Web Component
-dso-label {
-  span[slot="symbol"] {
-    @include symbol-mixins.symbolContainer(
-      label-variables.$symbol-block-size,
-      label-variables.$symbol-block-size * label-variables.$symbol-aspect-ratio,
-      2px
-    );
-
-    > span {
-      @include symbol-mixins.symbol();
-    }
-  }
-}

package/src/components/label/label.variables.scss

@@ -1,34 +0,0 @@
-@use "sass:math";
-
-@use "../../variables/colors";
-
-$default-bg-color: colors.$grijs-5;
-$default-color: colors.$grijs-90;
-
-$info-bg-color: colors.$info-color;
-$info-color: colors.$zwart;
-
-$primary-bg-color: colors.$bosgroen;
-$primary-color: colors.$wit;
-
-$success-bg-color: colors.$success-color;
-$success-color: colors.$wit;
-
-$warning-bg-color: colors.$warning-color;
-$warning-color: colors.$zwart;
-
-$error-bg-color: colors.$error-color;
-$error-color: colors.$wit;
-
-$bright-bg-color: colors.$wit;
-$bright-color: colors.$grijs-90;
-$bright-border-color: colors.$grijs-20;
-
-$attention-bg-color: colors.$mauve;
-$attention-color: colors.$wit;
-
-$filter-bg-color: colors.$lichtblauw-20;
-$filter-border-color: colors.$lichtblauw;
-
-$symbol-block-size: 20px;
-$symbol-aspect-ratio: math.div(30, 25);