From 56f5f5887b471b2306552cf701591f2c31131dcf Mon Sep 17 00:00:00 2001 From: Juergen Kunz Date: Fri, 27 Jun 2025 18:03:42 +0000 Subject: [PATCH] update --- ts_web/elements/dees-input-richtext.ts | 102 +++++++++++++------------ ts_web/elements/dees-input-text.ts | 23 +++--- ts_web/elements/dees-table.ts | 28 ++++--- 3 files changed, 84 insertions(+), 69 deletions(-) diff --git a/ts_web/elements/dees-input-richtext.ts b/ts_web/elements/dees-input-richtext.ts index 1414352..2faba78 100644 --- a/ts_web/elements/dees-input-richtext.ts +++ b/ts_web/elements/dees-input-richtext.ts @@ -96,27 +96,27 @@ export class DeesInputRichtext extends DeesInputBase { margin-bottom: 8px; font-size: 14px; font-weight: 500; - color: ${cssManager.bdTheme('#374151', '#e4e4e7')}; + color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')}; } .editor-container { display: flex; flex-direction: column; min-height: ${cssManager.bdTheme('200px', '200px')}; - border: 1px solid ${cssManager.bdTheme('#e1e5e9', '#2c2c2c')}; - border-radius: 8px; - background: ${cssManager.bdTheme('#ffffff', '#141414')}; + border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; + border-radius: 6px; + background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')}; overflow: hidden; - transition: all 0.2s ease; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .editor-container:hover { - border-color: ${cssManager.bdTheme('#d1d5db', '#404040')}; + border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')}; } .editor-container.focused { - border-color: ${cssManager.bdTheme('#0050b9', '#0069f2')}; - box-shadow: 0 0 0 3px ${cssManager.bdTheme('rgba(0, 80, 185, 0.1)', 'rgba(0, 105, 242, 0.1)')}; + border-color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')}; + box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(0 0% 9% / 0.05)', 'hsl(0 0% 98% / 0.05)')}; } .editor-toolbar { @@ -124,8 +124,8 @@ export class DeesInputRichtext extends DeesInputBase { flex-wrap: wrap; gap: 4px; padding: 8px 12px; - background: ${cssManager.bdTheme('#f8f9fa', '#1a1a1a')}; - border-bottom: 1px solid ${cssManager.bdTheme('#e1e5e9', '#2c2c2c')}; + background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 14.9%)')}; + border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; align-items: center; position: relative; } @@ -142,8 +142,8 @@ export class DeesInputRichtext extends DeesInputBase { cursor: pointer; font-size: 14px; font-weight: 500; - color: ${cssManager.bdTheme('#374151', '#9ca3af')}; - transition: all 0.2s; + color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')}; + transition: all 0.15s ease; user-select: none; } @@ -153,13 +153,13 @@ export class DeesInputRichtext extends DeesInputBase { } .toolbar-button:hover { - background: ${cssManager.bdTheme('#e5e7eb', '#2c2c2c')}; - color: ${cssManager.bdTheme('#1f2937', '#e4e4e7')}; + background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')}; + color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')}; } .toolbar-button.active { - background: ${cssManager.bdTheme('#0050b9', '#0069f2')}; - color: white; + background: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')}; + color: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')}; } .toolbar-button:disabled { @@ -170,7 +170,7 @@ export class DeesInputRichtext extends DeesInputBase { .toolbar-divider { width: 1px; height: 24px; - background: ${cssManager.bdTheme('#d1d5db', '#404040')}; + background: ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; margin: 0 4px; } @@ -184,7 +184,7 @@ export class DeesInputRichtext extends DeesInputBase { .editor-content .ProseMirror { outline: none; line-height: 1.6; - color: ${cssManager.bdTheme('#374151', '#e4e4e7')}; + color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')}; min-height: 100%; } @@ -232,25 +232,25 @@ export class DeesInputRichtext extends DeesInputBase { } .editor-content .ProseMirror blockquote { - border-left: 4px solid ${cssManager.bdTheme('#d1d5db', '#404040')}; + border-left: 4px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; margin: 1em 0; padding-left: 1em; - color: ${cssManager.bdTheme('#6b7280', '#9ca3af')}; + color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')}; font-style: italic; } .editor-content .ProseMirror code { - background: ${cssManager.bdTheme('#f3f4f6', '#2c2c2c')}; - border-radius: 4px; + background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')}; + border-radius: 3px; padding: 0.2em 0.4em; - font-family: 'Fira Code', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace; + font-family: 'Intel One Mono', 'Fira Code', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace; font-size: 0.9em; - color: ${cssManager.bdTheme('#e11d48', '#f87171')}; + color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')}; } .editor-content .ProseMirror pre { - background: ${cssManager.bdTheme('#1f2937', '#0a0a0a')}; - color: ${cssManager.bdTheme('#f9fafb', '#e4e4e7')}; + background: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')}; + color: ${cssManager.bdTheme('hsl(0 0% 98%)', 'hsl(0 0% 3.9%)')}; border-radius: 6px; padding: 1em; margin: 1em 0; @@ -265,21 +265,21 @@ export class DeesInputRichtext extends DeesInputBase { } .editor-content .ProseMirror a { - color: ${cssManager.bdTheme('#0050b9', '#0069f2')}; + color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')}; text-decoration: underline; cursor: pointer; } .editor-content .ProseMirror a:hover { - color: ${cssManager.bdTheme('#0069f2', '#0084ff')}; + color: ${cssManager.bdTheme('hsl(222.2 47.4% 41.2%)', 'hsl(217.2 91.2% 69.8%)')}; } .editor-footer { padding: 8px 12px; - background: ${cssManager.bdTheme('#f8f9fa', '#1a1a1a')}; - border-top: 1px solid ${cssManager.bdTheme('#e1e5e9', '#2c2c2c')}; + background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 14.9%)')}; + border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; font-size: 12px; - color: ${cssManager.bdTheme('#6b7280', '#9ca3af')}; + color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')}; display: flex; justify-content: space-between; align-items: center; @@ -295,8 +295,8 @@ export class DeesInputRichtext extends DeesInputBase { top: 100%; left: 0; right: 0; - background: ${cssManager.bdTheme('#ffffff', '#1a1a1a')}; - border: 1px solid ${cssManager.bdTheme('#d1d5db', '#404040')}; + background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')}; + border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; border-radius: 6px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); padding: 12px; @@ -310,17 +310,18 @@ export class DeesInputRichtext extends DeesInputBase { .link-input input { width: 100%; padding: 8px 12px; - border: 1px solid ${cssManager.bdTheme('#d1d5db', '#404040')}; - border-radius: 4px; + border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; + border-radius: 6px; outline: none; font-size: 14px; - background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')}; - color: ${cssManager.bdTheme('#374151', '#e4e4e7')}; + background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')}; + color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')}; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .link-input input:focus { - border-color: ${cssManager.bdTheme('#0050b9', '#0069f2')}; - box-shadow: 0 0 0 2px ${cssManager.bdTheme('rgba(0, 80, 185, 0.1)', 'rgba(0, 105, 242, 0.1)')}; + border-color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')}; + box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(0 0% 9% / 0.05)', 'hsl(0 0% 98% / 0.05)')}; } .link-input-buttons { @@ -331,33 +332,36 @@ export class DeesInputRichtext extends DeesInputBase { .link-input-buttons button { padding: 6px 12px; - border: 1px solid ${cssManager.bdTheme('#d1d5db', '#404040')}; + border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; border-radius: 4px; - background: ${cssManager.bdTheme('#ffffff', '#1a1a1a')}; + background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')}; cursor: pointer; font-size: 12px; - color: ${cssManager.bdTheme('#374151', '#e4e4e7')}; - transition: all 0.2s; + color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')}; + transition: all 0.15s ease; + font-weight: 500; } .link-input-buttons button:hover { - background: ${cssManager.bdTheme('#f3f4f6', '#2c2c2c')}; + background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')}; + color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')}; } .link-input-buttons button.primary { - background: ${cssManager.bdTheme('#0050b9', '#0069f2')}; - color: white; - border-color: ${cssManager.bdTheme('#0050b9', '#0069f2')}; + background: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')}; + color: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')}; + border-color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')}; } .link-input-buttons button.primary:hover { - background: ${cssManager.bdTheme('#0069f2', '#0084ff')}; + background: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')}; + border-color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')}; } .description { margin-top: 8px; font-size: 12px; - color: ${cssManager.bdTheme('#6b7280', '#9ca3af')}; + color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')}; line-height: 1.4; } diff --git a/ts_web/elements/dees-input-text.ts b/ts_web/elements/dees-input-text.ts index e62244d..e4ba326 100644 --- a/ts_web/elements/dees-input-text.ts +++ b/ts_web/elements/dees-input-text.ts @@ -81,18 +81,18 @@ export class DeesInputText extends DeesInputBase { padding: 0 12px; font-size: 14px; line-height: 40px; - background: transparent; + background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')}; border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; border-radius: 6px; - transition: all 0.15s ease; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); outline: none; cursor: text; font-family: inherit; - color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')}; + color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')}; } input::placeholder { - color: ${cssManager.bdTheme('hsl(0 0% 63.9%)', 'hsl(0 0% 45.1%)')}; + color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')}; } input:hover:not(:disabled):not(:focus) { @@ -101,14 +101,14 @@ export class DeesInputText extends DeesInputBase { input:focus { outline: none; - border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')}; - box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.1)', 'hsl(217.2 91.2% 59.8% / 0.1)')}; + border-color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')}; + box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(0 0% 9% / 0.05)', 'hsl(0 0% 98% / 0.05)')}; } input:disabled { background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')}; border-color: ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; - color: ${cssManager.bdTheme('hsl(0 0% 63.9%)', 'hsl(0 0% 45.1%)')}; + color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')}; cursor: not-allowed; opacity: 0.5; } @@ -167,7 +167,8 @@ export class DeesInputText extends DeesInputBase { } :host([validation-state="invalid"]) input:focus { - box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(0 84.2% 60.2% / 0.1)', 'hsl(0 72.2% 50.6% / 0.1)')}; + border-color: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 72.2% 50.6%)')}; + box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(0 84.2% 60.2% / 0.05)', 'hsl(0 72.2% 50.6% / 0.05)')}; } /* Warning state for input */ @@ -176,7 +177,8 @@ export class DeesInputText extends DeesInputBase { } :host([validation-state="warn"]) input:focus { - box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(25 95% 53% / 0.1)', 'hsl(25 95% 63% / 0.1)')}; + border-color: ${cssManager.bdTheme('hsl(25 95% 53%)', 'hsl(25 95% 63%)')}; + box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(25 95% 53% / 0.05)', 'hsl(25 95% 63% / 0.05)')}; } /* Valid state for input */ @@ -185,7 +187,8 @@ export class DeesInputText extends DeesInputBase { } :host([validation-state="valid"]) input:focus { - box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(142.1 76.2% 36.3% / 0.1)', 'hsl(142.1 70.6% 45.3% / 0.1)')}; + border-color: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3%)')}; + box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(142.1 76.2% 36.3% / 0.05)', 'hsl(142.1 70.6% 45.3% / 0.05)')}; } `, ]; diff --git a/ts_web/elements/dees-table.ts b/ts_web/elements/dees-table.ts index 4f1fe2d..1e07106 100644 --- a/ts_web/elements/dees-table.ts +++ b/ts_web/elements/dees-table.ts @@ -440,22 +440,30 @@ export class DeesTable extends DeesElement { } td input { position: absolute; - top: 2px; - bottom: 2px; - left: 2px; - right: 2px; - width: calc(100% - 4px); - height: calc(100% - 4px); - padding: 0px 8px; + top: 4px; + bottom: 4px; + left: 20px; + right: 20px; + width: calc(100% - 40px); + height: calc(100% - 8px); + padding: 0 12px; outline: none; - border: 2px solid ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')}; - border-radius: 4px; + border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; + border-radius: 6px; background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')}; color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')}; font-family: inherit; font-size: inherit; font-weight: inherit; - box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.1)', 'hsl(217.2 91.2% 59.8% / 0.1)')}; + transition: all 0.15s ease; + box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + } + + td input:focus { + border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')}; + outline: 2px solid transparent; + outline-offset: 2px; + box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.2)', 'hsl(217.2 91.2% 59.8% / 0.2)')}; } .actionsContainer { display: flex;