colors fixes

src/pages/colors.html

+---
+title: Colors
+page-header: Colors
+---
+
+{% assign colors = '' | split: '' %}
+{% for color in site.colors %}
+{% assign colors = colors | push: color[0] %}
+{% endfor %}
+{% assign colors = colors | push: 'dark' %}
+{% assign colors = colors | push: 'muted' %}
+
+<div class="card">
+	<div class="card-body">
+		<div class="table-responsive">
+			<table class="table text-center">
+				<tr>
+					{% for color in colors %}
+					<td>
+						<div class="avatar text-{% if color == 'white' %}dark{% else %}white{% endif %} bg-{{ color }}" data-demo-color>{{ color | slice: 0, 2 }}
+						</div>
+					</td>
+					{% endfor %}
+				</tr>
+				<tr>
+					{% for color in colors %}
+					<td>
+						<div class="avatar bg-{{ color }}-lt" data-demo-color>{{ color | slice: 0, 2 }}</div>
+					</td>
+					{% endfor %}
+				</tr>
+				<tr>
+					{% for color in colors %}
+					<td>
+						<div class="avatar text-{{ color }} bg-white" data-demo-color>{{ color | slice: 0, 2 }}</div>
+					</td>
+					{% endfor %}
+				</tr>
+				<tr class="bg-light">
+					{% for color in colors %}
+					<td>
+						<div class="avatar text-{{ color }} bg-light" data-demo-color>{{ color | slice: 0, 2 }}</div>
+					</td>
+					{% endfor %}
+				</tr>
+				<tr class="bg-dark text-white">
+					{% for color in colors %}
+					<td>
+						{% if color == 'dark' %}{% assign c = 'white' %}{% else %}{% assign c = color %}{% endif %}
+						<div class="avatar text-{{ c }} bg-dark" data-demo-color>{{ c | slice: 0, 2 }}</div>
+					</td>
+					{% endfor %}
+				</tr>
+				<tr class="bg-dark text-white">
+					{% for color in colors %}
+					<td>
+						{% if color == 'dark' %}{% assign c = 'white' %}{% else %}{% assign c = color %}{% endif %}
+						<div class="avatar bg-{{ c }}-lt" data-demo-color>{{ c | slice: 0, 2 }}</div>
+						<div class="mt-2" data-demo-color-contrast></div>
+					</td>
+					{% endfor %}
+				</tr>
+			</table>
+		</div>
+	</div>
+</div>
+
+{% comment %}
+{% capture_once scripts %}
+<script>
+	var colorChannelMixer = function (colorChannelA, colorChannelB, amountToMix) {
+		var channelA = colorChannelA * amountToMix;
+		var channelB = colorChannelB * (1 - amountToMix);
+		return parseInt(channelA + channelB);
+	};
+
+	var color2Rgb = function (color) {
+		var resultHex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
+		if (resultHex) {
+			return [
+				parseInt(resultHex[1], 16),
+				parseInt(resultHex[2], 16),
+				parseInt(resultHex[3], 16)
+			]
+		}
+
+		var resultRgb = /^rgba?\((\d+),\s?(\d+),\s?(\d+)(?:,\s?([\d.]+))?\)$/i.exec(color);
+
+		if (resultRgb) {
+			var alpha = resultRgb[4] ? (parseFloat(resultRgb[4])) : 1;
+
+			return [
+				colorChannelMixer(resultRgb[1], 255, alpha),
+				colorChannelMixer(resultRgb[2], 255, alpha),
+				colorChannelMixer(resultRgb[3], 255, alpha)
+			]
+		}
+
+		return null;
+	};
+
+	var getLuminanace = (values) => {
+		const rgb = values.map((v) => {
+			var val = v / 255;
+			return val <= 0.03928 ? val / 12.92 : ((val + 0.055) / 1.055) ** 2.4;
+		});
+		return Number((0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]).toFixed(3));
+	};
+
+	var getContrastRatio = (colorA, colorB) => {
+		var lumA = getLuminanace(color2Rgb(colorA)),
+			lumB = getLuminanace(color2Rgb(colorB));
+
+		console.log('colorA, colorB, color2Rgb(colorA), color2Rgb(colorB)', colorA, colorB, color2Rgb(colorA), color2Rgb(colorB));
+
+		return Math.round((Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05) * 100) / 100;
+	};
+
+	(function () {
+		const elements = document.querySelectorAll('[data-demo-color]');
+
+		if (elements.length) {
+			elements.forEach(function (element) {
+				var { color, backgroundColor } = window.getComputedStyle(element),
+					elementRatio = element.parentElement.querySelector('[data-demo-color-contrast]'),
+					ratio = getContrastRatio(color, backgroundColor);
+
+				elementRatio.innerHTML = ratio;
+				elementRatio.classList.add(ratio > 4.5 ? 'text-green' : 'text-red');
+
+			});
+		}
+	})();
+</script>
+{% endcapture_once %}
+{% endcomment %}
\ No newline at end of file

