diff --git a/_sass/minima.scss b/_sass/minima.scss index 69aaeec..fab7b37 100644 --- a/_sass/minima.scss +++ b/_sass/minima.scss @@ -1,4 +1,5 @@ @charset "utf-8"; +@use "sass:color"; // Define defaults for each variable. @@ -15,8 +16,8 @@ $background-color: #fdfdfd !default; $brand-color: #2a7ae2 !default; $grey-color: #828282 !default; -$grey-color-light: lighten($grey-color, 40%) !default; -$grey-color-dark: darken($grey-color, 25%) !default; +$grey-color-light: color.adjust($grey-color, $lightness: 40%) !default; +$grey-color-dark: color.adjust($grey-color, $lightness: -25%) !default; $table-text-align: left !default; diff --git a/_sass/minima/_base.scss b/_sass/minima/_base.scss index fd2a0af..4cd7c57 100644 --- a/_sass/minima/_base.scss +++ b/_sass/minima/_base.scss @@ -1,3 +1,5 @@ +@use "sass:color"; + /** * Reset some basic elements */ @@ -107,7 +109,7 @@ a { text-decoration: none; &:visited { - color: darken($brand-color, 15%); + color: color.adjust($brand-color, $lightness: -15%); } &:hover { @@ -232,21 +234,21 @@ table { margin-bottom: $spacing-unit; width: 100%; text-align: $table-text-align; - color: lighten($text-color, 18%); + color: color.adjust($text-color, $lightness: 18%); border-collapse: collapse; border: 1px solid $grey-color-light; tr { &:nth-child(even) { - background-color: lighten($grey-color-light, 6%); + background-color: color.adjust($grey-color-light, $lightness: 6%); } } th, td { padding: ($spacing-unit * 0.3333333333) ($spacing-unit * 0.5); } th { - background-color: lighten($grey-color-light, 3%); - border: 1px solid darken($grey-color-light, 4%); - border-bottom-color: darken($grey-color-light, 12%); + background-color: color.adjust($grey-color-light, $lightness: 3%); + border: 1px solid color.adjust($grey-color-light, $lightness: -4%); + border-bottom-color: color.adjust($grey-color-light, $lightness: -12%); } td { border: 1px solid $grey-color-light;