@optigrit/optigrit-ui 0.0.3 → 0.0.4

package/dist/components/index.js

@@ -858,6 +858,9 @@ function Dialog(props) {
               sizeClasses2[size],
               className
             ),
+            containerProps: {
+              className: "w-full"
+            },
             children
           }
         )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optigrit/optigrit-ui",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "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;
 }