0.2.2 alpha

Menu

Calendar

ExperimentalGet the Figma fileView the source

A month of days to choose a date or a range of dates from, with buttons to the months before and after; it spreads its columns across the width it is given.

Customize the preview

Choices
View

March 2026

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Options

Calendar options
ChoiceValuesDefaultWhat it does
selectionsmbk-calendar--selection-<value>singlerangesingle
One day, or a range from a first day to a last, joined by a band.

Partssmbk-calendar__headersmbk-calendar__prevsmbk-calendar__titlesmbk-calendar__nextsmbk-calendar__gridsmbk-calendar__weekdayssmbk-calendar__weekdaysmbk-calendar__weeksmbk-calendar__cellsmbk-calendar__day

Examples

Usage

A month with the chosen day. Move with the arrow keys, change the month with Page Up and Page Down, and choose with Enter or a press.

March 2026

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Week from Monday

The week starts on the day the reader’s language starts it, or on the day the page sets.

March 2026

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Unavailable days

Days before the earliest date and weekends are struck through and out of reach; a screen reader hears the reason with the day.

March 2026

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Day looks

A plain day, today with its ring, the chosen day, an unavailable day, and a chosen day that is unavailable, as when such a date was typed.

12
12
12
12
12

Range

Choosing a range: the first press sets one end, and until the second the band follows the pointer or the keys to the other. The first and last days are marked, the days between sit on a band.

March 2026

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Wide range

Given more room, the band crosses the space between the columns; where the range runs on into the next week it ends round at the last column and starts round again on the first, and a range that goes on into the next month ends round at this month’s last day.

March 2026

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Guidelines

Purpose

A month of days to choose a date from, or a range of dates from a first day to a last, with buttons to the months before and after. It is the calendar the date picker opens, and it can stand alone where the month itself is what the reader looks at, such as choosing a day to book. It differs from the date picker, which also takes a date typed in and opens the calendar only when asked.

When to use

  • Inside the date picker, which opens it under the date field.
  • Alone, when the reader chooses a day near now and seeing the week helps: a delivery day, a booking, a day in a schedule.
  • With the range selection, when the reader chooses a stretch of days near now and seeing it laid over the weeks helps: a trip, a stay, a leave.

When not to use

  • A date the reader knows by heart, such as a birth date, or one years away: paging through months is slow. Use the date picker and let them type it.
  • A range that spans months, or one the reader knows by its dates: one month shows at a time, so typing the two dates is quicker.
  • A month and year alone, such as a card's expiry date. Use two selects or an input.

Usage rules

Do

  • Name it for what the date is for.
  • Set the earliest and latest dates the reader can choose, so the buttons stop where choosing stops.
  • Give a reason in words for days that cannot be chosen.
  • Choose a range with the range selection, not with two calendars side by side for the first and last day.

Don't

  • Use it alone for a date the reader knows by heart. Use the date picker.
  • Show a day as unavailable by color alone in markup written by hand: give it the unavailable modifier, which strikes it through.
  • Write a range by hand with the band alone: give its two ends the selected modifier beside their range modifier, so they carry the mark.

March 2026

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Do

Use it for a date near now, where seeing the week helps, such as a delivery or a booking.

June 1990

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Don't

Make the reader page through years for a date they know by heart, such as a birth date: typing it is quicker.

Anatomy

  • The block, holding the header and the grid. Its selection modifier says how it chooses: --selection-single (one day, the default) or --selection-range (a range of days).
  • The header part: the prev part and the next part, each the button's small ghost icon-only form with a caret, around the title part, the month and year in the label's large size.
  • The grid part, a table with the grid's roles. Its weekdays part is a row of weekday parts, each day's name in the label's small size and the secondary text color, centred over its column.
  • Six week parts, each seven cell parts. A cell of a day in the month holds the day part, the round mark a reader presses; a cell of another month's day is empty. A month that needs fewer than six weeks leaves the last ones empty, so the calendar keeps its height from month to month.
  • The day part's looks are modifiers: --selected (the chosen day, filled with the brand action color), --today (a brand ring inside the mark) and --unavailable (a day that cannot be chosen, in the disabled text color and struck through).
  • In a range, the first day carries --range-start and the last --range-end, each beside --selected; the days between carry --range-middle. The cell under each draws the band that joins them.

