Simplify css var setup to remove conflicts, overrides, and duplicates (#4170)

* remove "experimental" color vars, remove conflicting styles from frontend-specific css

* lint

---------

Co-authored-by: Cal H. <hendersoncal117@gmail.com>

packages/assets/styles/variables.scss

@@ -1,16 +1,16 @@
 .light-properties {
-	--color-bg: #e5e7eb;
+	--color-bg: #ebebeb;
 	--color-raised-bg: #ffffff;
 	--color-super-raised-bg: #e9e9e9;
-	--color-button-bg: hsl(220, 13%, 91%);
+	--color-button-bg: #f5f5f5;
 	--color-button-border: rgba(161, 161, 161, 0.35);
 	--color-scrollbar: #96a2b0;
 
 	--color-divider: #babfc5;
 	--color-divider-dark: #c8cdd3;
 
-	--color-base: hsl(221, 39%, 11%);
-	--color-secondary: #6b7280;
+	--color-base: #2c2e31;
+	--color-secondary: #484d54;
 	--color-contrast: #1a202c;
 	--color-accent-contrast: #ffffff;
 
@@ -119,6 +119,10 @@ html {
 	--color-ad-raised: rgba(190, 140, 243, 0.5);
 	--color-ad-contrast: black;
 	--color-ad-highlight: var(--color-purple);
+
+	--color-link: var(--color-blue) !important;
+	--color-link-hover: var(--color-blue) !important; // DEPRECATED, use filters in future
+	--color-link-active: var(--color-blue) !important; // DEPRECATED, use filters in future
 }
 
 .light-mode,
@@ -132,7 +136,7 @@ html {
 	--color-bg: #16181c;
 	--color-raised-bg: #26292f;
 	--color-super-raised-bg: #40434a;
-	--color-button-bg: hsl(222, 13%, 30%);
+	--color-button-bg: #33363d;
 	--color-button-border: rgba(193, 190, 209, 0.12);
 	--color-scrollbar: var(--color-button-bg);
 
@@ -212,8 +216,6 @@ html {
 	--color-platform-nilloader: #f45e9a;
 
 	--hover-brightness: 1.25;
-
-	--experimental-color-button-bg: #33363d;
 }
 
 .oled-mode {
@@ -241,52 +243,3 @@ html {
 .retro-mode {
 	--brand-gradient-strong-bg: #3a3b38;
 }
-
-.experimental-styles-within {
-	--color-link: var(--color-blue) !important;
-	--color-link-hover: var(--color-blue) !important; // DEPRECATED, use filters in future
-	--color-link-active: var(--color-blue) !important; // DEPRECATED, use filters in future
-}
-
-.light-experiments {
-	--color-bg: #ebebeb;
-	--color-raised-bg: #ffffff;
-	--color-button-bg: #f5f5f5;
-	--color-base: #2c2e31;
-	--color-secondary: #484d54;
-	--color-accent-contrast: #ffffff;
-}
-
-.light-mode,
-.light {
-	.experimental-styles-within,
-	&.experimental-styles-within {
-		@extend .light-experiments;
-	}
-}
-
-.experimental-styles-within {
-	.light-mode,
-	.light {
-		@extend .light-experiments;
-	}
-}
-
-.dark-experiments {
-	--color-button-bg: var(--experimental-color-button-bg);
-}
-
-.dark-mode:not(.oled-mode),
-.dark:not(.oled-mode) {
-	.experimental-styles-within,
-	&.experimental-styles-within {
-		@extend .dark-experiments;
-	}
-}
-
-.experimental-styles-within {
-	.dark-mode:not(.oled-mode),
-	.dark:not(.oled-mode) {
-		@extend .dark-experiments;
-	}
-}

packages/ui/src/composables/stripe.ts

@@ -83,7 +83,7 @@ export const useStripe = (
 			appearance: {
 				variables: {
 					colorPrimary: styles.getPropertyValue('--color-brand'),
-					colorBackground: styles.getPropertyValue('--experimental-color-button-bg'),
+					colorBackground: styles.getPropertyValue('--color-button-bg'),
 					colorText: styles.getPropertyValue('--color-base'),
 					colorTextPlaceholder: styles.getPropertyValue('--color-secondary'),
 					colorDanger: styles.getPropertyValue('--color-red'),

packages/utils/billing.ts

@@ -96,7 +96,7 @@ export const createStripeElements = (stripe, paymentMethods, options) => {
 		appearance: {
 			variables: {
 				colorPrimary: styles.getPropertyValue('--color-brand'),
-				colorBackground: styles.getPropertyValue('--experimental-color-button-bg'),
+				colorBackground: styles.getPropertyValue('--color-button-bg'),
 				colorText: styles.getPropertyValue('--color-base'),
 				colorTextPlaceholder: styles.getPropertyValue('--color-secondary'),
 				colorDanger: styles.getPropertyValue('--color-red'),