claritas-web-framework 8.0.53 → 8.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claritas-web-framework",
-  "version": "8.0.53",
+  "version": "8.1.0",
   "description": "The CSS framework built for Claritas front end.",
   "main": "index.js",
   "scripts": {
@@ -17,23 +17,23 @@
   "author": "David Brooks",
   "license": "UNLICENSED",
   "devDependencies": {
-    "css-loader": "^6.10.0",
-    "find-unused-sass-variables": "^5.0.0",
+    "css-loader": "^7.1.1",
+    "find-unused-sass-variables": "^6.0.0",
     "html-webpack-plugin": "^5.6.0",
-    "mini-css-extract-plugin": "^2.8.0",
-    "prettier": "^3.2.4",
-    "sass": "^1.70.0",
-    "sass-loader": "^14.1.0",
-    "stylelint": "^16.2.1",
+    "mini-css-extract-plugin": "^2.9.0",
+    "prettier": "^3.2.5",
+    "sass-loader": "^14.2.1",
+    "stylelint": "^16.5.0",
     "stylelint-config-standard": "^36.0.0",
-    "stylelint-config-standard-scss": "^13.0.0",
-    "stylelint-scss": "^6.1.0",
-    "webpack": "^5.90.1",
+    "stylelint-config-standard-scss": "^13.1.0",
+    "stylelint-scss": "^6.2.1",
+    "webpack": "^5.91.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1"
+    "webpack-dev-server": "^5.0.4"
   },
   "dependencies": {
     "modern-normalize": "^2.0.0",
-    "rfs": "^10.0.0"
+    "rfs": "^10.0.0",
+    "sass": "^1.76.0"
   }
 }

package/sass/_functions.scss

@@ -1,5 +1,7 @@
 @use "sass:color";
+
 @use "sass:math";
+
 @use "sass:string";
 
 @use "./variables" as *;
@@ -13,6 +15,7 @@
 // @param {String} $search - Substring to replace
 // @param {String} $replace ('') - New value
 // @return {String} - Updated string
