+
+
diff --git a/packages/ui-universal/lib/_variables.scss b/packages/ui-universal/lib/_variables.scss
new file mode 100644
index 0000000..1882034
--- /dev/null
+++ b/packages/ui-universal/lib/_variables.scss
@@ -0,0 +1,82 @@
+// box-shadow variables
+$shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+$shadow:
+ 0 1px 3px 0 rgba(0, 0, 0, 0.1),
+ 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+$shadow-md:
+ 0 4px 6px -1px rgb(0 0 0 / 0.1),
+ 0 2px 4px -2px rgb(0 0 0 / 0.1);
+$shadow-lg:
+ 0 10px 15px -3px rgb(0 0 0 / 0.1),
+ 0 4px 6px -4px rgb(0 0 0 / 0.1);
+$shadow-xl:
+ 0 20px 25px -5px rgb(0 0 0 / 0.1),
+ 0 8px 10px -6px rgb(0 0 0 / 0.1);
+$shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+$shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+
+@mixin shadow {
+ &.shadow-regular {
+ box-shadow: $shadow;
+ }
+ &.shadow-small {
+ box-shadow: $shadow-sm;
+ }
+ &.shadow-medium {
+ box-shadow: $shadow-md;
+ }
+ &.shadow-large {
+ box-shadow: $shadow-lg;
+ }
+ &.shadow-extraLarge {
+ box-shadow: $shadow-xl;
+ }
+ &.shadow-inner {
+ box-shadow: $shadow-inner;
+ }
+}
+
+// border width variables
+$border-0: 0px;
+$border-1: 1px;
+$border-2: 2px;
+
+//animation-duration varibles
+$duration-100: 100ms;
+$duration-200: 200ms;
+$duration-300: 300ms;
+$duration-400: 400ms;
+$duration-800: 800ms;
+
+//border radius variables
+$radius-10: 10px;
+$radius-8: 8px;
+$radius-5: 5px;
+$radius-15: 15px;
+$radius-half: 50%;
+
+//absolute center
+@mixin absolute-center {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+//font-size variables
+$font-size-8: 8px;
+$font-size-10: 10px;
+$font-size-12: 12px;
+$font-size-14: 14px;
+$font-size-16: 16px;
+
+//disabled
+@mixin disabled {
+ cursor: not-allowed;
+ opacity: 0.4;
+}
+
+//background color
+$background-shadow-color: rgb(var(--black-color-rgb), 0.6);
+
+$cubic-bezier: cubic-bezier(0.215, 0.61, 0.355, 1);
diff --git a/packages/ui-universal/lib/components/Button/index.scss b/packages/ui-universal/lib/components/Button/index.scss
new file mode 100644
index 0000000..2132f34
--- /dev/null
+++ b/packages/ui-universal/lib/components/Button/index.scss
@@ -0,0 +1,68 @@
+:host {
+ background-color: var(--primary-color);
+ color: var(--white-color);
+ padding: 10px;
+ border-radius: 5px;
+ border: none;
+ cursor: pointer;
+ font-size: 16px;
+ font-weight: 400;
+ transition: all 0.15s ease-in-out;
+ @include shadow;
+ &:hover {
+ backdrop-filter: brightness(0.85);
+ }
+ &:active {
+ transform: scale(0.98);
+ }
+ &.primary {
+ background-color: var(--primary-color);
+ }
+ &.secondary {
+ background-color: var(--white-color);
+ color: var(--primary-color);
+ border: 1px solid var(--primary-color);
+ }
+ &.border {
+ border: solid 1px var(--border-white);
+ background-color: var(--white-color);
+ color: var(--black-color);
+ font-weight: 500;
+ }
+ &.ghost {
+ &:hover:not(.disabled) {
+ filter: brightness(1);
+ backdrop-filter: brightness(0.97);
+ }
+ background-color: transparent;
+ color: var(--primary-color);
+ font-weight: 600;
+ }
+ &.danger {
+ background-color: var(--danger-color);
+ }
+ &.disabled {
+ cursor: not-allowed;
+ &:hover {
+ backdrop-filter: none;
+ }
+ &:active {
+ transform: none;
+ }
+ }
+ &.disabledShadow {
+ filter: grayscale(1);
+ }
+ &.small {
+ padding: 5px;
+ font-size: 12px;
+ }
+ &.medium {
+ padding: 10px;
+ font-size: 16px;
+ }
+ &.large {
+ padding: 15px;
+ font-size: 20px;
+ }
+}
diff --git a/packages/ui-universal/lib/components/Button/index.ts b/packages/ui-universal/lib/components/Button/index.ts
index 6334743..bcee5e6 100644
--- a/packages/ui-universal/lib/components/Button/index.ts
+++ b/packages/ui-universal/lib/components/Button/index.ts
@@ -1,7 +1,9 @@
-import { LitElement, css, html } from "lit";
+import { CSSResultGroup, LitElement, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import { createComponent } from "@lit/react";
+import { classMap } from "lit/directives/class-map.js";
import React from "react";
+import styles from "./index.scss?inline";
// export interface ButtonProps extends HTMLButtonElement {
// /**
@@ -30,16 +32,26 @@ import React from "react";
*/
@customElement("s-button")
export class Sbutton extends LitElement {
+ static styles = styles as unknown as CSSResultGroup;
@property({ type: String }) color = "primary";
@property({ type: String }) size = "medium";
@property({ type: String }) shadow = "none";
@property({ type: Boolean }) disabled = false;
@property({ type: Boolean }) disabledShadow = true;
- @property() _onClick = () => {};
+ @property() _onclick: () => void = () => {};
- render() {
+ protected render() {
return html`
-