@adamarant/designsystem 0.11.2

package/src/components/prose.css

@@ -0,0 +1,337 @@
+/* ==========================================================================
+   Component: Prose Block
+   Full markdown-rendered content styling. Use for CMS output, blog posts,
+   documentation, or any container with user-generated rich text.
+
+   Note: The lighter `.ds-prose` in base/typography.css handles simple
+   inline rich text (p + p spacing, links, lists). This component is for
+   comprehensive markdown rendering with headings, code blocks, blockquotes,
+   images, and horizontal rules.
+
+   Usage:
+     <div class="ds-prose-block">
+       <h2>Title</h2>
+       <p>Paragraph with <a href="#">link</a> and <code>code</code>.</p>
+       <pre><code>code block</code></pre>
+       <blockquote>Quote</blockquote>
+     </div>
+   ========================================================================== */
+
+.ds-prose-block {
+  line-height: var(--ds-leading-relaxed);
+}
+
+.ds-prose-block :is(h1, h2, h3, h4, h5, h6) {
+  font-family: var(--ds-font-display);
+  font-weight: var(--ds-font-display-weight);
+  letter-spacing: var(--ds-tracking-tight);
+  color: var(--ds-color-text);
+  margin-block-start: 1.5em;
+  margin-block-end: 0.5em;
+}
+
+.ds-prose-block :is(h1, h2, h3, h4, h5, h6):first-child {
+  margin-block-start: 0;
+}
+
+.ds-prose-block p {
+  color: var(--ds-color-text-secondary);
+  margin-block-end: 1em;
+}
+
+.ds-prose-block p:last-child {
+  margin-block-end: 0;
+}
+
+.ds-prose-block a {
+  color: var(--ds-color-interactive);
+  text-decoration: none;
+}
+
+.ds-prose-block a:hover {
+  text-decoration: underline;
+}
+
+.ds-prose-block strong {
+  color: var(--ds-color-text);
+  font-weight: var(--ds-weight-semibold);
+}
+
+.ds-prose-block code {
+  font-family: var(--ds-font-mono);
+  font-size: var(--ds-text-sm);
+  background-color: var(--ds-color-surface-muted);
+  padding: 0.125em 0.375em;
+  border-radius: var(--ds-radius-sm);
+}
+
+.ds-prose-block pre {
+  background-color: var(--ds-color-surface-muted);
+  padding: var(--ds-space-4);
+  border-radius: var(--ds-radius-lg);
+  overflow-x: auto;
+  margin-block-end: 1em;
+}
+
+.ds-prose-block pre code {
+  background: none;
+  padding: 0;
+  border-radius: 0;
+}
+
+.ds-prose-block ul,
+.ds-prose-block ol {
+  padding-inline-start: 1.5em;
+  margin-block-end: 1em;
+  color: var(--ds-color-text-secondary);
+}
+
+.ds-prose-block li {
+  margin-block-end: 0.25em;
+}
+
+.ds-prose-block ul {
+  list-style-type: disc;
+}
+
+.ds-prose-block ol {
+  list-style-type: decimal;
+}
+
+.ds-prose-block blockquote {
+  border-inline-start: 3px solid var(--ds-color-border);
+  padding-inline-start: var(--ds-space-4);
+  color: var(--ds-color-text-secondary);
+  font-style: italic;
+  margin-block-end: 1em;
+}
+
+.ds-prose-block hr {
+  border: none;
+  border-block-start: 1px solid var(--ds-color-border);
+  margin-block: var(--ds-space-6);
+}
+
+.ds-prose-block img {
+  max-width: 100%;
+  border-radius: var(--ds-radius-lg);
+  margin-block-end: 1em;
+}
+
+.ds-prose-block table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-block-end: 1em;
+  font-size: var(--ds-text-sm);
+}
+
+.ds-prose-block :is(th, td) {
+  padding: var(--ds-space-3);
+  text-align: start;
+  vertical-align: top;
+  border-block-end: 1px solid var(--ds-color-border);
+}
+
+.ds-prose-block th {
+  color: var(--ds-color-text);
+  font-weight: var(--ds-weight-semibold);
+}
+
+.ds-prose-block td {
+  color: var(--ds-color-text-secondary);
+}
+
+/* ==========================================================================
+   Editorial long-form typography (promoted from esys blog — 12 Apr 2026)
+
+   Three classes that together make an article page look like a magazine
+   instead of a dashboard. They fill the gap between .ds-hero-title (too
+   big for articles) and .ds-prose-block (whose h2 is 4xl — too heavy for
+   reading rhythm).
+
+   Usage:
+     <h1 class="ds-editorial-title">The title of the article</h1>
+     <p class="ds-editorial-lede">The lead paragraph, larger than body.</p>
+     <div class="ds-editorial-body">
+       <h2>Section</h2>
+       <p>Body text at 17px, line-height loose, with proper h2/h3 scale.</p>
+     </div>
+
+   Designed for: blog posts, long-form articles, editorial landing, magazine
+   layouts. NOT for admin UI, dashboards, or functional copy — use
+   .ds-heading-ui / .ds-section-title / .ds-prose-block for those.
+   ========================================================================== */
+
+.ds-editorial-title {
+  font-family: var(--ds-font-display);
+  font-size: var(--ds-text-editorial-title);
+  font-weight: var(--ds-font-display-weight);
+  line-height: var(--ds-leading-tight);
+  letter-spacing: var(--ds-tracking-tight);
+  color: var(--ds-color-text);
+  margin: 0;
+  text-wrap: balance;
+}
+
+.ds-editorial-lede {
+  font-family: var(--ds-font-sans);
+  font-size: var(--ds-text-editorial-lede);
+  line-height: var(--ds-leading-normal);
+  color: var(--ds-color-text-secondary);
+  margin: 0;
+  max-width: 600px;
+}
+
+/* Editorial header rhythm — when overline / title / lede appear in sequence,
+   apply natural top margins so a consumer does not need to hand-space them.
+   Promoted from esys + studio consumer rules (v0.10.2). */
+.ds-overline + .ds-editorial-title {
+  margin-block-start: var(--ds-space-3);
+}
+.ds-editorial-title + .ds-editorial-lede {
+  margin-block-start: var(--ds-space-4);
+}
+
+.ds-editorial-body {
+  color: var(--ds-color-text-secondary);
+  font-size: var(--ds-text-editorial-body);
+  line-height: var(--ds-leading-relaxed);
+}
+
+/* Paragraphs inherit from the wrapper (previously forced to primary in v0.10.1).
+   Editorial long-form uses secondary for calmer reading colour (v0.10.2). */
+.ds-editorial-body p {
+  color: inherit;
+}
+
+.ds-editorial-body > * + * {
+  margin-block-start: var(--ds-space-5);
+}
+
+.ds-editorial-body h2 {
+  font-family: var(--ds-font-display);
+  font-size: var(--ds-text-4xl);
+  font-weight: var(--ds-weight-medium);
+  line-height: var(--ds-leading-tight);
+  letter-spacing: var(--ds-tracking-tight);
+  color: var(--ds-color-text);
+  margin-block-start: var(--ds-space-12);
+  margin-block-end: 0;
+}
+
+.ds-editorial-body h3 {
+  font-family: var(--ds-font-display);
+  font-size: var(--ds-text-2xl);
+  font-weight: var(--ds-weight-medium);
+  line-height: var(--ds-leading-snug);
+  letter-spacing: var(--ds-tracking-tight);
+  color: var(--ds-color-text);
+  margin-block-start: var(--ds-space-8);
+  margin-block-end: 0;
+}
+
+.ds-editorial-body h4 {
+  font-family: var(--ds-font-display);
+  font-size: var(--ds-text-lg);
+  font-weight: var(--ds-font-display-weight);
+  color: var(--ds-color-text);
+  margin-block-start: var(--ds-space-6);
+  margin-block-end: 0;
+}
+
+.ds-editorial-body a {
+  color: var(--ds-color-interactive);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.ds-editorial-body a:hover {
+  text-decoration: none;
+}
+
+.ds-editorial-body strong {
+  color: var(--ds-color-text);
+  font-weight: var(--ds-weight-semibold);
+}
+
+.ds-editorial-body ul,
+.ds-editorial-body ol {
+  padding-inline-start: var(--ds-space-6);
+}
+
+.ds-editorial-body ul { list-style-type: disc; }
+.ds-editorial-body ol { list-style-type: decimal; }
+
+.ds-editorial-body li + li {
+  margin-block-start: var(--ds-space-2);
+}
+
+.ds-editorial-body blockquote {
+  border-inline-start: 3px solid var(--ds-color-border-hover);
+  padding-inline-start: var(--ds-space-4);
+  color: var(--ds-color-text-secondary);
+  font-style: italic;
+}
+
+.ds-editorial-body img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--ds-radius-md);
+}
+
+.ds-editorial-body hr {
+  border: none;
+  border-block-start: 1px solid var(--ds-color-border);
+  margin-block: var(--ds-space-6);
+}
+
+.ds-editorial-body pre {
+  background: var(--ds-color-surface-muted);
+  padding: var(--ds-space-4);
+  border-radius: var(--ds-radius-md);
+  overflow-x: auto;
+}
+
+.ds-editorial-body code {
+  background: var(--ds-color-surface-muted);
+  padding: 0.125em 0.375em;
+  border-radius: var(--ds-radius-sm);
+  font-family: var(--ds-font-mono);
+  font-size: 0.9em;
+}
+
+.ds-editorial-body pre code {
+  background: transparent;
+  padding: 0;
+}
+
+.ds-editorial-body table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--ds-text-sm);
+  line-height: var(--ds-leading-normal);
+}
+
+.ds-editorial-body :is(th, td) {
+  padding: var(--ds-space-3);
+  text-align: start;
+  vertical-align: top;
+  border-block-end: 1px solid var(--ds-color-border);
+}
+
+.ds-editorial-body th {
+  color: var(--ds-color-text);
+  font-weight: var(--ds-weight-semibold);
+}
+
+.ds-editorial-body thead th {
+  border-block-end-color: var(--ds-color-border-hover);
+}
+
+.ds-editorial-body td {
+  color: var(--ds-color-text-secondary);
+}
+
+.ds-editorial-body tbody tr:last-child :is(th, td) {
+  border-block-end: none;
+}

