@lapismd/mira 0.0.1

package/dist/preview/styles/list-callouts.css

@@ -0,0 +1,281 @@
+.markdown-rendered li.lc-list-callout,
+.markdown-preview-surface .markdown li.lc-list-callout {
+  padding-block-end: calc(var(--list-spacing) + 0.35rem);
+  position: relative;
+}
+
+.markdown-editor-surface .cm-line.lc-list-callout {
+  padding-block-end: 0.35rem;
+}
+
+.markdown-editor-surface
+  .cm-line.lc-list-callout:has(+ .cm-line.lc-list-callout) {
+  padding-block-end: 0.55rem;
+}
+
+.markdown-rendered
+  li.lc-list-callout
+  > :not(ul, ol, .list-bullet, .list-collapse-indicator),
+.markdown-preview-surface
+  .markdown
+  li.lc-list-callout
+  > :not(ul, ol, .list-bullet, .list-collapse-indicator) {
+  position: relative;
+  z-index: 1;
+}
+
+.markdown-rendered li.lc-list-callout::before,
+.markdown-preview-surface .markdown li.lc-list-callout::before {
+  background-color: light-dark(
+    rgba(var(--lc-callout-color), var(--lc-bg-opacity-light, 0.12)),
+    rgba(var(--lc-callout-color), var(--lc-bg-opacity-dark, 0.18))
+  );
+  border-radius: 4px;
+  content: "";
+  inset: calc(-1 * var(--lc-bg-top-reading, 0.15rem))
+    calc(-1 * var(--lc-bg-right-reading, 0.35rem))
+    calc(-1 * var(--lc-bg-bottom-reading, 0.15rem))
+    calc(-1 * var(--lc-bg-left-reading, 0.35rem));
+  pointer-events: none;
+  position: absolute;
+  z-index: 0;
+}
+
+.markdown-rendered li.lc-list-callout:has(+ li.lc-list-callout)::before,
+.markdown-preview-surface
+  .markdown
+  li.lc-list-callout:has(+ li.lc-list-callout)::before {
+  inset-block-end: 0.35rem;
+}
+
+.markdown-rendered li.lc-list-callout:has(+ li:not(.lc-list-callout))::before,
+.markdown-preview-surface
+  .markdown
+  li.lc-list-callout:has(+ li:not(.lc-list-callout))::before {
+  inset-block-end: var(--lc-bg-bottom-reading, 0.15rem);
+}
+
+.markdown-rendered .lc-list-marker,
+.markdown-preview-surface .markdown .lc-list-marker,
+.markdown-editor-surface .lc-list-marker {
+  color: rgb(var(--lc-callout-color));
+  display: inline-block;
+  font-family: var(--font-monospace, var(--mira-font-mono));
+  font-weight: 700;
+  pointer-events: none;
+}
+
+.markdown-rendered .lc-list-marker:not(.mira-list-callout-trigger),
+.markdown-preview-surface
+  .markdown
+  .lc-list-marker:not(.mira-list-callout-trigger) {
+  padding-inline-end: 0.3em;
+}
+
+.markdown-rendered .lc-list-marker > svg,
+.markdown-preview-surface .markdown .lc-list-marker > svg,
+.markdown-editor-surface .lc-list-marker > svg {
+  display: inline-block;
+  height: 0.9em;
+  vertical-align: -0.1em;
+  width: 0.9em;
+}
+
+.mira-list-callout-widget {
+  display: contents;
+  pointer-events: none;
+}
+
+.mira-list-callout-trigger {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-s, 0.25rem);
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  isolation: isolate;
+  justify-content: center;
+  line-height: inherit;
+  margin: 0;
+  padding: 0 0.13em 0 0.2em;
+  pointer-events: auto;
+  position: relative;
+  vertical-align: baseline;
+}
+
+.mira-list-callout-trigger::before {
+  background: transparent;
+  border-radius: inherit;
+  box-shadow: none;
+  content: "";
+  inset-block: 0;
+  inset-inline: 0.1em 0;
+  pointer-events: none;
+  position: absolute;
+  z-index: 0;
+}
+
+.markdown-editor-surface .mira-list-callout-trigger,
+.markdown-preview-surface .mira-list-callout-trigger {
+  pointer-events: auto;
+}
+
+.mira-list-callout-trigger:is(:hover, :focus-visible, [data-state="open"]) {
+  outline: none;
+}
+
+.mira-list-callout-trigger:is(
+    :hover,
+    :focus-visible,
+    [data-state="open"]
+  )::before {
+  background-color: var(--background-modifier-hover, var(--mira-accent-soft));
+  box-shadow: inset 0 0 0 1px
+    var(--background-modifier-border, var(--mira-border));
+}
+
+.mira-list-callout-trigger:focus-visible::before {
+  box-shadow:
+    inset 0 0 0 1px var(--background-modifier-border, var(--mira-border)),
+    0 0 0 2px var(--background-modifier-border-focus, var(--mira-focus-ring));
+}
+
+.mira-list-callout-glyph {
+  align-items: center;
+  block-size: 1em;
+  display: inline-flex;
+  flex: 0 0 0.85em;
+  inline-size: 0.85em;
+  justify-content: center;
+  line-height: 1;
+  pointer-events: none;
+  position: relative;
+  z-index: 1;
+}
+
+.mira-list-callout-glyph > svg {
+  display: block;
+  height: 0.78em;
+  width: 0.78em;
+}
+
+[data-slot="popover-content"].mira-list-callout-menu {
+  max-height: min(70vh, 24rem);
+  overflow-y: auto;
+  padding: 0.375rem;
+  width: min(16rem, calc(100vw - 1rem));
+}
+
+.mira-list-callout-menu__grid {
+  display: grid;
+  gap: 0.125rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.mira-list-callout-option {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-s, 0.25rem);
+  color: var(--text-normal, var(--mira-foreground));
+  cursor: pointer;
+  display: grid;
+  font: inherit;
+  gap: 0.5rem;
+  grid-template-columns: 1.5rem minmax(0, 1fr) 0.875rem;
+  min-height: 2rem;
+  padding: 0.25rem 0.375rem;
+  text-align: start;
+}
+
+.mira-list-callout-option:is(:hover, :focus-visible) {
+  background: var(--background-modifier-hover, var(--mira-accent-soft));
+  box-shadow: inset 0 0 0 1px
+    var(--background-modifier-border, var(--mira-border));
+  outline: none;
+}
+
+.mira-list-callout-option:focus-visible {
+  box-shadow:
+    inset 0 0 0 1px var(--background-modifier-border, var(--mira-border)),
+    inset 0 0 0 2px
+      var(--background-modifier-border-focus, var(--mira-focus-ring));
+}
+
+.mira-list-callout-option__marker {
+  align-items: center;
+  background-color: rgba(var(--lc-callout-color), 0.14);
+  border-radius: var(--radius-s, 0.25rem);
+  color: rgb(var(--lc-callout-color));
+  display: inline-flex;
+  font-family: var(--font-monospace, var(--mira-font-mono));
+  font-weight: 700;
+  height: 1.5rem;
+  justify-content: center;
+  width: 1.5rem;
+}
+
+.mira-list-callout-option__marker > svg {
+  height: 1em;
+  width: 1em;
+}
+
+.mira-list-callout-option__marker--clear {
+  background: var(--background-modifier-hover, var(--mira-accent-soft));
+  color: var(--text-muted, var(--mira-muted-foreground));
+}
+
+.mira-list-callout-option__label {
+  font: inherit;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mira-list-callout-option__selected {
+  height: 0.875rem;
+  justify-self: end;
+  width: 0.875rem;
+}
+
+.mira-list-callout-option--clear {
+  grid-column: 1 / -1;
+}
+
+@media (max-width: 20rem) {
+  .mira-list-callout-menu__grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .mira-list-callout-option--clear {
+    grid-column: auto;
+  }
+}
+
+.markdown-editor-surface .lc-list-bg {
+  background-clip: content-box;
+  display: block;
+  inset: calc(-1 * var(--lc-bg-top, 0.15rem))
+    calc(-1 * var(--lc-bg-right, 0.35rem))
+    calc(-1 * var(--lc-bg-bottom, 0.15rem))
+    calc(-1 * var(--lc-bg-left, 0.35rem));
+  padding: inherit;
+  pointer-events: none;
+  position: absolute;
+  inset-inline-start: var(--lc-bg-start-live, 0.13rem);
+  z-index: -1;
+}
+
+.markdown-editor-surface .lc-list-bg::after {
+  background-color: light-dark(
+    rgba(var(--lc-callout-color), var(--lc-bg-opacity-light, 0.12)),
+    rgba(var(--lc-callout-color), var(--lc-bg-opacity-dark, 0.18))
+  );
+  border-radius: 4px;
+  content: "";
+  display: block;
+  height: 100%;
+  width: 100%;
+}