@proyecto-viviana/ui 0.3.5 → 0.4.1

package/src/custom/calendar-card/index.tsx

@@ -1,66 +1,124 @@
-import { Show, For } from 'solid-js'
-import { Chip } from '../chip'
+import { Show, For } from "solid-js";
+import { Chip } from "../chip";
+// Styled via the S2 style() macro through viviana's own seam (../../style →
+// src/style.ts). A horizontal "followed calendar" card: square thumbnail +
+// title + followers line + tag chips, on the S2 ramps in Silapse colors.
+import { style } from "../../style" with { type: "macro" };
 
 export interface CalendarCardProps {
-  title: string
-  image?: string
-  tags?: string[]
-  followers?: { name: string }[]
-  followerCount?: number
-  class?: string
+  title: string;
+  image?: string;
+  tags?: string[];
+  followers?: { name: string }[];
+  followerCount?: number;
+  class?: string;
 }
 
+const card = style({
+  display: "flex",
+  alignItems: "center",
+  gap: 12,
+  width: "full",
+  maxWidth: 500,
+  padding: 12,
+  borderRadius: "xl",
+  borderWidth: 2,
+  borderStyle: "solid",
+  borderColor: "[var(--color-primary-600)]",
+  backgroundColor: "[var(--color-bg-300)]",
+  boxShadow: "elevated",
+});
+
+const thumb = style({
+  width: 80,
+  height: 80,
+  flexShrink: 0,
+  objectFit: "cover",
+  borderRadius: "lg",
+  borderWidth: 2,
+  borderStyle: "solid",
+  borderColor: "[var(--color-accent)]",
+});
+
+const body = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: 8,
+  flexGrow: 1,
+  minWidth: 0,
+});
+
+const title = style({
+  font: "heading-sm",
+  color: "[var(--color-primary-100)]",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+});
+
+const followers = style({
+  font: "ui-sm",
+  color: "[var(--color-text-secondary)]",
+});
+
+const followerName = style({
+  fontWeight: "bold",
+  // WCAG AA fix: the follower names sit on the `--color-bg-300` card. They are
+  // small text (`ui-sm`, inherited), so the 4.5:1 normal-text floor applies.
+  // `--color-accent` (#df5c9a) is a fixed pink in both themes and read only
+  // 2.42:1 on the light-blue card (5.08:1 dark); no pink ramp step clears 4.5:1
+  // on both the dark-grey and light-blue card (`--color-accent-500` is 4.39:1
+  // dark — a hair under). The names keep their emphasis via `fontWeight: bold`
+  // against the secondary-grey connectors and take the flipping `--color-text`,
+  // which clears 4.5:1 both ways (17.40:1 dark / 9.63:1 light). The card's pink
+  // accent moment stays on the thumbnail border (bears no text).
+  color: "[var(--color-text)]",
+});
+
+const tags = style({
+  display: "flex",
+  flexWrap: "wrap",
+  gap: 4,
+});
+
 export function CalendarCard(props: CalendarCardProps) {
-  const displayedFollowers = () => props.followers?.slice(0, 2) ?? []
+  const displayedFollowers = () => props.followers?.slice(0, 2) ?? [];
   const remainingCount = () => {
-    const total = props.followerCount ?? props.followers?.length ?? 0
-    const displayed = displayedFollowers().length
-    return total - displayed
-  }
+    const total = props.followerCount ?? props.followers?.length ?? 0;
+    const displayed = displayedFollowers().length;
+    return total - displayed;
+  };
 
   return (
-    <div class={`flex h-[100px] w-full max-w-[500px] items-center rounded-xl border border-primary-600 border-b-accent-500 bg-bg-300 p-2 ${props.class ?? ''}`}>
+    <div class={`${card} ${props.class ?? ""}`}>
       <Show when={props.image}>
-        <div class="relative h-[80px] w-[80px] flex-shrink-0 overflow-hidden rounded-xl border-2 border-accent-200">
-          <img src={props.image} alt={props.title} class="h-full w-full object-cover" />
-        </div>
+        <img class={thumb} src={props.image} alt={props.title} />
       </Show>
-      <div class="relative h-full flex-1 flex-col pl-3">
+      <div class={body}>
+        <span class={title}>{props.title}</span>
+        <Show when={displayedFollowers().length > 0}>
+          <span class={followers}>
+            seguida por{" "}
+            <For each={displayedFollowers()}>
+              {(follower, index) => (
+                <>
+                  <span class={followerName}>{follower.name}</span>
+                  {index() < displayedFollowers().length - 1 && ", "}
+                </>
+              )}
+            </For>
+            <Show when={remainingCount() > 0}>
+              {" "}
+              y <span class={followerName}>{remainingCount()} más</span>
+            </Show>
+          </span>
+        </Show>
         <Show when={props.tags && props.tags.length > 0}>
-          <div class="absolute bottom-[-20px] h-[30px] w-full">
-            <div class="flex h-full w-full flex-1 justify-end gap-1">
-              <For each={props.tags}>
-                {(tag) => <Chip text={tag} variant="primary" />}
-              </For>
-            </div>
+          <div class={tags}>
+            <For each={props.tags}>{(tag) => <Chip text={tag} variant="primary" />}</For>
           </div>
         </Show>
-        <div class="flex h-full flex-col items-end justify-center pb-3 pr-5 pt-2">
-          <div class="flex flex-1">
-            <span class="text-lg font-semibold text-white drop-shadow-sm">
-              {props.title}
-            </span>
-          </div>
-          <Show when={displayedFollowers().length > 0}>
-            <div class="flex flex-1">
-              <span class="text-base font-normal text-primary-500">
-                seguida por{' '}
-                <For each={displayedFollowers()}>
-                  {(follower, index) => (
-                    <>
-                      <span class="font-semibold text-accent-200">{follower.name}</span>
-                      {index() < displayedFollowers().length - 1 && ', '}
-                    </>
-                  )}
-                </For>
-                <Show when={remainingCount() > 0}>
-                  {' '}y <span class="font-semibold text-accent-200">{remainingCount()} más</span>
-                </Show>
-              </span>
-            </div>
-          </Show>
-        </div>
       </div>
     </div>
-  )
+  );
 }

