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

replace deprecated scss

Browse Source
This commit is contained in:
Steve Ross
2025-10-30 22:01:23 +00:00
parent 010160ce46
commit b258482ca3
17 changed files with 156 additions and 123 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,3 +1,5 @@
@use "../variables/colours";
@use "sass:color";
@mixin generate_button_colors($name, $hex) {
@@ -10,13 +12,13 @@
@each $button in $buttons {
#{$button}.#{$name} {
color: $white;
color: colours.$white;
background: $hex;
border-color: $hex;
&:hover,
&:focus {
color: $white;
color: colours.$white;
background: color.adjust($hex, $lightness: 10%);
border-color: color.adjust($hex, $lightness: 10%);
}

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

@@ -1,3 +1,5 @@
@use "text-contrast";
@use "sass:color";
@mixin generate_colour_classes($name, $hex) {
@@ -18,7 +20,7 @@
background-color: $hex;
::selection {
@include text_contrast(color.invert($hex));
@include text-contrast.text_contrast(color.invert($hex));
background: color.invert($hex);
}
}

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

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