fix(styles, theme): surface exports that omit Spectrum Vars proactive…

…ly (#4142)

* docs: remove usage of Spectrum Vars

* fix(theme): vend tokens only versions

* docs: remove Spectrum Vars from stories

* chore(theme): file naming and code review updates

* docs(theme): add information around the core-token only exports

* ci: update golden images cache

* chore: code review updates

.circleci/config.yml

@@ -10,7 +10,7 @@ executors:
 parameters:
     current_golden_images_hash:
         type: string
-        default: e5637267c667bd4719e8044e1f2b2b2ff1625cfa
+        default: fbac3bdcdee3a5e52972b9aa87e52b2cf5b82bfe
     wireit_cache_name:
         type: string
         default: wireit

package.json

@@ -381,7 +381,9 @@
             "output": [
                 "packages/*/src/spectrum-*.css",
                 "tools/*/src/spectrum-*.css",
-                "tools/styles/*.css"
+                "tools/styles/*.css",
+                "!tools/styles/scale-medium.css",
+                "!tools/styles/scale-large.css"
             ],
             "clean": false
         },

packages/action-button/stories/index.ts

@@ -90,7 +90,7 @@ export function renderButtons(properties: Properties): TemplateResult {
     const disabled = true;
     return html`
         <div
-            style="display: flex; flex-direction: column; gap: var(--spectrum-global-dimension-size-100);"
+            style="display: flex; flex-direction: column; gap: calc(var(--spectrum-spacing-100) * var(--swc-scale-factor));"
         >
             ${renderGroup({
                 ...properties,

packages/action-group/src/action-group.css

@@ -53,42 +53,86 @@ governing permissions and limitations under the License.
 
 :host([compact][vertical]:not([quiet])) ::slotted(:not([role]):first-child) {
     /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */
-    --overriden-border-radius: var(--spectrum-alias-component-border-radius)
-        var(--spectrum-alias-component-border-radius) 0 0;
+    --overriden-border-radius: var(
+            --mod-actiongroup-border-radius,
+            var(--spectrum-actiongroup-border-radius)
+        )
+        var(
+            --mod-actiongroup-border-radius,
+            var(--spectrum-actiongroup-border-radius)
+        )
+        0 0;
 }
 
 :host([compact][vertical]:not([quiet])) ::slotted(:not([role]):last-child) {
     /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */
-    --overriden-border-radius: 0 0 var(--spectrum-alias-component-border-radius)
-        var(--spectrum-alias-component-border-radius);
+    --overriden-border-radius: 0 0
+        var(
+            --mod-actiongroup-border-radius,
+            var(--spectrum-actiongroup-border-radius)
+        )
+        var(
+            --mod-actiongroup-border-radius,
+            var(--spectrum-actiongroup-border-radius)
+        );
 }
 
 :host([dir='ltr'][compact]:not([quiet], [vertical]))
     ::slotted(:not([role]):first-child) {
     /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */
-    --overriden-border-radius: var(--spectrum-alias-component-border-radius) 0 0
-        var(--spectrum-alias-component-border-radius);
+    --overriden-border-radius: var(
+            --mod-actiongroup-border-radius,
+            var(--spectrum-actiongroup-border-radius)
+        )
+        0 0
+        var(
+            --mod-actiongroup-border-radius,
+            var(--spectrum-actiongroup-border-radius)
+        );
 }
 
 :host([dir='rtl'][compact]:not([quiet], [vertical]))
     ::slotted(:not([role]):first-child) {
     /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */
-    --overriden-border-radius: 0 var(--spectrum-alias-component-border-radius)
-        var(--spectrum-alias-component-border-radius) 0;
+    --overriden-border-radius: 0
+        var(
+            --mod-actiongroup-border-radius,
+            var(--spectrum-actiongroup-border-radius)
+        )
+        var(
+            --mod-actiongroup-border-radius,
+            var(--spectrum-actiongroup-border-radius)
+        )
+        0;
 }
 
 :host([dir='ltr'][compact]:not([quiet], [vertical]))
     ::slotted(:not([role]):last-child) {
     /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */
-    --overriden-border-radius: 0 var(--spectrum-alias-component-border-radius)
-        var(--spectrum-alias-component-border-radius) 0;
+    --overriden-border-radius: 0
+        var(
+            --mod-actiongroup-border-radius,
+            var(--spectrum-actiongroup-border-radius)
+        )
+        var(
+            --mod-actiongroup-border-radius,
+            var(--spectrum-actiongroup-border-radius)
+        )
+        0;
 }
 
 :host([dir='rtl'][compact]:not([quiet], [vertical]))
     ::slotted(:not([role]):last-child) {
     /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */
-    --overriden-border-radius: var(--spectrum-alias-component-border-radius) 0 0
-        var(--spectrum-alias-component-border-radius);
+    --overriden-border-radius: var(
+            --mod-actiongroup-border-radius,
+            var(--spectrum-actiongroup-border-radius)
+        )
+        0 0
+        var(
+            --mod-actiongroup-border-radius,
+            var(--spectrum-actiongroup-border-radius)
+        );
 }
 
 :host([compact]:not([quiet])) ::slotted(*) {
@@ -100,42 +144,74 @@ governing permissions and limitations under the License.
     --mod-actionbutton-focus-ring-border-radius: var(
             --spectrum-alias-component-border-radius
         )
-        var(--spectrum-alias-component-border-radius) 0 0;
+        var(
+            --mod-actiongroup-border-radius,
+            var(--spectrum-actiongroup-border-radius)
+        )
+        0 0;
 }
 
 :host([compact][vertical]:not([quiet])) ::slotted(:last-child) {
     /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */
     --mod-actionbutton-focus-ring-border-radius: 0 0
-        var(--spectrum-alias-component-border-radius)
-        var(--spectrum-alias-component-border-radius);
+        var(
+            --mod-actiongroup-border-radius,
+            var(--spectrum-actiongroup-border-radius)
+        )
+        var(
+            --mod-actiongroup-border-radius,
+            var(--spectrum-actiongroup-border-radius)
+        );
 }
 
 :host([dir='ltr'][compact]:not([quiet], [vertical])) ::slotted(:first-child) {
     /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */
     --mod-actionbutton-focus-ring-border-radius: var(
             --spectrum-alias-component-border-radius
         )
-        0 0 var(--spectrum-alias-component-border-radius);
+        0 0
+        var(
+            --mod-actiongroup-border-radius,
+            var(--spectrum-actiongroup-border-radius)
+        );
 }
 
 :host([dir='rtl'][compact]:not([quiet], [vertical])) ::slotted(:first-child) {
     /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */
     --mod-actionbutton-focus-ring-border-radius: 0
-        var(--spectrum-alias-component-border-radius)
-        var(--spectrum-alias-component-border-radius) 0;
+        var(
+            --mod-actiongroup-border-radius,
+            var(--spectrum-actiongroup-border-radius)
+        )
+        var(
+            --mod-actiongroup-border-radius,
+            var(--spectrum-actiongroup-border-radius)
+        )
+        0;
 }
 
 :host([dir='ltr'][compact]:not([quiet], [vertical])) ::slotted(:last-child) {
     /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */
     --mod-actionbutton-focus-ring-border-radius: 0
-        var(--spectrum-alias-component-border-radius)
-        var(--spectrum-alias-component-border-radius) 0;
+        var(
+            --mod-actiongroup-border-radius,
+            var(--spectrum-actiongroup-border-radius)
+        )
+        var(
+            --mod-actiongroup-border-radius,
+            var(--spectrum-actiongroup-border-radius)
+        )
+        0;
 }
 
 :host([dir='rtl'][compact]:not([quiet], [vertical])) ::slotted(:last-child) {
     /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */
     --mod-actionbutton-focus-ring-border-radius: var(
             --spectrum-alias-component-border-radius
         )
-        0 0 var(--spectrum-alias-component-border-radius);
+        0 0
+        var(
+            --mod-actiongroup-border-radius,
+            var(--spectrum-actiongroup-border-radius)
+        );
 }

packages/button/stories/index.ts

@@ -98,15 +98,14 @@ export const makeOverBackground =
         const color =
             variant === 'black'
                 ? 'rgb(181, 209, 211)'
-                : 'var(--spectrum-global-color-seafoam-600)';
+                : 'var(--spectrum-seafoam-900)';
         return html`
             <div
                 style="
                     --mod-actionbutton-static-content-color: ${color};
                     --mod-button-static-content-color: ${color};
                     background-color: ${color};
-                    color: ${color};
-                    padding: var(--spectrum-global-dimension-size-175) var(--spectrum-global-dimension-size-250);
+                    padding: calc(var(--swc-scale-factor) * 14px) calc(var(--swc-scale-factor) * 20px);
                     display: inline-block;
                 "
             >

packages/dialog/src/dialog.css

@@ -23,7 +23,7 @@ governing permissions and limitations under the License.
 .footer {
     color: var(
         --spectrum-dialog-confirm-description-text-color,
-        var(--spectrum-global-color-gray-800)
+        var(--spectrum-gray-800)
     );
 }
 

packages/dialog/stories/dialog-wrapper.stories.ts

@@ -214,10 +214,8 @@ export const form = (
                 <style>
                     #form-fields div {
                         display: grid;
-                        row-gap: var(--spectrum-global-dimension-size-150);
+                        row-gap: calc(var(--swc-scale-factor) * 12px);
                         grid-template-columns: auto auto;
-
-                        --spectrum-fieldlabel-m-side-padding-right: 0;
                     }
                 </style>
                 <div>

packages/meter/stories/meter.stories.ts

@@ -19,13 +19,28 @@ export default {
     component: 'sp-meter',
 };
 
-const makeOverBackground = (story: TemplateResult): TemplateResult => html`
-    <div
-        style="background-color: var(--spectrum-global-color-seafoam-600); color: var(--spectrum-global-color-seafoam-600); padding: var(--spectrum-global-dimension-size-175) var(--spectrum-global-dimension-size-250); display: inline-block"
-    >
-        ${story}
-    </div>
-`;
+const makeOverBackground =
+    (variant?: 'white' | 'black') =>
+    (story: () => TemplateResult): TemplateResult => {
+        const color =
+            variant === 'black'
+                ? 'rgb(181, 209, 211)'
+                : 'var(--spectrum-seafoam-900)';
+        return html`
+            <div
+                style="
+                    --mod-actionbutton-static-content-color: ${color};
+                    --mod-button-static-content-color: ${color};
+                    background-color: ${color};
+                    color: ${color};
+                    padding: var(--spectrum-font-size-100) var(--spectrum-font-size-400);
+                    display: inline-block;
+                "
+            >
+                ${story()}
+            </div>
+        `;
+    };
 
 export const sideLabel = (): TemplateResult => {
     return html`
@@ -52,9 +67,10 @@ export const positive = (): TemplateResult => {
 };
 
 export const staticWhite = (): TemplateResult => {
-    return makeOverBackground(
-        html`
-            <sp-meter static="white" progress="50">Storage Space</sp-meter>
-        `
+    return makeOverBackground('white')(
+        (): TemplateResult =>
+            html`
+                <sp-meter static="white" progress="50">Storage Space</sp-meter>
+            `
     );
 };

packages/number-field/stories/number-field.stories.ts

@@ -468,7 +468,7 @@ export const ScrollingContainer = (args: StoryArgs = {}): TemplateResult => {
                 width: 200px;
                 overflow-y: scroll;
                 padding: 10px;
-                background: var(--spectrum-global-color-gray-50);
+                background: var(--spectrum-gray-50);
             }
 
             .scroller > div {

packages/overlay/stories/overlay-story-components.ts

@@ -43,7 +43,7 @@ class OverlayTargetIcon extends LitElement {
             :host {
                 position: absolute;
                 display: block;
-                color: var(--spectrum-global-color-magenta-700);
+                color: var(--spectrum-magenta-900);
                 width: 64px;
                 height: 64px;
                 top: 0;

packages/overlay/stories/overlay.stories.ts

@@ -183,11 +183,7 @@ const template = ({
                             </sp-dialog>
                         </sp-popover>
 
-                        <sp-tooltip
-                            slot="hover-content"
-                            delayed
-                            tip="bottom"
-                        >
+                        <sp-tooltip slot="hover-content" delayed tip="bottom">
                             Click to open another popover.
                         </sp-tooltip>
                     </overlay-trigger>
@@ -545,11 +541,11 @@ export const customizedClickContent = (
     args: Properties
 ): TemplateResult => html`
     <style>
-        overlay-trigger {
+        sp-popover {
             --styled-div-background-color: var(
-                --spectrum-semantic-cta-background-color-default
+                --spectrum-accent-background-color-default
             );
-            --spectrum-button-m-accent-fill-texticon-background-color: rebeccapurple;
+            --mod-button-background-color-default: rebeccapurple;
         }
     </style>
     ${template({
@@ -648,9 +644,9 @@ export const deepNesting = (): TemplateResult => {
                 <recursive-popover
                     tabindex=""
                     style="
-                        background-color: var(--spectrum-global-color-gray-100);
-                        color: var(--spectrum-global-color-gray-800);
-                        padding: var(--spectrum-global-dimension-size-225);
+                        background-color: var(--spectrum-gray-100);
+                        color: var(--spectrum-gray-800);
+                        padding: calc(var(--swc-scale-factor) * 22px);
                     "
                 ></recursive-popover>
             </sp-theme>
@@ -785,8 +781,8 @@ export const detachedElement = (): TemplateResult => {
         div.setAttribute(
             'style',
             `
-            background-color: var(--spectrum-global-color-gray-50);
-            color: var(--spectrum-global-color-gray-800);
+            background-color: var(--spectrum-gray-50);
+            color: var(--spectrum-gray-800);
             border: 1px solid;
             padding: 2em;
         `
@@ -928,7 +924,7 @@ export const longpress = (): TemplateResult => {
                         )}
                     selects="single"
                     vertical
-                    style="margin: calc(var(--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)) / 2);"
+                    style="margin: calc(var(--spectrum-actiongroup-button-gap-y,calc(var(--swc-scale-factor) * 10px)) / 2);"
                 >
                     <sp-action-button>
                         <sp-icon-magnify slot="icon"></sp-icon-magnify>

packages/popover/stories/popover.stories.ts

@@ -63,7 +63,7 @@ export default {
 
 export const Default = ({ content }: { content: string }): TemplateResult => {
     return html`
-        <div style="color: var(--spectrum-global-color-gray-800)">
+        <div style="color: var(--spectrum-gray-800)">
             <sp-popover variant="default" open style="max-width: 320px">
                 <div style="font-size: 14px; padding: 10px">${content}</div>
             </sp-popover>
@@ -94,7 +94,7 @@ interface StoryArgs {
 const Template = ({ tip, placement, open }: StoryArgs): TemplateResult => {
     return html`
         <div
-            style="color: var(--spectrum-global-color-gray-800); position: relative; display: contents"
+            style="color: var(--spectrum-gray-800); position: relative; display: contents"
         >
             <sp-popover
                 variant="dialog"