+
 @function str-replace($string, $search, $replace: "") {
   $index: string.index($string, $search);
 
@@ -27,13 +30,19 @@
 
 // See https://codepen.io/kevinweber/pen/dXWoRw
 // Requires the use of quotes around data URIs.
+
 @function escape-svg($string) {
+
   @if string.index($string, "data:image/svg+xml") {
+
     @each $char, $encoded in $escaped-characters {
       // Do not escape the url brackets
+
       @if string.index($string, "url(") == 1 {
         $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
-      } @else {
+      }
+
+ @else {
         $string: str-replace($string, $char, $encoded);
       }
     }
@@ -46,8 +55,12 @@
   $color-sum: math.max(color.lightness($value), 0%);
 
   @if $color-sum > $threshold {
+
     @return hsl(var(--dark-h) var(--dark-s) var(--dark-l) / $opacity);
-  } @else {
+  }
+
+ @else {
+
     @return hsl(var(--white-h) var(--white-s) var(--white-l) / $opacity);
   }
 }

package/sass/_helpers.scss

@@ -1,7 +1,13 @@
 @forward "./helpers/container";
+
 @forward "./helpers/embed";
+
 @forward "./helpers/grid";
+
 @forward "./helpers/image";
+
 @forward "./helpers/link";
+
 @forward "./helpers/screenReader";
+
 @forward "./helpers/wrap";

package/sass/_mixins.scss

@@ -1,12 +1,23 @@
 @forward "./mixins/breakpoints";
+
 @forward "./mixins/button";
+
 @forward "./mixins/caret";
+
 @forward "./mixins/clearfix";
+
 @forward "./mixins/colors";
+
 @forward "./mixins/container";
+
 @forward "./mixins/gradient";
+
 @forward "./mixins/grid";
+
 @forward "./mixins/group";
+
 @forward "./mixins/list";
+
 @forward "./mixins/screenReader";
+
 @forward "./mixins/wrap";

package/sass/_modules.scss

@@ -1,31 +1,61 @@
 @forward "./modules/alert";
+
 @forward "./modules/breadcrumbs";
+
 @forward "./modules/button";
+
 @forward "./modules/card";
+
 @forward "./modules/close";
+
 @forward "./modules/details";
+
 @forward "./modules/dialog";
+
 @forward "./modules/dropdown";
+
 @forward "./modules/form";
+
 @forward "./modules/form/formFieldGroup";
+
 @forward "./modules/form/checkbox";
+
 @forward "./modules/form/file";
+
 @forward "./modules/form/output";
+
 @forward "./modules/form/progress";
+
 @forward "./modules/form/radio";
+
 @forward "./modules/form/range";
+
 @forward "./modules/form/select";
+
 @forward "./modules/form/switch";
+
 @forward "./modules/form/text";
+
 @forward "./modules/form/textarea";
+
 @forward "./modules/form/toggle";
+
 @forward "./modules/list";
+
 @forward "./modules/loader";
+
 @forward "./modules/modal";
+
 @forward "./modules/nav";
+
 @forward "./modules/pill";
+
 @forward "./modules/table";
+
 @forward "./modules/tabs";
+
 @forward "./modules/tag";
+
 @forward "./modules/tile";
+
 @forward "./modules/tooltip";

package/sass/_reboot.scss

@@ -1,7 +1,9 @@
 @use "sass:color";
 
 @use "rfs/scss" as *;
+
 @use "./variables" as *;
+
 @use "./mixins" as *;
 
 body {
@@ -35,37 +37,49 @@ hr {
 
 h1,
 .h1 {
+
   @extend %heading;
+
   font-size: var(--font-size-1);
 }
 
 h2,
 .h2 {
+
   @extend %heading;
+
   font-size: var(--font-size-2);
 }
 
 h3,
 .h3 {
+
   @extend %heading;
+
   font-size: var(--font-size-3);
 }
 
 h4,
 .h4 {
+
   @extend %heading;
+
   font-size: var(--font-size-4);
 }
 
 h5,
 .h5 {
+
   @extend %heading;
+
   font-size: var(--font-size-5);
 }
 
 h6,
 .h6 {
+
   @extend %heading;
+
   font-size: var(--font-size-6);
 }
 
@@ -121,7 +135,8 @@ a {
   }
 }
 
-a:not([href]):not([class]) {
+a:not([href], [class]) {
+
   &,
   &:hover {
     color: inherit;
@@ -187,9 +202,7 @@ select {
   }
 }
 
-[list]:not([type="date"]):not([type="datetime-local"]):not([type="month"]):not([type="week"]):not(
-    [type="time"]
-  )::-webkit-calendar-picker-indicator {
+[list]:not([type="date"], [type="datetime-local"], [type="month"], [type="week"], [type="time"])::-webkit-calendar-picker-indicator {
   display: none !important;
 }
 

package/sass/_root.scss

@@ -1,12 +1,16 @@
 @use "./variables" as *;
+
 @use "./mixins/colors" as *;
 
 :root {
+
   @if $font-size-root {
+
     @include font-size(var(--root-font-size));
   }
 
   @if $enable-smooth-scroll {
+
     @media (prefers-reduced-motion: no-preference) {
       scroll-behavior: smooth;
     }
@@ -27,14 +31,17 @@
   --border-color-hover-main: #{$border-color-hover-main};
 
   @each $key, $value in $grays {
+
     @include define-color-variables($key, $value);
   }
 
   @each $key, $value in $all-colors {
+
     @include define-color-variables($key, $value);
   }
 
   @include define-color-variables($title: "body-color", $color: $body-color);
+
   @include define-color-variables($title: "border-color-main", $color: $border-color-main);
 
   @each $key, $value in $zindexes {

package/sass/_utilities.scss

@@ -1,17 +1,33 @@
 @forward "./utilities/align";
+
 @forward "./utilities/border";
+
 @forward "./utilities/colors";
+
 @forward "./utilities/display";
+
 @forward "./utilities/flex";
+
 @forward "./utilities/float";
+
 @forward "./utilities/order";
+
 @forward "./utilities/overflow";
+
 @forward "./utilities/pointerEvents";
+
 @forward "./utilities/position";
+
 @forward "./utilities/shadow";
+
 @forward "./utilities/size";
+
 @forward "./utilities/spacing";
+
 @forward "./utilities/translate";
+
 @forward "./utilities/typography";
+
 @forward "./utilities/visibility";
+
 @forward "./utilities/zIndex";

package/sass/_variables.scss

@@ -1,5 +1,7 @@
 @use "sass:map";
+
 @use "sass:color";
+
 @use "sass:math";
 
 /* --------------------------------- options -------------------------------- */
@@ -19,7 +21,6 @@ $gray-7: #4d5055 !default;
 $gray-8: #30353a !default;
 $gray-9: #14191f !default;
 $black: #000 !default;
-
 $grays: (
   "gray-1": $gray-1,
   "gray-2": $gray-2,
@@ -31,7 +32,6 @@ $grays: (
   "gray-8": $gray-8,
   "gray-9": $gray-9
 ) !default;
-
 $blue: #0d6efd !default;
 $indigo: #6610f2 !default;
 $purple: #6f42c1 !default;
@@ -42,7 +42,6 @@ $yellow: #ffc107 !default;
 $green: #198754 !default;
 $teal: #20c997 !default;
 $cyan: #0dcaf0 !default;
-
 $colors: (
   "blue": $blue,
   "indigo": $indigo,
@@ -57,7 +56,6 @@ $colors: (
   "white": $white,
   "black": $black
 ) !default;
-
 $primary: $blue !default;
 $secondary: $gray-6 !default;
 $success: $green !default;
@@ -67,7 +65,6 @@ $danger: $red !default;
 $light: $gray-1 !default;
 $medium: $gray-6 !default;
 $dark: $gray-8 !default;
-
 $theme-colors: (
   "primary": $primary,
   "secondary": $secondary,
@@ -79,12 +76,9 @@ $theme-colors: (
   "medium": $medium,
   "dark": $dark
 ) !default;
-
 $all-colors: map.merge($colors, $theme-colors) !default;
-
 $color-flip-threshold: 50% !default;
 $color-flip-l: 35% !default;
-
 $color-disabled-alpha: 65% !default;
 
 /* ---------------------------------- Misc ---------------------------------- */
@@ -100,7 +94,6 @@ $spacers: (
   4: $spacer * 1.5,
   5: $spacer * 3
 ) !default;
-
 $gutters: $spacers !default;
 
 /* ---------------------------------- links --------------------------------- */
@@ -123,7 +116,6 @@ $breakpoints: (
   "widescreen": 1216px,
   "fullhd": 1408px
 ) !default;
-
 $container-max-widths: (
   "mobile": 516px,
   "tablet": 708px,
@@ -131,7 +123,6 @@ $container-max-widths: (
   "widescreen": 1156px,
   "fullhd": 1348px
 ) !default;
-
 $grid-columns: 12 !default;
 $grid-gutter: calc($spacer * 1.5) !default;
 $grid-gutter-tight: calc($spacer * 0.75) !default;
@@ -140,17 +131,14 @@ $grid-gutter-tight: calc($spacer * 0.75) !default;
 $font-size-root: null !default;
 $font-size-base: $spacer !default;
 $line-height-base: 1.5 !default;
-
 $font-size-6: $font-size-base !default;
 $font-size-5: calc($font-size-base * 1.125) !default;
 $font-size-4: calc(($font-size-base * 1.275) + 0.3vw) !default;
 $font-size-3: calc(($font-size-base * 1.3) + 0.6vw) !default;
 $font-size-2: calc(($font-size-base * 1.325) + 0.9vw) !default;
 $font-size-1: calc(($font-size-base * 1.375) + 1.5vw) !default;
-
 $font-size-xsmall: 0.675em !default;
 $font-size-small: 0.875em !default;
-
 $font-sizes: (
   1: $font-size-1,
   2: $font-size-2,
@@ -175,7 +163,6 @@ $font-family-sans-serif:
 $font-family-serif: cambria, "Hoefler Text", utopia, serif !default;
 $font-family-monospace: sfmono-regular, menlo, monaco, consolas, monospace !default;
 $font-family-base: $font-family-sans-serif !default;
-
 $font-families: (
   "sans-serif": $font-family-sans-serif,
   "serif": $font-family-serif,
@@ -315,7 +302,6 @@ $form-file-indicator-color: rgba($body-color, 25%) !default;
 $form-file-indicator-hover-color: rgba($body-color, 50%) !default;
 $form-file-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='#{$form-file-indicator-color}' stroke='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z'/></svg>") !default;
 $form-file-indicator-hover: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='#{$form-file-indicator-hover-color}' stroke='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z'/></svg>") !default;
-
 $form-transition:
   color 0.15s ease-in-out,
   background-color 0.15s ease-in-out,
@@ -385,10 +371,8 @@ $button-border-radius: $input-button-border-radius !default;
 $button-large-border-radius: $input-button-large-border-radius !default;
 $button-small-border-radius: $input-button-small-border-radius !default;
 $button-round-border-radius: $input-button-round-border-radius !default;
-
 $button-color-flip-threshold: 60% !default;
 $button-color-flip-l: 35% !default;
-
 $button-disabled-border-alpha: 35% !default;
 $button-disabled-background-alpha: $color-disabled-alpha !default;
 $button-hover-background-alpha: 10% !default;

package/sass/helpers/_container.scss

@@ -1,11 +1,14 @@
 @use "./../variables" as *;
+
 @use "./../mixins/container" as *;
 
 .container,
 .container--fluid {
+
   @include make-container;
 }
 
 .container {
+
   @include make-container-max-widths($container-max-widths, $breakpoints);
 }

package/sass/helpers/_embed.scss

@@ -29,6 +29,7 @@
 
 @each $key, $value in $embeds {
   .embed--#{$key} {
+
     &::before {
       padding-top: $value !important;
     }

package/sass/helpers/_grid.scss

@@ -1,34 +1,44 @@
 @use "sass:map";
+
 @use "sass:math";
 
 @use "./../variables" as *;
+
 @use "./../mixins/breakpoints" as *;
+
 @use "./../mixins/grid" as *;
 
 // Row
 // Rows contain your columns.
+
 :root {
+
   @each $name, $value in $breakpoints {
     --breakpoint-#{$name}: #{$value};
   }
 }
 
 .grid {
+
   @include make-row;
 }
 
 .grid--tight {
+
   @include make-row($grid-gutter-tight);
 }
 
 .grid,
 .grid--tight {
+
   > * {
+
     @include make-col-ready;
   }
 }
 
 @if $enable-cssgrid {
+
   .g-grid {
     gap: var(--gap, #{$grid-gutter});
   }
@@ -49,4 +59,5 @@
 
 // Columns
 // Common styles for small and large grid columns
+
 @include make-grid-columns;

package/sass/helpers/_link.scss

@@ -1,4 +1,5 @@
 .link--stretched {
+
   &::after,
   &::before {
     position: absolute;

package/sass/helpers/_screenReader.scss

@@ -1,9 +1,11 @@
 @use "./../mixins/screenReader" as *;
 
 .screen-reader {
+
   @include make-screen-reader(false);
 }
 
 .screen-reader--focusable {
+
   @include make-screen-reader(true);
 }

package/sass/helpers/_wrap.scss

@@ -1,5 +1,6 @@
 @use "./../mixins/wrap" as *;
 
 .wrap--overflow {
+
   @include make-wrap-overflow;
 }

package/sass/index.scss

@@ -1,10 +1,17 @@
 @forward "./variables";
+
 @forward "./functions";
+
 @forward "./mixins";
+
 @forward "./helpers";
+
 @forward "./utilities";
+
 @forward "./modules";
+
 @forward "./reboot";
+
 @forward "./root";
 
 @import "modern-normalize/modern-normalize.css";