@proyecto-viviana/ui 0.3.5 → 0.4.1

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

@@ -1,70 +1,159 @@
-import type { JSX } from 'solid-js'
-import { Show, For } from 'solid-js'
-import { Avatar } from '../../avatar'
+import type { JSX } from "solid-js";
+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). An event summary card (S2 Card shape: preview + content +
+// footer) plus a compact list-item variant, on the S2 ramps in Silapse colors.
+import { style } from "../../style" with { type: "macro" };
 
 export interface EventCardProps {
-  title: string
-  image?: string
-  date?: string
-  author?: string
-  authorAvatar?: string
-  attendees?: { avatar?: string; name: string }[]
-  attendeeCount?: number
-  decorationImage?: string
+  title: string;
+  image?: string;
+  date?: string;
+  author?: string;
+  authorAvatar?: string;
+  attendees?: { avatar?: string; name: string }[];
+  attendeeCount?: number;
+  decorationImage?: string;
   /**
    * Actions to display below the event.
    * Use a function returning JSX for SSR compatibility: `actions={() => <Button>...</Button>}`
    */
-  actions?: JSX.Element | (() => JSX.Element)
-  class?: string
+  actions?: JSX.Element | (() => JSX.Element);
+  class?: string;
 }
 
+const card = style({
+  position: "relative",
+  display: "flex",
+  flexDirection: "column",
+  overflow: "hidden",
+  borderRadius: "xl",
+  backgroundColor: "[var(--color-bg-200)]",
+  boxShadow: "elevated",
+});
+
+const decoration = style({
+  position: "absolute",
+  top: 8,
+  insetEnd: 8,
+  width: 32,
+  height: 32,
+  objectFit: "contain",
+});
+
+const preview = style({
+  width: "full",
+  aspectRatio: "16/9",
+  objectFit: "cover",
+});
+
+const body = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: 12,
+  padding: 16,
+});
+
+const title = style({
+  font: "heading",
+  // WCAG AA fix: the title sits on the `--color-bg-200` card. `--color-accent`
+  // (#df5c9a) is a fixed pink in BOTH themes, so it does not flip against a card
+  // that is dark-grey in dark mode and light-blue in light mode — it read 4.48:1
+  // dark / 1.89:1 light. `font: heading` renders 22px / weight 800, which is WCAG
+  // large text via the BOLD path (≥18.66px && ≥700), NOT because it is ≥24px — so
+  // the 3:1 large-text floor applies. `--color-accent-500` is the smallest ramp
+  // step that flips with the theme (bright pink dark / deep magenta light) AND
+  // clears 3:1 both ways (3.87:1 dark / 4.91:1 light), keeping the brand accent.
+  color: "[var(--color-accent-500)]",
+});
+
+const meta = style({
+  display: "flex",
+  alignItems: "center",
+  gap: 16,
+  font: "ui-sm",
+  // WCAG AA fix: the meta text is small (`ui-sm`), so the 4.5:1 normal-text
+  // floor applies. `--color-text-secondary` read only 3.84:1 on the light
+  // `--color-bg-200` card; `--color-text` flips and clears 4.5:1 both ways
+  // (15.33:1 dark / 7.53:1 light). Secondary de-emphasis rides on the smaller
+  // `ui-sm` size rather than a sub-AA color.
+  color: "[var(--color-text)]",
+});
+
+const metaItem = style({
+  display: "flex",
+  alignItems: "center",
+  gap: 4,
+});
+
+const metaIcon = style({
+  // WCAG AA fix: the meta glyphs (@ / ⏱) are small (inherit `ui-sm`), so the
+  // 4.5:1 floor applies. `--color-accent` fails on the card (4.48:1 dark /
+  // 1.89:1 light) and no pink ramp step clears 4.5:1 on both the dark-grey and
+  // light-blue card, so the glyphs take the flipping `--color-text` like the
+  // meta text they prefix.
+  color: "[var(--color-text)]",
+});
+
+const attendeesRow = style({
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+});
+
+const avatars = style({
+  display: "flex",
+  alignItems: "center",
+  gap: 4,
+});
+
+const more = style({
+  font: "ui-sm",
+  // WCAG AA fix: the "+N más" overflow count is small text on the same
+  // `--color-bg-200` card as the meta, so it shares the same 3.84:1-light
+  // failure and the same `--color-text` fix.
+  color: "[var(--color-text)]",
+});
+
+const actionRow = style({
+  display: "flex",
+  gap: 8,
+});
+
 export function EventCard(props: EventCardProps) {
-  const displayedAttendees = () => props.attendees?.slice(0, 3) ?? []
+  const displayedAttendees = () => props.attendees?.slice(0, 3) ?? [];
   const remainingCount = () => {
-    const total = props.attendeeCount ?? props.attendees?.length ?? 0
-    const displayed = displayedAttendees().length
-    return total - displayed
-  }
+    const total = props.attendeeCount ?? props.attendees?.length ?? 0;
+    const displayed = displayedAttendees().length;
+    return total - displayed;
+  };
 
   return (
-    <div class={`relative bg-bg-200 rounded-3xl overflow-hidden ${props.class ?? ''}`}>
-      {/* Decoration image (fire gif, etc) */}
+    <div class={`${card} ${props.class ?? ""}`}>
       <Show when={props.decorationImage}>
-        <div class="absolute -top-2 -right-2 z-10 flex flex-col gap-1">
-          <img src={props.decorationImage} alt="" class="w-8 h-8 object-contain" />
-          <img src={props.decorationImage} alt="" class="w-6 h-6 object-contain ml-2" />
-          <img src={props.decorationImage} alt="" class="w-5 h-5 object-contain" />
-        </div>
+        <img class={decoration} src={props.decorationImage} alt="" />
       </Show>
 
       <Show when={props.image}>
-        <div class="relative h-32 w-full">
-          <img
-            src={props.image}
-            alt={props.title}
-            class="w-full h-full object-cover"
-          />
-          <div class="absolute inset-0 bg-gradient-to-t from-bg-200 via-transparent to-transparent" />
-        </div>
+        <img class={preview} src={props.image} alt={props.title} />
       </Show>
 
-      <div class="p-4 pt-2">
-        <h3 class="font-bold text-xl leading-tight bg-gradient-to-r from-accent to-accent-300 bg-clip-text text-transparent">
-          {props.title}
-        </h3>
+      <div class={body}>
+        <h3 class={title}>{props.title}</h3>
 
         <Show when={props.date || props.author}>
-          <div class="flex items-center gap-4 mt-3 text-sm text-primary-300">
+          <div class={meta}>
             <Show when={props.author}>
-              <div class="flex items-center gap-1.5">
-                <span class="text-accent">@</span>
+              <div class={metaItem}>
+                <span class={metaIcon}>@</span>
                 <span>{props.author}</span>
               </div>
             </Show>
             <Show when={props.date}>
-              <div class="flex items-center gap-1.5">
-                <span class="text-accent">⏱</span>
+              <div class={metaItem}>
+                <span class={metaIcon}>⏱</span>
                 <span>{props.date}</span>
               </div>
             </Show>
@@ -72,61 +161,93 @@ export function EventCard(props: EventCardProps) {
         </Show>
 
         <Show when={displayedAttendees().length > 0}>
-          <div class="flex items-center mt-3">
-            <div class="flex -space-x-2">
+          <div class={attendeesRow}>
+            <div class={avatars}>
               <For each={displayedAttendees()}>
-                {(attendee) => (
-                  <Avatar src={attendee.avatar} alt={attendee.name} size="sm" />
-                )}
+                {(attendee) => <Avatar src={attendee.avatar} alt={attendee.name} size="sm" />}
               </For>
             </div>
             <Show when={remainingCount() > 0}>
-              <span class="ml-2 text-sm text-primary-300">
-                +{remainingCount()} más
-              </span>
+              <span class={more}>+{remainingCount()} más</span>
             </Show>
           </div>
         </Show>
 
         <Show when={props.actions}>
-          <div class="mt-4 flex gap-2">
-            {typeof props.actions === 'function' ? props.actions() : props.actions}
+          <div class={actionRow}>
+            {typeof props.actions === "function" ? props.actions() : props.actions}
           </div>
         </Show>
       </div>
     </div>
-  )
+  );
 }
 
 export interface EventListItemProps {
-  title: string
-  image?: string
-  subtitle?: string
-  onClick?: () => void
-  class?: string
+  title: string;
+  image?: string;
+  subtitle?: string;
+  onClick?: () => void;
+  class?: string;
 }
 
