From 49e4ee60e308db6f751acb1b447d5aa0856eb86f Mon Sep 17 00:00:00 2001 From: francisrupert Date: Wed, 4 Mar 2026 22:39:33 -0600 Subject: [PATCH 01/13] prose init --- .../theme/assets/less/dialtone-syntax.less | 2 +- apps/dialtone-documentation/docs/scratch.md | 690 +++++++++++++++++- 2 files changed, 690 insertions(+), 2 deletions(-) diff --git a/apps/dialtone-documentation/docs/.vuepress/theme/assets/less/dialtone-syntax.less b/apps/dialtone-documentation/docs/.vuepress/theme/assets/less/dialtone-syntax.less index c8373ea8e6..5840178e47 100644 --- a/apps/dialtone-documentation/docs/.vuepress/theme/assets/less/dialtone-syntax.less +++ b/apps/dialtone-documentation/docs/.vuepress/theme/assets/less/dialtone-syntax.less @@ -33,7 +33,7 @@ div[class*="language-"] { } } -code:not(.d-code--md, .d-code--sm) { +code:not(.d-code--md, .d-code--sm, .d-prose *) { padding: var(--dt-size-200) var(--dt-size-300); color: var(--dt-color-blue-800); background-color: var(--dt-color-surface-info); diff --git a/apps/dialtone-documentation/docs/scratch.md b/apps/dialtone-documentation/docs/scratch.md index fc4649ab36..f3ca37c188 100644 --- a/apps/dialtone-documentation/docs/scratch.md +++ b/apps/dialtone-documentation/docs/scratch.md @@ -2,4 +2,692 @@ layout: Blank --- - + +
+
+ +

Heading Level 1 small text

+

This is a standard paragraph of body text. It contains enough words to wrap across multiple lines so you can evaluate line height, measure, and paragraph spacing. Good typography makes content easier to read and understand.

+

This is another standard paragraph of body text.

+

Heading Level 2 small text

+

This is a standard paragraph of body text. It contains enough words to wrap across multiple lines so you can evaluate line height, measure, and paragraph spacing. Good typography makes content easier to read and understand.

+

Heading Level 3 small text

+

This is a standard paragraph of body text. It contains enough words to wrap across multiple lines so you can evaluate line height, measure, and paragraph spacing. Good typography makes content easier to read and understand.

+

Heading Level 4 small text

+

This is a standard paragraph of body text. It contains enough words to wrap across multiple lines so you can evaluate line height, measure, and paragraph spacing. Good typography makes content easier to read and understand.

+
Heading Level 5 small text
+

This is a standard paragraph of body text. It contains enough words to wrap across multiple lines so you can evaluate line height, measure, and paragraph spacing. Good typography makes content easier to read and understand.

+
Heading Level 6 small text
+ +

This is a standard paragraph of body text. It contains enough words to wrap across multiple lines so you can evaluate line height, measure, and paragraph spacing. Good typography makes content easier to read and understand.

+

This second paragraph tests spacing between consecutive paragraphs. It also contains bold text, italic text, bold italic text, and underlined text. Here is strikethrough text for deleted content.

+

Inline elements: inline code, Ctrl + S keyboard input, highlighted text, small text, subscript and superscript, and abbr.

+

More inline elements: x = y + z for variables, Error: file not found for sample output, design token for defining terms, and an inline quotation with automatic quote marks. The formula is E = mc2 and water is H2O.

+

Edit tracking: This text has been removed and been added to show revision marks.

+ +

Here is a standard link within a paragraph. And here is a link with bold and em inside it.

+ +
+ +

Unordered List

+
    +
  • First item in an unordered list
    • +
  • Second item with a bit more text to test wrapping behavior on longer list items
    • +
  • Third item with nested list: +
      +
    • Nested item one
      • +
    • Nested item two
      • +
    • Deeply nested: +
        +
      • Third level item
        • +
      +
      • +
    +
    • +
  • Fourth item back at the top level
    • +
+ +

Ordered List

+
    +
  1. First step in a process
    2. +
  2. Second step with more detail to test line wrapping within ordered list items
    3. +
  3. Third step with a nested ordered list: +
      +
    1. Sub-step one
      2. +
    2. Sub-step two
      3. +
    +
    4. +
  4. Fourth step back at the top level
    5. +
+ +

Mixed List

+
    +
  • Unordered item with an ordered sub-list: +
      +
    1. Ordered sub-item one
      2. +
    2. Ordered sub-item two
      3. +
    +
    • +
  • Another unordered item
    • +
+ +

Blockquotes

+
+

This is a single-paragraph blockquote. It should be visually distinct from surrounding body text.

+
+
+

This is a multi-paragraph blockquote. The first paragraph introduces the idea.

+

The second paragraph continues the thought. Both paragraphs should sit inside the same blockquote styling.

+
+
+

Nested blockquote:

+
+

This is a blockquote inside a blockquote.

+
+
+
+

Good design is as little design as possible.

+
— Dieter Rams, Ten Principles of Good Design
+
+ +

Code Blocks

+ 
// A plain code block
+name) {
+  return `Hello, ${name}!`;
+}
+const message = greet('world');
+console.log(message);
+

And here is a paragraph between two code blocks to test spacing.

+ 
<template>
+  <div class="container">
+    <h1>{{ title }}</h1>
+    <p>{{ description }}</p>
+  </div>
+</template>
+ +

Tables

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Component API reference
PropertyTypeDefaultDescription
sizeString'md'Sets the size of the component
variantString'default'Sets the visual style variant
disabledBooleanfalseWhen true, prevents user interaction
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Token spacing scale
TokenValuePixels
--dt-size-3000.4rem4px
--dt-size-4000.8rem8px
--dt-size-5001.6rem16px
+ +

Definition List

+
+
Design token
+
A named value that represents a design decision, such as a color, spacing unit, or font size.
+
Component
+
A reusable UI element that encapsulates structure, style, and behavior.
+
Utility class
+
A single-purpose CSS class that applies one specific style rule.
+
+ +

Images

+ Standalone image outside of a figure + +
+ Placeholder image +
Figure 1: A placeholder image with a caption below it.
+
+ +

Details / Summary

+
+ Click to expand for more information +

This content is hidden by default and revealed when the user interacts with the summary element. It can contain any block-level content including paragraphs, lists, and code.

+
    +
  • Detail item one
    • +
  • Detail item two
    • +
+
+ +

Task List

+
    +
  • Completed task
    • +
  • Incomplete task
    • +
  • Another task to do
    • +
+ +

Long-Form Content Flow

+

This section tests how all the elements above flow together naturally, as they would in real documentation or article content.

+

When building with our design system, start by installing the package:

+ 
npm install @dialpad/dialtone
+

Then import the styles in your entry file:

+ 
import '@dialpad/dialtone/css';
+

You can now use any of the available utility classes. For example:

+
    +
  • d-p16 — applies 16px padding
    • +
  • d-fc-primary — sets the primary font color
    • +
  • d-bgc-moderate — applies a moderate background color
    • +
+
+

Note: Make sure your build pipeline is configured to process CSS imports before using utility classes in production.

+
+

For more details, see the installation guide or reach out to the team on Slack.

+
+
+ + From 1a459c3b4deb24c68946fc186e8ad3dea3679dee Mon Sep 17 00:00:00 2001 From: francisrupert Date: Wed, 4 Mar 2026 23:56:25 -0600 Subject: [PATCH 02/13] add prose vue component --- .../theme/assets/less/dialtone-docs.less | 28 ++ .../docs/.vuepress/theme/components/Page.vue | 2 +- .../docs/_data/site-nav.json | 4 + .../docs/components/prose.md | 247 ++++++++++ common/components_list.js | 1 + .../lib/build/less/components/prose.less | 464 ++++++++++++++++++ .../dialtone-css/lib/build/less/dialtone.less | 1 + .../dialtone-vue/components/prose/index.js | 2 + .../components/prose/prose.stories.js | 26 + .../components/prose/prose.test.js | 215 ++++++++ .../dialtone-vue/components/prose/prose.vue | 108 ++++ .../components/prose/prose_constants.js | 25 + .../components/prose/prose_default.story.vue | 252 ++++++++++ packages/dialtone-vue/index.js | 1 + pnpm-lock.yaml | 36 +- 15 files changed, 1394 insertions(+), 18 deletions(-) create mode 100644 apps/dialtone-documentation/docs/components/prose.md create mode 100644 packages/dialtone-css/lib/build/less/components/prose.less create mode 100644 packages/dialtone-vue/components/prose/index.js create mode 100644 packages/dialtone-vue/components/prose/prose.stories.js create mode 100644 packages/dialtone-vue/components/prose/prose.test.js create mode 100644 packages/dialtone-vue/components/prose/prose.vue create mode 100644 packages/dialtone-vue/components/prose/prose_constants.js create mode 100644 packages/dialtone-vue/components/prose/prose_default.story.vue diff --git a/apps/dialtone-documentation/docs/.vuepress/theme/assets/less/dialtone-docs.less b/apps/dialtone-documentation/docs/.vuepress/theme/assets/less/dialtone-docs.less index 395cda8872..ac29a25b5f 100644 --- a/apps/dialtone-documentation/docs/.vuepress/theme/assets/less/dialtone-docs.less +++ b/apps/dialtone-documentation/docs/.vuepress/theme/assets/less/dialtone-docs.less @@ -467,6 +467,34 @@ code { } } +.d-docsite-article { + > table:not([class]) { + border: 1px solid var(--dt-color-border-subtle); + border-collapse: collapse; + margin: var(--dt-size-200) 0; + inline-size: 100%; + + th { + font: var(--dt-text-label-sm); + color: var(--dt-color-foreground-secondary); + } + + th, td { + text-align: start; + border: 1px solid var(--dt-color-border-subtle); + border-inline: 0; + padding: var(--dt-size-450); + } + + code { + background-color: var(--dt-color-background-default); + padding: var(--dt-size-200); + font: var(--dt-text-code-xs); + } + } + +} + .d-docsite--unordered-list, .d-docsite--list-element, .d-docsite--ordered-list { diff --git a/apps/dialtone-documentation/docs/.vuepress/theme/components/Page.vue b/apps/dialtone-documentation/docs/.vuepress/theme/components/Page.vue index 3db077f0cf..4c9a3b3609 100644 --- a/apps/dialtone-documentation/docs/.vuepress/theme/components/Page.vue +++ b/apps/dialtone-documentation/docs/.vuepress/theme/components/Page.vue @@ -6,7 +6,7 @@
- + + + + + + + +### Content validation + +DtProse enforces that slot content stays "pure" HTML: + +- **Disallowed elements** — Form controls (``, `
', + }); + + expect(consoleError).toHaveBeenCalledWith( + expect.stringContaining('