style(conversation-ai): define WHCM, typography utils, CSS patterns

2nd-gen/packages/swc/patterns/conversational-ai/conversation-thread/conversation-thread.css

@@ -25,6 +25,6 @@
 .swc-ConversationThread {
   display: flex;
   flex-direction: column;
-  gap: var(--swc-conversation-thread-gap, 16px);
+  gap: var(--swc-conversation-thread-gap, token("spacing-100"));
   inline-size: 100%;
 }

2nd-gen/packages/swc/patterns/conversational-ai/conversation-thread/stories/conversation-thread.stories.ts

@@ -28,8 +28,6 @@ import '../../upload-artifact/index.js';
 
 import { uniqueId } from '../../../../utils/id.js';
 
-import '../../system-prose-demo.css';
-
 // ────────────────
 //    METADATA
 // ────────────────
@@ -70,7 +68,7 @@ const threadExampleSource = `<swc-conversation-thread style="max-inline-size: 72
   <swc-conversation-turn type="system">
     <swc-system-message>
       <swc-response-status slot="status">I interpreted your request as an executive narrative task and prioritized a concise, audience-ready structure.</swc-response-status>
-      <div class="swc-conversationalAi-systemProse swc-Typography--prose">
+      <div class="swc-Typography--prose">
         <h3>Big idea/core narrative: The warmth of welcome</h3>
         <p>Hospitality begins the moment our customers set foot off their plane.</p>
       </div>
@@ -100,7 +98,7 @@ const renderThread = () => html`
           I interpreted your request as an executive narrative task and
           prioritized a concise, audience-ready structure.
         </swc-response-status>
-        <div class="swc-conversationalAi-systemProse swc-Typography--prose">
+        <div class="swc-Typography--prose">
           <h3>Big idea/core narrative: The warmth of welcome</h3>
           <p>
             Hospitality begins the moment our customers set foot off their
