@visns-studio/visns-components 6.17.2 → 6.20.0

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

@@ -676,8 +676,8 @@
             width: 24px;
             height: 24px;
             border-radius: 50%;
-            background-color: rgba(var(--approval-color, #c53030), 0.1);
-            border: 1px solid rgba(var(--approval-color, #c53030), 0.2);
+            background-color: color-mix(in srgb, var(--approval-color, #c53030) 10%, transparent);
+            border: 1px solid color-mix(in srgb, var(--approval-color, #c53030) 20%, transparent);
             color: var(--approval-color, #c53030);
             font-size: 16px;
             font-weight: bold;
@@ -1771,7 +1771,7 @@
         flex-shrink: 0;
 
         &:hover {
-            background-color: rgba(var(--approval-color, #c53030), 0.1);
+            background-color: color-mix(in srgb, var(--approval-color, #c53030) 10%, transparent);
         }
     }
 
@@ -1779,7 +1779,7 @@
         padding: 40px 20px;
         text-align: center;
         color: var(--paragraph-color, #221e33);
-        background-color: var(--bg-color, #f7f7f8) er;
+        background-color: var(--bg-color, #f7f7f8);
 
         p {
             margin: 0;
@@ -1953,7 +1953,7 @@
     justify-content: center;
 
     &:hover {
-        background-color: rgba(var(--approval-color, #c53030), 0.1);
+        background-color: color-mix(in srgb, var(--approval-color, #c53030) 10%, transparent);
         transform: scale(1.1);
     }
 }
@@ -2305,7 +2305,7 @@
             transition: all 0.2s ease;
 
             &:hover {
-                background-color: rgba(var(--approval-color, #c53030), 0.1);
+                background-color: color-mix(in srgb, var(--approval-color, #c53030) 10%, transparent);
             }
         }
     }
@@ -2446,7 +2446,7 @@
     .manualJoinSection {
         margin-bottom: 24px;
         padding: 20px;
-        background-color: var(--bg-color, #f7f7f8) er;
+        background-color: var(--bg-color, #f7f7f8);
         border-radius: var(--radius, var(--br, 5px));
         border: 1px solid var(--border-color, #e1e1e1);
 
@@ -2577,7 +2577,7 @@
             transition: all 0.2s ease;
 
             &:hover {
-                background-color: rgba(var(--approval-color, #c53030), 0.1);
+                background-color: color-mix(in srgb, var(--approval-color, #c53030) 10%, transparent);
             }
         }
     }

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

@@ -0,0 +1,209 @@
+/**
+ * The settings hub.
+ *
+ * Same rail treatment as GenericIndex and GenericDetail — a sticky borderless
+ * column, not a card that terminates and leaves a void beside a tall panel —
+ * and it reads the same `--index-rail-*` tokens so a project retuning the rail
+ * retunes all three.
+ */
+
+/* No page header above the layout: the rail and the panel both start at the
+   top, and the panel's own header is the page's single heading block. */
+.page {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0.25rem 0.25rem 0;
+}
+
+.layout {
+    display: grid;
+    grid-template-columns:
+        minmax(var(--index-rail-min, 190px), var(--index-rail-width, 224px))
+        minmax(0, 1fr);
+    align-items: start;
+    gap: var(--index-rail-gap, 1.25rem);
+}
+
+.rail {
+    position: sticky;
+    top: var(--index-rail-top, 88px);
+    max-height: calc(100vh - var(--index-rail-offset, 120px));
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-width: thin;
+}
+
+.railSearch {
+    position: relative;
+    display: flex;
+    gap: 0.4rem;
+    align-items: center;
+    margin-bottom: 0.75rem;
+    padding: 0 0.5rem;
+    border: 1px solid var(--border-color, rgba(43, 43, 43, 0.15));
+    border-radius: var(--btn-br, 5px);
+    background: var(--background-color, #fff);
+    color: var(--muted-color, #6b7280);
+
+    input {
+        width: 100%;
+        height: 32px;
+        border: 0;
+        background: none;
+        color: var(--paragraph-color, #2b2b2b);
+        font: inherit;
+        font-size: 0.8rem;
+
+        &:focus {
+            outline: none;
+        }
+    }
+
+    &:focus-within {
+        border-color: color-mix(
+            in srgb,
+            var(--primary-color, #1b3933) 45%,
+            var(--border-color, rgba(43, 43, 43, 0.15))
+        );
+    }
+}
+
+.railGroup {
+    margin-bottom: 1rem;
+
+    ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+}
+
+.railGroupTitle {
+    margin: 0 0 0.35rem 0.75rem;
+    color: var(--muted-color, #6b7280);
+    font-size: 0.68rem;
+    font-weight: var(--font-weight-semibold, 600);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+}
+
+.railItem,
+.railItemActive {
+    display: block;
+    width: 100%;
+    /* The 3px is reserved on every item, selected or not, so choosing one does
+       not shift its label sideways. */
+    padding: 0.45rem calc(var(--spacing-md, 1rem) - 3px);
+    border: 0;
+    border-left: 3px solid transparent;
+    border-radius: var(--radius-sm, 6px);
+    background: none;
+    color: var(--paragraph-color, #52606d);
+    font-family: inherit;
+    font-size: var(--font-size-sm, 0.8125rem);
+    font-weight: var(--font-weight-medium, 500);
+    text-align: left;
+    cursor: pointer;
+    transition:
+        background-color var(--speed, 160ms) var(--ease, ease),
+        color var(--speed, 160ms) var(--ease, ease);
+
+    &:hover {
+        background: color-mix(
+            in srgb,
+            var(--primary-color, #1b3933) 6%,
+            transparent
+        );
+        color: var(--heading-color, #111827);
+    }
+
+    &:focus-visible {
+        outline: none;
+        box-shadow: 0 0 0 3px
+            color-mix(in srgb, var(--highlight-color, #3cbf7d) 30%, transparent);
+    }
+}
+
+/* Selected: accent edge, firmer tint, heavier weight. Three signals, so it is
+   never carried by colour alone. */
+.railItemActive {
+    border-left-color: var(--accent-color, var(--primary-color, #1b3933));
+    background: color-mix(
+        in srgb,
+        var(--primary-color, #1b3933) 12%,
+        transparent
+    );
+    color: var(--heading-color, #111827);
+    font-weight: var(--font-weight-semibold, 600);
+}
+
+.railEmpty {
+    margin: 0.5rem 0.75rem;
+    color: var(--muted-color, #6b7280);
+    font-size: 0.78rem;
+}
+
+.panel {
+    min-width: 0;
+}
+
+.panelHead {
+    padding-bottom: 1rem;
+
+    h1 {
+        margin: 0;
+        color: var(--heading-color, #111827);
+        font-size: 1.35rem;
+        font-weight: var(--font-weight-semibold, 600);
+    }
+
+    p {
+        margin: 0.25rem 0 0;
+        max-width: 70ch;
+        color: var(--muted-color, #6b7280);
+        font-size: 0.82rem;
+        line-height: 1.5;
+    }
+
+    /* The page title, in the rail's own group-heading treatment so it reads as
+       context above the section rather than as a second heading. */
+    .eyebrow {
+        margin: 0 0 0.2rem;
+        color: var(--muted-color, #6b7280);
+        font-size: 0.68rem;
+        font-weight: var(--font-weight-semibold, 600);
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+    }
+}
+
+.panelBody {
+    min-width: 0;
+
+    // The panels double as standalone pages and carry their own page gutters
+    // (CallQueueSettings, SmsLineSettings...). Embedded here the shell owns
+    // the gutters, so the child's horizontal padding is flattened — otherwise
+    // every panel body sits indented from the panel header above it.
+    > * {
+        padding-right: 0 !important;
+        padding-left: 0 !important;
+    }
+}
+
+.empty {
+    padding: 2rem 0;
+    color: var(--muted-color, #6b7280);
+    font-size: 0.85rem;
+}
+
+@media (max-width: 759px) {
+    .layout {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .rail {
+        position: static;
+        max-height: none;
+        overflow: visible;
+    }
+}

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

@@ -20,13 +20,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);
 }
 
 .crmtitle {
@@ -35,7 +35,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;
@@ -55,7 +55,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.5rem;
@@ -69,7 +69,7 @@
 
     .titleInfo span {
         font-size: 0.875em;
-        color: rgba(var(--primary-rgb), 0.65);
+        color: rgba(var(--primary-rgb, 27, 57, 51), 0.65);
     }
 }
 
@@ -79,7 +79,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;
@@ -99,7 +99,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.5rem;
@@ -115,8 +115,8 @@
     align-items: center;
     flex-wrap: wrap;
     border-radius: 4px;
-    border: 1px solid rgba(var(--primary-rgb), 0.2);
-    box-shadow: 0px 0px 10px rgba(var(--primary-rgb), 0.25);
+    border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.2);
+    box-shadow: 0px 0px 10px rgba(var(--primary-rgb, 27, 57, 51), 0.25);
     padding: 0.6rem;
     box-sizing: border-box;
     cursor: grab;

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

@@ -0,0 +1,321 @@
+/**
+ * Settings → Integrations.
+ *
+ * Cards on the page ground, not a card inside a card: the settings shell
+ * already provides the panel these sit in. Literal fallbacks on every token —
+ * a bare `var()` for something the host has not declared is invalid at
+ * computed-value time and takes the whole declaration with it.
+ */
+
+.wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+.group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.groupTitle {
+    margin: 0;
+    color: var(--muted-color, #6b7280);
+    font-size: 0.7rem;
+    font-weight: var(--font-weight-semibold, 600);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+}
+
+.card {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1.15rem;
+    border: 1px solid var(--border-color, rgba(43, 43, 43, 0.12));
+    border-radius: var(--dg-card-radius, 14px);
+    background: var(--surface-color, #fff);
+    box-shadow:
+        0 1px 2px color-mix(in srgb, var(--primary-color, #1b3933) 8%, transparent),
+        0 8px 24px -14px color-mix(in srgb, var(--primary-color, #1b3933) 18%, transparent);
+}
+
+.cardHead {
+    display: flex;
+    gap: 0.75rem;
+    align-items: flex-start;
+}
+
+.cardIcon {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--radius-sm, 8px);
+    background: color-mix(in srgb, var(--primary-color, #1b3933) 10%, transparent);
+    color: var(--primary-color, #1b3933);
+}
+
+.cardTitle {
+    flex: 1;
+    min-width: 0;
+
+    h4 {
+        margin: 0;
+        color: var(--heading-color, #111827);
+        font-size: 0.95rem;
+        font-weight: var(--font-weight-semibold, 600);
+    }
+
+    p {
+        margin: 0.2rem 0 0;
+        color: var(--muted-color, #6b7280);
+        font-size: 0.8rem;
+        line-height: 1.45;
+    }
+}
+
+.services {
+    font-size: 0.72rem !important;
+    font-weight: var(--font-weight-semibold, 600);
+    letter-spacing: 0.02em;
+}
+
+/* Status. Never colour alone — each tone ships with a word, and the two that
+   matter most also ship with a glyph. */
+.badge {
+    display: inline-flex;
+    flex-shrink: 0;
+    gap: 0.3rem;
+    align-items: center;
+    height: max-content;
+    padding: 0.2rem 0.55rem;
+    border-radius: 999px;
+    font-size: 0.72rem;
+    font-weight: var(--font-weight-semibold, 600);
+    white-space: nowrap;
+}
+
+.ok {
+    background: color-mix(in srgb, var(--highlight-color, #3cbf7d) 18%, transparent);
+    color: #0f6b41;
+}
+
+.ready {
+    background: color-mix(in srgb, var(--primary-color, #1b3933) 12%, transparent);
+    color: var(--primary-color, #1b3933);
+}
+
+.warn {
+    background: rgba(203, 138, 20, 0.16);
+    color: #8a5a00;
+}
+
+.bad {
+    background: rgba(190, 60, 48, 0.14);
+    color: #9b2c22;
+}
+
+.muted {
+    background: rgba(43, 43, 43, 0.08);
+    color: var(--muted-color, #6b7280);
+}
+
+/* Two columns on a wide panel, one when the panel is narrow. Container query
+   rather than a viewport query: this panel sits beside a rail, so the window's
+   width says nothing useful about how much room the fields actually have. */
+.fields {
+    container-type: inline-size;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: 0.85rem;
+}
+
+.field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+    min-width: 0;
+
+    label {
+        display: flex;
+        gap: 0.4rem;
+        align-items: center;
+        color: var(--paragraph-color, #374151);
+        font-size: 0.78rem;
+        font-weight: var(--font-weight-semibold, 600);
+    }
+
+    input,
+    select {
+        width: 100%;
+        height: 36px;
+        padding: 0 0.6rem;
+        border: 1px solid var(--border-color, rgba(43, 43, 43, 0.15));
+        border-radius: var(--btn-br, 5px);
+        background: var(--background-color, #fff);
+        color: var(--paragraph-color, #2b2b2b);
+        font: inherit;
+        font-size: 0.82rem;
+
+        &:focus {
+            outline: none;
+            border-color: color-mix(
+                in srgb,
+                var(--primary-color, #1b3933) 45%,
+                var(--border-color, rgba(43, 43, 43, 0.15))
+            );
+            box-shadow: 0 0 0 3px
+                color-mix(in srgb, var(--highlight-color, #3cbf7d) 22%, transparent);
+        }
+
+        &:disabled {
+            background: rgba(43, 43, 43, 0.04);
+            cursor: not-allowed;
+        }
+    }
+}
+
+/* "Set" against a secret field. The value never reaches this page; this badge
+   is the only thing said about it. */
+.setTag {
+    padding: 0.05rem 0.4rem;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--highlight-color, #3cbf7d) 20%, transparent);
+    color: #0f6b41;
+    font-size: 0.65rem;
+    font-weight: var(--font-weight-semibold, 600);
+    letter-spacing: 0.02em;
+}
+
+.help {
+    margin: 0;
+    color: var(--muted-color, #6b7280);
+    font-size: 0.72rem;
+    line-height: 1.4;
+}
+
+/* The callback URL has to be pasted into the provider's console character for
+   character, so it is selectable monospace rather than prose. */
+.redirect {
+    margin: 0;
+    padding: 0.6rem 0.7rem;
+    border: 1px dashed var(--border-color, rgba(43, 43, 43, 0.2));
+    border-radius: var(--btn-br, 5px);
+    color: var(--muted-color, #6b7280);
+    font-size: 0.74rem;
+    line-height: 1.5;
+
+    code {
+        display: block;
+        margin-top: 0.3rem;
+        color: var(--paragraph-color, #2b2b2b);
+        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+        font-size: 0.75rem;
+        overflow-wrap: anywhere;
+        user-select: all;
+    }
+}
+
+.testOk,
+.testBad {
+    margin: 0;
+    font-size: 0.74rem;
+}
+
+.testOk { color: #0f6b41; }
+.testBad { color: #9b2c22; }
+
+.cardFoot {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    align-items: center;
+    padding-top: 0.85rem;
+    border-top: 1px solid var(--border-color, rgba(43, 43, 43, 0.1));
+}
+
+.spacer { flex: 1 1 auto; }
+
+.docs {
+    display: inline-flex;
+    gap: 0.3rem;
+    align-items: center;
+    color: var(--muted-color, #6b7280);
+    font-size: 0.75rem;
+    text-decoration: none;
+
+    &:hover { color: var(--primary-color, #1b3933); }
+}
+
+.primary,
+.secondary,
+.ghost {
+    display: inline-flex;
+    gap: 0.35rem;
+    align-items: center;
+    justify-content: center;
+    height: 34px;
+    padding: 0 0.9rem;
+    border-radius: var(--btn-br, 5px);
+    font-family: inherit;
+    font-size: 0.78rem;
+    font-weight: var(--font-weight-semibold, 600);
+    white-space: nowrap;
+    cursor: pointer;
+
+    &:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+}
+
+.primary {
+    border: 1px solid var(--primary-color, #1b3933);
+    background: var(--primary-color, #1b3933);
+    color: #fff;
+}
+
+.secondary {
+    border: 1px solid var(--border-color, rgba(43, 43, 43, 0.16));
+    background: transparent;
+    color: var(--paragraph-color, #2b2b2b);
+
+    &:hover:not(:disabled) {
+        background: var(--hover-color, rgba(27, 57, 51, 0.06));
+    }
+}
+
+.ghost {
+    border: 1px solid transparent;
+    background: transparent;
+    color: var(--muted-color, #6b7280);
+
+    &:hover:not(:disabled) {
+        color: #9b2c22;
+        background: rgba(190, 60, 48, 0.08);
+    }
+}
+
+.loading,
+.empty {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    padding: 2rem 0;
+    color: var(--muted-color, #6b7280);
+    font-size: 0.85rem;
+}
+
+.spin { animation: integrationsSpin 0.9s linear infinite; }
+
+@keyframes integrationsSpin {
+    to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .spin { animation: none; }
+}

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

@@ -23,8 +23,8 @@
         align-items: center;
         flex-wrap: wrap;
         border-radius: 6px;
-        border: 1px solid rgba(var(--primary-rgb), 0.2);
-        box-shadow: 0px 0px 10px rgba(var(--primary-rgb), 0.1);
+        border: 1px solid rgba(var(--primary-rgb, 27, 57, 51), 0.2);
+        box-shadow: 0px 0px 10px rgba(var(--primary-rgb, 27, 57, 51), 0.1);
         padding: 0.8rem 5rem 0.8rem 2rem;
         margin-bottom: 0.5rem;
         font-size: 0.9rem;
@@ -39,8 +39,8 @@
         user-select: none;
 
         &:hover {
-            border-color: rgba(var(--primary-rgb), 0.4);
-            box-shadow: 0px 0px 12px rgba(var(--primary-rgb), 0.2);
+            border-color: rgba(var(--primary-rgb, 27, 57, 51), 0.4);
+            box-shadow: 0px 0px 12px rgba(var(--primary-rgb, 27, 57, 51), 0.2);
             transform: translateY(-1px);
         }