Behavior

The calendar shows the month of the chosen day, or of the day the page names to start on, or of today. The previous and next buttons move a month at a time; the previous button stops at the month of the earliest date when one is set, the next button at the latest.

One day is in the Tab order: the chosen day, or the one focused last. The arrow keys move by day and by week, crossing into the months before and after; Page Up and Page Down move by month, and with Shift by year; Home and End go to the start and end of the week. Enter or Space chooses the focused day, as a press does. Days before the earliest date, after the latest, and days the page marks unavailable cannot be chosen; the keys still move onto them, so a reader hears why.

A day is a medium control square with a round mark. Under the pointer, a day that can be chosen takes the ghost hover fill, and the chosen day its brand hover fill. The keyboard focus draws the focus ring around the mark. Today has a brand ring inside its mark, the chosen day the brand fill with its figures in the brand foreground, and an unavailable day the disabled text color with a line through it. A chosen day that is unavailable, as when such a date was typed into a date picker, keeps its fill, dimmed, and is struck through too. A disabled calendar shows every day in the disabled text color, out of reach.

With the range selection, the first press, or Enter, sets one end of the range; until the second, the range follows the pointer or the keyboard focus from it, so the reader sees what they are about to choose; the second press sets the other end, before or after the first. The first and last days take the chosen day's mark, and the days between sit on a band in the selected surface color, their figures in the default text color, joining the two marks. The band runs on across the space between the columns of a wide calendar; where the range carries on into the next week it ends round at the week's last column and starts round again on the next, and a range that goes on past the month ends round at its last day. A range of one day is its mark alone. A range never runs across an unavailable day: once one end is set, the days past the nearest unavailable day on either side are out of reach until the range is done. Leaving the calendar halfway, by a press outside it or with Tab, keeps the range up to the day last reached. The band follows the reading direction.

The calendar fills the width it is given and is never narrower than seven days. Given more room, its seven columns spread across it, the first and last at its edges, so the weekday names stay over their days.

The month's name, the weekday names, the first day of the week and the figures follow the reader's language, or the language the page sets with locale; the arrow keys follow the page's reading direction. Days are counted in the Gregorian calendar. Dates go in and come out as ISO dates, year, month and day as YYYY-MM-DD, whatever the language. The keys, the reading of dates and the announcements come from React Aria, which a React project installs beside React.

Accessibility

What it does for you

  • The calendar is named by its month, with the name the page gives it before. The grid is named by the month too.
  • Each day is a button read with its weekday, day, month and year, and says when it is today or chosen. Today is marked as the current date as well. The weekday row is hidden from screen readers, since every day says its weekday.
  • The month is announced as the previous and next buttons change it, and the chosen date as it changes.
  • With the range selection, the grid says that more than one day can be chosen. Every day in the range is read as chosen. Each day tells a screen reader that a press starts a range, and once one end is set, that a press finishes it; the range chosen is announced from its first date to its last. The band is never the only sign: each day in it is said to be chosen, and the two ends carry the chosen day's mark.
  • An unavailable day is out of reach and said to be so. It is never shown by color alone: it is struck through.
  • Today and the chosen day differ from other days by a ring and a fill, not only by color, and in high contrast mode they take the system's own colors.
  • One day is in the Tab order, and the arrow keys move between days.

What you must do

  • Give the calendar an aria-label or aria-labelledby saying what the date is for, such as "Delivery date".
  • Give an unavailable day a reason in words when the reader needs one, such as "closed at weekends". A screen reader then says it with the day.

How to test

  • Tab into the grid: one day takes focus, with its ring showing in both themes and in a forced-color mode. Move with the arrow keys, then press Enter or Space to choose a day.
  • Press Page Down, then Page Up: the month changes and is announced.
  • With a screen reader, the calendar is read by its name and month, each day by weekday, day, month and year, and today and the chosen day are said so.
  • With a range, choose the first day and move on: the screen reader says a press finishes the range, and the range is announced when set.
  • With text at 200% and the page 320 pixels wide, the grid keeps seven days and the days stay readable.

Keyboard

