Skip to content

[theme]: Replace :host-context with @container style() queries#1299

Open
fallaciousreasoning wants to merge 4 commits into
mainfrom
host-context-deprecated
Open

[theme]: Replace :host-context with @container style() queries#1299
fallaciousreasoning wants to merge 4 commits into
mainfrom
host-context-deprecated

Conversation

@fallaciousreasoning

@fallaciousreasoning fallaciousreasoning commented Feb 2, 2026 •
edited
Loading

Copy link
Copy Markdown
Collaborator

Resolves #1296

Need to remove the hack for iOS in the Toggle as a followup PR

So: This is a win-some lose-some approach. Now, we support Safari & Firefox with our @theme queries but at the cost of only supporting Chromium back to March 2023. Is that an acceptable tradeoff @AlanBreck?

Test updates made by Claude

fallaciousreasoning
fallaciousreasoning commented Feb 2, 2026
View reviewed changes
Comment thread src/postcss/theme.js Outdated
@github-actions

github-actions Bot commented Feb 2, 2026

Copy link
Copy Markdown
Contributor

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://1299.pr.nala.bravesoftware.com/
✅ Commit preview: https://1299.pr.nala.bravesoftware.com/commit-60c6f6731862f330f4d8c7b75192f1d479bf634c/

- ./tokens/css/variables-android.old.css: 7390 bytes
+ ./tokens/css/variables-android.css: 7688 bytes
---
- ./tokens/css/variables-browser.old.css: 6644 bytes
+ ./tokens/css/variables-browser.css: 6780 bytes
---
- ./tokens/css/variables-ios.old.css: 8180 bytes
+ ./tokens/css/variables-ios.css: 8478 bytes
---
- ./tokens/css/variables-marketing.old.css: 13501 bytes
+ ./tokens/css/variables-marketing.css: 13637 bytes
---
- ./tokens/css/variables-news.old.css: 526 bytes
+ ./tokens/css/variables-news.css: 824 bytes
---
- ./tokens/css/variables-newtab.old.css: 1933 bytes
+ ./tokens/css/variables-newtab.css: 2231 bytes
---
- ./tokens/css/variables-search.old.css: 28568 bytes
+ ./tokens/css/variables-search.css: 28704 bytes
---
- ./tokens/css/variables-web3.old.css: 893 bytes
+ ./tokens/css/variables-web3.css: 1029 bytes
---
- ./tokens/css/variables.old.css: 132719 bytes
+ ./tokens/css/variables.css: 132855 bytes
Variables Diff: variables-android.diff 
--- ./tokens/css/variables-android.old.css	2026-02-02 02:18:59.800911711 +0000
+++ ./tokens/css/variables-android.css	2026-02-02 02:18:26.238693567 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Jan 28 2026 19:19:02 GMT+0000 (Coordinated Universal Time)
+ * Generated on Mon Feb 02 2026 02:18:26 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
@@ -124,3 +124,27 @@
   --leo-typography-android-x-small-semibold-paragraph-indent: 0;
   --leo-typography-android-x-small-semibold-paragraph-spacing: 0;
 }
