Skip to content

Commit

Permalink
fix(styles, theme): surface exports that omit Spectrum Vars proactive…
Browse files Browse the repository at this point in the history 
…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
  • Loading branch information
@Westbrook
Westbrook committed Mar 19, 2024
1 parent d358e1c commit 5b524c1
Show file tree
Hide file tree
Showing 77 changed files with 1,188 additions and 399 deletions.
2 changes: 1 addition & 1 deletion .circleci/config.yml
View file
Expand Up @@ -10,7 +10,7 @@ executors:
parameters:
current_golden_images_hash:
type: string
default: e5637267c667bd4719e8044e1f2b2b2ff1625cfa
default: fbac3bdcdee3a5e52972b9aa87e52b2cf5b82bfe
wireit_cache_name:
type: string
default: wireit
Expand Down
4 changes: 3 additions & 1 deletion package.json
View file
Expand Up @@ -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
},
Expand Down
2 changes: 1 addition & 1 deletion packages/action-button/stories/index.ts
View file
Expand Up @@ -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,
Expand Down
118 changes: 97 additions & 21 deletions packages/action-group/src/action-group.css
View file
Expand Up @@ -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(*) {
Expand All @@ -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)
);
}
5 changes: 2 additions & 3 deletions packages/button/stories/index.ts
View file
Expand Up @@ -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;
"
>
Expand Down
2 changes: 1 addition & 1 deletion packages/dialog/src/dialog.css
View file
Expand Up @@ -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)
);
}

Expand Down
4 changes: 1 addition & 3 deletions packages/dialog/stories/dialog-wrapper.stories.ts
View file
Expand Up @@ -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>
Expand Down
38 changes: 27 additions & 11 deletions packages/meter/stories/meter.stories.ts
View file
Expand Up @@ -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`
Expand All @@ -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>
`
);
};
2 changes: 1 addition & 1 deletion packages/number-field/stories/number-field.stories.ts
View file
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion packages/overlay/stories/overlay-story-components.ts
View file
Expand Up @@ -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;
Expand Down
24 changes: 10 additions & 14 deletions packages/overlay/stories/overlay.stories.ts
View file
Expand Up @@ -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>
Expand Down Expand Up @@ -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({
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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;
`
Expand Down Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions packages/popover/stories/popover.stories.ts
View file
Expand Up @@ -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>
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit 5b524c1

Please sign in to comment.