package/src/custom/chip/index.tsx

@@ -1,46 +1,82 @@
-import { type JSX, Show } from 'solid-js'
+import type { JSX } from "solid-js";
+import { Show } from "solid-js";
+import { Button as HeadlessButton } from "@proyecto-viviana/solidaria-components";
+// Styled via the S2 style() macro through viviana's own seam (../../style →
+// src/style.ts). S2 named tokens carry the shape (mirrors Badge's size-S
+// control: minHeight 24, 2px border, ui-sm font, pill radius); Silapse colors
+// ride in as arbitrary `[var(--color-*)]` values.
+import { style } from "../../style" with { type: "macro" };
 
-export type ChipVariant = 'primary' | 'secondary' | 'accent' | 'outline'
+export type ChipVariant = "primary" | "secondary" | "accent" | "outline";
 
 export interface ChipProps {
-  text: string
-  variant?: ChipVariant
-  onClick?: () => void
+  text: string;
+  variant?: ChipVariant;
+  onClick?: () => void;
   /**
    * Icon to display before the text.
    * Use a function returning JSX for SSR compatibility: `icon={() => <MyIcon />}`
    * Or pass a simple string for text-based icons: `icon="★"`
    */
-  icon?: string | (() => JSX.Element)
-  class?: string
+  icon?: string | (() => JSX.Element);
+  class?: string;
 }
 
-const variantStyles: Record<ChipVariant, string> = {
-  primary: 'bg-primary-700 text-primary-200 shadow-primary-chip',
-  secondary: 'bg-primary-600 text-primary-100 hover:bg-primary-500',
-  accent: 'bg-accent text-white',
-  outline: 'bg-transparent border border-primary-500 text-primary-300',
-}
+const chip = style<{ variant: ChipVariant }>({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  columnGap: "text-to-visual",
+  minHeight: 24,
+  width: "fit",
+  paddingX: 12,
+  borderRadius: "full",
+  borderStyle: "solid",
+  borderWidth: 2,
+  font: "ui-sm",
+  borderColor: {
+    default: "transparent",
+    variant: { outline: "[var(--color-primary-600)]" },
+  },
+  backgroundColor: {
+    variant: {
+      primary: "[var(--color-primary-700)]",
+      secondary: "[var(--color-bg-100)]",
+      accent: "[var(--color-accent)]",
+      outline: "transparent",
+    },
+  },
+  color: {
+    variant: {
+      primary: "[var(--color-primary-100)]",
+      secondary: "[var(--color-primary-200)]",
+      // WCAG AA fix: accent text on the pink accent fill. The near-white
+      // `--color-bg-400` gave only 2.74:1 in light mode (fail); the darkest
+      // grey token reaches 5.24:1 light / 6.14:1 dark — the smallest existing-
+      // token change that clears the 4.5:1 floor for this ui-sm label.
+      accent: "[var(--color-grey-900)]",
+      outline: "[var(--color-primary-200)]",
+    },
+  },
+});
 
 export function Chip(props: ChipProps) {
-  const variant = () => props.variant ?? 'primary'
-
   const renderIcon = () => {
-    const icon = props.icon
-    if (!icon) return null
-    if (typeof icon === 'string') return icon
-    return icon()
-  }
+    const icon = props.icon;
+    if (!icon) return null;
+    if (typeof icon === "string") return icon;
+    return icon();
+  };
 
   return (
-    <button
-      class={`flex justify-center items-center h-6 w-auto rounded-full px-4 py-1 font-medium text-sm tracking-wide transition-colors ${variantStyles[variant()]} ${props.class ?? ''}`}
-      onClick={props.onClick}
+    <HeadlessButton
+      class={`${chip({ variant: props.variant ?? "primary" })} ${props.class ?? ""}`}
+      onPress={() => props.onClick?.()}
     >
       <Show when={props.icon}>
-        <span class="mr-1.5">{renderIcon()}</span>
+        <span>{renderIcon()}</span>
       </Show>
-      <span>{props.text}</span>
-    </button>
-  )
+      {props.text}
+    </HeadlessButton>
+  );
 }

