@proyecto-viviana/ui 0.3.5 → 0.4.0

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

@@ -1,42 +1,98 @@
-import type { JSX } from 'solid-js'
-import { 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). A nav bar with an accent bottom rule, a logo/wordmark slot,
+// and trailing actions, on the S2 ramps in Silapse colors.
+import { style } from "../../style" with { type: "macro" };
 
 export interface NavHeaderProps {
-  logo?: string
-  logoAlt?: string
-  logoText?: string
-  children?: JSX.Element
-  menuIcon?: JSX.Element
-  onMenuClick?: () => void
-  class?: string
+  logo?: string;
+  logoAlt?: string;
+  logoText?: string;
+  children?: JSX.Element;
+  menuIcon?: JSX.Element;
+  onMenuClick?: () => void;
+  menuAriaLabel?: string;
+  class?: string;
 }
 
+const bar = style({
+  display: "flex",
+  alignItems: "center",
+  height: 70,
+  backgroundColor: "[var(--color-bg-400)]",
+  borderBottomWidth: 4,
+  borderStyle: "solid",
+  borderColor: "[var(--color-accent)]",
+});
+
+const lead = style({
+  display: "flex",
+  alignItems: "center",
+  paddingStart: 32,
+});
+
+const logoText = style({
+  display: "flex",
+  alignItems: "center",
+  font: "title-xl",
+  fontWeight: "normal",
+  color: "[var(--color-primary-700)]",
+});
+
+const logoImage = style({
+  height: 42,
+  width: "auto",
+});
+
+const trail = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "end",
+  flexGrow: 1,
+  gap: 12,
+  paddingEnd: 32,
+});
+
+const menuButton = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  cursor: "pointer",
+  backgroundColor: "transparent",
+  borderStyle: "none",
+  color: "[var(--color-primary-200)]",
+});
+
 export function NavHeader(props: NavHeaderProps) {
   return (
-    <nav class={`flex items-center bg-bg-400 h-[70px] border-b-4 border-accent-500 ${props.class ?? ''}`}>
-      <div class="pl-1 md:pl-8 flex items-center">
-        <Show when={props.logo} fallback={
-          <Show when={props.logoText}>
-            <span class="text-[34px] font-light text-primary-700 flex items-center">
-              {props.logoText}
-            </span>
-          </Show>
-        }>
-          <img src={props.logo} alt={props.logoAlt ?? 'Logo'} class="h-[42px] w-auto" />
+    <nav class={`${bar} ${props.class ?? ""}`}>
+      <div class={lead}>
+        <Show
+          when={props.logo}
+          fallback={
+            <Show when={props.logoText}>
+              <span class={logoText}>{props.logoText}</span>
+            </Show>
+          }
+        >
+          <img class={logoImage} src={props.logo} alt={props.logoAlt ?? "Logo"} />
         </Show>
       </div>
 
-      <div class="flex-1 flex justify-end items-center pr-1 md:pr-8">
+      <div class={trail}>
         {props.children}
         <Show when={props.menuIcon}>
-          <button
-            class="md:hidden flex items-center justify-center"
-            onClick={props.onMenuClick}
+          <HeadlessButton
+            class={menuButton}
+            onPress={() => props.onMenuClick?.()}
+            aria-label={props.menuAriaLabel ?? "Open menu"}
           >
             {props.menuIcon}
-          </button>
+          </HeadlessButton>
         </Show>
       </div>
     </nav>
-  )
+  );
 }

package/src/custom/page-layout/index.tsx

@@ -1,29 +1,33 @@
-import { JSX, splitProps } from 'solid-js'
+import { type JSX, splitProps } from "solid-js";
+// Styled via the S2 style() macro through viviana's own seam (../../style →
+// src/style.ts). A full-height page shell painted in Silapse surface/text
+// colors; `withHeader` reserves top space so a fixed header doesn't overlap.
+import { style } from "../../style" with { type: "macro" };
 
 export interface PageLayoutProps extends JSX.HTMLAttributes<HTMLDivElement> {
-  /** Content of the page */
-  children: JSX.Element
-  /** Add padding-top to account for fixed header (use for non-landing pages) */
-  withHeader?: boolean
+  children: JSX.Element;
+  withHeader?: boolean;
 }
 
