framework/sage
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

scss: replace @use with @forward

Browse Source
This commit is contained in:
Steve Ross
2026-02-11 20:46:12 +00:00
parent 83502a2798
commit 9dcc4045ab
15 changed files with 98 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
resources/css/global/mixins/_generate-button-classes.scss
View File

@@ -1,4 +1,4 @@
@use "../variables/colours";
@use "../variables";
@use "sass:color";
@@ -12,13 +12,13 @@
@each $button in $buttons {
#{$button}.#{$name} {
color: colours.$white;
color: variables.$white;
background: $hex;
border-color: $hex;
&:hover,
&:focus {
color: colours.$white;
color: variables.$white;
background: color.adjust($hex, $lightness: 10%);
border-color: color.adjust($hex, $lightness: 10%);
}

10
resources/css/global/mixins/_generate-colour-classes.scss
View File

@@ -1,5 +1,5 @@
@use "text-contrast";
@use "../variables/colours";
@use "../variables";
@use "sass:color";
@@ -24,11 +24,11 @@
@include text-contrast.text_contrast(color.invert($hex));
background: color.invert($hex);
@if($name == "white") {
color: colours.$white;
background: colours.$primary;
color: variables.$white;
background: variables.$primary;
} @else if($name == "black") {
color: colours.$white;
background: colours.$primary-lighter;
color: variables.$white;
background: variables.$primary-lighter;
} @else {
@include text-contrast.text_contrast(color.invert($hex));
background: color.invert($hex);

8
resources/css/global/mixins/_text-contrast.scss
View File

@@ -1,11 +1,11 @@
@use "../variables/colours";
@use "sass:color";
@use "sass:math";
@mixin text-contrast($n, $dark: colours.$black, $light: colours.$white, $cutoff: 1.667) {
@use "../variables";
@mixin text-contrast($n, $dark: variables.$black, $light: variables.$white, $cutoff: 1.667) {
$brightness: math.round((color.channel($n, "red") * 299) + (color.channel($n, "green") * 587) + math.div((color.channel($n, "blue") * 114), 1000));
$light-color: math.round((color.channel(colours.$white, "red") * 299) + (color.channel(colours.$white, "green") * 587) + math.div((color.channel(colours.$white, "blue") * 114), 1000));
$light-color: math.round((color.channel(variables.$white, "red") * 299) + (color.channel(variables.$white, "green") * 587) + math.div((color.channel(variables.$white, "blue") * 114), 1000));
@if math.abs($brightness) < (math.div($light-color, $cutoff)) {
color: $light;