@adobe/spectrum-css/dist/components/tabs/vars.css

The Spectrum CSS top-level backwards compatible package

.spectrum-Tabs {
  --spectrum-tabs-focus-ring-padding-x: var(--spectrum-global-dimension-size-100);
  --spectrum-tabs-height: var(--spectrum-global-dimension-size-600);
  --spectrum-tabs-rule-height: var(--spectrum-alias-border-size-thick);
  --spectrum-tabs-icon-gap: var(--spectrum-global-dimension-size-100);
  --spectrum-tabs-focus-ring-height: var(--spectrum-alias-single-line-height);
  --spectrum-tabs-focus-ring-size: var(--spectrum-alias-border-size-thick);
  --spectrum-tabs-focus-ring-border-radius: undefined;
  --spectrum-tabs-text-size: var(--spectrum-alias-font-size-default);
  --spectrum-tabs-text-font-weight: var(--spectrum-alias-body-text-font-weight);
  --spectrum-tabs-selection-indicator-animation-duration: var(--spectrum-global-animation-duration-100);
  --spectrum-tabs-rule-border-radius: var(--spectrum-global-dimension-static-size-10);
  --spectrum-tabs-quiet-compact-height: var(--spectrum-global-dimension-size-400);
  --spectrum-tabs-item-gap: var(--spectrum-global-dimension-size-300);
  --spectrum-tabs-vertical-rule-width: var(--spectrum-alias-border-size-thick);
  --spectrum-tabs-vertical-item-height: var(--spectrum-global-dimension-size-550);
  --spectrum-tabs-vertical-item-margin-left: var(--spectrum-global-dimension-size-150);
  --spectrum-tabs-vertical-item-gap: var(--spectrum-global-dimension-size-50);
  --spectrum-tabs-compact-vertical-item-height: var(--spectrum-global-dimension-size-400);
  --spectrum-tabs-compact-vertical-item-gap: var(--spectrum-global-dimension-size-50);
  --spectrum-tabs-rule-color: var(--spectrum-global-color-gray-200);
  --spectrum-tabs-vertical-rule-color: var(--spectrum-global-color-gray-200);
  --spectrum-tabs-selection-indicator-color: var(--spectrum-global-color-gray-900);
  --spectrum-tabs-text-color: var(--spectrum-alias-label-text-color);
  --spectrum-tabs-icon-color: var(--spectrum-alias-icon-color);
  --spectrum-tabs-text-color-hover: var(--spectrum-alias-text-color-hover);
  --spectrum-tabs-icon-color-hover: var(--spectrum-alias-icon-color-hover);
  --spectrum-tabs-text-color-selected: var(--spectrum-global-color-gray-900);
  --spectrum-tabs-icon-color-selected: var(--spectrum-global-color-gray-900);
  --spectrum-tabs-text-color-key-focus: var(--spectrum-alias-text-color-hover);
  --spectrum-tabs-focus-ring-color: var(--spectrum-alias-border-color-focus);
  --spectrum-tabs-icon-color-key-focus: var(--spectrum-alias-icon-color-focus);
  --spectrum-tabs-text-color-disabled: var(--spectrum-alias-text-color-disabled);
  --spectrum-tabs-icon-color-disabled: var(--spectrum-alias-icon-color-disabled);
  --spectrum-tabs-quiet-rule-color: var(--spectrum-alias-border-color-transparent);
  --spectrum-tabs-quiet-selection-indicator-color: var(--spectrum-global-color-gray-900);
  --spectrum-tabs-quiet-vertical-rule-color: var(--spectrum-alias-border-color-transparent);
}