// ================================= // C2G MATERIAL DESIGN TOKEN OVERRIDES // ================================= // Maps Angular Material MDC tokens to C2G design tokens. // Import this file in any app that uses @angular/material alongside @camp2gether/c2g-ui. // Consumed via: @import '@camp2gether/c2g-ui/src/lib/styles/material-tokens.scss' :root { // --------------------------------------------------------------- // CORNER RADIUS // --------------------------------------------------------------- --mat-sys-corner-none: 0; --mat-sys-corner-extra-small: 4px; --mat-sys-corner-small: 8px; --mat-sys-corner-medium: 12px; --mat-sys-corner-large: 16px; --mat-sys-corner-extra-large: 28px; --mat-sys-corner-full: 50%; // --------------------------------------------------------------- // SURFACE TOKENS (light mode defaults) // --------------------------------------------------------------- --mat-sys-surface: var(--c2g-color-neutral-50); --mat-sys-surface-dim: var(--c2g-color-neutral-100); --mat-sys-surface-bright: #ffffff; --mat-sys-surface-container-lowest: #ffffff; --mat-sys-surface-container-low: var(--c2g-color-neutral-100); --mat-sys-surface-container: var(--c2g-color-neutral-200); --mat-sys-surface-container-high: var(--c2g-color-neutral-300); --mat-sys-surface-container-highest: var(--c2g-color-neutral-400); --mat-sys-surface-variant: var(--c2g-color-neutral-200); --mat-sys-on-surface: var(--c2g-color-neutral-900); --mat-sys-on-surface-variant: var(--c2g-color-neutral-700); --mat-sys-on-background: var(--c2g-color-neutral-900); --mat-sys-background: var(--c2g-color-neutral-50); // --------------------------------------------------------------- // STATE LAYER OPACITIES // --------------------------------------------------------------- --mat-sys-hover-state-layer-opacity: 0.08; --mat-sys-focus-state-layer-opacity: 0.12; --mat-sys-pressed-state-layer-opacity: 0.12; // --------------------------------------------------------------- // PRIMARY / SECONDARY SYS TOKENS // --------------------------------------------------------------- --mat-sys-primary: var(--c2g-color-primary); --mat-sys-on-primary: #ffffff; --mat-sys-on-primary-container: var(--c2g-color-secondary); --mat-sys-primary-container: var(--c2g-color-secondary-light); --mat-sys-secondary-container: var(--c2g-color-secondary-light); --mat-sys-outline: var(--c2g-color-neutral-500); // --------------------------------------------------------------- // ELEVATION LEVELS // --------------------------------------------------------------- --mat-sys-level0: none; --mat-sys-level1: 0 1px 3px rgba(31, 28, 25, 0.06); --mat-sys-level2: 0 2px 6px rgba(31, 28, 25, 0.08); --mat-sys-level3: 0 4px 12px rgba(31, 28, 25, 0.1); --mat-sys-level4: 0 8px 20px rgba(31, 28, 25, 0.12); --mat-sys-level5: 0 12px 28px rgba(31, 28, 25, 0.14); // --------------------------------------------------------------- // TYPOGRAPHY SYS TOKENS // --------------------------------------------------------------- --mat-sys-body-medium-font: var(--c2g-color-font-family, 'Quicksand', system-ui, sans-serif); --mat-sys-body-medium-line-height: 1.5; --mat-sys-body-medium-size: 14px; --mat-sys-body-medium-tracking: 0.25px; --mat-sys-body-medium-weight: 400; --mat-sys-label-large-font: var(--c2g-color-font-family, 'Quicksand', system-ui, sans-serif); --mat-sys-label-large-size: 14px; --mat-sys-label-large-tracking: 0.1px; --mat-sys-label-large-weight: 500; --mat-sys-label-medium-font: var(--c2g-color-font-family, 'Quicksand', system-ui, sans-serif); --mat-sys-label-medium-size: 12px; --mat-sys-label-medium-tracking: 0.5px; --mat-sys-label-medium-weight: 500; --mat-sys-label-small-font: var(--c2g-color-font-family, 'Quicksand', system-ui, sans-serif); --mat-sys-label-small-size: 11px; --mat-sys-label-small-tracking: 0.5px; --mat-sys-label-small-weight: 500; // --------------------------------------------------------------- // BUTTON SHAPE OVERRIDES (reduce M3 over-rounding) // --------------------------------------------------------------- --mat-button-protected-container-shape: var(--mat-sys-corner-small); --mat-button-filled-container-shape: var(--mat-sys-corner-small); --mat-filled-button-container-shape: var(--mat-sys-corner-small); --mat-button-outlined-container-shape: var(--mat-sys-corner-small); --mat-outlined-button-outline-shape: var(--mat-sys-corner-small); --mat-button-text-container-shape: var(--mat-sys-corner-small); --mat-text-button-container-shape: var(--mat-sys-corner-small); --mat-button-raised-container-shape: var(--mat-sys-corner-small); --mat-fab-container-shape: var(--mat-sys-corner-large); --mat-icon-button-container-shape: var(--mat-sys-corner-full); // --------------------------------------------------------------- // BUTTON — PROTECTED (raised) // --------------------------------------------------------------- --mat-button-protected-container-color: var(--c2g-color-neutral-100); --mat-button-protected-container-elevation-shadow: var(--mat-sys-level1); --mat-button-protected-container-height: 40px; --mat-button-protected-horizontal-padding: 24px; --mat-button-protected-label-text-color: var(--c2g-color-primary); --mat-button-protected-label-text-font: var(--mat-sys-label-large-font); --mat-button-protected-label-text-size: 14px; --mat-button-protected-label-text-tracking: 0.1px; --mat-button-protected-label-text-transform: none; --mat-button-protected-label-text-weight: 500; --mat-button-protected-state-layer-color: var(--c2g-color-primary); --mat-button-protected-hover-state-layer-opacity: 0.08; --mat-button-protected-focus-state-layer-opacity: 0.12; --mat-button-protected-pressed-state-layer-opacity: 0.12; --mat-button-protected-ripple-color: color-mix(in srgb, var(--c2g-color-primary) 12%, transparent); --mat-button-protected-hover-container-elevation-shadow: var(--mat-sys-level2); --mat-button-protected-focus-container-elevation-shadow: var(--mat-sys-level1); --mat-button-protected-pressed-container-elevation-shadow: var(--mat-sys-level1); --mat-button-protected-disabled-container-color: color-mix(in srgb, var(--c2g-color-neutral-500) 12%, transparent); --mat-button-protected-disabled-container-elevation-shadow: none; --mat-button-protected-disabled-label-text-color: color-mix(in srgb, var(--c2g-color-neutral-700) 38%, transparent); --mat-button-protected-disabled-state-layer-color: var(--c2g-color-neutral-500); // --------------------------------------------------------------- // BUTTON — FILLED (unelevated) // --------------------------------------------------------------- --mat-button-filled-container-color: var(--c2g-color-primary); --mat-button-filled-container-height: 40px; --mat-button-filled-horizontal-padding: 24px; --mat-button-filled-label-text-color: #ffffff; --mat-button-filled-label-text-font: var(--mat-sys-label-large-font); --mat-button-filled-label-text-size: 14px; --mat-button-filled-label-text-tracking: 0.1px; --mat-button-filled-label-text-transform: none; --mat-button-filled-label-text-weight: 500; --mat-button-filled-state-layer-color: var(--c2g-color-neutral-50); --mat-button-filled-hover-state-layer-opacity: 0.08; --mat-button-filled-focus-state-layer-opacity: 0.12; --mat-button-filled-pressed-state-layer-opacity: 0.12; --mat-button-filled-ripple-color: color-mix(in srgb, var(--c2g-color-neutral-50) 12%, transparent); --mat-button-filled-disabled-container-color: color-mix(in srgb, var(--c2g-color-neutral-500) 12%, transparent); --mat-button-filled-disabled-label-text-color: color-mix(in srgb, var(--c2g-color-neutral-700) 38%, transparent); --mat-button-filled-disabled-state-layer-color: var(--c2g-color-neutral-500); // --------------------------------------------------------------- // BUTTON — OUTLINED // --------------------------------------------------------------- --mat-button-outlined-container-height: 40px; --mat-button-outlined-horizontal-padding: 24px; --mat-button-outlined-outline-color: var(--c2g-color-primary); --mat-button-outlined-outline-width: 1px; --mat-button-outlined-label-text-color: var(--c2g-color-primary); --mat-button-outlined-label-text-font: var(--mat-sys-label-large-font); --mat-button-outlined-label-text-size: 14px; --mat-button-outlined-label-text-tracking: 0.1px; --mat-button-outlined-label-text-transform: none; --mat-button-outlined-label-text-weight: 500; --mat-button-outlined-state-layer-color: var(--c2g-color-primary); --mat-button-outlined-hover-state-layer-opacity: 0.08; --mat-button-outlined-focus-state-layer-opacity: 0.12; --mat-button-outlined-pressed-state-layer-opacity: 0.12; --mat-button-outlined-ripple-color: color-mix(in srgb, var(--c2g-color-primary) 12%, transparent); --mat-button-outlined-disabled-outline-color: color-mix(in srgb, var(--c2g-color-neutral-500) 12%, transparent); --mat-button-outlined-disabled-label-text-color: color-mix(in srgb, var(--c2g-color-neutral-700) 38%, transparent); --mat-button-outlined-disabled-state-layer-color: var(--c2g-color-neutral-500); // --------------------------------------------------------------- // BUTTON — TEXT // --------------------------------------------------------------- --mat-button-text-container-height: 40px; --mat-button-text-horizontal-padding: 12px; --mat-button-text-label-text-color: var(--c2g-color-primary); --mat-button-text-label-text-font: var(--mat-sys-label-large-font); --mat-button-text-label-text-size: 14px; --mat-button-text-label-text-tracking: 0.1px; --mat-button-text-label-text-transform: none; --mat-button-text-label-text-weight: 500; --mat-button-text-state-layer-color: var(--c2g-color-primary); --mat-button-text-hover-state-layer-opacity: 0.08; --mat-button-text-focus-state-layer-opacity: 0.12; --mat-button-text-pressed-state-layer-opacity: 0.12; --mat-button-text-ripple-color: color-mix(in srgb, var(--c2g-color-primary) 12%, transparent); --mat-button-text-disabled-label-text-color: color-mix(in srgb, var(--c2g-color-neutral-700) 38%, transparent); --mat-button-text-disabled-state-layer-color: var(--c2g-color-neutral-500); // Legacy aliases --mat-text-button-label-text-color: var(--c2g-color-primary); --mat-outlined-button-outline-color: var(--c2g-color-primary); // --------------------------------------------------------------- // BUTTON — TONAL (filled-tonal) // --------------------------------------------------------------- --mat-button-tonal-container-color: var(--c2g-color-secondary-light); --mat-button-tonal-container-height: 40px; --mat-button-tonal-horizontal-padding: 24px; --mat-button-tonal-label-text-color: var(--c2g-color-secondary); --mat-button-tonal-label-text-font: var(--mat-sys-label-large-font); --mat-button-tonal-label-text-size: 14px; --mat-button-tonal-label-text-tracking: 0.1px; --mat-button-tonal-label-text-transform: none; --mat-button-tonal-label-text-weight: 500; --mat-button-tonal-state-layer-color: var(--c2g-color-secondary); --mat-button-tonal-hover-state-layer-opacity: 0.08; --mat-button-tonal-focus-state-layer-opacity: 0.12; --mat-button-tonal-pressed-state-layer-opacity: 0.12; --mat-button-tonal-ripple-color: color-mix(in srgb, var(--c2g-color-secondary) 12%, transparent); --mat-button-tonal-disabled-container-color: color-mix(in srgb, var(--c2g-color-neutral-500) 12%, transparent); --mat-button-tonal-disabled-label-text-color: color-mix(in srgb, var(--c2g-color-neutral-700) 38%, transparent); --mat-button-tonal-disabled-state-layer-color: var(--c2g-color-neutral-500); // --------------------------------------------------------------- // ICON BUTTON // --------------------------------------------------------------- --mat-icon-button-state-layer-size: 48px; --mat-icon-button-touch-target-size: 48px; --mat-icon-button-icon-size: 24px; --mat-icon-button-icon-color: var(--mat-sys-on-surface); --mat-icon-button-hover-state-layer-color: var(--mat-sys-on-surface); --mat-icon-button-hover-state-layer-opacity: 0.08; --mat-icon-button-focus-state-layer-color: var(--mat-sys-on-surface); --mat-icon-button-focus-state-layer-opacity: 0.12; --mat-icon-button-pressed-state-layer-color: var(--mat-sys-on-surface); --mat-icon-button-pressed-state-layer-opacity: 0.12; // --------------------------------------------------------------- // FAB // --------------------------------------------------------------- --mat-fab-container-color: var(--mat-sys-primary-container); --mat-fab-foreground-color: var(--mat-sys-on-primary-container); --mat-fab-container-height: 56px; --mat-fab-small-container-height: 40px; --mat-fab-large-container-height: 96px; // --------------------------------------------------------------- // TOOLTIP // --------------------------------------------------------------- --mat-tooltip-container-color: var(--c2g-color-neutral-800); --mat-tooltip-supporting-text-color: var(--c2g-color-neutral-50); --mat-tooltip-container-shape: var(--mat-sys-corner-extra-small); --mdc-plain-tooltip-container-color: var(--c2g-color-neutral-800); --mdc-plain-tooltip-supporting-text-color: var(--c2g-color-neutral-50); // --------------------------------------------------------------- // TOOLBAR / SIDENAV // --------------------------------------------------------------- --mat-toolbar-container-background-color: var(--mat-sys-surface-container); --mat-sidenav-container-shape: var(--mat-sys-corner-medium); --mat-sidenav-container-background-color: var(--mat-sys-surface-container-low); --mat-sidenav-content-background-color: var(--mat-sys-surface); --mat-sidenav-content-text-color: var(--mat-sys-on-surface); // --------------------------------------------------------------- // TABLE // --------------------------------------------------------------- --mat-table-background-color: transparent; --mat-table-header-headline-color: var(--c2g-color-text-secondary); --mat-table-header-headline-font: var(--mat-sys-label-large-font); --mat-table-header-headline-size: 0.75rem; --mat-table-header-headline-weight: 600; --mat-table-header-headline-tracking: 0.05em; --mat-table-header-headline-line-height: 1.4; --mat-table-row-item-label-text-color: var(--c2g-color-text-primary); --mat-table-row-item-label-text-font: var(--mat-sys-body-medium-font); --mat-table-row-item-label-text-size: 0.875rem; --mat-table-row-item-label-text-weight: 400; --mat-table-row-item-label-text-line-height: 1.5; --mat-table-row-item-label-text-tracking: 0; --mat-table-row-item-outline-color: var(--c2g-color-outline-variant); --mat-table-row-item-outline-width: 1px; --mat-table-footer-supporting-text-color: var(--c2g-color-text-muted); --mat-table-footer-supporting-text-font: var(--mat-sys-body-medium-font); --mat-table-footer-supporting-text-size: 0.875rem; --mat-table-footer-supporting-text-line-height: 1.5; --mat-table-footer-supporting-text-tracking: 0; --mat-table-footer-supporting-text-weight: 400; --mat-table-header-container-height: 52px; --mat-table-footer-container-height: 52px; --mat-table-row-item-container-height: 52px; // --------------------------------------------------------------- // DIALOG // --------------------------------------------------------------- --mdc-dialog-container-color: #ffffff; --mdc-dialog-container-shape: var(--mat-sys-corner-large); --mdc-dialog-subhead-color: var(--c2g-color-text-primary); --mdc-dialog-subhead-font: var(--mat-sys-label-large-font); --mdc-dialog-subhead-size: 1.25rem; --mdc-dialog-subhead-weight: 600; --mdc-dialog-subhead-tracking: -0.01em; --mdc-dialog-supporting-text-color: var(--c2g-color-text-secondary); --mdc-dialog-supporting-text-font: var(--mat-sys-body-medium-font); --mdc-dialog-supporting-text-size: 0.875rem; --mdc-dialog-supporting-text-weight: 400; --mdc-dialog-supporting-text-tracking: 0; --mat-dialog-container-max-width: 560px; --mat-dialog-container-small-max-width: 95vw; --mat-dialog-headline-padding: 1.5rem 1.5rem 0.5rem; --mat-dialog-content-padding: 0.5rem 1.5rem; --mat-dialog-actions-padding: 1rem 1.5rem; --mat-dialog-actions-alignment: flex-end; --mat-dialog-with-actions-content-padding: 0.5rem 1.5rem; // --------------------------------------------------------------- // CARD // --------------------------------------------------------------- --mdc-elevated-card-container-color: #ffffff; --mdc-elevated-card-container-shape: var(--mat-sys-corner-medium); --mdc-elevated-card-container-elevation: var(--mat-sys-level1); --mdc-outlined-card-container-color: #ffffff; --mdc-outlined-card-container-shape: var(--mat-sys-corner-medium); --mdc-outlined-card-outline-color: var(--c2g-color-outline-variant); --mdc-outlined-card-outline-width: 1px; --mat-card-subtitle-text-color: var(--c2g-color-text-muted); --mat-card-subtitle-text-font: var(--mat-sys-body-medium-font); --mat-card-subtitle-text-size: 0.875rem; --mat-card-subtitle-text-weight: 400; --mat-card-title-text-color: var(--c2g-color-text-primary); --mat-card-title-text-font: var(--mat-sys-label-large-font); --mat-card-title-text-size: 1rem; --mat-card-title-text-weight: 600; // --------------------------------------------------------------- // SNACKBAR // --------------------------------------------------------------- --mdc-snackbar-container-color: var(--c2g-color-neutral-800); --mdc-snackbar-container-shape: var(--mat-sys-corner-extra-small); --mdc-snackbar-supporting-text-color: var(--c2g-color-neutral-50); --mdc-snackbar-supporting-text-font: var(--mat-sys-body-medium-font); --mdc-snackbar-supporting-text-size: 0.875rem; --mdc-snackbar-supporting-text-weight: 400; --mat-snack-bar-button-color: var(--c2g-color-secondary-light); // --------------------------------------------------------------- // CHIPS // --------------------------------------------------------------- --mdc-chip-container-shape-family: rounded; --mdc-chip-container-shape-radius: var(--mat-sys-corner-small); --mdc-chip-elevated-container-color: var(--c2g-color-neutral-100); --mdc-chip-elevated-selected-container-color: var(--c2g-color-primary-container); --mdc-chip-outline-color: var(--c2g-color-outline); --mdc-chip-outline-width: 1px; --mdc-chip-label-text-color: var(--c2g-color-text-secondary); --mdc-chip-label-text-font: var(--mat-sys-body-medium-font); --mdc-chip-label-text-size: 0.8125rem; --mdc-chip-label-text-weight: 500; --mdc-chip-selected-label-text-color: var(--c2g-color-primary-dark); --mdc-chip-with-icon-icon-color: var(--c2g-color-text-muted); --mdc-chip-with-icon-selected-icon-color: var(--c2g-color-primary-dark); --mdc-chip-with-trailing-icon-trailing-icon-color: var(--c2g-color-text-muted); --mdc-chip-disabled-label-text-color: var(--c2g-color-neutral-400); --mdc-chip-disabled-outline-color: var(--c2g-color-neutral-300); --mat-chip-selected-trailing-icon-color: var(--c2g-color-primary-dark); --mat-chip-focus-state-layer-color: var(--c2g-color-primary); --mat-chip-focus-state-layer-opacity: 0.08; --mat-chip-hover-state-layer-color: color-mix(in srgb, var(--c2g-color-neutral-900) 6%, transparent); --mat-chip-hover-state-layer-opacity: 0.06; --mat-chip-selected-hover-state-layer-color: var(--c2g-color-primary); --mat-chip-selected-hover-state-layer-opacity: 0.08; --mat-chip-trailing-action-state-layer-color: color-mix(in srgb, var(--c2g-color-neutral-900) 6%, transparent); --mat-chip-trailing-action-hover-state-layer-opacity: 0.06; --mat-chip-trailing-action-focus-state-layer-opacity: 0.1; // --------------------------------------------------------------- // PAGINATOR // --------------------------------------------------------------- --mat-paginator-container-text-color: var(--c2g-color-text-secondary); --mat-paginator-container-background-color: transparent; --mat-paginator-enabled-icon-color: var(--c2g-color-text-muted); --mat-paginator-disabled-icon-color: var(--c2g-color-neutral-300); --mat-paginator-container-text-font: var(--mat-sys-body-medium-font); --mat-paginator-container-text-size: 0.8125rem; --mat-paginator-container-text-weight: 400; --mat-paginator-select-trigger-text-size: 0.8125rem; // --------------------------------------------------------------- // FORM FIELD / INPUT // --------------------------------------------------------------- --mdc-outlined-text-field-caret-color: var(--c2g-color-primary); --mdc-outlined-text-field-focus-outline-color: var(--c2g-color-primary); --mdc-outlined-text-field-focus-label-text-color: var(--c2g-color-primary); --mdc-outlined-text-field-label-text-color: var(--c2g-color-text-muted); --mdc-outlined-text-field-hover-label-text-color: var(--c2g-color-text-secondary); --mdc-outlined-text-field-outline-color: var(--c2g-color-outline); --mdc-outlined-text-field-hover-outline-color: var(--c2g-color-neutral-500); --mdc-outlined-text-field-disabled-outline-color: var(--c2g-color-neutral-300); --mdc-outlined-text-field-disabled-label-text-color: var(--c2g-color-neutral-400); --mdc-outlined-text-field-input-text-color: var(--c2g-color-text-primary); --mdc-outlined-text-field-disabled-input-text-color: var(--c2g-color-neutral-400); --mdc-outlined-text-field-input-text-placeholder-color: var(--c2g-color-neutral-400); --mdc-outlined-text-field-error-caret-color: var(--c2g-color-error); --mdc-outlined-text-field-error-focus-label-text-color: var(--c2g-color-error); --mdc-outlined-text-field-error-label-text-color: var(--c2g-color-error); --mdc-outlined-text-field-error-outline-color: var(--c2g-color-error); --mdc-outlined-text-field-error-hover-outline-color: var(--c2g-color-error); --mdc-outlined-text-field-error-focus-outline-color: var(--c2g-color-error); --mdc-outlined-text-field-container-shape: var(--mat-sys-corner-small); --mdc-outlined-text-field-label-text-font: var(--mat-sys-body-medium-font); --mdc-outlined-text-field-label-text-size: 0.875rem; --mdc-outlined-text-field-label-text-weight: 400; --mdc-outlined-text-field-input-text-font: var(--mat-sys-body-medium-font); --mdc-outlined-text-field-input-text-size: 1rem; --mat-form-field-container-text-font: var(--mat-sys-body-medium-font); --mat-form-field-subscript-text-font: var(--mat-sys-body-medium-font); --mat-form-field-subscript-text-size: 0.75rem; --mat-form-field-error-text-color: var(--c2g-color-error); --mat-form-field-hint-text-color: var(--c2g-color-text-muted); --mat-form-field-container-text-line-height: 1.5; --mat-form-field-container-text-size: 1rem; --mat-form-field-container-text-tracking: 0; --mat-form-field-container-text-weight: 400; --mat-form-field-container-height: 56px; --mat-form-field-container-vertical-padding: 16px; --mat-form-field-subscript-text-line-height: 1.4; --mat-form-field-subscript-text-tracking: 0; --mat-form-field-subscript-text-weight: 400; --mat-form-field-outlined-outline-width: 1px; --mat-form-field-outlined-focus-outline-width: 2px; --mat-form-field-outlined-label-text-font: var(--mat-sys-body-medium-font); --mat-form-field-outlined-label-text-size: 0.875rem; --mat-form-field-outlined-label-text-weight: 400; --mat-form-field-outlined-label-text-tracking: 0; --mat-form-field-outlined-label-text-populated-size: 0.75rem; --mat-form-field-outlined-input-text-color: var(--c2g-color-text-primary); --mat-form-field-outlined-input-text-placeholder-color: var(--c2g-color-neutral-400); --mat-form-field-outlined-caret-color: var(--c2g-color-primary); --mat-form-field-outlined-outline-color: var(--c2g-color-outline); --mat-form-field-outlined-hover-outline-color: var(--c2g-color-neutral-500); --mat-form-field-outlined-focus-outline-color: var(--c2g-color-primary); --mat-form-field-outlined-focus-label-text-color: var(--c2g-color-primary); --mat-form-field-outlined-hover-label-text-color: var(--c2g-color-text-secondary); --mat-form-field-outlined-label-text-color: var(--c2g-color-text-muted); --mat-form-field-outlined-disabled-outline-color: var(--c2g-color-neutral-300); --mat-form-field-outlined-disabled-label-text-color: var(--c2g-color-neutral-400); --mat-form-field-outlined-disabled-input-text-color: var(--c2g-color-neutral-400); --mat-form-field-outlined-error-outline-color: var(--c2g-color-error); --mat-form-field-outlined-error-hover-outline-color: var(--c2g-color-error); --mat-form-field-outlined-error-focus-outline-color: var(--c2g-color-error); --mat-form-field-outlined-error-label-text-color: var(--c2g-color-error); --mat-form-field-outlined-error-hover-label-text-color: var(--c2g-color-error); --mat-form-field-outlined-error-focus-label-text-color: var(--c2g-color-error); --mat-form-field-outlined-error-caret-color: var(--c2g-color-error); --mat-form-field-outlined-container-shape: var(--mat-sys-corner-small); --mat-form-field-leading-icon-color: var(--c2g-color-text-muted); --mat-form-field-trailing-icon-color: var(--c2g-color-text-muted); --mat-form-field-disabled-leading-icon-color: var(--c2g-color-neutral-300); --mat-form-field-disabled-trailing-icon-color: var(--c2g-color-neutral-300); --mat-form-field-error-trailing-icon-color: var(--c2g-color-error); --mat-form-field-error-focus-trailing-icon-color: var(--c2g-color-error); --mat-form-field-error-hover-trailing-icon-color: var(--c2g-color-error); --mat-form-field-enabled-select-arrow-color: var(--c2g-color-text-muted); --mat-form-field-disabled-select-arrow-color: var(--c2g-color-neutral-300); --mat-form-field-focus-select-arrow-color: var(--c2g-color-primary); --mat-form-field-state-layer-color: color-mix(in srgb, var(--c2g-color-neutral-900) 6%, transparent); --mat-form-field-hover-state-layer-opacity: 0.06; --mat-form-field-focus-state-layer-opacity: 0.1; --mat-form-field-notch-max-width: 75%; --mat-form-field-select-option-text-color: var(--c2g-color-text-primary); --mat-form-field-select-disabled-option-text-color: var(--c2g-color-neutral-400); --mat-form-field-disabled-input-text-placeholder-color: var(--c2g-color-neutral-300); // --------------------------------------------------------------- // SELECT // --------------------------------------------------------------- --mat-select-trigger-text-font: var(--mat-sys-body-medium-font); --mat-select-trigger-text-size: 1rem; --mat-select-trigger-text-weight: 400; --mat-select-trigger-text-line-height: 1.5; --mat-select-trigger-text-tracking: 0; --mat-select-enabled-trigger-text-color: var(--c2g-color-text-primary); --mat-select-disabled-trigger-text-color: var(--c2g-color-neutral-400); --mat-select-placeholder-text-color: var(--c2g-color-neutral-400); --mat-select-enabled-arrow-color: var(--c2g-color-text-muted); --mat-select-disabled-arrow-color: var(--c2g-color-neutral-300); --mat-select-focused-arrow-color: var(--c2g-color-primary); --mat-select-invalid-arrow-color: var(--c2g-color-error); --mat-select-panel-background-color: #ffffff; --mat-select-container-elevation-shadow: var(--mat-sys-level3); --mat-select-arrow-transform: translateY(-8px); // --------------------------------------------------------------- // OPTION // --------------------------------------------------------------- --mat-option-selected-state-layer-color: var(--mat-sys-secondary-container); --mat-option-label-text-color: var(--mat-sys-on-surface); --mat-option-label-text-font: var(--mat-sys-body-medium-font); --mat-option-label-text-size: 0.875rem; --mat-option-label-text-line-height: 1.5; --mat-option-label-text-weight: 400; --mat-option-label-text-tracking: 0; --mat-option-hover-state-layer-color: color-mix(in srgb, var(--mat-sys-secondary-container) 30%, transparent); --mat-option-hover-state-layer-opacity: 1; --mat-option-focus-state-layer-color: var(--mat-sys-on-surface); --mat-option-focus-state-layer-opacity: 0.12; --mat-option-selected-state-label-text-color: var(--mat-sys-primary); --mat-option-disabled-label-text-color: var(--mat-sys-on-surface-variant); --mat-option-disabled-label-text-opacity: 0.38; // --------------------------------------------------------------- // MENU // --------------------------------------------------------------- --mat-menu-container-color: #ffffff; --mat-menu-container-shape: var(--mat-sys-corner-extra-small); --mat-menu-container-elevation-shadow: var(--mat-sys-level3); --mat-menu-divider-color: var(--c2g-color-outline-variant); --mat-menu-divider-top-spacing: 4px; --mat-menu-divider-bottom-spacing: 4px; --mat-menu-item-label-text-color: var(--c2g-color-text-primary); --mat-menu-item-label-text-font: var(--mat-sys-body-medium-font); --mat-menu-item-label-text-size: 0.875rem; --mat-menu-item-label-text-line-height: 1.5; --mat-menu-item-label-text-weight: 400; --mat-menu-item-label-text-tracking: 0; --mat-menu-item-icon-color: var(--c2g-color-text-muted); --mat-menu-item-icon-size: 20px; --mat-menu-item-hover-state-layer-color: color-mix(in srgb, var(--c2g-color-neutral-900) 6%, transparent); --mat-menu-item-focus-state-layer-color: color-mix(in srgb, var(--c2g-color-neutral-900) 10%, transparent); --mat-menu-item-leading-spacing: 12px; --mat-menu-item-trailing-spacing: 12px; --mat-menu-item-spacing: 16px; --mat-menu-item-with-icon-leading-spacing: 12px; --mat-menu-item-with-icon-trailing-spacing: 12px; // --------------------------------------------------------------- // DIVIDER // --------------------------------------------------------------- --mat-divider-color: var(--c2g-color-outline-variant); --mat-divider-width: 1px; // --------------------------------------------------------------- // PROGRESS BAR // --------------------------------------------------------------- --mdc-linear-progress-active-indicator-color: var(--c2g-color-primary); --mdc-linear-progress-track-color: var(--c2g-color-neutral-200); --mdc-linear-progress-active-indicator-height: 4px; --mdc-linear-progress-track-shape: var(--mat-sys-corner-full); // --------------------------------------------------------------- // PROGRESS SPINNER // --------------------------------------------------------------- --mdc-circular-progress-active-indicator-color: var(--c2g-color-primary); --mdc-circular-progress-size: 48px; --mdc-circular-progress-active-indicator-width: 4px; // --------------------------------------------------------------- // LIST // --------------------------------------------------------------- --mat-list-active-indicator-color: var(--c2g-color-primary-container); --mat-list-active-indicator-shape: var(--mat-sys-corner-full); --mdc-list-list-item-container-color: transparent; --mdc-list-list-item-selected-container-color: var(--c2g-color-primary-container); --mdc-list-list-item-label-text-color: var(--c2g-color-text-primary); --mdc-list-list-item-supporting-text-color: var(--c2g-color-text-muted); --mdc-list-list-item-trailing-supporting-text-color: var(--c2g-color-text-muted); --mdc-list-list-item-label-text-font: var(--mat-sys-body-medium-font); --mdc-list-list-item-label-text-size: 0.875rem; --mdc-list-list-item-label-text-weight: 400; --mdc-list-list-item-supporting-text-font: var(--mat-sys-body-medium-font); --mdc-list-list-item-supporting-text-size: 0.75rem; --mdc-list-list-item-hover-state-layer-color: color-mix(in srgb, var(--c2g-color-neutral-900) 6%, transparent); --mdc-list-list-item-hover-state-layer-opacity: 0.06; --mdc-list-list-item-focus-state-layer-color: color-mix(in srgb, var(--c2g-color-neutral-900) 10%, transparent); --mdc-list-list-item-focus-state-layer-opacity: 0.1; --mdc-list-list-item-disabled-label-text-color: var(--c2g-color-neutral-400); --mdc-list-list-item-disabled-state-layer-opacity: 0.38; // --------------------------------------------------------------- // TABS // --------------------------------------------------------------- --mat-tab-background-color: transparent; --mat-tab-foreground-color: var(--c2g-color-text-secondary); --mat-tab-active-label-text-color: var(--c2g-color-primary); --mat-tab-inactive-label-text-color: var(--c2g-color-text-muted); --mat-tab-active-indicator-color: var(--c2g-color-primary); --mat-tab-active-indicator-height: 2px; --mat-tab-active-indicator-shape: var(--mat-sys-corner-none); --mat-tab-divider-color: var(--c2g-color-outline-variant); --mat-tab-divider-height: 1px; --mat-tab-label-text-font: var(--mat-sys-label-large-font); --mat-tab-label-text-size: 0.875rem; --mat-tab-label-text-weight: 600; --mat-tab-label-text-tracking: 0.01em; --mat-tab-label-text-line-height: 1.5; --mat-tab-container-height: 48px; --mat-tab-active-hover-label-text-color: var(--c2g-color-primary-dark); --mat-tab-active-focus-label-text-color: var(--c2g-color-primary-dark); --mat-tab-inactive-hover-label-text-color: var(--c2g-color-text-secondary); --mat-tab-inactive-focus-label-text-color: var(--c2g-color-text-secondary); --mat-tab-active-hover-indicator-color: var(--c2g-color-primary-dark); --mat-tab-active-focus-indicator-color: var(--c2g-color-primary-dark); --mat-tab-active-ripple-color: var(--c2g-color-primary); --mat-tab-inactive-ripple-color: var(--c2g-color-neutral-900); --mat-tab-disabled-ripple-color: var(--c2g-color-neutral-300); --mat-tab-pagination-icon-color: var(--c2g-color-text-muted); --mat-tab-animation-duration: 200ms; // --------------------------------------------------------------- // EXPANSION PANEL // --------------------------------------------------------------- --mat-expansion-container-background-color: #ffffff; --mat-expansion-container-text-color: var(--c2g-color-text-primary); --mat-expansion-container-text-font: var(--mat-sys-body-medium-font); --mat-expansion-container-text-size: 0.875rem; --mat-expansion-container-text-weight: 400; --mat-expansion-container-text-line-height: 1.5; --mat-expansion-container-text-tracking: 0; --mat-expansion-container-shape: var(--mat-sys-corner-small); --mat-expansion-container-elevation-shadow: var(--mat-sys-level1); --mat-expansion-actions-divider-color: var(--c2g-color-outline-variant); --mat-expansion-header-text-color: var(--c2g-color-text-primary); --mat-expansion-header-text-font: var(--mat-sys-label-large-font); --mat-expansion-header-text-size: 0.9375rem; --mat-expansion-header-text-weight: 600; --mat-expansion-header-text-line-height: 1.4; --mat-expansion-header-text-tracking: 0; --mat-expansion-header-description-color: var(--c2g-color-text-muted); --mat-expansion-header-indicator-color: var(--c2g-color-text-muted); --mat-expansion-header-disabled-state-text-color: var(--c2g-color-neutral-400); --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, var(--c2g-color-neutral-900) 6%, transparent); --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, var(--c2g-color-neutral-900) 10%, transparent); --mat-expansion-header-collapsed-state-height: 48px; --mat-expansion-header-expanded-state-height: 64px; // --------------------------------------------------------------- // STEPPER // --------------------------------------------------------------- --mat-stepper-container-color: transparent; --mat-stepper-container-text-font: var(--mat-sys-body-medium-font); --mat-stepper-line-color: var(--c2g-color-outline); --mat-stepper-header-height: 72px; --mat-stepper-header-label-text-color: var(--c2g-color-text-muted); --mat-stepper-header-label-text-font: var(--mat-sys-body-medium-font); --mat-stepper-header-label-text-size: 0.875rem; --mat-stepper-header-label-text-weight: 400; --mat-stepper-header-optional-label-text-color: var(--c2g-color-text-muted); --mat-stepper-header-selected-state-label-text-color: var(--c2g-color-text-primary); --mat-stepper-header-selected-state-label-text-size: 0.875rem; --mat-stepper-header-selected-state-label-text-weight: 600; --mat-stepper-header-error-state-label-text-color: var(--c2g-color-error); --mat-stepper-header-error-state-label-text-size: 0.875rem; --mat-stepper-header-icon-background-color: var(--c2g-color-neutral-300); --mat-stepper-header-icon-foreground-color: var(--c2g-color-neutral-700); --mat-stepper-header-selected-state-icon-background-color: var(--c2g-color-primary); --mat-stepper-header-selected-state-icon-foreground-color: #ffffff; --mat-stepper-header-done-state-icon-background-color: var(--c2g-color-primary); --mat-stepper-header-done-state-icon-foreground-color: #ffffff; --mat-stepper-header-edit-state-icon-background-color: var(--c2g-color-primary); --mat-stepper-header-edit-state-icon-foreground-color: #ffffff; --mat-stepper-header-error-state-icon-background-color: var(--c2g-color-error); --mat-stepper-header-error-state-icon-foreground-color: #ffffff; --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, var(--c2g-color-neutral-900) 6%, transparent); --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, var(--c2g-color-neutral-900) 10%, transparent); --mat-stepper-header-hover-state-layer-shape: var(--mat-sys-corner-small); --mat-stepper-header-focus-state-layer-shape: var(--mat-sys-corner-small); --mat-stepper-animation-duration: 225ms; // --------------------------------------------------------------- // DATEPICKER // --------------------------------------------------------------- --mat-datepicker-calendar-container-background-color: #ffffff; --mat-datepicker-calendar-container-text-color: var(--c2g-color-text-primary); --mat-datepicker-calendar-container-shape: var(--mat-sys-corner-large); --mat-datepicker-calendar-container-elevation-shadow: var(--mat-sys-level4); --mat-datepicker-calendar-container-touch-shape: var(--mat-sys-corner-extra-large); --mat-datepicker-calendar-container-touch-elevation-shadow: var(--mat-sys-level4); --mat-datepicker-calendar-text-font: var(--mat-sys-body-medium-font); --mat-datepicker-calendar-text-size: 0.875rem; --mat-datepicker-calendar-header-text-color: var(--c2g-color-text-secondary); --mat-datepicker-calendar-header-text-size: 0.875rem; --mat-datepicker-calendar-header-text-weight: 600; --mat-datepicker-calendar-header-divider-color: var(--c2g-color-outline-variant); --mat-datepicker-calendar-navigation-button-icon-color: var(--c2g-color-text-muted); --mat-datepicker-calendar-period-button-text-color: var(--c2g-color-text-primary); --mat-datepicker-calendar-period-button-text-size: 0.875rem; --mat-datepicker-calendar-period-button-text-weight: 600; --mat-datepicker-calendar-period-button-icon-color: var(--c2g-color-text-muted); --mat-datepicker-calendar-date-text-color: var(--c2g-color-text-primary); --mat-datepicker-calendar-date-outline-color: transparent; --mat-datepicker-calendar-date-disabled-state-text-color: var(--c2g-color-neutral-400); --mat-datepicker-calendar-date-today-outline-color: var(--c2g-color-primary); --mat-datepicker-calendar-date-today-selected-state-outline-color: var(--c2g-color-primary-dark); --mat-datepicker-calendar-date-today-disabled-state-outline-color: var(--c2g-color-neutral-300); --mat-datepicker-calendar-date-selected-state-background-color: var(--c2g-color-primary); --mat-datepicker-calendar-date-selected-state-text-color: #ffffff; --mat-datepicker-calendar-date-selected-disabled-state-background-color: var(--c2g-color-neutral-300); --mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, var(--c2g-color-primary) 12%, transparent); --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, var(--c2g-color-neutral-900) 6%, transparent); --mat-datepicker-calendar-date-preview-state-outline-color: var(--c2g-color-primary); --mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, var(--c2g-color-primary) 12%, transparent); --mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, var(--c2g-color-secondary) 12%, transparent); --mat-datepicker-calendar-date-in-overlap-range-state-background-color: color-mix(in srgb, var(--c2g-color-primary) 20%, transparent); --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: var(--c2g-color-primary-dark); --mat-datepicker-calendar-body-label-text-color: var(--c2g-color-text-muted); --mat-datepicker-calendar-body-label-text-size: 0.875rem; --mat-datepicker-calendar-body-label-text-weight: 600; --mat-datepicker-toggle-icon-color: var(--c2g-color-text-muted); --mat-datepicker-toggle-active-state-icon-color: var(--c2g-color-primary); --mat-datepicker-range-input-separator-color: var(--c2g-color-text-muted); --mat-datepicker-range-input-disabled-state-separator-color: var(--c2g-color-neutral-300); --mat-datepicker-range-input-disabled-state-text-color: var(--c2g-color-neutral-400); // --------------------------------------------------------------- // RADIO BUTTON // --------------------------------------------------------------- --mat-radio-label-text-color: var(--c2g-color-text-primary); --mat-radio-label-text-font: var(--mat-sys-body-medium-font); --mat-radio-label-text-size: 0.875rem; --mat-radio-label-text-line-height: 1.5; --mat-radio-label-text-weight: 400; --mat-radio-label-text-tracking: 0; --mat-radio-disabled-label-color: var(--c2g-color-neutral-400); --mat-radio-unselected-icon-color: var(--c2g-color-neutral-500); --mat-radio-unselected-hover-icon-color: var(--c2g-color-neutral-700); --mat-radio-unselected-focus-icon-color: var(--c2g-color-neutral-700); --mat-radio-unselected-pressed-icon-color: var(--c2g-color-neutral-700); --mat-radio-selected-icon-color: var(--c2g-color-primary); --mat-radio-selected-hover-icon-color: var(--c2g-color-primary-dark); --mat-radio-selected-focus-icon-color: var(--c2g-color-primary-dark); --mat-radio-selected-pressed-icon-color: var(--c2g-color-primary-dark); --mat-radio-disabled-selected-icon-color: var(--c2g-color-neutral-300); --mat-radio-disabled-unselected-icon-color: var(--c2g-color-neutral-300); --mat-radio-disabled-selected-icon-opacity: 0.38; --mat-radio-disabled-unselected-icon-opacity: 0.38; --mat-radio-ripple-color: var(--c2g-color-neutral-900); --mat-radio-checked-ripple-color: var(--c2g-color-primary); --mat-radio-state-layer-size: 40px; --mat-radio-touch-target-size: 40px; --mat-radio-touch-target-display: block; // --------------------------------------------------------------- // CHECKBOX // --------------------------------------------------------------- --mat-checkbox-label-text-color: var(--c2g-color-text-primary); --mat-checkbox-label-text-font: var(--mat-sys-body-medium-font); --mat-checkbox-label-text-size: 0.875rem; --mat-checkbox-label-text-line-height: 1.5; --mat-checkbox-label-text-weight: 400; --mat-checkbox-label-text-tracking: 0; --mat-checkbox-disabled-label-color: var(--c2g-color-neutral-400); --mat-checkbox-unselected-icon-color: var(--c2g-color-neutral-500); --mat-checkbox-unselected-hover-icon-color: var(--c2g-color-neutral-700); --mat-checkbox-unselected-focus-icon-color: var(--c2g-color-neutral-700); --mat-checkbox-unselected-hover-state-layer-color: color-mix(in srgb, var(--c2g-color-neutral-900) 6%, transparent); --mat-checkbox-unselected-hover-state-layer-opacity: 0.06; --mat-checkbox-unselected-focus-state-layer-color: color-mix(in srgb, var(--c2g-color-neutral-900) 10%, transparent); --mat-checkbox-unselected-focus-state-layer-opacity: 0.1; --mat-checkbox-unselected-pressed-state-layer-color: color-mix(in srgb, var(--c2g-color-neutral-900) 10%, transparent); --mat-checkbox-unselected-pressed-state-layer-opacity: 0.1; --mat-checkbox-selected-icon-color: var(--c2g-color-primary); --mat-checkbox-selected-checkmark-color: #ffffff; --mat-checkbox-selected-hover-icon-color: var(--c2g-color-primary-dark); --mat-checkbox-selected-focus-icon-color: var(--c2g-color-primary-dark); --mat-checkbox-selected-hover-state-layer-color: var(--c2g-color-primary); --mat-checkbox-selected-hover-state-layer-opacity: 0.08; --mat-checkbox-selected-focus-state-layer-color: var(--c2g-color-primary); --mat-checkbox-selected-focus-state-layer-opacity: 0.12; --mat-checkbox-selected-pressed-state-layer-color: var(--c2g-color-primary); --mat-checkbox-selected-pressed-state-layer-opacity: 0.12; --mat-checkbox-disabled-selected-icon-color: var(--c2g-color-neutral-300); --mat-checkbox-disabled-unselected-icon-color: var(--c2g-color-neutral-300); --mat-checkbox-disabled-selected-checkmark-color: var(--c2g-color-neutral-50); --mat-checkbox-state-layer-size: 40px; --mat-checkbox-touch-target-size: 40px; --mat-checkbox-touch-target-display: block; // --------------------------------------------------------------- // SLIDE TOGGLE // --------------------------------------------------------------- --mat-slide-toggle-label-text-color: var(--c2g-color-neutral-700); --mat-slide-toggle-label-text-font: var(--mat-sys-body-medium-font); --mat-slide-toggle-label-text-line-height: 1.5; --mat-slide-toggle-label-text-size: 14px; --mat-slide-toggle-label-text-tracking: 0.25px; --mat-slide-toggle-label-text-weight: 400; --mat-slide-toggle-track-height: 32px; --mat-slide-toggle-track-shape: var(--mat-sys-corner-extra-large); --mat-slide-toggle-track-outline-color: var(--c2g-color-neutral-400); --mat-slide-toggle-hidden-track-opacity: 0; --mat-slide-toggle-hidden-track-transition: opacity 75ms; --mat-slide-toggle-selected-track-outline-width: 2px; --mat-slide-toggle-selected-track-outline-color: var(--c2g-color-secondary); --mat-slide-toggle-handle-width: 20px; --mat-slide-toggle-handle-surface-color: var(--mat-sys-surface-bright); --mat-slide-toggle-handle-elevation-shadow: var(--mat-sys-level1); --mat-slide-toggle-unselected-handle-color: var(--c2g-color-neutral-500); --mat-slide-toggle-selected-handle-color: var(--c2g-color-secondary); --mat-slide-toggle-selected-hover-handle-color: var(--c2g-color-secondary-light); --mat-slide-toggle-state-layer-size: 40px; --mat-slide-toggle-selected-with-icon-handle-horizontal-margin: 0 24px; --mat-slide-toggle-with-icon-handle-size: 24px; --mat-slide-toggle-selected-icon-size: 16px; --mat-slide-toggle-selected-icon-color: var(--mat-sys-surface-bright); --mat-slide-toggle-unselected-icon-size: 16px; --mat-slide-toggle-unselected-icon-color: var(--c2g-color-neutral-600); --mat-slide-toggle-unselected-hover-state-layer-color: var(--c2g-color-neutral-700); --mat-slide-toggle-unselected-hover-state-layer-opacity: 0.08; --mat-slide-toggle-unselected-focus-state-layer-color: var(--c2g-color-neutral-700); --mat-slide-toggle-unselected-focus-state-layer-opacity: 0.16; --mat-slide-toggle-unselected-pressed-state-layer-color: var(--c2g-color-neutral-700); --mat-slide-toggle-unselected-pressed-state-layer-opacity: 0.12; // --------------------------------------------------------------- // AUTOCOMPLETE // --------------------------------------------------------------- --mat-autocomplete-background-color: #ffffff; --mat-autocomplete-container-shape: var(--mat-sys-corner-extra-small); --mat-autocomplete-container-elevation-shadow: var(--mat-sys-level3); // --------------------------------------------------------------- // BADGE // --------------------------------------------------------------- --mat-badge-background-color: var(--c2g-color-primary); --mat-badge-text-color: #ffffff; --mat-badge-text-font: var(--mat-sys-label-medium-font); --mat-badge-text-size: 0.6875rem; --mat-badge-text-weight: 600; --mat-badge-line-height: 1; --mat-badge-container-shape: var(--mat-sys-corner-full); --mat-badge-container-size: 20px; --mat-badge-small-size-container-size: 16px; --mat-badge-large-size-container-size: 24px; --mat-badge-disabled-state-background-color: var(--c2g-color-neutral-300); --mat-badge-disabled-state-text-color: var(--c2g-color-neutral-50); // --------------------------------------------------------------- // BOTTOM SHEET // --------------------------------------------------------------- --mat-bottom-sheet-container-background-color: #ffffff; --mat-bottom-sheet-container-shape: var(--mat-sys-corner-extra-large); --mat-bottom-sheet-container-text-color: var(--c2g-color-text-primary); --mat-bottom-sheet-container-text-font: var(--mat-sys-body-medium-font); --mat-bottom-sheet-container-text-size: 0.875rem; --mat-bottom-sheet-container-text-line-height: 1.5; --mat-bottom-sheet-container-text-weight: 400; --mat-bottom-sheet-container-text-tracking: 0; // --------------------------------------------------------------- // SORT // --------------------------------------------------------------- --mat-sort-arrow-color: var(--c2g-color-text-muted); // --------------------------------------------------------------- // TREE // --------------------------------------------------------------- --mat-tree-container-background-color: transparent; --mat-tree-node-text-color: var(--c2g-color-text-primary); --mat-tree-node-text-font: var(--mat-sys-body-medium-font); --mat-tree-node-text-size: 0.875rem; --mat-tree-node-text-weight: 400; --mat-tree-node-min-height: 48px; } // ================================================================= // DARK THEME — override all surface/container/text tokens // ================================================================= body.theme-dark, body.theme-auto { --mat-sys-surface: var(--c2g-color-neutral-900); --mat-sys-surface-dim: var(--c2g-color-neutral-800); --mat-sys-surface-bright: var(--c2g-color-neutral-700); --mat-sys-surface-container-lowest: #0f0d0b; --mat-sys-surface-container-low: var(--c2g-color-neutral-800); --mat-sys-surface-container: var(--c2g-color-neutral-700); --mat-sys-surface-container-high: var(--c2g-color-neutral-600); --mat-sys-surface-container-highest: var(--c2g-color-neutral-500); --mat-sys-surface-variant: var(--c2g-color-neutral-700); --mat-sys-on-surface: var(--c2g-color-neutral-50); --mat-sys-on-surface-variant: var(--c2g-color-neutral-300); --mat-sys-on-background: var(--c2g-color-neutral-50); --mat-sys-background: var(--c2g-color-neutral-900); --mat-sys-outline: var(--c2g-color-neutral-600); --mdc-dialog-container-color: var(--c2g-color-neutral-800); --mdc-dialog-subhead-color: var(--c2g-color-neutral-50); --mdc-dialog-supporting-text-color: var(--c2g-color-neutral-300); --mdc-elevated-card-container-color: var(--c2g-color-neutral-800); --mdc-outlined-card-container-color: var(--c2g-color-neutral-800); --mdc-outlined-card-outline-color: var(--c2g-color-neutral-700); --mat-card-title-text-color: var(--c2g-color-neutral-50); --mat-card-subtitle-text-color: var(--c2g-color-neutral-400); --mat-menu-container-color: var(--c2g-color-neutral-800); --mat-menu-item-label-text-color: var(--c2g-color-neutral-50); --mat-menu-item-icon-color: var(--c2g-color-neutral-400); --mat-menu-divider-color: var(--c2g-color-neutral-700); --mat-menu-item-hover-state-layer-color: color-mix(in srgb, var(--c2g-color-neutral-50) 8%, transparent); --mat-menu-item-focus-state-layer-color: color-mix(in srgb, var(--c2g-color-neutral-50) 12%, transparent); --mat-expansion-container-background-color: var(--c2g-color-neutral-800); --mat-expansion-container-text-color: var(--c2g-color-neutral-50); --mat-expansion-header-text-color: var(--c2g-color-neutral-50); --mat-expansion-header-description-color: var(--c2g-color-neutral-400); --mat-expansion-header-indicator-color: var(--c2g-color-neutral-400); --mat-expansion-header-hover-state-layer-color: color-mix(in srgb, var(--c2g-color-neutral-50) 8%, transparent); --mat-expansion-header-focus-state-layer-color: color-mix(in srgb, var(--c2g-color-neutral-50) 12%, transparent); --mat-expansion-actions-divider-color: var(--c2g-color-neutral-700); --mat-datepicker-calendar-container-background-color: var(--c2g-color-neutral-800); --mat-datepicker-calendar-container-text-color: var(--c2g-color-neutral-50); --mat-datepicker-calendar-header-text-color: var(--c2g-color-neutral-300); --mat-datepicker-calendar-date-text-color: var(--c2g-color-neutral-50); --mat-datepicker-calendar-period-button-text-color: var(--c2g-color-neutral-50); --mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, var(--c2g-color-neutral-50) 8%, transparent); --mat-autocomplete-background-color: var(--c2g-color-neutral-800); --mat-select-panel-background-color: var(--c2g-color-neutral-800); --mat-select-enabled-trigger-text-color: var(--c2g-color-neutral-50); --mat-select-placeholder-text-color: var(--c2g-color-neutral-500); --mat-select-enabled-arrow-color: var(--c2g-color-neutral-400); --mat-option-label-text-color: var(--c2g-color-neutral-50); --mat-bottom-sheet-container-background-color: var(--c2g-color-neutral-800); --mat-bottom-sheet-container-text-color: var(--c2g-color-neutral-50); --mat-table-header-headline-color: var(--c2g-color-neutral-300); --mat-table-row-item-label-text-color: var(--c2g-color-neutral-50); --mat-table-footer-supporting-text-color: var(--c2g-color-neutral-400); --mat-table-row-item-outline-color: var(--c2g-color-neutral-700); --mdc-list-list-item-label-text-color: var(--c2g-color-neutral-50); --mdc-list-list-item-supporting-text-color: var(--c2g-color-neutral-400); --mdc-list-list-item-trailing-supporting-text-color: var(--c2g-color-neutral-400); --mdc-list-list-item-hover-state-layer-color: color-mix(in srgb, var(--c2g-color-neutral-50) 8%, transparent); --mdc-list-list-item-focus-state-layer-color: color-mix(in srgb, var(--c2g-color-neutral-50) 12%, transparent); --mdc-chip-elevated-container-color: var(--c2g-color-neutral-700); --mdc-chip-label-text-color: var(--c2g-color-neutral-200); --mdc-chip-outline-color: var(--c2g-color-neutral-600); --mdc-snackbar-container-color: var(--c2g-color-neutral-700); --mdc-outlined-text-field-input-text-color: var(--c2g-color-neutral-50); --mdc-outlined-text-field-label-text-color: var(--c2g-color-neutral-400); --mdc-outlined-text-field-outline-color: var(--c2g-color-neutral-600); --mdc-outlined-text-field-hover-outline-color: var(--c2g-color-neutral-400); --mdc-outlined-text-field-hover-label-text-color: var(--c2g-color-neutral-300); --mdc-outlined-text-field-input-text-placeholder-color: var(--c2g-color-neutral-500); --mat-form-field-outlined-input-text-color: var(--c2g-color-neutral-50); --mat-form-field-outlined-label-text-color: var(--c2g-color-neutral-400); --mat-form-field-outlined-outline-color: var(--c2g-color-neutral-600); --mat-form-field-outlined-hover-outline-color: var(--c2g-color-neutral-400); --mat-form-field-outlined-hover-label-text-color: var(--c2g-color-neutral-300); --mat-form-field-outlined-input-text-placeholder-color: var(--c2g-color-neutral-500); --mat-form-field-state-layer-color: color-mix(in srgb, var(--c2g-color-neutral-50) 6%, transparent); --mat-form-field-hint-text-color: var(--c2g-color-neutral-400); --mat-radio-label-text-color: var(--c2g-color-neutral-50); --mat-checkbox-label-text-color: var(--c2g-color-neutral-50); --mat-tab-foreground-color: var(--c2g-color-neutral-300); --mat-tab-inactive-label-text-color: var(--c2g-color-neutral-400); --mat-tab-inactive-hover-label-text-color: var(--c2g-color-neutral-200); --mat-tab-inactive-focus-label-text-color: var(--c2g-color-neutral-200); --mat-tab-divider-color: var(--c2g-color-neutral-700); --mat-stepper-line-color: var(--c2g-color-neutral-600); --mat-stepper-header-label-text-color: var(--c2g-color-neutral-400); --mat-stepper-header-selected-state-label-text-color: var(--c2g-color-neutral-50); --mat-stepper-header-icon-background-color: var(--c2g-color-neutral-600); --mat-stepper-header-icon-foreground-color: var(--c2g-color-neutral-300); --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, var(--c2g-color-neutral-50) 8%, transparent); --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, var(--c2g-color-neutral-50) 12%, transparent); --mat-slide-toggle-label-text-color: var(--c2g-color-neutral-300); --mat-slide-toggle-track-outline-color: var(--c2g-color-neutral-600); --mat-slide-toggle-unselected-handle-color: var(--c2g-color-neutral-400); --mat-slide-toggle-unselected-icon-color: var(--c2g-color-neutral-500); --mat-slide-toggle-unselected-hover-state-layer-color: color-mix(in srgb, var(--c2g-color-neutral-50) 8%, transparent); --mat-slide-toggle-unselected-focus-state-layer-color: color-mix(in srgb, var(--c2g-color-neutral-50) 12%, transparent); --mat-paginator-container-text-color: var(--c2g-color-neutral-300); --mat-paginator-enabled-icon-color: var(--c2g-color-neutral-400); --mat-paginator-disabled-icon-color: var(--c2g-color-neutral-600); --mat-divider-color: var(--c2g-color-neutral-700); --mat-sort-arrow-color: var(--c2g-color-neutral-400); --mat-tree-node-text-color: var(--c2g-color-neutral-50); --mat-toolbar-container-background-color: var(--c2g-color-neutral-900); --mat-sidenav-container-background-color: var(--c2g-color-neutral-800); --mat-sidenav-content-background-color: var(--c2g-color-neutral-900); --mat-sidenav-content-text-color: var(--c2g-color-neutral-50); } @media (prefers-color-scheme: light) { body.theme-auto { --mat-sys-surface: var(--c2g-color-neutral-50); --mat-sys-surface-dim: var(--c2g-color-neutral-100); --mat-sys-surface-bright: #ffffff; --mat-sys-surface-container-lowest: #ffffff; --mat-sys-surface-container-low: var(--c2g-color-neutral-100); --mat-sys-surface-container: var(--c2g-color-neutral-200); --mat-sys-surface-container-high: var(--c2g-color-neutral-300); --mat-sys-surface-container-highest: var(--c2g-color-neutral-400); --mat-sys-surface-variant: var(--c2g-color-neutral-200); --mat-sys-on-surface: var(--c2g-color-neutral-900); --mat-sys-on-surface-variant: var(--c2g-color-neutral-700); --mat-sys-background: var(--c2g-color-neutral-50); --mat-sys-outline: var(--c2g-color-neutral-500); --mdc-dialog-container-color: #ffffff; --mdc-elevated-card-container-color: #ffffff; --mdc-outlined-card-container-color: #ffffff; --mat-menu-container-color: var(--mat-sys-surface-container); --mat-expansion-container-background-color: #ffffff; --mat-datepicker-calendar-container-background-color: #ffffff; --mat-autocomplete-background-color: #ffffff; --mat-select-panel-background-color: #ffffff; --mat-bottom-sheet-container-background-color: #ffffff; } }