@optigrit/optigrit-ui 0.0.3 → 0.0.5

package/dist/{chunk-F6GWYCMR.js → chunk-CRWBYFRD.js}

@@ -128,7 +128,7 @@ function Popover(props) {
       /* @__PURE__ */ jsx(Show, { when: !!closeOnClickOutside, children: /* @__PURE__ */ jsx(
         "div",
         {
-          className: "fixed w-[100dvw] h-[100dvh] left-0 top-0 z-[1] bg-red-600/10",
+          className: "fixed w-[100dvw] h-[100dvh] left-0 top-0 z-[1]",
           style: { display: open ? "block" : "none" },
           onClick: handleClickOutside
         }
@@ -144,7 +144,7 @@ function Popover(props) {
             transition: "all 200ms",
             opacity: 0,
             scale: 0.8,
-            zIndex: 2,
+            zIndex: 9999,
             ...popoverProps.style
           },
           children

package/dist/components/index.js

@@ -6,7 +6,7 @@ import {
   ShowWithAnimation,
   Spinner,
   cn
-} from "../chunk-F6GWYCMR.js";
+} from "../chunk-CRWBYFRD.js";
 import "../chunk-MCQS3QNN.js";
 import {
   useKeyboardShortcuts
@@ -858,6 +858,9 @@ function Dialog(props) {
               sizeClasses2[size],
               className
             ),
+            containerProps: {
+              className: "w-full"
+            },
             children
           }
         )
@@ -945,7 +948,7 @@ function Drawer(props) {
         removeOnHide: true,
         containerProps: {
           style: { position: "fixed" },
-          className: `fixed inset-0 w-screen h-screen flex`
+          className: "fixed inset-0 w-screen h-screen flex z-[9999]"
         },
         animationDuration: 1.5 * animationDuration,
         animationStyle: {

package/dist/core/index.js

@@ -5,7 +5,7 @@ import {
   Show,
   ShowWithAnimation,
   Spinner
-} from "../chunk-F6GWYCMR.js";
+} from "../chunk-CRWBYFRD.js";
 import "../chunk-MCQS3QNN.js";
 import "../chunk-U65NGM6F.js";
 export {

package/index.css

@@ -29,7 +29,7 @@
         --warning: #f59e0b;
         --info: #3b82f6;
 
-        --border: #e5e7eb;
+        --border: #6f6f6f;
     }
 
     .dark {
@@ -47,7 +47,7 @@
         --warning: #fbbf24;
         --info: #60a5fa;
 
-        --border: #374151;
+        --border: #9f9f9f;
     }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optigrit/optigrit-ui",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "UI components library for optigrit apps",
   "license": "ISC",
   "author": "",

package/tailwind.preset.js

@@ -4,33 +4,52 @@ export default {
     extend: {
       colors: {
         primary: {
-          DEFAULT: 'var(--primary)',
-          secondary: 'var(--primary-secondary)',
+          ...generateShades('var(--primary)'),
+          secondary: generateShades('var(--primary-secondary)'),
         },
         bg: {
-          DEFAULT: 'var(--bg)',
-          secondary: 'var(--bg-secondary)',
+          ...generateShades('var(--bg)'),
+          secondary: generateShades('var(--bg-secondary)'),
         },
         text: {
-          DEFAULT: 'var(--text)',
-          secondary: 'var(--text-secondary)',
-        },
-        border: {
-          DEFAULT: 'var(--border)',
-        },
-        error: {
-          DEFAULT: 'var(--error)',
-        },
-        success: {
-          DEFAULT: 'var(--success)',
-        },
-        info: {
-          DEFAULT: 'var(--info)',
-        },
-        warning: {
-          DEFAULT: 'var(--warning)',
-        },
+          ...generateShades('var(--text)'),
+          secondary: generateShades('var(--text-secondary)'),
+        },
+        border: generateShades('var(--border)'),
+        error: generateShades('var(--error)'),
+        success: generateShades('var(--success)'),
+        info: generateShades('var(--info)'),
+        warning: generateShades('var(--warning)'),
       }
     }
   }
+}
+
+
+function generateShades(color) {
+  const shades = {
+    DEFAULT: '', 
+    100: '', 
+    200: '', 
+    300: '', 
+    400: '', 
+    500: '', 
+    600: '', 
+    700: '', 
+    800: '', 
+    900: ''
+  };
+
+  for(let shadeKey in shades) {
+    const ratio = shadeKey === 'DEFAULT' ? 100 : parseInt(shadeKey) / 10;
+    shades[shadeKey] = `
+      rgb(
+        from color-mix(
+          in srgb, ${color} ${ratio}%, var(--bg, white) ${100 - ratio}%
+        ) r g b / <alpha-value>
+      )
+    `;
+  }
+
+  return shades;
 }