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

feat: Refactor theming in app components to use dynamic CSS variables

Browse Source
This commit is contained in:
Juergen Kunz
2025-06-17 08:58:47 +00:00
parent 5b4319432c
commit cd3c7c8e63
9 changed files with 68 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
ts_web/elements/dees-appui-mainselector.ts
View File

@ -44,14 +44,14 @@ export class DeesAppuiMainselector extends DeesElement {
cssManager.defaultStyles,
css`
:host {
color: #fff;
color: ${cssManager.bdTheme('#333', '#fff')};
position: relative;
display: block;
width: 100%;
max-width: 300px;
height: 100%;
background: #000000;
border-right: 1px solid #222222;
background: ${cssManager.bdTheme('#fafafa', '#000000')};
border-right: 1px solid ${cssManager.bdTheme('#e0e0e0', '#222222')};
}
.maincontainer {
position: absolute;
@ -74,6 +74,7 @@ export class DeesAppuiMainselector extends DeesElement {
font-family: 'Geist Sans', sans-serif;
font-weight: 600;
font-size: 14px;
color: ${cssManager.bdTheme('#666', '#ccc')};
}
.selectionOptions {
@ -92,7 +93,7 @@ export class DeesAppuiMainselector extends DeesElement {
margin-right: 16px;
padding-top: 8px;
padding-bottom: 8px;
border-top: 1px dotted #303030;
border-top: 1px dotted ${cssManager.bdTheme('#e0e0e0', '#303030')};
border-left: 0px solid rgba(0, 0, 0, 0);
transition: all 0.1s;
}
@ -100,6 +101,7 @@ export class DeesAppuiMainselector extends DeesElement {
.selectionOptions .selectionOption:hover {
border-left: 2px solid #26a69a50;
padding-left: 8px;
background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.02)', 'rgba(255, 255, 255, 0.02)')};
}
.selectionOptions .selectionOption:first-child {
@ -109,6 +111,7 @@ export class DeesAppuiMainselector extends DeesElement {
.selectionOptions .selectionOption.selectedOption {
border-left: 4px solid #26a69a;
padding-left: 10px;
background: ${cssManager.bdTheme('rgba(38, 166, 154, 0.05)', 'rgba(38, 166, 154, 0.1)')};
}
`,
];