feat(AvatarGroup): redesign config

shuriken-ui · Dec 5, 2023 · d255d13 · d255d13
1 parent c64df8b
commit d255d13
Showing 1 changed file with 110 additions and 0 deletions.
diff --git a/src/plugins/components/avatar-group/avatar-group.config.ts b/src/plugins/components/avatar-group/avatar-group.config.ts
@@ -1,5 +1,115 @@
 export const key = 'avatarGroup' as const
 
+export const config = {
+  avatar: {
+    rounded: 'full',
+    outer: {
+      background: {
+        light: 'white',
+        dark: 'muted-800',
+      },
+    },
+    inner: {
+      background: {
+        light: 'primary-500/20',
+        dark: 'primary-500/20',
+      },
+      font: {
+        color: {
+          light: 'primary-500',
+          dark: 'primary-500',
+        },
+      },
+    },
+    transition: {
+      property: 'all',
+      duration: '100',
+    },
+  },
+  count: {
+    outer: {
+      rounded: 'full',
+      background: {
+        light: 'white',
+        dark: 'muted-800',
+      },
+    },
+    inner: {
+      rounded: 'full',
+      size: 'full',
+      background: {
+        light: 'muted-200',
+        dark: 'muted-700',
+      },
+      border: {
+        light: 'white',
+        dark: 'muted-800',
+      },
+    },
+    transition: {
+      property: 'all',
+      duration: '100',
+    },
+  },
+  size: {
+    xxs: {
+      outer: {
+        size: '6',
+      },
+      count: {
+        size: '6',
+        font: {
+          size: 'xs',
+        },
+      },
+    },
+    xs: {
+      outer: {
+        size: '8',
+      },
+      count: {
+        size: '8',
+        font: {
+          size: 'sm',
+        },
+      },
+    },
+    sm: {
+      outer: {
+        size: '10',
+      },
+      count: {
+        size: '10',
+        font: {
+          size: 'sm',
+        },
+      },
+    },
+    md: {
+      outer: {
+        size: '12',
+      },
+      count: {
+        size: '12',
+        font: {
+          size: 'lg',
+        },
+      },
+    },
+    lg: {
+      outer: {
+        size: '16',
+      },
+      count: {
+        size: '16',
+        font: {
+          size: 'xl',
+        },
+      },
+    },
+  },
+}
+
 export const defaultConfig = {
   avatarOuter: {
     bg: 'white',