@sikka/hawa 0.0.153 → 0.0.154

package/package.json

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

package/src/layout/HawaAppLayout.tsx

@@ -65,11 +65,11 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
   //less than 600
   //as nothing and expands as button is clicked
   return (
-    <div className="fixed left-0 h-full bg-green-400">
+    <div className="fixed left-0 h-full">
       {props.topBar && (
         <div
           className={clsx(
-            "fixed top-0 z-40 flex h-14 flex-row items-center justify-between bg-secondary-default",
+            "fixed top-0 z-40 flex h-14 flex-row items-center justify-between bg-layoutPrimary-default",
             // size > 600 ? "w-[calc(100%-3rem)] translate-x-[3rem]" : "w-full",
             "w-full",
             "p-2"
@@ -130,7 +130,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = (
         }
         ref={ref}
         className={clsx(
-          "fixed top-0 left-0 z-50 flex h-full flex-col justify-between overflow-x-clip bg-secondary-default transition-all  hover:overflow-auto",
+          "fixed top-0 left-0 z-50 flex h-full flex-col justify-between overflow-x-clip bg-layoutPrimary-default transition-all  hover:overflow-auto",
           size > 600 ? "w-14 hover:w-40" : "w-0",
           openSideMenu ? "w-40" : "w-14"
         )}

package/src/styles.css

@@ -374,6 +374,13 @@ video {
 [hidden] {
   display: none;
 }
+  :root {
+    --layout-primary: #d2cdfa;
+    --layout-secondary: #d2cdfa;
+    --button-primary: #4c37eb;
+    --button-primary-darker: #cf1736;
+    --button-secondary: #d2cdfa;
+  }
   input[type="number"]::-webkit-inner-spin-button,
   input[type="number"]::-webkit-outer-spin-button {
     -webkit-appearance: none;
@@ -1367,14 +1374,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }
-.bg-green-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(74 222 128 / var(--tw-bg-opacity));
-}
-.bg-secondary-default {
-  --tw-bg-opacity: 1;
-  background-color: rgb(163 208 57 / var(--tw-bg-opacity));
-}
 .bg-green-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(34 197 94 / var(--tw-bg-opacity));

package/src/tailwind.css

@@ -3,6 +3,13 @@
 @import "tailwindcss/utilities";
 @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-secondary: #d2cdfa;
+    --button-primary: #4c37eb;
+    --button-primary-darker: #cf1736;
+    --button-secondary: #d2cdfa;
+  }
   input[type="number"]::-webkit-inner-spin-button,
   input[type="number"]::-webkit-outer-spin-button {
     -webkit-appearance: none;

package/storybook-static/iframe.html

@@ -361,4 +361,4 @@
           
       
           
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.4a2964ac.iframe.bundle.js"></script><script src="870.c002064e.iframe.bundle.js"></script><script src="main.d0705e30.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.4a2964ac.iframe.bundle.js"></script><script src="870.c002064e.iframe.bundle.js"></script><script src="main.edab0a1a.iframe.bundle.js"></script></body></html>