/* ============================================================================= paletas.css — los CUATRO slots del generador, y nada mas ============================================================================= ng-template define 7 anclas de color. Solo header / primary / secondary / tertiary son slots reemplazables por proyecto. success, warning y error son vocabulario semantico de estado y NO se tocan: en una bandeja de atencion son carga util (entregado / ventana por vencer / fallo), no decoracion. Por eso ninguna paleta usa verde, naranja ni rojo de marca: competirian con los tres estados que el producto necesita leer de un golpe. La pieza de Angular de la que sale la paleta por default tiene un extremo calido (#a23b3c / #c74953) que quedo AFUERA por exactamente ese motivo: cae al lado de --app-error (#c62828). Los derivados -light / -container / -dark NO estan escritos a ojo: salen de la misma cadena del template -light = mix(white, color, 82%) -container = mix(white, color, 90%) -dark = mix(black, color, 15%) --app-on-primary / -secondary / -tertiary son BLANCO y son constantes del contrato, asi que cada slot esta elegido en un tono que alcanza 4.5:1 contra blanco. El valor de contraste real va anotado en cada linea. --app-on-header se calcula: se usa el que mas contrasta con el header. Se enlaza DESPUES de tokens.css. Conmuta por atributo data-paleta en . ============================================================================= */ /* --- Angular (default) — De la pieza de Angular 19: magenta de la banda, violeta del logo y rosa del degradado. --- */ :root { --app-header: #b848b4; /* on-header #000000 */ --app-on-header: #000000; --app-primary: #8739e4; /* 5.62:1 contra blanco */ --app-secondary: #c24c81; /* 4.52:1 contra blanco */ --app-tertiary: #994299; /* 5.84:1 contra blanco */ --app-primary-light: #e9dbfa; --app-primary-container: #f3ebfc; --app-primary-dark: #7330c2; --app-secondary-light: #f4dfe8; --app-secondary-container: #f9edf2; --app-secondary-dark: #a5416e; --app-tertiary-light: #eddded; --app-tertiary-container: #f5ecf5; --app-tertiary-dark: #823882; } [data-theme='dark'] { --theme-sidenav-active-bg: #8739e4; --theme-sidenav-subitem-bg: #3d1a67; --theme-sidenav-subitem-hover: #512289; } /* --- Azul — Default del generador de ng-template, byte por byte. --- */ [data-paleta='azul'] { --app-header: #1976d2; /* on-header #ffffff */ --app-on-header: #ffffff; --app-primary: #1976d2; /* 4.60:1 contra blanco */ --app-secondary: #00897b; /* 4.32:1 contra blanco */ --app-tertiary: #5e35b1; /* 8.02:1 contra blanco */ --app-primary-light: #d6e6f7; --app-primary-container: #e8f1fb; --app-primary-dark: #1564b3; --app-secondary-light: #d1eae7; --app-secondary-container: #e6f3f2; --app-secondary-dark: #007469; --app-tertiary-light: #e2dbf1; --app-tertiary-container: #efebf7; --app-tertiary-dark: #502d96; } [data-theme='dark'][data-paleta='azul'] { --theme-sidenav-active-bg: #1976d2; --theme-sidenav-subitem-bg: #0b355e; --theme-sidenav-subitem-hover: #0f477e; } /* --- Indigo — Mas frio y mas grave que el default. --- */ [data-paleta='indigo'] { --app-header: #303f9f; /* on-header #ffffff */ --app-on-header: #ffffff; --app-primary: #303f9f; /* 8.98:1 contra blanco */ --app-secondary: #00838f; /* 4.52:1 contra blanco */ --app-tertiary: #5e35b1; /* 8.02:1 contra blanco */ --app-primary-light: #dadcee; --app-primary-container: #eaecf5; --app-primary-dark: #293687; --app-secondary-light: #d1e9eb; --app-secondary-container: #e6f3f4; --app-secondary-dark: #006f7a; --app-tertiary-light: #e2dbf1; --app-tertiary-container: #efebf7; --app-tertiary-dark: #502d96; } [data-theme='dark'][data-paleta='indigo'] { --theme-sidenav-active-bg: #303f9f; --theme-sidenav-subitem-bg: #161c48; --theme-sidenav-subitem-hover: #1d265f; } /* --- Violeta — Registro de producto, lejos del vocabulario de estado. --- */ [data-paleta='violeta'] { --app-header: #6a1b9a; /* on-header #ffffff */ --app-on-header: #ffffff; --app-primary: #6a1b9a; /* 9.39:1 contra blanco */ --app-secondary: #00838f; /* 4.52:1 contra blanco */ --app-tertiary: #ad1457; /* 6.97:1 contra blanco */ --app-primary-light: #e4d6ed; --app-primary-container: #f0e8f5; --app-primary-dark: #5a1783; --app-secondary-light: #d1e9eb; --app-secondary-container: #e6f3f4; --app-secondary-dark: #006f7a; --app-tertiary-light: #f0d5e1; --app-tertiary-container: #f7e8ee; --app-tertiary-dark: #93114a; } [data-theme='dark'][data-paleta='violeta'] { --theme-sidenav-active-bg: #6a1b9a; --theme-sidenav-subitem-bg: #300c45; --theme-sidenav-subitem-hover: #40105c; } /* --- Cian — Header claro de lectura, secundario neutro. --- */ [data-paleta='cian'] { --app-header: #00838f; /* on-header #000000 */ --app-on-header: #000000; --app-primary: #00838f; /* 4.52:1 contra blanco */ --app-secondary: #455a64; /* 7.24:1 contra blanco */ --app-tertiary: #5e35b1; /* 8.02:1 contra blanco */ --app-primary-light: #d1e9eb; --app-primary-container: #e6f3f4; --app-primary-dark: #006f7a; --app-secondary-light: #dee1e3; --app-secondary-container: #eceff0; --app-secondary-dark: #3b4d55; --app-tertiary-light: #e2dbf1; --app-tertiary-container: #efebf7; --app-tertiary-dark: #502d96; } [data-theme='dark'][data-paleta='cian'] { --theme-sidenav-active-bg: #00838f; --theme-sidenav-subitem-bg: #003b40; --theme-sidenav-subitem-hover: #004f56; } /* --- Grafito — Maxima sobriedad: el color queda para el estado. --- */ [data-paleta='grafito'] { --app-header: #37474f; /* on-header #ffffff */ --app-on-header: #ffffff; --app-primary: #37474f; /* 9.65:1 contra blanco */ --app-secondary: #00695c; /* 6.61:1 contra blanco */ --app-tertiary: #4527a0; /* 10.24:1 contra blanco */ --app-primary-light: #dbdedf; --app-primary-container: #ebeded; --app-primary-dark: #2f3c43; --app-secondary-light: #d1e4e2; --app-secondary-container: #e6f0ef; --app-secondary-dark: #00594e; --app-tertiary-light: #ded8ee; --app-tertiary-container: #ece9f6; --app-tertiary-dark: #3b2188; } [data-theme='dark'][data-paleta='grafito'] { --theme-sidenav-active-bg: #37474f; --theme-sidenav-subitem-bg: #192024; --theme-sidenav-subitem-hover: #212b2f; } /* --- Rosa — El unico con marca calida; ojo con la cercania a error. --- */ [data-paleta='rosa'] { --app-header: #ad1457; /* on-header #ffffff */ --app-on-header: #ffffff; --app-primary: #ad1457; /* 6.97:1 contra blanco */ --app-secondary: #00695c; /* 6.61:1 contra blanco */ --app-tertiary: #4527a0; /* 10.24:1 contra blanco */ --app-primary-light: #f0d5e1; --app-primary-container: #f7e8ee; --app-primary-dark: #93114a; --app-secondary-light: #d1e4e2; --app-secondary-container: #e6f0ef; --app-secondary-dark: #00594e; --app-tertiary-light: #ded8ee; --app-tertiary-container: #ece9f6; --app-tertiary-dark: #3b2188; } [data-theme='dark'][data-paleta='rosa'] { --theme-sidenav-active-bg: #ad1457; --theme-sidenav-subitem-bg: #4e0927; --theme-sidenav-subitem-hover: #680c34; } /* --- Salvia — De la tira de amarillos y verdes que aporto el CEO. NO puede ser default: sus slots caen a 21-24 grados de matiz de success y a 22 de warning, y en una bandeja eso le come el canal que dice si el mensaje salio. Queda elegible para quien acepte ese costo. --- */ [data-paleta='salvia'] { --app-header: #53793e; /* on-header #ffffff */ --app-on-header: #ffffff; --app-primary: #827732; /* 4.53:1 contra blanco */ --app-secondary: #6b7b64; /* 4.52:1 contra blanco */ --app-tertiary: #7c793b; /* 4.51:1 contra blanco */ --app-primary-light: #e9e7da; --app-primary-container: #f3f1eb; --app-primary-dark: #6f652b; --app-secondary-light: #e4e7e3; --app-secondary-container: #f0f2f0; --app-secondary-dark: #5b6955; --app-tertiary-light: #e7e7dc; --app-tertiary-container: #f2f2eb; --app-tertiary-dark: #696732; } [data-theme='dark'][data-paleta='salvia'] { --theme-sidenav-active-bg: #827732; --theme-sidenav-subitem-bg: #3a3616; --theme-sidenav-subitem-hover: #4e471e; }