claritas-web-framework 7.0.1 → 8.0.0

package/sass/modules/_button.scss

@@ -1,23 +1,62 @@
-@use "sass:color";
-@use "sass:math";
 @use "~rfs/scss" as *;
 @use "./../variables" as *;
-@use "./../functions" as *;
 @use "./../mixins" as *;
 
 .button {
   // Changing
-  --button-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / var(--body-color-a));
+  --button-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 100%);
+  --button-hover-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 100%);
+  --button-focus-color: hsl(
+    var(--body-color-h) var(--body-color-s) calc(var(--body-color-l) - #{$link-shade-percentage}) / 100%
+  );
+  --button-active-color: hsl(
+    var(--body-color-h) var(--body-color-s) calc(var(--body-color-l) - #{$link-shade-percentage}) / 100%
+  );
+  --button-disabled-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 65%);
+
   --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%);
+  --button-hover-border-color: hsl(
+    var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-hover-opacity}
+  );
+  --button-focus-border-color: hsl(
+    var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-hover-opacity}
+  );
+  --button-active-border-color: hsl(
+    var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-hover-opacity}
+  );
+  --button-disabled-border-color: hsl(
+    var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{calc($border-opacity * 0.65)}
+  );
+
+  --button-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 100%);
+  --button-hover-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 100%);
+  --button-focus-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 100%);
+  --button-active-background: hsl(var(--body-color-h) var(--body-color-s) 95% / 100%);
+  --button-disabled-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 65%);
+
+  --button-box-shadow: 0 0 0 0.125em hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 0%);
+  --button-hover-box-shadow: 0 0 0 0.125em hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 0%);
+  --button-focus-box-shadow: 0 0 0 0.125em
+    hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / #{$border-opacity});
+  --button-active-box-shadow: 0 0 0 0.125em
+    hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / #{$border-opacity});
+  --button-disabled-box-shadow: 0 0 0 0.125em 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-small-padding-x: #{$button-small-padding-x};
+  --button-small-padding-y: #{$button-small-padding-y};
+  --button-large-padding-x: #{$button-large-padding-x};
+  --button-large-padding-y: #{$button-large-padding-y};
+
   --button-border-width: 1px;
   --button-border-style: solid;
+
   --button-border-radius: var(--border-radius-medium);
+  --button-small-border-radius: var(--border-radius-small);
+  --button-large-border-radius: var(--border-radius-large);
+
   --button-font-family: #{$button-font-family};
   --button-font-weight: #{$button-font-weight};
   --button-line-height: #{$button-line-height};
@@ -39,7 +78,7 @@
   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);
+  box-shadow: var(--button-box-shadow);
 
   // Defaults
   display: inline-flex;
@@ -50,49 +89,37 @@
   cursor: pointer;
   user-select: none;
   outline: 0;
+  transition: $form-transition;
 
   &.button--large {
-    --button-padding-x: #{$button-padding-x-large};
-    --button-padding-y: #{$button-padding-y-large};
+    padding: var(--button-large-padding-y) var(--button-large-padding-x);
 
     @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);
-    }
   }
 
   &.button--small {
-    --button-padding-x: #{$button-padding-x-small};
-    --button-padding-y: #{$button-padding-y-small};
+    padding: var(--button-small-padding-y) var(--button-small-padding-x);
 
     @include rfs($button-font-size-small, --button-font-size);
     @include font-size(var(--button-font-size));
-
-    &: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}
-    );
+    color: var(--button-hover-color);
+    background: var(--button-hover-background);
+    border-color: var(--button-hover-border-color);
+    box-shadow: var(--button-hover-box-shadow);
+    text-decoration: var(--button-hover-text-decoration);
   }
 
   &:focus-visible,
   .button--switch:focus-visible + & {
-    --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});
-
+    color: var(--button-focus-color);
+    background: var(--button-focus-background);
+    border-color: var(--button-focus-border-color);
+    box-shadow: var(--button-focus-box-shadow);
     z-index: 1;
   }
 
