@visns-studio/visns-components 6.17.2 → 6.20.1

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

@@ -388,6 +388,63 @@
     flex: none;
 }
 
+/* Secondary. Same footprint as the SSO button so the two stack cleanly, but
+   outlined rather than filled: Microsoft is how most of the company signs in,
+   and a passkey is something an individual chose to set up. Two filled
+   buttons in a row would leave neither of them leading. */
+.passkey {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.65rem;
+    width: 100%;
+    height: 3.4rem;
+    margin-top: 0.75rem;
+    border: 1px solid var(--line);
+    border-radius: 0.6rem;
+    background: transparent;
+    font-family: inherit;
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--navy);
+    cursor: pointer;
+    transition:
+        background 0.15s ease,
+        border-color 0.15s ease,
+        transform 0.08s ease;
+
+    &:hover:not(:disabled) {
+        border-color: var(--navy);
+        background: rgba(38, 54, 74, 0.05);
+    }
+
+    &:active:not(:disabled) {
+        transform: translateY(1px);
+    }
+
+    &:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+
+    &:focus-visible {
+        outline: 3px solid var(--focus-ring-strong, rgba(38, 54, 74, 0.3));
+        outline-offset: 2px;
+    }
+}
+
+/* No white tile here — the key is a line icon that takes the button's own
+   colour, unlike the Microsoft mark. */
+.passkeyMark {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.65rem;
+    height: 1.65rem;
+    flex: none;
+    color: inherit;
+}
+
 .foot {
     margin: 2.5rem 0 0;
     font-size: 0.78rem;

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

@@ -93,14 +93,14 @@
 
     // Control styles
     .visns-select__control {
-        min-height: 50px !important;
+        min-height: var(--field-height, 51px) !important;
         height: auto !important; /* Allow height to grow with content */
         overflow: visible !important;
     }
 
     // Value container styles
     .visns-select__value-container {
-        padding: 2px 8px !important;
+        padding: 0 1rem !important;
         flex-wrap: wrap !important;
         max-height: 100px !important; /* Set a max height */
         overflow-y: auto !important; /* Add scrolling when needed */
@@ -199,7 +199,7 @@
     // CSS class fixes for React Select
     .css-13cymwt-control,
     .css-t3ipsp-control {
-        min-height: 50px !important;
+        min-height: var(--field-height, 51px) !important;
         height: auto !important;
         overflow: visible !important;
     }
@@ -210,7 +210,7 @@
     }
 
     .css-1fdsijx-ValueContainer {
-        padding: 2px 8px !important;
+        padding: 0 1rem !important;
         flex-wrap: wrap !important;
         max-height: 100px !important;
         overflow-y: auto !important;

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

@@ -462,7 +462,7 @@
             &.active > a,
             &.active > span,
             &.active > button {
-                background: rgba(var(--primary-rgb), 0.1);
+                background: rgba(var(--primary-rgb, 27, 57, 51), 0.1);
                 color: var(--primary-color);
                 font-weight: var(--font-weight-semibold, 600);
             }
@@ -546,7 +546,7 @@
                     }
 
                     a.active {
-                        background: rgba(var(--primary-rgb), 0.1);
+                        background: rgba(var(--primary-rgb, 27, 57, 51), 0.1);
                         color: var(--primary-color);
                         font-weight: var(--font-weight-semibold, 600);
                     }
@@ -1000,7 +1000,7 @@
         /* Near-white by default (the rendering every project has today).
            A project whose page background is the same colour can merge the
            plate into the rail instead: `--nav-logo-bg: var(--nav-bg)`. */
-        background: var(--nav-logo-bg, rgba(var(--tertiary-color-rgb), 0.95));
+        background: var(--nav-logo-bg, rgba(var(--tertiary-color-rgb, 255, 255, 255), 0.95));
         height: var(--nav-logo-height, 50px);
         display: flex;
         flex-wrap: nowrap;
@@ -1070,7 +1070,7 @@
 
                     &:hover a,
                     &.active a {
-                        background: rgba(var(--tertiary-color-rgb), 0.05);
+                        background: rgba(var(--tertiary-color-rgb, 255, 255, 255), 0.05);
                         color: var(--secondary-color);
                     }
 
@@ -1081,7 +1081,7 @@
 
                     span {
                         display: block;
-                        color: rgba(var(--paragraph-rgb), 0.3);
+                        color: rgba(var(--paragraph-rgb, 43, 43, 43), 0.3);
                         box-sizing: border-box;
                         padding: 1.25em 0.85em;
                         line-height: 1.25;
@@ -1089,7 +1089,7 @@
                         background: var(--primary-color);
 
                         &:hover {
-                            background: rgba(var(--primary-rgb), 1.05);
+                            background: rgba(var(--primary-rgb, 27, 57, 51), 1);
                         }
                     }
 
@@ -1143,7 +1143,7 @@
                                 box-sizing: border-box;
                                 display: block;
                                 text-decoration: none;
-                                background: rgba(var(--primary-rgb), 0.92);
+                                background: rgba(var(--primary-rgb, 27, 57, 51), 0.92);
                                 color: var(--tertiary-color);
                                 border-radius: 3px;
                                 transition: all 0.25s
@@ -1152,7 +1152,7 @@
                             }
 
                             &:hover a {
-                                background: rgba(var(--secondary-rgb), 0.75);
+                                background: rgba(var(--secondary-rgb, 60, 191, 125), 0.75);
                                 color: var(--primary-color);
                             }
                         }
