@sikka/hawa 0.0.285 → 0.0.287

package/lib/stories/ManualStories/Overview.stories.d.ts

@@ -11,7 +11,7 @@ declare const _default: {
             hideNoControlsWarning: boolean;
             exclude: any[];
         };
-        customIcon: () => React.JSX.Element;
+        className: string;
         options: {
             showPanel: boolean;
         };

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.285",
+  "version": "0.0.287",
   "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",
-  "author": "Sikka Software <contact@sikka.io> (http://sikka.io)",
+  "author": {
+    "name": "Sikka Software",
+    "email": "contact@sikka.io",
+    "url": "http://sikka.io"
+  },
   "license": "MIT",
   "keywords": [
     "ui",
@@ -16,7 +20,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/sikka-software/hawa.git"
+    "url": "git+https://github.com/sikka-software/hawa.git"
   },
   "bugs": {
     "url": "https://github.com/sikka-software/hawa/issues",
@@ -31,7 +35,8 @@
     "deploy-storybook": "storybook-to-ghpages",
     "build-storybook": "build-storybook -o ./docs/documentation",
     "build-lib": "rollup -c",
-    "build:styles": " node tools/build-styles"
+    "build:styles": " node tools/build-styles",
+    "chromatic": "npx chromatic --project-token=chpt_9c33d11ef14064f --output-dir ./docs/documentation"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
@@ -110,5 +115,7 @@
     "react-select": "^5.3.2",
     "slate": "^0.94.1",
     "slate-react": "^0.97.1"
-  }
+  },
+  "readme": "ERROR: No README data found!",
+  "_id": "@sikka/hawa@0.0.285"
 }

package/src/blocks/Account/UserSettingsForm.tsx

