funuicss 2.5.4 → 2.5.5

package/css/fun.css

@@ -71,6 +71,7 @@
   --text-color: #000000; /* Text color */
   --raiseThemes:#FFFFFF; /* Raised element color */
   --borderColor:#CCC; /* Border color */
+  --lighter: #fafafa ;
 
 
     /* Primary Colors */
@@ -180,33 +181,6 @@
   --info800: #075985;
   --info900: #0c4a6e;
 
-  /* Light Colors */
-  --light: #f5f5f4;
-  --light50: #fafaf9;
-  --light100: #f5f5f4;
-  --light200: #e7e5e4;
-  --light300: #d6d3d1;
-  --light400: #a8a29e;
-  --light500: #78716c;
-  --light600: #57534e;
-  --light700: #44403c;
-  --light800: #292524;
-  --light900: #1c1917;
-
-    /* Gray Colors */
-    --gray: #71717a;
-    --gray50: #fafafa;
-    --gray100: #f4f4f5;
-    --gray200: #e4e4e7;
-    --gray300: #d4d4d8;
-    --gray400: #a1a1aa;
-    --gray500: #71717a;
-    --gray600: #52525b;
-    --gray700: #3f3f46;
-    --gray800: #27272a;
-    --gray900: #18181b;
-
-
   /* Dark Colors */
   --dark: #71717a;
   --dark50: #18181b;
@@ -238,9 +212,8 @@
   --dangerLight:#fdeded;
   --info: #5fbbe2;
   --infoLight:#e5f6fd;
-  --light: #ecf5f8;
+  --light: var(--lighter);
   --deepLight: #2fa2b1;
-  --lighter:#FAFAFA;
   --gradient:linear-gradient(90deg, var(--secondary) 0%, var(--primary) 100%);
   --gradientColors:90deg, var(--secondary) 0%, var(--primary) 100%;
   --linkColor:rgb(124, 124, 124);
@@ -346,6 +319,11 @@ link:hover {
 }
 
 /* Background Color */
