feat(ButtonIcon): redesign config

shuriken-ui · Dec 6, 2023 · 082a0f2 · 082a0f2
1 parent 3ba7992
commit 082a0f2
Showing 1 changed file with 142 additions and 0 deletions.
diff --git a/src/plugins/components/button-icon/button-icon.config.ts b/src/plugins/components/button-icon/button-icon.config.ts
@@ -1,5 +1,147 @@
 export const key = 'buttonIcon' as const
 
+export const config = {
+  font: {
+    size: 'sm',
+    weight: 'normal',
+  },
+  size: {
+    sm: {
+      size: '8',
+      padding: '1',
+    },
+    md: {
+      size: '10',
+      padding: '2',
+    },
+    lg: {
+      size: '12',
+      padding: '3',
+    },
+  },
+  color: {
+    default: {
+      background: {
+        base: {
+          light: 'white',
+          dark: 'muted-700',
+        },
+        hover: {
+          light: 'muted-50',
+          dark: 'muted-600',
+        },
+      },
+      text: {
+        color: {
+          light: 'muted-700',
+          dark: 'muted-100',
+        },
+      },
+      border: {
+        light: 'muted-300',
+        dark: 'muted-600',
+      },
+    },
+    muted: {
+      background: {
+        base: {
+          light: 'muted-200',
+          dark: 'muted-700',
+        },
+        hover: {
+          light: 'muted-100',
+          dark: 'muted-600',
+        },
+      },
+      text: {
+        color: {
+          light: 'muted-500',
+          dark: 'muted-100',
+        },
+      },
+    },
+    primary: {
+      background: {
+        hover: {
+          light: 'primary-500/20',
+        },
+      },
+      text: {
+        color: {
+          light: 'primary-500',
+        },
+      },
+      border: {
+        light: 'primary-500',
+      },
+    },
+    info: {
+      background: {
+        hover: {
+          light: 'info-500/20',
+        },
+      },
+      text: {
+        color: {
+          light: 'info-500',
+        },
+      },
+      border: {
+        light: 'info-500',
+      },
+    },
+    success: {
+      background: {
+        hover: {
+          light: 'success-500/20',
+        },
+      },
+      text: {
+        color: {
+          light: 'success-500',
+        },
+      },
+      border: {
+        light: 'success-500',
+      },
+    },
+    warning: {
+      background: {
+        hover: {
+          light: 'warning-500/20',
+        },
+      },
+      text: {
+        color: {
+          light: 'warning-500',
+        },
+      },
+      border: {
+        light: 'warning-500',
+      },
+    },
+    danger: {
+      background: {
+        hover: {
+          light: 'danger-500/20',
+        },
+      },
+      text: {
+        color: {
+          light: 'danger-500',
+        },
+      },
+      border: {
+        light: 'danger-500',
+      },
+    },
+  },
+  transition: {
+    property: 'all',
+    duration: '300',
+  },
+}
+
 export const defaultConfig = {
   text: 'sm',
   font: 'normal',