@sikka/hawa 0.1.4 → 0.1.6

package/src/elements/HawaStepper.tsx

@@ -45,17 +45,17 @@ export const HawaStepper: FC<THawaTimeline> = ({
                 {/* Icon */}
                 <div
                   className={clsx(
-                    "ring-buttonPrimary-200 flex h-6 w-6 min-w-[24px] items-center  justify-center rounded  ring-2 ring-offset-2",
+                    "flex h-6 w-6 min-w-[24px] items-center justify-center  rounded ring-2  ring-primary/20 ring-offset-2",
                     i + 1 <= props.currentStep
-                      ? "bg-buttonPrimary-500 text-white"
-                      : "bg-buttonPrimary-200"
+                      ? "bg-primary text-primary-foreground "
+                      : "bg-primary/20"
                   )}
                 >
                   {i + 1 <= props.currentStep ? (
                     <svg
                       aria-label="Check Mark"
                       stroke="currentColor"
-                      fill="white"
+                      fill="currentColor"
                       stroke-width="0"
                       viewBox="0 0 512 512"
                       height="0.60em"

package/src/elements/HawaTabs.tsx

@@ -24,8 +24,8 @@ export const HawaTabs: FC<TabsTypes> = ({
   const [selectedOption, setSelectedOption] = useState(props.options[0]?.value)
 
   let activeTabStyle = {
-    vertical: "inline-block py-2 px-4 text-white bg-buttonPrimary-500 active",
-    horizontal: "inline-block py-2 px-4 text-white bg-buttonPrimary-500 active",
+    vertical: "inline-block py-2 px-4 text-white bg-primary active",
+    horizontal: "inline-block py-2 px-4 text-white bg-primary active",
   }
   // rounded rounded-br-none rounded-bl-none
   let inactiveTabStyle = {
@@ -42,11 +42,11 @@ export const HawaTabs: FC<TabsTypes> = ({
   let orientationStyle = {
     vertical: {
       container: "flex flex-row",
-      tabs: "flex flex-col w-fit flex-wrap rounded   border-b-buttonPrimary-500 bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
+      tabs: "flex flex-col w-fit flex-wrap rounded   border-b-primary bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
     },
     horizontal: {
       container: "",
-      tabs: "flex w-fit flex-wrap rounded rounded-br-none rounded-bl-none  border-b-buttonPrimary-500 bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
+      tabs: "flex w-fit flex-wrap rounded rounded-br-none rounded-bl-none  border-b-primary bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
     },
   }
   let containerStyle = {
@@ -55,9 +55,9 @@ export const HawaTabs: FC<TabsTypes> = ({
   }
   let tabsStyle = {
     vertical:
-      "sticky top-2 h-fit flex flex-col w-fit flex-wrap rounded border-b-buttonPrimary-500 bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
+      "sticky top-2 h-fit flex flex-col w-fit flex-wrap rounded border-b-primary bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
     horizontal:
-      "flex w-fit  flex-wrap border-b-buttonPrimary-500 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
+      "flex w-fit  flex-wrap border-b-primary text-center text-sm font-medium text-gray-500 dark:text-gray-400",
   }
   return (
     <div
@@ -78,7 +78,7 @@ export const HawaTabs: FC<TabsTypes> = ({
             ? "ml-" + marginBetween
             : "mr-" + marginBetween,
           tabsStyle[orientation],
-          "border-buttonPrimary-500",
+          "border-primary",
 
           // orientation === "vertical"
           //   ? direction === "rtl"
@@ -104,7 +104,7 @@ export const HawaTabs: FC<TabsTypes> = ({
                 props?.onChangeTab(opt)
               }}
               className={clsx(
-                "flex flex-row gap-2 items-center",
+                "flex flex-row items-center gap-2",
                 opt.value === selectedOption
                   ? // props.options[selectedOption].value === opt.value
                     [

package/src/elements/SubsectionList.tsx

@@ -64,7 +64,7 @@ const SubsectionItem: FC<TSubsectionItem> = ({
       className={clsx(
         "flex w-full cursor-pointer flex-row items-center justify-between gap-2 rounded p-2  transition-all ",
         selected === value
-          ? "bg-buttonPrimary-500 text-white hover:bg-buttonPrimary-500"
+          ? "bg-primary text-white hover:bg-primary"
           : "hover:bg-layoutPrimary-300"
       )}
     >

package/src/elements/UsageCard.tsx

@@ -34,7 +34,7 @@ export const UsageCard: FC<UsageCardTypes> = (props) => {
       </div>
       <div className="mt-2 h-2.5 w-full rounded-full bg-gray-200 dark:bg-gray-700">
         <div
-          className="h-2.5 rounded-full bg-buttonPrimary-500"
+          className="h-2.5 rounded-full bg-primary"
           style={{
             width: `${props.percent ?? 0}%`,
           }}

package/src/elements/index.ts

@@ -53,3 +53,10 @@ export * from "./HawaLandingCard"
 export * from "./HawaButton"
 export * from "./HawaStoreButtons"
 export * from "./HawaLogoButton"
+
+// v0.1
+export * from "./Button"
+export * from "./Label"
+export * from "./Input"
+export * from "./Tooltip"
+export * from "./Card"

package/src/styles.css

@@ -651,6 +651,19 @@ video {
     max-width: 1400px;
   }
 }
+.clickable-link {
+  cursor: pointer;
+  color: hsl(var(--primary) / 0.8);
+  -webkit-text-decoration-line: underline;
+          text-decoration-line: underline;
+  text-underline-offset: 4px;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.clickable-link:hover {
+  color: hsl(var(--primary));
+}
 .sr-only {
   position: absolute;
   width: 1px;
@@ -1752,12 +1765,6 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(37 99 235 / var(--tw-border-opacity));
 }
-.border-buttonPrimary-500 {
-  border-color: hsl(var(--button-primary-500));
-}
-.border-buttonPrimary-700 {
-  border-color: hsl(var(--button-primary-700));
-}
 .border-gray-100 {
   --tw-border-opacity: 1;
   border-color: rgb(243 244 246 / var(--tw-border-opacity));
@@ -1785,6 +1792,9 @@ video {
 .border-input {
   border-color: hsl(var(--input));
 }
+.border-primary {
+  border-color: hsl(var(--primary));
+}
 .border-red-300 {
   --tw-border-opacity: 1;
   border-color: rgb(252 165 165 / var(--tw-border-opacity));
@@ -1800,8 +1810,8 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(253 224 71 / var(--tw-border-opacity));
 }
-.border-b-buttonPrimary-500 {
-  border-bottom-color: hsl(var(--button-primary-500));
+.border-b-primary {
+  border-bottom-color: hsl(var(--primary));
 }
 .bg-background {
   background-color: hsl(var(--background));
@@ -1917,6 +1927,9 @@ video {
 .bg-primary-foreground {
   background-color: hsl(var(--primary-foreground));
 }
+.bg-primary\/20 {
+  background-color: hsl(var(--primary) / 0.2);
+}
 .bg-red-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 226 226 / var(--tw-bg-opacity));
@@ -1984,11 +1997,11 @@ video {
 .bg-none {
   background-image: none;
 }
-.fill-buttonPrimary-500 {
-  fill: hsl(var(--button-primary-500));
+.fill-primary {
+  fill: hsl(var(--primary));
 }
-.fill-gray-200 {
-  fill: #e5e7eb;
+.fill-primary\/20 {
+  fill: hsl(var(--primary) / 0.2);
 }
 .fill-white {
   fill: #fff;
@@ -2307,9 +2320,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(30 64 175 / var(--tw-text-opacity));
 }
-.text-buttonPrimary-500 {
-  color: hsl(var(--button-primary-500));
-}
 .text-card-foreground {
   color: hsl(var(--card-foreground));
 }
@@ -2384,6 +2394,9 @@ video {
 .text-primary-foreground {
   color: hsl(var(--primary-foreground));
 }
+.text-primary\/70 {
+  color: hsl(var(--primary) / 0.7);
+}
 .text-red-500 {
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity));
@@ -2509,6 +2522,9 @@ video {
 .ring-buttonPrimary-500 {
   --tw-ring-color: hsl(var(--button-primary-500));
 }
+.ring-primary\/20 {
+  --tw-ring-color: hsl(var(--primary) / 0.2);
+}
 .ring-offset-1 {
   --tw-ring-offset-width: 1px;
 }
@@ -2759,12 +2775,6 @@ body {
 .hover\:bg-buttonPrimary-500:hover {
   background-color: hsl(var(--button-primary-500));
 }
-.hover\:bg-buttonPrimary-500\/30:hover {
-  background-color: hsl(var(--button-primary-500) / 0.3);
-}
-.hover\:bg-buttonPrimary-500\/50:hover {
-  background-color: hsl(var(--button-primary-500) / 0.5);
-}
 .hover\:bg-buttonPrimary-700:hover {
   background-color: hsl(var(--button-primary-700));
 }
@@ -2811,6 +2821,9 @@ body {
 .hover\:bg-layoutPrimary-700:hover {
   background-color: var(--layout-primary-700);
 }
+.hover\:bg-primary:hover {
+  background-color: hsl(var(--primary));
+}
 .hover\:bg-primary\/90:hover {
   background-color: hsl(var(--primary) / 0.9);
 }
@@ -2839,9 +2852,6 @@ body {
   --tw-text-opacity: 1;
   color: rgb(37 99 235 / var(--tw-text-opacity));
 }
-.hover\:text-buttonPrimary-500:hover {
-  color: hsl(var(--button-primary-500));
-}
 .hover\:text-gray-400:hover {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -2854,6 +2864,12 @@ body {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
+.hover\:text-primary:hover {
+  color: hsl(var(--primary));
+}
+.hover\:text-primary-foreground:hover {
+  color: hsl(var(--primary-foreground));
+}
 .hover\:text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -3242,10 +3258,6 @@ body {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
-:is(.dark .dark\:text-blue-400) {
-  --tw-text-opacity: 1;
-  color: rgb(96 165 250 / var(--tw-text-opacity));
-}
 :is(.dark .dark\:text-blue-500) {
   --tw-text-opacity: 1;
   color: rgb(59 130 246 / var(--tw-text-opacity));
@@ -3320,9 +3332,6 @@ body {
   --tw-border-opacity: 1;
   border-color: rgb(55 65 81 / var(--tw-border-opacity));
 }
-:is(.dark .dark\:hover\:bg-buttonPrimary-500\/60:hover) {
-  background-color: hsl(var(--button-primary-500) / 0.6);
-}
 :is(.dark .dark\:hover\:bg-buttonPrimary-700:hover) {
   background-color: hsl(var(--button-primary-700));
 }

package/src/tailwind.css

@@ -163,6 +163,11 @@
   }
 }
 
+@layer components {
+  .clickable-link {
+    @apply cursor-pointer text-primary/80 underline underline-offset-4 hover:text-primary transition-all;
+  }
+}
 @layer utilities {
   /* Chrome, Safari and Opera */
   .no-scrollbar::-webkit-scrollbar {