Calendar keys
KeyWhat it does
Tab
Moves focus to the previous month button, the next month button, then the one day in the grid that takes focus.
Left ArroworRight Arrow
Moves focus one day. The directions follow the reader's language.
Up ArroworDown Arrow
Moves focus one week.
Page UporPage Down
Moves focus one month.
Shift+Page UporShift+Page Down
Moves focus one year.
HomeorEnd
Moves focus to the first or last day of the week.
EnterorSpace
Chooses the focused day. In a range, the first press sets one end and the second sets the other.
Escape
In a range, cancels the range being chosen.

Source

The files the calendar is made of. Its folder on GitHub (opens in a new tab) holds them with its wrapper and its document.

Stylesheet
calendar.css
/* smbk-calendar — Calendar. Figma "Calendar" 7984:1084 (Selection: Single, Range) over "Calendar day" 7112:238.
 * A month of days: a header with the previous and next buttons (the button's small ghost icon-only form)
 * around the month's name, a row of weekday names and six weeks of seven days. It is at least seven days
 * wide, fills the width it is given beyond that, and spreads its seven columns evenly across it, the first
 * and last at its edges, so the weekday names stay over their days. Each day is a medium control square with
 * a round mark: chosen, it fills with the brand action color; today, a brand ring inside it; unavailable, the
 * disabled text color struck through, so each differs by more than color. Days of other months are empty.
 * Choosing a range, the first and last days take the chosen day's mark and the days between sit on a band in the
 * selected surface color that joins them, round where it breaks at the end of a week or of the month.
 * The grid is a table with the grid's roles written on it, so its rows can be flex rows. */

.smbk-calendar {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--smbk-space-stack-md);
  width: 100%;
  min-width: calc(7 * var(--smbk-size-control-md));
  color: var(--smbk-color-text-default);
}

/* ---- header: the previous button, the month's name in the middle, the next button ---- */

.smbk-calendar__header {
  display: flex;
  align-items: center;
  gap: var(--smbk-space-inline-sm);
}

.smbk-calendar__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--smbk-color-text-default);
  font-family: var(--smbk-typography-label-lg-font-family);
  font-size: var(--smbk-typography-label-lg-font-size);
  font-weight: var(--smbk-typography-label-lg-font-weight);
  line-height: var(--smbk-typography-label-lg-line-height);
  letter-spacing: var(--smbk-typography-label-lg-letter-spacing);
  text-align: center;
}

/* ---- the grid: the weekday row, then the weeks touching ---- */

.smbk-calendar__grid {
  display: flex;
  flex-direction: column;
  gap: var(--smbk-space-stack-md);
  width: 100%;
  margin: 0;
  border-spacing: 0;
}

.smbk-calendar__grid > thead,
.smbk-calendar__grid > tbody {
  display: flex;
  flex-direction: column;
}

.smbk-calendar__weekdays,
.smbk-calendar__week {
  display: flex;
  justify-content: space-between;
}

/* A week measures its own width, so a range's band can work out the room the columns spread apart by. */
.smbk-calendar__week {
  container-type: inline-size;
}

/* A weekday's name, centred over its column, in the label's small size and the secondary text color. */
.smbk-calendar__weekday {
  display: flex;
  flex: none;
  justify-content: center;
  width: var(--smbk-size-control-md);
  height: var(--smbk-size-20);
  padding: 0;
  color: var(--smbk-color-text-subtle);
  font-family: var(--smbk-typography-label-sm-font-family);
  font-size: var(--smbk-typography-label-sm-font-size);
  font-weight: var(--smbk-typography-label-sm-font-weight);
  line-height: var(--smbk-typography-label-sm-line-height);
  letter-spacing: var(--smbk-typography-label-sm-letter-spacing);
}

.smbk-calendar__cell {
  position: relative;
  flex: none;
  width: var(--smbk-size-control-md);
  height: var(--smbk-size-control-md);
  padding: 0;
}

/* An empty cell (another month's day) carries no band, so it frames nothing: left unplaced, it never covers the
   press area a day lays over it on a touch screen. */
.smbk-calendar__cell:not(:has(> .smbk-calendar__day)) {
  position: static;
}

/* ---- a day: Figma's Calendar day, a medium control square drawn round ---- */

/* touch-action lets a press on a touch screen start at once, without waiting to rule out a double tap, while
   the page still scrolls and zooms under it: the rule React Aria's press handling would otherwise write into the
   page as a style element. */