@@ -101,30 +128,27 @@
   &:first-child:active,
   &.active,
   &.show {
-    --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}
-    );
+    color: var(--button-active-color);
+    background: var(--button-active-background);
+    border-color: var(--button-active-border-color);
+    box-shadow: var(--button-active-box-shadow);
   }
 
   &.button--link {
-    @include button-variant-link($color-title: "primary", $shade: $link-shade-percentage);
+    @include button-variant-link("primary");
   }
 
   &.button--unstyled {
-    @include button-variant-unstyled($color-title: "body-color", $shade: $link-shade-percentage);
+    @include button-variant-unstyled("body-color");
   }
 
   &:disabled,
   &.disabled,
   fieldset:disabled & {
-    opacity: $button-disabled-opacity;
+    color: var(--button-disabled-color);
+    background: var(--button-disabled-background);
+    border-color: var(--button-disabled-border-color);
+    box-shadow: var(--button-disabled-box-shadow);
     pointer-events: none;
   }
 }
@@ -138,67 +162,19 @@
 }
 
 @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-hover-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};
-    }
+    @include button-variant($key, $value);
 
     &.button--outline {
-      @include button-variant-outline(
-        $color-title: $key,
-        $border-color-hover: $border-color-hover,
-        $background-active: $background-active
-      );
+      @include button-variant-outline($key);
     }
 
     &.button--link {
-      @include button-variant-link($color-title: $key, $shade: $link-shade-percentage);
+      @include button-variant-link($key);
     }
 
     &.button--unstyled {
-      @include button-variant-unstyled($color-title: $key, $shade: $link-shade-percentage);
+      @include button-variant-unstyled($key);
     }
   }
 }

package/sass/modules/_card.scss

@@ -2,12 +2,19 @@
 @use "./../variables" as *;
 @use "./../mixins/group" as *;
 
