@sfperusacdev/sf-ui 0.1.11

package/dist/theme/dark.css

@@ -0,0 +1,156 @@
+/**
+ * Tema oscuro NOC / dashboard — estilo ERP glass.
+ * import "@sfperusacdev/sf-ui/theme/dark.css";
+ */
+@import "./sf-tokens.css";
+
+:root {
+  --sf-primary: #e2e8f0;
+  --sf-primary-muted: #94a3b8;
+  --sf-accent: #38bdf8;
+  --sf-accent-hover: #0ea5e9;
+  --sf-accent-10: rgb(56 189 248 / 0.12);
+
+  --sf-navy: #0c1524;
+  --sf-navy-muted: #64748b;
+  --sf-green: #38bdf8;
+  --sf-green-mid: #0ea5e9;
+
+  --sf-surface: #1e293b;
+  --sf-surface-alt: #0f172a;
+  --sf-white: #1e293b;
+  --sf-page-bg: #0c1524;
+
+  --sf-border: #334155;
+  --sf-border-strong: #475569;
+  --sf-text: #f1f5f9;
+  --sf-text-muted: #94a3b8;
+  --sf-text-subtle: #64748b;
+  --sf-label: #e2e8f0;
+
+  --sf-input-bg: #1e293b;
+  --sf-input-bg-readonly: #0f172a;
+  --sf-input-border: #475569;
+  --sf-input-border-focus: #38bdf8;
+  --sf-input-text: #f1f5f9;
+  --sf-input-placeholder: #64748b;
+
+  --sf-ring: rgb(56 189 248 / 0.25);
+  --sf-ring-focus: rgb(56 189 248 / 0.2);
+
+  --sf-danger-bg: rgb(220 38 38 / 0.15);
+  --sf-warning-bg: rgb(217 119 6 / 0.15);
+  --sf-success-bg: rgb(22 163 74 / 0.15);
+  --sf-info-bg: rgb(37 99 235 / 0.15);
+
+  --sf-row-hover: rgb(56 189 248 / 0.08);
+  --sf-row-alt: #1a2332;
+  --sf-row-selected: rgb(56 189 248 / 0.12);
+
+  --sf-btn-primary-bg: #38bdf8;
+  --sf-btn-primary-hover: #0ea5e9;
+  --sf-btn-primary-text: #0c1524;
+  --sf-btn-primary-shadow: 0 4px 14px rgb(56 189 248 / 0.25);
+  --sf-btn-outline-border: rgb(56 189 248 / 0.4);
+  --sf-btn-outline-text: #38bdf8;
+  --sf-btn-outline-hover-bg: rgb(56 189 248 / 0.1);
+
+  --sf-modal-overlay: rgb(0 0 0 / 0.65);
+  --sf-modal-bg: #1e293b;
+  --sf-modal-border: #334155;
+  --sf-modal-title: #f1f5f9;
+  --sf-modal-body-text: #cbd5e1;
+  --sf-modal-close: #94a3b8;
+  --sf-modal-close-hover-bg: #334155;
+  --sf-modal-close-hover-text: #f1f5f9;
+
+  --sf-card-bg: #1e293b;
+  --sf-card-border: #334155;
+  --sf-card-title: #f1f5f9;
+  --sf-card-subtitle: #94a3b8;
+  --sf-card-muted: #64748b;
+  --sf-card-shadow: 0 1px 3px rgb(0 0 0 / 0.35);
+  --sf-card-shadow-hover: 0 4px 12px rgb(0 0 0 / 0.4);
+
+  --sf-badge-neutral-bg: #334155;
+  --sf-badge-neutral-text: #e2e8f0;
+  --sf-badge-primary-bg: #38bdf8;
+  --sf-badge-primary-text: #0c1524;
+
+  --sf-tab-active-bg: #1e293b;
+  --sf-tab-active-border: #334155;
+  --sf-tab-active-indicator: var(--sf-accent);
+  --sf-table-header-bg: #0f172a;
+  --sf-table-header-text: #f8fafc;
+  --sf-table-header-border: #334155;
+  --sf-modal-header-bg: #0f172a;
+  --sf-modal-header-text: #f8fafc;
+  --sf-modal-header-subtitle: var(--sf-app-shell-topbar-muted);
+  --sf-modal-footer-bg: var(--sf-surface-alt);
+  --sf-page-header-bg: #1e293b;
+
+  --sf-dropdown-bg: #1e293b;
+  --sf-dropdown-border: #334155;
+  --sf-dropdown-item-hover-bg: #334155;
+
+  --sf-alert-body: #cbd5e1;
+  --sf-metric-track: #334155;
+
+  --sf-spinner-track: #475569;
+  --sf-spinner-fill: #38bdf8;
+  --sf-overlay-loading: rgb(15 23 42 / 0.75);
+  --sf-overlay-error: rgb(15 23 42 / 0.88);
+
+  --sf-gauge-track: #334155;
+
+  --sf-shadow-2: 0 1px 3px rgb(0 0 0 / 0.4);
+  --sf-shadow-4: 0 4px 16px rgb(0 0 0 / 0.45);
+  --sf-shadow-8: 0 10px 32px rgb(0 0 0 / 0.5);
+
+  --sf-network-panel-bg: rgb(30 41 59 / 0.95);
+  --sf-network-marker-label-bg: rgb(15 23 42 / 0.85);
+  --sf-network-marker-label-bg-selected: rgb(51 65 85 / 0.95);
+  --sf-network-marker-shadow: rgb(0 0 0 / 0.45);
+  --sf-network-marker-ring-selected: rgb(56 189 248 / 0.35);
+  --sf-map-panel-bg: rgb(30 41 59 / 0.95);
+  --sf-map-route-stroke: #2dd4bf;
+  --sf-map-route-fill: #14b8a6;
+  --sf-org-tree-toggle-hover-bg: rgb(255 255 255 / 0.08);
+  --sf-calendar-badge-on-selected-bg: rgb(255 255 255 / 0.2);
+
+  --sf-module-hover-bg: rgb(56 189 248 / 0.14);
+  --sf-module-hover-border: var(--sf-accent);
+  --sf-module-bg: rgb(255 255 255 / 0.08);
+  --sf-module-border: transparent;
+  --sf-module-tile-border: rgb(255 255 255 / 0.1);
+  --sf-module-tile-shadow: var(--sf-card-shadow);
+  --sf-module-active-bg: rgb(255 255 255 / 0.1);
+  --sf-module-shadow: var(--sf-card-shadow);
+  --sf-module-title-color: var(--sf-card-title);
+  --sf-module-title-weight: 400;
+  --sf-module-icon-border: var(--sf-border-strong);
+  --sf-module-icon-border-logo: var(--sf-border-strong);
+  --sf-module-icon-bg: var(--sf-card-bg);
+  --sf-module-icon-accent-fill: color-mix(in srgb, var(--sf-module-accent) 18%, var(--sf-module-icon-bg));
+  --sf-module-icon-accent-center: color-mix(in srgb, var(--sf-module-accent) 30%, var(--sf-module-icon-bg));
+  --sf-module-subtitle-color: var(--sf-card-subtitle);
+  --sf-module-favorite-idle: #9ca3af;
+
+  --sf-record-item-bg: var(--sf-card-bg);
+  --sf-master-detail-panel-bg: var(--sf-card-bg);
+  --sf-filter-bar-bg: var(--sf-card-bg);
+  --sf-expandable-row-bg: var(--sf-card-bg);
+  --sf-expandable-row-hover: var(--sf-surface);
+  --sf-itinerary-map-bg: color-mix(in srgb, var(--sf-info-bg) 40%, var(--sf-card-bg));
+  --sf-avatar-accent-bg: var(--sf-accent);
+  --sf-app-shell-nav-badge-bg: var(--sf-accent);
+  --sf-app-shell-nav-badge-text: var(--sf-btn-primary-text);
+  --sf-maestro-toolbar-bg: var(--sf-card-bg);
+  --sf-live-status-bg: var(--sf-card-bg);
+  --sf-live-route-bg: var(--sf-card-bg);
+  --sf-live-status-border: var(--sf-border);
+  --sf-live-route-border: var(--sf-border);
+  --sf-live-route-hover: var(--sf-surface);
+  --sf-live-unit-pill-bg: var(--sf-surface);
+  --sf-passenger-onboard-bg: color-mix(in srgb, var(--sf-success) 12%, var(--sf-card-bg));
+}

