docs(foundations, homepage): DLT-3349 DLT-3350 refresh foundations content and homepage

[Francis Rupert (francisrupert)]

🛠️ Type Of Change

• Documentation

📖 Jira Ticket

• https://dialpad.atlassian.net/browse/DLT-3349
• https://dialpad.atlassian.net/browse/DLT-3350

📖 Description

Foundations content rewrites:

• Layout and Spacing (renamed from Size and Space)
• Gradient + children (Marketing, Product)
• Graphic System parent + children (Abstract Graphics, Illustrations, Data Visualizations)
• Sub-brands and Co-branding
• Motion, with hover-to-play videos and play-icon overlays
• Product Storytelling

Homepage refactor: mostly cleaning up from Hackathon source.

• DtStack migration (replaced d-ai-* / d-jc-* utility classes with props)
• Token-stop width/height classes (d-w114 → d-w-175, etc.)
• Scroll-handler cleanup (rAF-throttled)
• 11 home/foundations SVGs converted to PNG (~12 MB saved)

SVG→PNG sweep across color and type docs: 10 raster-laden SVGs converted to PNG (~29 MB saved). Source SVGs deleted; markdown swaps <svg-loader> to <img>, preserving the original class list.

Sidebar nav (_data/site-nav.json):

• Foundations restructured (Layout and Spacing moved between Type and Gradient; Gradient/Graphic System children added; Product Storytelling added; Icons moved above Gradient)
• Color sub-page labels clarified (Color Palette → Product Color Palette; Themes → Product Themes)

💡 Context

MVP content and homepage shape for the Q1 26 dialpad.design launch (parent epic DLT-3017).

📝 Checklist

• No private Dialpad links or info in code or PR description.
• Reviewed the diff.
• Considered performance impact (asset weight reduced; no runtime regressions).

📷 Screenshots / GIFs

kuytgfsh.mp4

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Central YAML (base), Organization UI (inherited)

Review profile: ASSERTIVE

Plan: Enterprise

Run ID: 68eb9657-951e-4e20-b9f5-81c59a719af5

📥 Commits

Reviewing files that changed from the base of the PR and between 1c5ff94 and 432dafa.

📒 Files selected for processing (2)

• apps/dialtone-documentation/docs/.vuepress/theme/index.js
• apps/dialtone-documentation/docs/_data/site-nav.json

---

Documentation and homepage refresh: Foundations reorganized (Layout & Spacing, Gradient, Graphic System, Sub-brands, Motion with hover-play), homepage refactor (component props, token class renames, rAF-throttled scroll), 21 SVG→PNG conversions (~41 MB saved), sidebar nav and minor UI/text updates.

Overall Judgement: ✅ Ready to merge

Rationale: Changes improve content structure, performance, and asset weight without breaking APIs; build fix merged from next should resolve CI.

Walkthrough

Reworks documentation content and layout: replaces many inline SVGs with PNGs, adds new foundation pages (Graphic System, Product Storytelling, Gradient), refactors multiple Vue components (spacing, labels, helper rename), updates styles, and adjusts small config and placeholder texts.

Changes

