claritas-web-framework 6.0.5 → 6.0.7

package/index.js

@@ -1,2 +1,2 @@
 // Import CSS
-import "./scss/_index.scss";
+import "./sass/_index.scss";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claritas-web-framework",
-  "version": "6.0.5",
+  "version": "6.0.7",
   "updated": "13/10/2022",
   "description": "The CSS framework built for Claritas front end.",
   "main": "index.js",

package/{scss → sass}/_variables.scss

@@ -443,9 +443,9 @@ $headings-line-height: 1.2 !default;
 $headings-color: $body-color !default;
 
 $border-color-main: $black !default;
-$border-opacity-unfocus: 0.1 !default;
-$border-opacity: 0.2 !default;
-$border-opacity-hover: 0.3 !default;
+$border-opacity-unfocus: 10% !default;
+$border-opacity: 20% !default;
+$border-opacity-hover: 30% !default;
 $border-width: 1px !default;
 $border-style: solid !default;
 $border-radius-small: calc($spacer * 0.15) !default;
@@ -465,7 +465,7 @@ $hr-height: null !default; // Deprecated in v5.2.0
 
 $hr-border-color: null !default; // Allows for inherited colors
 $hr-border-width: $border-width !default;
-$hr-opacity: 0.25 !default;
+$hr-opacity: 25% !default;
 
 $legend-margin-bottom: 0.5rem !default;
 $legend-font-size: 1.5rem !default;
@@ -489,21 +489,15 @@ $table-cell-padding-y-small: calc(($spacer * 0.25) - 1px) !default;
 $table-cell-padding-x-small: calc($spacer * 0.5) !default;
 $table-cell-border-style: solid !default;
 $table-cell-border-width: 1px !default;
-$table-cell-border-color: rgb(
-  #{color.red($border-color-main)} #{color.green($border-color-main)} #{color.blue($border-color-main)} / #{$border-opacity}
-) !default;
+$table-cell-border-color: rgba($border-color-main, $border-opacity) !default;
 $table-cell-valign: top !default;
 $table-th-font-weight: null !default;
 $table-th-border-width: 2px !default;
 $table-background-color: transparent !default;
 $table-head-background-color: $light !default;
 $table-striped-background-opacity: 4% !default;
-$table-even-background-color: rgb(
-  #{color.red($dark)} #{color.green($dark)} #{color.blue($dark)} / #{$table-striped-background-opacity}
-) !default;
-$table-odd-background-color: rgb(
-  #{color.red($light)} #{color.green($light)} #{color.blue($light)} / #{$table-striped-background-opacity}
-) !default;
+$table-even-background-color: rgba($dark, $table-striped-background-opacity) !default;
+$table-odd-background-color: rgba($light, $table-striped-background-opacity) !default;
 $table-caption-color: $medium !default;
 
 $zindex-static: 0 !default;
@@ -531,12 +525,9 @@ $zindexes: (
 ) !default;
 
 $box-shadow-none: none !default;
