diff --git a/components/avatar/index.css b/components/avatar/index.css index 832d196e1b..03d838fb8a 100644 --- a/components/avatar/index.css +++ b/components/avatar/index.css @@ -10,11 +10,85 @@ 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--size50 { + @remapvars { + find: /--spectrum-avatar-size-50(.*)/; + filter: color; + replace: --spectrum-avatar$1; + } +} + +.spectrum-Avatar--size75 { + @remapvars { + find: /--spectrum-avatar-size-75(.*)/; + filter: color; + replace: --spectrum-avatar$1; + } +} + +.spectrum-Avatar--size100 { + @remapvars { + find: /--spectrum-avatar-size-100(.*)/; + filter: color; + replace: --spectrum-avatar$1; + } +} + +.spectrum-Avatar--size200 { + @remapvars { + find: /--spectrum-avatar-size-200(.*)/; + filter: color; + replace: --spectrum-avatar$1; + } +} + +.spectrum-Avatar--size300 { + @remapvars { + find: /--spectrum-avatar-size-300(.*)/; + filter: color; + replace: --spectrum-avatar$1; + } +} + +.spectrum-Avatar--size400 { + @remapvars { + find: /--spectrum-avatar-size-400(.*)/; + filter: color; + replace: --spectrum-avatar$1; + } +} + +.spectrum-Avatar--size500 { + @remapvars { + find: /--spectrum-avatar-size-500(.*)/; + filter: color; + replace: --spectrum-avatar$1; + } +} + +.spectrum-Avatar--size600 { + @remapvars { + find: /--spectrum-avatar-size-600(.*)/; + filter: color; + replace: --spectrum-avatar$1; + } +} + +.spectrum-Avatar--size700 { + @remapvars { + find: /--spectrum-avatar-size-700(.*)/; + filter: color; + replace: --spectrum-avatar$1; + } +} + .spectrum-Avatar { - inline-size: var(--spectrum-avatar-size-50-width); - block-size: var(--spectrum-avatar-size-50-height); + inline-size: var(--spectrum-avatar-width); + block-size: var(--spectrum-avatar-height); - border-radius: var(--spectrum-avatar-size-50-border-radius); + border-radius: var(--spectrum-avatar-border-radius); border-style: none; -webkit-user-drag: none; diff --git a/components/avatar/metadata/avatar.yml b/components/avatar/metadata/avatar.yml index 020385cd64..7a6ba139a1 100644 --- a/components/avatar/metadata/avatar.yml +++ b/components/avatar/metadata/avatar.yml @@ -1,9 +1,60 @@ -id: avatar name: Avatar status: Verified +description: An image representing a user. +SpectrumSiteSlug: https://spectrum.adobe.com/page/avatar/ +sections: + - name: Migration Guide + description: | + ### Sizes added to `avatar`. + A second class has to be added to `spectrum-Avatar` to declare which size to use. The available size classes are: `spectrum-Avatar--size50`, `spectrum-Avatar--size75`, `spectrum-Avatar--size100`, `spectrum-Avatar--size200`, `spectrum-Avatar--size300`, `spectrum-Avatar--size400`, `spectrum-Avatar--size500`, `spectrum-Avatar--size600`, and `spectrum-Avatar--size700`. examples: - id: avatar name: Standard markup: | - - +