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 690d16f878
commit 9f88ed4106
15 changed files with 98 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
resources/css/app.scss
View File

@@ -1,25 +1,25 @@
// Global Variables, Mixins, and Framework
@use "global/variables";
@use "global/mixins";
@use "global/fonts";
@use "global/typography";
@use "global/framework";
@forward "global/variables";
@forward "global/mixins";
@forward "global/fonts";
@forward "global/typography";
@forward "global/framework";
// Third Party Plugins
@use "plugins/contact-form-7";
@use "plugins/mce";
@forward "plugins/contact-form-7";
@forward "plugins/mce";
// Components
@use "components/block";
@use "components/forms";
@use "components/button";
@use "components/card";
@use "components/BadEggLightbox";
@forward "components/block";
@forward "components/forms";
@forward "components/button";
@forward "components/card";
@forward "components/BadEggLightbox";
// Sections
@use "../views/sections/header/header";
@use "../views/sections/footer/footer";
@forward "../views/sections/header/header";
@forward "../views/sections/footer/footer";
// Page Styles
@use "views/page";
@forward "views/page";

6
resources/css/editor.scss
View File

@@ -1,5 +1,5 @@
@use "app";
@use "global/variables/colours";
@use "global/variables";
html :where(.wp-block) {
max-width: none;
@@ -8,7 +8,7 @@ html :where(.wp-block) {
.block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable=true]) {
&:hover:after {
content: '';
outline: 2px solid colours.$wpblue;
outline: 2px solid variables.$wpblue;
position: absolute;
inset: 0;
}
@@ -36,7 +36,7 @@ html :where(.wp-block) {
}
.editor-styles-wrapper {
background: colours.$grey-lightest;
background: variables.$grey-lightest;
.block-list-appender {
width: 350px;

8
resources/css/global/_framework.scss
View File

@@ -1,4 +1,4 @@
@use "framework/breakpoints";
@use "framework/normalise";
@use "framework/colours";
@use "framework/spacing";
@forward "framework/breakpoints";
@forward "framework/normalise";
@forward "framework/colours";
@forward "framework/spacing";

8
resources/css/global/_mixins.scss
View File

@@ -1,4 +1,4 @@
@use "mixins/linear-gradient";
@use "mixins/text-contrast";
@use "mixins/generate-colour-classes";
@use "mixins/generate-button-classes";
@forward "mixins/linear-gradient";
@forward "mixins/text-contrast";
@forward "mixins/generate-colour-classes";
@forward "mixins/generate-button-classes";

33
resources/css/global/_typography.scss
View File

@@ -1,7 +1,4 @@
@use "variables/fonts";
@use "variables/breakpoints";
@use "variables/colours";
@use "variables/spacing";
@use "variables";
.wysiwyg {
> *:first-child {
@@ -19,9 +16,9 @@ h3,
h4,
h5,
h6 {
color: colours.$primary;
color: variables.$primary;
font-weight: 700;
font-family: fonts.$font;
font-family: variables.$font;
line-height: 1.1em;
margin: 1.5em 0 0.25em;
padding: 0;
@@ -32,7 +29,7 @@ h6 {
@media screen {
.knockout & {
color: colours.$white;
color: variables.$white;
}
}
}
@@ -48,7 +45,7 @@ h3 { font-size: 1.25em; }
h4,
h5 { font-size: 1.15em; }
@media (min-width: breakpoints.$screen-sm) {
@media (min-width: variables.$screen-sm) {
h1 { font-size: 2.5em; }
h2 { font-size: 2em; }
h3 { font-size: 1.5em; }
@@ -63,8 +60,8 @@ p,
li,
td,
label {
color: colours.$grey-darker;
font-family: fonts.$font;
color: variables.$grey-darker;
font-family: variables.$font;
font-weight: 400;
line-height: 1.5em;
margin: 0 0 0.8em;
@@ -72,30 +69,30 @@ label {
@media screen {
.knockout & {
color: colours.$white;
color: variables.$white;
}
}
}
a {
color: colours.$primary;
color: variables.$primary;
text-decoration: none;
outline: none;
transition: all 300ms ease;
&:hover,
&:focus {
color: colours.$primary-dark;
color: variables.$primary-dark;
text-decoration: none;
}
@media screen {
.knockout & {
color: colours.$white;
color: variables.$white;
&:hover,
&:focus {
color: colours.$primary-light;
color: variables.$primary-light;
}
}
}
@@ -131,12 +128,12 @@ ol {
hr {
margin: 2em auto;
height: 0;
border: 0 solid colours.$grey-light;
border-width: spacing.$borderThin 0 0;
border: 0 solid variables.$grey-light;
border-width: variables.$borderThin 0 0;
@media screen {
.knockout & {
border-color: colours.$white;
border-color: variables.$white;
}
}
}

8
resources/css/global/_variables.scss
View File

@@ -1,4 +1,4 @@
@use "variables/fonts";
@use "variables/colours";
@use "variables/breakpoints";
@use "variables/spacing";
@forward "variables/fonts";
@forward "variables/colours";
@forward "variables/breakpoints";
@forward "variables/spacing";

4
resources/css/global/framework/_breakpoints.scss
View File

@@ -1,6 +1,6 @@
@use "../variables/breakpoints";
@use "../variables";
@each $label, $value in breakpoints.$breakpoints {
@each $label, $value in variables.$breakpoints {
.min-#{$label} {
@media (min-width: $value) {
display: none;

15
resources/css/global/framework/_colours.scss
View File

@@ -1,13 +1,12 @@
@use "../mixins/generate-button-classes";
@use "../mixins/generate-colour-classes";
@use "../variables/colours";
@use "../mixins";
@use "../variables";
::selection {
color: colours.$white;
background: colours.$primary;
color: variables.$white;
background: variables.$primary;
}
@each $color, $hex in colours.$colors {
@include generate-colour-classes.generate_colour_classes($color, $hex);
@include generate-button-classes.generate_button_colors($color, $hex);
@each $color, $hex in variables.$colors {
@include mixins.generate_colour_classes($color, $hex);
@include mixins.generate_button_colors($color, $hex);
}

4
resources/css/global/framework/_normalise.scss
View File

@@ -1,4 +1,4 @@
@use "../variables/colours";
@use "../variables";
* {
box-sizing: border-box;
@@ -13,7 +13,7 @@ body,
html {
margin: 0;
padding: 0;
background: colours.$white;
background: variables.$white;
}
.visually-hidden {

49
resources/css/global/framework/_spacing.scss
View File

@@ -1,26 +1,25 @@
@use "../variables/colours";
@use "../variables/spacing";
@use "../variables";
.brand {
display: block;
width: spacing.$brandWidth;
height: spacing.$brandHeight;
width: variables.$brandWidth;
height: variables.$brandHeight;
svg,
img {
display: block;
width: spacing.$brandWidth;
height: spacing.$brandHeight;
width: variables.$brandWidth;
height: variables.$brandHeight;
}
.knockout & {
@media screen {
.fill-primary {
fill: colours.$white;
fill: variables.$white;
}
.fill-grey {
fill: rgba(colours.$white, 0.8);
fill: rgba(variables.$white, 0.8);
}
}
}
@@ -32,32 +31,32 @@ figure {
}
.container {
width: calc(100% - spacing.$innerMedium * 2);
width: calc(100% - variables.$innerMedium * 2);
margin: auto;
&-full { width: auto; }
&-large { max-width: spacing.$containerLarge; }
&-medium { max-width: spacing.$containerMedium; }
&-small { max-width: spacing.$containerSmall; }
&-narrow { max-width: spacing.$containerNarrow; }
&-large { max-width: variables.$containerLarge; }
&-medium { max-width: variables.$containerMedium; }
&-small { max-width: variables.$containerSmall; }
&-narrow { max-width: variables.$containerNarrow; }
}
.section {
padding: spacing.$sectionMedium 0;
padding: variables.$sectionMedium 0;
&-small { padding: spacing.$sectionSmall 0; }
&-medium { padding: spacing.$sectionMedium 0; }
&-large { padding: spacing.$sectionLarge 0; }
&-small { padding: variables.$sectionSmall 0; }
&-medium { padding: variables.$sectionMedium 0; }
&-large { padding: variables.$sectionLarge 0; }
&-zero-top { padding-top: 0; }
&-zero-bottom { padding-bottom: 0; }
}
.inner {
padding: spacing.$innerMedium;
padding: variables.$innerMedium;
&-small { padding: spacing.$innerSmall; }
&-large { padding: spacing.$innerLarge; }
&-small { padding: variables.$innerSmall; }
&-large { padding: variables.$innerLarge; }
&-zero-x {
padding-left: 0;
@@ -71,7 +70,7 @@ figure {
}
.rounded {
border-radius: spacing.$borderRadius;
border-radius: variables.$borderRadius;
&-top {
border-bottom-right-radius: 0;
@@ -86,12 +85,12 @@ figure {
.border {
border-style: solid;
border-width: spacing.$borderWidth;
border-width: variables.$borderWidth;
&-thin { border-width: 0.0625em; }
&-regular { border-width: spacing.$borderWidth; }
&-thick { border-width: spacing.$borderThick; }
&-thicker { border-width: spacing.$borderThicker; }
&-regular { border-width: variables.$borderWidth; }
&-thick { border-width: variables.$borderThick; }
&-thicker { border-width: variables.$borderThicker; }
&-top {
border-right-width: 0;

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;

6
resources/css/plugins/_contact-form-7.scss
View File

@@ -1,4 +1,4 @@
@use "../global/variables/colours";
@use "../global/variables";
.wpcf7 .screen-reader-response {
display: none;
@@ -11,11 +11,11 @@
padding: 1em 0 0;
margin-top: 2em;
border: 1px solid colours.$grey-light;
border: 1px solid variables.$grey-light;
border-width: 1px 0 0;
.knockout & {
border-color: rgba(colours.$white, 0.3);
border-color: rgba(variables.$white, 0.3);
}
}

6
resources/css/plugins/_mce.scss
View File

@@ -1,14 +1,14 @@
@use "../global/variables/colours";
@use "../global/variables";
#mce-responses {
.response {
padding: 0 0 1em;
margin: 0 0 1em;
font-size: 0.875em;
border-bottom: 1px solid colours.$grey-lighter;
border-bottom: 1px solid variables.$grey-lighter;
}
}
.knockout #mce-responses .response {
border-bottom-color: rgba(colours.$white, 0.3);
border-bottom-color: rgba(variables.$white, 0.3);
}