From f95f2509c7bf36ebe65552ccab827823902771d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kuna?=
 <1282324+codecalm@users.noreply.github.com>
Date: Wed, 12 Feb 2025 21:01:04 +0100
Subject: [PATCH] Update color utility classes and fix colors in pricing page
 (#2122)

---
 .changeset/orange-moose-run.md   |  5 +++++
 core/scss/utils/_colors.scss     | 14 +++++++++++++-
 preview/pages/pricing-table.html |  6 +++---
 3 files changed, 21 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/orange-moose-run.md

diff --git a/.changeset/orange-moose-run.md b/.changeset/orange-moose-run.md
new file mode 100644
index 000000000..f5658186f
--- /dev/null
+++ b/.changeset/orange-moose-run.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Update color utility classes and replace background colors in pricing table
diff --git a/core/scss/utils/_colors.scss b/core/scss/utils/_colors.scss
index d63c8003e..50227c0f3 100644
--- a/core/scss/utils/_colors.scss
+++ b/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;
+}
\ No newline at end of file
diff --git a/preview/pages/pricing-table.html b/preview/pages/pricing-table.html
index 6cfb3449c..c4c7fa8ef 100644
--- a/preview/pages/pricing-table.html
+++ b/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>