@praxisui/core 10.0.0-rc.0 → 10.0.0-rc.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@praxisui/core",
-  "version": "10.0.0-rc.0",
+  "version": "10.0.0-rc.10",
   "description": "Core library for Praxis UI Workspace: types, tokens, services and utilities shared across @praxisui/* packages.",
   "peerDependencies": {
     "@angular/cdk": "^21.0.0",
@@ -19,6 +19,12 @@
   "license": "Apache-2.0",
   "exports": {
     "./theme-bridge.css": "./theme-bridge.css",
+    "./theming": {
+      "sass": "./theming/_theming.scss",
+      "style": "./theming/_theming.scss",
+      "default": "./theming/_theming.scss"
+    },
+    "./theming/*": "./theming/*",
     "./package.json": {
       "default": "./package.json"
     },
@@ -26,6 +32,10 @@
       "types": "./types/praxisui-core.d.ts",
       "default": "./fesm2022/praxisui-core.mjs"
     },
+    "./schema": {
+      "types": "./types/praxisui-core-schema.d.ts",
+      "default": "./fesm2022/praxisui-core-schema.mjs"
+    },
     "./ai/component-registry.json": {
       "default": "./ai/component-registry.json"
     }
@@ -41,11 +51,13 @@
     "core",
     "design-system",
     "tokens",
+    "theming",
     "widgets",
     "configuration"
   ],
   "sideEffects": [
-    "./theme-bridge.css"
+    "./theme-bridge.css",
+    "./theming/**"
   ],
   "module": "fesm2022/praxisui-core.mjs",
   "typings": "types/praxisui-core.d.ts",

package/theme-bridge.css

@@ -32,6 +32,15 @@
   --md-sys-color-surface-variant: var(--mat-sys-surface-variant, #dae5e3);
   --md-sys-color-on-surface: var(--mat-sys-on-surface, #191c1c);
   --md-sys-color-on-surface-variant: var(--mat-sys-on-surface-variant, #3f4948);
+  --md-sys-color-inverse-surface: var(--mat-sys-inverse-surface, #313033);
+  --md-sys-color-inverse-on-surface: var(--mat-sys-inverse-on-surface, #f4f0f4);
+  --mat-sys-inverse-surface: var(--md-sys-color-inverse-surface, #313033);
+  --mat-sys-inverse-on-surface: var(--md-sys-color-inverse-on-surface, #f4f0f4);
+  --mat-sys-corner-extra-small: var(--radius-sm, 6px);
+  --mat-sys-body-small-font: var(--md-sys-typescale-body-small-font, inherit);
+  --mat-sys-body-small-size: 12px;
+  --mat-sys-body-small-weight: 500;
+  --mat-sys-body-small-line-height: 16px;
   --md-sys-color-outline: var(--mat-sys-outline, #6f7978);
   --md-sys-color-outline-variant: var(--mat-sys-outline-variant, #bec9c7);
   --md-sys-color-shadow: var(--mat-sys-shadow, #000000);
@@ -50,6 +59,15 @@
   --pdx-overlay-on-surface: var(--pdx-material-on-surface);
   --pdx-overlay-on-surface-muted: var(--pdx-material-on-surface-muted);
   --pdx-overlay-state-layer: var(--md-sys-color-surface-container-high);
+
+  /* Angular Material Tooltip Component Tokens */
+  --mat-tooltip-container-color: var(--mat-sys-inverse-surface);
+  --mat-tooltip-supporting-text-color: var(--mat-sys-inverse-on-surface);
+  --mat-tooltip-container-shape: var(--mat-sys-corner-extra-small);
+  --mat-tooltip-supporting-text-font: var(--mat-sys-body-small-font);
+  --mat-tooltip-supporting-text-size: var(--mat-sys-body-small-size);
+  --mat-tooltip-supporting-text-weight: var(--mat-sys-body-small-weight);
+  --mat-tooltip-supporting-text-line-height: var(--mat-sys-body-small-line-height);
 }
 
 .material-icons,
@@ -138,9 +156,10 @@ mat-icon.material-symbols-sharp {
   background: var(--pdx-overlay-state-layer);
 }
 
-.cdk-overlay-container .mat-mdc-tooltip .mdc-tooltip__surface {
-  background: var(--md-sys-color-inverse-surface, #2d3131);
-  color: var(--md-sys-color-inverse-on-surface, #eff1f0);
+.cdk-overlay-container .mat-mdc-tooltip .mdc-tooltip__surface,
+.cdk-overlay-container .mat-mdc-tooltip-surface {
+  background: var(--mat-tooltip-container-color, var(--md-sys-color-inverse-surface, #313033));
+  color: var(--mat-tooltip-supporting-text-color, var(--md-sys-color-inverse-on-surface, #f4f0f4));
 }
 
 /* Tooltips are descriptive overlays and must never block the control beneath

package/theming/README.md

@@ -0,0 +1,63 @@
+# @praxisui/core - Canonical SCSS Theming & Design Token Bridge
+
+This module provides the official Sass mixins and design token bridge for integrating Praxis UI with host applications, design systems (Material Design 3, Tailwind, shadcn/ui, OKLCH tokens), and custom enterprise palettes.
+
+## Features
+
+- **Material Design 3 & Angular Material M3 Bridge**: Automatically derives `--md-sys-color-*` and `--mat-sys-*` tokens.
+- **Praxis Platform Tokens**: Full bridge for `--pdx-material-*`, `--pdx-overlay-*`, `--pdx-page-*`, `--pdx-shell-*`, and `--prx-rich-*`.
+- **Dynamic Color Mixing**: Utilizes modern native CSS `color-mix(in oklab, ...)` for predictable perceptual container/state tinting.
+- **Enterprise Dark Mode**: Declarative `@mixin praxis-dark-theme-overrides` for high-contrast, polished dark surfaces.
+- **Widget Shell & Tooltip Refinements**: Built-in responsive full-screen UX behaviors, solid non-bleeding surfaces, and enterprise-grade tooltip styling.
+
+## Quick Start
+
+### 1. Bundle (All-in-One)
+
+In your global styles (`styles.scss`):
+
+```scss
+@use '@praxisui/core/theming' as praxis;
+
+@include praxis.praxis-theme-bundle();
+```
+
+### 2. Granular / Custom Configuration
+
+If your host defines custom CSS variables or design tokens:
+
+```scss
+@use '@praxisui/core/theming' as praxis;
+
+:root {
+  @include praxis.define-praxis-theme((
+    'primary': var(--primary),
+    'secondary': var(--secondary),
+    'surface': var(--card),
+    'background': var(--background),
+    'foreground': var(--foreground),
+    'border': var(--border),
+    'radius-lg': var(--radius-lg, 12px)
+  ));
+}
+
+.dark {
+  @include praxis.praxis-dark-theme-overrides((
+    'primary': var(--primary),
+    'surface': var(--card),
+    'border': var(--border)
+  ));
+}
+
+// Include UX enhancements for shell dialogs and Material tooltips:
+@include praxis.praxis-shell-styles();
+@include praxis.praxis-tooltip-styles();
+```
+
+## Available Mixins
+
+- `define-praxis-theme($config: ())`: Emits root / light CSS variables.
+- `praxis-dark-theme-overrides($config: ())`: Emits dark mode CSS variable overrides.
+- `praxis-shell-styles()`: Emits fullscreen, backdrop, and expanded widget shell rules.
+- `praxis-tooltip-styles()`: Emits solid surface and high-contrast refinements for Angular Material tooltips.
+- `praxis-theme-bundle($config: (), $dark-config: (), $dark-selector: '.dark')`: Bundles all the above in one declaration.