package/dist/theme/erp.css

@@ -0,0 +1,84 @@
+/**
+ * Tema ERP / ISP — estilo sarkui (Systel naranja + navy).
+ * import "@sfperusacdev/sf-ui/theme/erp.css";
+ */
+@import "./sf-tokens.css";
+
+:root {
+  --sf-primary: rgb(12, 33, 49);
+  --sf-primary-muted: #46555c;
+  --sf-accent: #ec7211;
+  --sf-accent-hover: #d96510;
+  --sf-accent-10: rgb(236 114 17 / 0.1);
+
+  --sf-navy: rgb(12, 33, 49);
+  --sf-navy-muted: #64748b;
+  --sf-green: #ec7211;
+  --sf-green-mid: #d96510;
+
+  --sf-surface: #f1f3f4;
+  --sf-surface-alt: #f8fafc;
+  --sf-page-bg: #f0f4fa;
+
+  --sf-border: #d1d5db;
+  --sf-border-strong: #c7d5ce;
+  --sf-text: #374151;
+  --sf-text-muted: #6b7280;
+  --sf-label: #374151;
+
+  --sf-input-bg: #f8fafc;
+  --sf-input-bg-readonly: #f1f5f9;
+  --sf-input-border: #d1d5db;
+  --sf-input-border-focus: #ec7211;
+  --sf-input-text: #374151;
+  --sf-input-placeholder: #9ca3af;
+  --sf-input-font-size: 13px;
+
+  --sf-ring: rgb(236 114 17 / 0.18);
+  --sf-ring-focus: rgb(236 114 17 / 0.18);
+  --sf-ring-width: 3px;
+  --sf-ring-error: rgb(244 63 94 / 0.15);
+  --sf-input-border-error: #fb7185;
+
+  --sf-danger: #f05a25;
+  --sf-danger-bg: rgb(240 90 37 / 0.1);
+  --sf-row-hover: #f0f7ff;
+  --sf-row-selected: rgb(236 114 17 / 0.06);
+
+  --sf-btn-primary-bg: var(--sf-accent);
+  --sf-btn-primary-hover: var(--sf-accent-hover);
+  --sf-btn-primary-shadow: 0 4px 14px rgb(236 114 17 / 0.3);
+  --sf-btn-primary-shadow-hover: 0 6px 20px rgb(236 114 17 / 0.4);
+  --sf-btn-outline-border: rgb(236 114 17 / 0.4);
+  --sf-btn-outline-text: #ec7211;
+  --sf-btn-outline-hover-bg: rgb(236 114 17 / 0.08);
+
+  --sf-shadow-2: 0 1px 3px rgb(12 33 49 / 0.08), 0 1px 2px rgb(12 33 49 / 0.05);
+  --sf-shadow-4: 0 4px 16px rgb(12 33 49 / 0.08), 0 2px 6px rgb(12 33 49 / 0.04);
+  --sf-shadow-8: 0 10px 32px rgb(12 33 49 / 0.1), 0 4px 10px rgb(12 33 49 / 0.06);
+
+  --sf-modal-overlay: rgb(12 33 49 / 0.45);
+  --sf-card-border: var(--sf-border);
+  --sf-badge-primary-bg: var(--sf-accent);
+  --sf-badge-primary-dot: var(--sf-accent-hover);
+
+  --sf-table-header-bg: var(--sf-primary);
+  --sf-table-header-text: var(--sf-white);
+  --sf-table-header-border: color-mix(in srgb, var(--sf-primary) 82%, var(--sf-white));
+  --sf-modal-header-bg: var(--sf-primary);
+  --sf-modal-header-text: var(--sf-white);
+  --sf-modal-header-subtitle: var(--sf-app-shell-topbar-muted);
+  --sf-modal-header-icon-bg: var(--sf-app-shell-accent);
+  --sf-modal-footer-bg: var(--sf-surface-alt);
+  --sf-record-item-bg: var(--sf-white);
+  --sf-master-detail-panel-bg: var(--sf-white);
+  --sf-filter-bar-bg: var(--sf-white);
+  --sf-expandable-row-bg: var(--sf-white);
+  --sf-itinerary-map-bg: color-mix(in srgb, var(--sf-accent-10) 55%, var(--sf-white));
+  --sf-avatar-accent-bg: var(--sf-accent);
+  --sf-app-shell-nav-badge-bg: var(--sf-accent);
+  --sf-app-shell-nav-badge-text: var(--sf-white);
+  --sf-maestro-toolbar-bg: var(--sf-white);
+  --sf-live-status-bg: var(--sf-white);
+  --sf-passenger-onboard-bg: color-mix(in srgb, var(--sf-success) 10%, var(--sf-white));
+}

