// Auto-generated by: pnpm test:stylesheets:update import { join } from 'node:path'; import { compileLessWithTokens } from '../../../../scripts/testStylesheets/compileLessWithTokens'; import { DEFAULT_LESS_PRELUDES, DEFAULT_TOKEN_CSS_FILES } from '../../../../scripts/testStylesheets/config'; describe('components/Fields/DateField/DateField.less stylesheet snapshot', () => { it('compiled CSS with tokens inlined', async () => { const css = await compileLessWithTokens(join(__dirname, 'DateField.less'), DEFAULT_TOKEN_CSS_FILES, { lessPreludes: DEFAULT_LESS_PRELUDES, }); expect(css).toMatchTokensInlineSnapshot(` .dateField { display: inline-flex; width: 106px; min-width: 35px; max-width: 100%; height: calc(24px + 2 * 1px); padding: 4px; font-family: 'Inter', 'Arial', sans-serif; font-size: 12px; font-weight: 400; line-height: 16px; color: oklch(0 0 none); letter-spacing: 0.1px; background-color: oklch(1 0 none); border: 1px solid oklch(0.8761 0 none); border-radius: 0px; } .dateField::placeholder, .dateField [data-placeholder="true"] { color: oklch(0.7252 0 none); } .dateField:focus { background-color: oklch(1 0 none); border-color: oklch(0.7247 0.1478 233.0429); outline: 0; box-shadow: 0px 0px 2px 0px oklch(0.7247 0.1478 233.0429); } .dateField:disabled { background-color: oklch(0.9491 0 none); } .dateField.warning-field, .dateField.warning-field:focus { border-color: oklch(0.7251 0.1625 65.1153); } .dateField.error-field, .dateField.error-field:focus { border-color: oklch(0.5999 0.246 28.9803); } .dateField__container { width: 132px; } .dateField__container.sm { width: 132px; } .dateField__container.md { width: 220px; } .dateField__containerInner { position: relative; display: flex; align-items: center; width: 100%; } .dateField__containerInner > .dateField { flex: 1; } .dateField__segment:focus, .dateField__containerInner[data-all-selected='true'] .dateField__segment { color: oklch(1 0 none); background-color: oklch(0.7247 0.1478 233.0429); border-radius: 2px; outline: 0; } .dateField__dialog { overflow-y: auto; max-height: inherit; background-color: oklch(1 0 none); box-shadow: 0px 3px 7px 0px oklch(0 0 none / 0.1); } .dateField__calendar { display: flex; flex: 1; flex-direction: column; gap: 24px; aspect-ratio: 0.8739; min-height: 357px; padding: 16px; } .dateField__calendarHeader { display: flex; align-items: center; justify-content: space-between; } .dateField__calendarHeader > [slot='previous'] { order: -1; } .dateField__calendarHeader > [slot='next'] { order: 1; } .dateField__calendarHeaderTitle { margin: 0 !important; } .dateField__calendarGrid td { padding: 0; } .dateField__calendarGridHeaderCell { height: 28px; padding: 0.7em 0.3em; font-weight: 400; color: oklch(0.5999 0 none); text-align: center; } .dateField__calendarGridCell { cursor: pointer; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; min-width: 40px; min-height: 40px; color: oklch(0 0 none); } .dateField__calendarGridCell--outsideMonth { cursor: default; color: oklch(0.5999 0 none); } .dateField__calendarGridCell--unavailable { cursor: not-allowed; color: oklch(0.7252 0 none); } .dateField__calendarGridCell--focused { color: oklch(1 0 none); background-color: oklch(0.7247 0.1478 233.0429); outline: 0; } .dateField__calendarGridCell--hovered { color: oklch(0 0 none); background-color: oklch(0.8761 0 none); } `); }); });