.smbk-calendar__day {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: var(--smbk-radius-full);
  color: var(--smbk-color-text-default);
  font-family: var(--smbk-typography-body-md-font-family);
  font-size: var(--smbk-typography-body-md-font-size);
  font-weight: var(--smbk-typography-body-md-font-weight);
  line-height: var(--smbk-typography-body-md-line-height);
  letter-spacing: var(--smbk-typography-body-md-letter-spacing);
  cursor: pointer;
  user-select: none;
  touch-action: pan-x pan-y pinch-zoom;
  outline: none;
}

@media (hover: hover) {
  .smbk-calendar__day:not([aria-disabled="true"]):hover {
    background: var(--smbk-color-action-ghost-background-hover);
  }
}

/* The focus ring stands off the mark, as round as it. It shows only when the keyboard moved focus there: the wrapper
   marks a day the pointer focused (a press, or the hover that carries a range's end) with data-focus-visible="false",
   since React Aria focuses days by script, which the browser may draw as keyboard focus. Without the wrapper the
   browser decides. */
.smbk-calendar__day:focus-visible:not([data-focus-visible="false"]) {
  outline: var(--smbk-focus-ring-width) solid var(--smbk-color-border-focus);
  outline-offset: var(--smbk-focus-ring-offset);
}

/* Today: a brand ring drawn inside the mark, whatever else the day is. */
.smbk-calendar__day--today {
  box-shadow: inset 0 0 0 var(--smbk-border-width-emphasis) var(--smbk-color-border-brand);
}

/* Chosen: the brand action's fill, its figures in the brand action's foreground. */
.smbk-calendar__day--selected {
  background: var(--smbk-color-action-brand-background);
  color: var(--smbk-color-action-brand-foreground);
}

@media (hover: hover) {
  .smbk-calendar__day--selected:not([aria-disabled="true"]):hover {
    background: var(--smbk-color-action-brand-background-hover);
  }
}

/* Unavailable (Figma's Disabled): out of reach, in the disabled text color and struck through, so it is not
   told by color alone. */
.smbk-calendar__day--unavailable {
  color: var(--smbk-color-text-disabled);
  cursor: default;
}

.smbk-calendar__day--unavailable::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--smbk-size-20);
  height: var(--smbk-border-width-hairline);
  background: currentColor;
  translate: -50% -50%;
}

/* Chosen and unavailable, as when such a date was typed: the chosen look, dimmed, struck in its own figures' color. */
.smbk-calendar__day--selected.smbk-calendar__day--unavailable {
  color: var(--smbk-color-action-brand-foreground);
  opacity: var(--smbk-opacity-disabled);
}

/* A whole calendar disabled: every day in the disabled text color, out of reach, without each being struck. */
.smbk-calendar__grid[aria-disabled="true"] .smbk-calendar__day {
  color: var(--smbk-color-text-disabled);
  cursor: not-allowed;
}

/* ---- a range: the first and last days marked, a band joining them ----
   The first and last days of a range are chosen days and carry the chosen look (with --selected); the days between
   carry --range-middle and keep their figures in the default text color, with no mark of their own. The band is the
   cell's, drawn under its day in the selected surface color, the medium control size tall. It runs from the middle
   of the first day's mark to the middle of the last day's, across the room between the columns, which a week works
   out from its own width (7 days spread over it, 6 gaps between). Each cell reads its neighbours: where the range
   goes on into the next cell, the band reaches over to it, square; where the week or the month ends first (the next
   cell is another week's or empty), the band ends round, and starts round again on the next week's first day. A
   range of one day is the mark alone. Written in logical sides, so it runs the other way in right-to-left text. */

.smbk-calendar__cell:where(
  :has(> .smbk-calendar__day--range-middle),
  :has(> .smbk-calendar__day--range-start):has(+ .smbk-calendar__cell > :is(.smbk-calendar__day--range-middle, .smbk-calendar__day--range-end)),
  :has(> :is(.smbk-calendar__day--range-start, .smbk-calendar__day--range-middle)) + .smbk-calendar__cell:has(> .smbk-calendar__day--range-end)
)::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  border-radius: var(--smbk-radius-full);
  background: var(--smbk-color-surface-selected);
}

