@webority/theme 0.3.0 → 0.4.0

package/scss/wui/_navigation.scss

@@ -0,0 +1,284 @@
+// Drawer / sidebar menu, tabs, search field.
+//
+// Part of the wui-components layer — see _wui-components.scss for the whole
+// picture and the load order. Order within the layer is LOAD-BEARING: these
+// partials are a split of one stylesheet, not independent modules, so a rule
+// here may be overridden by a later partial. Never reorder the imports.
+
+// ── Drawer / Sidebar menu ──
+// AppSidebarMenu — react-bootstrap Offcanvas mapped onto the app tokens plus
+// a flex column layout for the header / scrolling body / sticky footer.
+.app-sidebar-menu.offcanvas {
+    --bs-offcanvas-width: var(--asm-width, 420px);
+    --bs-offcanvas-bg: var(--color-surface);
+    --bs-offcanvas-color: var(--color-text);
+    --bs-offcanvas-border-color: var(--color-border);
+    --bs-offcanvas-border-width: 1px;
+    --bs-offcanvas-padding-x: 0;
+    --bs-offcanvas-padding-y: 0;
+    max-width: 100vw;
+    display: flex;
+    flex-direction: column;
+}
+.app-sidebar-menu .offcanvas-body {
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+}
+.app-sidebar-menu .asm-footer {
+    padding: 16px 20px;
+    border-top: 1px solid var(--color-border);
+    background: var(--color-surface);
+}
+
+.drawer {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 420px;
+    max-width: 100vw;
+    height: 100vh;
+    background: var(--color-surface);
+    border-left: 1px solid var(--color-border);
+    z-index: 200;
+    transform: translateX(100%);
+    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    display: flex;
+    flex-direction: column;
+}
+.drawer.open {
+    transform: translateX(0);
+}
+.drawer-backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(15, 23, 42, 0.4);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s;
+    z-index: 150;
+}
+.drawer-backdrop.open {
+    opacity: 1;
+    pointer-events: auto;
+}
+.drawer-header {
+    padding: 18px 20px;
+    border-bottom: 1px solid var(--color-border);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: var(--color-surface);
+}
+.drawer-title {
+    font-weight: 600;
+    font-size: 16px;
+    letter-spacing: -0.01em;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: var(--color-text);
+}
+.drawer-title-ic {
+    flex: none;
+    display: grid;
+    place-items: center;
+    width: 30px;
+    height: 30px;
+    border-radius: var(--radius);
+    corner-shape: squircle;
+    background: var(--color-primary-soft);
+    color: var(--color-primary);
+}
+// Sticky tools zone: search + section meta stay put while the list scrolls.
+.drawer-tools {
+    padding: 16px 20px 12px;
+    border-bottom: 1px solid var(--color-border);
+    background: var(--color-surface);
+}
+.drawer-body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 14px 16px 20px;
+}
+
+// ── Tabs ──
+// The tab strip both surfaces render. React drives it as a controlled strip and
+// Razor additionally renders Bootstrap panels beneath it, but the strip markup —
+// and therefore the look — is identical.
+.app-tabs {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    border-bottom: 1px solid var(--color-border);
+    overflow-x: auto;
+    scrollbar-width: none;
+    // The React AppTabs renders a react-bootstrap <Nav>, so the element also
+    // carries `.nav`, which declares `flex-wrap: wrap`. Both are (0,1,0), so
+    // today this wins only because the theme is imported after Bootstrap —
+    // see the doubled-selector rule below, which does not depend on that.
+    flex-wrap: nowrap;
+}
+// Doubled to (0,2,0) so the tab strip keeps scrolling even if a consumer loads
+// Bootstrap after the theme, which would otherwise let `.nav` win on order.
+.app-tabs.app-tabs {
+    flex-wrap: nowrap;
+}
+.app-tabs::-webkit-scrollbar {
+    display: none;
+}
+.app-tab {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 14px;
+    border: 0;
+    // Sits on the strip's own hairline rather than adding a second one.
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
+    background: transparent;
+    font-family: inherit;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.4;
+    color: var(--color-text-muted);
+    white-space: nowrap;
+    cursor: pointer;
+    transition:
+        color 0.12s ease,
+        border-color 0.12s ease;
+}
+.app-tab:hover:not(:disabled):not(.active) {
+    color: var(--color-text);
+}
+.app-tab.active {
+    color: var(--color-primary);
+    border-bottom-color: var(--color-primary);
+    // The active tab carries weight as well as colour — colour alone is a weak
+    // signal for anyone who reads the strip at a glance or cannot distinguish it.
+    font-weight: 600;
+}
+.app-tab:disabled {
+    color: var(--color-text-subtle);
+    cursor: not-allowed;
+}
+.app-tab:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: -2px;
+    border-radius: var(--radius-sm);
+}
+// A destructive tab reads as destructive whether or not it is the active one.
+.app-tab.danger {
+    color: var(--color-danger);
+}
+.app-tab.danger:hover:not(:disabled):not(.active) {
+    color: var(--color-danger-active);
+}
+.app-tab.danger.active {
+    color: var(--color-danger);
+    border-bottom-color: var(--color-danger);
+}
+.app-tab.danger .app-tab-count {
+    background: var(--color-danger-soft);
+    color: var(--color-danger-strong);
+}
+// Trailing count pill.
+.app-tab-count {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 20px;
+    padding: 0 6px;
+    height: 20px;
+    border-radius: 999px;
+    background: var(--color-bg-muted);
+    color: var(--color-text-subtle);
+    font-size: 12px;
+    font-weight: 600;
+}
+.app-tab.active .app-tab-count {
+    background: var(--color-primary-soft);
+    color: var(--color-primary);
+}
+
+// Wrapper for a self-contained tabs widget (strip + panels), as <app-tabs>
+// renders server-side. React composes the strip and its panels itself.
+.app-tabs-group > .tab-content {
+    padding-top: 16px;
+}
+
+// Pills variant — a segmented control rather than an underline.
+.app-tabs-pills {
+    gap: 4px;
+    border-bottom: 0;
+}
+.app-tabs-pills .app-tab {
+    border-bottom: 0;
+    margin-bottom: 0;
+    border-radius: var(--radius);
+}
+.app-tabs-pills .app-tab.active {
+    background: var(--color-primary-soft);
+}
+
+// ── Search field ──
+// The search control both surfaces render: a rounded field with a leading
+// magnifier that takes the brand colour on focus, plus a clear button that
+// appears once there's a value.
+.search-wrap {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+}
+.search-wrap > .search-icon {
+    position: absolute;
+    left: 13px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: grid;
+    place-items: center;
+    color: var(--color-text-subtle);
+    pointer-events: none;
+    transition: color 0.12s ease;
+}
+.search-wrap:focus-within > .search-icon {
+    color: var(--color-primary);
+}
+.search-field,
+.search-input {
+    width: 100%;
+    padding-left: 40px;
+    padding-right: 36px;
+}
+.search-clear {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: grid;
+    place-items: center;
+    width: 26px;
+    height: 26px;
+    padding: 0;
+    border: 0;
+    border-radius: 999px;
+    background: transparent;
+    color: var(--color-text-subtle);
+    cursor: pointer;
+    opacity: 0;
+    pointer-events: none;
+    transition:
+        opacity 0.12s ease,
+        color 0.12s ease;
+}
+.search-wrap.has-value .search-clear,
+.search-wrap:focus-within .search-clear {
+    opacity: 1;
+    pointer-events: auto;
+}
+.search-clear:hover {
+    color: var(--color-text);
+}

