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:
+ + + + - id: avatar-no-link + name: No Link + markup: | +