claritas-web-framework 6.2.72 → 6.3.0

package/sass/modules/_button.scss

@@ -1,91 +1,99 @@
 @use "sass:color";
-
+@use "sass:math";
+@use "~rfs/scss" as *;
 @use "./../variables" as *;
 @use "./../functions" as *;
 @use "./../mixins" as *;
 
 .button {
-  --#{$prefix}button-padding-x: #{$button-padding-x};
-  --#{$prefix}button-padding-y: #{$button-padding-y};
-  --#{$prefix}button-font-family: #{$button-font-family};
-  @include rfs($button-font-size, --#{$prefix}button-font-size);
-
-  --#{$prefix}button-font-weight: #{$button-font-weight};
-  --#{$prefix}button-line-height: #{$button-line-height};
-  --#{$prefix}button-color: #{$body-color};
-  --#{$prefix}button-background: #{$button-background};
-  --#{$prefix}button-border-width: #{$button-border-width};
-  --#{$prefix}button-border-style: #{$button-border-style};
-  --#{$prefix}button-border-color: #{$button-border-color};
-  --#{$prefix}button-border-radius: #{$button-border-radius};
-  --#{$prefix}button-hover-border-color: #{$button-hover-border-color};
-  --#{$prefix}button-active-border-color: #{$button-active-border-color};
-  --#{$prefix}button-box-shadow: #{$button-box-shadow};
-  --#{$prefix}button-disabled-opacity: #{$button-disabled-opacity};
-  --#{$prefix}button-focus-box-shadow: 0 0 #{$input-button-focus-blur} #{$input-button-focus-width}
-    var(--#{$prefix}button-border-color);
-  --#{$prefix}button-text-decoration: none;
-  --#{$prefix}button-hover-text-decoration: none;
-
+  // Changing
+  --button-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / var(--body-color-a));
+  --button-border-color: hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity});
+  --button-background: hsl(var(--body-color-h) var(--body-color-s) #{$button-background-l} / var(--body-color-a));
+  --button-box-shadow-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 0%);
+
+  // Static
+  --button-padding-x: #{$button-padding-x};
+  --button-padding-y: #{$button-padding-y};
+  --button-border-width: 1px;
+  --button-border-style: solid;
+  --button-border-radius: var(--border-radius-medium);
+
+  --button-font-family: #{$button-font-family};
+  --button-font-weight: #{$button-font-weight};
+  --button-line-height: #{$button-line-height};
+  --button-text-decoration: none;
+  --button-white-space: #{$button-white-space};
+
+  @include rfs($button-font-size, --button-font-size);
+  @include font-size(var(--button-font-size));
+
+  // Variable references
+  padding: var(--button-padding-y) var(--button-padding-x);
+  border: var(--button-border-width) var(--button-border-style) var(--button-border-color);
+  border-radius: var(--button-border-radius);
+  background: var(--button-background);
+  color: var(--button-color);
+  font-family: var(--button-font-family);
+  font-weight: var(--button-font-weight);
+  line-height: var(--button-line-height);
+  text-decoration: var(--button-text-decoration);
+  white-space: var(--button-white-space);
+  box-shadow: 0 0 0 0.125em var(--button-box-shadow-color);
+
+  // Defaults
   display: inline-flex;
