fix: include the ":root" selector in tokens CSS for use in the docs site

packages/styles/package.json

@@ -81,7 +81,7 @@
     },
     "customElements": "custom-elements.json",
     "sideEffects": [
-        "./*.css"
+        "./**/*.css"
     ],
     "style": "all-medium-lightest.css"
 }

packages/styles/tokens/dark-vars.css

@@ -10,7 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-:host {
+:host,
+:root {
     --spectrum-neutral-background-color-default: var(--spectrum-gray-400);
     --spectrum-neutral-background-color-hover: var(--spectrum-gray-300);
     --spectrum-neutral-background-color-down: var(--spectrum-gray-200);

packages/styles/tokens/darkest-vars.css

@@ -10,7 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-:host {
+:host,
+:root {
     --spectrum-neutral-background-color-default: var(--spectrum-gray-400);
     --spectrum-neutral-background-color-hover: var(--spectrum-gray-300);
     --spectrum-neutral-background-color-down: var(--spectrum-gray-200);

packages/styles/tokens/express/custom-large-vars.css

@@ -12,6 +12,7 @@ governing permissions and limitations under the License.
 
 /* This file contains overrides and additions to core tokens */
 
-:host {
+:host,
+:root {
     /*  */
 }

packages/styles/tokens/express/custom-medium-vars.css

@@ -12,6 +12,7 @@ governing permissions and limitations under the License.
 
 /* This file contains overrides and additions to core tokens */
 
-:host {
+:host,
+:root {
     /*  */
 }

packages/styles/tokens/express/custom-vars.css

@@ -12,6 +12,7 @@ governing permissions and limitations under the License.
 
 /* This file contains overrides and additions to core tokens */
 
-:host {
+:host,
+:root {
     --system: express;
 }

packages/styles/tokens/express/global-vars.css

@@ -10,7 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-:host {
+:host,
+:root {
     --spectrum-accent-color-100: var(--spectrum-indigo-100);
     --spectrum-accent-color-200: var(--spectrum-indigo-200);
     --spectrum-accent-color-300: var(--spectrum-indigo-300);
@@ -27,7 +28,8 @@ governing permissions and limitations under the License.
     --spectrum-accent-color-1400: var(--spectrum-indigo-1400);
     --spectrum-border-width-100: 2px;
 }
-:host {
+:host,
+:root {
     --system-spectrum-actionbutton-background-color-default: var(
         --spectrum-gray-200
     );

packages/styles/tokens/express/large-vars.css

@@ -10,7 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-:host {
+:host,
+:root {
     --spectrum-checkbox-control-size-small: 18px;
     --spectrum-checkbox-control-size-medium: 20px;
     --spectrum-checkbox-control-size-large: 22px;

packages/styles/tokens/express/medium-vars.css

@@ -10,7 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-:host {
+:host,
+:root {
     --spectrum-checkbox-control-size-small: 14px;
     --spectrum-checkbox-control-size-medium: 16px;
     --spectrum-checkbox-control-size-large: 18px;

packages/styles/tokens/global-vars.css

@@ -10,7 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-:host {
+:host,
+:root {
     --spectrum-transparent-white-200: rgba(255, 255, 255, 0.1);
     --spectrum-transparent-white-300: rgba(255, 255, 255, 0.25);
     --spectrum-transparent-white-400: rgba(255, 255, 255, 0.4);

packages/styles/tokens/large-vars.css

@@ -10,7 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-:host {
+:host,
+:root {
     --spectrum-component-pill-edge-to-visual-75: 13px;
     --spectrum-component-pill-edge-to-visual-100: 17px;
     --spectrum-component-pill-edge-to-visual-200: 22px;

packages/styles/tokens/light-vars.css

@@ -10,7 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-:host {
+:host,
+:root {
     --spectrum-neutral-background-color-default: var(--spectrum-gray-800);
     --spectrum-neutral-background-color-hover: var(--spectrum-gray-900);
     --spectrum-neutral-background-color-down: var(--spectrum-gray-900);

packages/styles/tokens/medium-vars.css

@@ -10,7 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-:host {
+:host,
+:root {
     --spectrum-component-pill-edge-to-visual-75: 10px;
     --spectrum-component-pill-edge-to-visual-100: 14px;
     --spectrum-component-pill-edge-to-visual-200: 18px;

packages/styles/tokens/spectrum/custom-large-vars.css

@@ -12,7 +12,8 @@ governing permissions and limitations under the License.
 
 /* This file contains overrides and additions to core tokens */
 
-:host {
+:host,
+:root {
     /* edge-to-visual-only is used for icon-only buttons */
     --spectrum-edge-to-visual-only-75: 5px;
     --spectrum-edge-to-visual-only-100: 9px;

packages/styles/tokens/spectrum/custom-medium-vars.css

@@ -12,7 +12,8 @@ governing permissions and limitations under the License.
 
 /* This file contains overrides and additions to core tokens */
 
-:host {
+:host,
+:root {
     /* edge-to-visual-only is used for icon-only buttons */
     --spectrum-edge-to-visual-only-75: 4px;
     --spectrum-edge-to-visual-only-100: 7px;

packages/styles/tokens/spectrum/custom-vars.css

@@ -11,11 +11,13 @@ governing permissions and limitations under the License.
 */
 
 /* This file contains overrides and additions to core tokens */
-:host {
+:host,
+:root {
     --system: spectrum;
 }
 
-:host {
+:host,
+:root {
     --spectrum-animation-duration-100: 130ms;
 
     --spectrum-font-family-base: adobe-clean, 'Source Sans Pro', -apple-system,

packages/styles/tokens/spectrum/global-vars.css

@@ -10,7 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-:host {
+:host,
+:root {
     --spectrum-accent-color-100: var(--spectrum-blue-100);
     --spectrum-accent-color-200: var(--spectrum-blue-200);
     --spectrum-accent-color-300: var(--spectrum-blue-300);
@@ -41,7 +42,8 @@ governing permissions and limitations under the License.
     --spectrum-radio-button-top-to-control-extra-large-mobile: 19px;
     --spectrum-border-width-100: 1px;
 }
-:host {
+:host,
+:root {
     --system-spectrum-actionbutton-background-color-default: var(
         --spectrum-gray-75
     );

packages/styles/tokens/spectrum/large-vars.css

@@ -10,7 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-:host {
+:host,
+:root {
     --spectrum-checkbox-control-size-small: 16px;
     --spectrum-checkbox-control-size-medium: 18px;
     --spectrum-checkbox-control-size-large: 20px;

packages/styles/tokens/spectrum/medium-vars.css

@@ -10,7 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-:host {
+:host,
+:root {
     --spectrum-checkbox-control-size-small: 12px;
     --spectrum-checkbox-control-size-medium: 14px;
     --spectrum-checkbox-control-size-large: 16px;

projects/documentation/src/components/styles.css

@@ -11,23 +11,48 @@ governing permissions and limitations under the License.
 */
 
 @import '@spectrum-web-components/styles/core-global.css';
+@import '@spectrum-web-components/styles/tokens/global-vars.css';
+@import '@spectrum-web-components/styles/tokens/spectrum/global-vars.css';
+@import '@spectrum-web-components/styles/tokens/spectrum/custom-vars.css';
 @import '@spectrum-web-components/styles/fonts.css';
 @import '@spectrum-web-components/styles/typography.css';
 @import '@spectrum-css/table/dist/index-vars.css';
 
 @import '@spectrum-web-components/styles/scale-medium.css' screen and
         (min-width: 701px) and (min-height: 701px),
-    not (hover: none), not (pointer: coarse);
+    (hover: hover), (pointer: fine);
+@import '@spectrum-web-components/styles/tokens/medium-vars.css' screen and
+        (min-width: 701px) and (min-height: 701px),
+    (hover: hover), (pointer: fine);
+@import '@spectrum-web-components/styles/tokens/spectrum/custom-medium-vars.css' screen and
+        (min-width: 701px) and (min-height: 701px),
+    (hover: hover), (pointer: fine);
+@import '@spectrum-web-components/styles/tokens/spectrum/medium-vars.css' screen and
+        (min-width: 701px) and (min-height: 701px),
+    (hover: hover), (pointer: fine);
 @import '@spectrum-web-components/styles/scale-large.css' screen and
         (max-width: 700px) and (hover: none) and (pointer: coarse),
     (max-height: 700px) and (hover: none) and (pointer: coarse);
+@import '@spectrum-web-components/styles/tokens/large-vars.css' screen and
+        (max-width: 700px) and (hover: none) and (pointer: coarse),
+    (max-height: 700px) and (hover: none) and (pointer: coarse);
+@import '@spectrum-web-components/styles/tokens/spectrum/custom-large-vars.css' screen and
+        (max-width: 700px) and (hover: none) and (pointer: coarse),
+    (max-height: 700px) and (hover: none) and (pointer: coarse);
+@import '@spectrum-web-components/styles/tokens/spectrum/large-vars.css' screen and
+        (max-width: 700px) and (hover: none) and (pointer: coarse),
+    (max-height: 700px) and (hover: none) and (pointer: coarse);
 
 @import '@spectrum-web-components/styles/theme-dark.css' screen and
     (prefers-color-scheme: dark);
+@import '@spectrum-web-components/styles/tokens/dark-vars.css' screen and
+    (prefers-color-scheme: dark);
 @import 'prismjs/themes/prism-okaidia.css' screen and
     (prefers-color-scheme: dark);
 @import '@spectrum-web-components/styles/theme-light.css' screen and
     (prefers-color-scheme: light);
+@import '@spectrum-web-components/styles/tokens/light-vars.css' screen and
+    (prefers-color-scheme: light);
 @import 'prismjs/themes/prism.css' screen and (prefers-color-scheme: light);
 
 @import './fonts.css';
@@ -180,7 +205,7 @@ body {
     font-weight: 700;
     line-height: 1.3;
     font-style: normal;
-    letter-spacing: 0px;
+    letter-spacing: 0;
     margin: -3px 0 0;
     font-family: var(
         --spectrum-alias-body-text-font-family,
@@ -405,6 +430,7 @@ sp-divider[size='s']:not(:defined) {
     .feature {
         flex: 0 1 calc(50% - 30px);
     }
+
     .feature:first-of-type {
         flex-basis: 100%;
     }
@@ -414,6 +440,7 @@ sp-divider[size='s']:not(:defined) {
     .feature {
         flex: 0 1 calc(33.33% - 30px);
     }
+
     .feature:first-of-type {
         flex: 0 1 calc(33.33% - 30px);
     }
@@ -423,6 +450,7 @@ sp-divider[size='s']:not(:defined) {
     .feature {
         flex: 0 1 calc(50% - 30px);
     }
+
     .feature:first-of-type {
         flex-basis: 100%;
     }
@@ -571,6 +599,7 @@ img[src^="https://img.shields.io"]
     height: 28px;
     min-width: 100px;
 }
+
 /*! purgecss end ignore */
 
 .markup,
@@ -589,7 +618,7 @@ code-example:not(:defined) {
 code-example:not(:defined) {
     border-radius: 6px;
     display: block;
-    margin: 1rem 0 2rem 0;
+    margin: 1rem 0 2rem;
     min-height: 86px;
 }
 
@@ -603,6 +632,7 @@ code-example:not(:defined) pre {
 
 code-example {
     --spectrum-dialog-confirm-min-width: 0;
+
     width: 100%;
     box-sizing: border-box;
 }
@@ -661,7 +691,7 @@ sp-tabs[selected='api'] sp-tab-panel[value='api'] {
 }
 
 .docExample {
-    margin: 1.2em 0 1.5em 0;
+    margin: 1.2em 0 1.5em;
 }
 
 main > sp-tabs > sp-tab:only-of-type {
@@ -709,7 +739,7 @@ icons-demo {
     width: 100%;
     border: 2px solid;
     border-radius: 6px;
-    padding: 0 1.5rem 0.75rem 1.5rem;
+    padding: 0 1.5rem 0.75rem;
     height: 400px;
     overflow: hidden auto;
     position: relative;

scripts/spectrum-tokens.js

@@ -44,19 +44,25 @@ const packagePaths = tokenPackages.map((packageName) => {
 });
 
 const targetHost = (css) => {
-    css = css.replaceAll(/.spectrum {/g, ':host {');
-    css = css.replaceAll(/.spectrum--express {/g, ':host {');
+    css = css.replaceAll(/.spectrum {/g, ':host, :root {');
+    css = css.replaceAll(/.spectrum--express {/g, ':host, :root {');
     css = css.replaceAll(
         /^.spectrum--light, .spectrum--lightest {/g,
-        ':host {'
+        ':host, :root {'
     );
-    css = css.replaceAll(/.spectrum--dark {/g, ':host {');
-    css = css.replaceAll(/.spectrum--darkest {/g, ':host {');
-    css = css.replaceAll(/.spectrum--darkest {/g, ':host {');
-    css = css.replaceAll(/.spectrum--express.spectrum--medium {/g, ':host {');
-    css = css.replaceAll(/.spectrum--express.spectrum--large {/g, ':host {');
-    css = css.replaceAll(/.spectrum--medium {/g, ':host {');
-    css = css.replaceAll(/.spectrum--large {/g, ':host {');
+    css = css.replaceAll(/.spectrum--dark {/g, ':host, :root {');
+    css = css.replaceAll(/.spectrum--darkest {/g, ':host, :root {');
+    css = css.replaceAll(/.spectrum--darkest {/g, ':host, :root {');
+    css = css.replaceAll(
+        /.spectrum--express.spectrum--medium {/g,
+        ':host, :root {'
+    );
+    css = css.replaceAll(
+        /.spectrum--express.spectrum--large {/g,
+        ':host, :root {'
+    );
+    css = css.replaceAll(/.spectrum--medium {/g, ':host, :root {');
+    css = css.replaceAll(/.spectrum--large {/g, ':host, :root {');
 
     return css;
 };