/* ============================================================================ ios-design-tokens.css -- Sistema de diseno iOS 18/26 ("Liquid Glass") ---------------------------------------------------------------------------- PAQUETE PORTABLE: este archivo no sabe nada del proyecto que lo usa. No contiene ni un solo selector de componente ni una sola referencia a JJOL/CFE. Para llevarlo a otro repositorio basta con copiar: ios-design-tokens.css (este archivo) ios-components.css (los componentes que consumen estos tokens) vendor/inter/ (la tipografia, servida local, sin CDN) ...y sobreescribir el bloque "MARCA" de abajo con el color del proyecto. Ver README-design-system.md para el procedimiento completo. Fuentes de los valores: Apple Human Interface Guidelines (tipografia, colores de sistema claro/oscuro, materiales, radios, area de toque de 44pt). Ningun valor es inventado ni "inspirado": son las especificaciones publicas. Convencion de unidades: pt de iOS == px de CSS a 1x. La escala tipografica se expresa en rem (1rem = 16px por defecto) para que respete el tamano de letra que el usuario haya configurado en el navegador -- es el equivalente web de Dynamic Type. Todo lo demas (espaciado, radios) va en px, igual que iOS. ========================================================================== */ @import url("vendor/inter/inter.css"); :root { /* ========================================================================== 1. TIPOGRAFIA -------------------------------------------------------------------------- SF Pro no se puede redistribuir (licencia de Apple), asi que la pila empieza por -apple-system: en un dispositivo Apple real se rendea SF Pro autentica, y en Windows/Android cae a Inter, que es el sustituto metricamente mas cercano. Nunca una serif ni la sans generica del sistema. ====================================================================== */ --ios-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --ios-font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Escala tipografica de las HIG (tamano / interlineado), en el tamano "Large" de Dynamic Type, que es el default de iOS. */ --ios-large-title: 2.125rem; /* 34pt */ --ios-large-title-line: 2.5625rem; /* 41pt */ --ios-title-1: 1.75rem; /* 28pt */ --ios-title-1-line: 2.125rem; /* 34pt */ --ios-title-2: 1.375rem; /* 22pt */ --ios-title-2-line: 1.75rem; /* 28pt */ --ios-title-3: 1.25rem; /* 20pt */ --ios-title-3-line: 1.5625rem; /* 25pt */ --ios-headline: 1.0625rem; /* 17pt semibold */ --ios-headline-line: 1.375rem; /* 22pt */ --ios-body: 1.0625rem; /* 17pt */ --ios-body-line: 1.375rem; /* 22pt */ --ios-callout: 1rem; /* 16pt */ --ios-callout-line: 1.3125rem; /* 21pt */ --ios-subheadline: 0.9375rem; /* 15pt */ --ios-subheadline-line: 1.25rem; /* 20pt */ --ios-footnote: 0.8125rem; /* 13pt */ --ios-footnote-line: 1.125rem; /* 18pt */ --ios-caption-1: 0.75rem; /* 12pt */ --ios-caption-1-line: 1rem; /* 16pt */ --ios-caption-2: 0.6875rem; /* 11pt */ --ios-caption-2-line: 0.8125rem; /* 13pt */ /* Tracking. De Body para abajo son los valores publicados por Apple para SF Pro Text (negativos, que es lo que aprieta el texto de iOS). De Title 3 para arriba se usa el tracking optico NEGATIVO de SF Pro Display: es lo que hace que un titulo grande de iOS se vea compacto y no espaciado. */ --ios-tracking-large-title: -0.026em; --ios-tracking-title-1: -0.022em; --ios-tracking-title-2: -0.019em; --ios-tracking-title-3: -0.015em; --ios-tracking-headline: -0.025em; --ios-tracking-body: -0.025em; /* -0.43pt sobre 17pt */ --ios-tracking-callout: -0.019em; /* -0.31pt sobre 16pt */ --ios-tracking-subheadline: -0.015em; /* -0.23pt sobre 15pt */ --ios-tracking-footnote: -0.006em; /* -0.08pt sobre 13pt */ --ios-tracking-caption-1: 0em; --ios-tracking-caption-2: 0.006em; /* +0.06pt sobre 11pt */ --ios-weight-regular: 400; --ios-weight-medium: 500; --ios-weight-semibold: 600; --ios-weight-bold: 700; /* ========================================================================== 2. COLOR -- sistema dinamico de iOS, valores del modo CLARO. El bloque de modo oscuro esta mas abajo y solo redefine estos mismos nombres, nunca inventa tokens nuevos. ====================================================================== */ /* Fondos */ --ios-bg: #FFFFFF; /* systemBackground */ --ios-bg-secondary: #F2F2F7; /* secondarySystemBackground */ --ios-bg-tertiary: #FFFFFF; /* tertiarySystemBackground */ /* Fondos agrupados: listas tipo Ajustes. Ojo, en claro se INVIERTEN respecto a los de arriba (el lienzo es gris y las filas blancas). */ --ios-bg-grouped: #F2F2F7; --ios-bg-grouped-secondary: #FFFFFF; --ios-bg-grouped-tertiary: #F2F2F7; /* Texto (labels) */ --ios-label: #000000; --ios-label-secondary: rgba(60, 60, 67, 0.60); --ios-label-tertiary: rgba(60, 60, 67, 0.30); --ios-label-quaternary: rgba(60, 60, 67, 0.18); /* Separadores */ --ios-separator: rgba(60, 60, 67, 0.29); --ios-separator-opaque: #C6C6C8; /* Rellenos (fondos de controles no interactivos: chips, barras, campos) */ --ios-fill: rgba(120, 120, 128, 0.20); --ios-fill-secondary: rgba(120, 120, 128, 0.16); --ios-fill-tertiary: rgba(118, 118, 128, 0.12); --ios-fill-quaternary: rgba(116, 116, 128, 0.08); /* Colores de sistema */ --ios-blue: #007AFF; --ios-green: #34C759; --ios-red: #FF3B30; --ios-orange: #FF9500; --ios-yellow: #FFCC00; --ios-purple: #AF52DE; --ios-pink: #FF2D55; --ios-teal: #30B0C7; --ios-indigo: #5856D6; /* Escala de grises de sistema */ --ios-gray: #8E8E93; --ios-gray-2: #AEAEB2; --ios-gray-3: #C7C7CC; --ios-gray-4: #D1D1D6; --ios-gray-5: #E5E5EA; --ios-gray-6: #F2F2F7; /* ---- MARCA ------------------------------------------------------------- LO UNICO QUE SE TOCA AL PORTAR ESTE PAQUETE A OTRO PROYECTO. Por defecto el acento es el azul de sistema de iOS. Si el proyecto ya tiene un color de marca, se redefine SOLO --ios-accent (y su variante oscura y su tinte); todo lo demas -- grises, separadores, superficies, materiales -- se queda identico a iOS, que es lo que hace que se sienta nativo. ---------------------------------------------------------------------- */ --ios-accent: var(--ios-blue); --ios-accent-press: #0062CC; /* accent al 80% de luz */ --ios-accent-tint: rgba(0, 122, 255, 0.14); /* fondo de boton tinted */ --ios-accent-ink: #FFFFFF; /* texto sobre el acento */ /* Semanticos: la misma regla en todos los proyectos. */ --ios-success: var(--ios-green); --ios-warning: var(--ios-orange); --ios-danger: var(--ios-red); --ios-info: var(--ios-accent); /* ========================================================================== 3. MATERIALES (Liquid Glass) -------------------------------------------------------------------------- El vidrio de iOS es blur + saturacion, no transparencia a secas: sin el saturate() el contenido de atras se ve lavado y grisaceo. Los tres niveles son los materiales de UIKit (thin / regular / thick). ====================================================================== */ --ios-blur: 20px; --ios-blur-thin: 12px; --ios-blur-thick: 30px; --ios-saturate: 180%; /* Liquid Glass se comporta como una LENTE, no como un vidrio esmerilado: no solo difumina, tambien aclara y satura lo que tiene detras. Ese brillo es lo que separa el material de iOS 26 del de iOS 18. */ --ios-brightness: 1.08; --ios-brightness-oscuro: 1.35; --ios-material-thin: rgba(255, 255, 255, 0.55); --ios-material-regular: rgba(255, 255, 255, 0.70); --ios-material-thick: rgba(255, 255, 255, 0.88); /* Borde de un elemento de vidrio: 1px de luz, nunca una linea dura. */ --ios-glass-border: rgba(255, 255, 255, 0.55); --ios-glass-edge: rgba(0, 0, 0, 0.06); /* Brillo especular del canto. En un cristal real la luz entra por el borde superior y se derrama por el inferior; se reproduce con dos insets, no con un degradado de fondo (un degradado taparia el contenido refractado). */ --ios-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 -1px 0 rgba(255, 255, 255, 0.18), inset 1px 0 0 rgba(255, 255, 255, 0.14), inset -1px 0 0 rgba(255, 255, 255, 0.14); /* Sombra de un elemento flotante: amplia, difusa y con un contacto corto debajo, que es lo que lo despega del contenido sin ensuciarlo. */ --ios-glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 28px rgba(0, 0, 0, 0.12); /* Velo tenue que se pone ENCIMA del contenido refractado para que el texto de la barra mantenga contraste sin volver opaco el material. */ --ios-glass-veil: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.06)); /* ========================================================================== 4. FORMA Y ESPACIO ====================================================================== */ /* Grid de 8pt (con medios pasos de 4pt). */ --ios-space-1: 4px; --ios-space-2: 8px; --ios-space-3: 12px; --ios-space-4: 16px; --ios-space-5: 20px; --ios-space-6: 24px; --ios-space-7: 32px; --ios-space-8: 40px; --ios-space-9: 48px; /* Margen lateral estandar de una pantalla de iOS. */ --ios-margin: 16px; --ios-margin-wide: 20px; /* Radios. iOS usa esquinas continuas (superelipse/squircle), no arcos de circulo: el borde entra en la curva de forma gradual. En CSS eso solo existe hoy con `corner-shape: superellipse()`, que se aplica mas abajo con @supports; donde no exista, el border-radius normal es la aproximacion. */ /* En iOS 26 la forma por defecto de un control es la CAPSULA, no el rectangulo redondeado de 10px: botones, campos, chips y pildoras de barra son completamente redondos en los extremos. Los contenedores grandes (tarjetas, hojas) suben de radio para acompanar. */ --ios-radius-button: 999px; --ios-radius-control: 14px; --ios-radius-card: 20px; --ios-radius-modal: 26px; --ios-radius-sheet: 32px; --ios-radius-full: 999px; --ios-superellipse: superellipse(4); /* squircle de Apple ~ n=4 */ /* Geometria concentrica: cuando una forma vive DENTRO de otra, su radio tiene que ser el del padre menos la separacion, o las esquinas dejan de ser paralelas y se ve un "corte". Es una regla explicita de las HIG de iOS 26; aqui se expresa como los dos pasos que realmente se usan. */ --ios-inset-control: 3px; /* separacion tipica de un segmento en su barra */ --ios-radius-anidado: calc(var(--ios-radius-control) - var(--ios-inset-control)); /* Area de toque minima de las HIG. Todo control interactivo la respeta. */ --ios-hit-target: 44px; /* Sombras: suaves y difusas. Un elemento flotante de iOS se separa del fondo por el blur del material, no por una sombra marcada. */ --ios-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --ios-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); --ios-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.14); --ios-shadow-sheet: 0 -8px 40px rgba(0, 0, 0, 0.18); /* ========================================================================== 5. MOVIMIENTO -------------------------------------------------------------------------- iOS no anima con curvas lineales: los modales y los controles rebotan ligeramente al llegar (spring). El resto usa una ease-out estandar. ====================================================================== */ --ios-ease: cubic-bezier(0.25, 0.1, 0.25, 1); --ios-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ios-ease-spring: cubic-bezier(0.34, 1.42, 0.64, 1); --ios-dur-fast: 180ms; --ios-dur-base: 280ms; --ios-dur-slow: 420ms; /* ========================================================================== 6. SAFE AREAS -- respetadas siempre, aunque en escritorio valgan 0. ====================================================================== */ --ios-safe-top: env(safe-area-inset-top, 0px); --ios-safe-right: env(safe-area-inset-right, 0px); --ios-safe-bottom: env(safe-area-inset-bottom, 0px); --ios-safe-left: env(safe-area-inset-left, 0px); /* Alturas de las barras del sistema. */ --ios-navbar-height: 44px; --ios-tabbar-height: 49px; } /* ============================================================================ MODO OSCURO ---------------------------------------------------------------------------- Doble mecanismo, a proposito: `prefers-color-scheme` para seguir al sistema operativo, y `[data-ios-theme]` para que la app pueda forzar uno. El atributo gana sobre el sistema, que es lo que espera un usuario que aprieta un switch. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-ios-theme="light"]) { --ios-bg: #000000; --ios-bg-secondary: #1C1C1E; --ios-bg-tertiary: #2C2C2E; --ios-bg-grouped: #000000; --ios-bg-grouped-secondary: #1C1C1E; --ios-bg-grouped-tertiary: #2C2C2E; --ios-label: #FFFFFF; --ios-label-secondary: rgba(235, 235, 245, 0.60); --ios-label-tertiary: rgba(235, 235, 245, 0.30); --ios-label-quaternary: rgba(235, 235, 245, 0.16); --ios-separator: rgba(84, 84, 88, 0.65); --ios-separator-opaque: #38383A; --ios-fill: rgba(120, 120, 128, 0.36); --ios-fill-secondary: rgba(120, 120, 128, 0.32); --ios-fill-tertiary: rgba(118, 118, 128, 0.24); --ios-fill-quaternary: rgba(116, 116, 128, 0.18); --ios-blue: #0A84FF; --ios-green: #30D158; --ios-red: #FF453A; --ios-orange: #FF9F0A; --ios-yellow: #FFD60A; --ios-purple: #BF5AF2; --ios-pink: #FF375F; --ios-teal: #64D2FF; --ios-indigo: #5E5CE6; --ios-gray: #8E8E93; --ios-gray-2: #636366; --ios-gray-3: #48484A; --ios-gray-4: #3A3A3C; --ios-gray-5: #2C2C2E; --ios-gray-6: #1C1C1E; --ios-accent-press: #4DA2FF; --ios-accent-tint: rgba(10, 132, 255, 0.24); --ios-material-thin: rgba(28, 28, 30, 0.55); --ios-material-regular: rgba(28, 28, 30, 0.68); --ios-material-thick: rgba(20, 20, 22, 0.86); --ios-glass-border: rgba(255, 255, 255, 0.16); --ios-glass-edge: rgba(0, 0, 0, 0.5); /* En oscuro el canto brilla menos y el velo se invierte: aclarar el fondo ahi arruinaria el negro del sistema. */ --ios-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.20), inset 0 -1px 0 rgba(255, 255, 255, 0.06), inset 1px 0 0 rgba(255, 255, 255, 0.05), inset -1px 0 0 rgba(255, 255, 255, 0.05); --ios-glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 28px rgba(0, 0, 0, 0.55); --ios-glass-veil: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); --ios-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --ios-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --ios-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6); --ios-shadow-sheet: 0 -8px 40px rgba(0, 0, 0, 0.7); } } /* Mismo bloque, forzado por atributo. Se repite en vez de factorizarse porque las custom properties no se pueden "heredar" de un @media a un selector. */ :root[data-ios-theme="dark"] { --ios-bg: #000000; --ios-bg-secondary: #1C1C1E; --ios-bg-tertiary: #2C2C2E; --ios-bg-grouped: #000000; --ios-bg-grouped-secondary: #1C1C1E; --ios-bg-grouped-tertiary: #2C2C2E; --ios-label: #FFFFFF; --ios-label-secondary: rgba(235, 235, 245, 0.60); --ios-label-tertiary: rgba(235, 235, 245, 0.30); --ios-label-quaternary: rgba(235, 235, 245, 0.16); --ios-separator: rgba(84, 84, 88, 0.65); --ios-separator-opaque: #38383A; --ios-fill: rgba(120, 120, 128, 0.36); --ios-fill-secondary: rgba(120, 120, 128, 0.32); --ios-fill-tertiary: rgba(118, 118, 128, 0.24); --ios-fill-quaternary: rgba(116, 116, 128, 0.18); --ios-blue: #0A84FF; --ios-green: #30D158; --ios-red: #FF453A; --ios-orange: #FF9F0A; --ios-yellow: #FFD60A; --ios-purple: #BF5AF2; --ios-pink: #FF375F; --ios-teal: #64D2FF; --ios-indigo: #5E5CE6; --ios-gray: #8E8E93; --ios-gray-2: #636366; --ios-gray-3: #48484A; --ios-gray-4: #3A3A3C; --ios-gray-5: #2C2C2E; --ios-gray-6: #1C1C1E; --ios-accent-press: #4DA2FF; --ios-accent-tint: rgba(10, 132, 255, 0.24); --ios-material-thin: rgba(28, 28, 30, 0.55); --ios-material-regular: rgba(28, 28, 30, 0.68); --ios-material-thick: rgba(20, 20, 22, 0.86); --ios-glass-border: rgba(255, 255, 255, 0.16); --ios-glass-edge: rgba(0, 0, 0, 0.5); --ios-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.20), inset 0 -1px 0 rgba(255, 255, 255, 0.06), inset 1px 0 0 rgba(255, 255, 255, 0.05), inset -1px 0 0 rgba(255, 255, 255, 0.05); --ios-glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 28px rgba(0, 0, 0, 0.55); --ios-glass-veil: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); --ios-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --ios-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --ios-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6); --ios-shadow-sheet: 0 -8px 40px rgba(0, 0, 0, 0.7); } /* ============================================================================ CLASES UTILITARIAS DE TIPOGRAFIA Cada nivel de la escala aplica su terna completa: tamano, interlineado y tracking. Nunca se usa un tamano suelto sin su interlineado. ========================================================================== */ .ios-large-title { font-family: var(--ios-font-display); font-size: var(--ios-large-title); line-height: var(--ios-large-title-line); letter-spacing: var(--ios-tracking-large-title); font-weight: var(--ios-weight-bold); } .ios-title-1 { font-family: var(--ios-font-display); font-size: var(--ios-title-1); line-height: var(--ios-title-1-line); letter-spacing: var(--ios-tracking-title-1); font-weight: var(--ios-weight-bold); } .ios-title-2 { font-family: var(--ios-font-display); font-size: var(--ios-title-2); line-height: var(--ios-title-2-line); letter-spacing: var(--ios-tracking-title-2); font-weight: var(--ios-weight-semibold); } .ios-title-3 { font-family: var(--ios-font-display); font-size: var(--ios-title-3); line-height: var(--ios-title-3-line); letter-spacing: var(--ios-tracking-title-3); font-weight: var(--ios-weight-semibold); } .ios-headline { font-family: var(--ios-font-text); font-size: var(--ios-headline); line-height: var(--ios-headline-line); letter-spacing: var(--ios-tracking-headline); font-weight: var(--ios-weight-semibold); } .ios-body { font-family: var(--ios-font-text); font-size: var(--ios-body); line-height: var(--ios-body-line); letter-spacing: var(--ios-tracking-body); font-weight: var(--ios-weight-regular); } .ios-callout { font-family: var(--ios-font-text); font-size: var(--ios-callout); line-height: var(--ios-callout-line); letter-spacing: var(--ios-tracking-callout); } .ios-subheadline { font-family: var(--ios-font-text); font-size: var(--ios-subheadline); line-height: var(--ios-subheadline-line); letter-spacing: var(--ios-tracking-subheadline); } .ios-footnote { font-family: var(--ios-font-text); font-size: var(--ios-footnote); line-height: var(--ios-footnote-line); letter-spacing: var(--ios-tracking-footnote); } .ios-caption-1 { font-family: var(--ios-font-text); font-size: var(--ios-caption-1); line-height: var(--ios-caption-1-line); letter-spacing: var(--ios-tracking-caption-1); } .ios-caption-2 { font-family: var(--ios-font-text); font-size: var(--ios-caption-2); line-height: var(--ios-caption-2-line); letter-spacing: var(--ios-tracking-caption-2); } /* Cualquier cifra que se actualice en vivo (dinero, contadores, relojes, estadisticas) tiene que usar cifras tabulares o "baila" al cambiar. */ .ios-tabular { font-variant-numeric: tabular-nums; } /* ============================================================================ ESQUINAS CONTINUAS (squircle) Progressive enhancement: donde el navegador soporte corner-shape se usa la superelipse real de Apple; donde no, queda el border-radius normal. ========================================================================== */ @supports (corner-shape: superellipse(4)) { .ios-squircle, .ios-btn, .ios-card, .ios-sheet, .ios-segmented, .ios-list { corner-shape: var(--ios-superellipse); } } /* ============================================================================ MOVIMIENTO REDUCIDO -- obligatorio: las animaciones spring de iOS son justamente las que marean a quien activa esta preferencia. ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }