claritas-web-framework 7.0.0 → 8.0.0

package/sass/modules/_nav.scss

@@ -1,104 +1,129 @@
 @use "sass:color";
 @use "./../variables" as *;
+@use "./../mixins/list" as *;
 
 .nav {
+  --nav-item-border-width: 1px;
+  --nav-item-border-style: solid;
+  --nav-item-border-color: transparent;
+  --nav-item-active-border-color: transparent;
+  --nav-item-border-radius: 0;
+
+  --nav-item-padding-x: #{$nav-item-padding-x};
+  --nav-item-padding-y: #{$nav-item-padding-y};
+
+  --nav-item-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 100%);
+  --nav-item-hover-color: hsl(
+    var(--body-color-h) var(--body-color-s) calc(var(--body-color-l) - #{$link-shade-percentage}) / 100%
+  );
+  --nav-item-focus-color: hsl(
+    var(--body-color-h) var(--body-color-s) calc(var(--body-color-l) - #{$link-shade-percentage}) / 100%
+  );
+  --nav-item-active-color: hsl(
+    var(--body-color-h) var(--body-color-s) calc(var(--body-color-l) - #{$link-shade-percentage}) / 100%
+  );
+  --nav-item-disabled-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 65%);
+  --nav-label-hover-color: hsl(var(--medium-h) var(--medium-s) var(--medium-l) / 100%);
+
+  --nav-item-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 100%);
+  --nav-item-hover-background: hsl(var(--body-color-h) var(--body-color-s) 95% / 100%);
+  --nav-item-focus-background: hsl(var(--body-color-h) var(--body-color-s) 95% / 100%);
+  --nav-item-active-background: hsl(var(--body-color-h) var(--body-color-s) 95% / 100%);
+  --nav-item-disabled-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 65%);
+
   display: flex;
   flex-wrap: wrap;
   list-style: none;
-  margin: 0;
-  padding: 0;
   align-items: center;
+  position: relative;
 
-  @if $enable-margins {
-    margin-bottom: var(--spacer);
-  } @else {
-    margin-bottom: 0;
-  }
+  @include make-list-unsyled;
 
   & li {
     margin: 0;
     padding: 0;
 
     & ul {
-      border-left: 1px solid rgba($black, 5%);
-      margin: calc($spacer * 0.75);
-      padding-left: calc($spacer * 0.75);
-      list-style: none;
+      @include make-list-unsyled;
+
+      border-left: var(--nav-item-border-width) var(--nav-item-border-style) var(--nav-item-border-color);
+      margin: calc(var(--spacer) * 0.75);
+      padding-left: calc(var(--spacer) * 0.75);
     }
   }
 
