claritas-web-framework 8.0.37 → 8.0.39

package/sass/modules/_tag.scss

@@ -1,6 +1,6 @@
 @use "sass:color";
 
-@use "~rfs/scss" as *;
+@use "rfs/scss" as *;
 
 @use "./../variables" as *;
 @use "./../functions" as *;
@@ -8,9 +8,9 @@
 @use "./../mixins/group" as *;
 
 .tag {
-  --tag-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 100%);
+  --tag-color: hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l));
   --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) / 100%);
+  --tag-background: hsl(var(--white-h) var(--white-s) var(--white-l));
 
   // Static
   --tag-padding-x: #{$tag-padding-x};
@@ -53,7 +53,7 @@
 @each $key, $value in $all-colors {
   .tag--#{$key} {
     --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%);
+    --tag-background: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l));
   }
 }
 

package/sass/modules/_tile.scss

@@ -99,6 +99,6 @@
 
 @each $key, $value in $all-colors {
   .tile--#{$key} {
-    --border-left-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 100%);
+    --border-left-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l));
   }
 }

package/sass/modules/form/_checkbox.scss

@@ -70,8 +70,10 @@
     @each $key, $value in $all-colors {
       &.input--#{$key} {
         &:checked {
-          --input-detail-background: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 100%);
-          --input-disabled-detail-background: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 65%);
+          --input-detail-background: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l));
+          --input-disabled-detail-background: hsl(
+            var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / #{$color-disabled-alpha}
+          );
         }
       }
     }

package/sass/modules/form/_output.scss

@@ -3,6 +3,7 @@
 @use "./../../variables" as *;
 
 output {
-  --input-background: hsl(var(--body-color-h) var(--body-color-s) 95% / 100%);
+  --input-background: hsl(var(--body-color-h) var(--body-color-s) 95%);
+
   pointer-events: none;
 }

package/sass/modules/form/_progress.scss

@@ -17,7 +17,7 @@ progress {
   overflow: hidden;
 
   &::-webkit-progress-bar {
-    background-color: hsl(var(--body-color-h) var(--body-color-s) 95% / 100%);
+    background-color: hsl(var(--body-color-h) var(--body-color-s) 95%);
   }
 
   &::-webkit-progress-value {
@@ -26,7 +26,7 @@ progress {
   }
 
   &::-moz-progress-bar {
-    background-color: hsl(var(--body-color-h) var(--body-color-s) 95% / 100%);
+    background-color: hsl(var(--body-color-h) var(--body-color-s) 95%);
   }
 
   &::-moz-progress-value {
@@ -45,11 +45,11 @@ progress {
       }
 
       &::-webkit-progress-value {
-        background-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 100%);
+        background-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l));
       }
 
       &::-moz-progress-value {
-        background-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 100%);
+        background-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l));
       }
     }
   }

package/sass/modules/form/_radio.scss

@@ -49,8 +49,10 @@
     @each $key, $value in $theme-colors {
       &.input--#{$key} {
         &:checked {
-          --input-detail-background: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 100%);
-          --input-disabled-detail-background: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 65%);
+          --input-detail-background: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l));
+          --input-disabled-detail-background: hsl(
+            var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / #{$color-disabled-alpha}
+          );
         }
       }
     }

package/sass/modules/form/_range.scss