-  padding: var(--#{$prefix}button-padding-y) var(--#{$prefix}button-padding-x);
-  font-family: var(--#{$prefix}button-font-family);
-  @include font-size(var(--#{$prefix}button-font-size));
-
-  font-weight: var(--#{$prefix}button-font-weight);
-  line-height: var(--#{$prefix}button-line-height);
-  color: var(--#{$prefix}button-color);
   text-align: center;
   align-items: center;
   justify-content: center;
-  text-decoration: var(--#{$prefix}button-text-decoration);
-  white-space: $button-white-space;
   vertical-align: middle;
-  cursor: if($enable-button-pointers, pointer, null);
+  cursor: pointer;
   user-select: none;
-  border: var(--#{$prefix}button-border-width) var(--#{$prefix}button-border-style) var(--#{$prefix}button-border-color);
-  @include border-radius(var(--#{$prefix}button-border-radius));
-  @include gradient-background(var(--#{$prefix}button-background));
-  @include box-shadow(var(--#{$prefix}button-box-shadow));
-  @include transition($button-transition);
-
-  &:hover {
-    color: var(--#{$prefix}button-hover-color);
-    text-decoration: var(--#{$prefix}button-hover-text-decoration);
-    background-color: var(--#{$prefix}button-hover-background);
-    border-color: var(--#{$prefix}button-hover-border-color);
-  }
+  outline: 0;
 
-  .button--switch + &:hover {
-    color: var(--#{$prefix}button-hover-color);
-    text-decoration: var(--#{$prefix}button-hover-text-decoration);
-    background-color: var(--#{$prefix}button-hover-background);
-    border-color: var(--#{$prefix}button-hover-border-color);
+  &.button--large {
+    --button-padding-x: #{$button-padding-x-large};
+    --button-padding-y: #{$button-padding-y-large};
+
+    @include rfs($button-font-size-large, --button-font-size);
+    @include font-size(var(--button-font-size));
+
+    &:not(.button--unstyled) {
+      --button-border-radius: var(--border-radius-large);
+    }
   }
 
-  &:focus-visible {
-    color: var(--#{$prefix}button-hover-color);
-    @include gradient-background(var(--#{$prefix}button-hover-background));
+  &.button--small {
+    --button-padding-x: #{$button-padding-x-small};
+    --button-padding-y: #{$button-padding-y-small};
 
-    border-color: var(--#{$prefix}button-hover-border-color);
-    outline: 0;
+    @include rfs($button-font-size-small, --button-font-size);
+    @include font-size(var(--button-font-size));
 
-    @if $enable-shadows {
-      box-shadow: var(--#{$prefix}button-box-shadow), var(--#{$prefix}button-focus-box-shadow);
-    } @else {
-      box-shadow: var(--#{$prefix}button-focus-box-shadow);
+    &:not(.button--unstyled) {
+      --button-border-radius: var(--border-radius-small);
     }
   }
 
+  &:hover,
+  .button--switch + &:hover {
+    --button-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / var(--body-color-a));
+    --button-text-decoration: none;
+    --button-background: hsl(var(--body-color-h) var(--body-color-s) #{$button-background-l} / var(--body-color-a));
+    --button-border-color: hsl(
+      var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-hover-opacity}
+    );
+  }
+
+  &:focus-visible,
   .button--switch:focus-visible + & {
-    border-color: var(--#{$prefix}button-hover-border-color);
-    outline: 0;
+    --button-color: hsl(
+      var(--body-color-h) var(--body-color-s) calc(var(--body-color-l) - #{$link-shade-percentage}) /
+        var(--body-color-a)
+    );
+    --button-box-shadow-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / #{$border-opacity});
 
-    @if $enable-shadows {
-      box-shadow: var(--#{$prefix}button-box-shadow), var(--#{$prefix}button-focus-box-shadow);
-    } @else {
-      box-shadow: var(--#{$prefix}button-focus-box-shadow);
-    }
+    z-index: 1;
   }
 
   .button--switch:checked + &,
@@ -93,122 +101,104 @@
   &:first-child:active,
   &.active,
   &.show {
-    color: var(--#{$prefix}button-active-color);
-    background-color: var(--#{$prefix}button-active-background);
-    background-image: if($enable-gradients, none, null);
-    border-color: var(--#{$prefix}button-active-border-color);
-    @include box-shadow(var(--#{$prefix}button-active-shadow));
-
-    &:focus-visible {
-      @if $enable-shadows {
-        box-shadow: var(--#{$prefix}button-active-shadow), var(--#{$prefix}button-focus-box-shadow);
-      } @else {
-        box-shadow: var(--#{$prefix}button-focus-box-shadow);
-      }
-    }
+    --button-color: hsl(
+      var(--body-color-h) var(--body-color-s) calc(var(--body-color-l) - #{$link-shade-percentage}) /
+        var(--body-color-a)
+    );
+    --button-background: hsl(
+      var(--body-color-h) var(--body-color-s) #{$button-active-background-l} / var(--body-color-a)
+    );
+    --button-border-color: hsl(
+      var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-hover-opacity}
+    );
+  }
+
+  &.button--link {
+    @include button-variant-link($color-title: "primary", $shade: $link-shade-percentage);
+  }
+
+  &.button--unstyled {
+    @include button-variant-unstyled($color-title: "body-color", $shade: $link-shade-percentage);
   }
 
   &:disabled,
   &.disabled,
   fieldset:disabled & {
-    color: var(--#{$prefix}button-disabled-color);
+    opacity: $button-disabled-opacity;
     pointer-events: none;
-    background-color: var(--#{$prefix}button-disabled-background);
-    background-image: if($enable-gradients, none, null);
-    border-color: var(--#{$prefix}button-disabled-border-color);
-    opacity: var(--#{$prefix}button-disabled-opacity);
-    @include box-shadow(none);
-  }
-
-  &.button--outline {
-    @include button-outline-variant($body-color);
   }
+}
 
-  &.button--link {
-    @include button-link-variant($body-color);
-  }
+.buttons {
+  @include make-group-row;
 
-  &.button--unstyled {
-    @include button-unstyled-variant($body-color);
+  &.buttons--grouped {
+    @include make-grouped-row(".button");
   }
 }
 
-//
-// Alternate buttons
-//
-
-@each $color, $value in $all-colors {
-  .button.button--#{$color} {
-    @if $color == "light" {
-      @include button-variant(
-        $value,
-        $button-border-color,
-        $hover-background: color.mix(black, $value, $button-hover-background-shade-amount),
-        $hover-border: color.mix(black, $value, $button-hover-border-shade-amount),
-        $active-background: color.mix(black, $value, $button-active-background-shade-amount),
-        $active-border: color.mix(black, $value, $button-active-border-shade-amount)
-      );
-    } @else if $color == "dark" {
-      @include button-variant(
-        $value,
-        $button-border-color,
-        $hover-background: color.mix(white, $value, $button-hover-background-tint-amount),
-        $hover-border: color.mix(white, $value, $button-hover-border-tint-amount),
-        $active-background: color.mix(white, $value, $button-active-background-tint-amount),
-        $active-border: color.mix(white, $value, $button-active-border-tint-amount)
-      );
-    } @else {
-      @include button-variant($value, $button-border-color);
+@each $key, $value in $all-colors {
+  $color: color-flip($key, $value, $button-color-flip-threshold, $button-color-flip-l);
+  $border-color: hsl(
+    var(--#{$key}-h) var(--#{$key}-s) calc(var(--#{$key}-l) - #{$color-variant-border-l}) / #{$color-variant-border-a}
+  );
+  $border-color-hover: hsl(
+    var(--#{$key}-h)
+      var(--#{$key}-s)
+      calc(var(--#{$key}-l) - #{$color-variant-border-l}) /
+      #{$color-variant-hover-border-a}
+  );
+  $background: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / var(--#{$key}-a));
+  $background-hover: hsl(
+    var(--#{$key}-h) var(--#{$key}-s) calc(var(--#{$key}-l) - #{$button-hover-background-l}) / var(--#{$key}-a)
+  );
+  $background-active: hsl(
+    var(--#{$key}-h) var(--#{$key}-s) calc(var(--#{$key}-l) - #{$button-background-l}) / var(--#{$key}-a)
+  );
+
+  .button--#{$key} {
+    --button-color: #{$color};
+    --button-border-color: #{$border-color};
+    --button-background: #{$background};
+    --button-box-shadow-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 0%);
+
+    &:hover,
+    .button--switch + &:hover {
+      --button-color: #{$color};
+      --button-background: #{$background-hover};
+      --button-border-color: #{$border-color-hover};
+    }
+
+    &:focus-visible,
+    .button--switch:focus-visible + & {
+      --button-color: #{$color};
+      --button-box-shadow-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / #{$color-variant-border-a});
+    }
+
+    .button--switch:checked + &,
+    :not(.button--switch) + &:active,
+    &:first-child:active,
+    &.active,
+    &.show {
+      --button-color: #{$color};
+      --button-background: #{$background-active};
+      --button-border-color: #{$border-color-hover};
     }
 
     &.button--outline {
-      @include button-outline-variant($value);
+      @include button-variant-outline(
+        $color-title: $key,
+        $border-color-hover: $border-color-hover,
+        $background-active: $background-active
+      );
     }
 
     &.button--link {
-      @include button-link-variant($value);
+      @include button-variant-link($color-title: $key, $shade: $link-shade-percentage);
     }
 
     &.button--unstyled {
-      @include button-unstyled-variant($value);
+      @include button-variant-unstyled($color-title: $key, $shade: $link-shade-percentage);
     }
   }
 }
-
-//
-// Button Sizes
-//
-
-.button--large {
-  @include button-size(
-    $button-padding-y-large,
-    $button-padding-x-large,
-    $button-font-size-large,
-    $button-border-radius-large
-  );
-
-  &.button--unstyled {
-    @include button-size(0, 0, $button-font-size-large, 0);
-  }
-}
-
-.button--small {
-  @include button-size(
-    $button-padding-y-small,
-    $button-padding-x-small,
-    $button-font-size-small,
-    $button-border-radius-small
-  );
-
-  &.button--unstyled {
-    @include button-size(0, 0, $button-font-size-small, 0);
-  }
-}
-
-.buttons {
-  @include make-group-row;
-
-  &.buttons--grouped {
-    @include make-grouped-row(".button");
-  }
-}

package/sass/modules/_card.scss

@@ -1,5 +1,4 @@
 @use "sass:color";
-
 @use "./../variables" as *;
 @use "./../mixins/group" as *;
 
@@ -17,7 +16,7 @@
   position: relative;
 
   @if $enable-margins {
-    margin-bottom: $spacer;
+    margin-bottom: var(--spacer);
   } @else {
     margin-bottom: 0;
   }

package/sass/modules/_close.scss

@@ -2,18 +2,17 @@
 @use "./../functions" as *;
 
 .close {
-  --#{$prefix}close-border-radius: #{$close-border-radius};
-  --#{$prefix}close-height: #{$close-height};
-  --#{$prefix}close-width: #{$close-width};
-  --#{$prefix}close-background-color: #{$close-background-color};
-  --#{$prefix}close-background-image: #{escape-svg($close-indicator)};
-
-  border-radius: var(--#{$prefix}close-border-radius);
-  height: var(--#{$prefix}close-height);
-  width: var(--#{$prefix}close-width);
-  background-color: var(--#{$prefix}close-background-color);
-  background-image: var(--#{$prefix}close-background-image);
-
+  --close-border-radius: #{$close-border-radius};
+  --close-height: #{$close-height};
+  --close-width: #{$close-width};
+  --close-background-color: #{$close-background-color};
+  --close-background-image: #{escape-svg($close-indicator)};
+
+  border-radius: var(--close-border-radius);
+  height: var(--close-height);
+  width: var(--close-width);
+  background-color: var(--close-background-color);
+  background-image: var(--close-background-image);
   background-size: 50% auto;
   background-repeat: no-repeat;
   background-position: center;
@@ -24,27 +23,27 @@
   cursor: pointer;
 
   &:hover {
-    --#{$prefix}close-background-color: #{$close-hover-background-color};
-    --#{$prefix}close-background-image: #{escape-svg($close-hover-indicator)};
+    --close-background-color: #{$close-hover-background-color};
+    --close-background-image: #{escape-svg($close-hover-indicator)};
   }
 
   &.close--large {
-    --#{$prefix}close-height: #{$close-height-large};
-    --#{$prefix}close-width: #{$close-width-large};
+    --close-height: #{$close-height-large};
+    --close-width: #{$close-width-large};
   }
 
   &.close--small {
-    --#{$prefix}close-height: #{$close-height-small};
-    --#{$prefix}close-width: #{$close-width-small};
+    --close-height: #{$close-height-small};
+    --close-width: #{$close-width-small};
   }
 
   &.close--light {
-    --#{$prefix}close-background-color: #{$close-background-color-light};
-    --#{$prefix}close-background-image: #{escape-svg($close-indicator-light)};
+    --close-background-color: #{$close-background-color-light};
+    --close-background-image: #{escape-svg($close-indicator-light)};
 
     &:hover {
-      --#{$prefix}close-background-color: #{$close-hover-background-color-light};
-      --#{$prefix}close-background-image: #{escape-svg($close-hover-indicator-light)};
+      --close-background-color: #{$close-hover-background-color-light};
+      --close-background-image: #{escape-svg($close-hover-indicator-light)};
     }
   }
 }

package/sass/modules/_details.scss

@@ -2,7 +2,7 @@
 
 details {
   @if $enable-margins {
-    margin-bottom: $spacer;
+    margin-bottom: var(--spacer);
   } @else {
     margin-bottom: 0;
   }

package/sass/modules/_dialog.scss

@@ -1,5 +1,4 @@
 @use "sass:color";
-
 @use "./../variables" as *;
 
 .dialog {

package/sass/modules/_dropdown.scss

@@ -1,5 +1,4 @@
 @use "sass:color";
-
 @use "./../variables" as *;
 @use "./../mixins/caret" as *;
 

package/sass/modules/_form.scss

@@ -1,5 +1,4 @@
 @use "sass:color";
-
 @use "./../variables" as *;
 @use "./../functions" as *;
 
@@ -9,7 +8,7 @@
 
 .form--field {
   @if $enable-margins {
-    margin-bottom: $spacer;
+    margin-bottom: var(--spacer);
   } @else {
     margin-bottom: 0;
   }

package/sass/modules/_list.scss

@@ -1,5 +1,4 @@
 @use "sass:color";
-
 @use "./../variables" as *;
 @use "./../functions" as *;
 @use "./../mixins/list" as *;
@@ -14,7 +13,7 @@
 
 dl {
   @if $enable-margins {
-    margin-bottom: $spacer;
+    margin-bottom: var(--spacer);
   } @else {
     margin-bottom: 0;
   }
@@ -70,7 +69,7 @@ dl {
     border: 1px solid rgba($border-color-main, $border-opacity);
 
     @if $enable-margins {
-      margin-bottom: $spacer;
+      margin-bottom: var(--spacer);
     } @else {
       margin-bottom: 0;
     }

package/sass/modules/_loader.scss

@@ -151,6 +151,7 @@
     transform: scale(1);
   }
 }
+
 @keyframes ellipsis2 {
   0% {
     transform: translate(0, 0);
@@ -160,6 +161,7 @@
     transform: translate(calc($spacer * 0.75), 0);
   }
 }
+
 @keyframes ellipsis3 {
   0% {
     transform: scale(1);
@@ -169,6 +171,7 @@
     transform: scale(0);
   }
 }
+
 @keyframes ellipsis2-small {
   0% {
     transform: translate(0, 0);

package/sass/modules/_modal.scss

@@ -1,5 +1,4 @@
 @use "sass:color";
-
 @use "./../variables" as *;
 
 .modal {

package/sass/modules/_nav.scss

@@ -1,5 +1,4 @@
 @use "sass:color";
-
 @use "./../variables" as *;
 
 .nav {
@@ -11,7 +10,7 @@
   align-items: center;
 
   @if $enable-margins {
-    margin-bottom: $spacer;
+    margin-bottom: var(--spacer);
   } @else {
     margin-bottom: 0;
   }

package/sass/modules/_pill.scss

@@ -1,40 +1,61 @@
 @use "sass:color";
-
+@use "~rfs/scss" as *;
 @use "./../variables" as *;
 @use "./../functions" as *;
 @use "./../mixins/group" as *;
-@use "./../mixins/pill" as *;
 
 .pill {
-  border: 1px solid $pill-border-color;
-  color: $pill-color;
-  background-color: $pill-background;
-  border-radius: $border-radius-round;
-  padding: calc(($spacer * 0.125) - 1px) calc($spacer * 0.25);
-  line-height: 1;
-  font-weight: 700;
+  --pill-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / var(--body-color-a));
+  --pill-border-color: hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity});
+  --pill-background: hsl(var(--white-h) var(--white-s) var(--white-l) / var(--white-a));
+  --pill-box-shadow-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 0%);
+
+  // Static
+  --pill-padding-x: #{$pill-padding-x};
+  --pill-padding-y: #{$pill-padding-y};
+  --pill-border-width: 1px;
+  --pill-border-style: solid;
+  --pill-border-radius: var(--border-radius-round);
+
+  --pill-font-family: #{$pill-font-family};
+  --pill-font-weight: #{$pill-font-weight};
+  --pill-line-height: #{$pill-line-height};
+  --pill-text-decoration: none;
+  --pill-white-space: #{$pill-white-space};
+
+  @include rfs($pill-font-size, --pill-font-size);
+  @include font-size(var(--pill-font-size));
+
+  color: var(--pill-color);
+  padding: var(--pill-padding-y) var(--pill-padding-x);
+  border: var(--pill-border-width) var(--pill-border-style) var(--pill-border-color);
+  border-radius: var(--pill-border-radius);
+  background: var(--pill-background);
+  font-family: var(--pill-font-family);
+  font-weight: var(--pill-font-weight);
+  line-height: var(--pill-line-height);
+  text-decoration: var(--pill-text-decoration);
+  white-space: var(--pill-white-space);
+  box-shadow: 0 0 0 0.125em var(--pill-box-shadow-color);
+
   display: inline-flex;
   align-items: center;
   vertical-align: top;
   justify-content: center;
-  white-space: nowrap;
   height: auto;
   min-width: $spacer;
   outline: 0;
-  text-decoration: none;
-  font-size: $font-size-small;
-
-  &.pill--button {
-    cursor: pointer;
-
-    &:not(:disabled, .disabled) {
-      &:focus,
-      &:hover {
-        background-color: color.mix(black, $light, 10%);
-        color: color.mix(black, $body-color, $link-shade-percentage);
-        text-decoration: none;
-      }
-    }
+}
+
+@each $key, $value in $all-colors {
+  $color: color-flip($key, $value, $pill-color-flip-threshold, $pill-color-flip-l);
+
+  .pill--#{$key} {
+    --pill-color: #{$color};
+    --pill-border-color: hsl(
+      var(--#{$key}-h) var(--#{$key}-s) calc(var(--#{$key}-l) - #{$color-variant-border-l}) / #{$color-variant-border-a}
+    );
+    --pill-background: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / var(--#{$key}-a));
   }
 }
 
@@ -51,9 +72,3 @@
     @include make-grouped-row(".pill");
   }
 }
-
-@each $color, $value in $all-colors {
-  .pill--#{$color} {
-    @include pill-variant($value, color-contrast($value));
-  }
-}