claritas-web-framework 7.0.1 → 8.0.1

package/sass/modules/form/_checkbox.scss

@@ -5,25 +5,21 @@
 .form--control-checkbox {
   & > * {
     &:not(:last-child) {
-      margin-right: $spacer;
+      margin-right: var(--spacer);
 
       @include media-breakpoint-up("desktop") {
-        margin-right: calc($spacer * 0.5);
+        margin-right: calc(var(--spacer) * 0.5);
       }
     }
   }
 
   & input[type="checkbox"] {
+    --input-width: auto;
+    --input-desktop-width: auto;
+
+    aspect-ratio: 1;
     flex-shrink: 0;
-    height: $input-size;
-    width: $input-size;
     vertical-align: text-bottom;
-    padding: 0;
-
-    @include media-breakpoint-up("desktop") {
-      height: calc($input-size * 0.75);
-      width: calc($input-size * 0.75);
-    }
 
     &::before {
       content: "";
@@ -34,12 +30,11 @@
     }
 
     &:checked {
-      background-color: $input-detail-color;
-      border-color: $input-detail-color;
+      background: var(--input-detail-background);
 
       &::before {
-        border-right: 2px solid $white;
-        border-bottom: 2px solid $white;
+        border-right: 2px solid var(--white);
+        border-bottom: 2px solid var(--white);
         height: 65%;
         width: 32.5%;
         transform: rotate(45deg) translateY(-15%) translateX(-15%);
@@ -48,30 +43,34 @@
       &:disabled,
       &.disabled,
       &[aria-disabled="true"] {
-        background-color: rgba($input-detail-color, 40%);
-        border-color: rgba($input-detail-color, 80%);
+        background: var(--input-disabled-detail-background);
       }
     }
 
     &:indeterminate,
     &[aria-checked="mixed"] {
       &::before {
-        border: 2px solid $white;
+        border: 2px solid var(--white);
         height: 0;
         width: 65%;
       }
     }
 
+    &.input--small {
+      --input-width: auto;
+      --input-desktop-width: auto;
+    }
+
     &.input--large {
-      height: calc($spacer * 2);
-      width: calc($spacer * 2);
+      --input-width: auto;
+      --input-desktop-width: auto;
     }
 
     @each $key, $value in $all-colors {
       &.input--#{$key} {
         &:checked {
-          background-color: $value;
-          border-color: $value;
+          --input-detail-background: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 100%);
+          --input-disabled-detail-background: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 65%);
         }
       }
     }

package/sass/modules/form/_file.scss

@@ -18,11 +18,14 @@
       order: 999;
 
       &:not(:empty) {
-        border-right: $input-border-width $input-border-style $input-border-color;
-        border-bottom: $input-border-width $input-border-style $input-border-color;
-        border-left: $input-border-width $input-border-style $input-border-color;
-        border-bottom-right-radius: $border-radius-default;
-        border-bottom-left-radius: $border-radius-default;
+        border-right: 1px solid
+          hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity});
+        border-bottom: 1px solid
+          hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity});
+        border-left: 1px solid
+          hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity});
+        border-bottom-right-radius: var(--border-radius-medium);
+        border-bottom-left-radius: var(--border-radius-medium);
         padding: $input-padding-y $input-padding-x;
         white-space: nowrap;
         overflow: hidden;
@@ -33,8 +36,8 @@
 
       &:empty {
         & ~ .form--label {
-          border-bottom-right-radius: $border-radius-default;
-          border-bottom-left-radius: $border-radius-default;
+          border-bottom-right-radius: var(--border-radius-medium);
+          border-bottom-left-radius: var(--border-radius-medium);
         }
       }
     }
@@ -47,33 +50,35 @@
       position: relative;
       margin-bottom: 0;
       text-align: center;