@@ -12,9 +12,7 @@ export const UserSettingsForm: FC<UserSettingsFormTypes> = (props) => {
   return (
     <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}
-      </div>
+      <div className="flex flex-col gap-4 rounded  p-2">{props.children}</div>
       {/* <HawaButton
         color="primary"
         // type="submit"

package/src/blocks/AuthForms/SignInForm.tsx

@@ -142,21 +142,24 @@ export const SignInForm: FC<SignInFormTypes> = (props) => {
           {props.viaGoogle && (
             <HawaLogoButton
               logo="google"
-              buttonText={props.texts.googleButtonLabel}
+              direction={props.direction}
+              buttonText={props.texts.signInViaGoogleLabel}
               onClick={props.handleGoogleSignIn}
             />
           )}
           {props.viaGithub && (
             <HawaLogoButton
               logo="github"
-              buttonText={props.texts.githubButtonLabel}
+              direction={props.direction}
+              buttonText={props.texts.signInViaGithubLabel}
               onClick={props.handleGithubSignIn}
             />
           )}
           {props.viaTwitter && (
             <HawaLogoButton
               logo="twitter"
-              buttonText={props.texts.twitterButtonLabel}
+              direction={props.direction}
+              buttonText={props.texts.signInViaTwitterLabel}
               onClick={props.handleTwitterSignIn}
             />
           )}
@@ -188,9 +191,9 @@ type SignInFormTypes = {
     newUserText?: string
     signUpText?: string
     signInText?: string
-    googleButtonLabel?: string
-    githubButtonLabel?: string
-    twitterButtonLabel?: string
+    signInViaGoogleLabel?: string
+    signInViaGithubLabel?: string
+    signInViaTwitterLabel?: string
   }
   withoutResetPassword?: boolean
   withoutSignUp?: boolean

package/src/blocks/AuthForms/SignUpForm.tsx

@@ -38,9 +38,9 @@ type SignUpFormTypes = {
     signUpText: string
     signInText: string
     existingUserText: string
-    googleButtonLabel: string
-    githubButtonLabel: string
-    twitterButtonLabel: string
+    signUpViaGoogleLabel: string
+    signUpViaGithubLabel: string
+    signUpViaTwitterLabel: string
     refCode: string
   }
   showUserSource: any
@@ -302,21 +302,24 @@ export const SignUpForm: FC<SignUpFormTypes> = (props) => {
           {props.viaGoogle && (
             <HawaLogoButton
               logo="google"
-              buttonText={props.texts.googleButtonLabel}
+              direction={props.direction}
+              buttonText={props.texts.signUpViaGoogleLabel}
               onClick={props.handleGoogleSignUp}
             />
           )}
           {props.viaGithub && (
             <HawaLogoButton
               logo="github"
-              buttonText={props.texts.githubButtonLabel}
+              direction={props.direction}
+              buttonText={props.texts.signUpViaGithubLabel}
               onClick={props.handleGithubSignUp}
             />
           )}
           {props.viaTwitter && (
             <HawaLogoButton
               logo="twitter"
-              buttonText={props.texts.twitterButtonLabel}
+              direction={props.direction}
+              buttonText={props.texts.signUpViaTwitterLabel}
               onClick={props.handleTwitterSignUp}
             />
           )}

package/src/blocks/Pricing/HorizontalPricing.tsx

@@ -66,7 +66,11 @@ export const HorizontalPricing: FC<HorizontalPricingTypes> = (props) => {
           />
         </div>
         {data.map((d) => (
-          <label htmlFor={d.title} onClick={() => setSelectedCard(d.title)}>
+          <label
+            htmlFor={d.title}
+            className=""
+            onClick={() => setSelectedCard(d.title)}
+          >
             <input
               type="radio"
               name="radio"
@@ -76,7 +80,7 @@ export const HorizontalPricing: FC<HorizontalPricingTypes> = (props) => {
             <div
               className={clsx(
                 selectedCard === d.title ? "peer-checked:border-blue-500" : "",
-                "peer flex cursor-pointer items-center justify-between rounded-xl border-2 border-transparent bg-white px-5 py-4 shadow  peer-checked:[&_.active]:block peer-checked:[&_.default]:hidden"
+                "peer flex cursor-pointer items-center justify-between  rounded-xl border bg-background px-5   py-4 shadow dark:text-white  peer-checked:[&_.active]:block peer-checked:[&_.default]:hidden"
               )}
             >
               <div className="peer flex items-center gap-4">
@@ -125,13 +129,17 @@ const CheckIcons = () => (
   </>
 )
 const CardText = (props) => (
-  <div className="peer flex flex-col items-start">
-    <h2 className="font-medium text-neutral-700 sm:text-xl">{props.title}</h2>
-    <p className="text-sm text-neutral-500">{props.subtitle} </p>
+  <div className="peer flex flex-col items-start ">
+    <h2 className="font-medium text-neutral-700 dark:text-gray-100 sm:text-xl">
+      {props.title}
+    </h2>
+    <p className="text-sm text-neutral-500 dark:text-gray-300">
+      {props.subtitle}{" "}
+    </p>
   </div>
 )
 const CardPrice = (props) => (
-  <h2 className="peer text-xl font-semibold text-neutral-900 sm:text-2xl">
+  <h2 className="peer text-xl font-semibold text-neutral-900 dark:text-white sm:text-2xl">
     {props.amount}
     <span className="text-base font-medium text-neutral-400">
       {props.cycle}

package/src/blocks/Referral/ReferralAccount.tsx

@@ -15,7 +15,7 @@ export const ReferralAccount: FC<ReferralAccount> = ({
     <HawaContainer>
       <div className="my-2 mt-0">
         <div className="mb-1">Referral Code</div>
-        <div className="flex flex-row items-center justify-between rounded bg-white">
+        <div className="flex flex-row items-center justify-between rounded border bg-background">
           <span className="ml-3 font-bold">{referralCode}</span>
           <HawaButton
             tooltip="Copy"
@@ -39,7 +39,7 @@ export const ReferralAccount: FC<ReferralAccount> = ({
       </div>
       <div className="my-2 mt-0">
         <div className="mb-1">Referral Link</div>
-        <div className="flex flex-row items-center justify-between rounded bg-white">
+        <div className="flex flex-row items-center justify-between rounded border bg-background">
           <span className="ml-3 font-bold">{referralLink}</span>
           <HawaButton
             className="mr-1.5"

package/src/blocks/Referral/ReferralSettlement.tsx

@@ -3,6 +3,7 @@ import {
   HawaAlert,
   HawaButton,
   HawaChip,
+  HawaMenu,
   HawaSelect,
   HawaTextField,
 } from "../../elements"
@@ -93,36 +94,77 @@ export const ReferralSettlement: FC<TReferralSettlement> = ({
   )
 }
 
-const SettlementAccountCard = (props) => (
-  <div className="mb-3 flex flex-row items-center justify-between rounded border-b bg-white p-3">
-    <div className="flex flex-col justify-between">
-      <div className="text-xs">{props.bank}</div>
-      <div>{props.accountHolder}</div>
-      <div className="text-xs">{props.iban}</div>
-    </div>
-    <div className="flex flex-row items-center justify-center gap-2">
-      {props.default && (
-        <HawaButton disabled variant="outlined" size="small">
-          Default
-        </HawaButton>
-      )}
-      {/* {props.default && <HawaChip size="normal" label="Default" />} */}
-      {!props.default && <HawaButton size="small">Make Default</HawaButton>}
-      <HawaButton tooltip="Delete" size="small">
-        {/* <FaTimes /> */}
-        <svg
-          aria-hidden="true"
-          className="h-5 w-5"
-          fill="currentColor"
-          viewBox="0 0 20 20"
+const SettlementAccountCard = (props) => {
+  return (
+    <div className="mb-3 flex flex-row items-center justify-between rounded border bg-background p-3">
+      <div className="flex flex-col justify-between">
+        <div className="text-xs">{props.bank}</div>
+        <div>{props.accountHolder}</div>
+        <div className="text-xs">{props.iban}</div>
+      </div>
+      <div className="flex flex-row items-center justify-center gap-2">
+        {props.default && (
+          <HawaButton disabled variant="outlined" size="xs" margins="none">
+            Default
+          </HawaButton>
+        )}
+
+        <HawaMenu
+          size="small"
+          menuItems={[
+            [
+              { label: "Set Default", disabled: props.default },
+              { label: "Edit" },
+              { label: "Delete" },
+            ],
+          ]}
+          // position={direction === "rtl" ? "right-bottom" : "left-bottom"}
+          // direction={direction}
         >
-          <path
-            fillRule="evenodd"
-            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-            clipRule="evenodd"
-          ></path>
-        </svg>
-      </HawaButton>
+          <HawaButton variant="outlined" size="icon" >
+            <svg
+              aria-label="Vertical Three Dots Menu Icon"
+              className="rotate-90"
+              stroke="currentColor"
+              fill="currentColor"
+              stroke-width="0"
+              viewBox="0 0 16 16"
+              height="1em"
+              width="1em"
+            >
+              <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"></path>
+            </svg>
+          </HawaButton>
+          {/* <div className="flex w-fit rotate-90 cursor-pointer  items-center justify-center rounded  p-2 hover:bg-buttonPrimary-500/50">
+            <svg
+              aria-label="Vertical Three Dots Menu Icon"
+              stroke="currentColor"
+              fill="currentColor"
+              stroke-width="0"
+              viewBox="0 0 16 16"
+              height="1em"
+              width="1em"
+            >
+              <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"></path>
+            </svg>
+          </div> */}
+        </HawaMenu>
+        {/* {!props.default && <HawaButton size="small">Make Default</HawaButton>} */}
+        {/* <HawaButton tooltip="Delete" size="small">
+          <svg
+            aria-hidden="true"
+            className="h-5 w-5"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+          >
+            <path
+              fillRule="evenodd"
+              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+              clipRule="evenodd"
+            ></path>
+          </svg>
+        </HawaButton> */}
+      </div>
     </div>
-  </div>
-)
+  )
+}

