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

Fix some missing variables, minor tweaks to some colors (#1684)

Browse Source
This commit is contained in:
Matt Holt
2023-09-21 15:02:16 -06:00
committed by GitHub
parent 2d0b051e26
commit 9fb40197b9
5 changed files with 33 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/scss/_variables-dark.scss
+3 -3
View File
@@ -3,13 +3,13 @@
//
$darken-dark: darken($dark, 2%) !default;
$lighten-dark: lighten($dark, 2%) !default;
$border-color-dark: lighten($dark, 4%) !default;
$border-color-dark: lighten($dark, 8%) !default;
$border-color-translucent-dark: rgba(72, 110, 149, .14) !default;
$border-dark-color-dark: lighten($dark, 4%) !default;
$border-color-active-dark: lighten($dark, 12%) !default;
$border-active-color-dark: lighten($dark, 12%) !default;
//new bootsrap variables
$body-color-dark: $light !default;
$body-color-dark: $gray-200 !default;
$body-emphasis-color-dark: $white !default;
$code-color-dark: var(--#{$prefix}gray-300) !default;
src/scss/_variables.scss
+23 -21
View File
@@ -135,15 +135,15 @@ $text-secondary-dark-opacity: 0.8 !default;
$border-opacity: 0.16 !default;
$border-light-opacity: 0.08 !default;
$border-dark-opacity: 0.24 !default;
$border-active-opacity: 0.48 !default;
$border-active-opacity: 0.58 !default;
$gray-50: #fcfdfe !default;
$gray-100: #f6f8fb !default;
$gray-200: #eef1f4 !default;
$gray-300: #dadfe5 !default;
$gray-400: #bbc3cd !default;
$gray-500: #929dab !default;
$gray-600: #667382 !default;
$gray-50: #f6f8fb !default;
$gray-100: #eef3f6 !default;
$gray-200: #dce1e7 !default;
$gray-300: #b8c4d4 !default;
$gray-400: #8a97ab !default;
$gray-500: #6c7a91 !default;
$gray-600: #49566c !default;
$gray-700: #3a4859 !default;
$gray-800: #182433 !default;
$gray-900: #040a11 !default;
@@ -159,14 +159,14 @@ $bg-surface-secondary: var(--#{$prefix}gray-100) !default;
$bg-surface-tertiary: var(--#{$prefix}gray-50) !default;
$bg-surface-dark: var(--#{$prefix}dark) !default;
$body-bg: $gray-100 !default;
$body-bg: $gray-50 !default;
$body-color: $dark !default;
$body-emphasis-color: $dark !default;
$body-emphasis-color: $gray-700 !default;
$color-contrast-dark: $body-color !default;
$color-contrast-light: $light !default;
$blue: #0054a6 !default;
$blue: #206bc4 !default;
$azure: #4299e1 !default;
$indigo: #4263eb !default;
$purple: #ae3ec9 !default;
@@ -179,7 +179,7 @@ $green: #2fb344 !default;
$teal: #0ca678 !default;
$cyan: #17a2b8 !default;
$color-blue: #0054a6;
$color-blue: #206bc4;
$color-azure: #3586c9;
$color-indigo: #4263eb;
$color-purple: #ae3ec9;
@@ -192,12 +192,12 @@ $color-green: #2fb344;
$color-teal: #0ca678;
$color-cyan: #17a2b8;
$text-secondary: $gray-600 !default;
$text-secondary-light: $gray-500 !default;
$text-secondary-dark: $gray-700 !default;
$text-secondary: $gray-500 !default;
$text-secondary-light: $gray-400 !default;
$text-secondary-dark: $gray-600 !default;
$border-color: $gray-300 !default;
$border-color-translucent: rgba(4, 32, 69, 0.14);
$border-color: $gray-200 !default;
$border-color-translucent: rgba(4, 32, 69, 0.1);
$border-dark-color: $gray-400 !default;
$border-dark-color-translucent: rgba(4, 32, 69, 0.27);
@@ -209,7 +209,7 @@ $active-bg: rgba(var(--#{$prefix}primary-rgb), 0.04) !default;
$active-color: var(--#{$prefix}primary) !default;
$active-border-color: var(--#{$prefix}primary) !default;
$hover-bg: rgba(var(--#{$prefix}text-secondary-rgb), 0.04) !default;
$hover-bg: rgba(var(--#{$prefix}secondary-rgb), 0.08) !default;
$disabled-bg: var(--#{$prefix}bg-surface-secondary) !default;
$disabled-color: var(--#{$prefix}gray-300) !default;
@@ -293,7 +293,7 @@ $border-radius-lg: 8px !default;
$border-radius-pill: 100rem !default;
// Icons
$icon-color: var(--#{$prefix}gray-500) !default;
$icon-color: var(--#{$prefix}gray-400) !default;
// Code
$code-color: var(--#{$prefix}gray-600) !default;
@@ -583,7 +583,7 @@ $card-border-color: var(--#{$prefix}border-color-translucent) !default;
$card-border-radius: var(--#{$prefix}border-radius) !default;
$card-spacer-x: 1.25rem !default;
$card-spacer-y: 1.25rem !default;
$card-spacer-y: 1rem !default;
$card-cap-bg: var(--#{$prefix}bg-surface-tertiary) !default;
$card-cap-color: inherit !default;
@@ -720,6 +720,8 @@ $nav-tabs-bg: var(--#{$prefix}bg-surface-tertiary) !default;
$navbar-height: 3.5rem !default;
$navbar-padding-y: 0.25rem !default;
$navbar-hover-color: $white !default;
$navbar-border-width: var(--#{$prefix}border-width) !default;
$navbar-border-color: var(--#{$prefix}border-color) !default;
@@ -757,7 +759,7 @@ $sidebar-width: 15rem !default;
// Page
$page-title-font-size: var(--#{$prefix}font-size-h2) !default;
$page-title-line-height: var(--#{$prefix}line-height-h4) !default;
$page-title-line-height: var(--#{$prefix}line-height-h2) !default;
$page-title-font-weight: var(--#{$prefix}font-weight-headings) !default;
// Popover
src/scss/layout/_dark.scss
+2 -2
View File
@@ -43,8 +43,8 @@ body {
--#{$prefix}dark-mode-border-color-translucent
);
--#{$prefix}border-dark-color: var(--#{$prefix}dark-mode-border-dark-color);
--#{$prefix}border-color-active: var(
--#{$prefix}dark-mode-border-color-active
--#{$prefix}border-active-color: var(
--#{$prefix}dark-mode-border-active-color
);
--#{$prefix}btn-color: #{$darken-dark};
src/scss/layout/_root.scss
+1 -1
View File
@@ -45,7 +45,7 @@
--#{$prefix}dark-mode-border-color: #{$border-color-dark};
--#{$prefix}dark-mode-border-color-translucent: #{$border-color-translucent-dark};
--#{$prefix}dark-mode-border-color-active: #{$border-color-active-dark};
--#{$prefix}dark-mode-border-active-color: #{$border-active-color-dark};
--#{$prefix}dark-mode-border-dark-color: #{$border-dark-color-dark};
--#{$prefix}page-padding: #{$page-padding};
src/scss/ui/_buttons.scss
+4 -4
View File
@@ -7,7 +7,7 @@
--#{$prefix}btn-color: var(--#{$prefix}body-color);
--#{$prefix}btn-border-color: #{$btn-border-color};
--#{$prefix}btn-hover-bg: var(--#{$prefix}btn-bg);
--#{$prefix}btn-hover-border-color: var(--#{$prefix}border-color-active);
--#{$prefix}btn-hover-border-color: var(--#{$prefix}border-active-color);
--#{$prefix}btn-box-shadow: var(--#{$prefix}box-shadow-input);
--#{$prefix}btn-active-color: #{$active-color};
--#{$prefix}btn-active-bg: #{$active-bg};
@@ -50,7 +50,7 @@
}
.btn-link {
color: $link-color;
color: #{lighten($primary, 5%)};
background-color: transparent;
border-color: transparent;
box-shadow: none;
@@ -72,8 +72,8 @@
.btn-#{$color} {
@if $color == 'dark' {
--#{$prefix}btn-border-color: var(--#{$prefix}dark-mode-border-color);
--#{$prefix}btn-hover-border-color: var(--#{$prefix}dark-mode-border-color-active);
--#{$prefix}btn-active-border-color: var(--#{$prefix}dark-mode-border-color-active);
--#{$prefix}btn-hover-border-color: var(--#{$prefix}dark-mode-border-active-color);
--#{$prefix}btn-active-border-color: var(--#{$prefix}dark-mode-border-active-color);
} @else {
--#{$prefix}btn-border-color: transparent;
--#{$prefix}btn-hover-border-color: transparent;