@nucleus-suite-pe/core 0.6.1 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nucleus-suite-pe/core",
-  "version": "0.6.1",
+  "version": "1.0.0",
   "description": "Capa compartida de la suite Nucleus: sesión única, permisos, tema y marco de aplicación para Angular.",
   "keywords": [
     "angular",

package/styles/tokens.css

@@ -8,11 +8,106 @@
   --ac-accent: #7c6cf5;
   --ac-on-accent: #ffffff;
 
+  --ns-frame-bg: #16132b;
+  --ns-frame-raised: #241f42;
+  --ns-frame-ink: #ece9fb;
+  --ns-frame-muted: #9d95c6;
+  --ns-frame-line: #302a54;
+  --ns-frame-glow: #8c7ff0;
+  --ns-frame-on-glow: #101014;
+
+  --ns-shadow-1: 0 1px 2px rgb(0 0 0 / 28%);
+  --ns-shadow-2: 0 10px 34px rgb(0 0 0 / 45%);
+  --ns-accent-wash: #1d1a2b;
+  --ns-accent-wash-strong: #2a2444;
+  --ns-header-bg: #262433;
+  --ns-header-ink: #c2c0ce;
+  --ns-header-line: #3a3745;
+  --ns-scroll-thumb: color-mix(in srgb, var(--ac-text) 20%, transparent);
+  --ns-scroll-thumb-hover: color-mix(in srgb, var(--ac-text) 38%, transparent);
+
+  --ns-density: 1;
+  --ns-cell-y: calc(14px * var(--ns-density));
+  --ns-head-y: calc(13px * var(--ns-density));
+  --ns-nav-y: calc(9px * var(--ns-density));
+  --ns-form-gap-y: calc(18px * var(--ns-density));
+  --ns-control-y: calc(0.55rem * var(--ns-density));
+
   --ac-font: 'Space Grotesk', sans-serif;
   --ac-radius-pill: 999px;
   --ac-radius-box: 4px;
 }
 
