@rimelight/ui 0.0.4 → 0.0.6

package/src/components/prose/Prose.astro

@@ -1,619 +0,0 @@
----
-import type { HTMLAttributes } from "astro/types";
-import { cv } from "css-variants";
-
-export const prose = cv({
-  base: "sw-prose max-w-[65ch]",
-});
-
-type Props = HTMLAttributes<"div">;
-
-const { class: className, ...rest } = Astro.props;
----
-
-<div class:list={[prose(), className]} {...rest} data-slot="prose">
-  <slot />
-</div>
-
-<style is:global>
-  /* ==========================================================================
-   * Starwind Prose - Typography styles for markdown content
-   * Inspired by Tailwind Typography and Astro Starlight
-   * ========================================================================== */
-
-  /* **************************************************************************
-   * CSS Custom Properties
-   * 
-   * Sizing is em-based, so it scales with the inherited font-size.
-   * Control overall size via Tailwind text utilities: text-sm md:text-base
-   * 
-   * Override specific values using CSS variables (supports responsive):
-   *   class="[--prose-spacing:1.5em] md:[--prose-spacing:1.25em]"
-   * 
-   * Or set on a parent element:
-   *   <div style="--prose-h1-size: 3em;"><Prose>...</Prose></div>
-   * ************************************************************************** */
-
-  .sw-prose {
-    /* ===================
-     * Typography & Spacing
-     * =================== */
-    --sw-prose-line-height: var(--prose-line-height, 1.6);
-    --sw-prose-spacing: var(--prose-spacing, 1.25em);
-    --sw-prose-heading-spacing: var(--prose-heading-spacing, 1.5em);
-    --sw-prose-code-size: var(--prose-code-size, 0.875em);
-    --sw-prose-list-indent: var(--prose-list-indent, 1.625em);
-
-    /* ===================
-     * Colors
-     * =================== */
-    --sw-prose-color: var(--prose-color, --alpha(var(--color-foreground) / 80%));
-    --sw-prose-heading-color: var(--prose-heading-color, var(--color-foreground));
-    --sw-prose-list-marker-color: var(--prose-list-marker-color, var(--color-muted-foreground));
-
-    /* ===================
-     * Headings
-     * =================== */
-    --sw-prose-heading-font: var(--prose-heading-font, var(--font-heading, inherit));
-    --sw-prose-heading-weight: var(--prose-heading-weight, 600);
-    --sw-prose-heading-line-height: var(--prose-heading-line-height, 1.25);
-    --sw-prose-h1-size: var(--prose-h1-size, 2.25em);
-    --sw-prose-h1-weight: var(--prose-h1-weight, var(--sw-prose-heading-weight));
-    --sw-prose-h2-size: var(--prose-h2-size, 1.5em);
-    --sw-prose-h2-weight: var(--prose-h2-weight, var(--sw-prose-heading-weight));
-    --sw-prose-h3-size: var(--prose-h3-size, 1.25em);
-    --sw-prose-h3-weight: var(--prose-h3-weight, var(--sw-prose-heading-weight));
-    --sw-prose-h4-size: var(--prose-h4-size, 1em);
-    --sw-prose-h4-weight: var(--prose-h4-weight, var(--sw-prose-heading-weight));
-
-    /* ===================
-     * Links
-     * =================== */
-    --sw-prose-link-color: var(--prose-link-color, var(--color-foreground));
-    --sw-prose-link-decoration-color: var(
-      --prose-link-decoration-color,
-      var(--color-primary-accent)
-    );
-    --sw-prose-link-hover-color: var(--prose-link-hover-color, var(--color-primary-accent));
-
-    /* ===================
-     * Strong/Bold
-     * =================== */
-    --sw-prose-strong-color: var(--prose-strong-color, var(--color-foreground));
-    --sw-prose-strong-weight: var(--prose-strong-weight, 600);
-
-    /* ===================
-     * Blockquote
-     * =================== */
-    --sw-prose-blockquote-color: var(--prose-blockquote-color, var(--color-foreground));
-    --sw-prose-blockquote-border-color: var(--prose-blockquote-border-color, var(--color-border));
-    --sw-prose-blockquote-border-width: var(--prose-blockquote-border-width, 4px);
-
-    /* ===================
-     * Inline Code
-     * =================== */
-    --sw-prose-code-bg: var(--prose-code-bg, var(--color-muted));
-    --sw-prose-code-color: var(--prose-code-color, var(--color-foreground));
-    --sw-prose-code-weight: var(--prose-code-weight, 500);
-    --sw-prose-code-radius: var(--prose-code-radius, var(--radius-sm));
-
-    /* ===================
-     * Pre / Code Blocks
-     * =================== */
-    --sw-prose-pre-border-color: var(--prose-pre-border-color, var(--color-border));
-    --sw-prose-pre-border-radius: var(--prose-pre-border-radius, var(--radius-md));
-
-    /* ===================
-     * Tables
-     * =================== */
-    --sw-prose-table-heading-color: var(--prose-table-heading-color, var(--color-foreground));
-    --sw-prose-table-border-color: var(--prose-table-border-color, var(--color-border));
-
-    /* ===================
-     * Media (images, video, etc.)
-     * =================== */
-    --sw-prose-media-border-width: var(--prose-media-border-width, 0px);
-    --sw-prose-media-border-color: var(--prose-media-border-color, var(--color-border));
-    --sw-prose-media-border-radius: var(--prose-media-border-radius, 0);
-
-    /* ===================
-     * Mark/Highlight
-     * =================== */
-    --sw-prose-highlight-color: var(--prose-highlight-color, var(--color-foreground));
-    --sw-prose-highlight-bg-color: var(
-      --prose-highlight-bg-color,
-      --alpha(var(--color-warning) / 30%)
-    );
-
-    /* ===================
-     * Base styles
-     * =================== */
-    line-height: var(--sw-prose-line-height);
-    color: var(--sw-prose-color);
-  }
-
-  /* Vertical rhythm - spacing between block elements */
-  .sw-prose
-    :not(a, strong, em, del, span, input, code, br, kbd)
-    + :not(a, strong, em, del, span, input, code, br, kbd, :where(.not-sw-prose *)) {
-    margin-top: var(--sw-prose-spacing);
-  }
-
-  /* Headings after non-headings have more spacing */
-  .sw-prose
-    :not(h1, h2, h3, h4, h5, h6)
-    + :is(h1, h2, h3, h4, h5, h6):not(:where(.not-sw-prose *)) {
-    margin-top: var(--sw-prose-heading-spacing);
-  }
-
-  /* First/last child margin reset */
-  .sw-prose > :first-child:not(:where(.not-sw-prose *)) {
-    margin-top: 0;
-  }
-  .sw-prose > :last-child:not(:where(.not-sw-prose *)) {
-    margin-bottom: 0;
-  }
-
-  /* **************************************************************************
-   * Headings
-   * ************************************************************************** */
-
-  .sw-prose :is(h1, h2, h3, h4, h5, h6):not(:where(.not-sw-prose *)) {
-    color: var(--sw-prose-heading-color);
-    font-family: var(--sw-prose-heading-font);
-    font-weight: var(--sw-prose-heading-weight);
-    line-height: var(--sw-prose-heading-line-height);
-  }
-
-  .sw-prose h1:not(:where(.not-sw-prose *)) {
-    font-size: var(--sw-prose-h1-size);
-    font-weight: var(--sw-prose-h1-weight);
-    margin-bottom: 0.889em;
-  }
-
-  .sw-prose h2:not(:where(.not-sw-prose *)) {
-    font-size: var(--sw-prose-h2-size);
-    font-weight: var(--sw-prose-h2-weight);
-    margin-bottom: 0.667em;
-  }
-
-  .sw-prose h3:not(:where(.not-sw-prose *)) {
-    font-size: var(--sw-prose-h3-size);
-    font-weight: var(--sw-prose-h3-weight);
-    margin-bottom: 0.6em;
-  }
-
-  .sw-prose h4:not(:where(.not-sw-prose *)) {
-    font-size: var(--sw-prose-h4-size);
-    font-weight: var(--sw-prose-h4-weight);
-    margin-bottom: 0.5em;
-  }
-
-  .sw-prose h5:not(:where(.not-sw-prose *)),
-  .sw-prose h6:not(:where(.not-sw-prose *)) {
-    font-size: inherit;
-    font-weight: var(--sw-prose-heading-weight);
-    margin-bottom: 0.5em;
-  }
-
-  /* Reset margin-top after headings */
-  .sw-prose :is(h1, h2, h3, h4, h5, h6) + *:not(:where(.not-sw-prose *)) {
-    margin-top: 0;
-  }
-
-  /* **************************************************************************
-   * Paragraphs
-   * ************************************************************************** */
-
-  .sw-prose p:not(:where(.not-sw-prose *)) {
-    margin-top: var(--sw-prose-spacing);
-    margin-bottom: var(--sw-prose-spacing);
-  }
-
-  /* **************************************************************************
-   * Links
-   * ************************************************************************** */
-
-  .sw-prose a:not(:where(.not-sw-prose *)) {
-    color: var(--sw-prose-link-color);
-    text-decoration: underline;
-    text-decoration-color: var(--sw-prose-link-decoration-color);
-    text-underline-offset: 0.15em;
-    font-weight: 500;
-    transition-property: color;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
-
-  .sw-prose a:hover:not(:where(.not-sw-prose *)) {
-    color: var(--sw-prose-link-hover-color);
-  }
-
-  /* **************************************************************************
-   * Strong, Bold, Emphasis
-   * ************************************************************************** */
-
-  .sw-prose strong:not(:where(.not-sw-prose *)) {
-    color: var(--sw-prose-strong-color);
-    font-weight: var(--sw-prose-strong-weight);
-  }
-
-  .sw-prose :is(a, blockquote, thead th) strong:not(:where(.not-sw-prose *)) {
-    color: inherit;
-  }
-
-  /* **************************************************************************
-   * Lists
-   * ************************************************************************** */
-
-  .sw-prose :is(ul, ol):not(:where(.not-sw-prose *)) {
-    padding-inline-start: var(--sw-prose-list-indent);
-    margin-top: var(--sw-prose-spacing);
-    margin-bottom: var(--sw-prose-spacing);
-  }
-
-  .sw-prose ul:not(:where(.not-sw-prose *)) {
-    list-style-type: disc;
-  }
-
-  .sw-prose ol:not(:where(.not-sw-prose *)) {
-    list-style-type: decimal;
-  }
-
-  .sw-prose li:not(:where(.not-sw-prose *)) {
-    margin-top: 0.5em;
-    margin-bottom: 0.5em;
-    padding-inline-start: 0.375em;
-    overflow-wrap: anywhere;
-  }
-
-  .sw-prose li + li:not(:where(.not-sw-prose *)) {
-    margin-top: 0.25rem;
-  }
-
-  .sw-prose :is(ul, ol) :is(ul, ol):not(:where(.not-sw-prose *)) {
-    margin-top: 0.75em;
-    margin-bottom: 0.75em;
-  }
-
-  .sw-prose ol > li:not(:where(.not-sw-prose *))::marker {
-    font-weight: 400;
-    color: var(--sw-prose-list-marker-color);
-  }
-
-  .sw-prose ul > li:not(:where(.not-sw-prose *))::marker {
-    color: var(--sw-prose-list-marker-color);
-  }
-
-  /* Definition lists */
-  .sw-prose dl:not(:where(.not-sw-prose *)) {
-    margin-top: var(--sw-prose-spacing);
-    margin-bottom: var(--sw-prose-spacing);
-  }
-
-  .sw-prose dt:not(:where(.not-sw-prose *)) {
-    color: var(--color-foreground);
-    font-weight: 600;
-    margin-top: var(--sw-prose-spacing);
-    opacity: 1;
-  }
-
-  .sw-prose dd:not(:where(.not-sw-prose *)) {
-    margin-top: 0.25rem;
-    padding-inline-start: var(--sw-prose-list-indent);
-  }
-
-  .sw-prose dt + dt:not(:where(.not-sw-prose *)),
-  .sw-prose dt + dd:not(:where(.not-sw-prose *)),
-  .sw-prose dd + dd:not(:where(.not-sw-prose *)) {
-    margin-top: 0.25rem;
-  }
-
-  /* **************************************************************************
-   * Blockquotes
-   * ************************************************************************** */
-
-  .sw-prose blockquote:not(:where(.not-sw-prose *)) {
-    font-style: italic;
-    color: var(--sw-prose-blockquote-color);
-    border-inline-start: var(--sw-prose-blockquote-border-width) solid
-      var(--sw-prose-blockquote-border-color);
-    padding-inline-start: 1rem;
-    margin-top: var(--sw-prose-spacing);
-    margin-bottom: var(--sw-prose-spacing);
-  }
-
-  .sw-prose blockquote p:first-of-type:not(:where(.not-sw-prose *))::before {
-    content: open-quote;
-  }
-
-  .sw-prose blockquote p:last-of-type:not(:where(.not-sw-prose *))::after {
-    content: close-quote;
-  }
-
-  /* **************************************************************************
-   * Code (inline)
-   * ************************************************************************** */
-
-  .sw-prose code:not(:where(.not-sw-prose *)) {
-    background-color: var(--sw-prose-code-bg);
-    color: var(--sw-prose-code-color);
-    font-size: var(--sw-prose-code-size);
-    font-weight: var(--sw-prose-code-weight);
-    /* padding: 0.125rem 0.375rem; */
-    padding: calc(var(--spacing) / 2) calc(var(--spacing) * 1.25);
-    border-radius: var(--sw-prose-code-radius);
-  }
-
-  .sw-prose :is(h1, h2, h3, h4, h5, h6) code:not(:where(.not-sw-prose *)) {
-    font-size: inherit;
-  }
-
-  .sw-prose a code:not(:where(.not-sw-prose *)) {
-    color: inherit;
-  }
-
-  /* **************************************************************************
-   * Pre / Code blocks
-   * ************************************************************************** */
-
-  .sw-prose pre:not(:where(.not-sw-prose *)) {
-    border: 1px solid var(--sw-prose-pre-border-color);
-    border-radius: var(--sw-prose-pre-border-radius);
-    padding: 0.75rem 1rem;
-    font-size: var(--sw-prose-code-size);
-    line-height: 1.714;
-    overflow-x: auto;
-    tab-size: 2;
-    margin-top: var(--sw-prose-spacing);
-    margin-bottom: var(--sw-prose-spacing);
-  }
-
-  .sw-prose pre code:not(:where(.not-sw-prose *)) {
-    all: unset;
-    font-family: var(--font-mono);
-  }
-
-  /* **************************************************************************
-   * Horizontal Rules
-   * ************************************************************************** */
-
-  .sw-prose hr:not(:where(.not-sw-prose *)) {
-    border: 0;
-    border-top: 1px solid var(--color-border);
-    margin-top: 3em;
-    margin-bottom: 3em;
-  }
-
-  .sw-prose hr + *:not(:where(.not-sw-prose *)) {
-    margin-top: 0;
-  }
-
-  /* **************************************************************************
-   * Images and Media
-   * ************************************************************************** */
-
-  .sw-prose :is(img, picture, video, canvas, svg, iframe):not(:where(.not-sw-prose *)) {
-    display: block;
-    max-width: 100%;
-    height: auto;
-    border: var(--sw-prose-media-border-width) solid var(--sw-prose-media-border-color);
-    border-radius: var(--sw-prose-media-border-radius);
-    margin-top: var(--sw-prose-spacing);
-    margin-bottom: var(--sw-prose-spacing);
-  }
-
-  .sw-prose picture > img:not(:where(.not-sw-prose *)) {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-
-  /* **************************************************************************
-   * Figures and Captions
-   * ************************************************************************** */
-
-  .sw-prose figure:not(:where(.not-sw-prose *)) {
-    margin-top: var(--sw-prose-spacing);
-    margin-bottom: var(--sw-prose-spacing);
-  }
-
-  .sw-prose figure > *:not(:where(.not-sw-prose *)) {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-
-  .sw-prose figcaption:not(:where(.not-sw-prose *)) {
-    color: var(--color-muted-foreground);
-    font-size: var(--sw-prose-code-size);
-    margin-top: 0.857em;
-  }
-
-  /* **************************************************************************
-   * Tables
-   * ************************************************************************** */
-
-  .sw-prose table:not(:where(.not-sw-prose *)) {
-    width: 100%;
-    table-layout: auto;
-    margin-top: var(--sw-prose-spacing);
-    margin-bottom: var(--sw-prose-spacing);
-    font-size: var(--sw-prose-code-size);
-    line-height: 1.714;
-  }
-
-  .sw-prose thead:not(:where(.not-sw-prose *)) {
-    border-bottom: 1px solid var(--sw-prose-table-border-color);
-  }
-
-  .sw-prose thead th:not(:where(.not-sw-prose *)) {
-    color: var(--sw-prose-table-heading-color);
-    font-weight: 600;
-    vertical-align: bottom;
-    padding-inline-end: 0.571em;
-    padding-bottom: 0.571em;
-    padding-inline-start: 0.571em;
-    text-align: start;
-    opacity: 1;
-  }
-
-  .sw-prose thead th:first-child:not(:where(.not-sw-prose *)) {
-    padding-inline-start: 0;
-  }
-
-  .sw-prose thead th:last-child:not(:where(.not-sw-prose *)) {
-    padding-inline-end: 0;
-  }
-
-  .sw-prose tbody tr:not(:where(.not-sw-prose *)) {
-    border-bottom: 1px solid var(--sw-prose-table-border-color);
-  }
-
-  .sw-prose tbody tr:last-child:not(:where(.not-sw-prose *)) {
-    border-bottom-width: 0;
-  }
-
-  .sw-prose :is(td, th):not(:where(.not-sw-prose *)) {
-    vertical-align: baseline;
-    padding: 0.571em;
-  }
-
-  .sw-prose :is(td:first-child, th:first-child):not(:where(.not-sw-prose *)) {
-    padding-inline-start: 0;
-  }
-
-  .sw-prose :is(td:last-child, th:last-child):not(:where(.not-sw-prose *)) {
-    padding-inline-end: 0;
-  }
-
-  .sw-prose tfoot:not(:where(.not-sw-prose *)) {
-    border-top: 1px solid var(--sw-prose-table-border-color);
-  }
-
-  .sw-prose tfoot td:not(:where(.not-sw-prose *)) {
-    vertical-align: top;
-  }
-
-  /* **************************************************************************
-   * Keyboard Input
-   * ************************************************************************** */
-
-  .sw-prose kbd:not(:where(.not-sw-prose *)) {
-    font-weight: 500;
-    font-family: inherit;
-    font-size: var(--sw-prose-code-size);
-    width: fit-content;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    gap: var(--spacing);
-    min-width: calc(var(--spacing) * 5);
-    color: var(--color-muted-foreground);
-    background-color: var(--color-muted);
-    padding: calc(var(--spacing) / 2) calc(var(--spacing) * 1.25);
-    border-radius: var(--radius-sm);
-    /* box-shadow:
-      0 0 0 1px color-mix(in srgb, var(--color-foreground) 10%, transparent),
-      0 2px 0 color-mix(in srgb, var(--color-foreground) 10%, transparent); */
-  }
-
-  /* **************************************************************************
-   * Details / Summary (Starlight-inspired)
-   * ************************************************************************** */
-
-  .sw-prose details:not(:where(.not-sw-prose *)) {
-    --sw-details-border-color: var(--color-border);
-    --sw-details-border-color-hover: var(--color-primary-accent);
-
-    border-inline-start: 2px solid var(--sw-details-border-color);
-    padding-inline-start: 1rem;
-    margin-top: var(--sw-prose-spacing);
-    margin-bottom: var(--sw-prose-spacing);
-    transition-property: border-color;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
-
-  .sw-prose details:not([open]):hover:not(:where(.not-sw-prose *)),
-  .sw-prose details:has(> summary:hover):not(:where(.not-sw-prose *)) {
-    border-color: var(--sw-details-border-color-hover);
-  }
-
-  .sw-prose summary:not(:where(.not-sw-prose *)) {
-    color: var(--color-foreground);
-    cursor: pointer;
-    display: block;
-    font-weight: 600;
-    margin-inline-start: -0.5rem;
-    padding-inline-start: 0.5rem;
-    opacity: 1;
-  }
-
-  .sw-prose details[open] > summary:not(:where(.not-sw-prose *)) {
-    margin-bottom: 1rem;
-  }
-
-  /* Summary marker styles */
-  .sw-prose summary:not(:where(.not-sw-prose *))::marker,
-  .sw-prose summary:not(:where(.not-sw-prose *))::-webkit-details-marker {
-    display: none;
-  }
-
-  .sw-prose summary:not(:where(.not-sw-prose *))::before {
-    --sw-details-marker-size: 1.25rem;
-
-    background-color: currentColor;
-    content: "";
-    display: inline-block;
-    height: var(--sw-details-marker-size);
-    width: var(--sw-details-marker-size);
-    margin-inline: calc((var(--sw-details-marker-size) / 4) * -1) 0.25rem;
-    vertical-align: middle;
-    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.8 11.3 10.6 7a1 1 0 1 0-1.4 1.5l3.5 3.5-3.5 3.5a1 1 0 0 0 0 1.4 1 1 0 0 0 .7.3 1 1 0 0 0 .7-.3l4.2-4.2a1 1 0 0 0 0-1.4Z'/%3E%3C/svg%3E%0A");
-    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.8 11.3 10.6 7a1 1 0 1 0-1.4 1.5l3.5 3.5-3.5 3.5a1 1 0 0 0 0 1.4 1 1 0 0 0 .7.3 1 1 0 0 0 .7-.3l4.2-4.2a1 1 0 0 0 0-1.4Z'/%3E%3C/svg%3E%0A");
-    -webkit-mask-repeat: no-repeat;
-    mask-repeat: no-repeat;
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    .sw-prose summary:not(:where(.not-sw-prose *))::before {
-      transition: transform 0.2s ease-in-out;
-    }
-  }
-
-  .sw-prose details[open] > summary:not(:where(.not-sw-prose *))::before {
-    transform: rotateZ(90deg);
-  }
-
-  [dir="rtl"] .sw-prose summary:not(:where(.not-sw-prose *))::before,
-  .sw-prose [dir="rtl"] summary:not(:where(.not-sw-prose *))::before {
-    transform: rotateZ(180deg);
-  }
-
-  /* Summary with only a paragraph (MDX) */
-  .sw-prose summary:not(:where(.not-sw-prose *)) p:only-child {
-    display: inline;
-  }
-
-  /* **************************************************************************
-   * Miscellaneous
-   * ************************************************************************** */
-
-  /* Abbreviations */
-  .sw-prose abbr[title]:not(:where(.not-sw-prose *)) {
-    text-decoration: underline dotted;
-    cursor: help;
-  }
-
-  /* Mark/Highlight */
-  .sw-prose mark:not(:where(.not-sw-prose *)) {
-    background-color: var(--sw-prose-highlight-bg-color);
-    color: var(--sw-prose-highlight-color);
-    padding: calc(var(--spacing) / 2) var(--spacing);
-    border-radius: calc(var(--radius) / 4);
-  }
-
-  /* Subscript and Superscript */
-  .sw-prose :is(sub, sup):not(:where(.not-sw-prose *)) {
-    font-size: 0.75em;
-  }
-</style>