refactor(avatar)!: use spectrum tokens (#1565)

BREAKING CHANGE: migrates Avatar to new tokens system Co-authored-by: Patrick Fulton <pfulton@adobe.com> Co-authored-by: Bernhard Schmidt <bschmidt@adobe.com>
adobe · Feb 6, 2023 · 8db2337 · 8db2337
1 parent 1de360b
commit 8db2337
Show file tree

Hide file tree

Showing 10 changed files with 176 additions and 103 deletions.
diff --git 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
@@ -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
@@ -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:
  <div class="spectrum-Examples-item">
  <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">50</h4>
  <div class="spectrum-Avatar spectrum-Avatar--size50">
- <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
+ <a href="#" class="spectrum-Avatar-link">
+ <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
+ </a>
  </div>
  <div class="spectrum-Avatar spectrum-Avatar--size50 is-disabled"">
- <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
+ <a href="#" class="spectrum-Avatar-link">
+ <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
+ </a>
  </div>
  </div>
  <div class="spectrum-Examples-item">
  <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">75</h4>
  <div class="spectrum-Avatar spectrum-Avatar--size75">
- <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
+ <a href="#" class="spectrum-Avatar-link">
+ <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
+ </a>
  </div>
  <div class="spectrum-Avatar spectrum-Avatar--size75 is-disabled"">
- <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
+ <a href="#" class="spectrum-Avatar-link">
+ <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
+ </a>
  </div>
  </div>
  <div class="spectrum-Examples-item">
  <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">100 (default)</h4>
  <div class="spectrum-Avatar spectrum-Avatar--size100">
- <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
+ <a href="#" class="spectrum-Avatar-link">
+ <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
+ </a>
  </div>
  <div class="spectrum-Avatar spectrum-Avatar--size100 is-disabled"">
- <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
+ <a href="#" class="spectrum-Avatar-link">
+ <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
+ </a>
  </div>
  </div>
  <div class="spectrum-Examples-item">
  <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">200</h4>
  <div class="spectrum-Avatar spectrum-Avatar--size200">
- <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
+ <a href="#" class="spectrum-Avatar-link">
+ <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
+ </a>
  </div>
  <div class="spectrum-Avatar spectrum-Avatar--size200 is-disabled"">
- <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
+ <a href="#" class="spectrum-Avatar-link">
+ <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
+ </a>
  </div>
  </div>
  <div class="spectrum-Examples-item">
  <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">300</h4>
  <div class="spectrum-Avatar spectrum-Avatar--size300">
- <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
+ <a href="#" class="spectrum-Avatar-link">
+ <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
+ </a>
  </div>
  <div class="spectrum-Avatar spectrum-Avatar--size300 is-disabled"">
- <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
+ <a href="#" class="spectrum-Avatar-link">
+ <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
+ </a>
  </div>
  </div>
  <div class="spectrum-Examples-item">
  <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">400</h4>
  <div class="spectrum-Avatar spectrum-Avatar--size400">
- <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
+ <a href="#" class="spectrum-Avatar-link">
+ <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
+ </a>
  </div>
  <div class="spectrum-Avatar spectrum-Avatar--size400 is-disabled"">
- <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
+ <a href="#" class="spectrum-Avatar-link">
+ <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
+ </a>
  </div>
  </div>
  <div class="spectrum-Examples-item">
  <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">500</h4>
  <div class="spectrum-Avatar spectrum-Avatar--size500">
- <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
+ <a href="#" class="spectrum-Avatar-link">
+ <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
+ </a>
  </div>
  <div class="spectrum-Avatar spectrum-Avatar--size500 is-disabled"">
- <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
+ <a href="#" class="spectrum-Avatar-link">
+ <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
+ </a>
  </div>
  </div>
  <div class="spectrum-Examples-item">
  <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">600</h4>
  <div class="spectrum-Avatar spectrum-Avatar--size600">
- <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
+ <a href="#" class="spectrum-Avatar-link">
+ <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
+ </a>
  </div>
  <div class="spectrum-Avatar spectrum-Avatar--size600 is-disabled"">
- <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
+ <a href="#" class="spectrum-Avatar-link">
+ <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
+ </a>
  </div>
  </div>
+ <div class="spectrum-Examples-item">
+ <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">700</h4>
+ <div class="spectrum-Avatar spectrum-Avatar--size700">
+ <a href="#" class="spectrum-Avatar-link">
+ <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
+ </a>
+ </div>
+ <div class="spectrum-Avatar spectrum-Avatar--size700 is-disabled"">
+ <a href="#" class="spectrum-Avatar-link">
+ <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
+ </a>
+ </div>
+ </div>
+ </div>
+
+ - id: avatar-no-link
+ name: No Link
+ markup: |
+ <div class="spectrum-Examples spectrum-Examples--vertical">
  <div class="spectrum-Examples-item">
  <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">700</h4>
  <div class="spectrum-Avatar spectrum-Avatar--size700">

diff --git 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
@@ -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);
  }