kawa
9441dcdae7
- Add TextFieldMD3.tsx: outlined text field with CSS-only floating label via peer/:not(:placeholder-shown) - Add TextFieldMD3.test.tsx: 9 tests covering htmlFor/id pairing, registration spread, error/helpText/suffix/required slots - Add src/styles/md3-buttons.ts: MD3_BTN_FILLED, MD3_BTN_OUTLINED, MD3_BTN_TEXT class constants
27 lines
1.2 KiB
TypeScript
27 lines
1.2 KiB
TypeScript
/**
|
|
* MD3 button class constants.
|
|
* Apply these className strings to <button> elements directly.
|
|
*
|
|
* - MD3_BTN_FILLED: primary action (Next, Download All)
|
|
* - MD3_BTN_OUTLINED: secondary action (Back, Copy, Download per file)
|
|
* - MD3_BTN_TEXT: tertiary action
|
|
*/
|
|
|
|
export const MD3_BTN_FILLED =
|
|
'px-6 py-2.5 rounded-full bg-primary text-on-primary text-sm font-medium ' +
|
|
'hover:opacity-90 active:opacity-80 transition-opacity ' +
|
|
'disabled:opacity-40 disabled:cursor-not-allowed ' +
|
|
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50';
|
|
|
|
export const MD3_BTN_OUTLINED =
|
|
'px-6 py-2.5 rounded-full border border-outline text-on-surface text-sm font-medium ' +
|
|
'hover:bg-primary/8 active:bg-primary/12 transition-colors ' +
|
|
'disabled:opacity-40 disabled:cursor-not-allowed ' +
|
|
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50';
|
|
|
|
export const MD3_BTN_TEXT =
|
|
'px-4 py-2.5 rounded-full text-primary text-sm font-medium ' +
|
|
'hover:bg-primary/8 active:bg-primary/12 transition-colors ' +
|
|
'disabled:opacity-40 disabled:cursor-not-allowed ' +
|
|
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50';
|