From c14a3fb6f988b27ca1a4f8e12f4b8d157316fcc4 Mon Sep 17 00:00:00 2001
From: "Samuel M. Bednarz" <samuelmorkbednarz@gmail.com>
Date: Thu, 4 Jan 2024 21:45:04 +0100
Subject: [PATCH] discovered awesome way to keep sheets minimal and in sync

---
 packages/core/engine/primitives/attach.ts | 12 ++++++++++--
 packages/core/engine/primitives/sheet.ts  |  9 +++++++++
 packages/playground/src/css/color.scss    | 14 +-------------
 3 files changed, 20 insertions(+), 15 deletions(-)
 create mode 100644 packages/core/engine/primitives/sheet.ts

diff --git a/packages/core/engine/primitives/attach.ts b/packages/core/engine/primitives/attach.ts
index b7eb664..0788712 100644
--- a/packages/core/engine/primitives/attach.ts
+++ b/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[]) {
diff --git a/packages/core/engine/primitives/sheet.ts b/packages/core/engine/primitives/sheet.ts
new file mode 100644
index 0000000..7276242
--- /dev/null
+++ b/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]
+}
diff --git a/packages/playground/src/css/color.scss b/packages/playground/src/css/color.scss
index 4304d08..686e610 100644
--- a/packages/playground/src/css/color.scss
+++ b/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;
 }