feat: Add border to Avatar in forced colors mode (#1578)

Amsterdam · Sep 11, 2024 · 1f29f35 · 1f29f35
1 parent f25bc01
commit 1f29f35
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/packages/css/src/components/avatar/avatar.scss b/packages/css/src/components/avatar/avatar.scss
@@ -20,6 +20,15 @@
   }
 }
 
+.ams-avatar:not(.ams-avatar--has-image) {
+  @media (forced-colors: active) {
+    border-style: solid;
+    border-width: var(--ams-avatar-forced-colors-border-width);
+    padding-block: calc(var(--ams-avatar-padding-block) - var(--ams-avatar-forced-colors-border-width));
+    padding-inline: calc(var(--ams-avatar-padding-inline) - var(--ams-avatar-forced-colors-border-width));
+  }
+}
+
 .ams-avatar--has-image {
   inline-size: calc(var(--ams-avatar-line-height) * var(--ams-avatar-font-size) + 2 * var(--ams-avatar-padding-inline));
   overflow: hidden;

diff --git a/proprietary/tokens/src/components/ams/avatar.tokens.json b/proprietary/tokens/src/components/ams/avatar.tokens.json
@@ -20,6 +20,9 @@
         "background-color": { "value": "{ams.color.dark-green}" },
         "color": { "value": "{ams.color.primary-white}" }
       },
+      "forced-colors": {
+        "border-width": { "value": "{ams.border.width.md}" }
+      },
       "green": {
         "background-color": { "value": "{ams.color.green}" },
         "color": { "value": "{ams.color.primary-black}" }