@proyecto-viviana/ui 0.4.0 → 0.4.1

package/src/custom/conversation/index.tsx

@@ -65,13 +65,18 @@ const previewName = style({
 
 const previewTime = style({
   font: "detail-sm",
-  color: "[var(--color-text-muted)]",
+  // `--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: "[var(--color-text-secondary)]",
+  // `--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",
@@ -88,7 +93,11 @@ const unread = style({
   font: "detail-sm",
   fontWeight: "bold",
   backgroundColor: "[var(--color-accent)]",
-  color: "[var(--color-bg-400)]",
+  // 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) {
@@ -142,16 +151,24 @@ const bubble = style<{ isUser: boolean }>({
     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-bg-400)]",
+    isUser: "[var(--color-grey-900)]",
   },
 });
 
 const bubbleTime = style<{ isUser: boolean }>({
   font: "detail-sm",
   color: {
-    default: "[var(--color-text-muted)]",
-    isUser: "[var(--color-bg-300)]",
+    // `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)]",
   },
 });
 

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

@@ -58,7 +58,15 @@ const body = style({
 
 const title = style({
   font: "heading",
-  color: "[var(--color-accent)]",
+  // 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({
@@ -66,7 +74,12 @@ const meta = style({
   alignItems: "center",
   gap: 16,
   font: "ui-sm",
-  color: "[var(--color-text-secondary)]",
+  // 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({
@@ -76,7 +89,12 @@ const metaItem = style({
 });
 
 const metaIcon = style({
-  color: "[var(--color-accent)]",
+  // 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({
@@ -93,7 +111,10 @@ const avatars = style({
 
 const more = style({
   font: "ui-sm",
-  color: "[var(--color-text-secondary)]",
+  // 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({

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

@@ -35,11 +35,20 @@ export interface NavLinkProps {
 }
 
 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-secondary)]",
+    default: "[var(--color-text)]",
     isActive: "[var(--color-primary-300)]",
   },
 });

package/src/custom/logo/index.tsx

@@ -34,7 +34,14 @@ const word = style<{ tone: "primary" | "accent" }>({
   color: {
     tone: {
       primary: "[var(--color-primary-100)]",
-      accent: "[var(--color-accent)]",
+      // `--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)]",
     },
   },
 });

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

@@ -38,7 +38,15 @@ const logoText = style({
   alignItems: "center",
   font: "title-xl",
   fontWeight: "normal",
-  color: "[var(--color-primary-700)]",
+  // 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({

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

@@ -54,14 +54,23 @@ const name = style({
 
 const bio = style({
   font: "ui-sm",
-  color: "[var(--color-text-secondary)]",
+  // 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",
-  color: "[var(--color-text-secondary)]",
+  // 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({

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

@@ -47,8 +47,8 @@ const caption = style<{ size: ProjectCardSize }>({
   overflow: "hidden",
   textOverflow: "ellipsis",
   whiteSpace: "nowrap",
-  color: "[var(--color-primary-200)]",
   font: { size: { sm: "ui-sm", md: "ui", lg: "ui-lg" } },
+  color: "[var(--color-primary-200)]",
 });
 
 export function ProjectCard(props: ProjectCardProps): JSX.Element {

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

@@ -35,7 +35,11 @@ export interface TimelineItemProps {
 
 const nameEmph = style({
   fontWeight: "bold",
-  color: "[var(--color-accent)]",
+  // Emphasis via weight, not color: `--color-accent` (#df5c9a) fails AA on the
+  // `--color-bg-200` card (~1.9:1 light, ~4.48:1 dark) and no accent shade clears
+  // 4.5:1 in BOTH themes. The flipping `--color-text` does (7.53 light / 15.33
+  // dark); the `bold` weight sets the names apart from the message body.
+  color: "[var(--color-text)]",
 });
 
 const eventMessages: Record<TimelineEventType, (left: string, right: string) => JSX.Element> = {
@@ -95,7 +99,11 @@ const messageRow = style({
   justifyContent: "center",
   textAlign: "center",
   font: "ui",
-  color: "[var(--color-text-secondary)]",
+  // `--color-text-secondary` renders 3.84:1 on the light `--color-bg-200` card
+  // (fails the 4.5:1 small-text floor); the flipping `--color-text` clears it in
+  // both themes. `color` stays after `font` (the S2 macro font-shorthand default
+  // color would otherwise win on source order).
+  color: "[var(--color-text)]",
 });
 
 export function TimelineItem(props: TimelineItemProps) {

package/src/vite.ts

@@ -46,6 +46,7 @@ import macros from "unplugin-parcel-macros";
 // typed `Plugin | Plugin[]`; we always get the single-plugin form.
 interface MacroPlugin {
   name?: string;
+  transformInclude?: (id: string) => boolean | void;
   transform?: (this: unknown, code: string, id: string) => unknown;
   resolveId?: (this: unknown, id: string, importer?: string, options?: object) => unknown;
   loadInclude?: (id: string) => boolean | void;
@@ -56,6 +57,14 @@ interface MacroPlugin {
 const macroCssIdPattern = /^macro-[a-f0-9]+\.css$/;
 const macroCssImportPattern = /import\s+["']macro-[a-f0-9]+\.css["'];\n?/g;
 
+function getMacroSourceFilePath(id: string) {
+  const queryIndex = id.indexOf("?");
+  if (queryIndex === -1 || !/^\?tsr-split=[^&#]+(?:#.*)?$/.test(id.slice(queryIndex))) {
+    return id;
+  }
+  return id.slice(0, queryIndex);
+}
+
 function getMacroCssFileName(id: string) {
   const fileName = id.split("/").pop();
   return fileName && macroCssIdPattern.test(fileName) ? fileName : null;
@@ -97,8 +106,11 @@ export function vivianaMacros(): MacroPlugin {
 
   return {
     ...plugin,
+    transformInclude(id: string) {
+      return plugin.transformInclude?.(getMacroSourceFilePath(id)) ?? false;
+    },
     async transform(this: unknown, code: string, id: string) {
-      const result = await plugin.transform?.call(this, code, id);
+      const result = await plugin.transform?.call(this, code, getMacroSourceFilePath(id));
       const transformedCode =
         typeof result === "string"
           ? result