claritas-web-framework 6.2.72 → 6.3.0

package/sass/modules/_tabs.scss

@@ -1,10 +1,9 @@
 @use "sass:color";
-
 @use "./../variables" as *;
 
 .tabs--wrapper {
   @if $enable-margins {
-    margin-bottom: $spacer;
+    margin-bottom: var(--spacer);
   } @else {
     margin-bottom: 0;
   }
@@ -53,7 +52,7 @@
     word-wrap: break-word;
     width: 100%;
     position: relative;
-    margin-bottom: $spacer;
+    margin-bottom: var(--spacer);
     padding: $card-body-padding;
 
     & > *:last-child {

package/sass/modules/_tag.scss

@@ -1,49 +1,71 @@
 @use "sass:color";
-
+@use "~rfs/scss" as *;
 @use "./../variables" as *;
 @use "./../functions" as *;
+@use "./../mixins/colors" as *;
 @use "./../mixins/group" as *;
 @use "./../mixins/tag" as *;
 
 .tag {
-  border: 1px solid $tag-border-color;
-  color: $tag-color;
-  background-color: $tag-background;
-  padding: $tag-padding-y $tag-padding-x;
-  border-radius: $tag-border-radius;
-  align-items: center;
+  --tag-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / var(--body-color-a));
+  --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%);
+
+  // Static
+  --tag-padding-x: #{$tag-padding-x};
+  --tag-padding-y: #{$tag-padding-y};
+  --tag-border-width: 1px;
+  --tag-border-style: solid;
+  --tag-border-radius: var(--border-radius-medium);
+
+  --tag-font-family: #{$tag-font-family};
+  --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));
+
+  color: var(--tag-color);
+  padding: var(--tag-padding-y) var(--tag-padding-x);
+  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);
+
   display: inline-flex;
+  align-items: center;
   vertical-align: top;
   justify-content: center;
-  text-align: center;
-  white-space: nowrap;
   height: auto;
+  min-width: $spacer;
   outline: 0;
-  text-decoration: none;
-  font-size: $font-size-small;
 
   &.tag--rounded {
-    border-radius: $border-radius-round;
+    --tag-border-radius: var(--border-radius-round);
   }
 
   &.tag--square {
-    border-radius: $border-radius-none;
+    --tag-border-radius: none;
   }
+}
 
-  &.tag--link {
-    cursor: pointer;
-    color: $tag-color;
-    background-color: $tag-background;
-
-    &:hover {
-      color: color.mix(black, $body-color, $link-shade-percentage);
-      text-decoration: none;
-    }
-  }
+@each $key, $value in $all-colors {
+  $color: color-flip($key, $value, $tag-color-flip-threshold, $tag-color-flip-l);
 
-  & > .close {
-    width: 1.5em;
-    height: 1.5em;
+  .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));
   }
 }
 
@@ -56,17 +78,7 @@
     }
   }
 
-  & .tags {
-    margin-bottom: 0;
-  }
-
   &.tags--grouped {
     @include make-grouped-row(".tag");
   }
 }
-
-@each $color, $value in $all-colors {
-  .tag--#{$color} {
-    @include tag-variant($value, color-contrast($value));
-  }
-}

package/sass/modules/_tile.scss

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

package/sass/modules/_tooltip.scss

@@ -1,5 +1,4 @@
 @use "sass:color";
