@sfperusacdev/sf-ui 0.2.9 → 0.3.1

package/dist/theme/dark.css

@@ -194,4 +194,17 @@
   --sf-ring-width: 2px;
   --sf-success: #16a34a;
   --sf-warning: #d97706;
+
+  /* Paleta de categorías sobre fondo oscuro: los mismos 10 tonos de sf-tokens.css, aclarados para dar al menos
+   * 3:1 sobre la tarjeta (#1e293b) y sobre la superficie alterna (#0f172a). */
+  --sf-cat-1: #7aa2f0;
+  --sf-cat-2: #ff9248;
+  --sf-cat-3: #9cc25e;
+  --sf-cat-4: #ec7a88;
+  --sf-cat-5: #4fc4ba;
+  --sf-cat-6: #e0ba4a;
+  --sf-cat-7: #b197e8;
+  --sf-cat-8: #d3966a;
+  --sf-cat-9: #56cdeb;
+  --sf-cat-10: #e58bc4;
 }

package/dist/theme/densidad.css

@@ -0,0 +1,291 @@
+/**
+ * Densidad compacta de tablero con <html data-density="compacta">: títulos de tarjeta de 18 px y leyendas, listas,
+ * baldosas y líneas de tiempo más apretadas para que un tablero completo quepa en 1536×1024. Independiente del tema.
+ */
+:root[data-density='compacta'] {
+  --sf-app-shell-sidebar-width: 11.875rem;
+  --sf-font-script: "Segoe Script", "Brush Script MT", "Comic Sans MS", cursive;
+}
+
+:root[data-density='compacta'] .sf-card-header .sf-card-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+:root[data-density='compacta'] .sf-card-header .sf-card-muted {
+  font-size: 0.875rem;
+  color: var(--sf-text);
+}
+
+:root[data-density='compacta'] .sf-card-header {
+  border-bottom-color: transparent;
+}
+
+:root[data-density='compacta'] .sf-card-header {
+  padding: 0.5rem 0.75rem 0.125rem;
+}
+
+:root[data-density='compacta'] .sf-chart-legend--vertical .sf-chart-legend__item {
+  padding: 0.0625rem 0;
+  font-size: 0.78125rem;
+  line-height: 1.15;
+}
+
+:root[data-density='compacta'] .sf-record-list--compact .sf-record-list__item {
+  padding: 0.1875rem 0.25rem;
+  line-height: 1.2;
+}
+
+:root[data-density='compacta'] .sf-record-list--compact .sf-record-list__title {
+  font-size: 0.71875rem;
+}
+
+:root[data-density='compacta'] .sf-record-list--compact .sf-record-list__subtitle {
+  font-size: 0.65625rem;
+}
+
+:root[data-density='compacta'] .sf-metric-tile--centered {
+  gap: 0.25rem;
+  padding: 0.5rem 0.375rem;
+}
+
+:root[data-density='compacta'] .sf-metric-tile--centered .sf-metric-tile__label {
+  font-size: 0.8125rem;
+}
+
+:root[data-density='compacta'] .sf-metric-tile--centered .sf-metric-tile__value {
+  font-size: 1.375rem;
+}
+
+:root[data-density='compacta'] .sf-app-shell__submenu-btn {
+  padding: 0.75rem 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+:root[data-density='compacta'] .sf-app-shell__submenu-items {
+  gap: 0.375rem;
+}
+
+:root[data-density='compacta'] .sf-metric-row__tile-icon {
+  width: 3.125rem;
+  height: 3.125rem;
+  font-size: 1.5rem;
+}
+
+:root[data-density='compacta'] .sf-metric-row--tile {
+  gap: 0.625rem;
+  padding: 0.5rem 0.625rem 0.5rem 0.5rem;
+}
+
+:root[data-density='compacta'] .sf-metric-row--tile .sf-metric-row__label {
+  font-size: 0.8125rem;
+  white-space: nowrap;
+}
+
+:root[data-density='compacta'] .sf-metric-row--tile .sf-metric-row__description {
+  font-size: 0.6875rem;
+}
+
+:root[data-density='compacta'] .sf-metric-tile--leading {
+  gap: 0.625rem;
+  padding: 0.625rem 0.625rem;
+}
+
+:root[data-density='compacta'] .sf-metric-tile--leading .sf-metric-tile__icon {
+  width: 2.5rem;
+  height: 2.5rem;
+  font-size: 1.25rem;
+}
+
+:root[data-density='compacta'] .sf-metric-tile--leading .sf-metric-tile__value {
+  font-size: 1.5rem;
+}
+
+:root[data-density='compacta'] .sf-metric-tile--leading .sf-metric-tile__label,
+:root[data-density='compacta'] .sf-metric-tile--leading .sf-metric-tile__sublabel {
+  font-size: 0.75rem;
+}
+
+:root[data-density='compacta'] .sf-metric-tile--eyebrow .sf-metric-tile__value {
+  font-size: 1.25rem;
+}
+
+:root[data-density='compacta'] .sf-timeline--cards .sf-timeline__item {
+  gap: 0.75rem;
+  margin-bottom: 0.375rem;
+  padding: 0.4375rem 0.75rem;
+}
+
+:root[data-density='compacta'] .sf-timeline--cards .sf-timeline__icon-wrap {
+  height: 2.5rem;
+  width: 2.5rem;
+  font-size: 1.125rem;
+}
+
+:root[data-density='compacta'] .sf-timeline--cards .sf-timeline__title {
+  font-size: 0.8125rem;
+}
+
+:root[data-density='compacta'] .sf-timeline--cards .sf-timeline__time,
+:root[data-density='compacta'] .sf-timeline--cards .sf-timeline__description,
+:root[data-density='compacta'] .sf-timeline--cards .sf-timeline__meta {
+  margin-top: 0;
+  font-size: 0.71875rem;
+  line-height: 1.35;
+}
+
+:root[data-density='compacta'] .sf-timeline--cards .sf-timeline__meta {
+  width: 8rem;
+}
+
+:root[data-density='compacta'] .sf-check-list {
+  gap: 0.5rem 1.125rem;
+}
+
+:root[data-density='compacta'] .sf-check-list__item {
+  font-size: 0.8125rem;
+}
+
+:root[data-density='compacta'] .sf-metric-row__tile-bar {
+  margin-top: 0.125rem;
+}
+
+:root[data-density='compacta'] .sf-metric-row--tile .sf-metric-row__tile-body {
+  gap: 0;
+  line-height: 1.25;
+}
+
+:root[data-density='compacta'] .sf-integration-flow--compact .sf-integration-flow__group--targets .sf-integration-flow__nodes {
+  gap: 0.25rem;
+}
+
+:root[data-density='compacta'] .sf-integration-flow--compact .sf-integration-flow__group--targets .sf-integration-flow__node {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
+
+:root[data-density='compacta'] .sf-profile-card__fact {
+  padding: 0.25rem 0;
+}
+
+:root[data-density='compacta'] .sf-profile-card__quote {
+  margin-top: 0.875rem;
+}
+
+:root[data-density='compacta'] .sf-metric-row--tile.sf-metric-row--small {
+  padding-top: 0.3125rem;
+  padding-bottom: 0.3125rem;
+}
+
+:root[data-density='compacta'] .sf-metric-row--tile.sf-metric-row--small .sf-metric-row__tile-icon {
+  width: 2.375rem;
+  height: 2.375rem;
+  font-size: 1rem;
+}
+
+:root[data-density='compacta'] .sf-metric-row--tile.sf-metric-row--small .sf-metric-row__label {
+  font-size: 0.75rem;
+}
+
+:root[data-density='compacta'] .sf-metric-row--tile.sf-metric-row--small .sf-metric-row__description,
+:root[data-density='compacta'] .sf-metric-row--tile.sf-metric-row--small .sf-metric-row__value {
+  font-size: 0.65625rem;
+}
+
+:root[data-density='compacta'] .sf-metric-row--inline .sf-metric-row__label {
+  font-size: 0.75rem;
+}
+
+:root[data-density='compacta'] .sf-metric-row--inline .sf-metric-row__value {
+  font-size: 0.75rem;
+}
+
+:root[data-density='compacta'] .sf-tabs--pills > .sf-tab {
+  padding: 0.3125rem 0.75rem;
+  font-size: 0.75rem;
+}
+
+:root[data-density='compacta'] .sf-timeline--centered .sf-timeline__time {
+  font-weight: 600;
+  color: var(--sf-text);
+}
+
+:root[data-density='compacta'] .sf-timeline--centered .sf-timeline__title,
+:root[data-density='compacta'] .sf-timeline--centered .sf-timeline__description {
+  margin-top: 0;
+  font-size: 0.71875rem;
+  font-weight: 400;
+  line-height: 1.3;
+  color: var(--sf-text);
+}
+
+:root[data-density='compacta'] .sf-timeline--centered .sf-timeline__time {
+  font-size: 0.75rem;
+}
+
+:root[data-density='compacta'] .sf-tabs--pills {
+  gap: 0.25rem;
+}
+
+:root[data-density='compacta'] .sf-tabs--pills > .sf-tab {
+  padding: 0.3125rem 0.625rem;
+}
+
+:root[data-density='compacta'] .sf-audit-timeline--chain .sf-audit-timeline__item {
+  padding-bottom: 0.5rem;
+}
+
+:root[data-density='compacta'] .sf-audit-timeline--chain .sf-audit-timeline__item + .sf-audit-timeline__item {
+  padding-top: 0.5rem;
+}
+
+:root[data-density='compacta'] .sf-audit-timeline--chain .sf-audit-timeline__actor {
+  font-size: 0.875rem;
+}
+
+:root[data-density='compacta'] .sf-audit-timeline--chain .sf-audit-timeline__action,
+:root[data-density='compacta'] .sf-audit-timeline--chain .sf-audit-timeline__detail {
+  font-size: 0.75rem;
+}
+
+:root[data-density='compacta'] .sf-timeline--centered .sf-timeline__icon-wrap {
+  height: 2rem;
+  width: 2rem;
+}
+
+:root[data-density='compacta'] .sf-timeline--centered .sf-timeline__item:has(.sf-timeline__icon-wrap) .sf-timeline__line {
+  top: calc(2.75rem - 1px);
+}
+
+:root[data-density='compacta'] .sf-timeline--centered .sf-timeline__item {
+  gap: 0.375rem;
+}
+
+:root[data-density='compacta'] .sf-metric-tile--centered .sf-metric-tile__icon {
+  font-size: 1.5rem;
+}
+
+:root[data-density='compacta'] .sf-metric-tile--centered .sf-metric-tile__sublabel {
+  font-size: 0.6875rem;
+}
+
+:root[data-density='compacta'] .sf-app-shell__submenu-btn--nested {
+  padding: 0.375rem 0.75rem 0.375rem 2.125rem;
+  font-size: 0.78125rem;
+}
+
+:root[data-density='compacta'] .sf-metric-tile--value-first .sf-metric-tile__label {
+  font-size: 0.6875rem;
+}
+
+/* Leyendas: la etiqueta pasa a otra línea entera en vez de partirse a media palabra. */
+:root[data-density='compacta'] .sf-chart-legend--vertical .sf-chart-legend__label {
+  overflow-wrap: break-word;
+}
+
+:root[data-density='compacta'] .sf-chart-legend--columns-2 .sf-chart-legend__item {
+  font-size: 0.71875rem;
+}

package/dist/theme/neon.css

@@ -0,0 +1,185 @@
+/**
+ * Acabado «neón»: fondo de foto oscurecido (--sf-page-bg-image), tarjetas de vidrio con borde verde agua y
+ * resplandor de color. Con <html data-skin="neon">; data-theme="dark" da la versión oscura (capa sobre dark.css).
+ */
+
+:root[data-skin='neon'] {
+  --sf-glow-sm: 0 0 10px;
+  --sf-glow-md: 0 0 18px;
+}
+
+/* —— Neón claro: vidrio blanco sobre el campo, mismos acentos. —— */
+:root[data-skin='neon']:not([data-theme='dark']) {
+  --sf-page-bg: #e9f4f2;
+  --sf-surface: #ffffff;
+  --sf-surface-alt: #f2f8f7;
+  --sf-white: #ffffff;
+
+  --sf-border: #c4e1db;
+  --sf-border-strong: #a9d3cb;
+  --sf-text: #0b2530;
+  --sf-text-muted: #45606b;
+  --sf-text-subtle: #5f7782;
+  --sf-label: #0b2530;
+  --sf-primary: #0b2530;
+
+  --sf-accent: #0d9488;
+  --sf-accent-hover: #0f766e;
+  --sf-accent-10: rgb(13 148 136 / 0.1);
+
+  --sf-card-bg: rgb(255 255 255 / 0.9);
+  --sf-card-border: #c4e1db;
+  --sf-card-title: #0b2530;
+  --sf-card-subtitle: #45606b;
+  --sf-card-muted: #5f7782;
+  --sf-card-shadow: 0 0 0 1px rgb(13 148 136 / 0.08), 0 8px 24px rgb(11 37 48 / 0.1);
+  --sf-record-item-bg: rgb(240 249 247 / 0.9);
+
+  --sf-metric-track: rgb(11 37 48 / 0.05);
+  --sf-gauge-track: rgb(13 148 136 / 0.14);
+
+  --sf-btn-outline-border: #7fb6d9;
+  --sf-btn-outline-text: #0b3a5c;
+  --sf-btn-outline-hover-bg: rgb(43 125 224 / 0.1);
+
+  --sf-drawer-bg: #ffffff;
+  --sf-modal-bg: #ffffff;
+  --sf-dropdown-bg: #ffffff;
+
+  --sf-app-shell-accent: #0284c7;
+  --sf-timeline-time-color: #0f766e;
+
+  --sf-cat-1: #0284c7;
+  --sf-cat-2: #9333ea;
+  --sf-cat-3: #059669;
+  --sf-cat-4: #ea580c;
+  --sf-cat-5: #ca8a04;
+  --sf-cat-6: #16a34a;
+  --sf-cat-7: #a21caf;
+  --sf-cat-8: #2563eb;
+  --sf-cat-9: #0891b2;
+  --sf-cat-10: #db2777;
+}
+
+:root[data-skin='neon']:not([data-theme='dark']) .sf-app-shell {
+  background:
+    linear-gradient(rgb(233 244 242 / 0.86), rgb(233 244 242 / 0.86)),
+    var(--sf-page-bg-image, none) center / cover no-repeat,
+    var(--sf-page-bg);
+}
+
+:root[data-skin='neon']:not([data-theme='dark']) .sf-app-shell__submenu {
+  background: linear-gradient(180deg, rgb(255 255 255 / 0.95), rgb(236 246 244 / 0.95));
+  border-right-color: #c4e1db;
+  box-shadow: none;
+}
+
+:root[data-skin='neon']:not([data-theme='dark']) .sf-btn--outline {
+  background: rgb(255 255 255 / 0.85);
+}
+
+:root[data-theme='dark'][data-skin='neon'] {
+  --sf-page-bg: #010b13;
+  --sf-surface: #011a24;
+  --sf-surface-alt: #01121c;
+  --sf-white: #011a24;
+
+  --sf-border: #1f4144;
+  --sf-border-strong: #2a4852;
+  --sf-text: #e6eef0;
+  --sf-text-muted: #9fb1bb;
+  --sf-text-subtle: #84929f;
+  --sf-label: #e6eef0;
+
+  --sf-accent: #2dd4bf;
+  --sf-accent-hover: #14b8a6;
+  --sf-accent-10: rgb(45 212 191 / 0.12);
+
+  --sf-card-bg: rgb(1 26 36 / 0.86);
+  --sf-card-border: #1f4144;
+  --sf-card-title: #f1f6f7;
+  --sf-card-subtitle: #9fb1bb;
+  --sf-card-muted: #84929f;
+  --sf-card-shadow: 0 0 0 1px rgb(45 212 191 / 0.06), 0 8px 24px rgb(0 0 0 / 0.45);
+  --sf-card-shadow-hover: 0 0 0 1px rgb(45 212 191 / 0.18), 0 10px 28px rgb(0 0 0 / 0.5);
+  --sf-record-item-bg: rgb(4 43 46 / 0.55);
+
+  /* Paneles y ventanas opacos: sobre el fondo de foto un panel translúcido deja ver la página. */
+  --sf-drawer-bg: #011a24;
+  --sf-modal-bg: #011a24;
+  --sf-modal-header-bg: #01121c;
+  --sf-modal-footer-bg: #01121c;
+  --sf-dropdown-bg: #011a24;
+
+  --sf-metric-track: rgb(255 255 255 / 0.1);
+  --sf-gauge-track: rgb(45 212 191 / 0.14);
+
+  --sf-btn-outline-border: #1c4d7a;
+  --sf-btn-outline-text: #e6eef0;
+  --sf-btn-outline-hover-bg: rgb(28 77 122 / 0.55);
+  --sf-avatar-bg: #0d7a65;
+  --sf-avatar-text: #ffffff;
+
+  --sf-app-shell-accent: #04b7ea;
+
+  /* Paleta de categorías saturada para fondo oscuro. */
+  --sf-cat-1: #14caff;
+  --sf-cat-2: #b44cf0;
+  --sf-cat-3: #2ee59d;
+  --sf-cat-4: #ff9f2e;
+  --sf-cat-5: #ffd02e;
+  --sf-cat-6: #3ef07a;
+  --sf-cat-7: #c04cf5;
+  --sf-cat-8: #2aa8ff;
+  --sf-cat-9: #2ec8f0;
+  --sf-cat-10: #ff3fa0;
+
+}
+
+/* Fondo de página: la imagen la pone el host con --sf-page-bg-image (url). */
+:root[data-theme='dark'][data-skin='neon'] .sf-app-shell {
+  background:
+    linear-gradient(rgb(1 11 19 / 0.78), rgb(1 11 19 / 0.78)),
+    var(--sf-page-bg-image, none) center / cover no-repeat,
+    var(--sf-page-bg);
+}
+
+:root[data-theme='dark'][data-skin='neon'] .sf-app-shell__submenu {
+  background: linear-gradient(180deg, rgb(2 22 34 / 0.94), rgb(0 11 16 / 0.9));
+  border-right-color: rgb(42 72 82 / 0.6);
+  box-shadow: none;
+}
+
+:root[data-skin='neon'] .sf-app-shell__submenu-btn--active {
+  background: linear-gradient(90deg, #005bb0, #013c7f);
+  color: #ffffff;
+  box-shadow: inset 0 0 0 1px rgb(20 202 255 / 0.35);
+}
+
+:root[data-skin='neon'] .sf-app-shell__submenu-btn--active .sf-app-shell__submenu-icon {
+  color: #ffffff;
+}
+
+:root[data-skin='neon'] .sf-app-shell__submenu-icon {
+  color: var(--sf-text);
+}
+
+:root[data-skin='neon'] .sf-app-shell__content {
+  background: transparent;
+}
+
+:root[data-theme='dark'][data-skin='neon'] .sf-btn--outline {
+  background: rgb(14 46 74 / 0.85);
+}
+
+:root[data-skin='neon'] .sf-profile-card__status {
+  padding: 0.375rem 0.75rem;
+  border: 1px solid #3ef07a;
+  background: #0b6e3a;
+  color: #ffffff;
+  font-size: 0.875rem;
+}
+
+:root[data-skin='neon'] .sf-profile-card__status .sf-badge-dot {
+  background: #3ef07a;
+}

package/dist/theme/sf-tokens.css

@@ -457,6 +457,24 @@
   --sf-chart-tooltip-text: var(--sf-text);
   --sf-chart-reference: var(--sf-text-subtle);
 
+  /* Paleta de categorías: 10 colores para distinguir cosas que NO son un estado (dominios, etapas, dimensiones,
+   * series). Los --sf-chart-* son alias de los colores de estado y pintar una categoría con ellos comunica
+   * "éxito" o "peligro" donde no lo hay. El orden alterna tonos para que dos vecinas no se parezcan; cada color
+   * da al menos 3:1 sobre la tarjeta (paletaCategorias.test.ts lo mide). dark.css trae su versión clara. */
+  --sf-cat-1: #1f4e79;
+  --sf-cat-2: #ee6209;
+  --sf-cat-3: #668b37;
+  --sf-cat-4: #b23a48;
+  --sf-cat-5: #1f7f78;
+  --sf-cat-6: #b08a1e;
+  --sf-cat-7: #6d4c9f;
+  --sf-cat-8: #9a5b2b;
+  --sf-cat-9: #2e86c1;
+  --sf-cat-10: #b8478f;
+
+  /* Acento de marca SF Perú (naranja), disponible en cualquier tema sin cambiar --sf-accent. */
+  --sf-brand-accent: #f96810;
+
   /* Network map (Fase 13 / 25) */
   --sf-network-panel-bg: rgb(255 255 255 / 0.95);
   --sf-network-marker-label-text: var(--sf-btn-primary-text);