fix(appui): replace hardcoded app UI theme colors with shared dees CSS variables

This commit is contained in:
2026-04-04 09:37:06 +00:00
parent cdde25d0b4
commit 130ca68471
9 changed files with 105 additions and 104 deletions

View File

@@ -52,10 +52,10 @@ export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI {
align-items: center;
padding: 0 8px;
gap: 4px;
background: ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(0 0% 6%)')};
border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 15%)')};
background: var(--dees-color-bg-tertiary);
border-top: 1px solid var(--dees-color-border-default);
font-size: 11px;
color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
color: var(--dees-color-text-muted);
}
.widget {
@@ -70,8 +70,8 @@ export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI {
}
.widget:hover {
background: ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(0 0% 12%)')};
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')};
background: var(--dees-color-hover);
color: var(--dees-color-text-secondary);
}
.widget dees-icon {
@@ -81,7 +81,7 @@ export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI {
.widget-separator {
width: 1px;
height: 14px;
background: ${cssManager.bdTheme('hsl(0 0% 80%)', 'hsl(0 0% 20%)')};
background: var(--dees-color-border-strong);
margin: 0 4px;
}
@@ -124,12 +124,12 @@ export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI {
border-radius: 3px;
cursor: pointer;
transition: background 0.15s ease;
color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
color: var(--dees-color-text-muted);
}
.action-button:hover {
background: ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(0 0% 12%)')};
color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')};
background: var(--dees-color-hover);
color: var(--dees-color-text-secondary);
}
.action-button.disabled {
@@ -139,7 +139,7 @@ export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI {
.action-button.disabled:hover {
background: transparent;
color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
color: var(--dees-color-text-muted);
}
`,
];