From 834200d5bf1ae1988207c76750b81dd06522d30c Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Sun, 31 Mar 2024 12:00:37 +0300
Subject: [PATCH] fix(avatar): update css

---
 elements/pf-avatar/pf-avatar.css | 76 ++++++++++++++++++--------------
 1 file changed, 44 insertions(+), 32 deletions(-)

diff --git a/elements/pf-avatar/pf-avatar.css b/elements/pf-avatar/pf-avatar.css
index 2cabd410f9..6a72785021 100644
--- a/elements/pf-avatar/pf-avatar.css
+++ b/elements/pf-avatar/pf-avatar.css
@@ -1,54 +1,66 @@
 :host {
-  display: contents;
+  display: inline-block;
+	--pf-c-avatar--BorderColor: transparent;
+	--pf-c-avatar--BorderWidth: 0;
+	--pf-c-avatar--BorderRadius: var(--pf-global--BorderRadius--lg, 30em);
+	--pf-c-avatar--Width: 2.25rem;
+	--pf-c-avatar--Height: 2.25rem;
+	--pf-c-avatar--m-sm--Width: 1.5rem;
+	--pf-c-avatar--m-sm--Height: 1.5rem;
+	--pf-c-avatar--m-md--Width: 2.25rem;
+	--pf-c-avatar--m-md--Height: 2.25rem;
+	--pf-c-avatar--m-lg--Width: 4.5rem;
+	--pf-c-avatar--m-lg--Height: 4.5rem;
+	--pf-c-avatar--m-xl--Width: 8rem;
+	--pf-c-avatar--m-xl--Height: 8rem;
+	--pf-c-avatar--m-light--BorderColor: var(--pf-global--BorderColor--dark-100, #d2d2d2);
+	--pf-c-avatar--m-light--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
+	--pf-c-avatar--m-dark--BorderColor: var(--pf-global--palette--black-700, #4f5255);
+	--pf-c-avatar--m-dark--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
+	width: var(--pf-c-avatar--Width);
+	height: var(--pf-c-avatar--Height);
+	border-radius: var(--pf-c-avatar--BorderRadius);
 }
 
-svg,
-:host([src]) img {
-  display: inline;
-  object-fit: cover;
-}
-
-:host([hidden]), [hidden] {
+:host([hidden]),
+[hidden] {
   display: none !important;
 }
 
 svg,
 img {
-  width: var(--pf-c-avatar--Width, 24px);
-  height: var(--pf-c-avatar--Height, 24px);
-  border-radius: var(--pf-c-avatar--BorderRadius, var(--pf-global--BorderRadius--lg, 128px));
-  border:
-    var(--pf-c-avatar--BorderWidth, 0)
-    solid
-    var(--pf-c-avatar--BorderColor,
-      var(--pf-global--BorderColor--dark-100, #d2d2d2));
+  display: inline;
+  object-fit: cover;
+  width: var(--pf-c-avatar--Width);
+  height: var(--pf-c-avatar--Height);
+  border-radius: var(--pf-c-avatar--BorderRadius);
+  border: var(--pf-c-avatar--BorderWidth) solid var(--pf-c-avatar--BorderColor);
 }
 
-:host([border]) :is(img, svg) {
+:host([border]) {
   --pf-c-avatar--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
 }
 
-:host([border="dark"]) :is(img, svg) {
-  --pf-c-avatar--BorderColor: var(--pf-c-avatar--m-dark--BorderColor,
-      var(--pf-global--palette--black-700, #4f5255));
+:host([border="dark"]) {
+  --pf-c-avatar--BorderColor: var(--pf-c-avatar--m-dark--BorderColor);
 }
 
-:host([size='sm']) {
-  --pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width, 24px);
-  --pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height, 24px);
+:host([size="sm"]) {
+  --pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width);
+  --pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height);
 }
 
-:host([size='md']) {
-  --pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width, 36px);
-  --pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height, 36px);
+:host([size="md"]) {
+  --pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width);
+  --pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height);
 }
 
-:host([size='lg']) {
-  --pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width, 72px);
-  --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height, 72px);
+:host([size="lg"]) {
+  --pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width);
+  --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height);
 }
 
-:host([size='xl']) {
-  --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width, 128px);
-  --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height, 128px);
+:host([size="xl"]) {
+  --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width);
+  --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height);
 }