@dnanpm/ui-components 0.1.0 → 0.3.0

package/dist/styles.css

@@ -1,122 +1,95 @@
-@layer dna-design-system {
+@layer dds-base {
 
 /**
  * Do not edit directly, this file was auto-generated.
  */
 
 :root {
-  --colors-primitive-neutral-100: #ffffff;
-  --colors-primitive-neutral-200: #f7f7f7;
-  --colors-primitive-neutral-300: #efeeed;
-  --colors-primitive-neutral-400: #e7e5e3;
-  --colors-primitive-neutral-500: #d4d2ce;
-  --colors-primitive-neutral-600: #948b89;
-  --colors-primitive-neutral-700: #505050;
-  --colors-primitive-neutral-800: #121212;
-  --colors-primitive-neutral-900: #000000;
-  --colors-primitive-pink-200: #ffbfe0;
-  --colors-primitive-pink-300: #ff82c1;
-  --colors-primitive-pink-400: #f7007f;
-  --colors-primitive-pink-500: #da0070;
-  --colors-primitive-pink-600: #ae005a;
-  --colors-primitive-plum-200: #792a59;
-  --colors-primitive-plum-300: #732654;
-  --colors-primitive-plum-400: #69214c;
-  --colors-primitive-plum-500: #551c3e;
-  --colors-primitive-plum-600: #441632;
-  --colors-primitive-sand-200: #fdfbfa;
-  --colors-primitive-sand-300: #f8f4f1;
-  --colors-primitive-sand-400: #efeae4;
-  --colors-primitive-sand-500: #ede8e1;
-  --colors-primitive-sand-600: #cabca7;
-  --colors-primitive-lemon-300: #fffaba;
-  --colors-primitive-lemon-400: #fff9a3;
-  --colors-primitive-lemon-500: #fff347;
-  --colors-primitive-orange-300: #ffdbad;
-  --colors-primitive-orange-400: #ffca85;
-  --colors-primitive-orange-500: #ffa633;
-  --colors-primitive-orange-600: #eb6600;
-  --colors-primitive-sky-300: #96e4f8;
-  --colors-primitive-sky-400: #77dcf5;
-  --colors-primitive-sky-500: #2ecaf0;
-  --colors-primitive-blue-400: #d8e9ff;
-  --colors-primitive-blue-500: #0064e2;
-  --colors-primitive-red-500: #dd0a0a;
-  --colors-primitive-green-500: #008500;
-  --colors-primitive-teal-500: #0b7c99;
-  --colors-semantic-foreground-default: #121212;
-  --colors-semantic-foreground-muted: #505050;
-  --colors-semantic-foreground-inverse: #ffffff;
-  --colors-semantic-foreground-primary-strong: #da0070;
-  --colors-semantic-foreground-primary-mid: #ff82c1;
-  --colors-semantic-foreground-primary-soft: #ffbfe0;
-  --colors-semantic-foreground-secondary-strong: #551c3e;
-  --colors-semantic-foreground-secondary-mid: #69214c;
-  --colors-semantic-foreground-secondary-soft: #792a59;
-  --colors-semantic-foreground-status-error: #dd0a0a;
-  --colors-semantic-foreground-status-warning: #eb6600;
-  --colors-semantic-foreground-status-success: #008500;
-  --colors-semantic-foreground-status-info: #0b7c99;
-  --colors-semantic-foreground-link: #da0070;
-  --colors-semantic-foreground-link-inverse: #ffffff;
-  --colors-semantic-foreground-link-hover: #ae005a;
-  --colors-semantic-foreground-link-inverse-hover: rgba(255, 255, 255, 0.8);
-  --colors-semantic-surface-base: #ffffff;
-  --colors-semantic-surface-neutral-soft: #fdfbfa;
-  --colors-semantic-surface-neutral-mid: #f8f4f1;
-  --colors-semantic-surface-neutral-strong: #ede8e1;
-  --colors-semantic-surface-primary-strong: #da0070;
-  --colors-semantic-surface-primary-mid: #ff82c1;
-  --colors-semantic-surface-primary-soft: #ffbfe0;
-  --colors-semantic-surface-secondary-strong: #551c3e;
-  --colors-semantic-surface-secondary-mid: #69214c;
-  --colors-semantic-surface-secondary-soft: #792a59;
-  --colors-semantic-border-neutral-mid: #d4d2ce;
-  --colors-semantic-border-neutral-soft: #e7e5e3;
-  --colors-semantic-border-neutral-base: #efeeed;
-  --colors-semantic-border-neutral-strong: #948b89;
-  --colors-semantic-border-secondary: #551c3e;
-  --colors-semantic-border-primary: #da0070;
-  --colors-semantic-border-focus: #0064e2;
-  --colors-semantic-border-inverse: #ffffff;
-  --colors-semantic-border-error: #dd0a0a;
-  --colors-semantic-border-warning: #eb6600;
-  --colors-semantic-border-success: #008500;
-  --colors-semantic-border-info: #0b7c99;
-  --colors-semantic-utility-focus-soft: #d8e9ff;
-  --colors-semantic-utility-focus-strong: #0064e2;
-  --colors-semantic-utility-overlay-strong: rgba(85, 28, 62, 0.4);
-  --colors-semantic-utility-overlay-soft: rgba(85, 28, 62, 0.1);
-  --colors-semantic-status-info: #0b7c99;
-  --colors-semantic-status-success: #008500;
-  --colors-semantic-status-warning: #eb6600;
-  --colors-semantic-status-error: #dd0a0a;
-  --colors-semantic-accent-lemon-300: #fffaba;
-  --colors-semantic-accent-lemon-400: #fff9a3;
-  --colors-semantic-accent-lemon-500: #fff347;
-  --colors-semantic-accent-orange-300: #ffdbad;
-  --colors-semantic-accent-orange-400: #ffca85;
-  --colors-semantic-accent-orange-500: #ffa633;
-  --colors-semantic-accent-sky-300: #96e4f8;
-  --colors-semantic-accent-sky-400: #77dcf5;
-  --colors-semantic-accent-sky-500: #2ecaf0;
-  --colors-semantic-interactive-primary-default: #da0070;
-  --colors-semantic-interactive-primary-hover: #ae005a;
-  --colors-semantic-interactive-primary-active: #f7007f;
-  --colors-semantic-interactive-primary-disabled: rgba(218, 0, 112, 0.3);
-  --colors-semantic-interactive-primary-focus: #ae005a;
-  --colors-semantic-interactive-secondary-default: #551c3e;
-  --colors-semantic-interactive-secondary-hover: #441632;
-  --colors-semantic-interactive-secondary-focus: #441632;
-  --colors-semantic-interactive-secondary-active: #732654;
-  --colors-semantic-interactive-secondary-disabled: rgba(85, 28, 62, 0.3);
-  --colors-semantic-interactive-neutral-default: #ede8e1;
-  --colors-semantic-interactive-neutral-hover: #cabca7;
-  --colors-semantic-interactive-neutral-focus: #cabca7;
-  --colors-semantic-interactive-neutral-active: #efeae4;
-  --colors-semantic-interactive-neutral-disabled: rgba(237, 232, 225, 0.3);
-  --colors-semantic-interactive-focus-ring: #0064e2;
-  --colors-semantic-interactive-focus-ring-weak: #d8e9ff;
+  --color-semantic-foreground-default: #121212;
+  --color-semantic-foreground-muted: #505050;
+  --color-semantic-foreground-inverse: #ffffff;
+  --color-semantic-foreground-primary-strong: #da0070;
+  --color-semantic-foreground-primary-mid: #ff82c1;
+  --color-semantic-foreground-primary-soft: #ffbfe0;
+  --color-semantic-foreground-secondary-strong: #551c3e;
+  --color-semantic-foreground-secondary-mid: #69214c;
+  --color-semantic-foreground-secondary-soft: #792a59;
+  --color-semantic-foreground-status-error: #dd0a0a;
+  --color-semantic-foreground-status-warning: #eb6600;
+  --color-semantic-foreground-status-success: #008500;
+  --color-semantic-foreground-status-info: #0b7c99;
+  --color-semantic-foreground-link: #da0070;
+  --color-semantic-foreground-link-inverse: #ffffff;
+  --color-semantic-foreground-link-hover: #ae005a;
+  --color-semantic-foreground-link-inverse-hover: rgba(255, 255, 255, 0.8);
+  --color-semantic-foreground-inverse-muted: rgba(255, 255, 255, 0.7);
+  --color-semantic-surface-base: #ffffff;
+  --color-semantic-surface-neutral-soft: #fdfbfa;
+  --color-semantic-surface-neutral-mid: #f8f4f1;
+  --color-semantic-surface-neutral-strong: #ede8e1;
+  --color-semantic-surface-primary-strong: #da0070;
+  --color-semantic-surface-primary-mid: #ff82c1;
+  --color-semantic-surface-primary-soft: #ffbfe0;
+  --color-semantic-surface-secondary-strong: #551c3e;
+  --color-semantic-surface-secondary-mid: #69214c;
+  --color-semantic-surface-secondary-soft: #792a59;
+  --color-semantic-surface-base-inverse: #121212;
+  --color-semantic-border-neutral-mid: #d4d2ce;
+  --color-semantic-border-neutral-soft: #e7e5e3;
+  --color-semantic-border-neutral-base: #efeeed;
+  --color-semantic-border-neutral-strong: #948b89;
+  --color-semantic-border-secondary: #551c3e;
+  --color-semantic-border-primary: #da0070;
+  --color-semantic-border-focus: #0064e2;
+  --color-semantic-border-inverse: #ffffff;
+  --color-semantic-border-error: #dd0a0a;
+  --color-semantic-border-warning: #eb6600;
+  --color-semantic-border-success: #008500;
+  --color-semantic-border-info: #0b7c99;
+  --color-semantic-utility-focus-soft: #d8e9ff;
+  --color-semantic-utility-focus-strong: #0064e2;
+  --color-semantic-utility-overlay-strong: rgba(85, 28, 62, 0.4);
+  --color-semantic-utility-overlay-soft: rgba(85, 28, 62, 0.1);
+  --color-semantic-status-info: #0b7c99;
+  --color-semantic-status-success: #008500;
+  --color-semantic-status-warning: #eb6600;
+  --color-semantic-status-error: #dd0a0a;
+  --color-semantic-accent-lemon-strong: #fff347;
+  --color-semantic-accent-lemon-mid: #fff9a3;
+  --color-semantic-accent-lemon-soft: #fffaba;
+  --color-semantic-accent-orange-strong: #ffa633;
+  --color-semantic-accent-orange-mid: #ffca85;
+  --color-semantic-accent-orange-soft: #ffdbad;
+  --color-semantic-accent-sky-strong: #2ecaf0;
+  --color-semantic-accent-sky-mid: #77dcf5;
+  --color-semantic-accent-sky-soft: #96e4f8;
+  --color-semantic-interactive-primary-default: #da0070;
+  --color-semantic-interactive-primary-hover: #ae005a;
+  --color-semantic-interactive-primary-active: #f7007f;
+  --color-semantic-interactive-primary-disabled: rgba(218, 0, 112, 0.3);
+  --color-semantic-interactive-primary-focus: #ae005a;
+  --color-semantic-interactive-secondary-default: #551c3e;
+  --color-semantic-interactive-secondary-hover: #441632;
+  --color-semantic-interactive-secondary-focus: #441632;
+  --color-semantic-interactive-secondary-active: #732654;
+  --color-semantic-interactive-secondary-disabled: rgba(85, 28, 62, 0.3);
+  --color-semantic-interactive-neutral-default: #ede8e1;
+  --color-semantic-interactive-neutral-hover: #cabca7;
+  --color-semantic-interactive-neutral-focus: #cabca7;
+  --color-semantic-interactive-neutral-active: #efeae4;
+  --color-semantic-interactive-neutral-disabled: rgba(237, 232, 225, 0.3);
+  --color-semantic-interactive-focus-ring: #0064e2;
+  --color-semantic-interactive-focus-ring-weak: #d8e9ff;
+  --color-semantic-interactive-inverse-default: #ffffff;
+  --color-semantic-interactive-inverse-hover: #ffffff;
+  --color-semantic-interactive-inverse-focus: #ffffff;
+  --color-semantic-interactive-inverse-active: rgba(255, 255, 255, 0.9);
+  --color-semantic-interactive-inverse-disabled: rgba(255, 255, 255, 0.3);
+  --color-semantic-interactive-auxiliary-default: #ffdbad;
+  --color-semantic-interactive-auxiliary-hover: #ffb557;
+  --color-semantic-interactive-auxiliary-focus: #ffb557;
+  --color-semantic-interactive-auxiliary-active: #ffdbad;
+  --color-semantic-interactive-auxiliary-disabled: rgba(255, 219, 173, 0.3);
   --spacing-ui-md: 16px;
   --spacing-ui-lg: 20px;
   --spacing-ui-sm: 12px;
@@ -125,31 +98,7 @@
   --spacing-ui-xxs: 4px;
   --spacing-ui-xxl: 32px;
   --spacing-ui-none: 0px;
-  --spacing-primitive-size0: 0px;
-  --spacing-primitive-size8: 8px;
-  --spacing-primitive-size16: 16px;
-  --spacing-primitive-size24: 24px;
-  --spacing-primitive-size32: 32px;
-  --spacing-primitive-size40: 40px;
-  --spacing-primitive-size12: 12px;
-  --spacing-primitive-size20: 20px;
-  --spacing-primitive-size4: 4px;
-  --spacing-primitive-size2: 2px;
-  --spacing-primitive-size48: 48px;
-  --spacing-primitive-size56: 56px;
-  --spacing-primitive-size64: 64px;
-  --spacing-primitive-size72: 72px;
-  --spacing-primitive-size80: 80px;
-  --spacing-primitive-size88: 88px;
-  --spacing-primitive-size96: 96px;
-  --spacing-primitive-size104: 104px;
-  --spacing-primitive-size112: 112px;
-  --spacing-primitive-size120: 120px;
-  --spacing-primitive-size128: 128px;
-  --spacing-primitive-size136: 136px;
-  --spacing-primitive-size144: 144px;
-  --spacing-primitive-size152: 152px;
-  --spacing-primitive-size160: 160px;
+  --spacing-ui-xxxl: 40px;
   --spacing-layout-none: 0px;
   --spacing-layout-xxs: 16px;
   --spacing-layout-xs: 32px;
@@ -163,11 +112,6 @@
   --radius-semantic-md: 8px;
   --radius-semantic-lg: 12px;
   --radius-semantic-full: 1000px;
-  --radius-primitive-size0: 0px;
-  --radius-primitive-size4: 4px;
-  --radius-primitive-size8: 8px;
-  --radius-primitive-size12: 12px;
-  --radius-primitive-size1000: 1000px;
   --borderwidth-semantic-none: 0px;
   --borderwidth-semantic-xs: 1px;
   --borderwidth-semantic-md: 3px;
@@ -175,17 +119,35 @@
   --borderwidth-semantic-xl: 5px;
   --borderwidth-semantic-xxl: 6px;
   --borderwidth-semantic-sm: 2px;
-  --borderwidth-primitive-size0: 0px;
-  --borderwidth-primitive-size1: 1px;
-  --borderwidth-primitive-size2: 2px;
-  --borderwidth-primitive-size3: 3px;
-  --borderwidth-primitive-size4: 4px;
-  --borderwidth-primitive-size5: 5px;
-  --borderwidth-primitive-size6: 6px;
+  --typography-font-size-heading-xxl: 48px;
+  --typography-font-size-heading-xl: 40px;
+  --typography-font-size-heading-lg: 34px;
+  --typography-font-size-heading-md: 28px;
+  --typography-font-size-heading-sm: 24px;
+  --typography-font-size-heading-xs: 20px;
+  --typography-font-size-heading-xxs: 18px;
+  --typography-font-size-text-lg: 20px;
+  --typography-font-size-text-md: 16px;
+  --typography-font-size-text-sm: 14px;
+  --typography-font-size-text-xs: 12px;
+  --typography-font-weight-regular: 400;
+  --typography-font-weight-medium: 500;
+  --typography-font-weight-bold: 700;
+  --typography-font-weight-black: 900;
+  --typography-font-weight-demi-bold: 600;
+  --typography-line-height-xs: 1;
+  --typography-line-height-sm: 1.1;
+  --typography-line-height-md: 1.25;
+  --typography-line-height-lg: 1.5;
+  --typography-letter-spacing-tight: -0.02em;
+  --typography-letter-spacing-normal: 0em;
+  --typography-letter-spacing-wide: 0.02em;
+  --typography-font-family-heading: DNA Heading;
+  --typography-font-family-text: DNA Text;
 }
 }
 
-@layer dna-design-system {
+@layer dds-base {
 
 *,
 *::before,
@@ -217,34 +179,107 @@ video {
 }
 }
 
-@layer dna-design-system {
+@layer dds-base {
+
+/* ==========================================================================
+   Typography shorthand variables
+
+   Each variable holds a complete CSS font shorthand value:
+   weight size/line-height family
+
+   Usage: font: var(--typography-heading-xxl);
+
+   Figma doesn't support composing typography tokens from multiple 
+   design token categories, so we need to define these shorthands in CSS. 
+   This also allows us to use the clamp() function for fluid typography, 
+   which isn't possible to do in Figma tokens.
+   ========================================================================== */
 
 :root {
-    /* Example variables for fonts, these will be replaced with actual design tokens */
-    --font-family-text: 'DNA Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    --font-family-heading: 'DNA Heading', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-
-    --font-size-xxs: 0.625rem; /* 10px */
-    --font-size-xs: 0.75rem; /* 12px */
-    --font-size-sm: 0.875rem; /* 14px */
-    --font-size-default: 1rem;
-    --font-size-lg: 1.125rem; /* 18px */
-    --font-size-xl: 1.25rem; /* 20px */
-
-    --font-weight-regular: 400;
-    --font-weight-medium: 500;
-    --font-weight-semi-bold: 600;
-    --font-weight-bold: 700;
-    --font-weight-black: 900;
-
-    --line-height-default: 1.25;
-    --line-height-text: 1.5;
+    /* Font-family with fallbacks — Figma tokens only contain the primary font name,
+       so we override here to add the full fallback stack for CSS. */
+    --typography-font-family-heading: 'DNA Heading', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    --typography-font-family-text: 'DNA Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+
+    /* Headings */
+    --typography-heading-xxl: var(--typography-font-weight-black)
+        clamp(2.25rem, 2rem + 1.25cqw, 3rem)/var(--typography-line-height-sm)
+        var(--typography-font-family-heading);
+    --typography-heading-xl: var(--typography-font-weight-black)
+        clamp(2rem, 1.833rem + 0.833cqw, 2.5rem)/var(--typography-line-height-sm)
+        var(--typography-font-family-heading);
+    --typography-heading-lg: var(--typography-font-weight-black)
+        clamp(1.625rem, 1.458rem + 0.833cqw, 2.125rem)/var(--typography-line-height-sm)
+        var(--typography-font-family-heading);
+    --typography-heading-md: var(--typography-font-weight-bold)
+        clamp(1.375rem, 1.25rem + 0.625cqw, 1.75rem)/var(--typography-line-height-md)
+        var(--typography-font-family-heading);
+    --typography-heading-sm: var(--typography-font-weight-bold)
+        clamp(1.25rem, 1.167rem + 0.417cqw, 1.5rem)/var(--typography-line-height-md)
+        var(--typography-font-family-text);
+    --typography-heading-xs: var(--typography-font-weight-bold)
+        clamp(1.125rem, 1.083rem + 0.208cqw, 1.25rem)/var(--typography-line-height-md)
+        var(--typography-font-family-text);
+    --typography-heading-xxs: var(--typography-font-weight-bold)
+        clamp(1.0625rem, 1.042rem + 0.104cqw, 1.125rem)/var(--typography-line-height-md)
+        var(--typography-font-family-text);
+
+    /* Body */
+    --typography-body-lg: var(--typography-font-weight-regular)
+        clamp(1.125rem, 1.083rem + 0.208cqw, 1.25rem)/var(--typography-line-height-lg)
+        var(--typography-font-family-text);
+    --typography-body-lg-medium: var(--typography-font-weight-medium)
+        clamp(1.125rem, 1.083rem + 0.208cqw, 1.25rem)/var(--typography-line-height-lg)
+        var(--typography-font-family-text);
+    --typography-body-md: var(--typography-font-weight-regular)
+        var(--typography-font-size-text-md)/var(--typography-line-height-lg)
+        var(--typography-font-family-text);
+    --typography-body-md-medium: var(--typography-font-weight-medium)
+        var(--typography-font-size-text-md)/var(--typography-line-height-lg)
+        var(--typography-font-family-text);
+    --typography-body-md-bold: var(--typography-font-weight-bold)
+        var(--typography-font-size-text-md)/var(--typography-line-height-lg)
+        var(--typography-font-family-text);
+    --typography-body-sm: var(--typography-font-weight-regular)
+        var(--typography-font-size-text-sm)/var(--typography-line-height-lg)
+        var(--typography-font-family-text);
+    --typography-body-sm-medium: var(--typography-font-weight-medium)
+        var(--typography-font-size-text-sm)/var(--typography-line-height-lg)
+        var(--typography-font-family-text);
+    --typography-body-xs: var(--typography-font-weight-medium)
+        var(--typography-font-size-text-xs)/var(--typography-line-height-lg)
+        var(--typography-font-family-text);
+
+    /* Labels */
+    --typography-label-lg: var(--typography-font-weight-medium)
+        var(--typography-font-size-text-md)/var(--typography-line-height-xs)
+        var(--typography-font-family-text);
+    --typography-label-lg-bold: var(--typography-font-weight-bold)
+        var(--typography-font-size-text-md)/var(--typography-line-height-xs)
+        var(--typography-font-family-text);
+    --typography-label-md: var(--typography-font-weight-medium)
+        var(--typography-font-size-text-sm)/var(--typography-line-height-xs)
+        var(--typography-font-family-text);
+    --typography-label-md-bold: var(--typography-font-weight-bold)
+        var(--typography-font-size-text-sm)/var(--typography-line-height-xs)
+        var(--typography-font-family-text);
+    --typography-label-sm: var(--typography-font-weight-medium)
+        var(--typography-font-size-text-xs)/var(--typography-line-height-xs)
+        var(--typography-font-family-text);
 }
 
+/* ==========================================================================
+   Base typography styles
+
+   These styles apply to native HTML elements and provide a baseline for
+   typography across the design system. They ensure that basic typographic
+   properties are set consistently, and they can be overridden by utility
+   classes for specific use cases.
+
+   ========================================================================== */
+
 html {
-    font-family: var(--font-family-text);
-    font-size: var(--font-size-default);
-    line-height: var(--line-height-default);
+    font: var(--typography-body-md);
 }
 
 h1,
@@ -254,5 +289,145 @@ h4,
 h5,
 h6 {
     text-wrap: balance;
+    margin: 1em 0;
+}
+p {
+    margin: 1em 0;
+}
+
+h1 {
+    font: var(--typography-heading-xxl);
+}
+h2 {
+    font: var(--typography-heading-lg);
+}
+h3 {
+    font: var(--typography-heading-md);
+}
+h4 {
+    font: var(--typography-heading-sm);
+}
+h5 {
+    font: var(--typography-heading-xs);
+}
+h6 {
+    font: var(--typography-heading-xxs);
+}
+
+b,
+strong {
+    font-weight: var(--typography-font-weight-bold);
+}
+
+/*
+ * Design decision (ADR-003): discard italic rendering for em/i.
+ * Keep semantic tags in markup, but render without slanted glyphs.
+ */
+i,
+em {
+    font-style: normal;
+}
+small {
+    font-size: var(--typography-font-size-text-sm);
+}
+
+/*
+ * Design decision (ADR-003): base links are color-driven, not underlined.
+ * Long-form content uses .dds-prose which adds underline + external link icon.
+ *
+ * :where() gives these base styles zero specificity so component classes
+ * (e.g. Button rendered as <a>) always win without needing !important.
+ */
+:where(a) {
+    color: var(--color-semantic-foreground-link);
+    text-decoration: none;
+    cursor: pointer;
+    transition: color 0.2s ease-in-out;
+}
+:where(a:hover) {
+    color: var(--color-semantic-foreground-link-hover);
+    text-decoration: none;
+}
+
+ul {
+    list-style-type: disc;
+    li::marker {
+        color: var(--color-semantic-foreground-primary-strong);
+    }
+}
+ul,
+ol {
+    margin: 1em 0;
+    padding: 0;
+
+    li {
+        margin: 0.5em 0 0.5em 1.5em;
+    }
+}
+:is(ul, ol) :is(ul, ol) {
+    margin: 0;
+}
+
+/* ==========================================================================
+   Prose — long-form content scope
+
+   Apply .dds-prose to a container to enable rich typographic styles for
+   article/editorial content (underlined links, paragraph spacing, etc.).
+
+   Usage: <article class="dds-prose">...</article>
+   ========================================================================== */
+
+.dds-prose {
+    /* Icon uses mask-image + background-color: currentColor so it inherits
+       the link color automatically in all color schemes. */
+    --icon-external-link: url('data:image/svg+xml;utf8,<svg aria-hidden="true" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M2.004 12c0 4.402 0 6.203.002 4.002V7.998c-.001-2.201-.002-.4-.002 4.002" clip-rule="evenodd"/><path d="M2.628 2.628a2.14 2.14 0 0 1 1.305-.619c.04-.004 1.58-.006 3.425-.006 3.217.001 3.356.002 3.401.016a.75.75 0 0 1 .51.513c.012.049.017.09.018.172a.64.64 0 0 1-.053.29.74.74 0 0 1-.501.42c-.05.012-.32.014-3.387.018-3.014.004-3.337.006-3.373.017a.76.76 0 0 0-.332.191.76.76 0 0 0-.193.344c-.017.066-.017 15.966 0 16.032a.73.73 0 0 0 .537.537c.066.017 15.972.017 16.038 0a.76.76 0 0 0 .344-.193.76.76 0 0 0 .191-.332c.012-.036.014-.36.017-3.376l.005-3.336.017-.063a.7.7 0 0 1 .192-.329.66.66 0 0 1 .515-.207c.12.001.196.017.286.059a.74.74 0 0 1 .41.527l-.004 6.776a2.14 2.14 0 0 1-1.945 1.913c-.075.006-2.309.008-8.115.006-7.66-.002-8.015-.003-8.095-.017a2.15 2.15 0 0 1-1.832-1.925c-.012-.13-.012-15.982 0-16.112.046-.498.263-.96.62-1.316"/><path d="M21.416 2.008c.205.034.469.155.58.344v5.501a.73.73 0 0 1-.51.551.75.75 0 0 1-.51-.048.72.72 0 0 1-.392-.56 82 82 0 0 1-.008-1.712v-1.64l-4.06 4.057c-2.233 2.231-4.078 4.07-4.1 4.085a.8.8 0 0 1-.218.104.6.6 0 0 1-.194.018.6.6 0 0 1-.194-.018.73.73 0 0 1-.496-.496.6.6 0 0 1-.018-.194.6.6 0 0 1 .018-.194.8.8 0 0 1 .103-.217c.016-.023 1.856-1.867 4.088-4.099l4.058-4.058h-1.64a81 81 0 0 1-1.713-.008.7.7 0 0 1-.499-.292.73.73 0 0 1-.11-.612.72.72 0 0 1 .385-.452c.144-.07-.154-.063 2.777-.066 1.825-.002 2.616 0 2.653.006"/></svg>');
+
+    a {
+        text-decoration: underline;
+        text-underline-offset: 0.2em;
+        text-decoration-skip-ink: auto;
+        text-decoration-thickness: from-font;
+
+        &[target='_blank'] {
+            &::after {
+                content: '';
+                display: inline-block;
+                width: 1em;
+                height: 1em;
+                margin-left: 0.25em;
+                vertical-align: text-top;
+                background-color: currentColor;
+                mask-image: var(--icon-external-link);
+                mask-size: contain;
+                mask-repeat: no-repeat;
+            }
+        }
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        margin: 1.25em 0 1rem 0;
+    }
+    p {
+        text-wrap: pretty;
+    }
+}
+
+/* ─── Dark color scheme ─── */
+
+@scope ([data-color-scheme='dark']) to ([data-color-scheme='light']) {
+    .dds-prose {
+        a {
+            color: var(--color-semantic-foreground-link-inverse);
+
+            &:hover {
+                color: var(--color-semantic-foreground-link-inverse-hover);
+            }
+        }
+    }
 }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dnanpm/ui-components",
-    "version": "0.1.0",
+    "version": "0.3.0",
     "description": "DNA Design System - React UI Components",
     "author": "DNA Oy",
     "license": "ISC",
@@ -56,8 +56,8 @@
         "clsx": "^2.1.1"
     },
     "peerDependencies": {
-        "react": "^18.0.0 || ^19.0.0",
-        "react-dom": "^18.0.0 || ^19.0.0"
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
     },
     "devDependencies": {
         "@dnanpm/design-tokens": "workspace:*",