claritas-web-framework 7.0.1 → 8.0.0

package/sass/modules/form/_text.scss

@@ -2,27 +2,30 @@
 @use "./../../variables" as *;
 
 .input--text {
-  border-color: transparent;
-  box-shadow: none;
-  border-radius: $border-radius-none;
-  padding-left: 0;
-  padding-right: 0;
-  border-width: 0 0 1px;
+  --input-border-width: 0 0 1px;
 
-  &:hover {
-    border-color: $input-hover-border-color;
-    box-shadow: none;
-  }
+  --input-padding-x: 0;
+  --input-small-padding-x: 0;
+  --input-large-padding-x: 0;
+
+  --input-box-shadow: 0 0 0 0.125em hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 0%);
+  --input-hover-box-shadow: 0 0 0 0.125em hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 0%);
+  --input-focus-box-shadow: 0 0 0 0.125em hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 0%);
+  --input-active-box-shadow: 0 0 0 0.125em hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 0%);
+  --input-disabled-box-shadow: 0 0 0 0.125em hsl(var(--body-color-h) var(--body-color-s) var(--body-color-l) / 0%);
+
+  --input-border-radius: 0;
+  --input-small-border-radius: 0;
+  --input-large-border-radius: 0;
+  --input-round-border-radius: 0;
 
   @each $key, $value in $theme-colors {
     &.input--#{$key} {
-      border-color: rgba($value, 50%);
-      box-shadow: none;
-
-      &:hover {
-        border-color: $value;
-        box-shadow: none;
-      }
+      --input-box-shadow: 0 0 0 0.125em hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 0%);
+      --input-hover-box-shadow: 0 0 0 0.125em hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 0%);
+      --input-focus-box-shadow: 0 0 0 0.125em hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 0%);
+      --input-active-box-shadow: 0 0 0 0.125em hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 0%);
+      --input-disabled-box-shadow: 0 0 0 0.125em hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 0%);
     }
   }
 }

package/sass/modules/form/_textarea.scss

@@ -1,3 +1,3 @@
 textarea {
-  white-space: normal;
+  --input-white-space: normal;
 }

package/sass/modules/form/_toggle.scss

