fix(button): reduce the thickness of button outline (#376)

* fix(button): reduce the thickness of button outline * fix: restore line endings to default
themesberg · Oct 10, 2022 · 5ef0aef · 5ef0aef
1 parent d2518ad
commit 5ef0aef
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 1 deletion.
diff --git a/src/lib/components/Button/index.tsx b/src/lib/components/Button/index.tsx
@@ -73,7 +73,7 @@ const ButtonComponent: FC<ButtonProps> = ({
         gradientDuoTone && !gradientMonochrome && theme.gradientDuoTone[gradientDuoTone],
         !gradientDuoTone && gradientMonochrome && theme.gradient[gradientMonochrome],
         groupTheme.position[positionInGroup],
-        outline && theme.outline.color[color],
+        outline && (theme.outline.color[color] ?? theme.outline.color.default),
         theme.base,
         theme.pill[pill ? 'on' : 'off'],
       )}
@@ -89,6 +89,7 @@ const ButtonComponent: FC<ButtonProps> = ({
           theme.outline[outline ? 'on' : 'off'],
           theme.outline.pill[outline && pill ? 'on' : 'off'],
           theme.size[size],
+          outline && !theme.outline.color[color] && theme.inner.outline,
         )}
       >
         <>

diff --git a/src/lib/components/Flowbite/FlowbiteTheme.ts b/src/lib/components/Flowbite/FlowbiteTheme.ts
@@ -113,6 +113,7 @@ export interface FlowbiteTheme extends Record<string, unknown> {
     inner: {
       base: string;
       position: PositionInButtonGroup;
+      outline: string;
     };
     label: string;
     outline: FlowbiteBoolean & {

diff --git a/src/lib/theme/default.ts b/src/lib/theme/default.ts
@@ -190,12 +190,15 @@ const theme: FlowbiteTheme = {
         middle: '!rounded-none',
         end: 'rounded-l-none',
       },
+      outline: 'border border-transparent',
     },
     label:
       'ml-2 inline-flex h-4 w-4 items-center justify-center rounded-full bg-blue-200 text-xs font-semibold text-blue-800',
     outline: {
       color: {
         gray: 'border border-gray-900 dark:border-white',
+        default: 'border-0',
+        light: '',
       },
       off: '',
       on: 'bg-white text-gray-900 transition-all duration-75 ease-in group-hover:bg-opacity-0 group-hover:text-inherit dark:bg-gray-900 dark:text-white',