feat(tabs): use correct vars for focusring

adobe · Jan 24, 2022 · 972c82e · 972c82e
1 parent 28302af
commit 972c82e
Showing 1 changed file with 4 additions and 13 deletions.
diff --git a/components/tabs/index.css b/components/tabs/index.css
@@ -43,7 +43,6 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-Tabs {
- /* --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));
 }
 
@@ -76,7 +75,7 @@ governing permissions and limitations under the License.
  text-decoration: none;
  white-space: nowrap;
 
- transition: color var(--spectrum-global-animation-duration-100) ease-out;
+ transition: color var(--spectrum-tabs-texticon-tabitem-selection-indicator-animation-duration) ease-out;
  cursor: pointer;
  outline: none;
 
@@ -106,13 +105,8 @@ governing permissions and limitations under the License.
 
  box-sizing: border-box;
 
- block-size: calc(var(--spectrum-tabs-textonly-tabitem-padding-top) + var(--spectrum-tabs-textonly-tabitem-padding-top));
-
- margin-block-start: calc(calc(var(--spectrum-tabs-compact-textonly-tabitem-height) / -2) + calc(var(--spectrum-tabs-quiet-texticon-divider-size) / 2));
-
- /* 30,40,50,60 */
-
- /* margin-block-start: calc(var(--spectrum-tabs-compact-textonly-tabitem-height) / -2); */
+ block-size: var(--spectrum-tabs-textonly-tabitem-focus-ring-height);
+ margin-block-start: calc(var(--spectrum-tabs-textonly-tabitem-focus-ring-height) / -2);
 
  inset-inline-start: calc(-1 * var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x));
  inset-inline-end: calc(-1 * var(--spectrum-tabs-textonly-tabitem-focus-ring-padding-x));
@@ -176,7 +170,6 @@ governing permissions and limitations under the License.
 
  /* Target anything since React likes to add lots of happy <div>s around all things */
  & + *:not(.spectrum-Tabs-selectionIndicator) {
- /* margin-inline-start: var(--spectrum-tabs-quiet-textonly-tabitem-gap); */
  margin-inline-start: var(--spectrum-tabs-textonly-tabitem-margin-right);
  }
  }
@@ -215,15 +208,13 @@ governing permissions and limitations under the License.
  padding-block: 0;
  padding-inline: var(--spectrum-tabs-quiet-textonly-tabitem-focus-ring-padding-x);
 
- /* Subtract focus ring padding from margin-left since the padding value already offsets tabs-items */
- /* margin-inline-start: calc(var(--spectrum-tabs-vertical-textonly-margin-left) - var(--spectrum-tabs-quiet-textonly-focus-ring-padding-x)); */
  margin-block-end: var(--spectrum-tabs-vertical-textonly-tabitem-gap);
+ margin-inline-start: calc(var(--spectrum-tabs-vertical-textonly-tabitem-gap) / 2);
 
  &::before {
  /* padding is included in click area of tab items, so only need to offset by the size of the focus ring's border */
  inset-inline-start: calc(-1 * var(--spectrum-tabs-textonly-tabitem-focus-ring-size));
  inset-inline-end: calc(-1 * var(--spectrum-tabs-textonly-tabitem-focus-ring-size));
- /* margin-block-start: calc(calc(var(--spectrum-tabs-quiet-textonly-focus-ring-height) / -2)); */
  }
  }