-      padding: $spacer $spacer calc($spacer * 3);
-      border: $input-border-width $input-border-style $input-border-color;
-      border-top-left-radius: $border-radius-default;
-      border-top-right-radius: $border-radius-default;
-      background-color: $gray-1;
+      padding: var(--spacer) var(--spacer) calc(var(--spacer) * 3);
+      border: 1px solid hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity});
+      border-top-left-radius: var(--border-radius-medium);
+      border-top-right-radius: var(--border-radius-medium);
+      background-color: var(--gray-1);
       transition: $form-transition;
 
       &::after {
         content: "";
         position: absolute;
-        width: calc($spacer * 2);
-        height: calc($spacer * 2);
+        width: calc(var(--spacer) * 2);
+        height: calc(var(--spacer) * 2);
         top: auto;
         left: 50%;
-        bottom: calc($spacer * 0.5);
+        bottom: calc(var(--spacer) * 0.5);
         transform: translateX(-50%);
         margin: 0;
-        background-size: calc($spacer * 2) auto;
+        background-size: calc(var(--spacer) * 2) auto;
         background-image: escape-svg($form-file-indicator);
-        transition: background-image 0.15s ease-in-out, $form-transition;
+        transition:
+          background-image 0.15s ease-in-out,
+          $form-transition;
       }
     }
 
     &:hover {
       & ~ .form--label {
-        border-color: $input-hover-border-color;
-        background-color: $gray-2;
+        border-color: var(--input-hover-border-color);
+        background-color: var(--gray-2);
 
         &::after {
           background-image: escape-svg($form-file-indicator-hover);
@@ -82,7 +87,7 @@
 
       & ~ .file--name {
         &:not(:empty) {
-          border-color: $input-hover-border-color;
+          border-color: var(--input-hover-border-color);
         }
       }
     }
@@ -120,19 +125,19 @@ input[type="file"] {
 
   &::-webkit-file-upload-button,
   &::file-selector-button {
-    background-color: $light;
+    background-color: var(--light);
     padding: $input-padding-y $input-padding-x;
     margin: calc($input-padding-y * -1) $input-padding-x calc($input-padding-y * -1) calc($input-padding-x * -1);
     -webkit-margin-end: $input-padding-x;
     margin-inline-end: $input-padding-x;
-    color: $body-color;
+    color: var(--body-color);
     pointer-events: none;
-    border-color: rgba($border-color-main, $border-opacity);
+    border-color: hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity});
     border-style: solid;
     border-width: 0;
     border-inline-end-width: 1px;
     border-right-width: 1px;
-    border-radius: $input-border-radius 0 0 $input-border-radius;
+    border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
     transition: $form-transition;
   }
 
@@ -140,7 +145,7 @@ input[type="file"] {
     &:not(:disabled, [readonly]) {
       &::-webkit-file-upload-button,
       &::file-selector-button {
-        background-color: $gray-2;
+        background-color: var(--gray-2);
       }
     }
   }

package/sass/modules/form/_formFieldGroup.scss

@@ -21,51 +21,39 @@
     & progress,
     & .form--span,
     & .input--div {
-      border-radius: $border-radius-none;
+      --input-border-radius: 0;
     }
 
     &:first-child {
-      & button,
-      & input,
-      & textarea,
-      & output,
-      & select,
-      & progress,
-      & .form--span,
-      & .form--div {
-        &:not(.button--square),
-        &:not(.input--square) {
-          border-bottom-left-radius: $input-border-radius;
-          border-top-left-radius: $input-border-radius;
-
-          &.button--rounded,
-          &.input--rounded {
-            border-bottom-left-radius: $border-radius-round;
-            border-top-left-radius: $border-radius-round;
-          }
+      & * {
+        --input-border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
+        --input-small-border-radius: var(--border-radius-small) 0 0 var(--border-radius-small);
+        --input-large-border-radius: var(--border-radius-large) 0 0 var(--border-radius-large);
+
+        --button-border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
+        --button-small-border-radius: var(--border-radius-small) 0 0 var(--border-radius-small);
+        --button-large-border-radius: var(--border-radius-large) 0 0 var(--border-radius-large);
+
+        &.button--rounded,
+        &.input--rounded {
+          border-radius: var(--border-radius-round) 0 0 var(--border-radius-round);
         }
       }
     }
 
     &:last-child {
-      & button,
-      & input,
-      & textarea,
-      & output,
-      & select,
-      & progress,
-      & .form--span,
-      & .form--div {
-        &:not(.button--square),
-        &:not(.input--square) {
-          border-bottom-right-radius: $input-border-radius;
-          border-top-right-radius: $input-border-radius;
-
-          &.button--rounded,
-          &.input--rounded {
-            border-bottom-right-radius: $border-radius-round;
-            border-top-right-radius: $border-radius-round;
-          }
+      & * {
+        --input-border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
+        --input-small-border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;
+        --input-large-border-radius: 0 var(--border-radius-large) var(--border-radius-large) 0;
+
+        --button-border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
+        --button-small-border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;
+        --button-large-border-radius: 0 var(--border-radius-large) var(--border-radius-large) 0;
+
+        &.button--rounded,
+        &.input--rounded {
+          border-radius: 0 var(--border-radius-round) var(--border-radius-round) 0;
         }
       }
     }

package/sass/modules/form/_output.scss

@@ -2,6 +2,6 @@
 @use "./../../variables" as *;
 
 output {
-  background-color: rgba($black, 5%);
+  --input-background: hsl(var(--body-color-h) var(--body-color-s) 95% / 100%);
   pointer-events: none;
 }

package/sass/modules/form/_progress.scss

@@ -2,66 +2,53 @@
 @use "./../../variables" as *;
 
 progress {
+  --input-padding-x: 1px;
+  --input-padding-y: 1px;
+  --input-small-padding-x: 1px;
+  --input-small-padding-y: 1px;
+  --input-large-padding-x: 1px;
+  --input-large-padding-y: 1px;
+  --input-height: var(--spacer);
+  --input-desktop-height: var(--spacer);
+
   background-color: transparent;
-  border-radius: $border-radius-round;
-  height: $spacer;
+  border-radius: var(--input-round-border-radius);
   overflow: hidden;
-  position: relative;
-  padding: 0;
-
-  &::before {
-    content: attr(value);
-    content: attr(value) " / " attr(max);
-    position: absolute;
-    left: 0;
-    top: 50%;
-    width: auto;
-    height: auto;
-    line-height: 1;
-    color: $body-color;
-    padding: 0 calc($spacer * 0.5);
-    font-size: $font-size-small;
-    transform: translateY(-50%);
-  }
 
   &::-webkit-progress-bar {
-    background-color: rgba($black, 7%);
+    background-color: hsl(var(--body-color-h) var(--body-color-s) 95% / 100%);
   }
 
   &::-webkit-progress-value {
-    background-color: $input-detail-color;
-    border-radius: $border-radius-round;
+    background-color: var(--input-detail-background);
+    border-radius: var(--input-round-border-radius);
   }
 
   &::-moz-progress-bar {
-    background-color: rgba($black, 7%);
+    background-color: hsl(var(--body-color-h) var(--body-color-s) 95% / 100%);
   }
 
   &::-moz-progress-value {
-    background-color: $input-detail-color;
-    border-radius: $border-radius-round;
+    background-color: var(--input-detail-background);
+    border-radius: var(--input-round-border-radius);
   }
 
   @each $key, $value in $theme-colors {
     &.input--#{$key} {
-      color: color.mix(black, $value, 75%);
-      border-color: $gray-3;
-      background-color: transparent;
-
       &::-webkit-progress-bar {
-        background-color: rgba($value, 7%);
+        background-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 5%);
       }
 
       &::-moz-progress-bar {
-        background-color: rgba($value, 7%);
+        background-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 5%);
       }
 
       &::-webkit-progress-value {
-        background-color: $value;
+        background-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 100%);
       }
 
       &::-moz-progress-value {
-        background-color: $value;
+        background-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 100%);
       }
     }
   }

package/sass/modules/form/_radio.scss

@@ -6,26 +6,22 @@
 .form--control-radio {
   & > * {
     &:not(:last-child) {
-      margin-right: $spacer;
+      margin-right: var(--spacer);
 
       @include media-breakpoint-up("desktop") {
-        margin-right: calc($spacer * 0.5);
+        margin-right: calc(var(--spacer) * 0.5);
       }
     }
   }
 
   & input[type="radio"] {
+    --input-width: auto;
+    --input-desktop-width: auto;
+
+    border-radius: var(--input-round-border-radius);
+    aspect-ratio: 1;
     flex-shrink: 0;
-    height: $input-size;
-    width: $input-size;
     vertical-align: text-bottom;
-    border-radius: $border-radius-round;
-    padding: 0;
-
-    @include media-breakpoint-up("desktop") {
-      height: calc($input-size * 0.75);
-      width: calc($input-size * 0.75);
-    }
 
     &::before {
       content: "";
@@ -33,47 +29,27 @@
       margin: auto;
       inset: 0;
       overflow: hidden;
+      border-radius: var(--input-round-border-radius);
+      background: var(--white);
+      width: 50%;
+      aspect-ratio: 1;
     }
 
     &:checked {
-      &::before {
-        border: 7px solid $input-background-color;
-        border-radius: $border-radius-round;
-        background: $input-detail-color;
-
-        @include media-breakpoint-up("desktop") {
-          border-width: 5px;
-        }
-      }
+      background: var(--input-detail-background);
 
       &:disabled,
       &.disabled,
       &[aria-disabled="true"] {
-        background-color: $white;
-        border-color: rgba($input-detail-color, 40%);
-
-        &::before {
-          background: rgba($input-detail-color, 40%);
-        }
+        background: var(--input-disabled-detail-background);
       }
     }
 
     @each $key, $value in $theme-colors {
       &.input--#{$key} {
         &:checked {
-          &::before {
-            background: $value;
-          }
-
-          &:disabled,
-          &.disabled,
-          &[aria-disabled="true"] {
-            border-color: rgba($value, 40%);
-
-            &::before {
-              background: rgba($value, 40%);
-            }
-          }
+          --input-detail-background: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 100%);
+          --input-disabled-detail-background: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 65%);
         }
       }
     }

