diff --git a/components/button/CHANGELOG.md b/components/button/CHANGELOG.md index b1da45f8513..666e4601204 100644 --- a/components/button/CHANGELOG.md +++ b/components/button/CHANGELOG.md @@ -3,6 +3,21 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +# 7.0.0-beta.5 +🗓 2023-01-26 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/button@6.0.20...@spectrum-css/button@7.0.0-beta.5) + +### ✨ Features + +* **button!:** core token migration for button ([28786ab](https://github.com/adobe/spectrum-css/commit/28786ab)) +* fix label padding ([9f1517a](https://github.com/adobe/spectrum-css/commit/9f1517a)) +* logical padding ([bc7bb10](https://github.com/adobe/spectrum-css/commit/bc7bb10)) +* migrating to core tokens v5.0.0 ([6e640ba](https://github.com/adobe/spectrum-css/commit/6e640ba)) + + + + + ## 6.0.21 🗓 2023-01-27 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/button@6.0.20...@spectrum-css/button@6.0.21) diff --git a/components/button/gulpfile.js b/components/button/gulpfile.js index 3d2a7fa4e41..f13104999f1 100644 --- a/components/button/gulpfile.js +++ b/components/button/gulpfile.js @@ -1 +1 @@ -module.exports = require('@spectrum-css/component-builder'); +module.exports = require('@spectrum-css/component-builder-simple'); diff --git a/components/button/index.css b/components/button/index.css index 10c90f01492..2b125611c30 100644 --- a/components/button/index.css +++ b/components/button/index.css @@ -10,79 +10,122 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import "../vars/css/scales/spectrum-large.css"; -@import "../vars/css/scales/spectrum-medium.css"; -@import "../commons/basebutton.css"; -@import "../vars/css/components/spectrum-button.css"; +@import "../commons/basebutton-coretokens.css"; + +/* default for all buttons */ +.spectrum-Button { + --spectrum-button-animation-duration: var(--spectrum-animation-duration-100); + --spectrum-button-border-radius: var(--spectrum-corner-radius-100); + --spectrum-button-border-width: var(--spectrum-border-width-200); + + --spectrum-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --spectrum-button-focus-ring-border-radius: calc(var(--spectrum-button-border-radius) + var(--spectrum-button-focus-ring-gap)); + + --spectrum-button-focus-ring-gap: var(--spectrum-focus-indicator-gap); + --spectrum-button-focus-ring-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-button-focus-indicator-color: var(--spectrum-focus-indicator-color); + --spectrum-button-focus-ring-border-radius: calc(var(--spectrum-button-border-radius) + var(--spectrum-button-focus-ring-gap)); +} -@import "./skin.css"; .spectrum-Button--sizeS { - @remapvars { - find: /--spectrum-button(.*)-s-/; - filter: color; - replace: --spectrum-button$1-; - } - /* adjust padding above and below button label to compensate for line height rendering differences in css */ - --spectrum-button-primary-fill-textonly-text-padding-top: calc(var(--spectrum-button-s-primary-fill-textonly-text-padding-top) -1px); + --spectrum-button-min-width: calc(var(--spectrum-component-height-75) * var(--spectrum-button-minimum-width-multiplier)); + + --spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-75); + --spectrum-button-height: var(--spectrum-component-height-75); + + --spectrum-button-font-size: var(--spectrum-font-size-75); + + --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-75) - var(--spectrum-button-border-width)); + --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-75) - var(--spectrum-button-border-width)); + --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-75); + --spectrum-button-padding-label-top: var(--spectrum-component-top-to-text-75); + --spectrum-button-padding-label-bottom: var(--spectrum-component-bottom-to-text-75); } .spectrum-Button--sizeM { - @remapvars { - find: /--spectrum-button(.*)-m-/; - filter: color; - replace: --spectrum-button$1-; - } - /* adjust padding above and below button label to compensate for line height rendering differences in css */ - --spectrum-button-primary-fill-textonly-text-padding-bottom: calc(var(--spectrum-button-m-primary-fill-textonly-text-padding-bottom) -1px); + --spectrum-button-min-width: calc(var(--spectrum-component-height-100) * var(--spectrum-button-minimum-width-multiplier)); + + --spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-100); + --spectrum-button-height: var(--spectrum-component-height-100); + + --spectrum-button-font-size: var(--spectrum-font-size-100); + + + + --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-100) - var(--spectrum-button-border-width)); + --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-100) - var(--spectrum-button-border-width)); + --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-100); + --spectrum-button-padding-label-top: var(--spectrum-component-top-to-text-100); + --spectrum-button-padding-label-bottom: var(--spectrum-component-bottom-to-text-100); } .spectrum-Button--sizeL { - @remapvars { - find: /--spectrum-button(.*)-l-/; - filter: color; - replace: --spectrum-button$1-; - } + --spectrum-button-min-width: calc(var(--spectrum-component-height-200) * var(--spectrum-button-minimum-width-multiplier)); + + --spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-200); + --spectrum-button-height: var(--spectrum-component-height-200); + + --spectrum-button-font-size: var(--spectrum-font-size-200); + + --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-200) - var(--spectrum-button-border-width)); + --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-200) - var(--spectrum-button-border-width)); + --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-200); + --spectrum-button-padding-label-top: var(--spectrum-component-top-to-text-200); + --spectrum-button-padding-label-bottom: var(--spectrum-component-bottom-to-text-200); } .spectrum-Button--sizeXL { - @remapvars { - find: /--spectrum-button(.*)-xl-/; - filter: color; - replace: --spectrum-button$1-; - } - /* adjust padding above and below button label to compensate for line height rendering differences in css */ - --spectrum-button-primary-fill-textonly-text-padding-bottom: calc(var(--spectrum-button-xl-primary-fill-textonly-text-padding-bottom) -1px); -} + --spectrum-button-min-width: calc(var(--spectrum-component-height-300) * var(--spectrum-button-minimum-width-multiplier)); + + --spectrum-button-border-radius: var(--spectrum-component-pill-edge-to-text-300); + --spectrum-button-height: var(--spectrum-component-height-300); + + --spectrum-button-font-size: var(--spectrum-font-size-300); + + --spectrum-button-edge-to-visual: calc(var(--spectrum-component-pill-edge-to-visual-300) - var(--spectrum-button-border-width)); + --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-300) - var(--spectrum-button-border-width)); + --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-300); + --spectrum-button-padding-label-top: var(--spectrum-component-top-to-text-300); + --spectrum-button-padding-label-bottom: var(--spectrum-component-bottom-to-text-300); -.spectrum-Button { - /* Adjustments for inset/outset padding in DNA */ - --spectrum-button-primary-fill-padding-left-adjusted: calc(var(--spectrum-button-primary-fill-texticon-padding-left) - var(--spectrum-button-primary-fill-texticon-border-size)); - --spectrum-button-primary-fill-padding-right-adjusted: calc(var(--spectrum-button-primary-fill-texticon-padding-right) - var(--spectrum-button-primary-fill-texticon-border-size)); - --spectrum-button-primary-fill-textonly-padding-left-adjusted: calc(var(--spectrum-button-primary-fill-textonly-padding-left) - var(--spectrum-button-primary-fill-texticon-border-size)); - --spectrum-button-primary-fill-textonly-padding-right-adjusted: calc(var(--spectrum-button-primary-fill-textonly-padding-right) - var(--spectrum-button-primary-fill-texticon-border-size)); } + .spectrum-Button { @inherit: %spectrum-BaseButton; @inherit: %spectrum-ButtonWithFocusRing; - border-width: var(--spectrum-button-primary-fill-texticon-border-size); - border-style: solid; - border-radius: var(--spectrum-button-primary-fill-texticon-border-radius); - min-block-size: var(--spectrum-button-primary-fill-textonly-height); + border-radius: var(--mod-button-border-radius, var(--spectrum-button-border-radius)); + border-width: var(--mod-button-border-width, var(--spectrum-button-border-width)); + border-style: solid; block-size: auto; - min-inline-size: var(--spectrum-button-primary-fill-textonly-min-width); + height: var(--mod-button-height, var(--spectrum-button-height)); + + min-width: var(--mod-button-min-width, var(--spectrum-button-min-width)); + min-block-size: var(--mod-button-min-width, var(--spectrum-button-min-width)); + position: relative; + padding-block-start: 0; padding-block-end: 0; + position: relative; + + min-inline-size: var(--mod-button-min-width, var(--spectrum-button-min-width)); + min-block-size: var(--mod-spectrum-button-height, var(--spectrum-button-height)); + + height: var(--mod-button-height, var(--spectrum-button-height)); + border-radius: var(--mod-button-border-radius, var(--spectrum-button-border-radius)); + border-width: var(--mod-button-border-width, var(--spectrum-button-border-width)); /* Start with text-only padding */ - padding-inline: var(--spectrum-button-primary-fill-textonly-padding-left-adjusted) var(--spectrum-button-primary-fill-textonly-padding-right-adjusted); + padding-inline-start: var(--mod-button-edge-to-visual, var(--spectrum-button-edge-to-visual)); + padding-inline-end: var(--mod-button-edge-to-text, var(--spectrum-button-edge-to-text)); + - font-size: var(--spectrum-button-primary-fill-texticon-text-size); - font-weight: var(--spectrum-button-primary-fill-texticon-text-font-weight); + font-size: var(--mod-button-font-size, var(--spectrum-button-font-size)); + font-weight: var(--mod-font-weight-bold, var(--spectrum-font-weight-bold)); &:hover, &:active { @@ -93,15 +136,14 @@ governing permissions and limitations under the License. color: inherit; .spectrum-Icon { - @inherit: %spectrum-ButtonIcon; - - /* Scoot over, assuming we have both icon and text */ - margin-inline-start: calc(-1 * (var(--spectrum-button-primary-fill-textonly-padding-left-adjusted) - var(--spectrum-button-primary-fill-padding-left-adjusted))); + inset-inline-end: calc(var(--mod-spectrum-button-edge-to-visual, var(--spectrum-button-edge-to-visual)) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + inset-block-end: calc(var(--mod-spectrum-button-edge-to-visual, var(--spectrum-button-edge-to-visual)) - var(--mod-button-border-width, var(--spectrum-button-border-width))); + color: inherit; } - .spectrum-Icon + .spectrum-Button-label { + .spectrum-Icon+.spectrum-Button-label { /* Have gap on on the left */ - padding-inline-start: var(--spectrum-button-primary-fill-texticon-icon-gap); + padding-inline-start: var(--mod-button-padding-label-to-icon, var(--spectrum-button-padding-label-to-icon)); /* Have no padding on the right (it's built into the element) @@ -110,11 +152,10 @@ governing permissions and limitations under the License. padding-inline-end: 0; } - --spectrum-button-focus-ring-color: var(--spectrum-button-m-primary-fill-texticon-focus-ring-color-key-focus); /* correct focus-ring radius for t-shirt sizing */ &:after { - border-radius: calc(var(--spectrum-button-primary-fill-texticon-border-radius) + var(--spectrum-alias-focus-ring-gap)); + border-radius: calc(var(--mod-button-border-radius, var(--spectrum-button-border-radius)) + var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))); } } @@ -124,26 +165,127 @@ a.spectrum-Button { .spectrum-Button-label { @inherit: %spectrum-ButtonLabel; - - line-height: var(--spectrum-button-primary-fill-texticon-text-line-height); - padding-block-start: calc(var(--spectrum-button-primary-fill-textonly-text-padding-top) - var(--spectrum-button-primary-fill-textonly-border-size)); - padding-block-end: calc(var(--spectrum-button-primary-fill-textonly-text-padding-bottom) - var(--spectrum-button-primary-fill-textonly-border-size)); + padding-block-start: var(--mod-button-padding-label-top, var(--spectrum-button-padding-label-top)); + padding-block-end: var(--mod-button-padding-label-bottom, var(--spectrum-button-padding-label-bottom)); } .spectrum-Button { + &:focus-ring, &.is-focused { &:after { - box-shadow: 0 0 0 var(--spectrum-button-primary-fill-texticon-focus-ring-size) var(--spectrum-button-focus-ring-color); + box-shadow: 0 0 0 var(--mod-button-focus-ring-thickness, var(--spectrum-button-focus-ring-thickness)) var(--mod-button-focus-ring-color, var(--spectrum-button-focus-indicator-color)); } } } -.spectrum-Button--staticWhite { - --spectrum-button-focus-ring-color: var(--spectrum-button-m-primary-fill-white-texticon-focus-ring-color-key-focus); + +/* special cases for focus-ring */ +.spectrum-Button { + transition: border-color var(--mod-button-animation-duration, var(--spectrum-button-animation-duration)) ease-in-out; + + &:after { + position: absolute; + inset: 0; + + margin: calc((var(--mod-button-focus-ring-gap, var(--spectrum-button-focus-ring-gap)) + var(--mod-button-border-width, var(--spectrum-button-border-width))) * -1); + + border-radius: var(--mod-button-focus-ring-border-radius, var(--spectrum-button-focus-ring-border-radius)); + + transition: box-shadow var(--mod-button-animation-duration, var(--spectrum-button-animation-duration)) ease-in-out; + + pointer-events: none; + content: ''; + } + + &:focus-ring { + /* kill the default ring */ + box-shadow: none; + + &:after { + box-shadow: 0 0 0 var(--mod-button-focus-ring-thickness, var(--spectrum-button-focus-ring-thickness)) var(--highcontrast-button-focus-ring-color, var(--mod-button-focus-ring-color, + var(--mod-button-focus-ring-color, var(--spectrum-button-focus-indicator-color)))); + } + } } -.spectrum-Button--staticBlack { - --spectrum-button-focus-ring-color: var(--spectrum-button-m-primary-fill-black-texticon-focus-ring-color-key-focus); +/* Core Token Theming */ +/* former skin.css, applied / copied from actionbutton/index.css */ + +.spectrum-Button { + @inherit: %spectrum-BaseButton; + + background-color: var(--highcontrast-button-background-color-default, var(--mod-button-background-color-default, var(--spectrum-button-background-color-default))); + border-color: var(--highcontrast-button-border-color-default, var(--mod-button-border-color-default, var(--spectrum-button-border-color-default))); + color: var(--highcontrast-button-content-color-default, var(--mod-button-content-color-default, var(--spectrum-button-content-color-default))); + + &:hover { + background-color: var(--highcontrast-button-background-color-hover, var(--mod-button-background-color-hover, var(--spectrum-button-background-color-hover))); + border-color: var(--highcontrast-button-border-color-hover, var(--mod-button-border-color-hover, var(--spectrum-button-border-color-hover))); + color: var(--highcontrast-button-content-color-hover, var(--mod-button-content-color-hover, var(--spectrum-button-content-color-hover))); + } + + &:focus-ring { + background-color: var(--highcontrast-button-background-color-focus, var(--mod-button-background-color-focus, var(--spectrum-button-background-color-focus))); + border-color: var(--highcontrast-button-border-color-focus, var(--mod-button-border-color-focus, var(--spectrum-button-border-color-focus))); + color: var(--highcontrast-button-content-color-focus, var(--mod-button-content-color-focus, var(--spectrum-button-content-color-focus))); + } + + &:active { + background-color: var(--highcontrast-button-background-color-down, var(--mod-button-background-color-down, var(--spectrum-button-background-color-down))); + border-color: var(--highcontrast-button-border-color-down, var(--mod-button-border-color-down, var(--spectrum-button-border-color-down))); + color: var(--highcontrast-button-content-color-down, var(--mod-button-content-color-down, var(--spectrum-button-content-color-down))); + } + + &:disabled, + &.is-disabled { + background-color: var(--highcontrast-button-background-color-disabled, var(--mod-button-background-color-disabled, var(--spectrum-button-background-color-disabled))); + border-color: var(--highcontrast-button-border-color-disabled, var(--mod-button-border-color-disabled, var(--spectrum-button-border-color-disabled))); + color: var(--highcontrast-button-content-color-disabled, var(--mod-button-content-color-disabled, var(--spectrum-button-content-color-disabled))); + } } +/* windows high contrast mode over-writes for accent variant */ +@media (forced-colors: active) { + .spectrum-Button { + &:focus-ring { + &:after { + forced-color-adjust: none; + box-shadow: 0 0 0 var(--mod-button-focus-ring-thickness, var(--spectrum-button-focus-ring-thickness)) ButtonTExt; + } + } + + &.spectrum-Button--accent { + &.spectrum-Button--fill { + background-color: ButtonText; + color: ButtonFace; + + &:disabled, + &.is-disabled { + background-color: ButtonFace; + color: GrayText; + } + + /* simplified for a lot of state for high contrast mode */ + &:active, + &:hover, + &:focus-ring, + &.is-focused { + background-color: Highlight; + } + .spectrum-Button-label { + forced-color-adjust: none; + } + } + } + } +} + +/* static variants */ +.spectrum-Button--staticWhite { + --spectrum-button-focus-indicator-color: var(--mod-static-black-focus-indicator-color, var(--spectrum-static-black-focus-indicator-color)); +} + +.spectrum-Button--staticBlack { + --spectrum-button-focus-indicator-color: var(--mod-static-black-focus-indicator-color, var(--spectrum-static-black-focus-indicator-color)); +} \ No newline at end of file diff --git a/components/button/package.json b/components/button/package.json index 66894ccab60..023a1d660a3 100644 --- a/components/button/package.json +++ b/components/button/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/button", - "version": "6.0.21", + "version": "7.0.0-beta.5", "description": "The Spectrum CSS button component", "license": "Apache-2.0", "homepage": "https://opensource.adobe.com/spectrum-css/", @@ -17,12 +17,12 @@ "build": "gulp" }, "peerDependencies": { - "@spectrum-css/vars": "^8.0.0" + "@spectrum-css/tokens": "^6.3.0" }, "devDependencies": { - "@spectrum-css/component-builder": "^3.2.4", + "@spectrum-css/component-builder-simple": "^2.0.3", "@spectrum-css/icon": "^3.0.29", - "@spectrum-css/vars": "^8.0.3", + "@spectrum-css/tokens": "^6.3.0", "gulp": "^4.0.0" }, "publishConfig": { diff --git a/components/button/skin.css b/components/button/skin.css deleted file mode 100644 index 090b94fff7f..00000000000 --- a/components/button/skin.css +++ /dev/null @@ -1,785 +0,0 @@ -/* -Copyright 2021 Adobe. All rights reserved. -This file is licensed to you under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. You may obtain a copy -of the License at http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software distributed under -the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS -OF ANY KIND, either express or implied. See the License for the specific language -governing permissions and limitations under the License. -*/ - -.spectrum-Button { - &:not(.spectrum-Button--staticWhite) { - &:not(.spectrum-Button--staticBlack) { - &:disabled { - .spectrum-Icon { - color: var(--spectrum-button-m-primary-fill-texticon-icon-color-disabled) - } - - .spectrum-Button-label { - color: var(--spectrum-button-m-primary-fill-texticon-text-color-disabled) - } - } - } - } - - &.spectrum-Button--staticWhite { - &:disabled { - .spectrum-Icon { - color: var(--spectrum-button-m-primary-fill-white-texticon-icon-color-disabled) - } - - .spectrum-Button-label { - color: var(--spectrum-button-m-primary-fill-white-texticon-text-color-disabled) - } - } - - &.spectrum-Button--fill { - &:not(.spectrum-Button--secondary) { - &:not(:disabled) { - background-color: var(--spectrum-button-m-primary-fill-white-texticon-background-color); - .spectrum-Icon { - color: inherit - } - - .spectrum-Button-label { - color: inherit - } - } - } - - &.spectrum-Button--secondary { - &:not(:disabled) { - background-color: var(--spectrum-button-m-secondary-fill-white-texticon-background-color); - .spectrum-Icon { - color: var(--spectrum-button-m-secondary-fill-white-texticon-icon-color) - } - - .spectrum-Button-label { - color: var(--spectrum-button-m-secondary-fill-white-texticon-text-color) - } - - &:hover { - background-color: var(--spectrum-button-m-secondary-fill-white-texticon-background-color-hover); - } - - &:active { - background-color: var(--spectrum-button-m-secondary-fill-white-texticon-background-color-down); - } - - &:focus-visible { - background-color: var(--spectrum-button-m-secondary-fill-white-texticon-background-color-key-focus) - } - - &.is-keyboardFocused { - background-color: var(--spectrum-button-m-secondary-fill-white-texticon-background-color-key-focus) - } - } - } - - &:disabled { - background-color: var(--spectrum-button-m-secondary-fill-white-texticon-background-color-disabled) - } - } - - &.spectrum-Button--outline { - &:not(:disabled) { - .spectrum-Icon { - color: var(--spectrum-button-m-secondary-outline-white-texticon-icon-color) - } - - .spectrum-Button-label { - color: var(--spectrum-button-m-secondary-outline-white-texticon-text-color) - } - } - - &:disabled { - border-color: var(--spectrum-button-m-secondary-outline-white-texticon-border-color-disabled); - background-color: var(--spectrum-button-m-secondary-outline-white-texticon-background-color-disabled); - } - - &:not(.spectrum-Button--secondary) { - &:not(:disabled) { - border-color: var(--spectrum-button-m-primary-outline-white-texticon-border-color); - background-color: var(--spectrum-button-m-primary-outline-white-texticon-background-color); - - &:hover { - background-color: var(--spectrum-button-m-primary-outline-white-texticon-background-color-hover); - } - - &:active { - background-color: var(--spectrum-button-m-primary-outline-white-texticon-background-color-down); - } - - &:focus-visible { - background-color: var(--spectrum-button-m-primary-outline-white-texticon-background-color-key-focus); - } - - &.is-keyboardFocused { - background-color: var(--spectrum-button-m-primary-outline-white-texticon-background-color-key-focus); - } - } - } - - &.spectrum-Button--secondary { - &:not(:disabled) { - border-color: var(--spectrum-button-m-secondary-outline-white-texticon-border-color); - background-color: var(--spectrum-button-m-secondary-outline-white-texticon-background-color); - - &:hover { - background-color: var(--spectrum-button-m-secondary-outline-white-texticon-background-color-hover); - } - - &:active { - background-color: var(--spectrum-button-m-secondary-outline-white-texticon-background-color-down); - } - - &:focus-visible { - background-color: var(--spectrum-button-m-secondary-outline-white-texticon-background-color-key-focus); - } - - &.is-keyboardFocused { - background-color: var(--spectrum-button-m-secondary-outline-white-texticon-background-color-key-focus); - } - } - } - } - } - - &.spectrum-Button--staticBlack { - &:disabled { - .spectrum-Icon { - color: var(--spectrum-button-m-primary-fill-black-texticon-icon-color-disabled) - } - - .spectrum-Button-label { - color: var(--spectrum-button-m-primary-fill-black-texticon-text-color-disabled) - } - } - - &.spectrum-Button--fill { - &:not(.spectrum-Button--secondary) { - &:not(:disabled) { - background-color: var(--spectrum-button-m-primary-fill-black-texticon-background-color); - .spectrum-Icon { - color: inherit - } - - .spectrum-Button-label { - color: inherit - } - } - } - - &.spectrum-Button--secondary { - &:not(:disabled) { - background-color: var(--spectrum-button-m-secondary-fill-black-texticon-background-color); - .spectrum-Icon { - color: var(--spectrum-button-m-secondary-fill-black-texticon-icon-color) - } - - .spectrum-Button-label { - color: var(--spectrum-button-m-secondary-fill-black-texticon-text-color) - } - - &:hover { - background-color: var(--spectrum-button-m-secondary-fill-black-texticon-background-color-hover) - } - - &:active { - background-color: var(--spectrum-button-m-secondary-fill-black-texticon-background-color-down) - } - - &:focus-visible { - background-color: var(--spectrum-button-m-secondary-fill-black-texticon-background-color-key-focus) - } - - &.is-keyboardFocused { - background-color: var(--spectrum-button-m-secondary-fill-black-texticon-background-color-key-focus) - } - } - } - - &:disabled { - background-color: var(--spectrum-button-m-secondary-fill-black-texticon-background-color-disabled) - } - } - - &.spectrum-Button--outline { - &:not(:disabled) { - .spectrum-Icon { - color: var(--spectrum-button-m-secondary-outline-black-texticon-icon-color) - } - - .spectrum-Button-label { - color: var(--spectrum-button-m-secondary-outline-black-texticon-text-color) - } - } - - &:disabled { - border-color: var(--spectrum-button-m-secondary-outline-black-texticon-border-color-disabled); - background-color: var(--spectrum-button-m-secondary-outline-black-texticon-background-color-disabled); - } - - &:not(.spectrum-Button--secondary) { - &:not(:disabled) { - border-color: var(--spectrum-button-m-primary-outline-black-texticon-border-color); - background-color: var(--spectrum-button-m-primary-outline-black-texticon-background-color); - - &:hover { - background-color: var(--spectrum-button-m-primary-outline-black-texticon-background-color-hover); - } - - &:active { - background-color: var(--spectrum-button-m-primary-outline-black-texticon-background-color-down); - } - - &:focus-visible { - background-color: var(--spectrum-button-m-primary-outline-black-texticon-background-color-key-focus); - } - - &.is-keyboardFocused { - background-color: var(--spectrum-button-m-primary-outline-black-texticon-background-color-key-focus); - } - } - } - - &.spectrum-Button--secondary { - &:not(:disabled) { - border-color: var(--spectrum-button-m-secondary-outline-black-texticon-border-color); - background-color: var(--spectrum-button-m-secondary-outline-black-texticon-background-color); - - &:hover { - background-color: var(--spectrum-button-m-secondary-outline-black-texticon-background-color-hover); - } - - &:active { - background-color: var(--spectrum-button-m-secondary-outline-black-texticon-background-color-down); - } - - &:focus-visible { - background-color: var(--spectrum-button-m-secondary-outline-black-texticon-background-color-key-focus); - } - - &.is-keyboardFocused { - background-color: var(--spectrum-button-m-secondary-outline-black-texticon-background-color-key-focus); - } - } - } - } - } - - &.spectrum-Button--fill { - &.spectrum-Button--accent { - &:not(.spectrum-Button--staticWhite) { - &:not(.spectrum-Button--staticBlack) { - &:not(:disabled) { - background-color: var(--spectrum-button-m-accent-fill-texticon-background-color); - .spectrum-Icon { - color: var(--spectrum-button-m-accent-fill-texticon-icon-color); - } - - .spectrum-Button-label { - color: var(--spectrum-button-m-accent-fill-texticon-text-color); - } - - &:hover { - background-color: var(--spectrum-button-m-accent-fill-texticon-background-color-hover); - } - - &:active { - background-color: var(--spectrum-button-m-accent-fill-texticon-background-color-down); - } - - &:focus-visible { - background-color: var(--spectrum-button-m-accent-fill-texticon-background-color-key-focus); - } - - &.is-keyboardFocused { - background-color: var(--spectrum-button-m-accent-fill-texticon-background-color-key-focus); - } - } - } - } - } - - &.spectrum-Button--negative { - &:not(.spectrum-Button--staticWhite) { - &:not(.spectrum-Button--staticBlack) { - &:not(:disabled) { - background-color: var(--spectrum-button-m-negative-fill-texticon-background-color); - .spectrum-Icon { - color: var(--spectrum-button-m-negative-fill-texticon-icon-color); - } - - .spectrum-Button-label { - color: var(--spectrum-button-m-negative-fill-texticon-text-color); - } - - &:hover { - background-color: var(--spectrum-button-m-negative-fill-texticon-background-color-hover); - } - - &:active { - background-color: var(--spectrum-button-m-negative-fill-texticon-background-color-down) - } - - &:focus-visible { - background-color: var(--spectrum-button-m-negative-fill-texticon-background-color-key-focus) - } - - &.is-keyboardFocused { - background-color: var(--spectrum-button-m-negative-fill-texticon-background-color-key-focus) - } - } - } - } - } - - &.spectrum-Button--primary { - &:not(.spectrum-Button--staticWhite) { - &:not(.spectrum-Button--staticBlack) { - &:not(:disabled) { - background-color: var(--spectrum-button-m-primary-fill-texticon-background-color); - .spectrum-Icon { - color: var(--spectrum-button-m-primary-fill-texticon-icon-color); - } - - .spectrum-Button-label { - color: var(--spectrum-button-m-primary-fill-texticon-text-color); - } - - &:hover { - background-color: var(--spectrum-button-m-primary-fill-texticon-background-color-hover) - } - - &:active { - background-color: var(--spectrum-button-m-primary-fill-texticon-background-color-down) - } - - &:focus-visible { - background-color: var(--spectrum-button-m-primary-fill-texticon-background-color-key-focus) - } - - &.is-keyboardFocused { - background-color: var(--spectrum-button-m-primary-fill-texticon-background-color-key-focus) - } - } - } - } - } - - &.spectrum-Button--secondary { - &:not(.spectrum-Button--staticWhite) { - &:not(.spectrum-Button--staticBlack) { - &:not(:disabled) { - background-color: var(--spectrum-button-m-secondary-fill-texticon-background-color); - - .spectrum-Icon { - color: var(--spectrum-button-m-secondary-fill-texticon-icon-color); - } - - &:hover { - background-color: var(--spectrum-button-m-secondary-fill-texticon-background-color-hover); - - .spectrum-Icon { - color: var(--spectrum-button-m-secondary-fill-texticon-icon-color-hover); - } - - .spectrum-Button-label { - color: var(--spectrum-button-m-secondary-fill-texticon-text-color-hover); - } - } - - &:active { - background-color: var(--spectrum-button-m-secondary-fill-texticon-background-color-down); - - .spectrum-Icon { - color: var(--spectrum-button-m-secondary-fill-texticon-icon-color-down); - } - - .spectrum-Button-label { - color: var(--spectrum-button-m-secondary-fill-texticon-text-color-down); - } - } - - &:focus-visible { - background-color: var(--spectrum-button-m-secondary-fill-texticon-background-color-key-focus); - - .spectrum-Icon { - color: var(--spectrum-button-m-secondary-fill-texticon-icon-color-key-focus); - } - - .spectrum-Button-label { - color: var(--spectrum-button-m-secondary-fill-texticon-text-color-key-focus); - } - } - - &.is-keyboardFocused { - background-color: var(--spectrum-button-m-secondary-fill-texticon-background-color-key-focus); - - .spectrum-Icon { - color: var(--spectrum-button-m-secondary-fill-texticon-icon-color-key-focus); - } - - .spectrum-Button-label { - color: var(--spectrum-button-m-secondary-fill-texticon-text-color-key-focus); - } - } - - .spectrum-Button-label { - color: var(--spectrum-button-m-secondary-fill-texticon-text-color); - } - } - } - } - } - - &:not(.spectrum-Button--staticWhite) { - &:not(.spectrum-Button--staticBlack) { - &:disabled { - background-color: var(--spectrum-button-m-primary-fill-texticon-background-color-disabled); - } - } - } - - &:disabled { - border-color: var(--spectrum-button-m-primary-fill-texticon-border-color-disabled); - } - - &:not(:disabled) { - border-color: var(--spectrum-button-m-primary-fill-texticon-border-color); - } - } - - &.spectrum-Button--outline { - &.spectrum-Button--accent { - &:not(.spectrum-Button--staticWhite) { - &:not(.spectrum-Button--staticBlack) { - &:not(:disabled) { - background-color: var(--spectrum-button-m-accent-outline-texticon-background-color); - border-color: var(--spectrum-button-m-accent-outline-texticon-border-color); - .spectrum-Icon { - color: var(--spectrum-button-m-accent-outline-texticon-icon-color); - } - - &:hover { - background-color: var(--spectrum-button-m-accent-outline-texticon-background-color-hover); - border-color: var(--spectrum-button-m-accent-outline-texticon-border-color-hover); - .spectrum-Icon { - color: var(--spectrum-button-m-accent-outline-texticon-icon-color-hover); - } - - .spectrum-Button-label { - color: var(--spectrum-button-m-accent-outline-texticon-text-color-hover); - } - } - - &:active { - background-color: var(--spectrum-button-m-accent-outline-texticon-background-color-down); - border-color: var(--spectrum-button-m-accent-outline-texticon-border-color-down); - .spectrum-Icon { - color: var(--spectrum-button-m-accent-outline-texticon-icon-color-down); - } - - .spectrum-Button-label { - color: var(--spectrum-button-m-accent-outline-texticon-text-color-down); - } - } - - &:focus-visible { - background-color: var(--spectrum-button-m-accent-outline-texticon-background-color-key-focus); - border-color: var(--spectrum-button-m-accent-outline-texticon-border-color-key-focus); - .spectrum-Icon { - color: var(--spectrum-button-m-accent-outline-texticon-icon-color-key-focus); - } - - .spectrum-Button-label { - color: var(--spectrum-button-m-accent-outline-texticon-text-color-key-focus); - } - } - - &.is-keyboardFocused { - background-color: var(--spectrum-button-m-accent-outline-texticon-background-color-key-focus); - border-color: var(--spectrum-button-m-accent-outline-texticon-border-color-key-focus); - .spectrum-Icon { - color: var(--spectrum-button-m-accent-outline-texticon-icon-color-key-focus); - } - - .spectrum-Button-label { - color: var(--spectrum-button-m-accent-outline-texticon-text-color-key-focus); - } - } - - .spectrum-Button-label { - color: var(--spectrum-button-m-accent-outline-texticon-text-color); - } - } - } - } - } - - &.spectrum-Button--negative { - &:not(.spectrum-Button--staticWhite) { - &:not(.spectrum-Button--staticBlack) { - &:not(:disabled) { - background-color: var(--spectrum-button-m-negative-outline-texticon-background-color); - border-color: var(--spectrum-button-m-negative-outline-texticon-border-color); - .spectrum-Icon { - color: var(--spectrum-button-m-negative-outline-texticon-icon-color); - } - - &:hover { - background-color: var(--spectrum-button-m-negative-outline-texticon-background-color-hover); - border-color: var(--spectrum-button-m-negative-outline-texticon-border-color-hover); - .spectrum-Icon { - color: var(--spectrum-button-m-negative-outline-texticon-icon-color-hover); - } - - .spectrum-Button-label { - color: var(--spectrum-button-m-negative-outline-texticon-text-color-hover); - } - } - - &:active { - background-color: var(--spectrum-button-m-negative-outline-texticon-background-color-down); - border-color: var(--spectrum-button-m-negative-outline-texticon-border-color-down); - .spectrum-Icon { - color: var(--spectrum-button-m-negative-outline-texticon-icon-color-down); - } - - .spectrum-Button-label { - color: var(--spectrum-button-m-negative-outline-texticon-text-color-down); - } - } - - &:focus-visible { - background-color: var(--spectrum-button-m-negative-outline-texticon-background-color-key-focus); - border-color: var(--spectrum-button-m-negative-outline-texticon-border-color-key-focus); - .spectrum-Icon { - color: var(--spectrum-button-m-negative-outline-texticon-icon-color-key-focus); - } - - .spectrum-Button-label { - color: var(--spectrum-button-m-negative-outline-texticon-text-color-key-focus); - } - } - - &.is-keyboardFocused { - background-color: var(--spectrum-button-m-negative-outline-texticon-background-color-key-focus); - border-color: var(--spectrum-button-m-negative-outline-texticon-border-color-key-focus); - .spectrum-Icon { - color: var(--spectrum-button-m-negative-outline-texticon-icon-color-key-focus); - } - - .spectrum-Button-label { - color: var(--spectrum-button-m-negative-outline-texticon-text-color-key-focus); - } - } - - .spectrum-Button-label { - color: var(--spectrum-button-m-negative-outline-texticon-text-color); - } - } - } - } - } - - &.spectrum-Button--primary { - &:not(.spectrum-Button--staticWhite) { - &:not(.spectrum-Button--staticBlack) { - &:not(:disabled) { - background-color: var(--spectrum-button-m-primary-outline-texticon-background-color); - border-color: var(--spectrum-button-m-primary-outline-texticon-border-color); - .spectrum-Icon { - color: var(--spectrum-button-m-primary-outline-texticon-icon-color); - } - - &:hover { - background-color: var(--spectrum-button-m-primary-outline-texticon-background-color-hover); - border-color: var(--spectrum-button-m-primary-outline-texticon-border-color-hover); - .spectrum-Icon { - color: var(--spectrum-button-m-primary-outline-texticon-icon-color-hover); - } - - .spectrum-Button-label { - color: var(--spectrum-button-m-primary-outline-texticon-text-color-hover); - } - } - - &:active { - background-color: var(--spectrum-button-m-primary-outline-texticon-background-color-down); - border-color: var(--spectrum-button-m-primary-outline-texticon-border-color-down); - .spectrum-Icon { - color: var(--spectrum-button-m-primary-outline-texticon-icon-color-down); - } - - .spectrum-Button-label { - color: var(--spectrum-button-m-primary-outline-texticon-text-color-down); - } - } - - &:focus-visible { - background-color: var(--spectrum-button-m-primary-outline-texticon-background-color-key-focus); - border-color: var(--spectrum-button-m-primary-outline-texticon-border-color-key-focus); - .spectrum-Icon { - color: var(--spectrum-button-m-primary-outline-texticon-icon-color-key-focus); - } - - .spectrum-Button-label { - color: var(--spectrum-button-m-primary-outline-texticon-text-color-key-focus); - } - } - - &.is-keyboardFocused { - background-color: var(--spectrum-button-m-primary-outline-texticon-background-color-key-focus); - border-color: var(--spectrum-button-m-primary-outline-texticon-border-color-key-focus); - .spectrum-Icon { - color: var(--spectrum-button-m-primary-outline-texticon-icon-color-key-focus); - } - - .spectrum-Button-label { - color: var(--spectrum-button-m-primary-outline-texticon-text-color-key-focus); - } - } - - .spectrum-Button-label { - color: var(--spectrum-button-m-primary-outline-texticon-text-color); - } - } - } - } - } - - &.spectrum-Button--secondary { - &:not(.spectrum-Button--staticWhite) { - &:not(.spectrum-Button--staticBlack) { - &:not(:disabled) { - background-color: var(--spectrum-button-m-secondary-outline-texticon-background-color); - border-color: var(--spectrum-button-m-secondary-outline-texticon-border-color); - .spectrum-Icon { - color: var(--spectrum-button-m-secondary-outline-texticon-icon-color); - } - - &:hover { - background-color: var(--spectrum-button-m-secondary-outline-texticon-background-color-hover); - border-color: var(--spectrum-button-m-secondary-outline-texticon-border-color-hover); - .spectrum-Icon { - color: var(--spectrum-button-m-secondary-outline-texticon-icon-color-hover); - } - - .spectrum-Button-label { - color: var(--spectrum-button-m-secondary-outline-texticon-text-color-hover); - } - } - - &:active { - background-color: var(--spectrum-button-m-secondary-outline-texticon-background-color-down); - border-color: var(--spectrum-button-m-secondary-outline-texticon-border-color-down); - .spectrum-Icon { - color: var(--spectrum-button-m-secondary-outline-texticon-icon-color-down); - } - - .spectrum-Button-label { - color: var(--spectrum-button-m-secondary-outline-texticon-text-color-down); - } - } - - &:focus-visible { - background-color: var(--spectrum-button-m-secondary-outline-texticon-background-color-key-focus); - border-color: var(--spectrum-button-m-secondary-outline-texticon-border-color-key-focus); - .spectrum-Icon { - color: var(--spectrum-button-m-secondary-outline-texticon-icon-color-key-focus); - } - - .spectrum-Button-label { - color: var(--spectrum-button-m-secondary-outline-texticon-text-color-key-focus); - } - } - - &.is-keyboardFocused { - background-color: var(--spectrum-button-m-secondary-outline-texticon-background-color-key-focus); - border-color: var(--spectrum-button-m-secondary-outline-texticon-border-color-key-focus); - .spectrum-Icon { - color: var(--spectrum-button-m-secondary-outline-texticon-icon-color-key-focus); - } - - .spectrum-Button-label { - color: var(--spectrum-button-m-secondary-outline-texticon-text-color-key-focus); - } - } - - .spectrum-Button-label { - color: var(--spectrum-button-m-secondary-outline-texticon-text-color); - } - } - } - } - } - - &:not(.spectrum-Button--staticWhite) { - &:not(.spectrum-Button--staticBlack) { - &:disabled { - border-color: var(--spectrum-button-m-primary-outline-texticon-border-color-disabled); - background-color: var(--spectrum-button-m-primary-outline-texticon-background-color-disabled); - } - } - } - } -} -/* Only override things where the defaults don't work */ -@media (forced-colors: active) { - .spectrum-Button { - --spectrum-button-m-accent-fill-texticon-background-color-down: Highlight; - --spectrum-button-m-accent-fill-texticon-background-color-hover: Highlight; - --spectrum-button-m-accent-fill-texticon-background-color-key-focus: Highlight; - --spectrum-button-m-accent-fill-texticon-background-color: ButtonText; - --spectrum-button-m-accent-fill-texticon-icon-color: ButtonFace; - --spectrum-button-m-accent-fill-texticon-text-color: ButtonFace; - --spectrum-button-m-accent-outline-texticon-background-color: ButtonFace; - --spectrum-button-m-accent-outline-texticon-background-color-down: ButtonFace; - --spectrum-button-m-accent-outline-texticon-background-color-hover: ButtonFace; - --spectrum-button-m-accent-outline-texticon-background-color-key-focus: ButtonFace; - --spectrum-button-m-accent-outline-texticon-border-color: ButtonText; - --spectrum-button-m-accent-outline-texticon-border-color-down: Highlight; - --spectrum-button-m-accent-outline-texticon-border-color-hover: Highlight; - --spectrum-button-m-accent-outline-texticon-border-color-key-focus: Highlight; - --spectrum-button-m-accent-outline-texticon-icon-color: ButtonText; - --spectrum-button-m-accent-outline-texticon-icon-color-down: ButtonText; - --spectrum-button-m-accent-outline-texticon-icon-color-hover: ButtonText; - --spectrum-button-m-accent-outline-texticon-icon-color-key-focus: ButtonText; - --spectrum-button-m-accent-outline-texticon-text-color: ButtonText; - --spectrum-button-m-accent-outline-texticon-text-color-down: ButtonText; - --spectrum-button-m-accent-outline-texticon-text-color-hover: ButtonText; - --spectrum-button-m-accent-outline-texticon-text-color-key-focus: ButtonText; - --spectrum-button-m-primary-fill-texticon-icon-color-disabled: GrayText; - --spectrum-button-m-primary-fill-texticon-text-color-disabled: GrayText; - --spectrum-button-m-primary-fill-white-texticon-icon-color-disabled: GrayText; - --spectrum-button-m-primary-fill-white-texticon-text-color-disabled: GrayText; - --spectrum-button-m-secondary-fill-white-texticon-background-color-disabled: ButtonFace; - --spectrum-button-m-secondary-outline-white-texticon-background-color-disabled: ButtonFace; - --spectrum-button-m-primary-fill-black-texticon-icon-color-disabled: GrayText; - --spectrum-button-m-primary-fill-black-texticon-text-color-disabled: GrayText; - --spectrum-button-m-secondary-fill-black-texticon-background-color-disabled: ButtonFace; - --spectrum-button-m-secondary-outline-black-texticon-background-color-disabled: ButtonFace; - --spectrum-button-m-primary-fill-texticon-background-color-disabled: ButtonFace; - --spectrum-button-m-primary-outline-texticon-background-color-disabled: ButtonFace; - - } - .spectrum-Button { - &:focus-ring, - &.is-focused { - &:after { - forced-color-adjust:none; - box-shadow: 0 0 0 var(--spectrum-button-primary-fill-texticon-focus-ring-size) ButtonText; - } - } - } - .spectrum-Button--accent { - .spectrum-Button-label { - forced-color-adjust:none; - } - } -} \ No newline at end of file diff --git a/components/button/stories/button.stories.js b/components/button/stories/button.stories.js index 454a83ccdd6..d766bb4c839 100644 --- a/components/button/stories/button.stories.js +++ b/components/button/stories/button.stories.js @@ -8,7 +8,6 @@ import { Template } from "./template"; // Load styles for this component import '../index.css'; -import '../skin.css'; export default { title: "Button", diff --git a/components/button/themes/express.css b/components/button/themes/express.css new file mode 100644 index 00000000000..d66ca9e0280 --- /dev/null +++ b/components/button/themes/express.css @@ -0,0 +1,36 @@ +/* +Copyright 2022 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +@container (--system: express) { + .spectrum-Button { + --spectrum-button-background-color-default: var(--spectrum-gray-200); + --spectrum-button-background-color-hover: var(--spectrum-gray-300); + --spectrum-button-background-color-down: var(--spectrum-gray-400); + --spectrum-button-background-color-focus: var(--spectrum-gray-300); + + --spectrum-button-border-color-default: transparent; + --spectrum-button-border-color-hover: transparent; + --spectrum-button-border-color-down: transparent; + --spectrum-button-border-color-focus: transparent; + + --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-button-border-color-disabled: transparent; + + &.is-selected { + --spectrum-button-background-color-default: var(--spectrum-neutral-background-color-default); + --spectrum-button-background-color-hover: var(--spectrum-neutral-background-color-hover); + --spectrum-button-background-color-down: var(--spectrum-neutral-background-color-down); + --spectrum-button-background-color-focus: var(--spectrum-neutral-background-color-key-focus); + } + } + } + \ No newline at end of file diff --git a/components/button/themes/spectrum.css b/components/button/themes/spectrum.css new file mode 100644 index 00000000000..9a50efa5dc3 --- /dev/null +++ b/components/button/themes/spectrum.css @@ -0,0 +1,462 @@ +/* +Copyright 2022 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +@container (--system: spectrum) { + .spectrum-Button { + --spectrum-button-background-color-default: var(--spectrum-gray-75); + --spectrum-button-background-color-hover: var(--spectrum-gray-200); + --spectrum-button-background-color-down: var(--spectrum-gray-300); + --spectrum-button-background-color-focus: var(--spectrum-gray-200); + + --spectrum-button-border-color-default: var(--spectrum-gray-400); + --spectrum-button-border-color-hover: var(--spectrum-gray-500); + --spectrum-button-border-color-down: var(--spectrum-gray-600); + --spectrum-button-border-color-focus: var(--spectrum-gray-500); + + --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + + --spectrum-button-background-color-disabled: transparent; + --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); + --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); + + + &.spectrum-Button--accent { + --spectrum-button-background-color-default: var(--spectrum-accent-background-color-default); + --spectrum-button-background-color-hover: var(--spectrum-accent-background-color-hover); + --spectrum-button-background-color-down: var(--spectrum-accent-background-color-down); + --spectrum-button-background-color-focus: var(--spectrum-accent-background-color-key-focus); + + --spectrum-button-border-color-default: transparent; + --spectrum-button-border-color-hover: transparent; + --spectrum-button-border-color-down: transparent; + --spectrum-button-border-color-focus: transparent; + + --spectrum-button-content-color-default: var(--spectrum-white); + --spectrum-button-content-color-hover: var(--spectrum-white); + --spectrum-button-content-color-down: var(--spectrum-white); + --spectrum-button-content-color-focus: var(--spectrum-white); + + --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-button-border-color-disabled: transparent; + --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); + + &.spectrum-Button--outline { + --spectrum-button-background-color-default: transparent; + --spectrum-button-background-color-hover: var(--spectrum-accent-color-200); + --spectrum-button-background-color-down: var(--spectrum-accent-color-300); + --spectrum-button-background-color-focus: var(--spectrum-accent-color-200); + + --spectrum-button-border-color-default: var(--spectrum-accent-color-900); + --spectrum-button-border-color-hover: var(--spectrum-accent-color-1000); + --spectrum-button-border-color-down: var(--spectrum-accent-color-1100); + --spectrum-button-border-color-focus: var(--spectrum-accent-color-1000); + + --spectrum-button-content-color-default: var(--spectrum-accent-content-color-default); + --spectrum-button-content-color-hover: var(--spectrum-accent-content-color-hover); + --spectrum-button-content-color-down: var(--spectrum-accent-content-color-down); + --spectrum-button-content-color-focus: var(--spectrum-accent-content-color-key-focus); + + --spectrum-button-background-color-disabled: transparent; + --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); + --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); + } + } + + + &.spectrum-Button--negative { + --spectrum-button-background-color-default: var(--spectrum-negative-background-color-default); + --spectrum-button-background-color-hover: var(--spectrum-negative-background-color-hover); + --spectrum-button-background-color-down: var(--spectrum-negative-background-color-down); + --spectrum-button-background-color-focus: var(--spectrum-negative-background-color-key-focus); + + --spectrum-button-border-color-default: transparent; + --spectrum-button-border-color-hover: transparent; + --spectrum-button-border-color-down: transparent; + --spectrum-button-border-color-focus: transparent; + + --spectrum-button-content-color-default: var(--spectrum-white); + --spectrum-button-content-color-hover: var(--spectrum-white); + --spectrum-button-content-color-down: var(--spectrum-white); + --spectrum-button-content-color-focus: var(--spectrum-white); + + --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-button-border-color-disabled: transparent; + --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); + + &.spectrum-Button--outline { + --spectrum-button-background-color-default: transparent; + --spectrum-button-background-color-hover: var(--spectrum-negative-color-200); + --spectrum-button-background-color-down: var(--spectrum-negative-color-300); + --spectrum-button-background-color-focus: var(--spectrum-negative-color-200); + + --spectrum-button-border-color-default: var(--spectrum-negative-color-900); + --spectrum-button-border-color-hover: var(--spectrum-negative-color-1000); + --spectrum-button-border-color-down: var(--spectrum-negative-color-1100); + --spectrum-button-border-color-focus: var(--spectrum-negative-color-1000); + + --spectrum-button-content-color-default: var(--spectrum-negative-content-color-default); + --spectrum-button-content-color-hover: var(--spectrum-negative-content-color-hover); + --spectrum-button-content-color-down: var(--spectrum-negative-content-color-down); + --spectrum-button-content-color-focus: var(--spectrum-negative-content-color-key-focus); + + --spectrum-button-background-color-disabled: transparent; + --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); + --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); + } + } + + &.spectrum-Button--primary { + --spectrum-button-background-color-default: var(--spectrum-neutral-background-color-default); + --spectrum-button-background-color-hover: var(--spectrum-neutral-background-color-hover); + --spectrum-button-background-color-down: var(--spectrum-neutral-background-color-down); + --spectrum-button-background-color-focus: var(--spectrum-neutral-background-color-key-focus); + + --spectrum-button-border-color-default: transparent; + --spectrum-button-border-color-hover: transparent; + --spectrum-button-border-color-down: transparent; + --spectrum-button-border-color-focus: transparent; + + --spectrum-button-content-color-default: var(--spectrum-white); + --spectrum-button-content-color-hover: var(--spectrum-white); + --spectrum-button-content-color-down: var(--spectrum-white); + --spectrum-button-content-color-focus: var(--spectrum-white); + + --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-button-border-color-disabled: transparent; + --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); + + &.spectrum-Button--outline { + --spectrum-button-background-color-default: transparent; + --spectrum-button-background-color-hover: var(--spectrum-gray-300); + --spectrum-button-background-color-down: var(--spectrum-gray-400); + --spectrum-button-background-color-focus: var(--spectrum-gray-300); + + --spectrum-button-border-color-default: var(--spectrum-gray-800); + --spectrum-button-border-color-hover: var(--spectrum-gray-900); + --spectrum-button-border-color-down: var(--spectrum-gray-900); + --spectrum-button-border-color-focus: var(--spectrum-gray-900); + + --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + + --spectrum-button-background-color-disabled: transparent; + --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); + --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); + } + } + + &.spectrum-Button--secondary { + --spectrum-button-background-color-default: var(--spectrum-gray-200); + --spectrum-button-background-color-hover: var(--spectrum-gray-300); + --spectrum-button-background-color-down: var(--spectrum-gray-400); + --spectrum-button-background-color-focus: var(--spectrum-gray-300); + + --spectrum-button-border-color-default: transparent; + --spectrum-button-border-color-hover: transparent; + --spectrum-button-border-color-down: transparent; + --spectrum-button-border-color-focus: transparent; + + --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + + --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-button-border-color-disabled: transparent; + --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); + + &.spectrum-Button--outline { + --spectrum-button-background-color-default: transparent; + --spectrum-button-background-color-hover: var(--spectrum-gray-300); + --spectrum-button-background-color-down: var(--spectrum-gray-400); + --spectrum-button-background-color-focus: var(--spectrum-gray-300); + + --spectrum-button-border-color-default: var(--spectrum-gray-300); + --spectrum-button-border-color-hover: var(--spectrum-gray-400); + --spectrum-button-border-color-down: var(--spectrum-gray-500); + --spectrum-button-border-color-focus: var(--spectrum-gray-400); + + --spectrum-button-content-color-default: var(--spectrum-neutral-content-color-default); + --spectrum-button-content-color-hover: var(--spectrum-neutral-content-color-hover); + --spectrum-button-content-color-down: var(--spectrum-neutral-content-color-down); + --spectrum-button-content-color-focus: var(--spectrum-neutral-content-color-key-focus); + + --spectrum-button-background-color-disabled: transparent; + --spectrum-button-border-color-disabled: var(--spectrum-disabled-border-color); + --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color); + } + } + + &.spectrum-Button--quiet { + --spectrum-button-background-color-default: transparent; + --spectrum-button-background-color-hover: var(--spectrum-gray-200); + --spectrum-button-background-color-down: var(--spectrum-gray-300); + --spectrum-button-background-color-focus: var(--spectrum-gray-200); + + --spectrum-button-border-color-default: transparent; + --spectrum-button-border-color-hover: transparent; + --spectrum-button-border-color-down: transparent; + --spectrum-button-border-color-focus: transparent; + + --spectrum-button-background-color-disabled: transparent; + --spectrum-button-border-color-disabled: transparent; + } + + &.is-selected { + --spectrum-button-background-color-default: var(--spectrum-neutral-subdued-background-color-default); + --spectrum-button-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover); + --spectrum-button-background-color-down: var(--spectrum-neutral-subdued-background-color-down); + --spectrum-button-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus); + + --spectrum-button-border-color-default: transparent; + --spectrum-button-border-color-hover: transparent; + --spectrum-button-border-color-down: transparent; + --spectrum-button-border-color-focus: transparent; + + --spectrum-button-content-color-default: var(--spectrum-white); + --spectrum-button-content-color-hover: var(--spectrum-white); + --spectrum-button-content-color-down: var(--spectrum-white); + --spectrum-button-content-color-focus: var(--spectrum-white); + + --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color); + --spectrum-button-border-color-disabled: transparent; + + &.spectrum-Button--emphasized { + --spectrum-button-background-color-default: var(--spectrum-accent-background-color-default); + --spectrum-button-background-color-hover: var(--spectrum-accent-background-color-hover); + --spectrum-button-background-color-down: var(--spectrum-accent-background-color-down); + --spectrum-button-background-color-focus: var(--spectrum-accent-background-color-key-focus); + } + } + + &.spectrum-Button--staticBlack, + &.spectrum-Button--staticWhite { + &.spectrum-Button--quiet { + --spectrum-button-border-color-default: transparent; + --spectrum-button-border-color-hover: transparent; + --spectrum-button-border-color-down: transparent; + --spectrum-button-border-color-focus: transparent; + + --spectrum-button-border-color-disabled: transparent; + } + } + + /* static white */ + + &.spectrum-Button--staticWhite { + --spectrum-button-background-color-default: var(--spectrum-transparent-white-800); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-900); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-900); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-900); + + --spectrum-button-border-color-default: transparent; + --spectrum-button-border-color-hover: transparent; + --spectrum-button-border-color-down: transparent; + --spectrum-button-border-color-focus: transparent; + + --spectrum-button-content-color-default: var(--spectrum-black); + --spectrum-button-content-color-hover: var(--spectrum-black); + --spectrum-button-content-color-down: var(--spectrum-black); + --spectrum-button-content-color-focus: var(--spectrum-black); + + --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + + --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color); + --spectrum-button-border-color-disabled: transparent; + --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + + &.spectrum-Button--outline { + --spectrum-button-background-color-default: transparent; + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-300); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-400); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-300); + + --spectrum-button-border-color-default: var(--spectrum-transparent-white-800); + --spectrum-button-border-color-hover: var(--spectrum-transparent-white-900); + --spectrum-button-border-color-down: var(--spectrum-transparent-white-900); + --spectrum-button-border-color-focus: var(--spectrum-transparent-white-900); + + --spectrum-button-content-color-default: var(--spectrum-white); + --spectrum-button-content-color-hover: var(--spectrum-white); + --spectrum-button-content-color-down: var(--spectrum-white); + --spectrum-button-content-color-focus: var(--spectrum-white); + + --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + + --spectrum-button-background-color-disabled: transparent; + --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-white-border-color); + --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + } + + &.is-selected { + --spectrum-button-background-color-default: var(--spectrum-transparent-white-800); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-900); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-900); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-900); + + --spectrum-button-content-color-default: var(--mod-button-static-content-color, var(--spectrum-black)); + --spectrum-button-content-color-hover: var(--mod-button-static-content-color, var(--spectrum-black)); + --spectrum-button-content-color-down: var(--mod-button-static-content-color, var(--spectrum-black)); + --spectrum-button-content-color-focus: var(--mod-button-static-content-color, var(--spectrum-black)); + + --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color); + --spectrum-button-border-color-disabled: transparent; + } + } + + &.spectrum-Button--staticWhite.spectrum-Button--secondary { + --spectrum-button-background-color-default: var(--spectrum-transparent-white-200); + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-300); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-400); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-300); + + --spectrum-button-border-color-default: transparent; + --spectrum-button-border-color-hover: transparent; + --spectrum-button-border-color-down: transparent; + --spectrum-button-border-color-focus: transparent; + + --spectrum-button-content-color-default: var(--spectrum-white); + --spectrum-button-content-color-hover: var(--spectrum-white); + --spectrum-button-content-color-down: var(--spectrum-white); + --spectrum-button-content-color-focus: var(--spectrum-white); + + --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + + --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-white-background-color); + --spectrum-button-border-color-disabled: transparent; + --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + + &.spectrum-Button--outline { + --spectrum-button-background-color-default: transparent; + --spectrum-button-background-color-hover: var(--spectrum-transparent-white-300); + --spectrum-button-background-color-down: var(--spectrum-transparent-white-400); + --spectrum-button-background-color-focus: var(--spectrum-transparent-white-300); + + --spectrum-button-border-color-default: var(--spectrum-transparent-white-300); + --spectrum-button-border-color-hover: var(--spectrum-transparent-white-400); + --spectrum-button-border-color-down: var(--spectrum-transparent-white-500); + --spectrum-button-border-color-focus: var(--spectrum-transparent-white-400); + + --spectrum-button-content-color-default: var(--spectrum-white); + --spectrum-button-content-color-hover: var(--spectrum-white); + --spectrum-button-content-color-down: var(--spectrum-white); + --spectrum-button-content-color-focus: var(--spectrum-white); + + --spectrum-button-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color); + + --spectrum-button-background-color-disabled: transparent; + --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-white-border-color); + --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-white-content-color); + } + } + + /* static black */ + &.spectrum-Button--staticBlack { + --spectrum-button-background-color-default: var(--spectrum-transparent-black-800); + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-900); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-900); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-900); + + --spectrum-button-border-color-default: transparent; + --spectrum-button-border-color-hover: transparent; + --spectrum-button-border-color-down: transparent; + --spectrum-button-border-color-focus: transparent; + + --spectrum-button-content-color-default: var(--spectrum-white); + --spectrum-button-content-color-hover: var(--spectrum-white); + --spectrum-button-content-color-down: var(--spectrum-white); + --spectrum-button-content-color-focus: var(--spectrum-white); + + --spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + + --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-black-background-color); + --spectrum-button-border-color-disabled: transparent; + --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + + &.spectrum-Button--outline { + --spectrum-button-background-color-default: transparent; + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-300); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-400); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-300); + + --spectrum-button-border-color-default: var(--spectrum-transparent-black-400); + --spectrum-button-border-color-hover: var(--spectrum-transparent-black-500); + --spectrum-button-border-color-down: var(--spectrum-transparent-black-600); + --spectrum-button-border-color-focus: var(--spectrum-transparent-black-500); + + --spectrum-button-content-color-default: var(--spectrum-black); + --spectrum-button-content-color-hover: var(--spectrum-black); + --spectrum-button-content-color-down: var(--spectrum-black); + --spectrum-button-content-color-focus: var(--spectrum-black); + + --spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + + --spectrum-button-background-color-disabled: transparent; + --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-black-border-color); + --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + } + } + + + &.spectrum-Button--staticBlack.spectrum-Button--secondary { + --spectrum-button-background-color-default: var(--spectrum-transparent-black-200); + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-300); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-400); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-300); + + + --spectrum-button-border-color-default: transparent; + --spectrum-button-border-color-hover: transparent; + --spectrum-button-border-color-down: transparent; + --spectrum-button-border-color-focus: transparent; + + --spectrum-button-content-color-default: var(--spectrum-black); + --spectrum-button-content-color-hover: var(--spectrum-black); + --spectrum-button-content-color-down: var(--spectrum-black); + --spectrum-button-content-color-focus: var(--spectrum-black); + + --spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + + --spectrum-button-background-color-disabled: var(--spectrum-disabled-static-black-background-color); + --spectrum-button-border-color-disabled: transparent; + --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + + &.spectrum-Button--outline { + --spectrum-button-background-color-default: transparent; + --spectrum-button-background-color-hover: var(--spectrum-transparent-black-300); + --spectrum-button-background-color-down: var(--spectrum-transparent-black-400); + --spectrum-button-background-color-focus: var(--spectrum-transparent-black-300); + + --spectrum-button-border-color-default: var(--spectrum-transparent-black-300); + --spectrum-button-border-color-hover: var(--spectrum-transparent-black-400); + --spectrum-button-border-color-down: var(--spectrum-transparent-black-500); + --spectrum-button-border-color-focus: var(--spectrum-transparent-black-400); + + --spectrum-button-content-color-default: var(--spectrum-black); + --spectrum-button-content-color-hover: var(--spectrum-black); + --spectrum-button-content-color-down: var(--spectrum-black); + --spectrum-button-content-color-focus: var(--spectrum-black); + + --spectrum-button-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color); + + --spectrum-button-background-color-disabled: transparent; + --spectrum-button-border-color-disabled: var(--spectrum-disabled-static-black-border-color); + --spectrum-button-content-color-disabled: var(--spectrum-disabled-static-black-content-color); + } + } + } +} \ No newline at end of file diff --git a/components/commons/CHANGELOG.md b/components/commons/CHANGELOG.md index 81b242e6671..ab0eda63b14 100644 --- a/components/commons/CHANGELOG.md +++ b/components/commons/CHANGELOG.md @@ -3,6 +3,18 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +# 4.1.0-beta.0 +🗓 2023-01-26 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/commons@4.0.2...@spectrum-css/commons@4.1.0-beta.0) + +### ✨ Features + +* migrating to core tokens v5.0.0 ([6e640ba](https://github.com/adobe/spectrum-css/commit/6e640ba)) + + + + + ## 4.0.2 🗓 2023-01-18 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/commons@4.0.0...@spectrum-css/commons@4.0.2) diff --git a/components/commons/basebutton-coretokens.css b/components/commons/basebutton-coretokens.css index 16a93d57f2c..5d2bafa4385 100644 --- a/components/commons/basebutton-coretokens.css +++ b/components/commons/basebutton-coretokens.css @@ -1,5 +1,5 @@ /* -Copyright 2022 Adobe. All rights reserved. +Copyright 2020 Adobe. All rights reserved. This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 @@ -40,15 +40,14 @@ governing permissions and limitations under the License. /* Adjacent buttons should be aligned correctly */ vertical-align: top; - transition: background var(--spectrum-animation-duration-100) ease-out, - border-color var(--spectrum-animation-duration-100) ease-out, - color var(--spectrum-animation-duration-100) ease-out, - box-shadow var(--spectrum-animation-duration-100) ease-out; + transition: background var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out, + border-color var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out, + color var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out, + box-shadow var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out; text-decoration: none; - font-family: var(--spectrum-font-family-base); - - line-height: var(--spectrum-line-height-small); + font-family: var(--mod-font-family-base, var(--spectrum-font-family-base)); + line-height: var(--mod-line-height-small, var(--spectrum-line-height-small)); user-select: none; -webkit-user-select: none; @@ -83,6 +82,28 @@ governing permissions and limitations under the License. flex-shrink: 0; } +%spectrum-ButtonWithFocusRing { + &:after { + content: ""; + display: block; + position: absolute; + left: 0; + right: 0; + bottom: 0; + top: 0; + margin: calc(var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -1); + transition: opacity var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out, + margin var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)) ease-out; + } + + &:focus-ring { + &:after { + margin: calc(var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -2); + } + } +} + + %spectrum-AnchorButton { /* Remove appearance for clickable types in iOS and Safari. */ -webkit-appearance: none; @@ -103,4 +124,4 @@ governing permissions and limitations under the License. &:empty { display: none; } -} +} \ No newline at end of file diff --git a/components/commons/package.json b/components/commons/package.json index 79d8e2c355a..a5406c5f4c8 100644 --- a/components/commons/package.json +++ b/components/commons/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/commons", - "version": "4.0.2", + "version": "4.1.0-beta.0", "description": "Common mixins for Spectrum CSS components", "license": "Apache-2.0", "homepage": "https://opensource.adobe.com/spectrum-css/", diff --git a/yarn.lock b/yarn.lock index 38e9b4368c5..5ddbac24712 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2421,6 +2421,11 @@ resolved "https://registry.yarnpkg.com/@spectrum-css/actiongroup/-/actiongroup-2.0.0.tgz#77a27608d3b774ca2f56539c6375adce7a2cd589" integrity sha512-mUdEWcGvCAekmaaLAbimqCd3/H7kDasbna3sLJY6u1+eYyJxQzmYkT4MvdjdoqjrvczU0QgFbY9nHlekUPH4RQ== +"@spectrum-css/button@^6.0.21": + version "6.0.21" + resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-6.0.21.tgz#87a266147c60bb23aad61df200d82ee5aa90b44d" + integrity sha512-GhYFKkQ32jtu0dDMlPE3NSq8y0f6hDeodD04adq7q+YKypbvMdj32He+ZuQOfpcb/veGBdqsKYugRnO2mcYW0A== + "@spectrum-css/buttongroup@^5.0.13": version "5.0.13" resolved "https://registry.yarnpkg.com/@spectrum-css/buttongroup/-/buttongroup-5.0.13.tgz#3414927df053ef7c8fbe0331b68d4353a9b63759"