calendar.css

.DayPicker {
  background: #28262e;
  border-radius: 10px;
}

.DayPicker-wrapper {
  padding-bottom: 0;
}

.DayPicker,
.DayPicker-Month {
  width: 100%;
}

.DayPicker-Month {
  border-collapse: separate;
  border-spacing: 8px;
  margin: 16px;
}

.DayPicker-Day {
  width: 40px;
  height: 40px;
}

.DayPicker-Day--available:not(.DayPicker-Day--outside) {
  background: #3e3b47;
  border-radius: 10px;
  color: #fff;
}

.DayPicker:not(.DayPicker--interactionDisabled)
  .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover {
  background: ${shade(0.2, '#3e3b47')};
}

.DayPicker-Day--today {
  font-weight: normal;
}

.DayPicker-Day--disabled {
  color: #666360 !important;
  background: transparent !important;
}

.DayPicker-Day--selected {
  background: #ff9000 !important;
  border-radius: 10px;
  color: #232129 !important;
}

Muito bom!!

@sethwololo @lorenasg1 @AdSoNaTuRaL
Muito bom pessoal valeu!

Caraca, muito bom pessoal! Muito obrigado mesmo! Ficou TOP

A alterações ficaram muito massa!!

Segue mais uma melhoria com alguns ajustes e incluindo o background do header, aproveitando o código já feito pelos colegas:

.DayPicker {
  border-radius: 10px;

  &-wrapper {
    padding-bottom: 0;
    background: #28262e;
    border-radius: 10px;
    z-index: 0;
  }

  &-NavBar {
    position: relative;

    ::before {
      content: '';
      width: 100%;
      height: 50px;
      position: absolute;
      background: #3e3b47;
      border-radius: 10px 10px 0 0;
      z-index: -1;
    }
  }

  &-NavButton {
    color: #999591 !important;
    margin-top: 0;
    top: 0;

    &--prev {
      background: url(${ArrowLeftIcon}) no-repeat center;
      margin-right: 0;
      left: 12px;
      width: 50px;
      height: 50px;
    }

    &--next {
      background: url(${ArrowRightIcon}) no-repeat center;
      right: 12px;
      width: 50px;
      height: 50px;
    }
  }

  &-Month {
    border-collapse: separate;
    border-spacing: 8px;
    margin: 0;
    padding: 0 10px 10px;
  }

  &-Caption {
    line-height: 50px;
    color: #f4ede8;

    > div {
      text-align: center;
    }
  }

  &-Weekday {
    color: #666360;
    font-size: 16px;
  }

  &-Day {
    width: 40px;
    height: 40px;
    transition: all 0.2s ease;
    border-radius: 10px;

    &--today {
      font-weight: normal;
      color: #fff;
    }

    &--available:not(.DayPicker-Day--outside) {
      background: #3e3b47;
      border-radius: 10px;
    }

    &--disabled {
      color: #666360;
      background: transparent !important;
    }

    &--selected:not(.DayPicker-Day--disabled) {
      background: #ff9000 !important;
      color: #232129 !important;
    }
  }

  &:not(.DayPicker--interactionDisabled)
    .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover {
    background: ${shade(0.2, '#3e3b47')};
  }
}

Mitaram!

Vocês são ninjas do css mesmo em.. kakaka, Show de bola pessoal , valeu demais !

Value pelas atualizações no css.
@sethwololo, @lorenasg1, @adeonir mitaram de verdade.

Ficou muito bom galera! Ficaram top as alterações

Muito legal pessoal, parabéns pelo trampo

1. Cor do dia de hoje: O dia de hoje é destacado com a cor #ff9000 no texto do número do dia.
2. Dia desabilitado e dia de hoje desabilitado: Para o dia de hoje, quando ele estiver desabilitado, a cor do número do dia será laranja e o fundo ficará transparente.
3. Seleção de dia: Quando um dia for selecionado, a cor de fundo será definida pela variável --rdp-accent-color, e o texto será alterado para uma cor mais escura (#232129).
4. Estilo para os dias desabilitados: Para os outros dias desabilitados, a cor do texto será cinza (#a0a0a0) e o fundo será transparente.
5. Outros ajustes de estilo: Configuração da altura e largura dos dias, borda arredondada dos botões, cores de fundo, e estilo dos ícones de navegação (setas).

.rdp-root {
  --rdp-accent-color: #ff9000 !important;
  --rdp-today-color: #ff9000 !important;
  --rdp-day-height: 40px;
  --rdp-day-width: 40px;
  --rdp-day_button-border-radius: 10px;
  --rdp-day_button-width: 45px;

  .rdp-day_button {
    background: #3e3b47;
    padding: 0;
    margin: 4px;
    cursor: pointer;
    font: inherit;
    color: inherit;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .rdp-today {
    color: var(--rdp-today-color) !important;
  }

  .rdp-disabled.rdp-today .rdp-day_button {
    color: var(--rdp-today-color) !important;
    background: transparent !important;
  }

  .rdp-selected .rdp-day_button {
    background: var(--rdp-accent-color);
    color: #232129 !important;
    border: none;
    border-radius: 10px;
  }

  .rdp-disabled .rdp-day_button {
    color: #a0a0a0 !important;
    background: transparent !important;
  }

  .rdp-month {
    background: #28262e;
    padding: 24px;
  }

  .rdp-nav {
    inset-block-start: 24px;
    inset-inline-end: 0;
  }

  .rdp-chevron {
    fill: #f0f0ff;
  }
}