-  & .nav--label {
-    color: $nav-label-color;
-    font-size: $nav-label-font-size;
-    text-transform: $nav-label-text-transform;
-    padding: $nav-label-padding-y $nav-label-padding-x;
-    font-weight: $nav-label-font-weight;
-    display: block;
+  & .nav--label,
+  & .nav--title,
+  & .nav--item {
+    border-width: var(--nav-item-border-width);
+    border-style: var(--nav-item-border-style);
+    border-color: var(--nav-item-border-color);
+    border-radius: var(--nav-item-border-radius);
+    padding: var(--nav-item-padding-y) var(--nav-item-padding-x);
+    color: var(--nav-item-color);
+    background-color: var(--nav-item-background);
+    white-space: nowrap;
+    display: inline-flex;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+    flex-shrink: 0;
   }
 
-  & .nav--title {
-    display: block;
-    padding: $nav-label-padding-y $nav-label-padding-x;
-    font-weight: $nav-title-font-weight;
+  & .nav--label {
+    font-size: var(--font-size-small);
+    font-weight: bolder;
+    color: var(--nav-label-hover-color);
   }
 
-  &.flex-direction--column {
-    align-items: stretch;
-    flex-wrap: nowrap;
-
-    & > * {
-      flex-shrink: 0;
-    }
-
-    & .nav--label {
-      &:not(:first-child) {
-        margin-top: calc($spacer * 0.5);
-      }
-    }
+  & .nav--title {
+    font-family: $headings-font-family;
+    font-style: $headings-font-style;
+    font-weight: $headings-font-weight;
+    color: $headings-color;
   }
 
-  & .nav--item,
-  & > a,
-  & > button,
-  & > li > a,
-  & > li > button {
-    border: $border-width $border-style transparent;
-    padding: $nav-item-padding-y $nav-item-padding-x;
-    color: $nav-item-color;
-    background-color: $nav-item-background-color;
-    display: block;
-    border-radius: $border-radius-none;
-    text-align: left;
+  & .nav--item {
     text-decoration: none;
     cursor: pointer;
-    white-space: nowrap;
-    position: relative;
-
-    &:disabled {
-      color: $nav-item-color-disabled;
-      cursor: not-allowed;
-    }
+    user-select: none;
+    outline: 0;
+    transition: $form-transition;
 
     &:hover {
-      text-decoration: none;
+      color: var(--nav-item-hover-color);
+      background: var(--nav-item-hover-background);
+    }
 
-      &:not(:disabled) {
-        background-color: $nav-item-hover-background-color;
-        color: $nav-item-hover-color;
-      }
+    &:focus-visible {
+      color: var(--nav-item-focus-color);
+      background: var(--nav-item-focus-background);
     }
 
+    &[data-active="true"],
     &:active,
-    &:focus,
-    &:hover {
-      outline: 0;
+    &.active {
+      color: var(--nav-item-active-color);
+      background: var(--nav-item-active-background);
     }
 
-    &[data-active="true"],
-    &.active,
-    &:active {
-      background-color: $nav-item-active-background-color;
-      color: $nav-item-active-color;
+    &:disabled,
+    &.disabled,
+    fieldset:disabled & {
+      color: var(--nav-item-disabled-color);
+      background: var(--nav-item-disabled-background);
+      pointer-events: none;
+    }
+  }
+
+  &.nav--column {
+    flex-flow: column nowrap;
+    align-items: stretch;
+
+    & .nav--item {
+      text-align: left;
+      justify-content: flex-start;
     }
   }
 }

package/sass/modules/_pill.scss

@@ -5,22 +5,16 @@
 @use "./../mixins/group" as *;
 
 .pill {
-  --pill-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / var(--body-color-a));
+  --pill-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 100%);
   --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%);
+  --pill-background: hsl(var(--white-h) var(--white-s) var(--white-l) / 100%);
 
   // 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));
@@ -28,32 +22,25 @@
   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);
+  border-radius: var(--border-radius-round);
+  min-width: var(--spacer);
+  line-height: 1;
+  text-decoration: none;
+  white-space: nowrap;
   display: inline-flex;
   align-items: center;
   vertical-align: top;
   justify-content: center;
   height: auto;
-  min-width: $spacer;
   outline: 0;
 }
 
 @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));
+    --pill-color: #{color-flip($key, $value, $pill-color-flip-threshold, $pill-color-flip-l)};
+    --pill-background: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 100%);
   }
 }
 

package/sass/modules/_table.scss

@@ -8,7 +8,7 @@
     padding: $table-cell-padding-y $table-cell-padding-x;
     vertical-align: $table-cell-valign;
     border-style: $table-cell-border-style;
-    border-color: $table-cell-border-color;
+    border-color: hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity});
     border-width: 0 0 $table-cell-border-width 0;
   }
 