-$box-shadow-small: 0 calc($spacer * 0.125) calc($spacer * 0.25)
-  rgb(#{color.red($dark)} #{color.green($dark)} #{color.blue($dark)} / 7.5%) !default;
-$box-shadow-medium: 0 calc($spacer * 0.5) calc($spacer * 0.75)
-  rgb(#{color.red($dark)} #{color.green($dark)} #{color.blue($dark)} / 15%) !default;
-$box-shadow-large: 0 $spacer calc($spacer * 2.5)
-  rgb(#{color.red($dark)} #{color.green($dark)} #{color.blue($dark)} / 17.5%) !default;
+$box-shadow-small: 0 calc($spacer * 0.125) calc($spacer * 0.25) rgba($dark, 7.5%) !default;
+$box-shadow-medium: 0 calc($spacer * 0.5) calc($spacer * 0.75) rgba($dark, 15%) !default;
+$box-shadow-large: 0 $spacer calc($spacer * 2.5) rgba($dark, 17.5%) !default;
 
 $box-shadows: (
   "none": $box-shadow-none,
@@ -558,17 +549,11 @@ $escaped-characters: (("<", "%3c"), (">", "%3e"), ("#", "%23"), ("(", "%28"), ("
 $form-select-indicator-color: $body-color !default;
 $form-select-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>") !default;
 
-$list-nested-indicator-color: rgb(
-  #{color.red($body-color)} #{color.green($body-color)} #{color.blue($body-color)} / 25%
-) !default;
+$list-nested-indicator-color: rgba($body-color, 25%) !default;
 $list-nested-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='#{$list-nested-indicator-color}' stroke='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 15l-6 6-1.42-1.42L15.17 16H4V4h2v10h9.17l-3.59-3.58L13 9l6 6z'/></svg>") !default;
 
-$form-file-indicator-color: rgb(
-  #{color.red($body-color)} #{color.green($body-color)} #{color.blue($body-color)} / 25%
-) !default;
-$form-file-indicator-color-hover: rgb(
-  #{color.red($body-color)} #{color.green($body-color)} #{color.blue($body-color)} / 50%
-) !default;
+$form-file-indicator-color: rgba($body-color, 25%) !default;
+$form-file-indicator-color-hover: 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-color-hover}' stroke='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z'/></svg>") !default;
 
@@ -586,12 +571,8 @@ $label-color: $body-color !default;
 
 $input-button-border-width: $border-width !default;
 $input-button-border-style: $border-style !default;
-$input-button-border-color: rgb(
-  #{color.red($border-color-main)} #{color.green($border-color-main)} #{color.blue($border-color-main)} / #{$border-opacity}
-) !default;
-$input-button-border-color-hover: rgb(
-  #{color.red($border-color-main)} #{color.green($border-color-main)} #{color.blue($border-color-main)} / #{$border-opacity-hover}
-) !default;
+$input-button-border-color: rgba($border-color-main, $border-opacity) !default;
+$input-button-border-color-hover: rgba($border-color-main, $border-opacity-hover) !default;
 $input-button-border-radius: $border-radius-default !default;
 $input-button-border-radius-large: $border-radius-large !default;
 $input-button-border-radius-small: $border-radius-small !default;
@@ -609,7 +590,7 @@ $input-button-padding-y-small: calc($spacer * 0.25) !default;
 $input-button-padding-x-small: calc($spacer * 0.5) !default;
 
 $input-button-focus-box-shadow: 0 0 0 calc($spacer * 0.25) $input-button-border-color !default;
-$input-button-disabled-opacity: 0.65 !default;
+$input-button-disabled-opacity: 65% !default;
 
 $input-button-detail-color: $primary !default;
 
@@ -675,22 +656,16 @@ $button-active-border-shade-amount: 25% !default;
 $button-active-border-tint-amount: 10% !default;
 
 $button-font-weight: $font-weight-normal !default;
-$button-box-shadow: inset 0 1px 0 rgb(#{color.red($white)} #{color.green($white)} #{color.blue($white)} / 15%),
-  0 1px 1px rgb(#{color.red($black)} #{color.green($black)} #{color.blue($black)} / 7.5%) !default;
+$button-box-shadow: inset 0 1px 0 rgba($white, 15%), 0 1px 1px rgba($black, 7.5%) !default;
 $button-focus-width: calc($spacer * 0.25) !default;
 $button-focus-box-shadow: $input-button-focus-box-shadow !default;
-$button-disabled-opacity: 0.65 !default;
-$button-active-box-shadow: inset 0 3px 5px
-  rgb(#{color.red($black)} #{color.green($black)} #{color.blue($black)} / 12.5%) !default;
+$button-disabled-opacity: $input-button-disabled-opacity !default;
+$button-active-box-shadow: inset 0 3px 5px rgba($black, 12.5%) !default;
 
 $button-close-indicator-color: $white !default;
 $button-close-indicator: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path fill='#{$button-close-indicator-color}' d='M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z'/></svg>") !default;
-$button-close-background-color: rgb(
-  #{color.red($border-color-main)} #{color.green($border-color-main)} #{color.blue($border-color-main)} / #{$border-opacity}
-) !default;
-$button-close-background-color-hover: rgb(
-  #{color.red($border-color-main)} #{color.green($border-color-main)} #{color.blue($border-color-main)} / #{$border-opacity-hover}
-) !default;
+$button-close-background-color: rgba($border-color-main, $border-opacity) !default;
+$button-close-background-color-hover: rgba($border-color-main, $border-opacity-hover) !default;
 $button-close-height: calc($spacer * 1.5) !default;
 $button-close-width: calc($spacer * 1.5) !default;
 $button-close-height-small: calc($spacer * 1) !default;
@@ -701,9 +676,7 @@ $button-close-width-large: calc($spacer * 2) !default;
 // Card
 $card-border-width: $border-width !default;
 $card-border-style: $border-style !default;
-$card-border-color: rgb(
-  #{color.red($border-color-main)} #{color.green($border-color-main)} #{color.blue($border-color-main)} / #{$border-opacity}
-) !default;
+$card-border-color: rgba($border-color-main, $border-opacity) !default;
 $card-border-radius: $border-radius-default !default;
 $card-background-color: $white !default;
 $card-header-footer-padding: calc(($spacer * 0.375) - 1px) $spacer !default;
@@ -711,9 +684,7 @@ $card-body-padding: $spacer !default;
 
 // Tag
 $tag-background: $light !default;
-$tag-border-color: rgb(
-  #{color.red($border-color-main)} #{color.green($border-color-main)} #{color.blue($border-color-main)} / #{$border-opacity}
-) !default;
+$tag-border-color: rgba($border-color-main, $border-opacity) !default;
 $tag-border-radius: $border-radius-default !default;
 $tag-color: $body-color !default;
 $tag-bg-scale: 0% !default;
@@ -723,9 +694,7 @@ $tag-padding-x: calc(($spacer * 0.5) - 1px) !default;
 
 // Pill
 $pill-background: $light !default;
-$pill-border-color: rgb(
-  #{color.red($border-color-main)} #{color.green($border-color-main)} #{color.blue($border-color-main)} / #{$border-opacity}
-) !default;
+$pill-border-color: rgba($border-color-main, $border-opacity) !default;
 $pill-color: $body-color !default;
 $pill-bg-scale: 0% !default;
 $pill-color-scale: 90% !default;
@@ -741,19 +710,13 @@ $nav-title-font-weight: $font-weight-bold !default;
 $nav-item-padding-y: $input-button-padding-y !default;
 $nav-item-padding-x: $input-button-padding-x !default;
 $nav-item-color: $body-color !default;
-$nav-item-color-disabled: rgb(
-  #{color.red($nav-item-color)} #{color.green($nav-item-color)} #{color.blue($nav-item-color)} / 75%
-) !default;
+$nav-item-color-disabled: rgba($nav-item-color, 75%) !default;
 $nav-item-color-hover: color.mix(black, $nav-item-color, $link-shade-percentage) !default;
 $nav-item-color-active: color.mix(black, $nav-item-color, $link-shade-percentage) !default;
 $nav-item-background-color: transparent !default;
 $nav-item-background-color-opacity: 5% !default;
-$nav-item-background-color-hover: rgb(
-  #{color.red($nav-item-color)} #{color.green($nav-item-color)} #{color.blue($nav-item-color)} / #{$nav-item-background-color-opacity}
-) !default;
-$nav-item-background-color-active: rgb(
-  #{color.red($nav-item-color)} #{color.green($nav-item-color)} #{color.blue($nav-item-color)} / #{$nav-item-background-color-opacity}
-) !default;
+$nav-item-background-color-hover: rgba($nav-item-color, $nav-item-background-color-opacity) !default;
+$nav-item-background-color-active: rgba($nav-item-color, $nav-item-background-color-opacity) !default;
 $nav-tab-item-padding: calc(($input-button-padding-y) - 1.5px) $input-button-padding-x !default;
 $nav-tab-card-item-padding: calc(($input-button-padding-y) - 1px) $input-button-padding-x !default;
 

package/{scss → sass}/mixins/_button.scss

@@ -45,12 +45,7 @@
     @include gradient-bg($hover-background);
 
     &:not(.button--unstyled) {
-      box-shadow: 0 0 0 $button-focus-width
-        rgb(
-          #{color.red(color.mix($color, $background, 15%))} #{color.green(color.mix($color, $background, 15%))} #{color.blue(
-              color.mix($color, $background, 15%)
-            )} / 50%
-        );
+      box-shadow: 0 0 0 $button-focus-width rgba(color.mix($color, $background, 15%), 50%);
     }
   }
 
@@ -65,12 +60,7 @@
 
     &:focus {
       // Avoid using mixin so we can pass custom focus shadow properly
-      box-shadow: 0 0 0 $button-focus-width
-        rgb(
-          #{color.red(color.mix($color, $background, 15%))} #{color.green(color.mix($color, $background, 15%))} #{color.blue(
-              color.mix($color, $background, 15%)
-            )} / 50%
-        );
+      box-shadow: 0 0 0 $button-focus-width rgba(color.mix($color, $background, 15%), 50%);
     }
   }
 
@@ -102,7 +92,7 @@
   }
 
   &:focus {
-    box-shadow: 0 0 0 $button-focus-width rgb(#{color.red($color)} #{color.green($color)} #{color.blue($color)} / 50%);
+    box-shadow: 0 0 0 $button-focus-width rgba($color, 50%);
   }
 
   &:active,
@@ -114,7 +104,7 @@
 
     &:focus {
       // Avoid using mixin so we can pass custom focus shadow properly
-      box-shadow: 0 0 0 $button-focus-width rgb(#{color.red($color)} #{color.green($color)} #{color.blue($color)} / 50%);
+      box-shadow: 0 0 0 $button-focus-width rgba($color, 50%);
     }
   }
 
@@ -170,7 +160,7 @@
 
   &:hover {
     color: $color-hover;
-    background-color: rgb(#{color.red($color)} #{color.green($color)} #{color.blue($color)} / 10%);
+    background-color: rgba($color, 10%);
     border-color: transparent;
   }
 
@@ -178,7 +168,7 @@
   &.active,
   &.dropdown-toggle.show {
     color: $active-color;
-    background-color: rgb(#{color.red($color)} #{color.green($color)} #{color.blue($color)} / 10%);
+    background-color: rgba($color, 10%);
     border-color: transparent;
   }
 

package/{scss → sass}/mixins/_gradient.scss

@@ -38,10 +38,7 @@
   background-image: radial-gradient(circle, $inner-color, $outer-color);
 }
 
-@mixin gradient-striped(
-  $color: rgb(#{color.red($white)} #{color.green($white)} #{color.blue($white)} / 15%),
-  $angle: 45deg
-) {
+@mixin gradient-striped($color: rgba($white, 15%), $angle: 45deg) {
   background-image: linear-gradient(
     $angle,
     $color 25%,

package/{scss → sass}/modules/_alert.scss

@@ -5,10 +5,7 @@
 @use "./../mixins/alert" as *;
 
 .alert {
-  border: 1px solid
-    rgb(
-      #{color.red($border-color-main)} #{color.green($border-color-main)} #{color.blue($border-color-main)} / #{$border-opacity}
-    );
+  border: 1px solid rgba($border-color-main, $border-opacity);
   padding: $spacer;
   border-radius: $border-radius-default;
   background-color: color.mix(white, $body-color, 87.5%);

package/{scss → sass}/modules/_button.scss

@@ -96,7 +96,7 @@
 
   &.button--link {
     &:hover {
-      background-color: rgb(#{color.red($body-color)} #{color.green($body-color)} #{color.blue($body-color)} / 10%);
+      background-color: rgba($body-color, 10%);
     }
   }
 }

package/{scss → sass}/modules/_card.scss

@@ -107,7 +107,7 @@ details.card {
     border-bottom-color: transparent;
 
     &:hover {
-      background-color: rgb(#{color.red($black)} #{color.green($black)} #{color.blue($black)} / 5%);
+      background-color: rgba($black, 5%);
     }
   }
 

package/{scss → sass}/modules/_dialog.scss

@@ -15,7 +15,7 @@
   }
 
   &::backdrop {
-    background-color: rgb(#{color.red($black)} #{color.green($black)} #{color.blue($black)} / 65%);
+    background-color: rgba($black, 65%);
     backdrop-filter: blur(4px);
   }
 
@@ -65,7 +65,7 @@
     right: 0;
     bottom: 0;
     position: fixed;
-    background-color: rgb(#{color.red($black)} #{color.green($black)} #{color.blue($black)} / 5%);
+    background-color: rgba($black, 5%);
     backdrop-filter: blur(4px);
   }
 }

package/{scss → sass}/modules/_dropdown.scss

@@ -43,10 +43,7 @@
       left: 0;
       padding: calc($spacer * 0.5) 0;
       background-color: $white;
-      border: 1px solid
-        rgb(
-          #{color.red($border-color-main)} #{color.green($border-color-main)} #{color.blue($border-color-main)} / #{$border-opacity}
-        );
+      border: 1px solid rgba($border-color-main, $border-opacity);
       box-shadow: $box-shadow-small;
       border-radius: $border-radius-default;
       align-items: stretch;

package/{scss → sass}/modules/_form.scss

@@ -90,11 +90,7 @@ progress,
 
       &:focus {
         outline: 0;
-        box-shadow: 0
-          0
-          0
-          calc($spacer * 0.25)
-          rgb(#{color.red($value)} #{color.green($value)} #{color.blue($value)} / #{$border-opacity});
+        box-shadow: 0 0 0 calc($spacer * 0.25) rgba($value, $border-opacity);
       }
     }
   }

package/{scss → sass}/modules/_list.scss

@@ -43,10 +43,7 @@ dl {
   @include make-list-unsyled;
 
   & > li {
-    border: 1px solid
-      rgb(
-        #{color.red($border-color-main)} #{color.green($border-color-main)} #{color.blue($border-color-main)} / #{$border-opacity}
-      );
+    border: 1px solid rgba($border-color-main, $border-opacity);
     border-bottom-color: transparent;
     padding: calc(($spacer * 0.625) - 1px) $spacer;
     position: relative;
@@ -57,10 +54,7 @@ dl {
     }
 
     &:last-child {
-      border-bottom: 1px solid
-        rgb(
-          #{color.red($border-color-main)} #{color.green($border-color-main)} #{color.blue($border-color-main)} / #{$border-opacity}
-        );
+      border-bottom: 1px solid rgba($border-color-main, $border-opacity);
       border-bottom-left-radius: $border-radius-default;
       border-bottom-right-radius: $border-radius-default;
     }
@@ -73,10 +67,7 @@ dl {
   & > li {
     background-color: $white;
     border-radius: $border-radius-default;
-    border: 1px solid
-      rgb(
-        #{color.red($border-color-main)} #{color.green($border-color-main)} #{color.blue($border-color-main)} / #{$border-opacity}
-      );
+    border: 1px solid rgba($border-color-main, $border-opacity);
 
     @if $enable-margins {
       margin-bottom: $spacer;
@@ -100,10 +91,7 @@ dl {
         background-repeat: no-repeat;
         background-position: left calc($spacer * 0.5) top $spacer;
         padding-left: calc($spacer * 1.5);
-        border-top: 1px solid
-          rgb(
-            #{color.red($border-color-main)} #{color.green($border-color-main)} #{color.blue($border-color-main)} / #{$border-opacity}
-          );
+        border-top: 1px solid rgba($border-color-main, $border-opacity);
       }
     }
   }

package/{scss → sass}/modules/_nav.scss

@@ -21,7 +21,7 @@
     padding: 0;
 
     & ul {
-      border-left: 1px solid rgb(#{color.red($black)} #{color.green($black)} #{color.blue($black)} / 5%);
+      border-left: 1px solid rgba($black, 5%);
       margin: calc($spacer * 0.75);
       padding-left: calc($spacer * 0.75);
       list-style: none;

package/{scss → sass}/modules/_tabs.scss

@@ -17,18 +17,12 @@
     flex-wrap: nowrap;
 
     &:not(:empty) {
-      border-bottom: 1px solid
-        rgb(
-          #{color.red($border-color-main)} #{color.green($border-color-main)} #{color.blue($border-color-main)} / #{$border-opacity}
-        );
+      border-bottom: 1px solid rgba($border-color-main, $border-opacity);
     }
 
     & > *,
     & .nav--item {
-      border: 1px solid
-        rgb(
-          #{color.red($border-color-main)} #{color.green($border-color-main)} #{color.blue($border-color-main)} / #{$border-opacity-unfocus}
-        );
+      border: 1px solid rgba($border-color-main, $border-opacity-unfocus);
       border-bottom-color: transparent;
       border-radius: $border-radius-default $border-radius-default 0 0;
       margin-bottom: -1px;
@@ -41,9 +35,7 @@
       &[data-active="true"],
       &.active {
         background-color: $card-background-color;
-        border-color: rgb(
-          #{color.red($border-color-main)} #{color.green($border-color-main)} #{color.blue($border-color-main)} / #{$border-opacity}
-        );
+        border-color: rgba($border-color-main, $border-opacity);
         border-bottom-color: transparent;
       }
     }
@@ -52,13 +44,7 @@
   & .tab--content {
     border-width: 1px;
     border-style: solid;
-    border-color: transparent
-      rgb(
-        #{color.red($border-color-main)} #{color.green($border-color-main)} #{color.blue($border-color-main)} / #{$border-opacity}
-      )
-      rgb(
-        #{color.red($border-color-main)} #{color.green($border-color-main)} #{color.blue($border-color-main)} / #{$border-opacity}
-      );
+    border-color: transparent rgba($border-color-main, $border-opacity) rgba($border-color-main, $border-opacity);
     background-color: $card-background-color;
     border-radius: 0 0 $card-border-radius $card-border-radius;
     display: none;
@@ -115,9 +101,7 @@
 
         &[data-active="true"],
         &.active {
-          border-color: rgb(
-            #{color.red($border-color-main)} #{color.green($border-color-main)} #{color.blue($border-color-main)} / #{$border-opacity}
-          );
+          border-color: rgba($border-color-main, $border-opacity);
 
           &::after {
             display: block;

package/{scss → sass}/modules/_tile.scss

@@ -7,10 +7,7 @@
   background-color: $white;
   display: flex;
   flex-direction: column;
-  border: 1px solid
-    rgb(
-      #{color.red($border-color-main)} #{color.green($border-color-main)} #{color.blue($border-color-main)} / #{$border-opacity}
-    );
+  border: 1px solid rgba($border-color-main, $border-opacity);
   border-left-width: 4px;
   min-width: 0;
   word-wrap: break-word;
@@ -36,19 +33,13 @@
 
   & .tile--header {
     flex: 0 1 auto;
-    border-bottom: 1px solid
-      rgb(
-        #{color.red($border-color-main)} #{color.green($border-color-main)} #{color.blue($border-color-main)} / #{$border-opacity}
-      );
+    border-bottom: 1px solid rgba($border-color-main, $border-opacity);
   }
 
   & .tile--footer {
     margin-top: auto;
     flex: 0 0 auto;
-    border-top: 1px solid
-      rgb(
-        #{color.red($border-color-main)} #{color.green($border-color-main)} #{color.blue($border-color-main)} / #{$border-opacity}
-      );
+    border-top: 1px solid rgba($border-color-main, $border-opacity);
   }
 
   & .tile--body {

package/{scss → sass}/modules/_tooltip.scss

@@ -24,7 +24,7 @@
 
   &::before {
     content: "";
-    border-top: 6px solid rgb(#{color.red($black)} #{color.green($black)} #{color.blue($black)} / 75%);
+    border-top: 6px solid rgba($black, 75%);
     border-right: 6px solid transparent;
     border-bottom: 0 none;
     border-left: 6px solid transparent;
@@ -36,7 +36,7 @@
   }
 
   &::after {
-    background-color: rgb(#{color.red($black)} #{color.green($black)} #{color.blue($black)} / 75%);
+    background-color: rgba($black, 75%);
     content: attr(data-tooltip);
     width: auto;
     min-width: calc($spacer * 6);
@@ -60,7 +60,7 @@
       border-top: 6px solid transparent;
       border-right: 0 none;
       border-bottom: 6px solid transparent;
-      border-left: 6px solid rgb(#{color.red($black)} #{color.green($black)} #{color.blue($black)} / 75%);
+      border-left: 6px solid rgba($black, 75%);
       top: 50%;
       right: auto;
       bottom: auto;
@@ -80,7 +80,7 @@
   &[data-placement="right"] {
     &::before {
       border-top: 6px solid transparent;
-      border-right: 6px solid rgb(#{color.red($black)} #{color.green($black)} #{color.blue($black)} / 75%);
+      border-right: 6px solid rgba($black, 75%);
       border-bottom: 6px solid transparent;
       border-left: 0 none;
       top: 50%;
@@ -103,7 +103,7 @@
     &::before {
       border-top: 0 none;
       border-right: 6px solid transparent;
-      border-bottom: 6px solid rgb(#{color.red($black)} #{color.green($black)} #{color.blue($black)} / 75%);
+      border-bottom: 6px solid rgba($black, 75%);
       border-left: 6px solid transparent;
       top: auto;
       right: auto;

package/{scss → sass}/modules/form/_checkbox.scss

@@ -45,12 +45,8 @@ input[type="checkbox"] {
       &:disabled,
       &.disabled,
       &[aria-disabled="true"] {
-        background-color: rgb(
-          #{color.red($input-detail-color)} #{color.green($input-detail-color)} #{color.blue($input-detail-color)} / 40%
-        );
-        border-color: rgb(
-          #{color.red($input-detail-color)} #{color.green($input-detail-color)} #{color.blue($input-detail-color)} / 80%
-        );
+        background-color: rgba($input-detail-color, 40%);
+        border-color: rgba($input-detail-color, 80%);
       }
     }
 

package/{scss → sass}/modules/form/_file.scss

@@ -131,9 +131,7 @@ input[type="file"] {
     margin-inline-end: $input-padding-x;
     color: $body-color;
     pointer-events: none;
-    border-color: rgb(
-      #{color.red($border-color-main)} #{color.green($border-color-main)} #{color.blue($border-color-main)} / #{$border-opacity}
-    );
+    border-color: rgba($border-color-main, $border-opacity);
     border-style: solid;
     border-width: 0;
     border-inline-end-width: 1px;

package/sass/modules/form/_output.scss

@@ -0,0 +1,8 @@
+@use "sass:color";
+
+@use "./../../variables" as *;
+
+output {
+  background-color: rgba($black, 5%);
+  pointer-events: none;
+}

package/{scss → sass}/modules/form/_progress.scss

@@ -26,7 +26,7 @@ progress {
   }
 
   &::-webkit-progress-bar {
-    background-color: rgb(#{color.red($black)} #{color.green($black)} #{color.blue($black)} / 7%);
+    background-color: rgba($black, 7%);
   }
 
   &::-webkit-progress-value {
@@ -35,7 +35,7 @@ progress {
   }
 
   &::-moz-progress-bar {
-    background-color: rgb(#{color.red($black)} #{color.green($black)} #{color.blue($black)} / 7%);
+    background-color: rgba($black, 7%);
   }
 
   &::-moz-progress-value {
@@ -50,11 +50,11 @@ progress {
       background-color: transparent;
 
       &::-webkit-progress-bar {
-        background-color: rgb(#{color.red($value)} #{color.green($value)} #{color.blue($value)} / 7%);
+        background-color: rgba($value, 7%);
       }
 
       &::-moz-progress-bar {
-        background-color: rgb(#{color.red($value)} #{color.green($value)} #{color.blue($value)} / 7%);
+        background-color: rgba($value, 7%);
       }
 
       &::-webkit-progress-value {

package/{scss → sass}/modules/form/_radio.scss

@@ -45,14 +45,10 @@ input[type="radio"] {
     &.disabled,
     &[aria-disabled="true"] {
       background-color: $white;
-      border-color: rgb(
-        #{color.red($input-detail-color)} #{color.green($input-detail-color)} #{color.blue($input-detail-color)} / 40%
-      );
+      border-color: rgba($input-detail-color, 40%);
 
       &::before {
-        background: rgb(
-          #{color.red($input-detail-color)} #{color.green($input-detail-color)} #{color.blue($input-detail-color)} / 40%
-        );
+        background: rgba($input-detail-color, 40%);
       }
     }
   }
@@ -67,10 +63,10 @@ input[type="radio"] {
         &:disabled,
         &.disabled,
         &[aria-disabled="true"] {
-          border-color: rgb(#{color.red($value)} #{color.green($value)} #{color.blue($value)} / 40%);
+          border-color: rgba($value, 40%);
 
           &::before {
-            background: rgb(#{color.red($value)} #{color.green($value)} #{color.blue($value)} / 40%);
+            background: rgba($value, 40%);
           }
         }
       }

package/{scss → sass}/modules/form/_range.scss

@@ -2,7 +2,7 @@
 
 @use "./../../variables" as *;
 
-@mixin make-track($color: rgb(#{color.red($black)} #{color.green($black)} #{color.blue($black)} / 7%)) {
+@mixin make-track($color: rgba($black, 7%)) {
   background: $color;
   border-radius: $border-radius-round;
   width: 100%;
@@ -15,18 +15,14 @@
   width: $spacer;
   height: $spacer;
   background: $color;
-  border: 1px solid
-    rgb(
-      #{color.red($border-color-main)} #{color.green($border-color-main)} #{color.blue($border-color-main)} / #{$border-opacity}
-    );
+  border: 1px solid rgba($border-color-main, $border-opacity);
   border-radius: $border-radius-round;
   cursor: pointer;
   box-shadow: $box-shadow-medium;
   appearance: none;
 
   @if $focus == true {
-    box-shadow: 0 0 0 1px $white,
-      0 0 0 calc($spacer * 0.25) rgb(#{color.red($color)} #{color.green($color)} #{color.blue($color)} / 25%);
+    box-shadow: 0 0 0 1px $white, 0 0 0 calc($spacer * 0.25) rgba($color, 25%);
   }
 
   @if $disabled == true {

package/{scss → sass}/modules/form/_text.scss

@@ -17,7 +17,7 @@
 
   @each $key, $value in $theme-colors {
     &.input--#{$key} {
-      border-color: rgb(#{color.red($value)} #{color.green($value)} #{color.blue($value)} / 50%);
+      border-color: rgba($value, 50%);
       box-shadow: none;
 
       &:hover {

package/{scss → sass}/modules/form/_toggle.scss

@@ -59,14 +59,10 @@ input[type="checkbox"] {
       &.disabled,
       &[aria-disabled="true"] {
         background-color: $light;
-        border-color: rgb(
-          #{color.red($input-detail-color)} #{color.green($input-detail-color)} #{color.blue($input-detail-color)} / 40%
-        );
+        border-color: rgba($input-detail-color, 40%);
 
         &::before {
-          background: rgb(
-            #{color.red($input-detail-color)} #{color.green($input-detail-color)} #{color.blue($input-detail-color)} / 40%
-          );
+          background: rgba($input-detail-color, 40%);
           border-color: $light;
         }
       }
@@ -84,10 +80,10 @@ input[type="checkbox"] {
           &:disabled,
           &.disabled,
           &[aria-disabled="true"] {
-            border-color: rgb(#{color.red($value)} #{color.green($value)} #{color.blue($value)} / 40%);
+            border-color: rgba($value, 40%);
 
             &::before {
-              background: rgb(#{color.red($value)} #{color.green($value)} #{color.blue($value)} / 40%);
+              background: rgba($value, 40%);
             }
           }
         }

package/sass/utilities/_border.scss

@@ -0,0 +1,57 @@
+@use "sass:color";
+
+@use "./../variables" as *;
+
+.border {
+  border: 1px solid rgba($border-color-main, $border-opacity) !important;
+}
+
+.border--top {
+  border-top: 1px solid rgba($border-color-main, $border-opacity) !important;
+}
+
+.border--right {
+  border-right: 1px solid rgba($border-color-main, $border-opacity) !important;
+}
+
+.border--bottom {
+  border-bottom: 1px solid rgba($border-color-main, $border-opacity) !important;
+}
+
+.border--left {
+  border-left: 1px solid rgba($border-color-main, $border-opacity) !important;
+}
+
+.border--none {
+  border: 0 !important;
+}
+
+.border--top-none {
+  border-top: 0 !important;
+}
+
+.border--right-none {
+  border-right: 0 !important;
+}
+
+.border--bottom-none {
+  border-bottom: 0 !important;
+}
+
+.border--left-none {
+  border-left: 0 !important;
+}
+
+$border-radii: (
+  "none": 0,
+  "small": calc($spacer * 0.15),
+  "medium": calc($spacer * 0.275),
+  "large": calc($spacer * 0.65),
+  "round": calc($spacer * 99),
+) !default;
+
+@each $key, $value in $border-radii {
+  .border-radius--#{$key} {
+    border-radius: #{$value} !important;
+  }
+}

package/scss/modules/form/_output.scss

@@ -1,8 +0,0 @@
-@use "sass:color";
-
-@use "./../../variables" as *;
-
-output {
-  background-color: rgb(#{color.red($black)} #{color.green($black)} #{color.blue($black)} / 5%);
-  pointer-events: none;
-}

package/scss/utilities/_border.scss

@@ -1,72 +0,0 @@
-@use "sass:color";
-
-@use "./../variables" as *;
-
-.border {
-  border: 1px solid
-    rgb(
-      #{color.red($border-color-main)} #{color.green($border-color-main)} #{color.blue($border-color-main)} / #{$border-opacity}
-    ) !important;
-}
-
-.border--top {
-  border-top: 1px solid
-    rgb(
-      #{color.red($border-color-main)} #{color.green($border-color-main)} #{color.blue($border-color-main)} / #{$border-opacity}
-    ) !important;
-}
-
-.border--right {
-  border-right: 1px solid
-    rgb(
-      #{color.red($border-color-main)} #{color.green($border-color-main)} #{color.blue($border-color-main)} / #{$border-opacity}
-    ) !important;
-}
-
-.border--bottom {
-  border-bottom: 1px solid
-    rgb(
-      #{color.red($border-color-main)} #{color.green($border-color-main)} #{color.blue($border-color-main)} / #{$border-opacity}
-    ) !important;
-}
-
-.border--left {
-  border-left: 1px solid
-    rgb(
-      #{color.red($border-color-main)} #{color.green($border-color-main)} #{color.blue($border-color-main)} / #{$border-opacity}
-    ) !important;
-}
-
-.border--none {
-  border: 0 !important;
-}
-
-.border--top-none {
-  border-top: 0 !important;
-}
-
-.border--right-none {
-  border-right: 0 !important;
-}
-
-.border--bottom-none {
-  border-bottom: 0 !important;
-}
-
-.border--left-none {
-  border-left: 0 !important;
-}
-
-$border-radii: (
-  "none": 0,
-  "small": calc($spacer * 0.15),
-  "medium": calc($spacer * 0.275),
-  "large": calc($spacer * 0.65),
-  "round": calc($spacer * 99),
-) !default;
-
-@each $key, $value in $border-radii {
-  .border-radius--#{$key} {
-    border-radius: #{$value} !important;
-  }
-}