discovered awesome way to keep sheets minimal and in sync

packages/core/engine/primitives/attach.ts

@@ -1,5 +1,6 @@
 import { UmbraInput } from '../..'
 import { FlattenColor, UmbraOutputs } from './format'
+import { setSheet, umbraSheet } from './sheet'
 
 //Why aliases? 2 reasons:
 //1 - People seem to be better at understanding direct instructions rather than logic.
@@ -121,10 +122,17 @@ function setColors(flattened: FlattenColor[], element?: string | HTMLElement | n
   notHTMLElement ? setColorSheet(element, filtered) : setElementColors(element, filtered)
 }
 
+let iterations = 0
+
 function setColorSheet(element = ':root', flattened: FlattenColor[]) {
+  iterations++
   const sheet = new CSSStyleSheet()
-  sheet.replace(`${element} {${flattened.map(({ name, color }) => `${name}: ${color};`).join('')}}`)
-  document.adoptedStyleSheets = [sheet]
+  sheet.replace(
+    `theme-${iterations}, ${element} {${flattened
+      .map(({ name, color }) => `${name}: ${color};`)
+      .join('')}}`
+  )
+  setSheet(sheet)
 }
 
 function setElementColors(element: HTMLElement | null, colors: FlattenColor[]) {

packages/core/engine/primitives/sheet.ts

@@ -0,0 +1,9 @@
+export function setSheet(sheet: CSSStyleSheet) {
+  //this is only possible because of ...spreading the adoptedStylesheets.
+  //Normally, you can't access the cssRules of an adopted stylesheet
+  const filtered = [...document.adoptedStyleSheets].filter((sheet) => {
+    const includesUmbra = sheet.cssRules[0].cssText.includes('theme')
+    return !includesUmbra
+  })
+  document.adoptedStyleSheets = [...filtered, sheet]
+}

packages/playground/src/css/color.scss

@@ -3,23 +3,11 @@ html {
   color: var(--foreground);
 }
 
-:root { 
+:root {
   --background: #0c0915;
   --background-10: #1e1a23;
   --background-20: #423b40;
   --foreground: #c0aea3;
   --foreground-10: #9c8d87;
   --foreground-20: #665c5c;
-  --accent: #c97074;
-  --accent-contrast: #0c0915;
-  --accent-10: #a35b61;
-  --accent-20: #6b3d45;
-  --success: #00ff00;
-  --success-contrast: #0c0915;
-  --success-10: #00ff00;
-  --success-20: #00ff00;
-  --error: #ff0000;
-  --error-contrast: #0c0915;
-  --error-10: #ff0000;
-  --error-20: #ff0000;
 }