@@ -72,11 +72,11 @@
     & tbody {
       & tr {
         &:nth-of-type(even) {
-          background-color: $table-even-background-color;
+          background-color: hsl(var(--dark-h) var(--dark-s) var(--dark-l) / #{$table-striped-background-opacity});
         }
 
         &:nth-of-type(odd) {
-          background-color: $table-odd-background-color;
+          background-color: hsl(var(--light-h) var(--light-s) var(--light-l) / #{$table-striped-background-opacity});
         }
       }
     }
@@ -87,7 +87,7 @@
       & tr {
         &:hover {
           & > * {
-            background-color: $table-even-background-color;
+            background-color: hsl(var(--dark-h) var(--dark-s) var(--dark-l) / #{$table-striped-background-opacity});
           }
         }
       }

package/sass/modules/_tabs.scss

@@ -2,6 +2,11 @@
 @use "./../variables" as *;
 
 .tabs--wrapper {
+  --tabs-border-width: 1px;
+  --tabs-border-style: solid;
+  --tabs-border-color: hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity});
+  --tabs-background: var(--white);
+
   @if $enable-margins {
     margin-bottom: var(--spacer);
   } @else {
@@ -9,43 +14,41 @@
   }
 
   & .nav--tabs {
+    --nav-item-border-color: var(--tabs-border-color);
+    --nav-item-border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
+    --nav-item-background: var(--tabs-background);
+    --nav-item-active-background: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 0%);
+
     margin-bottom: 0;
     z-index: 1;
-    position: relative;
     overflow: unset;
     flex-wrap: nowrap;
 
     &:not(:empty) {
-      border-bottom: 1px solid rgba($border-color-main, $border-opacity);
+      border-bottom: var(--tabs-border-width) var(--tabs-border-style) var(--tabs-border-color);
     }
 
-    & > *,
     & .nav--item {
-      border: 1px solid rgba($border-color-main, $border-unfocus-opacity);
-      border-bottom-color: transparent;
-      border-radius: $border-radius-default $border-radius-default 0 0;
       margin-bottom: -1px;
-      padding: $nav-tab-item-padding;
 
       &:not(:last-child) {
-        margin-right: calc($spacer * 0.125);
+        margin-right: calc(var(--spacer) * 0.125);
       }
 
       &[data-active="true"],
+      &:active,
       &.active {
-        background-color: $card-background-color;
-        border-color: rgba($border-color-main, $border-opacity);
-        border-bottom-color: transparent;
+        border-bottom-color: var(--tabs-background);
       }
     }
   }
 
-  & .tab--content {
-    border-width: 1px;
-    border-style: solid;
-    border-color: transparent rgba($border-color-main, $border-opacity) rgba($border-color-main, $border-opacity);
-    background-color: $card-background-color;
-    border-radius: 0 0 $card-border-radius $card-border-radius;
+  & .tabs--content {
+    border-width: var(--tabs-border-width);
+    border-style: var(--tabs-border-style);
+    border-color: transparent var(--tabs-border-color) var(--tabs-border-color);
+    background-color: var(--tabs-background);
+    border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
     display: none;
     flex-direction: column;
     min-width: 0;
@@ -53,66 +56,40 @@
     width: 100%;
     position: relative;
     margin-bottom: var(--spacer);
-    padding: $card-body-padding;
+    padding: var(--spacer);
 
     & > *:last-child {
       margin-bottom: 0;
     }
 
     &[data-active="true"],
+    &:active,
     &.active {
-      display: flex !important;
+      display: flex;
     }
   }
 
   &.card {
     & .nav--tabs {
-      & > *,
+      --nav-item-active-background: hsl(var(--body-color-h) var(--body-color-s) 95% / 100%);
+      --nav-item-border-radius: 0;
+
       & .nav--item {
-        margin-right: 0;
-        border-width: 0 1px 0 0;
-        border-radius: $border-radius-none;
-        margin-bottom: 0;
-        padding: $nav-tab-card-item-padding;
+        margin: 0;
+        border-color: transparent var(--nav-item-border-color) transparent transparent;
 
         &:first-child {
-          @if $card-border-radius > 0 {
-            border-top-left-radius: calc($card-border-radius - 1px);
-          }
-        }
-
-        &:last-child {
-          @if $card-border-radius > 0 {
-            border-top-right-radius: calc($card-border-radius - 1px);
-          }
-        }
-
-        &::after {
-          content: "";
-          left: -1px;
-          bottom: 0;
-          right: -1px;
-          height: 2px;
-          background-color: $tabs-active-color;
-          position: absolute;
-          display: none;
-        }
-
-        &[data-active="true"],
-        &.active {
-          border-color: rgba($border-color-main, $border-opacity);
-
-          &::after {
-            display: block;
-          }
+          border-top-left-radius: calc(var(--border-radius-medium) - 1px);
         }
       }
     }
 
-    & .tab--content {
+    & .tabs--content {
       border: 0 none;
-      padding: $spacer;
-      margin-bottom: 0;
+      padding: var(--spacer);
+      margin: 0;
+      border-bottom-left-radius: calc(var(--border-radius-medium) - 1px);
+      border-bottom-right-radius: calc(var(--border-radius-medium) - 1px);
     }
   }
 }

package/sass/modules/_tag.scss

@@ -4,13 +4,11 @@
 @use "./../functions" as *;
 @use "./../mixins/colors" as *;
 @use "./../mixins/group" as *;
-@use "./../mixins/tag" as *;
 
 .tag {
-  --tag-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / var(--body-color-a));
+  --tag-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 100%);
   --tag-border-color: hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity});