package/sass/modules/form/_range.scss

@@ -1,41 +1,61 @@
 @use "sass:color";
 @use "./../../variables" as *;
 
-@mixin make-track($color: rgba($black, 7%)) {
-  background: $color;
-  border-radius: $border-radius-round;
+@mixin make-track() {
+  background: hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / 10%);
+  border-radius: var(--input-round-border-radius);
   width: 100%;
-  height: calc($spacer * 0.5);
+  height: calc(var(--spacer) * 0.5);
   cursor: pointer;
 }
 
-@mixin make-thumb($focus: false, $disabled: false, $color: $input-detail-color) {
-  margin-top: calc($spacer * -0.25);
-  width: $spacer;
-  height: $spacer;
+@mixin make-thumb(
+  $focus: false,
+  $disabled: false,
+  $color: var(--input-detail-background),
+  $shadow: hsl(var(--primary-h) var(--primary-s) var(--primary-l) / 25%)
+) {
+  margin-top: calc(var(--spacer) * -0.25);
+  width: var(--spacer);
+  height: var(--spacer);
   background: $color;
-  border: 1px solid rgba($border-color-main, $border-opacity);
-  border-radius: $border-radius-round;
+  border: 1px solid hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity});
+  border-radius: var(--input-round-border-radius);
   cursor: pointer;
