steve/just-the-docs
1
0
Fork 0
mirror of https://github.com/snachodog/just-the-docs.git synced 2025-04-18 00:52:24 -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 // Buttons and things that look like buttons
// stylelint-disable color-named // stylelint-disable color-named
@use "sass:color";
.btn { .btn {
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
@ -35,7 +37,7 @@
&:hover, &:hover,
&.zeroclipboard-is-hover { &.zeroclipboard-is-hover {
color: darken($link-color, 2%); color: color.adjust($link-color, $lightness: -2%);
} }
&:hover, &:hover,
@ -43,19 +45,19 @@
&.zeroclipboard-is-hover, &.zeroclipboard-is-hover,
&.zeroclipboard-is-active { &.zeroclipboard-is-active {
text-decoration: none; text-decoration: none;
background-color: darken($base-button-color, 1%); background-color: color.adjust($base-button-color, $lightness: -1%);
} }
&:active, &:active,
&.selected, &.selected,
&.zeroclipboard-is-active { &.zeroclipboard-is-active {
background-color: darken($base-button-color, 3%); background-color: color.adjust($base-button-color, $lightness: -3%);
background-image: none; background-image: none;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
} }
&.selected:hover { &.selected:hover {
background-color: darken(#dcdcdc, 5%); background-color: color.adjust(#dcdcdc, $lightness: -5%);
} }
&:disabled, &:disabled,
@ -80,7 +82,7 @@
&:active, &:active,
&.zeroclipboard-is-hover, &.zeroclipboard-is-hover,
&.zeroclipboard-is-active { &.zeroclipboard-is-active {
color: darken($link-color, 4%); color: color.adjust($link-color, $lightness: -4%);
text-decoration: none; text-decoration: none;
background-color: transparent; background-color: transparent;
box-shadow: inset 0 0 0 3px $grey-lt-300; 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; $color-scheme: dark;
$body-background-color: $grey-dk-300; $body-background-color: $grey-dk-300;
$body-heading-color: $grey-lt-000; $body-heading-color: $grey-lt-000;
@ -9,7 +11,7 @@ $base-button-color: $grey-dk-250;
$btn-primary-color: $blue-200; $btn-primary-color: $blue-200;
$code-background-color: #31343f; // OneDarkJekyll default for syntax-one-dark-vivid $code-background-color: #31343f; // OneDarkJekyll default for syntax-one-dark-vivid
$code-linenumber-color: #dee2f7; // OneDarkJekyll .nf 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; $table-background-color: $grey-dk-250;
$search-background-color: $grey-dk-250; $search-background-color: $grey-dk-250;
$search-result-preview-color: $grey-dk-000; $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; $color-scheme: light !default;
$body-background-color: $white !default; $body-background-color: $white !default;
$body-heading-color: $grey-dk-300 !default; $body-heading-color: $grey-dk-300 !default;
@ -8,7 +10,7 @@ $sidebar-color: $grey-lt-000 !default;
$base-button-color: #f7f7f7 !default; $base-button-color: #f7f7f7 !default;
$btn-primary-color: $purple-100 !default; $btn-primary-color: $purple-100 !default;
$code-background-color: $grey-lt-000 !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; $table-background-color: $white !default;
$search-background-color: $white !default; $search-background-color: $white !default;
$search-result-preview-color: $grey-dk-000 !default; $search-result-preview-color: $grey-dk-000 !default;

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

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