nexus-shared 1.1.21 → 3.0.0

package/src/Styles/Nexus.Base.css

@@ -0,0 +1,70 @@
+/* Page defaults and small shared utilities. */
+@layer nexus.base {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  body {
+    margin: 0;
+    background: var(--nx-bg);
+    color: var(--nx-text);
+    font: var(--nx-text-md) / var(--nx-leading) var(--nx-font);
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+  }
+
+  button,
+  input,
+  select,
+  textarea {
+    font: inherit;
+    color: inherit;
+  }
+
+  /* Nepali text takes a font that has Devanagari glyphs, digits included. */
+  :lang(ne) {
+    font-family: var(--nx-font-devanagari);
+  }
+
+  :focus-visible {
+    outline: 2px solid var(--nx-primary);
+    outline-offset: 2px;
+  }
+
+  /* Hidden on screen but still read by screen readers and reachable with the keyboard. */
+  .nx-visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* Icons sit on the text baseline and never shrink inside flex rows. */
+  .nx-icon {
+    flex-shrink: 0;
+    vertical-align: -0.125em;
+  }
+
+  .nx-spin {
+    animation: nx-spin 0.8s linear infinite;
+  }
+
+  @keyframes nx-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .nx-spin {
+      animation-duration: 2.4s;
+    }
+  }
+}

package/src/Styles/Nexus.Button.css

@@ -0,0 +1,153 @@
+@layer nexus.components {
+  .nx-btn {
+    --nx-btn-height: var(--nx-control-md);
+    --nx-btn-bg: var(--nx-surface);
+    --nx-btn-bg-hover: var(--nx-surface-hover);
+    --nx-btn-color: var(--nx-text);
+    --nx-btn-border: var(--nx-border-strong);
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--nx-space-2);
+    height: var(--nx-btn-height);
+    padding: 0 var(--nx-space-3);
+    border: 1px solid var(--nx-btn-border);
+    border-radius: var(--nx-radius);
+    background: var(--nx-btn-bg);
+    color: var(--nx-btn-color);
+    font-size: var(--nx-text-md);
+    font-weight: 500;
+    line-height: 1;
+    white-space: nowrap;
+    /* The same classes make a link look like a button, for a call to action that navigates. */
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+    box-shadow: var(--nx-shadow-sm);
+    transition:
+      background-color var(--nx-duration),
+      border-color var(--nx-duration),
+      color var(--nx-duration),
+      box-shadow var(--nx-duration),
+      transform var(--nx-duration);
+  }
+
+  .nx-btn .nx-icon {
+    width: 1.15em;
+    height: 1.15em;
+    vertical-align: 0;
+  }
+
+  .nx-btn:hover:not(:disabled) {
+    background: var(--nx-btn-bg-hover);
+  }
+
+  .nx-btn:active:not(:disabled) {
+    transform: translateY(1px);
+  }
+
+  .nx-btn:focus-visible {
+    outline: none;
+    box-shadow: var(--nx-focus-ring);
+  }
+
+  .nx-btn:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+    box-shadow: none;
+  }
+
+  .nx-btn[aria-busy="true"] {
+    cursor: progress;
+    opacity: 0.8;
+  }
+
+  /* Variants */
+  .nx-btn--primary {
+    --nx-btn-bg: var(--nx-primary-solid);
+    --nx-btn-bg-hover: var(--nx-primary-hover);
+    --nx-btn-color: var(--nx-primary-text);
+    --nx-btn-border: transparent;
+  }
+
+  .nx-btn--danger {
+    --nx-btn-bg: var(--nx-danger-solid);
+    --nx-btn-bg-hover: var(--nx-danger-hover);
+    --nx-btn-color: var(--nx-danger-text);
+    --nx-btn-border: transparent;
+  }
+
+  .nx-btn--ghost {
+    --nx-btn-bg: transparent;
+    --nx-btn-border: transparent;
+    box-shadow: none;
+  }
+
+  /*
+   * Hover tones: a secondary or ghost button stays neutral, then takes the tone on its border,
+   * a soft background, and its text while hovered or focused from the keyboard.
+   * Every tone meets WCAG AA contrast on its soft background (npm run check:themes).
+   */
+  .nx-btn--hover-primary {
+    --nx-btn-tone: var(--nx-primary);
+    --nx-btn-tone-soft: var(--nx-primary-soft);
+  }
+
+  .nx-btn--hover-danger {
+    --nx-btn-tone: var(--nx-danger);
+    --nx-btn-tone-soft: var(--nx-danger-soft);
+  }
+
+  .nx-btn--hover-success {
+    --nx-btn-tone: var(--nx-success);
+    --nx-btn-tone-soft: var(--nx-success-soft);
+  }
+
+  .nx-btn--hover-warning {
+    --nx-btn-tone: var(--nx-warning);
+    --nx-btn-tone-soft: var(--nx-warning-soft);
+  }
+
+  .nx-btn--hover-info {
+    --nx-btn-tone: var(--nx-info);
+    --nx-btn-tone-soft: var(--nx-info-soft);
+  }
+
+  :is(.nx-btn--secondary, .nx-btn--ghost):is(
+      .nx-btn--hover-primary,
+      .nx-btn--hover-danger,
+      .nx-btn--hover-success,
+      .nx-btn--hover-warning,
+      .nx-btn--hover-info
+    ):is(:hover, :focus-visible):not(:disabled) {
+    --nx-btn-bg: var(--nx-btn-tone-soft);
+    --nx-btn-bg-hover: var(--nx-btn-tone-soft);
+    --nx-btn-border: var(--nx-btn-tone);
+    --nx-btn-color: var(--nx-btn-tone);
+  }
+
+  /* Sizes */
+  .nx-btn--sm {
+    --nx-btn-height: var(--nx-control-sm);
+    padding: 0 var(--nx-space-2);
+    gap: 6px;
+    font-size: var(--nx-text-sm);
+  }
+
+  .nx-btn--lg {
+    --nx-btn-height: var(--nx-control-lg);
+    padding: 0 var(--nx-space-4);
+    font-size: var(--nx-text-lg);
+  }
+
+  .nx-btn--icon {
+    width: var(--nx-btn-height);
+    padding: 0;
+  }
+
+  .nx-btn--block {
+    display: flex;
+    width: 100%;
+  }
+}

