From a9cad85a35cebc213942ec91982d6e5f372a00da Mon Sep 17 00:00:00 2001
From: Kimiko Kano <ksk5280@users.noreply.github.com>
Date: Wed, 14 Apr 2021 11:31:17 -0600
Subject: [PATCH] style: Remove border reset default style and color (#54)

* Remove border style solid and default color
---
 src/components/CssReset.tsx   | 24 +++++-------------------
 src/components/IconButton.tsx |  4 ++--
 2 files changed, 7 insertions(+), 21 deletions(-)

diff --git a/src/components/CssReset.tsx b/src/components/CssReset.tsx
index 6ec602cb5..6a5dbd88c 100644
--- a/src/components/CssReset.tsx
+++ b/src/components/CssReset.tsx
@@ -206,8 +206,8 @@ Remove the inheritance of text transform in Edge and Firefox.
   }
 
   /**
-Correct the inability to style clickable types in iOS and Safari.
-*/
+   Correct the inability to style clickable types in iOS and Safari.
+   */
 
   button,
   [type="button"],
@@ -366,21 +366,9 @@ const tailwindPreflightReset = css`
  *    is wrapped by a div with box-sizing set to content-box.
  *
  *    https://github.com/mozdevs/cssremedy/issues/4
- *
- *
- * 2. Allow adding a border to an element by just adding a border-width.
- *
- *    By default, the way the browser specifies that an element should have no
- *    border is by setting it's border-style to none in the user-agent
- *    stylesheet.
- *
- *    In order to easily add borders to elements by just setting the border-width
- *    property, we change the default border-style for all elements to solid, and
- *    use border-width to hide them instead. This way our border utilities only
- *    need to set the border-width property instead of the entire border
- *    shorthand, making our border utilities much more straightforward to compose.
- *
- *    https://github.com/tailwindcss/tailwindcss/pull/116
+ * 
+ * 2. Setting border width to 0 removes the default border from elements
+ *    like the button and fieldset
  */
 
   *,
@@ -388,8 +376,6 @@ const tailwindPreflightReset = css`
   ::after {
     box-sizing: border-box; /* 1 */
     border-width: 0; /* 2 */
-    border-style: solid; /* 2 */
-    border-color: #e5e7eb; /* 2 */
   }
 
   /*
diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
index 9905d709f..6af79b02b 100644
--- a/src/components/IconButton.tsx
+++ b/src/components/IconButton.tsx
@@ -38,8 +38,8 @@ export function IconButton(props: IconButtonProps) {
   );
 }
 
-const iconButtonStylesReset = Css.hPx(28).wPx(28).br8.bTransparent.bw2.bgTransparent.cursorPointer.outline0.p0.df
-  .itemsCenter.justifyCenter.transition.$;
+const iconButtonStylesReset = Css.hPx(28).wPx(28).br8.bTransparent.bsSolid.bw2.bgTransparent.cursorPointer.outline0.p0
+  .df.itemsCenter.justifyCenter.transition.$;
 export const iconButtonStylesHover = Css.bgGray100.$;
 const iconButtonStylesFocus = Css.bLightBlue700.$;
 const iconButtonStylesDisabled = Css.cursorNotAllowed.$;