/* PRM Portal — brand tokens. Edit this file to rebrand. */ :root { /* --------------------------------------------------------------------- * 1. Experience Cloud (DXP) tokens — seed values, may be overridden by * Experience Builder Branding at runtime. * --------------------------------------------------------------------- */ --dxp-g-brand: #020E92; --dxp-g-brand-1: #1B36C1; --dxp-g-brand-accent: #00E5DC; --dxp-g-neutral-1: #F5F7FB; --dxp-g-neutral-2: #D9DEE8; --dxp-g-text: #0A0909; --dxp-g-text-muted: #707070; --dxp-g-font-family: Moderat; --dxp-s-button-font-family:Moderat; --dxp-s-button-font-style:normal; --dxp-s-button-font-weight:700; --dxp-s-button-font-size:18px; --dxp-s-section-columns-max-width: 3000px; --dxp-s-dropdown-color-background-hover: #EDEEFF; /*********************************/ /*************Button**************/ /********************************/ --dxp-s-button-font-style :bold; --dxp-s-button-font-weight :700; --prm-1-50-color: #E6E7F4; --prm-1-300-color: #676EBE; --color-1-200: #9A9FD3; --prm-white: #FFFFFF; --prm-black: #000000; --prm-hover-background: #EDEEFF; /* --------------------------------------------------------------------- * 2. PRM design tokens — what every component CSS references. Tokens * that should track Experience Builder Branding REFERENCE the DXP * layer; tokens that are intentionally locked to the design use * literal values. * --------------------------------------------------------------------- */ /* Brand palette — admins can repoint these via Experience Builder */ --prm-navy: var(--dxp-g-brand); --prm-navy-hover: var(--dxp-g-brand-1); --prm-cyan: var(--dxp-g-brand-accent); --prm-text: var(--dxp-g-text); --prm-text-muted: var(--dxp-g-text-muted); --prm-bg-soft: var(--dxp-g-neutral-1); --prm-border: var(--dxp-g-neutral-2); --prm-text-1-50-color: var(--prm-1-50-color); --prm-text-1-300-color: var(--prm-1-300-color); /* Locked design values — not exposed to admin Branding (intentional). * Edit here if the design system itself needs to change. */ --prm-bg-page: #F1F0EE; --prm-bg-muted: #E3E6F0; --prm-border-soft: #CECECE; --prm-border-input: rgba(10, 9, 9, 0.6); --prm-table-head-bg: #CCCFE9; --prm-link: #4E56B3; --prm-danger: #B3261E; --prm-success: #146C2E; --prm-warning: #B26A00; /* used by .prm-status-inactive in prmUtilities.css */ --prm-status-active-color: #32A832; --prm-status-inactive-color: #CD7C00; /* Typography */ --prm-font-family: var(--dxp-g-font-family, Moderat); --prm-nav-icon-size:24px; /*Font Size*/ --prm-font-s-size:14px; --prm-font-m-size:16px; --prm-font-l-size:20px; /*Font Weight*/ --prm-font-weight-400:400; --prm-font-weight-500:500; --prm-font-weight-600:600; --prm-font-weight-700:700; /* --------------------------------------------------------------------- * SLDS global tokens — drive SLDS utility classes and hooks * --------------------------------------------------------------------- */ --slds-g-color-brand-base-50: #0A1F8F; --slds-g-color-brand-base-30: #060F4A; --slds-g-color-brand-base-60: #1B36C1; --slds-g-color-accent-1: #00E5DC; --slds-g-color-on-brand: #FFFFFF; --slds-g-color-neutral-base-95: #F5F7FB; --slds-g-color-border-base-1: #D9DEE8; --slds-g-color-neutral-base-50: #0A0909; --slds-g-color-on-surface-1: #0E1430; --slds-g-color-on-surface-2: #5B6478; /* --------------------------------------------------------------------- * SLDS component hooks — applied here so EVERY lightning-button[brand], * lightning-input, lightning-datatable, etc. picks up PRM styling. * --------------------------------------------------------------------- */ /* Vocus button tokens — components map SLDS hooks to these */ --component-button-primary-default-fill: #00FFFF; --component-button-primary-default-border: #00FFFF; --component-button-primary-default-label: #020E92; --component-button-primary-hovered-fill: #020E92; --component-button-primary-hovered-border: #020E92; --component-button-primary-hovered-label: #FFFFFF; --component-button-secondary-default-fill: #FFFFFF; --component-button-secondary-default-border: #020E92; --component-button-secondary-default-label:#020E92; --component-button-secondary-hovered-fill: #020E92; --component-button-secondary-hovered-border: #020E92; --component-button-tertiary-default-fill: #FFFFFF; --component-button-tertiary-default-border: #FFFFFF; --component-button-tertiary-default-label: #020E92; --component-focused-border: #020E92; --component-card-border:#FFFFFF; --component-card-surface: #FFFFFF; --component-card-separator: #0A09091A; --component-card-inverted-separator: #FFFFFF99; --component-input-default-border: #0A090999; --component-radio-tab-tab-hovered-border: #CCCFE9; /* Disabled state — fill is used for both background and border */ --component-button-disabled-fill: #E8E8E8; --component-button-disabled-label: #0A090933; --inactive-border: #707070; --inactive-fill: #DDDDDD; --border-low:#0A09091A; --icon-base: #0A0909; --icon-low: #707070; --icon-accent: #020E92; --text-base: #0A0909; --slds-c-icon-color-foreground: #020E92; --slds-c-icon-color-foreground-default : #020E92; --slds-c-input-radius-border: 32px; --slds-c-input-color-border: rgba(10, 9, 9, 0.6); --slds-c-input-color-border-focus: #0A1F8F; --slds-c-combobox-radius-border: 32px; --slds-c-combobox-color-border: rgba(10, 9, 9, 0.6); --slds-c-datatable-heading-color-background: #CCCFE9; --slds-c-datatable-heading-text-color: #0A1F8F; --slds-c-card-radius-border: 12px; --slds-c-card-color-border: #D9DEE8; --slds-c-card-shadow: 0 1px 2px rgba(10, 31, 143, 0.04); /******** Mannually added tokens*********/ --slds-c-modal-radius-border: var(--prm-m-radius); --slds-c-modal-header-color-background: #FFFFFF; --slds-c-tabs-default-color-border-active: #0A1F8F; --slds-c-tabs-default-color-text-active: #0A1F8F; --slds-c-tabs-list-color-border : #0A09091A; --slds-c-tabs-item-spacing-inline: 32px; --slds-c-tabs-item-spacing-block : 8px; --slds-c-tabs-item-text-color-active:var(--dxp-g-brand); --slds-c-tabs-panel-spacing-blockstart:24px; /* Radii / shape */ --prm-s-radius: 12px; --prm-m-radius: 20px; --prm-l-radius: 32px; --prm-xxl-radius: 100px; --prm-radius-pill: 999px; --prm-radius-input: 32px; /*******Modal size primitives*********/ /* Width presets driven by Figma. `size` prop on c-prm-custom-modal maps to these. Instance can override via the `width` prop, which sets --prm-modal-width inline. */ --prm-modal-size-small: 600px; --prm-modal-size-medium: 700px; --prm-modal-padding: 40px 96px 40px 40px; /* No default cap — the modal overlay scrolls the whole card into view when it's taller than the viewport. Set --prm-modal-max-height-instance on a specific modal to opt back into internal scrolling. */ --prm-modal-max-height: none; /*******DropDown**************/ --slds-c-dropdown-font-size:16px; --slds-c-dropdown-font-weight:400; --slds-c-dropdown-font-family:Moderat; --slds-c-dropdown-font-lineheight:24px; }