fix: make Tabs build again

adobe · Dec 1, 2020 · 33d0e97 · 33d0e97
1 parent 5b39f67
commit 33d0e97
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 28 deletions.
diff --git a/components/tabs/index.css b/components/tabs/index.css
@@ -10,16 +10,30 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import '../commons/index.css';
+@import "../commons/index.css";
+@import "../vars/css/components/spectrum-tabs.css";
+@import "../vars/css/scales/spectrum-large.css";
+@import "../vars/css/scales/spectrum-medium.css";
 
 :root {
- --spectrum-tabs-item-height: calc(var(--spectrum-tabs-height) - var(--spectrum-tabs-rule-height));
- --spectrum-tabs-compact-item-height: calc(var(--spectrum-tabs-quiet-compact-height) - var(--spectrum-tabs-rule-height));
+ --spectrum-tabs-item-height: calc(var(--spectrum-tabs-height) - var(--spectrum-tabs-rule-size));
+ --spectrum-tabs-compact-item-height: calc(var(--spectrum-tabs-quiet-compact-height) - var(--spectrum-tabs-rule-size));
 
  /* todo: remove when this is added back to DNA */
  --spectrum-tabs-text-size: var(--spectrum-alias-font-size-default);
 }
 
+.spectrum-Tabs {
+ @remapvars {
+ find: --spectrum-tabs-m-;
+ replace: --spectrum-tabs-;
+ }
+ @remapvars {
+ find: --spectrum-tabs-quiet-m-;
+ replace: --spectrum-tabs-quiet-;
+ }
+}
+
 .spectrum-Tabs {
  display: flex;
 
@@ -81,7 +95,7 @@ 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-rule-height) / 2));
+ margin-block-start: calc(calc(var(--spectrum-tabs-focus-ring-height) / -2) + calc(var(--spectrum-tabs-rule-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;
@@ -136,7 +150,7 @@ governing permissions and limitations under the License.
 .spectrum-Tabs--horizontal {
  align-items: center;
 
- border-block-end: var(--spectrum-tabs-rule-height) solid;
+ border-block-end: var(--spectrum-tabs-rule-size) solid;
 
  .spectrum-Tabs-item {
  vertical-align: top;
@@ -150,9 +164,9 @@ governing permissions and limitations under the License.
  .spectrum-Tabs-selectionIndicator {
  position: absolute;
  inset-block-end: 0;
- block-size: var(--spectrum-tabs-rule-height);
+ block-size: var(--spectrum-tabs-rule-size);
 
- inset-block-end: calc(-1 * var(--spectrum-tabs-rule-height));
+ inset-block-end: calc(-1 * var(--spectrum-tabs-rule-size));
  }
 
 
@@ -173,7 +187,7 @@ governing permissions and limitations under the License.
  display: inline-flex;
  flex-direction: column;
  padding: 0;
- border-inline-start: var(--spectrum-tabs-vertical-rule-width) solid;
+ border-inline-start: var(--spectrum-tabs-vertical-rule-size) solid;
 
  .spectrum-Tabs-item {
  block-size: var(--spectrum-tabs-vertical-item-height);
@@ -207,8 +221,8 @@ governing permissions and limitations under the License.
  .spectrum-Tabs-selectionIndicator {
  position: absolute;
  inset-inline-start: 0px;
- inline-size: var(--spectrum-tabs-vertical-rule-width);
+ inline-size: var(--spectrum-tabs-vertical-rule-size);
 
- inset-inline-start: calc(-1 * var(--spectrum-tabs-vertical-rule-width));
+ inset-inline-start: calc(-1 * var(--spectrum-tabs-vertical-rule-size));
  }
 }
diff --git a/components/tabs/skin.css b/components/tabs/skin.css
@@ -11,76 +11,76 @@ governing permissions and limitations under the License.
 */
 
 .spectrum-Tabs {
- border-block-end-color: var(--spectrum-tabs-rule-color);
+ border-block-end-color: var(--spectrum-tabs-m-rule-color);
 }
 
 .spectrum-Tabs--vertical {
- border-inline-start-color: var(--spectrum-tabs-vertical-rule-color);
+ border-inline-start-color: var(--spectrum-tabs-m-vertical-rule-color);
 }
 
 .spectrum-Tabs-selectionIndicator {
- background-color: var(--spectrum-tabs-selection-indicator-color);
+ background-color: var(--spectrum-tabs-m-selection-indicator-color);
 }
 
 .spectrum-Tabs-item {
- color: var(--spectrum-tabs-text-color);
+ color: var(--spectrum-tabs-m-text-color);
 
  .spectrum-Icon {
- color: var(--spectrum-tabs-icon-color)
+ color: var(--spectrum-tabs-m-icon-color)
  }
 
  &:hover {
- color: var(--spectrum-tabs-text-color-hover);
+ color: var(--spectrum-tabs-m-text-color-hover);
 
  .spectrum-Icon {
- color: var(--spectrum-tabs-icon-color-hover)
+ color: var(--spectrum-tabs-m-icon-color-hover)
  }
  }
 
  &.is-selected {
- color: var(--spectrum-tabs-text-color-selected);
+ color: var(--spectrum-tabs-m-text-color-selected);
 
  .spectrum-Icon {
- color: var(--spectrum-tabs-icon-color-selected)
+ color: var(--spectrum-tabs-m-icon-color-selected)
  }
  }
 
  &:focus-ring {
- color: var(--spectrum-tabs-text-color-key-focus);
+ color: var(--spectrum-tabs-m-text-color-key-focus);
 
  &::before {
- border-color: var(--spectrum-tabs-focus-ring-color);
+ border-color: var(--spectrum-tabs-m-focus-ring-color);
  }
 
  .spectrum-Icon {
- color: var(--spectrum-tabs-icon-color-key-focus)
+ color: var(--spectrum-tabs-m-icon-color-key-focus)
  }
  }
 
  &.is-disabled {
- color: var(--spectrum-tabs-text-color-disabled);
+ color: var(--spectrum-tabs-m-text-color-disabled);
 
  .spectrum-Icon {
- color: var(--spectrum-tabs-icon-color-disabled)
+ color: var(--spectrum-tabs-m-icon-color-disabled)
  }
  }
 }
 
 .spectrum-Tabs--quiet {
- border-block-end-color: var(--spectrum-tabs-quiet-rule-color);
+ border-block-end-color: var(--spectrum-tabs-quiet-m-rule-color);
 
  .spectrum-Tabs-selectionIndicator {
- background-color: var(--spectrum-tabs-quiet-selection-indicator-color);
+ background-color: var(--spectrum-tabs-quiet-m-selection-indicator-color);
  }
 }
 
 .spectrum-Tabs--vertical {
  &.spectrum-Tabs--quiet,
  &.spectrum-Tabs--compact {
- border-inline-start-color: var(--spectrum-tabs-quiet-vertical-rule-color);
+ border-inline-start-color: var(--spectrum-tabs-quiet-m-vertical-rule-color);
 
  .spectrum-Tabs-selectionIndicator {
- background-color: var(--spectrum-tabs-quiet-selection-indicator-color);
+ background-color: var(--spectrum-tabs-quiet-m-selection-indicator-color);
  }
  }
 }