debont80
29ce270d46
UI31 — the native <Select> wrapper now takes a `disabled` prop that passes to the <select> and applies disabled foreground/background/stroke tokens + not-allowed cursor, so it can show a disabled state like Fluent controls. UI32 — dropped the datetime-local's explicit colorScheme:'light dark' so it inherits the resolved in-app scheme from the app root; the native calendar popup now follows the app's Light/Dark theme, consistent with the native <Select>, instead of tracking the OS preference. W16 — the icon-only row-action clusters (QueueItem + HistoryView) enforce a >=40x40px hit target via a `& button` min-size rule (glyph unchanged, subtle button just gains padding). Labels were already non-hover-only: the shared Hint shows on :focus-within and every action has an aria-label. LibraryView item rows have no icon-only actions, so nothing there needed changing. W18 — defended the two color-meaning surfaces against forced-colors: accent swatches set forced-color-adjust:none (they're color previews; otherwise all flatten to one system color), and the SegmentedControl active segment paints with system Highlight/HighlightText under @media (forced-colors: active) so the checked state stays visible. Status chips (Fluent Badge) and thumbnail tints correctly let the system palette win. typecheck + 253 tests + eslint + prettier + production build all green. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
91 lines
2.4 KiB
TypeScript
91 lines
2.4 KiB
TypeScript
import { makeStyles, tokens, shorthands } from '@fluentui/react-components'
|
|
|
|
// Shared styles for the Settings cards. Each card renders a single <Card> so it
|
|
// stays one direct child of SettingsView's root -- the search filter toggles
|
|
// `display` per child, so the one-DOM-node-per-card shape must be preserved.
|
|
export const useSettingsStyles = makeStyles({
|
|
card: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '16px',
|
|
padding: '20px',
|
|
...shorthands.borderRadius(tokens.borderRadiusXLarge)
|
|
},
|
|
notesBox: {
|
|
maxHeight: '180px',
|
|
overflowY: 'auto',
|
|
padding: '10px 12px',
|
|
backgroundColor: tokens.colorNeutralBackground2,
|
|
...shorthands.borderRadius(tokens.borderRadiusMedium),
|
|
border: `1px solid ${tokens.colorNeutralStroke2}`,
|
|
whiteSpace: 'pre-wrap',
|
|
fontSize: tokens.fontSizeBase200,
|
|
lineHeight: tokens.lineHeightBase300
|
|
},
|
|
sectionHeader: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '10px'
|
|
},
|
|
sectionIcon: {
|
|
fontSize: '20px',
|
|
color: tokens.colorCompoundBrandForeground1
|
|
},
|
|
folderRow: {
|
|
display: 'flex',
|
|
gap: '8px',
|
|
alignItems: 'flex-end'
|
|
},
|
|
folderInput: {
|
|
flexGrow: 1
|
|
},
|
|
hint: {
|
|
color: tokens.colorNeutralForeground3
|
|
},
|
|
swatchRow: {
|
|
display: 'flex',
|
|
gap: '10px'
|
|
},
|
|
swatch: {
|
|
boxSizing: 'border-box',
|
|
width: '28px',
|
|
height: '28px',
|
|
flexShrink: 0,
|
|
...shorthands.borderRadius(tokens.borderRadiusCircular),
|
|
...shorthands.border('2px', 'solid', 'transparent'),
|
|
padding: 0,
|
|
cursor: 'pointer',
|
|
// The swatch *is* a color preview, so keep the accent color under Windows
|
|
// High Contrast / forced-colors (W18); otherwise every swatch flattens to one
|
|
// system color and the accents become indistinguishable.
|
|
forcedColorAdjust: 'none'
|
|
},
|
|
swatchActive: {
|
|
...shorthands.borderColor(tokens.colorNeutralForeground1)
|
|
},
|
|
errorList: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '8px'
|
|
},
|
|
errorRow: {
|
|
padding: '10px 12px',
|
|
backgroundColor: tokens.colorNeutralBackground2,
|
|
...shorthands.borderRadius(tokens.borderRadiusLarge),
|
|
border: `1px solid ${tokens.colorNeutralStroke2}`
|
|
},
|
|
errorRowHeader: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '8px'
|
|
},
|
|
errorRowTitle: {
|
|
flexGrow: 1,
|
|
minWidth: 0,
|
|
fontWeight: tokens.fontWeightSemibold,
|
|
overflow: 'hidden',
|
|
textOverflow: 'ellipsis',
|
|
whiteSpace: 'nowrap'
|
|
}
|
|
})
|