diff --git a/components/avatar/gulpfile.js b/components/avatar/gulpfile.js index 3d2a7fa4e4..f13104999f 100644 --- a/components/avatar/gulpfile.js +++ b/components/avatar/gulpfile.js @@ -1 +1 @@ -module.exports = require('@spectrum-css/component-builder'); +module.exports = require('@spectrum-css/component-builder-simple'); diff --git a/components/avatar/index.css b/components/avatar/index.css index ff557d1fee..1e3b9b4e27 100644 --- a/components/avatar/index.css +++ b/components/avatar/index.css @@ -1,5 +1,5 @@ /* -Copyright 2019 Adobe. All rights reserved. +Copyright 2023 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 @@ -10,107 +10,123 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -@import "../vars/css/components/spectrum-avatar.css"; +.spectrum-Avatar { + --spectrum-avatar-color-opacity: 1; + + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-100); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-100); + + --spectrum-avatar-border-radius: var(--spectrum-avatar-block-size); + + --spectrum-avatar-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); + --spectrum-avatar-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --spectrum-avatar-focus-indicator-color: var(--spectrum-focus-indicator-color); + + --spectrum-avatar-color-opacity-disabled: var(--spectrum-avatar-opacity-disabled); +} .spectrum-Avatar--size50 { - @remapvars { - find: /--spectrum-avatar-size-50(.*)/; - filter: color; - replace: --spectrum-avatar$1; - } + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-50); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-50) } .spectrum-Avatar--size75 { - @remapvars { - find: /--spectrum-avatar-size-75(.*)/; - filter: color; - replace: --spectrum-avatar$1; - } + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-75); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-75) } .spectrum-Avatar--size100 { - @remapvars { - find: /--spectrum-avatar-size-100(.*)/; - filter: color; - replace: --spectrum-avatar$1; - } + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-100); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-100) } .spectrum-Avatar--size200 { - @remapvars { - find: /--spectrum-avatar-size-200(.*)/; - filter: color; - replace: --spectrum-avatar$1; - } + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-200); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-200) } .spectrum-Avatar--size300 { - @remapvars { - find: /--spectrum-avatar-size-300(.*)/; - filter: color; - replace: --spectrum-avatar$1; - } + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-300); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-300) } .spectrum-Avatar--size400 { - @remapvars { - find: /--spectrum-avatar-size-400(.*)/; - filter: color; - replace: --spectrum-avatar$1; - } + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-400); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-400) } .spectrum-Avatar--size500 { - @remapvars { - find: /--spectrum-avatar-size-500(.*)/; - filter: color; - replace: --spectrum-avatar$1; - } + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-500); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-500) } .spectrum-Avatar--size600 { - @remapvars { - find: /--spectrum-avatar-size-600(.*)/; - filter: color; - replace: --spectrum-avatar$1; - } + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-600); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-600) } .spectrum-Avatar--size700 { - @remapvars { - find: /--spectrum-avatar-size-700(.*)/; - filter: color; - replace: --spectrum-avatar$1; + --spectrum-avatar-inline-size: var(--spectrum-avatar-size-700); + --spectrum-avatar-block-size: var(--spectrum-avatar-size-700) +} + +@media (forced-colors: active) { + .spectrum-Avatar { + --highcontrast-avatar-color-opacity-disabled: 1; + --highcontrast-avatar-focus-indicator-color: CanvasText; } } .spectrum-Avatar { display: inline-block; position: relative; - inline-size: var(--spectrum-avatar-width); - block-size: var(--spectrum-avatar-height); + inline-size: var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size)); + block-size: var(--mod-avatar-block-size, var(--spectrum-avatar-block-size)); - border-radius: var(--spectrum-avatar-border-radius); + border-radius: var(--mod-avatar-border-radius, var(--spectrum-avatar-border-radius)); border-width: 0; + outline: none; + -webkit-user-drag: none; user-select: none; - overflow: hidden; - &:after { - content: ''; + overflow: visible; + + opacity: var(--mod-avatar-color-opacity, var(--spectrum-avatar-color-opacity)); + + &.is-disabled { + opacity: var(--highcontrast-avatar-color-opacity-disabled, var(--mod-avatar-color-opacity-disabled, var(--spectrum-avatar-color-opacity-disabled))); + } +} + +.spectrum-Avatar:not(.is-disabled) .spectrum-Avatar-link:focus-visible { + &::after { + pointer-events: none; + content: ""; position: absolute; - inset-block-start: 0; - inset-block-end: 0; - inset-inline-start: 0; - inset-inline-end: 0; - box-sizing: border-box; - border-width: var(--spectrum-avatar-border-size); + inset-block-start: calc((var(--mod-avatar-focus-indicator-gap, var(--spectrum-avatar-focus-indicator-gap)) + var(--mod-avatar-focus-indicator-thickness, var(--spectrum-avatar-focus-indicator-thickness))) * -1); + inset-inline-start: calc((var(--mod-avatar-focus-indicator-gap, var(--spectrum-avatar-focus-indicator-gap)) + var(--mod-avatar-focus-indicator-thickness, var(--spectrum-avatar-focus-indicator-thickness))) * -1); + + inline-size: calc(var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size)) + (var(--mod-avatar-focus-indicator-gap, var(--spectrum-avatar-focus-indicator-gap)) * 2)); + block-size: calc(var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size)) + (var(--mod-avatar-focus-indicator-gap, var(--spectrum-avatar-focus-indicator-gap)) * 2)); + border-style: solid; - border-radius: var(--spectrum-avatar-border-radius); + border-width: var(--mod-avatar-focus-indicator-thickness, var(--spectrum-avatar-focus-indicator-thickness)); + border-color: var(--highcontrast-avatar-focus-indicator-color, var(--mod-avatar-focus-indicator-color, var(--spectrum-avatar-focus-indicator-color))); + border-radius: var(--mod-avatar-border-radius, var(--spectrum-avatar-border-radius)); } } + +.spectrum-Avatar-link { + outline-color: transparent; + outline-style: solid; + outline: none; +} + .spectrum-Avatar-image { - inline-size: var(--spectrum-avatar-width); - block-size: var(--spectrum-avatar-height); + inline-size: var(--mod-avatar-inline-size, var(--spectrum-avatar-inline-size)); + block-size: var(--mod-avatar-block-size, var(--spectrum-avatar-block-size)); + + border-radius: var(--mod-avatar-border-radius, var(--spectrum-avatar-border-radius)); } diff --git a/components/avatar/metadata/avatar.yml b/components/avatar/metadata/avatar.yml index 04999ca56f..b447ded1aa 100644 --- a/components/avatar/metadata/avatar.yml +++ b/components/avatar/metadata/avatar.yml @@ -1,6 +1,10 @@ name: Avatar status: Verified -description: An image representing a user. +description: | + An image representing a user. + + An avatar image is wrapped in a link that uses the `.spectrum-Avatar-link` + class by default, however, an avatar may also be used without a link. SpectrumSiteSlug: https://spectrum.adobe.com/page/avatar/ sections: - name: Migration Guide @@ -21,75 +25,126 @@ examples:

50

- Avatar + + Avatar +
- Disabled Avatar + + Disabled Avatar +

75

- Avatar + + Avatar +
- Disabled Avatar + + Disabled Avatar +

100 (default)

- Avatar + + Avatar +
- Disabled Avatar + + Disabled Avatar +

200

- Avatar + + Avatar +
- Disabled Avatar + + Disabled Avatar +

300

- Avatar + + Avatar +
- Disabled Avatar + + Disabled Avatar +

400

- Avatar + + Avatar +
- Disabled Avatar + + Disabled Avatar +

500

- Avatar + + Avatar +
- Disabled Avatar + + Disabled Avatar +

600

- Avatar + + Avatar +
- Disabled Avatar + + Disabled Avatar +
+
+

700

+
+ + Avatar + +
+
+ + Disabled Avatar + +
+
+ + + - id: avatar-no-link + name: No Link + markup: | +

700

diff --git a/components/avatar/package.json b/components/avatar/package.json index d45087d18c..04e947ad09 100644 --- a/components/avatar/package.json +++ b/components/avatar/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/avatar", - "version": "5.0.27", + "version": "6.0.0-beta.1", "description": "The Spectrum CSS avatar component", "license": "Apache-2.0", "homepage": "https://opensource.adobe.com/spectrum-css/", @@ -17,11 +17,11 @@ "build": "gulp" }, "peerDependencies": { - "@spectrum-css/vars": "^8.0.0" + "@spectrum-css/tokens": "^7.0.0" }, "devDependencies": { - "@spectrum-css/component-builder": "^4.0.1", - "@spectrum-css/vars": "^8.0.3", + "@spectrum-css/component-builder-simple": "^2.0.0", + "@spectrum-css/tokens": "^7.0.0", "gulp": "^4.0.0" }, "publishConfig": { diff --git a/components/avatar/stories/template.js b/components/avatar/stories/template.js index b09af30fc5..138f0c70ab 100644 --- a/components/avatar/stories/template.js +++ b/components/avatar/stories/template.js @@ -16,7 +16,6 @@ export const Template = ({ try { // Load styles for this component import(/* webpackPrefetch: true */ "../index.css"); - import(/* webpackPrefetch: true */ "../skin.css"); } catch (e) { console.warn(e); } diff --git a/components/avatar/skin.css b/components/avatar/themes/express.css similarity index 59% rename from components/avatar/skin.css rename to components/avatar/themes/express.css index c75b304a3f..03c16d7fd9 100644 --- a/components/avatar/skin.css +++ b/components/avatar/themes/express.css @@ -1,32 +1,15 @@ /* -Copyright 2019 Adobe. All rights reserved. +Copyright 2023 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-Avatar { - opacity: var(--spectrum-avatar-size-100-opacity); - - &:after { - border-color: var(--spectrum-avatar-size-100-border-color); - } - - &.is-disabled { - opacity: var(--spectrum-avatar-size-100-opacity-disabled); - } -} - -@media (forced-colors: active) { +@container (--system: express) { .spectrum-Avatar { - &.is-disabled { - opacity: 1; - outline: 2px solid GrayText; - } } } diff --git a/components/avatar/themes/spectrum.css b/components/avatar/themes/spectrum.css new file mode 100644 index 0000000000..661dfda6b5 --- /dev/null +++ b/components/avatar/themes/spectrum.css @@ -0,0 +1,15 @@ +/* +Copyright 2023 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-Avatar { + } +} diff --git a/site/resources/img/example-ava.jpg b/site/resources/img/example-ava.jpg index d77edcca8d..1cc8ac72c1 100644 Binary files a/site/resources/img/example-ava.jpg and b/site/resources/img/example-ava.jpg differ diff --git a/site/resources/img/example-ava@2x.jpg b/site/resources/img/example-ava@2x.jpg new file mode 100644 index 0000000000..6eb727b7a1 Binary files /dev/null and b/site/resources/img/example-ava@2x.jpg differ diff --git a/yarn.lock b/yarn.lock index e621e3d4bc..f5bea26ca4 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/avatar@^5.0.26": + version "5.0.26" + resolved "https://registry.yarnpkg.com/@spectrum-css/avatar/-/avatar-5.0.26.tgz#737b660e0e1bb87017b9e0bc0c44bdad8438dbb4" + integrity sha512-LTRlUQK5Rw50Sos0xx2+I//gyDK8qWcqTakVdSi19Vm+ikz6hiGTMh3HvjvGGc+c71sjXjF97Y1joYrNaKo5kA== + "@spectrum-css/button@^6.0.21": version "6.0.21" resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-6.0.21.tgz#87a266147c60bb23aad61df200d82ee5aa90b44d"