@visns-studio/visns-components 6.17.2 → 6.20.0

package/src/components/styles/GenericDynamic.module.scss

@@ -38,7 +38,7 @@
     padding: 5px;
     margin: 8px 0;
     height: auto;
-    box-shadow: 0 10px 50px rgba(var(--primary-rgb), 0.05);
+    box-shadow: 0 10px 50px rgba(var(--primary-rgb, 27, 57, 51), 0.05);
 }
 
 .grid__subnav > ul {
@@ -61,7 +61,7 @@
     box-sizing: border-box;
     display: block;
     text-decoration: none;
-    background: rgba(var(--primary-rgb), 0.05);
+    background: rgba(var(--primary-rgb, 27, 57, 51), 0.05);
     color: var(--primary-color);
     border-radius: 5px;
     transition: background 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
@@ -112,14 +112,14 @@
 
 .grid__subnav ul li ul li a:hover {
     background: var(--border-color);
-    color: var (--secondary-color);
+    color: var(--secondary-color, #3cbf7d);
 }
 
 .grid__subcontent {
     flex: 0 1 80%;
     background: var(--tertiary-color);
     border-radius: var(--br);
-    border: 1px solid rgba(var(--primary-rgb), 0.05);
+    border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.05);
     box-sizing: border-box;
     padding: 2px;
     margin: 8px 0;
@@ -137,7 +137,7 @@
 .gridtxt__header {
     width: 100%;
     display: block;
-    background: rgba(var(--primary-rgb), 0.05);
+    background: rgba(var(--primary-rgb, 27, 57, 51), 0.05);
     box-sizing: border-box;
     padding: 10px 20px;
     border-radius: var(--br);
@@ -167,9 +167,9 @@
     flex: 0 0 calc(50% - 10px);
     padding: 0.85rem;
     box-sizing: border-box;
-    border: 1px solid rgba(var(--primary-rgb), 0.095);
+    border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.095);
     color: var(--paragraph-color);
-    background: rgba(var(--primary-rgb), 0.015);
+    background: rgba(var(--primary-rgb, 27, 57, 51), 0.015);
     margin: 5px;
     border-radius: var(--br);
     line-height: 1.45;
@@ -214,7 +214,7 @@
         left: 0;
         padding: 19px 13px;
         border-radius: var(--radius);
-        border: 1px solid rgba(var(--paragraph-rgb), 0.15);
+        border: 1px solid rgba(var(--paragraph-rgb, 43, 43, 43), 0.15);
         box-shadow: none;
     }
 
@@ -268,7 +268,7 @@
     ):not(.inovua-react-toolkit-combo-box__input):not(
         .inovua-react-toolkit-date-input__input
     ):not(.inovua-react-toolkit-numeric-input__input):hover {
-    border: 1px solid rgba(var(--highlight-color-rgb), 0.85);
+    border: 1px solid rgba(var(--highlight-color-rgb, 60, 191, 125), 0.85);
     transition: border 0.15s linear;
 }
 