+const listItem = style({
+  display: "flex",
+  alignItems: "center",
+  gap: 12,
+  width: "full",
+  padding: 8,
+  borderRadius: "lg",
+  textAlign: "start",
+  cursor: "pointer",
+  backgroundColor: "transparent",
+  borderStyle: "none",
+});
+
+const thumb = style({
+  width: 48,
+  height: 48,
+  flexShrink: 0,
+  borderRadius: "default",
+  objectFit: "cover",
+});
+
+const listBody = style({
+  display: "flex",
+  flexDirection: "column",
+  flexGrow: 1,
+  minWidth: 0,
+});
+
+const listTitle = style({
+  font: "ui",
+  fontWeight: "medium",
+  color: "[var(--color-primary-100)]",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+});
+
+const listSubtitle = style({
+  font: "ui-sm",
+  color: "[var(--color-text-secondary)]",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+});
+
 export function EventListItem(props: EventListItemProps) {
   return (
-    <button
-      class={`flex items-center gap-3 w-full p-2 rounded-lg hover:bg-bg-300 transition-colors text-left ${props.class ?? ''}`}
-      onClick={props.onClick}
-    >
+    <HeadlessButton class={`${listItem} ${props.class ?? ""}`} onPress={() => props.onClick?.()}>
       <Show when={props.image}>
-        <div class="w-12 h-12 rounded-lg overflow-hidden flex-shrink-0">
-          <img
-            src={props.image}
-            alt={props.title}
-            class="w-full h-full object-cover"
-          />
-        </div>
+        <img class={thumb} src={props.image} alt={props.title} />
       </Show>
-      <div class="flex-1 min-w-0">
-        <h4 class="font-medium text-primary-100 truncate">{props.title}</h4>
+      <div class={listBody}>
+        <h4 class={listTitle}>{props.title}</h4>
         <Show when={props.subtitle}>
-          <p class="text-sm text-primary-300 truncate">{props.subtitle}</p>
+          <p class={listSubtitle}>{props.subtitle}</p>
         </Show>
       </div>
-    </button>
-  )
+    </HeadlessButton>
+  );
 }

