u

src/components/manifest/ArticleSearchDialog.jsx

@@ -23,6 +23,9 @@ import LinkIcon from '@mui/icons-material/Link';
 import articleIndexAutomat from '../../automats/articleIndexAutomat';
 import ArticlePhoto from '../article/ArticlePhoto';
 import { BrandLabel } from '../brand';
+import {
+  BORDER,
+} from '../../colors';
 
 export default class ArticleSearchDialog extends PureComponent {
   constructor(props) {
@@ -250,7 +253,7 @@ export default class ArticleSearchDialog extends PureComponent {
                           height: 34,
                           borderRadius: 0.75,
                           overflow: 'hidden',
-                          bgcolor: '#e2e8f0',
+                          bgcolor: BORDER,
                           display: 'flex',
                           alignItems: 'center',
                           justifyContent: 'center',

src/components/manifest/Attachment.jsx

@@ -10,6 +10,18 @@ import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined
 import { tileBaseSx, TILE_SIZE } from 'dashgui/tiles';
 import { generateTextThumbnail } from '../../utils/textThumbnail';
 import { notifyErrorMessage } from '../../utils/notify';
+import {
+  SCRIM_ACTION,
+  SCRIM_ATTACHMENT,
+  SCRIM_HEAVY,
+  SURFACE_BASE,
+  SURFACE_FAINT,
+  SURFACE_RAISED,
+  SURFACE_SUBTLE,
+  VEIL_DISABLED,
+  VEIL_TEXT,
+  WHITE,
+} from '../../colors';
 
 export class Attachment extends PureComponent {
   state = {
@@ -120,7 +132,7 @@ export class Attachment extends PureComponent {
           position: 'relative',
           overflow: 'hidden',
           cursor: disabled ? 'default' : 'pointer',
-          bgcolor: isText ? '#fcfcfc' : '#f8fafc',
+          bgcolor: isText ? SURFACE_FAINT : SURFACE_BASE,
           border: '1px solid',
           borderColor: 'divider',
           ...(disabled ? { opacity: 0.6, pointerEvents: 'none' } : {}),
@@ -135,7 +147,7 @@ export class Attachment extends PureComponent {
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
-            bgcolor: isText ? '#fafafa' : '#f1f5f9',
+            bgcolor: isText ? SURFACE_SUBTLE : SURFACE_RAISED,
           }}
         >
           {thumbnail ? (
@@ -156,7 +168,7 @@ export class Attachment extends PureComponent {
                 width: '100%',
                 height: '100%',
                 p: 1.25,
-                bgcolor: '#fafafa',
+                bgcolor: SURFACE_SUBTLE,
                 display: 'flex',
                 flexDirection: 'column',
                 justifyContent: 'flex-start',
@@ -243,13 +255,13 @@ export class Attachment extends PureComponent {
                   disabled={disabled || hasArticles}
                   onClick={this.handleRescan}
                   sx={{
-                    bgcolor: 'rgba(0, 0, 0, 0.6)',
-                    color: hasArticles ? 'rgba(255, 255, 255, 0.3)' : '#fff',
+                    bgcolor: SCRIM_ACTION,
+                    color: hasArticles ? VEIL_DISABLED : WHITE,
                     p: 0.5,
                     backdropFilter: 'blur(2px)',
                     cursor: hasArticles ? 'not-allowed' : 'pointer',
                     '&:hover': {
-                      bgcolor: hasArticles ? 'rgba(0, 0, 0, 0.6)' : 'rgba(0, 0, 0, 0.85)',
+                      bgcolor: hasArticles ? SCRIM_ACTION : SCRIM_HEAVY,
                     },
                   }}
                 >
@@ -265,8 +277,8 @@ export class Attachment extends PureComponent {
                 disabled={disabled}
                 onClick={this.handleDelete}
                 sx={{
-                  bgcolor: 'rgba(0, 0, 0, 0.6)',
-                  color: '#fff',
+                  bgcolor: SCRIM_ACTION,
+                  color: WHITE,
                   p: 0.5,
                   backdropFilter: 'blur(2px)',
                   '&:hover': { bgcolor: 'error.main' },
@@ -287,7 +299,7 @@ export class Attachment extends PureComponent {
             bottom: 0,
             px: 1,
             py: 0.5,
-            background: 'linear-gradient(transparent, rgba(0,0,0,0.75) 40%, rgba(0,0,0,0.85))',
+            background: SCRIM_ATTACHMENT,
             textAlign: 'left',
             pointerEvents: 'none',
           }}
@@ -296,7 +308,7 @@ export class Attachment extends PureComponent {
             variant="caption"
             fontWeight={600}
             noWrap
-            sx={{ color: '#fff', display: 'block', fontSize: '0.72rem', lineHeight: 1.2 }}
+            sx={{ color: WHITE, display: 'block', fontSize: '0.72rem', lineHeight: 1.2 }}
           >
             {name}
           </Typography>
@@ -304,7 +316,7 @@ export class Attachment extends PureComponent {
             <Typography
               variant="caption"
               noWrap
-              sx={{ color: 'rgba(255,255,255,0.8)', fontSize: '0.65rem' }}
+              sx={{ color: VEIL_TEXT, fontSize: '0.65rem' }}
             >
               {this.formatFileSize(size)}
             </Typography>

src/components/manifest/BookDeliveryDialog.jsx

@@ -35,6 +35,10 @@ import {
   bookDeliveryLines,
 } from '../../utils/deliveryLedger';
 import warehouseAutomat from '../../automats/warehouseAutomat';
+import {
+  SURFACE_BASE,
+  SURFACE_RAISED,
+} from '../../colors';
 
 export default class BookDeliveryDialog extends PureComponent {
   constructor(props) {
@@ -292,7 +296,7 @@ export default class BookDeliveryDialog extends PureComponent {
           display: 'flex',
           flexWrap: 'wrap',
           gap: 3,
-          backgroundColor: '#f8fafc',
+          backgroundColor: SURFACE_BASE,
           alignItems: 'center',
         }}
       >
@@ -391,7 +395,7 @@ export default class BookDeliveryDialog extends PureComponent {
     return (
       <TableContainer component={Paper} variant="outlined" sx={{ mb: 2 }}>
         <Table size="small">
-          <TableHead sx={{ backgroundColor: '#f1f5f9' }}>
+          <TableHead sx={{ backgroundColor: SURFACE_RAISED }}>
             <TableRow>
               <TableCell sx={{ fontWeight: 600 }}>SKU</TableCell>
               <TableCell sx={{ fontWeight: 600 }}>Artikel</TableCell>

src/components/manifest/DeliveryList.jsx

@@ -21,6 +21,9 @@ import { notifyError } from '../../utils/notify';
 import BookDeliveryDialog from './BookDeliveryDialog';
 import withNavigate from '../withNavigate';
 import { formatDate, numberDisplay } from './manifestConfig';
+import {
+  ORANGE_PANEL,
+} from '../../colors';
 
 function sortDeliveries(docs) {
   if (!Array.isArray(docs)) return [];
@@ -385,7 +388,7 @@ export class DeliveryList extends PureComponent {
           onDelete={this.handleDelete}
           deleteDisabled={busyId != null}
           emptyMessage="Noch keine Lieferungen."
-          color="#fed7aa"
+          color={ORANGE_PANEL}
           getEditLabel={(row) => `„${row.number}“ bearbeiten`}
           getDeleteLabel={(row) => `„${row.number}“ löschen`}
         />

src/components/manifest/ManifestFormLine.jsx

@@ -24,6 +24,9 @@ import { primaryPrice, priceBrutto } from '../../utils/articleDetail';
 import artikelAutomat, { createArticleSelector, getArticle } from '../../automats/artikelAutomat';
 import { artikelDetailPath } from '../article/articleRoute';
 import { BrandLabel } from '../brand';
+import {
+  BORDER,
+} from '../../colors';
 
 class ManifestFormLine extends PureComponent {
   constructor(props) {
@@ -219,7 +222,6 @@ class ManifestFormLine extends PureComponent {
           htmlInput: {
             inputMode: type === 'number' ? 'decimal' : 'text',
             style: { textAlign: align },
-            spellCheck: false,
             autoComplete: 'off',
             step: type === 'number' ? 'any' : undefined,
           },
@@ -323,7 +325,7 @@ class ManifestFormLine extends PureComponent {
               minWidth: 28,
               borderRadius: 0.75,
               overflow: 'hidden',
-              bgcolor: '#e2e8f0',
+              bgcolor: BORDER,
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',

src/components/manifest/ManifestHeader.jsx

@@ -15,6 +15,9 @@ import FileDropzone from '../FileDropzone';
 import AttachmentList from './AttachmentList';
 import { hasArticleLines, manifestConfig, partyDisplayName } from './manifestConfig';
 import { notifyErrorMessage } from '../../utils/notify';
+import {
+  SURFACE_RAISED,
+} from '../../colors';
 
 class ManifestHeader extends PureComponent {
   constructor(props) {
@@ -136,7 +139,6 @@ class ManifestHeader extends PureComponent {
               autoComplete="off"
               slotProps={{
                 inputLabel: { shrink: true },
-                htmlInput: { spellCheck: false },
               }}
               sx={{
                 flex: { xs: '1 1 100%', sm: '1 1 150px' },
@@ -165,7 +167,6 @@ class ManifestHeader extends PureComponent {
                     ...params.slotProps,
                     htmlInput: {
                       ...params.slotProps?.htmlInput,
-                      spellCheck: false,
                       autoComplete: 'off',
                     },
                   }}
@@ -247,7 +248,7 @@ class ManifestHeader extends PureComponent {
         <PanelTile
           wide={1}
           minHeight={160}
-          color={actionsColor ?? '#f1f5f9'}
+          color={actionsColor ?? SURFACE_RAISED}
           sx={{
             gridColumn: { xs: '1 / -1', sm: '1 / -1', md: 'span 1' },
           }}

src/components/manifest/PdfViewerPanel.jsx

@@ -15,6 +15,11 @@ import ViewSidebarIcon from '@mui/icons-material/ViewSidebar';
 import { enqueueSnackbar } from 'notistack';
 import { PanelTile } from 'dashgui/panels';
 import { delivery as deliveryApi } from '../../api';
+import {
+  SURFACE_BASE,
+  SURFACE_WASH,
+  WHITE,
+} from '../../colors';
 
 /**
  * Inline PDF viewer rendered as a panel tile, mirroring TextEditorPanel's
@@ -125,7 +130,7 @@ export class PdfViewerPanel extends PureComponent {
       <PanelTile
         wide={wide}
         minHeight={320}
-        color="#f8fafc"
+        color={SURFACE_BASE}
         sx={{ height, minHeight: 320 }}
       >
         <Box
@@ -205,7 +210,7 @@ export class PdfViewerPanel extends PureComponent {
               border: '1px solid',
               borderColor: 'divider',
               borderRadius: 1,
-              bgcolor: '#ffffff',
+              bgcolor: WHITE,
               overflow: 'hidden',
             }}
           >
@@ -217,7 +222,7 @@ export class PdfViewerPanel extends PureComponent {
                   display: 'flex',
                   alignItems: 'center',
                   justifyContent: 'center',
-                  bgcolor: 'rgba(248, 250, 252, 0.7)',
+                  bgcolor: SURFACE_WASH,
                   zIndex: 2,
                 }}
               >

src/components/manifest/TextEditorPanel.jsx

@@ -18,6 +18,11 @@ import ViewSidebarIcon from '@mui/icons-material/ViewSidebar';
 import { enqueueSnackbar } from 'notistack';
 import { PanelTile } from 'dashgui/panels';
 import { delivery as deliveryApi } from '../../api';
+import {
+  SURFACE_BASE,
+  SURFACE_WASH,
+  WHITE,
+} from '../../colors';
 
 /**
  * Inline text-file viewer/editor rendered as a full-width panel tile below the
@@ -169,7 +174,7 @@ export class TextEditorPanel extends PureComponent {
       <PanelTile
         wide={wide}
         minHeight={320}
-        color="#f8fafc"
+        color={SURFACE_BASE}
         sx={{ height, minHeight: 320 }}
       >
         <Box
@@ -264,7 +269,7 @@ export class TextEditorPanel extends PureComponent {
                   display: 'flex',
                   alignItems: 'center',
                   justifyContent: 'center',
-                  bgcolor: 'rgba(248, 250, 252, 0.7)',
+                  bgcolor: SURFACE_WASH,
                   zIndex: 2,
                 }}
               >
@@ -292,7 +297,7 @@ export class TextEditorPanel extends PureComponent {
                     fontSize: '0.72rem',
                     lineHeight: 1.45,
                     tabSize: 4,
-                    bgcolor: '#ffffff',
+                    bgcolor: WHITE,
                     p: 1.5,
                     '& textarea': {
                       height: '100% !important',

src/components/manifest/manifestConfig.js

@@ -9,6 +9,12 @@ import customergroupAutomat from '../../automats/customergroupAutomat';
 import deliveryAutomat from '../../automats/deliveryAutomat';
 import quoteAutomat from '../../automats/quoteAutomat';
 import orderAutomat from '../../automats/orderAutomat';
+import {
+  GREEN_PANEL,
+  ORANGE_PANEL,
+  PURPLE_PANEL,
+  YELLOW_PANEL,
+} from '../../colors';
 
 /** Groups that are not sales customers (filter client-side). */
 export const EXCLUDED_CUSTOMER_GROUP_NAMES = new Set(['Lieferanten', 'POS']);
@@ -559,9 +565,9 @@ export function manifestConfig(kind) {
       getPathLabel: 'GET /api/delivery/:id',
       postPathLabel: 'POST /api/delivery',
       patchPathLabel: 'PATCH /api/delivery/:id',
-      listColor: '#fed7aa',
-      headerColor: '#fed7aa',
-      linesColor: '#bbf7d0',
+      listColor: ORANGE_PANEL,
+      headerColor: ORANGE_PANEL,
+      linesColor: GREEN_PANEL,
       requirePartyBeforeLines: false,
       listAutomat: deliveryAutomat,
       partiesByIdFromList: (parties) =>
@@ -595,9 +601,9 @@ export function manifestConfig(kind) {
       getPathLabel: 'GET /api/quote/:id',
       postPathLabel: 'POST /api/quote',
       patchPathLabel: 'PATCH /api/quote/:id',
-      listColor: '#fde68a',
-      headerColor: '#fde68a',
-      linesColor: '#bbf7d0',
+      listColor: YELLOW_PANEL,
+      headerColor: YELLOW_PANEL,
+      linesColor: GREEN_PANEL,
       requirePartyBeforeLines: false,
       listAutomat: quoteAutomat,
       partiesByIdFromList: (parties) =>
@@ -628,9 +634,9 @@ export function manifestConfig(kind) {
       getPathLabel: 'GET /api/order/:id',
       postPathLabel: 'POST /api/order',
       patchPathLabel: 'PATCH /api/order/:id',
-      listColor: '#c4b5fd',
-      headerColor: '#c4b5fd',
-      linesColor: '#bbf7d0',
+      listColor: PURPLE_PANEL,
+      headerColor: PURPLE_PANEL,
+      linesColor: GREEN_PANEL,
       requirePartyBeforeLines: false,
       listAutomat: orderAutomat,
       partiesByIdFromList: (parties) =>