@@ -5,25 +5,23 @@
 .form--control-toggle {
   & > * {
     &:not(:last-child) {
-      margin-right: $spacer;
+      margin-right: var(--spacer);
 
       @include media-breakpoint-up("desktop") {
-        margin-right: calc($spacer * 0.5);
+        margin-right: calc(var(--spacer) * 0.5);
       }
     }
   }
 
   & input[type="checkbox"] {
-    height: $input-size;
-    width: calc($input-size * 2);
-    vertical-align: text-bottom;
-    border-radius: $border-radius-round;
-    padding: 0;
+    --input-width: auto;
+    --input-desktop-width: auto;
+    --input-padding-x: #{calc(($input-padding-x * 2) + 1px)};
 
-    @include media-breakpoint-up("desktop") {
-      height: calc($input-size * 0.75);
-      width: calc(($input-size * 0.75) * 2);
-    }
+    border-radius: var(--input-round-border-radius);
+    aspect-ratio: 2 / 1;
+    flex-shrink: 0;
+    vertical-align: text-bottom;
 
     &::before {
       content: "";
@@ -31,65 +29,38 @@
       margin: auto;
       inset: 0 50% 0 0;
       overflow: hidden;
-      border: 6px solid $input-background-color;
-      border-radius: $border-radius-round;
-      background: $input-border-color;
-      transition: left 0.2s, right 0.2s;
-
-      @include media-breakpoint-up("desktop") {
-        border-width: 4px;
-      }
-    }
-
-    &:disabled,
-    &.disabled,
-    &[aria-disabled="true"] {
-      &::before {
-        border-color: $light;
-      }
+      border-radius: var(--input-round-border-radius);
+      background: var(--input-border-color);
+      width: 35%;
+      aspect-ratio: 1;
+      transition:
+        left 0.2s,
+        right 0.2s;
     }
 
     &:checked {
-      background: $input-detail-color;
+      background: var(--input-detail-background);
 
       &::before {
-        background: $white;
+        background: var(--white);
         left: 50%;
         right: 0;
-        border-color: $input-detail-color;
       }
 
       &:disabled,
       &.disabled,
       &[aria-disabled="true"] {
-        background-color: $light;
-        border-color: rgba($input-detail-color, 40%);
-
-        &::before {
-          background: rgba($input-detail-color, 40%);
-          border-color: $light;
-        }
+        background: var(--input-disabled-detail-background);
       }
     }
 
     @each $key, $value in $theme-colors {
       &.input--#{$key} {
-        &:checked {
-          background: $value;
-
-          &::before {
-            border-color: $value;
-          }
+        --input-border-color: hsl(var(--#{$key}-h) var(--#{$key}-s) var(--#{$key}-l) / 65%);
 
-          &:disabled,
-          &.disabled,
-          &[aria-disabled="true"] {
-            border-color: rgba($value, 40%);
-
-            &::before {
-              background: rgba($value, 40%);
-            }
-          }
+        &: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%);
         }
       }
     }

package/webpack.config.js

@@ -1,6 +1,6 @@
 const path = require("path");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const HtmlWebpackPlugin = require("html-webpack-plugin");
+const rules = require("./webpack.rules");
+const plugins = require("./webpack.plugins");
 
 module.exports = {
   entry: "./index.js",
@@ -15,30 +15,13 @@ module.exports = {
     },
     open: true,
     liveReload: true,
-    watchFiles: ["images/**/*", "js/**/*", "scss/**/*", "styles/**/*", "index.html", "index.js"],
+    watchFiles: ["sass/**/*", "index.html", "index.js"],
     hot: true,
   },
   target: "web",
   stats: {
     loggingDebug: ["sass-loader"],
   },
-  plugins: [
-    new HtmlWebpackPlugin({
-      title: "Claritas Web Framework",
-      template: path.resolve(path.join(__dirname, "index.html")),
-      filename: "index.html", // output file
-    }),
-    new MiniCssExtractPlugin({
-      filename: "./index.css",
-      chunkFilename: "[id].css",
-    }),
-  ],
-  module: {
-    rules: [
-      {
-        test: /\.(?:css|scss)$/i,
-        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
-      },
-    ],
-  },
+  plugins,
+  module: { rules },
 };

package/webpack.plugins.js

@@ -0,0 +1,15 @@
+const path = require("path");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+
+module.exports = [
+  new HtmlWebpackPlugin({
+    title: "Claritas Web Framework",
+    template: path.resolve(path.join(__dirname, "index.html")),
+    filename: "index.html", // output file
+  }),
+  new MiniCssExtractPlugin({
+    filename: "./index.css",
+    chunkFilename: "[id].css",
+  }),
+];

package/webpack.rules.js

@@ -0,0 +1,8 @@
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
+module.exports = [
+  {
+    test: /\.(?:css|scss)$/i,
+    use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
+  },
+];

package/images/block.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
-	<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z" />
-</svg>

package/images/check.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
-	<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
-</svg>

package/images/chevron-down.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>

package/images/menu.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
-	<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
-</svg>

package/images/remove.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
-	<path d="M19 13H5v-2h14v2z" />
-</svg>

package/images/subdirectory.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
-	<path d="M19 15l-6 6-1.42-1.42L15.17 16H4V4h2v10h9.17l-3.59-3.58L13 9l6 6z" />
-</svg>

package/images/upload.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
-	<path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z" />
-</svg>

package/sass/mixins/_borderRadius.scss

@@ -1,79 +0,0 @@
-@use "sass:list";
-@use "./../variables" as *;
-
-// Single side border-radius
-
-// Helper function to replace negative values with 0
-@function valid-radius($radius) {
-  $return: ();
-
-  @each $value in $radius {
-    @if type-of($value) == number {
-      $return: list.append($return, max($value, 0));
-    } @else {
-      $return: list.append($return, $value);
-    }
-  }
-
-  @return $return;
-}
-
-@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
-  @if $enable-rounded {
-    border-radius: valid-radius($radius);
-  } @else if $fallback-border-radius != false {
-    border-radius: $fallback-border-radius;
-  }
-}
-
-@mixin border-top-radius($radius: $border-radius) {
-  @if $enable-rounded {
-    border-top-left-radius: valid-radius($radius);
-    border-top-right-radius: valid-radius($radius);
-  }
-}
-
-@mixin border-end-radius($radius: $border-radius) {
-  @if $enable-rounded {
-    border-top-right-radius: valid-radius($radius);
-    border-bottom-right-radius: valid-radius($radius);
-  }
-}
-
-@mixin border-bottom-radius($radius: $border-radius) {
-  @if $enable-rounded {
-    border-bottom-right-radius: valid-radius($radius);
-    border-bottom-left-radius: valid-radius($radius);
-  }
-}
-
-@mixin border-start-radius($radius: $border-radius) {
-  @if $enable-rounded {
-    border-top-left-radius: valid-radius($radius);
-    border-bottom-left-radius: valid-radius($radius);
-  }
-}
-
-@mixin border-top-start-radius($radius: $border-radius) {
-  @if $enable-rounded {
-    border-top-left-radius: valid-radius($radius);
-  }
-}
-
-@mixin border-top-end-radius($radius: $border-radius) {
-  @if $enable-rounded {
-    border-top-right-radius: valid-radius($radius);
-  }
-}
-
-@mixin border-bottom-end-radius($radius: $border-radius) {
-  @if $enable-rounded {
-    border-bottom-right-radius: valid-radius($radius);
-  }
-}
-
-@mixin border-bottom-start-radius($radius: $border-radius) {
-  @if $enable-rounded {
-    border-bottom-left-radius: valid-radius($radius);
-  }
-}

