@ngxviewbuilder/runtime 0.10.5 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngxviewbuilder/runtime",
-  "version": "0.10.5",
+  "version": "0.12.0",
   "description": "Native Angular runtime for NGX View Builder: renders forms, dashboards, data tables and guided flows defined as JSON.",
   "license": "SEE LICENSE IN LICENSE.md",
   "homepage": "https://ngxviewbuilder.io",

package/styles/components.css

@@ -1,4 +1,7 @@
-.nvb-root {
+.nvb-root,
+/* Tokens derived from the palette resolve where they are declared, so a dark page section
+   declares them again; otherwise it inherits the light values computed at the root. */
+.nvb-section-theme-dark {
   --nvb-button-height-lg: 40px;
   --nvb-button-height-ms: 32px;
   --nvb-button-height-sm: 32px;
@@ -33,12 +36,12 @@
   --nvb-shadow-16:
     0 8px 16px color-mix(in oklab, var(--nvb-color-neutral-950) 12%, transparent),
     0 24px 48px color-mix(in oklab, var(--nvb-color-neutral-950) 14%, transparent);
-  --nvb-dialog-radius: var(--nvb-radius-lg);
-  --nvb-menu-radius: var(--nvb-input-radius, var(--nvb-radius-md));
+  --nvb-dialog-radius: var(--nvb-radius-xl);
+  --nvb-menu-radius: var(--nvb-radius-lg);
   --nvb-tablist-height: 40px;
   --nvb-card-bg: var(--nvb-color-neutral-000);
   --nvb-card-border-color: var(--nvb-color-neutral-200);
-  --nvb-card-radius: var(--nvb-radius-md);
+  --nvb-card-radius: var(--nvb-radius-lg);
   --nvb-card-shadow: var(--nvb-shadow-2);
   --nvb-card-padding: 12px;
 }

package/styles/element.css

@@ -475,12 +475,12 @@
   margin-top: -1px;
 }
 
-.nvb-root .nvb-select-button--buttons.nvb-select-button--horizontal .nvb-select-button__option:first-child { border-radius: 6px 0 0 6px; }
-.nvb-root .nvb-select-button--buttons.nvb-select-button--horizontal .nvb-select-button__option:last-child { border-radius: 0 6px 6px 0; }
-.nvb-root .nvb-select-button--buttons.nvb-select-button--horizontal .nvb-select-button__option:first-child:last-child { border-radius: 6px; }
-.nvb-root .nvb-select-button--buttons.nvb-select-button--vertical .nvb-select-button__option:first-child { border-radius: 6px 6px 0 0; }
-.nvb-root .nvb-select-button--buttons.nvb-select-button--vertical .nvb-select-button__option:last-child { border-radius: 0 0 6px 6px; }
-.nvb-root .nvb-select-button--buttons.nvb-select-button--vertical .nvb-select-button__option:first-child:last-child { border-radius: 6px; }
+.nvb-root .nvb-select-button--buttons.nvb-select-button--horizontal .nvb-select-button__option:first-child { border-radius: var(--nvb-radius-md) 0 0 var(--nvb-radius-md); }
+.nvb-root .nvb-select-button--buttons.nvb-select-button--horizontal .nvb-select-button__option:last-child { border-radius: 0 var(--nvb-radius-md) var(--nvb-radius-md) 0; }
+.nvb-root .nvb-select-button--buttons.nvb-select-button--horizontal .nvb-select-button__option:first-child:last-child { border-radius: var(--nvb-radius-md); }
+.nvb-root .nvb-select-button--buttons.nvb-select-button--vertical .nvb-select-button__option:first-child { border-radius: var(--nvb-radius-md) var(--nvb-radius-md) 0 0; }
+.nvb-root .nvb-select-button--buttons.nvb-select-button--vertical .nvb-select-button__option:last-child { border-radius: 0 0 var(--nvb-radius-md) var(--nvb-radius-md); }
+.nvb-root .nvb-select-button--buttons.nvb-select-button--vertical .nvb-select-button__option:first-child:last-child { border-radius: var(--nvb-radius-md); }
 
 .nvb-root .nvb-select-button--buttons .nvb-select-button__option:hover:not(:disabled) {
   background: color-mix(in oklab, var(--nvb-color-neutral-100) 80%, var(--nvb-color-neutral-000));
@@ -554,7 +554,7 @@
   width: fit-content;
   max-width: 100%;
   padding: 3px;
-  border-radius: 999px;
+  border-radius: var(--nvb-radius-full);
   background: color-mix(in oklab, var(--nvb-color-neutral-100) 85%, var(--nvb-color-neutral-000));
   border: 1px solid color-mix(in oklab, var(--nvb-color-neutral-300) 55%, transparent);
 }
