design.estate/dees-catalog
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Juergen Kunz
2025-06-27 18:03:42 +00:00
parent 2e0bf26301
commit 56f5f5887b
3 changed files with 84 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
ts_web/elements/dees-input-richtext.ts
View File

@ -96,27 +96,27 @@ export class DeesInputRichtext extends DeesInputBase<string> {
margin-bottom: 8px; margin-bottom: 8px;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: ${cssManager.bdTheme('#374151', '#e4e4e7')}; color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
} }
.editor-container { .editor-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: ${cssManager.bdTheme('200px', '200px')}; min-height: ${cssManager.bdTheme('200px', '200px')};
border: 1px solid ${cssManager.bdTheme('#e1e5e9', '#2c2c2c')}; border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
border-radius: 8px; border-radius: 6px;
background: ${cssManager.bdTheme('#ffffff', '#141414')}; background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
overflow: hidden; overflow: hidden;
transition: all 0.2s ease; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
} }
.editor-container:hover { .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 { .editor-container.focused {
border-color: ${cssManager.bdTheme('#0050b9', '#0069f2')}; border-color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
box-shadow: 0 0 0 3px ${cssManager.bdTheme('rgba(0, 80, 185, 0.1)', 'rgba(0, 105, 242, 0.1)')}; box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(0 0% 9% / 0.05)', 'hsl(0 0% 98% / 0.05)')};
} }
.editor-toolbar { .editor-toolbar {
@ -124,8 +124,8 @@ export class DeesInputRichtext extends DeesInputBase<string> {
flex-wrap: wrap; flex-wrap: wrap;
gap: 4px; gap: 4px;
padding: 8px 12px; padding: 8px 12px;
background: ${cssManager.bdTheme('#f8f9fa', '#1a1a1a')}; background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 14.9%)')};
border-bottom: 1px solid ${cssManager.bdTheme('#e1e5e9', '#2c2c2c')}; border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
align-items: center; align-items: center;
position: relative; position: relative;
} }
@ -142,8 +142,8 @@ export class DeesInputRichtext extends DeesInputBase<string> {
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: ${cssManager.bdTheme('#374151', '#9ca3af')}; color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
transition: all 0.2s; transition: all 0.15s ease;
user-select: none; user-select: none;
} }
@ -153,13 +153,13 @@ export class DeesInputRichtext extends DeesInputBase<string> {
} }
.toolbar-button:hover { .toolbar-button:hover {
background: ${cssManager.bdTheme('#e5e7eb', '#2c2c2c')}; background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
color: ${cssManager.bdTheme('#1f2937', '#e4e4e7')}; color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
} }
.toolbar-button.active { .toolbar-button.active {
background: ${cssManager.bdTheme('#0050b9', '#0069f2')}; background: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
color: white; color: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
} }
.toolbar-button:disabled { .toolbar-button:disabled {
@ -170,7 +170,7 @@ export class DeesInputRichtext extends DeesInputBase<string> {
.toolbar-divider { .toolbar-divider {
width: 1px; width: 1px;
height: 24px; height: 24px;
background: ${cssManager.bdTheme('#d1d5db', '#404040')}; background: ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
margin: 0 4px; margin: 0 4px;
} }
@ -184,7 +184,7 @@ export class DeesInputRichtext extends DeesInputBase<string> {
.editor-content .ProseMirror { .editor-content .ProseMirror {
outline: none; outline: none;
line-height: 1.6; line-height: 1.6;
color: ${cssManager.bdTheme('#374151', '#e4e4e7')}; color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
min-height: 100%; min-height: 100%;
} }
@ -232,25 +232,25 @@ export class DeesInputRichtext extends DeesInputBase<string> {
} }
.editor-content .ProseMirror blockquote { .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; margin: 1em 0;
padding-left: 1em; 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; font-style: italic;
} }
.editor-content .ProseMirror code { .editor-content .ProseMirror code {
background: ${cssManager.bdTheme('#f3f4f6', '#2c2c2c')}; background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
border-radius: 4px; border-radius: 3px;
padding: 0.2em 0.4em; 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; 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 { .editor-content .ProseMirror pre {
background: ${cssManager.bdTheme('#1f2937', '#0a0a0a')}; background: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
color: ${cssManager.bdTheme('#f9fafb', '#e4e4e7')}; color: ${cssManager.bdTheme('hsl(0 0% 98%)', 'hsl(0 0% 3.9%)')};
border-radius: 6px; border-radius: 6px;
padding: 1em; padding: 1em;
margin: 1em 0; margin: 1em 0;
@ -265,21 +265,21 @@ export class DeesInputRichtext extends DeesInputBase<string> {
} }
.editor-content .ProseMirror a { .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; text-decoration: underline;
cursor: pointer; cursor: pointer;
} }
.editor-content .ProseMirror a:hover { .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 { .editor-footer {
padding: 8px 12px; padding: 8px 12px;
background: ${cssManager.bdTheme('#f8f9fa', '#1a1a1a')}; background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 14.9%)')};
border-top: 1px solid ${cssManager.bdTheme('#e1e5e9', '#2c2c2c')}; border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
font-size: 12px; 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; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -295,8 +295,8 @@ export class DeesInputRichtext extends DeesInputBase<string> {
top: 100%; top: 100%;
left: 0; left: 0;
right: 0; right: 0;
background: ${cssManager.bdTheme('#ffffff', '#1a1a1a')}; background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
border: 1px solid ${cssManager.bdTheme('#d1d5db', '#404040')}; border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
border-radius: 6px; border-radius: 6px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
padding: 12px; padding: 12px;
@ -310,17 +310,18 @@ export class DeesInputRichtext extends DeesInputBase<string> {
.link-input input { .link-input input {
width: 100%; width: 100%;
padding: 8px 12px; padding: 8px 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; border-radius: 6px;
outline: none; outline: none;
font-size: 14px; font-size: 14px;
background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')}; background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
color: ${cssManager.bdTheme('#374151', '#e4e4e7')}; 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 { .link-input input:focus {
border-color: ${cssManager.bdTheme('#0050b9', '#0069f2')}; border-color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
box-shadow: 0 0 0 2px ${cssManager.bdTheme('rgba(0, 80, 185, 0.1)', 'rgba(0, 105, 242, 0.1)')}; box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(0 0% 9% / 0.05)', 'hsl(0 0% 98% / 0.05)')};
} }
.link-input-buttons { .link-input-buttons {
@ -331,33 +332,36 @@ export class DeesInputRichtext extends DeesInputBase<string> {
.link-input-buttons button { .link-input-buttons button {
padding: 6px 12px; 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; border-radius: 4px;
background: ${cssManager.bdTheme('#ffffff', '#1a1a1a')}; background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
cursor: pointer; cursor: pointer;
font-size: 12px; font-size: 12px;
color: ${cssManager.bdTheme('#374151', '#e4e4e7')}; color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
transition: all 0.2s; transition: all 0.15s ease;
font-weight: 500;
} }
.link-input-buttons button:hover { .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 { .link-input-buttons button.primary {
background: ${cssManager.bdTheme('#0050b9', '#0069f2')}; background: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
color: white; color: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
border-color: ${cssManager.bdTheme('#0050b9', '#0069f2')}; border-color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
} }
.link-input-buttons button.primary:hover { .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 { .description {
margin-top: 8px; margin-top: 8px;
font-size: 12px; 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; line-height: 1.4;
} }

23
ts_web/elements/dees-input-text.ts
View File

@ -81,18 +81,18 @@ export class DeesInputText extends DeesInputBase {
padding: 0 12px; padding: 0 12px;
font-size: 14px; font-size: 14px;
line-height: 40px; 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: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
border-radius: 6px; border-radius: 6px;
transition: all 0.15s ease; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
outline: none; outline: none;
cursor: text; cursor: text;
font-family: inherit; 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 { 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) { input:hover:not(:disabled):not(:focus) {
@ -101,14 +101,14 @@ export class DeesInputText extends DeesInputBase {
input:focus { input:focus {
outline: none; outline: none;
border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')}; border-color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
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)')}; box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(0 0% 9% / 0.05)', 'hsl(0 0% 98% / 0.05)')};
} }
input:disabled { input:disabled {
background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')}; 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%)')}; 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; cursor: not-allowed;
opacity: 0.5; opacity: 0.5;
} }
@ -167,7 +167,8 @@ export class DeesInputText extends DeesInputBase {
} }
:host([validation-state="invalid"]) input:focus { :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 */ /* Warning state for input */
@ -176,7 +177,8 @@ export class DeesInputText extends DeesInputBase {
} }
:host([validation-state="warn"]) input:focus { :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 */ /* Valid state for input */
@ -185,7 +187,8 @@ export class DeesInputText extends DeesInputBase {
} }
:host([validation-state="valid"]) input:focus { :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)')};
} }
`, `,
]; ];

28
ts_web/elements/dees-table.ts
View File

@ -440,22 +440,30 @@ export class DeesTable<T> extends DeesElement {
} }
td input { td input {
position: absolute; position: absolute;
top: 2px; top: 4px;
bottom: 2px; bottom: 4px;
left: 2px; left: 20px;
right: 2px; right: 20px;
width: calc(100% - 4px); width: calc(100% - 40px);
height: calc(100% - 4px); height: calc(100% - 8px);
padding: 0px 8px; padding: 0 12px;
outline: none; outline: none;
border: 2px solid ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')}; border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
border-radius: 4px; border-radius: 6px;
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')}; background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')}; color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
font-family: inherit; font-family: inherit;
font-size: inherit; font-size: inherit;
font-weight: 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 { .actionsContainer {
display: flex; display: flex;