Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-13 23:02:23 +04:00
Code Issues Projects Releases Wiki Activity

improve CSS variables (#1232)

Browse Source
This commit is contained in:
Paweł Kuna
2022-09-07 02:41:35 +02:00
committed by GitHub
parent 6762afdbb2
commit 8d6898ed26
14 changed files with 41 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/js/src/tabler.js
+1 -1
View File
@@ -7,7 +7,7 @@ export const hexToRgba = (hex, opacity) => {
} }
export const getColor = (color, opacity = 1) => { 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) { if (opacity !== 1) {
return hexToRgba(c, opacity) return hexToRgba(c, opacity)
src/pages/_includes/ui/map-vector.html
+3 -3
View File
@@ -22,11 +22,11 @@
regionStyle: { regionStyle: {
initial: { initial: {
{% unless data.filled %} {% unless data.filled %}
fill: '#F8FAFC', fill: tabler.getColor('body-bg'),
stroke: 'rgba(98, 105, 118, .16)', stroke: 'rgba(98, 105, 118, .16)',
strokeWidth: 1, strokeWidth: 1,
{% else %} {% else %}
fill: '#e9ecef', fill: tabler.getColor('body-bg'),
stroke: '#fff', stroke: '#fff',
strokeWidth: 1, strokeWidth: 1,
{% endunless %} {% endunless %}
@@ -37,7 +37,7 @@
{% if data.values %} {% if data.values %}
// -------- Series -------- // -------- Series --------
visualizeData: { visualizeData: {
scale: ['#F8FAFC', tabler.getColor('{{ data.color }}')], scale: [tabler.getColor('card-bg'), tabler.getColor('{{ data.color }}')],
values: {{ data.values }}, values: {{ data.values }},
}, },
{% endif %} {% endif %}
src/pages/_layouts/base.html
+5 -1
View File
@@ -36,7 +36,11 @@
<style> <style>
@import url('https://rsms.me/inter/inter.css'); @import url('https://rsms.me/inter/inter.css');
:root { :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> </style>
</head> </head>
src/pages/pricing-table.html
+3 -3
View File
@@ -34,7 +34,7 @@ menu: extra.pricing-table
</thead> </thead>
<tbody> <tbody>
<tr class="bg-light"> <tr class="bg-light">
<th colspan="4">Features</th> <th colspan="4" class="subheader">Features</th>
</tr> </tr>
<tr> <tr>
<td>Some info about feature</td> <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> <td class="text-center">{% include ui/icon.html icon="check" class="text-green" %}</td>
</tr> </tr>
<tr class="bg-light"> <tr class="bg-light">
<th colspan="4">Reporting</th> <th colspan="4" class="subheader">Reporting</th>
</tr> </tr>
<tr> <tr>
<td>Free hosting and domain name</td> <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> <td class="text-center">{% include ui/icon.html icon="check" class="text-green" %}</td>
</tr> </tr>
<tr class="bg-light"> <tr class="bg-light">
<th colspan="4">Support</th> <th colspan="4" class="subheader">Support</th>
</tr> </tr>
<tr> <tr>
<td>Email marketing and service</td> <td>Email marketing and service</td>
src/scss/_variables.scss
+3 -3
View File
@@ -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: mix($text-muted, #ffffff, percentage($border-active-opacity)) !default;
$border-color-active-translucent: rgba($text-muted, $border-active-opacity) !default; $border-color-active-translucent: rgba($text-muted, $border-active-opacity) !default;
$active-bg: rgba($blue, .04) !default; $active-bg: rgba(var(--#{$prefix}primary-rgb), .04) !default;
$hover-bg: rgba($text-muted, .04) !default; $hover-bg: rgba(var(--#{$prefix}muted-rgb), .04) !default;
$disabled-bg: var(--#{$prefix}gray-100) !default; $disabled-bg: var(--#{$prefix}gray-100) !default;
$link-color: var(--#{$prefix}primary) !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-x: 1.5rem !default;
$card-spacer-y: 1rem !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-color: inherit !default;
$card-cap-padding-x: $card-spacer-x !default; $card-cap-padding-x: $card-spacer-x !default;
$card-cap-padding-y: $card-spacer-y !default; $card-cap-padding-y: $card-spacer-y !default;
src/scss/layout/_core.scss
+3 -3
View File
@@ -3,11 +3,11 @@
font-size: 16px; font-size: 16px;
height: 100%; height: 100%;
@each $name, $color in $theme-colors { @each $name, $color in map-merge($theme-colors, $gray-colors) {
--#{$prefix}#{$name}: #{$color}; --#{$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}-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}; --#{$prefix}card-bg: #{$card-bg};
src/scss/mixins/_mixins.scss
+1 -1
View File
@@ -9,7 +9,7 @@
} }
@if ($include-color) { @if ($include-color) {
color: $text-muted; color: var(--#{$prefix}muted);
} }
} }
src/scss/ui/_buttons.scss
+14 -3
View File
@@ -63,11 +63,22 @@
@each $color, $value in $theme-colors { @each $color, $value in $theme-colors {
.btn-#{$color} { .btn-#{$color} {
--#{$prefix}btn-border-color: transparent; --#{$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-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-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});
} }
} }
src/scss/ui/_calendars.scss
+1 -1
View File
@@ -81,7 +81,7 @@
left: 0; left: 0;
height: 1.4rem; height: 1.4rem;
content: ""; content: "";
background: rgba($primary, .1); background: rgba(var(--#{$prefix}primary-rgb), .1);
transform: translateY(-50%); transform: translateY(-50%);
} }
src/scss/ui/_cards.scss
+1 -1
View File
@@ -108,7 +108,7 @@
.card-active { .card-active {
position: relative; position: relative;
background-color: rgba($primary, .03); background-color: rgba(var(--#{$prefix}primary-rgb), .03);
z-index: 1; z-index: 1;
&:before { &:before {
src/scss/ui/_type.scss
+1 -2
View File
@@ -152,8 +152,7 @@ img {
Selection Selection
*/ */
::selection { ::selection {
color: $white; background-color: rgba(var(--#{$prefix}primary-rgb), .16);
background-color: lighten($primary, 8%);
} }
/** /**
src/scss/ui/forms/_form-selectgroup.scss
+1 -1
View File
@@ -95,7 +95,7 @@ Select group
.form-selectgroup-input:checked + .form-selectgroup-label { .form-selectgroup-input:checked + .form-selectgroup-label {
z-index: 1; z-index: 1;
color: var(--#{$prefix}primary); color: var(--#{$prefix}primary);
background: rgba($primary, .04); background: rgba(var(--#{$prefix}primary-rgb), .04);
border-color: var(--#{$prefix}primary); border-color: var(--#{$prefix}primary);
} }
src/scss/utils/_colors.scss
+1 -1
View File
@@ -24,6 +24,6 @@
} }
.text-#{"" + $color}-fg { .text-#{"" + $color}-fg {
color: color-contrast($value) !important; color: color-contrast($value ) !important;
} }
} }
src/scss/vendor/_litepicker.scss
Vendored
+3 -3
View File
@@ -1,7 +1,7 @@
.litepicker { .litepicker {
--litepicker-month-weekday-color: #{$text-muted}; --litepicker-month-weekday-color: #{var(--#{$prefix}muted)};
--litepicker-button-prev-month-color: #{$text-muted}; --litepicker-button-prev-month-color: #{var(--#{$prefix}muted)};
--litepicker-button-next-month-color: #{$text-muted}; --litepicker-button-next-month-color: #{var(--#{$prefix}muted)};
--litepicker-button-prev-month-color-hover: #{ var(--#{$prefix}primary) }; --litepicker-button-prev-month-color-hover: #{ var(--#{$prefix}primary) };
--litepicker-button-next-month-color-hover: #{ var(--#{$prefix}primary) }; --litepicker-button-next-month-color-hover: #{ var(--#{$prefix}primary) };
--litepicker-day-color: var(--#{$prefix}body-color); --litepicker-day-color: var(--#{$prefix}body-color);