Skip to content

Commit

Permalink
yeti: dark mode fixes, #1255
Browse files Browse the repository at this point in the history
  • Loading branch information
@thomaspark
thomaspark committed Jun 2, 2023
1 parent 42722b2 commit 6cc2090
Show file tree
Hide file tree
Showing 8 changed files with 106 additions and 230 deletions.
38 changes: 6 additions & 32 deletions dist/yeti/_bootswatch.scss
View file
Expand Up @@ -114,7 +114,7 @@ $web-font-path: "https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,
}

.btn-outline-secondary {
color: $black;
color: var(--bs-primary-color);
}

.btn-group {
Expand Down Expand Up @@ -245,22 +245,6 @@ label,
font-weight: 300;
}

.nav-tabs {
.nav-link,
.nav-link.disabled,
.nav-link.disabled:hover,
.nav-link.disabled:focus {
background-color: $gray-200;
border-color: $nav-tabs-border-color;
}

.nav-item + .nav-item {
.nav-link {
border-left: none;
}
}
}

.nav-pills {
.active {
border: 1px solid shade-color($primary, 10%);
Expand Down Expand Up @@ -312,30 +296,20 @@ label,
font-weight: 300;
}

.list-group-item.disabled,
.list-group-item:disabled {
background-color: var(--bs-secondary-bg);
}

// Indicators

.alert {
font-size: $font-size-sm;
font-weight: 300;
color: $white;

.alert-link {
color: $white;
text-decoration: underline;
}

&:not(.alert-secondary):not(.alert-light) .btn-close {
background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$white}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>"));
}

&-secondary,
&-light {
&,
a:not(.btn),
.alert-link {
color: $body-color;
}
}
}

