diff --git a/.changeset/deep-sloths-fetch.md b/.changeset/deep-sloths-fetch.md new file mode 100644 index 00000000000..3b8a142664c --- /dev/null +++ b/.changeset/deep-sloths-fetch.md @@ -0,0 +1,24 @@ +--- +"@spectrum-css/actionbar": major +--- + +### Actionbar S2 Migration + +Action bar now has some updated colors, corner radius, and icons. There's a new look to the default and emphasized variants and each have a custom touch in both light and dark themes. + +The emphasized has changed from an `accent` background color to a `neutral` background color. + +#### New tokens + +`--spectrum-actionbar-emphasized-actionbutton-label-color` +`--spectrum-actionbar-emphasized-icon-color` +`--spectrum-actionbar-minimum-width` +`--spectrum-actionbar-spacing-label-to-actiongroup` +`--spectrum-actionbar-spacing-action-group-edge` +`--spectrum-actionbar-close-button-to-counter` + +#### New mods + +`--mod-actionbar-minimum-width` +`--mod-actionbar-spacing-action-group-edge` +`--mod-actionbar-spacing-label-to-actiongroup` diff --git a/components/actionbar/dist/metadata.json b/components/actionbar/dist/metadata.json index da9142c6fc3..6e9f90e7e58 100644 --- a/components/actionbar/dist/metadata.json +++ b/components/actionbar/dist/metadata.json @@ -2,14 +2,18 @@ "sourceFile": "index.css", "selectors": [ ".spectrum-ActionBar", + ".spectrum-ActionBar .spectrum-ActionBar-actiongroup", ".spectrum-ActionBar .spectrum-ActionBar-popover", ".spectrum-ActionBar .spectrum-ActionGroup", - ".spectrum-ActionBar .spectrum-CloseButton", ".spectrum-ActionBar .spectrum-FieldLabel", ".spectrum-ActionBar .spectrum-FieldLabel:lang(ja)", ".spectrum-ActionBar .spectrum-FieldLabel:lang(ko)", ".spectrum-ActionBar .spectrum-FieldLabel:lang(zh)", ".spectrum-ActionBar--emphasized .spectrum-ActionBar-popover", + ".spectrum-ActionBar--emphasized .spectrum-ActionBar-popover .spectrum-CloseButton:hover .spectrum-Icon", + ".spectrum-ActionBar--emphasized .spectrum-ActionGroup .spectrum-ActionButton .spectrum-ActionButton-icon", + ".spectrum-ActionBar--emphasized .spectrum-ActionGroup .spectrum-ActionButton .spectrum-ActionButton-label", + ".spectrum-ActionBar--emphasized .spectrum-CloseButton .spectrum-Icon", ".spectrum-ActionBar--emphasized .spectrum-FieldLabel", ".spectrum-ActionBar--fixed", ".spectrum-ActionBar--flexible .spectrum-ActionBar-popover", @@ -20,6 +24,7 @@ ".spectrum-ActionBar:lang(zh)" ], "modifiers": [ + "--mod-actionbar-close-button-to-counter", "--mod-actionbar-corner-radius", "--mod-actionbar-emphasized-background-color", "--mod-actionbar-emphasized-item-counter-color", @@ -28,66 +33,65 @@ "--mod-actionbar-item-counter-font-size", "--mod-actionbar-item-counter-line-height", "--mod-actionbar-item-counter-line-height-cjk", + "--mod-actionbar-minimum-width", "--mod-actionbar-popover-background-color", "--mod-actionbar-popover-border-color", "--mod-actionbar-shadow-blur", "--mod-actionbar-shadow-color", "--mod-actionbar-shadow-horizontal", "--mod-actionbar-shadow-vertical", - "--mod-actionbar-spacing-action-group-end", - "--mod-actionbar-spacing-action-group-top", - "--mod-actionbar-spacing-close-button-end", - "--mod-actionbar-spacing-close-button-start", - "--mod-actionbar-spacing-close-button-top", - "--mod-actionbar-spacing-item-counter-end", - "--mod-actionbar-spacing-item-counter-top", + "--mod-actionbar-spacing-action-group-edge", + "--mod-actionbar-spacing-label-to-actiongroup", "--mod-actionbar-spacing-outer-edge" ], "component": [ + "--spectrum-action-bar-border-color", + "--spectrum-action-bar-close-button-to-counter", + "--spectrum-action-bar-edge-to-content-area", "--spectrum-action-bar-height", - "--spectrum-action-bar-top-to-item-counter", + "--spectrum-action-bar-label-to-action-group-area", + "--spectrum-action-bar-minimum-width", + "--spectrum-actionbar-close-button-to-counter", "--spectrum-actionbar-corner-radius", + "--spectrum-actionbar-emphasized-action-button-label-color", "--spectrum-actionbar-emphasized-background-color", + "--spectrum-actionbar-emphasized-icon-color", "--spectrum-actionbar-emphasized-item-counter-color", "--spectrum-actionbar-height", "--spectrum-actionbar-item-counter-color", "--spectrum-actionbar-item-counter-font-size", "--spectrum-actionbar-item-counter-line-height", "--spectrum-actionbar-item-counter-line-height-cjk", + "--spectrum-actionbar-minimum-width", "--spectrum-actionbar-popover-background-color", "--spectrum-actionbar-popover-border-color", "--spectrum-actionbar-shadow-blur", "--spectrum-actionbar-shadow-color", "--spectrum-actionbar-shadow-horizontal", "--spectrum-actionbar-shadow-vertical", - "--spectrum-actionbar-spacing-action-group-end", - "--spectrum-actionbar-spacing-action-group-top", - "--spectrum-actionbar-spacing-close-button-end", - "--spectrum-actionbar-spacing-close-button-start", - "--spectrum-actionbar-spacing-close-button-top", - "--spectrum-actionbar-spacing-item-counter-end", - "--spectrum-actionbar-spacing-item-counter-top", + "--spectrum-actionbar-spacing-action-group-edge", + "--spectrum-actionbar-spacing-label-to-actiongroup", "--spectrum-actionbar-spacing-outer-edge" ], "global": [ + "--spectrum-background-elevated-color", "--spectrum-cjk-line-height-100", - "--spectrum-corner-radius-100", - "--spectrum-drop-shadow-blur", - "--spectrum-drop-shadow-color", - "--spectrum-drop-shadow-x", - "--spectrum-drop-shadow-y", + "--spectrum-corner-radius-medium-size-extra-large", + "--spectrum-drop-shadow-elevated-blur", + "--spectrum-drop-shadow-elevated-color", + "--spectrum-drop-shadow-elevated-x", + "--spectrum-drop-shadow-elevated-y", "--spectrum-font-size-100", "--spectrum-gray-25", - "--spectrum-gray-400", - "--spectrum-informative-background-color-default", "--spectrum-line-height-100", "--spectrum-neutral-content-color-default", - "--spectrum-spacing-100", - "--spectrum-spacing-300", - "--spectrum-spacing-400", - "--spectrum-spacing-75", - "--spectrum-white" + "--spectrum-spacing-300" ], "passthroughs": [], - "high-contrast": ["--highcontrast-actionbar-popover-border-color"] + "high-contrast": [ + "--highcontrast-actionbar-closebutton-highlight-color", + "--highcontrast-actionbar-popover-border-color", + "--highcontrast-actionbutton-emphasized-content-color-default", + "--highcontrast-actionbutton-emphasized-icon-color" + ] } diff --git a/components/actionbar/index.css b/components/actionbar/index.css index 46d4a86d4a5..39984142016 100644 --- a/components/actionbar/index.css +++ b/components/actionbar/index.css @@ -12,11 +12,13 @@ */ .spectrum-ActionBar { - --spectrum-actionbar-popover-background-color: var(--spectrum-gray-25); - --spectrum-actionbar-popover-border-color: var(--spectrum-gray-400); - + /* Layout */ --spectrum-actionbar-height: var(--spectrum-action-bar-height); - --spectrum-actionbar-corner-radius: var(--spectrum-corner-radius-100); + --spectrum-actionbar-minimum-width: var(--spectrum-action-bar-minimum-width); + --spectrum-actionbar-corner-radius: var(--spectrum-corner-radius-medium-size-extra-large); + --spectrum-actionbar-spacing-label-to-actiongroup: var(--spectrum-action-bar-label-to-action-group-area); + --spectrum-actionbar-spacing-action-group-edge: var(--spectrum-action-bar-edge-to-content-area); + --spectrum-actionbar-close-button-to-counter: var(--spectrum-action-bar-close-button-to-counter); /* item counter field label */ --spectrum-actionbar-item-counter-font-size: var(--spectrum-font-size-100); @@ -24,30 +26,23 @@ --spectrum-actionbar-item-counter-color: var(--spectrum-neutral-content-color-default); /* emphasized variation colors */ - --spectrum-actionbar-emphasized-background-color: var(--spectrum-informative-background-color-default); - --spectrum-actionbar-emphasized-item-counter-color: var(--spectrum-white); + --spectrum-actionbar-emphasized-background-color: var(--spectrum-neutral-content-color-default); + --spectrum-actionbar-emphasized-item-counter-color: var(--spectrum-gray-25); + --spectrum-actionbar-emphasized-action-button-label-color: var(--spectrum-gray-25); + --spectrum-actionbar-emphasized-icon-color: var(--spectrum-gray-25); + + /* colors - applied to popover */ + --spectrum-actionbar-popover-background-color: var(--spectrum-background-elevated-color); + --spectrum-actionbar-popover-border-color: var(--spectrum-action-bar-border-color); /* spacing of action bar bottom and horizontal outer edge */ --spectrum-actionbar-spacing-outer-edge: var(--spectrum-spacing-300); - /* spacing of close button */ - --spectrum-actionbar-spacing-close-button-top: var(--spectrum-spacing-100); - --spectrum-actionbar-spacing-close-button-start: var(--spectrum-spacing-100); - --spectrum-actionbar-spacing-close-button-end: var(--spectrum-spacing-75); - - /* spacing of item counter field label */ - --spectrum-actionbar-spacing-item-counter-top: var(--spectrum-action-bar-top-to-item-counter); - --spectrum-actionbar-spacing-item-counter-end: var(--spectrum-spacing-400); - - /* spacing of action group */ - --spectrum-actionbar-spacing-action-group-top: var(--spectrum-spacing-100); - --spectrum-actionbar-spacing-action-group-end: var(--spectrum-spacing-100); - /* drop shadow */ - --spectrum-actionbar-shadow-horizontal: var(--spectrum-drop-shadow-x); - --spectrum-actionbar-shadow-vertical: var(--spectrum-drop-shadow-y); - --spectrum-actionbar-shadow-blur: var(--spectrum-drop-shadow-blur); - --spectrum-actionbar-shadow-color: var(--spectrum-drop-shadow-color); + --spectrum-actionbar-shadow-horizontal: var(--spectrum-drop-shadow-elevated-x); + --spectrum-actionbar-shadow-vertical: var(--spectrum-drop-shadow-elevated-y); + --spectrum-actionbar-shadow-blur: var(--spectrum-drop-shadow-elevated-blur); + --spectrum-actionbar-shadow-color: var(--spectrum-drop-shadow-elevated-color); /* cjk language support for item counter */ &:lang(ja), @@ -57,17 +52,6 @@ } } -/* windows high contrast mode */ -@media (forced-colors: active) { - .spectrum-ActionBar { - --highcontrast-actionbar-popover-border-color: CanvasText; - } - - .spectrum-ActionBar--emphasized .spectrum-ActionBar-popover { - --highcontrast-actionbar-popover-border-color: CanvasText; - } -} - /* ActionBar is outer wrapper with nested popover component within */ .spectrum-ActionBar { /* creates horizontal spacing to edge */ @@ -94,11 +78,11 @@ .spectrum-ActionBar-popover { /* popover is ActionBar height */ block-size: var(--mod-actionbar-height, var(--spectrum-actionbar-height)); + min-inline-size: var(--mod-actionbar-minimum-width, var(--spectrum-actionbar-minimum-width)); box-sizing: border-box; inline-size: 100%; margin: auto; - padding-block-start: 0; - padding-block-end: 0; + padding-inline: var(--mod-actionbar-spacing-action-group-edge, var(--spectrum-actionbar-spacing-action-group-edge)); /* Be relative so our width can be restricted */ position: relative; @@ -115,27 +99,19 @@ /* inner layout of content items */ display: flex; flex-direction: row; + align-items: center; } - /* close button */ - .spectrum-CloseButton { - margin-inline-start: var(--mod-actionbar-spacing-close-button-start, var(--spectrum-actionbar-spacing-close-button-start)); - margin-inline-end: var(--mod-actionbar-spacing-close-button-end, var(--spectrum-actionbar-spacing-close-button-end)); - margin-block-start: var(--mod-actionbar-spacing-close-button-top, var(--spectrum-actionbar-spacing-close-button-top)); - flex-shrink: 0; + .spectrum-ActionBar-actiongroup { + padding-inline-start: var(--mod-actionbar-spacing-label-to-actiongroup, var(--spectrum-actionbar-spacing-label-to-actiongroup)); /* space between label and action group */ } /* item counter */ .spectrum-FieldLabel { - margin-inline-end: var(--mod-actionbar-spacing-item-counter-end, var(--spectrum-actionbar-spacing-item-counter-end)); - margin-block-start: var(--mod-actionbar-spacing-item-counter-top, var(--spectrum-actionbar-spacing-item-counter-top)); - - /* neutralize padding for correct spacing within ActionBar */ - padding: 0; - font-size: var(--mod-actionbar-item-counter-font-size, var(--spectrum-actionbar-item-counter-font-size)); color: var(--mod-actionbar-item-counter-color, var(--spectrum-actionbar-item-counter-color)); line-height: var(--mod-actionbar-item-counter-line-height, var(--spectrum-actionbar-item-counter-line-height)); + padding-inline-start: var(--mod-actionbar-close-button-to-counter, var(--spectrum-actionbar-close-button-to-counter)); /* cjk language support */ &:lang(ja), @@ -147,9 +123,6 @@ /* action group */ .spectrum-ActionGroup { - margin-inline-end: var(--mod-actionbar-spacing-action-group-end, var(--spectrum-actionbar-spacing-action-group-end)); - margin-block-start: var(--mod-actionbar-spacing-action-group-top, var(--spectrum-actionbar-spacing-action-group-top)); - /* align to end by default */ margin-inline-start: auto; } @@ -157,17 +130,31 @@ .spectrum-ActionBar--emphasized { .spectrum-ActionBar-popover { - filter: none; background-color: var(--mod-actionbar-emphasized-background-color, var(--spectrum-actionbar-emphasized-background-color)); - /* border transparent instead of none so WHCM will have visible border */ - border-color: transparent; + .spectrum-CloseButton:hover .spectrum-Icon { + color: var(--highcontrast-actionbar-closebutton-highlight-color, var(--spectrum-actionbar-emphasized-icon-color)); + } } /* ensure text is legible on emphasized background */ .spectrum-FieldLabel { color: var(--mod-actionbar-emphasized-item-counter-color, var(--spectrum-actionbar-emphasized-item-counter-color)); } + + .spectrum-ActionGroup .spectrum-ActionButton { + .spectrum-ActionButton-label { + color: var(--highcontrast-actionbutton-emphasized-content-color-default, var(--spectrum-actionbar-emphasized-action-button-label-color)); + } + + .spectrum-ActionButton-icon { + color: var(--highcontrast-actionbutton-emphasized-icon-color, var(--spectrum-actionbar-emphasized-icon-color)); + } + } + + .spectrum-CloseButton .spectrum-Icon { + color: var(--spectrum-actionbar-emphasized-icon-color); + } } .spectrum-ActionBar--sticky { @@ -184,3 +171,13 @@ .spectrum-ActionBar--flexible .spectrum-ActionBar-popover { inline-size: auto; } + +/* windows high contrast mode */ +@media (forced-colors: active) { + .spectrum-ActionBar { + --highcontrast-actionbar-popover-border-color: CanvasText; + --highcontrast-actionbutton-emphasized-content-color-default: CanvasText; + --highcontrast-actionbutton-emphasized-icon-color: CanvasText; + --highcontrast-actionbar-closebutton-highlight-color: Highlight; + } +} diff --git a/components/actionbar/stories/actionbar.stories.js b/components/actionbar/stories/actionbar.stories.js index aa2e867ea09..d8b3628d053 100644 --- a/components/actionbar/stories/actionbar.stories.js +++ b/components/actionbar/stories/actionbar.stories.js @@ -92,7 +92,7 @@ WithForcedColors.parameters = { // ********* DOCS ONLY ********* // /** - * The emphasized action bar has a blue background that adds visual emphasis on the actions and selection. Use this for when the bar should call attention (e.g., floating in a table). + * The emphasized action bar has a neurtral background that adds visual emphasis on the actions and selection. Use this for when the bar should call attention (e.g., floating in a table). */ export const Emphasized = BehavioralTemplate.bind({}); Emphasized.tags = ["!dev"]; diff --git a/components/actionbar/stories/template.js b/components/actionbar/stories/template.js index 6809e55225e..afe63433eb7 100644 --- a/components/actionbar/stories/template.js +++ b/components/actionbar/stories/template.js @@ -46,6 +46,7 @@ export const Template = ({ }, context), FieldLabel({ size: "s", label: "2 Selected" }, context), ActionGroup({ + customClasses: [`${rootClass}-actiongroup`], size: "m", areQuiet: true, staticColor: isEmphasized ? "white" : undefined,