Cohort / File(s)	Summary
Vue components & theme apps/dialtone-documentation/docs/.vuepress/baseComponents/BlogPost.vue, apps/dialtone-documentation/docs/.vuepress/baseComponents/BlogPostPreview.vue, apps/dialtone-documentation/docs/.vuepress/baseComponents/ButtonVariantsTable.vue, apps/dialtone-documentation/docs/.vuepress/baseComponents/SvgLoader.vue, apps/dialtone-documentation/docs/.vuepress/theme/components/SidebarItem.vue, apps/dialtone-documentation/docs/.vuepress/theme/index.js	Adjusts spacing/utility classes, wraps copy button markup and changes its aria-label, updates card padding/border classes, renames internal helper isExternalLink→isExternalUrl, extracts FOUNDATIONS_OVERVIEW_EXCLUDES constant, and adds minor formatting tweaks.
Homepage & view components apps/dialtone-documentation/docs/index.md, apps/dialtone-documentation/docs/dialtone/whats-new/index.md, apps/dialtone-documentation/docs/views/Overview.vue, apps/dialtone-documentation/docs/views/IconCatalog.vue, apps/dialtone-documentation/docs/views/ColorsCatalog.vue	Refactors homepage into dt-box/component-based layout, improves scroll/mouse animation throttling, adds PNG thumbnail fallback for overview, wraps blog previews, and removes explicit input class from IconCatalog.
Color, gradient & palette docs apps/dialtone-documentation/docs/foundations/colors/index.md, .../colors/palette/index.md, .../colors/themes/index.md, .../colors/marketing/index.md, .../colors/usage/index.md, .../gradient/*.md	Renames pages to product-focused titles, adjusts spacing and tab icons, swaps numerous svg-loader components for static PNG <img>s with display/width utilities, and adds new gradient marketing/product pages with assets.
Brand, icons & logos apps/dialtone-documentation/docs/foundations/brand/index.md, .../brand/our-icon/index.md, .../brand/using-our-logo/index.md, .../brand/sub-brands-and-co-branding/index.md	Adds download_url frontmatter, replaces some SVG loaders with <img> previews, converts logo markup to component-based text, fixes download links, and expands co‑branding content.
Graphic system & storytelling (new) apps/dialtone-documentation/docs/foundations/graphic-system/index.md, .../graphic-system/abstract-graphics.md, .../graphic-system/data-visualizations.md, apps/dialtone-documentation/docs/foundations/product-storytelling/index.md	Adds new Graphic System landing and subpages and a Product Storytelling page; includes metadata, grids, images, and one "Coming soon" empty state.
Motion, illustrations & typography apps/dialtone-documentation/docs/foundations/motion/index.md, .../illustrations/index.md, .../type/index.md, .../typography/marketing.md	Transforms Motion into interactive "Motion Principles" with video hover behaviors, restructures illustrations layout, and replaces several inline SVG renderers with PNG images plus sizing classes.
Docs text & placeholders apps/dialtone-documentation/docs/components/button.md, apps/dialtone-documentation/docs/articles/index.md, apps/dialtone-documentation/docs/careers/index.md, apps/dialtone-documentation/docs/tokens/...	Updates positive button copy to include confirmatory/success phrasing and replaces multiple "TBD" empty-state headers with "Coming soon".
Styling & build config apps/dialtone-documentation/docs/.vuepress/theme/assets/less/dialtone-syntax.less, packages/dialtone-css/lib/build/less/components/prose.less, apps/dialtone-documentation/postcss.config.mjs	Removes a specific inline-code styling block from syntax less, adjusts prose code font scale from 87.5%→85%, and expands PostCSS responsive grid regex to include 4-column variants.
Site navigation & data apps/dialtone-documentation/docs/_data/site-nav.json	Reorganizes Foundations navigation: relabels color/themes pages, adds Icons and Product Storytelling sections, expands Gradient children, and replaces previous Icons/Illustrations grouping with a Graphic System group.

Possibly related PRs

• docs(downloads): DLT-3052 DLT-3355 add downloads section and navbar hovercards #1229 — Renames/centralizes external-link helper (isExternalLink→isExternalUrl) and updates components to use it; strongly related to SidebarItem helper rename.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch docs/dialpad-design-content

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Please add either the visual-test-ready or no-visual-test label to this PR depending on whether you want to run visual tests or not.
It is recommended to run visual tests if your PR changes any UI. ‼️

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: e6091f9044

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "Codex (@codex) review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "Codex (@codex) address that feedback".

[coderabbitai]

Actionable comments posted: 15

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

apps/dialtone-documentation/docs/index.md (1)

261-304: ⚠️ Potential issue | 🟠 Major

Register lifecycle hooks at setup time, not inside callbacks.

Vue 3 Composition API requires lifecycle hook registration (including onUnmounted) to occur synchronously during setup. Calling onUnmounted inside onMounted at lines 300, 360, and 396 prevents Vue from associating the cleanup callback with the component instance, risking leaked event listeners and animation frames on route changes.

Refactor with top-level teardown registry

+const disposers = [];
+
+onUnmounted(() => {
+  disposers.forEach((dispose) => dispose());
+});

 onMounted(() => {
   // ...
   animate();
   window.addEventListener('mousemove', handleMouseMove);
-
-  onUnmounted(() => {
-    window.removeEventListener('mousemove', handleMouseMove);
-    cancelAnimationFrame(animationId);
-  });
+  disposers.push(() => {
+    window.removeEventListener('mousemove', handleMouseMove);
+    cancelAnimationFrame(animationId);
+  });
 });

 onMounted(() => {
   // ...
   window.addEventListener('scroll', handleScroll, { passive: true });
   update();
-
-  onUnmounted(() => {
-    window.removeEventListener('scroll', handleScroll);
-  });
+  disposers.push(() => window.removeEventListener('scroll', handleScroll));
 });

 onMounted(() => {
   // ...
   window.addEventListener('scroll', handleFooterScroll, { passive: true });
   update();
-
-  onUnmounted(() => {
-    window.removeEventListener('scroll', handleFooterScroll);
-  });
+  disposers.push(() => window.removeEventListener('scroll', handleFooterScroll));
 });

Also applies to: 307-363, 366-399

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/dialtone-documentation/docs/index.md` around lines 261 - 304, The
lifecycle cleanup is being registered inside onMounted; move the teardown
registration so onUnmounted is called synchronously during setup (not nested
inside onMounted). Extract animation state/variables (animationId,
currentPositionX/Y, targetPositionX/Y, gradientOverlay) and the functions
animate and handleMouseMove to the outer setup scope, call animate and add the
mousemove listener inside onMounted, and call onUnmounted at top-level to
removeEventListener(handleMouseMove) and cancelAnimationFrame(animationId);
ensure the same names (animate, handleMouseMove, animationId, gradientOverlay)
are referenced so Vue can properly associate the teardown with the component
instance.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@apps/dialtone-documentation/docs/.vuepress/baseComponents/BlogPost.vue`:
- Around line 13-19: The wrapper <div> in BlogPost.vue creates an empty flex
child when isPreview is true; move the v-if from the <copy-button> to the
wrapper div (or make the wrapper render conditionally) so the div is not
rendered at all when isPreview is true, ensuring no empty flex item appears;
update references to copy-button, isPreview and blogLink accordingly and keep
the aria-label on the button.

In `@apps/dialtone-documentation/docs/.vuepress/theme/index.js`:
- Around line 31-49: The FOUNDATIONS_OVERVIEW_EXCLUDES array contains nested
paths that won't match the direct-child extraction used by
_extractFrontmatter(app, '/foundations/', ...); update
FOUNDATIONS_OVERVIEW_EXCLUDES to only include top-level foundation pages in the
form '/foundations/<slug>/' (and their possible '/foundations/<slug>.html'
variants) by removing any entries with additional segments (e.g.,
'/foundations/colors/usage/' and other multi-segment paths), so the list matches
the regex behavior and is easier to maintain.

In `@apps/dialtone-documentation/docs/foundations/brand/our-icon/index.md`:
- Line 30: The inline CTA using the custom component dt-link currently points to
"/downloads/"; change its target to the download anchor to match download_url by
updating the dt-link 'to' attribute to "/downloads/#icon" so the paragraph link
deep-links directly to the icon download anchor.

In `@apps/dialtone-documentation/docs/foundations/colors/themes/index.md`:
- Around line 327-332: Replace the invalid CSS utility class d-bar4 with the
correct tokenized class d-bar-400 where it appears on the image elements (e.g.,
the img elements inside the template blocks with `#do` and `#dont`); update each img
class attribute to use d-bar-400 so it matches the surrounding container styling
and the system border-radius scale.

In `@apps/dialtone-documentation/docs/foundations/gradient/index.md`:
- Line 27: Update the awkward sentence in the paragraph that currently reads
“explaining AI platforms our systems” by inserting the missing word so it
becomes grammatically correct; change it to either “explaining AI platforms or
our systems” or “explaining AI platforms in our systems” (pick the one that
matches the intent) in the paragraph text within index.md.

In `@apps/dialtone-documentation/docs/foundations/gradient/product.md`:
- Around line 18-31: The two informative images currently have empty alt
attributes; update the <img> elements (the ones with
src="/assets/images/gradient--product-01.png" and
src="/assets/images/gradient--product-02.png" and class "d-d-block d-w100p
d-bar-500") to include concise, descriptive alt text that conveys the visual
information and context (e.g., reference the DtBadge/Surface Example usage shown
in the images) so assistive technologies can present the content meaningfully.

In `@apps/dialtone-documentation/docs/foundations/graphic-system/index.md`:
- Line 16: The two card descriptions "Abstract Graphics" and "Data
Visualizations" currently share the same paragraph; update the duplicated copy
so each card has distinct text: keep the existing line for one (e.g., the Data
Visualizations paragraph "When generating interest or connecting and
communicating broad information, use simplified data visuals.") and replace the
other (the Abstract Graphics paragraph) with a unique description that reflects
abstract/expressive visual language (mentioning form, color, texture, and mood
rather than data), ensuring both headings "Abstract Graphics" and "Data
Visualizations" have clear, different copy.
- Line 20: The Illustrations card's route is pointing to
/foundations/illustrations/ instead of the updated Graphic System IA route;
update the dt-link component's to attribute (the dt-link element in this file)
to the nested path that matches the new IA (e.g.,
/foundations/graphic-system/illustrations/) and verify sibling dt-link entries
follow the same /foundations/graphic-system/... pattern to keep nav links
consistent with the new docs routes.

In `@apps/dialtone-documentation/docs/foundations/motion/index.md`:
- Line 13: The motion videos use preload="auto" (e.g., the <video> element with
classes "d-gcs1 d-grs1 d-d-block d-w100p d-bar-500" and src
"/assets/videos/motion--empowered-elevated.mp4"); change their preload attribute
to "metadata" (or "none") to avoid eager downloading; update every similar
<video> instance referenced in the comment (the other motion video elements at
the noted locations) so they use preload="metadata" and keep muted loop preload
behavior interaction-driven.
- Line 20: Fix the grammar and typos in the card descriptions: replace the
sentence "By using motion the is literally uplifting, we connect to our brand
character of empowering or customers." with a grammatically correct variant
(e.g., "By using motion, the experience is literally uplifting; we connect to
our brand character of empowering our customers.") and correct other phrases
like "When the times right" to "When the time's right" or "When the time is
right" (these occur elsewhere in the same file). Ensure punctuation and
possessives are correct and that "or customers" becomes "our customers" and
similar typos are fixed across the affected card descriptions.
- Line 12: The hover-only dt-box elements using `@mouseenter`="onCardEnter" and
`@mouseleave`="onCardLeave" must support keyboard and touch: add
`@focus`="onCardEnter" and `@blur`="onCardLeave", add a click/tap handler (e.g.,
`@click`="toggleCard" or call onCardEnter/onCardLeave appropriately) and handle
keydown for Enter/Space to activate the same behavior; ensure the dt-box is
keyboard-focusable (tabindex="0") and has appropriate ARIA attributes/roles if
it’s interactive. Apply the same changes to all other dt-box instances mentioned
(the repeated hover-play cards) so keyboard, touch, and assistive technologies
get parity with mouse hover.
- Around line 153-159: The onCardEnter/onCardLeave handlers currently start/stop
video playback unconditionally; update onCardEnter to first check the user
preference via window.matchMedia('(prefers-reduced-motion: reduce)').matches and
if true do not call play() or toggle the play-overlay class (i.e., skip autoplay
for reduced-motion users), and ensure onCardLeave still pauses the video if it
is playing but gracefully handles the same preference check so no autoplay is
triggered for those users; reference the onCardEnter and onCardLeave functions
and the elements selected via querySelector('video') and '[data-play-overlay]'.

In `@apps/dialtone-documentation/docs/foundations/product-storytelling/index.md`:
- Line 13: The <img> tags for the three screenshots
(src="/assets/images/product-storytelling--01.png",
product-storytelling--02.png, product-storytelling--03.png) lack meaningful alt
text; update each img element (the ones with class "d-d-block d-w100p
d-bar-500") to include concise, descriptive alt attributes that summarize the
visual differences (e.g., "Simplified UI showing a high-level overview with
minimal controls", "Focused UI highlighting a single primary action and reduced
distractions", "Literal UI showing detailed labels and full-form controls") so
screen readers convey the visual distinctions.

In `@apps/dialtone-documentation/docs/utilities/effects/transition.md`:
- Line 9: The prose incorrectly states the default duration for the d-t utility;
update the sentence that says "It defaults to a duration of .d-td50" to reflect
the actual default defined in the class table (var(--td25)), e.g. change it to
".d-td25" or "var(--td25)"; keep the rest of the sentence about easing
(.d-ttf-in-out) and properties (all style properties) intact and mention the
same override classes (d-td*, d-ttf-*, d-tp-*).

In `@apps/dialtone-documentation/postcss.config.mjs`:
- Line 6: The regex /\.d-g-cols[1-4]$/ in postcss.config.mjs is missing the
hyphen before the digit so it matches ".d-g-cols1"…".d-g-cols4" instead of the
actual utility names; update that pattern to include the hyphen (i.e., match
"d-g-cols-1"… "d-g-cols-4") so responsive variants are generated correctly for
the d-g-cols utilities.

---

Outside diff comments:
In `@apps/dialtone-documentation/docs/index.md`:
- Around line 261-304: The lifecycle cleanup is being registered inside
onMounted; move the teardown registration so onUnmounted is called synchronously
during setup (not nested inside onMounted). Extract animation state/variables
(animationId, currentPositionX/Y, targetPositionX/Y, gradientOverlay) and the
functions animate and handleMouseMove to the outer setup scope, call animate and
add the mousemove listener inside onMounted, and call onUnmounted at top-level
to removeEventListener(handleMouseMove) and cancelAnimationFrame(animationId);
ensure the same names (animate, handleMouseMove, animationId, gradientOverlay)
are referenced so Vue can properly associate the teardown with the component
instance.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Central YAML (inherited), Organization UI (inherited)

Review profile: ASSERTIVE

Plan: Enterprise

Run ID: acdef4e2-7ebd-47a2-b97d-a0b339527ae1

📥 Commits

Reviewing files that changed from the base of the PR and between 961965a and e6091f9.

⛔ Files ignored due to path filters (105)

• apps/dialtone-documentation/docs/.vuepress/public/assets/images/cobrand--examples.svg is excluded by !**/*.svg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/color-border-ai.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/color-border-ai.svg is excluded by !**/*.svg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/color-marketing--01.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/color-marketing--01.svg is excluded by !**/*.svg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/color-marketing--02.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/color-marketing--02.svg is excluded by !**/*.svg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/color-marketing--03.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/color-marketing--03.svg is excluded by !**/*.svg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/color-marketing--04.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/color-marketing--04.svg is excluded by !**/*.svg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/color-marketing--05.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/color-marketing--05.svg is excluded by !**/*.svg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/color-marketing--06.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/color-marketing--06.svg is excluded by !**/*.svg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/color-mode.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/color-mode.svg is excluded by !**/*.svg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/color-text-f.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/color-text-f.svg is excluded by !**/*.svg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/color-text-s.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/color-text-s.svg is excluded by !**/*.svg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/color-tokens.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/color-tokens.svg is excluded by !**/*.svg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/color-uniform-do.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/color-uniform-do.svg is excluded by !**/*.svg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/color-uniform-dont.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/color-uniform-dont.svg is excluded by !**/*.svg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/gradient--01.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/gradient--02.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/gradient--billboard.svg is excluded by !**/*.svg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/gradient--dark.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/gradient--light.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/gradient--product-01.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/gradient--product-02.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/gradient--usage.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/graphic--abstract.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/graphic--data-vis.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/graphic--illustrations.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/graphics-abstract--01.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/graphics-abstract--02.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/graphics-abstract--03.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/graphics-abstract--04.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/graphics-abstract--billboard.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/home-foundations-02.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/home-foundations-02.svg is excluded by !**/*.svg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/home-foundations-03.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/home-foundations-03.svg is excluded by !**/*.svg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/home-system--01.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/home-system--01.svg is excluded by !**/*.svg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/home-system--02.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/home-system--02.svg is excluded by !**/*.svg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/home-system--03.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/home-system--03.svg is excluded by !**/*.svg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/home-system--04.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/home-system--04.svg is excluded by !**/*.svg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/icon--in-product.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/icon--usage.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/icon--usage.svg is excluded by !**/*.svg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/icon--versions.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/icon--versions.svg is excluded by !**/*.svg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/illustrations--billboard.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/motion--confident-focused--poster.jpg is excluded by !**/*.jpg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/motion--curve-animate-in.svg is excluded by !**/*.svg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/motion--curve-animate-out.svg is excluded by !**/*.svg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/motion--ease-in--poster.jpg is excluded by !**/*.jpg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/motion--ease-out--poster.jpg is excluded by !**/*.jpg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/motion--elevate--poster.jpg is excluded by !**/*.jpg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/motion--empowered-elevated--poster.jpg is excluded by !**/*.jpg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/motion--inspired-dynamic--poster.jpg is excluded by !**/*.jpg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/motion--scale-out--poster.jpg is excluded by !**/*.jpg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/motion--scale-up--poster.jpg is excluded by !**/*.jpg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/motion--transform--poster.jpg is excluded by !**/*.jpg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/product-storytelling--01.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/product-storytelling--02.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/product-storytelling--03.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/product-storytelling.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/sub-brand--multiple-products-card.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/sub-brand--non-product-examples.svg is excluded by !**/*.svg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/sub-brand--product-examples.svg is excluded by !**/*.svg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/sub-brand--single-product-card.svg is excluded by !**/*.svg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/theme-contrast-do.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/theme-contrast-do.svg is excluded by !**/*.svg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/theme-contrast-dont.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/theme-contrast-dont.svg is excluded by !**/*.svg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/type--in-marketing.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/type--in-marketing.svg is excluded by !**/*.svg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/type--marketing-sample-01.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/type--marketing-sample-01.svg is excluded by !**/*.svg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/type--marketing-sample-02.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/type--marketing-sample-02.svg is excluded by !**/*.svg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/type--marketing-sample-03.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/type--marketing-sample-03.svg is excluded by !**/*.svg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/type--sample-02.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/type--sample-02.svg is excluded by !**/*.svg
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/type.png is excluded by !**/*.png
• apps/dialtone-documentation/docs/.vuepress/public/assets/images/type.svg is excluded by !**/*.svg
• apps/dialtone-documentation/docs/.vuepress/public/assets/videos/motion--confident-focused.mp4 is excluded by !**/*.mp4
• apps/dialtone-documentation/docs/.vuepress/public/assets/videos/motion--ease-in.mp4 is excluded by !**/*.mp4
• apps/dialtone-documentation/docs/.vuepress/public/assets/videos/motion--ease-out.mp4 is excluded by !**/*.mp4
• apps/dialtone-documentation/docs/.vuepress/public/assets/videos/motion--elevate.mp4 is excluded by !**/*.mp4
• apps/dialtone-documentation/docs/.vuepress/public/assets/videos/motion--empowered-elevated.mp4 is excluded by !**/*.mp4
• apps/dialtone-documentation/docs/.vuepress/public/assets/videos/motion--inspired-dynamic.mp4 is excluded by !**/*.mp4
• apps/dialtone-documentation/docs/.vuepress/public/assets/videos/motion--scale-out.mp4 is excluded by !**/*.mp4
• apps/dialtone-documentation/docs/.vuepress/public/assets/videos/motion--scale-up.mp4 is excluded by !**/*.mp4
• apps/dialtone-documentation/docs/.vuepress/public/assets/videos/motion--transform.mp4 is excluded by !**/*.mp4

