@praxisui/core 8.0.0-beta.0 → 8.0.0-beta.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@praxisui/core",
-  "version": "8.0.0-beta.0",
+  "version": "8.0.0-beta.11",
   "description": "Core library for Praxis UI Workspace: types, tokens, services and utilities shared across @praxisui/* packages.",
   "peerDependencies": {
     "@angular/common": "^20.0.0",

package/theme-bridge.css

@@ -0,0 +1,174 @@
+/*
+ * Praxis UI host theme bridge.
+ *
+ * Import this file after the Angular Material theme and the CDK overlay CSS.
+ * The bridge assumes Material Symbols and, when mi:* ligatures are used,
+ * Material Icons classic are loaded by the host HTML.
+ */
+
+:root {
+  --md-sys-color-primary: var(--mat-sys-primary, #006a6a);
+  --md-sys-color-on-primary: var(--mat-sys-on-primary, #ffffff);
+  --md-sys-color-primary-container: var(--mat-sys-primary-container, #9cf1ef);
+  --md-sys-color-on-primary-container: var(--mat-sys-on-primary-container, #002020);
+  --md-sys-color-secondary: var(--mat-sys-secondary, #4a6363);
+  --md-sys-color-on-secondary: var(--mat-sys-on-secondary, #ffffff);
+  --md-sys-color-secondary-container: var(--mat-sys-secondary-container, #cce8e7);
+  --md-sys-color-on-secondary-container: var(--mat-sys-on-secondary-container, #051f20);
+  --md-sys-color-tertiary: var(--mat-sys-tertiary, #4b607c);
+  --md-sys-color-on-tertiary: var(--mat-sys-on-tertiary, #ffffff);
+  --md-sys-color-tertiary-container: var(--mat-sys-tertiary-container, #d3e4ff);
+  --md-sys-color-on-tertiary-container: var(--mat-sys-on-tertiary-container, #041c35);
+  --md-sys-color-error: var(--mat-sys-error, #ba1a1a);
+  --md-sys-color-on-error: var(--mat-sys-on-error, #ffffff);
+  --md-sys-color-error-container: var(--mat-sys-error-container, #ffdad6);
+  --md-sys-color-on-error-container: var(--mat-sys-on-error-container, #410002);
+  --md-sys-color-surface: var(--mat-sys-surface, #fbfcfc);
+  --md-sys-color-surface-container-lowest: var(--mat-sys-surface-container-lowest, #ffffff);
+  --md-sys-color-surface-container-low: var(--mat-sys-surface-container-low, #f2f6f5);
+  --md-sys-color-surface-container: var(--mat-sys-surface-container, #ecefed);
+  --md-sys-color-surface-container-high: var(--mat-sys-surface-container-high, #e6e9e8);
+  --md-sys-color-surface-container-highest: var(--mat-sys-surface-container-highest, #e0e3e2);
+  --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-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);
+  --md-sys-color-scrim: var(--mat-sys-scrim, #000000);
+  --md-sys-elevation-level1: var(--mat-app-elevation-shadow-level1, 0 1px 2px rgba(0, 0, 0, 0.14));
+  --md-sys-elevation-level2: var(--mat-app-elevation-shadow-level2, 0 2px 6px rgba(0, 0, 0, 0.16));
+  --md-sys-elevation-level3: var(--mat-app-elevation-shadow-level3, 0 4px 12px rgba(0, 0, 0, 0.18));
+
+  --pdx-material-surface: var(--md-sys-color-surface-container);
+  --pdx-material-surface-high: var(--md-sys-color-surface-container-high);
+  --pdx-material-on-surface: var(--md-sys-color-on-surface);
+  --pdx-material-on-surface-muted: var(--md-sys-color-on-surface-variant);
+  --pdx-material-outline: var(--md-sys-color-outline-variant);
+  --pdx-material-focus-outline: var(--md-sys-color-primary);
+  --pdx-overlay-surface: var(--pdx-material-surface);
+  --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);
+}
+
+.material-icons,
+mat-icon.material-icons {
+  direction: ltr;
+  display: inline-block;
+  font-family: "Material Icons";
+  font-feature-settings: "liga";
+  font-size: 24px;
+  font-style: normal;
+  font-weight: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  text-transform: none;
+  white-space: nowrap;
+  word-wrap: normal;
+  -webkit-font-feature-settings: "liga";
+  -webkit-font-smoothing: antialiased;
+}
+
+.material-symbols-outlined,
+.material-symbols-rounded,
+.material-symbols-sharp,
+mat-icon.material-symbols-outlined,
+mat-icon.material-symbols-rounded,
+mat-icon.material-symbols-sharp {
+  direction: ltr;
+  display: inline-block;
+  font-feature-settings: "liga";
+  font-size: 24px;
+  font-style: normal;
+  font-weight: normal;
+  letter-spacing: normal;
+  line-height: 1;
+  text-transform: none;
+  white-space: nowrap;
+  word-wrap: normal;
+  -webkit-font-feature-settings: "liga";
+  -webkit-font-smoothing: antialiased;
+}
+
+.material-symbols-outlined,
+mat-icon.material-symbols-outlined {
+  font-family: "Material Symbols Outlined";
+}
+
+.material-symbols-rounded,
+mat-icon.material-symbols-rounded {
+  font-family: "Material Symbols Rounded";
+}
+
+.material-symbols-sharp,
+mat-icon.material-symbols-sharp {
+  font-family: "Material Symbols Sharp";
+}
+
+.cdk-overlay-container {
+  color: var(--pdx-overlay-on-surface);
+}
+
+.cdk-overlay-container .mat-mdc-dialog-container {
+  --mdc-dialog-container-color: var(--pdx-overlay-surface);
+  --mdc-dialog-subhead-color: var(--pdx-overlay-on-surface);
+  --mdc-dialog-supporting-text-color: var(--pdx-overlay-on-surface-muted);
+}
+
+.cdk-overlay-container .mat-mdc-select-panel,
+.cdk-overlay-container .mat-mdc-autocomplete-panel,
+.cdk-overlay-container .mat-mdc-menu-panel {
+  background: var(--pdx-overlay-surface);
+  border: 1px solid var(--pdx-material-outline);
+  box-shadow: var(--md-sys-elevation-level2);
+  color: var(--pdx-overlay-on-surface);
+}
+
+.cdk-overlay-container .mat-mdc-option,
+.cdk-overlay-container .mat-mdc-menu-item {
+  color: var(--pdx-overlay-on-surface);
+}
+
+.cdk-overlay-container .mat-mdc-option.mdc-list-item--selected,
+.cdk-overlay-container .mat-mdc-option.mat-mdc-option-active,
+.cdk-overlay-container .mat-mdc-menu-item:hover,
+.cdk-overlay-container .mat-mdc-menu-item.cdk-program-focused,
+.cdk-overlay-container .mat-mdc-menu-item.cdk-keyboard-focused {
+  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);
+}
+
+.mat-mdc-form-field {
+  --mdc-filled-text-field-container-color: var(--md-sys-color-surface-container-low);
+  --mdc-filled-text-field-input-text-color: var(--pdx-material-on-surface);
+  --mdc-filled-text-field-label-text-color: var(--pdx-material-on-surface-muted);
+  --mdc-filled-text-field-focus-label-text-color: var(--pdx-material-focus-outline);
+  --mdc-filled-text-field-active-indicator-color: var(--pdx-material-outline);
+  --mdc-filled-text-field-focus-active-indicator-color: var(--pdx-material-focus-outline);
+  --mdc-outlined-text-field-input-text-color: var(--pdx-material-on-surface);
+  --mdc-outlined-text-field-label-text-color: var(--pdx-material-on-surface-muted);
+  --mdc-outlined-text-field-focus-label-text-color: var(--pdx-material-focus-outline);
+  --mdc-outlined-text-field-outline-color: var(--pdx-material-outline);
+  --mdc-outlined-text-field-hover-outline-color: var(--md-sys-color-outline);
+  --mdc-outlined-text-field-focus-outline-color: var(--pdx-material-focus-outline);
+  --mat-select-enabled-trigger-text-color: var(--pdx-material-on-surface);
+  --mat-select-panel-background-color: var(--pdx-material-surface);
+}
+
+.mat-mdc-button,
+.mat-mdc-outlined-button,
+.mat-mdc-raised-button,
+.mat-mdc-unelevated-button {
+  --mdc-text-button-label-text-color: var(--md-sys-color-primary);
+  --mdc-outlined-button-label-text-color: var(--md-sys-color-primary);
+  --mdc-outlined-button-outline-color: var(--pdx-material-outline);
+  --mdc-protected-button-container-color: var(--md-sys-color-surface-container-low);
+  --mdc-protected-button-label-text-color: var(--md-sys-color-primary);
+  --mdc-filled-button-container-color: var(--md-sys-color-primary);
+  --mdc-filled-button-label-text-color: var(--md-sys-color-on-primary);
+}