-/**
- * PageLayout provides consistent page structure with proper background and font styling.
- * Use this as the root wrapper for all pages.
- */
-export function PageLayout(props: PageLayoutProps) {
-  const [local, rest] = splitProps(props, ['class', 'withHeader'])
+const page = style<{ isWithHeader: boolean }>({
+  display: "flex",
+  flexDirection: "column",
+  minHeight: "screen",
+  width: "full",
+  backgroundColor: "[var(--color-background)]",
+  color: "[var(--color-text)]",
+  paddingTop: { isWithHeader: 64 },
+});
 
-  const classes = () => {
-    const base = 'vui-page'
-    const header = local.withHeader ? 'vui-page--with-header' : ''
-    const custom = local.class ?? ''
-    return [base, header, custom].filter(Boolean).join(' ')
-  }
+export function PageLayout(props: PageLayoutProps) {
+  const [local, rest] = splitProps(props, ["class", "withHeader"]);
 
   return (
-    <div class={classes()} {...rest}>
+    <div
+      class={`${page({ isWithHeader: local.withHeader ?? false })} ${local.class ?? ""}`}
+      {...rest}
+    >
       {props.children}
     </div>
-  )
+  );
 }

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

@@ -1,64 +1,114 @@
-import type { JSX } from 'solid-js'
-import { Show } from 'solid-js'
-import { Avatar } from '../../avatar'
+import type { JSX } from "solid-js";
+import { Show } from "solid-js";
+import { Avatar } from "@proyecto-viviana/solid-spectrum";
+// Styled via the S2 style() macro through viviana's own seam (../../style →
+// src/style.ts). Mirrors S2's UserCard shape (avatar + title/description +
+// footer actions) on the S2 spacing/radius/elevation ramps, in Silapse colors.
+import { style } from "../../style" with { type: "macro" };
 
 export interface ProfileCardProps {
-  username: string
-  avatar?: string
-  bio?: string
-  followers?: number
-  following?: number
+  username: string;
+  avatar?: string;
+  bio?: string;
+  followers?: number;
+  following?: number;
   /**
    * Actions to display below the profile.
    * 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({
+  display: "flex",
+  flexDirection: "column",
+  gap: 16,
+  padding: 16,
+  borderRadius: "lg",
+  backgroundColor: "[var(--color-bg-200)]",
+  boxShadow: "elevated",
+});
+
+const head = style({
+  display: "flex",
+  alignItems: "start",
+  gap: 16,
+});
+
+const info = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: 4,
+  flexGrow: 1,
+  minWidth: 0,
+});
+
+const name = style({
+  font: "heading-sm",
+  color: "[var(--color-primary-100)]",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+});
+
+const bio = style({
+  font: "ui-sm",
+  color: "[var(--color-text-secondary)]",
+});
+
+const stats = style({
+  display: "flex",
+  gap: 16,
+  font: "ui-sm",
+  color: "[var(--color-text-secondary)]",
+});
+
+const statValue = style({
+  fontWeight: "bold",
+  color: "[var(--color-primary-100)]",
+});
+
+const actionRow = style({
+  display: "flex",
+  gap: 8,
+});
+
 export function ProfileCard(props: ProfileCardProps) {
   const formatNumber = (num: number) => {
-    if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`
-    if (num >= 1000) return `${(num / 1000).toFixed(1)}K`
-    return num.toString()
-  }
+    if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`;
+    if (num >= 1000) return `${(num / 1000).toFixed(1)}K`;
+    return num.toString();
+  };
 
   return (
-    <div class={`bg-bg-200 rounded-xl p-4 ${props.class ?? ''}`}>
-      <div class="flex items-start gap-4">
+    <div class={`${card} ${props.class ?? ""}`}>
+      <div class={head}>
         <Avatar src={props.avatar} alt={props.username} size="lg" />
-        <div class="flex-1 min-w-0">
-          <h3 class="font-semibold text-primary-100 text-lg truncate">
-            {props.username}
-          </h3>
+        <div class={info}>
+          <h3 class={name}>{props.username}</h3>
           <Show when={props.bio}>
-            <p class="text-primary-300 text-sm mt-1 line-clamp-2">{props.bio}</p>
+            <p class={bio}>{props.bio}</p>
           </Show>
-          <div class="flex gap-4 mt-2 text-sm">
+          <div class={stats}>
             <Show when={props.followers !== undefined}>
-              <span class="text-primary-300">
-                <span class="font-semibold text-primary-100">
-                  {formatNumber(props.followers!)}
-                </span>{' '}
-                seguidores
+              <span>
+                <span class={statValue}>{formatNumber(props.followers!)}</span> seguidores
               </span>
             </Show>
             <Show when={props.following !== undefined}>
-              <span class="text-primary-300">
-                <span class="font-semibold text-primary-100">
-                  {formatNumber(props.following!)}
-                </span>{' '}
-                siguiendo
+              <span>
+                <span class={statValue}>{formatNumber(props.following!)}</span> siguiendo
               </span>
             </Show>
           </div>
         </div>
       </div>
       <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>
-  )
+  );
 }

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

@@ -1,59 +1,76 @@
-import type { JSX } from 'solid-js'
+import type { JSX } from "solid-js";
+// Styled via the S2 style() macro through viviana's own seam (../../style →
+// src/style.ts). A square logo/preview tile with a caption, sized by the S2
+// spacing + type ramps and painted in Silapse colors. `inactive` dims it;
+// `href` turns the whole card into a link.
+import { style } from "../../style" with { type: "macro" };
 
-export type ProjectCardSize = 'sm' | 'md' | 'lg'
+export type ProjectCardSize = "sm" | "md" | "lg";
 
 export interface ProjectCardProps {
-  /** Project name shown in tooltip on hover */
-  name: string
-  /** Image source for the project logo */
-  imageSrc: string
-  /** Alt text for the image */
-  imageAlt?: string
-  /** Optional link to the project */
-  href?: string
-  /** Size of the card */
-  size?: ProjectCardSize
-  /** Whether the project is inactive/greyed out */
-  inactive?: boolean
-  /** Additional CSS class */
-  class?: string
+  name: string;
+  imageSrc: string;
+  imageAlt?: string;
+  href?: string;
+  size?: ProjectCardSize;
+  inactive?: boolean;
+  class?: string;
 }
 
