nexus-shared 1.1.20 → 2.0.0

package/src/Styles/Nexus.RichText.css

@@ -0,0 +1,463 @@
+@layer nexus.components {
+  /*
+   * Rich text content (RichTextView, and the editor's text). Sizes are in em, so the text follows the size of the
+   * element it sits in. Colors in the text are stored for light pages, emails, and print; in a dark theme the
+   * palette's text colors show as lighter twins, and highlights keep dark text.
+   */
+  .nx-richtext {
+    color: var(--nx-text);
+    font-size: var(--nx-text-md);
+    line-height: 1.65;
+    overflow-wrap: break-word;
+  }
+
+  .nx-richtext > :first-child {
+    margin-top: 0;
+  }
+
+  .nx-richtext > :last-child {
+    margin-bottom: 0;
+  }
+
+  .nx-richtext :is(p, ul, ol, blockquote, pre, hr, table) {
+    margin: 0 0 0.9em;
+  }
+
+  .nx-richtext :is(h1, h2, h3, h4, h5, h6) {
+    margin: 1.3em 0 0.5em;
+    font-weight: 650;
+    line-height: 1.3;
+    letter-spacing: -0.01em;
+  }
+
+  .nx-richtext h1 {
+    font-size: 1.6em;
+  }
+
+  .nx-richtext h2 {
+    font-size: 1.3em;
+  }
+
+  .nx-richtext h3 {
+    font-size: 1.12em;
+  }
+
+  .nx-richtext :is(h4, h5, h6) {
+    font-size: 1em;
+  }
+
+  .nx-richtext a {
+    color: var(--nx-primary);
+    text-decoration: underline;
+    text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
+    text-underline-offset: 0.18em;
+  }
+
+  .nx-richtext a:hover {
+    text-decoration-color: currentColor;
+  }
+
+  .nx-richtext :is(ul, ol) {
+    padding-left: 1.6em;
+  }
+
+  .nx-richtext li + li {
+    margin-top: 0.25em;
+  }
+
+  .nx-richtext li > :is(ul, ol) {
+    margin: 0.25em 0 0;
+  }
+
+  /* Pastes from Google Docs put a paragraph in each list item. */
+  .nx-richtext li > p {
+    margin: 0;
+  }
+
+  /*
+   * A quote keeps the text color: the browser copies a quote's own color onto text that leaves it (as a font color the
+   * value would keep), so the bar alone marks it.
+   */
+  .nx-richtext blockquote {
+    padding: 0 0 0 1em;
+    border-left: 3px solid var(--nx-border-strong);
+  }
+
+  .nx-richtext code {
+    padding: 0.12em 0.38em;
+    border-radius: var(--nx-radius-sm);
+    background: color-mix(in oklab, var(--nx-text) 8%, transparent);
+    font-family: var(--nx-font-mono);
+    font-size: 0.875em;
+  }
+
+  .nx-richtext pre {
+    overflow: auto;
+    padding: 0.8em 1em;
+    border-radius: var(--nx-radius);
+    background: color-mix(in oklab, var(--nx-text) 5%, transparent);
+    font-family: var(--nx-font-mono);
+    font-size: 0.86em;
+    line-height: 1.5;
+    white-space: pre-wrap;
+  }
+
+  .nx-richtext pre code {
+    padding: 0;
+    background: none;
+    font-size: 1em;
+  }
+
+  .nx-richtext hr {
+    height: 0;
+    margin-block: 1.4em;
+    border: 0;
+    border-top: 1px solid var(--nx-border-strong);
+  }
+
+  .nx-richtext img {
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--nx-radius-sm);
+    vertical-align: middle;
+  }
+
+  .nx-richtext table {
+    display: block;
+    max-width: 100%;
+    overflow-x: auto;
+    border-collapse: collapse;
+    font-size: 0.95em;
+  }
+
+  .nx-richtext caption {
+    padding-bottom: 0.4em;
+    color: var(--nx-text-muted);
+    text-align: left;
+  }
+
+  .nx-richtext :is(th, td) {
+    min-width: 3em;
+    padding: 0.4em 0.8em;
+    border: 1px solid var(--nx-border-strong);
+    text-align: left;
+    vertical-align: top;
+  }
+
+  .nx-richtext th {
+    background: color-mix(in oklab, var(--nx-text) 4%, transparent);
+    font-weight: 600;
+  }
+
+  .nx-richtext :is(th, td) > :last-child {
+    margin-bottom: 0;
+  }
+
+  /* Highlights are light in every theme, so their text stays dark. */
+  .nx-richtext :is(mark, span[style*="background-color"]:not([style*="transparent"])) {
+    border-radius: 2px;
+    color: #1f2328;
+  }
+
+  .nx-richtext mark:not([style]) {
+    background: #fef08a;
+  }
+
+  .nx-richtext__empty {
+    margin: 0;
+    color: var(--nx-text-muted);
+    font-style: italic;
+  }
+
+  /* The palette's text colors: stored dark enough for any light page and paper, shown lighter in a dark theme. */
+  .nx-richtext :is([style*="color: #4b5563"], [style*="color: rgb(75, 85, 99)"]):not([style*="background-color"], mark *, [style*="background-color"] *) {
+    color: light-dark(#4b5563, #9ca3af) !important;
+  }
+
+  .nx-richtext :is([style*="color: #b91c1c"], [style*="color: rgb(185, 28, 28)"]):not([style*="background-color"], mark *, [style*="background-color"] *) {
+    color: light-dark(#b91c1c, #f87171) !important;
+  }
+
+  .nx-richtext :is([style*="color: #9a3412"], [style*="color: rgb(154, 52, 18)"]):not([style*="background-color"], mark *, [style*="background-color"] *) {
+    color: light-dark(#9a3412, #fb923c) !important;
+  }
+
+  .nx-richtext :is([style*="color: #92400e"], [style*="color: rgb(146, 64, 14)"]):not([style*="background-color"], mark *, [style*="background-color"] *) {
+    color: light-dark(#92400e, #fbbf24) !important;
+  }
+
+  .nx-richtext :is([style*="color: #166534"], [style*="color: rgb(22, 101, 52)"]):not([style*="background-color"], mark *, [style*="background-color"] *) {
+    color: light-dark(#166534, #4ade80) !important;
+  }
+
+  .nx-richtext :is([style*="color: #0f766e"], [style*="color: rgb(15, 118, 110)"]):not([style*="background-color"], mark *, [style*="background-color"] *) {
+    color: light-dark(#0f766e, #2dd4bf) !important;
+  }
+
+  .nx-richtext :is([style*="color: #1d4ed8"], [style*="color: rgb(29, 78, 216)"]):not([style*="background-color"], mark *, [style*="background-color"] *) {
+    color: light-dark(#1d4ed8, #60a5fa) !important;
+  }
+
+  .nx-richtext :is([style*="color: #7e22ce"], [style*="color: rgb(126, 34, 206)"]):not([style*="background-color"], mark *, [style*="background-color"] *) {
+    color: light-dark(#7e22ce, #c084fc) !important;
+  }
+
+  .nx-richtext :is([style*="color: #be185d"], [style*="color: rgb(190, 24, 93)"]):not([style*="background-color"], mark *, [style*="background-color"] *) {
+    color: light-dark(#be185d, #f472b6) !important;
+  }
+
+  /*
+   * Editor: the text inside the editor frame (Nexus.Editor.css), which brings the bar, the height handle, and
+   * full screen.
+   */
+  .nx-rte__content {
+    position: relative;
+    min-width: 0;
+    min-height: 0;
+    padding: 10px var(--nx-space-4);
+    overflow: auto;
+    overscroll-behavior: contain;
+    outline: none;
+    cursor: text;
+  }
+
+  .nx-field[data-readonly] .nx-rte__content {
+    cursor: default;
+  }
+
+  .nx-field[data-disabled] .nx-rte__content {
+    cursor: not-allowed;
+  }
+
+  .nx-rte__content[data-empty]::before {
+    content: attr(data-placeholder);
+    position: absolute;
+    top: 10px;
+    right: var(--nx-space-4);
+    left: var(--nx-space-4);
+    color: var(--nx-text-subtle);
+    pointer-events: none;
+  }
+
+  .nx-editor__body[data-mode="html"] .nx-rte__content {
+    display: none;
+  }
+
+  /* Empty cells stay easy to click into. */
+  .nx-rte__content :is(th, td) {
+    min-width: 4em;
+    height: 1.65em;
+  }
+
+  /* The browser quotes by indenting, with margins of its own; the editor shows the quote the value saves. */
+  .nx-rte__content blockquote[style] {
+    margin: 0 0 0.9em !important;
+    padding: 0 0 0 1em !important;
+    border-left: 3px solid var(--nx-border-strong) !important;
+  }
+
+  .nx-rte__content blockquote[style]:last-child {
+    margin-bottom: 0 !important;
+  }
+
+  .nx-rte .nx-rte__source {
+    height: 100%;
+    min-height: 0;
+    padding: 10px var(--nx-space-3);
+    border-radius: 0;
+    font-family: var(--nx-font-mono);
+    font-size: calc(var(--nx-field-font) - 1px);
+    line-height: 1.55;
+    white-space: pre;
+    overflow-wrap: normal;
+    tab-size: 2;
+    resize: none;
+  }
+
+  /* The value the form sends: kept in the page for the form and its rules, never seen. */
+  .nx-rte__value {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    border: 0;
+    opacity: 0;
+    clip-path: inset(50%);
+    pointer-events: none;
+    resize: none;
+  }
+
+  /* The text's thin scrollbar, as the text area's (Nexus.Input.css). */
+  .nx-rte__content::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  .nx-rte__content::-webkit-scrollbar-track,
+  .nx-rte__content::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  .nx-rte__content::-webkit-scrollbar-thumb {
+    border: 2px solid transparent;
+    border-radius: var(--nx-radius-full);
+    background: var(--nx-field-scrollbar) padding-box;
+  }
+
+  .nx-rte__content::-webkit-scrollbar-thumb:hover {
+    background-color: var(--nx-field-scrollbar-hover);
+  }
+
+  @supports not selector(::-webkit-scrollbar) {
+    .nx-rte__content {
+      scrollbar-width: thin;
+      scrollbar-color: var(--nx-field-scrollbar) transparent;
+    }
+  }
+
+  /* Tokens: values a template fills in, edited as one piece. */
+  .nx-rte__token {
+    padding: 0.05em 0.45em;
+    margin: 0 1px;
+    border-radius: var(--nx-radius-sm);
+    background: color-mix(in oklab, var(--nx-primary) 16%, transparent);
+    color: var(--nx-text);
+    font-size: 0.9em;
+    font-weight: 500;
+    white-space: nowrap;
+    cursor: default;
+    user-select: all;
+  }
+
+  .nx-rte__token[data-unknown] {
+    background: color-mix(in oklab, var(--nx-danger) 14%, transparent);
+    text-decoration: underline wavy color-mix(in oklab, var(--nx-danger) 80%, transparent);
+    text-underline-offset: 0.2em;
+  }
+
+  /* Toolbar buttons with a label: the text style, and the field menu. */
+  .nx-editor__tool:is(.nx-rte__block, .nx-rte__insert) {
+    display: inline-flex;
+    gap: 4px;
+    width: auto;
+    padding: 0 6px;
+    color: var(--nx-text);
+    font: inherit;
+    font-size: var(--nx-text-sm);
+    white-space: nowrap;
+  }
+
+  .nx-editor__tool.nx-rte__block {
+    justify-content: space-between;
+    min-width: 7.5em;
+    padding-left: 8px;
+  }
+
+  .nx-editor__tool:is(.nx-rte__block, .nx-rte__insert) .nx-icon {
+    flex-shrink: 0;
+    color: var(--nx-text-muted);
+  }
+
+  @container nx-editor (width < 420px) {
+    .nx-rte__insert-label {
+      display: none;
+    }
+  }
+
+  /* Panels of the toolbar: colors and the link box. Two classes, to win over the shared popover (Nexus.Theme.Picker.css). */
+  .nx-popover.nx-rte-panel {
+    position: fixed;
+    inset: auto;
+    padding: 12px;
+  }
+
+  .nx-rte-colors {
+    display: grid;
+    gap: 12px;
+  }
+
+  .nx-rte-colors__title {
+    margin-bottom: 6px;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    font-weight: 600;
+  }
+
+  .nx-rte-colors__grid {
+    display: grid;
+    grid-template-columns: repeat(5, 30px);
+    gap: 6px;
+  }
+
+  .nx-rte-colors__swatch {
+    display: grid;
+    place-items: center;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    border: 0;
+    border-radius: var(--nx-radius);
+    cursor: pointer;
+    transition: box-shadow var(--nx-duration);
+  }
+
+  /* Text colors: the letter A in the color, on a light tint of the panel. */
+  .nx-rte-colors__swatch[data-kind="color"] {
+    background: color-mix(in oklab, var(--nx-text) 6%, transparent);
+    color: var(--nx-swatch, var(--nx-text));
+    font-size: 15px;
+    font-weight: 700;
+  }
+
+  .nx-rte-colors__swatch[data-kind="color"][data-none]::before {
+    content: "A";
+  }
+
+  /* Highlights: the color itself, with an edge so the lightest ones show on a light panel. */
+  .nx-rte-colors__swatch[data-kind="background"] {
+    background: var(--nx-swatch, transparent);
+    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--nx-text) 18%, transparent);
+  }
+
+  .nx-rte-colors__swatch[data-kind="background"][data-none] {
+    background: linear-gradient(to top right, transparent calc(50% - 1px), var(--nx-danger) calc(50% - 1px), var(--nx-danger) calc(50% + 1px), transparent calc(50% + 1px));
+  }
+
+  .nx-rte-colors__swatch:hover {
+    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--nx-text) 40%, transparent);
+  }
+
+  .nx-rte-colors__swatch[aria-pressed="true"] {
+    box-shadow:
+      0 0 0 2px light-dark(var(--nx-surface), var(--nx-surface-2)),
+      0 0 0 4px var(--nx-primary);
+  }
+
+  .nx-rte-colors__swatch:focus-visible {
+    outline: 2px solid var(--nx-primary);
+    outline-offset: 2px;
+  }
+
+  .nx-rte-link {
+    display: grid;
+    gap: 10px;
+    width: min(320px, calc(100vw - 40px));
+  }
+
+  .nx-rte-link__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .nx-rte-link__spacer {
+    flex: 1 1 auto;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .nx-rte-colors__swatch {
+      transition: none;
+    }
+  }
+}