package/src/custom/conversation/index.tsx

@@ -1,96 +1,207 @@
-import { Show, For } from 'solid-js'
-import { Avatar } from '../../avatar'
+import { Show, For } from "solid-js";
+import { Avatar } from "@proyecto-viviana/solid-spectrum";
+import { Button as HeadlessButton } from "@proyecto-viviana/solidaria-components";
+// Styled via the S2 style() macro through viviana's own seam (../../style →
+// src/style.ts). A conversation preview row, message bubbles, and a thread
+// list, on the S2 spacing/radius ramps in Silapse colors.
+import { style } from "../../style" with { type: "macro" };
 
 export interface Message {
-  id: string
-  content: string
-  sender: 'user' | 'other'
-  timestamp?: string
+  id: string;
+  content: string;
+  sender: "user" | "other";
+  timestamp?: string;
 }
 
 export interface ConversationPreviewProps {
   user: {
-    name: string
-    avatar?: string
-    online?: boolean
-  }
-  lastMessage?: string
-  unreadCount?: number
-  timestamp?: string
-  onClick?: () => void
-  class?: string
+    name: string;
+    avatar?: string;
+    online?: boolean;
+  };
+  lastMessage?: string;
+  unreadCount?: number;
+  timestamp?: string;
+  onClick?: () => void;
+  class?: string;
 }
 
+const preview = style({
+  display: "flex",
+  alignItems: "center",
+  gap: 12,
+  width: "full",
+  padding: 12,
+  borderRadius: "lg",
+  textAlign: "start",
+  cursor: "pointer",
+  backgroundColor: "transparent",
+  borderStyle: "none",
+});
+
+const previewBody = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: 2,
+  flexGrow: 1,
+  minWidth: 0,
+});
+
+const previewTop = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: 8,
+});
+
+const previewName = style({
+  font: "ui",
+  fontWeight: "bold",
+  color: "[var(--color-primary-100)]",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+});
+
+const previewTime = style({
+  font: "detail-sm",
+  // `--color-text-muted` renders ~1.7:1 light / ~2.4:1 dark on the `bg-200`
+  // panel (fails AA both modes); the flipping `--color-text` clears it. Muting
+  // is carried by the smaller `detail-sm` size, not a sub-AA color.
+  color: "[var(--color-text)]",
+  flexShrink: 0,
+});
+
+const previewMessage = style({
+  font: "ui-sm",
+  // `--color-text-secondary` renders 3.84:1 on the light `bg-200` panel (fails
+  // the 4.5 small-text floor); the flipping `--color-text` clears both themes.
+  color: "[var(--color-text)]",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+});
+
+const unread = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+  width: 20,
+  height: 20,
+  borderRadius: "full",
+  font: "detail-sm",
+  fontWeight: "bold",
+  backgroundColor: "[var(--color-accent)]",
+  // Text on the non-flipping pink `--color-accent` fill: the near-white
+  // `--color-bg-400` gives only 2.74:1 in light mode (fail). `--color-grey-900`
+  // (the darkest token) reaches ~5.2:1 light / ~6.1:1 dark — the Chip accent-fill
+  // resolution.
+  color: "[var(--color-grey-900)]",
+});
+
 export function ConversationPreview(props: ConversationPreviewProps) {
   return (
-    <button
-      class={`flex w-full items-center gap-3 rounded-xl p-3 hover:bg-bg-300 transition-colors text-left ${props.class ?? ''}`}
-      onClick={props.onClick}
+    <HeadlessButton
+      type="button"
+      class={`${preview} ${props.class ?? ""}`}
+      onPress={() => props.onClick?.()}
     >
-      <Avatar
-        src={props.user.avatar}
-        alt={props.user.name}
-        online={props.user.online}
-        size="md"
-      />
-      <div class="flex-1 min-w-0">
-        <div class="flex items-center justify-between">
-          <span class="font-semibold text-primary-100 truncate">{props.user.name}</span>
+      <Avatar src={props.user.avatar} alt={props.user.name} online={props.user.online} size="md" />
+      <div class={previewBody}>
+        <div class={previewTop}>
+          <span class={previewName}>{props.user.name}</span>
           <Show when={props.timestamp}>
-            <span class="text-xs text-primary-500">{props.timestamp}</span>
+            <span class={previewTime}>{props.timestamp}</span>
           </Show>
         </div>
         <Show when={props.lastMessage}>
-          <p class="text-sm text-primary-400 truncate">{props.lastMessage}</p>
+          <p class={previewMessage}>{props.lastMessage}</p>
         </Show>
       </div>
       <Show when={props.unreadCount && props.unreadCount > 0}>
-        <span class="flex h-5 w-5 items-center justify-center rounded-full bg-accent text-xs font-bold text-white">
-          {props.unreadCount}
-        </span>
+        <span class={unread}>{props.unreadCount}</span>
       </Show>
-    </button>
-  )
+    </HeadlessButton>
+  );
 }
 
 export interface ConversationBubbleProps {
-  content: string
-  sender: 'user' | 'other'
-  timestamp?: string
-  class?: string
+  content: string;
+  sender: "user" | "other";
+  timestamp?: string;
+  class?: string;
 }
 