package/src/custom/header/index.tsx

@@ -1,33 +1,64 @@
-import type { JSX } from 'solid-js'
-import { Logo, type LogoProps } from '../logo'
-
-export interface HeaderProps {
-  /** Image element to show to the left of the text logo */
-  logoImage?: JSX.Element
-  /** Props to pass to the Logo component (firstWord, secondWord, size, inverted). Pass null to hide the text logo. */
-  logoProps?: LogoProps | null
-  /** Custom logo element - replaces the default Logo component entirely */
-  logo?: JSX.Element
-  /** Navigation items to display on the right side */
-  children?: JSX.Element
-  /** Additional CSS classes */
-  class?: string
-}
-
-export function Header(props: HeaderProps) {
-  const showTextLogo = () => props.logo !== undefined || props.logoProps !== null
-
-  return (
-    <header class={`vui-header ${props.class ?? ''}`}>
-      <div class="vui-header__container">
-        <div class="flex items-center gap-3">
-          {props.logoImage}
-          {showTextLogo() && (props.logo ?? <Logo size="lg" {...(props.logoProps ?? {})} />)}
-        </div>
-        <nav class="vui-header__nav">
-          {props.children}
-        </nav>
-      </div>
-    </header>
-  )
-}
+import type { JSX } from "solid-js";
+import { Logo, type LogoProps } from "../logo";
+// Styled via the S2 style() macro through viviana's own seam (../../style →
+// src/style.ts). A top app-bar: centered max-width row with a logo group and
+// a nav slot, on the S2 ramps in Silapse colors.
+import { style } from "../../style" with { type: "macro" };
+
+export interface HeaderProps {
+  logoImage?: JSX.Element;
+  /** Props to pass to the Logo component (firstWord, secondWord, size, inverted). Pass null to hide the text logo. */
+  logoProps?: LogoProps | null;
+  logo?: JSX.Element;
+  children?: JSX.Element;
+  class?: string;
+}
+
+const bar = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "full",
+  backgroundColor: "[var(--color-header-bg)]",
+  borderBottomWidth: 1,
+  borderStyle: "solid",
+  borderColor: "[var(--color-border)]",
+});
+
+const inner = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  width: "full",
+  maxWidth: 1152,
+  paddingX: 24,
+  paddingY: 12,
+});
+
+const logoGroup = style({
+  display: "flex",
+  alignItems: "center",
+  gap: 12,
+});
+
+const nav = style({
+  display: "flex",
+  alignItems: "center",
+  gap: 16,
+});
+
+export function Header(props: HeaderProps) {
+  const showTextLogo = () => props.logo !== undefined || props.logoProps !== null;
+
+  return (
+    <header class={`${bar} ${props.class ?? ""}`}>
+      <div class={inner}>
+        <div class={logoGroup}>
+          {props.logoImage}
+          {showTextLogo() && (props.logo ?? <Logo size="lg" {...(props.logoProps ?? {})} />)}
+        </div>
+        <nav class={nav}>{props.children}</nav>
+      </div>
+    </header>
+  );
+}