package/src/components/result.css

@@ -0,0 +1,80 @@
+/* ==========================================================================
+   Component: Result
+   Feedback page for success, error, 404, empty, etc.
+   ========================================================================== */
+
+.ds-result {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: var(--ds-space-12) var(--ds-space-6);
+  max-width: 28rem;
+  margin-inline: auto;
+
+  /* ---------------------------------------------------------------------------
+     Icon
+     --------------------------------------------------------------------------- */
+
+  &__icon {
+    width: 3rem;
+    height: 3rem;
+    margin-block-end: var(--ds-space-4);
+    color: var(--ds-color-text-secondary);
+  }
+
+  /* ---------------------------------------------------------------------------
+     Title
+     --------------------------------------------------------------------------- */
+
+  &__title {
+    font-family: var(--ds-font-display);
+    font-weight: var(--ds-weight-semibold);
+    font-size: var(--ds-text-xl);
+    color: var(--ds-color-text);
+    line-height: var(--ds-leading-tight);
+  }
+
+  /* ---------------------------------------------------------------------------
+     Description
+     --------------------------------------------------------------------------- */
+
+  &__description {
+    font-size: var(--ds-text-sm);
+    color: var(--ds-color-text-secondary);
+    line-height: var(--ds-leading-relaxed);
+    margin-block-start: var(--ds-space-2);
+  }
+
+  /* ---------------------------------------------------------------------------
+     Actions
+     --------------------------------------------------------------------------- */
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--ds-space-3);
+    margin-block-start: var(--ds-space-6);
+  }
+
+  /* ---------------------------------------------------------------------------
+     Semantic variants — icon color
+     --------------------------------------------------------------------------- */
+
+  &--success &__icon {
+    color: var(--ds-color-success);
+  }
+
+  &--warning &__icon {
+    color: var(--ds-color-warning);
+  }
+
+  &--error &__icon {
+    color: var(--ds-color-error);
+  }
+
+  &--info &__icon {
+    color: var(--ds-color-info);
+  }
+}