-/**
- * Project card with logo and hover tooltip.
- * Used for showcasing ecosystem projects.
- */
+const card = style<{ size: ProjectCardSize; isInactive: boolean }>({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: 8,
+  width: "full",
+  borderRadius: "lg",
+  borderWidth: 1,
+  borderStyle: "solid",
+  borderColor: "[var(--color-border)]",
+  backgroundColor: "[var(--color-bg-200)]",
+  color: "[var(--color-primary-100)]",
+  textDecoration: "none",
+  padding: { size: { sm: 12, md: 16, lg: 20 } },
+  opacity: { default: 1, isInactive: 0.5 },
+});
+
+const image = style({
+  width: "full",
+  aspectRatio: "square",
+  objectFit: "contain",
+  borderRadius: "sm",
+});
+
+const caption = style<{ size: ProjectCardSize }>({
+  width: "full",
+  textAlign: "center",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  color: "[var(--color-primary-200)]",
+  font: { size: { sm: "ui-sm", md: "ui", lg: "ui-lg" } },
+});
+
 export function ProjectCard(props: ProjectCardProps): JSX.Element {
-  const size = () => props.size ?? 'sm'
-  const inactive = () => props.inactive ?? false
+  const size = () => props.size ?? "sm";
+  const inactive = () => props.inactive ?? false;
 
   const cardContent = () => (
     <>
-      <div class="vui-project-card__tooltip">
-        <span>{props.name}</span>
-      </div>
-      <img
-        class="vui-project-card__image"
-        src={props.imageSrc}
-        alt={props.imageAlt ?? props.name}
-      />
+      <img class={image} src={props.imageSrc} alt={props.imageAlt ?? props.name} />
+      <span class={caption({ size: size() })}>{props.name}</span>
     </>
-  )
+  );
 
-  const cardClasses = () =>
-    `vui-project-card vui-project-card--${size()} ${inactive() ? 'vui-project-card--inactive' : ''} ${props.class ?? ''}`
+  const classes = () => `${card({ size: size(), isInactive: inactive() })} ${props.class ?? ""}`;
 
   if (props.href) {
     return (
-      <a href={props.href} target="_blank" rel="noopener noreferrer" class={cardClasses()}>
+      <a href={props.href} target="_blank" rel="noopener noreferrer" class={classes()}>
         {cardContent()}
       </a>
-    )
+    );
   }
 
-  return (
-    <div class={cardClasses()}>
-      {cardContent()}
-    </div>
-  )
+  return <div class={classes()}>{cardContent()}</div>;
 }

package/src/custom/timeline-item/index.tsx

@@ -1,105 +1,140 @@
-import type { JSX } from 'solid-js'
-import { Show } from 'solid-js'
-import { Avatar } from '../../avatar'
+import type { JSX } from "solid-js";
+import { Show } from "solid-js";
+import { Avatar } from "@proyecto-viviana/solid-spectrum";
+// Styled via the S2 style() macro through viviana's own seam (../../style →
+// src/style.ts). A social timeline event card (two avatars + icon + message)
+// on the S2 spacing/radius ramps in Silapse colors.
+import { style } from "../../style" with { type: "macro" };
 
-export type TimelineEventType = 'follow' | 'like' | 'comment' | 'event' | 'custom'
+export type TimelineEventType = "follow" | "like" | "comment" | "event" | "custom";
 
 export interface TimelineItemProps {
-  type?: TimelineEventType
+  type?: TimelineEventType;
   /**
    * Icon to display between the two avatars.
    * Use a function returning JSX for SSR compatibility: `icon={() => <MyIcon />}`
    * Or pass a simple string for text-based icons: `icon="👋"`
    */
-  icon?: string | (() => JSX.Element)
+  icon?: string | (() => JSX.Element);
   leftUser?: {
-    name: string
-    avatar?: string
-  }
+    name: string;
+    avatar?: string;
+  };
   rightUser?: {
-    name: string
-    avatar?: string
-  }
+    name: string;
+    avatar?: string;
+  };
   /**
    * Custom message content.
    * Use a function returning JSX for SSR compatibility: `message={() => <span>...</span>}`
    * Or pass a simple string.
    */
