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

30
resources/css/app.scss
View File

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

6
resources/css/editor.scss
View File

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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
@use "variables/fonts"; @forward "variables/fonts";
@use "variables/colours"; @forward "variables/colours";
@use "variables/breakpoints"; @forward "variables/breakpoints";
@use "variables/spacing"; @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} { .min-#{$label} {
@media (min-width: $value) { @media (min-width: $value) {
display: none; display: none;

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

@@ -1,13 +1,12 @@
@use "../mixins/generate-button-classes"; @use "../mixins";
@use "../mixins/generate-colour-classes"; @use "../variables";
@use "../variables/colours";
::selection { ::selection {
color: colours.$white; color: variables.$white;
background: colours.$primary; background: variables.$primary;
} }
@each $color, $hex in colours.$colors { @each $color, $hex in variables.$colors {
@include generate-colour-classes.generate_colour_classes($color, $hex); @include mixins.generate_colour_classes($color, $hex);
@include generate-button-classes.generate_button_colors($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; box-sizing: border-box;
@@ -13,7 +13,7 @@ body,
html { html {
margin: 0; margin: 0;
padding: 0; padding: 0;
background: colours.$white; background: variables.$white;
} }
.visually-hidden { .visually-hidden {

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

@@ -1,26 +1,25 @@
@use "../variables/colours"; @use "../variables";
@use "../variables/spacing";
.brand { .brand {
display: block; display: block;
width: spacing.$brandWidth; width: variables.$brandWidth;
height: spacing.$brandHeight; height: variables.$brandHeight;
svg, svg,
img { img {
display: block; display: block;
width: spacing.$brandWidth; width: variables.$brandWidth;
height: spacing.$brandHeight; height: variables.$brandHeight;
} }
.knockout & { .knockout & {
@media screen { @media screen {
.fill-primary { .fill-primary {
fill: colours.$white; fill: variables.$white;
} }
.fill-grey { .fill-grey {
fill: rgba(colours.$white, 0.8); fill: rgba(variables.$white, 0.8);
} }
} }
} }
@@ -32,32 +31,32 @@ figure {
} }
.container { .container {
width: calc(100% - spacing.$innerMedium * 2); width: calc(100% - variables.$innerMedium * 2);
margin: auto; margin: auto;
&-full { width: auto; } &-full { width: auto; }
&-large { max-width: spacing.$containerLarge; } &-large { max-width: variables.$containerLarge; }
&-medium { max-width: spacing.$containerMedium; } &-medium { max-width: variables.$containerMedium; }
&-small { max-width: spacing.$containerSmall; } &-small { max-width: variables.$containerSmall; }
&-narrow { max-width: spacing.$containerNarrow; } &-narrow { max-width: variables.$containerNarrow; }
} }
.section { .section {
padding: spacing.$sectionMedium 0; padding: variables.$sectionMedium 0;
&-small { padding: spacing.$sectionSmall 0; } &-small { padding: variables.$sectionSmall 0; }
&-medium { padding: spacing.$sectionMedium 0; } &-medium { padding: variables.$sectionMedium 0; }
&-large { padding: spacing.$sectionLarge 0; } &-large { padding: variables.$sectionLarge 0; }
&-zero-top { padding-top: 0; } &-zero-top { padding-top: 0; }
&-zero-bottom { padding-bottom: 0; } &-zero-bottom { padding-bottom: 0; }
} }
.inner { .inner {
padding: spacing.$innerMedium; padding: variables.$innerMedium;
&-small { padding: spacing.$innerSmall; } &-small { padding: variables.$innerSmall; }
&-large { padding: spacing.$innerLarge; } &-large { padding: variables.$innerLarge; }
&-zero-x { &-zero-x {
padding-left: 0; padding-left: 0;
@@ -71,7 +70,7 @@ figure {
} }
.rounded { .rounded {
border-radius: spacing.$borderRadius; border-radius: variables.$borderRadius;
&-top { &-top {
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
@@ -86,12 +85,12 @@ figure {
.border { .border {
border-style: solid; border-style: solid;
border-width: spacing.$borderWidth; border-width: variables.$borderWidth;
&-thin { border-width: 0.0625em; } &-thin { border-width: 0.0625em; }
&-regular { border-width: spacing.$borderWidth; } &-regular { border-width: variables.$borderWidth; }
&-thick { border-width: spacing.$borderThick; } &-thick { border-width: variables.$borderThick; }
&-thicker { border-width: spacing.$borderThicker; } &-thicker { border-width: variables.$borderThicker; }
&-top { &-top {
border-right-width: 0; 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"; @use "sass:color";
@@ -12,13 +12,13 @@
@each $button in $buttons { @each $button in $buttons {
#{$button}.#{$name} { #{$button}.#{$name} {
color: colours.$white; color: variables.$white;
background: $hex; background: $hex;
border-color: $hex; border-color: $hex;
&:hover, &:hover,
&:focus { &:focus {
color: colours.$white; color: variables.$white;
background: color.adjust($hex, $lightness: 10%); background: color.adjust($hex, $lightness: 10%);
border-color: 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 "text-contrast";
@use "../variables/colours"; @use "../variables";
@use "sass:color"; @use "sass:color";
@@ -24,11 +24,11 @@
@include text-contrast.text_contrast(color.invert($hex)); @include text-contrast.text_contrast(color.invert($hex));
background: color.invert($hex); background: color.invert($hex);
@if($name == "white") { @if($name == "white") {
color: colours.$white; color: variables.$white;
background: colours.$primary; background: variables.$primary;
} @else if($name == "black") { } @else if($name == "black") {
color: colours.$white; color: variables.$white;
background: colours.$primary-lighter; background: variables.$primary-lighter;
} @else { } @else {
@include text-contrast.text_contrast(color.invert($hex)); @include text-contrast.text_contrast(color.invert($hex));
background: 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:color";
@use "sass:math"; @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)); $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)) { @if math.abs($brightness) < (math.div($light-color, $cutoff)) {
color: $light; 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 { .wpcf7 .screen-reader-response {
display: none; display: none;
@@ -11,11 +11,11 @@
padding: 1em 0 0; padding: 1em 0 0;
margin-top: 2em; margin-top: 2em;
border: 1px solid colours.$grey-light; border: 1px solid variables.$grey-light;
border-width: 1px 0 0; border-width: 1px 0 0;
.knockout & { .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 { #mce-responses {
.response { .response {
padding: 0 0 1em; padding: 0 0 1em;
margin: 0 0 1em; margin: 0 0 1em;
font-size: 0.875em; font-size: 0.875em;
border-bottom: 1px solid colours.$grey-lighter; border-bottom: 1px solid variables.$grey-lighter;
} }
} }
.knockout #mce-responses .response { .knockout #mce-responses .response {
border-bottom-color: rgba(colours.$white, 0.3); border-bottom-color: rgba(variables.$white, 0.3);
} }