+const bubbleRow = style<{ isUser: boolean }>({
+  display: "flex",
+  justifyContent: { default: "start", isUser: "end" },
+});
+
+const bubble = style<{ isUser: boolean }>({
+  display: "flex",
+  flexDirection: "column",
+  gap: 2,
+  maxWidth: "[70%]",
+  paddingX: 16,
+  paddingY: 8,
+  borderRadius: "lg",
+  backgroundColor: {
+    default: "[var(--color-bg-300)]",
+    isUser: "[var(--color-accent)]",
+  },
+  color: {
+    // `other` bubble: `--color-primary-100` on the neutral `bg-300` fill (AA both
+    // themes). `user` bubble text on the pink `--color-accent` fill: the near-white
+    // `--color-bg-400` gives only 2.74:1 light (fail) → `--color-grey-900` (~5.2:1
+    // light / ~6.1:1 dark), the Chip accent-fill resolution.
+    default: "[var(--color-primary-100)]",
+    isUser: "[var(--color-grey-900)]",
+  },
+});
+
+const bubbleTime = style<{ isUser: boolean }>({
+  font: "detail-sm",
+  color: {
+    // `other` timestamp on `bg-300`: `--color-text-muted` fails AA both modes
+    // (~2.2:1 light / ~2.8:1 dark) → the flipping `--color-text`. `user` timestamp
+    // on the `--color-accent` fill: `--color-bg-300` gives 2.42:1 light (fail) →
+    // `--color-grey-900` (matching the bubble body).
+    default: "[var(--color-text)]",
+    isUser: "[var(--color-grey-900)]",
+  },
+});
+
 export function ConversationBubble(props: ConversationBubbleProps) {
-  const isUser = () => props.sender === 'user'
+  const isUser = () => props.sender === "user";
 
   return (
-    <div class={`flex ${isUser() ? 'justify-end' : 'justify-start'} ${props.class ?? ''}`}>
-      <div
-        class={`max-w-[70%] rounded-2xl px-4 py-2 ${
-          isUser()
-            ? 'bg-accent text-white rounded-br-sm'
-            : 'bg-bg-300 text-primary-100 rounded-bl-sm'
-        }`}
-      >
+    <div class={`${bubbleRow({ isUser: isUser() })} ${props.class ?? ""}`}>
+      <div class={bubble({ isUser: isUser() })}>
         <p>{props.content}</p>
         <Show when={props.timestamp}>
-          <span class={`text-xs ${isUser() ? 'text-white/70' : 'text-primary-500'}`}>
-            {props.timestamp}
-          </span>
+          <span class={bubbleTime({ isUser: isUser() })}>{props.timestamp}</span>
         </Show>
       </div>
     </div>
-  )
+  );
 }
 
 export interface ConversationProps {
-  messages: Message[]
-  class?: string
+  messages: Message[];
+  class?: string;
 }
 
+const thread = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: 8,
+  padding: 16,
+});
+
 export function Conversation(props: ConversationProps) {
   return (
-    <div class={`flex flex-col gap-2 p-4 ${props.class ?? ''}`}>
+    <div class={`${thread} ${props.class ?? ""}`}>
       <For each={props.messages}>
         {(message) => (
           <ConversationBubble
@@ -101,5 +212,5 @@ export function Conversation(props: ConversationProps) {
         )}
       </For>
     </div>
-  )
+  );
 }