diff --git a/.changeset/rotten-seals-sniff.md b/.changeset/rotten-seals-sniff.md new file mode 100644 index 00000000000..cd2e601d287 --- /dev/null +++ b/.changeset/rotten-seals-sniff.md @@ -0,0 +1,5 @@ +--- +'@spectrum-web-components/tabs': patch +--- + +feat(tabs): add customization tokens for overflow button positioning and shadow diff --git a/packages/tabs/src/tabs-overflow.css b/packages/tabs/src/tabs-overflow.css index fa4494cab9c..0ac27f69acf 100644 --- a/packages/tabs/src/tabs-overflow.css +++ b/packages/tabs/src/tabs-overflow.css @@ -14,11 +14,13 @@ governing permissions and limitations under the License. inset: 0; width: 100%; - --sp-tabs-overflow-next-button-right: calc( - -1 * var(--spectrum-component-edge-to-text-100) + --sp-tabs-overflow-next-button-right: var( + --mod-sp-tabs-overflow-next-button-right, + calc(-1 * var(--spectrum-component-edge-to-text-100)) ); - --sp-tabs-overflow-previous-button-left: calc( - -1 * var(--spectrum-component-edge-to-text-100) + --sp-tabs-overflow-previous-button-left: var( + --mod-sp-tabs-overflow-previous-button-left, + calc(-1 * var(--spectrum-component-edge-to-text-100)) ); --sp-tabs-overflow-button-height: calc( var(--spectrum-tab-item-height-medium) - @@ -26,7 +28,10 @@ governing permissions and limitations under the License. ); --sp-tabs-overflow-button-size: var(--spectrum-tab-item-height-medium); --sp-tabs-overflow-icon-color: var(--spectrum-gray-800); - --sp-tabs-overflow-shadow-color: var(--spectrum-gray-100); + --sp-tabs-overflow-shadow-color: var( + --mod-sp-tabs-overflow-shadow-color, + var(--spectrum-gray-100) + ); --sp-tabs-overflow-shadow-width: 50px; --mod-actionbutton-icon-size: var(--spectrum-workflow-icon-size-100); }