@proyecto-viviana/ui 0.3.5 → 0.4.1

package/src/custom/logo/index.tsx

@@ -1,58 +1,60 @@
-import { 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 clean two-word wordmark: the S2 title ramp sizes it; Silapse
+// colors paint it (primary + accent). `inverted` swaps which word takes accent.
+import { style } from "../../style" with { type: "macro" };
 
 export type LogoSize = "sm" | "md" | "lg" | "xl";
 
 export interface LogoProps {
-  /** First word (light weight, muted color) */
   firstWord?: string;
-  /** Second word (bold, with 3D effect) */
   secondWord?: string;
-  /** Size variant of the logo */
   size?: LogoSize;
-  /** Invert the styles (first word gets 3D effect, second word is muted) */
   inverted?: boolean;
-  /** Additional CSS classes */
   class?: string;
 }
 
-/**
- * Two-word logo with retro synthwave 3D effect.
- * First word is light/muted, second word has bold styling with pink 3D shadow.
- *
- * @example
- * // Default usage
- * <Logo />
- *
- * @example
- * // Custom text
- * <Logo firstWord="My" secondWord="Brand" size="lg" />
- */
-export function Logo(props: LogoProps): JSX.Element {
-  const sizeClass = () => {
-    switch (props.size) {
-      case "sm":
-        return "vui-logo--sm";
-      case "lg":
-        return "vui-logo--lg";
-      case "xl":
-        return "vui-logo--xl";
-      case "md":
-      default:
-        return "vui-logo--md";
-    }
-  };
+const wordmark = style<{ size: LogoSize }>({
+  display: "inline-flex",
+  alignItems: "baseline",
+  columnGap: 8,
+  whiteSpace: "nowrap",
+  font: {
+    size: {
+      sm: "title-sm",
+      md: "title",
+      lg: "title-xl",
+      xl: "title-3xl",
+    },
+  },
+  fontWeight: "black",
+});
+
+const word = style<{ tone: "primary" | "accent" }>({
+  color: {
+    tone: {
+      primary: "[var(--color-primary-100)]",
+      // `--color-accent` (#df5c9a) is the SAME non-flipping pink in both themes;
+      // on the light `--color-bg-200` panel the wordmark reads only 1.89:1 (fails
+      // even the 3:1 large-text floor the `black`-weight `title-xl` earns). No
+      // single non-flipping shade clears a near-white AND a near-black panel, so
+      // the accent word takes the *flipping* `--color-accent-500` (dark #d84a8f /
+      // light #8a1e4a) → 3.86:1 dark / 4.91:1 light — clearing the large-text
+      // floor in both themes while keeping the two-tone wordmark identity.
+      accent: "[var(--color-accent-500)]",
+    },
+  },
+});
 
+export function Logo(props: LogoProps): JSX.Element {
   const firstWord = () => props.firstWord ?? "Proyecto";
   const secondWord = () => props.secondWord ?? "Viviana";
+  const inverted = () => props.inverted ?? false;
 
   return (
-    <span class={`vui-logo ${sizeClass()} ${props.inverted ? "vui-logo--inverted" : ""} ${props.class ?? ""}`}>
-      <span class="vui-logo__first" data-text={props.inverted ? firstWord() : undefined}>
-        {firstWord()}
-      </span>
-      <span class="vui-logo__second" data-text={props.inverted ? undefined : secondWord()}>
-        {secondWord()}
-      </span>
+    <span class={`${wordmark({ size: props.size ?? "md" })} ${props.class ?? ""}`}>
+      <span class={word({ tone: inverted() ? "accent" : "primary" })}>{firstWord()}</span>
+      <span class={word({ tone: inverted() ? "primary" : "accent" })}>{secondWord()}</span>
     </span>
   );
 }

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

@@ -1,42 +1,106 @@
-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",
+  // WCAG AA fix: the wordmark sits on the `--color-bg-400` bar. `--color-primary-700`
+  // is a non-flipping brand fill (light blue in light mode, dark blue in dark mode) —
+  // the SAME direction as the bar, so it read only 2.10:1 light / 2.92:1 dark. The
+  // rendered `title-xl` measures under 24px, so WCAG scores it as normal text (4.5:1
+  // floor, not the 3:1 large-text exception). `--color-primary-500` is the smallest
+  // ramp step that flips with the theme (dark-on-light / light-on-dark) AND clears
+  // 4.5:1, lifting the wordmark to 5.37:1 light / 7.00:1 dark while keeping a prominent
+  // brand blue.
+  color: "[var(--color-primary-500)]",
+});
+
+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,123 @@
-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",
+  // WCAG AA fix: the bio is small text (`ui-sm`) on the `--color-bg-200` card, so
+  // the 4.5:1 floor applies. `--color-text-secondary` read only 3.84:1 on the
+  // light-blue card (5.86:1 dark); `--color-text` flips and clears 4.5:1 both
+  // ways (15.33:1 dark / 7.53:1 light). The bio stays visually secondary to the
+  // `heading-sm` name through its smaller size, not a sub-AA color.
+  color: "[var(--color-text)]",
+});
+
+const stats = style({
+  display: "flex",
+  gap: 16,
+  font: "ui-sm",
+  // WCAG AA fix: the stat connector words ("seguidores" / "siguiendo") share the
+  // bio's 3.84:1-light failure on the `--color-bg-200` card and take the same
+  // flipping `--color-text`. (The stat VALUES are `--color-primary-100`, which
+  // already clears AA — 13.47:1 dark / 10.37:1 light.)
+  color: "[var(--color-text)]",
+});
+
+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",
+  font: { size: { sm: "ui-sm", md: "ui", lg: "ui-lg" } },
+  color: "[var(--color-primary-200)]",
+});
+
 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>;
 }