package/src/Styles/Nexus.Calendar.css

@@ -0,0 +1,275 @@
+@layer nexus.components {
+  /*
+   * Calendar: a month grid of day buttons under a header of month and year menus. Cells touch along a row, so a
+   * range reads as one band; the chosen days are solid primary, today has a primary edge, and holidays are red.
+   * Nepali text carries lang="ne", which switches to a font with Devanagari glyphs (Nexus.Base.css).
+   */
+  .nx-cal {
+    --nx-cal-cell: 36px;
+    --nx-cal-font: var(--nx-text-sm);
+
+    display: inline-grid;
+    gap: var(--nx-space-2);
+    padding: var(--nx-space-2);
+    color: var(--nx-text);
+    font-size: var(--nx-cal-font);
+    line-height: 1.3;
+    user-select: none;
+  }
+
+  .nx-cal--sm {
+    --nx-cal-cell: 32px;
+  }
+
+  .nx-cal--lg {
+    --nx-cal-cell: 42px;
+    --nx-cal-font: var(--nx-text-md);
+  }
+
+  .nx-cal[data-disabled] {
+    opacity: 0.6;
+  }
+
+  /* One or more months side by side; each has its own header, and only the outer ones carry an arrow. */
+  .nx-cal__months {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--nx-space-4);
+  }
+
+  .nx-cal__month {
+    display: grid;
+    gap: var(--nx-space-2);
+  }
+
+  /* Header: previous, month and year menus, next */
+  .nx-cal__head {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+  }
+
+  .nx-cal__nav {
+    display: grid;
+    place-items: center;
+    flex-shrink: 0;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: 0;
+    border-radius: var(--nx-radius-sm);
+    background: none;
+    color: var(--nx-text-muted);
+    cursor: pointer;
+    transition:
+      background-color var(--nx-duration),
+      color var(--nx-duration);
+  }
+
+  .nx-cal__nav .nx-icon {
+    width: 18px;
+    height: 18px;
+    vertical-align: 0;
+  }
+
+  .nx-cal__nav:hover:not(:disabled) {
+    background: var(--nx-surface-hover);
+    color: var(--nx-text);
+  }
+
+  .nx-cal__nav:focus-visible {
+    outline: 2px solid var(--nx-primary);
+    outline-offset: -2px;
+  }
+
+  .nx-cal__nav:disabled {
+    opacity: 0.35;
+    cursor: default;
+  }
+
+  /* Keeps the menus centered in a month that has no arrow on that side. */
+  .nx-cal__nav--space {
+    visibility: hidden;
+  }
+
+  .nx-cal__menus {
+    display: flex;
+    flex: 1 1 auto;
+    justify-content: center;
+    gap: 2px;
+    min-width: 0;
+  }
+
+  /* A menu drawn as a title: no frame until hovered, its own small chevron. */
+  .nx-cal__select {
+    appearance: none;
+    max-width: 100%;
+    height: 28px;
+    padding: 0 18px 0 8px;
+    border: 0;
+    border-radius: var(--nx-radius-sm);
+    background:
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6-6'/%3E%3C/svg%3E")
+      no-repeat right 4px center / 12px;
+    color: var(--nx-text);
+    font-size: var(--nx-cal-font);
+    font-weight: 600;
+    cursor: pointer;
+    transition: background-color var(--nx-duration);
+  }
+
+  .nx-cal__select:hover:not(:disabled) {
+    background-color: var(--nx-surface-hover);
+  }
+
+  .nx-cal__select:focus-visible {
+    outline: 2px solid var(--nx-primary);
+    outline-offset: -2px;
+  }
+
+  .nx-cal__select:disabled {
+    cursor: default;
+  }
+
+  /* The menu's list takes the theme's colors in browsers that style it. */
+  .nx-cal__select option {
+    background: var(--nx-surface);
+    color: var(--nx-text);
+    font-weight: 400;
+  }
+
+  /* Grid */
+  .nx-cal__grid {
+    display: grid;
+    gap: 2px 0;
+  }
+
+  .nx-cal__row {
+    display: grid;
+    grid-template-columns: repeat(7, var(--nx-cal-cell));
+  }
+
+  .nx-cal__weekday {
+    display: grid;
+    place-items: center;
+    height: 26px;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    font-weight: 600;
+  }
+
+  .nx-cal__day {
+    position: relative;
+    display: grid;
+    place-items: center;
+    width: var(--nx-cal-cell);
+    height: var(--nx-cal-cell);
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: var(--nx-radius);
+    background: none;
+    color: var(--nx-text);
+    font: inherit;
+    font-variant-numeric: tabular-nums;
+    cursor: pointer;
+    transition:
+      background-color var(--nx-duration),
+      color var(--nx-duration);
+  }
+
+  .nx-cal__day--empty {
+    cursor: default;
+  }
+
+  .nx-cal__day:hover:not([aria-disabled], [aria-selected="true"]) {
+    background: var(--nx-surface-hover);
+  }
+
+  /* A ring that stays visible on a solid primary day. */
+  .nx-cal__day:focus-visible {
+    outline: none;
+    box-shadow:
+      0 0 0 2px var(--nx-surface),
+      0 0 0 4px var(--nx-primary);
+    z-index: 1;
+  }
+
+  .nx-cal__day[data-outside] {
+    color: var(--nx-text-subtle);
+  }
+
+  .nx-cal__weekday[data-weekend],
+  .nx-cal__day[data-weekend]:not([data-outside]) {
+    color: var(--nx-danger);
+  }
+
+  .nx-cal__day[data-today] {
+    border-color: var(--nx-primary);
+    font-weight: 600;
+  }
+
+  /* Between the two ends of a range: a soft band across the row. */
+  .nx-cal__day[data-in-range] {
+    border-radius: 0;
+    background: var(--nx-primary-soft);
+  }
+
+  .nx-cal__day[data-range-start] {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .nx-cal__day[data-range-end] {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .nx-cal__day[aria-selected="true"] {
+    border-color: var(--nx-primary-solid);
+    background: var(--nx-primary-solid);
+    color: var(--nx-primary-text);
+    font-weight: 600;
+  }
+
+  .nx-cal__day[aria-disabled="true"] {
+    color: var(--nx-text-subtle);
+    opacity: 0.45;
+    cursor: default;
+  }
+
+  .nx-cal__day[aria-disabled="true"][aria-selected="true"] {
+    opacity: 0.7;
+  }
+
+  /* Footer */
+  .nx-cal__foot {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--nx-space-2);
+    padding-top: var(--nx-space-1);
+    border-top: 1px solid var(--nx-border);
+  }
+
+  /* Date picker: the box's text lines digits up, and its calendar opens in a popover placed by the component. */
+  .nx-field__control--date {
+    font-variant-numeric: tabular-nums;
+  }
+
+  .nx-date-popover {
+    position: fixed;
+    inset: auto;
+    padding: 0;
+  }
+
+  .nx-field__action--calendar[aria-expanded="true"] {
+    color: var(--nx-field-accent);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .nx-cal__day,
+    .nx-cal__nav,
+    .nx-cal__select {
+      transition: none;
+    }
+  }
+}