@@ -573,7 +573,7 @@
   min-height: var(--nvb-control-height, 36px);
   padding: 0 16px;
   border: 0;
-  border-radius: 999px;
+  border-radius: var(--nvb-radius-full);
   background: transparent;
   color: var(--nvb-color-neutral-600);
   font-size: 14px;

package/styles/tokens.css

@@ -105,10 +105,11 @@
     --nvb-color-text-800: oklch(27.53% 0.0364 259.7);
     --nvb-color-text-900: oklch(20.64% 0.0388 265.55);
     --nvb-color-text-950: oklch(12.92% 0.0415 265.15);
-    --nvb-radius-sm: 2px;
-    --nvb-radius-md: 4px;
+    --nvb-radius-sm: 4px;
+    --nvb-radius-md: 6px;
     --nvb-radius-lg: 8px;
     --nvb-radius-xl: 12px;
+    --nvb-radius-full: 999px;
     --nvb-space-0: 2px;
     --nvb-space-1: 4px;
     --nvb-space-2: 6px;
@@ -131,12 +132,27 @@
     --nvb-text-md: var(--nvb-text-body1);
     --nvb-text-lg: var(--nvb-text-subtitle2);
     --nvb-color-surface-mix-target: var(--nvb-color-neutral-000);
+    /* Categorical chart colours for parts of a whole (pie, donut). The order is what keeps
+       neighbouring slices apart for colour blind readers, so override the values, not the
+       order. A single series uses --nvb-chart-single, the brand colour. */
+    --nvb-chart-single: var(--nvb-color-primary-500);
+    --nvb-chart-1: #2a78d6;
+    --nvb-chart-2: #eb6834;
+    --nvb-chart-3: #1baf7a;
+    --nvb-chart-4: #eda100;
+    --nvb-chart-5: #e87ba4;
+    --nvb-chart-6: #008300;
+    --nvb-chart-7: #4a3aa7;
+    --nvb-chart-8: #e34948;
+    --nvb-chart-other: var(--nvb-color-neutral-400);
   }
 
   :host([data-theme='dark']),
   :host(.nvb-dark),
   .nvb-root.nvb-dark,
-  .nvb-root[data-theme='dark'] {
+  .nvb-root[data-theme='dark'],
+  /* A panel used as a dark page section takes the dark palette for itself only. */
+  .nvb-section-theme-dark {
     --nvb-font-family-base:
       'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont,
       'Helvetica Neue', sans-serif;
@@ -230,10 +246,11 @@
     --nvb-color-text-800: oklch(88.00% 0.0040 286.00);
     --nvb-color-text-900: oklch(93.00% 0.0030 286.00);
     --nvb-color-text-950: oklch(97.00% 0.0020 286.00);
-    --nvb-radius-sm: 2px;
-    --nvb-radius-md: 4px;
+    --nvb-radius-sm: 4px;
+    --nvb-radius-md: 6px;
     --nvb-radius-lg: 8px;
     --nvb-radius-xl: 12px;
+    --nvb-radius-full: 999px;
     --nvb-space-0: 2px;
     --nvb-space-1: 4px;
     --nvb-space-2: 6px;
@@ -256,6 +273,16 @@
     --nvb-text-md: var(--nvb-text-body1);
     --nvb-text-lg: var(--nvb-text-subtitle2);
     --nvb-color-surface-mix-target: var(--nvb-color-neutral-050);
+    --nvb-chart-single: var(--nvb-color-primary-500);
+    --nvb-chart-1: #3987e5;
+    --nvb-chart-2: #d95926;
+    --nvb-chart-3: #199e70;
+    --nvb-chart-4: #c98500;
+    --nvb-chart-5: #d55181;
+    --nvb-chart-6: #008300;
+    --nvb-chart-7: #9085e9;
+    --nvb-chart-8: #e66767;
+    --nvb-chart-other: var(--nvb-color-neutral-500);
   }
 
   /* The palette above is a light theme, and every text colour in it assumes a light
@@ -308,7 +335,8 @@
   :host([data-theme='dark']) .nvb-root,
   :host(.nvb-dark) .nvb-root,
   .nvb-root.nvb-dark,
-  .nvb-root[data-theme='dark'] {
+  .nvb-root[data-theme='dark'],
+  .nvb-section-theme-dark {
     color-scheme: dark;
   }
 }