@@ -1218,7 +1218,7 @@
        is never painted underneath it. */
     z-index: 996;
     /* Reads as a footer to the list rather than one more entry in it. */
-    border-top: 1px solid rgba(var(--tertiary-color-rgb), 0.14);
+    border-top: 1px solid rgba(var(--tertiary-color-rgb, 255, 255, 255), 0.14);
     padding: var(--padding) 0;
 
     > ul {
@@ -1285,7 +1285,7 @@
         > li > div > a:hover,
         > li > div > button:hover,
         > li > a.active {
-            background: rgba(var(--tertiary-color-rgb), 0.05);
+            background: rgba(var(--tertiary-color-rgb, 255, 255, 255), 0.05);
             color: var(--secondary-color);
         }
 
@@ -1389,7 +1389,7 @@
     }
 
     .content-main {
-        background: rgba(var(--tertiary-color-rgb), 1.05);
+        background: rgba(var(--tertiary-color-rgb, 255, 255, 255), 1);
     }
 }
 
@@ -1740,7 +1740,7 @@
         align-items: center;
         width: 100%;
         padding: 0.25rem;
-        background: rgba(var(--primary-color), 0.15);
+        background: color-mix(in srgb, var(--primary-color, #1b3933) 15%, transparent);
         margin: 0;
         font-weight: bold;
         border-bottom: 1px solid var(--border-color);

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

@@ -47,8 +47,12 @@
     min-width: 16px;
     height: 16px;
     border-radius: 8px;
-    background-color: var(--secondary-color);
-    color: white;
+    /* No fallback here meant the declaration was discarded whenever the host
+       had not defined --secondary-color, while `color: white` below survived —
+       so the unread count rendered white-on-transparent over a white bar. The
+       badge is the ONLY unread signal in the notification UI. */
+    background-color: var(--secondary-color, #3cbf7d);
+    color: #fff;
     font-size: 10px;
     font-weight: 600;
     display: flex;
@@ -150,7 +154,7 @@
     width: 28px;
     height: 28px;
     border-radius: 50%;
-    background-color: rgba(var(--primary-color-rgb), 0.1);
+    background-color: rgba(var(--primary-color-rgb, 27, 57, 51), 0.1);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -229,7 +233,7 @@
 
 .notiTime {
     font-size: 12px;
-    color: rgba(var(--paragraph-color-rgb), 0.6);
+    color: rgba(var(--paragraph-color-rgb, 43, 43, 43), 0.6);
 }
 
 .notiDismiss {
@@ -277,7 +281,7 @@
     align-items: center;
     justify-content: center;
     padding: 32px 16px;
-    color: rgba(var(--paragraph-color-rgb), 0.6);
+    color: rgba(var(--paragraph-color-rgb, 43, 43, 43), 0.6);
 }
 
 .emptyIcon {
@@ -303,13 +307,13 @@
     align-items: center;
     justify-content: center;
     padding: 32px 16px;
-    color: rgba(var(--paragraph-color-rgb), 0.6);
+    color: rgba(var(--paragraph-color-rgb, 43, 43, 43), 0.6);
 }
 
 .loadingSpinner {
     width: 24px;
     height: 24px;
-    border: 2px solid rgba(var(--primary-color-rgb), 0.2);
+    border: 2px solid rgba(var(--primary-color-rgb, 27, 57, 51), 0.2);
     border-top-color: var(--primary-color);
     border-radius: 50%;
     margin-bottom: 12px;
@@ -494,7 +498,7 @@
         }
 
         &:hover {
-            background-color: rgba(var(--tertiary-color-rgb), 0.05);
+            background-color: rgba(var(--tertiary-color-rgb, 255, 255, 255), 0.05);
             color: var(--secondary-color);
         }
     }

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

@@ -24,9 +24,9 @@
 
 .grid__full {
     width: 100%;
-    background: var(--item-color);
-    border-radius: var(--br);
-    border: 1px solid rgba(var(--item-color-rgb), 1.15);
+    background: var(--item-color, #fff);
+    border-radius: var(--br, 12px);
+    border: 1px solid rgba(var(--item-color-rgb, 255, 255, 255), 1);
     box-sizing: border-box;
     overflow: visible;
     position: relative;
@@ -53,7 +53,7 @@
 }
 
 .titleIcon {
-    color: var(--primary-color);
+    color: var(--primary-color, #1b3933);
 }
 
 .titleSection h1 {
@@ -67,7 +67,7 @@
     display: flex;
     align-items: center;
     gap: 8px;
-    background-color: var(--primary-color);
+    background-color: var(--primary-color, #1b3933);
     color: white;
     border: none;
     border-radius: 6px;

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

@@ -53,13 +53,13 @@
     width: 100%;
     background: var(--item-color);
     border-radius: var(--br);
-    border: 1px solid rgba(var(--item-color-rgb), 1.15);
+    border: 1px solid rgba(var(--item-color-rgb, 255, 255, 255), 1);
     box-sizing: border-box;
     overflow: visible;
     position: relative;
     padding: 2px;
     margin: 8px 0;
-    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);
 }
 
 /* The rail/panel row.
@@ -866,7 +866,7 @@
     margin: 0;
     background: white;
     border-radius: var(--br);
-    border: 1px solid rgba(var(--primary-rgb), 0.15);
+    border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.15);
     position: relative;
     display: flex;
     align-items: center;
@@ -886,7 +886,7 @@
         }
 
         svg {
-            color: rgba(var(--primary-rgb), 0.5);
+            color: rgba(var(--primary-rgb, 27, 57, 51), 0.5);
             position: relative;
             top: 2px;
             margin: 0 0.25rem;
@@ -899,6 +899,6 @@
 
     .titleInfo span {
         font-size: 0.875em;
-        color: rgba(var(--paragraph-color-rgb), 0.65);
+        color: rgba(var(--paragraph-color-rgb, 43, 43, 43), 0.65);
     }
 }

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

@@ -2,7 +2,7 @@
     &__header {
         width: 100%;
         display: block;
-        background: rgba(var(--item-color-rgb), 1.05);
+        background: rgba(var(--item-color-rgb, 255, 255, 255), 1);
         box-sizing: border-box;
         padding: 10px 20px;
         border-radius: 0;
@@ -31,9 +31,9 @@
             flex: 0 0 calc(50% - 10px);
             padding: 0.85rem;
             box-sizing: border-box;
-            border: 1px solid rgba(var(--primary-rgb), 0.15);
+            border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.15);
             color: var(--paragraph-color);
-            background: rgba(var(--tertiary-color-rgb), 0.95);
+            background: rgba(var(--tertiary-color-rgb, 255, 255, 255), 0.95);
             margin: 5px;
             border-radius: var(--br);
             line-height: 1.45;
@@ -64,7 +64,7 @@
         width: 49%;
         padding: 1em;
         box-sizing: border-box;
-        border: 1px solid rgba(var(--primary-rgb), 0.15);
+        border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.15);
         color: var(--paragraph-color);
         background: rgba(#f4f4f4, 0.65);
         margin: 5px;

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

@@ -78,7 +78,7 @@
             height: 100%;
             background: linear-gradient(
                 to bottom,
-                rgba(var(--primary-rgb), 0.05),
+                rgba(var(--primary-rgb, 27, 57, 51), 0.05),
                 transparent
             );
             opacity: 0;
@@ -86,10 +86,10 @@
         }
 
         &:hover {
-            background: rgba(var(--bg-rgb), 1);
+            background: rgba(var(--bg-rgb, 246, 247, 245), 1);
             transform: translateY(-1px);
             box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
-            border-color: rgba(var(--primary-rgb), 0.3);
+            border-color: rgba(var(--primary-rgb, 27, 57, 51), 0.3);
 
             &::before {
                 opacity: 1;
@@ -114,7 +114,7 @@
 
         input[type='text'] {
             flex-grow: 1;
-            border: 1px solid rgba(var(--primary-rgb), 0.2);
+            border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.2);
             outline: none;
             padding: 0.5rem 0.75rem;
             padding-right: 36px;
@@ -124,16 +124,16 @@
             width: 100%;
             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
             transition: all 0.2s ease;
-            background-color: rgba(var(--bg-rgb), 1);
+            background-color: rgba(var(--bg-rgb, 246, 247, 245), 1);
 
             &::placeholder {
-                color: rgba(var(--paragraph-rgb), 0.5);
+                color: rgba(var(--paragraph-rgb, 43, 43, 43), 0.5);
                 font-size: 0.85rem;
             }
 
             &:focus {
-                box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.15);
-                border-color: rgba(var(--primary-rgb), 0.4);
+                box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 27, 57, 51), 0.15);
+                border-color: rgba(var(--primary-rgb, 27, 57, 51), 0.4);
             }
         }
 
@@ -150,18 +150,18 @@
             transition: background-color 0.2s ease;
 
             &:hover {
-                background-color: rgba(var(--primary-rgb), 0.05);
+                background-color: rgba(var(--primary-rgb, 27, 57, 51), 0.05);
             }
         }
 
         .searchIcon {
             width: 18px;
             height: 18px;
-            color: rgba(var(--paragraph-rgb), 0.6);
+            color: rgba(var(--paragraph-rgb, 43, 43, 43), 0.6);
             transition: color 0.2s ease;
 
             &:hover {
-                color: rgba(var(--primary-rgb), 0.8);
+                color: rgba(var(--primary-rgb, 27, 57, 51), 0.8);
             }
         }
     }
@@ -179,9 +179,9 @@
         overflow-x: hidden; /* Prevent horizontal scrolling */
         border-radius: calc(var(--br, 4px) - 1px);
         margin-top: 6px;
-        border: 1px solid rgba(var(--primary-rgb), 0.1);
+        border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.1);
         scrollbar-width: thin;
-        scrollbar-color: rgba(var(--primary-rgb), 0.2) transparent;
+        scrollbar-color: rgba(var(--primary-rgb, 27, 57, 51), 0.2) transparent;
 
         &::-webkit-scrollbar {
             width: 6px;
@@ -192,7 +192,7 @@
         }
 
         &::-webkit-scrollbar-thumb {
-            background-color: rgba(var(--primary-rgb), 0.2);
+            background-color: rgba(var(--primary-rgb, 27, 57, 51), 0.2);
             border-radius: 3px;
         }
     }
@@ -201,14 +201,14 @@
         padding: 0.5rem 0.75rem;
         cursor: pointer;
         transition: all 0.15s ease;
-        border-bottom: 1px solid rgba(var(--primary-rgb), 0.05);
+        border-bottom: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.05);
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
         width: 100%;
 
         &:hover {
-            background-color: rgba(var(--primary-rgb), 0.05);
+            background-color: rgba(var(--primary-rgb, 27, 57, 51), 0.05);
             padding-left: 1rem;
         }
 
@@ -222,7 +222,7 @@
             color: var(--header-color, #333);
             font-size: 0.8rem;
             padding-bottom: 6px;
-            border-bottom: 1px solid rgba(var(--primary-rgb), 0.08);
+            border-bottom: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.08);
             text-transform: uppercase;
             letter-spacing: 0.03em;
         }
