Skip to content

Commit b54a7a1

Browse files
Replace deprecated functions
darken() and lighten() are global functions and as such are deprecated. Replace them with `color.adjust()` which can change the lightness in the same manner. I'm following this PR. jekyll/minima#849
1 parent 29d2b9f commit b54a7a1

2 files changed

Lines changed: 11 additions & 8 deletions

File tree

_sass/minima/_base.scss

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@charset "utf-8";
22

3+
@use "sass:color";
34
@use "common" as *;
45

56
/**
@@ -112,7 +113,7 @@ a {
112113
text-decoration: none;
113114

114115
&:visited {
115-
color: darken($brand-color, 15%);
116+
color: color.adjust($brand-color, $lightness: -15%);
116117
}
117118

118119
&:hover {
@@ -238,21 +239,21 @@ table {
238239
margin-bottom: $spacing-unit;
239240
width: 100%;
240241
text-align: $table-text-align;
241-
color: lighten($text-color, 18%);
242+
color: color.adjust($text-color, $lightness: 18%);
242243
border-collapse: collapse;
243244
border: 1px solid $grey-color-light;
244245
tr {
245246
&:nth-child(even) {
246-
background-color: lighten($grey-color-light, 6%);
247+
background-color: color.adjust($grey-color-light, $lightness: 6%);
247248
}
248249
}
249250
th, td {
250251
padding: calc($spacing-unit / 3) calc($spacing-unit / 2);
251252
}
252253
th {
253-
background-color: lighten($grey-color-light, 3%);
254-
border: 1px solid darken($grey-color-light, 4%);
255-
border-bottom-color: darken($grey-color-light, 12%);
254+
background-color: color.adjust($grey-color-light, $lightness: 3%);
255+
border: 1px solid color.adjust($grey-color-light, $lightness: -4%);
256+
border-bottom-color: color.adjust($grey-color-light, $lightness: -12%);
256257
}
257258
td {
258259
border: 1px solid $grey-color-light;

_sass/minima/_common.scss

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
@charset "utf-8";
22

3+
@use "sass:color";
4+
35
// Define defaults for each variable.
46
$base-font-family: -apple-system,
57
BlinkMacSystemFont,
@@ -20,8 +22,8 @@ $text-color : #111 !default;
2022
$background-color: #fdfdfd !default;
2123
$brand-color : #2a7ae2 !default;
2224
$grey-color : #828282 !default;
23-
$grey-color-light: lighten($grey-color, 40%) !default;
24-
$grey-color-dark : darken($grey-color, 25%) !default;
25+
$grey-color-light: color.adjust($grey-color, $lightness: 40%) !default;
26+
$grey-color-dark : color.adjust($grey-color, $lightness: -25%) !default;
2527
$orange-color : #f66a0a !default;
2628
$table-text-align: left !default;
2729
// Width of the content area

0 commit comments

Comments
 (0)