-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
+
+
+
+
+
+
+ Optional
+
+
+
+
+
+
+
+
+
+ Helper text
+
+
+
+
+
+
+
+
+
+
+ Optional
+
+
+
+
+
+
+
+
+
+ Helper text
+
+
+
+
+
+
+
+
+
+
+ Optional
+
+
+
+
+
+
+
+
+
+ Helper text
+
+
+
+
+
+
+
+
+
+
+ Optional
+
+
+
+
+
+
+
+
+
+ Helper text
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Optional
+
+
+
+
+
+
+
+
+
+ Helper text
+
+
+
+
+
+
+
+
+
+
+ Optional
+
+
+
+
+
+
+
+
+
+ Helper text
+
+
+
+
+
+
+
+
+
+
+ Optional
+
+
+
+
+
+
+
+
+
+ Helper text
+
+
+
+
+
+
+
+
+
+
+ Optional
+
+
+
+
+
+
+
+
+
+ Helper text
+
+
+
+
+
+
+
+
+
+
+
+ Optional
+
+
+
+
+
+
+
+
+
+ Helper text
+
+
+
+
+
+
+
+
+
+
+ Optional
+
+
+
+
+
+
+
+
+
+ Helper text
+
+
+
+
+
+
+
+
+
+
+ Optional
+
+
+
+
+
+
+
+
+
+ Helper text
+
+
+
+
+
+
+
+
+
+
+ Optional
+
+
+
+
+
+
+
+
+
+ Helper text
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/example/src/style.css b/example/src/style.css
index 78448223..ddbef96c 100644
--- a/example/src/style.css
+++ b/example/src/style.css
@@ -8,3 +8,28 @@ Override Tailwind's default color palette
--neutral-100: 0 89% 21%;
}
*/
+.chip,
+.btn:not(.btn-border) {
+ --squircle-smooth: 1;
+ --squircle-radius: 8px;
+ mask-image: paint(squircle);
+}
+.btn.btn-border {
+ border: none !important;
+ position: relative;
+}
+.btn.btn-border:after {
+ content: "";
+ display: block;
+ position: absolute;
+ z-index:0;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ --squircle-smooth: 1;
+ --squircle-radius: 8px;
+ mask-image: paint(squircle);
+ --squircle-outline: 1.05px;
+ background: #4156F6;
+}
\ No newline at end of file
diff --git a/src/base/index.scss b/src/base/index.scss
index 615945ad..adfc8ee5 100644
--- a/src/base/index.scss
+++ b/src/base/index.scss
@@ -141,3 +141,4 @@ h6,
.subtitle {
@apply text-neutral text-center m-0;
}
+
diff --git a/src/components/buttons.scss b/src/components/buttons.scss
index bb09d055..e7b5b07b 100644
--- a/src/components/buttons.scss
+++ b/src/components/buttons.scss
@@ -116,34 +116,58 @@
&.btn-primary {
@apply border-primary text-primary stroke-primary fill-primary;
+ &:after {
+ @apply bg-primary;
+ }
}
&.btn-secondary {
@apply border-secondary text-secondary hover:bg-secondary-600/10 stroke-secondary fill-secondary;
+ &:after {
+ @apply bg-secondary;
+ }
}
&.btn-contrast {
@apply border-contrast text-contrast hover:bg-contrast/10 stroke-contrast fill-contrast;
+ &:after {
+ @apply bg-contrast;
+ }
}
&.btn-neutral {
@apply border-neutral text-neutral hover:bg-neutral-800/10 stroke-neutral fill-neutral;
+ &:after {
+ @apply bg-neutral;
+ }
}
&.btn-danger {
@apply border-danger text-danger hover:bg-danger-800/10 stroke-danger fill-danger;
+ &:after {
+ @apply bg-danger;
+ }
}
&.btn-warning {
@apply border-warning text-warning hover:bg-warning-600/10 stroke-warning fill-warning;
+ &:after {
+ @apply bg-warning;
+ }
}
&.btn-success {
@apply border-success text-success hover:bg-success-800/10 stroke-success fill-success;
+ &:after {
+ @apply bg-success;
+ }
}
&.btn-light {
@apply border-white text-white hover:bg-white/10 stroke-white fill-white;
+ &:after {
+ @apply bg-white;
+ }
}
}
diff --git a/src/components/inputs.scss b/src/components/inputs.scss
index 9b410040..1bf995b4 100644
--- a/src/components/inputs.scss
+++ b/src/components/inputs.scss
@@ -1,5 +1,5 @@
.input-text {
- @apply outline-none h-[52px] bg-contrast hover:bg-contrast-800 focus:bg-contrast-900 border border-solid border-contrast-400 font-bold px-4 rounded-md text-base placeholder:font-normal placeholder:text-contrast-300 hover:border-secondary-500 focus:border-secondary transition-all ;
+ @apply outline-none h-13 bg-contrast hover:bg-contrast-800 focus:bg-contrast-900 border border-solid border-contrast-400 font-bold px-4 rounded-md text-base placeholder:font-normal placeholder:text-contrast-300 hover:border-secondary-500 focus:border-secondary transition-all disabled:opacity-50 disabled:bg-contrast-200;
&.input-text-lg {
@apply h-13 text-lg;
@@ -8,7 +8,26 @@
@apply h-10 text-sm;
}
&.input-text-xs {
- @apply h-8 text-sm;
+ @apply h-8 text-sm rounded;
+ }
+ &.input-text-light {
+ @apply bg-white border-neutral-400 text-contrast placeholder:text-contrast/50 focus:border-secondary hover:bg-secondary-400 hover:bg-neutral-100 focus:bg-secondary-100 disabled:bg-neutral-200;
+ }
+}
+
+.input-search {
+ @apply outline-none h-13 bg-contrast hover:bg-contrast-800 focus:bg-contrast-900 border border-solid border-contrast-400 font-bold px-6 rounded-full text-base placeholder:font-normal placeholder:text-contrast-300 hover:border-secondary-500 focus:border-secondary transition-all;
+ &.input-search-lg {
+ @apply h-13 text-lg;
+ }
+ &.input-search-sm {
+ @apply h-10 text-sm px-3;
+ }
+ &.input-search-xs {
+ @apply h-8 text-sm rounded px-3;
+ }
+ &.input-search-light {
+ @apply bg-white border-neutral-400 text-contrast placeholder:text-contrast/50 focus:border-secondary hover:bg-secondary-400 hover:bg-neutral-100 focus:bg-secondary-100;
}
}
diff --git a/src/components/tailwind.config.ts b/src/components/tailwind.config.ts
index 7b69719e..230f1ee7 100644
--- a/src/components/tailwind.config.ts
+++ b/src/components/tailwind.config.ts
@@ -3,6 +3,7 @@ import responsiveRegex from "../lib/responsiveRegex";
import colors from "../theming/colors";
import fontFamily from "../theming/fontFamily";
import base from "../../dist/style/base";
+import utilities from "../../dist/style/utilities";
import { Config } from "tailwindcss";
import opacity from "../theming/opacity";
@@ -14,6 +15,15 @@ export default {
height: {
"13": "3.25rem",
},
+ borderRadius: {
+ none: "0",
+ sm: "4px",
+ DEFAULT: "8px",
+ md: "12px",
+ lg: "16px",
+ xl: "32px",
+ full: "9999px",
+ },
opacity,
fontSize: {
xxs: ["11px", { lineHeight: "1rem" }],