/*!*********************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./src/styles/cfa-tokens.css?ngGlobalStyle ***! \*********************************************************************************************************************************************************************************************************************************/ /** * Chick-fil-A Design System color & sizing tokens. * Vendored from @cfa/design-tokens@2.1.3 (dist/tokens.css). * Only the light + dark color modes and size/font scalar tokens are included; * the package's embedded base64 @font-face blocks are intentionally omitted. * Dark mode activates when an ancestor (the ) has data-color-mode="dark". * Do not edit directly. */ :root, :root [data-color-mode="light"] { --cfa-color-base-0: #ffffffff; /** Elevation 0, use on the body or application level surfaces. */ --cfa-color-base-1: #ffffffff; /** Elevation 1, use for surfaces that sit on top of base 0. */ --cfa-color-base-1-alt: #ffffffff; /** Elevation 1 alternative, use for surfaces that sit on top of base 0. */ --cfa-color-base-2: #f2f3f4ff; /** Elevation 2, use for surfaces that sit on top of base 1. */ --cfa-color-brand-blue: #3eb1c8ff; /** */ --cfa-color-brand-bright-red: #ff1138ff; /** */ --cfa-color-brand-cream: #f5e3ccff; /** */ --cfa-color-brand-dark-gray: #5b6770ff; /** */ --cfa-color-brand-dark-green: #00635bff; /** */ --cfa-color-brand-dark-purple: #5d3754ff; /** */ --cfa-color-brand-dark-red: #940929ff; /** */ --cfa-color-brand-green: #249e6bff; /** */ --cfa-color-brand-light-blue: #aad6d2ff; /** */ --cfa-color-brand-light-green: #b2cfa7ff; /** */ --cfa-color-brand-light-orange: #fa9370ff; /** */ --cfa-color-brand-light-yellow: #f5e1a4ff; /** */ --cfa-color-brand-navy: #004f71ff; /** */ --cfa-color-brand-orange: #e35205ff; /** */ --cfa-color-brand-pink: #f8c1b8ff; /** */ --cfa-color-brand-purple: #994878ff; /** */ --cfa-color-brand-red: #dd0031ff; /** */ --cfa-color-brand-warm-gray: #dad7d2ff; /** */ --cfa-color-brand-warm-white: #f4f1ecff; /** */ --cfa-color-brand-yellow: #ffb549ff; /** */ --cfa-color-contrast: #37424aff; /** Used primarily for the default text color. Includes a lighter variation for dark-modes */ --cfa-color-destructive-active: #64041aff; /** Use this for active/pressed states within the destructive color palette */ --cfa-color-destructive-base: #7e031fff; /** Use for destructive operations such as delete or remove where potentially valuable data may be lost */ --cfa-color-destructive-contrast: #ffffffff; /** Contrast colors are typically used as text to go on top of the base color. */ --cfa-color-destructive-hover: #64041aff; /** Use this for hover states within the destructive color palette */ --cfa-color-disabled-base: #ebebebff; /** Used typically for disabled backgrounds */ --cfa-color-disabled-contrast: #a7acafff; /** Contrast colors are typically used as text to go on top of the base color. */ --cfa-color-disabled-inactive: #80878cff; /** Used in Stepper for a contrasting color for upcoming steps */ --cfa-color-disabled-strong: #d8dadcff; /** Used for disabled backgrounds when a slightly stronger contrast is needed to stand out */ --cfa-color-divider: #a7acafff; /** Use for dividers between items */ --cfa-color-feedback-error-base: #b6072fff; /** Use for communicating an unsuccessful operation message or icon */ --cfa-color-feedback-error-container: #f8e6eaff; /** Use as an alternate background for operation error messaging */ --cfa-color-feedback-error-contrast: #ffffffff; /** */ --cfa-color-feedback-error-hover: #810521ff; /** Use for communicating an unsuccessful operation message or icon */ --cfa-color-feedback-error-hover-container: #e8b2bfff; /** Use as an alternate background for operation error messaging */ --cfa-color-feedback-info-base: #006b9aff; /** Use for communicating a general information message or icon */ --cfa-color-feedback-info-container: #e6f0f5ff; /** Use as an alternate background for informational messaging */ --cfa-color-feedback-info-contrast: #ffffffff; /** */ --cfa-color-feedback-offline-base: #a7acafff; /** Used for the Status Indicator component for Offline */ --cfa-color-feedback-success-base: #077e4cff; /** Use for communicating a successful operation message or icon */ --cfa-color-feedback-success-container: #e6f2edff; /** Use as an alternate background for successful operation messaging */ --cfa-color-feedback-success-contrast: #ffffffff; /** Contrast colors are typically used as text to go on top of the base color. */ --cfa-color-feedback-success-hover: #055936ff; /** Use for communicating a successful operation message or icon */ --cfa-color-feedback-success-hover-container: #bbe1d1ff; /** Use as an alternate background for successful operation messaging */ --cfa-color-feedback-warning-base: #fbc111ff; /** Use for communicating a warning for an operation message or icon */ --cfa-color-feedback-warning-container: #fff9e7ff; /** Use as an alternate background for operation warning messaging */ --cfa-color-feedback-warning-contrast: #37424aff; /** */ --cfa-color-feedback-warning-hover-container: #feecb5ff; /** Use as an alternate background for operation warning messaging */ --cfa-color-feedback-warning-strong: #8a6a09ff; /** Use as a darker option from base to pass color contrast on white backgrounds */ --cfa-color-focus: #3eb1c8ff; /** Use for form focus state */ --cfa-color-form-field-hover-outline: #004f71ff; /** Use as the border hover color on inputs and text areas */ --cfa-color-form-field-outline: #5b6770ff; /** Use as the border for typical input and text area fields */ --cfa-color-form-field-placeholder: #5b6770ff; /** Use for the placeholder text within inputs and text areas */ --cfa-color-form-field-readonly: #37424aff; /** Use as the border for read-only input fields */ --cfa-color-gray-active: #1e272fff; /** Use for active/pressed states within the Gray color palette */ --cfa-color-gray-base: #48545dff; /** Used for Icons and Icon Buttons. This token is lighter in dark-mode */ --cfa-color-gray-contrast: #ffffffff; /** Contrast colors are typically used as text to go on top of the base color. */ --cfa-color-gray-hover: #37424aff; /** Use for hover state within the Gray color palette */ --cfa-color-loader-base: #ebebebff; /** Inactive dots for loading indicator */ --cfa-color-loader-leading: #dd0031ff; /** Leading dot color for loading indicator */ --cfa-color-loader-leading-disabled: #a7acafff; /** Leading dot for loading indicator when disabled */ --cfa-color-loader-trailing: #dd003180; /** Secondary dot for loading indicator */ --cfa-color-loader-trailing-disabled: #a7acaf80; /** Secondary dot for loading indicator when disabled */ --cfa-color-nav-primary-active: #f2f6f8ff; /** Used specific to the Side and top navigation as the nav item active state */ --cfa-color-nav-primary-hover: #f2f6f8ff; /** Used specific to the Side and top navigation as the nav item hover state */ --cfa-color-outline-1: #ffffffff; /** Variant 1 */ --cfa-color-outline-2: #ebebebff; /** Variant 2 */ --cfa-color-outline-3: #cccfd0ff; /** Variant 3 */ --cfa-color-overlay: #0d1319ff; /** Use for overlay backdrops on modal and drawer components */ --cfa-color-primary-active: #7a001bff; /** Use this for active/pressed states within the Primary red color palette */ --cfa-color-primary-active-alt: #7a001bff; /** */ --cfa-color-primary-base: #dd0031ff; /** Use as the main color in the CFA red color palette. It also offers slight variations to support dark-mode */ --cfa-color-primary-base-alt: #dd0031ff; /** Use this token when needing the Primary base to turn white in dark-mode */ --cfa-color-primary-contrast: #ffffffff; /** Contrast colors are typically used as text to go on top of our Primary color palette */ --cfa-color-primary-hover: #9d0023ff; /** Use this for hover states within the Primary red color palette */ --cfa-color-primary-hover-alt: #9d0023ff; /** */ --cfa-color-primary-readonly: #5b6770ff; /** Use for hover state within the Gray color palette */ --cfa-color-progress-bar-base: #ebebebff; /** Use as the solid variant background for progress bars */ --cfa-color-progress-bar-dots: #cccfd0ff; /** Use as the dots variant background for progress bars */ --cfa-color-progress-bar-strip-1: #ffffffff; /** Used as 1 of 2 stripe colors for the animated progress bar variant */ --cfa-color-progress-bar-strip-2: #ebebebff; /** Used as 1 of 2 stripe colors for the animated progress bar variant */ --cfa-color-secondary-active: #002b3eff; /** Use this for active or pressed states within the Secondary blue color palette */ --cfa-color-secondary-active-alt: #002b3eff; /** */ --cfa-color-secondary-base: #004f71ff; /** Use as the main color in the CFA blue color palette. It also offers slight variations to support dark-mode */ --cfa-color-secondary-base-alt: #004f71ff; /** Use this token when needing the Secondary base to turn white in dark-mode */ --cfa-color-secondary-contrast: #ffffffff; /** Contrast colors are typically used as text to go on top of our Secondary color palette */ --cfa-color-secondary-hover: #003e59ff; /** Use this for hover states within the Secondary blue color palette */ --cfa-color-secondary-hover-alt: #003e59ff; /** */ --cfa-color-secondary-readonly: #ccdce3ff; /** */ --cfa-color-selection-active: #ccdce3ff; /** Use for the active state for UI elements within the selection color palette */ --cfa-color-selection-active-contrast: #003850ff; /** Active/selected state color used for Toggle button, selected menu items and calendar days which all share the selection color palette */ --cfa-color-selection-active-hover: #b0c8d3ff; /** Use for the active hover state for UI elements within the selection color palette */ --cfa-color-selection-contrast: #5b6770ff; /** Contrast colors are typically used as text to go on top of the base color. */ --cfa-color-selection-hover: #f2f6f8ff; /** Use for the hover state for UI elements within the selection color palette */ --cfa-color-slider-base: #cccfd0ff; /** */ --cfa-color-slider-dots: #80878cff; /** */ --cfa-color-switch-base: #a7acafff; /** Used as the base color for the switch component */ --cfa-color-tag-blue-base: #3eb1c8ff; /** Used for main theme color for blue tags */ --cfa-color-tag-blue-container: #d6eff5ff; /** Use as an alternate background to the base color */ --cfa-color-tag-blue-hover-container: #c3e7eeff; /** Use for the container hover state */ --cfa-color-tag-contrast: #37424aff; /** Contrast colors are typically used as text to go on top of the base color. */ --cfa-color-tag-cream-base: #f5e3ccff; /** Used for main theme color for cream tags */ --cfa-color-tag-cream-container: #fcf6efff; /** Use as an alternate background to the base color */ --cfa-color-tag-cream-hover-container: #f5e3ccff; /** Use for the container hover state */ --cfa-color-tag-dark-green-base: #00635bff; /** Used for main theme color for dark green tags */ --cfa-color-tag-dark-green-container: #c8dfddff; /** Use as an alternate background to the base color */ --cfa-color-tag-dark-green-hover-container: #b0cfccff; /** Use for the container hover state */ --cfa-color-tag-gray-base: #a7acafff; /** */ --cfa-color-tag-gray-container: #ebebebff; /** Use as an alternate background to the base color */ --cfa-color-tag-gray-hover-container: #d8dadcff; /** Use for the container hover state */ --cfa-color-tag-light-orange-base: #fa9370ff; /** Used for main theme color for light orange tags */ --cfa-color-tag-light-orange-container: #fdded3ff; /** Use as an alternate background to the base color */ --cfa-color-tag-light-orange-hover-container: #fdcdbdff; /** Use for the container hover state */ --cfa-color-tag-navy-base: #004f71ff; /** Used for main theme color for navy tags */ --cfa-color-tag-navy-container: #ccdce3ff; /** Use as an alternate background to the base color */ --cfa-color-tag-navy-hover-container: #b0c8d3ff; /** Use for the container hover state */ --cfa-color-tag-orange-base: #e35205ff; /** Used for main theme color for orange tags */ --cfa-color-tag-orange-container: #f6c9b2ff; /** Use as an alternate background to the base color */ --cfa-color-tag-orange-hover-container: #f2af8cff; /** Use for the container hover state */ --cfa-color-tag-pink-base: #f8c1b8ff; /** Used for main theme color for pink tags */ --cfa-color-tag-pink-container: #fdece9ff; /** Use as an alternate background to the base color */ --cfa-color-tag-pink-hover-container: #fce2deff; /** Use for the container hover state */ --cfa-color-tag-purple-base: #994878ff; /** Used for main theme color for purple tags */ --cfa-color-tag-purple-container: #ebdae4ff; /** Use as an alternate background to the base color */ --cfa-color-tag-purple-hover-container: #dfc6d5ff; /** Use for the container hover state */ --cfa-color-white-active: #cccfd0ff; /** Use for active/pressed states within the white color palette */ --cfa-color-white-base: #ffffffff; /** Used for white elements for darker backgrounds such as white Icon buttons */ --cfa-color-white-hover: #ebebebff; /** Use for hover states within the white color palette */ } :root [data-color-mode="dark"] { --cfa-color-base-0: #131a21ff; /** Elevation 0, use on the body or application level surfaces. */ --cfa-color-base-1: #1e272fff; /** Elevation 1, use for surfaces that sit on top of base 0. */ --cfa-color-base-1-alt: #37424aff; /** Elevation 1 alternative, use for surfaces that sit on top of base 0. */ --cfa-color-base-2: #37424aff; /** Elevation 2, use for surfaces that sit on top of base 1. */ --cfa-color-brand-blue: #3eb1c8ff; /** */ --cfa-color-brand-bright-red: #ff1138ff; /** */ --cfa-color-brand-cream: #f5e3ccff; /** */ --cfa-color-brand-dark-gray: #5b6770ff; /** */ --cfa-color-brand-dark-green: #33827cff; /** */ --cfa-color-brand-dark-purple: #7d5f76ff; /** */ --cfa-color-brand-dark-red: #940929ff; /** */ --cfa-color-brand-green: #50b189ff; /** */ --cfa-color-brand-light-blue: #aad6d2ff; /** */ --cfa-color-brand-light-green: #b2cfa7ff; /** */ --cfa-color-brand-light-orange: #fba98dff; /** */ --cfa-color-brand-light-yellow: #f5e1a4ff; /** */ --cfa-color-brand-navy: #004f71ff; /** */ --cfa-color-brand-orange: #e97537ff; /** */ --cfa-color-brand-pink: #f8c1b8ff; /** */ --cfa-color-brand-purple: #ad6d93ff; /** */ --cfa-color-brand-red: #e4335aff; /** */ --cfa-color-brand-warm-gray: #dad7d2ff; /** */ --cfa-color-brand-warm-white: #f4f1ecff; /** */ --cfa-color-brand-yellow: #ffc46dff; /** */ --cfa-color-contrast: #ebebebff; /** Used primarily for the default text color. Includes a lighter variation for dark-modes */ --cfa-color-destructive-active: #810521ff; /** Use this for active/pressed states within the destructive color palette */ --cfa-color-destructive-base: #a6062bff; /** Use for destructive operations such as delete or remove where potentially valuable data may be lost */ --cfa-color-destructive-contrast: #ffffffff; /** Contrast colors are typically used as text to go on top of the base color. */ --cfa-color-destructive-hover: #810521ff; /** Use this for hover states within the destructive color palette */ --cfa-color-disabled-base: #37424aff; /** Used typically for disabled backgrounds */ --cfa-color-disabled-contrast: #93989bff; /** Contrast colors are typically used as text to go on top of the base color. */ --cfa-color-disabled-inactive: #93989bff; /** Used in Stepper for a contrasting color for upcoming steps */ --cfa-color-disabled-strong: #1e272fff; /** Used for disabled backgrounds when a slightly stronger contrast is needed to stand out */ --cfa-color-divider: #5b6770ff; /** Use for dividers between items */ --cfa-color-feedback-error-base: #c53959ff; /** Use for communicating an unsuccessful operation message or icon */ --cfa-color-feedback-error-container: #64041aff; /** Use as an alternate background for operation error messaging */ --cfa-color-feedback-error-contrast: #ffffffff; /** */ --cfa-color-feedback-error-hover: #b6072fff; /** Use for communicating an unsuccessful operation message or icon */ --cfa-color-feedback-error-hover-container: #4c0314ff; /** Use as an alternate background for operation error messaging */ --cfa-color-feedback-info-base: #3389aeff; /** Use for communicating a general information message or icon */ --cfa-color-feedback-info-container: #003b55ff; /** Use as an alternate background for informational messaging */ --cfa-color-feedback-info-contrast: #ffffffff; /** */ --cfa-color-feedback-offline-base: #a7acafff; /** Used for the Status Indicator component for Offline */ --cfa-color-feedback-success-base: #59a987ff; /** Use for communicating a successful operation message or icon */ --cfa-color-feedback-success-container: #04452aff; /** Use as an alternate background for successful operation messaging */ --cfa-color-feedback-success-contrast: #ffffffff; /** Contrast colors are typically used as text to go on top of the base color. */ --cfa-color-feedback-success-hover: #399870ff; /** Use for communicating a successful operation message or icon */ --cfa-color-feedback-success-hover-container: #033520ff; /** Use as an alternate background for successful operation messaging */ --cfa-color-feedback-warning-base: #fcd560ff; /** Use for communicating a warning for an operation message or icon */ --cfa-color-feedback-warning-container: #8a6a09ff; /** Use as an alternate background for operation warning messaging */ --cfa-color-feedback-warning-contrast: #1e272fff; /** */ --cfa-color-feedback-warning-hover-container: #695107ff; /** Use as an alternate background for operation warning messaging */ --cfa-color-feedback-warning-strong: #fbc111ff; /** Use as a darker option from base to pass color contrast on white backgrounds */ --cfa-color-focus: #3eb1c8ff; /** Use for form focus state */ --cfa-color-form-field-hover-outline: #5489a0ff; /** Use as the border hover color on inputs and text areas */ --cfa-color-form-field-outline: #93989bff; /** Use as the border for typical input and text area fields */ --cfa-color-form-field-placeholder: #93989bff; /** Use for the placeholder text within inputs and text areas */ --cfa-color-form-field-readonly: #ebebebff; /** Use as the border for read-only input fields */ --cfa-color-gray-active: #ffffffff; /** Use for active/pressed states within the Gray color palette */ --cfa-color-gray-base: #cccfd0ff; /** Used for Icons and Icon Buttons. This token is lighter in dark-mode */ --cfa-color-gray-contrast: #ffffffff; /** Contrast colors are typically used as text to go on top of the base color. */ --cfa-color-gray-hover: #ebebebff; /** Use for hover state within the Gray color palette */ --cfa-color-loader-base: #37424aff; /** Inactive dots for loading indicator */ --cfa-color-loader-leading: #e4335aff; /** Leading dot color for loading indicator */ --cfa-color-loader-leading-disabled: #93989bff; /** Leading dot for loading indicator when disabled */ --cfa-color-loader-trailing: #dd003180; /** Secondary dot for loading indicator */ --cfa-color-loader-trailing-disabled: #a7acaf80; /** Secondary dot for loading indicator when disabled */ --cfa-color-nav-primary-active: #131a21ff; /** Used specific to the Side and top navigation as the nav item active state */ --cfa-color-nav-primary-hover: #131a21ff; /** Used specific to the Side and top navigation as the nav item hover state */ --cfa-color-outline-1: #37424aff; /** Variant 1 */ --cfa-color-outline-2: #5b6770ff; /** Variant 2 */ --cfa-color-outline-3: #80878cff; /** Variant 3 */ --cfa-color-overlay: #0d1319ff; /** Use for overlay backdrops on modal and drawer components */ --cfa-color-primary-active: #c9002dff; /** Use this for active/pressed states within the Primary red color palette */ --cfa-color-primary-active-alt: #cccfd0ff; /** */ --cfa-color-primary-base: #e4335aff; /** Use as the main color in the CFA red color palette. It also offers slight variations to support dark-mode */ --cfa-color-primary-base-alt: #ffffffff; /** Use this token when needing the Primary base to turn white in dark-mode */ --cfa-color-primary-contrast: #ffffffff; /** Contrast colors are typically used as text to go on top of our Primary color palette */ --cfa-color-primary-hover: #dd0031ff; /** Use this for hover states within the Primary red color palette */ --cfa-color-primary-hover-alt: #ebebebff; /** */ --cfa-color-primary-readonly: #d8dadcff; /** Use for hover state within the Gray color palette */ --cfa-color-progress-bar-base: #37424aff; /** Use as the solid variant background for progress bars */ --cfa-color-progress-bar-dots: #5b6770ff; /** Use as the dots variant background for progress bars */ --cfa-color-progress-bar-strip-1: #5b6770ff; /** Used as 1 of 2 stripe colors for the animated progress bar variant */ --cfa-color-progress-bar-strip-2: #37424aff; /** Used as 1 of 2 stripe colors for the animated progress bar variant */ --cfa-color-secondary-active: #002b3eff; /** Use this for active or pressed states within the Secondary blue color palette */ --cfa-color-secondary-active-alt: #cccfd0ff; /** */ --cfa-color-secondary-base: #004f71ff; /** Use as the main color in the CFA blue color palette. It also offers slight variations to support dark-mode */ --cfa-color-secondary-base-alt: #ffffffff; /** Use this token when needing the Secondary base to turn white in dark-mode */ --cfa-color-secondary-contrast: #ffffffff; /** Contrast colors are typically used as text to go on top of our Secondary color palette */ --cfa-color-secondary-hover: #003850ff; /** Use this for hover states within the Secondary blue color palette */ --cfa-color-secondary-hover-alt: #ebebebff; /** */ --cfa-color-secondary-readonly: #ccdce3ff; /** */ --cfa-color-selection-active: #003850ff; /** Use for the active state for UI elements within the selection color palette */ --cfa-color-selection-active-contrast: #65c1d3ff; /** Active/selected state color used for Toggle button, selected menu items and calendar days which all share the selection color palette */ --cfa-color-selection-active-hover: #004867ff; /** Use for the active hover state for UI elements within the selection color palette */ --cfa-color-selection-contrast: #a7acafff; /** Contrast colors are typically used as text to go on top of the base color. */ --cfa-color-selection-hover: #002b3eff; /** Use for the hover state for UI elements within the selection color palette */ --cfa-color-slider-base: #37424aff; /** */ --cfa-color-slider-dots: #5b6770ff; /** */ --cfa-color-switch-base: #37424aff; /** Used as the base color for the switch component */ --cfa-color-tag-blue-base: #38a1b6ff; /** Used for main theme color for blue tags */ --cfa-color-tag-blue-container: #22616eff; /** Use as an alternate background to the base color */ --cfa-color-tag-blue-hover-container: #1a4a54ff; /** Use for the container hover state */ --cfa-color-tag-contrast: #ebebebff; /** Contrast colors are typically used as text to go on top of the base color. */ --cfa-color-tag-cream-base: #dfcfbaff; /** Used for main theme color for cream tags */ --cfa-color-tag-cream-container: #877d70ff; /** Use as an alternate background to the base color */ --cfa-color-tag-cream-hover-container: #675f56ff; /** Use for the container hover state */ --cfa-color-tag-dark-green-base: #33827cff; /** Used for main theme color for dark green tags */ --cfa-color-tag-dark-green-container: #003632ff; /** Use as an alternate background to the base color */ --cfa-color-tag-dark-green-hover-container: #002a26ff; /** Use for the container hover state */ --cfa-color-tag-gray-base: #5b6770ff; /** */ --cfa-color-tag-gray-container: #37424aff; /** Use as an alternate background to the base color */ --cfa-color-tag-gray-hover-container: #1e272fff; /** Use for the container hover state */ --cfa-color-tag-light-orange-base: #e48666ff; /** Used for main theme color for light orange tags */ --cfa-color-tag-light-orange-container: #8a513eff; /** Use as an alternate background to the base color */ --cfa-color-tag-light-orange-hover-container: #693e2fff; /** Use for the container hover state */ --cfa-color-tag-navy-base: #33728dff; /** Used for main theme color for navy tags */ --cfa-color-tag-navy-container: #002b3eff; /** Use as an alternate background to the base color */ --cfa-color-tag-navy-hover-container: #00212fff; /** Use for the container hover state */ --cfa-color-tag-orange-base: #e97537ff; /** Used for main theme color for orange tags */ --cfa-color-tag-orange-container: #7d2d03ff; /** Use as an alternate background to the base color */ --cfa-color-tag-orange-hover-container: #5f2202ff; /** Use for the container hover state */ --cfa-color-tag-pink-base: #e2b0a7ff; /** Used for main theme color for pink tags */ --cfa-color-tag-pink-container: #886a65ff; /** Use as an alternate background to the base color */ --cfa-color-tag-pink-hover-container: #68514dff; /** Use for the container hover state */ --cfa-color-tag-purple-base: #ad6d93ff; /** Used for main theme color for purple tags */ --cfa-color-tag-purple-container: #542842ff; /** Use as an alternate background to the base color */ --cfa-color-tag-purple-hover-container: #401e32ff; /** Use for the container hover state */ --cfa-color-white-active: #cccfd0ff; /** Use for active/pressed states within the white color palette */ --cfa-color-white-base: #ffffffff; /** Used for white elements for darker backgrounds such as white Icon buttons */ --cfa-color-white-hover: #ebebebff; /** Use for hover states within the white color palette */ } :root { --cfa-size-corner-2xl: 24px; /* 24 */ --cfa-size-corner-lg: 12px; /* 12 */ --cfa-size-corner-md: 8px; /* 8 */ --cfa-size-corner-none: 0px; --cfa-size-corner-sm: 4px; /* 4 */ --cfa-size-corner-xl: 16px; /* 16 */ --cfa-size-corner-xs: 2px; /* 2 */ --cfa-size-spacing-2xl: 24px; --cfa-size-spacing-3xl: 32px; --cfa-size-spacing-4xl: 40px; --cfa-size-spacing-5xl: 48px; --cfa-size-spacing-6xl: 56px; --cfa-size-spacing-lg: 12px; --cfa-size-spacing-md: 8px; --cfa-size-spacing-none: 0px; --cfa-size-spacing-sm: 4px; --cfa-size-spacing-xl: 16px; --cfa-size-spacing-xs: 2px; } :root { --cfa-font-body-1-family: Apercu; --cfa-font-body-1-line-height: 24px; --cfa-font-body-1-size: 16px; --cfa-font-body-1-text-transform: none; --cfa-font-body-1-weight: 400; --cfa-font-body-2-family: Apercu; --cfa-font-body-2-line-height: 22px; --cfa-font-body-2-size: 14px; --cfa-font-body-2-text-transform: none; --cfa-font-body-2-weight: 400; --cfa-font-caption-1-family: Apercu; --cfa-font-caption-1-line-height: 16px; --cfa-font-caption-1-size: 12px; --cfa-font-caption-1-text-transform: none; --cfa-font-caption-1-weight: 500; --cfa-font-caption-2-family: Apercu; --cfa-font-caption-2-line-height: 16px; --cfa-font-caption-2-size: 10px; --cfa-font-caption-2-text-transform: none; --cfa-font-caption-2-weight: 500; --cfa-font-family-base: Apercu; --cfa-font-family-base-with-fallback: Apercu, helvetica, sans-serif; /* Fallback string if base user doesn't have the base font */ --cfa-font-family-subhead: Rooney Pro; --cfa-font-family-subhead-with-fallback: Rooney Pro, garamond, serif; /* Fallback string if base user doesn't have the subhead font */ --cfa-font-heading-1-family: Apercu; --cfa-font-heading-1-line-height: 56px; --cfa-font-heading-1-size: 48px; --cfa-font-heading-1-text-transform: none; --cfa-font-heading-1-weight: 700; --cfa-font-heading-2-family: Apercu; --cfa-font-heading-2-line-height: 40px; --cfa-font-heading-2-size: 32px; --cfa-font-heading-2-text-transform: none; --cfa-font-heading-2-weight: 700; --cfa-font-heading-3-family: Apercu; --cfa-font-heading-3-line-height: 32px; --cfa-font-heading-3-size: 24px; --cfa-font-heading-3-text-transform: none; --cfa-font-heading-3-weight: 700; --cfa-font-heading-4-family: Apercu; --cfa-font-heading-4-line-height: 28px; --cfa-font-heading-4-size: 20px; --cfa-font-heading-4-text-transform: none; --cfa-font-heading-4-weight: 700; --cfa-font-line-height-16: 16px; --cfa-font-line-height-20: 20px; --cfa-font-line-height-22: 22px; --cfa-font-line-height-24: 24px; --cfa-font-line-height-28: 28px; --cfa-font-line-height-32: 32px; --cfa-font-line-height-40: 40px; --cfa-font-line-height-56: 56px; --cfa-font-line-height-base: 24px; --cfa-font-overline-1-family: Apercu; --cfa-font-overline-1-line-height: 24px; --cfa-font-overline-1-size: 16px; --cfa-font-overline-1-text-transform: uppercase; --cfa-font-overline-1-weight: 700; --cfa-font-overline-2-family: Apercu; --cfa-font-overline-2-line-height: 24px; --cfa-font-overline-2-size: 14px; --cfa-font-overline-2-text-transform: uppercase; --cfa-font-overline-2-weight: 700; --cfa-font-overline-3-family: Apercu; --cfa-font-overline-3-line-height: 16px; --cfa-font-overline-3-size: 12px; --cfa-font-overline-3-text-transform: uppercase; --cfa-font-overline-3-weight: 700; --cfa-font-size-10: 10px; --cfa-font-size-12: 12px; --cfa-font-size-14: 14px; --cfa-font-size-16: 16px; --cfa-font-size-20: 20px; --cfa-font-size-24: 24px; --cfa-font-size-32: 32px; --cfa-font-size-48: 48px; --cfa-font-size-base: 16px; --cfa-font-style-italic: italic; --cfa-font-style-normal: normal; --cfa-font-style-base: normal; --cfa-font-subtitle-1-family: Rooney Pro; --cfa-font-subtitle-1-line-height: 32px; --cfa-font-subtitle-1-size: 20px; --cfa-font-subtitle-1-text-transform: uppercase; --cfa-font-subtitle-1-weight: 700; --cfa-font-subtitle-2-family: Rooney Pro; --cfa-font-subtitle-2-line-height: 24px; --cfa-font-subtitle-2-size: 16px; --cfa-font-subtitle-2-text-transform: uppercase; --cfa-font-subtitle-2-weight: 700; --cfa-font-subtitle-3-family: Rooney Pro; --cfa-font-subtitle-3-line-height: 20px; --cfa-font-subtitle-3-size: 14px; --cfa-font-subtitle-3-text-transform: uppercase; --cfa-font-subtitle-3-weight: 700; --cfa-font-text-transform-capitalize: capitalize; --cfa-font-text-transform-lowercase: lowercase; --cfa-font-text-transform-none: none; --cfa-font-text-transform-uppercase: uppercase; --cfa-font-text-transform-base: none; --cfa-font-weight-bold: 700; --cfa-font-weight-extra-bold: 800; --cfa-font-weight-extra-light: 200; --cfa-font-weight-medium: 500; --cfa-font-weight-regular: 400; --cfa-font-weight-base: 400; } /*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/theme.scss?ngGlobalStyle ***! \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* --------------------------------------------------------------------------- * CFA theme * * Color truth lives in src/styles/cfa-tokens.css (the --cfa-color-* tokens), * which auto-flip between light and dark based on the data-color-mode attribute * on (set by ThemeService). * * This file does two things: * 1. Bridges the app's legacy CSS variable names (--bg-*, --text-*, --status-*, * --link-*, etc.) onto CFA tokens, so existing component styles gain a * coherent dark mode for free. * 2. Themes Angular Material (M3) for both light and dark and maps Material's * system tokens onto CFA tokens so Material components blend with the * token-based custom UI. * ------------------------------------------------------------------------- */ :root { --app-font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; } /* Bridge the app's legacy variable names onto CFA tokens. * * IMPORTANT: this mixin must be included in BOTH the light and dark scopes. * A custom property whose value is `var(--other)` is resolved at the element * where it is *declared*, then inherited as that resolved value. If these were * declared only on :root, they would resolve once against the light CFA tokens * and stay light everywhere -- even under body[data-color-mode="dark"]. Emitting * them in the dark scope too forces them to re-resolve against the dark tokens. */ /* Map Angular Material's M3 system tokens onto CFA tokens. Included inside both * the light and dark theme scopes; the values reference mode-aware CFA tokens, * so the same declarations resolve correctly in either mode. */ html { color-scheme: light; --mat-sys-background: #fff8f6; --mat-sys-error: #ba1a1a; --mat-sys-error-container: #ffdad6; --mat-sys-inverse-on-surface: #fbeeec; --mat-sys-inverse-primary: #ffb4a8; --mat-sys-inverse-surface: #362f2e; --mat-sys-on-background: #201a19; --mat-sys-on-error: #ffffff; --mat-sys-on-error-container: #93000a; --mat-sys-on-primary: #ffffff; --mat-sys-on-primary-container: #930100; --mat-sys-on-primary-fixed: #410000; --mat-sys-on-primary-fixed-variant: #930100; --mat-sys-on-secondary: #ffffff; --mat-sys-on-secondary-container: #5d3f3b; --mat-sys-on-secondary-fixed: #2c1512; --mat-sys-on-secondary-fixed-variant: #5d3f3b; --mat-sys-on-surface: #201a19; --mat-sys-on-surface-variant: #534341; --mat-sys-on-tertiary: #ffffff; --mat-sys-on-tertiary-container: #00458f; --mat-sys-on-tertiary-fixed: #001b3f; --mat-sys-on-tertiary-fixed-variant: #00458f; --mat-sys-outline: #857370; --mat-sys-outline-variant: #d8c2be; --mat-sys-primary: #c00100; --mat-sys-primary-container: #ffdad4; --mat-sys-primary-fixed: #ffdad4; --mat-sys-primary-fixed-dim: #ffb4a8; --mat-sys-scrim: #000000; --mat-sys-secondary: #775651; --mat-sys-secondary-container: #ffdad4; --mat-sys-secondary-fixed: #ffdad4; --mat-sys-secondary-fixed-dim: #e7bdb6; --mat-sys-shadow: #000000; --mat-sys-surface: #fff8f6; --mat-sys-surface-bright: #fff8f6; --mat-sys-surface-container: #f9ebe9; --mat-sys-surface-container-high: #f3e5e4; --mat-sys-surface-container-highest: #ede0dd; --mat-sys-surface-container-low: #fef1ef; --mat-sys-surface-container-lowest: #ffffff; --mat-sys-surface-dim: #e4d7d6; --mat-sys-surface-tint: #c00100; --mat-sys-surface-variant: #f5ddda; --mat-sys-tertiary: #005cbb; --mat-sys-tertiary-container: #d7e3ff; --mat-sys-tertiary-fixed: #d7e3ff; --mat-sys-tertiary-fixed-dim: #abc7ff; --mat-sys-neutral-variant20: #3b2d2b; --mat-sys-neutral10: #201a19; --mat-sys-level0: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); --mat-sys-level1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); --mat-sys-level2: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12); --mat-sys-level3: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12); --mat-sys-level4: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); --mat-sys-level5: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12); --mat-sys-body-large: 400 1rem / 1.5rem Inter; --mat-sys-body-large-font: Inter; --mat-sys-body-large-line-height: 1.5rem; --mat-sys-body-large-size: 1rem; --mat-sys-body-large-tracking: 0.031rem; --mat-sys-body-large-weight: 400; --mat-sys-body-medium: 400 0.875rem / 1.25rem Inter; --mat-sys-body-medium-font: Inter; --mat-sys-body-medium-line-height: 1.25rem; --mat-sys-body-medium-size: 0.875rem; --mat-sys-body-medium-tracking: 0.016rem; --mat-sys-body-medium-weight: 400; --mat-sys-body-small: 400 0.75rem / 1rem Inter; --mat-sys-body-small-font: Inter; --mat-sys-body-small-line-height: 1rem; --mat-sys-body-small-size: 0.75rem; --mat-sys-body-small-tracking: 0.025rem; --mat-sys-body-small-weight: 400; --mat-sys-display-large: 400 3.562rem / 4rem Inter; --mat-sys-display-large-font: Inter; --mat-sys-display-large-line-height: 4rem; --mat-sys-display-large-size: 3.562rem; --mat-sys-display-large-tracking: -0.016rem; --mat-sys-display-large-weight: 400; --mat-sys-display-medium: 400 2.812rem / 3.25rem Inter; --mat-sys-display-medium-font: Inter; --mat-sys-display-medium-line-height: 3.25rem; --mat-sys-display-medium-size: 2.812rem; --mat-sys-display-medium-tracking: 0; --mat-sys-display-medium-weight: 400; --mat-sys-display-small: 400 2.25rem / 2.75rem Inter; --mat-sys-display-small-font: Inter; --mat-sys-display-small-line-height: 2.75rem; --mat-sys-display-small-size: 2.25rem; --mat-sys-display-small-tracking: 0; --mat-sys-display-small-weight: 400; --mat-sys-headline-large: 400 2rem / 2.5rem Inter; --mat-sys-headline-large-font: Inter; --mat-sys-headline-large-line-height: 2.5rem; --mat-sys-headline-large-size: 2rem; --mat-sys-headline-large-tracking: 0; --mat-sys-headline-large-weight: 400; --mat-sys-headline-medium: 400 1.75rem / 2.25rem Inter; --mat-sys-headline-medium-font: Inter; --mat-sys-headline-medium-line-height: 2.25rem; --mat-sys-headline-medium-size: 1.75rem; --mat-sys-headline-medium-tracking: 0; --mat-sys-headline-medium-weight: 400; --mat-sys-headline-small: 400 1.5rem / 2rem Inter; --mat-sys-headline-small-font: Inter; --mat-sys-headline-small-line-height: 2rem; --mat-sys-headline-small-size: 1.5rem; --mat-sys-headline-small-tracking: 0; --mat-sys-headline-small-weight: 400; --mat-sys-label-large: 500 0.875rem / 1.25rem Inter; --mat-sys-label-large-font: Inter; --mat-sys-label-large-line-height: 1.25rem; --mat-sys-label-large-size: 0.875rem; --mat-sys-label-large-tracking: 0.006rem; --mat-sys-label-large-weight: 500; --mat-sys-label-large-weight-prominent: 700; --mat-sys-label-medium: 500 0.75rem / 1rem Inter; --mat-sys-label-medium-font: Inter; --mat-sys-label-medium-line-height: 1rem; --mat-sys-label-medium-size: 0.75rem; --mat-sys-label-medium-tracking: 0.031rem; --mat-sys-label-medium-weight: 500; --mat-sys-label-medium-weight-prominent: 700; --mat-sys-label-small: 500 0.688rem / 1rem Inter; --mat-sys-label-small-font: Inter; --mat-sys-label-small-line-height: 1rem; --mat-sys-label-small-size: 0.688rem; --mat-sys-label-small-tracking: 0.031rem; --mat-sys-label-small-weight: 500; --mat-sys-title-large: 400 1.375rem / 1.75rem Inter; --mat-sys-title-large-font: Inter; --mat-sys-title-large-line-height: 1.75rem; --mat-sys-title-large-size: 1.375rem; --mat-sys-title-large-tracking: 0; --mat-sys-title-large-weight: 400; --mat-sys-title-medium: 500 1rem / 1.5rem Inter; --mat-sys-title-medium-font: Inter; --mat-sys-title-medium-line-height: 1.5rem; --mat-sys-title-medium-size: 1rem; --mat-sys-title-medium-tracking: 0.009rem; --mat-sys-title-medium-weight: 500; --mat-sys-title-small: 500 0.875rem / 1.25rem Inter; --mat-sys-title-small-font: Inter; --mat-sys-title-small-line-height: 1.25rem; --mat-sys-title-small-size: 0.875rem; --mat-sys-title-small-tracking: 0.006rem; --mat-sys-title-small-weight: 500; --mat-sys-corner-extra-large: 28px; --mat-sys-corner-extra-large-top: 28px 28px 0 0; --mat-sys-corner-extra-small: 4px; --mat-sys-corner-extra-small-top: 4px 4px 0 0; --mat-sys-corner-full: 9999px; --mat-sys-corner-large: 16px; --mat-sys-corner-large-end: 0 16px 16px 0; --mat-sys-corner-large-start: 16px 0 0 16px; --mat-sys-corner-large-top: 16px 16px 0 0; --mat-sys-corner-medium: 12px; --mat-sys-corner-none: 0; --mat-sys-corner-small: 8px; --mat-sys-dragged-state-layer-opacity: 0.16; --mat-sys-focus-state-layer-opacity: 0.12; --mat-sys-hover-state-layer-opacity: 0.08; --mat-sys-pressed-state-layer-opacity: 0.12; /* Surfaces */ --bg-primary: var(--cfa-color-base-0); --bg-surface: var(--cfa-color-base-1); --bg-surface-hover: var(--cfa-color-base-2); --bg-chip: var(--cfa-color-base-2); /* Text */ --text-primary: var(--cfa-color-contrast); --text-secondary: var(--cfa-color-gray-base); --text-hint: var(--cfa-color-gray-base); /* Links */ --link-color: var(--cfa-color-feedback-info-base); --link-hover-bg: var(--cfa-color-feedback-info-container); /* Status / feedback */ --status-success: var(--cfa-color-feedback-success-base); --status-success-bg: var(--cfa-color-feedback-success-container); --status-success-text: var(--cfa-color-feedback-success-base); --status-error: var(--cfa-color-feedback-error-base); --status-error-bg: var(--cfa-color-feedback-error-container); --status-error-text: var(--cfa-color-feedback-error-base); --status-warning: var(--cfa-color-feedback-warning-strong); --status-warning-bg: var(--cfa-color-feedback-warning-container); --status-warning-text: var(--cfa-color-feedback-warning-strong); /* Badges */ --badge-online: var(--cfa-color-feedback-success-base); --badge-offline: var(--cfa-color-feedback-error-base); --badge-unknown: var(--cfa-color-feedback-warning-strong); /* Misc */ --device-count-bg: var(--cfa-color-base-2); --device-count-text: var(--cfa-color-contrast); --border-light: var(--cfa-color-divider); --cfa-primary: var(--cfa-color-secondary-base); --mat-sys-background: var(--cfa-color-base-0); --mat-sys-on-background: var(--cfa-color-contrast); --mat-sys-surface: var(--cfa-color-base-1); --mat-sys-surface-dim: var(--cfa-color-base-0); --mat-sys-surface-bright: var(--cfa-color-base-1); --mat-sys-surface-container-lowest: var(--cfa-color-base-0); --mat-sys-surface-container-low: var(--cfa-color-base-1); --mat-sys-surface-container: var(--cfa-color-base-1); --mat-sys-surface-container-high: var(--cfa-color-base-2); --mat-sys-surface-container-highest: var(--cfa-color-base-2); --mat-sys-on-surface: var(--cfa-color-contrast); --mat-sys-on-surface-variant: var(--cfa-color-gray-base); --mat-sys-primary: var(--cfa-color-primary-base); --mat-sys-on-primary: var(--cfa-color-primary-contrast); --mat-sys-error: var(--cfa-color-feedback-error-base); --mat-sys-on-error: var(--cfa-color-feedback-error-contrast); --mat-sys-outline: var(--cfa-color-divider); --mat-sys-outline-variant: var(--cfa-color-outline-3); } body[data-color-mode=dark] { color-scheme: dark; --mat-sys-background: #181211; --mat-sys-error: #ffb4ab; --mat-sys-error-container: #93000a; --mat-sys-inverse-on-surface: #362f2e; --mat-sys-inverse-primary: #c00100; --mat-sys-inverse-surface: #ede0dd; --mat-sys-on-background: #ede0dd; --mat-sys-on-error: #690005; --mat-sys-on-error-container: #ffdad6; --mat-sys-on-primary: #690100; --mat-sys-on-primary-container: #ffdad4; --mat-sys-on-primary-fixed: #410000; --mat-sys-on-primary-fixed-variant: #930100; --mat-sys-on-secondary: #442925; --mat-sys-on-secondary-container: #ffdad4; --mat-sys-on-secondary-fixed: #2c1512; --mat-sys-on-secondary-fixed-variant: #5d3f3b; --mat-sys-on-surface: #ede0dd; --mat-sys-on-surface-variant: #f5ddda; --mat-sys-on-tertiary: #002f65; --mat-sys-on-tertiary-container: #d7e3ff; --mat-sys-on-tertiary-fixed: #001b3f; --mat-sys-on-tertiary-fixed-variant: #00458f; --mat-sys-outline: #a08c89; --mat-sys-outline-variant: #534341; --mat-sys-primary: #ffb4a8; --mat-sys-primary-container: #930100; --mat-sys-primary-fixed: #ffdad4; --mat-sys-primary-fixed-dim: #ffb4a8; --mat-sys-scrim: #000000; --mat-sys-secondary: #e7bdb6; --mat-sys-secondary-container: #5d3f3b; --mat-sys-secondary-fixed: #ffdad4; --mat-sys-secondary-fixed-dim: #e7bdb6; --mat-sys-shadow: #000000; --mat-sys-surface: #181211; --mat-sys-surface-bright: #3f3737; --mat-sys-surface-container: #251e1d; --mat-sys-surface-container-high: #302828; --mat-sys-surface-container-highest: #3b3332; --mat-sys-surface-container-low: #201a19; --mat-sys-surface-container-lowest: #130d0c; --mat-sys-surface-dim: #181211; --mat-sys-surface-tint: #ffb4a8; --mat-sys-surface-variant: #534341; --mat-sys-tertiary: #abc7ff; --mat-sys-tertiary-container: #00458f; --mat-sys-tertiary-fixed: #d7e3ff; --mat-sys-tertiary-fixed-dim: #abc7ff; --mat-sys-neutral-variant20: #3b2d2b; --mat-sys-neutral10: #201a19; --mat-sys-level0: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); --mat-sys-level1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); --mat-sys-level2: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12); --mat-sys-level3: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12); --mat-sys-level4: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); --mat-sys-level5: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12); --mat-sys-corner-extra-large: 28px; --mat-sys-corner-extra-large-top: 28px 28px 0 0; --mat-sys-corner-extra-small: 4px; --mat-sys-corner-extra-small-top: 4px 4px 0 0; --mat-sys-corner-full: 9999px; --mat-sys-corner-large: 16px; --mat-sys-corner-large-end: 0 16px 16px 0; --mat-sys-corner-large-start: 16px 0 0 16px; --mat-sys-corner-large-top: 16px 16px 0 0; --mat-sys-corner-medium: 12px; --mat-sys-corner-none: 0; --mat-sys-corner-small: 8px; --mat-sys-dragged-state-layer-opacity: 0.16; --mat-sys-focus-state-layer-opacity: 0.12; --mat-sys-hover-state-layer-opacity: 0.08; --mat-sys-pressed-state-layer-opacity: 0.12; /* Surfaces */ --bg-primary: var(--cfa-color-base-0); --bg-surface: var(--cfa-color-base-1); --bg-surface-hover: var(--cfa-color-base-2); --bg-chip: var(--cfa-color-base-2); /* Text */ --text-primary: var(--cfa-color-contrast); --text-secondary: var(--cfa-color-gray-base); --text-hint: var(--cfa-color-gray-base); /* Links */ --link-color: var(--cfa-color-feedback-info-base); --link-hover-bg: var(--cfa-color-feedback-info-container); /* Status / feedback */ --status-success: var(--cfa-color-feedback-success-base); --status-success-bg: var(--cfa-color-feedback-success-container); --status-success-text: var(--cfa-color-feedback-success-base); --status-error: var(--cfa-color-feedback-error-base); --status-error-bg: var(--cfa-color-feedback-error-container); --status-error-text: var(--cfa-color-feedback-error-base); --status-warning: var(--cfa-color-feedback-warning-strong); --status-warning-bg: var(--cfa-color-feedback-warning-container); --status-warning-text: var(--cfa-color-feedback-warning-strong); /* Badges */ --badge-online: var(--cfa-color-feedback-success-base); --badge-offline: var(--cfa-color-feedback-error-base); --badge-unknown: var(--cfa-color-feedback-warning-strong); /* Misc */ --device-count-bg: var(--cfa-color-base-2); --device-count-text: var(--cfa-color-contrast); --border-light: var(--cfa-color-divider); --cfa-primary: var(--cfa-color-secondary-base); --mat-sys-background: var(--cfa-color-base-0); --mat-sys-on-background: var(--cfa-color-contrast); --mat-sys-surface: var(--cfa-color-base-1); --mat-sys-surface-dim: var(--cfa-color-base-0); --mat-sys-surface-bright: var(--cfa-color-base-1); --mat-sys-surface-container-lowest: var(--cfa-color-base-0); --mat-sys-surface-container-low: var(--cfa-color-base-1); --mat-sys-surface-container: var(--cfa-color-base-1); --mat-sys-surface-container-high: var(--cfa-color-base-2); --mat-sys-surface-container-highest: var(--cfa-color-base-2); --mat-sys-on-surface: var(--cfa-color-contrast); --mat-sys-on-surface-variant: var(--cfa-color-gray-base); --mat-sys-primary: var(--cfa-color-primary-base); --mat-sys-on-primary: var(--cfa-color-primary-contrast); --mat-sys-error: var(--cfa-color-feedback-error-base); --mat-sys-on-error: var(--cfa-color-feedback-error-contrast); --mat-sys-outline: var(--cfa-color-divider); --mat-sys-outline-variant: var(--cfa-color-outline-3); } /*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles.scss?ngGlobalStyle ***! \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ html, body { height: 100%; } body { margin: 0; font-family: var(--app-font-family); background-color: var(--cfa-color-base-0); color: var(--cfa-color-contrast); } .container { max-width: 90%; margin-left: auto; margin-right: auto; } .nav-cards-container-lg { display: grid; padding: 1rem; grid-template-columns: repeat(auto-fill, minmax(275px, 1fr)); grid-gap: 1rem; } .nav-cards-container { display: grid; padding: 1rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-gap: 1rem; } .cfa-nav-content { background-color: var(--cfa-color-base-0); } /* Material's MDC buttons add text-label spacing margins to (e.g. * margin-left: -4px/-8px; margin-right: 8px) so an icon sits nicely next to a * text label. In an icon-only button those margins shift the lone icon * off-center. CSS can't reliably detect "icon-only" buttons (an empty * .mdc-button__label flex item is still present, so a flex `gap` would push the * icon off-center), so apply the `.icon-only-button` class to any button whose * only content is a to center it and clear those margins. */ #store-number-search-button, .icon-only-button { display: inline-flex; align-items: center; justify-content: center; } #store-number-search-button .mat-icon { margin: 0; } .icon-only-button .mat-icon { margin: 0 !important; } /* --------------------------------------------------------------------------- * Bootstrap compatibility shim. * The app previously pulled Bootstrap 4 from a CDN. These are the only Bootstrap * classes still referenced in templates, re-implemented with design tokens so * the dependency (and its light-mode-only styling) can be dropped. * ------------------------------------------------------------------------- */ .row { display: flex; flex-wrap: wrap; } .col { flex: 1 0 0%; max-width: 100%; } .justify-content-center { justify-content: center; } .align-items-center { align-items: center; } .align-self-center { align-self: center; } .text-center { text-align: center; } .mb-1 { margin-bottom: 0.25rem; } /* Native form controls (previously styled by Bootstrap's .form-control). * Token-based so they stay coherent in light and dark mode. */ .form-control { display: block; width: 100%; padding: 8px 12px; font-size: 14px; line-height: 1.5; color: var(--cfa-color-contrast); background-color: var(--cfa-color-base-1); border: 1px solid var(--cfa-color-form-field-outline); border-radius: var(--cfa-size-corner-md, 8px); transition: border-color 0.15s ease; } .form-control:focus { outline: none; border-color: var(--cfa-color-form-field-hover-outline); } .form-control:disabled { background-color: var(--cfa-color-disabled-base); color: var(--cfa-color-disabled-contrast); cursor: not-allowed; } .form-control.is-invalid { border-color: var(--cfa-color-feedback-error-base); } .table { width: 100%; margin-bottom: 1rem; border-collapse: collapse; color: var(--cfa-color-contrast); } .table th, .table td { padding: 0.75rem; border-top: 1px solid var(--cfa-color-divider); text-align: left; vertical-align: top; } .table thead th { border-top: 0; border-bottom: 2px solid var(--cfa-color-divider); vertical-align: bottom; font-weight: 600; } /* --------------------------------------------------------------------------- * Shared health-dashboard visual language. * These classes are used across the Device, WAN, LAN and WiFi health pages so * the pages stay coherent ("from the same cloth"). Status colours resolve from * the mode-aware CFA token bridge in theme.scss. * ------------------------------------------------------------------------- */ /* Grouping container ("zone") with a status-dot + title + count header */ .zone { display: flex; flex-direction: column; gap: 10px; background: var(--cfa-color-base-1); border: 1px solid var(--cfa-color-divider); border-radius: 12px; padding: 14px; } .zone-header { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; } .zone-header .status-dot { width: 10px; height: 10px; margin-right: 6px; flex-shrink: 0; } .zone-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin: 0; } .zone-action { margin-left: auto; } /* Status dots */ .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } .status-green { background-color: var(--status-success); } .status-red { background-color: var(--status-error); } .status-yellow { background-color: var(--status-warning); } .status-neutral { background-color: var(--cfa-color-feedback-offline-base); } /* Count badge + health chip used in zone headers */ .device-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 11px; background: var(--device-count-bg); color: var(--device-count-text); font-size: 12px; font-weight: 600; padding: 0 6px; margin-left: 10px; } .health-chip { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; margin-left: 10px; } .health-chip.healthy { background: var(--status-success-bg); color: var(--status-success-text); } .health-chip.unhealthy { background: var(--status-error-bg); color: var(--status-error-text); } /* Card grid for laying device cards out in a zone */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; align-items: start; } .card-grid app-circuit-card, .card-grid app-fortigate-card, .card-grid app-fiber-nid-card, .card-grid app-cradlepoint-card, .card-grid app-meraki-card, .card-grid app-mist-card, .card-grid app-pos-services-card { display: block; } /* Status accent for the larger device cards (colored left border + tint) */ .device-card-wrap { border-radius: 10px; border-left: 5px solid transparent; overflow: hidden; } .device-card-wrap.is-online { border-left-color: var(--status-success); background: var(--status-success-bg); } .device-card-wrap.is-warn { border-left-color: var(--status-warning); background: var(--status-warning-bg); } .device-card-wrap.is-offline { border-left-color: var(--status-error); background: var(--status-error-bg); } /* Compact, expandable Access Point cards */ .ap-grid { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: start; } .ap-card { border: 1px solid var(--cfa-color-divider); border-left: 4px solid var(--cfa-color-divider); border-radius: 10px; background: var(--cfa-color-base-0); overflow: hidden; } .ap-card.is-online { border-left-color: var(--status-success); } .ap-card.is-offline { border-left-color: var(--status-error); } .ap-card-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; background: transparent; border: none; cursor: pointer; font-family: var(--app-font-family); color: var(--text-primary); text-align: left; } .ap-card-head:hover { background: var(--bg-surface-hover); } .ap-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ap-model { font-size: 12px; color: var(--text-secondary); white-space: nowrap; } .ap-expand-icon { color: var(--text-secondary); flex-shrink: 0; } .ap-details { padding: 0 12px 10px; border-top: 1px solid var(--cfa-color-divider); } .ap-details p { margin: 6px 0 0; font-size: 12px; color: var(--text-primary); word-break: break-word; } /*# sourceMappingURL=styles.css.map*/