@livemark/markdown 0.0.0-stage → 0.44.2

package/source/styles/markdown.css

@@ -0,0 +1,231 @@
+@import "katex/dist/katex.min.css";
+@reference "./general.css";
+
+@layer components {
+  /* A bare URL or long inline code is one unbreakable word that widens the whole
+     page on a phone, so it scrolls sideways. */
+  .prose {
+    overflow-wrap: break-word;
+  }
+
+  .prose :is(h1, h2, h3, h4, h5, h6) {
+    @apply scroll-mt-28 md:scroll-mt-20;
+  }
+
+  .prose :is(h1, h2, h3, h4, h5, h6)[id] {
+    position: relative;
+  }
+
+  .prose :is(h1, h2, h3, h4, h5, h6)[id]::after {
+    content: "";
+    display: inline-block;
+    width: 0.6em;
+    height: 0.6em;
+    margin-left: 0.4em;
+    vertical-align: middle;
+    opacity: 0;
+    transition: opacity 0.15s;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E");
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+
+  .prose :is(h1, h2, h3, h4, h5, h6)[id]:hover::after {
+    opacity: 0.5;
+  }
+
+  .prose :is(h1, h2, h3, h4, h5, h6)[id] a,
+  .prose :is(h1, h2, h3, h4, h5, h6)[id] a:hover {
+    color: inherit !important;
+    text-decoration: none !important;
+  }
+
+  .prose pre code .line {
+    @apply px-4;
+  }
+
+  /* `code` is a flex column, where an empty line span collapses to no height */
+  .prose pre code .line:empty::before {
+    content: " ";
+  }
+
+  .prose pre code .line.highlighted {
+    @apply bg-primary/10;
+  }
+
+  .prose pre code .line.diff.add {
+    @apply bg-positive/15;
+  }
+
+  .prose pre code .line.diff.remove {
+    @apply bg-destructive/15;
+  }
+
+  .prose pre code .line.diff.add::before {
+    content: "+";
+    @apply text-positive-tint-foreground absolute left-1;
+  }
+
+  .prose pre code .line.diff.remove::before {
+    content: "-";
+    @apply text-destructive-tint-foreground absolute left-1;
+  }
+
+  .prose pre code .line.highlighted.error {
+    @apply bg-destructive/15;
+  }
+
+  .prose pre code .line.highlighted.warning {
+    @apply bg-warning/15;
+  }
+
+  .prose pre.has-focused code .line:not(.focused) {
+    @apply opacity-30;
+  }
+
+  .prose pre.has-focused code .line.focused {
+    @apply opacity-100;
+  }
+
+  .prose pre code .highlighted-word {
+    @apply bg-primary/20 rounded px-0.5 py-0.5;
+  }
+
+  .prose pre.line-numbers code .line::before {
+    counter-increment: line;
+    content: counter(line);
+    display: inline-block;
+    width: 2rem;
+    margin-right: 1rem;
+    text-align: right;
+    color: var(--color-muted-foreground);
+    opacity: 0.5;
+    user-select: none;
+  }
+
+  .prose pre code .twoslash-popup-container {
+    @apply absolute z-10 translate-y-1 rounded-md border border-border bg-popover px-3 py-1.5 text-xs shadow-md;
+  }
+
+  .prose pre code .twoslash-popup-type {
+    @apply font-mono text-muted-foreground;
+  }
+
+  .prose pre code .twoslash-error-line {
+    @apply bg-destructive/10;
+  }
+
+  .prose pre code .twoslash-tag-line {
+    @apply opacity-50;
+  }
+
+  .prose pre code .twoslash-completion-list {
+    @apply absolute z-10 translate-y-1 rounded-md border border-border bg-popover p-1 text-xs shadow-md;
+  }
+
+  .prose pre code .twoslash-completion-list .twoslash-completion-item {
+    @apply px-2 py-0.5;
+  }
+
+  .prose pre code .twoslash-hover .twoslash-popup-container {
+    @apply hidden;
+  }
+
+  .prose pre code .twoslash-hover:hover .twoslash-popup-container {
+    @apply block;
+  }
+
+  .prose :not(pre) > code {
+    @apply bg-muted/70 border border-border rounded-md px-1.5 py-0.5 text-sm font-mono;
+  }
+
+  .prose :not(pre) > code::before,
+  .prose :not(pre) > code::after {
+    content: none !important;
+  }
+
+  .prose :not(pre) > span.shiki {
+    /* !important beats the theme background html.highlight writes inline */
+    @apply bg-muted/70! border border-border rounded-md px-1.5 py-0.5 text-sm font-mono;
+  }
+
+  .prose :not(pre) > span.shiki > code {
+    @apply border-0 bg-transparent p-0;
+  }
+
+  .prose :not(pre) > span.shiki .line {
+    display: inline;
+  }
+
+  .dark .shiki span {
+    color: var(--shiki-dark) !important;
+  }
+
+  .katex-display {
+    @apply overflow-x-auto overflow-y-hidden;
+  }
+
+  .katex {
+    @apply overflow-x-auto overflow-y-hidden;
+  }
+
+  .prose ul:has(> li > input[type="checkbox"]) {
+    padding-inline-start: 0.5em;
+  }
+
+  .prose ul > li:has(> input[type="checkbox"]) {
+    list-style-type: none;
+    padding-left: 0;
+  }
+
+  .prose [data-footnotes] {
+    @apply mt-8 border-t border-border pt-4 text-sm text-muted-foreground;
+  }
+
+  .prose [data-footnotes] ol {
+    @apply list-decimal pl-6;
+  }
+
+  .prose sup a[data-footnote-ref] {
+    @apply ml-0.5 px-0.5 text-primary text-xs no-underline font-medium;
+  }
+
+  .prose [data-footnotes] a[data-footnote-backref] {
+    @apply text-primary no-underline;
+  }
+
+  .prose dl {
+    @apply my-4;
+  }
+
+  .prose dt {
+    @apply font-semibold mt-4 first:mt-0;
+  }
+
+  .prose dd {
+    @apply ml-6 mt-1 text-muted-foreground;
+  }
+
+  .prose {
+    counter-reset: step;
+  }
+
+  .prose [data-step] {
+    counter-increment: step;
+  }
+
+  .prose [data-step]::before {
+    content: counter(step);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 9999px;
+    background: var(--color-primary);
+    color: white;
+    font-size: 0.75rem;
+    font-weight: 600;
+    margin-right: 0.5rem;
+  }
+}

package/source/styles/shape.css

@@ -0,0 +1,14 @@
+/* Elements name these, never a raw `rounded-md`: controls are pills, rows and cards 1rem,
+   panels 1.5rem. Pills ignore `--radius`; only the `sm`…`xl` scale follows it. */
+@theme inline {
+  --radius-control: 9999px;
+  --radius-control-sm: 9999px;
+  --radius-control-xs: 9999px;
+  --radius-control-inset: 9999px;
+  --radius-textarea: 1rem;
+  --radius-row: 1rem;
+  --radius-card: 1rem;
+  --radius-panel: 1.5rem;
+  --radius-menu: 1rem;
+  --radius-menu-item: calc(1rem - 4px);
+}