/* The range goes on into the next cell: the band reaches across the room between the two columns, square. */
.smbk-calendar__cell:where(:has(> :is(.smbk-calendar__day--range-start, .smbk-calendar__day--range-middle)):has(+ .smbk-calendar__cell > :is(.smbk-calendar__day--range-middle, .smbk-calendar__day--range-end)))::before {
  inset-inline-end: calc((7 * var(--smbk-size-control-md) - 100cqi) / 6);
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

/* The range came from the cell before, whose band reaches this one: square where they meet. */
.smbk-calendar__cell:where(:has(> :is(.smbk-calendar__day--range-start, .smbk-calendar__day--range-middle)) + .smbk-calendar__cell:has(> :is(.smbk-calendar__day--range-middle, .smbk-calendar__day--range-end)))::before {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

/* The first day's band starts under the middle of its mark, the last day's ends there, square, so the band fills
   the corners beside the round mark. */
.smbk-calendar__cell:where(:has(> .smbk-calendar__day--range-start))::before {
  inset-inline-start: 50%;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

.smbk-calendar__cell:where(:has(> .smbk-calendar__day--range-end))::before {
  inset-inline-end: 50%;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

/* ---- touch: every day takes an invisible press area ----
   On a touch screen an invisible area, centred on each day, takes the press out to the comfortable target where it
   falls short of it. The days touch in the narrowest calendar and spread apart in a wider one, which no stylesheet
   can measure, so each day also lays an invisible copy of its own box over every area round it: a press on a day
   always lands on that day, and in the room between two days each takes the half nearer to it. The days, their marks
   and their places stay as drawn. The area's corners are cut away, so the areas of two days that stand corner to
   corner across an empty cell never meet. */

@media (pointer: coarse) {
  .smbk-calendar__day::before {
    content: '';
    position: absolute;
    inset: min(0%, (100% - var(--smbk-size-target-comfortable)) / 2);
    clip-path: polygon(
      calc(var(--smbk-size-target-comfortable) - var(--smbk-size-control-md)) 0, calc(100% - (var(--smbk-size-target-comfortable) - var(--smbk-size-control-md))) 0,
      calc(100% - (var(--smbk-size-target-comfortable) - var(--smbk-size-control-md))) calc(var(--smbk-size-target-comfortable) - var(--smbk-size-control-md)), 100% calc(var(--smbk-size-target-comfortable) - var(--smbk-size-control-md)),
      100% calc(100% - (var(--smbk-size-target-comfortable) - var(--smbk-size-control-md))), calc(100% - (var(--smbk-size-target-comfortable) - var(--smbk-size-control-md))) calc(100% - (var(--smbk-size-target-comfortable) - var(--smbk-size-control-md))),
      calc(100% - (var(--smbk-size-target-comfortable) - var(--smbk-size-control-md))) 100%, calc(var(--smbk-size-target-comfortable) - var(--smbk-size-control-md)) 100%,
      calc(var(--smbk-size-target-comfortable) - var(--smbk-size-control-md)) calc(100% - (var(--smbk-size-target-comfortable) - var(--smbk-size-control-md))), 0 calc(100% - (var(--smbk-size-target-comfortable) - var(--smbk-size-control-md))),
      0 calc(var(--smbk-size-target-comfortable) - var(--smbk-size-control-md)), calc(var(--smbk-size-target-comfortable) - var(--smbk-size-control-md)) calc(var(--smbk-size-target-comfortable) - var(--smbk-size-control-md))
    );
  }

  .smbk-calendar__day:not(.smbk-calendar__day--unavailable)::after {
    z-index: 1;
    content: '';
    position: absolute;
    inset: 0;
  }
}

/* ---- high contrast (forced colors) ---- */
/* The browser drops fills and shadows; the chosen day, today and the focus ring get the user's own colors back.
   Nothing here applies outside that mode. */

@media (forced-colors: active) {
  .smbk-calendar__day--selected {
    background: Highlight;
    color: HighlightText;
    forced-color-adjust: none;
  }

  .smbk-calendar__day--today {
    outline: var(--smbk-border-width-emphasis) solid CanvasText;
    outline-offset: calc(-1 * var(--smbk-border-width-emphasis));
  }

  .smbk-calendar__day:focus-visible:not([data-focus-visible="false"]) {
    outline-color: Highlight;
    outline-offset: var(--smbk-focus-ring-offset);
  }

  .smbk-calendar__day--unavailable {
    color: GrayText;
  }

  /* A range's band in the highlight color, its days' figures in the highlight text color, so the run reads as one. */
  .smbk-calendar__cell::before {
    background: Highlight;
    forced-color-adjust: none;
  }

  .smbk-calendar__day--range-middle {
    color: HighlightText;
    forced-color-adjust: none;
  }
}
Tokens it reads
Calendar tokens
Token and CSSValuePreviewFoundation
space.stack.md--smbk-space-stack-mdcomfortable: 12pxcompact: 8pxchanges with densitySpacing
size.control.md--smbk-size-control-mdcomfortable: 40pxcompact: 32pxchanges with densitySize
color.text.default--smbk-color-text-defaultlight: #232527dark: #e7ebf0changes with themeColor
space.inline.sm--smbk-space-inline-smcomfortable: 6pxcompact: 4pxchanges with densitySpacing
typography.label-lg--smbk-typography-label-lg-font-family--smbk-typography-label-lg-font-size--smbk-typography-label-lg-font-weight--smbk-typography-label-lg-line-height--smbk-typography-label-lg-letter-spacing--smbk-typography-label-lg-text-transformfontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 16pxfontWeight: 500lineHeight: 1.4letterSpacing: 0px

The quick brown fox

Typography
size.20--smbk-size-2020pxSize
color.text.subtle--smbk-color-text-subtlelight: #4e555edark: #9ba5b1changes with themeColor
typography.label-sm--smbk-typography-label-sm-font-family--smbk-typography-label-sm-font-size--smbk-typography-label-sm-font-weight--smbk-typography-label-sm-line-height--smbk-typography-label-sm-letter-spacing--smbk-typography-label-sm-text-transformfontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 12pxfontWeight: 500lineHeight: 1.4letterSpacing: 0px

The quick brown fox

Typography
radius.full--smbk-radius-full9999pxRadius
typography.body-md--smbk-typography-body-md-font-family--smbk-typography-body-md-font-size--smbk-typography-body-md-font-weight--smbk-typography-body-md-line-height--smbk-typography-body-md-letter-spacing--smbk-typography-body-md-text-transformfontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 16pxfontWeight: 400lineHeight: 1.5letterSpacing: 0px

The quick brown fox

Typography
color.action.ghost.background-hover--smbk-color-action-ghost-background-hoverlight: #373d4326dark: #606a754dchanges with themeColor
focus.ring.width--smbk-focus-ring-width2pxFocus
color.border.focus--smbk-color-border-focuslight: #cc0d0ddark: #f34336changes with themeColor
focus.ring.offset--smbk-focus-ring-offset2pxFocus
border-width.emphasis--smbk-border-width-emphasis2pxBorder width
color.border.brand--smbk-color-border-brand#cc0d0dColor
color.action.brand.background--smbk-color-action-brand-background#cc0d0dColor
color.action.brand.foreground--smbk-color-action-brand-foreground#f9fafbColor
color.action.brand.background-hover--smbk-color-action-brand-background-hover#a51d17Color
color.text.disabled--smbk-color-text-disabledlight: #7c8692dark: #606a75changes with themeColor
border-width.hairline--smbk-border-width-hairline1pxBorder width
opacity.disabled--smbk-opacity-disabled0.5Opacity
color.surface.selected--smbk-color-surface-selectedlight: #373d431adark: #606a7533changes with themeColor
size.target.comfortable--smbk-size-target-comfortable44pxSize
Manifest
calendar.manifest.json
{
  "name": "calendar",
  "block": "smbk-calendar",
  "summary": "A month of days to choose a date or a range of dates from, with buttons to the months before and after; it spreads its columns across the width it is given.",
  "adapt": "css",
  "axes": {
    "selection": {
      "values": [
        "single",
        "range"
      ],
      "default": "single",
      "description": "One day, or a range from a first day to a last, joined by a band."
    }
  },
  "flags": {},
  "parts": [
    "header",
    "prev",
    "title",
    "next",
    "grid",
    "weekdays",
    "weekday",
    "week",
    "cell",
    "day"
  ],
  "figmaNodeId": "7984:1084"
}