/* Color Palette -------------------------------------------- */ :root { /* Salesforce Brand */ --brand-accessible: #0176d3; --brand-accessible-active: #014486; --brand-background-dark: #014486; --brand-background-dark-transparent: rgba(1, 68, 134, 0); --brand-background-primary: #eef4ff; --brand-background-primary-transparent: rgba(176, 196, 223, 0); --brand-contrast: #1a1b1e; --brand-contrast-active: #0d0e12; --brand-dark: #0176d3; --brand-dark-active: #253045; --brand-disabled: #c9c7c5; --brand-header: #ffffff; --brand-header-contrast: #5e5e5e; --brand-header-contrast-active: #505050; --brand-header-contrast-cool: #014486; --brand-header-contrast-cool-active: #014486; --brand-header-contrast-inverse: #ffffff; --brand-header-contrast-inverse-active: #eeeeee; --brand-header-contrast-warm: #ba0517; --brand-header-contrast-warm-active: #ba0517; --brand-header-contrast-weak: #919191; --brand-header-contrast-weak-active: #818181; --brand-header-contrast-weak-disabled: rgba(166, 166, 166, 0.25); --brand-header-icon: #919191; --brand-header-icon-active: #818181; --brand-header-icon-disabled: rgba(145, 145, 145, 0.25); --brand-light: #f4f6fe; --brand-light-active: #e3e5ed; --brand-primary: #1b96ff; --brand-primary-active: #0176d3; --brand-primary-transparent: rgba(21, 137, 238, 0.1); --brand-primary-transparent-10: rgba(21, 137, 238, 0.1); --brand-primary-transparent-40: rgba(21, 137, 238, 0.4); --brand-text-link: #0176d3; --brand-text-link-active: #014486; /* Salesforce Color */ --color-gray-1: #ffffff; --color-gray-2: #fafaf9; --color-gray-3: #f3f2f2; --color-gray-4: #ecebea; --color-gray-5: #dddbda; --color-gray-6: #c9c7c5; --color-gray-7: #b0adab; --color-gray-8: #969492; --color-gray-9: #706e6b; --color-gray-10: #514f4d; --color-gray-11: #3e3e3c; --color-gray-12: #2b2826; --color-gray-13: #080707; /* Salesforce Palette */ --palette-blue-10: #001639; --palette-blue-15: #03234d; --palette-blue-20: #032d60; --palette-blue-30: #014486; --palette-blue-40: #0b5cab; --palette-blue-50: #0176d3; --palette-blue-60: #1b96ff; --palette-blue-65: #57a3fd; --palette-blue-70: #78b0fd; --palette-blue-80: #aacbff; --palette-blue-90: #d8e6fe; --palette-blue-95: #eef4ff; --palette-cloud-blue-10: #001a28; --palette-cloud-blue-15: #0a2636; --palette-cloud-blue-20: #023248; --palette-cloud-blue-30: #084968; --palette-cloud-blue-40: #05628a; --palette-cloud-blue-50: #107cad; --palette-cloud-blue-60: #0d9dda; --palette-cloud-blue-65: #08abed; --palette-cloud-blue-70: #1ab9ff; --palette-cloud-blue-80: #90d0fe; --palette-cloud-blue-90: #cfe9fe; --palette-cloud-blue-95: #eaf5fe; --palette-green-10: #071b12; --palette-green-15: #0c2912; --palette-green-20: #0e3522; --palette-green-30: #194e31; --palette-green-40: #22683e; --palette-green-50: #2e844a; --palette-green-60: #3ba755; --palette-green-65: #41b658; --palette-green-70: #45c65a; --palette-green-80: #91db8b; --palette-green-90: #cdefc4; --palette-green-95: #ebf7e6; --palette-hot-orange-10: #281202; --palette-hot-orange-15: #421604; --palette-hot-orange-20: #541d01; --palette-hot-orange-30: #7e2600; --palette-hot-orange-40: #aa3001; --palette-hot-orange-50: #d83a00; --palette-hot-orange-60: #ff5d2d; --palette-hot-orange-65: #ff784f; --palette-hot-orange-70: #ff906e; --palette-hot-orange-80: #feb9a5; --palette-hot-orange-90: #ffded5; --palette-hot-orange-95: #fef1ed; --palette-indigo-10: #200647; --palette-indigo-15: #1f0974; --palette-indigo-20: #260f8f; --palette-indigo-30: #2f2cb7; --palette-indigo-40: #3a49da; --palette-indigo-50: #5867e8; --palette-indigo-60: #7f8ced; --palette-indigo-65: #8e9bef; --palette-indigo-70: #9ea9f1; --palette-indigo-80: #bec7f6; --palette-indigo-90: #e0e5f8; --palette-neutral-10: #181818; --palette-neutral-20: #2e2e2e; --palette-neutral-30: #444444; --palette-neutral-40: #5c5c5c; --palette-neutral-50: #747474; --palette-neutral-60: #939393; --palette-neutral-70: #aeaeae; --palette-neutral-80: #c9c9c9; --palette-neutral-90: #e5e5e5; --palette-neutral-95: #f3f3f3; --palette-neutral-100: #ffffff; --palette-orange-10: #201600; --palette-orange-15: #371e03; --palette-orange-20: #3e2b02; --palette-orange-30: #5f3e02; --palette-orange-40: #825101; --palette-orange-50: #a96404; --palette-orange-60: #dd7a01; --palette-orange-65: #f38303; --palette-orange-70: #fe9339; --palette-orange-80: #ffba90; --palette-orange-90: #fedfd0; --palette-orange-95: #fff1ea; --palette-pink-10: #370114; --palette-pink-15: #4b0620; --palette-pink-20: #61022a; --palette-pink-30: #8a033e; --palette-pink-40: #b60554; --palette-pink-50: #e3066a; --palette-pink-60: #ff538a; --palette-pink-65: #fe7298; --palette-pink-70: #fe8aa7; --palette-pink-80: #fdb6c5; --palette-pink-90: #fddde3; --palette-pink-95: #fef0f3; --palette-purple-10: #240643; --palette-purple-15: #300b60; --palette-purple-20: #401075; --palette-purple-30: #5a1ba9; --palette-purple-40: #7526e3; --palette-purple-50: #9050e9; --palette-purple-60: #ad7bee; --palette-purple-65: #b78def; --palette-purple-70: #c29ef1; --palette-purple-80: #d78ff5; --palette-purple-90: #ece1f9; --palette-purple-95: #f6f2fb; --palette-red-10: #300c01; --palette-red-15: #4a0c04; --palette-red-20: #640103; --palette-red-30: #8e030f; --palette-red-40: #ba0517; --palette-red-50: #ea001e; --palette-red-60: #fe5c4c; --palette-red-65: #fe7765; --palette-red-70: #fe8f7d; --palette-red-80: #feb8ab; --palette-red-90: #feded8; --palette-red-95: #fef1ee; --palette-teal-10:#071b12; --palette-teal-15:#072825; --palette-teal-20:#023434; --palette-teal-30:#024d4c; --palette-teal-40:#056764; --palette-teal-50:#0b827c; --palette-teal-60:#06a59a; --palette-teal-65:#03b4a7; --palette-teal-70:#01c3b3; --palette-teal-80:#04e1cb; --palette-teal-90:#acf3e4; --palette-teal-95:#def9f3; --palette-violet-10: #2e0039; --palette-violet-15: #3d0157; --palette-violet-20: #520066; --palette-violet-30: #730394; --palette-violet-40: #9602c7; --palette-violet-50: #ba01ff; --palette-violet-60: #cb65ff; --palette-violet-65: #d17dfe; --palette-violet-70: #d892fe; --palette-violet-80: #e5b9fe; --palette-violet-90: #f2defe; --palette-violet-95: #f9f0ff; --palette-yellow-10: #281202; --palette-yellow-15: #2e2204; --palette-yellow-20: #4f2100; --palette-yellow-30: #6f3400; --palette-yellow-40: #8c4b02; --palette-yellow-50: #a86403; --palette-yellow-60: #ca8501; --palette-yellow-65: #d79304; --palette-yellow-70: #e4a201; --palette-yellow-80: #fcc003; --palette-yellow-90: #f9e3b6; --palette-yellow-95: #fbf3e0; /* Salesforce Background Color */ --color-background: #f3f2f2; --color-background-alt: #ffffff; --color-background-alt-inverse: #032d60; --color-background-backdrop: rgba(255, 255, 255, 0.75); --color-background-backdrop-tint: #fafaf9; --color-background-customer: #fe9339; --color-background-dark: #ecebea; --color-background-destructive: #ba0517; --color-background-destructive-active: #8e030f; --color-background-destructive-hover: #ba0517; --color-background-error: #fe5c4c; --color-background-error-dark: #ba0517; --color-background-highlight: #faffbd; --color-background-highlight-search: #fff03f; --color-background-image-overlay: rgba(0, 0, 0, 0.6); --color-background-info: #706e6b; --color-background-input: #ffffff; --color-background-input-checkbox-disabled: #dddbda; --color-background-input-disabled: #ecebea; --color-background-inverse: #001639; --color-background-inverse-light: #032d60; --color-background-light: #ffffff; --color-background-notification-new: #f3f2f2; --color-background-offline: #3e3e3c; --color-background-post: #f3f2f2; --color-background-row-active: #ecebea; --color-background-row-hover: #f3f2f2; --color-background-row-new: #cdefc4; --color-background-row-selected: #ecebea; --color-background-scrollbar: #ecebea; --color-background-scrollbar-track: #c9c7c5; --color-background-selection: #d8e6fe; --color-background-spinner-dot: #b0adab; --color-background-stencil: #f3f2f2; --color-background-stencil-alt: #ecebea; --color-background-success: #45c65a; --color-background-success-dark: #2e844a; --color-background-success-darker: #194e31; --color-background-toast: #706e6b; --color-background-toggle: #b0adab; --color-background-toggle-disabled: #b0adab; --color-background-toggle-hover: #969492; --color-background-warning: #fe9339; --color-background-warning-dark: #fe9339; --color-brand: #1b96ff; --color-brand-dark: #0176d3; --color-brand-darker: #014486; --color-picker-slider-thumb-color-background: #f3f2f2; --page-header-color-background: #f3f2f2; --popover-walkthrough-alt-nubbin-color-background: #0176d3; --popover-walkthrough-color-background: #001639; --popover-walkthrough-color-background-alt: #0176d3; --popover-walkthrough-header-color-background: #032d60; --progress-color-background-shade: #f3f2f2; --progress-color-border-shade: #f3f2f2; --table-color-background-header: #fafaf9; --table-color-background-header-hover: #ffffff; /* Salesforce Text Color */ --color-text-action-label: #3e3e3c; --color-text-action-label-active: #080707; --color-text-brand: #1b96ff; --color-text-brand-primary: #ffffff; --color-text-button-default-disabled: #dddbda; --color-text-button-default-hint: #b0adab; --color-text-button-inverse: #ecebea; --color-text-customer: #fe9339; --color-text-default: #080707; --color-text-destructive: #ea001e; --color-text-destructive-hover: #ba0517; --color-text-error: #ea001e; --color-text-icon-default: #706e6b; --color-text-icon-default-disabled: #dddbda; --color-text-icon-default-hint: #b0adab; --color-text-icon-inverse: #ffffff; --color-text-icon-inverse-active: #ffffff; --color-text-icon-inverse-hover: #ffffff; --color-text-input-disabled: #3e3e3c; --color-text-input-icon: #b0adab; --color-text-inverse: #ffffff; --color-text-inverse-weak: #b0adab; --color-text-label: #3e3e3c; --color-text-link: #0176d3; --color-text-link-active: #032d60; --color-text-link-disabled: #032d60; --color-text-link-focus: #014486; --color-text-link-hover: #014486; --color-text-link-inverse: #ffffff; --color-text-link-inverse-active: rgba(255, 255, 255, 0.5); --color-text-link-inverse-disabled: rgba(255, 255, 255, 0.15); --color-text-link-inverse-hover: rgba(255, 255, 255, 0.75); --color-text-placeholder: #706e6b; --color-text-placeholder-inverse: #ecebea; --color-text-required: #ea001e; --color-text-success: #2e844a; --color-text-success-inverse: #45c65a; --color-text-tab-label: #2b2826; --color-text-tab-label-disabled: #ecebea; --color-text-toggle-disabled: #dddbda; --color-text-warning: #fe9339; --color-text-warning-alt: #8c4b02; --color-text-weak: #3e3e3c; /* Salesforce Border Color */ --button-color-border-primary: #dddbda; --card-color-border: #dddbda; --card-footer-color-border: #dddbda; --color-border: #dddbda; --color-border-brand: #1b96ff; --color-border-brand-dark: #014486; --color-border-button-default: #dddbda; --color-border-button-focus-inverse: #ecebea; --color-border-customer: #fe9339; --color-border-destructive: #ea001e; --color-border-destructive-active: #8e030f; --color-border-destructive-hover: #ba0517; --color-border-error: #ea001e; --color-border-error-alt: #fe8f7d; --color-border-error-dark: #fe8f7d; --color-border-info: #706e6b; --color-border-input: #dddbda; --color-border-input-disabled: #c9c7c5; --color-border-inverse: #001639; --color-border-link-focus-inverse: #ecebea; --color-border-offline: #3e3e3c; --color-border-reminder: #ecebea; --color-border-row-selected: #0176d3; --color-border-row-selected-hover: #1b96ff; --color-border-selection: #0176d3; --color-border-selection-active: #fafaf9; --color-border-selection-hover: #1b96ff; --color-border-separator: #fafaf9; --color-border-separator-alt: #dddbda; --color-border-separator-alt-2: #c9c7c5; --color-border-separator-inverse: #032d60; --color-border-success: #91db8b; --color-border-success-dark: #2e844a; --color-border-warning: #fe9339; --page-header-color-border: #dddbda; --page-header-joined-color-border: #dddbda; /* Accent Color */ --accent-200: var(--palette-blue-80); --accent-300: var(--palette-blue-70); --accent-400: var(--palette-blue-60); --accent-500: var(--palette-blue-50); --accent-600: var(--palette-blue-40); --accent-700: var(--palette-blue-30); --accent-800: var(--palette-blue-20); /* Gray Scale Color */ --white: var(--color-gray-1); --gray-050: var(--color-gray-1); --gray-100: var(--color-gray-2); --gray-150: var(--color-gray-3); --gray-200: var(--color-gray-4); --gray-250: var(--color-gray-5); --gray-300: var(--color-gray-6); --gray-350: var(--color-gray-7); --gray-400: var(--color-gray-7); --gray-450: var(--color-gray-8); --gray-500: var(--color-gray-8); --gray-550: var(--color-gray-9); --gray-600: var(--color-gray-9); --gray-650: var(--color-gray-10); --gray-700: var(--color-gray-10); --gray-750: var(--color-gray-11); --gray-800: var(--color-gray-11); --gray-850: var(--color-gray-12); --gray-900: var(--color-gray-12); --gray-950: var(--color-gray-13); --black: var(--color-gray-13); --interactive-primary: var(--accent); --interactive-primary--hover: var(--accent-600); --interactive-primary--active: var(--accent-800); --interactive-primary--selected: var(--accent-700); --interactive-secondary: var(--gray-700); --interactive-secondary--hover: var(--gray-750); --interactive-secondary--active: var(--gray-800); --interactive-secondary--selected: var(--gray-850); --color-series: hsl(220, 100%, 40%); --color-model: hsl(208, 100%, 30%); --color-category: hsl(334, 74%, 36%); --color-option: hsl(180, 100%, 18%); --color-property: hsl(138, 74%, 22%); /* Supporting Colors */ --support-information-lighter: var(--palette-cloud-blue-70); --support-information-light: var(--palette-cloud-blue-50); --support-information-normal: var(--palette-cloud-blue-40); --support-information-dark: var(--palette-cloud-blue-30); --support-information-darker: var(--palette-cloud-blue-10); --support-information-background-light: var(--palette-cloud-blue-95); --support-information-background-normal: var(--palette-cloud-blue-90); --support-information-background-dark: var(--palette-cloud-blue-80); --support-success-lighter: var(--palette-green-70); --support-success-light: var(--palette-green-50); --support-success-normal: var(--palette-green-40); --support-success-dark: var(--palette-green-30); --support-success-darker: var(--palette-green-10); --support-success-background-light: var(--palette-green-95); --support-success-background-normal: var(--palette-green-90); --support-success-background-dark: var(--palette-green-80); --support-mandatory-lighter: var(--palette-hot-orange-70); --support-mandatory-light: var(--palette-hot-orange-50); --support-mandatory-normal: var(--palette-hot-orange-40); --support-mandatory-dark: var(--palette-hot-orange-30); --support-mandatory-darker: var(--palette-hot-orange-10); --support-mandatory-background-light: var(--palette-hot-orange-95); --support-mandatory-background-normal: var(--palette-hot-orange-90); --support-mandatory-background-dark: var(--palette-hot-orange-80); --support-error-lighter: var(--palette-red-70); --support-error-light: var(--palette-red-50); --support-error-normal: var(--palette-red-40); --support-error-dark: var(--palette-red-30); --support-error-darker: var(--palette-red-10); --support-error-background-light: var(--palette-red-95); --support-error-background-normal: var(--palette-red-90); --support-error-background-dark: var(--palette-red-80); --support-warning-lighter: var(--palette-yellow-70); --support-warning-light: var(--palette-yellow-50); --support-warning-normal: var(--palette-yellow-40); --support-warning-dark: var(--palette-yellow-30); --support-warning-darker: var(--palette-yellow-10); --support-warning-background-light: var(--palette-yellow-95); --support-warning-background-normal: var(--palette-yellow-90); --support-warning-background-dark: var(--palette-yellow-80); --support-helper-lighter: var(--palette-violet-70); --support-helper-light: var(--palette-violet-50); --support-helper-normal: var(--palette-violet-40); --support-helper-dark: var(--palette-violet-30); --support-helper-darker: var(--palette-violet-10); --support-helper-background-light: var(--palette-violet-95); --support-helper-background-normal: var(--palette-violet-90); --support-helper-background-dark: var(--palette-violet-80); } /* Color Variables -------------------------------------------- */ :root { --accent: var(--brand-primary); --text-primary: var(--color-text-default); --text-secondary: var(--color-text-action-label); --text-on-brand-primary-color: var(--color-text-brand-primary); --text-on-brand-secondary-color: var(--color-text-inverse); --text-on-color: var(--color-text-inverse); --text-placeholder: var(--color-text-placeholder); --text-inverse: var(--color-text-inverse); --text-input: var(--color-text-default); --text-input--hover: var(--color-text-default); --text-input--focus: var(--color-text-default); --border-light: var(--gray-100); --border-normal: var(--gray-200); --border-dark: var(--gray-500); --border-interactive: var(--gray-200); --border-interactive--hover: var(--gray-300); --border-interactive--active: var(--gray-250); --border-interactive--selected: var(--gray-100); --border-interactive--selected--hover: var(--gray-100); --background: var(--white); --background-tone-100: var(--gray-050); --background-tone-200: var(--gray-100); --background-tone-300: var(--gray-150); --background-tone-400: var(--gray-200); --background-tone-500: var(--gray-250); --background-tone-600: var(--gray-300); --background-tone-700: var(--gray-350); --background-tone-800: var(--gray-400); --background-inverse: var(--gray-800); --button-color: var(--white); --button-color-tone-100: var(--gray-050); --button-color-tone-200: var(--gray-100); --button-color-tone-300: var(--gray-150); --button-primary-color: var(--accent); --button-primary-color-tone-100: var(--accent-600); --button-primary-color-tone-200: var(--accent-700); --button-primary-color-tone-300: var(--accent-800); --button-secondary-color: var(--gray-500); --button-secondary-color-tone-100: var(--gray-550); --button-secondary-color-tone-200: var(--gray-600); --button-secondary-color-tone-300: var(--gray-650); --backdrop: rgba(8, 7, 7, 0.6); --disabled-primary: var(--gray-100); --disabled-secondary: var(--gray-300); --disabled-tertiary: var(--gray-500); } /* Color Variables | Old -------------------------------------------- */ :root { --layer: var(--gray-050); --layer--hover: var(--gray-100); --layer--active: var(--gray-150); --layer--selected: var(--gray-200); --layer--hover--selected: var(--gray-250); --layer-inverse: var(--gray-905); --layer-inverse--hover: var(--gray-900); --layer-inverse--active: var(--gray-800); --layer-inverse--selected: var(--gray-850); --layer-inverse--hover--selected: var(--gray-900); --layer-accent: var(--gray-200); --layer-accent--hover: var(--gray-250); --layer-accent--active: var(--gray-300); --layer-accent--selected: var(--gray-350); --layer-accent--hover--selected: var(--gray-400); --layer-accent-inverse: var(--gray-900); } /*-------------------------------------------- */ /*-------------------------------------------- */ /*-------------------------------------------- */ /* Components -------------------------------------------- */ /* Action Panel */ .action-panels { --actionpanel-background-color: var(--background); --actionpanel-tab-strip-background-color: var(--background-tone-100); /* Action Panel Button */ --actionpanel-tab-item-border-color: var(--support-information-normal); --actionpanel-tab-item-border-color--hover: var(--support-information-dark); --actionpanel-tab-item-border-color--active: var(--support-information-light); --actionpanel-tab-item-border-color--selected: var(--support-information-light); --actionpanel-tab-item-background-color: var(--support-information-background-normal); --actionpanel-tab-item-background-color--hover: var(--support-information-background-dark); --actionpanel-tab-item-background-color--active: var(--support-information-background-light); --actionpanel-tab-item-background-color--selected: var(--support-information-background-light); --actionpanel-tab-item-icon-color: var(--support-information-normal); --actionpanel-tab-item-icon-color--hover: var(--support-information-dark); --actionpanel-tab-item-icon-color--active: var(--support-information-light); --actionpanel-tab-item-icon-color--selected: var(--support-information-light); --actionpanel-titlebar-background-color: var(--brand-secondary); --actionpanel-titlebar-text-color: var(--text-on-brand-secondary-color); --actionpanel-content-background-color: var(--background); --actionpanel-message-count-background-color: var(--support-error-normal); --actionpanel-message-count-text-color: var(--text-on-color); } /* Body */ .xBody { --body-background-color: linear-gradient(180deg, rgba(26,90,149,1) 0%, rgba(176,196,223,1) 100px, rgba(176,196,223,1) 100%);; } /* Button */ :is(.btn, .flat-button, .xIBLink, .xDialogButton) { --button-border-color: var(--button-color); --button-border-color--hover: var(--button-color-tone-100); --button-border-color--active: var(--button-color-tone-300); --button-border-color--selected: var(--button-color-tone-200); --button-border-color--selected--hover: var(--button-color-tone-100); --button-border-color--disabeled: var(--button-secondary-color); --button-background-color: var(--button-color); --button-background-color--hover: var(--button-color-tone-100); --button-background-color--active: var(--button-color-tone-300); --button-background-color--selected: var(--button-color-tone-200); --button-background-color--selected--hover: var(--button-color-tone-100); --button-background-color--disabled: var(--button-secondary-color); --button-text-color: var(--text-primary); --button-text-color--hover: var(--text-primary); --button-text-color--active: var(--text-primary); --button-text-color--selected: var(--text-primary); --button-text-color--selected--hover: var(--text-primary); --button-text-color--disabled: var(--text-primary); --button-primary-border-color: var(--brand-accessible); --button-primary-border-color--hover: var(--brand-accessible-active); --button-primary-border-color--active: var(--brand-accessible-active); --button-primary-border-color--selected: var(--brand-accessible-active); --button-primary-border-color--selected--hover: var(--brand-accessible-active); --button-primary-border-color--disabeled: var(--color-background-toggle-disabled); --button-primary-background-color: var(--brand-accessible); --button-primary-background-color--hover: var(--brand-accessible-active); --button-primary-background-color--active: var(--brand-accessible-active); --button-primary-background-color--selected: var(--brand-accessible-active); --button-primary-background-color--selected--hover: var(--brand-accessible-active); --button-primary-background-color--disabled: var(---color-background-toggle-disabled); --button-primary-text-color: var(--white); --button-primary-text-color--hover: var(--white); --button-primary-text-color--active: var(--white); --button-primary-text-color--selected: var(--white); --button-primary-text-color--selected--hover: var(--white); --button-primary-text-color--disabled: var(--white); --button-secondary-border-color: var(--color-gray-5); --button-secondary-border-color--hover: var(--color-gray-5); --button-secondary-border-color--active: vvar(--color-gray-5); --button-secondary-border-color--selected: var(--color-gray-5); --button-secondary-border-color--selected--hover: var(--color-gray-5); --button-secondary-border-color--disabeled: var(--color-gray-3); --button-secondary-background-color: var(--white); --button-secondary-background-color--hover: var(--color-gray-2); --button-secondary-background-color--active: var(--color-gray-3); --button-secondary-background-color--selected: var(--color-gray-3); --button-secondary-background-color--selected--hover: var(--color-gray-2); --button-secondary-background-color--disabled: var(---color-background-toggle-disabled); --button-secondary-text-color: var(--brand-accessible); --button-secondary-text-color--hover: var(--brand-accessible-active); --button-secondary-text-color--active: var(--brand-accessible-active); --button-secondary-text-color--selected: var(--brand-accessible-active); --button-secondary-text-color--selected--hover: var(--brand-accessible-active); --button-secondary-text-color--disabled: var(--color-gray-8); --button-close-background-color: transparent; --button-close-background-color--hover: transparent; --button-close-border-color: transparent; --button-close-border-color--hover: transparent; --button-close-text-color: var(--text-on-color); --button-close-text-color--hover: var(--text-on-color); } /* Calendar */ .xCal, .xCalendar { --calendar-background-color: var(--background); --calendar-day-header-background-color: var(--layer-accent); --calendar-nav-background-color: var(--interactive-secondary); --calendar-nav-text-color: var(--text-on-color); --calendar-border-color: var(--border-normal); --calendar-date-current-background-color: transparent; --calendar-date-current-text-color: inherit; --calendar-date-today-outline-color: var(--accent); --calendar-date-today-background-color: transparent; --calendar-date-today-text-color: var(--text-primary); --calendar-date-focus-background-color: var(--brand-primary--selected); --calendar-date-focus-text-color: var(--text-on-color); --calendar-date-other-background-color: var(--disabled-primary); --calendar-date-other-text-color: var(--disabled-tertiary); } /* Category Bar */ .xCb { --categorybar-background-color: var(--background); --categorybar-border-color: var(--page-header-joined-color-border); } .xCbGrpHdr { --categorybar-groupheader-text-color--closed: var(--color-text-weak); --categorybar-groupheader-text-color--closed--hover: var(--color-text-weak); --categorybar-groupheader-text-color--open: var(--color-text-weak); --categorybar-groupheader-text-color--open--hover: var(--color-text-weak); --categorybar-groupheader-background-color--closed: transparent; --categorybar-groupheader-background-color--closed--hover: transparent; --categorybar-groupheader-background-color--open: transparent; --categorybar-groupheader-background-color--open--hover: transparent; --categorybar-groupheader-border-color--closed: var(--color-border-separator); --categorybar-groupheader-border-color--closed--hover: var(--color-border-separator); --categorybar-groupheader-border-color--open: var(--color-border-separator); --categorybar-groupheader-border-color--open--hover: var(--color-border-separator); } .xCbGrpHdr ~ .xCbBtns { --categorybar-groupheader-button-border-color: transparent; --categorybar-groupheader-button-background-color: transparent; } .xCbBtns { --categorybar-button-border-color: transparent; --categorybar-button-border-color--hover: var(--brand-primary); --categorybar-button-border-color--active: var(--brand-primary); --categorybar-button-background-color: transparent; --categorybar-button-text-color: var(--color-text-default); --categorybar-button-text-color--hover: var(--color-text-default); --categorybar-button-text-color--active: var(--color-text-default); --categorybar-button-text-color--emphasis: var(--brand-accessible); --categorybar-button-background-color--hover: var(--brand-light); --categorybar-button-background-color--active: var(--brand-light); } .xCbFilter { --categorybar-filter-border-color: var(--page-header-joined-color-border); --categorybar-filter-background-color: var(--page-header-color-background); --categorybar-filter-input-border-color: var(--color-border-input); --categorybar-filter-input-border-color--hover: var(--color-border-input); --categorybar-filter-input-border-color--focus: var(--color-border-input); --categorybar-filter-input-background-color: var(--color-background-input); --categorybar-filter-input-background-color--hover: var(--color-background-input); --categorybar-filter-input-background-color--focus: var(--color-background-input); --categorybar-filter-input-text-color: var(--color-text-default); --categorybar-filter-input-text-color--hover: var(--color-text-default); --categorybar-filter-input-text-color--focus: var(--color-text-default); } .xCbFilterResults { --categorybar-filter-results-background-color: var(--page-header-color-background); --categorybar-filter-results-border-color: var(--brand-accessible); --categorybar-filter-results-text-color: var(--brand-accessible); } /* Checkbox */ input[type="checkbox"], .xSelBox, .xFilterHdr { --checkbox-icon-color: var(--text-secondary); --checkbox-icon-color--hover: var(--text-primary); --checkbox-icon-color--focus: var(--checkbox-icon-color); --checkbox-icon-color--checked: var(--interactive-primary); --checkbox-icon-color--checked--hover: var(--interactive-primary--hover); --checkbox-icon-color--checked--focus: var(--checkbox-icon-color--checked); --checkbox-background-color: var(--layer); --checkbox-background-color--hover: var(--layer--hover); --checkbox-background-color--focus: var(--checkbox-background-color); --checkbox-background-color--checked: var(--layer); --checkbox-background-color--checked--hover: var(--layer--hover); --checkbox-background-color--checked--focus: var(--checkbox-background-color--checked); } input[type="checkbox"], .xSelBox, .xFilterHdr { --checkbox-toggle-border-color: var(--text-secondary); --checkbox-toggle-border-color--hover: var(--text-primary); --checkbox-toggle-border-color--focus: var(--checkbox-toggle-border-color); --checkbox-toggle-border-color--checked: var(--interactive-primary); --checkbox-toggle-border-color--checked--hover: var(--interactive-primary--hover); --checkbox-toggle-border-color--checked--focus: var(--checkbox-toggle-border-color--checked); --checkbox-toggle-background-color: var(--checkbox-background-color); --checkbox-toggle-background-color--hover: var(--checkbox-background-color--hover); --checkbox-toggle-background-color--focus: var(--checkbox-toggle-background-color); --checkbox-toggle-background-color--checked: var(--layer--selected); --checkbox-toggle-background-color--checked--hover: var(--layer--hover--selected); --checkbox-toggle-background-color--checked--focus: var(--checkbox-toggle-background-color--checked); --checkbox-toggle-checkmark-background-color: var(--text-secondary); --checkbox-toggle-checkmark-background-color--hover: var(--text-primary); --checkbox-toggle-checkmark-background-color--focus: var(--checkbox-toggle-checkmark-background-color); --checkbox-toggle-checkmark-background-color--checked: var(--interactive-primary); --checkbox-toggle-checkmark-background-color--checked--hover: var(--interactive-primary--hover); --checkbox-toggle-checkmark-background-color--checked--focus: var(--checkbox-toggle-checkmark-background-color--checked); } /* Combobox */ .xComboBox { --combobox-border-color: var(--border-interactive); --combobox-border-color--hover: var(--border-interactive--hover); --combobox-border-color--focus: var(--border-interactive); --combobox-border-color--disabled: var(--border-light); --combobox-background-color: var(--background); --combobox-background-color--hover: var(--background); --combobox-background-color--focus: var(--background); --combobox-background-color--disabled: var(--background-tone-200); --combobox-text-color: var(--text-input); --combobox-text-color--hover: var(--text-input--hover); --combobox-text-color--focus: var(--text-input--focus); --combobox-text-color--disabled: var(--text-placeholder); } .xCombo { --combobox-dropdown-border-color: var(--border-interactive); --combobox-dropdown-background-color: var(--background); } /* Config */ .xConfigLink { --config-link-background-color: var(--interactive-secondary); --config-link-background-color--hover: var(--interactive-secondary--hover); --config-link-text-color: var(--text-on-color); --config-link-text-color--hover: var(--text-on-color); } /* Dialog */ .xDialogBackDrop { --dialog-backdrop-background-color: var(--backdrop); } .xDialogPopup { --dialog-popup-border-color: var(--page-header-joined-color-border); --dialog-popup-background-color: var(--background); } .xDialogPopup .xMsgContainer { --dialog-popup-message-text-color: var(--text-primary); } .xDialogIFrame { --dialog-iframe-border-color: var(--border-normal); --dialog-iframe-background-color: var(--background); } .xDialogTitlebar { --dialog-titlebar-border-color: var(--page-header-joined-color-border); --dialog-titlebar-background-color: transparent; --dialog-titlebar-text-color: var(--text-primary); } .xTransition { --dialog-transition-title-text-color: var(--text-primary); } /* Infobar */ .xIB, .infoBar { --infobar-snapshot-background-color: var(--support-information-background); --infobar-snapshot-icon-color: var(--support-information); --infobar-snapshot-border-color: var(--support-information); --infobar-warning-background-color: var(--support-warning-background); --infobar-warning-icon-color: unset; --infobar-warning-border-color: var(--support-warning); } /* Label */ .xL { --label-text-color: inherit; } /* Lookup */ .xLookupBody { --lookup-table-header-border-color: var(--border-normal); --lookup-table-header-background-color: var(--background); --lookup-table-header-text-color: var(--text-primary); --lookup-table-text-color: var(--text-primary); --lookup-table-row-border-color: var(--border-normal); --lookup-table-row-background-color--hover: var(--layer--hover); --lookup-table-row-background-color--selected: var(--layer--selected); --lookup-table-row-background-color--hover--selected: var(--layer--hover--selected); --lookup-table-row-error-text-color: var(--support-error); } .xLookupPreview { --lookup-preview-border-color: var(--border-normal); --lookup-preview-background-color: var(--background); --lookup-preview-header-text-color: var(--text-primary); --lookup-preview-item-text-color: var(--text-primary); } .xLookupTb { --lookup-toolbar-border-color: var(--border-normal); --lookup-toolbar-background-color: var(--background); --lookup-toolbar-text-color: var(--text-primary); } .xLookupQuickBar { --lookup-quickbar-border-color: var(--border-normal); --lookup-quickbar-background-color: var(--background); --lookup-quickbar-background-color--hover: var(--layer); --lookup-quickbar-background-color--active: var(--layer--active); } /* Notice */ .xPageNotice { --notice-border-color: var(--border-normal); --notice-background-color: var(--layer); } /* Option Block */ .xOB, .xOBDis, .xOBErr { --optionblock-border-color: var(--border-normal); --optionblock-background-color: inherit; --optionblock-text-color: inherit; --optionblock-disabled-text-color: var(--disabled-tertiary); --optionblock-disabled-border-color: var(--disabled-tertiary); --optionblock-disabled-background-color: var(--disabled-primary); --optionblock-error-text-color: var(--support-error); --optionblock-error-border-color: var(--support-error); --optionblock-error-background-color: var(--support-error-background); } /* Property */ .xP { --property-border-color: var(--border-normal); --property-background-color: var(--background); } .xP td[ct="c"] { --property-label-text-color: var(--text-primary); } /* Property Grid */ .xPG { --propertygrid-border-color: var(--border-normal); --propertygrid-background-color: var(--background); } /* Quick Action */ .xQAB, .xQABBtns .xQABButton, .xQABButtonWithImage, .xQABButtonWithImageDisabled { --quick-actionbar-background-color: transparent; --quick-actionbar-button-background-color: var(--interactive-secondary); --quick-actionbar-button-text-color: var(--text-on-color); --quick-actionbar-button-background-color--hover: var(--interactive-secondary--hover); --quick-actionbar-button-text-color--hover: var(--text-on-color); --quick-actionbar-button-background-color--disabled: var(--disabled-secondary); --quick-actionbar-button-text-color--disabled: var(--disabled-tertiary); } .xQV .modelHeader { --quickview-header-text-color: var(--color-text-weak); } .xQV .cat { --quickview-category-text-color: var(--color-text-weak); } .xQV .opt { --quickview-option-text-color: var(--text-primary); --quickview-option-background-color--hover: var(--color-gray-3); } .xQV .props-section { --quickview-properties-border-color: var(--border-normal); --quickview-properties-background-color: var(--color-gray-1); --quickview-properties-background-color--hover: var(--color-gray-2); --quickview-properties-text-color: var(--text-primary); } .xQV .total { --quickview-properties-total-border-color: var(--border-normal); --quickview-properties-total-background-color: var(--background); --quickview-properties-total-text-color: var(--text-primary); } /* Radio */ input[type="radio"] { --radio-icon-color: var(--text-secondary); --radio-icon-color--hover: var(--text-primary); --radio-icon-color--focus: var(--radio-icon-color); --radio-icon-color--checked: var(--interactive-primary); --radio-icon-color--checked--hover: var(--interactive-primary--hover); --radio-icon-color--checked--focus: var(--radio-icon-color--checked); --radio-background-color: var(--layer); --radio-background-color--hover: var(--layer--hover); --radio-background-color--focus: var(--radio-background-color); --radio-background-color--checked: var(--layer); --radio-background-color--checked--hover: var(--layer--hover); --radio-background-color--checked--focus: var(--radio-background-color--checked); } /* Region */ .xRgn { --region-border-color: var(--card-color-border); --region-background-color: var(--white); } .xRgnHdr, .xSubHdr { --region-header-background-color: var(--page-header-color-background); --region-header-background-color--hover: var(--page-header-color-background); --region-header-text-color: var(--color-gray-13); --region-header-text-color--hover: var(--color-gray-13); } .xRgnHdrBtns a#help { --region-header-button-help-border-color: var(--border-normal); --region-header-button-help-border-color--hover: var(--border-normal); --region-header-button-help-border-color--active: var(--border-normal); --region-header-button-help-background-color: var(--color-text-brand-primary); --region-header-button-help-background-color--hover: var(--color-text-brand-primary); --region-header-button-help-background-color--active: var(--color-text-brand-primary); --region-header-button-help-icon-color: var(--color-text-icon-default); --region-header-button-help-icon-color--hover: var(--brand-accessible); --region-header-button-help-icon-color--active: var(--brand-accessible); } .xRgnHdrBtns a#hs, .xRgnTb .xTbBtns > a { --region-header-button-hs-border-color: var(--border-normal); --region-header-button-hs-border-color--hover: var(--border-normal); --region-header-button-hs-border-color--active: var(--border-normal); --region-header-button-hs-background-color: var(--color-text-brand-primary); --region-header-button-hs-background-color--hover: var(--color-text-brand-primary); --region-header-button-hs-background-color--active: var(--color-text-brand-primary); --region-header-button-hs-icon-color: var(--color-text-icon-default); --region-header-button-hs-icon-color--hover: var(--brand-accessible); --region-header-button-hs-icon-color--active: var(--brand-accessible); } .xRgnTb { --region-toolbar-background-color: var(--layer); --region-toolbar-border-color: var(--card-color-border); } /* Search Box */ .search-box, .xSearchBox, .xSearchBoxDropDown { --searchbox-input-border-color: var(--border-interactive); --searchbox-input-border-color--hover: var(--border-interactive--hover); --searchbox-input-border-color--focus: var(--border-interactive); --searchbox-input-border-color--active: var(--border-interactive--active); --searchbox-input-background-color: var(--gray-100); --searchbox-input-background-color--hover: var(--gray-100); --searchbox-input-background-color--focus: var(--gray-100); --searchbox-input-background-color--active: var(--gray-100); --searchbox-icon-color: var(--text-secondary); --searchbox-input-placeholder-color--hover: var(--text-primary); --searchbox-item-text-color--emphasis: var(--support-helper-normal); --searchbox-dropdown-background-color: var(--background); --searchbox-dropdown-border-color: var(--border-normal); } /* Settings */ .xStg { --setting-background-color: var(--background); --setting-border-color: transparent; } /* Spinner */ .spinner { --spinner-background-color: var(--background); --spinner-color: var(--interactive-primary); } /* Splitter */ .xHSplit, .xVSplit, .xVSplit::before, .xHSplit::before { --splitter-border-color: var(--border-light); --splitter-icon-background-color: var(--background-tone-100); --splitter-icon-background-color--hover: var(--background-tone-200); --splitter-background-color: var(--background-tone-100); --splitter-background-color--hover: var(--background-tone-200); } /* Status Bar */ .xSb { --statusbar-background-color: var(--background); --statusbar-border-color: var(--border-light); } .xSbText { --statusbar-text-text-color: var(--text-primary); } .xSbVer { --statusbar-version-text-color: var(--text-placeholder); } /* Table Category Grid */ .xCatGrid { --table-categorygrid-background-color: var(--background); --table-categorygrid-row-background-color: var(--background); } /* Text */ input[type="text"] { --input-text-border-color: var(--border-interactive); --input-text-border-color--hover: var(--border-interactive--hover); --input-text-border-color--focus: var(--border-interactive); --input-text-background-color: var(--background); --input-text-background-color--hover: var(--background); --input-text-background-color--focus: var(--background); --input-text-text-color: var(--text-input); --input-text-text-color--hover: var(--text-input--hover); --input-text-text-color--focus: var(--text-input--focus); --input-text-text-color--placeholder: var(--text-placeholder); } /* Textarea */ textarea { --textarea-border-color: var(--border-interactive); --textarea-border-color--hover: var(--border-interactive--hover); --textarea-border-color--focus: var(--border-interactive); --textarea-background-color: var(--background); --textarea-background-color--hover: var(--background); --textarea-background-color--focus: var(--background); --textarea-text-color: var(--text-input); --textarea-text-color--hover: var(--text-input--hover); --textarea-text-color--focus: var(--text-input--focus); } /* Tool Bar */ .xTb, .xTbMask { --toolbar-border-color: #0070D2; --toolbar-top-background-color: transparent; --toolbar-background-color: var(--background); --toolbar-branding-logo-background-color: transparent; --toolbar-branding-logo-background-color--hover: transparent; --toolbar-text-color: var(--brand-header-contrast-weak); --toolbar-text-label-color: var(--brand-header-contrast-weak); } .xTbBtns { --toolbar-button-background-color: transparent; --toolbar-button-background-color--hover: transparent; --toolbar-button-background-color--selected: transparent; --toolbar-button-background-color--selected--hover: transparent; --toolbar-button-text-color: var(--brand-header-contrast-weak); --toolbar-button-text-color--hover: var(--brand-header-contrast-weak-active); --toolbar-button-text-color--selected: var(--brand-header-contrast-weak-active); --toolbar-button-text-color--selected--hover: var(--brand-header-contrast-weak-active); --toolbar-button-border-color: transparent; --toolbar-button-border-color--hover: transparent; --toolbar-button-border-color--selected: transparent; --toolbar-button-border-color--selected--hover: transparent; --toolbar-mask-background-color: hsla(0, 0%, 0%, 0.3); } /* Tool Tip */ .xTooltip { --tooltip-background-color: var(--background-inverse); }