stilo-editor 0.0.0-stage → 0.1.0

package/dist/style.css

@@ -0,0 +1,797 @@
+/* Stilo content styles: ProseMirror base CSS and defaults for the editable content. */
+
+/*
+ * prosemirror-view/style/prosemirror.css and prosemirror-gapcursor/style/gapcursor.css.
+ * Copyright (C) 2015-2017 by Marijn Haverbeke and others, MIT license. Adapted to the lint
+ * rules: no `white-space: pre-wrap` fallback before `break-spaces`, and the separator image
+ * rule gains specificity instead of `!important`.
+ */
+.ProseMirror {
+  position: relative;
+}
+
+.ProseMirror {
+  word-wrap: break-word;
+  white-space: break-spaces;
+  -webkit-font-variant-ligatures: none;
+  font-variant-ligatures: none;
+  font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
+}
+
+.ProseMirror pre {
+  white-space: pre-wrap;
+}
+
+.ProseMirror li {
+  position: relative;
+}
+
+.ProseMirror-hideselection *::selection {
+  background: transparent;
+}
+.ProseMirror-hideselection *::-moz-selection {
+  background: transparent;
+}
+.ProseMirror-hideselection {
+  caret-color: transparent;
+}
+
+/* See https://code.haverbeke.berlin/prosemirror/prosemirror/issues/1421#issuecomment-1759320191 */
+.ProseMirror [draggable][contenteditable="false"] {
+  user-select: text;
+}
+
+.ProseMirror-selectednode {
+  outline: 2px solid #8cf;
+}
+
+/* Make sure li selections wrap around markers */
+
+li.ProseMirror-selectednode {
+  outline: none;
+}
+
+li.ProseMirror-selectednode:after {
+  content: "";
+  position: absolute;
+  left: -32px;
+  right: -2px;
+  top: -2px;
+  bottom: -2px;
+  border: 2px solid #8cf;
+  pointer-events: none;
+}
+
+/* Protect against generic img rules */
+
+.ProseMirror img.ProseMirror-separator {
+  display: inline;
+  border: none;
+  margin: 0;
+}
+
+.ProseMirror-gapcursor {
+  display: none;
+  pointer-events: none;
+  position: absolute;
+}
+
+.ProseMirror-gapcursor:after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: -2px;
+  width: 20px;
+  border-top: 1px solid black;
+  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
+}
+
+@keyframes ProseMirror-cursor-blink {
+  to {
+    visibility: hidden;
+  }
+}
+
+.ProseMirror-focused .ProseMirror-gapcursor {
+  display: block;
+}
+
+/* Stilo content defaults */
+
+/* Lists: list items hold paragraphs, which must not add their own margins. */
+.stilo-content ul,
+.stilo-content ol {
+  margin: 0.5em 0;
+  padding-left: 1.75em;
+}
+
+.stilo-content li > p,
+.stilo-content li > ul,
+.stilo-content li > ol {
+  margin: 0;
+}
+
+.stilo-content blockquote {
+  margin: 0.5em 0;
+  padding-left: 1em;
+  border-left: 3px solid var(--stilo-color-border, #d1d9e0);
+  color: var(--stilo-color-muted, #59636e);
+}
+
+.stilo-content hr {
+  margin: 1em 0;
+  border: none;
+  border-top: 1px solid var(--stilo-color-border, #d1d9e0);
+}
+
+.stilo-content code {
+  padding: 0.1em 0.3em;
+  border-radius: 0.25em;
+  background: var(--stilo-color-hover, #eef1f4);
+  font-family: ui-monospace, monospace;
+  font-size: 0.9em;
+}
+
+/* Placeholder: shown only while the content is editable. */
+.stilo-content[contenteditable="true"] .stilo-placeholder::before {
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  color: var(--stilo-color-muted, #59636e);
+  pointer-events: none;
+}
+
+/*
+ * Large documents (ADR 0003): the browser skips style, layout and paint of the top-level blocks
+ * outside the viewport. Real typing in 10k paragraphs went from 144 ms to 24 ms per key (median,
+ * Chromium). A skipped block is 3em tall until it has been rendered once.
+ */
+.stilo-content > * {
+  content-visibility: auto;
+  contain-intrinsic-size: auto 3em;
+}
+
+/* Containment stops margins from collapsing through a block: trim them inside a blockquote. */
+.stilo-content blockquote > :first-child {
+  margin-top: 0;
+}
+
+.stilo-content blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+/* Stilo default UI styles. */
+
+/*
+ * Default values of the custom properties (docs/UI.md §7). `:where()` has no specificity, so any
+ * rule of the host page that sets them wins, whatever the order of the stylesheets.
+ */
+:where(:root) {
+  --stilo-font-family: system-ui, sans-serif;
+  --stilo-font-size: 14px;
+
+  --stilo-color-text: #1f2328;
+  --stilo-color-muted: #59636e;
+  --stilo-color-bg: #ffffff;
+  --stilo-color-toolbar-bg: #f9fbfd;
+  --stilo-color-border: #d1d9e0;
+  --stilo-color-separator: #e4e8ec;
+  --stilo-color-hover: #eef1f4;
+  --stilo-color-hover-group: #f5f7f9;
+  --stilo-color-active: #dde4ee;
+  --stilo-color-focus: #0969da;
+  --stilo-color-error: #d1242f;
+
+  --stilo-radius: 6px;
+
+  --stilo-toolbar-padding-x: 2px;
+  --stilo-toolbar-padding-y: 4px;
+  --stilo-toolbar-gap: 2px;
+  --stilo-toolbar-group-gap: 4px;
+  --stilo-toolbar-separator-height: 18px;
+  --stilo-toolbar-sticky-top: 0;
+  --stilo-toolbar-shadow: 0 2px 6px rgb(0 0 0 / 0.08);
+  --stilo-z-toolbar: 1001;
+
+  --stilo-button-size: 30px;
+  --stilo-icon-size: 18px;
+
+  --stilo-popover-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
+  --stilo-z-popover: 1000;
+
+  --stilo-menu-h1-size: 1.5em;
+  --stilo-menu-h2-size: 1.3em;
+  --stilo-menu-h3-size: 1.15em;
+  --stilo-menu-h4-size: 1em;
+  --stilo-menu-h5-size: 1em;
+  --stilo-menu-h6-size: 1em;
+}
+
+/* Toolbar */
+.stilo-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--stilo-toolbar-group-gap);
+  padding: var(--stilo-toolbar-padding-y) var(--stilo-toolbar-padding-x);
+  background: var(--stilo-color-toolbar-bg);
+}
+
+/*
+ * The toolbar and its sticky container have a background: their top corners follow the element
+ * that holds them, so that a rounded editor box keeps its corners (no `overflow` on the host,
+ * which would cut the popovers).
+ */
+.stilo-toolbar-host,
+.stilo-toolbar {
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}
+
+/* Sticky toolbar container (option `sticky`) */
+.stilo-toolbar-host {
+  position: sticky;
+  top: var(--stilo-toolbar-sticky-top);
+  z-index: var(--stilo-z-toolbar);
+  background: var(--stilo-color-bg);
+  container-type: scroll-state;
+}
+
+/*
+ * A shadow while the toolbar is stuck at the top of the scrolling page. Pure CSS: browsers
+ * without scroll-state container queries ignore it and show the toolbar without shadow.
+ */
+@container scroll-state(stuck: top) {
+  .stilo-toolbar {
+    box-shadow: var(--stilo-toolbar-shadow);
+  }
+}
+
+/* Group */
+.stilo-toolbar__group {
+  display: flex;
+  gap: var(--stilo-toolbar-gap);
+}
+
+/* Separator: a short line, vertically centered, before every group after the first */
+.stilo-toolbar__group:not(:first-child) {
+  position: relative;
+  padding-left: var(--stilo-toolbar-group-gap);
+}
+
+.stilo-toolbar__group:not(:first-child)::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 1px;
+  height: var(--stilo-toolbar-separator-height);
+  background: var(--stilo-color-separator);
+  transform: translateY(-50%);
+}
+
+/* Button */
+.stilo-toolbar__button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--stilo-button-size);
+  min-width: var(--stilo-button-size);
+  height: var(--stilo-button-size);
+  border: none;
+  border-radius: var(--stilo-radius);
+  background: transparent;
+  color: var(--stilo-color-text);
+  cursor: pointer;
+  font-family: var(--stilo-font-family);
+  font-size: var(--stilo-font-size);
+  padding: 0;
+  margin: 0;
+  transition: background-color 0.15s;
+}
+
+.stilo-toolbar__button:hover {
+  background: var(--stilo-color-hover);
+}
+
+.stilo-toolbar__button:focus-visible {
+  outline: 2px solid var(--stilo-color-focus);
+  outline-offset: 2px;
+}
+
+.stilo-toolbar__button.stilo-toolbar__button--active {
+  background: var(--stilo-color-active);
+}
+
+.stilo-toolbar__button[aria-disabled="true"] {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.stilo-toolbar__button[aria-disabled="true"]:hover {
+  background: transparent;
+}
+
+/* Icon */
+.stilo-icon {
+  width: var(--stilo-icon-size);
+  height: var(--stilo-icon-size);
+  color: var(--stilo-color-text);
+}
+
+/* Popover */
+.stilo-popover-host {
+  position: relative;
+}
+
+.stilo-popover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: max-content;
+  background: var(--stilo-color-bg);
+  border: 1px solid var(--stilo-color-border);
+  border-radius: var(--stilo-radius);
+  box-shadow: var(--stilo-popover-shadow);
+  z-index: var(--stilo-z-popover);
+  padding: 4px;
+}
+
+/* A component class with its own `display` must not show a closed popover. */
+.stilo-popover[hidden] {
+  display: none;
+}
+
+/* Dropdown */
+.stilo-dropdown__trigger {
+  width: auto;
+  min-width: 120px;
+  justify-content: space-between;
+  padding: 0 8px;
+}
+
+.stilo-dropdown__value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stilo-dropdown__menu {
+  min-width: 160px;
+}
+
+.stilo-dropdown__option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border-radius: var(--stilo-radius);
+  cursor: pointer;
+  font-family: var(--stilo-font-family);
+  font-size: var(--stilo-font-size);
+  color: var(--stilo-color-text);
+}
+
+.stilo-dropdown__option:hover,
+.stilo-dropdown__option:focus-visible {
+  background: var(--stilo-color-hover);
+}
+
+.stilo-dropdown__option:focus-visible {
+  outline: 2px solid var(--stilo-color-focus);
+  outline-offset: -2px;
+}
+
+.stilo-dropdown__option[aria-checked="true"] {
+  background: var(--stilo-color-active);
+}
+
+.stilo-dropdown__option[aria-disabled="true"] {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.stilo-dropdown__option[aria-disabled="true"]:hover {
+  background: transparent;
+}
+
+.stilo-dropdown__label {
+  flex: 1;
+}
+
+.stilo-dropdown__shortcut {
+  font-size: 0.85em;
+  color: var(--stilo-color-muted);
+}
+
+/* Heading preview */
+.stilo-dropdown__option--h1 .stilo-dropdown__label {
+  font-size: var(--stilo-menu-h1-size);
+  font-weight: 600;
+}
+
+.stilo-dropdown__option--h2 .stilo-dropdown__label {
+  font-size: var(--stilo-menu-h2-size);
+  font-weight: 600;
+}
+
+.stilo-dropdown__option--h3 .stilo-dropdown__label {
+  font-size: var(--stilo-menu-h3-size);
+  font-weight: 600;
+}
+
+.stilo-dropdown__option--h4 .stilo-dropdown__label {
+  font-size: var(--stilo-menu-h4-size);
+  font-weight: 600;
+}
+
+.stilo-dropdown__option--h5 .stilo-dropdown__label {
+  font-size: var(--stilo-menu-h5-size);
+  font-weight: 600;
+}
+
+.stilo-dropdown__option--h6 .stilo-dropdown__label {
+  font-size: var(--stilo-menu-h6-size);
+  font-weight: 600;
+}
+
+/* Link popover */
+.stilo-link-popover__form {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  width: 320px;
+  padding: 4px;
+  font-family: var(--stilo-font-family);
+  font-size: var(--stilo-font-size);
+  color: var(--stilo-color-text);
+}
+
+.stilo-link-popover__url {
+  flex: 1 1 100%;
+  box-sizing: border-box;
+  padding: 6px 8px;
+  border: 1px solid var(--stilo-color-border);
+  border-radius: var(--stilo-radius);
+  background: var(--stilo-color-bg);
+  color: inherit;
+  font: inherit;
+}
+
+.stilo-link-popover__url:focus-visible {
+  outline: 2px solid var(--stilo-color-focus);
+  outline-offset: -1px;
+}
+
+.stilo-link-popover__url[aria-invalid="true"] {
+  border-color: var(--stilo-color-error);
+}
+
+.stilo-link-popover__new-tab {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+}
+
+.stilo-link-popover__actions {
+  display: flex;
+  gap: 4px;
+}
+
+.stilo-link-popover__button {
+  padding: 4px 10px;
+  border: 1px solid var(--stilo-color-border);
+  border-radius: var(--stilo-radius);
+  background: var(--stilo-color-bg);
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+}
+
+.stilo-link-popover__button:hover {
+  background: var(--stilo-color-hover);
+}
+
+.stilo-link-popover__button:focus-visible {
+  outline: 2px solid var(--stilo-color-focus);
+  outline-offset: 1px;
+}
+
+.stilo-link-popover__button--primary,
+.stilo-link-popover__button--primary:hover {
+  border-color: var(--stilo-color-focus);
+  background: var(--stilo-color-focus);
+  color: #ffffff;
+}
+
+/* Link bubble: small and unobtrusive */
+.stilo-link-bubble {
+  display: flex;
+  gap: 1px;
+  padding: 2px;
+}
+
+.stilo-link-bubble__button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-radius: var(--stilo-radius);
+  background: transparent;
+  color: var(--stilo-color-text);
+  cursor: pointer;
+}
+
+.stilo-link-bubble__button:hover {
+  background: var(--stilo-color-hover);
+}
+
+.stilo-link-bubble__button .stilo-icon {
+  width: 16px;
+  height: 16px;
+}
+
+/* Character picker: 10 columns (COLUMNS in character-picker.ts) */
+.stilo-char-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-family: var(--stilo-font-family);
+  font-size: var(--stilo-font-size);
+  color: var(--stilo-color-text);
+}
+
+.stilo-char-picker__search {
+  padding: 6px 8px;
+  border: 1px solid var(--stilo-color-border);
+  border-radius: var(--stilo-radius);
+  font: inherit;
+}
+
+.stilo-char-picker__search:focus-visible,
+.stilo-char-picker__tab:focus-visible,
+.stilo-char-picker__char:focus-visible {
+  outline: 2px solid var(--stilo-color-focus);
+  outline-offset: -2px;
+}
+
+.stilo-char-picker__tabs {
+  display: flex;
+  gap: 4px;
+  border-bottom: 1px solid var(--stilo-color-border);
+}
+
+.stilo-char-picker__tabs[hidden] {
+  display: none;
+}
+
+.stilo-char-picker__tab {
+  padding: 6px 10px;
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: var(--stilo-color-muted);
+  font: inherit;
+  cursor: pointer;
+}
+
+.stilo-char-picker__tab[aria-selected="true"] {
+  border-bottom-color: var(--stilo-color-focus);
+  color: var(--stilo-color-text);
+}
+
+.stilo-char-picker__panel {
+  max-height: 280px;
+  overflow-y: auto;
+}
+
+.stilo-char-picker__heading {
+  margin: 8px 0 4px;
+  color: var(--stilo-color-muted);
+  font-size: 0.85em;
+}
+
+.stilo-char-picker__grid {
+  display: grid;
+  grid-template-columns: repeat(10, 32px);
+  gap: 2px;
+}
+
+.stilo-char-picker__char {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: var(--stilo-radius);
+  background: transparent;
+  color: inherit;
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.stilo-char-picker__char:hover {
+  background: var(--stilo-color-hover);
+}
+
+.stilo-char-picker__empty {
+  margin: 8px 0;
+  color: var(--stilo-color-muted);
+}
+
+/* Color split button (T-026): the main part shows the last used color under its icon */
+.stilo-split {
+  display: flex;
+}
+
+/* Group hover: hovering one part lightly highlights both; the hovered part stays darker */
+.stilo-split:hover
+.stilo-toolbar__button:not(.stilo-toolbar__button--active, [aria-disabled="true"]) {
+  background: var(--stilo-color-hover-group);
+}
+
+.stilo-split
+  .stilo-toolbar__button:not(.stilo-toolbar__button--active, [aria-disabled="true"]):hover {
+  background: var(--stilo-color-hover);
+}
+
+.stilo-toolbar__button.stilo-split__main {
+  flex-direction: column;
+  gap: 1px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.stilo-split__main .stilo-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.stilo-split__color {
+  width: 16px;
+  height: 4px;
+  border-radius: 1px;
+  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15);
+}
+
+.stilo-toolbar__button.stilo-split__arrow {
+  width: 20px;
+  min-width: 20px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.stilo-split__arrow .stilo-icon {
+  width: 12px;
+  height: 12px;
+}
+
+/* Color picker: 8 columns (COLUMNS in color-button.ts) */
+.stilo-color-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 4px;
+  font-family: var(--stilo-font-family);
+  font-size: var(--stilo-font-size);
+  color: var(--stilo-color-text);
+}
+
+.stilo-color-picker__actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.stilo-color-picker__none,
+.stilo-color-picker__default {
+  flex: 1;
+  padding: 4px 8px;
+  border: none;
+  border-radius: var(--stilo-radius);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: center;
+  cursor: pointer;
+}
+
+.stilo-color-picker__none:hover,
+.stilo-color-picker__default:hover {
+  background: var(--stilo-color-hover);
+}
+
+.stilo-color-picker__default[aria-pressed="true"] {
+  background: var(--stilo-color-active);
+}
+
+.stilo-color-picker__default mark {
+  padding: 0 4px;
+  border-radius: 2px;
+}
+
+.stilo-color-picker__separator {
+  width: 1px;
+  height: 18px;
+  background: var(--stilo-color-separator);
+}
+
+.stilo-color-picker__grid {
+  display: grid;
+  grid-template-columns: repeat(8, 22px);
+  gap: 4px;
+}
+
+.stilo-color-picker__swatch {
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15);
+  cursor: pointer;
+}
+
+.stilo-color-picker__swatch:hover {
+  transform: scale(1.15);
+}
+
+.stilo-color-picker__swatch[aria-pressed="true"] {
+  outline: 2px solid var(--stilo-color-text);
+  outline-offset: 1px;
+}
+
+.stilo-color-picker__none:focus-visible,
+.stilo-color-picker__default:focus-visible,
+.stilo-color-picker__swatch:focus-visible,
+.stilo-color-picker__value:focus-visible,
+.stilo-color-picker__native:focus-visible,
+.stilo-color-picker__apply:focus-visible {
+  outline: 2px solid var(--stilo-color-focus);
+  outline-offset: 1px;
+}
+
+.stilo-color-picker__custom {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  margin: 0;
+}
+
+.stilo-color-picker__native {
+  width: 32px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid var(--stilo-color-border);
+  border-radius: var(--stilo-radius);
+  background: var(--stilo-color-bg);
+  cursor: pointer;
+}
+
+.stilo-color-picker__value {
+  flex: 1;
+  min-width: 0;
+  padding: 4px 8px;
+  border: 1px solid var(--stilo-color-border);
+  border-radius: var(--stilo-radius);
+  font: inherit;
+}
+
+.stilo-color-picker__value[aria-invalid="true"] {
+  border-color: var(--stilo-color-error);
+}
+
+.stilo-color-picker__apply {
+  padding: 4px 10px;
+  border: 1px solid var(--stilo-color-focus);
+  border-radius: var(--stilo-radius);
+  background: var(--stilo-color-focus);
+  color: #ffffff;
+  font: inherit;
+  cursor: pointer;
+}