From 8d6898ed268c851742e4acfd72a28ceb302da4b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kuna?=
 <1282324+codecalm@users.noreply.github.com>
Date: Wed, 7 Sep 2022 02:41:35 +0200
Subject: [PATCH] improve CSS variables (#1232)

---
 src/js/src/tabler.js                     |  2 +-
 src/pages/_includes/ui/map-vector.html   |  6 +++---
 src/pages/_layouts/base.html             |  6 +++++-
 src/pages/pricing-table.html             |  6 +++---
 src/scss/_variables.scss                 |  6 +++---
 src/scss/layout/_core.scss               |  6 +++---
 src/scss/mixins/_mixins.scss             |  2 +-
 src/scss/ui/_buttons.scss                | 17 ++++++++++++++---
 src/scss/ui/_calendars.scss              |  2 +-
 src/scss/ui/_cards.scss                  |  2 +-
 src/scss/ui/_type.scss                   |  3 +--
 src/scss/ui/forms/_form-selectgroup.scss |  2 +-
 src/scss/utils/_colors.scss              |  2 +-
 src/scss/vendor/_litepicker.scss         |  6 +++---
 14 files changed, 41 insertions(+), 27 deletions(-)

diff --git a/src/js/src/tabler.js b/src/js/src/tabler.js
index 2439558ab..1300cd98f 100644
--- a/src/js/src/tabler.js
+++ b/src/js/src/tabler.js
@@ -7,7 +7,7 @@ export const hexToRgba = (hex, opacity) => {
 }
 
 export const getColor = (color, opacity = 1) => {
-  const c = getComputedStyle(document.documentElement).getPropertyValue(`--${prefix}${color}`).trim()
+  const c = getComputedStyle(document.body).getPropertyValue(`--${prefix}${color}`).trim()
 
   if (opacity !== 1) {
 	 return hexToRgba(c, opacity)
diff --git a/src/pages/_includes/ui/map-vector.html b/src/pages/_includes/ui/map-vector.html
index 418e44b54..db47ec735 100644
--- a/src/pages/_includes/ui/map-vector.html
+++ b/src/pages/_includes/ui/map-vector.html
@@ -22,11 +22,11 @@
 				regionStyle: {
 					initial: {
 						{% unless data.filled %}
-						fill: '#F8FAFC',
+						fill: tabler.getColor('body-bg'),
 						stroke: 'rgba(98, 105, 118, .16)',
 						strokeWidth: 1,
 						{% else %}
-						fill: '#e9ecef',
+						fill: tabler.getColor('body-bg'),
 						stroke: '#fff',
 						strokeWidth: 1,
 						{% endunless %}
@@ -37,7 +37,7 @@
 				{% if data.values %}
 				// -------- Series --------
 				visualizeData: {
-					scale: ['#F8FAFC', tabler.getColor('{{ data.color }}')],
+					scale: [tabler.getColor('card-bg'), tabler.getColor('{{ data.color }}')],
 					values: {{ data.values }},
 				},
 				{% endif %}
diff --git a/src/pages/_layouts/base.html b/src/pages/_layouts/base.html
index e0ecc195b..300a4adb8 100644
--- a/src/pages/_layouts/base.html
+++ b/src/pages/_layouts/base.html
@@ -36,7 +36,11 @@
 	<style>
 		@import url('https://rsms.me/inter/inter.css');
 		:root {
-			--tblr-font-sans-serif: Inter,-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif;
+			--tblr-font-sans-serif: Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+
+			--tblr-primary: var(--tblr-danger);
+			--tblr-primary-darken: var(--tblr-danger-darken);
+			--tblr-primary-rgb: var(--tblr-danger-rgb);
 		}
 	</style>
 </head>
diff --git a/src/pages/pricing-table.html b/src/pages/pricing-table.html
index 0690decf6..f92d66683 100644
--- a/src/pages/pricing-table.html
+++ b/src/pages/pricing-table.html
@@ -34,7 +34,7 @@ menu: extra.pricing-table
 				</thead>
 				<tbody>
 				<tr class="bg-light">
-					 <th colspan="4">Features</th>
+					 <th colspan="4" class="subheader">Features</th>
 				</tr>
 				<tr>
 					 <td>Some info about feature</td>
@@ -55,7 +55,7 @@ menu: extra.pricing-table
 					 <td class="text-center">{% include ui/icon.html icon="check" class="text-green" %}</td>
 				</tr>
 				<tr class="bg-light">
-					 <th colspan="4">Reporting</th>
+					 <th colspan="4" class="subheader">Reporting</th>
 				</tr>
 				<tr>
 					 <td>Free hosting and domain name</td>
@@ -70,7 +70,7 @@ menu: extra.pricing-table
 					 <td class="text-center">{% include ui/icon.html icon="check" class="text-green" %}</td>
 				</tr>
 				<tr class="bg-light">
-					 <th colspan="4">Support</th>
+					 <th colspan="4" class="subheader">Support</th>
 				</tr>
 				<tr>
 					 <td>Email marketing and service</td>
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 8adb6a5be..a654f137d 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -136,8 +136,8 @@ $border-color-dark-translucent: rgba($text-muted, $border-dark-opacity) !default
 $border-color-active: mix($text-muted, #ffffff, percentage($border-active-opacity)) !default;
 $border-color-active-translucent: rgba($text-muted, $border-active-opacity) !default;
 
-$active-bg: rgba($blue, .04) !default;
-$hover-bg: rgba($text-muted, .04) !default;
+$active-bg: rgba(var(--#{$prefix}primary-rgb), .04) !default;
+$hover-bg: rgba(var(--#{$prefix}muted-rgb), .04) !default;
 $disabled-bg: var(--#{$prefix}gray-100) !default;
 
 $link-color: var(--#{$prefix}primary) !default;
@@ -400,7 +400,7 @@ $card-border-radius: var(--#{$prefix}border-radius) !default;
 $card-spacer-x: 1.5rem !default;
 $card-spacer-y: 1rem !default;
 
-$card-cap-bg: $gray-50 !default;
+$card-cap-bg: var(--#{$prefix}gray-50) !default;
 $card-cap-color: inherit !default;
 $card-cap-padding-x: $card-spacer-x !default;
 $card-cap-padding-y: $card-spacer-y !default;
diff --git a/src/scss/layout/_core.scss b/src/scss/layout/_core.scss
index 9673b2895..e95318c85 100644
--- a/src/scss/layout/_core.scss
+++ b/src/scss/layout/_core.scss
@@ -3,11 +3,11 @@
   font-size: 16px;
   height: 100%;
 
-  @each $name, $color in $theme-colors {
+  @each $name, $color in map-merge($theme-colors, $gray-colors) {
     --#{$prefix}#{$name}: #{$color};
+    --#{$prefix}#{$name}-fg: #{if(contrast-ratio($color) > $min-contrast-ratio, var(--#{$prefix}light), var(--#{$prefix}dark))};
     --#{$prefix}#{$name}-darken: #{theme-color-darker($color)};
-    --#{$prefix}#{$name}-light: #{theme-color-lighter($color)};
-    //--#{$prefix}#{$name}-rgb: #{to-rgb($color)};
+    --#{$prefix}#{$name}-rgb: #{to-rgb($color)};
   }
 
   --#{$prefix}card-bg: #{$card-bg};
diff --git a/src/scss/mixins/_mixins.scss b/src/scss/mixins/_mixins.scss
index 64c7edf41..8c96603f5 100644
--- a/src/scss/mixins/_mixins.scss
+++ b/src/scss/mixins/_mixins.scss
@@ -9,7 +9,7 @@
   }
 
   @if ($include-color) {
-    color: $text-muted;
+    color: var(--#{$prefix}muted);
   }
 }
 
diff --git a/src/scss/ui/_buttons.scss b/src/scss/ui/_buttons.scss
index be2454ff2..c197eff34 100644
--- a/src/scss/ui/_buttons.scss
+++ b/src/scss/ui/_buttons.scss
@@ -63,11 +63,22 @@
 @each $color, $value in $theme-colors {
   .btn-#{$color} {
     --#{$prefix}btn-border-color: transparent;
-    --#{$prefix}btn-color: #{color-contrast($value)};
+    --#{$prefix}btn-color: var(--#{$prefix}#{$color}-fg);
     --#{$prefix}btn-bg: var(--#{$prefix}#{$color});
-    --#{$prefix}btn-hover-bg: var(--#{$prefix}#{$color}-darken);
-    --#{$prefix}btn-hover-color: #{color-contrast($value)};
     --#{$prefix}btn-hover-border-color: transparent;
+    --#{$prefix}btn-hover-color: var(--#{$prefix}#{$color}-fg);
+    --#{$prefix}btn-hover-bg: rgba(var(--#{$prefix}#{$color}-rgb), .8);
+    --#{$prefix}btn-active-border-color: transparent;
+    --#{$prefix}btn-active-color: var(--#{$prefix}#{$color}-fg);
+    --#{$prefix}btn-active-bg: rgba(var(--#{$prefix}#{$color}-rgb), .8);
+    --#{$prefix}btn-disabled-bg: rgba(var(--#{$prefix}#{$color}-rgb), .5);
+    --#{$prefix}btn-disabled-color: var(--#{$prefix}#{$color}-fg);
+  }
+
+  .btn-outline-#{$color} {
+    --#{$prefix}btn-color: var(--#{$prefix}#{$color});
+    --#{$prefix}btn-border-color: var(--#{$prefix}#{$color});
+    --#{$prefix}btn-active-color: var(--#{$prefix}#{$color});
   }
 }
 
diff --git a/src/scss/ui/_calendars.scss b/src/scss/ui/_calendars.scss
index e847022a1..2fb38c339 100644
--- a/src/scss/ui/_calendars.scss
+++ b/src/scss/ui/_calendars.scss
@@ -81,7 +81,7 @@
     left: 0;
     height: 1.4rem;
     content: "";
-    background: rgba($primary, .1);
+    background: rgba(var(--#{$prefix}primary-rgb), .1);
     transform: translateY(-50%);
   }
 
diff --git a/src/scss/ui/_cards.scss b/src/scss/ui/_cards.scss
index d4dc00fd1..8bddff1c9 100644
--- a/src/scss/ui/_cards.scss
+++ b/src/scss/ui/_cards.scss
@@ -108,7 +108,7 @@
 
 .card-active {
   position: relative;
-  background-color: rgba($primary, .03);
+  background-color: rgba(var(--#{$prefix}primary-rgb), .03);
   z-index: 1;
 
   &:before {
diff --git a/src/scss/ui/_type.scss b/src/scss/ui/_type.scss
index 8a2056ee0..d67ce38e7 100644
--- a/src/scss/ui/_type.scss
+++ b/src/scss/ui/_type.scss
@@ -152,8 +152,7 @@ img {
 Selection
  */
 ::selection {
-  color: $white;
-  background-color: lighten($primary, 8%);
+  background-color: rgba(var(--#{$prefix}primary-rgb), .16);
 }
 
 /**
diff --git a/src/scss/ui/forms/_form-selectgroup.scss b/src/scss/ui/forms/_form-selectgroup.scss
index 7fa18b40e..8e93f110b 100644
--- a/src/scss/ui/forms/_form-selectgroup.scss
+++ b/src/scss/ui/forms/_form-selectgroup.scss
@@ -95,7 +95,7 @@ Select group
 .form-selectgroup-input:checked + .form-selectgroup-label {
   z-index: 1;
   color: var(--#{$prefix}primary);
-  background: rgba($primary, .04);
+  background: rgba(var(--#{$prefix}primary-rgb), .04);
   border-color: var(--#{$prefix}primary);
 }
 
diff --git a/src/scss/utils/_colors.scss b/src/scss/utils/_colors.scss
index f481b8ab5..4a4bf0d0d 100644
--- a/src/scss/utils/_colors.scss
+++ b/src/scss/utils/_colors.scss
@@ -24,6 +24,6 @@
   }
 
   .text-#{"" + $color}-fg {
-    color: color-contrast($value) !important;
+    color: color-contrast($value ) !important;
   }
 }
diff --git a/src/scss/vendor/_litepicker.scss b/src/scss/vendor/_litepicker.scss
index 8997a43f1..03caf80e2 100644
--- a/src/scss/vendor/_litepicker.scss
+++ b/src/scss/vendor/_litepicker.scss
@@ -1,7 +1,7 @@
 .litepicker {
-  --litepicker-month-weekday-color: #{$text-muted};
-  --litepicker-button-prev-month-color: #{$text-muted};
-  --litepicker-button-next-month-color: #{$text-muted};
+  --litepicker-month-weekday-color: #{var(--#{$prefix}muted)};
+  --litepicker-button-prev-month-color: #{var(--#{$prefix}muted)};
+  --litepicker-button-next-month-color: #{var(--#{$prefix}muted)};
   --litepicker-button-prev-month-color-hover: #{ var(--#{$prefix}primary) };
   --litepicker-button-next-month-color-hover: #{ var(--#{$prefix}primary) };
   --litepicker-day-color: var(--#{$prefix}body-color);