fix(theme): align component styles with shared theme CSS variables

This commit is contained in:
2026-04-04 10:50:19 +00:00
parent dcef6faa66
commit ca290d1267
15 changed files with 159 additions and 139 deletions

View File

@@ -142,16 +142,16 @@ export class DeesInputCode extends DeesInputBase<string> {
padding: 4px 10px;
font-size: 12px;
font-weight: 500;
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 12%)')};
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 20%)')};
background: var(--dees-color-bg-primary);
border: 1px solid var(--dees-color-border-default);
border-radius: 4px;
cursor: pointer;
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
color: var(--dees-color-text-secondary);
transition: all 0.15s ease;
}
.language-button:hover {
background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 15%)')};
background: var(--dees-color-hover);
}
.language-dropdown {
@@ -159,8 +159,8 @@ export class DeesInputCode extends DeesInputBase<string> {
top: 100%;
left: 0;
margin-top: 4px;
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 20%)')};
background: var(--dees-color-bg-primary);
border: 1px solid var(--dees-color-border-default);
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 100;
@@ -173,16 +173,16 @@ export class DeesInputCode extends DeesInputBase<string> {
padding: 8px 12px;
font-size: 12px;
cursor: pointer;
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
color: var(--dees-color-text-secondary);
transition: background 0.15s ease;
}
.language-option:hover {
background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 15%)')};
background: var(--dees-color-hover);
}
.language-option.selected {
background: ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(0 0% 20%)')};
background: var(--dees-color-active);
}
.toolbar-button {
@@ -195,18 +195,18 @@ export class DeesInputCode extends DeesInputBase<string> {
border: none;
border-radius: 4px;
cursor: pointer;
color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 60%)')};
color: var(--dees-color-text-muted);
transition: all 0.15s ease;
}
.toolbar-button:hover {
background: ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(0 0% 15%)')};
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
background: var(--dees-color-hover);
color: var(--dees-color-text-secondary);
}
.toolbar-button.active {
background: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')};
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
background: var(--dees-color-active);
color: var(--dees-color-text-secondary);
}
.toolbar-button.success {
@@ -226,7 +226,7 @@ export class DeesInputCode extends DeesInputBase<string> {
.toolbar-divider {
width: 1px;
height: 20px;
background: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')};
background: var(--dees-color-border-default);
margin: 0 4px;
}