+
+@media (prefers-color-scheme: light) {
+ :root {
+  --leo-theme: light;
+
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+  --leo-theme: dark;
+
+ }
+}
+
+[data-theme="light"] { container-type: normal; 
+  --leo-theme: light;
+
+}
+
+[data-theme="dark"] { container-type: normal; 
+  --leo-theme: dark;
+
+}
Variables Diff: variables-browser.diff 
--- ./tokens/css/variables-browser.old.css	2026-02-02 02:19:00.031913200 +0000
+++ ./tokens/css/variables-browser.css	2026-02-02 02:18:26.224693475 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Jan 28 2026 19:19:02 GMT+0000 (Coordinated Universal Time)
+ * Generated on Mon Feb 02 2026 02:18:26 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
@@ -99,6 +99,7 @@
 
 @media (prefers-color-scheme: light) {
  :root {
+  --leo-theme: light;
   --leo-effect-active-tab-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
   --leo-effect-browser-frame-shadow-0: 0px 0px 0px 0.75px rgba(6, 6, 5, 0.2);
   --leo-effect-browser-frame-shadow-1: inset 0px 1px 0.5px 0px rgba(255, 255, 255, 0.32);
@@ -108,6 +109,7 @@
 
 @media (prefers-color-scheme: dark) {
  :root {
+  --leo-theme: dark;
   --leo-effect-active-tab-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
   --leo-effect-browser-frame-shadow-0: 0px 0px 0px 0.75px rgba(6, 6, 5, 0.2);
   --leo-effect-browser-frame-shadow-1: inset 0px 1px 0.5px 0px rgba(255, 255, 255, 0.32);
@@ -115,14 +117,16 @@
  }
 }
 
-[data-theme="light"] {
+[data-theme="light"] { container-type: normal; 
+  --leo-theme: light;
   --leo-effect-active-tab-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
   --leo-effect-browser-frame-shadow-0: 0px 0px 0px 0.75px rgba(6, 6, 5, 0.2);
   --leo-effect-browser-frame-shadow-1: inset 0px 1px 0.5px 0px rgba(255, 255, 255, 0.32);
   --leo-effect-url-bar-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.1), 0px 4px 8px -2px rgba(0, 0, 0, 0.1);
 }
 
-[data-theme="dark"] {
+[data-theme="dark"] { container-type: normal; 
+  --leo-theme: dark;
   --leo-effect-active-tab-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
   --leo-effect-browser-frame-shadow-0: 0px 0px 0px 0.75px rgba(6, 6, 5, 0.2);
   --leo-effect-browser-frame-shadow-1: inset 0px 1px 0.5px 0px rgba(255, 255, 255, 0.32);
Variables Diff: variables-ios.diff 
--- ./tokens/css/variables-ios.old.css	2026-02-02 02:19:00.252914625 +0000
+++ ./tokens/css/variables-ios.css	2026-02-02 02:18:26.255693677 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Jan 28 2026 19:19:02 GMT+0000 (Coordinated Universal Time)
+ * Generated on Mon Feb 02 2026 02:18:26 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
@@ -124,3 +124,27 @@
   --leo-typography-ios-x-small-semibold-paragraph-indent: 0;
   --leo-typography-ios-x-small-semibold-paragraph-spacing: 0;
 }
+
+@media (prefers-color-scheme: light) {
+ :root {
+  --leo-theme: light;
+
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+  --leo-theme: dark;
+
+ }
+}
+
+[data-theme="light"] { container-type: normal; 
+  --leo-theme: light;
+
+}
+
+[data-theme="dark"] { container-type: normal; 
+  --leo-theme: dark;
+
+}
Variables Diff: variables-marketing.diff 
--- ./tokens/css/variables-marketing.old.css	2026-02-02 02:19:00.496916197 +0000
+++ ./tokens/css/variables-marketing.css	2026-02-02 02:18:26.277693821 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Jan 28 2026 19:19:02 GMT+0000 (Coordinated Universal Time)
+ * Generated on Mon Feb 02 2026 02:18:26 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
@@ -218,6 +218,7 @@
 
 @media (prefers-color-scheme: light) {
  :root {
+  --leo-theme: light;
   --leo-effect-stroke: 0px 0px 0px 3px rgb(0, 0, 0);
   --leo-effect-stroke-shadow: 8px 8px 0px 0px rgb(0, 0, 0), 0px 0px 0px 3px rgb(0, 0, 0);
  }
@@ -225,17 +226,20 @@
 
 @media (prefers-color-scheme: dark) {
  :root {
+  --leo-theme: dark;
   --leo-effect-stroke: 0px 0px 0px 3px rgb(0, 0, 0);
   --leo-effect-stroke-shadow: 8px 8px 0px 0px rgb(0, 0, 0), 0px 0px 0px 3px rgb(0, 0, 0);
  }
 }
 
-[data-theme="light"] {
+[data-theme="light"] { container-type: normal; 
+  --leo-theme: light;
   --leo-effect-stroke: 0px 0px 0px 3px rgb(0, 0, 0);
   --leo-effect-stroke-shadow: 8px 8px 0px 0px rgb(0, 0, 0), 0px 0px 0px 3px rgb(0, 0, 0);
 }
 
-[data-theme="dark"] {
+[data-theme="dark"] { container-type: normal; 
+  --leo-theme: dark;
   --leo-effect-stroke: 0px 0px 0px 3px rgb(0, 0, 0);
   --leo-effect-stroke-shadow: 8px 8px 0px 0px rgb(0, 0, 0), 0px 0px 0px 3px rgb(0, 0, 0);
 }
Variables Diff: variables-news.diff 
--- ./tokens/css/variables-news.old.css	2026-02-02 02:19:00.749917828 +0000
+++ ./tokens/css/variables-news.css	2026-02-02 02:18:26.326694141 +0000
@@ -1,9 +1,33 @@
 /**
  * Do not edit directly
- * Generated on Wed Jan 28 2026 19:19:02 GMT+0000 (Coordinated Universal Time)
+ * Generated on Mon Feb 02 2026 02:18:26 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
   --leo-gradient-stroke-gradient-dark: linear-gradient(155.40180080220492deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.15) 41%, rgba(255, 255, 255, 0) 56.99999999999999%, rgba(255, 255, 255, 0.05) 100%);
   --leo-gradient-stroke-gradient-light: linear-gradient(155.40180080220492deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 41%, rgba(0, 0, 0, 0) 56.99999999999999%, rgba(0, 0, 0, 0.15) 100%);
 }
+
+@media (prefers-color-scheme: light) {
+ :root {
+  --leo-theme: light;
+
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+  --leo-theme: dark;
+
+ }
+}
+
+[data-theme="light"] { container-type: normal; 
+  --leo-theme: light;
+
+}
+
+[data-theme="dark"] { container-type: normal; 
+  --leo-theme: dark;
+
+}
Variables Diff: variables-newtab.diff 
--- ./tokens/css/variables-newtab.old.css	2026-02-02 02:19:00.986919353 +0000
+++ ./tokens/css/variables-newtab.css	2026-02-02 02:18:26.336694207 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Jan 28 2026 19:19:02 GMT+0000 (Coordinated Universal Time)
+ * Generated on Mon Feb 02 2026 02:18:26 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
@@ -34,3 +34,27 @@
   --leo-typography-stats-h3-paragraph-indent: 0;
   --leo-typography-stats-h3-paragraph-spacing: 0;
 }
+
+@media (prefers-color-scheme: light) {
+ :root {
+  --leo-theme: light;
+
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+  --leo-theme: dark;
+
+ }
+}
+
+[data-theme="light"] { container-type: normal; 
+  --leo-theme: light;
+
+}
+
+[data-theme="dark"] { container-type: normal; 
+  --leo-theme: dark;
+
+}
Variables Diff: variables-search.diff 
--- ./tokens/css/variables-search.old.css	2026-02-02 02:19:01.248921045 +0000
+++ ./tokens/css/variables-search.css	2026-02-02 02:18:26.303693991 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Jan 28 2026 19:19:02 GMT+0000 (Coordinated Universal Time)
+ * Generated on Mon Feb 02 2026 02:18:26 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
@@ -53,6 +53,7 @@
 
 @media (prefers-color-scheme: light) {
  :root {
+  --leo-theme: light;
   --leo-color-search-background-ask-input-field: var(--leo-color-schemes-surface-container-lowest);
   --leo-color-search-background-container: var(--leo-color-schemes-surface-container-lowest);
   --leo-color-search-background-container-interactive: var(--leo-color-primary-10);
@@ -167,6 +168,7 @@
 
 @media (prefers-color-scheme: dark) {
  :root {
+  --leo-theme: dark;
   --leo-color-search-background-ask-input-field: var(--leo-color-schemes-surface-container-highest);
   --leo-color-search-background-container: var(--leo-color-schemes-surface-container);
   --leo-color-search-background-container-interactive: var(--leo-color-search-primary-10);
@@ -279,7 +281,8 @@
  }
 }
 
-[data-theme="light"] {
+[data-theme="light"] { container-type: normal; 
+  --leo-theme: light;
   --leo-color-search-background-ask-input-field: var(--leo-color-schemes-surface-container-lowest);
   --leo-color-search-background-container: var(--leo-color-schemes-surface-container-lowest);
   --leo-color-search-background-container-interactive: var(--leo-color-primary-10);
@@ -391,7 +394,8 @@
   --leo-color-search-yellow-70: var(--leo-color-yellow-70);
 }
 
-[data-theme="dark"] {
+[data-theme="dark"] { container-type: normal; 
+  --leo-theme: dark;
   --leo-color-search-background-ask-input-field: var(--leo-color-schemes-surface-container-highest);
   --leo-color-search-background-container: var(--leo-color-schemes-surface-container);
   --leo-color-search-background-container-interactive: var(--leo-color-search-primary-10);
Variables Diff: variables-web3.diff 
--- ./tokens/css/variables-web3.old.css	2026-02-02 02:19:01.375921862 +0000
+++ ./tokens/css/variables-web3.css	2026-02-02 02:18:26.340694233 +0000
@@ -1,10 +1,11 @@
 /**
  * Do not edit directly
- * Generated on Wed Jan 28 2026 19:19:02 GMT+0000 (Coordinated Universal Time)
+ * Generated on Mon Feb 02 2026 02:18:26 GMT+0000 (Coordinated Universal Time)
  */
 
 @media (prefers-color-scheme: light) {
  :root {
+  --leo-theme: light;
   --leo-effect-actions-shadow: 0px -1px 8px 0px rgba(0, 0, 0, 0.1);
   --leo-effect-navigation-shadow: 0px -8px 16px 0px var(--leo-color-elevation-primary);
  }
@@ -12,17 +13,20 @@
 
 @media (prefers-color-scheme: dark) {
  :root {
+  --leo-theme: dark;
   --leo-effect-actions-shadow: 0px -1px 8px 0px rgba(0, 0, 0, 0.1);
   --leo-effect-navigation-shadow: 0px -8px 16px 0px var(--leo-color-elevation-primary);
  }
 }
 
-[data-theme="light"] {
+[data-theme="light"] { container-type: normal; 
+  --leo-theme: light;
   --leo-effect-actions-shadow: 0px -1px 8px 0px rgba(0, 0, 0, 0.1);
   --leo-effect-navigation-shadow: 0px -8px 16px 0px var(--leo-color-elevation-primary);
 }
 
-[data-theme="dark"] {
+[data-theme="dark"] { container-type: normal; 
+  --leo-theme: dark;
   --leo-effect-actions-shadow: 0px -1px 8px 0px rgba(0, 0, 0, 0.1);
   --leo-effect-navigation-shadow: 0px -8px 16px 0px var(--leo-color-elevation-primary);
 }
Variables Diff: variables.diff 
--- ./tokens/css/variables.old.css	2026-02-02 02:19:01.748924267 +0000
+++ ./tokens/css/variables.css	2026-02-02 02:18:26.103692685 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Jan 28 2026 19:19:02 GMT+0000 (Coordinated Universal Time)
+ * Generated on Mon Feb 02 2026 02:18:26 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
@@ -793,6 +793,7 @@
 
 @media (prefers-color-scheme: light) {
  :root {
+  --leo-theme: light;
   --leo-color-legacy-background1: #fff;
   --leo-color-legacy-background2: #f8f9fa;
   --leo-color-legacy-disabled: #dadce8;
@@ -1113,6 +1114,7 @@
 
 @media (prefers-color-scheme: dark) {
  :root {
+  --leo-theme: dark;
   --leo-color-blue-10: var(--leo-color-primitive-blue-15);
   --leo-color-blue-20: var(--leo-color-primitive-blue-25);
   --leo-color-blue-30: var(--leo-color-primitive-blue-40);
@@ -1431,7 +1433,8 @@
  }
 }
 
-[data-theme="light"] {
+[data-theme="light"] { container-type: normal; 
+  --leo-theme: light;
   --leo-color-legacy-background1: #fff;
   --leo-color-legacy-background2: #f8f9fa;
   --leo-color-legacy-disabled: #dadce8;
@@ -1749,7 +1752,8 @@
   --leo-effect-notificationbackdrop: inset 0px 0px 1px 0px rgba(255, 255, 255, 0.1), 0px 1px 1px 0px var(--leo-color-elevation-primary), 0px 4px 8px 0px var(--leo-color-elevation-secondary);
 }
 
-[data-theme="dark"] {
+[data-theme="dark"] { container-type: normal; 
+  --leo-theme: dark;
   --leo-color-blue-10: var(--leo-color-primitive-blue-15);
   --leo-color-blue-20: var(--leo-color-primitive-blue-25);
   --leo-color-blue-30: var(--leo-color-primitive-blue-40);

@github-actions

github-actions Bot commented Feb 11, 2026

Copy link
Copy Markdown
Contributor

[puLL-Merge] - brave/leo@1299

Description

This PR refactors the PostCSS theme plugin to replace the previous data-theme attribute selector and wrapSelector approach with CSS Container Style Queries (@container style(--leo-theme: ...)) as the primary mechanism for theme switching. The motivation is to use modern CSS container queries for theming, which allows ancestor elements to control the theme of their descendants via a --leo-theme custom property, while maintaining backward compatibility through multiple fallback layers.

The new theme resolution cascade is:

  1. :root with light (default) values
  2. @media (prefers-color-scheme: dark) for OS-level dark mode
  3. [data-theme="light/dark"] for explicit attribute-based fallback (e.g., Firefox which doesn't yet support container style queries)
  4. @container style(--leo-theme: light/dark) for modern browsers

Possible Issues

  1. Massive CSS output bloat: Each themed property now generates 6 separate rule blocks (:root, @media, [data-theme="light"], [data-theme="dark"], @container light, @container dark) per selector, compared to the previous 3 consolidated blocks. For multi-selector rules, these are no longer grouped — each selector gets its own set of 6 blocks. This could significantly increase CSS bundle size.

  2. Browser support for container style queries: @container style() queries are only supported in Chromium 111+ and Safari 18+. Firefox does not support them yet. The [data-theme] fallback exists, but the specificity/cascade interactions between the fallback and the container queries could lead to unexpected behavior when both are active.

  3. :global() wrapper hardcoded: The previous approach allowed configurable selector wrapping via wrapSelector. Now :global() is hardcoded into the generated CSS, which only makes sense in Svelte contexts. This makes the plugin less reusable outside Svelte.

  4. [data-theme] fallback rules lack scoping: The [data-theme="light"] and [data-theme="dark"] fallback rules place variables directly on those selectors without scoping to the component selector, meaning all components' theme variables leak into a single rule. Meanwhile, @container and @media rules scope variables to :global(.component). This inconsistency could cause specificity conflicts.

  5. Multiple :global(:root) rules: For multi-selector components (e.g., .component, .foo), the plugin generates separate :global(:root) blocks for each selector rather than merging them. This is functional but produces unnecessary duplication.

  6. container-type: normal in formatCss.js: Setting container-type: normal on [data-theme] elements is required for container style queries to work on descendants, but this is added in the token formatting but not in the PostCSS plugin output, which could lead to inconsistency.

  7. Debug code left in: toggle.svelte changes --foreground-color from white to red in dark mode, which appears to be debug/test code accidentally included.

Security Hotspots

None identified.

Changes

Changes

  • src/postcss/theme.js: Core refactor — removed darkSelector, lightSelector, wrapSelector options; replaced with themeProperty (default --leo-theme). extractThemedProperties now returns an array of 6 rule nodes per selector instead of aggregated dark/light variable lists. Variables are now scoped per-selector with :global() wrappers hardcoded.

  • src/tokens/transformation/web/formatCss.js: Adds --leo-theme: light and --leo-theme: dark declarations to the respective token groups. Adds container-type: normal to [data-theme] selectors to enable container style queries.

  • rollup.config.js / svelte.config.js: Simplified themePlugin() calls — removed wrapSelector option since it's no longer supported.

  • src/components/toggle/toggle.svelte: Changed dark mode --foreground-color from white to red (likely debug code).

  • tests/theme.dark.test.js, tests/theme.light.test.js, tests/theme.mixed.test.js: Updated all expected outputs to match new 6-block-per-selector format with :global() wrappers and container style queries. Removed tests for wrapSelector and custom selector options.

sequenceDiagram
    participant CSS as CSS Source
    participant Plugin as PostCSS Theme Plugin
    participant Output as Generated CSS

    CSS->>Plugin: Parse @theme(dark/light) at-rules
    Plugin->>Plugin: Collect themed declarations per selector
    Plugin->>Plugin: findMatchingBaseRules()
    Plugin->>Plugin: extractThemedProperties() per selector
    Plugin->>Output: 1. :global(:root) { light vars }
    Plugin->>Output: 2. @media (prefers-color-scheme: dark) { :global(selector) { dark vars } }
    Plugin->>Output: 3. :global([data-theme="light"]) { light vars }
    Plugin->>Output: 4. :global([data-theme="dark"]) { dark vars }
    Plugin->>Output: 5. @container style(--leo-theme: light) { :global(selector) { light vars } }
    Plugin->>Output: 6. @container style(--leo-theme: dark) { :global(selector) { dark vars } }
    Plugin->>Output: 7. .selector { prop: var(--scoped-var) }
Loading

fallaciousreasoning
fallaciousreasoning commented Feb 11, 2026
View reviewed changes

@fallaciousreasoning fallaciousreasoning left a comment

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@AlanBreck do you mind testing this on one of your sites where we use data-theme?

@github-actions

github-actions Bot commented Feb 11, 2026

Copy link
Copy Markdown
Contributor

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://1299.pr.nala.bravesoftware.com/
✅ Commit preview: https://1299.pr.nala.bravesoftware.com/commit-0ab7e3c69a0cd46e29a516a56cc353e6a473ef75/

- ./tokens/css/variables-android.old.css: 7390 bytes
+ ./tokens/css/variables-android.css: 7640 bytes
---
- ./tokens/css/variables-browser.old.css: 6644 bytes
+ ./tokens/css/variables-browser.css: 6732 bytes
---
- ./tokens/css/variables-ios.old.css: 8180 bytes
+ ./tokens/css/variables-ios.css: 8430 bytes
---
- ./tokens/css/variables-marketing.old.css: 13501 bytes
+ ./tokens/css/variables-marketing.css: 13589 bytes
---
- ./tokens/css/variables-news.old.css: 526 bytes
+ ./tokens/css/variables-news.css: 776 bytes
---
- ./tokens/css/variables-newtab.old.css: 1933 bytes
+ ./tokens/css/variables-newtab.css: 2183 bytes
---
- ./tokens/css/variables-search.old.css: 28568 bytes
+ ./tokens/css/variables-search.css: 28656 bytes
---
- ./tokens/css/variables-web3.old.css: 893 bytes
+ ./tokens/css/variables-web3.css: 981 bytes
---
- ./tokens/css/variables.old.css: 132719 bytes
+ ./tokens/css/variables.css: 132807 bytes
Variables Diff: variables-android.diff 
--- ./tokens/css/variables-android.old.css	2026-02-11 02:12:32.519290042 +0000
+++ ./tokens/css/variables-android.css	2026-02-11 02:11:59.630310526 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sun Feb 08 2026 20:57:54 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Feb 11 2026 02:11:59 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
@@ -124,3 +124,27 @@
   --leo-typography-android-x-small-semibold-paragraph-indent: 0;
   --leo-typography-android-x-small-semibold-paragraph-spacing: 0;
 }
+
+@media (prefers-color-scheme: light) {
+ :root {
+  --leo-theme: light;
+
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+  --leo-theme: dark;
+
+ }
+}
+
+[data-theme="light"] { 
+  --leo-theme: light;
+
+}
+
+[data-theme="dark"] { 
+  --leo-theme: dark;
+
+}
Variables Diff: variables-browser.diff 
--- ./tokens/css/variables-browser.old.css	2026-02-11 02:12:32.686289964 +0000
+++ ./tokens/css/variables-browser.css	2026-02-11 02:11:59.614310527 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sun Feb 08 2026 20:57:54 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Feb 11 2026 02:11:59 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
@@ -99,6 +99,7 @@
 
 @media (prefers-color-scheme: light) {
  :root {
+  --leo-theme: light;
   --leo-effect-active-tab-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
   --leo-effect-browser-frame-shadow-0: 0px 0px 0px 0.75px rgba(6, 6, 5, 0.2);
   --leo-effect-browser-frame-shadow-1: inset 0px 1px 0.5px 0px rgba(255, 255, 255, 0.32);
@@ -108,6 +109,7 @@
 
 @media (prefers-color-scheme: dark) {
  :root {
+  --leo-theme: dark;
   --leo-effect-active-tab-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
   --leo-effect-browser-frame-shadow-0: 0px 0px 0px 0.75px rgba(6, 6, 5, 0.2);
   --leo-effect-browser-frame-shadow-1: inset 0px 1px 0.5px 0px rgba(255, 255, 255, 0.32);
@@ -115,14 +117,16 @@
  }
 }
 
-[data-theme="light"] {
+[data-theme="light"] { 
+  --leo-theme: light;
   --leo-effect-active-tab-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
   --leo-effect-browser-frame-shadow-0: 0px 0px 0px 0.75px rgba(6, 6, 5, 0.2);
   --leo-effect-browser-frame-shadow-1: inset 0px 1px 0.5px 0px rgba(255, 255, 255, 0.32);
   --leo-effect-url-bar-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.1), 0px 4px 8px -2px rgba(0, 0, 0, 0.1);
 }
 
-[data-theme="dark"] {
+[data-theme="dark"] { 
+  --leo-theme: dark;
   --leo-effect-active-tab-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
   --leo-effect-browser-frame-shadow-0: 0px 0px 0px 0.75px rgba(6, 6, 5, 0.2);
   --leo-effect-browser-frame-shadow-1: inset 0px 1px 0.5px 0px rgba(255, 255, 255, 0.32);
Variables Diff: variables-ios.diff 
--- ./tokens/css/variables-ios.old.css	2026-02-11 02:12:32.845289899 +0000
+++ ./tokens/css/variables-ios.css	2026-02-11 02:11:59.646310525 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sun Feb 08 2026 20:57:54 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Feb 11 2026 02:11:59 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
@@ -124,3 +124,27 @@
   --leo-typography-ios-x-small-semibold-paragraph-indent: 0;
   --leo-typography-ios-x-small-semibold-paragraph-spacing: 0;
 }
+
+@media (prefers-color-scheme: light) {
+ :root {
+  --leo-theme: light;
+
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+  --leo-theme: dark;
+
+ }
+}
+
+[data-theme="light"] { 
+  --leo-theme: light;
+
+}
+
+[data-theme="dark"] { 
+  --leo-theme: dark;
+
+}
Variables Diff: variables-marketing.diff 
--- ./tokens/css/variables-marketing.old.css	2026-02-11 02:12:33.060289844 +0000
+++ ./tokens/css/variables-marketing.css	2026-02-11 02:11:59.667310523 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sun Feb 08 2026 20:57:54 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Feb 11 2026 02:11:59 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
@@ -218,6 +218,7 @@
 
 @media (prefers-color-scheme: light) {
  :root {
+  --leo-theme: light;
   --leo-effect-stroke: 0px 0px 0px 3px rgb(0, 0, 0);
   --leo-effect-stroke-shadow: 8px 8px 0px 0px rgb(0, 0, 0), 0px 0px 0px 3px rgb(0, 0, 0);
  }
@@ -225,17 +226,20 @@
 
 @media (prefers-color-scheme: dark) {
  :root {
+  --leo-theme: dark;
   --leo-effect-stroke: 0px 0px 0px 3px rgb(0, 0, 0);
   --leo-effect-stroke-shadow: 8px 8px 0px 0px rgb(0, 0, 0), 0px 0px 0px 3px rgb(0, 0, 0);
  }
 }
 
-[data-theme="light"] {
+[data-theme="light"] { 
+  --leo-theme: light;
   --leo-effect-stroke: 0px 0px 0px 3px rgb(0, 0, 0);
   --leo-effect-stroke-shadow: 8px 8px 0px 0px rgb(0, 0, 0), 0px 0px 0px 3px rgb(0, 0, 0);
 }
 
-[data-theme="dark"] {
+[data-theme="dark"] { 
+  --leo-theme: dark;
   --leo-effect-stroke: 0px 0px 0px 3px rgb(0, 0, 0);
   --leo-effect-stroke-shadow: 8px 8px 0px 0px rgb(0, 0, 0), 0px 0px 0px 3px rgb(0, 0, 0);
 }
Variables Diff: variables-news.diff 
--- ./tokens/css/variables-news.old.css	2026-02-11 02:12:33.242289797 +0000
+++ ./tokens/css/variables-news.css	2026-02-11 02:11:59.719310520 +0000
@@ -1,9 +1,33 @@
 /**
  * Do not edit directly
- * Generated on Sun Feb 08 2026 20:57:54 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Feb 11 2026 02:11:59 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
   --leo-gradient-stroke-gradient-dark: linear-gradient(155.40180080220492deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.15) 41%, rgba(255, 255, 255, 0) 56.99999999999999%, rgba(255, 255, 255, 0.05) 100%);
   --leo-gradient-stroke-gradient-light: linear-gradient(155.40180080220492deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 41%, rgba(0, 0, 0, 0) 56.99999999999999%, rgba(0, 0, 0, 0.15) 100%);
 }
+
+@media (prefers-color-scheme: light) {
+ :root {
+  --leo-theme: light;
+
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+  --leo-theme: dark;
+
+ }
+}
+
+[data-theme="light"] { 
+  --leo-theme: light;
+
+}
+
+[data-theme="dark"] { 
+  --leo-theme: dark;
+
+}
Variables Diff: variables-newtab.diff 
--- ./tokens/css/variables-newtab.old.css	2026-02-11 02:12:33.412289755 +0000
+++ ./tokens/css/variables-newtab.css	2026-02-11 02:11:59.728310519 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sun Feb 08 2026 20:57:54 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Feb 11 2026 02:11:59 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
@@ -34,3 +34,27 @@
   --leo-typography-stats-h3-paragraph-indent: 0;
   --leo-typography-stats-h3-paragraph-spacing: 0;
 }
+
+@media (prefers-color-scheme: light) {
+ :root {
+  --leo-theme: light;
+
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+  --leo-theme: dark;
+
+ }
+}
+
+[data-theme="light"] { 
+  --leo-theme: light;
+
+}
+
+[data-theme="dark"] { 
+  --leo-theme: dark;
+
+}
Variables Diff: variables-search.diff 
--- ./tokens/css/variables-search.old.css	2026-02-11 02:12:33.607289703 +0000
+++ ./tokens/css/variables-search.css	2026-02-11 02:11:59.695310521 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sun Feb 08 2026 20:57:54 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Feb 11 2026 02:11:59 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
@@ -53,6 +53,7 @@
 
 @media (prefers-color-scheme: light) {
  :root {
+  --leo-theme: light;
   --leo-color-search-background-ask-input-field: var(--leo-color-schemes-surface-container-lowest);
   --leo-color-search-background-container: var(--leo-color-schemes-surface-container-lowest);
   --leo-color-search-background-container-interactive: var(--leo-color-primary-10);
@@ -167,6 +168,7 @@
 
 @media (prefers-color-scheme: dark) {
  :root {
+  --leo-theme: dark;
   --leo-color-search-background-ask-input-field: var(--leo-color-schemes-surface-container-highest);
   --leo-color-search-background-container: var(--leo-color-schemes-surface-container);
   --leo-color-search-background-container-interactive: var(--leo-color-search-primary-10);
@@ -279,7 +281,8 @@
  }
 }
 
-[data-theme="light"] {
+[data-theme="light"] { 
+  --leo-theme: light;
   --leo-color-search-background-ask-input-field: var(--leo-color-schemes-surface-container-lowest);
   --leo-color-search-background-container: var(--leo-color-schemes-surface-container-lowest);
   --leo-color-search-background-container-interactive: var(--leo-color-primary-10);
@@ -391,7 +394,8 @@
   --leo-color-search-yellow-70: var(--leo-color-yellow-70);
 }
 
-[data-theme="dark"] {
+[data-theme="dark"] { 
+  --leo-theme: dark;
   --leo-color-search-background-ask-input-field: var(--leo-color-schemes-surface-container-highest);
   --leo-color-search-background-container: var(--leo-color-schemes-surface-container);
   --leo-color-search-background-container-interactive: var(--leo-color-search-primary-10);
Variables Diff: variables-web3.diff 
--- ./tokens/css/variables-web3.old.css	2026-02-11 02:12:33.756289664 +0000
+++ ./tokens/css/variables-web3.css	2026-02-11 02:11:59.732310519 +0000
@@ -1,10 +1,11 @@
 /**
  * Do not edit directly
- * Generated on Sun Feb 08 2026 20:57:54 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Feb 11 2026 02:11:59 GMT+0000 (Coordinated Universal Time)
  */
 
 @media (prefers-color-scheme: light) {
  :root {
+  --leo-theme: light;
   --leo-effect-actions-shadow: 0px -1px 8px 0px rgba(0, 0, 0, 0.1);
   --leo-effect-navigation-shadow: 0px -8px 16px 0px var(--leo-color-elevation-primary);
  }
@@ -12,17 +13,20 @@
 
 @media (prefers-color-scheme: dark) {
  :root {
+  --leo-theme: dark;
   --leo-effect-actions-shadow: 0px -1px 8px 0px rgba(0, 0, 0, 0.1);
   --leo-effect-navigation-shadow: 0px -8px 16px 0px var(--leo-color-elevation-primary);
  }
 }
 
-[data-theme="light"] {
+[data-theme="light"] { 
+  --leo-theme: light;
   --leo-effect-actions-shadow: 0px -1px 8px 0px rgba(0, 0, 0, 0.1);
   --leo-effect-navigation-shadow: 0px -8px 16px 0px var(--leo-color-elevation-primary);
 }
 
-[data-theme="dark"] {
+[data-theme="dark"] { 
+  --leo-theme: dark;
   --leo-effect-actions-shadow: 0px -1px 8px 0px rgba(0, 0, 0, 0.1);
   --leo-effect-navigation-shadow: 0px -8px 16px 0px var(--leo-color-elevation-primary);
 }
Variables Diff: variables.diff 
--- ./tokens/css/variables.old.css	2026-02-11 02:12:34.050289588 +0000
+++ ./tokens/css/variables.css	2026-02-11 02:11:59.485310535 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Sun Feb 08 2026 20:57:54 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Feb 11 2026 02:11:59 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
@@ -793,6 +793,7 @@
 
 @media (prefers-color-scheme: light) {
  :root {
+  --leo-theme: light;
   --leo-color-legacy-background1: #fff;
   --leo-color-legacy-background2: #f8f9fa;
   --leo-color-legacy-disabled: #dadce8;
@@ -1113,6 +1114,7 @@
 
 @media (prefers-color-scheme: dark) {
  :root {
+  --leo-theme: dark;
   --leo-color-blue-10: var(--leo-color-primitive-blue-15);
   --leo-color-blue-20: var(--leo-color-primitive-blue-25);
   --leo-color-blue-30: var(--leo-color-primitive-blue-40);
@@ -1431,7 +1433,8 @@
  }
 }
 
-[data-theme="light"] {
+[data-theme="light"] { 
+  --leo-theme: light;
   --leo-color-legacy-background1: #fff;
   --leo-color-legacy-background2: #f8f9fa;
   --leo-color-legacy-disabled: #dadce8;
@@ -1749,7 +1752,8 @@
   --leo-effect-notificationbackdrop: inset 0px 0px 1px 0px rgba(255, 255, 255, 0.1), 0px 1px 1px 0px var(--leo-color-elevation-primary), 0px 4px 8px 0px var(--leo-color-elevation-secondary);
 }
 
-[data-theme="dark"] {
+[data-theme="dark"] { 
+  --leo-theme: dark;
   --leo-color-blue-10: var(--leo-color-primitive-blue-15);
   --leo-color-blue-20: var(--leo-color-primitive-blue-25);
   --leo-color-blue-30: var(--leo-color-primitive-blue-40);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@AlanBreck AlanBreck AlanBreck approved these changes
@petemill petemill Awaiting requested review from petemill petemill is a code owner

Assignees

No one assigned

Labels

puLL-Merge

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

@theme plugin fixes for deprecation of :host-context

3 participants

@fallaciousreasoning @petemill @AlanBreck