Close #18

Author: Ohswedd

css/components/avatar.css

@@ -10,45 +10,45 @@
   font-weight: 500;
   position: relative;
   transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--shadow-sm);
 }
 
 /* Avatar Sizes */
-.avatar-sm {
-  width: 2rem;
-  height: 2rem;
-  font-size: 0.75rem;
+.avatar[data-size="sm"] {
+  width: clamp(2rem, 2vw, 3rem);
+  height: clamp(2rem, 2vw, 3rem);
+  font-size: clamp(0.75rem, 1vw + 0.25rem, 1rem);
 }
 
-.avatar-md {
-  width: 3rem;
-  height: 3rem;
-  font-size: 1rem;
+.avatar[data-size="md"] {
+  width: clamp(3rem, 3vw, 4rem);
+  height: clamp(3rem, 3vw, 4rem);
+  font-size: clamp(1rem, 1vw + 0.5rem, 1.25rem);
 }
 
-.avatar-lg {
-  width: 4rem;
-  height: 4rem;
-  font-size: 1.25rem;
+.avatar[data-size="lg"] {
+  width: clamp(4rem, 4vw, 5rem);
+  height: clamp(4rem, 4vw, 5rem);
+  font-size: clamp(1.25rem, 1vw + 0.75rem, 1.5rem);
 }
 
-.avatar-xl {
-  width: 5rem;
-  height: 5rem;
-  font-size: 1.5rem;
+.avatar[data-size="xl"] {
+  width: clamp(5rem, 5vw, 6rem);
+  height: clamp(5rem, 5vw, 6rem);
+  font-size: clamp(1.5rem, 1vw + 1rem, 1.75rem);
 }
 
 /* Avatar Shapes */
-.avatar-rounded { border-radius: var(--radius-lg); }
-.avatar-square { border-radius: 0; }
+.avatar[data-shape="rounded"] { border-radius: var(--radius-lg); }
+.avatar[data-shape="square"] { border-radius: 0; }
 
 /* Avatar Variants */
-.avatar-primary { background-color: var(--primary); color: #fff; }
-.avatar-secondary { background-color: var(--secondary); color: #fff; }
-.avatar-success { background-color: var(--success); color: #fff; }
-.avatar-danger { background-color: var(--danger); color: #fff; }
-.avatar-warning { background-color: var(--warning); color: #fff; }
-.avatar-info { background-color: var(--info); color: #fff; }
+.avatar[data-variant="primary"] { background-color: var(--primary); color: #fff; }
+.avatar[data-variant="secondary"] { background-color: var(--secondary); color: #fff; }
+.avatar[data-variant="success"] { background-color: var(--success); color: #fff; }
+.avatar[data-variant="danger"] { background-color: var(--danger); color: #fff; }
+.avatar[data-variant="warning"] { background-color: var(--warning); color: #fff; }
+.avatar[data-variant="info"] { background-color: var(--info); color: #fff; }
 
 /* Avatar with Image */
 .avatar img {
@@ -73,14 +73,14 @@
   border-radius: 50%;
   border: 2px solid #fff;
   background-color: var(--status-color, var(--success));
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--shadow-sm);
 }
 
 /* Status Colors */
-.avatar-status-online { --status-color: var(--success); }
-.avatar-status-offline { --status-color: var(--neutral-400); }
-.avatar-status-busy { --status-color: var(--danger); }
-.avatar-status-away { --status-color: var(--warning); }
+.avatar[data-status="online"] .avatar-status { --status-color: var(--success); }
+.avatar[data-status="offline"] .avatar-status { --status-color: var(--neutral-400); }
+.avatar[data-status="busy"] .avatar-status { --status-color: var(--danger); }
+.avatar[data-status="away"] .avatar-status { --status-color: var(--warning); }
 
 /* Avatar Group */
 .avatar-group {
@@ -90,15 +90,15 @@
 .avatar-group .avatar:not(:first-child) {
   margin-left: -0.5rem;
   border: 2px solid #fff;
-  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8); /* Slight shadow for overlap */
+  box-shadow: var(--shadow-xs); /* Slight shadow for overlap */
 }
 
 /* Pulsing Avatar */
-.avatar-pulsing {
+.avatar[data-effect="pulsing"] {
   position: relative;
   z-index: 1;
 }
-.avatar-pulsing::after {
+.avatar[data-effect="pulsing"]::after {
   content: "";
   position: absolute;
   top: 0;
@@ -116,19 +116,19 @@
 }
 
 /* Ghost Avatar */
-.avatar-ghost {
+.avatar[data-variant="ghost"] {
   background-color: transparent;
   border: 1.5px dashed var(--avatar-border-color, var(--neutral-400));
   color: var(--neutral-500);
   box-shadow: none;
 }
-.avatar-ghost .avatar-status {
+.avatar[data-variant="ghost"] .avatar-status {
   background-color: transparent;
   border: 2px dashed var(--neutral-400);
 }
 
 /* Disabled Avatar */
-.avatar-disabled {
+.avatar[data-disabled="true"] {
   opacity: 0.5;
   cursor: not-allowed;
 }
@@ -139,14 +139,14 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border: 2px solid black;
+  border: 2px solid;
   border-radius: 50%;
   overflow: hidden;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-}
-.avatar-bordered.avatar-primary { border-color: var(--primary); }
-.avatar-bordered.avatar-secondary { border-color: var(--secondary); }
-.avatar-bordered.avatar-success { border-color: var(--success); }
-.avatar-bordered.avatar-danger { border-color: var(--danger); }
-.avatar-bordered.avatar-warning { border-color: var(--warning); }
-.avatar-bordered.avatar-info { border-color: var(--info); }
+  box-shadow: var(--shadow-xs);
+}
+.avatar[data-variant="primary"].avatar-bordered { border-color: var(--primary); }
+.avatar[data-variant="secondary"].avatar-bordered { border-color: var(--secondary); }
+.avatar[data-variant="success"].avatar-bordered { border-color: var(--success); }
+.avatar[data-variant="danger"].avatar-bordered { border-color: var(--danger); }
+.avatar[data-variant="warning"].avatar-bordered { border-color: var(--warning); }
+.avatar[data-variant="info"].avatar-bordered { border-color: var(--info); }