@nexterajs/ui 0.0.1 → 0.1.0

package/styles/_scrollbar.scss

@@ -0,0 +1,134 @@
+// @nexterajs/ui — [nxeScrollbar] chrome.
+//
+// A value-for-value port of `perfect-scrollbar.css`, which this replaces. Applications style these
+// rails heavily, so every number and easing is copied rather than chosen — the selector names are
+// the only thing that changed, one-for-one:
+//
+//   .ps            -> .nxe-scrollbar          .ps__rail-x   -> .nxe-scrollbar__rail-x
+//   .ps--active-x  -> .nxe-scrollbar--active-x .ps__thumb-x -> .nxe-scrollbar__thumb-x
+//   .ps--focus     -> .nxe-scrollbar--focus   .ps--clicking -> .nxe-scrollbar--clicking
+//   .ps--scrolling-x -> .nxe-scrollbar--scrolling-x        (and the -y twins of each)
+//
+// Load this where `perfect-scrollbar/css/perfect-scrollbar.css` used to sit in the cascade —
+// BEFORE the application's own rail overrides — or those overrides stop winning.
+
+//
+// Container style
+//
+// The original set `overflow: hidden !important` and drove scrolling entirely from JavaScript:
+// wheel, touch, keyboard and momentum were all reimplemented. This keeps `overflow: auto` and
+// merely hides the native bar, so the browser still does the scrolling — which is more faithful
+// on touch and with a trackpad, and is why the directive needs no input handling of its own.
+// Layout is unchanged either way: a hidden native scrollbar occupies no width, exactly as the
+// simulated rails did.
+.nxe-scrollbar {
+    overflow: auto;
+    overflow-anchor: none;
+    touch-action: auto;
+    position: relative;
+
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+        width: 0;
+        height: 0;
+    }
+}
+
+//
+// Scrollbar rail styles
+//
+.nxe-scrollbar__rail-x {
+    display: none;
+    opacity: 0;
+    transition:
+        background-color 0.2s linear,
+        opacity 0.2s linear;
+    height: 15px;
+    // there must be 'bottom' or 'top' for the x rail
+    bottom: 0px;
+    // please don't change 'position'
+    position: absolute;
+}
+
+.nxe-scrollbar__rail-y {
+    display: none;
+    opacity: 0;
+    transition:
+        background-color 0.2s linear,
+        opacity 0.2s linear;
+    width: 15px;
+    // there must be 'right' or 'left' for the y rail
+    right: 0;
+    // please don't change 'position'
+    position: absolute;
+}
+
+.nxe-scrollbar--active-x > .nxe-scrollbar__rail-x,
+.nxe-scrollbar--active-y > .nxe-scrollbar__rail-y {
+    display: block;
+    background-color: transparent;
+}
+
+.nxe-scrollbar:hover > .nxe-scrollbar__rail-x,
+.nxe-scrollbar:hover > .nxe-scrollbar__rail-y,
+.nxe-scrollbar--focus > .nxe-scrollbar__rail-x,
+.nxe-scrollbar--focus > .nxe-scrollbar__rail-y,
+.nxe-scrollbar--scrolling-x > .nxe-scrollbar__rail-x,
+.nxe-scrollbar--scrolling-y > .nxe-scrollbar__rail-y {
+    opacity: 0.6;
+}
+
+.nxe-scrollbar .nxe-scrollbar__rail-x:hover,
+.nxe-scrollbar .nxe-scrollbar__rail-y:hover,
+.nxe-scrollbar .nxe-scrollbar__rail-x:focus,
+.nxe-scrollbar .nxe-scrollbar__rail-y:focus,
+.nxe-scrollbar .nxe-scrollbar__rail-x.nxe-scrollbar--clicking,
+.nxe-scrollbar .nxe-scrollbar__rail-y.nxe-scrollbar--clicking {
+    background-color: var(--nxe-ui-neutral-110, #eee);
+    opacity: 0.9;
+}
+
+//
+// Scrollbar thumb styles
+//
+.nxe-scrollbar__thumb-x {
+    background-color: var(--nxe-ui-neutral-400, #aaa);
+    border-radius: 6px;
+    transition:
+        background-color 0.2s linear,
+        height 0.2s ease-in-out;
+    height: 6px;
+    // there must be 'bottom' for the x thumb
+    bottom: 2px;
+    // please don't change 'position'
+    position: absolute;
+}
+
+.nxe-scrollbar__thumb-y {
+    background-color: var(--nxe-ui-neutral-400, #aaa);
+    border-radius: 6px;
+    transition:
+        background-color 0.2s linear,
+        width 0.2s ease-in-out;
+    width: 6px;
+    // there must be 'right' for the y thumb
+    right: 2px;
+    // please don't change 'position'
+    position: absolute;
+}
+
+.nxe-scrollbar__rail-x:hover > .nxe-scrollbar__thumb-x,
+.nxe-scrollbar__rail-x:focus > .nxe-scrollbar__thumb-x,
+.nxe-scrollbar__rail-x.nxe-scrollbar--clicking .nxe-scrollbar__thumb-x {
+    background-color: var(--nxe-ui-text-muted, #999);
+    height: 11px;
+}
+
+.nxe-scrollbar__rail-y:hover > .nxe-scrollbar__thumb-y,
+.nxe-scrollbar__rail-y:focus > .nxe-scrollbar__thumb-y,
+.nxe-scrollbar__rail-y.nxe-scrollbar--clicking .nxe-scrollbar__thumb-y {
+    background-color: var(--nxe-ui-text-muted, #999);
+    width: 11px;
+}

package/styles/_status.scss

@@ -0,0 +1,21 @@
+// Status families (docs/TOKENS.md, "Status families"). `nxe-tag` and `nxe-badge` read the same six
+// families, so the family -> token wiring lives here once: `@include status.families('.nxe-tag')`
+// emits `.nxe-tag-<family>` classes that set the private `--nxe-status-{fg,bg,border}` triple the
+// component's own rules then use. Colours come only from `--nxe-ui-status-*` tokens.
+
+$families: neutral, info, attention, success, danger, muted;
+
+@mixin families($prefix) {
+    @each $family in $families {
+        #{$prefix}-#{$family} {
+            --nxe-status-fg: var(--nxe-ui-status-#{$family}-fg);
+            --nxe-status-bg: var(--nxe-ui-status-#{$family}-bg);
+            --nxe-status-border: var(--nxe-ui-status-#{$family}-border);
+        }
+    }
+
+    // `muted` is the one family that is also drawn differently: a dashed edge says "no longer live".
+    #{$prefix}-muted {
+        --nxe-status-border-style: dashed;
+    }
+}

package/styles/_toast.scss

@@ -0,0 +1,243 @@
+// @nexterajs/ui — NxeToastService chrome.
+//
+// A value-for-value port of ngx-toastr's `toastr.css`, which this replaces. Every number, colour
+// and easing here is copied deliberately rather than chosen: applications were pinned to that
+// rendering, and "close enough" on a toast is a visible regression nothing tests.
+//
+// Load this where `ngx-toastr/toastr.css` used to sit in the cascade — BEFORE the application's
+// own overrides — or a rule like `width: 350px` on a position class stops winning.
+
+/* position */
+.nxe-toast-center-center {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.toast-top-center {
+    top: 0;
+    right: 0;
+    width: 100%;
+}
+
+.toast-bottom-center {
+    bottom: 0;
+    right: 0;
+    width: 100%;
+}
+
+.toast-top-full-width {
+    top: 0;
+    right: 0;
+    width: 100%;
+}
+
+.toast-bottom-full-width {
+    bottom: 0;
+    right: 0;
+    width: 100%;
+}
+
+.toast-top-left {
+    top: 12px;
+    left: 12px;
+}
+
+.toast-top-right {
+    top: 12px;
+    right: 12px;
+}
+
+.toast-bottom-right {
+    right: 12px;
+    bottom: 12px;
+}
+
+.toast-bottom-left {
+    bottom: 12px;
+    left: 12px;
+}
+
+/* toast styles */
+.nxe-toast-title {
+    font-weight: bold;
+}
+
+.nxe-toast-message {
+    word-wrap: break-word;
+}
+
+.nxe-toast-message a,
+.nxe-toast-message label {
+    color: var(--nxe-ui-toast-fg, #ffffff);
+}
+
+.nxe-toast-message a:hover {
+    color: var(--nxe-ui-toast-fg-muted, #cccccc);
+    text-decoration: none;
+}
+
+.nxe-toast-close {
+    position: relative;
+    right: -0.3em;
+    top: -0.3em;
+    float: right;
+    font-size: 20px;
+    font-weight: bold;
+    color: var(--nxe-ui-toast-fg, #ffffff);
+    text-shadow: 0 1px 0 var(--nxe-ui-toast-fg, #ffffff);
+}
+
+.nxe-toast-close:hover,
+.nxe-toast-close:focus {
+    color: var(--nxe-ui-toast-ink, #000000);
+    text-decoration: none;
+    cursor: pointer;
+    opacity: 0.4;
+}
+
+button.nxe-toast-close {
+    padding: 0;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+}
+
+.nxe-toast-container {
+    pointer-events: none;
+    position: fixed;
+    z-index: 999999;
+}
+
+.nxe-toast-container * {
+    box-sizing: border-box;
+}
+
+.nxe-toast-container .nxe-toast {
+    position: relative;
+    overflow: hidden;
+    margin: 0 0 6px;
+    padding: 15px 15px 15px 50px;
+    width: 300px;
+    border-radius: 3px 3px 3px 3px;
+    background-position: 15px center;
+    background-repeat: no-repeat;
+    background-size: 24px;
+    box-shadow: 0 0 12px var(--nxe-ui-toast-shadow-hover, #999999);
+    color: var(--nxe-ui-toast-fg, #ffffff);
+}
+
+.nxe-toast-container .nxe-toast:hover {
+    box-shadow: 0 0 12px var(--nxe-ui-toast-ink, #000000);
+    opacity: 1;
+    cursor: pointer;
+}
+
+/* The four icons, as shipped: Font Awesome info-circle, times-circle, check and
+   exclamation-triangle, inlined so the toast needs no icon font and no network request. */
+.nxe-toast-info {
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJyB3aWR0aD0nNTEyJyBoZWlnaHQ9JzUxMic+PHBhdGggZmlsbD0ncmdiKDI1NSwyNTUsMjU1KScgZD0nTTI1NiA4QzExOS4wNDMgOCA4IDExOS4wODMgOCAyNTZjMCAxMzYuOTk3IDExMS4wNDMgMjQ4IDI0OCAyNDhzMjQ4LTExMS4wMDMgMjQ4LTI0OEM1MDQgMTE5LjA4MyAzOTIuOTU3IDggMjU2IDh6bTAgMTEwYzIzLjE5NiAwIDQyIDE4LjgwNCA0MiA0MnMtMTguODA0IDQyLTQyIDQyLTQyLTE4LjgwNC00Mi00MiAxOC44MDQtNDIgNDItNDJ6bTU2IDI1NGMwIDYuNjI3LTUuMzczIDEyLTEyIDEyaC04OGMtNi42MjcgMC0xMi01LjM3My0xMi0xMnYtMjRjMC02LjYyNyA1LjM3My0xMiAxMi0xMmgxMnYtNjRoLTEyYy02LjYyNyAwLTEyLTUuMzczLTEyLTEydi0yNGMwLTYuNjI3IDUuMzczLTEyIDEyLTEyaDY0YzYuNjI3IDAgMTIgNS4zNzMgMTIgMTJ2MTAwaDEyYzYuNjI3IDAgMTIgNS4zNzMgMTIgMTJ2MjR6Jy8+PC9zdmc+");
+}
+
+.nxe-toast-error {
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJyB3aWR0aD0nNTEyJyBoZWlnaHQ9JzUxMic+PHBhdGggZmlsbD0ncmdiKDI1NSwyNTUsMjU1KScgZD0nTTI1NiA4QzExOSA4IDggMTE5IDggMjU2czExMSAyNDggMjQ4IDI0OCAyNDgtMTExIDI0OC0yNDhTMzkzIDggMjU2IDh6bTEyMS42IDMxMy4xYzQuNyA0LjcgNC43IDEyLjMgMCAxN0wzMzggMzc3LjZjLTQuNyA0LjctMTIuMyA0LjctMTcgMEwyNTYgMzEybC02NS4xIDY1LjZjLTQuNyA0LjctMTIuMyA0LjctMTcgMEwxMzQuNCAzMzhjLTQuNy00LjctNC43LTEyLjMgMC0xN2w2NS42LTY1LTY1LjYtNjUuMWMtNC43LTQuNy00LjctMTIuMyAwLTE3bDM5LjYtMzkuNmM0LjctNC43IDEyLjMtNC43IDE3IDBsNjUgNjUuNyA2NS4xLTY1LjZjNC43LTQuNyAxMi4zLTQuNyAxNyAwbDM5LjYgMzkuNmM0LjcgNC43IDQuNyAxMi4zIDAgMTdMMzEyIDI1Nmw2NS42IDY1LjF6Jy8+PC9zdmc+");
+}
+
+.nxe-toast-success {
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJyB3aWR0aD0nNTEyJyBoZWlnaHQ9JzUxMic+PHBhdGggZmlsbD0ncmdiKDI1NSwyNTUsMjU1KScgZD0nTTE3My44OTggNDM5LjQwNGwtMTY2LjQtMTY2LjRjLTkuOTk3LTkuOTk3LTkuOTk3LTI2LjIwNiAwLTM2LjIwNGwzNi4yMDMtMzYuMjA0YzkuOTk3LTkuOTk4IDI2LjIwNy05Ljk5OCAzNi4yMDQgMEwxOTIgMzEyLjY5IDQzMi4wOTUgNzIuNTk2YzkuOTk3LTkuOTk3IDI2LjIwNy05Ljk5NyAzNi4yMDQgMGwzNi4yMDMgMzYuMjA0YzkuOTk3IDkuOTk3IDkuOTk3IDI2LjIwNiAwIDM2LjIwNGwtMjk0LjQgMjk0LjQwMWMtOS45OTggOS45OTctMjYuMjA3IDkuOTk3LTM2LjIwNC0uMDAxeicvPjwvc3ZnPg==");
+}
+
+.nxe-toast-warning {
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1NzYgNTEyJyB3aWR0aD0nNTc2JyBoZWlnaHQ9JzUxMic+PHBhdGggZmlsbD0ncmdiKDI1NSwyNTUsMjU1KScgZD0nTTU2OS41MTcgNDQwLjAxM0M1ODcuOTc1IDQ3Mi4wMDcgNTY0LjgwNiA1MTIgNTI3Ljk0IDUxMkg0OC4wNTRjLTM2LjkzNyAwLTU5Ljk5OS00MC4wNTUtNDEuNTc3LTcxLjk4N0wyNDYuNDIzIDIzLjk4NWMxOC40NjctMzIuMDA5IDY0LjcyLTMxLjk1MSA4My4xNTQgMGwyMzkuOTQgNDE2LjAyOHpNMjg4IDM1NGMtMjUuNDA1IDAtNDYgMjAuNTk1LTQ2IDQ2czIwLjU5NSA0NiA0NiA0NiA0Ni0yMC41OTUgNDYtNDYtMjAuNTk1LTQ2LTQ2LTQ2em0tNDMuNjczLTE2NS4zNDZsNy40MTggMTM2Yy4zNDcgNi4zNjQgNS42MDkgMTEuMzQ2IDExLjk4MiAxMS4zNDZoNDguNTQ2YzYuMzczIDAgMTEuNjM1LTQuOTgyIDExLjk4Mi0xMS4zNDZsNy40MTgtMTM2Yy4zNzUtNi44NzQtNS4wOTgtMTIuNjU0LTExLjk4Mi0xMi42NTRoLTYzLjM4M2MtNi44ODQgMC0xMi4zNTYgNS43OC0xMS45ODEgMTIuNjU0eicvPjwvc3ZnPg==");
+}
+
+.nxe-toast-container.toast-top-center .nxe-toast,
+.nxe-toast-container.toast-bottom-center .nxe-toast {
+    width: 300px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.nxe-toast-container.toast-top-full-width .nxe-toast,
+.nxe-toast-container.toast-bottom-full-width .nxe-toast {
+    width: 96%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.nxe-toast {
+    // Required for parity, not a change to it. The original toast was a <div>; this one is a
+    // custom element, and an unknown element is `display: inline` by default — which would make
+    // the `width`, `padding` and `margin` above do nothing at all, silently.
+    display: block;
+
+    background-color: var(--nxe-ui-toast-bg, #030303);
+    pointer-events: auto;
+
+    // ngx-toastr animated between `inactive`/`active`/`removed` states that differ only in
+    // opacity, over 300ms ease-in. No movement — matching that exactly, not improving on it.
+    opacity: 1;
+    transition: opacity 300ms ease-in;
+}
+
+.nxe-toast-entering,
+.nxe-toast-leaving {
+    opacity: 0;
+}
+
+.nxe-toast-success {
+    background-color: var(--nxe-ui-toast-success-bg, #51a351);
+}
+
+.nxe-toast-error {
+    background-color: var(--nxe-ui-toast-error-bg, #bd362f);
+}
+
+.nxe-toast-info {
+    background-color: var(--nxe-ui-toast-info-bg, #2f96b4);
+}
+
+.nxe-toast-warning {
+    background-color: var(--nxe-ui-toast-warning-bg, #f89406);
+}
+
+.nxe-toast-progress {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 4px;
+    background-color: var(--nxe-ui-toast-ink, #000000);
+    opacity: 0.4;
+}
+
+/* Responsive Design */
+@media all and (max-width: 240px) {
+    .nxe-toast-container .nxe-toast.div {
+        padding: 8px 8px 8px 50px;
+        width: 11em;
+    }
+
+    .nxe-toast-container .nxe-toast-close {
+        right: -0.2em;
+        top: -0.2em;
+    }
+}
+
+@media all and (min-width: 241px) and (max-width: 480px) {
+    .nxe-toast-container .nxe-toast.div {
+        padding: 8px 8px 8px 50px;
+        width: 18em;
+    }
+
+    .nxe-toast-container .nxe-toast-close {
+        right: -0.2em;
+        top: -0.2em;
+    }
+}
+
+@media all and (min-width: 481px) and (max-width: 768px) {
+    .nxe-toast-container .nxe-toast.div {
+        padding: 15px 15px 15px 50px;
+        width: 25em;
+    }
+}