📒 Files selected for processing (41)

• apps/dialtone-documentation/docs/.vuepress/baseComponents/BlogPost.vue
• apps/dialtone-documentation/docs/.vuepress/baseComponents/BlogPostPreview.vue
• apps/dialtone-documentation/docs/.vuepress/baseComponents/ButtonVariantsTable.vue
• apps/dialtone-documentation/docs/.vuepress/baseComponents/SvgLoader.vue
• apps/dialtone-documentation/docs/.vuepress/theme/assets/less/dialtone-syntax.less
• apps/dialtone-documentation/docs/.vuepress/theme/components/SidebarItem.vue
• apps/dialtone-documentation/docs/.vuepress/theme/index.js
• apps/dialtone-documentation/docs/.vuepress/views/ColorsCatalog.vue
• apps/dialtone-documentation/docs/.vuepress/views/IconCatalog.vue
• apps/dialtone-documentation/docs/.vuepress/views/Overview.vue
• apps/dialtone-documentation/docs/_data/site-nav.json
• apps/dialtone-documentation/docs/articles/index.md
• apps/dialtone-documentation/docs/careers/index.md
• apps/dialtone-documentation/docs/components/button.md
• apps/dialtone-documentation/docs/dialtone/whats-new/index.md
• apps/dialtone-documentation/docs/foundations/brand/index.md
• apps/dialtone-documentation/docs/foundations/brand/our-icon/index.md
• apps/dialtone-documentation/docs/foundations/brand/sub-brands-and-co-branding/index.md
• apps/dialtone-documentation/docs/foundations/brand/using-our-logo/index.md
• apps/dialtone-documentation/docs/foundations/colors/index.md
• apps/dialtone-documentation/docs/foundations/colors/marketing/index.md
• apps/dialtone-documentation/docs/foundations/colors/palette/index.md
• apps/dialtone-documentation/docs/foundations/colors/themes/index.md
• apps/dialtone-documentation/docs/foundations/colors/usage/index.md
• apps/dialtone-documentation/docs/foundations/gradient/index.md
• apps/dialtone-documentation/docs/foundations/gradient/marketing.md
• apps/dialtone-documentation/docs/foundations/gradient/product.md
• apps/dialtone-documentation/docs/foundations/graphic-system/abstract-graphics.md
• apps/dialtone-documentation/docs/foundations/graphic-system/data-visualizations.md
• apps/dialtone-documentation/docs/foundations/graphic-system/index.md
• apps/dialtone-documentation/docs/foundations/illustrations/index.md
• apps/dialtone-documentation/docs/foundations/motion/index.md
• apps/dialtone-documentation/docs/foundations/product-storytelling/index.md
• apps/dialtone-documentation/docs/foundations/type/index.md
• apps/dialtone-documentation/docs/foundations/typography/marketing.md
• apps/dialtone-documentation/docs/index.md
• apps/dialtone-documentation/docs/tokens/for-designers/index.md
• apps/dialtone-documentation/docs/tokens/for-developers/index.md
• apps/dialtone-documentation/docs/utilities/effects/transition.md
• apps/dialtone-documentation/postcss.config.mjs
• packages/dialtone-css/lib/build/less/components/prose.less

