@design.estate/dees-catalog 3.55.0 → 3.55.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/dist_bundle/bundle.js +135 -142
  2. package/dist_ts_web/00_commitinfo_data.js +1 -1
  3. package/dist_ts_web/elements/00group-appui/dees-appui/dees-appui.js +2 -3
  4. package/dist_ts_web/elements/00group-appui/dees-appui-appbar/styles.js +7 -7
  5. package/dist_ts_web/elements/00group-appui/dees-appui-bottombar/dees-appui-bottombar.js +11 -11
  6. package/dist_ts_web/elements/00group-appui/dees-appui-maincontent/dees-appui-maincontent.js +3 -4
  7. package/dist_ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.js +32 -33
  8. package/dist_ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.js +29 -30
  9. package/dist_ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.js +21 -22
  10. package/dist_ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.js +30 -31
  11. package/dist_ts_web/elements/00group-simple/dees-simple-login/dees-simple-login.js +7 -8
  12. package/dist_watch/bundle.js +133 -140
  13. package/dist_watch/bundle.js.map +2 -2
  14. package/package.json +1 -1
  15. package/ts_web/00_commitinfo_data.ts +1 -1
  16. package/ts_web/elements/00group-appui/dees-appui/dees-appui.ts +1 -2
  17. package/ts_web/elements/00group-appui/dees-appui-appbar/styles.ts +6 -6
  18. package/ts_web/elements/00group-appui/dees-appui-bottombar/dees-appui-bottombar.ts +10 -10
  19. package/ts_web/elements/00group-appui/dees-appui-maincontent/dees-appui-maincontent.ts +2 -3
  20. package/ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts +31 -32
  21. package/ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.ts +28 -29
  22. package/ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.ts +20 -21
  23. package/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts +29 -30
  24. package/ts_web/elements/00group-simple/dees-simple-login/dees-simple-login.ts +6 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@design.estate/dees-catalog",
3
- "version": "3.55.0",
3
+ "version": "3.55.2",
4
4
  "private": false,
5
5
  "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
6
6
  "main": "dist_ts_web/index.js",
package/ts_web/00_commitinfo_data.ts CHANGED
@@ -3,6 +3,6 @@
3
3
  */
4
4
  export const commitinfo = {
5
5
  name: '@design.estate/dees-catalog',
6
- version: '3.55.0',
6
+ version: '3.55.2',
7
7
  description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
8
8
  }
