@sikka/hawa 0.0.276 → 0.0.277

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.276",
+  "version": "0.0.277",
   "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",

package/src/blocks/Account/UserProfileForm.tsx

@@ -20,7 +20,6 @@ export const UserProfileForm: FC<UserProfileFormTypes> = (props) => {
 
   return (
     <HawaContainer>
-      {" "}
       <FormProvider {...methods}>
         <form onSubmit={handleSubmit((e) => props.handleUpdateProfile(e))}>
           <Controller

package/src/blocks/Account/UserSettingsForm.tsx

@@ -1,4 +1,5 @@
 import React, { FC } from "react"
+import { HawaContainer } from "../../layout"
 
 type UserSettingsFormTypes = {
   children: any
@@ -9,7 +10,7 @@ type UserSettingsFormTypes = {
 
 export const UserSettingsForm: FC<UserSettingsFormTypes> = (props) => {
   return (
-    <div>
+    <HawaContainer>
       <div className="mb-2 text-sm font-bold">{props.blockTitle}</div>
       <div className="flex flex-col gap-4 rounded bg-white p-2">
         {props.children}
@@ -23,6 +24,6 @@ export const UserSettingsForm: FC<UserSettingsFormTypes> = (props) => {
       >
         {props.saveSettingsText}
       </HawaButton> */}
-    </div>
+    </HawaContainer>
   )
 }

package/src/blocks/AuthForms/CodeConfirmation.tsx

@@ -33,11 +33,11 @@ export const CodeConfirmation: FC<TConfirmation> = (props) => {
           severity="error"
         />
       )}
-      <div className="mb-4">
+      <div className="mb-4 dark:text-white">
         <div className="text-lg font-bold">
           {props.texts.checkYourPhone ?? "Please check your phone"}
         </div>
-        <div className="text-gray-500">
+        <div className="text-muted-foreground">
           <span>{props.texts.weSentCode ?? "We've sent a code to "}</span>
           <span>{props.phoneNumber}</span>
         </div>{" "}
@@ -51,7 +51,7 @@ export const CodeConfirmation: FC<TConfirmation> = (props) => {
         }}
       >
         <HawaPinInput width="full" digits={6} getPins={(e) => setPins(e)} />
-        <div className=" py-2 text-center text-xs">
+        <div className=" py-2 text-center text-xs text-muted-foreground">
           <span>{props.texts.didntGetCode ?? "Didn't get the code?"}</span>{" "}
           <span className="cursor-pointer text-buttonPrimary-500">
             {props.texts.resendCode ?? "Click to resend"}

package/src/blocks/AuthForms/SignUpForm.tsx

@@ -287,7 +287,7 @@ export const SignUpForm: FC<SignUpFormTypes> = (props) => {
             </HawaButton>
           </form>
         </FormProvider>
-        <div className="flex flex-row items-center justify-center gap-1 p-3  text-center text-sm font-semibold">
+        <div className="flex flex-row items-center justify-center gap-1 p-3 text-center  text-sm font-semibold dark:text-white">
           <span>{props.texts.existingUserText}</span>
           <span
             onClick={props.handleRouteToSignIn}

package/src/blocks/Payment/CheckoutForm.tsx

@@ -60,7 +60,7 @@ export const CheckoutForm: FC<CheckoutFormTypes> = (props) => {
   return (
     <HawaContainer>
       <div>
-        <div className="mb-2 text-center text-xl font-semibold">
+        <div className="mb-2 text-center text-xl font-semibold dark:text-white">
           {props.texts.orderDetails}
         </div>
         <div className="rounded border border-gray-300">
@@ -79,7 +79,7 @@ export const CheckoutForm: FC<CheckoutFormTypes> = (props) => {
         </div>
       </div>
       <div>
-        <div className="my-2 text-center text-xl font-semibold">
+        <div className="my-2 text-center text-xl font-semibold dark:text-white">
           {props.texts.billingAddress}
         </div>
 

package/src/blocks/Payment/Confirmation.tsx

@@ -10,8 +10,6 @@ type ConfirmationPageTypes = {
     successMessage: string
     orderDetails: string
     fasterPaymentNote: string
-    billingAddress: string
-    payNow: string
     yourOrderNumber: string
     emailLabel: string
     emailRequiredText: string
@@ -46,10 +44,10 @@ export const ConfirmationPage: FC<ConfirmationPageTypes> = (props) => {
   return (
     <HawaContainer>
       {" "}
-      <div className="py-5 text-center text-3xl font-bold">
+      <div className="py-5 text-center text-3xl font-bold dark:text-white">
         {props.confirmationTitle}
       </div>
-      <div className="py-5">
+      <div className="py-5 dark:text-white">
         <div className="mb-2 text-center">
           {props.texts.successMessage} <strong>{props.userEmail}</strong>
         </div>
@@ -81,11 +79,11 @@ export const ConfirmationPage: FC<ConfirmationPageTypes> = (props) => {
         <HawaButton color="primary" width="full" onClick={props.handleHome}>
           {props.texts.homePage}
         </HawaButton>
-        <div className="mb-5 mt-5 text-center text-sm">
+        <div className="mb-5 mt-5 text-center text-sm dark:text-white">
           {props.texts.fasterPaymentNote}
         </div>
         <a
-          className="w-fit cursor-pointer  text-center text-xs font-normal"
+          className="w-fit cursor-pointer text-center  text-xs font-normal dark:text-white"
           onClick={props.handleRefundPolicyLink}
         >
           {props.texts.refundPolicy}

package/src/elements/HawaButton.tsx

@@ -71,7 +71,7 @@ const colorStyles = {
     dark: "text-neutral-900 bg-gray-200 hover:bg-gray-300",
   },
   outlined: {
-    default: "text-gray-600 border-gray-600 hover:bg-gray-200 dark:text-white",
+    default: "text-gray-600 border-gray-600 hover:bg-gray-200 dark:hover:bg-gray-800 dark:text-white",
     primary: "text-black hover:bg-gray-50  dark:text-white",
     secondary:
       " dark:text-white text-secondary-800 border-secondary-800 hover:bg-buttonSecondary-700 hover:text-white",

package/src/elements/HawaLogoButton.tsx

@@ -147,7 +147,7 @@ export const HawaLogoButton: FC<LogoButtonTypes> = (props) => {
     <button
       style={{ direction: isArabic ? "rtl" : "ltr" }}
       onClick={props.onClick}
-      className="my-2 flex h-11 w-full flex-row justify-center rounded bg-white align-middle transition-all hover:ring-1 hover:ring-buttonPrimary-500 hover:brightness-90"
+      className="my-2 border flex h-11 w-full flex-row justify-center rounded bg-white align-middle transition-all hover:ring-1 hover:ring-buttonPrimary-500 hover:brightness-90"
     >
       <div className="flex h-full flex-row items-center justify-end">
         {logoElement}

package/src/elements/HawaPinInput.tsx

@@ -64,7 +64,7 @@ export const HawaPinInput: FC<PinInputTypes> = ({
           id={`input-${index}`}
           pattern="[0-9]*"
           className={clsx(
-            "h-10 rounded bg-white text-center",
+            "h-10 rounded border bg-background text-center",
             width === "full" ? "w-full" : "w-10"
           )}
           onChange={(e) => handleChange(e, index)}

package/src/elements/HawaSelect.tsx

@@ -31,7 +31,7 @@ const Control: FC<ControlTypes> = ({
       ref={innerRef}
       className={clsx(
         sizeStyles[size],
-        "flex  w-full rounded border border-gray-300 bg-gray-50 text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+        "flex  w-full rounded border bg-background text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:focus:ring-blue-500"
       )}
       {...innerProps}
       // {...props}

package/src/elements/HawaTextField.tsx

@@ -52,7 +52,7 @@ export const HawaTextField: FC<TextFieldTypes> = ({
 
   let defaultStyle = "flex max-h-fit flex-col justify-center"
   let defaultInputStyle =
-    "block w-full rounded outline outline-1 outline-gray-300 bg-white p-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+    "block w-full rounded border bg-background p-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 "
   let previewInputStyle =
     "block w-full rounded bg-gray-50 p-2 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
   // "mb-0 block w-full rounded border border-gray-300 bg-gray-50 p-2  text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500",

package/src/layout/HawaContainer.tsx

@@ -22,8 +22,8 @@ export const HawaContainer: React.FunctionComponent<ContainerTypes> = ({
     normal: "max-w-sm md:max-w-md",
   }
   let variantStyles = {
-    contained: "bg-layoutPrimary-500 dark:bg-layoutPrimary-dark",
-    outlined: "bg-transparent border-2 border-black w-fit",
+    contained: "bg-background border",
+    outlined: "bg-transparent border border-black w-fit",
     neobrutalism: "shadow-neobrutalism  border-4 border-black  bg-white",
   }
 

package/src/styles.css

@@ -388,6 +388,7 @@ video {
   :root {
     --background: 0 0% 100%;
     --foreground: 240 10% 3.9%;
+    --border: 240 5.9% 90%;
 
     --layout-primary-700: #b7aff7;
     /* --layout-primary-500: #dfdcfc; */
@@ -528,6 +529,14 @@ video {
     display: block;
     background: var(--button-primary-500);
   }
+  * {
+  border-color: hsl(var(--border));
+}
+  body {
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+    font-feature-settings: "rlig" 1, "calt" 1;
+}
 
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
@@ -1785,6 +1794,9 @@ video {
 .border-b-buttonPrimary-500 {
   border-bottom-color: var(--button-primary-500);
 }
+.bg-background {
+  background-color: hsl(var(--background));
+}
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -3034,10 +3046,6 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(187 247 208 / var(--tw-bg-opacity));
 }
-:is(.dark .dark\:bg-layoutPrimary-dark) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(37 27 115 / var(--tw-bg-opacity));
-}
 :is(.dark .dark\:bg-red-200) {
   --tw-bg-opacity: 1;
   background-color: rgb(254 202 202 / var(--tw-bg-opacity));

package/src/tailwind.css

@@ -7,6 +7,7 @@
   :root {
     --background: 0 0% 100%;
     --foreground: 240 10% 3.9%;
+    --border: 240 5.9% 90%;
 
     --layout-primary-700: #b7aff7;
     /* --layout-primary-500: #dfdcfc; */
@@ -40,6 +41,7 @@
     --layout-primary-600: #2d2d2d;
     --layout-primary-700: #1d1d1d;
     --layout-primary-300: #4a4a4a;
+    --border: 240 3.7% 15.9%;
 
     --background: 240 10% 3.9%;
 
@@ -148,6 +150,15 @@
     background: var(--button-primary-500);
   }
 }
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+}
 
 @layer utilities {
   /* Chrome, Safari and Opera */

package/tailwind.config.js

@@ -106,6 +106,7 @@ module.exports = {
         inner: "var(--border-radius-inner)"
       },
       colors: {
+        border: "hsl(var(--border))",
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",
         muted: {