-  box-shadow: $box-shadow-medium;
+  box-shadow: var(--box-shadow-small);
   appearance: none;
 
   @if $focus == true {
-    box-shadow: 0 0 0 1px $white, 0 0 0 calc($spacer * 0.25) rgba($color, 25%);
+    box-shadow:
+      0 0 0 1px var(--white),
+      0 0 0 calc(var(--spacer) * 0.25) $shadow;
   }
 
   @if $disabled == true {
-    background: $gray-3;
+    background: var(--input-disabled-detail-background);
   }
 }
 
 input[type="range"] {
-  appearance: none;
-  margin: calc($spacer * 0.5) 0;
-  border-color: transparent;
-  box-shadow: none;
-  padding-left: 0;
-  padding-right: 0;
+  --input-border-color: transparent;
+  --input-hover-border-color: transparent;
+  --input-focus-border-color: transparent;
+  --input-active-border-color: transparent;
+  --input-disabled-border-color: transparent;
+
+  --input-box-shadow: none;
+  --input-hover-box-shadow: none;
+  --input-focus-box-shadow: none;
+  --input-active-box-shadow: none;
+  --input-disabled-box-shadow: none;
+
+  --input-disabled-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 100%);
+
+  --input-padding-x: 0;
+  --input-small-padding-x: 0;
+  --input-large-padding-x: 0;
+
+  margin: calc(var(--spacer) * 0.5) 0;
 
   &::-moz-range-track {
     @include make-track;
@@ -53,10 +73,6 @@ input[type="range"] {
     @include make-thumb(false, false);
   }
 
-  &:hover {
-    border-color: transparent;
-  }
-
   &:focus {
     &::-webkit-slider-runnable-track {
       @include make-track;
@@ -74,7 +90,7 @@ input[type="range"] {
   &:disabled,
   &.disabled,
   &[aria-disabled="true"] {
-    background-color: transparent;
+    --input-disabled-detail-background: hsl(var(--primary-h) var(--primary-s) calc(var(--primary-l) + 20%) / 100%);
 
     &::-webkit-slider-runnable-track {
       @include make-track;
@@ -92,4 +108,40 @@ input[type="range"] {
       @include make-thumb(false, true);
     }
   }
+
+  @each $key, $value in $theme-colors {
+    &.input--#{$key} {
+      --input-disabled-detail-background: hsl(var(--#{$key}-h) var(--#{$key}-s) calc(var(--#{$key}-l) + 20%) / 100%);
+
+      &::-moz-range-thumb {
+        @include make-thumb(false, false, $value, hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 25%));
+      }
+
+      &::-webkit-slider-thumb {
+        @include make-thumb(false, false, $value, hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 25%));
+      }
+
+      &:focus {
+        &::-moz-range-thumb {
+          @include make-thumb(true, false, $value, hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 25%));
+        }
+
+        &::-webkit-slider-thumb {
+          @include make-thumb(true, false, $value, hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 25%));
+        }
+      }
+
+      &:disabled,
+      &.disabled,
+      &[aria-disabled="true"] {
+        &::-moz-range-thumb {
+          @include make-thumb(false, true, $value, hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 25%));
+        }
+
+        &::-webkit-slider-thumb {
+          @include make-thumb(false, true, $value, hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 25%));
+        }
+      }
+    }
+  }
 }

package/sass/modules/form/_select.scss

@@ -2,21 +2,21 @@
 @use "./../../functions" as *;
 
 select {
-  padding: $input-padding-y calc($spacer * 2) $input-padding-y $input-padding-x;
-  padding-inline-start: calc($spacer - 3px);
+  padding-right: calc(var(--spacer) * 2);
+  padding-inline-start: calc(var(--spacer) - 3px);
 
   &:not([multiple]) {
     background-image: escape-svg($form-select-indicator);
     background-repeat: no-repeat;
-    background-position: right calc($spacer * 0.5) center;
-    background-size: $spacer auto;
+    background-position: right calc(var(--spacer) * 0.5) center;
+    background-size: var(--spacer) auto;
   }
 
   &[multiple] {
     padding: 0;
 
     & option {
-      padding: calc($spacer * 0.5) $spacer;
+      padding: calc(var(--spacer) * 0.5) var(--spacer);
     }
   }
 }

package/sass/modules/form/_switch.scss

@@ -15,7 +15,7 @@
     + .button {
       pointer-events: none;
       filter: none;
-      opacity: $form-check-button-check-disabled-opacity;
+      opacity: 0.65;
     }
   }
 }