package/src/custom/lateral-nav/index.tsx

@@ -1,62 +1,108 @@
-import type { JSX } from 'solid-js'
-import { Show, For } from 'solid-js'
+import type { JSX } from "solid-js";
+import { Show, For } from "solid-js";
+// Styled via the S2 style() macro through viviana's own seam (../../style →
+// src/style.ts). A sidebar nav (sections with an accent rail + links) on the
+// S2 spacing/type ramps in Silapse colors.
+import { style } from "../../style" with { type: "macro" };
 
 export interface NavItemProps {
-  title: string
-  children?: JSX.Element
-  class?: string
+  title: string;
+  children?: JSX.Element;
+  class?: string;
 }
 
+const item = style({
+  display: "flex",
+  alignItems: "center",
+  font: "heading-sm",
+  color: "[var(--color-primary-200)]",
+});
+
 export function NavItem(props: NavItemProps) {
   return (
-    <li class={`flex items-center ${props.class ?? ''}`}>
-      <span class="text-lg font-bold text-primary-200">{props.title}</span>
+    <li class={`${item} ${props.class ?? ""}`}>
+      <span>{props.title}</span>
       {props.children}
     </li>
-  )
+  );
 }
 
 export interface NavLinkProps {
-  href: string
-  children: JSX.Element
-  active?: boolean
-  class?: string
+  href: string;
+  children: JSX.Element;
+  active?: boolean;
+  class?: string;
 }
 
