claritas-web-framework 7.0.1 → 8.0.0

package/sass/modules/_form.scss

@@ -1,9 +1,11 @@
 @use "sass:color";
+@use "~rfs/scss" as *;
 @use "./../variables" as *;
 @use "./../functions" as *;
+@use "./../mixins/breakpoints" as *;
 
 ::placeholder {
-  color: $gray-3;
+  color: var(--gray-3);
 }
 
 .form--field {
@@ -17,7 +19,7 @@
   & small {
     color: $medium;
     display: block;
-    margin-top: calc($spacer * 0.25);
+    margin-top: calc(var(--spacer) * 0.25);
   }
 }
 
@@ -29,81 +31,205 @@ progress,
 .form--span,
 .input--div,
 .input--editor {
-  padding: $input-padding-y $input-padding-x;
-  border: $input-border-width $input-border-style $input-border-color;
-  border-radius: $input-border-radius;
-  background-color: $input-background-color;
-  color: $body-color;
-  white-space: nowrap;
+  --input-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 100%);
+  --input-hover-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 100%);
+  --input-focus-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 100%);
+  --input-active-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 100%);
+  --input-disabled-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 65%);
+
+  --input-border-color: hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity});
+  --input-hover-border-color: hsl(
+    var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-hover-opacity}
+  );
+  --input-focus-border-color: hsl(
+    var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-hover-opacity}
+  );
+  --input-active-border-color: hsl(
+    var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-hover-opacity}
+  );
+  --input-disabled-border-color: hsl(
+    var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{calc($border-opacity * 0.65)}
+  );
+
+  --input-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 100%);
+  --input-hover-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 100%);
+  --input-focus-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 100%);
+  --input-active-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 100%);
+  --input-disabled-background: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 5%);
+
+  --input-detail-background: hsl(var(--primary-h) var(--primary-s) var(--primary-l) / 100%);
+  --input-disabled-detail-background: hsl(var(--primary-h) var(--primary-s) var(--primary-l) / 65%);
+
+  --input-box-shadow: 0 0 0 0.125em hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 0%);
+  --input-hover-box-shadow: 0 0 0 0.125em hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 0%);
+  --input-focus-box-shadow: 0 0 0 0.125em
+    hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / #{$border-opacity});
+  --input-active-box-shadow: 0 0 0 0.125em
+    hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / #{$border-opacity});
+  --input-disabled-box-shadow: 0 0 0 0.125em hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 0%);
+
+  // Static
+  --input-padding-x: #{$input-padding-x};
+  --input-padding-y: #{$input-padding-y};
+  --input-small-padding-x: #{$input-small-padding-x};
+  --input-small-padding-y: #{$input-small-padding-y};
+  --input-large-padding-x: #{$input-large-padding-x};
+  --input-large-padding-y: #{$input-large-padding-y};
+
+  --input-border-width: 1px;
+  --input-border-style: solid;
+
+  --input-border-radius: var(--border-radius-medium);
+  --input-small-border-radius: var(--border-radius-small);
+  --input-large-border-radius: var(--border-radius-large);
+  --input-round-border-radius: var(--border-radius-round);
+
+  --input-font-family: #{$input-font-family};
+  --input-font-weight: #{$input-font-weight};
+  --input-line-height: #{$input-line-height};
+  --input-white-space: #{$input-white-space};
+
+  --input-width: 100%;
+  --input-height: auto;
+  --input-desktop-width: 100%;
+  --input-desktop-height: auto;
+
+  color: var(--input-color);
+  border-width: var(--input-border-width);
+  border-style: var(--input-border-style);
+  border-color: var(--input-border-color);
+  background: var(--input-background);
+  box-shadow: var(--input-box-shadow);
+  padding: var(--input-padding-y) var(--input-padding-x);
+  border-radius: var(--input-border-radius);
+  font-family: var(--input-font-family);
+  font-weight: var(--input-font-weight);
+  line-height: var(--input-line-height);
+  white-space: var(--input-white-space);
+  width: var(--input-width);
+  height: var(--input-height);
+
   display: block;
   appearance: none;
-  width: 100%;
   transition: $form-transition;
   position: relative;