@@ -280,7 +280,7 @@
     ):not(.inovua-react-toolkit-combo-box__input):not(
         .inovua-react-toolkit-date-input__input
     ):not(.inovua-react-toolkit-numeric-input__input):focus {
-    border: 1px solid rgba(var(--highlight-color-rgb), 0.85);
+    border: 1px solid rgba(var(--highlight-color-rgb, 60, 191, 125), 0.85);
 }
 
 .formItem textarea {
@@ -289,7 +289,7 @@
 
 input[type='file'] {
     background: var(--item-color) !important;
-    border-radius: var (--br) !important;
+    border-radius: var(--br, 6px) !important;
     border: 1px solid transparent !important;
     padding: 0.8rem !important;
     outline: none !important;
@@ -440,22 +440,22 @@ select:not(:placeholder-shown) + .fi__span {
 // DatePicker positioning removed - handled by global.css
 
 .react-datepicker__close-icon:after {
-    background-color: rgba(var(--primary-rgb), 0.45) !important;
+    background-color: rgba(var(--primary-rgb, 27, 57, 51), 0.45) !important;
     font-size: 13px !important;
 }
 
 .react-datepicker__close-icon:hover:after {
-    background-color: rgba(var(--primary-rgb), 1) !important;
+    background-color: rgba(var(--primary-rgb, 27, 57, 51), 1) !important;
 }
 
 .formbreak {
     display: block;
     width: 100%;
     padding: 1em;
-    background: rgba(var(--primary-rgb), 0.95);
+    background: rgba(var(--primary-rgb, 27, 57, 51), 0.95);
     border-radius: 3px;
     box-sizing: border-box;
-    border: 2px solid rgba(var(--primary-rgb), 1.1);
+    border: 2px solid rgba(var(--primary-rgb, 27, 57, 51), 1);
 }
 
 .formbreak span {
@@ -495,7 +495,7 @@ select:not(:placeholder-shown) + .fi__span {
 .dropzone__files li {
     width: 100%;
     display: block;
-    background: rgba(var(--tertiary-color-rgb), 1.05);
+    background: rgba(var(--tertiary-color-rgb, 255, 255, 255), 1);
     color: var(--primary-color);
     border-radius: 3px;
     transition: background 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
@@ -509,14 +509,14 @@ select:not(:placeholder-shown) + .fi__span {
 }
 
 .dropzone__files li:hover {
-    background: rgba(var(--secondary-color-rgb), 0.65);
+    background: rgba(var(--secondary-color-rgb, 60, 191, 125), 0.65);
 }
 
 .dropzone__files li i {
     position: relative;
     top: 0;
     right: 5px;
-    color: rgba(var(--secondary-color-rgb), 1.15);
+    color: rgba(var(--secondary-color-rgb, 60, 191, 125), 1);
 }
 
 .dropzone__files li button {
@@ -621,7 +621,7 @@ select:not(:placeholder-shown) + .fi__span {
 }
 
 .contentTable tbody tr:nth-of-type(even) {
-    background: rgba(var(--item-color-rgb), 1.02);
+    background: rgba(var(--item-color-rgb, 255, 255, 255), 1);
 }
 
 .gridHeaders th {
@@ -629,7 +629,7 @@ select:not(:placeholder-shown) + .fi__span {
     color: var(--secondary-color);
     font-weight: 700;
     font-size: 0.95em;
-    border-right: 2px solid rgba(var(--primary-rgb), 0.9);
+    border-right: 2px solid rgba(var(--primary-rgb, 27, 57, 51), 0.9);
     position: relative;
     background-clip: padding-box;
 }
@@ -652,7 +652,7 @@ select:not(:placeholder-shown) + .fi__span {
 }
 
 .gridHeaders th button > svg {
-    color: rgba(var(--highlight-color-rgb), 0.8);
+    color: rgba(var(--highlight-color-rgb, 60, 191, 125), 0.8);
 }
 
 .pagination {
@@ -715,8 +715,8 @@ select:not(:placeholder-shown) + .fi__span {
     align-items: center;
     flex-wrap: wrap;
     border-radius: 5px;
-    border: 1px solid rgba(var(--primary-rgb), 0.2);
-    box-shadow: 0px 0px 20px rgba(var(--primary-rgb), 0.1);
+    border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.2);
+    box-shadow: 0px 0px 20px rgba(var(--primary-rgb, 27, 57, 51), 0.1);
     padding: 1.25rem 1.25rem 1.25rem 2rem;
     box-sizing: border-box;
     cursor: pointer;
@@ -757,8 +757,8 @@ select:not(:placeholder-shown) + .fi__span {
     align-items: center;
     flex-wrap: wrap;
     border-radius: 5px;
-    border: 1px solid rgba(var(--primary-rgb), 0.2);
-    box-shadow: 0px 0px 30px rgba(var(--primary-rgb), 0.25);
+    border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.2);
+    box-shadow: 0px 0px 30px rgba(var(--primary-rgb, 27, 57, 51), 0.25);
     padding: 1.25rem 1.25rem 1.25rem 2rem;
     box-sizing: border-box;
     cursor: grab;

package/src/components/styles/GenericEditableTable.module.scss

@@ -12,7 +12,7 @@
     td {
         padding: 0.4rem 0.5rem; // Increased padding for better readability
         text-align: left;
-        border: 1px solid rgba(var(--primary-rgb), 0.1);
+        border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.1);
         line-height: 1.3; // Increased line height for better readability
         vertical-align: middle; // Ensure vertical alignment
         height: 40px; // Increased row height
@@ -28,7 +28,7 @@
         font-size: 0.9rem !important;
         height: 32px !important;
         line-height: 1.2 !important;
-        border: 1px solid rgba(var(--primary-rgb), 0.1) !important;
+        border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.1) !important;
         box-sizing: border-box !important;
         border-radius: 4px !important;
         width: 100% !important;
@@ -61,11 +61,11 @@
     }
 
     td {
-        background-color: rgba(var(--primary-rgb), 0.05);
+        background-color: rgba(var(--primary-rgb, 27, 57, 51), 0.05);
         
         /* Ensure action column cells don't inherit row background */
         &:has(.tdactions) {
-            background: rgba(var(--primary-rgb), 0.05) !important;
+            background: rgba(var(--primary-rgb, 27, 57, 51), 0.05) !important;
         }
     }
 
@@ -77,7 +77,7 @@
         font-size: 0.9rem !important; // Larger font size for readability
         height: 32px !important; // Increased height
         line-height: 1.2 !important;
-        border: 1px solid rgba(var(--primary-rgb), 0.1) !important;
+        border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.1) !important;
         box-sizing: border-box !important;
         border-radius: 4px !important; // Larger border radius
         width: 100% !important;
@@ -119,7 +119,7 @@
 }
 
 .categoryRow {
-    background-color: rgba(var(--primary-rgb), 0.15);
+    background-color: rgba(var(--primary-rgb, 27, 57, 51), 0.15);
     font-size: 0.9rem; // Further reduced font size
     font-weight: bold;
     text-align: left;
@@ -129,7 +129,7 @@
 }
 
 .totalRow {
-    background-color: rgba(var(--primary-rgb), 0.05);
+    background-color: rgba(var(--primary-rgb, 27, 57, 51), 0.05);
     font-weight: bold;
     text-align: right;
 }
@@ -165,7 +165,7 @@
     &__header {
         width: 100%;
         display: block;
-        background: rgba(var(--primary-rgb), 0.05);
+        background: rgba(var(--primary-rgb, 27, 57, 51), 0.05);
         box-sizing: border-box;
         padding: 10px 20px;
         border-radius: var(--br);
@@ -191,9 +191,9 @@
         li {
             flex: 0 0 calc(50% - 10px);
             padding: 0.65rem;
-            border: 1px solid rgba(var(--primary-rgb), 0.095);
+            border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.095);
             color: var(--paragraph-color);
-            background: rgba(var(--primary-rgb), 0.015);
+            background: rgba(var(--primary-rgb, 27, 57, 51), 0.015);
             margin: 3px;
             border-radius: var(--br);
             line-height: 1.45;
@@ -223,7 +223,7 @@
     text-decoration: none;
     overflow: hidden;
     background: var(--primary-color);
-    border: 1px solid rgba(var(--primary-color--rgb), 1.1);
+    border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 1);
     border-radius: 4px; /* Larger border radius */
     outline: none;
     transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
@@ -236,7 +236,7 @@
     &:hover {
         color: var(--primary-color);
         background: var(--highlight-color);
-        border: 1px solid rgba(var(--highlight-rgb), 1.05);
+        border: 1px solid rgba(var(--highlight-rgb, 60, 191, 125), 1);
     }
 }
 
@@ -299,7 +299,7 @@
     padding: 2rem;
     margin: 2rem auto;
     background-color: var(--secondary-bg-color, #f8f8f8);
-    border: 1px solid rgba(var(--primary-rgb), 0.15);
+    border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.15);
     border-radius: 6px;
     max-width: 80%;
     box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
@@ -308,12 +308,12 @@
 }
 
 .noDataMessage:hover {
-    background-color: rgba(var(--primary-rgb), 0.05);
-    border-color: rgba(var(--primary-rgb), 0.2);
+    background-color: rgba(var(--primary-rgb, 27, 57, 51), 0.05);
+    border-color: rgba(var(--primary-rgb, 27, 57, 51), 0.2);
 }
 
 .subtotalRow {
-    background-color: rgba(var(--secondary-rgb), 0.15);
+    background-color: rgba(var(--secondary-rgb, 60, 191, 125), 0.15);
     font-weight: bold;
     text-align: right;
     padding: 0.3em; // Further reduced padding
@@ -470,12 +470,12 @@
     .clearButton {
         width: 100%; /* Make button span the entire width */
         background: rgba(
-            var(--primary-rgb),
+            var(--primary-rgb, 27, 57, 51),
             0.1
         ); /* Soft transparent background */
         color: var(--primary-color);
         border: none;
-        border-top: 1px solid rgba(var(--primary-rgb), 0.2); /* Subtle separator */
+        border-top: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.2); /* Subtle separator */
         border-radius: 0 0 8px 8px; /* Match colour picker's bottom corners */
         font-size: 13px;
         padding: 8px;
@@ -486,11 +486,11 @@
         box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.05);
 
         &:hover {
-            background: rgba(var(--primary-rgb), 0.15);
+            background: rgba(var(--primary-rgb, 27, 57, 51), 0.15);
         }
 
         &:active {
-            background: rgba(var(--primary-rgb), 0.25);
+            background: rgba(var(--primary-rgb, 27, 57, 51), 0.25);
             box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
         }
     }
@@ -501,13 +501,13 @@
     min-height: 18px; // Match native input height exactly
     padding: 0;
     font-size: 0.7rem; // Match native input font size
-    border: 1px solid rgba(var(--primary-rgb), 0.1);
+    border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.1);
     box-sizing: border-box;
     border-radius: 2px;
     background: white;
     
     &:hover {
-        border-color: rgba(var(--primary-rgb), 0.2);
+        border-color: rgba(var(--primary-rgb, 27, 57, 51), 0.2);
     }
     
     &--is-focused {
@@ -572,12 +572,12 @@
         min-height: 18px; // Match native input height
         height: 18px;
         font-size: 0.7rem; // Match native input font size
-        border: 1px solid rgba(var(--primary-rgb), 0.1);
+        border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.1);
         border-radius: 2px;
         background: white;
         
         &:hover {
-            border-color: rgba(var(--primary-rgb), 0.2);
+            border-color: rgba(var(--primary-rgb, 27, 57, 51), 0.2);
         }
         
         &--is-focused {
@@ -640,11 +640,11 @@
 
 .newRow {
     background-color: rgba(
-        var(--primary-rgb),
+        var(--primary-rgb, 27, 57, 51),
         0.15
     ); /* Slightly lighter background */
-    border-top: 1px dashed rgba(var(--primary-rgb), 0.3);
-    border-bottom: 1px dashed rgba(var(--primary-rgb), 0.3);
+    border-top: 1px dashed rgba(var(--primary-rgb, 27, 57, 51), 0.3);
+    border-bottom: 1px dashed rgba(var(--primary-rgb, 27, 57, 51), 0.3);
     
     /* Updated styling for new row inputs and selects */
     input,
@@ -656,7 +656,7 @@
         background: white !important;
         margin: 0 !important;
         line-height: 1.2 !important;
-        border: 1px solid rgba(var(--primary-rgb), 0.1) !important;
+        border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.1) !important;
         box-sizing: border-box !important;
         border-radius: 4px !important;
         width: 100% !important;
@@ -810,8 +810,8 @@
     gap: 1rem;
     margin-bottom: 1rem;
     padding: 0.5rem 1rem;
-    background: rgba(var(--primary-rgb), 0.05);
-    border: 1px solid rgba(var(--primary-rgb), 0.15);
+    background: rgba(var(--primary-rgb, 27, 57, 51), 0.05);
+    border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.15);
     border-radius: var(--br);
 
     label {
@@ -823,7 +823,7 @@
     select {
         padding: 0.4rem 0.75rem;
         font-size: 0.9rem;
-        border: 1px solid rgba(var(--primary-rgb), 0.1);
+        border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.1);
         border-radius: var(--br);
         background: #fff;
         outline: none;
@@ -838,7 +838,7 @@
         color: var(--tertiary-color);
         text-decoration: none;
         background: var(--primary-color);
-        border: 1px solid rgba(var(--primary-color--rgb), 1.1);
+        border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 1);
         border-radius: var(--br);
         outline: none;
         cursor: pointer;
@@ -847,7 +847,7 @@
         &:hover {
             color: var(--primary-color);
             background: var(--highlight-color);
-            border: 1px solid rgba(var(--highlight-rgb), 1.05);
+            border: 1px solid rgba(var(--highlight-rgb, 60, 191, 125), 1);
         }
     }
 }