From 33d0e97f3e8353a0ad4ecf6f39abdcc03a851552 Mon Sep 17 00:00:00 2001 From: Larry Davis Date: Mon, 2 Nov 2020 11:51:29 -0800 Subject: [PATCH] fix: make Tabs build again --- components/tabs/index.css | 34 ++++++++++++++++++++++++---------- components/tabs/skin.css | 36 ++++++++++++++++++------------------ 2 files changed, 42 insertions(+), 28 deletions(-) diff --git a/components/tabs/index.css b/components/tabs/index.css index 5274376673..a3c6a9d803 100644 --- 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 index c34836cb2e..665c52f146 100644 --- 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); } } }