/* * Tenant presentation roles. * * The default values deliberately read from Radzen so built-in Radzen theme * changes flow into tenant pages automatically. A future tenant theme * applicator may set a complete role set on and add * data-tenant-theme; the bridge below then lets Radzen components consume * the same values. Do not add data-tenant-theme until that complete role set * is present, otherwise aliases can form a CSS-variable cycle. */ :root { --tenant-surface-canvas: var(--rz-body-background-color); --tenant-surface-chrome: var(--rz-layout-background-color); --tenant-surface-raised: var(--rz-card-background-color); --tenant-surface-subtle: var(--rz-base-100); --tenant-surface-hover: color-mix(in srgb, var(--tenant-surface-subtle) 74%, var(--tenant-brand) 26%); --tenant-surface-tint: color-mix(in srgb, var(--tenant-surface-raised) 88%, var(--tenant-brand) 12%); --tenant-border-subtle: var(--rz-base-300); --tenant-border-strong: color-mix(in srgb, var(--tenant-brand) 46%, var(--tenant-border-subtle)); --tenant-text-strong: var(--rz-text-title-color); --tenant-text-default: var(--rz-text-color); --tenant-text-muted: var(--rz-text-secondary-color); --tenant-text-subtle: var(--rz-text-tertiary-color); --tenant-text-disabled: var(--rz-text-disabled-color); --tenant-brand: var(--rz-primary); --tenant-brand-hover: var(--rz-primary-light); --tenant-brand-active: var(--rz-primary-dark); --tenant-brand-soft: var(--rz-primary-lighter); --tenant-on-brand: var(--rz-on-primary); --tenant-action: var(--rz-warning); --tenant-action-hover: var(--rz-warning-light); --tenant-action-active: var(--rz-warning-dark); --tenant-action-soft: var(--rz-warning-lighter); --tenant-on-action: var(--rz-on-warning); --tenant-status-open: var(--rz-success); --tenant-status-full: var(--rz-warning); --tenant-status-closed: var(--rz-secondary); --tenant-status-error: var(--rz-danger); --tenant-on-status-open: var(--rz-on-success); --tenant-on-status-full: var(--rz-on-warning); --tenant-on-status-closed: var(--rz-on-secondary); --tenant-on-status-error: var(--rz-on-danger); --tenant-domain-water: var(--tenant-brand); --tenant-domain-field: color-mix(in srgb, var(--tenant-status-open) 72%, var(--tenant-brand)); --tenant-domain-motion: color-mix(in srgb, var(--tenant-brand) 78%, var(--tenant-text-strong)); --tenant-domain-safety: var(--tenant-action); --tenant-image-scrim: color-mix(in srgb, var(--tenant-surface-canvas) 74%, transparent); --tenant-image-scrim-soft: color-mix(in srgb, var(--tenant-surface-canvas) 44%, transparent); --tenant-focus-ring: var(--rz-outline-color); --tenant-radius-control: var(--rz-button-border-radius, var(--rz-border-radius)); --tenant-radius-card: var(--rz-card-border-radius); --tenant-shadow-card: var(--rz-card-shadow); } /* * Opt-in bridge for a future dynamic tenant-theme applicator. That applicator * owns the complete --tenant-* palette and can use ThemeService.SetTheme for * the Radzen stylesheet at the same time. */ html[data-tenant-theme] { --rz-body-background-color: var(--tenant-surface-canvas); --rz-layout-background-color: var(--tenant-surface-canvas); --rz-base-background-color: var(--tenant-surface-raised); --rz-header-background-color: var(--tenant-surface-chrome); --rz-sidebar-background-color: var(--tenant-surface-chrome); --rz-footer-background-color: var(--tenant-surface-chrome); --rz-card-background-color: var(--tenant-surface-raised); --rz-card-border: 1px solid var(--tenant-border-subtle); --rz-card-border-radius: var(--tenant-radius-card); --rz-card-shadow: var(--tenant-shadow-card); --rz-text-title-color: var(--tenant-text-strong); --rz-text-color: var(--tenant-text-default); --rz-text-secondary-color: var(--tenant-text-muted); --rz-text-tertiary-color: var(--tenant-text-subtle); --rz-text-disabled-color: var(--tenant-text-disabled); --rz-primary: var(--tenant-brand); --rz-primary-light: var(--tenant-brand-hover); --rz-primary-dark: var(--tenant-brand-active); --rz-primary-lighter: var(--tenant-brand-soft); --rz-on-primary: var(--tenant-on-brand); --rz-warning: var(--tenant-action); --rz-warning-light: var(--tenant-action-hover); --rz-warning-dark: var(--tenant-action-active); --rz-warning-lighter: var(--tenant-action-soft); --rz-on-warning: var(--tenant-on-action); --rz-link-color: var(--tenant-brand); --rz-link-hover-color: var(--tenant-brand-hover); --rz-outline-color: var(--tenant-focus-ring); --rz-border-radius: var(--tenant-radius-control); --rz-button-border-radius: var(--tenant-radius-control); }