+.ns-frame {
+  --ac-bg: var(--ns-frame-bg);
+  --ac-surface: var(--ns-frame-raised);
+  --ac-surface-alt: var(--ns-frame-raised);
+  --ac-text: var(--ns-frame-ink);
+  --ac-text-muted: var(--ns-frame-muted);
+  --ac-border: var(--ns-frame-line);
+  --ac-accent: var(--ns-frame-glow);
+  --ac-on-accent: var(--ns-frame-on-glow);
+  --ns-scroll-thumb: color-mix(in srgb, var(--ns-frame-ink) 22%, transparent);
+  --ns-scroll-thumb-hover: color-mix(in srgb, var(--ns-frame-ink) 42%, transparent);
+
+  background: var(--ns-frame-bg);
+  color: var(--ns-frame-ink);
+}
+
+.ns-frame .p-button-text.p-button-secondary {
+  color: var(--ns-frame-muted);
+}
+
+.ns-frame .p-button-text.p-button-secondary:not(:disabled):hover {
+  background: var(--ns-frame-raised);
+  color: var(--ns-frame-ink);
+}
+
+.ns-frame .p-select {
+  background: var(--ns-frame-raised);
+  border-color: var(--ns-frame-line);
+  color: var(--ns-frame-ink);
+}
+
+.ns-frame .p-select:not(.p-disabled):hover {
+  border-color: var(--ns-frame-glow);
+}
+
+.ns-frame .p-select-label {
+  color: var(--ns-frame-ink);
+}
+
+.ns-frame .p-select-label.p-placeholder,
+.ns-frame .p-select-dropdown {
+  color: var(--ns-frame-muted);
+}
+
+.ns-frame .p-avatar {
+  background: var(--ns-frame-raised);
+  color: var(--ns-frame-ink);
+}
+
+.ns-frame .p-skeleton {
+  background: color-mix(in srgb, var(--ns-frame-ink) 12%, transparent);
+}
+
+.p-drawer-mask:has(.ns-settings-drawer) {
+  background: transparent;
+  backdrop-filter: none;
+  pointer-events: none;
+}
+
+.ns-flush-popover.p-popover .p-popover-content {
+  overflow: hidden;
+  padding: 0;
+  border-radius: inherit;
+}
+
+.ns-settings-drawer.p-drawer {
+  border-left: 1px solid var(--ac-border);
+  pointer-events: auto;
+}
+
 html,
 body {
   margin: 0;
@@ -31,6 +126,33 @@ input {
   font-family: inherit;
 }
 
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--ns-scroll-thumb) transparent;
+}
+
+*::-webkit-scrollbar {
+  width: 11px;
+  height: 11px;
+}
+
+*::-webkit-scrollbar-track,
+*::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  border: 3px solid transparent;
+  border-radius: 999px;
+  background: var(--ns-scroll-thumb);
+  background-clip: padding-box;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--ns-scroll-thumb-hover);
+  background-clip: padding-box;
+}
+
 ::selection {
   background: var(--ac-accent);
   color: var(--ac-on-accent);
@@ -55,19 +177,21 @@ input {
   border: 1px solid var(--ac-border);
   border-radius: 12px;
   overflow: hidden;
-  background: color-mix(in srgb, var(--ac-surface) 70%, transparent);
+  background: var(--ac-surface);
+  box-shadow: var(--ns-shadow-1);
 }
 
 .ns-table .p-datatable-table-container {
+  overflow-x: auto;
   border-radius: 12px;
 }
 
 .ns-table .p-datatable-thead > tr > th {
-  padding: 13px 18px;
+  padding: var(--ns-head-y) 18px;
   border: 0;
-  border-bottom: 1px solid var(--ac-border);
-  background: color-mix(in srgb, var(--ac-surface-alt) 60%, transparent);
-  color: var(--ac-text-muted);
+  border-bottom: 2px solid var(--ns-header-line);
+  background: var(--ns-header-bg);
+  color: var(--ns-header-ink);
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.07em;
@@ -80,9 +204,9 @@ input {
 }
 
 .ns-table .p-datatable-tbody > tr > td {
-  padding: 14px 18px;
+  padding: var(--ns-cell-y) 18px;
   border: 0;
-  border-bottom: 1px solid color-mix(in srgb, var(--ac-border) 45%, transparent);
+  border-bottom: 1px solid var(--ac-border);
   font-size: 13px;
 }
 
@@ -91,7 +215,15 @@ input {
 }
 
 .ns-table .p-datatable-tbody > tr:hover > td {
-  background: color-mix(in srgb, var(--ac-accent) 7%, transparent);
+  background: var(--ns-accent-wash);
+}
+
+.ns-table .p-datatable-tbody > tr:hover > td:first-child {
+  box-shadow: inset 2px 0 0 var(--ac-accent);
+}
+
+.ns-table .p-datatable-tbody > tr:hover .actions .p-button-secondary:not(:disabled) {
+  color: var(--ac-accent);
 }
 
 .ns-table .p-datatable-tbody > tr.is-inactive > td {
@@ -116,9 +248,207 @@ input {
 
 .ns-crumbs .p-breadcrumb-item:last-child .p-breadcrumb-item-label {
   color: var(--ac-text);
+  font-size: 15px;
   font-weight: 600;
 }
 
 .ns-crumbs .p-breadcrumb-separator {
   color: color-mix(in srgb, var(--ac-text-muted) 60%, transparent);
 }
+
+.ns-form-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--ns-form-gap-y) 20px;
+}
+
+.ns-form-grid .ns-field {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.ns-form-grid .ns-field > label {
+  color: var(--ac-text-muted);
+  font-size: 12px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.ns-form-grid .ns-hint {
+  margin: 0;
+  max-width: 52ch;
+  color: var(--ac-text-muted);
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.ns-form-grid .ns-inline {
+  display: flex;
+  min-height: 38px;
+  align-items: center;
+  gap: 10px;
+}
+
+.ns-form-grid .ns-inline-label {
+  color: var(--ac-text);
+  font-size: 13px;
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+.ns-form-grid .is-size-xs
+  :is(input, textarea, .p-select, .p-inputtext, nucleus-icon-picker):not(.p-select-filter) {
+  max-width: 6rem;
+}
+
+.ns-form-grid .is-size-sm
+  :is(input, textarea, .p-select, .p-inputtext, nucleus-icon-picker):not(.p-select-filter) {
+  max-width: 11rem;
+}
+
+.ns-form-grid .is-size-md
+  :is(input, textarea, .p-select, .p-inputtext, nucleus-icon-picker):not(.p-select-filter) {
+  max-width: 17rem;
+}
+
+.ns-form-grid .is-size-lg
+  :is(input, textarea, .p-select, .p-inputtext, nucleus-icon-picker):not(.p-select-filter) {
+  max-width: 26rem;
+}
+
+.ns-form-grid .is-span-full {
+  grid-column: 1 / -1;
+}
+
+@media (min-width: 640px) {
+  .ns-form-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .ns-form-grid .is-span-2,
+  .ns-form-grid .is-span-3,
+  .ns-form-grid .is-span-4 {
+    grid-column: span 2;
+  }
+}
+
+@media (min-width: 1080px) {
+  .ns-form-grid:not(.is-cap-1):not(.is-cap-2) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .ns-form-grid:not(.is-cap-1):not(.is-cap-2) .is-span-2 {
+    grid-column: span 2;
+  }
+
+  .ns-form-grid:not(.is-cap-1):not(.is-cap-2) :is(.is-span-3, .is-span-4) {
+    grid-column: span 3;
+  }
+}
+
+@media (min-width: 1500px) {
+  .ns-form-grid:not(.is-cap-1):not(.is-cap-2):not(.is-cap-3) {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .ns-form-grid:not(.is-cap-1):not(.is-cap-2):not(.is-cap-3) .is-span-3 {
+    grid-column: span 3;
+  }
+
+  .ns-form-grid:not(.is-cap-1):not(.is-cap-2):not(.is-cap-3) .is-span-4 {
+    grid-column: span 4;
+  }
+}
+
+.ns-form-grid.is-cap-1 {
+  grid-template-columns: 1fr;
+}
+
+.ns-form-grid.is-cap-1 .ns-field {
+  grid-column: 1 / -1;
+}
+
+.p-select-overlay .p-select-header {
+  padding: 10px 10px 6px;
+}
+
+.p-select-overlay .p-select-header .p-iconfield {
+  position: relative;
+  display: block;
+  width: 100%;
+}
+
+.p-select-overlay .p-select-filter {
+  width: 100%;
+  padding-right: 38px;
+}
+
+.p-select-overlay .p-select-header .p-inputicon {
+  position: absolute;
+  top: 50%;
+  right: 13px;
+  display: inline-flex;
+  align-items: center;
+  margin: 0;
+  color: var(--ac-text-muted);
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+
+.p-select-overlay .p-select-header .p-inputicon svg {
+  width: 15px;
+  height: 15px;
+}
+
+.ns-context .p-select {
+  border-radius: var(--ac-radius-pill);
+}
+
+.ns-context .p-select-label {
+  padding: 6px 4px 6px 12px;
+  font-size: 12px;
+}
+
+.ns-context .p-select-dropdown {
+  width: 28px;
+}
+
+.p-skeleton {
+  background: color-mix(in srgb, var(--ac-text) 10%, transparent);
+}
+
+.ns-table .is-skeleton > td {
+  padding-block: 16px;
+}
+
+.ns-tree-toggle {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--ac-text-muted);
+  cursor: pointer;
+}
+
+.ns-tree-toggle:hover {
+  background: color-mix(in srgb, var(--ac-text) 10%, transparent);
+  color: var(--ac-text);
+}
+
+.ns-tree-toggle i {
+  font-size: 11px;
+}
+
+.ns-tree-spacer {
+  display: inline-block;
+  flex: none;
+  width: 18px;
+}