-%card {
-  border-width: $card-border-width;
-  border-style: $card-border-style;
-  border-color: $card-border-color;
-  background-color: $card-background-color;
-  border-radius: $card-border-radius;
+.card {
+  --card-background: var(--white);
+  --card-hover-background: hsl(
+    var(--body-color-h) var(--body-color-s) calc(var(--body-color-l) - #{$link-shade-percentage}) / 100%
+  );
+  --card-border-width: 1px;
+  --card-border-style: solid;
+  --card-border-color: hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity});
+  --card-border-radius: var(--border-radius-medium);
+
+  background-color: var(--card-background);
+  border: var(--card-border-width) var(--card-border-style) var(--card-border-color);
+  border-radius: var(--card-border-radius);
   display: flex;
   flex-direction: column;
   min-width: 0;
@@ -23,71 +30,49 @@
 
   & > * {
     &:first-child {
-      @if $card-border-radius > 0 {
-        border-top-left-radius: calc($card-border-radius - 1px);
-        border-top-right-radius: calc($card-border-radius - 1px);
-      }
+      border-top-left-radius: calc(var(--card-border-radius) - 1px);
+      border-top-right-radius: calc(var(--card-border-radius) - 1px);
     }
 
     &:last-child {
-      @if $card-border-radius > 0 {
-        border-bottom-left-radius: calc($card-border-radius - 1px);
-        border-bottom-right-radius: calc($card-border-radius - 1px);
-      }
+      border-bottom-left-radius: calc(var(--card-border-radius) - 1px);
+      border-bottom-right-radius: calc(var(--card-border-radius) - 1px);
     }
   }
-}
-
-%card-header-footer {
-  display: flex;
-  flex-flow: row wrap;
-  align-items: normal;
-  padding: $card-header-footer-padding;
-
-  & > * {
-    margin-bottom: 0;
-  }
-}
-
-%card-header {
-  flex: 0 1 auto;
-  border-bottom: 1px solid $card-border-color;
-}
-
-%card-footer {
-  margin-top: auto;
-  flex: 0 0 auto;
-  border-top: 1px solid $card-border-color;
-}
-
-%card-body {
-  flex: 0 0 auto;
-  width: 100%;
-  padding: $card-body-padding;
-
-  & + .card--body {
-    border-top: 1px solid $card-border-color;
-  }
-}
-
-.card {
-  @extend %card;
 
   & .card--header,
   & .card--footer {
-    @extend %card-header-footer;
+    background-color: var(--card-background);
+    display: flex;
+    flex-flow: row wrap;
+    align-items: normal;
+    padding: $card-header-footer-padding;
+
+    & > * {
+      margin-bottom: 0;
+    }
   }
 
   & .card--header {
-    @extend %card-header;
+    flex: 0 1 auto;
+    border-bottom: var(--card-border-width) var(--card-border-style) var(--card-border-color);
   }
 
   & .card--footer {
-    @extend %card-footer;
+    margin-top: auto;
+    flex: 0 0 auto;
+    border-top: var(--card-border-width) var(--card-border-style) var(--card-border-color);
   }
 
   & .card--body {
-    @extend %card-body;
+    background-color: var(--card-background);
+    flex: 0 0 auto;
+    width: 100%;
+    padding: var(--spacer);
+
+    & + .card--body {
+      border-top: var(--card-border-width) var(--card-border-style) var(--card-border-color);
+    }
   }
 
   & .card--image {
@@ -106,13 +91,13 @@ details.card {
     border-bottom-color: transparent;
 
     &:hover {
-      background-color: rgba($black, 5%);
+      background-color: var(--card-hover-background);
     }
   }
 
   &[open] {
     & .card--header {
-      border-bottom-color: $card-border-color;
+      border-bottom-color: var(--card-border-color);
     }
   }
 }

package/sass/modules/_close.scss

@@ -4,9 +4,19 @@
 .close {
   --close-border-radius: #{$close-border-radius};
   --close-height: #{$close-height};
+  --close-small-height: #{$close-small-height};
+  --close-large-height: #{$close-large-height};
   --close-width: #{$close-width};
+  --close-small-width: #{$close-small-width};
+  --close-large-width: #{$close-large-width};
   --close-background-color: #{$close-background-color};
+  --close-hover-background-color: #{$close-hover-background-color};
+  --close-light-background-color: #{$close-background-color-light};
+  --close-light-hover-background-color: #{$close-hover-background-color-light};
   --close-background-image: #{escape-svg($close-indicator)};
+  --close-hover-background-image: #{escape-svg($close-hover-indicator)};
+  --close-light-background-image: #{escape-svg($close-indicator-light)};
+  --close-light-hover-background-image: #{escape-svg($close-hover-indicator-light)};
 
   border-radius: var(--close-border-radius);
   height: var(--close-height);
@@ -23,27 +33,27 @@
   cursor: pointer;
 
   &:hover {
-    --close-background-color: #{$close-hover-background-color};
-    --close-background-image: #{escape-svg($close-hover-indicator)};
+    background-color: var(--close-hover-background-color);
+    background-image: var(--close-hover-background-image);
   }
 
   &.close--large {
-    --close-height: #{$close-height-large};
-    --close-width: #{$close-width-large};
+    height: var(--close-large-width);
+    width: var(--close-large-width);
   }
 
   &.close--small {
-    --close-height: #{$close-height-small};
-    --close-width: #{$close-width-small};
+    height: var(--close-small-width);
+    width: var(--close-small-width);
   }
 
   &.close--light {
-    --close-background-color: #{$close-background-color-light};
-    --close-background-image: #{escape-svg($close-indicator-light)};
+    background-color: var(--close-light-background-color);
+    background-image: var(--close-light-background-image);
 
     &:hover {
-      --close-background-color: #{$close-hover-background-color-light};
-      --close-background-image: #{escape-svg($close-hover-indicator-light)};
+      background-color: var(--close-light-hover-background-color);
+      background-image: var(--close-light-hover-background-image);
     }
   }
 }

package/sass/modules/_details.scss

@@ -1,4 +1,5 @@
 @use "./../variables" as *;
+@use "./../mixins/caret" as *;
 
 details {
   @if $enable-margins {
@@ -10,26 +11,12 @@ details {
   & summary {
     position: relative;
     list-style: none;
-    padding-left: calc($spacer * 1.5);
+    padding-left: calc(var(--spacer) * 1.5);
 
-    &:focus {
-      outline: none;
-    }
+    @include make-caret-down($left: true, $color: "primary");
 
-    &::before {
-      pointer-events: none;
+    &:focus {
       outline: none;
-      transform: none;
-      position: absolute;
-      content: "";
-      left: 0;
-      top: calc(50% - 0.125em);
-      width: 0;
-      height: 0;
-      border-left: 0.25em solid transparent;
-      border-right: 0.25em solid transparent;
-      border-top: 0.25em solid $details-caret-color;
-      border-bottom: 0 none;
     }
 
     &::marker {
@@ -42,10 +29,10 @@ details {
     }
 
     &.card--header {
-      padding-left: calc($spacer * 2) !important;
+      padding-left: calc(var(--spacer) * 2) !important;
 
       &::before {
-        left: calc($spacer * 0.75);
+        left: calc(var(--spacer) * 0.75);
       }
     }
   }
@@ -54,12 +41,7 @@ details {
     height: auto;
 
     & summary {
-      &::before {
-        border-left: 0.25em solid transparent;
-        border-right: 0.25em solid transparent;
-        border-bottom: 0.25em solid $details-caret-color;
-        border-top: 0 none;
-      }
+      @include make-caret-up($left: true, $color: "primary");
     }
   }
 }

package/sass/modules/_dialog.scss

@@ -2,7 +2,7 @@
 @use "./../variables" as *;
 
 .dialog {
-  padding: $spacer;
+  padding: var(--spacer);
   background-color: transparent;
   border: 0 none;
   max-width: 100%;
@@ -14,14 +14,14 @@
   }
 
   &::backdrop {
-    background-color: rgba($black, 65%);
-    backdrop-filter: blur(4px);
+    background: $modal-open-background;
+    backdrop-filter: blur($modal-background-blur);
   }
 
   & .close {
     position: absolute;
-    right: calc($spacer * 0.5);
-    top: calc($spacer * 0.5);
+    right: calc(var(--spacer) * 0.5);
+    top: calc(var(--spacer) * 0.5);
     z-index: 1;
   }
 

package/sass/modules/_dropdown.scss

@@ -1,4 +1,4 @@
-@use "sass:color";
+// @use "sass:color";
 @use "./../variables" as *;
 @use "./../mixins/caret" as *;
 
@@ -6,67 +6,39 @@
   display: inline-flex;
   position: relative;
   vertical-align: top;
-  z-index: $zindex-dropdown;
+  z-index: var(--zindex-dropdown);
 
-  & .dropdown--trigger {
-    &.has-caret {
-      @include make-caret-down($body-color);
-
-      padding: calc(($spacer * 0.5) - 1.5px) calc($spacer * 2) calc(($spacer * 0.5) - 1.5px) $spacer;
-
-      &::after {
-        right: calc($spacer * 0.75);
-      }
-    }
-
-    &[data-active="true"],
-    &:focus,
-    &:hover {
-      & ~ .nav {
-        display: flex;
-      }
-    }
-
-    &.dropdown--right {
-      & ~ .nav {
-        right: 0;
-        left: auto;
-      }
+  &[data-active="true"],
+  &:focus,
+  &:hover {
+    & .nav {
+      display: flex;
     }
+  }
 
-    & ~ .nav {
-      display: none;
-      position: absolute;
-      flex-direction: column;
-      top: 100%;
-      left: 0;
-      padding: calc($spacer * 0.5) 0;
-      background-color: $white;
-      border: 1px solid rgba($border-color-main, $border-opacity);
-      box-shadow: $box-shadow-small;
-      border-radius: $border-radius-default;
-      align-items: stretch;
-      min-width: calc($spacer * 10);
-
-      & > * {
-        padding: calc($spacer * 0.25) calc($spacer * 0.75);
-        white-space: nowrap;
-      }
+  & .button--dropdown {
+    padding-right: calc($button-padding-x + (var(--spacer) * 0.75));
 
-      & > hr,
-      & > .hr {
-        margin-bottom: calc($spacer * 0.5);
-        margin-top: calc($spacer * 0.5);
-        padding: 0;
-      }
-    }
+    @include make-caret-down;
   }
 
-  &[data-active="true"],
-  &:focus,
-  &:hover {
-    & > .nav {
-      display: flex;
+  & .nav {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    padding: calc(var(--spacer) * 0.25) 0;
+    background-color: var(--white);
+    border: 1px solid hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity});
+    box-shadow: var(--box-shadow-small);
+    border-radius: var(--border-radius-medium);
+    align-items: stretch;
+    min-width: calc(var(--spacer) * 10);
+    flex-flow: column nowrap;
+
+    & .nav--item {
+      text-align: left;
+      justify-content: flex-start;
     }
   }
 }