Refactor: index.ts

Author: Mqxx

src/components/button/index.css

@@ -11,10 +11,31 @@
   cursor: pointer;
   user-select: none;
 
+  &[class*="--primary"] {
+    background-color: #f6f8fa;
+    box-shadow: 0px 1px 0px 0px #1f23280a;
+    border-color: #d1d9e0;
+    color: #25292e;
+  }
+
   &[class*="--default"] {
     background-color: #f6f8fa;
     box-shadow: 0px 1px 0px 0px #1f23280a;
     border-color: #d1d9e0;
     color: #25292e;
   }
+  
+  &[class*="--invisible"] {
+    background-color: #f6f8fa;
+    box-shadow: 0px 1px 0px 0px #1f23280a;
+    border-color: #d1d9e0;
+    color: #25292e;
+  }
+
+  &[class*="--danger"] {
+    background-color: #f6f8fa;
+    box-shadow: 0px 1px 0px 0px #1f23280a;
+    border-color: #d1d9e0;
+    color: #25292e;
+  }
 }

src/components/index.ts

@@ -0,0 +1 @@
+export * as button from './button/index.ts'

src/render/index.tsx

@@ -1,12 +1,12 @@
 import { render } from '@solid-js/web';
 import { HashRouter, Route } from '@solid-js/router'
-import { Button } from '../components/button/index.ts';
+import { button } from '../components/index.ts';
 import './index.css'
 
 
 render(
   () => <HashRouter>
-    <Route path='/button' component={() => <Button>Hello</Button>}/>
+    <Route path='/button' component={() => <button.Button>Hello</button.Button>}/>
   </HashRouter>,
   globalThis.document.body
 );