steve/just-the-docs
1
0
Fork 0
mirror of https://github.com/snachodog/just-the-docs.git synced 2025-04-09 21:41:23 -06:00
Code Issues Packages Projects Releases Wiki Activity

Replace sass lighten() and darken() with color.adjust()

Browse Source
This commit is contained in:
Matt Wang 2024-10-09 01:02:50 -07:00
parent a0724c4370
commit ef215b6586
No known key found for this signature in database
GPG Key ID: 89C91B3EFBFC0C05
4 changed files with 21 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
_sass/buttons.scss
View File

@ -1,6 +1,8 @@
// Buttons and things that look like buttons
// stylelint-disable color-named
@use "sass:color";
.btn {
display: inline-block;
box-sizing: border-box;
@ -35,7 +37,7 @@
&:hover,
&.zeroclipboard-is-hover {
color: darken($link-color, 2%);
color: color.adjust($link-color, $lightness: -2%);
}
&:hover,
@ -43,19 +45,19 @@
&.zeroclipboard-is-hover,
&.zeroclipboard-is-active {
text-decoration: none;
background-color: darken($base-button-color, 1%);
background-color: color.adjust($base-button-color, $lightness: -1%);
}
&:active,
&.selected,
&.zeroclipboard-is-active {
background-color: darken($base-button-color, 3%);
background-color: color.adjust($base-button-color, $lightness: -3%);
background-image: none;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}
&.selected:hover {
background-color: darken(#dcdcdc, 5%);
background-color: color.adjust(#dcdcdc, $lightness: -5%);
}
&:disabled,
@ -80,7 +82,7 @@
&:active,
&.zeroclipboard-is-hover,
&.zeroclipboard-is-active {
color: darken($link-color, 4%);
color: color.adjust($link-color, $lightness: -4%);
text-decoration: none;
background-color: transparent;
box-shadow: inset 0 0 0 3px $grey-lt-300;

4
_sass/color_schemes/dark.scss
View File

@ -1,3 +1,5 @@
@use "sass:color";
$color-scheme: dark;
$body-background-color: $grey-dk-300;
$body-heading-color: $grey-lt-000;
@ -9,7 +11,7 @@ $base-button-color: $grey-dk-250;
$btn-primary-color: $blue-200;
$code-background-color: #31343f; // OneDarkJekyll default for syntax-one-dark-vivid
$code-linenumber-color: #dee2f7; // OneDarkJekyll .nf for syntax-one-dark-vivid
$feedback-color: darken($sidebar-color, 3%);
$feedback-color: color.adjust($sidebar-color, $lightness: -3%);
$table-background-color: $grey-dk-250;
$search-background-color: $grey-dk-250;
$search-result-preview-color: $grey-dk-000;

4
_sass/color_schemes/light.scss
View File

@ -1,3 +1,5 @@
@use "sass:color";
$color-scheme: light !default;
$body-background-color: $white !default;
$body-heading-color: $grey-dk-300 !default;
@ -8,7 +10,7 @@ $sidebar-color: $grey-lt-000 !default;
$base-button-color: #f7f7f7 !default;
$btn-primary-color: $purple-100 !default;
$code-background-color: $grey-lt-000 !default;
$feedback-color: darken($sidebar-color, 3%) !default;
$feedback-color: color.adjust($sidebar-color, $lightness: -3%) !default;
$table-background-color: $white !default;
$search-background-color: $white !default;
$search-result-preview-color: $grey-dk-000 !default;

14
_sass/support/mixins/_buttons.scss
View File

@ -1,9 +1,11 @@
// Colored button
@use "sass:color";
@mixin btn-color($fg, $bg) {
color: $fg;
background-color: darken($bg, 2%);
background-image: linear-gradient(lighten($bg, 5%), darken($bg, 2%));
background-color: color.adjust($bg, $lightness: -2%);
background-image: linear-gradient(color.adjust($bg, $lightness: 5%), color.adjust($bg, $lightness: -2%));
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.25),
0 4px 10px rgba(0, 0, 0, 0.12);
@ -11,19 +13,19 @@
&:hover,
&.zeroclipboard-is-hover {
color: $fg;
background-color: darken($bg, 4%);
background-image: linear-gradient((lighten($bg, 2%), darken($bg, 4%)));
background-color: color.adjust($bg, $lightness: -4%);
background-image: linear-gradient((color.adjust($bg, $lightness: 2%), color.adjust($bg, $lightness: -4%)));
}
&:active,
&.selected,
&.zeroclipboard-is-active {
background-color: darken($bg, 5%);
background-color: color.adjust($bg, $lightness: -5%);
background-image: none;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}
&.selected:hover {
background-color: darken($bg, 10%);
background-color: color.adjust($bg, $lightness: -10%);
}
}