/** * Soft UI sobre el marco de Twenty. * * Twenty publica su tema entero como custom properties CSS —995 en claro, 994 en * oscuro— declaradas sobre `.light` y `.dark` en el ``. Esta hoja redefine las que * llevan el aspecto y deja intactas las de estructura (espaciado, tamaños, animación). * * Por eso **no se toca ni una línea del código de Twenty**: no hay fork, no hay que * recompilar su frontend y quitar el archivo devuelve la interfaz original. Sobrevive a * una actualización de Twenty mientras no renombren sus variables. * * El selector es `html.light` en vez de `.light` a propósito. La clase vive en el * elemento raíz, así que `html.light` (0,1,1) gana a la declaración original (0,1,0) sin * depender de en qué orden acabe cargándose esta hoja entre las 42 de la aplicación. Sin * eso habría que recurrir a `!important` en cada línea. * * Los valores son los mismos que usa la pantalla de Atención, en * `apps/twenty-app/src/front-components/shared/theme/`. Que las dos superficies compartan * paleta es el objetivo entero: el asesor pasa de una a otra cincuenta veces por turno. */ /* ---------------------------------------------------------------- claro -- */ html.light { /* Superficies. Twenty parte de blanco puro; aquí la base es el hielo del sistema, que es lo que permite que una pieza extruida se lea como volumen y no como un recorte. */ --t-background-primary: #f4f8fc; --t-background-secondary: #eff4fa; --t-background-tertiary: #e8eef7; --t-background-quaternary: #e2e8f2; --t-background-danger: #ffe4e6; --t-background-transparent-lighter: #1e293b06; --t-background-transparent-light: #1e293b0d; --t-background-transparent-medium: #1e293b1a; --t-background-transparent-strong: #1e293b2b; /* Bordes. Se apagan a propósito: en este lenguaje la separación la hace la luz, y un borde fuerte sobre una superficie extruida la aplana. */ --t-border-color-strong: #c3cddd; --t-border-color-medium: #d2dae8; --t-border-color-light: #e6ecf5; /* Sombras duales: una luz fría arriba a la izquierda, una sombra azulada abajo a la derecha. Es lo único que convierte un rectángulo en un volumen. */ --t-box-shadow-light: -6px -6px 12px 0 rgba(255, 255, 255, 0.8), 6px 6px 14px 0 rgba(195, 206, 222, 0.5); --t-box-shadow-strong: -10px -10px 24px 0 rgba(255, 255, 255, 0.95), 12px 14px 28px 0 rgba(180, 195, 215, 0.75); --t-box-shadow-underline: 0 1px 0 0 rgba(30, 41, 59, 0.32); /* Texto. `tertiary` y `light` suben desde el `#999` y el `#b3b3b3` de Twenty: sobre estas superficies daban 2.2:1 y desaparecían. `extra-light` toma el mismo valor que `light` a propósito. La rampa de Twenty tiene un peldaño más, pero por debajo de este tono el texto deja de leerse sobre el fondo más oscuro del tema, y no hay forma de auditar en qué sitios lo usa para texto real y en cuáles para adorno. En una herramienta de ocho horas gana la legibilidad; el peldaño perdido no lo echa nadie de menos. */ --t-font-color-primary: #1e293b; --t-font-color-secondary: #475569; --t-font-color-tertiary: #556377; --t-font-color-light: #5a697d; --t-font-color-extra-light: #5a697d; /* Acento. Se conserva la forma de la rampa de Twenty —del tinte más claro al tono más oscuro— y se cambia el matiz al azul del sistema. */ --t-accent-accent1: #f8fbff; --t-accent-accent2: #f1f6ff; --t-accent-accent3: #e8f0fe; --t-accent-accent4: #dbe8fd; --t-accent-accent5: #c7dbfc; --t-accent-accent6: #aecbfa; --t-accent-accent7: #8fb5f8; --t-accent-accent8: #619bf6; --t-accent-accent9: #2563eb; --t-accent-accent10: #1d4ed8; --t-accent-accent11: #1e40af; --t-accent-accent12: #172554; --t-accent-primary: #c7dbfc; --t-accent-secondary: #c7dbfc; --t-accent-tertiary: #e8f0fe; --t-accent-quaternary: #f1f6ff; --t-accent-accent3570: #619bf6; --t-accent-accent4060: #619bf6; --t-border-color-blue: #aecbfa; --t-background-transparent-blue: #2563eb1a; } /* --------------------------------------------------------------- oscuro -- */ html.dark { /* No es el claro invertido. En penumbra no hay luz que rebote, así que la profundidad la hacen un filo iluminado arriba y oclusión ambiental debajo. */ --t-background-primary: #182234; --t-background-secondary: #1e293b; --t-background-tertiary: #243044; --t-background-quaternary: #2c394f; --t-background-danger: #43121f; --t-background-transparent-lighter: #ffffff08; --t-background-transparent-light: #ffffff0f; --t-background-transparent-medium: #ffffff1a; --t-background-transparent-strong: #ffffff26; --t-border-color-strong: #3b4a63; --t-border-color-medium: #2c394f; --t-border-color-light: #222d42; --t-box-shadow-light: 0 6px 14px -2px rgba(0, 0, 0, 0.4), 0 2px 6px -1px rgba(0, 0, 0, 0.28); --t-box-shadow-strong: 0 16px 36px 0 rgba(0, 0, 0, 0.55), -1px -1px 0 0 rgba(255, 255, 255, 0.08); --t-box-shadow-underline: 0 1px 0 0 rgba(0, 0, 0, 0.5); /* Ni `#000` ni `#fff`: el blanco puro sobre fondo oscuro deja estela al desplazarse y el negro puro hace vibrar los bordes en OLED. */ --t-font-color-primary: #f1f5f9; --t-font-color-secondary: #a8b6c8; --t-font-color-tertiary: #95a5ba; --t-font-color-light: #98a5b6; --t-font-color-extra-light: #98a5b6; --t-accent-accent1: #101827; --t-accent-accent2: #131c2e; --t-accent-accent3: #172038; --t-accent-accent4: #1c2e4d; --t-accent-accent5: #1e3a8a; --t-accent-accent6: #1e40af; --t-accent-accent7: #1d4ed8; --t-accent-accent8: #2563eb; --t-accent-accent9: #3b82f6; --t-accent-accent10: #60a5fa; --t-accent-accent11: #93c5fd; --t-accent-accent12: #dbeafe; --t-accent-primary: #1e3a8a; --t-accent-secondary: #1e3a8a; --t-accent-tertiary: #1c2e4d; --t-accent-quaternary: #172038; --t-accent-accent3570: #3b82f6; --t-accent-accent4060: #3b82f6; --t-border-color-blue: #2563eb; --t-background-transparent-blue: #60a5fa26; } /* ---------------------------------------------------------------- forma -- */ /* * Radios. Los ángulos rectos cortan la caída de la luz: una superficie extruida * con esquina viva se lee como un recorte y no como un volumen. Se sube la * curvatura de las capas grandes y se dejan quietas las pequeñas, porque un chip * de 20 px con 16 px de radio ya es una pastilla. */ html.light, html.dark { --t-border-radius-sm: 6px; --t-border-radius-md: 12px; --t-border-radius-lg: 18px; --t-border-radius-xl: 22px; --t-font-family: 'Plus Jakarta Sans', Inter, sans-serif; }