variables.css

:root, :host {
  /******** spacing ********/
  /*************************/

  --base-spacing: var(--ion-padding, 16px);
  --base-spacing-small: calc(var(--base-spacing) * 0.7);
  --base-spacing-large: calc(var(--base-spacing) * 1.5);

  /******** fonts **********/
  /*************************/

  --font-size-base: 14px;
  --font-size-small: calc(var(--font-size-base) * 0.9);
  --font-size-medium: calc(var(--font-size-base) * 1.2);
  --font-size-large: calc(var(--font-size-base) * 1.4);
  --text-color: var(--ion-text-color, #424242);
  --error-color: var(--ion-color-danger, #eb445a);
  --placeholder-color: var(--ion-placeholder-color, var(--ion-color-step-400, #999));

  /******** datepicker **********/
  /*************************/
  --popover-width: 250px;

  --squares-padding: 5px;
  --square-dimension: 33px;
  --square-border-radius: 5px;
  --square-font-weight: normal;

  --square-hover-color: #fff;
  --square-hover-background: var(--ion-color-secondary, #3dc2ff);

  --controls-padding: 5px;
  --controls-background: #fff;

  --square-active-color: #fff;
  --square-active-background: var(--ion-color-primary, #3880ff);

  --square-current-color: #fff;
  --square-current-background: var(--ion-color-medium, #92949c);

  --overlay-background: rgba(255, 255, 255, .8);
  --overlay-text-color: var(--text-color);
}