💤 Files with no reviewable changes (2)

• apps/dialtone-documentation/docs/.vuepress/views/IconCatalog.vue
• apps/dialtone-documentation/docs/.vuepress/theme/assets/less/dialtone-syntax.less

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

apps/dialtone-documentation/docs/foundations/colors/themes/index.md (1)

84-290: 🧹 Nitpick | 🔵 Trivial

Consider removing the large commented-out theme rows.

Keeping this much inactive markup in-page adds maintenance overhead and makes future diffs noisy; prefer deleting or moving to a tracked note/issue.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/dialtone-documentation/docs/foundations/colors/themes/index.md` around
lines 84 - 290, Remove the large commented-out theme rows block (the HTML
comment that contains theme entries like "Sunflower", "Ceruleo", "Melon", etc.)
to avoid keeping stale markup in the page; if you need to preserve this content
for reference, extract it to a tracked note or issue (or a separate archived
markdown file) and delete the commented block from the index.md (look for the
opening "<!--" that encloses the multiple <tr>... theme rows and remove that
entire commented section).

♻️ Duplicate comments (2)

apps/dialtone-documentation/docs/foundations/motion/index.md (1)

12-12: ⚠️ Potential issue | 🟠 Major

Add keyboard interaction parity for hover-play cards.

Cards are still hover-only, so keyboard users cannot trigger play/pause behavior. Add focusability and keyboard/focus handlers with the same behavior as hover.

Proposed patch (minimal parity)

-<dt-box class="d-d-grid d-pli-center" `@mouseenter`="onCardEnter" `@mouseleave`="onCardLeave">
+<dt-box
+  class="d-d-grid d-pli-center"
+  tabindex="0"
+  role="button"
+  `@mouseenter`="onCardEnter"
+  `@mouseleave`="onCardLeave"
+  `@focus`="onCardEnter"
+  `@blur`="onCardLeave"
+  `@keydown.enter.prevent`="onCardEnter"
+  `@keydown.space.prevent`="onCardEnter"
+>

 function onCardEnter (e) {
-  e.currentTarget.querySelector('video').play();
-  e.currentTarget.querySelector('[data-play-overlay]').classList.add('d-o0');
+  const video = e.currentTarget.querySelector('video');
+  const overlay = e.currentTarget.querySelector('[data-play-overlay]');
+  video?.play();
+  overlay?.classList.add('d-o0');
 }
 function onCardLeave (e) {
-  e.currentTarget.querySelector('video').pause();
-  e.currentTarget.querySelector('[data-play-overlay]').classList.remove('d-o0');
+  const video = e.currentTarget.querySelector('video');
+  const overlay = e.currentTarget.querySelector('[data-play-overlay]');
+  video?.pause();
+  overlay?.classList.remove('d-o0');
 }

Also applies to: 24-24, 36-36, 70-70, 88-88, 102-102, 114-114, 126-126, 138-138, 153-160

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/dialtone-documentation/docs/foundations/motion/index.md` at line 12, Add
keyboard and focus parity to the hover-only dt-box cards by making the element
focusable (add tabindex="0") and wiring focus/blur and keyboard handlers to
reuse the existing hover handlers: call onCardEnter on focus and onCardLeave on
blur, and handle Enter/Space key presses (e.g., keydown.enter and keydown.space)
to trigger the same play/pause action used by the mouse hover (invoke the same
internal toggle or play/pause routine the hover logic uses). Ensure these
handlers are added alongside the existing `@mouseenter`="onCardEnter" and
`@mouseleave`="onCardLeave" on every dt-box occurrence listed so keyboard users
receive identical behavior.

