@noirmd/previewer 1.2.0 → 2.0.0

package/dist/vanilla.css

@@ -1,677 +1,32 @@
-/* ============================================================
-   NoirMD Vanilla Components CSS
-
-   Pure CSS with variables. No Tailwind dependency.
-   Import alongside vanilla.js for full styling.
-
-   Usage:
-     import '@noirmd/previewer/vanilla/vanilla.css';
-     // or
-     @import '@noirmd/previewer/vanilla/vanilla.css';
-
-   All components use .nr-* prefix to avoid conflicts.
-   ============================================================ */
-
-/* ── CSS Variables (override-friendly) ────────────────── */
-
-.nr-prose {
-  --nr-bg: var(--color-background-primary, #0f172a);
-  --nr-bg-secondary: var(--color-background-secondary-solid, #1e293b);
-  --nr-text: var(--color-text-primary, #e2e8f0);
-  --nr-text-secondary: var(--color-text-secondary, #94a3b8);
-  --nr-border: var(--color-border, #334155);
-  --nr-accent: var(--color-accent-primary, #0ea5e9);
-  --nr-accent-hover: var(--color-accent-hover, #38bdf8);
-  --nr-info: #3b82f6;
-  --nr-warning: #f59e0b;
-  --nr-danger: #ef4444;
-  --nr-success: #22c55e;
-  --nr-radius: 1rem;
-  --nr-radius-sm: 0.5rem;
-  --nr-radius-lg: 1.5rem;
-
-  color: var(--nr-text);
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  line-height: 1.625;
-  word-wrap: break-word;
-}
-
-/* ── Typography (extends markdown.css base) ───────────── */
-
-.nr-prose .text-center { text-align: center; }
-.nr-prose .text-right { text-align: right; }
-
-/* ── Inline Elements ──────────────────────────────────── */
-
-.nr-link {
-  color: var(--nr-accent);
-  text-decoration: none !important;
-  transition: color 0.15s;
-}
-.nr-link:hover {
-  text-decoration: underline !important;
-  color: var(--nr-accent-hover);
-}
-
-.nr-inline-code {
-  font-family: 'JetBrains Mono', 'Fira Code', monospace;
-  font-size: 0.875em;
-  background: var(--nr-bg-secondary);
-  padding: 0.125rem 0.375rem;
-  border-radius: var(--nr-radius-sm);
-  color: var(--nr-text);
-}
-
-.nr-highlight {
-  background: rgba(234, 179, 8, 0.2);
-  color: inherit;
-  padding: 0 0.125rem;
-  border-radius: 0.25rem;
-}
-
-.nr-spoiler {
-  background: var(--nr-text);
-  color: var(--nr-bg);
-  padding: 0 0.25rem;
-  border-radius: var(--nr-radius-sm);
-  cursor: pointer;
-  transition: background 0.15s, color 0.15s;
-}
-.nr-spoiler:hover {
-  background: transparent;
-  color: var(--nr-text);
-}
-
-.nr-underline {
-  text-underline-offset: 2px;
-}
-
-.nr-icon {
-  font-size: 1em;
-  line-height: 1;
-  vertical-align: top;
-}
-
-/* ── Code Block ───────────────────────────────────────── */
-
-.nr-codeblock {
-  position: relative;
-  margin: 1rem 0;
-  border-radius: var(--nr-radius);
-  border: 1px solid var(--nr-border);
-  overflow: hidden;
-  background: rgba(30, 41, 59, 0.05);
-}
-
-.nr-codeblock__header {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  border-bottom: 1px solid var(--nr-border);
-  background: rgba(30, 41, 59, 0.1);
-  font-family: 'JetBrains Mono', 'Fira Code', monospace;
-  font-size: 0.75rem;
-  color: var(--nr-text-secondary);
-}
-@media (min-width: 640px) {
-  .nr-codeblock__header { font-size: 0.875rem; }
-}
-
-.nr-codeblock__pre {
-  margin: 0;
-  padding: 1rem;
-  overflow: auto;
-  font-size: 0.75rem;
-  line-height: 1.5;
-}
-@media (min-width: 640px) {
-  .nr-codeblock__pre { font-size: 0.875rem; }
-}
-
-.nr-codeblock__pre code {
-  font-family: 'JetBrains Mono', 'Fira Code', monospace;
-}
-
-.nr-codeblock__copy {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  padding: 0.375rem;
-  border-radius: var(--nr-radius-sm);
-  border: none;
-  background: rgba(30, 41, 59, 0.2);
-  color: var(--nr-text-secondary);
-  cursor: pointer;
-  transition: background 0.15s, color 0.15s;
-}
-.nr-codeblock__copy:hover {
-  background: rgba(30, 41, 59, 0.4);
-  color: var(--nr-text);
-}
-
-/* ── Admonition ───────────────────────────────────────── */
-
-.nr-admonition {
-  border-radius: var(--nr-radius);
-  margin-bottom: 1.5rem;
-  border: 1px solid;
-  padding: 1rem;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-}
-
-.nr-admonition--note {
-  border-color: rgba(59, 130, 246, 0.2);
-  background: rgba(59, 130, 246, 0.05);
-  color: var(--nr-info);
-}
-.nr-admonition--info {
-  border-color: rgba(59, 130, 246, 0.3);
-  background: rgba(59, 130, 246, 0.1);
-  color: var(--nr-info);
-}
-.nr-admonition--warning {
-  border-color: rgba(245, 158, 11, 0.3);
-  background: rgba(245, 158, 11, 0.1);
-  color: var(--nr-warning);
-}
-.nr-admonition--danger {
-  border-color: rgba(239, 68, 68, 0.3);
-  background: rgba(239, 68, 68, 0.1);
-  color: var(--nr-danger);
-}
-.nr-admonition--greentext {
-  border-color: rgba(34, 197, 94, 0.3);
-  background: rgba(34, 197, 94, 0.1);
-  color: var(--nr-success);
-}
-
-.nr-admonition__title {
-  font-weight: 700;
-  font-size: 1rem;
-  margin: 0 0 0.5rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-.nr-admonition__icon {
-  flex-shrink: 0;
-}
-
-.nr-admonition__body {
-  font-size: 0.875rem;
-  line-height: 1.625;
-  opacity: 0.9;
-}
-
-/* ── Details (Collapsible) ────────────────────────────── */
-
-.nr-details {
-  border-radius: var(--nr-radius);
-  border: 1px solid var(--nr-border);
-  margin-bottom: 1rem;
-  background: rgba(var(--nr-bg), 0.05);
-}
-
-.nr-details__summary {
-  cursor: pointer;
-  padding: 1rem;
-  font-weight: 700;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  list-style: none;
-}
-.nr-details__summary::-webkit-details-marker {
-  display: none;
-}
-.nr-details__summary:hover {
-  color: var(--nr-accent);
-  transition: color 0.15s;
-}
-
-.nr-details__icon {
-  transition: transform 0.2s;
-}
-.nr-details__icon--open {
-  transform: rotate(90deg);
-}
-
-.nr-details__body {
-  padding: 0 1rem 1rem;
-  border-top: 1px solid var(--nr-border);
-  padding-top: 0.75rem;
-  font-size: 0.875rem;
-  line-height: 1.625;
-  opacity: 0.9;
-  overflow: hidden;
-  min-width: 0;
-}
-
-/* ── Modal (Native <dialog>) ──────────────────────────── */
-
-.nr-modal {
-  padding: 0;
-  border: none;
-  border-radius: var(--nr-radius-lg);
-  background: transparent;
-  max-width: 48rem;
-  width: 100%;
-  max-height: 85vh;
-  overflow: hidden;
-}
-.nr-modal::backdrop {
-  background: rgba(0, 0, 0, 0.6);
-  backdrop-filter: blur(2px);
-}
-
-.nr-modal__popup {
-  display: flex;
-  flex-direction: column;
-  background: var(--nr-bg);
-  border: 1px solid var(--nr-border);
-  border-radius: var(--nr-radius-lg);
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
-  overflow: hidden;
-  max-height: 85vh;
-}
-
-.nr-modal__header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1rem;
-  border-bottom: 1px solid var(--nr-border);
-  background: rgba(30, 41, 59, 0.2);
-}
-
-.nr-modal__title {
-  font-size: 1.125rem;
-  font-weight: 700;
-  margin: 0;
-}
-
-.nr-modal__close {
-  width: 2rem;
-  height: 2rem;
-  border-radius: 50%;
-  border: none;
-  background: transparent;
-  color: var(--nr-text);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: background 0.15s;
-}
-.nr-modal__close:hover {
-  background: rgba(255, 255, 255, 0.1);
-}
-
-.nr-modal__body {
-  padding: 1.5rem;
-  overflow: auto;
-  min-height: 0;
-  color: var(--nr-text);
-  font-size: 0.875rem;
-  line-height: 1.625;
-}
-.nr-modal__body h1:first-child,
-.nr-modal__body h2:first-child,
-.nr-modal__body h3:first-child,
-.nr-modal__body h4:first-child,
-.nr-modal__body h5:first-child,
-.nr-modal__body h6:first-child {
-  margin-top: 0;
-}
-
-/* ── Cards ────────────────────────────────────────────── */
-
-.nr-card-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1.5rem;
-  margin: 1.5rem 0;
-}
-
-.nr-card {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  border-radius: var(--nr-radius-lg);
-  border: 1px solid var(--nr-border);
-  transition: all 0.2s;
-  position: relative;
-  overflow: hidden;
-  min-width: 18rem;
-  width: 18rem;
-  max-width: 20rem;
-}
-
-.nr-card--interactive {
-  cursor: pointer;
-  border-color: rgba(14, 165, 233, 0.1);
-}
-.nr-card--interactive:hover {
-  border-color: rgba(14, 165, 233, 0.5);
-}
-
-.nr-card__image {
-  width: 100%;
-  height: 160px;
-  overflow: hidden;
-  position: relative;
-}
-.nr-card__image--tall {
-  height: 240px;
-}
-
-.nr-card__img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  margin: 0;
-}
-
-.nr-card__gradient {
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(to top, rgba(var(--nr-bg), 0.4), transparent);
-}
-
-.nr-card__body {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  padding: 1.5rem;
-  position: relative;
-  border-top: 1px solid rgba(255, 255, 255, 0.05);
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-}
-.nr-card__body--overlap {
-  margin-top: -2.5rem;
-  background: rgba(var(--nr-bg), 0.8);
-  border-radius: 0.75rem 0.75rem 0 0;
-}
-
-.nr-card__header {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  margin-bottom: 0.75rem;
-}
-
-.nr-card__icon-wrap {
-  width: 2.5rem;
-  height: 2.5rem;
-  font-size: 1.6em;
-  border-radius: 0.75rem;
-  background: rgba(14, 165, 233, 0.2);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  color: var(--nr-accent);
-}
-
-.nr-card__title {
-  font-size: 1rem;
-  font-weight: 900;
-  letter-spacing: -0.025em;
-  line-height: 1.25;
-  margin: 0;
-}
-
-.nr-card__description {
-  font-size: 0.875rem;
-  opacity: 0.8;
-  line-height: 1.625;
-  font-weight: 500;
-}
-
-.nr-card__content {
-  margin-top: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  flex: 1;
-}
-
-.nr-card__action {
-  margin-top: 1.5rem;
-  display: flex;
-  justify-content: flex-end;
-}
-
-.nr-card__action-link {
-  background: rgba(14, 165, 233, 0.2);
-  padding: 0.5rem 1rem;
-  border-radius: 0.75rem;
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  font-size: 0.625rem;
-  font-weight: 900;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  opacity: 0.5;
-  color: var(--nr-text);
-  text-decoration: none;
-  transition: all 0.15s;
-}
-.nr-card:hover .nr-card__action-link {
-  opacity: 1;
-  color: var(--nr-accent);
-}
-.nr-card__action-link:hover {
-  background: rgba(14, 165, 233, 0.3);
-}
-
-/* ── Button ───────────────────────────────────────────── */
-
-.nr-button-wrap {
-  margin: 0.25rem 0;
-}
-
-.nr-button {
-  display: inline-flex;
-  align-items: center;
-  width: fit-content;
-  padding: 0.5rem 1rem;
-  border-radius: 0.75rem;
-  font-weight: 700;
-  font-size: 0.875rem;
-  text-decoration: none;
-  gap: 0.5rem;
-  transition: all 0.15s;
-  border: 1px solid var(--nr-border);
-  background: rgba(var(--nr-bg), 0.05);
-  color: var(--nr-text);
-  cursor: pointer;
-}
-.nr-button:hover {
-  transform: scale(1.05);
-  background: rgba(var(--nr-bg), 0.1);
-  color: var(--nr-text);
-}
-.nr-button:active {
-  transform: scale(0.95);
-}
-
-.nr-button--default {
-  /* default styling applied above */
-}
-
-/* ── Table ────────────────────────────────────────────── */
-
-.nr-table-wrap {
-  overflow-x: auto;
-}
-
-.nr-table {
-  width: 100%;
-  border-collapse: collapse;
-  margin: 1rem 0;
-  font-size: 0.875rem;
-  line-height: 1.5;
-}
-@media (min-width: 640px) {
-  .nr-table { font-size: 1rem; }
-}
-
-.nr-table__th {
-  padding: 0.5rem 0.75rem;
-  text-align: left;
-  font-weight: 700;
-  font-size: 0.75rem;
-  background: rgba(30, 41, 59, 0.1);
-  border-bottom: 1px solid var(--nr-border);
-}
-
-.nr-table__td {
-  padding: 0.5rem 0.75rem;
-  border-bottom: 1px solid var(--nr-border);
-}
-
-.nr-table tbody tr:last-child .nr-table__td {
-  border-bottom: none;
-}
-
-/* ── List ─────────────────────────────────────────────── */
-
-.nr-list {
-  margin: 0.75rem 0;
-  padding-left: 1.5rem;
-  font-size: 0.875rem;
-  line-height: 1.625;
-}
-@media (min-width: 640px) {
-  .nr-list { font-size: 1rem; }
-}
-
-.nr-list__item {
-  margin: 0.25rem 0;
-  line-height: 1.625;
-}
-
-/* ── Blockquote ───────────────────────────────────────── */
-
-.nr-blockquote {
-  margin: 1rem 0;
-  padding: 0.5rem 1rem;
-  border-left: 4px solid rgba(14, 165, 233, 0.3);
-  color: var(--nr-text-secondary);
-  font-style: italic;
-  font-size: 0.875rem;
-  line-height: 1.625;
-}
-@media (min-width: 640px) {
-  .nr-blockquote { font-size: 1rem; }
-}
-
-/* ── TOC ──────────────────────────────────────────────── */
-
-.nr-toc {
-  margin: 1.5rem 0;
-  padding: 1rem;
-  border-radius: var(--nr-radius);
-  border: 1px solid var(--nr-border);
-  background: rgba(var(--nr-bg), 0.05);
-}
-
-.nr-toc__title {
-  font-size: 1rem;
-  font-weight: 700;
-  margin-bottom: 0.75rem;
-}
-
-.nr-toc__list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.nr-toc__item {
-  margin: 0.25rem 0;
-  font-size: 0.875rem;
-}
-@media (min-width: 640px) {
-  .nr-toc__item { font-size: 1rem; }
-}
-
-.nr-toc__item--h3 { padding-left: 1rem; }
-.nr-toc__item--h4 { padding-left: 2rem; }
-.nr-toc__item--h5 { padding-left: 3rem; }
-
-.nr-toc__link {
-  color: var(--nr-accent);
-  text-decoration: none;
-  transition: color 0.15s;
-}
-.nr-toc__link:hover {
-  color: var(--nr-accent-hover);
-  text-decoration: underline;
-}
-
-/* ── HR ───────────────────────────────────────────────── */
-
-.nr-hr {
-  margin: 2rem 0;
-  border-color: var(--nr-border);
-}
-
-/* ── Slide ────────────────────────────────────────────── */
-
-.nr-slide {
-  overflow: hidden;
-  position: relative;
-}
-
-.nr-slide__track {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-}
-
-.nr-slide__item {
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-}
-
-/* ── Raw HTML ─────────────────────────────────────────── */
-
-.nr-raw-html {
-  width: 100%;
-  margin: 1rem 0;
-}
-
-/* ── Unknown Directive ────────────────────────────────── */
-
-.nr-unknown-directive {
-  margin: 1rem 0;
-  padding: 1rem;
-  border-radius: var(--nr-radius);
-  border: 1px solid var(--nr-border);
-  background: rgba(var(--nr-bg), 0.05);
-}
-
-/* ── Modal Trigger ────────────────────────────────────── */
-
-.nr-modal-trigger {
-  display: inline-flex;
-}
-
-/* ── Wrapper ──────────────────────────────────────────── */
-
-.nr-wrapper {
-  /* Generic wrapper — no default styling, inherits from children */
-}
-
-/* ── Image ────────────────────────────────────────────── */
-
-.nr-image {
-  max-width: 100%;
-  height: auto;
-}
+/* ============================================================
+   NoirMD Vanilla CSS — entry point
+
+   Pure CSS with variables. No Tailwind dependency.
+   Import alongside vanilla.js for full styling.
+
+   Usage:
+     import '@noirmd/previewer/vanilla/vanilla.css';
+     // or
+     @import '@noirmd/previewer/vanilla/vanilla.css';
+
+   All components use .nr-* prefix to avoid conflicts.
+
+   Structure (edit per-file):
+     variables.css    → design tokens (--nr-*)
+     base.css         → global/reusable styles (typography, inline, hljs)
+     *.css            → one file per component
+   ============================================================ */
+
+@import './variables.css';
+@import './base.css';
+@import './codeblock.css';
+@import './admonition.css';
+@import './details.css';
+@import './modal.css';
+@import './card.css';
+@import './button.css';
+@import './table.css';
+@import './list.css';
+@import './blockquote.css';
+@import './toc.css';
+@import './slide.css';