dso-toolkit 89.0.0 → 90.1.0

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/variables/colors.scss

@@ -2,20 +2,28 @@
 
 // DSO kleuren                http://webaim.org/resources/contrastchecker/ (contrast op een witte achtergrond)
 
+$grasgroen-130: #285f08;
+$grasgroen-120: #2e6c0a;
 $grasgroen: #39870c; // 100% tint       - Normal text: WCAG AA: OK;  WCAG AAA: Fail - Large text: WCAG AA: OK;  WCAG AAA: OK;
 $grasgroen-80: #609f3c; //  80% tint       - Normal text: WCAG AA: Fail;  WCAG AAA: Fail - Large text: WCAG AA: OK;  WCAG AAA: Fail;
+$grasgroen-60: #88b76d;
 $grasgroen-40: #afcf9d; //  40% tint       - niet te gebruiken als leestekst
 $grasgroen-20: #d7e7ce; //  20% tint       - niet te gebruiken als leestekst
 $grasgroen-10: #ebf3e6; //  10% tint       - niet te gebruiken als leestekst
 
 $bosgroen: #275937; // 100% tint       - Normal text: WCAG AA: OK;  WCAG AAA: Fail - Large text: WCAG AA: OK;  WCAG AAA: OK;
 $bosgroen-140: #173521; // 140% tint
+$bosgroen-130: #1b3e27;
+$bosgroen-120: #1f472c;
 $bosgroen-80: #527a5e; //  80% tint       - Normal text: WCAG AA: OK;  WCAG AAA: Fail - Large text: WCAG AA: OK;  WCAG AAA: OK;
 $bosgroen-60: #7d9886; //  60% tint       - Normal text: WCAG AA: OK;  WCAG AAA: Fail - Large text: WCAG AA: OK;  WCAG AAA: Fail;
 $bosgroen-40: #a8bcaf; //  40% tint       - niet te gebruiken als leestekst
 $bosgroen-10: #e9eeeb; //  10% tint       - niet te gebruiken als leestekst
 
+$mauve-130: #61344a;
+$mauve-120: #6f3b55;
 $mauve: #8b4a6a; // 100% tint
+$mauve-60: #b992a6;
 $mauve-40: #d1b7c4; // 40% tint
 
 $zwart: #000; // 100% tint       - Normal text: WCAG AA: OK;  WCAG AAA: OK - Large text: WCAG AA: OK;  WCAG AAA: OK;
@@ -36,18 +44,31 @@ $lime-10: #f2f8ea; // 10% tint
 $lime-20: #e4f1d4; // 20% tint
 $lime-20-5: #d8e5c9; // 20% tint 5% zwart
 $lime-20-10: #ced9bf; // 20% tint 10% zwart
-$rood: #ce3f51; // 100% tint
+
+$rood-130: #902c39;
+$rood-120: #a53241;
 $rood-110: #b62f41; // 110% tint
+$rood: #ce3f51; // 100% tint
 $rood-10: #faecee; // 10% tint
 $rood-20: #f5d8dc; // 20% tint
 $rood-20-5: #e9cdd1; // 20% tint 5% zwart
 $rood-20-10: #ddc3c6; // 20% tint 10% zwart
+$rood-60: #e28c97;
+
+$geel-120: #b0aa00;
+$geel-110: #c6bf00;
 $geel: #dcd400; // 100% tint
+$geel-60: #eae566;
 $geel-20: #f8f6cc; // 20% tint
+
 $lichtblauw: #6ca4d9; // 100% tint
 $lichtblauw-20: #e1ecf7; // 20% tint
 
+$donkerblauw-130: #1e3d5a;
+$donkerblauw-120: #224666;
 $donkerblauw: #2b5780;
+$donkerblauw-60: #809ab3;
+
 $mintgroen: #3fb498;
 $bruin: #644f49;
 $oranje: #e17000;

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);