@sikka/hawa 0.0.145 → 0.0.146

package/src/styles.css

@@ -374,6 +374,10 @@ video {
 [hidden] {
   display: none;
 }
+  :root {
+    /* --color-text: #4c37eb; */
+    --color-text: #d8f021;
+  }
   input[type="number"]::-webkit-inner-spin-button,
   input[type="number"]::-webkit-outer-spin-button {
     -webkit-appearance: none;
@@ -586,12 +590,12 @@ video {
 .m-2 {
   margin: 0.5rem;
 }
-.m-1 {
-  margin: 0.25rem;
-}
 .m-0 {
   margin: 0px;
 }
+.m-1 {
+  margin: 0.25rem;
+}
 .mx-1 {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
@@ -674,11 +678,17 @@ video {
 .mr-4 {
   margin-right: 1rem;
 }
+.ml-14 {
+  margin-left: 3.5rem;
+}
+.ml-40 {
+  margin-left: 10rem;
+}
 .mb-9 {
   margin-bottom: 2.25rem;
 }
-.mt-14 {
-  margin-top: 3.5rem;
+.mt-\[3\.6rem\] {
+  margin-top: 3.6rem;
 }
 .mt-5 {
   margin-top: 1.25rem;
@@ -738,6 +748,9 @@ video {
   height: -moz-fit-content;
   height: fit-content;
 }
+.h-32 {
+  height: 8rem;
+}
 .h-full {
   height: 100%;
 }
@@ -768,9 +781,6 @@ video {
 .h-4 {
   height: 1rem;
 }
-.h-32 {
-  height: 8rem;
-}
 .h-0\.5 {
   height: 0.125rem;
 }
@@ -783,9 +793,6 @@ video {
 .h-\[1px\] {
   height: 1px;
 }
-.h-20 {
-  height: 5rem;
-}
 .h-96 {
   height: 24rem;
 }
@@ -854,24 +861,24 @@ video {
 .w-\[calc\(100\%-3rem\)\] {
   width: calc(100% - 3rem);
 }
-.w-12 {
-  width: 3rem;
-}
 .w-40 {
   width: 10rem;
 }
+.w-12 {
+  width: 3rem;
+}
 .w-10\/12 {
   width: 83.333333%;
 }
+.w-\[calc\(100\%-10rem\)\] {
+  width: calc(100% - 10rem);
+}
 .w-\[calc\(100\%-1rem\)\] {
   width: calc(100% - 1rem);
 }
 .w-80 {
   width: 20rem;
 }
-.w-20 {
-  width: 5rem;
-}
 .min-w-max {
   min-width: -moz-max-content;
   min-width: max-content;
@@ -924,6 +931,14 @@ video {
   --tw-translate-x: 3rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.translate-x-\[3\.54rem\] {
+  --tw-translate-x: 3.54rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.translate-x-\[10\.54rem\] {
+  --tw-translate-x: 10.54rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .-translate-y-\[1rem\] {
   --tw-translate-y: -1rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -977,9 +992,6 @@ video {
 .flex-wrap {
   flex-wrap: wrap;
 }
-.content-center {
-  align-content: center;
-}
 .items-start {
   align-items: flex-start;
 }
@@ -1063,6 +1075,9 @@ video {
 .justify-self-end {
   justify-self: end;
 }
+.overflow-auto {
+  overflow: auto;
+}
 .overflow-hidden {
   overflow: hidden;
 }
@@ -1162,6 +1177,9 @@ video {
 .border-2 {
   border-width: 2px;
 }
+.border-4 {
+  border-width: 4px;
+}
 .border-b-0 {
   border-bottom-width: 0px;
 }
@@ -1255,10 +1273,6 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(37 99 235 / var(--tw-border-opacity));
 }
-.border-primary-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(196 222 253 / var(--tw-border-opacity));
-}
 .border-t-white {
   --tw-border-opacity: 1;
   border-top-color: rgb(255 255 255 / var(--tw-border-opacity));
@@ -1271,9 +1285,9 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(17 24 39 / var(--tw-bg-opacity));
 }
-.bg-blue-300 {
+.bg-layoutPrimary-default {
   --tw-bg-opacity: 1;
-  background-color: rgb(147 197 253 / var(--tw-bg-opacity));
+  background-color: rgb(210 205 250 / var(--tw-bg-opacity));
 }
 .bg-white {
   --tw-bg-opacity: 1;
@@ -1302,17 +1316,9 @@ video {
 .bg-transparent {
   background-color: transparent;
 }
-.bg-gray-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
-}
-.bg-primary-default {
-  --tw-bg-opacity: 1;
-  background-color: rgb(18 121 248 / var(--tw-bg-opacity));
-}
-.bg-secondary-default {
+.bg-buttonPrimary-default {
   --tw-bg-opacity: 1;
-  background-color: rgb(163 208 57 / var(--tw-bg-opacity));
+  background-color: rgb(76 55 235 / var(--tw-bg-opacity));
 }
 .bg-red-200 {
   --tw-bg-opacity: 1;
@@ -1342,6 +1348,10 @@ 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-primary-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(61 147 249 / var(--tw-bg-opacity));
@@ -1350,6 +1360,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(107 114 128 / var(--tw-bg-opacity));
 }
+.bg-gray-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
+}
 .bg-blue-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
@@ -1370,26 +1384,22 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }
-.bg-green-500 {
+.bg-green-400 {
   --tw-bg-opacity: 1;
-  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
+  background-color: rgb(74 222 128 / var(--tw-bg-opacity));
 }
-.bg-primary-600 {
+.bg-green-500 {
   --tw-bg-opacity: 1;
-  background-color: rgb(6 92 198 / var(--tw-bg-opacity));
+  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
 }
-.bg-red-900 {
+.bg-gray-300 {
   --tw-bg-opacity: 1;
-  background-color: rgb(127 29 29 / var(--tw-bg-opacity));
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
 }
 .bg-yellow-300 {
   --tw-bg-opacity: 1;
   background-color: rgb(253 224 71 / var(--tw-bg-opacity));
 }
-.bg-primary-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(156 199 252 / var(--tw-bg-opacity));
-}
 .bg-opacity-75 {
   --tw-bg-opacity: 0.75;
 }
@@ -1710,6 +1720,11 @@ video {
   --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.shadow-neobrutalism {
+  --tw-shadow: 10px 10px 0px 0px rgba(0,0,0,1);;
+  --tw-shadow-colored: 10px 10px 0px 0px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .ring-1 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1842,9 +1857,9 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(209 213 219 / var(--tw-bg-opacity));
 }
-.hover\:bg-primary-700:hover {
+.hover\:bg-buttonPrimary-darker:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(6 92 198 / var(--tw-bg-opacity));
+  background-color: rgb(57 41 176 / var(--tw-bg-opacity));
 }
 .hover\:bg-secondary-700:hover {
   --tw-bg-opacity: 1;
@@ -1870,9 +1885,9 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }
-.hover\:bg-primary-500:hover {
+.hover\:bg-buttonPrimary-lighter:hover {
   --tw-bg-opacity: 1;
-  background-color: rgb(61 147 249 / var(--tw-bg-opacity));
+  background-color: rgb(237 235 253 / var(--tw-bg-opacity));
 }
 .hover\:text-gray-900:hover {
   --tw-text-opacity: 1;
@@ -1902,6 +1917,19 @@ body {
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.hover\:ring-1:hover {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+.hover\:ring-buttonPrimary-default:hover {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(76 55 235 / var(--tw-ring-opacity));
+}
+.hover\:brightness-90:hover {
+  --tw-brightness: brightness(.9);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .focus\:border-blue-500:focus {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity));
@@ -2017,10 +2045,6 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(187 247 208 / var(--tw-bg-opacity));
 }
-.dark .dark\:bg-primary-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(6 92 198 / var(--tw-bg-opacity));
-}
 .dark .dark\:bg-gray-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
@@ -2029,6 +2053,10 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(75 85 99 / var(--tw-bg-opacity));
 }
+.dark .dark\:bg-layoutPrimary-dark {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 27 115 / var(--tw-bg-opacity));
+}
 .dark .dark\:text-gray-300 {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));
@@ -2100,10 +2128,6 @@ body {
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }
-.dark .dark\:hover\:bg-primary-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(6 92 198 / var(--tw-bg-opacity));
-}
 .dark .dark\:hover\:bg-primary-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(6 92 198 / var(--tw-bg-opacity));
@@ -2116,6 +2140,10 @@ body {
   --tw-text-opacity: 1;
   color: rgb(59 130 246 / var(--tw-text-opacity));
 }
+.dark .dark\:hover\:brightness-90:hover {
+  --tw-brightness: brightness(.9);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .dark .dark\:focus\:border-blue-500:focus {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity));

package/src/tailwind.css

@@ -3,6 +3,10 @@
 @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 {
+    /* --color-text: #4c37eb; */
+    --color-text: #d8f021;
+  }
   input[type="number"]::-webkit-inner-spin-button,
   input[type="number"]::-webkit-outer-spin-button {
     -webkit-appearance: none;

package/src/util.ts

@@ -1,30 +1,143 @@
-const hexToRgb = (hex) => {
-  let d = hex?.split("#")[1];
-  var aRgbHex = d?.match(/.{1,2}/g);
-  var aRgb = [
-    parseInt(aRgbHex[0], 16),
-    parseInt(aRgbHex[1], 16),
-    parseInt(aRgbHex[2], 16)
-  ];
-  return aRgb;
-};
-const getTextColor = (backColor) => {
-  let rgbArray = hexToRgb(backColor);
-  if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {
-    return "#000000";
-  } else {
-    return "#ffffff";
+
+ type Palette = {
+  name: string
+  colors: {
+    [key: number]: string
+  }
+}
+type Rgb = {
+  r: number
+  g: number
+  b: number
+}
+function hexToRgb(hex: string): Rgb | null {
+  const sanitizedHex = hex.replaceAll("##", "#")
+  const colorParts = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(
+    sanitizedHex
+  )
+
+  if (!colorParts) {
+    return null
+  }
+
+  const [, r, g, b] = colorParts
+
+  return {
+    r: parseInt(r, 16),
+    g: parseInt(g, 16),
+    b: parseInt(b, 16),
+  } as Rgb
+}
+
+function rgbToHex(r: number, g: number, b: number): string {
+  const toHex = (c: number) => `0${c.toString(16)}`.slice(-2)
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`
+}
+
+ function getTextColor(color: string): "#FFF" | "#333" {
+  const rgbColor = hexToRgb(color)
+
+  if (!rgbColor) {
+    return "#333"
+  }
+
+  const { r, g, b } = rgbColor
+  const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b
+
+  return luma < 120 ? "#FFF" : "#333"
+}
+
+function lighten(hex: string, intensity: number): string {
+  const color = hexToRgb(`#${hex}`)
+
+  if (!color) {
+    return ""
   }
-};
-const replaceAt = function (string, index, replacement) {
-  // if (replacement == "" || replacement == " ") {
-  //   return (
-  //     string.substring(0, index) +
-  //     string.substring(index + replacement.length )
-  //   );
-  // }
-  const replaced = string.substring(0, index) + replacement + string.substring(index + 1)
-  return replaced
-};
-
-export { hexToRgb, getTextColor, replaceAt };
+
+  const r = Math.round(color.r + (255 - color.r) * intensity)
+  const g = Math.round(color.g + (255 - color.g) * intensity)
+  const b = Math.round(color.b + (255 - color.b) * intensity)
+
+  return rgbToHex(r, g, b)
+}
+
+function darken(hex: string, intensity: number): string {
+  const color = hexToRgb(hex)
+
+  if (!color) {
+    return ""
+  }
+
+  const r = Math.round(color.r * intensity)
+  const g = Math.round(color.g * intensity)
+  const b = Math.round(color.b * intensity)
+
+  return rgbToHex(r, g, b)
+}
+
+ function getPallette(baseColor: string): Palette {
+  const name = baseColor
+
+  const response: Palette = {
+    name,
+    colors: {
+      500: `#${baseColor}`.replace("##", "#"),
+    },
+  }
+
+  const intensityMap: {
+    [key: number]: number
+  } = {
+    50: 0.95,
+    100: 0.9,
+    200: 0.75,
+    300: 0.6,
+    400: 0.3,
+    600: 0.9,
+    700: 0.75,
+    800: 0.6,
+    900: 0.49,
+  }
+
+  ;[50, 100, 200, 300, 400].forEach((level) => {
+    response.colors[level] = lighten(baseColor, intensityMap[level])
+  })
+  ;[600, 700, 800, 900].forEach((level) => {
+    response.colors[level] = darken(baseColor, intensityMap[level])
+  })
+
+  return response as Palette
+}
+
+export { getPallette };
+
+// const hexToRgb = (hex) => {
+//   let d = hex?.split("#")[1];
+//   var aRgbHex = d?.match(/.{1,2}/g);
+//   var aRgb = [
+//     parseInt(aRgbHex[0], 16),
+//     parseInt(aRgbHex[1], 16),
+//     parseInt(aRgbHex[2], 16)
+//   ];
+//   return aRgb;
+// };
+// const getTextColor = (backColor) => {
+//   let rgbArray = hexToRgb(backColor);
+//   if (rgbArray[0] * 0.299 + rgbArray[1] * 0.587 + rgbArray[2] * 0.114 > 186) {
+//     return "#000000";
+//   } else {
+//     return "#ffffff";
+//   }
+// };
+// const replaceAt = function (string, index, replacement) {
+//   // if (replacement == "" || replacement == " ") {
+//   //   return (
+//   //     string.substring(0, index) +
+//   //     string.substring(index + replacement.length )
+//   //   );
+//   // }
+//   const replaced = string.substring(0, index) + replacement + string.substring(index + 1)
+//   return replaced
+// };
+
+// export { hexToRgb, getTextColor, replaceAt };