Update scss color variants

Author: ahmadfajar

scss/base/colors.scss

@@ -1,5 +1,5 @@
 @use "sass:map";
-@use "../mixins/css3/text";
+@use "../mixins/css3/decorators";
 @use "../color_vars" as colors;
 @use "../variables" as vars;
 
@@ -16,15 +16,15 @@ $compact-colors: map.remove(colors.$context-colors,
 );
 
 @each $name, $color in $compact-colors {
-    @include text.decorate-color($color, $name);
+    @include decorators.decorate-color($color, $name);
 }
 
 // Manually adds duplicate colors
 //--------------------------------
-@include text.decorate-color(colors.$elegant-color-dark, "dark", "elegant-color-dark");
+@include decorators.decorate-color(colors.$elegant-color-dark, "dark", "elegant-color-dark");
 
 // Create grey colors for background, borders and text
 //-------------------------------------------------------
 @each $name, $color in colors.$grays {
-    @include text.decorate-color($color, "grey-#{$name}");
+    @include decorators.decorate-color($color, "grey-#{$name}");
 }

scss/custom/_colors.scss

@@ -1,6 +1,6 @@
 @use "sass:color";
 @use "sass:map";
-@use "../mixins/css3/text";
+@use "../mixins/css3/decorators";
 @use "../utils/color_helper" as helper;
 @use "../color_vars" as colors;
 @use "../variables" as vars;
@@ -17,12 +17,12 @@ $final-colors: map.remove(colors.$merge-theme-colors,
 );
 
 @each $name, $color in $final-colors {
-    @include text.decorate-color($color, $name);
+    @include decorators.decorate-color($color, $name);
 }
 
 // Manually adds duplicate custom colors
 //---------------------------------------
-@include text.decorate-color(colors.$primary-color-dark, "dark-blue", "primary-color-dark");
+@include decorators.decorate-color(colors.$primary-color-dark, "dark-blue", "primary-color-dark");
 
 // Create full color palette for background
 //-------------------------------------------
@@ -51,7 +51,7 @@ $final-colors: map.remove(colors.$merge-theme-colors,
             }
         } @else {
             @if colors.$enable_full_palette {
-                @include text.decorate-color($color_value, "#{$name}.#{$sub_name}", false, true, false, false, false);
+                @include decorators.decorate-color($color_value, "#{$name}.#{$sub_name}", false, true, false, false, false);
             }
         }
     }

scss/mixins/css3/_text.scss renamed to scss/mixins/css3/_decorators.scss

@@ -2,7 +2,7 @@
 @use "../../utils/color_helper" as helper;
 @use "../../variables" as vars;
 
-@mixin ellipsis($no-wrap: true) {
+@mixin text-ellipsis($no-wrap: true) {
     @if $no-wrap {
         white-space: nowrap;
     }

src/components/Appbar/appbar.scss

@@ -1,4 +1,4 @@
-@use "../../../scss/mixins/css3/text";
+@use "../../../scss/mixins/css3/decorators";
 @use "../../../scss/color_vars" as colors;
 @use "../../../scss/variables" as vars;
 
@@ -22,7 +22,7 @@
         padding: var(--#{vars.$prefix}appbar-margin);
 
         > .#{vars.$prefix}appbar-title {
-            @include text.ellipsis();
+            @include decorators.text-ellipsis();
             font-size: var(--#{vars.$prefix}appbar-title-font-size);
             font-weight: var(--#{vars.$prefix}appbar-title-font-weight);
             line-height: normal;

src/components/Field/field.scss

@@ -1,7 +1,7 @@
 @use "sass:math";
 @use "../../../scss/mixins/css3/borders";
 @use "../../../scss/mixins/css3/placeholder";
-@use "../../../scss/mixins/css3/text";
+@use "../../../scss/mixins/css3/decorators";
 @use "../../../scss/mixins/transitions";
 @use "../../../scss/color_vars" as colors;
 @use "../../../scss/variables" as vars;
@@ -282,7 +282,7 @@
         --#{vars.$prefix}field-floating-label-transform: translateY(-8px) scale(.85);
 
         .#{vars.$prefix}field-label {
-            @include text.ellipsis();
+            @include decorators.text-ellipsis();
             opacity: var(--#{vars.$prefix}field-floating-label-opacity);
             color: var(--#{vars.$prefix}field-floating-label-color);
             transition: .25s vars.$transition-stand-animation;

src/components/ListView/listTile.scss

@@ -1,6 +1,6 @@
 @use "sass:map";
 @use "../../../scss/mixins/css3/borders";
-@use "../../../scss/mixins/css3/text";
+@use "../../../scss/mixins/css3/decorators";
 @use "../../../scss/mixins/listview";
 @use "../../../scss/color_vars" as colors;
 @use "../../../scss/variables" as vars;
@@ -36,7 +36,7 @@
 
     .#{vars.$prefix}list-tile-title,
     .#{vars.$prefix}list-tile-subtitle {
-        @include text.ellipsis();
+        @include decorators.text-ellipsis();
         transition: .3s vars.$transition-stand-animation;
         width: 100%;
     }