apps/dialtone-documentation/docs/foundations/brand/our-icon/index.md (1)

30-30: ⚠️ Potential issue | 🟡 Minor

Use the icon anchor link for consistency with this page’s download target.

This CTA points to /downloads/, while this page’s download target is /downloads/#icon. Please align this link to the anchor.

Proposed fix

-      <p class="d-docsite--paragraph"><dt-link to="/downloads/">Download icons</dt-link></p>
+      <p class="d-docsite--paragraph"><dt-link to="/downloads/#icon">Download icons</dt-link></p>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/dialtone-documentation/docs/foundations/brand/our-icon/index.md` at line
30, The CTA link currently uses the top-level downloads path; update the dt-link
target to the page anchor so it matches this page’s download target by changing
the dt-link to use to="/downloads/#icon" (i.e., replace <dt-link
to="/downloads/">Download icons</dt-link> with <dt-link
to="/downloads/#icon">Download icons</dt-link>).

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@apps/dialtone-documentation/docs/foundations/brand/our-icon/index.md`:
- Line 5: The frontmatter field download_url is currently unused by the docs
header component so it has no visible effect; either remove download_url from
the frontmatter or update the docs header/action UI to render it: modify the
docs header component to accept frontmatter.download_url (or the page metadata
prop that contains it) and conditionally render a download action/button linking
to download_url with appropriate aria-label and styling, or delete the
download_url entry from
apps/dialtone-documentation/docs/foundations/brand/our-icon/index.md to avoid
misleading metadata.

