claritas-web-framework 8.0.22 → 8.0.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claritas-web-framework",
-  "version": "8.0.22",
+  "version": "8.0.24",
   "description": "The CSS framework built for Claritas front end.",
   "main": "index.js",
   "scripts": {
@@ -21,10 +21,10 @@
     "find-unused-sass-variables": "^5.0.0",
     "html-webpack-plugin": "^5.5.3",
     "mini-css-extract-plugin": "^2.7.6",
-    "prettier": "^3.0.1",
-    "sass": "^1.65.1",
+    "prettier": "^3.0.2",
+    "sass": "^1.66.1",
     "sass-loader": "^13.3.2",
-    "stylelint": "^15.10.2",
+    "stylelint": "^15.10.3",
     "stylelint-config-standard": "^34.0.0",
     "stylelint-config-standard-scss": "^10.0.0",
     "stylelint-scss": "^5.1.0",

package/sass/_variables.scss

@@ -240,8 +240,8 @@ $border-radii: (
 /* ---------------------------------- table --------------------------------- */
 $table-cell-padding-y: calc(($spacer * 0.625) - 0.5px) !default;
 $table-cell-padding-x: calc($spacer * 0.5) !default;
-$table-cell-padding-y-small: calc(($spacer * 0.25) - 1px) !default;
-$table-cell-padding-x-small: calc($spacer * 0.5) !default;
+$table-small-cell-padding-y: calc(($spacer * 0.25) - 1px) !default;
+$table-small-cell-padding-x: calc($spacer * 0.5) !default;
 $table-cell-border-style: solid !default;
 $table-cell-border-width: 1px !default;
 $table-cell-valign: top !default;
@@ -322,46 +322,58 @@ $label-color: $body-color !default;
 
 // inputs buttons
 $input-button-font-size: $font-size-base !default;
-$input-button-font-size-large: $font-size-4 !default;
-$input-button-font-size-small: $font-size-small !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;
-$input-button-padding-y-large: calc($spacer * 0.5) !default;
-$input-button-padding-x-large: calc($spacer * 1.25) !default;
-$input-button-padding-y-small: calc($spacer * 0.25) !default;
-$input-button-padding-x-small: calc($spacer * 0.5) !default;
+$input-button-large-padding-y: calc($spacer * 0.5) !default;
+$input-button-large-padding-x: calc($spacer * 1.25) !default;
+$input-button-small-padding-y: calc($spacer * 0.25) !default;
+$input-button-small-padding-x: calc($spacer * 0.5) !default;
+$input-button-border-radius: $border-radius-medium !default;
+$input-button-large-border-radius: $border-radius-large !default;
+$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-font-size-large: $input-button-font-size-large !default;
-$input-font-size-small: $input-button-font-size-small !default;
+$input-large-font-size: $input-button-large-font-size !default;
+$input-small-font-size: $input-button-small-font-size !default;
 $input-line-height: $input-button-line-height !default;
 $input-padding-y: $input-button-padding-y !default;
 $input-padding-x: $input-button-padding-x !default;
-$input-small-padding-y: $input-button-padding-y-small !default;
-$input-small-padding-x: $input-button-padding-x-small !default;
-$input-large-padding-y: $input-button-padding-y-large !default;
-$input-large-padding-x: $input-button-padding-x-large !default;
+$input-small-padding-y: $input-button-small-padding-y !default;
+$input-small-padding-x: $input-button-small-padding-x !default;
+$input-large-padding-y: $input-button-large-padding-y !default;
+$input-large-padding-x: $input-button-large-padding-x !default;
 $input-white-space: nowrap !default;
+$input-border-radius: $input-button-border-radius !default;
+$input-large-border-radius: $input-button-large-border-radius !default;
+$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-font-size-large: $input-button-font-size-large !default;
-$button-font-size-small: $input-button-font-size-small !default;
+$button-large-font-size: $input-button-large-font-size !default;
+$button-small-font-size: $input-button-small-font-size !default;
 $button-line-height: $input-button-line-height !default;
 $button-padding-y: $input-button-padding-y !default;
 $button-padding-x: $input-button-padding-x !default;
-$button-large-padding-y: $input-button-padding-y-large !default;
-$button-large-padding-x: $input-button-padding-x-large !default;
-$button-small-padding-y: $input-button-padding-y-small !default;
-$button-small-padding-x: $input-button-padding-x-small !default;
+$button-large-padding-y: $input-button-large-padding-y !default;
+$button-large-padding-x: $input-button-large-padding-x !default;
+$button-small-padding-y: $input-button-small-padding-y !default;
+$button-small-padding-x: $input-button-small-padding-x !default;
 $button-white-space: nowrap !default;
+$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;

package/sass/modules/_button.scss

@@ -53,9 +53,10 @@
   --button-border-width: 1px;
   --button-border-style: solid;
 
-  --button-border-radius: var(--border-radius-medium);
-  --button-small-border-radius: var(--border-radius-small);
-  --button-large-border-radius: var(--border-radius-large);
+  --button-border-radius: #{$button-border-radius};
+  --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};
@@ -91,18 +92,30 @@
   outline: 0;
   transition: $form-transition;
 
+  &.button--rounded {
+    border-radius: var(--button-round-border-radius);
+  }
+
   &.button--large {
     padding: var(--button-large-padding-y) var(--button-large-padding-x);
 
-    @include rfs($button-font-size-large, --button-font-size);
+    @include rfs($button-large-font-size, --button-font-size);
     @include font-size(var(--button-font-size));
+
+    &:not(.button--rounded) {
+      border-radius: var(--button-large-border-radius);
+    }
   }
 
   &.button--small {
     padding: var(--button-small-padding-y) var(--button-small-padding-x);
 
-    @include rfs($button-font-size-small, --button-font-size);
+    @include rfs($button-small-font-size, --button-font-size);
     @include font-size(var(--button-font-size));
+
+    &:not(.button--rounded) {
+      border-radius: var(--button-small-border-radius);
+    }
   }
 
   &:hover,

package/sass/modules/_form.scss

@@ -68,10 +68,10 @@
   --input-border-width: 1px;
   --input-border-style: solid;
 
-  --input-border-radius: var(--border-radius-medium);
-  --input-small-border-radius: var(--border-radius-small);
-  --input-large-border-radius: var(--border-radius-large);
-  --input-round-border-radius: var(--border-radius-round);
+  --input-border-radius: #{$input-border-radius};
+  --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};
@@ -97,7 +97,6 @@
   white-space: var(--input-white-space);
   width: var(--input-width);
   height: var(--input-height);
-
   display: block;
   appearance: none;
   transition: $form-transition;
@@ -155,7 +154,7 @@
   &.input--small {
     padding: var(--input-small-padding-y) var(--input-small-padding-x);
 
-    @include rfs($input-font-size-small, --input-font-size);
+    @include rfs($input-small-font-size, --input-font-size);
     @include font-size(var(--input-font-size));
 
     &:not(.input--rounded) {
@@ -166,7 +165,7 @@
   &.input--large {
     padding: var(--input-large-padding-y) var(--input-large-padding-x);
 
-    @include rfs($input-font-size-large, --input-font-size);
+    @include rfs($input-large-font-size, --input-font-size);
     @include font-size(var(--input-font-size));
 
     &:not(.input--rounded) {

package/sass/modules/_table.scss

@@ -39,7 +39,7 @@
   &.table--small {
     & td,
     & th {
-      padding: $table-cell-padding-y-small $table-cell-padding-x-small;
+      padding: $table-small-cell-padding-y $table-small-cell-padding-x;
     }
   }