-export function NavLink(props: NavLinkProps) {
-  const activeStyles = 'font-medium text-primary-300 underline underline-offset-4'
-  const inactiveStyles = 'font-normal text-gray-200 underline-offset-4 hover:text-gray-100 hover:underline'
+const link = style<{ isActive: boolean }>({
+  // A ≥24px hit target (WCAG 2.5.8): the link is a full-width flex row, not a
+  // bare inline anchor (which rendered ~15px tall on the `ui` ramp).
+  display: "flex",
+  alignItems: "center",
+  minHeight: 32,
+  font: "ui",
+  textDecoration: { default: "none", isActive: "underline" },
+  fontWeight: { default: "normal", isActive: "medium" },
+  // `color` MUST stay after `font`: the S2 style() `font` shorthand emits a
+  // default text color that wins on source order otherwise. The resting link
+  // uses the flipping `--color-text` (AA on the light `bg-200` panel); the active
+  // link is set apart by its underline + medium weight + `--color-primary-300`.
+  color: {
+    default: "[var(--color-text)]",
+    isActive: "[var(--color-primary-300)]",
+  },
+});
 
+export function NavLink(props: NavLinkProps) {
   return (
     <a
       href={props.href}
-      class={`${props.active ? activeStyles : inactiveStyles} ${props.class ?? ''}`}
+      class={`${link({ isActive: props.active ?? false })} ${props.class ?? ""}`}
     >
       {props.children}
     </a>
-  )
+  );
 }
 
 export interface NavSectionProps {
-  title: string
-  links?: { href: string; label: string; active?: boolean }[]
-  children?: JSX.Element
-  class?: string
+  title: string;
+  links?: { href: string; label: string; active?: boolean }[];
+  children?: JSX.Element;
+  class?: string;
 }
 
+const sectionRow = style({
+  display: "flex",
+});
+
+const accentRail = style({
+  flexShrink: 0,
+  width: 4,
+  height: 20,
+  backgroundColor: "[var(--color-accent-300)]",
+});
+
+const list = style({
+  display: "flex",
+  flexDirection: "column",
+  flexGrow: 1,
+  gap: 4,
+  paddingStart: 16,
+});
+
 export function NavSection(props: NavSectionProps) {
   return (
-    <div class={props.class ?? ''}>
+    <div class={props.class ?? ""}>
       <NavItem title={props.title} />
-      <div class="flex h-full">
-        <div class="h-5 w-1 bg-accent-300" />
-        <ul class="flex h-full flex-1 flex-col gap-1 pl-4">
+      <div class={sectionRow}>
+        <div class={accentRail} />
+        <ul class={list}>
           <Show when={props.links}>
             <For each={props.links}>
-              {(link) => (
+              {(navLink) => (
                 <li>
-                  <NavLink href={link.href} active={link.active}>
-                    {link.label}
+                  <NavLink href={navLink.href} active={navLink.active}>
+                    {navLink.label}
                   </NavLink>
                 </li>
               )}
@@ -66,23 +112,32 @@ export function NavSection(props: NavSectionProps) {
         </ul>
       </div>
     </div>
-  )
+  );
 }
 
 export interface LateralNavProps {
-  transparent?: boolean
-  children?: JSX.Element
-  class?: string
+  transparent?: boolean;
+  children?: JSX.Element;
+  class?: string;
 }
 
-export function LateralNav(props: LateralNavProps) {
-  const bgColor = () => (props.transparent ? '' : 'bg-bg-200')
+const nav = style<{ isTransparent: boolean }>({
+  width: 300,
+  margin: 0,
+  padding: 12,
+  borderEndWidth: 1,
+  borderStyle: "solid",
+  borderColor: "[var(--color-primary-600)]",
+  backgroundColor: {
+    default: "[var(--color-bg-200)]",
+    isTransparent: "transparent",
+  },
+});
 
+export function LateralNav(props: LateralNavProps) {
   return (
-    <div
-      class={`hidden w-[300px] md:block ${bgColor()} m-0 border-r border-primary-600 p-3 ${props.class ?? ''}`}
-    >
+    <div class={`${nav({ isTransparent: props.transparent ?? false })} ${props.class ?? ""}`}>
       {props.children}
     </div>
-  )
+  );
 }