package/src/components/scroll-area.css

@@ -0,0 +1,73 @@
+/* ==========================================================================
+   Component: Scroll Area
+   Custom-styled scrollbar for overflow containers. Cross-browser.
+
+   Usage:
+     <div class="ds-scroll-area" style="max-height: 20rem;">
+       ...long content...
+     </div>
+
+   Modifiers:
+     .ds-scroll-area--horizontal  — Horizontal scroll
+     .ds-scroll-area--both        — Both directions
+     .ds-scroll-area--thin        — Thinner scrollbar
+   ========================================================================== */
+
+.ds-scroll-area {
+  overflow-y: auto;
+  overscroll-behavior: contain;
+
+  /* Firefox */
+  scrollbar-width: thin;
+  scrollbar-color: var(--ds-scrollbar-thumb) transparent;
+
+  /* WebKit (Chrome, Safari, Edge) */
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--ds-scrollbar-thumb);
+    border-radius: var(--ds-radius-full);
+    border: 2px solid transparent;
+    background-clip: padding-box;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: var(--ds-scrollbar-thumb-hover);
+  }
+
+  &::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  /* --- Horizontal --- */
+  &--horizontal {
+    overflow-y: hidden;
+    overflow-x: auto;
+  }
+
+  /* --- Both directions --- */
+  &--both {
+    overflow: auto;
+  }
+
+  /* --- Thin variant --- */
+  &--thin {
+    scrollbar-width: thin;
+
+    &::-webkit-scrollbar {
+      width: 4px;
+      height: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border: 1px solid transparent;
+    }
+  }
+}