claritas-web-framework 8.5.6 → 8.5.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claritas-web-framework",
-  "version": "8.5.6",
+  "version": "8.5.8",
   "description": "The CSS framework built for Claritas front end.",
   "main": "index.js",
   "scripts": {
@@ -23,11 +23,11 @@
     "sass-loader": "^16.0.5",
     "webpack": "^5.99.9",
     "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^5.2.1"
+    "webpack-dev-server": "^5.2.2"
   },
   "dependencies": {
     "modern-normalize": "^3.0.1",
     "rfs": "^10.0.0",
-    "sass": "^1.89.0"
+    "sass": "^1.89.1"
   }
 }

package/sass/_reboot.scss

@@ -25,7 +25,6 @@ hr {
 
 %heading {
   margin: 0 0 0.5rem;
-  font-family: $headings-font-family;
   font-style: $headings-font-style;
   font-weight: $headings-font-weight;
   line-height: $headings-line-height;

package/sass/_variables.scss

@@ -207,7 +207,6 @@ $text-wraps: (normal, nowrap) !default;
 $font-styles: (italic, oblique, normal) !default;
 
 /* -------------------------------- headings -------------------------------- */
-$headings-font-family: null !default;
 $headings-font-style: null !default;
 $headings-font-weight: $font-weight-bold !default;
 $headings-line-height: 1.2 !default;
@@ -322,7 +321,6 @@ $label-color: $body-color !default;
 $input-button-font-size: $font-size-base !default;
 $input-button-large-font-size: $font-size-4 !default;
 $input-button-small-font-size: $font-size-small !default;
-$input-button-font-family: $font-family-sans-serif !default;
 $input-button-line-height: $line-height-base !default;
 $input-button-padding-y: calc($spacer * 0.375) !default;
 $input-button-padding-x: calc($spacer * 0.75) !default;
@@ -336,7 +334,6 @@ $input-button-small-border-radius: $border-radius-small !default;
 $input-button-round-border-radius: $border-radius-round !default;
 
 // Input
-$input-font-family: $input-button-font-family !default;
 $input-font-weight: $font-weight-normal !default;
 $input-font-size: $input-button-font-size !default;
 $input-large-font-size: $input-button-large-font-size !default;
@@ -355,7 +352,6 @@ $input-small-border-radius: $input-button-small-border-radius !default;
 $input-round-border-radius: $input-button-round-border-radius !default;
 
 // Button
-$button-font-family: $input-button-font-family !default;
 $button-font-weight: $font-weight-normal !default;
 $button-font-size: $input-button-font-size !default;
 $button-large-font-size: $input-button-large-font-size !default;

package/sass/mixins/_group.scss

@@ -8,11 +8,9 @@
   justify-content: flex-start;
   position: relative;
 
-  @if $enable-margins {
-    margin-bottom: var(--spacer);
-  } @else {
-    margin-bottom: 0;
-  }
+  $group-margin-fallback: if($enable-margins, var(--spacer), 0);
+
+  margin-bottom: var(--group-margin-bottom, #{$group-margin-fallback});
 }
 
 @mixin make-group-column($gap: calc(var(--spacer) * 0.5)) {

package/sass/mixins/_list.scss

@@ -6,11 +6,9 @@
   margin: 0;
   padding: 0;
 
-  @if $enable-margins {
-    margin-bottom: var(--spacer);
-  } @else {
-    margin-bottom: 0;
-  }
+  $list-margin-fallback: if($enable-margins, var(--spacer), 0);
+
+  margin-bottom: var(--list-margin-bottom, #{$list-margin-fallback});
 }
 
 @mixin make-list-inline($gap: calc(var(--spacer) * 0.5)) {

package/sass/modules/_alert.scss

@@ -20,11 +20,9 @@
   background: var(--alert-background);
   position: relative;
 
-  @if $enable-margins {
-    margin-bottom: var(--spacer);
-  } @else {
-    margin-bottom: 0;
-  }
+  $alert-margin-fallback: if($enable-margins, var(--spacer), 0);
+
+  margin-bottom: var(--alert-margin-bottom, #{$alert-margin-fallback});
 
   @each $key in (1, 2, 3, 4, 5, 6) {
     h#{$key},

package/sass/modules/_button.scss

@@ -38,7 +38,6 @@
   --button-small-border-radius: #{$button-small-border-radius};
   --button-large-border-radius: #{$button-large-border-radius};
   --button-round-border-radius: #{$button-round-border-radius};
-  --button-font-family: #{$button-font-family};
   --button-font-weight: #{$button-font-weight};
   --button-line-height: #{$button-line-height};
   --button-text-decoration: none;
@@ -55,7 +54,6 @@
   border: var(--button-border-width) var(--button-border-style) var(--button-border-color);
   box-shadow: var(--button-box-shadow);
   color: var(--button-color);
-  font-family: var(--button-font-family);
   font-weight: var(--button-font-weight);
   line-height: var(--button-line-height);
   padding: var(--button-padding-y) var(--button-padding-x);

package/sass/modules/_card.scss

@@ -24,11 +24,9 @@
   flex: 1 1 auto;
   position: relative;
 
-  @if $enable-margins {
-    margin-bottom: var(--spacer);
-  } @else {
-    margin-bottom: 0;
-  }
+  $card-margin-fallback: if($enable-margins, var(--spacer), 0);
+
+  margin-bottom: var(--card-margin-bottom, #{$card-margin-fallback});
 
   & > * {
     &:first-child {

package/sass/modules/_details.scss

@@ -4,11 +4,9 @@
 details {
   transition: $details-transition;
 
-  @if $enable-margins {
-    margin-bottom: var(--spacer);
-  } @else {
-    margin-bottom: 0;
-  }
+  $details-margin-fallback: if($enable-margins, var(--spacer), 0);
+
+  margin-bottom: var(--details-margin-bottom, #{$details-margin-fallback});
 
   & summary {
     position: relative;

package/sass/modules/_form.scss

@@ -56,7 +56,6 @@
   --input-small-border-radius: #{$input-small-border-radius};
   --input-large-border-radius: #{$input-large-border-radius};
   --input-round-border-radius: #{$input-round-border-radius};
-  --input-font-family: #{$input-font-family};
   --input-font-weight: #{$input-font-weight};
   --input-line-height: #{$input-line-height};
   --input-white-space: #{$input-white-space};
@@ -73,7 +72,6 @@
   box-shadow: var(--input-box-shadow);
   padding: var(--input-padding-y) var(--input-padding-x);
   border-radius: var(--input-border-radius);
-  font-family: var(--input-font-family);
   font-weight: var(--input-font-weight);
   line-height: var(--input-line-height);
   white-space: var(--input-white-space);
@@ -122,7 +120,6 @@
     border-color: var(--input-disabled-border-color);
     background: var(--input-disabled-background);
     box-shadow: var(--input-disabled-box-shadow);
-    pointer-events: none;
     opacity: 1;
   }
 

package/sass/modules/_list.scss

@@ -12,11 +12,9 @@
 }
 
 dl {
-  @if $enable-margins {
-    margin-bottom: var(--spacer);
-  } @else {
-    margin-bottom: 0;
-  }
+  $dl-margin-fallback: if($enable-margins, var(--spacer), 0);
+
+  margin-bottom: var(--dl-margin-bottom, #{$dl-margin-fallback});
 
   & > *:last-child {
     margin-bottom: 0;
@@ -53,11 +51,9 @@ dl {
     border-radius: var(--border-radius-medium);
     border: 1px solid var(--border-color-main);
 
-    @if $enable-margins {
-      margin-bottom: var(--spacer);
-    } @else {
-      margin-bottom: 0;
-    }
+    $li-margin-fallback: if($enable-margins, var(--spacer), 0);
+
+    margin-bottom: var(--li-margin-bottom, #{$li-margin-fallback});
 
     & .list__item {
       padding: calc(calc(var(--spacer) * 0.625) - 1px) var(--spacer);

package/sass/modules/_nav.scss

@@ -77,7 +77,6 @@
   }
 
   & .nav__title {
-    font-family: $headings-font-family;
     font-style: $headings-font-style;
     font-weight: $headings-font-weight;
     color: $headings-color;

package/sass/modules/_tabs.scss

@@ -7,11 +7,9 @@
   --tabs-border-color: var(--border-color-main);
   --tabs-background: var(--white);
 
-  @if $enable-margins {
-    margin-bottom: var(--spacer);
-  } @else {
-    margin-bottom: 0;
-  }
+  $tabs-margin-fallback: if($enable-margins, var(--spacer), 0);
+
+  margin-bottom: var(--tabs-margin-bottom, #{$tabs-margin-fallback});
 
   & .nav--tabs {
     margin-bottom: 0;

package/sass/modules/_tile.scss

@@ -28,11 +28,9 @@
   flex: 1 1 auto;
   position: relative;
 
-  @if $enable-margins {
-    margin-bottom: var(--spacer);
-  } @else {
-    margin-bottom: 0;
-  }
+  $tile-margin-fallback: if($enable-margins, var(--spacer), 0);
+
+  margin-bottom: var(--tile-margin-bottom, #{$tile-margin-fallback});
 
   & > * {
     &:first-child {

package/sass/modules/form/_output.scss

@@ -3,6 +3,4 @@
 
 output {
   --input-background: color-mix(in oklab, var(--body-color), #fff 95%);
-
-  pointer-events: none;
 }