DatePicker

stablev1.0.0

Single-date calendar overlay from Figma SCDC node 24:23418. Green selected cell, today underline, OK CTA.

Live preview

Date Picker

SunMonTueWedThuFriSat

Implementation

import { DatePicker } from '@nitro-core/ui';

<DatePicker />

Property names stay aligned so a Figma Button maps onto the production import below.

Figma

24:23418

Code

@nitro-core/ui

Selected

Figma Variable

core/green/200 #9ce980

Nitro Token

color.date.selected

CSS

--nitro-color-date-selected

Chain

Figma → Token → CSS → Component

Today

Figma Variable

brand/green #38d200

Nitro Token

color.date.today

CSS

--nitro-color-date-today

Chain

Figma → Token → CSS → Component

Radius

Figma Variable

43px 24px 55px 35px

Nitro Token

radius.datePicker

CSS

--nitro-radius-date-picker

Chain

Figma → Token → CSS → Component