update selectors for color schemes

Author: kaeizen

src/block/countdown/style.scss

@@ -1,3 +1,5 @@
+@import "common";
+
 .stk-block.stk-block-countdown {
 	text-align: center;
 	&.stk-block-countdown--aligned {
@@ -61,7 +63,7 @@
 }
 
 // These are styles added from the global color schemes.
-:where(.stk-has-color-schemes) {
+:where(#{$stk-has-color-schemes-selector}) {
 	.stk-block-countdown__digit {
 		color: var(--stk-accent-color);
 		&:where(:hover) {

src/block/divider/style.scss

@@ -8,7 +8,7 @@
 }
 
 // These are styles added from the global color schemes.
-:where(.stk-has-color-schemes) {
+:where(#{$stk-has-color-schemes-selector}) {
 	.stk-block.stk-block-divider {
 		hr.stk-block-divider__hr,
 		.stk-block-divider__dot {

src/block/icon-list/style.scss

@@ -1,3 +1,5 @@
+@import "common";
+
 // Important, we can't use flex since it causes issues with columns.
 .stk-block-icon-list {
 	.stk-block-icon-list--grid:is(ul, ol) {
@@ -88,7 +90,7 @@
 	}
 }
 
-:where(.stk-has-color-schemes) {
+:where(#{$stk-has-color-schemes-selector}) {
 	.stk-block-icon-list {
 		--stk-icon-list-marker-color: var(--stk-accent-color);
 		:where(.stk-block-icon-list-item) {

src/block/number-box/style.scss

@@ -21,7 +21,7 @@ div.stk-block-number-box__text {
 }
 
 // These are styles added from the global color schemes.
-:where(.stk-has-color-schemes) .stk-block-number-box.stk--has-shape {
+:where(#{$stk-has-color-schemes-selector}) .stk-block-number-box.stk--has-shape {
 	.stk-block-number-box__container,
 	div.stk-block-number-box__text {
 		color: var(--stk-button-text-color, #fff);

src/block/price/style.scss

@@ -1,3 +1,5 @@
+@import "common";
+
 .stk-block-price {
 	line-height: 1;
 	.stk-block-text {
@@ -12,6 +14,6 @@
 	line-height: 0.7;
 }
 
-:where(.stk-has-color-schemes .stk-block-price) .stk-block-text {
+:where(#{$stk-has-color-schemes-selector}) :where(.stk-block-price) .stk-block-text {
 	color: var(--stk-text-color);
 }

src/block/progress-bar/style.scss

@@ -47,7 +47,7 @@
 }
 
 // These are styles added from the global color schemes.
-:where(.stk-has-color-schemes) {
+:where(#{$stk-has-color-schemes-selector}) {
 	.stk-block-progress-bar {
 		--progress-color-1: var(--stk-accent-color);
 	}

src/block/progress-circle/style.scss

@@ -55,7 +55,7 @@
 }
 
 // These are styles added from the global color schemes.
-:where(.stk-has-color-schemes) {
+:where(#{$stk-has-color-schemes-selector}) {
 	.stk-block-progress-circle {
 		--progress-color-1: var(--stk-accent-color);
 	}

src/block/table-of-contents/style.scss

@@ -1,3 +1,5 @@
+@import "common";
+
 // Important, we can't use flex since it causes issues with columns.
 .stk-block-table-of-contents {
 	.stk-table-of-contents__table {
@@ -40,7 +42,7 @@
 }
 
 // These are styles added from the global color schemes.
-:where(.stk-has-color-schemes) {
+:where(#{$stk-has-color-schemes-selector}) {
 	.stk-block-table-of-contents {
 		// Add this so that it inherits the color from global color schemes.
 		::marker {

src/block/timeline/style.scss

@@ -21,7 +21,7 @@
 }
 
 // These are styles added from the global color schemes.
-:where(.stk-has-color-schemes) {
+:where(#{$stk-has-color-schemes-selector}) {
 	.stk-block-timeline {
 		--line-accent-bg-color: var(--stk-accent-color, #000);
 	}

src/plugins/global-settings/color-schemes/editor-loader.js

@@ -161,29 +161,52 @@ export const GlobalColorSchemeStyles = () => {
 	// Adds a class to the editor body DOM to indicate that there are global styles for `color schemes`.
 	useEffect( () => {
 		if ( editorEl ) {
-			if ( styles !== '' && editorEl.classList.contains( 'stk-has-color-schemes' ) === false ) {
-				editorEl.classList.add( 'stk-has-color-schemes' )
-				addFilter( 'stackable.global-styles.classnames', `stackable/global-settings.color-schemes`, classnames => {
-					classnames.push( 'stk-has-color-schemes' )
-					return classnames
-				} )
-			}
-			if ( styles === '' ) {
-				editorEl.classList.remove( 'stk-has-color-schemes' )
-			}
+			const addClassNames = editor => {
+				const classNamesToAdd = []
+				const classNamesToRemove = []
+				if ( styles === '' ) {
+					editor.classList.remove( 'stk--has-base-scheme', 'stk--has-background-scheme', 'stk--has-container-scheme' )
+				} else {
+					if ( ! styles.includes( ':root' ) ) {
+						classNamesToRemove.push( 'stk--has-base-scheme' )
+					} else if ( editor.classList.contains( 'stk--has-base-scheme' ) === false ) {
+						classNamesToAdd.push( 'stk--has-base-scheme' )
+					}
+
+					if ( ! styles.includes( '.stk-block-background' ) ) {
+						classNamesToRemove.push( 'stk--has-background-scheme' )
+					} else if ( editor.classList.contains( 'stk--has-background-scheme' ) === false ) {
+						classNamesToAdd.push( 'stk--has-background-scheme' )
+					}
+
+					if ( ! styles.includes( '.stk-container:where(:not(.stk--no-background))' ) ) {
+						classNamesToRemove.push( 'stk--has-container-scheme' )
+					} else if ( editor.classList.contains( 'stk--has-container-scheme' ) === false ) {
+						classNamesToAdd.push( 'stk--has-container-scheme' )
+					}
+
+					editor.classList.add( ...classNamesToAdd )
+					editor.classList.remove( ...classNamesToRemove )
 
-			// At first load of the editor, the `stk-has-color-schemes` is removed, so we have to re-add it.
-			const mo = onClassChange( editorEl, () => {
-				if ( styles !== '' && editorEl?.classList.contains( 'stk-has-color-schemes' ) === false ) {
-					editorEl?.classList.add( 'stk-has-color-schemes' )
 					addFilter( 'stackable.global-styles.classnames', `stackable/global-settings.color-schemes`, classnames => {
-						classnames.push( 'stk-has-color-schemes' )
-						return classnames
+					// Remove any classNamesToRemove from classnames
+						const updatedClassnames = classnames.filter( name => ! classNamesToRemove.includes( name ) )
+						// Add classNamesToAdd if not already present
+						classNamesToAdd.forEach( name => {
+							if ( ! updatedClassnames.includes( name ) ) {
+								updatedClassnames.push( name )
+							}
+						} )
+						return updatedClassnames
 					} )
 				}
-				if ( styles === '' ) {
-					editorEl?.classList.remove( 'stk-has-color-schemes' )
-				}
+			}
+
+			addClassNames( editorEl )
+
+			// At first load of the editor, the color scheme classnames removed, so we have to re-add it.
+			const mo = onClassChange( editorEl, () => {
+				addClassNames( editorEl )
 			} )
 
 			return () => mo.disconnect()