@sikka/hawa 0.0.173 → 0.0.174

package/package.json

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

package/src/elements/DraggableCard.tsx

@@ -7,7 +7,7 @@ export const DraggableCard: React.FunctionComponent<DraggableCardTypes> = (
   props
 ) => {
   return (
-    <div className="bg-layoutPrimary-default flex flex-row rounded p-4">
+    <div className="bg-layoutPrimary-500 flex flex-row rounded p-4">
       <button
         className="inline-flex items-center rounded bg-white p-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-50 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 dark:focus:ring-gray-600"
         type="button"

package/src/elements/HawaButton.tsx

@@ -31,7 +31,7 @@ const sizeStyles = {
 const widthStyles = {
   full: "w-full flex justify-center px-5 py-2.5 text-center inline-flex items-center",
   normal:
-    "w-fit dark:bg-buttonPrimary-dark dark:hover:bg-buttonPrimary-darker dark:hover:brightness-90 dark:focus:ring-primary-800",
+    "w-fit dark:bg-buttonPrimary-dark dark:hover:bg-buttonPrimary-darker dark:hover:brightness-90 dark:focus:ring-buttonPrimary-500",
   half: "w-1/2",
 }
 const variantStyles = {
@@ -42,9 +42,9 @@ const variantStyles = {
 const colorStyles = {
   contained: {
     default:
-      "text-neutral-900 bg-buttonPrimary-default hover:bg-buttonPrimary-darker bg-buttonPrimary-default text-white",
+      "text-neutral-900 bg-buttonPrimary-500 hover:bg-buttonPrimary-darker bg-buttonPrimary-500 text-white",
     primary:
-      "text-white bg-buttonPrimary-default hover:bg-buttonPrimary-darker transition-all",
+      "text-white bg-buttonPrimary-500 hover:bg-buttonPrimary-darker transition-all",
     secondary:
       "text-neutral-900 bg-buttonSecondary-default hover:text-white hover:bg-buttonSecondary-darker",
   },

package/src/elements/HawaChip.tsx

@@ -3,7 +3,7 @@ import React from "react"
 
 type TChipTypes = {
   label: string
-  size: "small" | "normal" | "large"
+  size?: "small" | "normal" | "large"
   icon?: JSX.Element
 }
 export const HawaChip: React.FunctionComponent<TChipTypes> = ({

package/src/elements/HawaLogoButton.tsx

@@ -146,17 +146,18 @@ export const HawaLogoButton: React.FunctionComponent<LogoButtonTypes> = (
     default:
       break
   }
+
   return (
     <button
       style={{ direction: isArabic ? "rtl" : "ltr" }}
       onClick={props.onClick}
-      className="transition-all my-2 flex h-11 w-full flex-row justify-center rounded bg-white hover:ring-1 hover:ring-buttonPrimary-default hover:brightness-90 align-middle"
+      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"
     >
       <div className="flex h-full flex-row items-center justify-end">
         {logoElement}
       </div>
       <div style={{ width: 10 }} />
-      <div className="flex h-full flex-col items-start justify-center">
+      <div className="flex h-full flex-col items-start justify-center dark:text-black">
         {props.buttonText}
       </div>
     </button>

package/src/elements/HawaMenu.tsx

@@ -106,7 +106,7 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
                     onClick={(e) => item.action(e, item.label)}
                     className={
                       item.isButton
-                        ? "mx-1 my-1 flex cursor-pointer flex-row items-center rounded bg-buttonPrimary-default py-2 px-4 text-white hover:bg-buttonPrimary-darker rtl:flex-row-reverse dark:hover:bg-buttonPrimary-darker dark:hover:text-white"
+                        ? "mx-1 my-1 flex cursor-pointer flex-row items-center rounded bg-buttonPrimary-500 py-2 px-4 text-white hover:bg-buttonPrimary-darker rtl:flex-row-reverse dark:hover:bg-buttonPrimary-darker dark:hover:text-white"
                         : "mx-1 flex cursor-pointer flex-row items-center rounded py-2 px-4 hover:bg-gray-200 rtl:flex-row-reverse dark:hover:bg-gray-600 dark:hover:text-white"
                     }
                   >

package/src/elements/HawaPricingCard.tsx

@@ -1,5 +1,11 @@
 import React from "react"
 
+// TODO: make the texts in one object property
+// TODO: give it a background color (white)
+// TODO: remove title_ar
+// TODO: spicifiy features object
+// TODO: remove features_ar
+
 type PricingCardTypes = {
   lang: "ar" | "en"
   features: [any]
@@ -95,7 +101,7 @@ export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = (
         </span>
       </div>
       <ul role="list" className="my-7 space-y-0">
-        {featuresMapping?.map((feature, o) => {
+        {props.features?.map((feature, o) => {
           return (
             <li key={o} className="flex ">
               <svg

package/src/elements/HawaRadio.tsx

@@ -14,7 +14,7 @@ type RadioTypes = {
 export const HawaRadio: React.FunctionComponent<RadioTypes> = (props) => {
   const [selectedOption, setSelectedOption] = useState(props.defaultValue)
   let activeTabStyle =
-    "inline-block py-2 px-4  w-full text-white bg-buttonPrimary-default rounded active"
+    "inline-block py-2 px-4  w-full text-white bg-buttonPrimary-500 rounded active"
   let inactiveTabStyle =
     "inline-block py-2 px-4 w-full bg-gray-100 rounded hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
 

package/src/elements/HawaStats.tsx

@@ -15,7 +15,7 @@ export const HawaStats: React.FunctionComponent<StatTypes> = (props) => {
     "flex flex-col gap-1 rounded p-4 text-sm h-fit max-h-fit"
   let statStyles = {
     plain: "",
-    contained: "bg-layoutPrimary-default w-fit",
+    contained: "bg-layoutPrimary-500 w-fit",
     outlined: "ring-2 w-fit",
   }
   return (

package/src/elements/HawaTable.tsx

@@ -31,7 +31,7 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
   return (
     <div className="relative overflow-x-clip rounded">
       <table className="w-full text-left text-sm text-gray-500 dark:text-gray-400">
-        <thead className="bg-layoutPrimary-default text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400">
+        <thead className="bg-layoutPrimary-500 text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400">
           <tr>
             {props.columns.map((col: any, i: any) => (
               <th key={i} scope="col" className={clsx(sizeStyles[size])}>

package/src/elements/HawaTabs.tsx

@@ -18,9 +18,9 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
   // const [selectedOption, setSelectedOption] = useState(props.defaultValue - 1)
   let activeTabStyle = {
     vertical:
-      "inline-block py-2 px-4 text-white bg-buttonPrimary-default active",
+      "inline-block py-2 px-4 text-white bg-buttonPrimary-500 active",
     horizontal:
-      "inline-block py-2 px-4 text-white bg-buttonPrimary-default rounded rounded-br-none rounded-bl-none active",
+      "inline-block py-2 px-4 text-white bg-buttonPrimary-500 rounded rounded-br-none rounded-bl-none active",
   }
   let inactiveTabStyle = {
     vertical:
@@ -33,11 +33,11 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
   let orientationStyle = {
     vertical: {
       container: "flex flex-row",
-      tabs: "flex flex-col w-fit flex-wrap rounded   border-b-primary-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-buttonPrimary-500 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-primary-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-buttonPrimary-500 bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
     },
   }
   let containerStyle = {
@@ -46,9 +46,9 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
   }
   let tabsStyle = {
     vertical:
-      "sticky top-2 h-fit flex flex-col w-fit flex-wrap rounded border-b-primary-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-buttonPrimary-500 bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
     horizontal:
-      "flex w-fit flex-wrap rounded rounded-br-none rounded-bl-none  border-b-primary-500 bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400",
+      "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",
   }
   return (
     <div
@@ -61,7 +61,7 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
       <ul
         className={clsx(
           tabsStyle[orientation],
-          "border-buttonPrimary-default",
+          "border-buttonPrimary-500",
           orientation === "vertical"
             ? direction === "rtl"
               ? "rounded-none rounded-r-lg border-l-2"

package/src/elements/HawaTimeline.tsx

@@ -17,12 +17,12 @@ export const HawaTimeline: React.FunctionComponent<THawaTimeline> = ({
   }
   let lineStyles = {
     vertical: {
-      default: "w-1 h-32 rounded bg-buttonPrimary-default ml-6 my-2",
-      selected: "w-1  h-32 rounded bg-buttonPrimary-default ml-6 my-2",
+      default: "w-1 h-32 rounded bg-buttonPrimary-500 ml-6 my-2",
+      selected: "w-1  h-32 rounded bg-buttonPrimary-500 ml-6 my-2",
     },
     horizontal: {
-      default: "h-0.5 w-full rounded bg-buttonPrimary-default",
-      selected: "h-0.5 w-full rounded bg-buttonPrimary-default",
+      default: "h-0.5 w-full rounded bg-buttonPrimary-500",
+      selected: "h-0.5 w-full rounded bg-buttonPrimary-500",
     },
   }
   return (
@@ -71,8 +71,10 @@ const TimelineStep = (props) => (
   >
     <div
       className={clsx(
-        "m-2 mr-4 flex h-10 w-10 items-center justify-center rounded ring-2 ring-primary-200 ring-offset-2",
-        props.current ? "bg-buttonPrimary-default text-white" : "bg-primary-200"
+        "ring-buttonPrimary-200 m-2 mr-4 flex h-10 w-10 items-center justify-center rounded ring-2 ring-offset-2",
+        props.current
+          ? "bg-buttonPrimary-500 text-white"
+          : "bg-buttonPrimary-200"
       )}
     >
       {props.stepNumber}

package/src/elements/SubsectionList.tsx

@@ -0,0 +1,78 @@
+import clsx from "clsx"
+import React, { useState } from "react"
+import { HawaChip } from "./HawaChip"
+
+type SubsectionListTypes = {
+  align?: any
+  subsections: [
+    {
+      title: string
+      sections: [
+        {
+          label: string
+          action: () => void
+          icon?: any
+          value?: any
+        }
+      ]
+    }
+  ]
+}
+export const SubsectionList: React.FunctionComponent<SubsectionListTypes> = ({
+  subsections,
+}) => {
+  const [selectedSection, setSelectedSection] = useState(null)
+  return (
+    <div className="w-full max-w-2xs rounded bg-layoutPrimary-500 p-4 ">
+      {subsections.map((ss) => (
+        <div className="my-0">
+          {ss.title && <div className="my-4 font-bold">{ss.title}</div>}
+          {ss.sections.map((s) => (
+            <SubsectionItem
+              onItemClick={() => setSelectedSection(s.value)}
+              selected={selectedSection}
+              value={s.value}
+              icon={s.icon}
+              title={s.label}
+              chip="Upgrade"
+            />
+          ))}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+type TSubsectionItem = {
+  chip?: string
+  title: string
+  value: string
+  icon?: any
+  selected?: any
+  onItemClick?: () => void
+}
+const SubsectionItem: React.FunctionComponent<TSubsectionItem> = ({
+  title,
+  value,
+  icon,
+  chip,
+  selected,
+  onItemClick,
+}) => {
+  return (
+    <div
+      onClick={onItemClick}
+      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"
+          : "hover:bg-layoutPrimary-300"
+      )}
+    >
+      <div className="flex w-full flex-row items-center justify-start  gap-2">
+        {icon} <span>{title}</span>
+      </div>
+      {chip && <HawaChip label="Upgrade" size="normal" />}{" "}
+    </div>
+  )
+}

package/src/elements/index.ts

@@ -26,6 +26,7 @@ export * from "./HawaStats"
 export * from "./HawaSpinner"
 export * from "./HawaRadio"
 export * from "./HawaDrawer"
+export * from "./SubsectionList"
 // Inputs
 export * from "./HawaTextField"
 export * from "./HawaCardInput"

package/src/layout/HawaAppLayout.tsx

@@ -71,12 +71,12 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
   //less than 600
   //as nothing and expands as button is clicked
   let ltrDrawerStyle = [
-    " fixed top-0 left-0 z-40 flex h-full flex-col justify-between overflow-x-clip bg-layoutPrimary-default transition-all",
+    " fixed top-0 left-0 z-40 flex h-full flex-col justify-between overflow-x-clip bg-layoutPrimary-500 transition-all",
     size > 600 ? "w-14 hover:w-40" : "w-0",
     openSideMenu ? "w-40" : "w-14",
   ]
   let rtlDrawerStyle = [
-    "fixed top-0 right-0 z-40 flex h-full flex-col justify-between overflow-x-clip bg-layoutPrimary-default transition-all",
+    "fixed top-0 right-0 z-40 flex h-full flex-col justify-between overflow-x-clip bg-layoutPrimary-500 transition-all",
     size > 600 ? "w-14 hover:w-40" : "w-0",
     openSideMenu ? "w-40" : "w-14",
   ]
@@ -100,7 +100,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
       {props.topBar && (
         <div
           className={clsx(
-            "fixed top-0 z-30 flex h-14 flex-row items-center justify-between bg-layoutPrimary-default",
+            "fixed top-0 z-30 flex h-14 flex-row items-center justify-between bg-layoutPrimary-500",
             // size > 600 ? "w-[calc(100%-3rem)] translate-x-[3rem]" : "w-full",
             "w-full",
             "p-2",
@@ -178,7 +178,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
         >
           <div
             className={clsx(
-              "fixed z-50 mb-2 flex h-12 items-center justify-center bg-layoutPrimary-default p-2 transition-all",
+              "fixed z-50 mb-2 flex h-12 items-center justify-center bg-layoutPrimary-500 p-2 transition-all",
               openSideMenu ? "w-40" : "w-14"
             )}
           >
@@ -228,7 +228,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
                         }}
                         className={clsx(
                           props.currentPage === dItem.slug
-                            ? "bg-buttonPrimary-default text-white"
+                            ? "bg-buttonPrimary-500 text-white"
                             : "hover:bg-buttonPrimary-lighter",
                           "m-2 flex cursor-pointer flex-row items-center overflow-x-clip rounded p-2  pl-3 transition-all ",
                           direction === "rtl" ? "flex-row-reverse pr-3" : ""
@@ -263,7 +263,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
                   )
                 })}
                 {j !== props.drawerItems.length - 1 && (
-                  <div className="my-2 h-[1px] w-10/12 self-center bg-buttonPrimary-default text-center "></div>
+                  <div className="my-2 h-[1px] w-10/12 self-center bg-buttonPrimary-500 text-center "></div>
                 )}{" "}
               </div>
             ))}

package/src/layout/HawaContainer.tsx

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

package/src/layout/HawaSiteLayout.tsx

@@ -66,12 +66,12 @@ export const HawaSiteLayout: React.FunctionComponent<HawaSiteLayoutTypes> = ({
   //less than 600
   //as nothing and expands as button is clicked
   let ltrDrawerStyle = [
-    " fixed top-0 left-0 z-40 flex h-full flex-col justify-between overflow-x-clip bg-layoutPrimary-default transition-all",
+    " fixed top-0 left-0 z-40 flex h-full flex-col justify-between overflow-x-clip bg-layoutPrimary-500 transition-all",
     size > 600 ? "w-14 hover:w-40" : "w-0",
     openSideMenu ? "w-40" : "w-14",
   ]
   let rtlDrawerStyle = [
-    "fixed top-0 right-0 z-40 flex h-full flex-col justify-between overflow-x-clip bg-layoutPrimary-default transition-all",
+    "fixed top-0 right-0 z-40 flex h-full flex-col justify-between overflow-x-clip bg-layoutPrimary-500 transition-all",
     size > 600 ? "w-14 hover:w-40" : "w-0",
     openSideMenu ? "w-40" : "w-14",
   ]
@@ -94,7 +94,7 @@ export const HawaSiteLayout: React.FunctionComponent<HawaSiteLayoutTypes> = ({
     <div className="h-full w-full">
       <div
         className={clsx(
-          "z-30 flex flex-row items-start justify-between bg-layoutPrimary-default  transition-all",
+          "z-30 flex flex-row items-start justify-between bg-layoutPrimary-500  transition-all",
           navigationSizeStyles[navigationSize],
           "rounded p-3",
           openSideMenu ? "h-44" : "",

package/src/styles.css

@@ -375,11 +375,12 @@ video {
   display: none;
 }
   :root {
-    --layout-primary: #d2cdfa;
+    --layout-primary-500: #dfdcfc;
+    --layout-primary-300: #e7e5fa;
     --layout-secondary: #d2cdfa;
 
-    --button-primary: #4c37eb;
-    --button-primary-darker: #2e1dac;
+    --button-primary-500: #4c37eb;
+    --button-primary-700: #2e1dac;
 
     --button-secondary: #ffc011;
     --button-secondary-darker: #b48d24;
@@ -719,6 +720,10 @@ video {
   margin-top: 0px;
   margin-bottom: 0px;
 }
+.my-4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
 .ml-auto {
   margin-left: auto;
 }
@@ -1016,6 +1021,9 @@ video {
 .max-w-lg {
   max-width: 32rem;
 }
+.max-w-2xs {
+  max-width: 250px;
+}
 .max-w-full {
   max-width: 100%;
 }
@@ -1372,10 +1380,6 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-border-opacity));
 }
-.border-secondary-800 {
-  --tw-border-opacity: 1;
-  border-color: rgb(89 116 27 / var(--tw-border-opacity));
-}
 .border-gray-300 {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
@@ -1388,23 +1392,22 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(156 163 175 / var(--tw-border-opacity));
 }
-.border-buttonPrimary-default {
-  border-color: var(--button-primary);
+.border-buttonPrimary-500 {
+  border-color: var(--button-primary-500);
 }
 .border-t-white {
   --tw-border-opacity: 1;
   border-top-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
-.border-b-primary-500 {
-  --tw-border-opacity: 1;
-  border-bottom-color: rgb(61 147 249 / var(--tw-border-opacity));
+.border-b-buttonPrimary-500 {
+  border-bottom-color: var(--button-primary-500);
 }
 .bg-gray-900 {
   --tw-bg-opacity: 1;
   background-color: rgb(17 24 39 / var(--tw-bg-opacity));
 }
-.bg-layoutPrimary-default {
-  background-color: var(--layout-primary);
+.bg-layoutPrimary-500 {
+  background-color: var(--layout-primary-500);
 }
 .bg-white {
   --tw-bg-opacity: 1;
@@ -1433,8 +1436,8 @@ video {
 .bg-transparent {
   background-color: transparent;
 }
-.bg-buttonPrimary-default {
-  background-color: var(--button-primary);
+.bg-buttonPrimary-500 {
+  background-color: var(--button-primary-500);
 }
 .bg-buttonSecondary-default {
   background-color: var(--button-secondary);
@@ -1467,10 +1470,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(191 219 254 / var(--tw-bg-opacity));
 }
-.bg-layout-1200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(238 247 252 / var(--tw-bg-opacity));
-}
 .bg-gray-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(107 114 128 / var(--tw-bg-opacity));
@@ -1487,10 +1486,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(250 204 21 / var(--tw-bg-opacity));
 }
-.bg-primary-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(196 222 253 / var(--tw-bg-opacity));
-}
 .bg-gray-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(75 85 99 / var(--tw-bg-opacity));
@@ -1773,10 +1768,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
-.text-secondary-800 {
-  --tw-text-opacity: 1;
-  color: rgb(89 116 27 / var(--tw-text-opacity));
-}
 .text-gray-300 {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));
@@ -1854,10 +1845,6 @@ video {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity));
 }
-.ring-primary-200 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(196 222 253 / var(--tw-ring-opacity));
-}
 .ring-offset-1 {
   --tw-ring-offset-width: 1px;
 }
@@ -1972,10 +1959,6 @@ body {
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-buttonPrimary-darker:hover {
-  background-color: var(--button-primary-darker);
-}
-
 .hover\:bg-buttonSecondary-darker:hover {
   background-color: var(--button-secondary-darker);
 }
@@ -1995,6 +1978,14 @@ body {
   background-color: rgb(29 78 216 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-buttonPrimary-500:hover {
+  background-color: var(--button-primary-500);
+}
+
+.hover\:bg-layoutPrimary-300:hover {
+  background-color: var(--layout-primary-300);
+}
+
 .hover\:bg-gray-700:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
@@ -2046,8 +2037,8 @@ body {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.hover\:ring-buttonPrimary-default:hover {
-  --tw-ring-color: var(--button-primary);
+.hover\:ring-buttonPrimary-500:hover {
+  --tw-ring-color: var(--button-primary-500);
 }
 
 .hover\:brightness-90:hover {
@@ -2248,6 +2239,11 @@ body {
   color: rgb(239 68 68 / var(--tw-text-opacity));
 }
 
+.dark .dark\:text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
 .dark .dark\:text-gray-200 {
   --tw-text-opacity: 1;
   color: rgb(229 231 235 / var(--tw-text-opacity));
@@ -2297,10 +2293,6 @@ body {
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }
 
-.dark .dark\:hover\:bg-buttonPrimary-darker:hover {
-  background-color: var(--button-primary-darker);
-}
-
 .dark .dark\:hover\:text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -2331,9 +2323,8 @@ body {
   --tw-ring-color: rgb(31 41 55 / var(--tw-ring-opacity));
 }
 
-.dark .dark\:focus\:ring-primary-800:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(5 74 158 / var(--tw-ring-opacity));
+.dark .dark\:focus\:ring-buttonPrimary-500:focus {
+  --tw-ring-color: var(--button-primary-500);
 }
 
 .dark .dark\:focus\:ring-blue-500:focus {

package/src/tailwind.css

@@ -4,11 +4,12 @@
 @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;700&display=swap");
 @layer base {
   :root {
-    --layout-primary: #d2cdfa;
+    --layout-primary-500: #dfdcfc;
+    --layout-primary-300: #e7e5fa;
     --layout-secondary: #d2cdfa;
 
-    --button-primary: #4c37eb;
-    --button-primary-darker: #2e1dac;
+    --button-primary-500: #4c37eb;
+    --button-primary-700: #2e1dac;
 
     --button-secondary: #ffc011;
     --button-secondary-darker: #b48d24;