package/ts_web/elements/00group-appui/dees-appui/dees-appui.ts CHANGED
@@ -184,12 +184,11 @@ export class DeesAppui extends DeesElement {
184
184
  themeDefaultStyles,
185
185
  cssManager.defaultStyles,
186
186
  css`
187
- /* TODO: Migrate hardcoded values to --dees-* CSS variables */
188
187
  :host {
189
188
  position: absolute;
190
189
  height: 100%;
191
190
  width: 100%;
192
- background: ${cssManager.bdTheme('#f0f0f0', '#1a1a1a')};
191
+ background: var(--dees-color-bg-tertiary);
193
192
  }
194
193
  .maingrid {
195
194
  position: absolute;
package/ts_web/elements/00group-appui/dees-appui-appbar/styles.ts CHANGED
@@ -12,8 +12,8 @@ export const appuiAppbarStyles = [
12
12
  position: relative;
13
13
  width: 100%;
14
14
  height: var(--appbar-height);
15
- border-bottom: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
16
- background: ${cssManager.bdTheme('#ffffff', '#000000')};
15
+ border-bottom: 1px solid var(--dees-color-border-default);
16
+ background: var(--dees-color-bg-primary);
17
17
  color: ${cssManager.bdTheme('#00000080', '#ffffff80')};
18
18
  font-size: var(--appbar-font-size);
19
19
  display: grid;
@@ -78,8 +78,8 @@ export const appuiAppbarStyles = [
78
78
  top: 100%;
79
79
  left: 0;
80
80
  min-width: 200px;
81
- background: ${cssManager.bdTheme('#ffffff', '#000000')};
82
- border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
81
+ background: var(--dees-color-bg-primary);
82
+ border: 1px solid var(--dees-color-border-default);
83
83
  border-radius: 4px;
84
84
  box-shadow: ${cssManager.bdTheme('0 4px 12px rgba(0, 0, 0, 0.15)', '0 4px 12px rgba(0, 0, 0, 0.3)')};
85
85
  margin-top: 4px;
@@ -112,7 +112,7 @@ export const appuiAppbarStyles = [
112
112
 
113
113
  .dropdown-divider {
114
114
  height: 1px;
115
- background: ${cssManager.bdTheme('#e0e0e0', '#202020')};
115
+ background: var(--dees-color-border-default);
116
116
  margin: 4px 0;
117
117
  }
118
118
 
@@ -215,7 +215,7 @@ export const appuiAppbarStyles = [
215
215
  width: 8px;
216
216
  height: 8px;
217
217
  border-radius: 50%;
218
- border: 2px solid ${cssManager.bdTheme('#ffffff', '#000000')};
218
+ border: 2px solid var(--dees-color-bg-primary);
219
219
  }
220
220
 
221
221
  .user-status.online {
package/ts_web/elements/00group-appui/dees-appui-bottombar/dees-appui-bottombar.ts CHANGED
@@ -52,10 +52,10 @@ export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI {
52
52
  align-items: center;
53
53
  padding: 0 8px;
54
54
  gap: 4px;
55
- background: ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(0 0% 6%)')};
56
- border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 15%)')};
55
+ background: var(--dees-color-bg-tertiary);
56
+ border-top: 1px solid var(--dees-color-border-default);
57
57
  font-size: 11px;
58
- color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
58
+ color: var(--dees-color-text-muted);
59
59
  }
60
60
 
61
61
  .widget {
@@ -70,8 +70,8 @@ export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI {
70
70
  }
71
71
 
72
72
  .widget:hover {
73
- background: ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(0 0% 12%)')};
74
- color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')};
73
+ background: var(--dees-color-hover);
74
+ color: var(--dees-color-text-secondary);
75
75
  }
76
76
 
77
77
  .widget dees-icon {
@@ -81,7 +81,7 @@ export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI {
81
81
  .widget-separator {
82
82
  width: 1px;
83
83
  height: 14px;
84
- background: ${cssManager.bdTheme('hsl(0 0% 80%)', 'hsl(0 0% 20%)')};
84
+ background: var(--dees-color-border-strong);
85
85
  margin: 0 4px;
86
86
  }
87
87
 
@@ -124,12 +124,12 @@ export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI {
124
124
  border-radius: 3px;
125
125
  cursor: pointer;
126
126
  transition: background 0.15s ease;
127
- color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
127
+ color: var(--dees-color-text-muted);
128
128
  }
129
129
 
130
130
  .action-button:hover {
131
- background: ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(0 0% 12%)')};
132
- color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')};
131
+ background: var(--dees-color-hover);
132
+ color: var(--dees-color-text-secondary);
133
133
  }
134
134
 
135
135
  .action-button.disabled {
@@ -139,7 +139,7 @@ export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI {
139
139
 
140
140
  .action-button.disabled:hover {
141
141
  background: transparent;
142
- color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
142
+ color: var(--dees-color-text-muted);
143
143
  }
144
144
  `,
145
145
  ];