package/dist/theme/sark.css

@@ -0,0 +1,117 @@
+/**
+ * Tema SARK agro — paleta oficial (paleta_colores_SARK.html)
+ * import "@sfperusacdev/sf-ui/theme/sark.css";
+ */
+@import "./sf-tokens.css";
+
+:root {
+  --sf-primary: #0c2131;
+  --sf-primary-muted: #123247;
+  --sf-accent: #2e9e5b;
+  --sf-accent-hover: #268a4f;
+  --sf-accent-10: rgb(46 158 91 / 0.1);
+
+  --sf-navy: #0c2131;
+  --sf-navy-muted: #123247;
+  --sf-green: #2e9e5b;
+  --sf-green-mid: #268a4f;
+  --sf-green-light: #3dba6e;
+
+  --sf-surface: #ffffff;
+  --sf-surface-alt: #f5f7f9;
+  --sf-page-bg: #f5f7f9;
+
+  --sf-border: #e2e8ec;
+  --sf-border-strong: #dce3e7;
+  --sf-text: #1b2a38;
+  --sf-text-muted: #5c7180;
+  --sf-text-subtle: #94a2a7;
+  --sf-label: #0c2131;
+
+  --sf-input-bg: #ffffff;
+  --sf-input-bg-readonly: #f5f7f9;
+  --sf-input-border: #dce3e7;
+  --sf-input-border-focus: #2e9e5b;
+  --sf-input-text: #1b2a38;
+  --sf-input-placeholder: #94a2a7;
+
+  --sf-ring: rgb(46 158 91 / 0.16);
+  --sf-ring-focus: rgb(46 158 91 / 0.16);
+  --sf-ring-width: 3px;
+
+  --sf-danger: #c0392b;
+  --sf-danger-bg: #fcefef;
+  --sf-danger-border: #f7e3e3;
+  --sf-warning: #ee7a14;
+  --sf-success: #2e9e5b;
+  --sf-success-bg: #eaf5ed;
+
+  --sf-row-hover: rgb(12 33 49 / 0.05);
+  --sf-row-alt: #f5f7f9;
+  --sf-row-selected: rgb(46 158 91 / 0.08);
+
+  --sf-btn-primary-bg: var(--sf-accent);
+  --sf-btn-primary-hover: var(--sf-accent-hover);
+  --sf-btn-primary-shadow: 0 4px 14px color-mix(in srgb, var(--sf-accent) 25%, transparent);
+  --sf-btn-primary-shadow-hover: 0 6px 20px color-mix(in srgb, var(--sf-accent) 32%, transparent);
+  --sf-btn-outline-border: rgb(46 158 91 / 0.35);
+  --sf-btn-outline-text: #2e9e5b;
+  --sf-btn-outline-hover-bg: rgb(46 158 91 / 0.08);
+
+  --sf-info: #1e6fa3;
+  --sf-info-bg: #e9f0f6;
+  --sf-info-border: #cfe0ea;
+
+  --sf-shadow-2: 0 1px 3px rgb(16 40 30 / 0.06), 0 1px 2px rgb(16 40 30 / 0.04);
+  --sf-shadow-4: 0 4px 16px rgb(12 33 49 / 0.08), 0 2px 6px rgb(12 33 49 / 0.04);
+
+  --sf-modal-overlay: rgb(8 18 26 / 0.46);
+  --sf-tab-active-indicator: var(--sf-accent);
+  --sf-card-border: var(--sf-border);
+  --sf-badge-primary-bg: var(--sf-green);
+  --sf-badge-primary-dot: var(--sf-green-mid);
+
+  --sf-module-hover-bg: rgb(12 33 49 / 0.2);
+  --sf-module-hover-border: #0c2131;
+  --sf-module-bg: rgb(255 255 255 / 0.6);
+  --sf-module-border: transparent;
+  --sf-module-tile-border: rgb(0 0 0 / 0.06);
+  --sf-module-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 12px rgb(13 42 58 / 0.08);
+  --sf-module-tile-shadow: 0 1px 2px rgb(0 0 0 / 0.05), 0 6px 16px rgb(13 42 58 / 0.1);
+  --sf-module-active-bg: rgb(0 0 0 / 0.1);
+  --sf-module-title-color: #000000;
+  --sf-module-title-weight: 400;
+  --sf-module-subtitle-color: #8a98a4;
+  --sf-module-icon-accent-fill: color-mix(in srgb, var(--sf-module-accent) 14%, var(--sf-module-icon-bg));
+  --sf-module-icon-accent-center: color-mix(in srgb, var(--sf-module-accent) 26%, var(--sf-module-icon-bg));
+  --sf-module-icon-letter-color: var(--sf-module-accent);
+  --sf-module-icon-border: #edf1f4;
+  --sf-module-icon-border-logo: #eaeff2;
+  --sf-module-icon-bg: #ffffff;
+  --sf-module-favorite-idle: #9ca3af;
+  --sf-module-favorite-opacity: 0.78;
+  --sf-module-body-min-height-tile: 2.375rem;
+  --sf-module-body-min-height-tile-compact: 2.125rem;
+
+  --sf-table-header-bg: var(--sf-primary);
+  --sf-table-header-text: var(--sf-white);
+  --sf-table-header-border: color-mix(in srgb, var(--sf-primary) 82%, var(--sf-white));
+  --sf-modal-header-bg: var(--sf-primary);
+  --sf-modal-header-text: var(--sf-white);
+  --sf-app-shell-accent: var(--sf-accent);
+  --sf-app-shell-topbar-muted: #9fb6c4;
+  --sf-modal-header-subtitle: var(--sf-app-shell-topbar-muted);
+  --sf-modal-header-icon-bg: var(--sf-app-shell-accent);
+  --sf-modal-footer-bg: var(--sf-surface-alt);
+  --sf-record-item-bg: var(--sf-white);
+  --sf-master-detail-panel-bg: var(--sf-white);
+  --sf-filter-bar-bg: var(--sf-white);
+  --sf-expandable-row-bg: var(--sf-white);
+  --sf-itinerary-map-bg: color-mix(in srgb, var(--sf-info-bg) 55%, var(--sf-white));
+  --sf-avatar-accent-bg: var(--sf-accent);
+  --sf-app-shell-nav-badge-bg: var(--sf-accent);
+  --sf-app-shell-nav-badge-text: var(--sf-white);
+  --sf-maestro-toolbar-bg: var(--sf-white);
+  --sf-live-status-bg: var(--sf-white);
+  --sf-passenger-onboard-bg: color-mix(in srgb, var(--sf-success) 10%, var(--sf-white));
+}