-  font-weight: $input-font-weight;
-  line-height: $input-line-height;
-  font-size: $input-font-size;
-  font-family: $input-font-family;
+
+  @include rfs($input-font-size, --input-font-size);
+  @include font-size(var(--input-font-size));
+
+  @include media-breakpoint-up("desktop") {
+    height: var(--input-desktop-height);
+    width: var(--input-desktop-width);
+  }
 
   &:hover {
-    border-color: $input-hover-border-color;
+    color: var(--input-hover-color);
+    border-color: var(--input-hover-border-color);
+    background: var(--input-hover-background);
+    box-shadow: var(--input-hover-box-shadow);
   }
 
   &:focus {
+    color: var(--input-focus-color);
+    border-color: var(--input-focus-border-color);
+    background: var(--input-focus-background);
+    box-shadow: var(--input-focus-box-shadow);
     outline: 0;
-    box-shadow: $input-focus-box-shadow;
-    border-color: $input-focus-border-color;
+  }
+
+  &:active {
+    color: var(--input-active-color);
+    border-color: var(--input-active-border-color);
+    background: var(--input-active-background);
+    box-shadow: var(--input-active-box-shadow);
   }
 
   &:disabled,
   &.disabled,
   fieldset:disabled & {
+    color: var(--input-disabled-color);
+    border-color: var(--input-disabled-border-color);
+    background: var(--input-disabled-background);
+    box-shadow: var(--input-disabled-box-shadow);
     pointer-events: none;
-    background-color: $light;
     opacity: 1;
-    box-shadow: none;
   }
 
   &[readonly] {
-    background-color: $light;
+    background: var(--input-disabled-background);
   }
 
   &.input--rounded {
-    border-radius: $border-radius-round;
+    border-radius: var(--input-round-border-radius);
   }
 
   &.input--small {
-    padding: $input-padding-y-small $input-padding-x-small;
-    font-size: $input-font-size-small;
-    border-radius: $input-border-radius-small;
+    padding: var(--input-small-padding-y) var(--input-small-padding-x);
+
+    @include rfs($input-font-size-small, --input-font-size);
+    @include font-size(var(--input-font-size));
+
+    &:not(.input--rounded) {
+      border-radius: var(--input-large-border-radius);
+    }
   }
 
   &.input--large {
-    padding: $input-padding-y-large $input-padding-x-large;
-    font-size: $input-font-size-large;
-    border-radius: $input-border-radius-large;
+    padding: var(--input-large-padding-y) var(--input-large-padding-x);
+
+    @include rfs($input-font-size-large, --input-font-size);
+    @include font-size(var(--input-font-size));
+
+    &:not(.input--rounded) {
+      border-radius: var(--input-large-border-radius);
+    }
   }
 
   @each $key, $value in $all-colors {
     &.input--#{$key} {
-      border-color: $value;
+      --input-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 100%);
+      --input-hover-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 100%);
+      --input-focus-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 100%);
+      --input-active-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 100%);
+      --input-disabled-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 65%);
 
