feat(colors): add text color variants in a class names .text-body-font, .text-gray-dark, .text-gray-light, .text-link, .text-link-dark, .text-link-light, .text-primary-dark, .text-primary-light, .text-secondary-dark, .text-secondary-light, .text-disabled, .text-code, .text-highlight.

Add background colors `.bg-body`, `bg-color` the same as `.bg`, `.bg-primary-dark`, `.bg-primary-light`, `.bg-disabled`, `.bg-link`, `.bg-link-dark`, `.bg-link-light`, `.bg-code`, `.bg-highlight`.

Author: sciborrudnicki

src/utilities/_colors.scss

@@ -4,42 +4,84 @@
 /*
   Text colors
 */
+@include text-color-variant('.text-body-font', 'body-font-color'); // ! New class. old text-dark
+
+// Shades.
+// @include text-color-variant('.text-dark', $body-font-color); // old spectre.css
+// @include text-color-variant('.text-dark', 'body-font-color'); // old @angular-package/spectre.css
+@include text-color-variant('.text-dark', 'dark-color');
+// @include text-color-variant('.text-light', $light-color); // old spectre.css
+@include text-color-variant('.text-light', 'light-color');
+
+// Gray colors.
+// @include text-color-variant('.text-gray', $gray-color); // old spectre.css
+@include text-color-variant('.text-gray', 'gray-color');
+@include text-color-variant('.text-gray-dark', 'gray-color-dark'); // ! New class.
+@include text-color-variant('.text-gray-light', 'gray-color-light'); // ! New class.
+
+// Link colors.
+@include text-color-variant('.text-link', 'link-color'); // ! New class.
+@include text-color-variant('.text-link-dark', 'link-color-dark'); // ! New class.
+@include text-color-variant('.text-link-light', 'link-color-light'); // ! New class.
+
 // @include text-color-variant('.text-primary', $primary-color); // old spectre.css
 @include text-color-variant('.text-primary', 'primary-color');
+@include text-color-variant('.text-primary-dark', 'primary-color-dark'); // ! New class.
+@include text-color-variant('.text-primary-light', 'primary-color-light'); // ! New class.
+
 // @include text-color-variant('.text-secondary', $secondary-color-dark); // old spectre.css
 @include text-color-variant('.text-secondary', 'secondary-color-dark');
-// @include text-color-variant('.text-gray', $gray-color); // old spectre.css
-@include text-color-variant('.text-gray', 'gray-color');
-// @include text-color-variant('.text-light', $light-color); // old spectre.css
-@include text-color-variant('.text-light', 'light-color');
-// @include text-color-variant('.text-dark', $body-font-color); // old spectre.css
-@include text-color-variant('.text-dark', 'body-font-color');
+@include text-color-variant('.text-secondary-dark', 'secondary-color-dark'); // ! New class.
+@include text-color-variant('.text-secondary-light', 'secondary-color-light'); // ! New class.
+
+// Control colors.
+@include text-color-variant('.text-disabled', 'disabled-color'); // ! New class.
+// @include text-color-variant('.text-error', $error-color); // old spectre.css
+@include text-color-variant('.text-error', 'error-color');
+@include text-color-variant('.text-info', 'info-color'); // ! New class.
 // @include text-color-variant('.text-success', $success-color); // old spectre.css
 @include text-color-variant('.text-success', 'success-color');
 // @include text-color-variant('.text-warning', $warning-color); // old spectre.css
 @include text-color-variant('.text-warning', 'warning-color');
-// @include text-color-variant('.text-error', $error-color); // old spectre.css
-@include text-color-variant('.text-error', 'error-color');
+
+// Other colors.
+@include text-color-variant('.text-code', 'code-color'); // ! New class.
+@include text-color-variant('.text-highlight', 'highlight-color'); // ! New class.
 
 /*
   Background colors
 */
+// Accent
+@include bg-color-variant('.bg-accent', 'accent-color', $accent-color); // ! New color.
+
 // BG core colors
 @include bg-color-variant('.bg', 'bg-color', $bg-color); // ! New color, it's an old .bg-gray
-@include bg-color-variant('.bg-accent', 'accent-color', $accent-color); // ! New color.
+@include bg-color-variant('.bg-body', 'body-bg-color', $body-bg-color); // ! New color
+@include bg-color-variant('.bg-color', 'bg-color', $bg-color); // ! Add to have naming consistency.
+@include bg-color-variant('.bg-color-light', 'bg-color-light', $bg-color-light); // ! New color that uses $bg-color-light
+@include bg-color-variant('.bg-color-dark', 'bg-color-dark', $bg-color-dark); // ! New color that uses $bg-color-dark
+
+// Shades.
 // @include bg-color-variant('.bg-dark', $dark-color); // old.spectre.css
 @include bg-color-variant('.bg-dark', 'dark-color', $dark-color);
-@include bg-color-variant('.bg-color-dark', 'bg-color-dark', $bg-color-dark); // ! New color that uses $bg-color-dark
 @include bg-color-variant('.bg-light', 'light-color', $light-color);
-@include bg-color-variant('.bg-color-light', 'bg-color-light', $bg-color-light); // ! New color that uses $bg-color-light
+
+// Primary.
 // @include bg-color-variant('.bg-primary', $primary-color); // old spectre.css
 @include bg-color-variant('.bg-primary', 'primary-color', $primary-color);
+@include bg-color-variant('.bg-primary-dark', 'primary-color-dark', $primary-color-dark); // ! New background color.
+@include bg-color-variant('.bg-primary-light', 'primary-color-light', $primary-color-light); // ! New background color.
+
+// Secondary.
 // @include bg-color-variant('.bg-secondary', $secondary-color); // old.spectre.css
 @include bg-color-variant('.bg-secondary', 'secondary-color', $secondary-color);
+@include bg-color-variant('.bg-secondary-dark', 'secondary-color-dark', $secondary-color-dark); // ! New background color.
+@include bg-color-variant('.bg-secondary-light', 'secondary-color-light', $secondary-color-light); // ! New background color.
 
 /*
   Control colors.
 */
+@include bg-color-variant('.bg-disabled', 'disabled-color', $disabled-color); // ! New color.
 // @include bg-color-variant('.bg-error', $error-color); // old.spectre.css
 @include bg-color-variant('.bg-error', 'error-color', $error-color);
 @include bg-color-variant('.bg-info', 'info-color', $info-color); // ! New color.
@@ -55,3 +97,12 @@
 @include bg-color-variant('.bg-gray', 'gray-color', $gray-color); // ? .bg-gray is not $bg-color but directly $gray-color.
 @include bg-color-variant('.bg-gray-dark', 'gray-color-dark', $gray-color-dark); // ! New color.
 @include bg-color-variant('.bg-gray-light', 'gray-color-light', $gray-color-light); // ! New color.
+
+// Link colors.
+@include bg-color-variant('.bg-link', 'link-color', $link-color);  // ! New color.
+@include bg-color-variant('.bg-link-dark', 'link-color-dark', $link-color-dark); // ! New color.
+@include bg-color-variant('.bg-link-light', 'link-color-light', $link-color-light); // ! New color.
+
+// Other colors.
+@include bg-color-variant('.bg-code', 'code-color'); // ! New class.
+@include bg-color-variant('.bg-highlight', 'highlight-color'); // ! New class.