src/scss/_variables.scss

@@ -113,27 +113,27 @@ $gray-900: $dark !default;
 
 $blue: #206bc4 !default;
 $azure: #4299e1 !default;
-$indigo: #6574cd !default;
-$purple: #9f7aea !default;
-$pink: #ed64a6 !default;
-$red: #e53e3e !default;
-$orange: #ed8936 !default;
-$yellow: #fab005 !default;
-$lime: #82c91e !default;
-$green: #5eba00 !default;
-$teal: #2bcbba !default;
+$indigo: #4263eb !default;
+$purple: #ae3ec9 !default;
+$pink: #d6336c !default;
+$red: #d63939 !default;
+$orange: #f76707 !default;
+$yellow: #f59f00 !default;
+$lime: #74b816 !default;
+$green: #2fb344 !default;
+$teal: #0ca678 !default;
 $cyan: #17a2b8 !default;
 $black: #000000 !default;
 $white: #ffffff !default;
 
-$text-muted: mix($body-color, #fff, percentage($text-muted-opacity)) !default;
-$text-muted-light: mix($body-color, #fff, percentage($text-muted-light-opacity)) !default;
-$text-muted-dark: mix($body-color, #fff, percentage($text-muted-dark-opacity)) !default;
+$text-muted: mix($body-color, #ffffff, percentage($text-muted-opacity)) !default;
+$text-muted-light: mix($body-color, #ffffff, percentage($text-muted-light-opacity)) !default;
+$text-muted-dark: mix($body-color, #ffffff, percentage($text-muted-dark-opacity)) !default;
 
-$border-color: mix($text-muted, #fff, percentage($border-opacity)) !default;
+$border-color: mix($text-muted, #ffffff, percentage($border-opacity)) !default;
 $border-color-transparent: rgba($text-muted, $border-opacity) !default;
 
-$border-color-dark: mix($text-muted, #fff, percentage($border-dark-opacity)) !default;
+$border-color-dark: mix($text-muted, #ffffff, percentage($border-dark-opacity)) !default;
 $border-color-dark-transparent: rgba($text-muted, $border-dark-opacity) !default;
 
 $active-bg: rgba($blue, .06) !default;
@@ -351,7 +351,6 @@ $dropdown-link-active-color: $primary !default;
 $dropdown-link-active-bg: $active-bg !default;
 
 
-
 //loader
 $loader-size: 2.5rem !default;
 

src/scss/mixins/_functions.scss

@@ -11,7 +11,7 @@
 }
 
 @function theme-color-darker($color) {
-  @return shade-color($color, 16%);
+  @return shade-color($color, 10%);
 }
 
 @function str-replace($string, $search, $replace: "") {

src/scss/ui/_avatars.scss

@@ -4,7 +4,7 @@
   width: var(--#{$variable-prefix}avatar-size);
   height: var(--#{$variable-prefix}avatar-size);
   font-size: calc(var(--#{$variable-prefix}avatar-size) / #{$line-height-base * 2});
-  font-weight: $font-weight-normal;
+  font-weight: $font-weight-medium;
   display: inline-flex;
   align-items: center;
   justify-content: center;

src/scss/ui/_tables.scss

@@ -14,6 +14,14 @@
   }
 }
 
+.table-responsive {
+  margin-bottom: $spacer;
+
+  .table {
+    margin-bottom: 0;
+  }
+}
+
 .table-transparent {
   thead {
     th {

src/scss/utils/_colors.scss

@@ -16,7 +16,7 @@ SOCIAL COLORS
 
 
 @if $enable-extra-colors {
-  @each $color, $value in $colors {
+  @each $color, $value in map-merge($colors, (dark: $dark, muted: $text-muted, white: $white)) {
     .bg-#{$color} {
       background: $value;
     }
@@ -26,7 +26,7 @@ SOCIAL COLORS
     }
 
     .bg-#{$color}-lt {
-      color: $value !important;
+      color: theme-color-darker($value) !important;
       background: theme-color-lighter($value, true) !important;
     }
   }