package/src/blocks/Referral/ReferralStats.tsx

@@ -69,13 +69,13 @@ export const ReferralStats: FC<TReferralStats> = ({
 }
 
 const NumberCard = (props) => (
-  <div className="w-full rounded bg-white p-2">
+  <div className="w-full rounded border bg-background p-2">
     <div className="text-sm">{props.title}</div>
     <div className="font-bold">{props.number}</div>
   </div>
 )
 const ReferralSignUpCard = (props) => (
-  <div className="mb-3 rounded border-b bg-white p-2">
+  <div className="mb-3 rounded border-b bg-background p-2">
     <div className="text-xs">{props.date}</div>
     <div className="flex flex-row justify-between">
       <div>{props.email}</div>

package/src/elements/DragDropImages.tsx

@@ -197,8 +197,8 @@ export const DragDropImages: React.FunctionComponent<DragDropImagesTypes> = ({
       )}
       <div
         className={clsx(
-          "flex flex-col justify-center rounded border border-dashed border-black  transition-all hover:bg-gray-100 ",
-          isDragActive ? "bg-layoutPrimary-500" : "bg-white"
+          "flex flex-col justify-center rounded border border-dashed  transition-all hover:bg-gray-100 dark:hover:bg-gray-800 ",
+          isDragActive ? "bg-gray-200 dark:bg-gray-700" : "bg-background"
         )}
       >
         <div {...getRootProps({})}>

package/src/elements/HawaButton.tsx

@@ -9,7 +9,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   tooltipDirection?: "rtl" | "ltr"
   color?: "default" | "primary" | "secondary" | "light" | "dark"
   width?: "full" | "normal" | "half"
-  size?: "xs" | "small" | "medium" | "large" | "noPadding" | "full"
+  size?: "xs" | "small" | "medium" | "large" | "noPadding" | "full" | "icon"
   margins?: "none" | "1" | "2" | "3" | "4"
   tooltip?: string
   tooltipSize?: "normal" | "small" | "large"
@@ -36,11 +36,13 @@ const disabledVariantSyles = {
   outlined: "text-gray-300 border-gray-300",
 }
 const baseStyles =
-  "cursor-pointer h-[2.36rem] justify-center items-center text-center font-medium transition-all"
+  "cursor-pointer  justify-center items-center text-center font-medium transition-all "
 const sizeStyles = {
-  xs: "px-1 py-1",
+  icon: "h-10 w-10",
+  xs: "px-1.5 py-2 text-[9px] h-fit",
   small: "text-xs px-2.5 py-1.5",
   medium: "text-sm leading-4 px-3 py-2",
+  default: "h-10 px-4 py-2",
   large: "text-sm px-4 py-2",
   noPadding: "p-0",
   full: "h-full max-h-full p-2",
@@ -58,7 +60,9 @@ const containerWidthStyles = {
 }
 const variantStyles = {
   contained: "border-transparent",
-  outlined: "bg-transparent border",
+  // outlined: "bg-transparent border",
+  outlined:
+    "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
 }
 const colorStyles = {
   contained: {
@@ -77,8 +81,8 @@ const colorStyles = {
     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",
-    gray: "border-gray-300 hover:bg-gray-200  ",
-    dark: "border-gray-900 hover:bg-gray-700  ",
+    gray: "border-gray-300 hover:bg-gray-200",
+    dark: "border-gray-900 hover:bg-gray-700",
   },
 }
 
@@ -86,7 +90,7 @@ export const HawaButton: FC<ButtonProps> = ({
   className,
   variant = "contained",
   color = "default",
-  size = "medium",
+  size = "default",
   width = "normal",
   disabled = false,
   isLoading = false,

package/src/elements/HawaColorPicker.tsx

@@ -10,7 +10,7 @@ type ColorPickerTypes = {
 export const HawaColorPicker: FC<ColorPickerTypes> = (props) => {
   const [selectedColor, setSelectedColor] = useState(props.color)
   return (
-    <div className={`flex w-fit flex-row rounded border-2 border-gray-200 p-0`}>
+    <div className={`flex w-fit flex-row rounded border p-0`}>
       <div
         style={{ backgroundColor: selectedColor }}
         className="rounded-bl-lg rounded-tl-lg"
@@ -33,7 +33,7 @@ export const HawaColorPicker: FC<ColorPickerTypes> = (props) => {
           props.handleChange(e)
         }}
         value={selectedColor}
-        className="w-24  rounded-br-lg rounded-tr-lg pl-2 pr-2"
+        className="w-24 bg-background  rounded-br-lg rounded-tr-lg pl-2 pr-2"
       />
     </div>
   )

package/src/elements/HawaLogoButton.tsx

@@ -15,6 +15,7 @@ type LogoButtonTypes = {
     | "mada"
   onClick?: any
   buttonText?: any
+  direction?: "rtl" | "ltr"
 }
 export const HawaLogoButton: FC<LogoButtonTypes> = (props) => {
   let isArabic = props.lang === "ar"
@@ -32,12 +33,7 @@ export const HawaLogoButton: FC<LogoButtonTypes> = (props) => {
       break
     case "github":
       logoElement = (
-        <svg
-          width="32px"
-          height="32px"
-          viewBox="0 0 32 32"
-          className="h-7 w-7"
-        >
+        <svg width="32px" height="32px" viewBox="0 0 32 32" className="h-7 w-7">
           <path d="M16 0.396c-8.839 0-16 7.167-16 16 0 7.073 4.584 13.068 10.937 15.183 0.803 0.151 1.093-0.344 1.093-0.772 0-0.38-0.009-1.385-0.015-2.719-4.453 0.964-5.391-2.151-5.391-2.151-0.729-1.844-1.781-2.339-1.781-2.339-1.448-0.989 0.115-0.968 0.115-0.968 1.604 0.109 2.448 1.645 2.448 1.645 1.427 2.448 3.744 1.74 4.661 1.328 0.14-1.031 0.557-1.74 1.011-2.135-3.552-0.401-7.287-1.776-7.287-7.907 0-1.751 0.62-3.177 1.645-4.297-0.177-0.401-0.719-2.031 0.141-4.235 0 0 1.339-0.427 4.4 1.641 1.281-0.355 2.641-0.532 4-0.541 1.36 0.009 2.719 0.187 4 0.541 3.043-2.068 4.381-1.641 4.381-1.641 0.859 2.204 0.317 3.833 0.161 4.235 1.015 1.12 1.635 2.547 1.635 4.297 0 6.145-3.74 7.5-7.296 7.891 0.556 0.479 1.077 1.464 1.077 2.959 0 2.14-0.020 3.864-0.020 4.385 0 0.416 0.28 0.916 1.104 0.755 6.4-2.093 10.979-8.093 10.979-15.156 0-8.833-7.161-16-16-16z" />
         </svg>
       )
@@ -120,11 +116,7 @@ export const HawaLogoButton: FC<LogoButtonTypes> = (props) => {
       break
     case "wallet":
       logoElement = (
-        <svg
-          version="1.1"
-          viewBox="0 0 223 223"
-          className="h-6 w-6"
-        >
+        <svg version="1.1" viewBox="0 0 223 223" className="h-6 w-6">
           <g>
             <path
               d="M223,94.5c0-6.075-4.925-11-11-11h-63c-6.075,0-11,4.925-11,11v33c0,6.075,4.925,11,11,11h63c6.075,0,11-4.925,11-11V94.5z
@@ -145,9 +137,10 @@ export const HawaLogoButton: FC<LogoButtonTypes> = (props) => {
 
   return (
     <button
-      style={{ direction: isArabic ? "rtl" : "ltr" }}
+      dir={props.direction}
+      // style={{ direction: isArabic ? "rtl" : "ltr" }}
       onClick={props.onClick}
-      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"
+      className="my-2 flex h-11 w-full flex-row justify-center rounded border 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/HawaRadio.tsx

@@ -69,9 +69,9 @@ export const HawaRadio: FC<RadioTypes> = ({
       return (
         <div className={clsx(orientationStyle[orientation], "gap-4")}>
           {props.options.map((opt, i) => (
-            <div className="rounded border border-gray-200  ">
+            <div className="rounded border border-gray-200   ">
               <div
-                className="radio-item radio-item-bordered flex items-center   transition-all"
+                className="radio-item radio-item-bordered flex items-center    transition-all"
                 key={i + 1}
               >
                 <input
@@ -85,7 +85,7 @@ export const HawaRadio: FC<RadioTypes> = ({
                 <label
                   htmlFor={opt.value.toString()}
                   className={clsx(
-                    "ml-2 w-full  p-4 pl-3  text-sm font-medium",
+                    "ml-2 w-full  p-4 pl-3  text-sm font-medium dark:text-white",
                     opt.disabled ? "opacity-50" : "cursor-pointer text-gray-900"
                   )}
                 >
@@ -164,7 +164,7 @@ export const HawaRadio: FC<RadioTypes> = ({
               <label
                 htmlFor={opt.value.toString()}
                 className={clsx(
-                  "ml-2 text-sm font-medium ",
+                  "ml-2 text-sm font-medium dark:text-white",
                   opt.disabled
                     ? "text-gray-400"
                     : "cursor-pointer text-gray-900"

package/src/elements/HawaTooltip.tsx

@@ -44,7 +44,7 @@ export const HawaTooltip: FC<THawaToolTip> = ({
   })
 
   let defaultTooltipStyles =
-    "absolute z-10   rounded bg-gray-900  text-center text-sm font-medium text-white shadow-sm transition-all duration-300 dark:bg-gray-700"
+    "absolute z-10   rounded bg-gray-100  text-center text-sm font-medium text-foreground dark:text-white  shadow-sm transition-all duration-300 dark:bg-gray-700"
   let sizeStyles = {
     normal: "py-2 px-3 leading-2",
     small: "py-2 px-2 text-[10px] leading-tight",

package/src/elements/UserFeedback.tsx

@@ -47,11 +47,11 @@ export const UserFeedback: FC<ComponentTypes> = ({
   return (
     <div
       ref={popUpRef}
-      className={clsx("fixed bottom-4", boxPosition[position])}
+      className={clsx("fixed bottom-4 ", boxPosition[position])}
     >
       <div
         className={clsx(
-          "relative flex w-full max-w-sm flex-col gap-2 rounded bg-white p-4 shadow-md transition-all",
+          "relative flex w-full max-w-sm flex-col gap-2 rounded border bg-background p-4 shadow-md transition-all",
           closed ? "opacity-0" : "opacity-100"
         )}
       >
@@ -96,7 +96,7 @@ export const UserFeedback: FC<ComponentTypes> = ({
                 "w-full cursor-pointer rounded border  p-4 text-center transition-all ",
                 clickedOption === op
                   ? "bg-gray-500 text-white"
-                  : "bg-white hover:bg-gray-100"
+                  : "border bg-background hover:bg-gray-300 dark:hover:bg-gray-700"
               )}
             >
               {op}

package/src/styles.css

@@ -400,6 +400,7 @@ video {
 
     --button-primary-300: 247 72% 61%;
     --button-primary-500: 247 82% 57%;
+    --button-primary-500-hsl: hsl(247, 82%, 57%);
     --button-primary-700: 247 71% 39%;
 
     --button-secondary-500: #ffc011;
@@ -422,8 +423,10 @@ video {
     --layout-primary-600: #2d2d2d;
     --layout-primary-700: #1d1d1d;
     --layout-primary-300: #4a4a4a;
+    /* --layout-primary-300: hsl(240, 8%, 10%); */
 
-    --background: 240 10% 3.9%;
+    /* --background: 240 10% 3.9%; //odd */
+    --background: 240 8% 10%;
 
     --foreground: 0 0% 98%;
     --card: 240 10% 3.9%;
@@ -452,10 +455,10 @@ video {
     margin-right: 0.25em;
     width: 0.75em;
     vertical-align: middle;
-    color: var(--button-primary-500);
+    color: var(--button-primary-500-hsl);
   }
   .link {
-    color: var(--button-primary-500);
+    color: var(--button-primary-500-hsl);
   }
   .link:hover {
     text-decoration: underline;
@@ -516,7 +519,7 @@ video {
     left: 11px;
     content: " ";
     display: block;
-    background: var(--button-primary-500);
+    background: var(--button-primary-500-hsl);
   }
   .radio-item-bordered input[type="radio"]:checked + label:after {
     border-radius: 100%;
@@ -527,7 +530,7 @@ video {
     left: 23px;
     content: " ";
     display: block;
-    background: var(--button-primary-500);
+    background: var(--button-primary-500-hsl);
   }
   * {
   border-color: hsl(var(--border));
@@ -2002,9 +2005,6 @@ video {
 .p-2\.5 {
   padding: 0.625rem;
 }
-.p-20 {
-  padding: 5rem;
-}
 .p-3 {
   padding: 0.75rem;
 }
@@ -2293,6 +2293,9 @@ video {
 .text-card-foreground {
   color: hsl(var(--card-foreground));
 }
+.text-foreground {
+  color: hsl(var(--foreground));
+}
 .text-gray-300 {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));
@@ -3095,6 +3098,10 @@ body {
   --tw-text-opacity: 1;
   color: rgb(30 64 175 / var(--tw-text-opacity));
 }
+:is(.dark .dark\:text-gray-100) {
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity));
+}
 :is(.dark .dark\:text-gray-200) {
   --tw-text-opacity: 1;
   color: rgb(229 231 235 / var(--tw-text-opacity));
@@ -3250,6 +3257,10 @@ body {
     gap: 2rem;
   }
 
+  .sm\:p-20 {
+    padding: 5rem;
+  }
+
   .sm\:text-2xl {
     font-size: 1.5rem;
     line-height: 2rem;