feat: MUI test
This commit is contained in:
ISA
@@ -72,6 +72,15 @@ body {
|
||||
.text-balance {
|
||||
text-wrap: balance;
|
||||
}
|
||||
/* Generic focus ring */
|
||||
.focus-ring {
|
||||
outline: 2px solid var(--color-ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.focus-ring:focus-visible {
|
||||
outline: 2px solid var(--color-ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
/* Semantic shortcut utilities */
|
||||
.bg-background {
|
||||
background-color: var(--color-background);
|
||||
@@ -229,6 +238,207 @@ body {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Icon button (used in modals/toolbars) */
|
||||
.icon-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 0.375rem;
|
||||
color: var(--color-fg-muted);
|
||||
transition: background-color 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
.icon-btn:hover {
|
||||
background: var(--color-surface-alt);
|
||||
color: var(--color-fg);
|
||||
}
|
||||
.icon-btn:focus-visible {
|
||||
outline: 2px solid var(--color-ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Toolbar container */
|
||||
.toolbar {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
background: var(--color-surface-alt);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
/* Tab buttons (settings modal, etc.) */
|
||||
.tab-btn {
|
||||
position: relative;
|
||||
font-weight: 600;
|
||||
font-size: 0.75rem; /* text-xs */
|
||||
padding: 0.375rem 0.875rem;
|
||||
border-radius: 0.375rem 0.375rem 0 0;
|
||||
transition: color 0.15s ease, background-color 0.15s ease;
|
||||
}
|
||||
.tab-btn-active {
|
||||
background: var(--color-surface);
|
||||
color: var(--color-accent);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.tab-btn:not(.tab-btn-active) {
|
||||
color: var(--color-fg-muted);
|
||||
}
|
||||
.tab-btn:not(.tab-btn-active):hover {
|
||||
color: var(--color-fg);
|
||||
}
|
||||
|
||||
/* Modal panel base */
|
||||
.modal-panel {
|
||||
background: var(--color-surface);
|
||||
color: var(--color-fg);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 8px 28px -6px rgba(0, 0, 0, 0.35),
|
||||
0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.75rem 0.875rem;
|
||||
background: var(--color-surface-alt);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
border-radius: 0.75rem 0.75rem 0 0;
|
||||
}
|
||||
.modal-footer {
|
||||
padding: 0.75rem 1rem;
|
||||
background: var(--color-surface-alt);
|
||||
border-top: 1px solid var(--color-border);
|
||||
border-radius: 0 0 0.75rem 0.75rem;
|
||||
}
|
||||
.modal-body-scroll {
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
.modal-body-scroll::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
.modal-body-scroll::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
.modal-body-scroll::-webkit-scrollbar-thumb {
|
||||
background: var(--color-border);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.modal-body-scroll::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-fg-muted);
|
||||
}
|
||||
|
||||
/* Dropdown (Listbox) styling helpers */
|
||||
.dropdown-surface {
|
||||
background: var(--color-surface);
|
||||
color: var(--color-fg);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
.dropdown-options {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.dropdown-option-active {
|
||||
background: var(--color-accent);
|
||||
color: #fff;
|
||||
}
|
||||
.dropdown-option-hover:not(.dropdown-option-active) {
|
||||
background: var(--color-surface-alt);
|
||||
}
|
||||
/* Data table helpers */
|
||||
.data-table-wrapper {
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
transition: background-color 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
background: var(--color-surface-alt);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.25rem 0.5rem 0.75rem;
|
||||
}
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
font-size: 0.75rem; /* text-xs */
|
||||
}
|
||||
.data-table th,
|
||||
.data-table td {
|
||||
padding: 0.4rem 0.6rem;
|
||||
border-right: 1px solid var(--color-border);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
vertical-align: middle;
|
||||
}
|
||||
.data-table th:last-child,
|
||||
.data-table td:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
.data-table thead th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 5;
|
||||
background: var(--color-surface-alt);
|
||||
font-weight: 600;
|
||||
font-size: 0.72rem; /* improved readability */
|
||||
color: var(--color-fg-muted);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-rendering: optimizeLegibility;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.data-table tbody tr:hover {
|
||||
background: color-mix(in srgb, var(--color-surface-alt) 92%, transparent);
|
||||
}
|
||||
.data-table tbody tr:nth-child(even) {
|
||||
background: color-mix(in srgb, var(--color-surface) 94%, transparent);
|
||||
}
|
||||
.data-table tbody tr:nth-child(even):hover {
|
||||
background: color-mix(in srgb, var(--color-surface-alt) 85%, transparent);
|
||||
}
|
||||
.data-table tbody td {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.data-table thead th:first-child {
|
||||
border-top-left-radius: 0.35rem;
|
||||
}
|
||||
.data-table thead th:last-child {
|
||||
border-top-right-radius: 0.35rem;
|
||||
}
|
||||
.prio-dot {
|
||||
width: 0.85rem;
|
||||
height: 0.85rem;
|
||||
border-radius: 0.25rem;
|
||||
box-shadow: 0 0 0 1px var(--color-border);
|
||||
}
|
||||
.table-scroll-region {
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
.table-scroll-region::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
.table-scroll-region::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
.table-scroll-region::-webkit-scrollbar-thumb {
|
||||
background: var(--color-border);
|
||||
border-radius: 6px;
|
||||
}
|
||||
.table-scroll-region::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-fg-muted);
|
||||
}
|
||||
}
|
||||
|
||||
/* Form elements use tokens */
|
||||
|
||||
50
styles/muiTheme.ts
Normal file
50
styles/muiTheme.ts
Normal file
@@ -0,0 +1,50 @@
|
||||
import { createTheme } from '@mui/material/styles';
|
||||
|
||||
// Map existing CSS variable tokens to MUI palette via getComputedStyle at runtime (for SSR fallback provide defaults)
|
||||
const cssVar = (name: string, fallback: string) => {
|
||||
if (typeof window === 'undefined') return fallback;
|
||||
const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
|
||||
return v || fallback;
|
||||
};
|
||||
|
||||
export const buildTheme = () => {
|
||||
const mode: 'light' | 'dark' = (typeof document !== 'undefined' && document.documentElement.classList.contains('dark')) ? 'dark' : 'light';
|
||||
const primaryMain = cssVar('--color-accent', '#00aeef');
|
||||
const bgDefault = cssVar('--color-background', mode === 'dark' ? '#0f1115' : '#f1f5f9');
|
||||
const bgPaper = cssVar('--color-surface', mode === 'dark' ? '#1c232d' : '#ffffff');
|
||||
const textPrimary = cssVar('--color-fg', mode === 'dark' ? '#e2e8f0' : '#0f172a');
|
||||
const textSecondary = cssVar('--color-fg-muted', mode === 'dark' ? '#94a3b8' : '#475569');
|
||||
|
||||
return createTheme({
|
||||
palette: {
|
||||
mode,
|
||||
primary: { main: primaryMain },
|
||||
background: { default: bgDefault, paper: bgPaper },
|
||||
text: { primary: textPrimary, secondary: textSecondary },
|
||||
divider: cssVar('--color-border', mode === 'dark' ? '#334155' : '#e2e8f0'),
|
||||
},
|
||||
shape: { borderRadius: 8 },
|
||||
typography: {
|
||||
fontFamily: 'Roboto, Arial, Helvetica, sans-serif',
|
||||
button: { textTransform: 'none', fontWeight: 600 },
|
||||
fontSize: 14,
|
||||
},
|
||||
components: {
|
||||
MuiButton: {
|
||||
styleOverrides: {
|
||||
root: { borderRadius: 8 },
|
||||
containedPrimary: {
|
||||
boxShadow: '0 2px 4px rgba(0,0,0,0.3)',
|
||||
}
|
||||
}
|
||||
},
|
||||
MuiPaper: {
|
||||
styleOverrides: {
|
||||
root: { backgroundImage: 'none' }
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export const muiTheme = buildTheme();
|
||||
Reference in New Issue
Block a user