@@ -50,7 +50,7 @@ input[type="range"] {
   --input-active-box-shadow: none;
   --input-disabled-box-shadow: none;
 
-  --input-disabled-background: hsl(var(--body-color-h) var(--body-color-s) 100% / 100%);
+  --input-disabled-background: hsl(var(--body-color-h) var(--body-color-s) 100%);
 
   --input-padding-x: 0;
   --input-small-padding-x: 0;
@@ -91,7 +91,7 @@ input[type="range"] {
   &:disabled,
   &.disabled,
   &[aria-disabled="true"] {
-    --input-disabled-detail-background: hsl(var(--primary-h) var(--primary-s) calc(var(--primary-l) + 20%) / 100%);
+    --input-disabled-detail-background: hsl(var(--primary-h) var(--primary-s) calc(var(--primary-l) + 20%));
 
     &::-webkit-slider-runnable-track {
       @include make-track;
@@ -112,7 +112,7 @@ input[type="range"] {
 
   @each $key, $value in $theme-colors {
     &.input--#{$key} {
-      --input-disabled-detail-background: hsl(var(--#{$key}-h) var(--#{$key}-s) calc(var(--#{$key}-l) + 20%) / 100%);
+      --input-disabled-detail-background: hsl(var(--#{$key}-h) var(--#{$key}-s) calc(var(--#{$key}-l) + 20%));
 
       &::-moz-range-thumb {
         @include make-thumb(false, false, $value, hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 25%));

package/sass/modules/form/_toggle.scss

@@ -57,11 +57,13 @@
 
     @each $key, $value in $theme-colors {
       &.input--#{$key} {
-        --input-border-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 65%);
+        --input-border-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / #{$color-disabled-alpha});
 
         &:checked {
-          --input-detail-background: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 100%);
-          --input-disabled-detail-background: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 65%);
+          --input-detail-background: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l));
+          --input-disabled-detail-background: hsl(
+            var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / #{$color-disabled-alpha}
+          );
         }
       }
     }

package/sass/utilities/_border.scss

@@ -6,46 +6,27 @@
 .border {
   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-color: hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity}) !important;
 }
 
 .border--top,
 .border-top {
-  border-top: 1px solid
-    hsl(
-      var(--border-color-h) var(--border-color-s) var(--border-color-l) /
-        calc(var(--border-color-a) * #{$border-opacity-value})
-    ) !important;
+  border-top: 1px solid hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity}) !important;
 }
 
 .border--right,
 .border-right {
-  border-right: 1px solid
-    hsl(
-      var(--border-color-h) var(--border-color-s) var(--border-color-l) /
-        calc(var(--border-color-a) * #{$border-opacity-value})
-    ) !important;
+  border-right: 1px solid hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity}) !important;
 }
 
 .border--bottom,
 .border-bottom {
-  border-bottom: 1px solid
-    hsl(
-      var(--border-color-h) var(--border-color-s) var(--border-color-l) /
-        calc(var(--border-color-a) * #{$border-opacity-value})
-    ) !important;
+  border-bottom: 1px solid hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity}) !important;
 }
 
 .border--left,
 .border-left {
-  border-left: 1px solid
-    hsl(
-      var(--border-color-h) var(--border-color-s) var(--border-color-l) /
-        calc(var(--border-color-a) * #{$border-opacity-value})
-    ) !important;
+  border-left: 1px solid hsl(var(--border-color-h) var(--border-color-s) var(--border-color-l) / #{$border-opacity}) !important;
 }
 
 .border--none {

package/sass/utilities/_colors.scss

@@ -4,27 +4,65 @@
 @each $key, $value in $all-colors {
   .color--#{$key} {
     @include make-color($key);
+    color: var(--color) !important;
+  }
+
+  button.color--#{$key},
+  a.color--#{$key} {
+    @include make-color($key);
+    color: var(--color) !important;
+
+    &:hover,
+    &:focus {
+      color: var(--color-hover) !important;
+    }
+
+    &:disabled,
+    &.disabled {
+      color: var(--color-disabled) !important;
+    }
   }
 
   .background--#{$key} {
     @include make-background-color($key);
+    background-color: var(--background-color) !important;
   }
 
   .border--#{$key} {
     @include make-border-color($key);
+    border-color: var(--border-color) !important;
   }
 }
 
 @each $key, $value in $grays {
   .color--#{$key} {
     @include make-color($key);
+    color: var(--color) !important;
+  }
+
+  button.color--#{$key},
+  a.color--#{$key} {
+    @include make-color($key);
+    color: var(--color) !important;
+
+    &:hover,
+    &:focus {
+      color: var(--color-hover) !important;
+    }
+
+    &:disabled,
+    &.disabled {
+      color: var(--color-disabled) !important;
+    }
   }
 
   .background--#{$key} {
     @include make-background-color($key);
+    background-color: var(--background-color) !important;
   }
 
   .border--#{$key} {
     @include make-border-color($key);
+    border-color: var(--border-color) !important;
   }
 }

package/tests.js

@@ -1,5 +1,5 @@
-import fusv from "find-unused-sass-variables";
-
-fusv.findAsync("scss").then((result) => {
-  console.log(result.unused);
-});
+import fusv from "find-unused-sass-variables";
+
+fusv.findAsync("scss").then((result) => {
+  console.log(result.unused);
+});

package/webpack.config.js

@@ -1,27 +1,27 @@
-const path = require("path");
-const rules = require("./webpack.rules");
-const plugins = require("./webpack.plugins");
-
-module.exports = {
-  entry: "./index.js",
-  output: {
-    filename: "index.js",
-    path: path.resolve(__dirname, "dist"),
-  },
-  devServer: {
-    static: {
-      directory: path.resolve(path.join(__dirname, "dist")),
-      watch: true,
-    },
-    open: true,
-    liveReload: true,
-    watchFiles: ["sass/**/*", "index.html", "index.js"],
-    hot: true,
-  },
-  target: "web",
-  stats: {
-    loggingDebug: ["sass-loader"],
-  },
-  plugins,
-  module: { rules },
-};
+const path = require("path");
+const rules = require("./webpack.rules");
+const plugins = require("./webpack.plugins");
+
+module.exports = {
+  entry: "./index.js",
+  output: {
+    filename: "index.js",
+    path: path.resolve(__dirname, "dist"),
+  },
+  devServer: {
+    static: {
+      directory: path.resolve(path.join(__dirname, "dist")),
+      watch: true,
+    },
+    open: true,
+    liveReload: true,
+    watchFiles: ["sass/**/*", "index.html", "index.js"],
+    hot: true,
+  },
+  target: "web",
+  stats: {
+    loggingDebug: ["sass-loader"],
+  },
+  plugins,
+  module: { rules },
+};