diff --git a/components/tabs/index.css b/components/tabs/index.css index 4e46fdd71d..07ad4e84a9 100644 --- a/components/tabs/index.css +++ b/components/tabs/index.css @@ -16,51 +16,35 @@ governing permissions and limitations under the License. .spectrum-Tabs--sizeS { @remapvars { - find: --spectrum-tabs-s-; - replace: --spectrum-tabs-; - } - @remapvars { - find: --spectrum-tabs-quiet-s-; - replace: --spectrum-tabs-quiet-; + find: /--spectrum-tabs-s-(.*)/; + replace: --spectrum-tabs-$1; } } .spectrum-Tabs--sizeM { @remapvars { - find: --spectrum-tabs-m-; - replace: --spectrum-tabs-; - } - @remapvars { - find: --spectrum-tabs-m-quiet-; - replace: --spectrum-tabs-quiet-; + find: /--spectrum-tabs-m-(.*)/; + replace: --spectrum-tabs-$1; } } .spectrum-Tabs--sizeL { @remapvars { - find: --spectrum-tabs-l-; - replace: --spectrum-tabs-; - } - @remapvars { - find: --spectrum-tabs-quiet-l-; - replace: --spectrum-tabs-quiet-; + find: /--spectrum-tabs-l-(.*)/; + replace: --spectrum-tabs-$1; } } .spectrum-Tabs--sizeXL { @remapvars { - find: --spectrum-tabs-xl-; - replace: --spectrum-tabs-; - } - @remapvars { - find: --spectrum-tabs-quiet-xl-; - replace: --spectrum-tabs-quiet-; + find: /--spectrum-tabs-xl-(.*)/; + replace: --spectrum-tabs-$1; } } .spectrum-Tabs { - --spectrum-tabs-item-height-adjusted: calc(var(--spectrum-tabs-height) - var(--spectrum-tabs-divider-size)); - --spectrum-tabs-compact-item-height: calc(var(--spectrum-tabs-compact-quiet-height) - var(--spectrum-tabs-divider-size)); + /* --spectrum-tabs-item-height-adjusted: calc(var(--spectrum-tabs-height) - var(--spectrum-tabs-quiet-textonly-divider-size)); */ + --spectrum-tabs-compact-item-height: calc(var(--spectrum-tabs-compact-textonly-height) - var(--spectrum-tabs-compact-textonly-divider-size)); } .spectrum-Tabs { @@ -83,8 +67,8 @@ governing permissions and limitations under the License. box-sizing: border-box; - block-size: var(--spectrum-tabs-item-height); - line-height: var(--spectrum-tabs-item-height); + block-size: var(--spectrum-tabs-quiet-textonly-tabitem-height); + line-height: var(--spectrum-tabs-quiet-textonly-tabitem-height); /* Float above the tab line */ z-index: 1; @@ -106,12 +90,12 @@ governing permissions and limitations under the License. .spectrum-Icon { /* Vertical centering */ - block-size: var(--spectrum-tabs-item-height); + block-size: var(--spectrum-tabs-quiet-textonly-tabitem-height); & + .spectrum-Tabs-itemLabel { /* icons are inexplicably offset by 3px. Subtract this value from the icon-gap to correct the gap in CSS */ - margin-inline-start: calc(var(--spectrum-tabs-icon-gap) - var(--spectrum-global-dimension-size-40)); + margin-inline-start: calc(var(--spectrum-tabs-quiet-textonly-icon-gap) - var(--spectrum-global-dimension-size-40)); } } @@ -122,12 +106,13 @@ governing permissions and limitations under the License. box-sizing: border-box; - block-size: var(--spectrum-tabs-focus-ring-height); - margin-block-start: calc(calc(var(--spectrum-tabs-focus-ring-height) / -2) + calc(var(--spectrum-tabs-divider-size) / 2)); - inset-inline-start: calc(-1 * var(--spectrum-tabs-focus-ring-padding-x)); - inset-inline-end: calc(-1 * var(--spectrum-tabs-focus-ring-padding-x)); - border: var(--spectrum-tabs-focus-ring-size) solid transparent; - border-radius: var(--spectrum-tabs-focus-ring-border-radius); + block-size: var(--spectrum-tabs-quiet-textonly-focus-ring-height); + margin-block-start: calc(calc(var(--spectrum-tabs-quiet-textonly-focus-ring-height) / -2) + calc(var(--spectrum-tabs-quiet-textonly-divider-size) / 2)); + inset-inline-start: calc(-1 * var(--spectrum-tabs-quiet-textonly-focus-ring-padding-x)); + inset-inline-end: calc(-1 * var(--spectrum-tabs-quiet-textonly-focus-ring-padding-x)); + border: var(--spectrum-tabs-quiet-textonly-focus-ring-size) solid transparent; + /* TODO */ + /* border-radius: var(--spectrum-tabs-focus-ring-border-radius); */ pointer-events: none; } @@ -138,8 +123,8 @@ governing permissions and limitations under the License. vertical-align: top; display: inline-block; - font-size: var(--spectrum-tabs-text-size); - font-weight: var(--spectrum-tabs-text-font-weight); + font-size: var(--spectrum-tabs-textonly-text-size); + font-weight: var(--spectrum-tabs-textonly-text-font-weight); /* support links */ text-decoration: none; @@ -157,10 +142,11 @@ governing permissions and limitations under the License. /* Be below the tab */ z-index: 0; - transition: transform var(--spectrum-tabs-selection-indicator-animation-duration) ease-in-out; + /* TODO */ + /* transition: transform var(--spectrum-tabs-selection-indicator-animation-duration) ease-in-out; */ transform-origin: top left; - border-radius: var(--spectrum-tabs-divider-border-radius); + border-radius: var(--spectrum-tabs-textonly-divider-border-radius); } .spectrum-Tabs--compact { @@ -178,23 +164,23 @@ governing permissions and limitations under the License. .spectrum-Tabs--horizontal { align-items: center; - border-block-end: var(--spectrum-tabs-divider-size) solid; + border-block-end: var(--spectrum-tabs-quiet-textonly-divider-size) solid; .spectrum-Tabs-item { vertical-align: top; /* Target anything since React likes to add lots of happy