feat: outline

nexpy-io · Mar 1, 2023 · 8585949 · 8585949
1 parent 2157b8d
commit 8585949
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
     "react",
     "typescript"
   ],
-  "version": "2.1.17",
+  "version": "2.1.18",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
   "types": "./dist/index.d.ts",

diff --git a/src/components/atoms/Button/Button.ts b/src/components/atoms/Button/Button.ts
@@ -100,7 +100,10 @@ const colorModeVariant = getVariant<ButtonProps, ColorModeVariants>({
           `
 
         default:
-          return css``
+          return css`
+            background-color: systemPrimary;
+            color: systemWhite;
+          `
       }
     },
     danger: ({ variant }) => {
@@ -124,7 +127,10 @@ const colorModeVariant = getVariant<ButtonProps, ColorModeVariants>({
           `
 
         default:
-          return css``
+          return css`
+            background-color: systemDanger;
+            color: systemWhite;
+          `
       }
     },
     warning: ({ variant }) => {
@@ -148,7 +154,10 @@ const colorModeVariant = getVariant<ButtonProps, ColorModeVariants>({
           `
 
         default:
-          return css``
+          return css`
+            background-color: systemWarning;
+            color: systemWhite;
+          `
       }
     },
     safe: ({ variant }) => {
@@ -172,7 +181,10 @@ const colorModeVariant = getVariant<ButtonProps, ColorModeVariants>({
           `
 
         default:
-          return css``
+          return css`
+            background-color: systemSafe;
+            color: systemWhite;
+          `
       }
     },
   },
@@ -209,11 +221,11 @@ const disabledStyleResolver = ({ disabled, variant }: ButtonProps) => {
       case 'ghost':
         return css`
           background-color: transparent;
+          box-shadow: none;
 
           &:hover,
           &:active {
-            box-shadow: rgba(0, 0, 0, 0.1) 0px 7px 8px -4px,
-              rgba(0, 0, 0, 0.02) 0px 12px 17px 2px;
+            box-shadow: none;
           }
         `
 
@@ -275,6 +287,12 @@ const Button = styled.buttonBox<ButtonProps>`
       rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
   }
 
+  &:focus {
+    outline-width: 1px !important;
+    outline-style: solid !important;
+    outline-color: systemPrimary !important;
+  }
+
   ${sizeVariant}
   ${modeVariant}
   ${colorModeVariant}