@visns-studio/visns-components 6.17.2 → 6.20.0

package/src/components/styles/_associationManager.scss

@@ -0,0 +1,467 @@
+// ---------------------------------------------------------------------------
+// Association manager — shared presentation
+// ---------------------------------------------------------------------------
+// `AssociationManager` and the older `ClientAssociationManager` render the same
+// thing (GenericDetail routes BOTH `component: "AssociationManager"` and
+// `component: "ClientAssociationManager"` to the former), so the look lives in
+// one mixin and each CSS module includes it. Class names are hashed per file,
+// so the two stay independent modules while sharing a single definition.
+//
+// The panel renders inside a host page's card — the "Customer Assignments" tab
+// on a contact, the "Assignments" tab on a customer — so it paints NO surface
+// of its own at the top level. It also draws no title: the tab above it already
+// names the thing, and repeating it inside the panel was the loudest part of
+// the old design. `config.showTitle` opts a standalone mount back in.
+//
+// Everything is a CSS custom property with a fallback, in the library's usual
+// pattern: the package carries no palette.
+// ---------------------------------------------------------------------------
+
+@use 'controls' as *;
+
+@mixin association-manager {
+    .container {
+        // Local aliases so a row, a chip and a field all mix against the same
+        // ink rather than each restating an rgba() of their own.
+        --am-ink: var(--paragraph-color, #2b2b2b);
+        --am-accent: var(--primary-color, #1b3933);
+        --am-surface: var(--paper, #fff);
+        --am-line: var(--border-color, #{rgba(43, 43, 43, 0.14)});
+        --am-muted: color-mix(in srgb, var(--am-ink) 72%, transparent);
+        --am-quiet: color-mix(in srgb, var(--am-ink) 3%, transparent);
+        --am-radius: var(--card-radius, 10px);
+
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-lg, 1.5rem);
+        color: var(--am-ink);
+        font-size: 0.85rem;
+    }
+
+    // ----------------------------------------------------------------------
+    // optional heading (standalone mounts only — see the note above)
+    // ----------------------------------------------------------------------
+
+    .heading {
+        margin: 0;
+        color: var(--am-accent);
+        font-size: 1rem;
+        font-weight: 600;
+    }
+
+    .headingNote {
+        margin: 0.15rem 0 0;
+        color: var(--am-muted);
+        font-size: 0.8rem;
+    }
+
+    .loading,
+    .empty {
+        margin: 0;
+        color: var(--am-muted);
+        font-size: 0.8rem;
+    }
+
+    .loading {
+        padding: 1rem 0;
+    }
+
+    // An empty list is a dashed outline rather than a filled slab: nothing to
+    // read here, so nothing should draw the eye.
+    .empty {
+        padding: 1.1rem 1rem;
+        text-align: center;
+        border: 1px dashed var(--am-line);
+        border-radius: var(--am-radius);
+    }
+
+    // ----------------------------------------------------------------------
+    // the multiple-primary notice
+    // ----------------------------------------------------------------------
+
+    // Stated once, quietly, in the amber family — not a filled banner with a
+    // 4px bar down its side.
+    .notice {
+        display: flex;
+        gap: 0.55rem;
+        align-items: flex-start;
+        padding: 0.65rem 0.8rem;
+        color: #7a5c00;
+        font-size: 0.8rem;
+        background: color-mix(in srgb, #b98900 8%, transparent);
+        border: 1px solid color-mix(in srgb, #b98900 32%, transparent);
+        border-radius: var(--am-radius);
+    }
+
+    .noticeIcon {
+        flex: none;
+        margin-top: 0.1rem;
+    }
+
+    .noticeBody {
+        flex: 1 1 auto;
+        min-width: 0;
+
+        strong {
+            display: block;
+            font-weight: 600;
+        }
+
+        p {
+            margin: 0.15rem 0 0;
+            line-height: 1.4;
+        }
+    }
+
+    .noticeAction {
+        @include button-base;
+        @include button-small;
+
+        margin-top: 0.55rem;
+        color: inherit;
+        background: none;
+        border-color: currentcolor;
+
+        &:hover:not(:disabled) {
+            background: color-mix(in srgb, #b98900 14%, transparent);
+        }
+    }
+
+    // ----------------------------------------------------------------------
+    // the list
+    // ----------------------------------------------------------------------
+
+    .section {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+        min-width: 0;
+    }
+
+    .sectionHead {
+        display: flex;
+        gap: var(--spacing-sm, 0.5rem);
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .sectionTitle {
+        margin: 0;
+        color: var(--am-muted);
+        font-size: 0.72rem;
+        font-weight: 600;
+        letter-spacing: 0.04em;
+        text-transform: uppercase;
+    }
+
+    .list {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        background: var(--am-surface);
+        border: 1px solid var(--am-line);
+        border-radius: var(--am-radius);
+    }
+
+    .row {
+        display: flex;
+        gap: var(--spacing-md, 1rem);
+        align-items: center;
+        padding: 0.6rem 0.85rem;
+        border-bottom: 1px solid var(--am-line);
+        transition: background var(--speed, 160ms)
+            var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
+
+        &:last-child {
+            border-bottom: 0;
+        }
+
+        &:hover {
+            background: var(--hover-color, rgb(0 0 0 / 3%));
+        }
+    }
+
+    /* The primary row is marked by a rule down its edge, not by tinting the
+       whole slab — one row in a list of five should read as *marked*, not as a
+       different kind of object. */
+    .rowPrimary {
+        box-shadow: inset 2px 0 0 0 var(--am-accent);
+    }
+
+    .main {
+        display: flex;
+        flex: 1 1 auto;
+        flex-direction: column;
+        gap: 0.15rem;
+        min-width: 0;
+    }
+
+    .entityName {
+        display: flex;
+        gap: 0.4rem;
+        align-items: center;
+        font-weight: 600;
+        line-height: 1.3;
+        overflow-wrap: anywhere;
+    }
+
+    .chip {
+        display: inline-flex;
+        flex: none;
+        gap: 0.2rem;
+        align-items: center;
+        padding: 1px 7px;
+        color: var(--am-muted);
+        font-size: 0.7rem;
+        font-weight: 600;
+        white-space: nowrap;
+        background: var(--am-quiet);
+        border: 1px solid var(--am-line);
+        border-radius: 999px;
+    }
+
+    /* Outlined, in the brand ink — the old badge was a solid dark slab with
+       uppercase white type, which read as a warning. */
+    .chipPrimary {
+        color: var(--am-accent);
+        background: color-mix(in srgb, var(--am-accent) 8%, transparent);
+        border-color: color-mix(in srgb, var(--am-accent) 35%, transparent);
+    }
+
+    /* Relationship, role, notes and the date all read as one quiet line of
+       metadata under the name, separated by middots, the way the rest of the
+       app writes a subtitle. */
+    .meta {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.3rem;
+        align-items: center;
+        color: var(--am-muted);
+        font-size: 0.75rem;
+        line-height: 1.4;
+    }
+
+    .sep {
+        opacity: 0.5;
+    }
+
+    .relationshipType {
+        text-transform: capitalize;
+    }
+
+    .notes {
+        overflow-wrap: anywhere;
+    }
+
+    .date {
+        display: inline-flex;
+        gap: 0.25rem;
+        align-items: center;
+        white-space: nowrap;
+    }
+
+    // ----------------------------------------------------------------------
+    // row actions
+    // ----------------------------------------------------------------------
+
+    /* Revealed on hover, but never *only* on hover: `:focus-within` keeps them
+       reachable from the keyboard, and a coarse pointer (the iPad this is used
+       on) has no hover state at all, so there they are simply always shown. */
+    .actions {
+        display: flex;
+        flex: none;
+        gap: 0.15rem;
+        align-items: center;
+        opacity: 0;
+        transition: opacity var(--speed, 160ms)
+            var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
+    }
+
+    .row:hover .actions,
+    .row:focus-within .actions {
+        opacity: 1;
+    }
+
+    @media (hover: none), (pointer: coarse) {
+        .actions {
+            opacity: 1;
+        }
+    }
+
+    .iconButton {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        padding: 0;
+        color: var(--am-muted);
+        background: none;
+        border: 0;
+        border-radius: 6px;
+        cursor: pointer;
+        transition:
+            color var(--speed, 160ms) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
+            background var(--speed, 160ms) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
+
+        &:hover:not(:disabled) {
+            color: var(--am-ink);
+            background: var(--am-quiet);
+        }
+
+        &:focus-visible {
+            opacity: 1;
+            outline: 2px solid var(--highlight-color, #3cbf7d);
+            outline-offset: 1px;
+        }
+    }
+
+    /* Currently primary: the star is already lit, and the button takes it back
+       off. Coloured so the state is legible before the hover. */
+    .iconButtonOn {
+        color: var(--am-accent);
+    }
+
+    /* Destructive, stated in colour on hover only — a solid red button on every
+       row made removal the most prominent thing on the panel. */
+    .iconButtonDanger {
+        &:hover:not(:disabled) {
+            color: var(--danger-color, #be3e3e);
+            background: var(--danger-light, rgb(190 62 62 / 12%));
+        }
+    }
+
+    // ----------------------------------------------------------------------
+    // the add form
+    // ----------------------------------------------------------------------
+
+    .addToggle {
+        @include button-secondary;
+        @include button-small;
+    }
+
+    /* Two columns from 820px — the width at which a `Customer` and a `Site`
+       select can sit side by side without either becoming a slot machine. */
+    .form {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr);
+        gap: var(--spacing-md, 1rem);
+        padding: var(--spacing-md, 1rem);
+        background: var(--am-quiet);
+        border: 1px solid var(--am-line);
+        border-radius: var(--am-radius);
+    }
+
+    @media (min-width: 820px) {
+        .form {
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+    }
+
+    .field {
+        display: flex;
+        flex-direction: column;
+        gap: 0.3rem;
+        min-width: 0;
+    }
+
+    /* A textarea, a checkbox and the button row each own the full width: they
+       do not pair with anything. */
+    .fieldWide,
+    .formActions {
+        grid-column: 1 / -1;
+    }
+
+    .label {
+        color: var(--am-muted);
+        font-size: 0.72rem;
+        font-weight: 600;
+    }
+
+    .required {
+        color: var(--danger-color, #be3e3e);
+    }
+
+    .selectField,
+    .textField,
+    .textareaField {
+        @include input-base;
+
+        font-size: 0.85rem;
+    }
+
+    .textareaField {
+        min-height: 4.5rem;
+        padding-top: 0.55rem;
+        padding-bottom: 0.55rem;
+        line-height: 1.4;
+        resize: vertical;
+    }
+
+    /* The checkbox is pinned on every axis. The host CRM styles bare `input`
+       with a text-field height and a pill radius, and a flex parent will happily
+       stretch a box that has not been told its maximum — which rendered the
+       "Primary Assignment" tick as a wide oval. */
+    .checkboxLabel {
+        display: inline-flex;
+        gap: 0.5rem;
+        align-items: center;
+        margin-top: 0.2rem;
+        color: var(--am-ink);
+        font-size: 0.8rem;
+        cursor: pointer;
+
+        input[type='checkbox'] {
+            flex: 0 0 16px;
+            box-sizing: border-box;
+            width: 16px;
+            min-width: 16px;
+            max-width: 16px;
+            height: 16px;
+            min-height: 16px;
+            max-height: 16px;
+            padding: 0;
+            margin: 0;
+            border-radius: 3px;
+            cursor: pointer;
+        }
+    }
+
+    .formActions {
+        display: flex;
+        gap: 0.5rem;
+        align-items: center;
+        justify-content: flex-end;
+    }
+
+    .primaryButton {
+        @include button-primary;
+        @include button-small;
+    }
+
+    .secondaryButton {
+        @include button-secondary;
+        @include button-small;
+    }
+
+    @media (max-width: 640px) {
+        .row {
+            flex-wrap: wrap;
+        }
+
+        .actions {
+            margin-left: auto;
+        }
+
+        /* Reversed so the primary action is under the thumb on the right, and
+           both stretched so neither is a small target on a phone. */
+        .formActions {
+            flex-direction: row-reverse;
+
+            > * {
+                flex: 1 1 0;
+                width: auto;
+            }
+        }
+    }
+}

package/src/components/styles/_authBrandPanel.scss

@@ -27,7 +27,7 @@
 @mixin auth-brand-panel($collapse: hide) {
     .brand {
         position: relative;
-        background-color: var(--navy-deep);
+        background-color: var(--navy-deep, #16202e);
         background-size: cover;
         background-position: center 62%;
         overflow: hidden;
@@ -46,19 +46,25 @@
             content: '';
             position: absolute;
             inset: 0;
+            // The nine stops here were hardcoded `rgba(16, 25, 42, …)` — the
+            // navy of the CRM this component was first written for. Over a
+            // green-branded consumer's artwork the bottom half of the panel
+            // turned blue, so the sign-in screen advertised somebody else's
+            // brand. `--brand-ground` is the consumer's own ground; the navy
+            // survives only as its fallback.
             background:
                 linear-gradient(
                     to top,
-                    rgba(16, 25, 42, 0.94) 0%,
-                    rgba(16, 25, 42, 0.88) 18%,
-                    rgba(16, 25, 42, 0.62) 42%,
-                    rgba(16, 25, 42, 0.22) 70%,
-                    rgba(16, 25, 42, 0.06) 100%
+                    color-mix(in srgb, var(--brand-ground, #10192a) 94%, transparent) 0%,
+                    color-mix(in srgb, var(--brand-ground, #10192a) 88%, transparent) 18%,
+                    color-mix(in srgb, var(--brand-ground, #10192a) 62%, transparent) 42%,
+                    color-mix(in srgb, var(--brand-ground, #10192a) 22%, transparent) 70%,
+                    color-mix(in srgb, var(--brand-ground, #10192a) 6%, transparent) 100%
                 ),
                 linear-gradient(
                     to right,
-                    rgba(16, 25, 42, 0.5) 0%,
-                    rgba(16, 25, 42, 0) 55%
+                    color-mix(in srgb, var(--brand-ground, #10192a) 50%, transparent) 0%,
+                    color-mix(in srgb, var(--brand-ground, #10192a) 0%, transparent) 55%
                 );
         }
 
@@ -111,7 +117,7 @@
             top: 50%;
             width: 1.5rem;
             height: 2px;
-            background: var(--flag);
+            background: var(--flag, #8a8f98);
         }
     }
 

package/src/components/styles/_controls.scss

@@ -18,13 +18,13 @@
     gap: 0.4rem;
     width: max-content;
     min-height: var(--control-height, 2.5rem);
-    padding: 0 var(--spacing-md);
+    padding: 0 var(--spacing-md, 1rem);
     border: 1px solid transparent;
-    border-radius: var(--radius-sm);
-    font-family: var(--font-family);
+    border-radius: var(--radius-sm, 8px);
+    font-family: var(--font-family, inherit);
     // Was 1rem against 15px body text, so buttons shouted slightly.
-    font-size: var(--font-size-sm);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-sm, 0.8125rem);
+    font-weight: var(--font-weight-semibold, 600);
     line-height: 1;
     text-decoration: none;
     white-space: nowrap;
@@ -32,9 +32,9 @@
     // Was `all 0.2s`, which animates layout properties too and makes hover
     // feel laggy. Only what actually changes.
     transition:
-        background-color var(--speed) var(--ease),
-        border-color var(--speed) var(--ease),
-        color var(--speed) var(--ease);
+        background-color var(--speed, 160ms) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
+        border-color var(--speed, 160ms) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
+        color var(--speed, 160ms) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
 
     &:disabled,
     &[aria-disabled='true'] {
@@ -42,21 +42,25 @@
         cursor: not-allowed;
     }
 
-    // Focus is handled globally by the app's _focus.scss; nothing here removes
-    // the outline, which is what created the accessibility gap in the first
-    // place.
+    // Focus was documented as "handled globally by the app's _focus.scss" —
+    // a file that does not exist in this package, so every shared control
+    // shipped with browser-default focus only. It is handled here now.
+    &:focus-visible {
+        outline: 2px solid var(--highlight-color, #3cbf7d);
+        outline-offset: 2px;
+    }
 }
 
 @mixin button-primary {
     @include button-base;
 
-    background: var(--primary-color);
-    border-color: var(--primary-color);
+    background: var(--primary-color, #1b3933);
+    border-color: var(--primary-color, #1b3933);
     color: #fff;
 
     &:hover:not(:disabled) {
-        background: var(--primary-color-darker);
-        border-color: var(--primary-color-darker);
+        background: var(--primary-color-darker, #12241f);
+        border-color: var(--primary-color-darker, #12241f);
         // Was a light-blue fill with navy text, which dropped below a legible
         // contrast on hover — the one state where feedback matters most.
         color: #fff;
@@ -66,13 +70,13 @@
 @mixin button-secondary {
     @include button-base;
 
-    background: var(--paper);
-    border-color: var(--border-color);
-    color: var(--text-color);
+    background: var(--paper, #fff);
+    border-color: var(--border-color, #e1e1e1);
+    color: var(--text-color, #2b2b2b);
 
     &:hover:not(:disabled) {
-        border-color: var(--border-color-dark);
-        background: var(--hover-color);
+        border-color: var(--border-color-dark, #c9c9c9);
+        background: var(--hover-color, rgba(27, 57, 51, 0.06));
     }
 }
 
@@ -81,10 +85,10 @@
 
     background: none;
     border-color: transparent;
-    color: var(--primary-color);
+    color: var(--primary-color, #1b3933);
 
     &:hover:not(:disabled) {
-        background: var(--primary-color-light);
+        background: var(--primary-color-light, rgba(27, 57, 51, 0.16));
     }
 }
 
@@ -93,18 +97,18 @@
 
     background: none;
     border-color: transparent;
-    color: var(--danger-color);
+    color: var(--danger-color, #be3e3e);
 
     &:hover:not(:disabled) {
-        background: var(--danger-light);
-        border-color: var(--danger-color);
+        background: var(--danger-light, rgba(190, 62, 62, 0.12));
+        border-color: var(--danger-color, #be3e3e);
     }
 }
 
 @mixin button-small {
     min-height: var(--control-height-sm, 2rem);
-    padding: 0 var(--spacing-sm);
-    font-size: var(--font-size-xs);
+    padding: 0 var(--spacing-sm, 0.5rem);
+    font-size: var(--font-size-xs, 0.75rem);
 }
 
 /* --- Inputs -------------------------------------------------------------- */
@@ -113,27 +117,27 @@
     width: 100%;
     min-height: var(--control-height, 2.5rem);
     padding: 0 var(--input-padding-x, 0.65rem);
-    border: 1px solid var(--border-color);
-    border-radius: var(--radius-sm);
-    background: var(--paper);
-    font-family: var(--font-family);
-    font-size: var(--font-size-md);
-    color: var(--text-color);
+    border: 1px solid var(--border-color, #e1e1e1);
+    border-radius: var(--radius-sm, 8px);
+    background: var(--paper, #fff);
+    font-family: var(--font-family, inherit);
+    font-size: var(--font-size-md, 0.9375rem);
+    color: var(--text-color, #2b2b2b);
     transition:
-        border-color var(--speed) var(--ease),
-        box-shadow var(--speed) var(--ease);
+        border-color var(--speed, 160ms) var(--ease, cubic-bezier(0.4, 0, 0.2, 1)),
+        box-shadow var(--speed, 160ms) var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
 
     &::placeholder {
-        color: var(--muted-color);
+        color: var(--muted-color, rgba(43, 60, 43, 0.72));
     }
 
     &:hover:not(:disabled) {
-        border-color: var(--border-color-dark);
+        border-color: var(--border-color-dark, #c9c9c9);
     }
 
     &:disabled {
-        background: var(--bg-color-secondary);
-        color: var(--disabled-color);
+        background: var(--bg-color-secondary, #eeece7);
+        color: var(--disabled-color, rgba(43, 60, 43, 0.38));
         cursor: not-allowed;
     }
 }