@william-callao/antonella-theme 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,606 @@
+declare const neutrals: {
+    readonly N0: "#FFFFFF";
+    readonly N50: "#F7F9FC";
+    readonly N100: "#EEF2F7";
+    readonly N200: "#E2E8F0";
+    readonly N300: "#CBD5E1";
+    readonly N400: "#94A3B8";
+    readonly N500: "#64748B";
+    readonly N600: "#33415C";
+    readonly N700: "#26324A";
+    readonly N800: "#171F30";
+    readonly N900: "#0F1626";
+    readonly N950: "#070C16";
+};
+declare const brand: {
+    readonly M50: "#EFF5FB";
+    readonly M100: "#DCE9F6";
+    readonly M200: "#BEDAF0";
+    readonly M300: "#93C1E5";
+    readonly M400: "#64A4D7";
+    readonly M500: "#4689C6";
+    readonly M600: "#346FA9";
+    readonly M700: "#2B5B8A";
+    readonly M800: "#264C72";
+    readonly M900: "#213F5E";
+};
+declare const success: {
+    readonly S50: "#F0FDF4";
+    readonly S100: "#DCFCE7";
+    readonly S200: "#BBF7D0";
+    readonly S300: "#86EFAC";
+    readonly S400: "#4ADE80";
+    readonly S500: "#22C55E";
+    readonly S600: "#16A34A";
+    readonly S700: "#15803D";
+    readonly S800: "#166534";
+    readonly S900: "#14532D";
+};
+declare const warning: {
+    readonly W50: "#FFFBEB";
+    readonly W100: "#FEF3C7";
+    readonly W200: "#FDE68A";
+    readonly W300: "#FCD34D";
+    readonly W400: "#FBBF24";
+    readonly W500: "#F59E0B";
+    readonly W600: "#D97706";
+    readonly W700: "#B45309";
+    readonly W800: "#92400E";
+    readonly W900: "#78350F";
+};
+declare const danger: {
+    readonly D50: "#FEF2F2";
+    readonly D100: "#FEE2E2";
+    readonly D200: "#FECACA";
+    readonly D300: "#FCA5A5";
+    readonly D400: "#F87171";
+    readonly D500: "#EF4444";
+    readonly D600: "#DC2626";
+    readonly D700: "#B91C1C";
+    readonly D800: "#991B1B";
+    readonly D900: "#7F1D1D";
+};
+
+type NeutralKeys = keyof typeof neutrals;
+type BrandKeys = keyof typeof brand;
+type SuccessKeys = keyof typeof success;
+type WarningKeys = keyof typeof warning;
+type DangerKeys = keyof typeof danger;
+type TextColors = {
+    heading: string;
+    body: string;
+    caption: string;
+    brand: string;
+    subtle: string;
+    subtlest: string;
+    disabled: string;
+    success: string;
+    successMid: string;
+    successContrast: string;
+    warning: string;
+    warningMid: string;
+    warningContrast: string;
+    danger: string;
+    dangerContrast: string;
+    linkDefault: string;
+    linkHover: string;
+    linkPressed: string;
+    negative: string;
+};
+type IconColors = {
+    default: string;
+    brand: string;
+    subtle: string;
+    subtlest: string;
+    disabled: string;
+    success: string;
+    successMid: string;
+    successContrast: string;
+    warning: string;
+    warningMid: string;
+    warningContrast: string;
+    danger: string;
+    dangerContrast: string;
+    linkDefault: string;
+    linkHover: string;
+    linkPressed: string;
+    negative: string;
+};
+type BorderColors = {
+    default: string;
+    subtle: string;
+    subtlest: string;
+    light: string;
+    lightest: string;
+    brand: string;
+    brandLight: string;
+    brandLighter: string;
+    brandContrast: string;
+    focus: string;
+    error: string;
+    success: string;
+    warning: string;
+    danger: string;
+};
+type SurfaceColors = {
+    pageDefault: string;
+    pageSubtlest: string;
+    pageSubtle: string;
+    card: string;
+    cardBorder: string;
+    brand: string;
+    brandSubtle: string;
+    brandSubtler: string;
+    brandSubtlest: string;
+    success: string;
+    successSubtle: string;
+    warning: string;
+    warningSubtle: string;
+    danger: string;
+    dangerSubtle: string;
+    overlay: string;
+    modal: string;
+};
+type SidebarColors = {
+    background: string;
+    hover: string;
+    activeBackground: string;
+    activeText: string;
+    text: string;
+    sectionTitle: string;
+    title: string;
+};
+type ButtonColors = {
+    primaryBg: string;
+    primaryText: string;
+    primaryHover: string;
+    primaryPressed: string;
+    primaryDisabled: string;
+    secondaryBg: string;
+    secondaryText: string;
+    secondaryBorder: string;
+    secondaryHover: string;
+    ghostText: string;
+    ghostHover: string;
+    dangerBg: string;
+    dangerText: string;
+};
+type InputColors = {
+    bg: string;
+    border: string;
+    borderActive: string;
+    borderError: string;
+    text: string;
+    placeholder: string;
+    disabled: string;
+};
+type BadgeColors = {
+    bg: string;
+    text: string;
+};
+type SkeletonColors = {
+    default: string;
+};
+type ComponentColors = {
+    sidebar: SidebarColors;
+    button: ButtonColors;
+    input: InputColors;
+    badge: BadgeColors;
+    skeleton: SkeletonColors;
+};
+type SemanticColors = {
+    text: TextColors;
+    icon: IconColors;
+    border: BorderColors;
+    surface: SurfaceColors;
+    components: ComponentColors;
+};
+
+declare const palette: {
+    readonly primary: "#346FA9";
+    readonly primaryDark: "#2B5B8A";
+    readonly background: "#F2F2F7";
+    readonly surface: "#FFFFFF";
+    readonly border: "#E5E5EA";
+    readonly text: "#000000";
+    readonly textMuted: "#8E8E93";
+    readonly danger: "#FF3B30";
+    readonly success: "#34C759";
+    readonly warning: "#FF9500";
+};
+declare const darkPalette: {
+    readonly primary: "#64A4D7";
+    readonly primaryDark: "#4689C6";
+    readonly background: "#000000";
+    readonly surface: "#1C1C1E";
+    readonly border: "#2C2C2E";
+    readonly text: "#FFFFFF";
+    readonly textMuted: "#98989F";
+    readonly danger: "#FF453A";
+    readonly success: "#30D158";
+    readonly warning: "#FF9F0A";
+};
+/**
+ * CTA1 — color de llamada a la acción / elemento destacado.
+ * USO: fondo de elementos CTA (ej. opción activa del sidebar).
+ * REGLA: sobre CTA1, el contenido (texto e íconos) se pinta SIEMPRE con `cta1Contrast`.
+ */
+declare const cta1 = "#346FA9";
+declare const cta1Contrast = "#FFFFFF";
+/**
+ * Accent — superficie oscura de marca (sidebar, headers).
+ * REGLA: sobre `accent.background` solo se usan `accent.icon.*` para íconos
+ * y `accent.text.*` para textos. Nunca colores de card/background sobre accent.
+ */
+declare const accent: {
+    readonly background: "#1C1C1E";
+    readonly icon: {
+        readonly primary: "#F2F2F7";
+        readonly secondary: "#98989F";
+    };
+    readonly text: {
+        readonly primary: "#F2F2F7";
+        readonly secondary: "#A1A1A6";
+    };
+};
+/**
+ * Fondo de pantalla base.
+ * REGLA: la pantalla se pinta SIEMPRE con `background.default` (blanco).
+ * Sobre ella, los componentes (cards, formularios, chips, etc.) se pintan
+ * con `background.surface` (gris). `background.skeleton` es el tono de los
+ * placeholders de carga, un poco más claro que `surface`.
+ */
+declare const background: {
+    readonly default: "#FFFFFFFF";
+    readonly subtle: "#dadadaff";
+    readonly surface: "#F7F7FA";
+    readonly content: {
+        readonly primary: "#F7F7FA";
+        readonly secondary: "#8E8E93";
+    };
+    readonly skeleton: "#E5E5EA";
+};
+/**
+ * Texto — colores centralizados de texto del sistema de textos (`texts.ts`).
+ * REGLA: todo texto se pinta con un color de `text`; sobre superficies oscuras
+ * usar `text.inverse`.
+ */
+declare const text: {
+    readonly default: "#000000";
+    readonly secondary: "#8E8E93";
+    readonly subtle: "#8E8E93";
+    readonly placeholder: "#C7C7CC";
+    readonly inverse: "#FFFFFF";
+};
+/**
+ * Card — tarjetas que flotan sobre `background.default` (blanco).
+ * REGLA: una card se pinta con fondo `card.background` (gris) y su texto
+ * con `card.text.*`.
+ */
+declare const card: {
+    readonly background: "#F7F7FA";
+    readonly text: {
+        readonly primary: "#000000";
+        readonly secondary: "#8E8E93";
+    };
+};
+declare const border: {
+    readonly divider: {
+        readonly secondary: "#E5E5EA";
+    };
+    readonly surface: "#FFFFFF";
+    readonly content: {
+        readonly primary: "#F2F2F7";
+        readonly secondary: "#8E8E93";
+    };
+    readonly skeleton: "#E5E5EA";
+};
+/**
+ * AppInput — campos de texto estilo iOS (relleno gris redondeado, sin borde).
+ * Usado por `Input` y `TextField`.
+ * REGLA: sobre `appInput.background` se pinta texto `appInput.text`; el placeholder
+ * `appInput.placeholder`; el mensaje de error `appInput.error`.
+ */
+declare const appInput: {
+    readonly background: "#F7F7FA";
+    readonly text: "#000000";
+    readonly placeholder: "#C7C7CC";
+    readonly error: "#FF3B30";
+};
+/**
+ * AppFormCard — grupo de campos de formulario estilo iOS (inset grouped).
+ * REGLA: el contenedor se pinta con `appInputCard.background.default` (gris
+ * claro) y las filas se separan con `appInputCard.separator` (gris, hairline,
+ * no de borde a borde). Los textos usan `appInputCard.text.*`:
+ * label a la izquierda (semibold, más grande) y valor a la derecha.
+ */
+declare const appInputCard: {
+    readonly background: {
+        readonly default: "#F7F7FA";
+    };
+    readonly border: "#D1D1D6";
+    readonly separator: "#E5E5EA";
+    readonly text: {
+        readonly label: "#000000";
+        readonly value: "#8E8E93";
+        readonly placeholder: "#C7C7CC";
+    };
+};
+/**
+ * AppButton — botón estilo AppFormCard (inset grouped).
+ * REGLA: fondo CTA azul (cta1) por defecto con texto en contraste; en estado
+ * disabled se pinta un gris sólido legible con el texto en gris medio.
+ */
+declare const appButton: {
+    readonly background: {
+        readonly default: "#346FA9";
+        readonly disabled: "#E5E5EA";
+    };
+    readonly text: {
+        readonly default: "#FFFFFF";
+        readonly disabled: "#98989F";
+    };
+};
+
+type DashboardShellTokens = {
+    background: string;
+    sidebarBackground: string;
+    sidebarText: string;
+    sidebarHover: string;
+    sidebarActiveBackground: string;
+    sidebarActiveText: string;
+    sidebarSectionTitle: string;
+    sidebarTitle: string;
+    contentBackground: string;
+    contentBorder: string;
+    borderRadius: number;
+    itemRadius: number;
+    outerMargin: number;
+    contentPadding: number;
+    sidebarWidth: number;
+    sidebarCompactWidth: number;
+};
+declare const shellTokens: DashboardShellTokens;
+declare const darkShellTokens: DashboardShellTokens;
+
+declare const spacing: {
+    readonly xs: 4;
+    readonly sm: 8;
+    readonly md: 12;
+    readonly lg: 16;
+    readonly xl: 24;
+    readonly xxl: 32;
+};
+declare const space: {
+    readonly space1: 4;
+    readonly space2: 8;
+    readonly space3: 12;
+    readonly space4: 16;
+    readonly space5: 20;
+    readonly space6: 24;
+    readonly space7: 28;
+    readonly space8: 32;
+    readonly space9: 36;
+    readonly space10: 40;
+    readonly space12: 48;
+    readonly space16: 64;
+    readonly space20: 80;
+    readonly space24: 96;
+    readonly space32: 128;
+};
+type Spacing = keyof typeof spacing;
+type Space = keyof typeof space;
+
+/**
+ * TextType — tipos de texto del DS, referenciables por nombre para no usar
+ * strings sueltos. El tipo `TextType` (mismo nombre) es la unión de los
+ * valores; en el código del DS se usa `TextType.X`, las apps pueden usar el
+ * tipo con strings literales validados por el compilador.
+ */
+declare const TextType: {
+    readonly Title: "title";
+    readonly Subtitle: "subtitle";
+    readonly Heading: "heading";
+    readonly Body: "body";
+    readonly BodyMedium: "bodyMedium";
+    readonly BodyBold: "bodyBold";
+    readonly Label: "label";
+    readonly Caption: "caption";
+    readonly CaptionMedium: "captionMedium";
+    readonly Overline: "overline";
+    readonly Placeholder: "placeholder";
+};
+type TextType = (typeof TextType)[keyof typeof TextType];
+/**
+ * Sistema de textos del DS. Cada tipo define el estilo tipográfico completo
+ * (fontSize, fontWeight, lineHeight; opcional letterSpacing/textTransform)
+ * más el color por defecto tomado del token `text` de colors.ts.
+ *
+ * ESCALA: alineada a la escala tipográfica oficial de iOS (HIG).
+ * fuente del sistema: SF Pro en iOS / Roboto en Android.
+ *
+ * CASO DE USO (documentado por rol):
+ * - title       : título de pantalla (headers de pantalla/categoría).
+ * - subtitle    : subtítulo de pantalla / secciones grandes.
+ * - heading     : encabezado de card / sección.
+ * - bodyBold    : texto destacado en cards/listas, labels de botones.
+ * - body        : texto base, valor de inputs.
+ * - bodyMedium  : énfasis medio (chips, títulos de card).
+ * - label       : labels de formularios (peso 600 por legibilidad).
+ * - caption     : descripciones secundarias.
+ * - captionMedium: caption con énfasis.
+ * - overline    : micro-etiquetas (uppercase + letterSpacing 0.5).
+ * - placeholder : placeholder de inputs (color `text.placeholder`).
+ *
+ * Uso: la app envía el tipo al componente `Text` (`<Text type={TextType.Title}>`)
+ * y puede sobreescribir el color con la prop `color`.
+ */
+declare const texts: {
+    readonly title: {
+        readonly fontSize: 28;
+        readonly fontWeight: "700";
+        readonly lineHeight: 34;
+        readonly color: "#000000";
+    };
+    readonly subtitle: {
+        readonly fontSize: 22;
+        readonly fontWeight: "700";
+        readonly lineHeight: 28;
+        readonly color: "#000000";
+    };
+    readonly heading: {
+        readonly fontSize: 20;
+        readonly fontWeight: "600";
+        readonly lineHeight: 25;
+        readonly color: "#000000";
+    };
+    readonly bodyBold: {
+        readonly fontSize: 17;
+        readonly fontWeight: "600";
+        readonly lineHeight: 22;
+        readonly color: "#000000";
+    };
+    readonly body: {
+        readonly fontSize: 17;
+        readonly fontWeight: "400";
+        readonly lineHeight: 22;
+        readonly color: "#000000";
+    };
+    readonly bodyMedium: {
+        readonly fontSize: 16;
+        readonly fontWeight: "500";
+        readonly lineHeight: 21;
+        readonly color: "#000000";
+    };
+    readonly label: {
+        readonly fontSize: 15;
+        readonly fontWeight: "600";
+        readonly lineHeight: 20;
+        readonly color: "#000000";
+    };
+    readonly caption: {
+        readonly fontSize: 13;
+        readonly fontWeight: "400";
+        readonly lineHeight: 18;
+        readonly color: "#8E8E93";
+    };
+    readonly captionMedium: {
+        readonly fontSize: 13;
+        readonly fontWeight: "500";
+        readonly lineHeight: 18;
+        readonly color: "#8E8E93";
+    };
+    readonly overline: {
+        readonly fontSize: 11;
+        readonly fontWeight: "600";
+        readonly lineHeight: 14;
+        readonly letterSpacing: 0.5;
+        readonly textTransform: "uppercase";
+        readonly color: "#8E8E93";
+    };
+    readonly placeholder: {
+        readonly fontSize: 17;
+        readonly fontWeight: "400";
+        readonly lineHeight: 22;
+        readonly color: "#C7C7CC";
+    };
+};
+
+type ContextBgMap = {
+    default: string;
+    subtle: string;
+};
+type ContextTextMap = {
+    default: string;
+    subtle: string;
+    subtlest: string;
+};
+type ContextIconMap = {
+    default: string;
+    subtle: string;
+};
+type ContextMap = {
+    bg: ContextBgMap;
+    text: ContextTextMap;
+    icon: ContextIconMap;
+};
+type ContextBgTokens = {
+    default: string;
+    subtle: string;
+};
+type ContextTextTokens = {
+    default: string;
+    subtle: string;
+    subtlest: string;
+};
+type ContextIconTokens = {
+    default: string;
+    subtle: string;
+};
+type ContextTokens = {
+    bg: ContextBgTokens;
+    text: ContextTextTokens;
+    icon: ContextIconTokens;
+};
+type SemanticMap = {
+    default: ContextMap;
+    light: ContextMap;
+    darkness: ContextMap;
+};
+type SemanticTokens = {
+    default: ContextTokens;
+    light: ContextTokens;
+    darkness: ContextTokens;
+};
+declare const lightSemantic: SemanticMap;
+declare const darkSemantic: SemanticMap;
+declare function resolveSemantic(map: SemanticMap): SemanticTokens;
+type TextTokens = ContextTextTokens & {
+    light: string;
+};
+type TextMap = ContextTextMap & {
+    light: string;
+};
+declare const lightText: TextMap;
+declare const darkText: TextMap;
+declare function resolveText(map: TextMap): TextTokens;
+type BackgroundMap = {
+    default: string;
+    subtle: string;
+    subtlest: string;
+};
+declare const lightBackground: BackgroundMap;
+declare const darkBackground: BackgroundMap;
+declare function resolveBackground(map: BackgroundMap): {
+    default: string;
+    subtle: string;
+    subtlest: string;
+};
+
+declare const lightColors: SemanticColors;
+
+declare const darkColors: SemanticColors;
+
+declare enum LayoutColumnSize {
+    FIT = "FIT",
+    EXPAND = "EXPAND"
+}
+declare enum LayoutRowSize {
+    FIT = "FIT",
+    EXPAND = "EXPAND"
+}
+
+declare const radius: {
+    readonly sm: 8;
+    readonly md: 16;
+    readonly lg: 20;
+};
+type Radius = keyof typeof radius;
+
+type ThemeMode = "light" | "dark";
+type ThemeColors = Record<keyof typeof palette, string>;
+declare function resolveColors(mode: ThemeMode): ThemeColors;
+declare function resolveSemanticColors(mode: ThemeMode): SemanticColors;
+declare function resolveShellTokens(mode: "light" | "dark"): DashboardShellTokens;
+
+export { type BackgroundMap, type BadgeColors, type BorderColors, type BrandKeys, type ButtonColors, type ComponentColors, type ContextBgMap, type ContextBgTokens, type ContextIconMap, type ContextIconTokens, type ContextMap, type ContextTextMap, type ContextTextTokens, type ContextTokens, type DangerKeys, type DashboardShellTokens, type IconColors, type InputColors, LayoutColumnSize, LayoutRowSize, type NeutralKeys, type Radius, type SemanticColors, type SemanticMap, type SemanticTokens, type SidebarColors, type SkeletonColors, type Space, type Spacing, type SuccessKeys, type SurfaceColors, type TextColors, type TextMap, type TextTokens, TextType, type ThemeColors, type ThemeMode, type WarningKeys, accent, appButton, appInput, appInputCard, background, border, brand, card, cta1, cta1Contrast, danger, darkBackground, darkColors, darkPalette, darkSemantic, darkShellTokens, darkText, lightBackground, lightColors, lightSemantic, lightText, neutrals, palette, radius, resolveBackground, resolveColors, resolveSemantic, resolveSemanticColors, resolveShellTokens, resolveText, shellTokens, space, spacing, success, text, texts, warning };