-  --tag-background: hsl(var(--white-h) var(--white-s) var(--white-l) / var(--white-a));
-  --tag-box-shadow-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 0%);
+  --tag-background: hsl(var(--white-h) var(--white-s) var(--white-l) / 100%);
 
   // Static
   --tag-padding-x: #{$tag-padding-x};
@@ -18,11 +16,8 @@
   --tag-border-width: 1px;
   --tag-border-style: solid;
   --tag-border-radius: var(--border-radius-medium);
-  --tag-font-family: #{$tag-font-family};
+  --tag-round-border-radius: var(--border-radius-round);
   --tag-font-weight: #{$tag-font-weight};
-  --tag-line-height: #{$tag-line-height};
-  --tag-text-decoration: none;
-  --tag-white-space: #{$tag-white-space};
 
   @include rfs($tag-font-size, --tag-font-size);
   @include font-size(var(--tag-font-size));
@@ -32,38 +27,31 @@
   border: var(--tag-border-width) var(--tag-border-style) var(--tag-border-color);
   border-radius: var(--tag-border-radius);
   background: var(--tag-background);
-  font-family: var(--tag-font-family);
   font-weight: var(--tag-font-weight);
-  line-height: var(--tag-line-height);
-  text-decoration: var(--tag-text-decoration);
-  white-space: var(--tag-white-space);
-  box-shadow: 0 0 0 0.125em var(--tag-box-shadow-color);
+  line-height: 1;
+  text-decoration: none;
+  white-space: nowrap;
   display: inline-flex;
   align-items: center;
   vertical-align: top;
   justify-content: center;
   height: auto;
-  min-width: $spacer;
+  min-width: var(--spacer);
   outline: 0;
 
   &.tag--rounded {
-    --tag-border-radius: var(--border-radius-round);
+    border-radius: var(--tag-round-border-radius);
   }
 
   &.tag--square {
-    --tag-border-radius: none;
+    border-radius: 0;
   }
 }
 
 @each $key, $value in $all-colors {
-  $color: color-flip($key, $value, $tag-color-flip-threshold, $tag-color-flip-l);
-
   .tag--#{$key} {
-    --tag-color: #{$color};
-    --tag-border-color: hsl(
-      var(--#{$key}-h) var(--#{$key}-s) calc(var(--#{$key}-l) - #{$color-variant-border-l}) / #{$color-variant-border-a}
-    );
-    --tag-background: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / var(--#{$key}-a));
+    --tag-color: #{color-flip($key, $value, $tag-color-flip-threshold, $tag-color-flip-l)};
+    --tag-background: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 100%);
   }
 }
 

package/sass/modules/_tile.scss