-      &:hover {
-        border-color: color.mix(black, $value, $link-shade-percentage);
-      }
+      --input-border-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 100%);
+      --input-hover-border-color: hsl(
+        var(--#{$key}-h) var(--#{$key}-s) calc(var(--#{$key}-l) - #{$link-shade-percentage}) / 100%
+      );
+      --input-focus-border-color: hsl(
+        var(--#{$key}-h) var(--#{$key}-s) calc(var(--#{$key}-l) - #{$link-shade-percentage}) / 100%
+      );
+      --input-active-border-color: hsl(
+        var(--#{$key}-h) var(--#{$key}-s) calc(var(--#{$key}-l) - #{$link-shade-percentage}) / 100%
+      );
+      --input-disabled-border-color: hsl(
+        var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / #{calc($border-opacity * 0.65)}
+      );
 
-      &:focus {
-        outline: 0;
-        box-shadow: 0 0 0 calc($spacer * 0.25) rgba($value, $border-opacity);
-      }
+      --input-background: hsl(var(--#{$key}-h) var(--#{$key}-s) 100% / 100%);
+      --input-hover-background: hsl(var(--#{$key}-h) var(--#{$key}-s) 100% / 100%);
+      --input-focus-background: hsl(var(--#{$key}-h) var(--#{$key}-s) 100% / 100%);
+      --input-active-background: hsl(var(--#{$key}-h) var(--#{$key}-s) 100% / 100%);
+      --input-disabled-background: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 5%);
+
+      --input-box-shadow: 0 0 0 0.125em hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 0%);
+      --input-hover-box-shadow: 0 0 0 0.125em hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 0%);
+      --input-focus-box-shadow: 0
+        0
+        0
+        0.125em
+        hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / #{$border-opacity});
+      --input-active-box-shadow: 0
+        0
+        0
+        0.125em
+        hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / #{$border-opacity});
+      --input-disabled-box-shadow: 0 0 0 0.125em hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 0%);
     }
   }
 }
 
-textarea {
-  white-space: break-spaces;
-}
-
 .form--label {
   display: $label-display;
   padding: $label-padding;
@@ -147,7 +273,9 @@ textarea {
 }
 
 .form--span {
-  background-color: $light;
+  --form-span-background: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 5%);
+
+  background-color: var(--form-span-background);
   align-items: center;
   display: inline-flex;
   vertical-align: top;

package/sass/modules/_list.scss

@@ -25,7 +25,7 @@ dl {
     & > * {
       padding-left: calc($grid-gutter * 0.25) !important;
       padding-right: calc($grid-gutter * 0.25) !important;
-      margin-bottom: calc($spacer * 0.5);
+      margin-bottom: calc(var(--spacer) * 0.5);
 
       &:last-of-type {
         margin-bottom: 0;
@@ -42,20 +42,21 @@ dl {
   @include make-list-unsyled;
 
   & > li {
-    border: 1px solid rgba($border-color-main, $border-opacity);
+    border: 1px solid hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity});
     border-bottom-color: transparent;
-    padding: calc(($spacer * 0.625) - 1px) $spacer;
+    padding: calc((var(--spacer) * 0.625) - 1px) var(--spacer);
     position: relative;
 
     &:first-child {
-      border-top-left-radius: $border-radius-default;
-      border-top-right-radius: $border-radius-default;
+      border-top-left-radius: var(--border-radius-medium);
+      border-top-right-radius: var(--border-radius-medium);
     }
 
     &:last-child {
-      border-bottom: 1px solid rgba($border-color-main, $border-opacity);
-      border-bottom-left-radius: $border-radius-default;
-      border-bottom-right-radius: $border-radius-default;
+      border-bottom: 1px solid
+        hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity});
+      border-bottom-left-radius: var(--border-radius-medium);
+      border-bottom-right-radius: var(--border-radius-medium);
     }
   }
 }
@@ -64,9 +65,9 @@ dl {
   @include make-list-unsyled;
 
   & > li {
-    background-color: $white;
-    border-radius: $border-radius-default;
-    border: 1px solid rgba($border-color-main, $border-opacity);
+    background-color: var(--white);
+    border-radius: var(--border-radius-medium);
+    border: 1px solid hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity});
 
     @if $enable-margins {
       margin-bottom: var(--spacer);
@@ -75,22 +76,23 @@ dl {
     }
 
     & .list--item {
-      padding: calc(calc($spacer * 0.625) - 1px) $spacer;
+      padding: calc(calc(var(--spacer) * 0.625) - 1px) var(--spacer);
     }
 
     & .list--nested {
       margin-bottom: 0;
 
       & > li {
-        border-radius: $border-radius-none;
+        border-radius: 0;
         border: 0 none;
         margin-bottom: 0;
         background-image: escape-svg($list-nested-indicator);
-        background-size: $spacer auto;
+        background-size: var(--spacer) auto;
         background-repeat: no-repeat;
-        background-position: left calc($spacer * 0.5) top $spacer;
-        padding-left: calc($spacer * 1.5);
-        border-top: 1px solid rgba($border-color-main, $border-opacity);
+        background-position: left calc(var(--spacer) * 0.5) top var(--spacer);
+        padding-left: calc(var(--spacer) * 1.5);
+        border-top: 1px solid
+          hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity});
       }
     }
   }

package/sass/modules/_loader.scss

@@ -1,8 +1,8 @@
 @use "./../variables" as *;
 
 .loader {
-  width: $spacer;
-  height: $spacer;
+  width: var(--spacer);
+  height: var(--spacer);
   display: inline-block;
   position: relative;
   vertical-align: middle;
@@ -12,12 +12,12 @@
       box-sizing: border-box;
       display: block;
       position: absolute;
-      width: $spacer;
-      height: $spacer;
-      border: 2px solid $body-color;
-      border-radius: $border-radius-round;
+      width: var(--spacer);
+      height: var(--spacer);
+      border: 2px solid var(--body-color);
+      border-radius: var(--border-radius-round);
       animation: ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-      border-color: $body-color transparent transparent transparent;
+      border-color: var(--body-color) transparent transparent transparent;
 
       &:nth-child(1) {
         animation-delay: -0.45s;
@@ -34,71 +34,71 @@
   }
 
   &.loader--ellipsis {
-    width: calc($spacer * 2.5);
-    height: $spacer;
+    width: calc(var(--spacer) * 2.5);
+    height: var(--spacer);
 
     & span {
       position: absolute;
-      top: calc($spacer * 0.25);
-      width: calc($spacer * 0.5);
-      height: calc($spacer * 0.5);
-      border-radius: $border-radius-round;
-      background: $body-color;
+      top: calc(var(--spacer) * 0.25);
+      width: calc(var(--spacer) * 0.5);
+      height: calc(var(--spacer) * 0.5);
+      border-radius: var(--border-radius-round);
+      background: var(--body-color);
       animation-timing-function: cubic-bezier(0, 1, 1, 0);
 
       &:nth-child(1) {
-        left: calc($spacer * 0.25);
+        left: calc(var(--spacer) * 0.25);
         animation: ellipsis1 0.6s infinite;
       }
 
       &:nth-child(2) {
-        left: calc($spacer * 0.25);
+        left: calc(var(--spacer) * 0.25);
         animation: ellipsis2 0.6s infinite;
       }
 
       &:nth-child(3) {
-        left: $spacer;
+        left: var(--spacer);
         animation: ellipsis2 0.6s infinite;
       }
 
       &:nth-child(4) {
-        left: calc($spacer * 1.75);
+        left: calc(var(--spacer) * 1.75);
         animation: ellipsis3 0.6s infinite;
       }
     }
   }
 
   &.loader--large {
-    width: calc($spacer * 2);
-    height: calc($spacer * 2);
+    width: calc(var(--spacer) * 2);
+    height: calc(var(--spacer) * 2);
 
     &.loader--ring {
       & span {
-        width: calc($spacer * 2);
-        height: calc($spacer * 2);
+        width: calc(var(--spacer) * 2);
+        height: calc(var(--spacer) * 2);
         border-width: 4px;
       }
     }
 
     &.loader--ellipsis {
-      width: calc($spacer * 2.5);
-      height: $spacer;
+      width: calc(var(--spacer) * 2.5);
+      height: var(--spacer);
 
       & span {
         &:nth-child(1) {
-          left: calc($spacer * 0.25);
+          left: calc(var(--spacer) * 0.25);
         }
 
         &:nth-child(2) {
-          left: calc($spacer * 0.25);
+          left: calc(var(--spacer) * 0.25);
         }
 
         &:nth-child(3) {
-          left: $spacer;
+          left: var(--spacer);
         }
 
         &:nth-child(4) {
-          left: calc($spacer * 1.75);
+          left: calc(var(--spacer) * 1.75);
         }
       }
     }
@@ -107,25 +107,25 @@
   &.loader--small {
     &.loader--ellipsis {
       & span {
-        width: calc($spacer * 0.25);
-        height: calc($spacer * 0.25);
+        width: calc(var(--spacer) * 0.25);
+        height: calc(var(--spacer) * 0.25);
 
         &:nth-child(1) {
-          left: calc($spacer * 0.125);
+          left: calc(var(--spacer) * 0.125);
         }
 
         &:nth-child(2) {
-          left: calc($spacer * 0.125);
+          left: calc(var(--spacer) * 0.125);
           animation: ellipsis2-small 0.6s infinite;
         }
 
         &:nth-child(3) {
-          left: calc($spacer * 0.5);
+          left: calc(var(--spacer) * 0.5);
           animation: ellipsis2-small 0.6s infinite;
         }
 
         &:nth-child(4) {
-          left: calc($spacer * 0.875);
+          left: calc(var(--spacer) * 0.875);
         }
       }
     }
@@ -158,7 +158,7 @@
   }
 
   100% {
-    transform: translate(calc($spacer * 0.75), 0);
+    transform: translate(calc(var(--spacer) * 0.75), 0);
   }
 }
 
@@ -178,6 +178,6 @@
   }
 
   100% {
-    transform: translate(calc($spacer * 0.375), 0);
+    transform: translate(calc(var(--spacer) * 0.375), 0);
   }
 }