diff --git a/app/styles/areas/_details.scss b/app/styles/areas/_details.scss
index 63367ba1..7a874e45 100644
--- a/app/styles/areas/_details.scss
+++ b/app/styles/areas/_details.scss
@@ -181,7 +181,7 @@
     }
 
     &__field {
-        $details-field-line-height: 18px;
+        $details-field-line-height: 20px;
 
         display: flex;
         align-items: stretch;
@@ -374,7 +374,7 @@
                 }
                 &-btn-cancel {
                     &:before {
-                        content: $fa-var-times;
+                        content: $fa-var-x;
                     }
                     left: 0;
                 }
diff --git a/app/styles/areas/_generator.scss b/app/styles/areas/_generator.scss
index 535a4045..fe83b643 100644
--- a/app/styles/areas/_generator.scss
+++ b/app/styles/areas/_generator.scss
@@ -2,7 +2,7 @@
     position: absolute;
     @include common-dropdown;
     padding: $base-spacing;
-    width: 11em;
+    width: 17em;
     &__length-range {
     }
     &__top-btn {
@@ -34,14 +34,19 @@
         font-family: $monospace-font-family;
         margin-top: 6px;
         margin-bottom: 3px;
-        height: 50px;
+        min-height: 20px;
         text-align: center;
         white-space: pre-wrap;
         word-break: break-all;
-        overflow: hidden;
-        &--long-pass {
-            font-size: 0.75em;
-        }
+        overflow-y: auto;
+        width: -webkit-calc(100% - 20px);
+        width:    -moz-calc(100% - 20px);
+        width:         calc(100% - 20px);
+        padding: 10px;
+        font-size: 1.1rem;
+        background-color: #131212;
+        border: 1px solid rgba(255, 255, 255, 0.4);
+        resize: vertical;
     }
     &__check-hide {
         &-label {
@@ -64,12 +69,22 @@
     }
     &__btn-wrap {
         text-align: center;
+        padding-top: 15px;
     }
 }
 
 @-moz-document url-prefix() {
-    .gen__result {
-        white-space: pre-wrap;
-        word-break: break-all;
+    .gen__result_textbox {
+        padding-top: 10px;
+        padding-bottom: 10px;
     }
 }
+
+.__wrap {
+    white-space: pre-wrap;
+    word-break: break-all;
+}
+.__nowrap {
+    white-space: wrap;
+    word-break: normal;
+}
diff --git a/app/styles/areas/_menu.scss b/app/styles/areas/_menu.scss
index efe55c6a..8a77ba6f 100644
--- a/app/styles/areas/_menu.scss
+++ b/app/styles/areas/_menu.scss
@@ -1,3 +1,6 @@
+// built in modules
+@use 'sass:math';
+
 .menu {
     width: 100%;
     display: flex;
@@ -178,7 +181,7 @@
         }
 
         .fa {
-            margin-right: $base-padding-h / 2;
+            margin-right: math.div($base-padding-h, 2);
         }
 
         &-drag-top {
diff --git a/app/styles/base/_forms.scss b/app/styles/base/_forms.scss
index e3d88349..350b9f2e 100644
--- a/app/styles/base/_forms.scss
+++ b/app/styles/base/_forms.scss
@@ -1,3 +1,6 @@
+// built in modules
+@use 'sass:math';
+
 :focus {
     outline: none;
 }
@@ -27,7 +30,7 @@ label {
     font-family: $base-font-family;
     font-size: 1rem;
     font-weight: 600;
-    margin-bottom: $small-spacing / 2;
+    margin-bottom: math.div($small-spacing, 2);
 
     &.required::after {
         content: '*';
@@ -46,7 +49,7 @@ input:not([type]) {
     font-family: $base-font-family;
     font-size: 1rem;
     margin-bottom: $small-spacing;
-    padding: $base-spacing / 3;
+    padding: math.div($base-spacing, 3);
     transition: border-color $base-duration $base-timing;
 
     &::-ms-clear {
@@ -118,10 +121,11 @@ input[type='search'] {
 input[type='checkbox'],
 input[type='radio'] {
     display: inline;
-    margin-right: $small-spacing / 2;
+    margin-right: math.div($small-spacing, 2);
 
     + label {
         display: inline-block;
+        cursor: pointer;
     }
 }
 
@@ -138,7 +142,7 @@ select {
     appearance: none;
     transition: border-color $base-duration $base-timing;
     border-radius: var(--input-border-radius);
-    padding-left: $base-spacing / 3;
+    padding-left: math.div($base-spacing, 3);
 
     background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiDQogICAgd2lkdGg9IjMwNnB4IiBoZWlnaHQ9IjMwNnB4IiB2aWV3Qm94PSIwIDAgMzA2IDMwNiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQogICAgPHBvbHlnb24gcG9pbnRzPSIyNzAuMyw1OC42NSAxNTMsMTc1Ljk1IDM1LjcsNTguNjUgMCw5NC4zNSAxNTMsMjQ3LjM1IDMwNiw5NC4zNSIgZmlsbD0iIzk5ODQ4MyIvPg0KPC9zdmc+DQo=);
     background-position: calc(100% - 5px) center;
@@ -177,22 +181,26 @@ option {
 input[type='checkbox'] {
     display: none;
 
+    &:disabled + label {
+        opacity: 0.4;
+    }
+
     &:not([disabled]) + label:hover:before {
         color: var(--action-color);
     }
     & + label:before {
         @include fa-icon;
-        content: $fa-var-square-o;
+        content: $fa-var-square-check;
         display: inline-block;
         width: 1.3em;
         color: var(--text-color);
         font-size: 1.2em;
         vertical-align: bottom;
         position: relative;
-        top: 0.08em;
+        top: 0.14em;
     }
     &:checked + label:before {
-        content: $fa-var-check-square-o;
+        content: $fa-var-square-check;
     }
 }
 
@@ -200,6 +208,7 @@ $thumb-size: 14px;
 
 input[type='range'] {
     -webkit-appearance: none;
+    appearance: none;
     width: 100%;
     margin: 12px 0;
     padding: 0;
diff --git a/app/styles/base/_icon-font.scss b/app/styles/base/_icon-font.scss
index 2beaa553..0cdf2e5a 100644
--- a/app/styles/base/_icon-font.scss
+++ b/app/styles/base/_icon-font.scss
@@ -1,12 +1,17 @@
+// built in modules
+@use 'sass:math';
+@use "sass:meta";
+@use 'sass:color';
+
 @font-face {
-    font-family: 'Font Awesome 5 Free';
+    font-family: 'Font Awesome 6 Free';
     font-style: normal;
     font-weight: 400;
     src: url('fontawesome.woff2') format('woff2');
 }
 
 @mixin fa-icon {
-    font-family: 'Font Awesome 5 Free';
+    font-family: 'Font Awesome 6 Free';
     font-weight: 400;
     font-style: normal;
     text-rendering: auto;
@@ -24,14 +29,21 @@
 
 $fa-glyph-counter: 61440; // 0xf000
 
+/*
+    sass 1.49.10
+
+    package modified library to return 'rgb/a' with every color.
+*/
+
 @function next-fa-glyph() {
     $fa-glyph-counter: $fa-glyph-counter + 1 !global;
 
-    $lo-part: $fa-glyph-counter % 256;
-    $hi-part: ($fa-glyph-counter - $lo-part) / 256;
-    $hex-num-str: str-slice(#{rgb($hi-part, $lo-part, 1)}, 2, 5);
+    $lo-part: $fa-glyph-counter % 256; // increment up from 1
+    $hi-part: math.div($fa-glyph-counter - $lo-part, 256);
+    $step-1: color.ie-hex-str(rgba($hi-part, $lo-part, 1));
+    $step-2: str-slice($step-1, 4, 7);
 
-    $glyph: unquote('"\\#{$hex-num-str}"');
+    $glyph: unquote('"\\#{$step-2}"');
 
     @return $glyph;
 }
@@ -48,7 +60,7 @@ $fa-glyph-counter: 61440; // 0xf000
 
 $fa-var-square: next-fa-glyph();
 $fa-var-square-o: next-fa-glyph();
-$fa-var-check-square-o: next-fa-glyph();
+$fa-var-square-check: next-fa-glyph();
 $fa-var-bookmark: next-fa-glyph();
 $fa-var-bookmark-o: next-fa-glyph();
 $fa-var-eye: next-fa-glyph();
@@ -57,24 +69,24 @@ $fa-var-bolt: next-fa-glyph();
 $fa-var-unlock: next-fa-glyph();
 $fa-var-lock: next-fa-glyph();
 $fa-var-check: next-fa-glyph();
-$fa-var-times: next-fa-glyph();
-$fa-var-times-circle: next-fa-glyph();
+$fa-var-x: next-fa-glyph();
+$fa-var-circle-xmark: next-fa-glyph();
 $fa-var-folder: next-fa-glyph();
 $fa-var-folder-open: next-fa-glyph();
 $fa-var-ban: next-fa-glyph();
 $fa-var-dropbox: next-fa-glyph();
 $fa-var-google-drive: next-fa-glyph();
 $fa-var-plus: next-fa-glyph();
-$fa-var-ellipsis-h: next-fa-glyph();
-$fa-var-ellipsis-v: next-fa-glyph();
-$fa-var-magic: next-fa-glyph();
-$fa-var-cog: next-fa-glyph();
+$fa-var-ellipsis: next-fa-glyph();
+$fa-var-ellipsis-vertical: next-fa-glyph();
+$fa-var-wand-magic-sparkles: next-fa-glyph();
+$fa-var-gear: next-fa-glyph();
 $fa-var-server: next-fa-glyph();
-$fa-var-file-alt: next-fa-glyph();
-$fa-var-file-alt-o: next-fa-glyph();
+$fa-var-file-lines: next-fa-glyph();
+$fa-var-file-lines-o: next-fa-glyph();
 $fa-var-file-code: next-fa-glyph();
 $fa-var-file-pdf: next-fa-glyph();
-$fa-var-file-archive: next-fa-glyph();
+$fa-var-file-zipper: next-fa-glyph();
 $fa-var-file-word: next-fa-glyph();
 $fa-var-file-excel: next-fa-glyph();
 $fa-var-file-powerpoint: next-fa-glyph();
@@ -82,28 +94,28 @@ $fa-var-file-image: next-fa-glyph();
 $fa-var-file-video: next-fa-glyph();
 $fa-var-file-audio: next-fa-glyph();
 $fa-var-onedrive: next-fa-glyph();
-$fa-var-user-friends: next-fa-glyph();
+$fa-var-user-group: next-fa-glyph();
 $fa-var-question: next-fa-glyph();
-$fa-var-sign-out-alt: next-fa-glyph();
-$fa-var-sync-alt: next-fa-glyph();
-$fa-var-level-down-alt: next-fa-glyph();
+$fa-var-right-from-bracket: next-fa-glyph();
+$fa-var-rotate: next-fa-glyph();
+$fa-var-turn-down: next-fa-glyph();
 $fa-var-tag: next-fa-glyph();
 $fa-var-tags: next-fa-glyph();
-$fa-var-th-large: next-fa-glyph();
+$fa-var-table-cells-large: next-fa-glyph();
 $fa-var-trash: next-fa-glyph();
-$fa-var-trash-alt: next-fa-glyph();
+$fa-var-trash-can: next-fa-glyph();
 $fa-var-keyboard: next-fa-glyph();
 $fa-var-puzzle-piece: next-fa-glyph();
 $fa-var-usb: next-fa-glyph();
 $fa-var-info: next-fa-glyph();
-$fa-var-info-circle: next-fa-glyph();
+$fa-var-circle-info: next-fa-glyph();
 $fa-var-key: next-fa-glyph();
 $fa-var-globe: next-fa-glyph();
-$fa-var-exclamation-triangle: next-fa-glyph();
-$fa-var-exclamation-circle: next-fa-glyph();
+$fa-var-triangle-exclamation: next-fa-glyph();
+$fa-var-circle-exclamation: next-fa-glyph();
 $fa-var-thumbtack: next-fa-glyph();
 $fa-var-comments: next-fa-glyph();
-$fa-var-edit: next-fa-glyph();
+$fa-var-pen-to-square: next-fa-glyph();
 $fa-var-plug: next-fa-glyph();
 $fa-var-newspaper: next-fa-glyph();
 $fa-var-paperclip: next-fa-glyph();
@@ -122,39 +134,39 @@ $fa-var-clipboard: next-fa-glyph();
 $fa-var-paper-plane: next-fa-glyph();
 $fa-var-address-card: next-fa-glyph();
 $fa-var-inbox: next-fa-glyph();
-$fa-var-save: next-fa-glyph();
-$fa-var-hdd: next-fa-glyph();
-$fa-var-dot-circle: next-fa-glyph();
+$fa-var-floppy-disk: next-fa-glyph();
+$fa-var-hard-drive: next-fa-glyph();
+$fa-var-circle-dot: next-fa-glyph();
 $fa-var-user: next-fa-glyph();
 $fa-var-user-lock: next-fa-glyph();
 $fa-var-terminal: next-fa-glyph();
 $fa-var-print: next-fa-glyph();
-$fa-var-project-diagram: next-fa-glyph();
+$fa-var-diagram-project: next-fa-glyph();
 $fa-var-flag-checkered: next-fa-glyph();
 $fa-var-wrench: next-fa-glyph();
 $fa-var-laptop: next-fa-glyph();
-$fa-var-archive: next-fa-glyph();
+$fa-var-box-archive: next-fa-glyph();
 $fa-var-credit-card: next-fa-glyph();
 $fa-var-windows: next-fa-glyph();
 $fa-var-clock: next-fa-glyph();
-$fa-var-search: next-fa-glyph();
+$fa-var-magnifying-glass: next-fa-glyph();
 $fa-var-flask: next-fa-glyph();
 $fa-var-gamepad: next-fa-glyph();
-$fa-var-sticky-note: next-fa-glyph();
-$fa-var-sticky-note-o: next-fa-glyph();
-$fa-var-question-circle: next-fa-glyph();
+$fa-var-note-sticky: next-fa-glyph();
+$fa-var-note-sticky-o: next-fa-glyph();
+$fa-var-circle-question: next-fa-glyph();
 $fa-var-cube: next-fa-glyph();
 $fa-var-folder-o: next-fa-glyph();
 $fa-var-folder-open-o: next-fa-glyph();
 $fa-var-database: next-fa-glyph();
-$fa-var-unlock-alt: next-fa-glyph();
-$fa-var-pencil-alt: next-fa-glyph();
+$fa-var-unlock-keyhole: next-fa-glyph();
+$fa-var-pencil: next-fa-glyph();
 $fa-var-image: next-fa-glyph();
 $fa-var-book: next-fa-glyph();
-$fa-var-list-alt: next-fa-glyph();
+$fa-var-rectangle-list: next-fa-glyph();
 $fa-var-user-secret: next-fa-glyph();
 $fa-var-utensils: next-fa-glyph();
-$fa-var-home: next-fa-glyph();
+$fa-var-house: next-fa-glyph();
 $fa-var-star: next-fa-glyph();
 $fa-var-linux: next-fa-glyph();
 $fa-var-map-pin: next-fa-glyph();
@@ -163,26 +175,26 @@ $fa-var-wikipedia-w: next-fa-glyph();
 $fa-var-dollar-sign: next-fa-glyph();
 $fa-var-mobile: next-fa-glyph();
 $fa-var-spinner: next-fa-glyph();
-$fa-var-minus-circle: next-fa-glyph();
+$fa-var-circle-minus: next-fa-glyph();
 $fa-var-keeweb: next-fa-glyph();
 $fa-var-copy: next-fa-glyph();
 $fa-var-clone: next-fa-glyph();
 $fa-var-chevron-down: next-fa-glyph();
 $fa-var-chevron-left: next-fa-glyph();
 $fa-var-qrcode: next-fa-glyph();
-$fa-var-sort-alpha-down: next-fa-glyph();
-$fa-var-sort-alpha-down-alt: next-fa-glyph();
-$fa-var-sort-numeric-down: next-fa-glyph();
-$fa-var-sort-numeric-down-alt: next-fa-glyph();
-$fa-var-sort-amount-down: next-fa-glyph();
+$fa-var-arrow-down-a-z: next-fa-glyph();
+$fa-var-arrow-down-z-a: next-fa-glyph();
+$fa-var-arrow-down-1-9: next-fa-glyph();
+$fa-var-arrow-down-9-1: next-fa-glyph();
+$fa-var-arrow-down-wide-short: next-fa-glyph();
 $fa-var-language: next-fa-glyph();
 $fa-var-circle: next-fa-glyph();
 $fa-var-circle-o: next-fa-glyph();
-$fa-var-arrow-circle-left: next-fa-glyph();
-$fa-var-cloud-download-alt: next-fa-glyph();
+$fa-var-circle-arrow-left: next-fa-glyph();
+$fa-var-cloud-arrow-down: next-fa-glyph();
 $fa-var-caret-down: next-fa-glyph();
-$fa-var-long-arrow-alt-left: next-fa-glyph();
-$fa-var-long-arrow-alt-right: next-fa-glyph();
+$fa-var-left-long: next-fa-glyph();
+$fa-var-right-long: next-fa-glyph();
 $fa-var-github-alt: next-fa-glyph();
 $fa-var-code: next-fa-glyph();
 $fa-var-html5: next-fa-glyph();
@@ -192,7 +204,7 @@ $fa-var-safari: next-fa-glyph();
 $fa-var-opera: next-fa-glyph();
 $fa-var-edge: next-fa-glyph();
 $fa-var-twitter: next-fa-glyph();
-$fa-var-paint-brush: next-fa-glyph();
+$fa-var-paintbrush: next-fa-glyph();
 $fa-var-at: next-fa-glyph();
 $fa-var-usb-token: next-fa-glyph();
 $fa-var-bell: next-fa-glyph();
@@ -203,6 +215,6 @@ $fa-var-titlebar-minimize: next-fa-glyph();
 $fa-var-titlebar-restore: next-fa-glyph();
 $fa-var-window-maximize: next-fa-glyph();
 $fa-var-download: next-fa-glyph();
-$fa-var-exchange-alt: next-fa-glyph();
+$fa-var-right-left: next-fa-glyph();
 $fa-var-folder-plus: next-fa-glyph();
 $fa-var-filter: next-fa-glyph();
diff --git a/app/styles/base/_override-mixins.scss b/app/styles/base/_override-mixins.scss
index fce7f100..62fd5a94 100644
--- a/app/styles/base/_override-mixins.scss
+++ b/app/styles/base/_override-mixins.scss
@@ -1,5 +1,8 @@
 @charset "UTF-8";
 
+// built in modules
+@use 'sass:math';
+
 // Copied from bourbon/core/bourbon/library/_triangle.scss
 // Disabled is-color because it doesn't work with CSS variables
 
@@ -49,25 +52,25 @@
 
         @if $direction == 'up' {
             border-color: transparent transparent $color;
-            border-width: 0 ($width / 2) $height;
+            border-width: 0 math.div($width, 2) $height;
         } @else if $direction == 'up-right' {
             border-color: transparent $color transparent transparent;
             border-width: 0 $width $width 0;
         } @else if $direction == 'right' {
             border-color: transparent transparent transparent $color;
-            border-width: ($height / 2) 0 ($height / 2) $width;
+            border-width: math.div($height, 2) 0 math.div($height, 2) $width;
         } @else if $direction == 'down-right' {
             border-color: transparent transparent $color;
             border-width: 0 0 $width $width;
         } @else if $direction == 'down' {
             border-color: $color transparent transparent;
-            border-width: $height ($width / 2) 0;
+            border-width: $height math.div($width, 2) 0;
         } @else if $direction == 'down-left' {
             border-color: transparent transparent transparent $color;
             border-width: $width 0 0 $width;
         } @else if $direction == 'left' {
             border-color: transparent $color transparent transparent;
-            border-width: ($height / 2) $width ($height / 2) 0;
+            border-width: math.div($height, 2) $width math.div($height, 2) 0;
         } @else if $direction == 'up-left' {
             border-color: $color transparent transparent;
             border-width: $width $width 0 0;
diff --git a/app/styles/base/_theme-vars-support.scss b/app/styles/base/_theme-vars-support.scss
index 5168332c..90696776 100644
--- a/app/styles/base/_theme-vars-support.scss
+++ b/app/styles/base/_theme-vars-support.scss
@@ -1,3 +1,6 @@
+// built in modules
+@use 'sass:math';
+
 @function text-contrast-color($bg, $lshift, $th-bg, $th-text) {
     @if (lightness($bg) - $lshift >= lightness($th-bg)) {
         @return $th-text;
@@ -10,5 +13,5 @@
 }
 
 @function semi-mute-percent($percent) {
-    @return $percent / 2;
+    @return math.div($percent, 2);
 }
diff --git a/app/styles/base/_theme-vars.scss b/app/styles/base/_theme-vars.scss
index c6d6c325..77185c0f 100644
--- a/app/styles/base/_theme-vars.scss
+++ b/app/styles/base/_theme-vars.scss
@@ -16,7 +16,7 @@
                 ),
             text-selection-bg-color: rgba(map-get($t, action-color), 0.3),
             text-selection-bg-color-error: rgba(map-get($t, error-color), 0.8),
-            text-semi-muted-color: mix(map-get($t, action-color), map-get($t, text-color), 0.5),
+            text-semi-muted-color: mix(map-get($t, action-color), map-get($t, text-color), 50%),
             text-contrast-action-color:
                 text-contrast-color(
                     map-get($t, action-color),
diff --git a/app/styles/base/_variables.scss b/app/styles/base/_variables.scss
index 6805f698..61c9cf2e 100644
--- a/app/styles/base/_variables.scss
+++ b/app/styles/base/_variables.scss
@@ -1,3 +1,6 @@
+// built in modules
+@use 'sass:math';
+
 // Typography
 $base-font-family: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Helvetica Neue', 'Helvetica',
     'Roboto', 'Arial', 'Microsoft YaHei', '微软雅黑', 'PingFang SC', 'Hiragino Sans GB', 'STXihei',
@@ -16,8 +19,8 @@ $heading-line-height: 1.2;
 // Other Sizes
 $base-border-radius: 2px;
 $base-spacing: $base-line-height * 1em;
-$small-spacing: $base-spacing / 2;
-$tiny-spacing: $small-spacing / 2;
+$small-spacing: math.div($base-spacing, 2);
+$tiny-spacing: math.div($small-spacing, 2);
 $base-z-index: 0;
 $base-padding-v: 0.5em;
 $base-padding-h: 1em;
diff --git a/plugins/examples/rainbow-theme/plugin.css b/plugins/examples/rainbow-theme/plugin.css
index b30098be..0933ef33 100644
--- a/plugins/examples/rainbow-theme/plugin.css
+++ b/plugins/examples/rainbow-theme/plugin.css
@@ -1,7 +1,7 @@
 .th-rainbow {
   /* theme style variables */
   --background-color: #FAFAFA;
-  --medium-color: #050505;
+  --medium-color: #303030;
   --text-color: #424243;
   --action-color: #475FD7;
   --error-color: #E75675;