package/scss/wui/_overlays.scss

@@ -0,0 +1,350 @@
+// Modal, confirm dialog.
+//
+// Part of the wui-components layer — see _wui-components.scss for the whole
+// picture and the load order. Order within the layer is LOAD-BEARING: these
+// partials are a split of one stylesheet, not independent modules, so a rule
+// here may be overridden by a later partial. Never reorder the imports.
+
+// ── Modal ──
+// Chrome stays on `.lx-modal-*`. The shell is react-bootstrap <Modal>:
+//   .modal.lx-modal-shell          ← className (layout container)
+//   .modal-backdrop.lx-modal-dim   ← backdropClassName (dim only)
+//   .modal-dialog.lx-rb-dialog     ← dialogClassName
+//   .modal-content.lx-modal        ← contentClassName (the card)
+// Do NOT put layout on backdropClassName — that targets a sibling, not
+// .modal.
+.modal-backdrop.lx-modal-dim {
+    background: rgba(15, 23, 42, 0.45);
+    z-index: 1500;
+}
+.modal.lx-modal-shell {
+    --bs-modal-bg: transparent;
+    align-items: center;
+    justify-content: center;
+    z-index: 1505;
+    padding: 20px;
+}
+// `display: flex` ONLY while the dialog is actually open.
+//
+// This was `display: flex !important` on the rule above, which beat Bootstrap's
+// `.modal { display: none }` — so a CLOSED <app-modal> stayed laid out as a
+// full-viewport flex container and silently swallowed every click on the page behind
+// it. React never hit it (react-bootstrap mounts the dialog only when open), so it
+// only ever broke Razor, on any page that declared a modal.
+//
+// Both stacks open a modal by setting `display: block` inline (Bootstrap's JS and
+// react-bootstrap alike), which is what this keys on — it covers the whole opening
+// transition, not just the settled `.show` state. Specificity (0,3,0) beats `.modal`,
+// so no !important is needed.
+.modal.lx-modal-shell[style*="display: block"] {
+    display: flex;
+}
+// RB dialog shell: no Bootstrap max-width/margin so `.lx-modal` owns sizing.
+.modal.lx-modal-shell .modal-dialog.lx-rb-dialog {
+    margin: 0;
+    max-width: none;
+    width: auto;
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.modal.lx-modal-shell .modal-dialog.lx-rb-dialog .modal-content {
+    pointer-events: auto;
+    border: none;
+    // Lift off the dim backdrop: a hairline ring defines the edge (carries
+    // elevation in dark mode where a drop shadow barely reads) + a soft,
+    // deep drop shadow.
+    box-shadow:
+        0 0 0 1px color-mix(in srgb, var(--color-text) 10%, transparent),
+        var(--shadow-overlay-lg);
+    background: var(--color-surface);
+}
+// `--lx-modal-max-width` is how a caller sets an explicit width. It is set on the
+// `.modal` shell by BOTH surfaces and inherits down to the card, because the card is
+// the element the width has to land on: `.modal-dialog` here is `width: auto`, so a
+// max-width there does nothing while `.lx-modal`'s own 440px still clamps the card.
+// React used to write the value straight onto `.modal-content` from JS and Razor put
+// it on `.modal-dialog`, so the same `maxWidth="800"` produced two different dialogs.
+.lx-modal {
+    background: var(--color-surface);
+    border-radius: var(--radius-xl);
+    corner-shape: squircle;
+    border: none;
+    width: 100%;
+    max-width: var(--lx-modal-max-width, 440px);
+    max-height: calc(100vh - 40px);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+.lx-modal-wide {
+    max-width: var(--lx-modal-max-width, 1240px);
+}
+
+// Side drawer — the dialog docks to the right edge at 30% of the viewport
+// and slides in, instead of sitting centred. Same chrome, different
+// geometry.
+.modal.lx-modal-shell.is-side {
+    align-items: stretch;
+    justify-content: flex-end;
+    padding: 0;
+}
+.modal.lx-modal-shell.is-side .modal-dialog.lx-rb-dialog {
+    height: 100%;
+    width: auto;
+    max-width: none;
+    align-items: stretch;
+    justify-content: flex-end;
+}
+.lx-modal-side {
+    width: 30vw;
+    min-width: 420px;
+    max-width: none;
+    max-height: 100vh;
+    height: 100vh;
+    border-radius: 0;
+    corner-shape: normal;
+    animation: lx-drawer-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
+}
+@media (max-width: 991.98px) {
+    .lx-modal-side {
+        width: 70vw;
+    }
+}
+@media (max-width: 575.98px) {
+    .lx-modal-side {
+        width: 100vw;
+    }
+}
+@keyframes lx-drawer-in {
+    from {
+        transform: translateX(100%);
+    }
+    to {
+        transform: translateX(0);
+    }
+}
+@media (prefers-reduced-motion: reduce) {
+    .lx-modal-side {
+        animation: none;
+    }
+}
+.lx-modal-header {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--color-border);
+}
+.lx-modal-body {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scroll-behavior: smooth;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-border-strong) transparent;
+    padding: 20px 22px 24px;
+}
+.lx-modal-body::-webkit-scrollbar {
+    width: 8px;
+}
+.lx-modal-body::-webkit-scrollbar-track {
+    background: transparent;
+}
+.lx-modal-body::-webkit-scrollbar-thumb {
+    background: transparent;
+    border-radius: 999px;
+    border: 2px solid transparent;
+    background-clip: padding-box;
+}
+.lx-modal-body:hover::-webkit-scrollbar-thumb {
+    background: var(--color-border-strong);
+    background-clip: padding-box;
+}
+@media (prefers-reduced-motion: reduce) {
+    .lx-modal-body {
+        scroll-behavior: auto;
+    }
+}
+// Modal heading group: optional contextual (Bulk) icon tile + title/subtitle.
+.lx-modal-heading {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
+}
+.lx-modal-headtext {
+    min-width: 0;
+}
+.lx-modal-headicon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 34px;
+    height: 34px;
+    border-radius: var(--radius);
+    corner-shape: squircle;
+    flex: none;
+    background: var(--color-primary-soft);
+    color: var(--color-primary);
+}
+
+// Break long unbroken names so they wrap within the heading instead of
+// running under the close button.
+.lx-modal-title {
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--color-text);
+    overflow-wrap: anywhere;
+}
+.lx-modal-subtitle {
+    margin-top: 1px;
+    font-size: 12px;
+    font-weight: 400;
+    color: var(--color-text-muted);
+    overflow-wrap: anywhere;
+}
+.lx-form-section {
+    margin-top: 24px;
+}
+.lx-form-section:first-child {
+    margin-top: 0;
+}
+// Stretch controls to fill the column even though .field aligns to
+// flex-start.
+.lx-modal-body .field > .input,
+.lx-modal-body .field > .search-select,
+.lx-modal-body .field > .input-date-wrap,
+.lx-modal-body .field > .datepicker,
+.lx-modal-body .field > .phone-input-wrap,
+.lx-modal-body .field > .field-error {
+    align-self: stretch;
+}
+.lx-form-section-head {
+    margin-bottom: 16px;
+}
+.lx-form-section-title {
+    font-size: 16px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--color-text-subtle);
+}
+.lx-modal-footer {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 10px;
+    padding: 16px 22px;
+    border-top: 1px solid var(--color-border);
+}
+
+// Modal close — a squircle at rest that morphs into a circle on hover while
+// taking a danger tint, so dismissing reads as the destructive-ish gesture
+// it is. Slower on the way in than the way out.
+.lx-modal-close {
+    margin-left: auto;
+    display: grid;
+    place-items: center;
+    flex: none;
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    border: none;
+    cursor: pointer;
+    line-height: 1;
+    background: var(--color-bg-subtle);
+    color: var(--color-text-muted);
+    border-radius: 999px;
+    corner-shape: squircle;
+    transition:
+        background 180ms cubic-bezier(0.4, 0, 0.2, 1),
+        color 180ms cubic-bezier(0.4, 0, 0.2, 1),
+        corner-shape 180ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.lx-modal-close:hover {
+    background: var(--color-danger-soft);
+    color: var(--color-danger);
+    corner-shape: round;
+    transition:
+        background 280ms cubic-bezier(0.16, 1, 0.3, 1),
+        color 280ms cubic-bezier(0.16, 1, 0.3, 1),
+        corner-shape 280ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.lx-modal-close:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+// The shape morph is decorative; hold the colour cue for reduced-motion
+// users.
+@media (prefers-reduced-motion: reduce) {
+    .lx-modal-close,
+    .lx-modal-close:hover {
+        corner-shape: squircle;
+        transition:
+            background 1ms linear,
+            color 1ms linear;
+    }
+}
+
+// ── Confirm dialog ──
+// Confirmation dialog — centred status icon + title + message, two equal
+// side-by-side CTAs. Runs headerless (Modal hideHeader), so the body
+// carries the spacing and the footer drops its divider.
+// The confirm card's width belongs to the theme, not to every caller passing
+// maxWidth={440}. Both surfaces used to declare it and Razor's landed on the wrong
+// element, so the dialogs were different widths.
+.lx-confirm {
+    max-width: var(--lx-modal-max-width, 440px);
+}
+.lx-confirm-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding: 16px 12px 6px;
+}
+.lx-confirm-icon {
+    line-height: 0;
+    margin-bottom: 22px;
+}
+.lx-confirm-title {
+    margin: 0 0 10px;
+    font-size: 22px;
+    font-weight: 700;
+    letter-spacing: -0.01em;
+    color: var(--color-text);
+}
+.lx-confirm-msg {
+    margin: 0;
+    font-size: 15px;
+    line-height: 1.55;
+    color: var(--color-text-muted);
+    max-width: 40ch;
+}
+.lx-confirm-actions {
+    display: flex;
+    gap: 12px;
+    width: 100%;
+}
+.lx-modal-footer:has(.lx-confirm-actions) {
+    border-top: none;
+    padding-top: 0;
+}
+.lx-confirm-actions .btn {
+    flex: 1;
+    min-height: var(--wui-control-height);
+    height: var(--wui-control-height);
+    border-radius: var(--radius);
+    corner-shape: squircle;
+    padding-left: 16px;
+    padding-right: 16px;
+    font-size: 14px;
+    font-weight: 500;
+}