@@ -430,12 +428,7 @@ class ConversationFullPatternDemo extends LitElement {
               : html`
                   <swc-conversation-turn type="user">
                     <swc-user-message type="card">
-                      <div
-                        slot="thumbnail"
-                        role="img"
-                        aria-label="File"
-                        style="inline-size:32px;block-size:32px;border-radius:3px;background:var(--swc-gray-200);flex-shrink:0;"
-                      ></div>
+                      <div slot="thumbnail" role="img" aria-label="File"></div>
                       <span slot="title">${artifact.title}</span>
                       <span slot="subtitle">${artifact.subtitle}</span>
                     </swc-user-message>
@@ -475,9 +468,7 @@ class ConversationFullPatternDemo extends LitElement {
             ${turn.loading
               ? ''
               : html`
-                  <div
-                    class="swc-conversationalAi-systemProse swc-Typography--prose"
-                  >
+                  <div class="swc-Typography--prose">
                     <p>${turn.text}</p>
                   </div>
                 `}
@@ -547,7 +538,6 @@ class ConversationFullPatternDemo extends LitElement {
                   slot="thumbnail"
                   role="img"
                   aria-label="File thumbnail"
-                  style="inline-size:40px;block-size:40px;background:var(--swc-gray-200);border-radius:4px;"
                 ></div>
               `}
           ${artifact.thumbnailUrl
@@ -563,7 +553,7 @@ class ConversationFullPatternDemo extends LitElement {
 
   protected override render() {
     this.style.cssText =
-      'display:flex;flex-direction:column;block-size:100vh;max-block-size:100vh;overflow:hidden;box-sizing:border-box;';
+      'display:flex;flex-direction:column;block-size:90vb;max-block-size:100vh;overflow:hidden;box-sizing:border-box;';
 
     return html`
       <style>
@@ -610,9 +600,7 @@ class ConversationFullPatternDemo extends LitElement {
         @swc-message-sources-toggle=${this.handleSourcesToggle}
       >
         <div class="swc-ConversationFullPatternDemo-scroll">
-          <swc-conversation-thread
-            style="--swc-conversation-thread-gap:24px;padding:4px;"
-          >
+          <swc-conversation-thread style="padding:4px;">
             ${this.renderTurns()}
           </swc-conversation-thread>
         </div>
@@ -648,14 +636,14 @@ if (!customElements.get('swc-conversation-full-pattern-demo')) {
 }
 
 const fullPatternSource = `<div style="max-width:800px; margin:auto; padding:24px; display:flex; flex-direction:column; gap:16px;">
-  <swc-conversation-thread style="--swc-conversation-thread-gap:24px;">
+  <swc-conversation-thread>
     <swc-conversation-turn type="user">
       <swc-user-message>Can you help me create a 45-minute presentation?</swc-user-message>
     </swc-conversation-turn>
     <swc-conversation-turn type="system">
       <swc-system-message>
         <swc-response-status slot="status">I interpreted your request as an executive narrative task and prioritized a concise, audience-ready structure.</swc-response-status>
-        <div class="swc-conversationalAi-systemProse swc-Typography--prose">
+        <div class="swc-Typography--prose">
           <p>Great direction. I suggest a 12-slide structure...</p>
         </div>
         <swc-message-feedback slot="feedback"></swc-message-feedback>
@@ -672,7 +660,6 @@ const fullPatternSource = `<div style="max-width:800px; margin:auto; padding:24p
         slot="thumbnail"
         role="img"
         aria-label="File thumbnail"
-        style="background:var(--swc-gray-200);"
       ></div>
       <span slot="title">Hilton commercial assets</span>
       <span slot="subtitle">2026</span>

2nd-gen/packages/swc/patterns/conversational-ai/conversation-turn/conversation-turn.css

@@ -13,8 +13,6 @@
 :host {
   display: block;
   inline-size: 100%;
-  container-name: swc-conversation-turn;
-  container-type: inline-size;
 }
 
 :host(:focus-visible) {

2nd-gen/packages/swc/patterns/conversational-ai/conversation-turn/stories/conversation-turn.stories.ts

@@ -19,8 +19,6 @@ import '../../user-message/index.js';
 import '../../response-status/index.js';
 import '../../message-feedback/index.js';
 
-import '../../system-prose-demo.css';
-
 // ────────────────
 //    METADATA
 // ────────────────
@@ -64,7 +62,7 @@ export const Playground: Story = {
             I mapped your request to a concise executive narrative and grouped
             the response by audience and channel themes.
           </swc-response-status>
-          <div class="swc-conversationalAi-systemProse swc-Typography--prose">
+          <div class="swc-Typography--prose">
             <p>System reply body goes here.</p>
           </div>
           <swc-message-feedback slot="feedback"></swc-message-feedback>
@@ -95,7 +93,7 @@ export const Overview: Story = {
             I prioritized campaign outcomes, segmented messaging pillars, and
             next-step actions to keep the summary presentation-ready.
           </swc-response-status>
-          <div class="swc-conversationalAi-systemProse swc-Typography--prose">
+          <div class="swc-Typography--prose">
             <p>
               Here is a concise summary based on the files you shared. I grouped
               themes by audience and channel.
@@ -150,7 +148,7 @@ export const Accessibility: Story = {
         accessible-label="Mensaje del sistema"
       >
         <swc-system-message>
-          <div class="swc-conversationalAi-systemProse swc-Typography--prose">
+          <div class="swc-Typography--prose">
             <p>Example system reply.</p>
           </div>
         </swc-system-message>

2nd-gen/packages/swc/patterns/conversational-ai/message-feedback/message-feedback.css

@@ -35,7 +35,7 @@
   padding: 0;
   color: token("neutral-content-color-default");
   background: transparent;
-  border: none;
+  border: 1px solid transparent;
   border-radius: var(--swc-message-feedback-button-border-radius, token("corner-radius-300"));
   cursor: pointer;
   transition:
@@ -62,3 +62,15 @@
 .swc-MessageFeedback-button[aria-pressed="true"]:hover {
   background: token("neutral-background-color-selected-hover");
 }
+
+@media (forced-colors: active) {
+  .swc-MessageFeedback-button[aria-pressed="true"],
+  .swc-MessageFeedback-button[aria-pressed="true"]:hover {
+    color: SelectedItemText;
+    background: SelectedItem;
+  }
+
+  .swc-MessageFeedback-button[aria-pressed="true"]:hover {
+    border-color: Highlight;
+  }
+}

2nd-gen/packages/swc/patterns/conversational-ai/message-feedback/stories/message-feedback.stories.ts

@@ -114,27 +114,15 @@ export const Status: Story = {
     <div style="display:flex;flex-direction:column;gap:24px;">
       <div style="display:flex;flex-direction:column;gap:8px;">
         <swc-message-feedback></swc-message-feedback>
-        <span
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-        >
-          Unset
-        </span>
+        <span class="swc-Detail swc-Detail--sizeS">Unset</span>
       </div>
       <div style="display:flex;flex-direction:column;gap:8px;">
         <swc-message-feedback status="positive"></swc-message-feedback>
-        <span
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-        >
-          Positive
-        </span>
+        <span class="swc-Detail swc-Detail--sizeS">Positive</span>
       </div>
       <div style="display:flex;flex-direction:column;gap:8px;">
         <swc-message-feedback status="negative"></swc-message-feedback>
-        <span
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-        >
-          Negative
-        </span>
+        <span class="swc-Detail swc-Detail--sizeS">Negative</span>
       </div>
     </div>
   `,
@@ -205,11 +193,10 @@ export const HandlingEvents: Story = {
         <swc-message-feedback></swc-message-feedback>
         <p
           ${wireDemo}
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-800);margin:0;"
+          class="swc-Detail swc-Detail--sizeS"
+          style="margin:0;"
         ></p>
-        <p
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-50);color:var(--swc-gray-700);margin:0;"
-        >
+        <p class="swc-Detail swc-Detail--sizeS" style="margin:0;">
           In production you would persist the choice, call an API, or update app
           state instead of only echoing the event here.
         </p>

2nd-gen/packages/swc/patterns/conversational-ai/message-sources/message-sources.css

@@ -32,21 +32,25 @@
 
 .swc-MessageSources-toggle {
   display: inline-flex;
-  gap: var(--swc-sources-toggle-gap, token("spacing-75"));
+  gap: var(--swc-sources-toggle-gap, token("spacing-100"));
   align-items: center;
-  padding: 5px 0;
+  inline-size: fit-content;
+  padding: var(--swc-sources-toggle-padding, 3px) token("spacing-100");
   font-family: token("sans-serif-font");
   font-size: token("font-size-100");
   font-weight: token("bold-font-weight");
   line-height: token("line-height-font-size-100");
   color: token("neutral-content-color-default");
   background: transparent;
   border: none;
+  border-radius: token("corner-radius-medium-default");
   cursor: pointer;
+  transition: background token("animation-duration-100") token("animation-ease-in-out");
 }
 
 .swc-MessageSources-toggle:hover {
   color: token("gray-800");
+  background: token("gray-100");
 }
 
 .swc-MessageSources-chevron {
@@ -68,7 +72,7 @@
   flex-direction: column;
   gap: var(--swc-message-sources-list-gap, token("spacing-75"));
   block-size: 0;
-  padding: 0;
+  padding: 0 token("spacing-100");
   margin: 0;
   overflow: hidden;
   list-style: none;

2nd-gen/packages/swc/patterns/conversational-ai/message-sources/stories/message-sources.stories.ts

@@ -131,32 +131,22 @@ export const Open: Story = {
           <a href="#">Adobe Experience Manager documentation</a>
           <a href="#">Creative Cloud release notes 2026</a>
         </swc-message-sources>
-        <span
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-        >
-          Collapsed
-        </span>
+        <span class="swc-Detail swc-Detail--sizeS">Collapsed</span>
       </div>
       <div style="display:flex;flex-direction:column;gap:8px;">
         <swc-message-sources open>
           <a href="#">Adobe Experience Manager documentation</a>
           <a href="#">Creative Cloud release notes 2026</a>
           <a href="#">Firefly API getting started guide</a>
         </swc-message-sources>
-        <span
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-        >
-          Expanded
-        </span>
+        <span class="swc-Detail swc-Detail--sizeS">Expanded</span>
       </div>
       <div style="display:flex;flex-direction:column;gap:8px;">
         <swc-message-sources open label="References">
           <a href="#">Adobe Experience Manager documentation</a>
           <a href="#">Creative Cloud release notes 2026</a>
         </swc-message-sources>
-        <span
-          style="font-family:var(--swc-sans-serif-font);font-size:var(--swc-font-size-75);color:var(--swc-gray-700);"
-        >
+        <span class="swc-Detail swc-Detail--sizeS">
           Expanded with custom label
         </span>
       </div>

2nd-gen/packages/swc/patterns/conversational-ai/prompt-field/prompt-field.css

@@ -42,6 +42,7 @@
   gap: token("spacing-300");
   padding: token("spacing-300");
   background: token("background-layer-2-color");
+  border: 1px solid transparent;
   border-radius: token("corner-radius-800");
   box-shadow: token("drop-shadow-emphasized-default-x") token("drop-shadow-emphasized-default-y") token("drop-shadow-emphasized-default-blur") token("drop-shadow-emphasized-default-color");
   overflow: hidden;
@@ -79,7 +80,7 @@
 .swc-PromptField-artifacts {
   display: flex;
   flex-wrap: wrap;
-  gap: token("spacing-100");
+  gap: token("spacing-300");
   align-items: start;
 }
 
@@ -92,17 +93,15 @@
   flex: 0 0 auto;
 }
 
-/* Figma (node 2:2035): single card artifact is 324px wide. */
 .swc-PromptField-artifacts--single > slot::slotted([type="card"]) {
-  flex: 0 1 var(--swc-prompt-field-artifact-single-inline-size, 324px);
-  inline-size: min(100%, 324px);
-  max-inline-size: var(--swc-prompt-field-artifact-single-max-inline-size, 324px);
+  flex-shrink: 1;
+  flex-basis: auto;
 }
 
 /* Multi-artifact card layout targets 3+ cards per row responsively. */
 .swc-PromptField-artifacts--multiple > slot::slotted([type="card"]) {
-  flex: 1 1 var(--swc-prompt-field-artifact-multiple-inline-size, 160px);
-  min-inline-size: var(--swc-prompt-field-artifact-min-inline-size, 160px);
+  flex-shrink: 1;
+  flex-basis: auto;
 }
 
 /* Prompt-field media artifact uses 68×68 preview tile. */
@@ -191,7 +190,7 @@
   padding: 0;
   color: token("gray-800");
   background: transparent;
-  border: none;
+  border: 1px solid transparent;
   border-radius: token("corner-radius-500");
   cursor: pointer;
 }
@@ -223,7 +222,7 @@
   padding: 0;
   color: token("gray-25");
   background: token("neutral-background-color-default");
-  border: none;
+  border: 1px solid transparent;
   border-radius: token("corner-radius-full");
   cursor: pointer;
   transition: background token("animation-duration-100") ease;
@@ -238,7 +237,7 @@
   padding: 0;
   color: token("gray-25");
   background: token("gray-900");
-  border: none;
+  border: 1px solid transparent;
   border-radius: token("corner-radius-full");
   cursor: pointer;
   transition: background token("animation-duration-100") ease;
@@ -304,3 +303,7 @@
 .swc-PromptField-legal-disclaimer a {
   color: inherit;
 }
+
+.swc-PromptField-artifacts[hidden] {
+  display: none !important;
+}