chore: try style observer

adobe · Feb 12, 2025 · 5ccaba1 · 5ccaba1
1 parent e7c6610
commit 5ccaba1
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 19 deletions.
diff --git a/packages/icon/package.json b/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"

diff --git a/packages/icon/src/IconBase.ts b/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);
     }
 

diff --git a/tools/theme/src/Theme.ts b/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) {

diff --git a/yarn.lock b/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"