.badge {
Expand Down
22 changes: 2 additions & 20 deletions dist/yeti/_variables.scss
View file
Expand Up @@ -37,7 +37,7 @@ $info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-200 !default;
$dark: $gray-900 !default;
$dark: $gray-800 !default;

$min-contrast-ratio: 1.9 !default;

Expand Down Expand Up @@ -67,13 +67,6 @@ $btn-font-weight: 300 !default;
$dropdown-border-color: rgba($black, .1) !default;
$dropdown-divider-bg: rgba($black, .1) !default;

// Navs

$nav-link-disabled-color: $gray-400 !default;
$nav-tabs-border-color: $dropdown-border-color !default;
$nav-tabs-link-hover-border-color: $nav-tabs-border-color !default;
$nav-tabs-link-active-border-color: $nav-tabs-border-color !default;

// Navbar

$navbar-dark-color: rgba($white, .7) !default;
Expand All @@ -82,7 +75,7 @@ $navbar-dark-hover-color: $white !default;
// Pagination

$pagination-color: $gray-600 !default;
$pagination-border-color: $nav-tabs-border-color !default;
// $pagination-border-color: $nav-tabs-border-color !default;
$pagination-active-border-color: darken($primary, 5%) !default;
$pagination-disabled-color: $gray-200 !default;

Expand All @@ -99,17 +92,6 @@ $badge-padding-x: 1rem !default;

$alert-link-font-weight: 400 !default;

$alert-bg-scale: 0% !default;

// Progress bars

$progress-bg: $gray-400 !default;
$progress-bar-color: $white !default;

// List group

$list-group-disabled-bg: $gray-200 !default;

// Breadcrumbs

$breadcrumb-padding-y: .375rem !default;
Expand Down
106 changes: 44 additions & 62 deletions dist/yeti/bootstrap.css
View file
Expand Up @@ -44,15 +44,15 @@
--bs-warning: #e99002;
--bs-danger: #f04124;
--bs-light: #eee;
--bs-dark: #222;
--bs-dark: #333;
--bs-primary-rgb: 0, 140, 186;
--bs-secondary-rgb: 238, 238, 238;
--bs-success-rgb: 67, 172, 106;
--bs-info-rgb: 91, 192, 222;
--bs-warning-rgb: 233, 144, 2;
--bs-danger-rgb: 240, 65, 36;
--bs-light-rgb: 238, 238, 238;
--bs-dark-rgb: 34, 34, 34;
--bs-dark-rgb: 51, 51, 51;
--bs-primary-text-emphasis: #00384a;
--bs-secondary-text-emphasis: #5f5f5f;
--bs-success-text-emphasis: #1b452a;
Expand Down Expand Up @@ -2039,13 +2039,13 @@ progress {

.table-dark {
--bs-table-color: #fff;
--bs-table-bg: #222;
--bs-table-border-color: #383838;
--bs-table-striped-bg: #2d2d2d;
--bs-table-bg: #333;
--bs-table-border-color: #474747;
--bs-table-striped-bg: #3d3d3d;
--bs-table-striped-color: #fff;
--bs-table-active-bg: #383838;
--bs-table-active-bg: #474747;
--bs-table-active-color: #fff;
--bs-table-hover-bg: #333333;
--bs-table-hover-bg: #424242;
--bs-table-hover-color: #fff;
color: var(--bs-table-color);
border-color: var(--bs-table-border-color);
Expand Down Expand Up @@ -3172,19 +3172,19 @@ textarea.form-control-lg {

.btn-dark {
--bs-btn-color: #fff;
--bs-btn-bg: #222;
--bs-btn-border-color: #222;
--bs-btn-bg: #333;
--bs-btn-border-color: #333;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #434343;
--bs-btn-hover-border-color: #383838;
--bs-btn-focus-shadow-rgb: 67, 67, 67;
--bs-btn-hover-bg: #525252;
--bs-btn-hover-border-color: #474747;
--bs-btn-focus-shadow-rgb: 82, 82, 82;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #4e4e4e;
--bs-btn-active-border-color: #383838;
--bs-btn-active-bg: #5c5c5c;
--bs-btn-active-border-color: #474747;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #222;
--bs-btn-disabled-border-color: #222;
--bs-btn-disabled-bg: #333;
--bs-btn-disabled-border-color: #333;
}

.btn-outline-primary {
Expand Down Expand Up @@ -3307,19 +3307,19 @@ textarea.form-control-lg {
}

.btn-outline-dark {
--bs-btn-color: #222;
--bs-btn-border-color: #222;
--bs-btn-color: #333;
--bs-btn-border-color: #333;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #222;
--bs-btn-hover-border-color: #222;
--bs-btn-focus-shadow-rgb: 34, 34, 34;
--bs-btn-hover-bg: #333;
--bs-btn-hover-border-color: #333;
--bs-btn-focus-shadow-rgb: 51, 51, 51;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #222;
--bs-btn-active-border-color: #222;
--bs-btn-active-bg: #333;
--bs-btn-active-border-color: #333;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #222;
--bs-btn-disabled-color: #333;
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: #222;
--bs-btn-disabled-border-color: #333;
--bs-gradient: none;
}

Expand Down Expand Up @@ -3819,7 +3819,7 @@ textarea.form-control-lg {
--bs-nav-link-font-weight: ;
--bs-nav-link-color: var(--bs-link-color);
--bs-nav-link-hover-color: var(--bs-link-hover-color);
--bs-nav-link-disabled-color: #ccc;
--bs-nav-link-disabled-color: var(--bs-secondary-color);
display: flex;
flex-wrap: wrap;
padding-left: 0;
Expand Down Expand Up @@ -3858,12 +3858,12 @@ textarea.form-control-lg {

.nav-tabs {
--bs-nav-tabs-border-width: var(--bs-border-width);
--bs-nav-tabs-border-color: rgba(0, 0, 0, 0.1);
--bs-nav-tabs-border-color: var(--bs-border-color);
--bs-nav-tabs-border-radius: var(--bs-border-radius);
--bs-nav-tabs-link-hover-border-color: rgba(0, 0, 0, 0.1);
--bs-nav-tabs-link-hover-border-color: var(--bs-secondary-bg) var(--bs-secondary-bg) var(--bs-border-color);
--bs-nav-tabs-link-active-color: var(--bs-emphasis-color);
--bs-nav-tabs-link-active-bg: var(--bs-body-bg);
--bs-nav-tabs-link-active-border-color: rgba(0, 0, 0, 0.1);
--bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);
border-bottom: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color);
}
.nav-tabs .nav-link {
Expand Down Expand Up @@ -4751,7 +4751,7 @@ textarea.form-control-lg {
--bs-pagination-color: #888;
--bs-pagination-bg: var(--bs-body-bg);
--bs-pagination-border-width: var(--bs-border-width);
--bs-pagination-border-color: rgba(0, 0, 0, 0.1);
--bs-pagination-border-color: var(--bs-border-color);
--bs-pagination-border-radius: var(--bs-border-radius);
--bs-pagination-hover-color: var(--bs-link-hover-color);
--bs-pagination-hover-bg: var(--bs-tertiary-bg);
Expand Down Expand Up @@ -4969,7 +4969,7 @@ textarea.form-control-lg {
.progress-stacked {
--bs-progress-height: 1rem;
--bs-progress-font-size: 0.75rem;
--bs-progress-bg: #ccc;
--bs-progress-bg: var(--bs-secondary-bg);
--bs-progress-border-radius: var(--bs-border-radius);
--bs-progress-box-shadow: var(--bs-box-shadow-inset);
--bs-progress-bar-color: #fff;
Expand Down Expand Up @@ -5036,7 +5036,7 @@ textarea.form-control-lg {
--bs-list-group-action-active-color: var(--bs-body-color);
--bs-list-group-action-active-bg: var(--bs-secondary-bg);
--bs-list-group-disabled-color: var(--bs-secondary-color);
--bs-list-group-disabled-bg: #eee;
--bs-list-group-disabled-bg: var(--bs-body-bg);
--bs-list-group-active-color: #fff;
--bs-list-group-active-bg: #008cba;
--bs-list-group-active-border-color: #008cba;
Expand Down Expand Up @@ -6900,7 +6900,7 @@ textarea.form-control-lg {

.text-bg-dark {
color: #fff !important;
background-color: RGBA(34, 34, 34, var(--bs-bg-opacity, 1)) !important;
background-color: RGBA(51, 51, 51, var(--bs-bg-opacity, 1)) !important;
}

.link-primary {
Expand Down Expand Up @@ -6986,9 +6986,9 @@ textarea.form-control-lg {
text-decoration-color: RGBA(var(--bs-dark-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-dark:hover, .link-dark:focus {
color: RGBA(27, 27, 27, var(--bs-link-opacity, 1)) !important;
-webkit-text-decoration-color: RGBA(27, 27, 27, var(--bs-link-underline-opacity, 1)) !important;
text-decoration-color: RGBA(27, 27, 27, var(--bs-link-underline-opacity, 1)) !important;
color: RGBA(41, 41, 41, var(--bs-link-opacity, 1)) !important;
-webkit-text-decoration-color: RGBA(41, 41, 41, var(--bs-link-underline-opacity, 1)) !important;
text-decoration-color: RGBA(41, 41, 41, var(--bs-link-underline-opacity, 1)) !important;
}

.link-body-emphasis {
Expand Down Expand Up @@ -12152,11 +12152,11 @@ textarea.form-control-lg {
border-color: #d6d6d6;
}
.btn-dark {
border-color: #1f1f1f;
border-color: #2e2e2e;
}

.btn-outline-secondary {
color: #000;
color: var(--bs-primary-color);
}

.btn-group .dropdown-menu {
Expand Down Expand Up @@ -12257,17 +12257,6 @@ label,
font-weight: 300;
}

.nav-tabs .nav-link,
.nav-tabs .nav-link.disabled,
.nav-tabs .nav-link.disabled:hover,
.nav-tabs .nav-link.disabled:focus {
background-color: #eee;
border-color: rgba(0, 0, 0, 0.1);
}
.nav-tabs .nav-item + .nav-item .nav-link {
border-left: none;
}

.nav-pills .active {
border: 1px solid #007ea7;
}
Expand Down Expand Up @@ -12309,28 +12298,21 @@ label,
font-weight: 300;
}

.list-group-item.disabled,
.list-group-item:disabled {
background-color: var(--bs-secondary-bg);
}

.alert {
font-size: 0.875rem;
font-weight: 300;
color: #fff;
}
.alert .alert-link {
color: #fff;
text-decoration: underline;
}
.alert:not(.alert-secondary):not(.alert-light) .btn-close {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}
.alert-secondary,
.alert-secondary a:not(.btn),
.alert-secondary .alert-link, .alert-light,
.alert-light a:not(.btn),
.alert-light .alert-link {
color: #222;
}

.badge.bg-secondary, .badge.bg-light {
color: #222;
color: #333;
}

.progress[value] {
Expand Down
2 changes: 1 addition & 1 deletion dist/yeti/bootstrap.min.css
View file

Large diffs are not rendered by default.

0 comments on commit 6cc2090

Please sign in to comment.