Migrate CSS to new syntax to avoid deprecation warnings.

codesnippetspro · Dec 6, 2024 · b83539a · b83539a
1 parent 3df9710
commit b83539a
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 45 deletions.
diff --git a/src/css/common/_base.scss → src/css/common/_theme.scss b/src/css/common/_base.scss → src/css/common/_theme.scss
@@ -1,3 +1,12 @@
+@use 'sass:color';
+
+$primary: #03c7d2;
+$secondary: #d46f4d;
+$outline: #9e9e9e;
+
+$core: #0073aa;
+$pro: #ce0000;
+
 $php-active: #0073aa;
 $php-inactive: #579;
 $php-background: #78c8e6;
@@ -16,13 +25,6 @@ $js-active: #d44500;
 $js-background: #cd6600;
 $js-highlight: #cd6600;
 
-$theme-primary: #03c7d2;
-$theme-secondary: #d46f4d;
-$theme-outline: #9e9e9e;
-
-$theme-core: #0073aa;
-$theme-pro: #ce0000;
-
 $brand-discord: #5865f2;
 $brand-facebook: #3b5998;
 
@@ -31,7 +33,7 @@ $brand-facebook: #3b5998;
 		color: $color;
 
 		&:hover, &:active, &:focus {
-			color: lighten($color, $lightness);
+			color: color.adjust($color, $lightness: $lightness);
 		}
 	}
 }
