dso-toolkit 81.1.0 → 83.0.0

package/src/components/progress-bar/progress-bar.mixins.scss

@@ -1,27 +0,0 @@
-@use "../../variables/units";
-@use "../../variables/typography";
-
-@use "progress-bar.variables" as progress-bar-variables;
-
-@mixin root() {
-  margin-block-end: units.$u1;
-
-  .progress-bar {
-    background-color: progress-bar-variables.$background-color;
-    border: 1px solid progress-bar-variables.$color;
-    display: block;
-    block-size: progress-bar-variables.$block-size;
-
-    > span {
-      background-color: progress-bar-variables.$progress-color;
-      float: inline-start;
-      block-size: 100%;
-      inline-size: 0%;
-    }
-
-    + span {
-      font-size: typography.$root-font-size-small;
-      margin-block-start: units.$u1;
-    }
-  }
-}

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

@@ -1,5 +0,0 @@
-@use "../progress-bar";
-
-.progress {
-  @include progress-bar.root();
-}

package/src/components/progress-bar/progress-bar.variables.scss

@@ -1,9 +0,0 @@
-@use "../../variables/units";
-@use "../../variables/colors";
-
-$progress-color: colors.$grasgroen;
-
-$block-size: units.$u2;
-$margin: units.$u1;
-$background-color: colors.$wit;
-$color: colors.$grasgroen;

package/src/components/progress-bar/readme.md

@@ -1 +0,0 @@
-# `.progress`

package/src/components/progress-indicator/_index.scss

@@ -1 +0,0 @@
-@forward "progress-indicator.mixins";

package/src/components/progress-indicator/progress-indicator.mixins.scss

@@ -1,55 +0,0 @@
-@use "../../variables/units";
-
-@mixin _looping-size($progress-indicator-size) {
-  .dso-progress-indicator-spinner,
-  dso-icon {
-    block-size: $progress-indicator-size;
-    inline-size: $progress-indicator-size;
-  }
-}
-
-@mixin root() {
-  .dso-progress-indicator-spinner {
-    display: inline-block;
-    margin: 0;
-    position: relative;
-    vertical-align: middle;
-  }
-
-  span.dso-progress-indicator-label {
-    margin-inline-start: units.$u2;
-    vertical-align: middle;
-  }
-}
-
-@mixin block() {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-}
-
-@mixin small() {
-  @include _looping-size(24px);
-}
-
-@mixin small-block() {
-  padding-block: units.$u1 * 1.5;
-  padding-inline: units.$u2;
-}
-
-@mixin medium() {
-  @include _looping-size(32px);
-}
-
-@mixin medium-block() {
-  padding: units.$u2;
-}
-
-@mixin large() {
-  @include _looping-size(48px);
-}
-
-@mixin large-block() {
-  padding-block: units.$u3;
-  padding-inline: units.$u2;
-}

package/src/components/progress-indicator/progress-indicator.scss

@@ -1,40 +0,0 @@
-@use "../../di";
-@use "../progress-indicator";
-@use "../../components/icon";
-
-.dso-progress-indicator {
-  @include progress-indicator.root();
-
-  .dso-progress-indicator-spinner {
-    @include di.base("spinner", icon.$size, "middle");
-  }
-
-  &.dso-block {
-    @include progress-indicator.block();
-  }
-
-  &.dso-small,
-  &:not(.dso-medium):not(.dso-large) {
-    @include progress-indicator.small();
-
-    &.dso-block {
-      @include progress-indicator.small-block();
-    }
-  }
-
-  &.dso-medium {
-    @include progress-indicator.medium();
-
-    &.dso-block {
-      @include progress-indicator.medium-block();
-    }
-  }
-
-  &.dso-large {
-    @include progress-indicator.large();
-
-    &.dso-block {
-      @include progress-indicator.large-block();
-    }
-  }
-}

package/src/components/selectable/_index.scss

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

package/src/components/selectable/readme.md