@@ -238,16 +238,16 @@
         }
 
         &.selected {
-            background-color: rgba(var(--primary-rgb), 0.08);
+            background-color: rgba(var(--primary-rgb, 27, 57, 51), 0.08);
             font-weight: 500;
             padding-left: 1rem;
-            border-left: 2px solid rgba(var(--primary-rgb), 0.5);
+            border-left: 2px solid rgba(var(--primary-rgb, 27, 57, 51), 0.5);
         }
     }
 
     .resultItemDivider {
         height: 1px;
-        background-color: rgba(var(--primary-rgb), 0.08);
+        background-color: rgba(var(--primary-rgb, 27, 57, 51), 0.08);
         margin: 0.25rem 0.75rem;
     }
 }

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

@@ -2,11 +2,11 @@
     position: relative;
     transition: background-color 0.2s ease;
     cursor: grab;
-    border-bottom: 1px solid rgba(var(--primary-rgb), 0.05);
+    border-bottom: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.05);
     background-color: white;
 
     &:hover {
-        background-color: rgba(var(--primary-rgb), 0.02);
+        background-color: rgba(var(--primary-rgb, 27, 57, 51), 0.02);
     }
 
     &:last-child {
@@ -95,7 +95,7 @@
 
     td {
         background-color: white;
-        border-top: 1px solid rgba(var(--primary-rgb), 0.1);
-        border-bottom: 1px solid rgba(var(--primary-rgb), 0.1);
+        border-top: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.1);
+        border-bottom: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.1);
     }
 }