feat(avatar): use css variables

Endava · Jun 29, 2023 · b8d34de · b8d34de
1 parent 5377534
commit b8d34de
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 5 deletions.
diff --git a/packages/bee-q/src/components/avatar/bq-avatar.tsx b/packages/bee-q/src/components/avatar/bq-avatar.tsx
@@ -138,7 +138,7 @@ export class BqAvatar {
       <Host>
         <div
           class={{
-            'relative overflow-hidden border-[2px] border-solid border-stroke-tiertary bg-ui-secondary-light': true,
+            avatar: true,
             [`size--${this.size}`]: true,
             'rounded-full': this.shape === 'circle',
             'rounded-xs': this.shape === 'square' && this.size === 'xsmall',

diff --git a/packages/bee-q/src/components/avatar/scss/bq-avatar.scss b/packages/bee-q/src/components/avatar/scss/bq-avatar.scss
@@ -8,21 +8,28 @@
   @apply relative inline-block;
 }
 
+.avatar {
+  @apply relative overflow-hidden;
+  @apply bg-[var(--bq-avatar-background)];
+
+  border: var(--bq-avatar--border-width) var(--bq-avatar--border-style) var(--bq-avatar--border-color);
+}
+
 .size {
   &--xsmall {
-    @apply h-[var(--bq-avatar--size-xsmall)] w-[var(--bq-avatar--size-xsmall)] text-xs;
+    @apply h-[var(--bq-avatar--size-xsmall)] w-[var(--bq-avatar--size-xsmall)] text-[length:var(--bq-avatar--font-size-xsmall)];
   }
 
   &--small {
-    @apply h-[var(--bq-avatar--size-small)] w-[var(--bq-avatar--size-small)] text-xs;
+    @apply h-[var(--bq-avatar--size-small)] w-[var(--bq-avatar--size-small)] text-[length:var(--bq-avatar--font-size-small)];
   }
 
   &--medium {
-    @apply h-[var(--bq-avatar--size-medium)] w-[var(--bq-avatar--size-medium)] text-m;
+    @apply h-[var(--bq-avatar--size-medium)] w-[var(--bq-avatar--size-medium)] text-[length:var(--bq-avatar--font-size-medium)];
   }
 
   &--large {
-    @apply h-[var(--bq-avatar--size-large)] w-[var(--bq-avatar--size-large)] text-m;
+    @apply h-[var(--bq-avatar--size-large)] w-[var(--bq-avatar--size-large)] text-[length:var(--bq-avatar--font-size-large)];
   }
 }
 

diff --git a/packages/bee-q/src/components/avatar/scss/bq-avatar.variables.scss b/packages/bee-q/src/components/avatar/scss/bq-avatar.variables.scss
@@ -3,11 +3,41 @@
 /* -------------------------------------------------------------------------- */
 
 :host {
+  /**
+  * @prop --bq-avatar--background: Avatar background color
+
+  * @prop --bq-avatar--border-color: Avatar border color
+  * @prop --bq-avatar--border-style: Avatar border style
+  * @prop --bq-avatar--border-width: Avatar border width
+  * @prop --bq-avatar--border-radius: Avatar border radius
+
+  * @prop --bq-avatar--size-xsmall: Avatar xsmall size
+  * @prop --bq-avatar--size-small: Avatar small size
+  * @prop --bq-avatar--size-medium: Avatar medium size
+  * @prop --bq-avatar--size-large: Avatar large size
+
+  * @prop --bq-avatar--badge-top: Badge top position
+  * @prop --bq-avatar--badge-right: Badge right position
+  * @prop --bq-avatar--badge-left: Badge left position
+  */
+
+  --bq-avatar-background: theme('colors.ui.secondary-light');
+
+  --bq-avatar--border-color: theme('colors.stroke.tiertary');
+  --bq-avatar--border-style: solid;
+  --bq-avatar--border-width: theme('borderSpacing.xs3');
+  --bq-avatar--border-radius: theme('borderRadius.full');
+
   --bq-avatar--size-xsmall: 24px;
   --bq-avatar--size-small: 32px;
   --bq-avatar--size-medium: 48px;
   --bq-avatar--size-large: 64px;
 
+  --bq-avatar--font-size-xsmall: theme('fontSize.xs');
+  --bq-avatar--font-size-small: theme('fontSize.xs');
+  --bq-avatar--font-size-medium: theme('fontSize.m');
+  --bq-avatar--font-size-large: theme('fontSize.m');
+
   --bq-avatar--badge-top: 0;
   --bq-avatar--badge-right: 0;
   --bq-avatar--badge-left: 80%;