@@ -3,10 +3,10 @@
 @use "./../mixins/group" as *;
 
 .tile {
-  background-color: $white;
+  background-color: var(--white);
   display: flex;
   flex-direction: column;
-  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-left-width: 4px;
   min-width: 0;
   word-wrap: break-word;
@@ -23,7 +23,7 @@
   & .tile--footer {
     display: flex;
     flex-flow: row wrap;
-    padding: calc($spacer * 0.5) $spacer;
+    padding: calc(var(--spacer) * 0.5) var(--spacer);
 
     & > * {
       margin-bottom: 0;
@@ -32,19 +32,19 @@
 
   & .tile--header {
     flex: 0 1 auto;
-    border-bottom: 1px solid rgba($border-color-main, $border-opacity);
+    border-bottom: 1px solid hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity});
   }
 
   & .tile--footer {
     margin-top: auto;
     flex: 0 0 auto;
-    border-top: 1px solid rgba($border-color-main, $border-opacity);
+    border-top: 1px solid hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity});
   }
 
   & .tile--body {
     flex: 0 0 auto;
     width: 100%;
-    padding: calc($spacer * 0.5) $spacer;
+    padding: calc(var(--spacer) * 0.5) var(--spacer);
   }
 
   & .tile--image {
@@ -68,6 +68,6 @@
 
 @each $key, $value in $all-colors {
   .tile--#{$key} {
-    border-left-color: $value;
+    border-left-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 100%);
   }
 }

package/sass/modules/_tooltip.scss

@@ -7,23 +7,25 @@
 
   &::after,
   &::before {
-    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
+    transition:
+      opacity 0.2s ease-in-out,
+      visibility 0.2s ease-in-out;
     transform: translate3d(0, 0, 0);
     position: absolute;
     visibility: hidden;
     opacity: 0;
     pointer-events: none;
-    z-index: $zindex-tooltip;
-    color: $white;
+    z-index: var(--zindex-tooltip);
+    color: var(--white);
     text-align: center;
-    font-size: $font-size-small;
+    font-size: var(--font-size-small);
     line-height: normal;
     font-weight: 400;
   }
 
   &::before {
     content: "";
-    border-top: 6px solid rgba($black, 75%);
+    border-top: 6px solid hsl(0deg 0% 0% / 75%);
     border-right: 6px solid transparent;
     border-bottom: 0 none;
     border-left: 6px solid transparent;
@@ -32,10 +34,10 @@
   }
 
   &::after {
-    background-color: rgba($black, 75%);
+    background-color: hsl(0deg 0% 0% / 75%);
     content: attr(data-tooltip);
     width: auto;
-    min-width: calc($spacer * 6);
+    min-width: calc(var(--spacer) * 6);
     padding: 4px 8px;
     border-radius: 3px;
     inset: auto auto 100% 50%;
@@ -44,7 +46,7 @@
 
   &.tooltip--large {
     &::after {
-      min-width: calc($spacer * 16);
+      min-width: calc(var(--spacer) * 16);
     }
   }
 
@@ -53,7 +55,7 @@
       border-top: 6px solid transparent;
       border-right: 0 none;
       border-bottom: 6px solid transparent;
-      border-left: 6px solid rgba($black, 75%);
+      border-left: 6px solid hsl(0deg 0% 0% / 75%);
       inset: 50% auto auto -6px;
       margin: -6px 0 0;
     }
@@ -67,7 +69,7 @@
   &[data-placement="right"] {
     &::before {
       border-top: 6px solid transparent;
-      border-right: 6px solid rgba($black, 75%);
+      border-right: 6px solid hsl(0deg 0% 0% / 75%);
       border-bottom: 6px solid transparent;
       border-left: 0 none;
       inset: 50% -6px auto auto;
@@ -84,7 +86,7 @@
     &::before {
       border-top: 0 none;
       border-right: 6px solid transparent;
-      border-bottom: 6px solid rgba($black, 75%);
+      border-bottom: 6px solid hsl(0deg 0% 0% / 75%);
       border-left: 6px solid transparent;
       inset: auto auto -6px 50%;
       margin: 0 0 0 -6px;