Trello - Stronger "today" indicator for date-select mini-calendar

today.compiled.css

/*
	Stronger "today" indicator for date-select mini-calendar.

	The current "today" indicator already has bold text, but that might be a bit subtle
	for some users (especially those with vision impairments or poor font rendering).

	This uses a coloured background and a faint light rim that remains when "today"
	is also the selected day, to save users from having to select a different
	day to double-check they have correctly selected "today". This also helps
	for more instantly noticing the current day when skimming through months.
*/
.pika-single .is-today:not(.is-selected) .pika-button {
  background-color: #61BD4F;
  box-shadow: inset 0px 0px 0px 3px #4b9e3b;
}

.pika-single .is-today.is-selected .pika-button {
  box-shadow: inset 0px 0px 0px 3px rgba(255, 255, 255, 0.7);
}

today.scss

/*
	Stronger "today" indicator for date-select mini-calendar.

	Uses a coloured background and a faint light rim that remains when "today"
	is also the selected day, to save users from having to select a different
	day to double-check they have correctly selected "today".
*/

$trello-brand-color-green: #61BD4F;

$date-select-today-color: $trello-brand-color-green;
$date-select-today-rim: inset 0px 0px 0px 3px;

.pika-single .is-today:not(.is-selected) .pika-button {
	background-color: $date-select-today-color;
	box-shadow: inset 0px 0px 0px 3px darken($date-select-today-color, 10%);
}

// We must copy the shadow's positioning properties as "box-shadow" is not
// actually a shorthand for more sub-properties.
.pika-single .is-today.is-selected .pika-button {
	box-shadow: $date-select-today-rim hsla(100,0%,100%,.7);
}