package/ts_web/elements/00group-appui/dees-appui-maincontent/dees-appui-maincontent.ts CHANGED
@@ -63,14 +63,13 @@ export class DeesAppuiMaincontent extends DeesElement {
63
63
  themeDefaultStyles,
64
64
  cssManager.defaultStyles,
65
65
  css`
66
- /* TODO: Migrate hardcoded values to --dees-* CSS variables */
67
66
  :host {
68
- color: ${cssManager.bdTheme('#333', '#fff')};
67
+ color: var(--dees-color-text-secondary);
69
68
  display: grid;
70
69
  grid-template-rows: auto 1fr;
71
70
  width: 100%;
72
71
  height: 100%;
73
- background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
72
+ background: var(--dees-color-bg-secondary);
74
73
  }
75
74
 
76
75
  .maincontainer {
package/ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts CHANGED
@@ -55,28 +55,27 @@ export class DeesAppuiMainmenu extends DeesElement {
55
55
  themeDefaultStyles,
56
56
  cssManager.defaultStyles,
57
57
  css`
58
- /* TODO: Migrate hardcoded values to --dees-* CSS variables */
59
58
  :host {
60
59
  --menu-width-expanded: 200px;
61
60
  --menu-width-collapsed: 56px;
62
- --tooltip-bg: ${cssManager.bdTheme('#18181b', '#fafafa')};
63
- --tooltip-fg: ${cssManager.bdTheme('#fafafa', '#18181b')};
61
+ --tooltip-bg: var(--dees-color-tooltip-bg);
62
+ --tooltip-fg: var(--dees-color-tooltip-fg);
64
63
  position: relative;
65
64
  display: block;
66
65
  height: 100%;
67
66
  }
68
67
 
69
68
  .mainContainer {
70
- color: ${cssManager.bdTheme('#666', '#ccc')};
69
+ color: var(--dees-color-text-secondary);
71
70
  z-index: ${zIndexLayers.fixed.appBar};
72
71
  display: flex;
73
72
  flex-direction: column;
74
73
  position: relative;
75
74
  width: var(--menu-width-expanded);
76
75
  height: 100%;
77
- background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
76
+ background: var(--dees-color-bg-secondary);
78
77
  user-select: none;
79
- border-right: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
78
+ border-right: 1px solid var(--dees-color-border-subtle);
80
79
  font-family: 'Geist Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
81
80
  transition: width 0.25s ease;
82
81
  }
@@ -94,23 +93,23 @@ export class DeesAppuiMainmenu extends DeesElement {
94
93
  width: 24px;
95
94
  height: 24px;
96
95
  border-radius: 50%;
97
- background: ${cssManager.bdTheme('#ffffff', '#27272a')};
98
- border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#3f3f46')};
96
+ background: var(--dees-color-bg-primary);
97
+ border: 1px solid var(--dees-color-border-strong);
99
98
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
100
99
  cursor: pointer;
101
100
  z-index: 10;
102
101
  display: flex;
103
102
  align-items: center;
104
103
  justify-content: center;
105
- color: ${cssManager.bdTheme('#737373', '#a1a1aa')};
104
+ color: var(--dees-color-text-muted);
106
105
  opacity: 0;
107
106
  transition: opacity 0.2s ease, background 0.15s ease;
108
107
  padding: 0;
109
108
  }
110
109
 
111
110
  .collapse-toggle:hover {
112
- background: ${cssManager.bdTheme('#f4f4f5', '#3f3f46')};
113
- color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
111
+ background: var(--dees-color-bg-tertiary);
112
+ color: var(--dees-color-text-primary);
114
113
  }
115
114
 
116
115
  :host(:hover) .collapse-toggle {
@@ -128,14 +127,14 @@ export class DeesAppuiMainmenu extends DeesElement {
128
127
  gap: 10px;
129
128
  height: 48px;
130
129
  padding: 0 14px;
131
- border-bottom: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
130
+ border-bottom: 1px solid var(--dees-color-border-subtle);
132
131
  flex-shrink: 0;
133
132
  box-sizing: border-box;
134
133
  }
135
134
 
136
135
  .logoSection .logoIcon {
137
136
  font-size: 22px;
138
- color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
137
+ color: var(--dees-color-text-primary);
139
138
  flex-shrink: 0;
140
139
  }
141
140
 
@@ -143,7 +142,7 @@ export class DeesAppuiMainmenu extends DeesElement {
143
142
  flex: 1;
144
143
  font-size: 15px;
145
144
  font-weight: 600;
146
- color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
145
+ color: var(--dees-color-text-primary);
147
146
  white-space: nowrap;
148
147
  overflow: hidden;
149
148
  text-overflow: ellipsis;
@@ -178,12 +177,12 @@ export class DeesAppuiMainmenu extends DeesElement {
178
177
  }
179
178
 
180
179
  .menuSection::-webkit-scrollbar-thumb {
181
- background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(255, 255, 255, 0.15)')};
180
+ background: var(--dees-color-scrollbar-thumb);
182
181
  border-radius: 3px;
183
182
  }
184
183
 
185
184
  .menuSection::-webkit-scrollbar-thumb:hover {
186
- background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.25)', 'rgba(255, 255, 255, 0.25)')};
185
+ background: var(--dees-color-scrollbar-thumb-hover);
187
186
  }
188
187
 
189
188
  /* Menu Group */
@@ -200,7 +199,7 @@ export class DeesAppuiMainmenu extends DeesElement {
200
199
  padding: 8px 12px 6px;
201
200
  font-size: 11px;
202
201
  font-weight: 600;
203
- color: ${cssManager.bdTheme('#737373', '#737373')};
202
+ color: var(--dees-color-text-muted);
204
203
  text-transform: uppercase;
205
204
  letter-spacing: 0.5px;
206
205
  white-space: nowrap;
@@ -238,21 +237,21 @@ export class DeesAppuiMainmenu extends DeesElement {
238
237
  border-radius: 6px;
239
238
  cursor: pointer;
240
239
  transition: all 0.15s ease;
241
- color: ${cssManager.bdTheme('#525252', '#a3a3a3')};
240
+ color: var(--dees-color-text-secondary);
242
241
  }
243
242
 
244
243
  .tab:hover {
245
- background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.06)')};
244
+ background: var(--dees-color-hover);
246
245
  color: ${cssManager.bdTheme('#262626', '#e5e5e5')};
247
246
  }
248
247
 
249
248
  .tab:active {
250
- background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')};
249
+ background: var(--dees-color-active);
251
250
  }
252
251
 
253
252
  .tab.selectedTab {
254
- background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')};
255
- color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
253
+ background: var(--dees-color-active);
254
+ color: var(--dees-color-text-primary);
256
255
  }
257
256
 
258
257
  .tab.selectedTab::before {
@@ -263,7 +262,7 @@ export class DeesAppuiMainmenu extends DeesElement {
263
262
  transform: translateY(-50%);
264
263
  width: 3px;
265
264
  height: 16px;
266
- background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
265
+ background: var(--dees-color-text-primary);
267
266
  border-radius: 0 2px 2px 0;
268
267
  }
269
268
 
@@ -353,23 +352,23 @@ export class DeesAppuiMainmenu extends DeesElement {
353
352
  }
354
353
 
355
354
  .badge.default {
356
- background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
357
- color: ${cssManager.bdTheme('#3f3f46', '#a1a1aa')};
355
+ background: var(--dees-color-badge-default-bg);
356
+ color: var(--dees-color-badge-default-fg);
358
357
  }
359
358
 
360
359
  .badge.success {
361
- background: ${cssManager.bdTheme('#dcfce7', '#14532d')};
362
- color: ${cssManager.bdTheme('#166534', '#4ade80')};
360
+ background: var(--dees-color-badge-success-bg);
361
+ color: var(--dees-color-badge-success-fg);
363
362
  }
364
363
 
365
364
  .badge.warning {
366
- background: ${cssManager.bdTheme('#fef3c7', '#451a03')};
367
- color: ${cssManager.bdTheme('#92400e', '#fbbf24')};
365
+ background: var(--dees-color-badge-warning-bg);
366
+ color: var(--dees-color-badge-warning-fg);
368
367
  }
369
368
 
370
369
  .badge.error {
371
- background: ${cssManager.bdTheme('#fee2e2', '#450a0a')};
372
- color: ${cssManager.bdTheme('#991b1b', '#f87171')};
370
+ background: var(--dees-color-badge-error-bg);
371
+ color: var(--dees-color-badge-error-fg);
373
372
  }
374
373
 
375
374
  :host([collapsed]) .badge {
@@ -380,7 +379,7 @@ export class DeesAppuiMainmenu extends DeesElement {
380
379
  .bottomSection {
381
380
  flex-shrink: 0;
382
381
  padding: 8px;
383
- border-top: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
382
+ border-top: 1px solid var(--dees-color-border-subtle);
384
383
  display: flex;
385
384
  flex-direction: column;
386
385
  gap: 2px;
package/ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.ts CHANGED
@@ -73,30 +73,29 @@ export class DeesAppuiSecondarymenu extends DeesElement {
73
73
  themeDefaultStyles,
74
74
  cssManager.defaultStyles,
75
75
  css`
76
- /* TODO: Migrate hardcoded values to --dees-* CSS variables */
77
76
  :host {
78
77
  --sidebar-width-expanded: 240px;
79
78
  --sidebar-width-collapsed: 56px;
80
- --sidebar-bg: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
81
- --sidebar-fg: ${cssManager.bdTheme('#525252', '#a3a3a3')};
82
- --sidebar-fg-muted: ${cssManager.bdTheme('#737373', '#737373')};
83
- --sidebar-fg-active: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
84
- --sidebar-border: ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
85
- --sidebar-hover: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.06)')};
86
- --sidebar-active: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')};
87
- --sidebar-accent: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
88
- --tooltip-bg: ${cssManager.bdTheme('#18181b', '#fafafa')};
89
- --tooltip-fg: ${cssManager.bdTheme('#fafafa', '#18181b')};
79
+ --sidebar-bg: var(--dees-color-bg-secondary);
80
+ --sidebar-fg: var(--dees-color-text-secondary);
81
+ --sidebar-fg-muted: var(--dees-color-text-muted);
82
+ --sidebar-fg-active: var(--dees-color-text-primary);
83
+ --sidebar-border: var(--dees-color-border-subtle);
84
+ --sidebar-hover: var(--dees-color-hover);
85
+ --sidebar-active: var(--dees-color-active);
86
+ --sidebar-accent: var(--dees-color-text-primary);
87
+ --tooltip-bg: var(--dees-color-tooltip-bg);
88
+ --tooltip-fg: var(--dees-color-tooltip-fg);
90
89
 
91
90
  /* Badge colors */
92
- --badge-default-bg: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
93
- --badge-default-fg: ${cssManager.bdTheme('#3f3f46', '#a1a1aa')};
94
- --badge-success-bg: ${cssManager.bdTheme('#dcfce7', '#14532d')};
95
- --badge-success-fg: ${cssManager.bdTheme('#166534', '#4ade80')};
96
- --badge-warning-bg: ${cssManager.bdTheme('#fef3c7', '#451a03')};
97
- --badge-warning-fg: ${cssManager.bdTheme('#92400e', '#fbbf24')};
98
- --badge-error-bg: ${cssManager.bdTheme('#fee2e2', '#450a0a')};
99
- --badge-error-fg: ${cssManager.bdTheme('#991b1b', '#f87171')};
91
+ --badge-default-bg: var(--dees-color-badge-default-bg);
92
+ --badge-default-fg: var(--dees-color-badge-default-fg);
93
+ --badge-success-bg: var(--dees-color-badge-success-bg);
94
+ --badge-success-fg: var(--dees-color-badge-success-fg);
95
+ --badge-warning-bg: var(--dees-color-badge-warning-bg);
96
+ --badge-warning-fg: var(--dees-color-badge-warning-fg);
97
+ --badge-error-bg: var(--dees-color-badge-error-bg);
98
+ --badge-error-fg: var(--dees-color-badge-error-fg);
100
99
 
101
100
  /* Action colors */
102
101
  --action-primary: ${cssManager.bdTheme('#2563eb', '#3b82f6')};
@@ -136,23 +135,23 @@ export class DeesAppuiSecondarymenu extends DeesElement {
136
135
  width: 24px;
137
136
  height: 24px;
138
137
  border-radius: 50%;
139
- background: ${cssManager.bdTheme('#ffffff', '#27272a')};
140
- border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#3f3f46')};
138
+ background: var(--dees-color-bg-primary);
139
+ border: 1px solid var(--dees-color-border-strong);
141
140
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
142
141
  cursor: pointer;
143
142
  z-index: 10;
144
143
  display: flex;
145
144
  align-items: center;
146
145
  justify-content: center;
147
- color: ${cssManager.bdTheme('#737373', '#a1a1aa')};
146
+ color: var(--dees-color-text-muted);
148
147
  opacity: 0;
149
148
  transition: opacity 0.2s ease, background 0.15s ease;
150
149
  padding: 0;
151
150
  }
152
151
 
153
152
  .collapse-toggle:hover {
154
- background: ${cssManager.bdTheme('#f4f4f5', '#3f3f46')};
155
- color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
153
+ background: var(--dees-color-bg-tertiary);
154
+ color: var(--dees-color-text-primary);
156
155
  }
157
156
 
158
157
  :host(:hover) .collapse-toggle {
@@ -215,12 +214,12 @@ export class DeesAppuiSecondarymenu extends DeesElement {
215
214
  }
216
215
 
217
216
  .menuSection::-webkit-scrollbar-thumb {
218
- background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(255, 255, 255, 0.15)')};
217
+ background: var(--dees-color-scrollbar-thumb);
219
218
  border-radius: 3px;
220
219
  }
221
220
 
222
221
  .menuSection::-webkit-scrollbar-thumb:hover {
223
- background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.25)', 'rgba(255, 255, 255, 0.25)')};
222
+ background: var(--dees-color-scrollbar-thumb-hover);
224
223
  }
225
224
 
226
225
  /* Menu Group */
@@ -261,7 +260,7 @@ export class DeesAppuiSecondarymenu extends DeesElement {
261
260
  gap: 8px;
262
261
  font-size: 11px;
263
262
  font-weight: 600;
264
- color: ${cssManager.bdTheme('#78716c', '#b5a99a')};
263
+ color: var(--dees-color-text-warm);
265
264
  text-transform: uppercase;
266
265
  letter-spacing: 0.5px;
267
266
  white-space: nowrap;
@@ -270,13 +269,13 @@ export class DeesAppuiSecondarymenu extends DeesElement {
270
269
 
271
270
  .groupHeader .groupTitle dees-icon {
272
271
  font-size: 16px;
273
- color: ${cssManager.bdTheme('#78716c', '#b5a99a')};
272
+ color: var(--dees-color-text-warm);
274
273
  }
275
274
 
276
275
  .groupHeader .chevron {
277
276
  font-size: 12px;
278
277
  transition: transform 0.2s ease;
279
- color: ${cssManager.bdTheme('#78716c', '#b5a99a')};
278
+ color: var(--dees-color-text-warm);
280
279
  }
281
280
 
282
281
  .groupHeader.collapsed .chevron {
package/ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.ts CHANGED
@@ -60,7 +60,6 @@ export class DeesAppuiTabs extends DeesElement {
60
60
  themeDefaultStyles,
61
61
  cssManager.defaultStyles,
62
62
  css`
63
- /* TODO: Migrate hardcoded values to --dees-* CSS variables */
64
63
  :host {
65
64
  display: block;
66
65
  position: relative;
@@ -76,7 +75,7 @@ export class DeesAppuiTabs extends DeesElement {
76
75
 
77
76
  .tabs-wrapper.horizontal-wrapper {
78
77
  height: 48px;
79
- border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
78
+ border-bottom: 1px solid var(--dees-color-border-default);
80
79
  box-sizing: border-box;
81
80
  overflow: hidden;
82
81
  display: flex;
@@ -133,13 +132,13 @@ export class DeesAppuiTabs extends DeesElement {
133
132
  .tab-actions.left {
134
133
  padding-left: 12px;
135
134
  padding-right: 8px;
136
- border-right: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
135
+ border-right: 1px solid var(--dees-color-border-default);
137
136
  }
138
137
 
139
138
  .tab-actions.right {
140
139
  padding-right: 12px;
141
140
  padding-left: 8px;
142
- border-left: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
141
+ border-left: 1px solid var(--dees-color-border-default);
143
142
  }
144
143
 
145
144
  .tab-action-button {
@@ -152,17 +151,17 @@ export class DeesAppuiTabs extends DeesElement {
152
151
  cursor: pointer;
153
152
  transition: background 0.15s ease, color 0.15s ease;
154
153
  background: transparent;
155
- color: ${cssManager.bdTheme('#71717a', '#71717a')};
154
+ color: var(--dees-color-text-muted);
156
155
  flex-shrink: 0;
157
156
  }
158
157
 
159
158
  .tab-action-button:hover {
160
- background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.06)')};
161
- color: ${cssManager.bdTheme('#09090b', '#fafafa')};
159
+ background: var(--dees-color-active);
160
+ color: var(--dees-color-text-primary);
162
161
  }
163
162
 
164
163
  .tab-action-button:active {
165
- background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
164
+ background: var(--dees-color-pressed);
166
165
  }
167
166
 
168
167
  .tab-action-button.disabled {
@@ -172,7 +171,7 @@ export class DeesAppuiTabs extends DeesElement {
172
171
 
173
172
  .tab-action-button.disabled:hover {
174
173
  background: transparent;
175
- color: ${cssManager.bdTheme('#71717a', '#71717a')};
174
+ color: var(--dees-color-text-muted);
176
175
  }
177
176
 
178
177
  .tab-action-button dees-icon {
@@ -237,12 +236,12 @@ export class DeesAppuiTabs extends DeesElement {
237
236
  font-size: 14px;
238
237
  gap: 2px;
239
238
  position: relative;
240
- background: ${cssManager.bdTheme('#f9fafb', '#18181b')};
239
+ background: var(--dees-color-bg-tertiary);
241
240
  border-radius: 8px;
242
241
  }
243
242
 
244
243
  .tab {
245
- color: ${cssManager.bdTheme('#71717a', '#71717a')};
244
+ color: var(--dees-color-text-muted);
246
245
  white-space: nowrap;
247
246
  cursor: pointer;
248
247
  transition: color 0.15s ease;
@@ -270,7 +269,7 @@ export class DeesAppuiTabs extends DeesElement {
270
269
  transform: translateY(-50%);
271
270
  height: 20px;
272
271
  width: 1px;
273
- background: ${cssManager.bdTheme('#e5e7eb', '#27272a')};
272
+ background: var(--dees-color-border-default);
274
273
  opacity: 0.5;
275
274
  }
276
275
 
@@ -291,11 +290,11 @@ export class DeesAppuiTabs extends DeesElement {
291
290
  }
292
291
 
293
292
  .tab:hover {
294
- color: ${cssManager.bdTheme('#09090b', '#fafafa')};
293
+ color: var(--dees-color-text-primary);
295
294
  }
296
295
 
297
296
  .horizontal .tab:hover {
298
- background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.03)', 'rgba(255, 255, 255, 0.03)')};
297
+ background: var(--dees-color-hover);
299
298
  }
300
299
 
301
300
  .horizontal .tab:hover::after,
@@ -308,7 +307,7 @@ export class DeesAppuiTabs extends DeesElement {
308
307
  }
309
308
 
310
309
  .horizontal .tab.selectedTab {
311
- color: ${cssManager.bdTheme('#09090b', '#fafafa')};
310
+ color: var(--dees-color-text-primary);
312
311
  }
313
312
 
314
313
  .horizontal .tab.selectedTab::after,
@@ -317,7 +316,7 @@ export class DeesAppuiTabs extends DeesElement {
317
316
  }
318
317
 
319
318
  .vertical .tab.selectedTab {
320
- color: ${cssManager.bdTheme('#09090b', '#fafafa')};
319
+ color: var(--dees-color-text-primary);
321
320
  }
322
321
 
323
322
  .tab dees-icon {
@@ -337,7 +336,7 @@ export class DeesAppuiTabs extends DeesElement {
337
336
  .tabs-wrapper .tabIndicator {
338
337
  height: 3px;
339
338
  bottom: 0;
340
- background: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
339
+ background: var(--dees-color-accent-primary);
341
340
  border-radius: 3px 3px 0 0;
342
341
  z-index: 3;
343
342
  }
@@ -350,7 +349,7 @@ export class DeesAppuiTabs extends DeesElement {
350
349
  left: 8px;
351
350
  right: 8px;
352
351
  border-radius: 6px;
353
- background: ${cssManager.bdTheme('#ffffff', '#27272a')};
352
+ background: var(--dees-color-bg-primary);
354
353
  z-index: 1;
355
354
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
356
355
  }
@@ -366,7 +365,7 @@ export class DeesAppuiTabs extends DeesElement {
366
365
  margin-left: 8px;
367
366
  opacity: 0.4;
368
367
  transition: opacity 0.15s, background 0.15s;
369
- color: ${cssManager.bdTheme('#71717a', '#71717a')};
368
+ color: var(--dees-color-text-muted);
370
369
  }
371
370
 
372
371
  .tab:hover .tab-close {
@@ -375,8 +374,8 @@ export class DeesAppuiTabs extends DeesElement {
375
374
 
376
375
  .tab-close:hover {
377
376
  opacity: 1;
378
- background: ${cssManager.bdTheme('rgba(0,0,0,0.1)', 'rgba(255,255,255,0.1)')};
379
- color: ${cssManager.bdTheme('#ef4444', '#f87171')};
377
+ background: var(--dees-color-pressed);
378
+ color: var(--dees-color-accent-error);
380
379
  }
381
380
 
382
381
  .tab.selectedTab .tab-close {