package/sass/mixins/_boxShadow.scss

@@ -1,22 +0,0 @@
-@use "sass:list";
-@use "./../variables" as *;
-
-@mixin box-shadow($shadow...) {
-  @if $enable-shadows {
-    $result: ();
-
-    @each $value in $shadow {
-      @if $value {
-        $result: list.append($result, $value, "comma");
-      }
-
-      @if $value == none and length($shadow) > 1 {
-        @warn "The keyword 'none' must be used as a single argument.";
-      }
-    }
-
-    @if length($result) > 0 {
-      box-shadow: $result;
-    }
-  }
-}

package/sass/mixins/_colors.temp.scss

@@ -1,89 +0,0 @@
-@use "sass:color";
-@use "./../variables" as *;
-@use "./../functions" as *;
-
-/* --------------- Splits a colour into it's base hsla values --------------- */
-@mixin define-color-variables($title, $color) {
-  --#{$title}-h: #{color.hue($color)};
-  --#{$title}-s: #{color.saturation($color)};
-  --#{$title}-l: #{color.lightness($color)};
-  --#{$title}-a: #{color.alpha($color)};
-}
-
-@function hsl-color($title, $hue: 0deg, $lightness: 0%, $saturation: 0%, $alpha: 0) {
-  @return hsl(
-    calc(var(--#{$title}-h) + #{$hue}) calc(var(--#{$title}-s) + #{$saturation})
-      calc(var(--#{$title}-l) + #{$lightness}) / calc(var(--#{$title}-a) + #{$alpha})
-  );
-}
-
-@mixin make-color($title, $color) {
-  // $value: define-color-variables($title, $color);
-
-  // :root {
-  @include define-color-variables($title, $color);
-
-  // }
-
-  color: hsl(var(--#{$title}-h) var(--#{$title}-s) var(--#{$title}-l) / var(--#{$title}-a));
-}
-
-// @mixin make-link-color($value, $shade: $link-shade-value, $title: "") {
-//   $hsla: hsla(
-//     #{var(--#{$value}-h)} var(--#{$value}-s) var(--#{$value}-l) / var(--#{$value}-a)
-//   );
-
-//   --#{$title}color: #{$hsla};
-
-//   color: var(--#{$title}color) !important;
-
-//   &:hover,
-//   &:focus {
-//     @include make-color($value, $shade: $link-shade-value, $title: "");
-//   }
-// }
-
-// @mixin make-color($value, $shade: 0, $title: "") {
-//   $hsla: hsl(
-//     var(--#{$value}-h) var(--#{$value}-s) calc(var(--#{$value}-l) * $shade) /
-//       var(--#{$value}-a)
-//   );
-
-//   --#{$title}color: #{$hsla};
-
-//   color: var(--#{$title}color) !important;
-
-//   & a {
-//     @include make-link-color($value, $shade: $link-shade-value);
-//   }
-// }
-
-// @mixin make-background-color($value, $title: "") {
-//   $hsla: hsl(
-//     var(--#{$value}-h) var(--#{$value}-s) var(--#{$value}-l) /
-//       var(--#{$value}-a)
-//   );
-
-//   --#{$title}background-color: #{$hsla};
-
-//   background-color: var(--#{$title}background-color) !important;
-// }
-
-// @mixin make-border-color($value, $title: "", $alpha: null) {
-//   @if $alpha {
-//     $hsla: hsl(var(--#{$value}-h) var(--#{$value}-s) var(--#{$value}-l) / #{$alpha});
-
-//     --#{$title}border-color: #{$hsla};
-//   } @else {
-//     $hsla: hsl(
-//       var(--#{$value}-h)
-//         var(--#{$value}-s)
-//         var(--#{$value}-l) /
-//         var(--#{$value}-a)
-//     );
-
-//     --#{$title}border-color: #{$hsla};
-//   }
-
-//   border-color: var(--#{$title}border-color) !important;
-// }

package/sass/mixins/_pill.scss

@@ -1,14 +0,0 @@
-@use "sass:color";
-@use "./../variables" as *;
-@use "./../functions" as *;
-@use "./../mixins/gradient" as *;
-
-@mixin pill-variant($background, $color) {
-  color: $color;
-
-  @include gradient-background($background);
-
-  &.pill--link {
-    color: color.mix(black, $color, $link-shade-percentage);
-  }
-}