diff --git a/src/css/common/_type-badges.scss b/src/css/common/_type-badges.scss
@@ -1,4 +1,4 @@
-@import 'base';
+@use 'theme';
 
 .nav-tab .badge, .snippet-type-badge, .go-pro-button .badge {
 	font-size: 10px;
@@ -19,7 +19,7 @@ h1 .snippet-type-badge, h2 .snippet-type-badge, h3 .snippet-type-badge {
 	vertical-align: middle;
 }
 
-$badges: (php: $php-active, css: $css-highlight, js: $js-highlight, html: $html-active);
+$badges: (php: theme.$php-active, css: theme.$css-highlight, js: theme.$js-highlight, html: theme.$html-active);
 
 @each $type, $color in $badges {
 	.nav-tab[data-snippet-type=#{$type}] .badge, .snippet-type-badge[data-snippet-type=#{$type}] {
@@ -62,16 +62,16 @@ $badges: (php: $php-active, css: $css-highlight, js: $js-highlight, html: $html-
 }
 
 .go-pro-badge, .pro-badge {
-	color: $theme-pro;
+	color: theme.$pro;
 }
 
 .core-badge {
-	color: $theme-core;
+	color: theme.$core;
 }
 
 .go-pro-button .badge, .go-pro-badge {
-	color: $theme-pro;
-	border-color: $theme-pro;
+	color: theme.$pro;
+	border-color: theme.$pro;
 	margin-left: 1px;
 }
 

diff --git a/src/css/edit.scss b/src/css/edit.scss
@@ -1,6 +1,7 @@
+@use 'sass:meta';
 @import '~@jcubic/tagger/tagger.css';
-@import 'common/editor';
-@import 'common/type-badges';
+@include meta.load-css('common/editor');
+@include meta.load-css('common/type-badges');
 
 /**
  * Custom styling for the single snippet admin page
@@ -149,8 +150,8 @@ p.snippet-scope, .snippet-scope p {
 	scroll-margin: 0.75em;
 }
 
-@import 'edit/tooltips';
-@import 'edit/types';
-@import 'edit/tags';
-@import 'edit/upgrade-dialog';
-@import 'edit/gpt';
+@include meta.load-css('edit/tooltips');
+@include meta.load-css('edit/types');
+@include meta.load-css('edit/tags');
+@include meta.load-css('edit/upgrade-dialog');
+@include meta.load-css('edit/gpt');
diff --git a/src/css/manage.scss b/src/css/manage.scss
@@ -5,8 +5,9 @@
 $active-color: #2196f3;
 $inactive-color: #ccc;
 
-@import 'common/type-badges';
-@import 'manage/cloud';
+@use 'common/theme';
+@use 'common/type-badges';
+@use 'manage/cloud';
 
 .column-name,
 .column-type {
@@ -225,13 +226,13 @@ $inactive-color: #ccc;
 }
 
 .inactive-snippet {
-	@include link-colors($php-inactive);
+	@include theme.link-colors(theme.$php-inactive);
 }
 
 .active-snippet {
 
 	td, th {
-		background-color: rgba($php-background, 0.06);
+		background-color: rgba(theme.$php-background, 0.06);
 	}
 
 	th.check-column {
@@ -245,11 +246,11 @@ $inactive-color: #ccc;
 
 @mixin snippet-type-colors($type, $active, $inactive, $background, $highlight) {
 	.#{$type}-snippet {
-		@include link-colors($inactive);
+		@include theme.link-colors($inactive);
 	}
 
 	.#{$type}-snippet.active-snippet {
-		@include link-colors($active);
+		@include theme.link-colors($active);
 
 		td, th {
 			background-color: rgba($background, 0.06);
@@ -265,9 +266,9 @@ $inactive-color: #ccc;
 	}
 }
 
-@include snippet-type-colors(css, $css-active, $css-inactive, $css-background, $css-highlight);
-@include snippet-type-colors(html, $html-active, $html-active, $html-background, $html-highlight);
-@include snippet-type-colors(js, $js-active, $js-inactive, $js-background, $js-highlight);
+@include snippet-type-colors(css, theme.$css-active, theme.$css-inactive, theme.$css-background, theme.$css-highlight);
+@include snippet-type-colors(html, theme.$html-active, theme.$html-active, theme.$html-background, theme.$html-highlight);
+@include snippet-type-colors(js, theme.$js-active, theme.$js-inactive, theme.$js-background, theme.$js-highlight);
 
 @media screen and (max-width: 782px) {
 	p.search-box {

diff --git a/src/css/settings.scss b/src/css/settings.scss
@@ -1,4 +1,4 @@
-@import 'common/editor';
+@use 'common/editor';
 
 $sections: general, editor, debug;
 

diff --git a/src/css/welcome.scss b/src/css/welcome.scss
@@ -1,5 +1,6 @@
-@import 'common/base';
-@import 'common/type-badges';
+@use 'sass:color';
+@use 'common/theme';
+@use 'common/type-badges';
 
 $breakpoint: 1060px;
 
@@ -51,7 +52,7 @@ $breakpoint: 1060px;
 			margin: 0;
 
 			span {
-				text-decoration: underline $theme-primary wavy 3px;
+				text-decoration: underline theme.$primary wavy 3px;
 				text-decoration-skip-ink: none;
 				text-underline-offset: 11px;
 				text-transform: capitalize;
@@ -111,11 +112,11 @@ $breakpoint: 1060px;
 	}
 
 	@each $link_name, $color in (
-			pro: $theme-secondary,
+			pro: theme.$secondary,
 			cloud: #08c5d1,
 			resources: #424242,
-			discord: $brand-discord,
-			facebook: $brand-facebook) {
+			discord: theme.$brand-discord,
+			facebook: theme.$brand-facebook) {
 		.csp-link-#{$link_name} {
 			background: $color;
 			border-color: $color;
@@ -140,7 +141,7 @@ $breakpoint: 1060px;
 }
 
 .csp-card {
-	border: 1px solid $theme-outline;
+	border: 1px solid theme.$outline;
 	background: white;
 	border-radius: 10px;
 	display: flex;
@@ -151,7 +152,7 @@ a.csp-card {
 	text-decoration: none;
 
 	&:hover {
-		background: lighten($theme-primary, 55%);
+		background: color.adjust(theme.$primary, $lightness: 55%);
 		transition: .5s background-color;
 		box-shadow: 0 1px 1px rgb(255 255 255 / 50%);
 
@@ -162,7 +163,7 @@ a.csp-card {
 }
 
 .csp-section-changes {
-	border: 1px solid $theme-outline;
+	border: 1px solid theme.$outline;
 	border-left: 0;
 	border-right: 0;
 	padding: 40px 0 50px 0;
@@ -181,7 +182,7 @@ a.csp-card {
 		box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
 
 		h2 {
-			color: $theme-primary;
+			color: theme.$primary;
 		}
 
 		&:last-child {
@@ -306,7 +307,7 @@ a.csp-card {
 
 		.csp-card-item-category {
 			color: white;
-			background: $theme-secondary;
+			background: theme.$secondary;
 			display: block;
 			font-size: .9rem;
 			letter-spacing: 1px;
@@ -320,7 +321,7 @@ a.csp-card {
 
 		h3 {
 			font-size: 1.7rem;
-			color: $theme-primary;
+			color: theme.$primary;
 			line-height: normal;
 		}
 
@@ -347,7 +348,7 @@ a.csp-card {
 }
 
 .csp-section-partners {
-	border-top: 1px solid $theme-outline;
+	border-top: 1px solid theme.$outline;
 
 	header {
 		display: flex;
@@ -362,7 +363,7 @@ a.csp-card {
 	width: 0;
 	padding: 15px;
 	border: 6px solid #e7c0b3;
-	border-right-color: $theme-secondary;
+	border-right-color: theme.$secondary;
 	border-radius: 22px;
 	animation: loading-rotate 1s infinite linear;
 	position: absolute;