@spaced-out/ui-design-system/lib/components/WeekdayPicker/WeekdayPicker.module.css

Sense UI components library

@value (colorTextSecondary,
  colorFillSecondary,
  colorButtonFillTertiaryHovered,
  colorTextPrimary,
  colorButtonFillPrimaryEnabled,
  colorTextInversePrimary,
  colorButtonFillPrimaryHovered,
  colorTextDisabled,
  colorFillDisabled,
  colorFocusPrimary,
  colorBackgroundSecondary,
  colorGrayLightest) from '../../styles/variables/_color.css';

@value (spaceXXSmall, spaceXSmall, spaceSmall) from '../../styles/variables/_space.css';
@value (size8, size42, size34) from '../../styles/variables/_size.css';

@value (borderRadiusSmall, borderWidthNone, borderWidthTertiary) from '../../styles/variables/_border.css';

.weekdayPickerContainer {
  display: flex;
  flex-direction: column;
  gap: spaceXXSmall;
}

.weekdayPickerDays {
  display: flex;
  gap: spaceSmall;
}

.weekdayButton {
  composes: formLabelSmall from '../../styles/typography.module.css';
  composes: motionEaseInEaseOut from '../../styles/animation.module.css';
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: colorBackgroundSecondary;
  color: colorTextSecondary;
  padding: spaceXSmall spaceSmall;
  border-radius: borderRadiusSmall;

  &:hover,
  &:focus-visible {
    background-color: colorGrayLightest;
    color: colorTextPrimary;
    cursor: pointer;
  }

  &:focus-visible {
    box-shadow: borderWidthNone borderWidthNone borderWidthNone
      borderWidthTertiary colorFocusPrimary;
  }
}

.weekdayButtonMedium {
  composes: buttonTextMedium from '../../styles/typography.module.css';
  height: size42;
  width: size42;
}

.weekdayButtonSmall {
  composes: buttonTextSmall from '../../styles/typography.module.css';
  height: size34;
  width: size34;

  .secondaryLabel {
    font-size: size8;
  }
}

.weekdayButtonSelected {
  background-color: colorButtonFillPrimaryEnabled;
  color: colorTextInversePrimary;

  &:hover,
  &:focus-visible {
    background-color: colorButtonFillPrimaryHovered;
    color: colorTextInversePrimary;

    .secondaryLabel {
      background-color: colorButtonFillPrimaryHovered;
      color: colorTextInversePrimary;
    }
  }
}

.weekdayButtonDisabled {
  background-color: colorFillDisabled;
  color: colorTextDisabled;
  pointer-events: none;
  cursor: not-allowed;
}

.secondaryLabel {
  composes: bodySmall from '../../styles/typography.module.css';
  color: colorTextSecondary;

  /* Added a transition to .secondaryLabel for smoother and immediate style updates 
   during hover or focus-visible states of .secondaryLabelSelected. This ensures the 
   change feels intentional, even if there’s a minor rendering delay. */
  transition: background-color 0.1s, color 0.1s, font-size 0.1s;
}

.secondaryLabelSelected {
  background-color: colorButtonFillPrimaryEnabled;
  color: colorTextInversePrimary;
}

.secondaryLabelDisabled {
  background-color: colorFillDisabled;
  color: colorTextDisabled;
  pointer-events: none;
  cursor: not-allowed;
}

.weekdayLabel {
  composes: formLabelSmall from '../../styles/typography.module.css';
  color: colorTextSecondary;
}

.weekdayHelperText {
  composes: bodySmall from '../../styles/typography.module.css';
  color: colorTextSecondary;
}

.weekdayReadOnly {
  pointer-events: none;
  cursor: not-allowed;
}