@@ -1 +0,0 @@
-# `.dso-selectable`

package/src/components/selectable/selectable.mixins.scss

@@ -1,238 +0,0 @@
-@use "../../variables/units";
-@use "../../variables/colors";
-@use "../../variables/zindex";
-@use "selectable.variables" as selectable-variables;
-
-@mixin invalid() {
-  --dso-selectable-color: #{selectable-variables.$invalid-color};
-}
-
-@mixin notLastChild() {
-  margin-block-end: units.$u1;
-}
-
-@mixin inline($siblingSelectableSelector) {
-  + #{$siblingSelectableSelector} {
-    margin-inline-start: units.$u3;
-  }
-}
-
-@mixin root() {
-  position: relative;
-
-  display: var(--dso-selectable-display, block);
-
-  padding-block: 0;
-  padding-inline: units.$u4 0;
-
-  label {
-    font-weight: 400;
-    line-height: selectable-variables.$size;
-    margin: 0;
-  }
-
-  input[type="checkbox"][disabled],
-  input[type="radio"][disabled] {
-    @include _selectableFunctionalStylingDisabled();
-  }
-
-  input[type="checkbox"],
-  input[type="radio"] {
-    @include _selectableFunctionalStyling();
-  }
-
-  input[type="checkbox"] {
-    @include _selectableFunctionalStylingCheckbox();
-  }
-
-  input[type="radio"] {
-    @include _selectableFunctionalStylingRadio();
-  }
-}
-
-@mixin children($info-selector) {
-  > #{$info-selector} {
-    float: none;
-    margin-block: units.$u1 0;
-    margin-inline: 0 units.$u2;
-    inline-size: 100%;
-  }
-
-  .dso-selectable-options {
-    list-style: none;
-    margin-block-start: units.$u1;
-    padding-inline-start: 0;
-
-    li + li {
-      margin-block-start: units.$u1;
-    }
-  }
-}
-
-@mixin selectableBoxShadow($border-width, $color) {
-  box-shadow: 0 0 0 $border-width $color;
-  block-size: selectable-variables.$size - 2 * $border-width;
-  inset-inline-start: $border-width;
-  inset-block-start: $border-width;
-  inline-size: selectable-variables.$size - 2 * $border-width;
-}
-
-@mixin _selectableFunctionalStylingDisabled() {
-  &,
-  &:active,
-  &:focus {
-    + label {
-      &::before {
-        background-color: colors.$wit;
-        box-shadow: 0 0 0 selectable-variables.$border-width selectable-variables.$disabled-color;
-      }
-    }
-  }
-}
-
-@mixin _selectableFunctionalStyling() {
-  block-size: selectable-variables.$size;
-  inset-inline-start: 0;
-  margin: 0;
-  opacity: 0;
-  position: absolute;
-  inset-block-start: 0;
-  inline-size: selectable-variables.$size;
-  z-index: zindex.$selectable;
-  zoom: 1;
-
-  @media (prefers-contrast: more) {
-    & {
-      opacity: 1;
-    }
-  }
-
-  &:not([disabled]) {
-    cursor: pointer;
-  }
-
-  + label {
-    display: inline;
-    font-style: normal;
-    padding-inline-start: 0;
-
-    &::before {
-      background: colors.$wit;
-      border: 0;
-      box-shadow: 0 0 0 selectable-variables.$border-width
-        var(--dso-selectable-color, selectable-variables.$valid-color);
-      content: "";
-      block-size: selectable-variables.$size - 2 * selectable-variables.$border-width;
-      inset-inline-start: selectable-variables.$border-width;
-      position: absolute;
-      inset-block-start: selectable-variables.$border-width;
-      inline-size: selectable-variables.$size - 2 * selectable-variables.$border-width;
-    }
-  }
-
-  &:focus {
-    outline: 0;
-
-    + label::before {
-      box-shadow: 0 0 0 selectable-variables.$focus-border-width
-        var(--dso-selectable-color, selectable-variables.$valid-color);
-      block-size: selectable-variables.$size - 2 * selectable-variables.$focus-border-width;
-      inset-inline-start: selectable-variables.$focus-border-width;
-      inset-block-start: selectable-variables.$focus-border-width;
-      inline-size: selectable-variables.$size - 2 * selectable-variables.$focus-border-width;
-    }
-  }
-
-  &:active,
-  &.active {
-    + label::before {
-      background-color: selectable-variables.$active-background-color;
-      box-shadow: 0 0 0 1px selectable-variables.$valid-color;
-      block-size: selectable-variables.$size - 2px;
-      inset-inline-start: 1px;
-      inset-block-start: 1px;
-      inline-size: selectable-variables.$size - 2px;
-    }
-  }
-}
-
-@mixin _selectableFunctionalStylingCheckbox() {
-  + label {
-    &::before {
-      border-radius: 4px;
-    }
-
-    &::after {
-      background: transparent;
-      content: "";
-      inset-inline-start: 6px;
-      opacity: 0;
-      position: absolute;
-      inset-block-start: 6px;
-      zoom: 1;
-    }
-  }
-
-  &:checked,
-  &:indeterminate {
-    + label {
-      &::after {
-        opacity: 1;
-      }
-    }
-  }
-
-  &:checked {
-    + label {
-      &::after {
-        border: solid;
-        border-color: var(--dso-selectable-color, selectable-variables.$valid-marker-color);
-        border-block-start-color: transparent;
-        border-width: 0 0 3px 3px;
-        block-size: 8px;
-        transform: rotate(-45deg);
-        inline-size: 13px;
-      }
-    }
-  }
-
-  &:indeterminate {
-    + label {
-      &::after {
-        background-color: var(--dso-selectable-color, selectable-variables.$valid-marker-color);
-        block-size: selectable-variables.$indeterminate-size;
-        inline-size: selectable-variables.$indeterminate-size;
-      }
-    }
-  }
-}
-
-@mixin _selectableFunctionalStylingRadio() {
-  + label {
-    &::before {
-      border-radius: 50%;
-    }
-
-    &::after {
-      background-color: transparent;
-      border-radius: 50%;
-      content: "";
-      block-size: 12px;
-      inset-inline-start: 6px;
-      opacity: 0;
-      position: absolute;
-      inset-block-start: 6px;
-      inline-size: 12px;
-      zoom: 1;
-    }
-  }
-
-  &:checked {
-    + label {
-      &::after {
-        background-color: var(--dso-selectable-color, selectable-variables.$valid-marker-color);
-        opacity: 1;
-      }
-    }
-  }
-}

package/src/components/selectable/selectable.scss

@@ -1,25 +0,0 @@
-@use "../selectable";
-@use "../info";
-
-// HTML/CSS
-.dso-selectable {
-  @include selectable.root();
-  @include selectable.children(".dso-info");
-
-  &:not(:last-child) {
-    @include selectable.notLastChild();
-  }
-
-  input[aria-invalid="true"] + label {
-    @include selectable.invalid();
-  }
-}
-
-// Web Component
-dso-selectable {
-  @include selectable.children("dso-info");
-
-  .dso-rich-content[slot="info"] {
-    @include info.richContent();
-  }
-}

package/src/components/selectable/selectable.variables.scss

@@ -1,13 +0,0 @@
-@use "../../variables/units";
-@use "../../variables/colors";
-
-$valid-marker-color: colors.$grasgroen; // dot for radio and checkmark for checkbox
-$valid-color: colors.$bosgroen;
-$invalid-color: colors.$danger-color;
-$active-background-color: colors.$grasgroen-10;
-$disabled-color: colors.$input-disabled-border-color;
-$size: units.$u3;
-$border-width: 2px;
-$focus-border-width: 3px;
-$indeterminate-size: 12px;
-$symbol-indent: units.$u4;