+.pop{
+  background: var(--lighter) !important;
+}
+
+
 .gradient,
 .hover-gradient:hover {
   background: var(--gradient) !important;
@@ -1122,95 +1100,6 @@ link:hover {
   stroke: var(--info900);
 }
 
-/* Light Color */
-.light,
-.hover-light:hover {
-  background-color: var(--light) !important;
-  color: var(--white);
-  stroke: var(--light);
-}
-
-/* Light 50 */
-.light50,
-.hover-light50:hover {
-  background-color: var(--light50) !important;
-  color: var(--white);
-  stroke: var(--light50);
-}
-
-/* Light 100 */
-.light100,
-.hover-light100:hover {
-  background-color: var(--light100) !important;
-  color: var(--white);
-  stroke: var(--light100);
-}
-
-/* Light 200 */
-.light200,
-.hover-light200:hover {
-  background-color: var(--light200) !important;
-  color: var(--white);
-  stroke: var(--light200);
-}
-
-/* Light 300 */
-.light300,
-.hover-light300:hover {
-  background-color: var(--light300) !important;
-  color: var(--white);
-  stroke: var(--light300);
-}
-
-/* Light 400 */
-.light400,
-.hover-light400:hover {
-  background-color: var(--light400) !important;
-  color: var(--white);
-  stroke: var(--light400);
-}
-
-/* Light 500 */
-.light500,
-.hover-light500:hover {
-  background-color: var(--light500) !important;
-  color: var(--white);
-  stroke: var(--light500);
-}
-
-/* Light 600 */
-.light600,
-.hover-light600:hover {
-  background-color: var(--light600) !important;
-  color: var(--white);
-  stroke: var(--light600);
-}
-
-/* Light 700 */
-.light700,
-.hover-light700:hover {
-  background-color: var(--light700) !important;
-  color: var(--white);
-  stroke: var(--light700);
-}
-
-/* Light 800 */
-.light800,
-.hover-light800:hover {
-  background-color: var(--light800) !important;
-  color: var(--white);
-  stroke: var(--light800);
-}
-
-/* Light 900 */
-.light900,
-.hover-light900:hover {
-  background-color: var(--light900) !important;
-  color: var(--white);
-  stroke: var(--light900);
-}
-
-
 /* Dark Colors */
 .dark,
 .hover-dark:hover {
@@ -1250,41 +1139,35 @@ link:hover {
 .dark400,
 .hover-dark400:hover {
   background-color: var(--dark400) !important;
-  color: var(--white);
   stroke: var(--dark400);
 }
 
 .dark500,
 .hover-dark500:hover {
   background-color: var(--dark500) !important;
-  color: var(--white);
   stroke: var(--dark500);
 }
 
 .dark600,
 .hover-dark600:hover {
   background-color: var(--dark600) !important;
-  color: var(--white);
   stroke: var(--dark600);
 }
 
 .dark700,
 .hover-dark700:hover {
   background-color: var(--dark700) !important;
-  color: var(--white);
   stroke: var(--dark700);
 }
 .dark800,
 .hover-dark800:hover {
   background-color: var(--dark800) !important;
-  color: var(--white);
   stroke: var(--dark800);
 }
 
 .dark900,
 .hover-dark900:hover {
   background-color: var(--dark900) !important;
-  color: var(--white);
   stroke: var(--dark900);
 }
 
@@ -1348,6 +1231,313 @@ link:hover {
   border: 1px solid var(--dangerLight) !important;
 }
 
+
+/* outlined */
+.outline-primary {
+  border: 1px solid var(--primary) !important;
+}
+.outline-primary50 {
+  border: 1px solid var(--primary50) !important;
+}
+.outline-primary100 {
+  border: 1px solid var(--primary100) !important;
+}
+.outline-primary200 {
+  border: 1px solid var(--primary200) !important;
+}
+.outline-primary300 {
+  border: 1px solid var(--primary300) !important;
+}
+.outline-primary400 {
+  border: 1px solid var(--primary400) !important;
+}
+.outline-primary500 {
+  border: 1px solid var(--primary500) !important;
+}
+.outline-primary600 {
+  border: 1px solid var(--primary600) !important;
+}
+.outline-primary700 {
+  border: 1px solid var(--primary700) !important;
+}
+.outline-primary800 {
+  border: 1px solid var(--primary800) !important;
+}
+.outline-primary900 {
+  border: 1px solid var(--primary900) !important;
+}
+.outline-secondary {
+  border: 1px solid var(--secondary) !important;
+}
+.outline-secondary50 {
+  border: 1px solid var(--secondary50) !important;
+}
+.outline-secondary100 {
+  border: 1px solid var(--secondary100) !important;
+}
+.outline-secondary200 {
+  border: 1px solid var(--secondary200) !important;
+}
+.outline-secondary300 {
+  border: 1px solid var(--secondary300) !important;
+}
+.outline-secondary400 {
+  border: 1px solid var(--secondary400) !important;
+}
+.outline-secondary500 {
+  border: 1px solid var(--secondary500) !important;
+}
+.outline-secondary600 {
+  border: 1px solid var(--secondary600) !important;
+}
+.outline-secondary700 {
+  border: 1px solid var(--secondary700) !important;
+}
+.outline-secondary800 {
+  border: 1px solid var(--secondary800) !important;
+}
+.outline-secondary900 {
+  border: 1px solid var(--secondary900) !important;
+}
+
+.outline-accent {
+  border: 1px solid var(--accent) !important;
+}
+.outline-accent50 {
+  border: 1px solid var(--accent50) !important;
+}
+.outline-accent100 {
+  border: 1px solid var(--accent100) !important;
+}
+.outline-accent200 {
+  border: 1px solid var(--accent200) !important;
+}
+.outline-accent300 {
+  border: 1px solid var(--accent300) !important;
+}
+.outline-accent400 {
+  border: 1px solid var(--accent400) !important;
+}
+.outline-accent500 {
+  border: 1px solid var(--accent500) !important;
+}
+.outline-accent600 {
+  border: 1px solid var(--accent600) !important;
+}
+.outline-accent700 {
+  border: 1px solid var(--accent700) !important;
+}
+.outline-accent800 {
+  border: 1px solid var(--accent800) !important;
+}
+.outline-accent900 {
+  border: 1px solid var(--accent900) !important;
+}
+.outline-dark {
+  border: 1px solid var(--dark) !important;
+}
+.outline-dark50 {
+  border: 1px solid var(--dark50) !important;
+}
+.outline-dark100 {
+  border: 1px solid var(--dark100) !important;
+}
+.outline-dark200 {
+  border: 1px solid var(--dark200) !important;
+}
+.outline-dark300 {
+  border: 1px solid var(--dark300) !important;
+}
+.outline-dark400 {
+  border: 1px solid var(--dark400) !important;
+}
+.outline-dark500 {
+  border: 1px solid var(--dark500) !important;
+}
+.outline-dark600 {
+  border: 1px solid var(--dark600) !important;
+}
+.outline-dark700 {
+  border: 1px solid var(--dark700) !important;
+}
+.outline-dark800 {
+  border: 1px solid var(--dark800) !important;
+}
+.outline-dark900 {
+  border: 1px solid var(--dark900) !important;
+}
+
+.outline-muted {
+  border: 1px solid var(--muted) !important;
+}
+.outline-muted50 {
+  border: 1px solid var(--muted50) !important;
+}
+.outline-muted100 {
+  border: 1px solid var(--muted100) !important;
+}
+.outline-muted200 {
+  border: 1px solid var(--muted200) !important;
+}
+.outline-muted300 {
+  border: 1px solid var(--muted300) !important;
+}
+.outline-muted400 {
+  border: 1px solid var(--muted400) !important;
+}
+.outline-muted500 {
+  border: 1px solid var(--muted500) !important;
+}
+.outline-muted600 {
+  border: 1px solid var(--muted600) !important;
+}
+.outline-muted700 {
+  border: 1px solid var(--muted700) !important;
+}
+.outline-muted800 {
+  border: 1px solid var(--muted800) !important;
+}
+.outline-muted900 {
+  border: 1px solid var(--muted900) !important;
+}
+
+.outline-error {
+  border: 1px solid var(--error) !important;
+}
+.outline-error50 {
+  border: 1px solid var(--error50) !important;
+}
+.outline-error100 {
+  border: 1px solid var(--error100) !important;
+}
+.outline-error200 {
+  border: 1px solid var(--error200) !important;
+}
+.outline-error300 {
+  border: 1px solid var(--error300) !important;
+}
+.outline-error400 {
+  border: 1px solid var(--error400) !important;
+}
+.outline-error500 {
+  border: 1px solid var(--error500) !important;
+}
+.outline-error600 {
+  border: 1px solid var(--error600) !important;
+}
+.outline-error700 {
+  border: 1px solid var(--error700) !important;
+}
+.outline-error800 {
+  border: 1px solid var(--error800) !important;
+}
+.outline-error900 {
+  border: 1px solid var(--error900) !important;
+}
+
+.outline-success {
+  border: 1px solid var(--success) !important;
+}
+.outline-success50 {
+  border: 1px solid var(--success50) !important;
+}
+.outline-success100 {
+  border: 1px solid var(--success100) !important;
+}
+.outline-success200 {
+  border: 1px solid var(--success200) !important;
+}
+.outline-success300 {
+  border: 1px solid var(--success300) !important;
+}
+.outline-success400 {
+  border: 1px solid var(--success400) !important;
+}
+.outline-success500 {
+  border: 1px solid var(--success500) !important;
+}
+.outline-success600 {
+  border: 1px solid var(--success600) !important;
+}
+.outline-success700 {
+  border: 1px solid var(--success700) !important;
+}
+.outline-success800 {
+  border: 1px solid var(--success800) !important;
+}
+.outline-success900 {
+  border: 1px solid var(--success900) !important;
+}
+
+.outline-warning {
+  border: 1px solid var(--warning) !important;
+}
+.outline-warning50 {
+  border: 1px solid var(--warning50) !important;
+}
+.outline-warning100 {
+  border: 1px solid var(--warning100) !important;
+}
+.outline-warning200 {
+  border: 1px solid var(--warning200) !important;
+}
+.outline-warning300 {
+  border: 1px solid var(--warning300) !important;
+}
+.outline-warning400 {
+  border: 1px solid var(--warning400) !important;
+}
+.outline-warning500 {
+  border: 1px solid var(--warning500) !important;
+}
+.outline-warning600 {
+  border: 1px solid var(--warning600) !important;
+}
+.outline-warning700 {
+  border: 1px solid var(--warning700) !important;
+}
+.outline-warning800 {
+  border: 1px solid var(--warning800) !important;
+}
+.outline-warning900 {
+  border: 1px solid var(--warning900) !important;
+}
+
+.outline-info {
+  border: 1px solid var(--info) !important;
+}
+.outline-info50 {
+  border: 1px solid var(--info50) !important;
+}
+.outline-info100 {
+  border: 1px solid var(--info100) !important;
+}
+.outline-info200 {
+  border: 1px solid var(--info200) !important;
+}
+.outline-info300 {
+  border: 1px solid var(--info300) !important;
+}
+.outline-info400 {
+  border: 1px solid var(--info400) !important;
+}
+.outline-info500 {
+  border: 1px solid var(--info500) !important;
+}
+.outline-info600 {
+  border: 1px solid var(--info600) !important;
+}
+.outline-info700 {
+  border: 1px solid var(--info700) !important;
+}
+.outline-info800 {
+  border: 1px solid var(--info800) !important;
+}
+.outline-info900 {
+  border: 1px solid var(--info900) !important;
+}
+
+
 /* text color */
 .text-primary,
 .hover-text-primary:hover {
@@ -2917,6 +3107,7 @@ h6, .h6 {
   width: fit-content;
   height: fit-content;
   min-height: 2rem; 
+  font-weight: 500;
 
 }
 .alert.top-success{
@@ -2931,7 +3122,7 @@ h6, .h6 {
   border-top: 0.2rem solid var(--info);
   background-color: var(--raiseThemes);
 }
-.alert.top-danger{
+.alert.top-error{
   border-top: 0.2rem solid var(--error);
   background-color: var(--raiseThemes);
 }
@@ -3167,6 +3358,7 @@ h6, .h6 {
   border-bottom: var(--inputBorder) solid  var(--borderColor);
   color: var(--bd-color); 
   font-size: var(--minifiedFontSize);
+  background-color: transparent;
 }
 .smallInput {
   font-size: var(--smallFont);
@@ -3530,7 +3722,7 @@ thead{
   border-top: 0.1rem solid var(--borderColor);
 } */
 .table.stripped tr:nth-child(even) {
-  background-color: var(--dark800); 
+  background-color: var(--lighter); 
 }
 .table tr,
 th,
@@ -3545,13 +3737,10 @@ th {
 .table.hoverableTr  tr:hover {
   filter: var(--hoverable);
 }
-.table.light {
-  background-color: var(--light);
-  color: var(--lightThemeDark);
-}
+
 .table.dark {
-  background-color: var(--lightThemeDark);
-  color: var(--light);
+  background-color: var(--dark);
+  color: var(--white);
 }
 
 .pagination{

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.5.4",
+  "version": "2.5.5",
   "name": "funuicss",
   "description": "React and Next.js component UI Library for creating Easy and good looking websites with fewer lines of code. Elevate your web development experience with our cutting-edge React/Next.js component UI Library. Craft stunning websites effortlessly, boasting both seamless functionality and aesthetic appeal—all achieved with minimal lines of code. Unleash the power of simplicity and style in your projects!",
   "main": "index.js",
@@ -36,7 +36,8 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "tsc",
-    "prepublishOnly": "tsc"
+    "prepublishOnly": "tsc",
+   "publish": "npm publish && git add . && git commit -m \"update\" && git push origin main"
   },
   "author": "FunInc",
   "license": "MIT",