-
 @use "./../variables" as *;
 
 [data-tooltip] {

package/sass/modules/form/_checkbox.scss

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

package/sass/modules/form/_file.scss

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

package/sass/modules/form/_output.scss

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

package/sass/modules/form/_progress.scss

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

package/sass/modules/form/_radio.scss

@@ -1,6 +1,5 @@
 @use "sass:map";
 @use "sass:color";
-
 @use "./../../variables" as *;
 @use "./../../mixins/breakpoints" as *;
 

package/sass/modules/form/_range.scss

@@ -1,5 +1,4 @@
 @use "sass:color";
-
 @use "./../../variables" as *;
 
 @mixin make-track($color: rgba($black, 7%)) {

package/sass/modules/form/_text.scss

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

package/sass/modules/form/_toggle.scss

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

package/sass/utilities/_align.scss

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

package/sass/utilities/_border.scss

@@ -1,29 +1,54 @@
 @use "sass:color";
-
 @use "./../variables" as *;
+@use "./../mixins" as *;
 
 .border {
-  border: 1px solid rgba($border-color-main, $border-opacity) !important;
+  border-width: 1px !important;
+  border-style: solid !important;
+  border-color: hsl(
+    var(--border-color-h) var(--border-color-s) var(--border-color-l) /
+      calc(var(--border-color-a) * #{$border-opacity-value})
+  ) !important;
 }
 
 .border--top,
 .border-top {
-  border-top: 1px solid rgba($border-color-main, $border-opacity) !important;
+  border-top-width: 1px !important;
+  border-top-style: solid !important;
+  border-top-color: hsl(
+    var(--border-color-h) var(--border-color-s) var(--border-color-l) /
+      calc(var(--border-color-a) * #{$border-opacity-value})
+  ) !important;
 }
 
 .border--right,
 .border-right {
-  border-right: 1px solid rgba($border-color-main, $border-opacity) !important;
+  border-right-width: 1px !important;
+  border-right-style: solid !important;
+  border-right-color: hsl(
+    var(--border-color-h) var(--border-color-s) var(--border-color-l) /
+      calc(var(--border-color-a) * #{$border-opacity-value})
+  ) !important;
 }
 
 .border--bottom,
 .border-bottom {
-  border-bottom: 1px solid rgba($border-color-main, $border-opacity) !important;
+  border-bottom-width: 1px !important;
+  border-bottom-style: solid !important;
+  border-bottom-color: hsl(
+    var(--border-color-h) var(--border-color-s) var(--border-color-l) /
+      calc(var(--border-color-a) * #{$border-opacity-value})
+  ) !important;
 }
 
 .border--left,
 .border-left {
-  border-left: 1px solid rgba($border-color-main, $border-opacity) !important;
+  border-left-width: 1px !important;
+  border-left-style: solid !important;
+  border-left-color: hsl(
+    var(--border-color-h) var(--border-color-s) var(--border-color-l) /
+      calc(var(--border-color-a) * #{$border-opacity-value})
+  ) !important;
 }
 
 .border--none {
@@ -50,14 +75,6 @@
   border-left: 0 !important;
 }
 
-$border-radii: (
-  "none": 0,
-  "small": calc($spacer * 0.15),
-  "medium": calc($spacer * 0.275),
-  "large": calc($spacer * 0.65),
-  "round": calc($spacer * 99),
-) !default;
-
 @each $key, $value in $border-radii {
   .border-radius--#{$key} {
     border-radius: #{$value} !important;

package/sass/utilities/_colors.scss

@@ -3,28 +3,28 @@
 
 @each $key, $value in $all-colors {
   .color--#{$key} {
-    @include make-color($value);
+    @include make-color($key);
   }
 
   .background--#{$key} {
-    @include make-background-color($value);
+    @include make-background-color($key);
   }
 
   .border--#{$key} {
-    @include make-border-color($value);
+    @include make-border-color($key);
   }
 }
 
 @each $key, $value in $grays {
   .color--#{$key} {
-    @include make-color($value);
+    @include make-color($key);
   }
 
   .background--#{$key} {
-    @include make-background-color($value);
+    @include make-background-color($key);
   }
 
   .border--#{$key} {
-    @include make-border-color($value);
+    @include make-border-color($key);
   }
 }

package/sass/utilities/_display.scss

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

package/sass/utilities/_flex.scss

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

package/sass/utilities/_float.scss

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

package/sass/utilities/_order.scss

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

package/sass/utilities/_overflow.scss

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

package/sass/utilities/_pointerEvents.scss

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

package/sass/utilities/_position.scss

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

package/sass/utilities/_size.scss

@@ -1,6 +1,5 @@
 @use "sass:map";
 @use "sass:list";
-
 @use "./../variables" as *;
 @use "./../mixins/breakpoints" as *;
 

package/sass/utilities/_spacing.scss

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

package/sass/utilities/_typography.scss

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

package/sass/utilities/_visibility.scss

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

package/sass/utilities/_zIndex.scss

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

package/.eslintrc.js

@@ -1,21 +0,0 @@
-module.exports = {
-  ignorePatterns: ["/dist/*"],
-  parserOptions: {
-    ecmaVersion: 2020,
-    sourceType: "module",
-  },
-  env: {
-    browser: true,
-    node: true,
-    es2020: true,
-  },
-  extends: ["plugin:prettier/recommended", "eslint:recommended"],
-  plugins: ["@babel"],
-  rules: {
-    "prettier/prettier": "error",
-    "@babel/new-cap": "error",
-    "@babel/no-invalid-this": "error",
-    "@babel/no-unused-expressions": "error",
-    "@babel/semi": "error",
-  },
-};

package/sass/mixins/_alert.scss

@@ -1,31 +0,0 @@
-@use "sass:color";
-@use "./../variables" as *;
-@use "./../functions" as *;
-
-@mixin make-alert-color($value) {
-  background-color: color.mix(white, $value, 75%);
-  color: color.mix(black, $value, 40%);
-
-  & h6,
-  & .h6,
-  & h5,
-  & .h5,
-  & h4,
-  & .h4,
-  & h3,
-  & .h3,
-  & h2,
-  & .h2,
-  & h1,
-  & .h1 {
-    --#{$prefix}color: #{color.mix(black, $value, 40%)};
-  }
-
-  & a:not(.button) {
-    color: color.mix(black, $value, 40%);
-
-    &:hover {
-      color: color.mix(black, $value, 60%);
-    }
-  }
-}