refactor(avatar)!: use spectrum tokens

BREAKING CHANGE

components/avatar/gulpfile.js

@@ -1 +1 @@
-module.exports = require('@spectrum-css/component-builder');
+module.exports = require('@spectrum-css/component-builder-simple');

components/avatar/index.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 Adobe. All rights reserved.
+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
@@ -10,107 +10,112 @@ 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-border-radius: 50%;
+
+ --spectrum-avatar-inline-size: var(--spectrum-avatar-size-100);
+ --spectrum-avatar-block-size: var(--spectrum-avatar-size-100);
+
+ --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: 1;
+ --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-outline-color-disabled: GrayText;
+ --highcontrast-avatar-focus-indicator-color: Highlight;
+
+ &.is-disabled {
+ outline: 2px solid var(--highcontrast-avatar-outline-color-disabled);
+ }
  }
 }
 
 .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;
 
  -webkit-user-drag: none;
  user-select: none;
  overflow: hidden;
 
- &:after {
+ opacity: var(--mod-avatar-color-opacity, var(--spectrum-avatar-color-opacity));
+
+ &::after {
  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);
+ border-width: var(--mod-avatar-focus-indicator-thickness, var(--spectrum-avatar-focus-indicator-thickness));
  border-style: solid;
- border-radius: var(--spectrum-avatar-border-radius);
+ 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));
+ }
+
+ &.is-disabled {
+ opacity: var(--highcontrast-avatar-color-opacity-disabled, var(--mod-avatar-color-opacity-disabled, var(--spectrum-avatar-color-opacity-disabled)));
  }
 }
 .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));
 }

components/avatar/package.json

@@ -16,15 +16,15 @@
  "build": "gulp"
  },
  "peerDependencies": {
- "@spectrum-css/vars": "^8.0.0"
+ "@spectrum-css/tokens": "^6.0.0"
  },
  "devDependencies": {
- "@spectrum-css/component-builder": "^3.2.1",
- "@spectrum-css/vars": "^8.0.0",
+ "@spectrum-css/component-builder-simple": "^2.0.0",
+ "@spectrum-css/tokens": "^6.0.0",
  "gulp": "^4.0.0"
  },
  "publishConfig": {
  "access": "public"
  },
  "homepage": "https://opensource.adobe.com/spectrum-css/"
-}
+}