Update color utility classes and fix colors in pricing page (#2122)

.changeset/orange-moose-run.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update color utility classes and replace background colors in pricing table

core/scss/utils/_colors.scss

@@ -31,7 +31,7 @@
 
 @each $color, $value in $gray-colors {
   .bg-#{"" + $color} {
-    --#{$prefix}bg-opacity: .1;
+    --#{$prefix}bg-opacity: 1;
     background-color: rgba(var(--#{$prefix}#{$color}-rgb), var(--#{$prefix}bg-opacity)) !important;
   }
 
@@ -39,3 +39,15 @@
     color: $value !important;
   }
 }
+
+.bg-surface {
+  background-color: var(--#{$prefix}bg-surface) !important;
+}
+
+.bg-surface-secondary {
+  background-color: var(--#{$prefix}bg-surface-secondary) !important;
+}
+
+.bg-surface-tertiary {
+  background-color: var(--#{$prefix}bg-surface-tertiary) !important;
+}

preview/pages/pricing-table.html

@@ -35,7 +35,7 @@ permalink: pricing-table.html
 				</tr>
 				</thead>
 				<tbody>
-				<tr class="bg-light">
+				<tr class="bg-surface-tertiary">
 					 <th colspan="4" class="subheader">Features</th>
 				</tr>
 				<tr>
@@ -56,7 +56,7 @@ permalink: pricing-table.html
 					 <td class="text-center">{% include "ui/icon.html" icon="x" class="text-red" %}</td>
 					 <td class="text-center">{% include "ui/icon.html" icon="check" class="text-green" %}</td>
 				</tr>
-				<tr class="bg-light">
+				<tr class="bg-surface-tertiary">
 					 <th colspan="4" class="subheader">Reporting</th>
 				</tr>
 				<tr>
@@ -71,7 +71,7 @@ permalink: pricing-table.html
 					 <td class="text-center">{% include "ui/icon.html" icon="check" class="text-green" %}</td>
 					 <td class="text-center">{% include "ui/icon.html" icon="check" class="text-green" %}</td>
 				</tr>
-				<tr class="bg-light">
+				<tr class="bg-surface-tertiary">
 					 <th colspan="4" class="subheader">Support</th>
 				</tr>
 				<tr>