claritas-web-framework 6.2.72 → 6.3.0

package/sass/mixins/_tag.scss

@@ -1,30 +1,52 @@
 @use "sass:color";
-
 @use "./../variables" as *;
 @use "./../functions" as *;
+@use "./../mixins/colors" as *;
 @use "./../mixins/gradient" as *;
 
-@mixin tag-variant(
-  $background,
-  $color,
-  $hover-background:
-    if(
-      $color == $color-contrast-light,
-      color.mix(black, $background, $button-hover-background-shade-amount),
-      color.mix(white, $background, $button-hover-background-tint-amount)
-    ),
-  $hover-color: color-contrast($hover-background)
-) {
-  color: $color;
-  @include gradient-background($background);
-
-  &.tag--link {
-    color: $color;
-    @include gradient-background($background);
-
-    &:hover {
-      color: $hover-color;
-      background-color: $hover-background;
-    }
-  }
+@mixin tag-variant($background, $lightness) {
+  // @include make-background-color($value: $background, $title: "tag-");
+
+  // @if  $lightness < $lightness-value {
+  //   @include make-color($value: "white", $shade: 0, $title: "tag-");
+  // } @else {
+  //   @include make-color($value: "dark", $shade: 0, $title: "tag-");
+  // }
+
+  // &.tag--link {
+  //   @include make-link-color("body-color", $shade: $link-shade-value, $title: "tag-");
+
+  //   cursor: pointer;
+
+  //   &:hover {
+  //     text-decoration: none;
+  //   }
+  // }
 }
+
+// @mixin tag-variant(
+//   $background,
+//   $color,
+//   $hover-background:
+//     if(
+//       $color == $color-contrast-light,
+//       color.mix(black, $background, $button-hover-background-shade-amount),
+//       color.mix(white, $background, $button-hover-background-tint-amount)
+//     ),
+//   $hover-color: color-contrast($hover-background)
+// ) {
+//   color: $color;
+
+//   @include gradient-background($background);
+
+//   &.tag--link {
+//     color: $color;
+
+//     @include gradient-background($background);
+
+//     &:hover {
+//       color: $hover-color;
+//       background-color: $hover-background;
+//     }
+//   }
+// }

package/sass/mixins/_transition.scss

@@ -7,14 +7,14 @@
 
   @if length($transition) > 1 {
     @each $value in $transition {
-      @if $value == null or $value == none {
+      @if not $value or $value == none {
         @warn "The keyword 'none' or 'null' must be used as a single argument.";
       }
     }
   }
 
   @if $enable-transitions {
-    @if nth($transition, 1) != null {
+    @if nth($transition, 1) {
       transition: $transition;
     }
 

package/sass/modules/_alert.scss

@@ -1,19 +1,36 @@
 @use "sass:color";
-
 @use "./../variables" as *;
-@use "./../functions" as *;
-@use "./../mixins/alert" as *;
 
 .alert {
-  border: 1px solid rgba($border-color-main, $border-opacity);
-  padding: $spacer;
-  border-radius: $border-radius-default;
-  background-color: color.mix(white, $body-color, 87.5%);
-  color: $body-color;
+  --alert-padding-x: var(--spacer);
+  --alert-padding-y: var(--spacer);
+  --alert-border-width: 1px;
+  --alert-border-style: solid;
+  --alert-border-color: hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity});
+  --alert-border-radius: var(--border-radius-default);
+  --alert-background: hsl(var(--body-color-h) var(--body-color-s) #{$alert-background-l} / var(--body-color-a));
+  --alert-color: hsl(var(--body-color-h) var(--body-color-s) #{$alert-color-l} / var(--body-color-a));
+  --alert-link-color: hsl(var(--body-color-h) var(--body-color-s) #{$alert-color-l} / var(--body-color-a));
+  --alert-link-hover-color: hsl(
+    var(--body-color-h) var(--body-color-s) calc(#{$alert-color-l} - #{$link-shade-percentage}) / var(--body-color-a)
+  );
+
+  @each $key in (1, 2, 3, 4, 5, 6) {
+    h#{$key},
+    .h#{$key} {
+      --color: var(--alert-color);
+    }
+  }
+
+  color: var(--alert-color);
+  border: var(--alert-border-width) var(--alert-border-style) var(--alert-border-color);
+  padding: var(--alert-padding-y) var(--alert-padding-x);
+  border-radius: var(--alert-border-radius);
+  background: var(--alert-background);
   position: relative;
 
   @if $enable-margins {
-    margin-bottom: $spacer;
+    margin-bottom: var(--spacer);
   } @else {
     margin-bottom: 0;
   }
@@ -25,17 +42,24 @@
   }
 
   & a:not(.button) {
+    color: var(--alert-link-color);
     font-weight: $font-weight-semibold;
-    color: $body-color;
 
-    &:hover {
-      color: color.mix(black, $body-color, $link-shade-percentage);
+    &:hover,
+    &:focus {
+      color: var(--alert-link-hover-color);
     }
   }
 }
 
 @each $key, $value in $all-colors {
   .alert--#{$key} {
-    @include make-alert-color($value);
+    --alert-border-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / #{$border-opacity});
+    --alert-background: hsl(var(--#{$key}-h) var(--#{$key}-s) #{$alert-background-l} / var(--#{$key}-a));
+    --alert-color: hsl(var(--#{$key}-h) var(--#{$key}-s) #{$alert-color-l} / var(--#{$key}-a));
+    --alert-link-color: hsl(var(--#{$key}-h) var(--#{$key}-s) #{$alert-color-l} / var(--#{$key}-a));
+    --alert-link-hover-color: hsl(
+      var(--#{$key}-h) var(--#{$key}-s) calc(#{$alert-color-l} - #{$link-shade-percentage}) / var(--#{$key}-a)
+    );
   }
 }

package/sass/modules/_button.old.scss

@@ -0,0 +1,214 @@
+@use "sass:color";
+@use "./../variables" as *;
+@use "./../functions" as *;
+@use "./../mixins" as *;
+
+.button {
+  // --button-padding-x: #{$button-padding-x};
+  // --button-padding-y: #{$button-padding-y};
+  // --button-font-family: #{$button-font-family};
+
+  // @include rfs($button-font-size, --button-font-size);
+
+  // --button-font-weight: #{$button-font-weight};
+  // --button-line-height: #{$button-line-height};
+  // --button-color: #{$body-color};
+  // --button-background: #{$button-background};
+  // --button-border-width: #{$button-border-width};
+  // --button-border-style: #{$button-border-style};
+  // --button-border-color: #{$button-border-color};
+  // --button-border-radius: #{$button-border-radius};
+  --button-hover-border-color: #{$button-hover-border-color};
+  --button-active-border-color: #{$button-active-border-color};
+  --button-box-shadow: #{$button-box-shadow};
+  --button-disabled-opacity: #{$button-disabled-opacity};
+  --button-focus-box-shadow: 0 0 #{$input-button-focus-blur} #{$input-button-focus-width} var(--button-border-color);
+  // --button-text-decoration: none;
+  // --button-hover-text-decoration: none;
+
+  // display: inline-flex;
+  // padding: var(--button-padding-y) var(--button-padding-x);
+  // font-family: var(--button-font-family);
+
+  // @include font-size(var(--button-font-size));
+
+  // font-weight: var(--button-font-weight);
+  // line-height: var(--button-line-height);
+  // color: var(--button-color);
+  // text-align: center;
+  // align-items: center;
+  // justify-content: center;
+  // text-decoration: var(--button-text-decoration);
+  // white-space: $button-white-space;
+  // vertical-align: middle;
+  // cursor: if($enable-button-pointers, pointer, null);
+  // user-select: none;
+  // border: var(--button-border-width) var(--button-border-style) var(--button-border-color);
+
+  @include border-radius(var(--button-border-radius));
+  @include gradient-background(var(--button-background));
+  @include box-shadow(var(--button-box-shadow));
+  @include transition($button-transition);
+
+  &:hover {
+    color: var(--button-hover-color);
+    text-decoration: var(--button-hover-text-decoration);
+    background-color: var(--button-hover-background);
+    border-color: var(--button-hover-border-color);
+  }
+
+  .button--switch + &:hover {
+    color: var(--button-hover-color);
+    text-decoration: var(--button-hover-text-decoration);
+    background-color: var(--button-hover-background);
+    border-color: var(--button-hover-border-color);
+  }
+
+  &:focus-visible {
+    color: var(--button-hover-color);
+
+    @include gradient-background(var(--button-hover-background));
+
+    border-color: var(--button-hover-border-color);
+    outline: 0;
+
+    @if $enable-shadows {
+      box-shadow: var(--button-box-shadow), var(--button-focus-box-shadow);
+    } @else {
+      box-shadow: var(--button-focus-box-shadow);
+    }
+  }
+
+  .button--switch:focus-visible + & {
+    border-color: var(--button-hover-border-color);
+    outline: 0;
+
+    @if $enable-shadows {
+      box-shadow: var(--button-box-shadow), var(--button-focus-box-shadow);
+    } @else {
+      box-shadow: var(--button-focus-box-shadow);
+    }
+  }
+
+  .button--switch:checked + &,
+  :not(.button--switch) + &:active,
+  &:first-child:active,
+  &.active,
+  &.show {
+    color: var(--button-active-color);
+    background-color: var(--button-active-background);
+    background-image: if($enable-gradients, none, null);
+    border-color: var(--button-active-border-color);
+
+    @include box-shadow(var(--button-active-shadow));
+
+    &:focus-visible {
+      @if $enable-shadows {
+        box-shadow: var(--button-active-shadow), var(--button-focus-box-shadow);
+      } @else {
+        box-shadow: var(--button-focus-box-shadow);
+      }
+    }
+  }
+
+  &:disabled,
+  &.disabled,
+  fieldset:disabled & {
+    color: var(--button-disabled-color);
+    pointer-events: none;
+    background-color: var(--button-disabled-background);
+    background-image: if($enable-gradients, none, null);
+    border-color: var(--button-disabled-border-color);
+    opacity: var(--button-disabled-opacity);
+
+    @include box-shadow(none);
+  }
+
+  &.button--outline {
+    @include button-outline-variant($body-color);
+  }
+
+  &.button--link {
+    @include button-link-variant($body-color);
+  }
+
+  &.button--unstyled {
+    @include button-unstyled-variant($body-color);
+  }
+}
+
+// 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);
+    }
+
+    &.button--outline {
+      @include button-outline-variant($value);
+    }
+
+    &.button--link {
+      @include button-link-variant($value);
+    }
+
+    &.button--unstyled {
+      @include button-unstyled-variant($value);
+    }
+  }
+}
+
+// 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");
+  }
+}