package/dist/index.js

@@ -0,0 +1,785 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  LayoutColumnSize: () => LayoutColumnSize,
+  LayoutRowSize: () => LayoutRowSize,
+  TextType: () => TextType,
+  accent: () => accent,
+  appButton: () => appButton,
+  appInput: () => appInput,
+  appInputCard: () => appInputCard,
+  background: () => background,
+  border: () => border,
+  brand: () => brand,
+  card: () => card,
+  cta1: () => cta1,
+  cta1Contrast: () => cta1Contrast,
+  danger: () => danger,
+  darkBackground: () => darkBackground,
+  darkColors: () => darkColors,
+  darkPalette: () => darkPalette,
+  darkSemantic: () => darkSemantic,
+  darkShellTokens: () => darkShellTokens,
+  darkText: () => darkText,
+  lightBackground: () => lightBackground,
+  lightColors: () => lightColors,
+  lightSemantic: () => lightSemantic,
+  lightText: () => lightText,
+  neutrals: () => neutrals,
+  palette: () => palette,
+  radius: () => radius,
+  resolveBackground: () => resolveBackground,
+  resolveColors: () => resolveColors,
+  resolveSemantic: () => resolveSemantic,
+  resolveSemanticColors: () => resolveSemanticColors,
+  resolveShellTokens: () => resolveShellTokens,
+  resolveText: () => resolveText,
+  shellTokens: () => shellTokens,
+  space: () => space,
+  spacing: () => spacing,
+  success: () => success,
+  text: () => text,
+  texts: () => texts,
+  warning: () => warning
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/colors.ts
+var palette = {
+  primary: "#346FA9",
+  primaryDark: "#2B5B8A",
+  background: "#F2F2F7",
+  surface: "#FFFFFF",
+  border: "#E5E5EA",
+  text: "#000000",
+  textMuted: "#8E8E93",
+  danger: "#FF3B30",
+  success: "#34C759",
+  warning: "#FF9500"
+};
+var darkPalette = {
+  primary: "#64A4D7",
+  primaryDark: "#4689C6",
+  background: "#000000",
+  surface: "#1C1C1E",
+  border: "#2C2C2E",
+  text: "#FFFFFF",
+  textMuted: "#98989F",
+  danger: "#FF453A",
+  success: "#30D158",
+  warning: "#FF9F0A"
+};
+var cta1 = "#346FA9";
+var cta1Contrast = "#FFFFFF";
+var accent = {
+  background: "#1C1C1E",
+  icon: {
+    primary: "#F2F2F7",
+    secondary: "#98989F"
+  },
+  text: {
+    primary: "#F2F2F7",
+    secondary: "#A1A1A6"
+  }
+};
+var background = {
+  default: "#FFFFFFFF",
+  subtle: "#dadadaff",
+  surface: "#F7F7FA",
+  content: {
+    primary: "#F7F7FA",
+    secondary: "#8E8E93"
+  },
+  skeleton: "#E5E5EA"
+};
+var text = {
+  default: "#000000",
+  secondary: "#8E8E93",
+  subtle: "#8E8E93",
+  placeholder: "#C7C7CC",
+  inverse: "#FFFFFF"
+};
+var card = {
+  background: "#F7F7FA",
+  text: {
+    primary: text.default,
+    secondary: text.secondary
+  }
+};
+var border = {
+  divider: {
+    secondary: "#E5E5EA"
+    // usadp spbre backgrouf surface
+  },
+  surface: "#FFFFFF",
+  //
+  content: {
+    primary: "#F2F2F7",
+    secondary: "#8E8E93"
+  },
+  skeleton: "#E5E5EA"
+};
+var appInput = {
+  background: background.content.primary,
+  // #F2F2F7 (systemGray6)
+  text: text.default,
+  // #000000 (label)
+  placeholder: text.placeholder,
+  // #C7C7CC (systemGray3)
+  error: palette.danger
+  // #FF3B30 (systemRed)
+};
+var appInputCard = {
+  background: {
+    default: "#F7F7FA"
+  },
+  border: "#D1D1D6",
+  separator: "#E5E5EA",
+  text: {
+    label: text.default,
+    value: text.secondary,
+    placeholder: text.placeholder
+  }
+};
+var appButton = {
+  background: {
+    default: cta1,
+    disabled: "#E5E5EA"
+  },
+  text: {
+    default: cta1Contrast,
+    disabled: "#98989F"
+  }
+};
+
+// src/basePalette.ts
+var neutrals = {
+  N0: "#FFFFFF",
+  N50: "#F7F9FC",
+  N100: "#EEF2F7",
+  N200: "#E2E8F0",
+  N300: "#CBD5E1",
+  N400: "#94A3B8",
+  N500: "#64748B",
+  N600: "#33415C",
+  N700: "#26324A",
+  N800: "#171F30",
+  N900: "#0F1626",
+  N950: "#070C16"
+};
+var brand = {
+  M50: "#EFF5FB",
+  M100: "#DCE9F6",
+  M200: "#BEDAF0",
+  M300: "#93C1E5",
+  M400: "#64A4D7",
+  M500: "#4689C6",
+  M600: "#346FA9",
+  M700: "#2B5B8A",
+  M800: "#264C72",
+  M900: "#213F5E"
+};
+var success = {
+  S50: "#F0FDF4",
+  S100: "#DCFCE7",
+  S200: "#BBF7D0",
+  S300: "#86EFAC",
+  S400: "#4ADE80",
+  S500: "#22C55E",
+  S600: "#16A34A",
+  S700: "#15803D",
+  S800: "#166534",
+  S900: "#14532D"
+};
+var warning = {
+  W50: "#FFFBEB",
+  W100: "#FEF3C7",
+  W200: "#FDE68A",
+  W300: "#FCD34D",
+  W400: "#FBBF24",
+  W500: "#F59E0B",
+  W600: "#D97706",
+  W700: "#B45309",
+  W800: "#92400E",
+  W900: "#78350F"
+};
+var danger = {
+  D50: "#FEF2F2",
+  D100: "#FEE2E2",
+  D200: "#FECACA",
+  D300: "#FCA5A5",
+  D400: "#F87171",
+  D500: "#EF4444",
+  D600: "#DC2626",
+  D700: "#B91C1C",
+  D800: "#991B1B",
+  D900: "#7F1D1D"
+};
+
+// src/themes/light.ts
+var lightColors = {
+  text: {
+    heading: neutrals.N900,
+    body: neutrals.N800,
+    caption: neutrals.N500,
+    brand: brand.M700,
+    subtle: neutrals.N600,
+    subtlest: neutrals.N400,
+    disabled: neutrals.N400,
+    success: success.S700,
+    successMid: success.S600,
+    successContrast: success.S50,
+    warning: warning.W700,
+    warningMid: warning.W600,
+    warningContrast: warning.W50,
+    danger: danger.D700,
+    dangerContrast: danger.D50,
+    linkDefault: brand.M600,
+    linkHover: brand.M700,
+    linkPressed: brand.M800,
+    negative: danger.D600
+  },
+  icon: {
+    default: neutrals.N600,
+    brand: brand.M600,
+    subtle: neutrals.N500,
+    subtlest: neutrals.N400,
+    disabled: neutrals.N400,
+    success: success.S600,
+    successMid: success.S500,
+    successContrast: success.S400,
+    warning: warning.W600,
+    warningMid: warning.W500,
+    warningContrast: warning.W400,
+    danger: danger.D600,
+    dangerContrast: danger.D500,
+    linkDefault: brand.M600,
+    linkHover: brand.M700,
+    linkPressed: brand.M800,
+    negative: danger.D600
+  },
+  border: {
+    default: neutrals.N200,
+    subtle: neutrals.N300,
+    subtlest: neutrals.N100,
+    light: neutrals.N100,
+    lightest: neutrals.N50,
+    brand: brand.M500,
+    brandLight: brand.M300,
+    brandLighter: brand.M100,
+    brandContrast: brand.M800,
+    focus: brand.M500,
+    error: danger.D500,
+    success: success.S500,
+    warning: warning.W500,
+    danger: danger.D500
+  },
+  surface: {
+    // Fondo de pantalla = background.default (beige de marca).
+    pageDefault: background.default,
+    pageSubtlest: neutrals.N50,
+    pageSubtle: neutrals.N100,
+    // Tarjetas sobre background.default = card.background.
+    card: card.background,
+    cardBorder: background.default,
+    brand: brand.M500,
+    brandSubtle: brand.M100,
+    brandSubtler: brand.M50,
+    brandSubtlest: brand.M50,
+    success: success.S500,
+    successSubtle: success.S50,
+    warning: warning.W500,
+    warningSubtle: warning.W50,
+    danger: danger.D500,
+    dangerSubtle: danger.D50,
+    overlay: neutrals.N900,
+    modal: neutrals.N0
+  },
+  components: {
+    // Sidebar = superficie oscura de marca (accent). Íconos/textos solo accent.*.
+    // Item activo = CTA1 con texto `cta1Contrast` encima.
+    sidebar: {
+      background: accent.background,
+      hover: "rgba(255, 255, 255, 0.05)",
+      activeBackground: cta1,
+      activeText: cta1Contrast,
+      text: accent.text.secondary,
+      sectionTitle: accent.text.secondary,
+      title: accent.text.primary
+    },
+    button: {
+      primaryBg: brand.M500,
+      primaryText: neutrals.N0,
+      primaryHover: brand.M600,
+      primaryPressed: brand.M700,
+      primaryDisabled: neutrals.N300,
+      secondaryBg: neutrals.N0,
+      secondaryText: brand.M600,
+      secondaryBorder: brand.M500,
+      secondaryHover: brand.M50,
+      ghostText: brand.M600,
+      ghostHover: brand.M50,
+      dangerBg: danger.D500,
+      dangerText: neutrals.N0
+    },
+    input: {
+      bg: neutrals.N0,
+      border: neutrals.N200,
+      borderActive: brand.M500,
+      borderError: danger.D500,
+      text: neutrals.N900,
+      placeholder: neutrals.N400,
+      disabled: neutrals.N100
+    },
+    badge: {
+      bg: "rgba(255, 255, 255, 0.1)",
+      text: neutrals.N0
+    },
+    skeleton: {
+      default: neutrals.N200
+    }
+  }
+};
+
+// src/themes/dark.ts
+var darkColors = {
+  text: {
+    heading: neutrals.N50,
+    body: neutrals.N100,
+    caption: neutrals.N400,
+    brand: brand.M400,
+    subtle: neutrals.N400,
+    subtlest: neutrals.N600,
+    disabled: neutrals.N600,
+    success: success.S400,
+    successMid: success.S500,
+    successContrast: success.S600,
+    warning: warning.W400,
+    warningMid: warning.W500,
+    warningContrast: warning.W600,
+    danger: danger.D400,
+    dangerContrast: danger.D500,
+    linkDefault: brand.M400,
+    linkHover: brand.M300,
+    linkPressed: brand.M200,
+    negative: danger.D400
+  },
+  icon: {
+    default: neutrals.N400,
+    brand: brand.M400,
+    subtle: neutrals.N500,
+    subtlest: neutrals.N600,
+    disabled: neutrals.N600,
+    success: success.S400,
+    successMid: success.S500,
+    successContrast: success.S600,
+    warning: warning.W400,
+    warningMid: warning.W500,
+    warningContrast: warning.W600,
+    danger: danger.D400,
+    dangerContrast: danger.D500,
+    linkDefault: brand.M400,
+    linkHover: brand.M300,
+    linkPressed: brand.M200,
+    negative: danger.D400
+  },
+  border: {
+    default: neutrals.N700,
+    subtle: neutrals.N600,
+    subtlest: neutrals.N800,
+    light: neutrals.N700,
+    lightest: neutrals.N800,
+    brand: brand.M500,
+    brandLight: brand.M400,
+    brandLighter: brand.M300,
+    brandContrast: brand.M200,
+    focus: brand.M400,
+    error: danger.D400,
+    success: success.S400,
+    warning: warning.W400,
+    danger: danger.D400
+  },
+  surface: {
+    pageDefault: neutrals.N950,
+    pageSubtlest: neutrals.N900,
+    pageSubtle: neutrals.N800,
+    card: neutrals.N800,
+    cardBorder: neutrals.N700,
+    brand: brand.M500,
+    brandSubtle: brand.M700,
+    brandSubtler: brand.M800,
+    brandSubtlest: brand.M900,
+    success: success.S400,
+    successSubtle: success.S800,
+    warning: warning.W400,
+    warningSubtle: warning.W800,
+    danger: danger.D400,
+    dangerSubtle: danger.D800,
+    overlay: neutrals.N950,
+    modal: neutrals.N900
+  },
+  components: {
+    // Sidebar = misma superficie de marca en ambos modos (accent). Item activo = CTA1.
+    sidebar: {
+      background: accent.background,
+      hover: "rgba(255, 255, 255, 0.06)",
+      activeBackground: cta1,
+      activeText: cta1Contrast,
+      text: accent.text.secondary,
+      sectionTitle: accent.text.secondary,
+      title: accent.text.primary
+    },
+    button: {
+      primaryBg: brand.M500,
+      primaryText: neutrals.N0,
+      primaryHover: brand.M400,
+      primaryPressed: brand.M300,
+      primaryDisabled: neutrals.N700,
+      secondaryBg: neutrals.N800,
+      secondaryText: brand.M300,
+      secondaryBorder: brand.M500,
+      secondaryHover: neutrals.N700,
+      ghostText: brand.M300,
+      ghostHover: neutrals.N700,
+      dangerBg: danger.D500,
+      dangerText: neutrals.N0
+    },
+    input: {
+      bg: neutrals.N800,
+      border: neutrals.N700,
+      borderActive: brand.M400,
+      borderError: danger.D400,
+      text: neutrals.N100,
+      placeholder: neutrals.N600,
+      disabled: neutrals.N700
+    },
+    badge: {
+      bg: "rgba(255, 255, 255, 0.1)",
+      text: neutrals.N0
+    },
+    skeleton: {
+      default: neutrals.N700
+    }
+  }
+};
+
+// src/shellTokens.ts
+var shellTokens = {
+  background: accent.background,
+  sidebarBackground: accent.background,
+  sidebarText: accent.text.secondary,
+  sidebarHover: "rgba(255, 255, 255, 0.05)",
+  sidebarActiveBackground: cta1,
+  sidebarActiveText: cta1Contrast,
+  sidebarSectionTitle: accent.text.secondary,
+  sidebarTitle: accent.text.primary,
+  contentBackground: background.default,
+  contentBorder: accent.background,
+  borderRadius: 20,
+  itemRadius: 12,
+  outerMargin: 16,
+  contentPadding: 24,
+  sidebarWidth: 256,
+  sidebarCompactWidth: 76
+};
+var darkShellTokens = {
+  background: accent.background,
+  sidebarBackground: accent.background,
+  sidebarText: accent.text.secondary,
+  sidebarHover: "rgba(255, 255, 255, 0.06)",
+  sidebarActiveBackground: cta1,
+  sidebarActiveText: cta1Contrast,
+  sidebarSectionTitle: accent.text.secondary,
+  sidebarTitle: accent.text.primary,
+  contentBackground: "#020617",
+  contentBorder: accent.background,
+  borderRadius: 20,
+  itemRadius: 12,
+  outerMargin: 16,
+  contentPadding: 24,
+  sidebarWidth: 256,
+  sidebarCompactWidth: 76
+};
+
+// src/spacing.ts
+var spacing = {
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 24,
+  xxl: 32
+};
+var space = {
+  space1: 4,
+  space2: 8,
+  space3: 12,
+  space4: 16,
+  space5: 20,
+  space6: 24,
+  space7: 28,
+  space8: 32,
+  space9: 36,
+  space10: 40,
+  space12: 48,
+  space16: 64,
+  space20: 80,
+  space24: 96,
+  space32: 128
+};
+
+// src/texts.ts
+var TextType = {
+  Title: "title",
+  Subtitle: "subtitle",
+  Heading: "heading",
+  Body: "body",
+  BodyMedium: "bodyMedium",
+  BodyBold: "bodyBold",
+  Label: "label",
+  Caption: "caption",
+  CaptionMedium: "captionMedium",
+  Overline: "overline",
+  Placeholder: "placeholder"
+};
+var texts = {
+  title: { fontSize: 28, fontWeight: "700", lineHeight: 34, color: text.default },
+  subtitle: { fontSize: 22, fontWeight: "700", lineHeight: 28, color: text.default },
+  heading: { fontSize: 20, fontWeight: "600", lineHeight: 25, color: text.default },
+  bodyBold: { fontSize: 17, fontWeight: "600", lineHeight: 22, color: text.default },
+  body: { fontSize: 17, fontWeight: "400", lineHeight: 22, color: text.default },
+  bodyMedium: { fontSize: 16, fontWeight: "500", lineHeight: 21, color: text.default },
+  label: { fontSize: 15, fontWeight: "600", lineHeight: 20, color: text.default },
+  caption: { fontSize: 13, fontWeight: "400", lineHeight: 18, color: text.secondary },
+  captionMedium: { fontSize: 13, fontWeight: "500", lineHeight: 18, color: text.secondary },
+  overline: {
+    fontSize: 11,
+    fontWeight: "600",
+    lineHeight: 14,
+    letterSpacing: 0.5,
+    textTransform: "uppercase",
+    color: text.secondary
+  },
+  placeholder: { fontSize: 17, fontWeight: "400", lineHeight: 22, color: text.placeholder }
+};
+
+// src/semanticTokens.ts
+var PALETTE = {
+  ...neutrals,
+  ...brand
+};
+var lightSemantic = {
+  default: {
+    bg: { default: "N0", subtle: "N100" },
+    text: { default: "N950", subtle: "N500", subtlest: "N300" },
+    icon: { default: "M600", subtle: "N500" }
+  },
+  light: {
+    bg: { default: "N200", subtle: "N0" },
+    text: { default: "N950", subtle: "N500", subtlest: "N300" },
+    icon: { default: "N600", subtle: "N500" }
+  },
+  darkness: {
+    bg: { default: "N950", subtle: "N900" },
+    text: { default: "N0", subtle: "N400", subtlest: "N600" },
+    icon: { default: "N0", subtle: "N400" }
+  }
+};
+var darkSemantic = {
+  default: {
+    bg: { default: "N950", subtle: "N900" },
+    text: { default: "N0", subtle: "N400", subtlest: "N600" },
+    icon: { default: "N0", subtle: "N400" }
+  },
+  light: {
+    bg: { default: "N800", subtle: "N950" },
+    text: { default: "N0", subtle: "N400", subtlest: "N600" },
+    icon: { default: "N0", subtle: "N400" }
+  },
+  darkness: {
+    bg: { default: "N950", subtle: "N900" },
+    text: { default: "N0", subtle: "N400", subtlest: "N600" },
+    icon: { default: "N0", subtle: "N400" }
+  }
+};
+function resolveCtx(map) {
+  return {
+    bg: {
+      default: PALETTE[map.bg.default] ?? map.bg.default,
+      subtle: PALETTE[map.bg.subtle] ?? map.bg.subtle
+    },
+    text: {
+      default: PALETTE[map.text.default] ?? map.text.default,
+      subtle: PALETTE[map.text.subtle] ?? map.text.subtle,
+      subtlest: PALETTE[map.text.subtlest] ?? map.text.subtlest
+    },
+    icon: {
+      default: PALETTE[map.icon.default] ?? map.icon.default,
+      subtle: PALETTE[map.icon.subtle] ?? map.icon.subtle
+    }
+  };
+}
+function resolveSemantic(map) {
+  return {
+    default: resolveCtx(map.default),
+    light: resolveCtx(map.light),
+    darkness: resolveCtx(map.darkness)
+  };
+}
+var lightText = { ...lightSemantic.default.text, light: "N0" };
+var darkText = { ...darkSemantic.default.text, light: "N0" };
+function resolveText(map) {
+  return {
+    default: PALETTE[map.default] ?? map.default,
+    subtle: PALETTE[map.subtle] ?? map.subtle,
+    subtlest: PALETTE[map.subtlest] ?? map.subtlest,
+    light: PALETTE[map.light] ?? map.light
+  };
+}
+var lightBackground = {
+  default: lightSemantic.default.bg.default,
+  subtle: lightSemantic.default.bg.subtle,
+  subtlest: lightSemantic.light.bg.default
+};
+var darkBackground = {
+  default: darkSemantic.default.bg.default,
+  subtle: darkSemantic.default.bg.subtle,
+  subtlest: darkSemantic.light.bg.default
+};
+function resolveBackground(map) {
+  return {
+    default: PALETTE[map.default] ?? map.default,
+    subtle: PALETTE[map.subtle] ?? map.subtle,
+    subtlest: PALETTE[map.subtlest] ?? map.subtlest
+  };
+}
+
+// src/layout.ts
+var LayoutColumnSize = /* @__PURE__ */ ((LayoutColumnSize2) => {
+  LayoutColumnSize2["FIT"] = "FIT";
+  LayoutColumnSize2["EXPAND"] = "EXPAND";
+  return LayoutColumnSize2;
+})(LayoutColumnSize || {});
+var LayoutRowSize = /* @__PURE__ */ ((LayoutRowSize2) => {
+  LayoutRowSize2["FIT"] = "FIT";
+  LayoutRowSize2["EXPAND"] = "EXPAND";
+  return LayoutRowSize2;
+})(LayoutRowSize || {});
+
+// src/radius.ts
+var radius = {
+  sm: 8,
+  md: 16,
+  lg: 20
+};
+
+// src/index.ts
+function resolveColors(mode) {
+  return mode === "dark" ? { ...palette, ...darkPalette } : palette;
+}
+function resolveSemanticColors(mode) {
+  return mode === "dark" ? darkColors : lightColors;
+}
+function resolveShellTokens(mode) {
+  const sc = resolveSemanticColors(mode);
+  if (mode === "light") {
+    return {
+      background: sc.components.sidebar.background,
+      sidebarBackground: sc.components.sidebar.background,
+      sidebarText: sc.components.sidebar.text,
+      sidebarHover: sc.components.sidebar.hover,
+      sidebarActiveBackground: sc.components.sidebar.activeBackground,
+      sidebarActiveText: sc.components.sidebar.activeText,
+      sidebarSectionTitle: sc.components.sidebar.sectionTitle,
+      sidebarTitle: sc.components.sidebar.title,
+      contentBackground: sc.surface.pageDefault,
+      contentBorder: sc.components.sidebar.background,
+      borderRadius: 20,
+      itemRadius: 10,
+      outerMargin: 16,
+      contentPadding: 24,
+      sidebarWidth: 256,
+      sidebarCompactWidth: 76
+    };
+  }
+  return {
+    background: sc.components.sidebar.background,
+    sidebarBackground: sc.components.sidebar.background,
+    sidebarText: sc.components.sidebar.text,
+    sidebarHover: sc.components.sidebar.hover,
+    sidebarActiveBackground: sc.components.sidebar.activeBackground,
+    sidebarActiveText: sc.components.sidebar.activeText,
+    sidebarSectionTitle: sc.components.sidebar.sectionTitle,
+    sidebarTitle: sc.components.sidebar.title,
+    contentBackground: sc.surface.card,
+    contentBorder: sc.components.sidebar.background,
+    borderRadius: 20,
+    itemRadius: 10,
+    outerMargin: 16,
+    contentPadding: 24,
+    sidebarWidth: 256,
+    sidebarCompactWidth: 76
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LayoutColumnSize,
+  LayoutRowSize,
+  TextType,
+  accent,
+  appButton,
+  appInput,
+  appInputCard,
+  background,
+  border,
+  brand,
+  card,
+  cta1,
+  cta1Contrast,
+  danger,
+  darkBackground,
+  darkColors,
+  darkPalette,
+  darkSemantic,
+  darkShellTokens,
+  darkText,
+  lightBackground,
+  lightColors,
+  lightSemantic,
+  lightText,
+  neutrals,
+  palette,
+  radius,
+  resolveBackground,
+  resolveColors,
+  resolveSemantic,
+  resolveSemanticColors,
+  resolveShellTokens,
+  resolveText,
+  shellTokens,
+  space,
+  spacing,
+  success,
+  text,
+  texts,
+  warning
+});

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@william-callao/antonella-theme",
+  "version": "1.0.0",
+  "description": "Theme de Antonella: colores, tipografía, spacing y modos claro/oscuro.",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "react-native": "dist/index.js",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=19.0.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit"
+  }
+}