nexus-shared 1.1.21 → 3.0.0

package/src/Styles/Nexus.Toast.css

@@ -0,0 +1,265 @@
+@layer nexus.components {
+  /*
+   * Toasts: each one is a manual popover, fixed at its edge and stacked by --nx-toast-offset (set by the Toaster).
+   * The panel is raised like a popover; the tone shows in the icon and in the progress line along the bottom edge,
+   * which pauses while the pointer or the focus is on the toast.
+   */
+  .nx-toaster {
+    display: contents;
+  }
+
+  .nx-toast {
+    --nx-toast-accent: var(--nx-primary);
+    --nx-toast-offset: 0px;
+    --nx-toast-edge: 16px;
+
+    position: fixed;
+    inset: auto;
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+    width: min(360px, calc(100% - 2 * var(--nx-toast-edge)));
+    margin: 0;
+    padding: 12px 12px 12px 14px;
+    overflow: hidden;
+    border: 1px solid var(--nx-border);
+    border-radius: var(--nx-radius-lg);
+    background: light-dark(var(--nx-surface), var(--nx-surface-2));
+    color: var(--nx-text);
+    font-size: var(--nx-text-md);
+    box-shadow: var(--nx-shadow);
+    pointer-events: auto;
+    transition:
+      top 220ms cubic-bezier(0.2, 0, 0, 1),
+      bottom 220ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  .nx-toast:popover-open {
+    animation: nx-toast-in 220ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  .nx-toast--closing:popover-open {
+    animation: nx-toast-out 180ms ease-in forwards;
+    pointer-events: none;
+  }
+
+  /* Positions: the offset counts from the chosen edge, newest nearest to it. */
+  .nx-toast--top-right,
+  .nx-toast--top-center,
+  .nx-toast--top-left {
+    top: calc(var(--nx-toast-edge) + var(--nx-toast-offset));
+  }
+
+  .nx-toast--bottom-right,
+  .nx-toast--bottom-center,
+  .nx-toast--bottom-left {
+    bottom: calc(var(--nx-toast-edge) + var(--nx-toast-offset));
+  }
+
+  .nx-toast--top-right,
+  .nx-toast--bottom-right {
+    right: var(--nx-toast-edge);
+  }
+
+  /* Minimized popups wait at the bottom right; toasts there stack above them (the dock sets --nx-dock-space). */
+  .nx-toast--bottom-right {
+    bottom: calc(var(--nx-toast-edge) + var(--nx-toast-offset) + var(--nx-dock-space, 0px));
+  }
+
+  .nx-toast--top-left,
+  .nx-toast--bottom-left {
+    left: var(--nx-toast-edge);
+  }
+
+  .nx-toast--top-center,
+  .nx-toast--bottom-center {
+    left: 50%;
+    translate: -50% 0;
+  }
+
+  @keyframes nx-toast-in {
+    from {
+      opacity: 0;
+      transform: translateY(-8px) scale(0.98);
+    }
+  }
+
+  .nx-toast--bottom-right:popover-open,
+  .nx-toast--bottom-center:popover-open,
+  .nx-toast--bottom-left:popover-open {
+    animation-name: nx-toast-in-up;
+  }
+
+  @keyframes nx-toast-in-up {
+    from {
+      opacity: 0;
+      transform: translateY(8px) scale(0.98);
+    }
+  }
+
+  @keyframes nx-toast-out {
+    to {
+      opacity: 0;
+      transform: scale(0.96);
+    }
+  }
+
+  .nx-toast--closing.nx-toast--bottom-right:popover-open,
+  .nx-toast--closing.nx-toast--bottom-center:popover-open,
+  .nx-toast--closing.nx-toast--bottom-left:popover-open {
+    animation-name: nx-toast-out;
+  }
+
+  /* Tones */
+  .nx-toast--info {
+    --nx-toast-accent: var(--nx-info);
+  }
+
+  .nx-toast--success {
+    --nx-toast-accent: var(--nx-success);
+  }
+
+  .nx-toast--warning {
+    --nx-toast-accent: var(--nx-warning);
+  }
+
+  .nx-toast--danger {
+    --nx-toast-accent: var(--nx-danger);
+  }
+
+  .nx-toast__icon {
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: 20px;
+    height: 20px;
+    margin-top: 1px;
+    color: var(--nx-toast-accent);
+  }
+
+  .nx-toast__icon .nx-icon {
+    width: 20px;
+    height: 20px;
+    vertical-align: 0;
+  }
+
+  .nx-toast--neutral .nx-toast__icon {
+    color: var(--nx-text-muted);
+  }
+
+  .nx-toast__body {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding-top: 1px;
+  }
+
+  .nx-toast__title {
+    font-weight: 600;
+    line-height: 1.35;
+    overflow-wrap: anywhere;
+  }
+
+  .nx-toast__message {
+    margin-top: 2px;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-sm);
+    line-height: 1.45;
+    overflow-wrap: anywhere;
+  }
+
+  .nx-toast__action {
+    flex-shrink: 0;
+    align-self: center;
+    height: 28px;
+    margin: 0;
+    padding: 0 10px;
+    border: 1px solid var(--nx-border-strong);
+    border-radius: var(--nx-radius);
+    background: var(--nx-surface);
+    color: var(--nx-text);
+    font: inherit;
+    font-size: var(--nx-text-sm);
+    font-weight: 500;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+  .nx-toast__action:hover {
+    border-color: var(--nx-toast-accent);
+    color: var(--nx-toast-accent);
+  }
+
+  .nx-toast__action:focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  .nx-toast__close {
+    display: grid;
+    flex-shrink: 0;
+    place-items: center;
+    width: 24px;
+    height: 24px;
+    margin: -2px -2px 0 0;
+    padding: 0;
+    border: 0;
+    border-radius: var(--nx-radius-sm);
+    background: none;
+    color: var(--nx-text-subtle);
+    cursor: pointer;
+  }
+
+  .nx-toast__close:hover {
+    background: var(--nx-surface-hover);
+    color: var(--nx-text);
+  }
+
+  .nx-toast__close:focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  .nx-toast__close .nx-icon {
+    width: 16px;
+    height: 16px;
+    vertical-align: 0;
+  }
+
+  /* The time left, shrinking along the bottom edge; its end closes the toast. */
+  .nx-toast__progress {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 3px;
+    background: var(--nx-toast-accent);
+    opacity: 0.7;
+    transform-origin: left;
+    animation: nx-toast-progress linear forwards;
+  }
+
+  .nx-toast:is(:hover, :focus-within) .nx-toast__progress {
+    animation-play-state: paused;
+  }
+
+  @keyframes nx-toast-progress {
+    from {
+      transform: scaleX(1);
+    }
+
+    to {
+      transform: scaleX(0);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .nx-toast {
+      transition: none;
+    }
+
+    .nx-toast:popover-open,
+    .nx-toast--closing:popover-open {
+      animation: none;
+    }
+  }
+}

package/src/Styles/Nexus.Tokens.css

@@ -0,0 +1,72 @@
+/*
+ * Design tokens. Components use only these variables. Colors come from the active theme (Nexus.Themes.css);
+ * this file holds everything else, plus the colors derived from a theme's palette.
+ */
+@layer nexus.tokens {
+  :root {
+    /* Light, dark, or the system setting when data-nx-mode is not set. */
+    color-scheme: light dark;
+
+    /* Type */
+    --nx-font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
+    --nx-font-mono: "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;
+    /* Nepali text (lang="ne"): system fonts with Devanagari glyphs; the page font has none. */
+    --nx-font-devanagari: "Noto Sans Devanagari", "Nirmala UI", "Kohinoor Devanagari", "Devanagari Sangam MN", Mangal, var(--nx-font);
+    --nx-text-xs: 0.75rem;
+    --nx-text-sm: 0.8125rem;
+    --nx-text-md: 0.875rem;
+    --nx-text-lg: 1rem;
+    --nx-text-xl: 1.25rem;
+    --nx-text-2xl: 1.625rem;
+    --nx-leading: 1.5;
+
+    /* Shape and spacing */
+    --nx-radius-sm: 4px;
+    --nx-radius: 6px;
+    --nx-radius-lg: 10px;
+    --nx-radius-full: 999px;
+    --nx-space-1: 4px;
+    --nx-space-2: 8px;
+    --nx-space-3: 12px;
+    --nx-space-4: 16px;
+    --nx-space-5: 20px;
+    --nx-space-6: 24px;
+    --nx-space-8: 32px;
+    --nx-control-sm: 28px;
+    --nx-control-md: 34px;
+    --nx-control-lg: 40px;
+
+    /* Motion */
+    --nx-duration: 120ms;
+  }
+
+  :root[data-nx-mode="light"] {
+    color-scheme: light;
+  }
+
+  :root[data-nx-mode="dark"] {
+    color-scheme: dark;
+  }
+
+  /*
+   * Derived colors, declared wherever a theme applies, so an element with its own data-nx-theme
+   * (a theme preview, for example) gets hover and soft colors from that theme.
+   * Mixing toward the text color darkens in light mode and lightens in dark mode.
+   */
+  :root,
+  [data-nx-theme] {
+    --nx-primary-hover: color-mix(in oklab, var(--nx-primary-solid), var(--nx-text) 16%);
+    --nx-primary-soft: color-mix(in oklab, var(--nx-primary) 14%, var(--nx-surface));
+    --nx-danger-hover: color-mix(in oklab, var(--nx-danger-solid), var(--nx-text) 16%);
+    --nx-danger-soft: color-mix(in oklab, var(--nx-danger) 14%, var(--nx-surface));
+    --nx-success-soft: color-mix(in oklab, var(--nx-success) 14%, var(--nx-surface));
+    --nx-warning-soft: color-mix(in oklab, var(--nx-warning) 14%, var(--nx-surface));
+    --nx-info-soft: color-mix(in oklab, var(--nx-info) 14%, var(--nx-surface));
+
+    --nx-focus-ring: 0 0 0 3px color-mix(in oklab, var(--nx-primary) 35%, transparent);
+    --nx-shadow-sm: 0 1px 2px light-dark(rgb(16 24 40 / 0.06), rgb(0 0 0 / 0.4));
+    --nx-shadow:
+      0 4px 14px light-dark(rgb(16 24 40 / 0.08), rgb(0 0 0 / 0.45)),
+      0 1px 3px light-dark(rgb(16 24 40 / 0.06), rgb(0 0 0 / 0.35));
+  }
+}