---

Outside diff comments:
In `@apps/dialtone-documentation/docs/foundations/colors/themes/index.md`:
- Around line 84-290: Remove the large commented-out theme rows block (the HTML
comment that contains theme entries like "Sunflower", "Ceruleo", "Melon", etc.)
to avoid keeping stale markup in the page; if you need to preserve this content
for reference, extract it to a tracked note or issue (or a separate archived
markdown file) and delete the commented block from the index.md (look for the
opening "<!--" that encloses the multiple <tr>... theme rows and remove that
entire commented section).

---

Duplicate comments:
In `@apps/dialtone-documentation/docs/foundations/brand/our-icon/index.md`:
- Line 30: The CTA link currently uses the top-level downloads path; update the
dt-link target to the page anchor so it matches this page’s download target by
changing the dt-link to use to="/downloads/#icon" (i.e., replace <dt-link
to="/downloads/">Download icons</dt-link> with <dt-link
to="/downloads/#icon">Download icons</dt-link>).

In `@apps/dialtone-documentation/docs/foundations/motion/index.md`:
- Line 12: Add keyboard and focus parity to the hover-only dt-box cards by
making the element focusable (add tabindex="0") and wiring focus/blur and
keyboard handlers to reuse the existing hover handlers: call onCardEnter on
focus and onCardLeave on blur, and handle Enter/Space key presses (e.g.,
keydown.enter and keydown.space) to trigger the same play/pause action used by
the mouse hover (invoke the same internal toggle or play/pause routine the hover
logic uses). Ensure these handlers are added alongside the existing
`@mouseenter`="onCardEnter" and `@mouseleave`="onCardLeave" on every dt-box
occurrence listed so keyboard users receive identical behavior.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Central YAML (inherited), Organization UI (inherited)

