chore: try style observer

packages/icon/package.json

@@ -82,7 +82,8 @@
     ],
     "dependencies": {
         "@spectrum-web-components/base": "^1.1.2",
-        "@spectrum-web-components/iconset": "^1.1.2"
+        "@spectrum-web-components/iconset": "^1.1.2",
+        "style-observer": "^0.0.4"
     },
     "devDependencies": {
         "@spectrum-css/icon": "8.0.0-s2-foundations.16"

packages/icon/src/IconBase.ts

@@ -9,6 +9,8 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 
 import {
     CSSResultArray,
@@ -17,15 +19,12 @@ import {
     SpectrumElement,
     TemplateResult,
 } from '@spectrum-web-components/base';
-import {
-    SystemResolutionController,
-    systemResolverUpdatedSymbol,
-} from '@spectrum-web-components/reactive-controllers/src/SystemContextResolution.js';
 
 import {
     property,
     state,
 } from '@spectrum-web-components/base/src/decorators.js';
+import StyleObserver from 'style-observer';
 
 import iconStyles from './icon.css.js';
 
@@ -34,8 +33,6 @@ export class IconBase extends SpectrumElement {
         return [iconStyles];
     }
 
-    private unsubscribeSystemContext: (() => void) | null = null;
-
     @state()
     public spectrumVersion = 1;
 
@@ -45,20 +42,44 @@ export class IconBase extends SpectrumElement {
     @property({ reflect: true })
     public size?: 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
 
+    private systemObserver?: StyleObserver;
+
     public override connectedCallback(): void {
         super.connectedCallback();
+
+        this.systemObserver = new StyleObserver(
+            (records: StyleObserver.Record[]) => {
+                for (const record of records) {
+                    const systemValue = record.value.trim();
+                    // eslint-disable-next-line no-console
+                    console.log('Icon detected system change:', systemValue);
+
+                    if (systemValue === 'spectrum-two') {
+                        this.spectrumVersion = 2;
+                    } else {
+                        this.spectrumVersion = 1;
+                    }
+                    this.requestUpdate();
+                }
+            },
+            {
+                properties: ['--system'],
+                targets: [this],
+            }
+        );
+
+        // Ensure the observer picks up the initial value
+        const systemValue = getComputedStyle(this)
+            .getPropertyValue('--system')
+            .trim();
+        this.spectrumVersion = systemValue === 'spectrum-two' ? 2 : 1;
     }
 
     public override disconnectedCallback(): void {
         super.disconnectedCallback();
-        if (this.unsubscribeSystemContext) {
-            this.unsubscribeSystemContext();
-            this.unsubscribeSystemContext = null;
-        }
+        this.systemObserver?.unobserve();
     }
 
-    private systemResolver = new SystemResolutionController(this);
-
     protected override update(changes: PropertyValues): void {
         if (changes.has('label')) {
             if (this.label) {
@@ -67,12 +88,6 @@ export class IconBase extends SpectrumElement {
                 this.setAttribute('aria-hidden', 'true');
             }
         }
-
-        if (changes.has(systemResolverUpdatedSymbol)) {
-            this.spectrumVersion =
-                this.systemResolver.system === 'spectrum-two' ? 2 : 1;
-        }
-
         super.update(changes);
     }
 

tools/theme/src/Theme.ts

@@ -120,6 +120,7 @@ export class Theme extends HTMLElement implements ThemeKindProvider {
                 : this.system;
         if (system !== this._system) {
             this._system = system;
+            this.style.setProperty('--system', system);
             this.requestUpdate();
         }
         if (system) {

yarn.lock

@@ -8778,6 +8778,7 @@ __metadata:
     "@spectrum-css/icon": "npm:8.0.0-s2-foundations.16"
     "@spectrum-web-components/base": "npm:^1.1.2"
     "@spectrum-web-components/iconset": "npm:^1.1.2"
+    style-observer: "npm:^0.0.4"
   languageName: unknown
   linkType: soft
 
@@ -34876,6 +34877,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"style-observer@npm:^0.0.4":
+  version: 0.0.4
+  resolution: "style-observer@npm:0.0.4"
+  checksum: 10c0/ebf089ff0db1ff17b44b3960012320fb6c769228db9a890f1617cbc5f113f904b79e8bf49a0292120cccb22c86cf86ad616f9c68d44a3a2f7512c1d1c12a15d8
+  languageName: node
+  linkType: hard
+
 "styled-jsx@npm:5.1.1":
   version: 5.1.1
   resolution: "styled-jsx@npm:5.1.1"