-  message?: string | (() => JSX.Element)
-  class?: string
+  message?: string | (() => JSX.Element);
+  class?: string;
 }
 
+const nameEmph = style({
+  fontWeight: "bold",
+  color: "[var(--color-accent)]",
+});
+
 const eventMessages: Record<TimelineEventType, (left: string, right: string) => JSX.Element> = {
   follow: (left, right) => (
     <>
-      <span class="font-semibold text-accent-200">{left}</span>
-      {' ha empezado a seguir a '}
-      <span class="font-semibold text-accent-200">{right}</span>
+      <span class={nameEmph}>{left}</span>
+      {" ha empezado a seguir a "}
+      <span class={nameEmph}>{right}</span>
     </>
   ),
   like: (left, right) => (
     <>
-      <span class="font-semibold text-accent-200">{left}</span>
-      {' le ha dado like a '}
-      <span class="font-semibold text-accent-200">{right}</span>
+      <span class={nameEmph}>{left}</span>
+      {" le ha dado like a "}
+      <span class={nameEmph}>{right}</span>
     </>
   ),
   comment: (left, right) => (
     <>
-      <span class="font-semibold text-accent-200">{left}</span>
-      {' ha comentado en '}
-      <span class="font-semibold text-accent-200">{right}</span>
+      <span class={nameEmph}>{left}</span>
+      {" ha comentado en "}
+      <span class={nameEmph}>{right}</span>
     </>
   ),
   event: (left, right) => (
     <>
-      <span class="font-semibold text-accent-200">{left}</span>
-      {' asistirá al evento de '}
-      <span class="font-semibold text-accent-200">{right}</span>
+      <span class={nameEmph}>{left}</span>
+      {" asistirá al evento de "}
+      <span class={nameEmph}>{right}</span>
     </>
   ),
   custom: () => null,
-}
+};
+
+const card = style({
+  display: "inline-flex",
+  flexDirection: "column",
+  gap: 20,
+  padding: 20,
+  borderRadius: "xl",
+  borderWidth: 1,
+  borderStyle: "solid",
+  borderColor: "[var(--color-primary-700)]",
+  backgroundColor: "[var(--color-bg-200)]",
+});
+
+const avatarsRow = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 12,
+});
+
+const messageRow = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  textAlign: "center",
+  font: "ui",
+  color: "[var(--color-text-secondary)]",
+});
 
 export function TimelineItem(props: TimelineItemProps) {
-  const type = () => props.type ?? 'follow'
-  const leftName = () => props.leftUser?.name ?? ''
-  const rightName = () => props.rightUser?.name ?? ''
+  const type = () => props.type ?? "follow";
+  const leftName = () => props.leftUser?.name ?? "";
+  const rightName = () => props.rightUser?.name ?? "";
 
   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();
+  };
 
   const renderMessage = () => {
-    const message = props.message
-    if (!message) return null
-    if (typeof message === 'string') return message
-    return message()
-  }
+    const message = props.message;
+    if (!message) return null;
+    if (typeof message === "string") return message;
+    return message();
+  };
 
   return (
-    <div class={`inline-flex w-auto flex-col gap-5 rounded-2xl border border-primary-700 bg-bg-200 p-5 hover:bg-bg-300 transition-colors ${props.class ?? ''}`}>
-      <div class="flex items-center justify-around gap-3">
+    <div class={`${card} ${props.class ?? ""}`}>
+      <div class={avatarsRow}>
         <Show when={props.leftUser}>
           <Avatar src={props.leftUser!.avatar} alt={props.leftUser!.name} />
         </Show>
-        <Show when={props.icon}>
-          {renderIcon()}
-        </Show>
+        <Show when={props.icon}>{renderIcon()}</Show>
         <Show when={props.rightUser}>
           <Avatar src={props.rightUser!.avatar} alt={props.rightUser!.name} />
         </Show>
       </div>
-      <div class="flex items-center justify-center gap-3 text-center">
-        <span class="font-light text-primary-300">
+      <div class={messageRow}>
+        <span>
           <Show when={props.message} fallback={eventMessages[type()](leftName(), rightName())}>
             {renderMessage()}
           </Show>
         </span>
       </div>
     </div>
-  )
+  );
 }

package/src/font-faces.css

@@ -0,0 +1 @@
+@import "@proyecto-viviana/solid-spectrum/font-faces.css";