Review profile: ASSERTIVE

Plan: Enterprise

Run ID: f2d7e1a2-d50d-4645-835e-4b74d69aaa21

📥 Commits

Reviewing files that changed from the base of the PR and between e6091f9 and 1c5ff94.

⛔ Files ignored due to path filters (1)

• apps/dialtone-documentation/docs/.vuepress/public/assets/images/graphic-system.svg is excluded by !**/*.svg

📒 Files selected for processing (6)

• apps/dialtone-documentation/docs/foundations/brand/our-icon/index.md
• apps/dialtone-documentation/docs/foundations/colors/themes/index.md
• apps/dialtone-documentation/docs/foundations/gradient/index.md
• apps/dialtone-documentation/docs/foundations/graphic-system/index.md
• apps/dialtone-documentation/docs/foundations/motion/index.md
• apps/dialtone-documentation/docs/utilities/effects/transition.md

[Brad Paugh (braddialpad)]

The changes looks fine to me, but there's a problem with the build. Perhaps an incorrect config file somewhere?

[Francis Rupert (francisrupert)]

Brad Paugh (@braddialpad),

The changes looks fine to me, but there's a problem with the build. Perhaps an incorrect config file somewhere?

It was from a change that landed on next after I created this branch. Caught this up with next and hopefully that does it.

[github-actions]

✔️ Deploy previews ready!
😎 Dialtone documentation preview: https://dialtone.dialpad.com/deploy-previews/pr-1228/
😎 Dialtone-vue preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-1228/

[Brad Paugh (braddialpad)]

yep looks good now